How to create section with a width equal to the page width defined by my theme?

  • Resolved cag8f

    (@cag8f)


    5 years, 6 months ago

    Hello. On my page, my theme (Spacious) defines the max-width of the content to be 1218 px (screenshot). On this page, using Elementor, I would like to add a new three-column section to my page, and have its width be identical to the width defined by my theme. What is the proper way to do this?

    The only way I have found is to insert a 3-column section, open the Layout for that section, stretch the width, specify Boxed for ‘Content Width,’ then manually enter 1218 px into the field below ‘Content Width.’ Is there any way to simply tell Elementor that the max-width of this element should be identical to that defined by my theme?

    Thanks.

Viewing 7 replies - 1 through 7 (of 7 total)

  • Use the Page Layout of Elementor-Full Width, and use Full Width instead of Boxed for Content Width. Don’t use Stretch unless there is no other way.

    Go to Elementor > Settings > Style and set your Content Width there.

    Thread Starter cag8f

    (@cag8f)

    @cavalierlife OK thanks for the instructions. I gave them a shot, but am still having issues. Here is what I did:

    1. Open Elementor –> Settings–> Global Settings –> Style and set Content Width to 1218 px (screenshot).

    2. Insert a new 3-column Elementor section onto the page.

    3. Insert an Image Box element into each of the three new columns.

    4. Edit the layout of the 3-column section. Ensure ‘Stretch’ is set to ‘no’ and ‘Content Width’ is set to ‘Full Width’ (screenshot).

    5. Save changes.

    6. Open front-end of page. When I do so, that new section is still only 750 px wide (screenshot).

    Thoughts? Did I misunderstand something, or miss a step?

    As a test, I changed ‘Stretch’ to ‘yes’ and set ‘Content Width’ to ‘Boxed.’ When I did so, the section seemed to take on the desired width (1218 px; screenshot).

    Thanks.

    You forgot to set the Page Layout to Elementor Full Width. Click the gear icon in the lower left of the widget panel to get to the Page Settings. There, change the Page Layout, which is probably on Default to Elementor Full Width.

    Thread Starter cag8f

    (@cag8f)

    OK great, that worked–thanks for the help!

    We can consider this resolved.

    Thread Starter cag8f

    (@cag8f)

    Actually wait. So in the section ‘Layout’ settings, should ‘Content Width’ be set to ‘boxed’ or ‘full width?’ When I set it to ‘boxed,’ it has the desired width. If I set it to ‘full width,’ then its width stretches to the full width of the screen.

    In your case, boxed is the way to go now. You have it all set up correctly now.

    Thread Starter cag8f

    (@cag8f)

    Great thanks very much.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to create section with a width equal to the page width defined by my theme?’ is closed to new replies.