Add section settings: Difference between revisions

From Posstack.com Documentation
mNo edit summary
Line 1: Line 1:
{{DISPLAYTITLE:Adding Section Settings}}
{{DISPLAYTITLE:Adding Section Settings}}


This tutorial will guide you on how to build a custom template for one specific page (Product, Store page, or Blog Post)
==What is Section Settings==
 
Section Settings is a unique block that Easy Content Builder provides to determine your ideal 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.) within the section itself.


{{Note|The setup steps are the same for all page types: Product, Article, or Store page.|inline}}
{{Note|The setup steps are the same for all page types: Product, Article, or Store page.|inline}}
Line 7: Line 9:
==Step Overview==
==Step Overview==


* Select a product/page.
*Step 1: Create a template (following this guide)
*Step 2: Create a Section Settings


===Add multi-column layouts===
===Add multi-column layouts===
:https://cdn.shopify.com/s/files/1/0683/5339/2927/files/section-settings-multi-cols.gif
===Add the background image===
:https://cdn.shopify.com/s/files/1/0683/5339/2927/files/section-settings-bg-img.gif
===Add the background video===
:https://cdn.shopify.com/s/files/1/0683/5339/2927/files/section-settings-bg-video.gif
===Add the background color===
:https://cdn.shopify.com/s/files/1/0683/5339/2927/files/section-settings-bg-color.gif
===Add the background container color===
:https://cdn.shopify.com/s/files/1/0683/5339/2927/files/section-settings-container-bg-color.gif
===Set text color===
:https://cdn.shopify.com/s/files/1/0683/5339/2927/files/section-settings-text-color.gif
===Adjust the column gap===
:https://cdn.shopify.com/s/files/1/0683/5339/2927/files/section-settings-margin-padding.gif
==Next Step==

Revision as of 04:45, 29 May 2024


What is Section Settings

Section Settings is a unique block that Easy Content Builder provides to determine your ideal 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.) within the section itself.

The setup steps are the same for all page types: Product, Article, or Store page.

Step Overview

  • Step 1: Create a template (following this guide)
  • Step 2: Create a Section Settings

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