[Resolved] Guidance on Achieving a Simple Content Layout Under Hero Section

[hichb]

Hello,

I hope you’re doing well! I’m trying to create a simple content layout under my hero section, as shown in this example:

https://www.awesomescreenshot.com/image/38851750?key=b4c2329e3f839c8735409e4a6d0c2a3e

Could you please advise me on the proper structure to achieve this layout and make it responsive? I’m wondering which elements I should use, such as containers, sub-containers, grids, headlines, etc.

I appreciate your guidance and support. Looking forward to your response!

[Ying]

Hi there,

The layout can be achieved using a structure like this:

- container (set max-width/paddings, display:flex, align-items:top) 
 -- container left (flex-basis: 40%)
    --- headline
 -- container right (flex-basis: 60%)
    --- headline title
    --- paragraph

[hichb]

Hi Ying,

I appreciate all the help you’ve provided so far! However, I’m still having some difficulties understanding the Flex property and setting it up in Generate Blocks. I need assistance with configuring “flex-basis: 40%” for the sub-container and aligning items at the top for the main container (setting max-width/paddings, display:flex, align-items:top).

Plus what values should I insert for the padding in percentage or pixels?

Could you please take a look at my development site and provide some guidance on how to achieve this? Here’s the link: https://wordpress-273320-3083586.cloudwaysapps.com/home-page

Thank you so much for your support!

[Ying]

I need assistance with configuring “flex-basis: 40%” for the sub-container and aligning items at the top for the main container (setting max-width/paddings, display:flex, align-items:top).

This is the documentation of the layout panel:https://docs.generateblocks.com/article/layout-options-overview/

For specific properties:
Flex-basis:https://docs.generateblocks.com/article/layout-options-overview/#flex-child
Flex options:https://docs.generateblocks.com/article/layout-options-overview/#flex

Plus what values should I insert for the padding in percentage or pixels?

It depends on your design, I personally prefer 40px left/right padding for the desktop, 30px for tablet and 20px for mobile.

Could you please take a look at my development site and provide some guidance on how to achieve this?

Use Row as the flex-direction for the parent container.

[hichb]

Thanks for your answer!

I’m trying to align the content more in the center and set a max-width for the parent container. However, when I set the max-width (e.g., 1200px), the content of the two columns aligns to the left instead of the center.

Should I add another container on top of the existing containers with a max-width? Here’s the layout I’m aiming for: https://thefashionglobe.com/. And this is what I currently have: https://wordpress-273320-3083586.cloudwaysapps.com/home-page

Please note, “about us” is aligned with the logo of the site and the paragraph seems to be aligned right in the center.

Your help is greatly appreciated!

Thank you!

[David]

Hi there,

when you add a Container Block to the top level of the page, in the blocks toolbar you will see an option to Insert Inner Container Block:

https://docs.generateblocks.com/article/add-inner-container/

Click that, its a shortcut, what it does is:

1. adds a Container Block inside
2. it sets that Containers > Sizing > Max Width to the Global Width
3. it sets that Containers > Spacing > Margin Left & Right to auto which is what centers that container inside its full width parent.

Make this inside container your Layout > Flex Container and move your content inside that

[hichb]

Great! I’ve made progress with the horizontal alignment, thanks to your guidance. However, I’m facing an issue with the vertical alignment on the dev site. Currently, the content of both columns is aligned at the top. If I use flex center, it aligns both the “About Us” section and the paragraph vertically in the center.

I would like the “About Us” section to be aligned at the top, while the paragraph is centered vertically. Please check the link to the layout I’m aiming for that I posted previously to better understand what I’m looking for!

Gracias.

[David]

The inner Container that you set the Layout to Flex, in the Layout settings you can set the Align items to Flex Start

[hichb]

Are you referring to this container: https://tinyurl.com/26m9qtly
You can see that the Flex is set to Start but the content is still not aligned like what I’d like to achieve: https://wordpress-273320-3083586.cloudwaysapps.com/home-page
Sorry, I might be missing something! 🙂

[Ying]

The alignment looks to match the screenshot in your original post.

Now you just need to teak the typography of the headlines and paragraphs.

[hichb]

Are you referring to this container: https://tinyurl.com/26m9qtly
You can see that the Flex is set to Start but the content is still not aligned like what I’d like to achieve: https://wordpress-273320-3083586.cloudwaysapps.com/home-page
Sorry, I might be missing something! 🙂

[hichb]

I repeat, as it seems that Ying has misunderstood me!:) Here’s the layout I’m aiming for: https://thefashionglobe.com/. And this is what I currently have: https://wordpress-273320-3083586.cloudwaysapps.com/home-page

[Ying]

On your Elementor site, the about us section width is 30%, the text section is 47.846%, to have an exact match, you can change the flex-basis to these 2 values.

Then add some padding on top of the container, it looks pretty much the same to me.

[hichb]

Then add some padding on top of the container, it looks pretty much the same to me.

On top of which containers precisely should I add the padding?

[hichb]

Hello,

I managed to add padding to the top using the inner container, but I’m not sure if this is the best approach with all the flex options available. Could you please let me know in case there’s a better way?

Additionally, I’d like to add a small red divider under the “About Us” section. What would be the best approach to achieve this using GenerateBlocks?

Thank you once again for your ongoing support! It’s truly appreciated.

[Author]

Posts