Set up sections on Website Builder
In this article, we will show you how to set up a page's section on ShopBase Creator using Website Builder. Overall, Section is a tool to divide the page into different sections. Section contains Row and Row contains Column. There are Blocks and Container in Column. Container has Blocks.
There are 3 ways to add a new section to your web page,
Click the + button in the desired position and select Add section.
Open the Insert panel and drag your section into the desired position.
Open the Insert panel > choose from ShopBase template sections from Navigation, Call to action, Audiences & problems, Products, Benefits, About, Trust, Sales, Faqs, Product detail. and drag to the desired position.
In the Side bar settings, you can customize the following elements of your section:
Content: You can customize Section name, Icon and Data source. You can link sections, containers, and tabs to data sources such as products to create dynamic content (Helpdoc).
Design: You can customize Full width, Height, Border, Background, Padding and Margin.
Full width: Select this option if you want the section's content to span the entire width of the browser. When this option is disabled, the section content is only displayed within the 1120px width.
Height: You can choose Auto, Px or %. If you choose Px or %, there will be an Overflow setting which configues how content is displayed when it overflows its container
By default, the height of the section will expand automatically (Auto) as more content (such as blocks and rows) is added to the section.
Px: The section's height will be fixed.
%: The section's height will be calculated as how many percent of the viewport.
Border: Customize the border of your section. Here, you can adjust the thickness (none, small, medium, large, or custom) , select a color from the website/web page's color palette, or choose a custom color. If you don't want a border around your section, set its Thickness to None or its Color to Transparent.
Background: You can choose Color, Image or Video for the background.
Select a color from the color palette, or choose a custom color for your section.
If you choose to upload Image or Video, there will be Parallax setting option.
Padding: Padding is space around the content, inside of the element.
Margin: Margin is outside space of the element, between elements.
In the Quick bar setting, click Edit layout to edit the layout of your section. You can freely set up different types of layouts by adding new rows and columns into the section.
Edit layout: You can click on a row > Side bars setting.
Layout: You can choose to create a 1 Column, 2 Columns, 3 columns, 4 columns, Asymmetrical Left or Asymmetrical Right layout.
Spacing: This is the gap spacing between columns in the same row.
Other settings: You can customize Height, Border, Background, Padding, Margin of the rows.
Hover to the section > Click Row > Add row to add a new row into the section.
To customize the columns, click on the Column icon. You can customize the columns by clicking the column.
Layout: You can choose Vertical or Horizontal. If you choose Vertical, you can customize its Align as Top, Center, Bottom, Space distribute. If you choose Horizontal, you can customize its Align as Left, Center, Right, Space distribute. Spacing is the space between blocks in the same column.
Clipping content: Once you choose this, the content will be cut off to fit the column
Other settings: You can customize Border, Background and Padding.
Click Save once finished.
Get started with Website Builder
Launch a web page using Website Builder
Understand styling settings in Website Builder
Set up blocks on Website Builder
Save and reuse color and font templates on ShopBase Creator
Save and reuse block and section templates on ShopBase Creator
Save and reuse page templates on ShopBase Creator
Link library to reuse templates across stores on ShopBase Creator
Guide to library on ShopBase Creator
Select and customize page templates using Web Builder
Create a form for your storefront
Step by Step Tutorial
There are 3 ways to add a new section to your web page,
Click the + button in the desired position and select Add section.
Open the Insert panel and drag your section into the desired position.
Open the Insert panel > choose from ShopBase template sections from Navigation, Call to action, Audiences & problems, Products, Benefits, About, Trust, Sales, Faqs, Product detail. and drag to the desired position.
In the Side bar settings, you can customize the following elements of your section:
Content: You can customize Section name, Icon and Data source. You can link sections, containers, and tabs to data sources such as products to create dynamic content (Helpdoc).
Design: You can customize Full width, Height, Border, Background, Padding and Margin.
Full width: Select this option if you want the section's content to span the entire width of the browser. When this option is disabled, the section content is only displayed within the 1120px width.
Height: You can choose Auto, Px or %. If you choose Px or %, there will be an Overflow setting which configues how content is displayed when it overflows its container
By default, the height of the section will expand automatically (Auto) as more content (such as blocks and rows) is added to the section.
Px: The section's height will be fixed.
%: The section's height will be calculated as how many percent of the viewport.
Border: Customize the border of your section. Here, you can adjust the thickness (none, small, medium, large, or custom) , select a color from the website/web page's color palette, or choose a custom color. If you don't want a border around your section, set its Thickness to None or its Color to Transparent.
Background: You can choose Color, Image or Video for the background.
Select a color from the color palette, or choose a custom color for your section.
If you choose to upload Image or Video, there will be Parallax setting option.
Padding: Padding is space around the content, inside of the element.
Margin: Margin is outside space of the element, between elements.
In the Quick bar setting, click Edit layout to edit the layout of your section. You can freely set up different types of layouts by adding new rows and columns into the section.
Edit layout: You can click on a row > Side bars setting.
Layout: You can choose to create a 1 Column, 2 Columns, 3 columns, 4 columns, Asymmetrical Left or Asymmetrical Right layout.
Spacing: This is the gap spacing between columns in the same row.
Other settings: You can customize Height, Border, Background, Padding, Margin of the rows.
Hover to the section > Click Row > Add row to add a new row into the section.
To customize the columns, click on the Column icon. You can customize the columns by clicking the column.
Layout: You can choose Vertical or Horizontal. If you choose Vertical, you can customize its Align as Top, Center, Bottom, Space distribute. If you choose Horizontal, you can customize its Align as Left, Center, Right, Space distribute. Spacing is the space between blocks in the same column.
Clipping content: Once you choose this, the content will be cut off to fit the column
Other settings: You can customize Border, Background and Padding.
Click Save once finished.
Related articles
Get started with Website Builder
Launch a web page using Website Builder
Understand styling settings in Website Builder
Set up blocks on Website Builder
Save and reuse color and font templates on ShopBase Creator
Save and reuse block and section templates on ShopBase Creator
Save and reuse page templates on ShopBase Creator
Link library to reuse templates across stores on ShopBase Creator
Guide to library on ShopBase Creator
Select and customize page templates using Web Builder
Create a form for your storefront
Updated on: 18/05/2023
Thank you!