Block Divider: Difference between revisions
From Posstack.com Documentation
mNo edit summary |
|||
(9 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. | 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]] | [[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|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}} | |||
*'''Step 2''': Add a '''Divider''' section and customize the settings according to your preferences. | |||
{{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}} | |||
=== Divider settings === | |||
From the Shopify theme editor, click on '''Divider''' on the sidebar to view the details of settings. | |||
{| class="wikitable" | {| class="wikitable" | ||
|+ | |+ | ||
Line 56: | Line 74: | ||
|Set the vertical spacing between elements. | |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. | |||
[[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.
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.
- 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 |
|
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.
See all content blocks available that you can add to a section.