Edit and Design Sections: Settings, Background, Effects, and Shape Dividers

Express your website's uniqueness by customizing your website sections.

Manage your sections' settings, add images and motion to your sections' backgrounds, and divide sections with shape dividers.

To edit a section, go to the desired section, click the Gear Icon, and make changes to the following settings:

Sections Settings Tab

The Settings tab will allow you to customize the style and way the section is displayed

Note: The settings options will vary according to the page type and layout

Show/Hide Section Title - This option will allow you to decide whether to show or hide the titles of your sections
Number of Items in a Row - determine how many items you would like to be displayed on the section page. (Only available on pages with inner items, and on specific page layouts)
Layout Box Color - Set the background color of the page text box. (Only available for pages /layouts with textboxes.)
Mobile Display - Set the way the section will be displayed on mobile devices. (Only available on pages with inner items, and on specific page layouts)

The website homepage and promo pages are unique sections that offer specific settings relevant to them only:

Text Position - set the direction of the text for your homepage or promo page
Minimum Height - Set the minimum height of the page, choose between 30% to 100%
Image Width - Set the way an image is displayed on the page (Only available in specific page layouts)
Image Animation - Set a scroll animation (Parallax) to the page background image (Only available on specific page layouts)
Box Style - Set the style of your page text box by adding a border around it (Only available on layouts with text boxes)

The background tab will allow you to customize your sections' backgrounds,

Note: This option is only available on specific layouts

Use this option to set the background color of your sections

Use this option to add patterns to your sections' backgrounds, choose the preferred pattern, and then make changes to it by using these options:

Layout background color - Affects the section background color under the selected pattern
Color Theme - Affects the color of the patterns, choose between Primary for variations of the website's primary colors, contrast for a contrasting variation of the primary color, or Mono for a single color.
Shape Opacity - Set the opacity of the selected pattern elements
Animate and Animation Speed - check the animation checkbox to animate the patterns element, and set the speed of the element animation

Use this option to add an image to your sections' backgrounds, choose from the image library, or upload your own

Edit the way the image is displayed by changing these settings:

Opacity - use this option to set the image opacity
Effect - Use this option to set the way the image is displayed: regular, blurry, or artistic black and white
Parallax - Use this option to set a scroll animation to the section background. This option is only available when using the Cover image style.,
Style - Use this option to set the way the image is displayed, choose between cover for full image display, duplicate to duplicate the image on the page background, or contained to contain in a specific area of the page
Position - Use this option to specify the image's location on the page. This option is only available if you chose to use duplicate and contained styles.
Text Color - Use this option to set the page text color

Use this option to add a video to your section's backgrounds, choose from the Video library, or upload your own

Edit the way the video is displayed by changing these settings:

Opacity - use this option to set the video opacity
Effect - Use this option to set the way the video is displayed: regular, blurry, or artistic black and white
Text Color - Use this option to set the page text color

Customize your website flow and appearance by adding shape dividers between sections

Choose a shape divider that enhances your style and uniqueness, and set the divider height by using the height slider option.

The shape divider will be added to the bottom of the selected section. Want to complete the look? Add a shape divider to the above section.

Note: section settings, design, and shape dividers are not currently available for the E-commerce Store.

Learn more about the E-commerce Homepage Design