-
Hi!
I created a hero header and I want the text overlay to be a grid with a row that has 4 horizontal columns (boxes) with links.
First – how do I put a container in the text part and then put a grid within it to create the 4 boxes?Appreciate your help.
Thanks. -
Hi CesRosales,
For reference, do you have a sketch or a reference site that has such a layout?
When you say 4 horizontal columns, are you referring to 4 rows?
-
Hi Fernando!
I am referring to one (1) row with four (4) columns.
I am essentially trying to re-create something similar to the “Explore” theme’s front page. Replacing it with my own items and text.Thanks,
Ces -
I see. You need two Container Blocks. One for the Page Hero, and another for the Grid.
For the Container For the Grid, set it to have 4 columns.
The 4 columns/Container Blocks under the Grid Block should have 25% widths. Reference: https://docs.generateblocks.com/article/sizing-options-overview/#width
Then, a Horizontal Gap is set as well: https://docs.generateblocks.com/article/grid-overview/#horizontal-gap
Give this Container Block a negative margin value to put it on top of the Page Hero. Reference: https://docs.generateblocks.com/article/spacing-options-overview/
-
Thank you, Fernando!
That fixed the horizontal alignment problems.
But do you have an answer for making the grid go a quarter below the Hero photo (as it looks in the “explore” theme?
Appreciate your help.
Ces -
This one should place it over the Page Hero:
Give this Container Block a negative margin value to put it on top of the Page Hero. Reference: https://docs.generateblocks.com/article/spacing-options-overview/
-
Hello Fernando!
I do not want the grid to go over the Page Hero. I need the grid to be offset (at the bottom) from the Hero photo by at least 50%. How is that done?
Please look again at the “explore” theme. the Grid photos sit halfway below the Hero photo.
A negative margin value on the Container Block to create that effect does not work.
Appreciate your help.
Thanks,
Ces -
A negative margin should work. That’s exactly how that section in explore is made.
Can you provide admin login credentials so we can check why it isn’t working?
-
Hi!
Funny thing is, I tried everything: negative margin; positive margin; paddings; Making sure I was working with the correct Container; checking the inner Containers, Display settings (Default, flex) etc.
Going back and forth and back and forth. I could be given a medal for patience.Suddenly, out of the blue – BAM! It worked! Not sure exactly what I did differently that made it work because I know I tried it before – a TOP Margin setting. Not a negative setting; but a positive 100px. Which was the first one I tried from the very beginning. Why it worked this time, I don’t know. I sure hope it stays.
Thank you, Fernando. I know you gave me information that should fix it. But the negative number didn’t. I think, in desperation – I just tried every possible combination. ANd it worked.
Thank you for your patience.
Ces -
I see. Glad you got it working. You’re welcome, Ces!
- You must be logged in to reply to this topic.