First steps with WoodMart – need some advice

Hello,

We started playing with WoodMart and we have some questions on what are the best practices of working with it. Please be so kind and point me in the right direction.

We are testing WoodMart with Elementor on dev.wellnessist.ro and WoodMart with Gutenberg on test.wellnessist.ro. The idea is to build the exact same website an see which one is easier to build and which one has better loading speed. Can I make the theme settings on one website, export them and them import them on the other site in order not to do all the settings twice? If yes, will that include the headers, logo in the headers, etc?

I like the Categories vertical menu from the Default WoodMart prebuilt template: https://share.zight.com/X6u6gLO0 . Can I make it open only on hover, like this? https://share.zight.com/5zuq4Zz4

For the mobile menu, can I have the Content part below the Categories part, like this? https://share.zight.com/OAuyp9Yx

How are the typography settings applied? I modified the Base font from 15 px to 18 px but I’m not sure the settings were applied. On product cards they seem to be working, but on some other sections they don’t seem to be applied. Look at dev.wellnessist.ro website, it’s WoodMart with Elementor. Can it be that the settings were applied on the WoodMart elements but not on the sections build in Elementor. If that’s the case, how can I make Elementor to apply the same settings for typography and spacing as those set in the theme?

Does WoodMart have an automatic scaling applied for fonts/spacings for fluid responsiveness or do I have to set the spacings in px for element and for each breakpoint? I see that I can set the font size for each available screen size, but it would be easier if we could insert the font size for the biggest screen and the font size for the smallest screen and then have the theme calculate the font size for each screen size in between.
What would be the most efficient workflow to obtain a website that is easy to maintain from this point of view? Do you take into consideration to include support for CSS variables in the theme in the future? I am used to frameworks like Automatic CSS and Core Framework which are very helpful in managing the spacing / typography and other CSS properties in an easy to maintain way. I assume that for the WoodMart + Gutenberg I could try to use CoreFramework or ACSS as they are compatible with Gutenberg but I’m not sure how will they play with the blocks created by XTemos. Any thoughts on this?

Thank you.

Best Regards,

Hello,

01. To add browse categories in the header, navigate to WoodMart > Header builder > edit current header > add the browse categories elements in the header and choose the categories menu: https://postimg.cc/YLtmBdc3

You can set the “Browse Category” menu to always close via the settings of the page (Dashboard -> Pages), At the bottom, find the “Page settings” area and turn off the “Open categories menu” option: https://postimg.cc/4mzF5dP5

02. Navigate to WoodMart > Header Builder > Edit current header > Switch to mobile header and add the mobile menu element. For the mobile configuration, navigate to Appearance > Menu > Choose the display location as mobile. Also, add the menu icon like the example and mega menu.

Here is the documentation about the header builder:
https://xtemos.com/docs-topic/woodmart-header-builder/

03. For the Typography settings > navigate to Theme Settings > Typography and change the font settings.

Here is the documentation providing more detailed instructions: https://xtemos.com/docs/woodmart/advanced-typography-settings/

Best Regards,

[Author]

Posts