Sections

Sections are the building blocks of SamCart's Full Width Templates. Learn all about how they work and ways you can customize them!

Sections are full width containers that hold your page's content. By stacking sections on top of one another, you can organize your page and create visual interest.

Here's what a Section looks like:

The above Section is holding a Row that is split into two Columns. Within those columns are text, image, and button Content Blocks

This Section is currently selected for editing in the Content Builder as its orange border and menu is exposed.

Interacting with a Section

Creating a Section

Create a new section by dragging a New Section onto your page:

Selecting a Section

To select a Section, simply move your cursor over it in the Content Builder. This exposes the Section's border and menus.

Duplicating a Section

To duplicate your Section, click this button:

This places an exact copy of the Section beneath the one you've duplicated. You can edit the newly created Section without affecting the Section it came from.

Deleting a Section

To delete a Section, click the trash can icon:

Tip: Make sure you have the correct Section selected, as this deletes all the Rows inside the Section and cannot be undone.

Section Settings

Clicking the gear icon reveals a number of different Settings for your Section: 

Let's go through each of them...

Background Image

To add an image that sits behind the Rows and Content Blocks in your Section, either drag an image file from your computer into the Background Image box, or choose one from your Image Library. 

If you're not set on using a specific image, click on My Image Library followed by Stock Images, where you can browse Unsplash's entire library of royalty free stock photos for use on your Product Page. 

Search for what you're looking for, select an image you like, and click Use Image

Here is an example of a Section with a Background Image. In this example, there is a Row containing Headline and Text Content Blocks that is sitting on top of the Section

To adjust the position of the image in your Section, scroll through the options in the Background Image Settings menu:

Tip: If your image is large, try using the Full Center (Parallax) setting. This causes the Background Image to scroll slower than the Rows and Content Blocks in the foreground, which leads to more of the image being revealed as your customers scroll through your page.

Background Color

To change the background color of your Section, click on the rectangular button (1) and use the slider and color picker (2) to select a color. You can also type a Hex Code into the text box (3): 

Top Padding

To add space on top of the Rows inside of your Section, increase the Top Padding slider. The Default is 0. 

Bottom Padding 

To add space beneath the Rows inside of your Section, increase the Bottom Padding slider. The Default is 0. 

Left/Right Padding

To add space on the left/right of the Rows inside of your Section, increase the Left/Right Padding slider. The Default is 0.

C
Claire is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.