There are 4 places dedicated to editing content sections.
Edit from the grey cog icon next to the section Page Content
Click on the grey cog icon next to the Page Content section and enable/disable boxed content.
Boxed content serves to a better arrangement of the content sections within the webpage.
If the option is enabled, you need to:
- Select the box background color
- Adjust the overlap height, that is the vertical distance upon which the boxed content is indented into the front-page Hero
Edit from the green cog icon next to each content section
For every page section you want to edit, click on the green cog icon next to it, to expand the panel with customization option.
The options are:
Sections Dimensions
Set the distance of the content in the section, as related to the top (Hero or previous content section) and to the bottom (next content section or footer). The values are expressed in pixels, for a better assessment of the section dimensions.
Section Background
- Select the background type (it can be set to transparent, color, image or gradient)
- For the color type, select the color you want to apply to the section background
- For the image type, upload the image you want to include in the section background, from your personal device
- For the gradient type, select the gradient that best suits the overall design. You will choose among a wide variety of gradients, the one that you like the most
- Background Overlay – apply a semi-transparent color to the background of the content section, to obtain a nice visual effect. Choose the nuance that fits your design preferences.
Section Separators
Section separators are graphic elements delimiting the section from the top of the page, and from the next sections/footer.
You might want to enable:
- Top section separator (choose the shapes that will define the form of the top separator, select the color the top separator will have, adjust the height onto which the top separator unfolds)
- Bottom section separator (choose the shapes for the top separator, apply a certain color to the bottom separator, define the height onto which the bottom separator is displayed)
Text Options
There are some generic options for the text of a section, in this area. They refer to:
- Display of a title area, where you can put the text of your own, directly in the preview mode
- Text color (here, the options include default, white text – you should place it on a darker background, and black text – you should place it on a lighter background).
Section Shadows
You can apply some shadow to the section elements. By choosing certain values on the slider, the shadow will be accentuated or faded.
For the sections that contain lists, there is an additional option regarding the items in the list:
Items Options
- Define the alignment of the list items (to the left, at the center or to the right)
- Define the alignment of the content included in the list items (to the left, at the center or to the right)
- Position the items in the wanted order, by using drag and drop
- Add items to the list, by clicking on “Add Item” at the end of the list with the existing elements
Edit directly in the live preview
To edit content in the live preview, you need to click on the pencil icon inside the element you want to edit and start customizing.
Edit from the blue cog icon, in the upper right corner of the section, in live preview
By clicking on the blue cog icon corresponding to a section, in the live preview, you will have some quick ways to customize the content of that section:
- Make full width/make centered (choose the best alignment of the content in that section)
- Change background (switch to a different background type, or replace the image/color/gradient already in place)
- Section Settings (quick way to access the content section settings)
- Add Item (for the sections containing lists, this option allows you to quickly add a new item)
- Columns per Row (for the sections containing lists, this option allows you to quickly define the number of columns the items will be arranged by)
Reorder items (you can easily change the order of the items in a list, by using drag and drop)
