Each type of section has their own settings to configure. But there are a lot of common settings that each section shares. These type of settings will be covered here.
Section Header Settings
Each section has a header that displays heading text along with an introductory paragraph. This usually tells visitors what type of section it is, such as a “Latest Products” section.
This is the title of the section. It’s a good idea to have a title for each section, even if you don’t intend to display it, it can still be useful for screen reading devices.
Example – “Latest Products”
This is an optional paragraph used to give a brief description of the section.
Example – “View our latest and best selling products.”
Choose either the default or minimal style for the heading. The minimal style will use a reduced font size for the heading text and hide the introduction text.
There are three options available for this. By default the header will be visible. You can also choose to display it only on desktop and hide on mobile, or hide it entirely. Hiding it entirely will only hide it from view. The markup will still be available to search engines and screen reading devices will be able to see it.
This determines the amount of spacing in pixels for the bottom of the header.
There will be various color settings available throughout each different section, but the most common ones are for the heading text and background color. To change color, simply click on the color pane and use the color picker tool to select a new color.
All of the background settings allow you to upload a background image and then customize the size, position and repeat behaviour.
This group of settings allows you to manage the amount spacing (or padding) at the top and bottom of a section. You can also have separate settings when viewed on mobile devices. Simply move the handles to adjust the values.
By default each section is rendered within the container width of your site (which can be altered in the theme settings). Changing this setting to “Edge-to-Edge” will ignore the container and use the full width of the browser window. This is particularly useful for full width elements such as image sliders.
By default, a section will be visible on all devices. You can limit this to only desktops if you check this setting.