Add section settings: Difference between revisions

From Posstack.com Documentations
Line 22: Line 22:


==Edit Section Settings==
==Edit Section Settings==
Now that you've added your first section, it's time to further customize this specific section by utilizing the advanced features available in the Section Settings block.
====Add multi-column layouts====
====Add multi-column layouts====
:https://cdn.shopify.com/s/files/1/0683/5339/2927/files/section-settings-multi-cols.gif
:https://cdn.shopify.com/s/files/1/0683/5339/2927/files/section-settings-multi-cols.gif

Revision as of 16:11, 29 May 2024


Steps

Before adding the first section, you must create a template using Easy Content Builder. Refer to one of the guides below based on the page where you plan to add the section.

Add Section

To add a new section, you need to add a special block called Section Settings. This block allows you to manage the layouts of your section by choosing your preferred layouts (1-column, 2-column, 3-column, 4-column, or hierarchical layouts) and global configurations (full-width layout, mask color, mask image, background video, parallax animation, etc.).

You can add multiple sections to a page. For each section, you can utilize a Section Settings block to customize the layout for that particular section.

This video provides instructions on adding your first section:

add-1st-section.gif

Add Blocks

After adding your first section, add the blocks you want for this section by following the video tutorial below:

section-add-block.gif

Edit Section Settings

Now that you've added your first section, it's time to further customize this specific section by utilizing the advanced features available in the Section Settings block.

Add multi-column layouts

section-settings-multi-cols.gif

Add the background image

section-settings-bg-img.gif

Add the background video

section-settings-bg-video.gif

Add the background color

section-settings-bg-color.gif

Add the background container color

section-settings-container-bg-color.gif

Set text color

section-settings-text-color.gif

Adjust the column gap

section-settings-margin-padding.gif

Next Step

  • Add content blocks: follow this guide.