Home › Forums › WoodMart support forum › Please explain boxed and full-width container layout when it comes to WoodMart

Please explain boxed and full-width container layout when it comes to WoodMart

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • August 27, 2024 at 4:43 pm #592958

    markus
    Participant

    Hello,

    Somehow with WoodMart installed things behave differently when it comes to boxed vs. full-width layout. On top of that, there can be also a difference whether I am applying it on a parent container on an ordinary pages vs. the Elementor Theme Builder template e.g. for a post-single template.

    The first two screenshots in the attachment show a comparison of boxed vs. full-width on a) a site with Woodmart vs. b) a site without WoodMart.

    I know you have a special feature in XTemos Layout to apply “stretched container” however, I am troubleshooting something related to all of this, so I must first understand the basics in here.

    I wonder why would Woodmart impact something fundamental like that?

    My actual issue I am facing is something else but it’s related to this topic. The actual issue I am facing is actually even almost the opposite where the container is stretched even though it should be boxed.

    I am explaining it better in a video I am attaching in the private content!

    Thanks

    best regards
    Markus

    Attachments:
    You must be logged in to view attached files.
    August 30, 2024 at 10:43 am #593793

    Bogdan Donovan
    Keymaster

    Hello,

    The WoodMart theme was initially released in 2017, before the release of the Elementor builder, and was based on Bootstrap 4.0 layout. One of the core principles of our theme’s layout is the overall wrapper (container) of the site, which is consistent for the header, content, and footer, limiting the width and can be observed using any browser’s web inspector tools (https://monosnap.com/file/3aP9hCK7uqoDVf7jmlzKdAhdNM9Xd8). The wrapper (container) width is set to 1222px by default, and it can be further modified for all site pages in the theme settings section (https://monosnap.com/file/zJavohOjVSsAsW3Hx9b0CpHQ3oqSFz).

    Since by default, all page content, including content created using Elementor, is within this overall wrapper, it will always be limited to 1222px (or another width selected in the theme settings), regardless of what is chosen in Elementor’s “Content Width” option (https://monosnap.com/file/57fEW87J1DCMRENoqezbx93iiQaawe). In this case, the maximum Full Width value will always be the width of the site wrapper (container), not the screen width. To stretch Elementor widgets beyond the site’s general wrapper to the screen’s edges, you need to use our theme’s special “Container stretch” option (https://monosnap.com/file/fybksUs0Aj4abtjWE5wPJ7P3TJrRyi). Additionally, you can combine these options by stretching sections using “Container stretch” while also fine-tuning the content width with Elementor’s “Container width” option, as shown in this video (https://monosnap.com/file/ijOPrWEsX2Rpkuonw5H2T9dW4HbBXs).

    Alternatively, if this content structure principle doesn’t suit you, you can switch to the standard content structure used by the Elementor plugin. To do this, you need to disable the “Elementor sections negative margin” option in the theme settings (https://monosnap.com/file/6Ltrz2iHcwcK4oayDMEFmqSQg1V0Af) and activate the “Elementor Full Width” template in the page settings (https://monosnap.com/file/1iqETL7CFZhU8S1eiTbO6HL8kqAPia). After that, the 1222px site wrapper (container) that wraps the Elementor content will disappear, and the maximum width of each section will need to be adjusted separately using the “Content Width” option, as is standard in Elementor (https://monosnap.com/file/KmYzESFRLRCSt6TfpXqr8uTlze4nXS). It’s important to note that if you use the “Elementor Full Width” template, the theme’s “Container stretch” option does not need to be used, as the site wrapper (container) does not exist on this template, and all Elementor widgets are already stretched to full screen by default.

    In summary:

    If you are using the “Default” page template:
    – All widgets are limited by the site’s overall wrapper width (1222px).
    – You can stretch them beyond the wrapper (to the screen edges) only using the theme’s “Container stretch” option.
    – The “Content Width” options (boxed and full width) can only be used if you need to set the content width narrower than the site’s overall wrapper (1222px).

    If you are using the “Elementor Full Width” page template:
    – The general wrapper does not exist, and all Elementor widgets are already stretched to full width by default.
    – The content width for each section must be adjusted using Elementor’s “Content Width” options (boxed and full width).
    – The theme’s “Container stretch” options are not necessary.

    Kind Regards

    August 30, 2024 at 3:29 pm #593962

    markus
    Participant

    Thanks for the detailed explanation – it’s worth to even print it and repeat it daily to fully understand what’s going on under the hood. It’s not the first time I have seen those complicated situations when themes/plugins included something that was not available back then in native Elementor. But then Elementor Theme Builder was released and changed everything. The result is a confusing mixed state for anyone who does a bit more detailed work with the theme.

    I want to tackle my actual problem now:
    I need a boxed layout including the background to be boxed.

    For some reason the very same section looks different wheather it’s applied (pasted) into a normal page vs. a single post template in the Elementor Theme Builder. On a normal page I can change the template (what you have shown here https://monosnap.com/file/1iqETL7CFZhU8S1eiTbO6HL8kqAPia). But I am always just using the “Default template”. In the Theme Builder template you cannot change that template like you can on a normal WordPress page.

    The problem: I have a boxed section with a background image and it looks differently on a pages vs. the single post template. I copy/paste the very same section into it, and I get different results.

    See the attachments to get a better idea.

    As usual I am also providing a private recording to even better see what I am referring to.

    I think this way it should be clear where I am struggling with the theme behavior and hope you can show me how to reach that the best way (without too many workarounds of workarounds)

    Attachments:
    You must be logged in to view attached files.
    September 2, 2024 at 9:14 am #594312

    Bogdan Donovan
    Keymaster

    Based on its appearance, your site seems to be in maintenance mode, so we are unable to view its content. Please provide administrator access to the site so that we can log in and check the pages settings.

    Kind Regards

    September 2, 2024 at 9:19 am #594316

    markus
    Participant

    I think I should repeat it in every message, we don’t like to have screenshots of the site in development permanently on this support forum. Too bad that you don’t have a privat ticketing system. Please delete the link.

    You do have access to the backend of the site. It was already communicated within this conversation and also already used a few times. I am sharing it again in the private content.

    September 2, 2024 at 11:00 am #594379

    Bogdan Donovan
    Keymaster

    These pages look different because they were created in different ways and have different templates:

    – The “/faq/” page is a standard WordPress page using the “Default” theme template, which includes the global site wrapper.
    – The “/in-welchen-groessen-bietet-ihr-eure-zirbenkugeln-an/” page is a custom template created with the Elementor Pro Theme Builder (https://monosnap.com/file/TPzx0QL78KVcfT99GMZcdhnvtCL7rj). This page always uses the “Elementor Full Width” template by default, so it doesn’t include the global site wrapper.

    To make these pages look the same, you have a few options:

    1. To configure Elementor Pro Theme Builder pages, including “/in-welchen-groessen-bietet-ihr-eure-zirbenkugeln-an/”, the same way as the “/faq/” page, go to Theme Settings and enable the “Elementor sections negative margin” option (https://monosnap.com/file/XQSMdrOuLOqqKb4v9ZKenzVspGg8GC).

    2. To configure the “/faq/” page the same way as Elementor Pro Theme Builder pages like “/in-welchen-groessen-bietet-ihr-eure-zirbenkugeln-an/”, go to the page settings for “/faq/” and change the page template from Default to Elementor Full Width, as shown in this video (https://monosnap.com/file/aaLC3K8zklh3a5GaHnvhV9Zv9aOM3A).

    3. Alternatively, if you don’t want to unify the templates of both page types, you can customize the desired boxed appearance of your sections using existing standard Elementor options. In the first option “TEST 1,” you can use one container with Container Width: Full Width enabled and a set width equal to the site wrapper (https://monosnap.com/file/5giTD8maXa5OjVY8OfNuSY13WBN3EM). In the second option “TEST 2,” you can use nested containers where the outer container has Container Width: Boxed with no background (https://monosnap.com/file/8lQBSTuTUwAESU2X5DOilnByarWOQ7), and the background is applied to the inner container (https://monosnap.com/file/duJ170FiS1Yin2w8AsBM2I8lTGkdbd). For demonstration purposes, we’ve left the TEST1 and TEST2 sections in your “FAQ Single” but hidden their visibility so they won’t show on the frontend.

    Kind Regards

    September 2, 2024 at 1:07 pm #594454

    markus
    Participant

    Thanks a lot for that detailed reply – it’s really helpful.

    It also tells me though I should think twice if I want to use themes in the future. Things become just really complicated, often due to the fact on how things developed over time, especially if the theme must go hand in hand with a page builder. That means, you win time with a theme, but then you loose time with a theme as soon as you go a bit beyond the surface.

    In this entire discussion we didn’t even consider the “Site width” settings in General > Layout. Another things that must be considered and that impacts everything else I suppose. For reference General > Layout > Site width is currently set to Full width on my site.

    —-

    ad 1 “Elementor sections negative margin”
    I can see the result on the Elementor Pro Theme Builder template (single post template), and it seems with that setting enabled I am getting to where I want to go (i.e. provide the same boxed layout for a hero section with background image no matter wheather its a normal page (based on the Default Template) or an Elementor Pro Theme Builder template)

    But I also wonder what other impact this setting has when I enable it. It says it does the following under “Elementor sections negative margin”:
    > Add a negative margin to each Elementor section to align the content with your website container.

    I honestly can’t say if the naming of the setting and the description is accurate. When you think of the naming/description it sounds like something completely different.

    I hope we can clarify and finish this up together.

    What I am observing is the following:

    A) Looking at Elementor Pro Theme Builder template (e.g. single post template)

    • Elementor sections negative margin enableld → it adds the boxed wrapper container around all the sections
    • Elementor sections negative margin disabled → there is no boxed wrapper container around the section

    B) Looking at a normal Elementor Page based on the Default Template

    • Elementor sections negative margin enableld → it adds the boxed wrapper container around all the sections
    • Elementor sections negative margin disabled → it adds the boxed wrapper container around all the sections

    → that means the setting “Elementor sections negative margin” is obviously not impacting anything here

    C) Looking at a normal Elementor Page based on the Elementor Full Widht template
    → similar results as previously with the Elementor Pro Theme builder template

    Before I decide which approach I am going to implement, I am trying to actually understand it.

    If I understand things correctly, I think the feature is better named “Add content wrapper around Elementor sections on Elementor Full Width page template and Elementor Pro Theme Builder templates” instead of “Elementor sections negative margin”.

    —-

    ad 3
    By the way, I thought about nesting containers myself as well – good to hear this possible solution from your end as well.

    —-

    I read a few hours in the forum, and tested many hours and I am surprised this didn’t come up more often – it seems to be such a fundamental thing with the entire theme.

    Thanks for your support! It does make things better.

    • This reply was modified 3 months, 1 week ago by markus.
    Attachments:
    You must be logged in to view attached files.
    September 2, 2024 at 3:52 pm #594530

    Bogdan Donovan
    Keymaster

    1. General > Layout > “Site width” option.

    The site width option controls the width and behavior of the site’s wrapper when it is present on the site (https://monosnap.com/file/gDEB736xXjMQTX3YjY2TxP1CjWBuQr).

    Overall, the site width option parameters can be categorized into three types:

    – Boxed – The content is constrained within the site wrapper, which is highlighted with a shadow, and any content extending beyond it is cut off. https://monosnap.com/file/FPTHXJ0hOLl36wUUHgOIrMOZUFiZip
    – Full Width – The content is stretched to the width of the site wrapper, but the wrapper is not highlighted, and the content is not cut off. The wrapper width is preset to 1222px. https://monosnap.com/file/NFlsWFHzZGxipuQzAwZFjWjGdvPykh
    – Full Width Content – The wrapper width matches the site width without any limitations, so the content within the wrapper is stretched to cover the entire screen. https://monosnap.com/file/6Lq6QeSGvrxPvVYOafoksvfKTS2MRu

    As mentioned earlier, the presence of the wrapper on the site depends on the which template being enabled and if “Elementor sections negative margin” option is active.

    2. “Elementor sections negative margin” option explanation.
    The main purpose of this option is to ensure that content created in Elementor always aligns with the site wrapper. If older Elementor widgets “rows and columns” are used, this option adds negative margins to the rows so that their width matches the site wrapper. If “containers” widgets are used, it overrides Elementor’s default width of 1140px with the site width set in the Theme Settings (https://monosnap.com/file/zkm9HyQYChD6byJStVEXyNwTpbFCpp). Since Elementor only recently fully transitioned from using rows and columns to containers, and our theme has thousands of clients who haven’t fully adopted containers yet, the option’s name is still associated with margins.

    Another key feature of this option is that when it is enabled, the “Elementor Full Width” template cannot be used on the site. This was done to ensure that the code for this option doesn’t interfere with Elementor’s standard properties, and users who wish to switch to “Elementor Full Width” must deliberately disable it. Unfortunately, it’s not technically feasible to automatically check the template of each page before applying this option.

    In future updates, we are considering renaming this option to something more intuitive for users of the “container” widget.

    3. “Elementor sections negative margin” option and page templates combinations.
    The Elementor Pro Theme Builder template always uses the Elementor Full Width layout for pages created with it, so the behavior on these pages will be consistent.

    A) Looking at Elementor Pro Theme Builder template,
    C) Looking at a normal Elementor Page based on the Elementor Full Widht template
    Elementor sections negative margin enableld → There is a default wrapper around all the content created with Elementor that will match the value specified in the Site Width setting in Theme Settings (default is 1222px). The “Width” option of all container widgets by default will be 1222px (or the value specified in the Site Width option in the Theme Settings) instead of Elementor’s standard 1140px.
    Elementor sections negative margin disabled → The wrapper around the content created with Elementor is absent. All container widgets stretch to the full width of the screen (unless specified otherwise in each container). There are no connections to the Site Width option in the Theme Settings. The default width for boxed content is the standard 1140px used by Elementor.

    B) Looking at a normal Elementor Page based on the Default Template
    Elementor sections negative margin enabled → There is a default wrapper around all the content created with Elementor that will match the value specified in the Site Width setting in Theme Settings (default is 1222px). The “Width” option of all container widgets by default will be 1222px (or the value specified in the Site Width option in the Theme Settings) instead of Elementor’s standard 1140px.
    Elementor sections negative margin disabled → There is a default wrapper around all the content created with Elementor that will match the value specified in the Site Width setting in Theme Settings (default is 1222px). There are no connections to the Site Width option in the Theme Settings. The default width for boxed content is the standard 1140px used by Elementor.

    Kind Regards

    September 3, 2024 at 1:10 pm #594862

    markus
    Participant

    Thanks a lot Bodgdan for running the extra mile with me here – while it’s challenging to accept that those things become so much more difficult due to the combination of Elementor + WoodMart and the development of both products over time, it’s good to see how your support makes up for that.

    I’ll definitely go over your message and this conversation a few times in the next days, as it takes quite a bit of time to get it into my brain and fully comprehend.

    It seems the “Elementor sections negative margin” solution will work for me.

    Fingers crossed I don’t run into anything else in that regeard.

    best regards
    Markus

    September 3, 2024 at 2:07 pm #594889

    Bogdan Donovan
    Keymaster

    You are welcome.

    Kind Regards

    September 4, 2024 at 11:49 am #595122

    markus
    Participant

    Hi Bogdan,

    I am still analyzing, comparing, trying to understand .. one quick question that came up, do you think it’s recommended or even mandatory to set the Elementor Site Settings > Layout > Content Width to 1222px to aling it with WoodMart default settings?

    Elementor default content widht is 1140px

    I am still on it to figuer out when this Elementor setting matters, and when it doesn’t (as this all is just much more complicated with WoodMart and the possible WoodMart settings enabled).

    Attachments:
    You must be logged in to view attached files.
    September 5, 2024 at 9:31 am #595365

    Bogdan Donovan
    Keymaster

    Hi,

    The “Content Width” option found in Elementor Site Settings (https://monosnap.com/file/Na7L2XLKXQk6m1wvq2F2D4eG5ROzO3) sets the default width for all container content (https://monosnap.com/file/mFIvZdLNo25O8dRQZq3IjVi7TUbvJu). However, as mentioned in the previous response, if the “Elementor Sections Negative Margin” option is enabled, the container widget width option will take its default value not from Elementor Site Settings, but from the WoodMart Theme Settings. It was done to unify content width between WordPress, WooCommerce and Elementor pages, allowing adjustments from one place and ensuring the ability to create demo import predefined sites with varying website wrapper widths.

    In summary, if you have enabled the “Elementor Sections Negative Margin” option, changes to the Site Settings > Layout > Content Width will have no effect. Lastly, despite the default value being taken from the Theme Settings instead of Elementor’s global settings in this case, you can still set a custom width on a per-section basis by overriding the standard value with your own (https://monosnap.com/file/feXfH3o9Q81L2Eu4aBx8ePxNu67jkM).

    Kind Regards

    September 5, 2024 at 1:43 pm #595461

    markus
    Participant

    Thanks again – yes I understood that the Elementor setting about the Content Width will be overwritten/ignored when “Elementor Sections Negative Margin” is enabled.

    I was still not sure if I’ll enable/disable it as it required me to test all possible different URLs

    i.e. pages on default template, posts and custom post types based on WoodMart native theme template, posts and custom post types based on Elementor Theme Builder instead of WoodMart native theme template, archive/taxonomy pages based on WoodMart native theme template, archive/taxonomy pages based on Elementor Theme Builder. Then on each of those pages with and without Elementor fullwidth containers, nested containers …

    It seems I’ll enable the setting and use the “WoodMart stretching feature” on parent-containers (previously called Elementor sections) when needed. In that case I don’t have to match the Elementor settings with the WoodMart default settings of 1222px as you pointd out

    I don’t know how I got myself into all this – it seems as soon as you start extending a theme e.g. add own CPT and Elementor templates then things become overly complicated.

    Lessons learned so far: use a theme and stick ot the theme settings only (no custom templates, no custom loops, no custom anything) or go theme-less.

    Thanks for your ongoing support in this challenge

    best regards
    Markus

    September 10, 2024 at 9:28 am #596327

    Luke Nielsen
    Keymaster

    Hello,

    Always remember that you can reach out to us with any questions you may have.

    Thank you for your time and patience.

    Kind Regards

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Please explain boxed and full-width container layout when it comes to WoodMart’ is closed to new replies.