Block Divider: Difference between revisions

From Posstack.com Documentation
(Add notice 'Available for Paid plan only')
 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{DISPLAYTITLE:Block: Divider}}
The Divider block lets you add horizontal lines that separate the content sections of a page.  
The Divider block lets you add horizontal lines that separate the content sections of a page.  
===Divider overview===
It supports a variety of 15 horizontal divider styles. In addition, you can also use a custom image as a divider and configure the image height to fit your needs.
{{Note|See Divider examples [https://easy-content-builder-demo.myshopify.com/pages/section-variations here].|inline}}
[[File:Ecb divider.png|alt=Easy Content Builder - Divider Block|1024x1024px]]
=== Watch video tutorial===
Be sure to watch the step-by-step video tutorials demonstrating how to utilize the sections provided in Posstack Easy Content Builder, available [https://www.youtube.com/watch?v=6LPvmwwEVw8&list=PLZdliUBbfeeGpJ6_zH4FDyF9QvYv1Pz-2&index=5 here].
=== How to add Divider section ===
*'''Step 1''': Add a '''Section Settings''' section that allows you to control the global settings of the '''Divider''' section.
:In this special section, you can specify multi-column layouts, activate full width, determine the section's maximum width, choose a background color, and set global margins and padding, among other options.


['''NOTE'''] This block is only available for PAID Plan. You can still add and edit this block normally in the Theme Editor. And it will be shown on the frontend once you upgrade your subscription to a Paid plan.
:{{Note|Note: If you include the '''Divider''' in the core product information, skip the step for adding '''Section Settings'''. Just add the '''Divider'''. [[File:Ecb add section core product info.jpg|800px|frameless]]|reminder}}


It supports a variety of 15 horizontal divider styles. In addition, you can also use a custom image as a divider and configure the image height to fit your needs.  
*'''Step 2''': Add a '''Divider''' section and customize the settings according to your preferences.


[[File:Ecb divider.png|alt=Easy Content Builder - Divider Block|1024x1024px]]
{{Note|''If you are new to our Easy Content Builder, please take a look at the [[Add_section_settings|Add Sections]] section for detailed instructions on how to add a section to your theme.|reminder}}


''(If you’re new to our Easy Content Builder, please refer to section [[Add Sections|Add App Sections]] and [[Add Blocks|Add ECB Blocks]] for more details on how to create and edit a section or a block.)''
=== Divider settings ===
From the Shopify theme editor, click on '''Divider''' on the sidebar to view the details of settings.
{| class="wikitable"
{| class="wikitable"
|+
|+
Line 55: Line 71:
|Set the maximum width of the container (in pixels). Enter 0 to use the default max width set by your theme
|Set the maximum width of the container (in pixels). Enter 0 to use the default max width set by your theme
|-
|-
|Padding Top
|Margin
|Set the block’s padding top (in px)
|Set the vertical spacing between elements.
|-
|Padding Bottom
|Set the block’s padding bottom (in px)
|-
|Margin Top
|Set the block’s margin top (in px)
|-
|Margin Bottom
|Set the block’s margin bottom (in px)
|}
|}
===Add other content blocks===
You can add many content blocks to a section you've created. These content blocks will be displayed in different positions within the section, depending on the Desktop/Mobile Layouts you configure.
[[File:Ecb-block-v2.jpg|border|frameless|800x800px]]
{{Note|See [https://easy-content-builder-demo.myshopify.com/pages/section-variations all content blocks] available that you can add to a section.|reminder}}

Latest revision as of 04:17, 7 November 2024


The Divider block lets you add horizontal lines that separate the content sections of a page.  

Divider overview

It supports a variety of 15 horizontal divider styles. In addition, you can also use a custom image as a divider and configure the image height to fit your needs.

See Divider examples here.

Easy Content Builder - Divider Block

Watch video tutorial

Be sure to watch the step-by-step video tutorials demonstrating how to utilize the sections provided in Posstack Easy Content Builder, available here.

How to add Divider section

  • Step 1: Add a Section Settings section that allows you to control the global settings of the Divider section.
In this special section, you can specify multi-column layouts, activate full width, determine the section's maximum width, choose a background color, and set global margins and padding, among other options.
Note: If you include the Divider in the core product information, skip the step for adding Section Settings. Just add the Divider. Ecb add section core product info.jpg
  • Step 2: Add a Divider section and customize the settings according to your preferences.
If you are new to our Easy Content Builder, please take a look at the Add Sections section for detailed instructions on how to add a section to your theme.

Divider settings

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

Block Settings Description
Style
  • Fade
  • Fade 2
  • Text center: include a title text inside the horizontal divider. If enabled, you need to specify the Text, Text color, and Text background color accordingly.
  • Dots
  • Pill
  • Vertical lines
  • Horizontal lines
  • Slash 1
  • Slash 2
  • Bookends
  • Bookends dots
  • Flair
  • Shine
  • Charlie
  • Stars
Color Select the color of the divider
Text Enter the title text displayed inside the horizontal divider (only applied when Style is set to Text center)
Text Color Select the text color
Text Background Color Set the background color of the text
Image Upload a background image to use as a divider.
Image Height Set the height (px) of the background image
Background Image Repeat Set if the background image will be repeated horizontally
Max Width Set the maximum width of the container (in pixels). Enter 0 to use the default max width set by your theme
Margin Set the vertical spacing between elements.

Add other content blocks

You can add many content blocks to a section you've created. These content blocks will be displayed in different positions within the section, depending on the Desktop/Mobile Layouts you configure.

Ecb-block-v2.jpg

See all content blocks available that you can add to a section.
Retrieved from "https://docs.posstack.com/index.php?title=Block_Divider&oldid=2797"