[Resolved] Guidance on Layout Setup for a Site using GeneratePress + GenerateBlocks

[hichb]

I hope you’re doing well. I am returning to a project after a long absence and I am feeling lost with the changes that have occurred in GenerateBlocks and new layout options. I would like guidance on how to set up the layout for a specific site that needs to be rebuilt on GeneratePress + GenerateBlocks.

The site in question is https://thefashionglobe.com and my question is regarding the hero section where it says “Beyond what is a la mode.” What would be the best approach to set up the layout for this section using grid, container, and flex to make it responsive?

My current approach is to use this layout structure: https://tinyurl.com/2prsp4d8. However, I am unsure whether to use one headline or two for “Beyond what is a la mode”. If it is one, what should the max-width of the container be, and what are some options to avoid the text overlapping the container? The headline should be displayed in two lines always.

Other than this, if you could explain the settings for the containers as well, that would be helpful. I’m having a hard time understanding when to use grid, flex, or no grid and no flex.

Reference to the old recommendations from you: https://generatepress.com/forums/topic/custom-headline-with-margins/#post-1849408

Thank you so much!

[Ying]

Hi Hich,

What would be the best approach to set up the layout for this section using grid, container, and flex to make it responsive?

Your current layout should work.

If it is one, what should the max-width of the container be, and what are some options to avoid the text overlapping the container? The headline should be displayed in two lines always.

The current website is using 1170px as the max-width.

Here’s the doc of container block, you should be able to find a lot of info： https://docs.generateblocks.com/article/container-overview/

[hichb]

Hello,

Thank you for your response, I appreciate your support. However, I think I may have been unclear in my initial request. The original website was built using Elementor, but we are now rebuilding it using GeneratePress (GP). We want to ensure that we use the best approach to make the layout responsive in GP. I know that there are multiple ways to structure the layout for achieving the same results, but we want to ensure that we do it properly.

In the GP library, the parent container is set to a maximum width of 6000 pixels. The position is set to relative and overflow X and Y are hidden. The second level of container is set to default, with position set to relative, z-index 1, and padding set to center the content. I believe it makes sense to create these two containers following the GP model for the Hero section. Correct?

Regarding the headline, I used a grid and a container inside the grid. The goal is to display the “Beyond what is a la mode” headline in two lines (not one). That’s why I used two Headlines in this particular container. Please correct me if I’m wrong.

I am wondering if I can use a single headline and set up a percentage for the grid column to display the headline in two lines, which may be more elegant. However, it could be more difficult to control the display. Alternatively, I could set up a width of 950 pixels (as seen in the picture: https://www.awesomescreenshot.com/image/38664348?key=dec07241ae147c0aa997b476d962ad0d), but then I’m not sure if this is a good approach for responsiveness. Maybe I should use a percentage instead. I would appreciate if you could provide more specific guidance in your response.

Thank you for your help.

[Fernando]

1. Using a Container with an inner Container would be the way to create this. Make sure that the inner Container has these two layout settings:

max-width: 1300px;
min-height: 100vh;

References:

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

2. You could also just make the inner Container display: flex. Set the flex-direction to column and align the two Headline Blocks to your preference.

3. Make the width of the two Headline Blocks 100%.

This should create the Page Hero you’re going for with the most minimal markup.

[hichb]

Hello,

I need help understanding how the layout from the GeneratePress (GP) library was set up. Here is the link to the layout: https://tinyurl.com/23m884gl. I noticed that the max-width of the inner container is set to 6000 pixels. Therefore, I assumed that it was a good practice to set the max-width of my inner container to 6000 pixels as well.

Based on this assumption, I set up my layout and inner container with a max-width of 6000 pixels. However, for the grid and the additional container that contains the headlines, I set up a width of 950 pixels. The layout is displaying well, but I cannot set a max-width for these containers. Here is a link to a picture of my layout structure: https://tinyurl.com/242ts22f.

Based on this structure, I cannot implement your suggestions.

I would appreciate it if you could help me understand how the GP layout was set up, and provide guidance on how to properly set the max-width for my containers.

Thank you for your help.

[Leo]

I can’t see the benefit of setting it to 6000px.

Can you let me know which site you’ve imported?

[hichb]

Hi Leo, those are the layout of the library pattern from GenerateBlocks. Here is an example: https://generateblocks.com/library/?pattern-category=hero&pattern-preview=3204

[hichb]

I noticed that many layouts in the GB library are using an inner container with 6000px as max-width. Don’t understand!

[David]

Hi there,

go to Dashboard > GenerateBlocks -> Settings and change your GLOBAL MAX-WIDTH

[hichb]

Hi, sorry but my question is not about how to set up the max-width.I’m asking why is the layout of GB set to 6000 px. I’m just asking from specific guidance on the layout structure and best approach to do it.
Thanks a lot!

[hichb]

Thank you I figured out!

[David]

Glad to hear that

[Author]

Posts