Return to previous page

Creating a full width container on a page that uses Flexbox containers instead of sections.

This topic has 2 replies, 2 voices, and was last updated 1 months, 4 weeks ago ago by Tony Rodriguez

Clau8826

Participant

March 7, 2024 at 07:46

Hi,

I wanted to ask something about how I can create a full width container on a page while other containers maintain the normal width.

I looked at your demo here https://xstore.8theme.com/elementor/demos/minimal-fashion02/

The homepage contains such an element and I wanted to do something similar on another page. And after playing with the imported content I saw the theme uses the “old” type of rows called “sections”

However when I create a new page and edit it with elementor my new rows are now called “container” because it uses the new Flexbox container method elementor has.

Which is ok, but these flexbox container DO NOT have the tick box in the layout option to stretch them full width like the sections you have on the demo homepage.
And If i set them as full width from the layout option they are still constrained in the website content width.

So, In order to actually make the container full width i noticed i had to choose as the page template “elementor full width” and then choose the containers i want boxed as boxed.

So I guess my question is, is this correct way of doing it or am I missing something?
And if this is correct and this is the correct way of creating full width rows now, does choosing the “elementor full width” page template have any influence at all? All I noticed is that this template is missing an extra 5px padding left and right to containers and some bottom margin, but other than that they appear to be similar templates

Thank you

#385921 Copied Theme version: 9

1 Answer

Tony Rodriguez

Support staff

March 7, 2024 at 09:29

Hello, @Clau8826,

Thank you for contacting us and for using XStore.

Yes, you’ve correctly identified one of the ways to create full-width containers in Elementor. By choosing the “Elementor Full Width” page template and then setting specific containers as “boxed or full width,” you can achieve the layout you want.

If you notice that the “Elementor Full Width” template has some differences in padding and margin compared to the regular template, you can manually adjust those settings in Elementor to match your design preferences. In Elementor, you can set custom margins and padding for each section, column, or widget.

If you need full-width containers within Elementor, you can use the “Elementor Full Width” page template and then customize individual containers as needed. Adjusting the padding and margin settings within Elementor allows you to fine-tune the layout to your specifications.

You can enable stretch for sections – https://elementor.com/help/how-to-create-a-full-width-page/

https://elementor.com/help/container-layout-tab-settings/

We hope this helps.

Best regards,
The 8Theme Team

#385934 Copied
Tagged: customizable wordpress themes, flexbox containers, full width container, page design, responsive design, website layout, woocommerce wordpress themes
Viewing 2 results - 1 through 2 (of 2 total)