Grid element question

[xoa]

Hi there, I have two short questions about the Grid element in Pro Content Builder.

I attached a image for better explanation.

1. As you can see, I have three blocks. How can I set the 3rd to the up the whole line and not just 50%?

2. How can I zoom the background image a bit when hovering the block? As the whole block should be a link, I set a background image for all of my blocks and then added a transparent button to link the block to a page.

Thanks for helping me!

[nabeel]

Hi @xoa,

Thank you for reaching out to us.

1. To adjust the layout of each cell, In content builder hover over your Grid element and click on the grid icon (see screenshot)

Now hover over the third cell and drag (click on the bracket icon and start dragging) it to right to fill both columns (see screenshots)

2. This would require customization as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it. Here’s a guide i found for zooming background images https://css-tricks.com/zooming-background-images/

What you can do is, inspect each cell and in Element CSS you can paste the following code:

$el {
  transition: ease-in-out all 0.3s;
}
$el:hover {
  transform: scale(1.03);
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this helps!