Add section settings: Difference between revisions

From Posstack.com Documentation
Line 18: Line 18:
* Click to the Customize button.
* Click to the Customize button.
* It will navigate to the Theme Editor.
* It will navigate to the Theme Editor.
* On the Theme Editor screen > Select a template that you want to edit.
* On the Theme Editor screen > Select a template (Home page, collection, product or store page) that you want to edit.


=== Add Section ===
=== Add Section ===

Revision as of 07:05, 30 May 2024


This guide explains how to add new sections to one template. If you want to create new template, you can see the guide:

Steps Overview

  • Select a template
  • Add sections to the template

Select a template

From the Manage Templates page

  • Select the Apps > Easy Content Builder
  • Find and select the template that you want to edit.
  • Select the template.

From the Manage Themes page

  • Select Online Store > Theme
  • Click to the Customize button.
  • It will navigate to the Theme Editor.
  • On the Theme Editor screen > Select a template (Home page, collection, product or store page) that you want to edit.

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
After adding the Section Settings block, the theme editor preview will show a blank placeholder. Once you add the new content blocks as per the guide Add Blocks below, they will appear in the theme editor.

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

You can define your preferred section layouts (1-column, 2-column, 3-column, 4-column, or hierarchical layouts) by watching the video tutorial below:

section-settings-multi-cols.gif

Add the background image

You can set the section's background image. Once added, you can click the Change button below the image to delete or change it.

section-settings-bg-img.gif

Add the background video

In the Section Settings block, select a video to use as the section's background. After adding it, you can click the Change button below the video to delete or replace it.Section-settings-bg-video.jpg

Add the background color

In the Section Settings block, you can customize the section's background color using CSS or Gradient options. Simply click the Background Color and use the Gradient color picker or enter the new color value in the CSS Code field.

Section-setting-bg-color.jpg

Add the background container color

section-settings-container-bg-color.gif

Set text color

In the Section Settings block, customize the text color within the section, which is great for adjusting the text color when using a dark background.

Section-setting-text-color.jpg

Adjust the column gap

In the Section Settings block, you can also set the gap (in pixels) between the rows/columns.

Section-settings-col-gap.jpg
Note: Apart from adjusting the margin/padding in the Section Settings configuration, you can also open each block within that section to further adjust the padding/margin for each block (Each section may contain multiple blocks).

Next Step

  • Add content blocks: follow this guide.