There are 2 sections dedicated to customizations of the contents sections.
1. From the green cog icon on the right hand, in the list of content sections – in the customizer.
- From the blue cog icon on the right hand in the content section – in the customizer preview:
1. Customizations from the green cog icon in the customizer
There are the following options:
- Section Dimensions
- Section Background
- Section Separators
- Text Color
a. Section Dimensions
Click on the green cog icon and open the panel with the 4 areas mentioned above.
Section Spacing – this defines at what distance exactly the content section is from the section above (section or header), and to the section below.
Set larger values for more space from the top and to the bottom, or smaller values for less space from the top and to the bottom.
b. Section Background
The background type may be set to transparent, colored, image or gradient.
Transparent – Select this option if you want the content section background to be transparent. In this case, the page background image will be visible in the backend.
Color – Select a solid color for the background of a content section you are customizing
Image – Insert an image as the background of the content section you are customizing
Gradient – Choose the gradient from over 140 gradients available, and set it as the background of the content section you are customizing
The overlay is a semi-transparent color that is applied on top of the background, for a nice visual effect. Select the color of the background overlay and apply it to the content section background.
c. Section Separators
Separators are graphic elements that help separating the content section from the rest, and make it stand out.
You have the option to customize both the top separator, and the bottom separator. The top and bottom separators are defined by the following values:
- Display top/bottom separators, if the checkboxes are checked
- Select the shape of the separators (triangle, tilt, fan opacity, arrow, split, etc.)
- Select the color of the top/bottom separator
- Separator height – set the distance the separators occupy on the page
d. Text color
This section is for adjusting text colors, so they fit into the background color you have selected for the section. You can select a dark color if the background has lighter nuances, or a white color if the background has darker nuances. Or you can keep the default selection.
e. Items Options
This feature appears only for content sections that include lists. From here, you can:
- Add as many items as you like
- Rearrange the items in the order you want them to appear, with drag and drop
- Change the predominant color of each item
- Edit the text of the items directly in the customizer preview
- Change the symbol for a certain item, directly in the customizer preview
- For the Pricing tables, you have the option to highlight the best deal
2. Customizations from the blue cog icon in the customizer preview
Each section has a blue “cog” icon on the right hand of the screen. Hovering your mouse over this icon will open a menu containing some additional options:
Make Full Width/Make Centred – This option allows you to change the layout of the entire section from full width to centred and vice-versa.
Change background – This will open the panel for customization of the content section background. You can replace the current background with another one.
Section Settings – This will open the panel for customization of the content section settings (dimensions, background, separators, etc.). You can replace the current settings with others.
Add Item – This option is valid only for content sections that contain lists. Click on Add Item, to add a new item to your list.
Columns per Row – This option is valid only for content sections that contain lists. Click on Columns per Row, to set 1, 2, 3, 4, 6 or 12 columns per one row.
Reorder Items – This option is valid only for content sections that contain lists. Clicking on Reorder Items will open the panel for customization of the content section items.