Block Section Settings: Difference between revisions

From Posstack.com Documentation
No edit summary
mNo edit summary
Line 1: Line 1:
Easy Content Builder uses Section Settings as a special block to determine your ideal layouts within a section:
Easy Content Builder uses Section Settings as a special block to determine your ideal layouts within a section:<blockquote>[NOTE] Color layout, Mask color, and Mask image fields are only available for PRO plan. You can configure these fields normally in the Theme Editor, and you need to upgrade your plan to apply them to the front end. </blockquote>
 
* You can define 1-column, 2-columns, and 3-columns layouts that are fully responsive.  
* You can define 1-column, 2-columns, and 3-columns layouts that are fully responsive.  
* You can add as many sections on a page as you want. In each section, you create a Section Settings block to control the layout for that specific section.  
* You can add as many sections on a page as you want. In each section, you create a Section Settings block to control the layout for that specific section.  

Revision as of 02:47, 10 February 2023

Easy Content Builder uses Section Settings as a special block to determine your ideal layouts within a section:

[NOTE] Color layout, Mask color, and Mask image fields are only available for PRO plan. You can configure these fields normally in the Theme Editor, and you need to upgrade your plan to apply them to the front end.

  • You can define 1-column, 2-columns, and 3-columns layouts that are fully responsive.
  • You can add as many sections on a page as you want. In each section, you create a Section Settings block to control the layout for that specific section.  
  • You should always keep the Section Settings at the bottom of the Content Blocks list that you might add to a section.

From the Shopify theme editor, click on Section settings on the sidebar to view the details of settings.

Add section config.jpg

(If you’re new to our Easy Content Builder, please refer to section Add App Sections and Add ECB Blocks for more details on how to create and edit a section or a block.)

Section settings Description
Full Width Container Display content of this section in full screen width.
Set Max Width Container Set the maximum width of the container (in pixels). Enter 0 to use the default max width set by your theme.
Layout Select a layout applied to the current app section:
  • One Column
  • Two Columns
  • Two Columns: First Block Right, others Left
  • Two Columns: First Block Left, others Right
  • Three Columns (Three columns will each automatically be 33.33% wide.)
  • Three Equal Columns (The first column's width is specified based on the main block width, the remaining columns will be the same width. )
  • Two Columns: First Block Right, others Left
  • Two Columns: First Block Left, others Right
Main Column Width Set the width of the first block in percentages. This setting is only applied to the layouts that have more than two columns.
Background Color Specifies the background color of the section by CSS or Gradient options. Click the color and use the Gradient color picker or enter the value of the new color in the text field. You can also create a gradient background using CSS code - for example linear-gradient(red, green), radial-gradient(red, green), or conic-gradient(red, green).
Background image Set the background image of the section. Once added, you can tab the Change button below the image to delete or change the image.
Mask Color Specifies the color overlay over the background color or the background image. Click the color and use the color picker or enter the value of the new color in the text field.
Mask Image Using the image as a mask layer. Must be a PNG image. You can download mask images here.
Mask Opacity Set the opacity/transparency of the mask.
Container Background color Set the color of Containers - a fundamental building block - that are used to contain, pad, and align your content within a given device or viewport.
Text Color Set the color of the text inside the section.
Padding Top Set the padding top (in px) of the section
Padding Bottom Set the padding bottom (in px) of the section
Margin Top Set the margin top (in px) of the section
Margin Bottom Set the margin bottom (in px) of the section
Container Padding top Set the padding top (in px) of the container
Container Padding bottom Set the padding top (in px) of the container

Note: For each of the settings above, you can also click Add dynamic source icon and select one from the available Brand values.