Skip to main content
Overview of Sections

How to use Sections when building your website in SnapPages.

Tanner Ramey avatar
Written by Tanner Ramey
Updated over 8 months ago

As you scroll down the page in the page editor, you'll notice different sections. These Sections are one of the fundamental building blocks of SnapPages.

Adding Sections

To add a new Section to a page, just click Add a Section from the menu on the left-hand side of the page (under the Add a Block option). This will open up a picker menu that will give you a number of pre-built Sections, as well as the option for a blank section.

image.png

Section Menu

A Section Menu is on the right-hand side where you see a menu with five options:

Section Options, Section Slides, Duplicate Section, Delete Section and

image.png

Rearrange Sections

Each of these will allow you to customize your sections in different ways.

  • Section Options: This allows you to modify and customize many different features such as background color, color scheme, and much more. To learn more about section options click here

  • Section Slides: This allows you to create different slides within a section, think of a slideshow that transitions through sections. Once you've added slides for the section, you will be able to make additional changes to their look and transition.

  • Duplicate Section: This option allows you to quickly duplicate any existing Section!

  • Delete Section: To delete a Section, all you have to do is click on this option.

  • Rearrange Sections: This allows you to rearrange the order of the Sections on the given page.

Sections Options

In the section options, you have control over how your section will look, where you can modify features (such as the section color scheme, title, and background), and much more.

Section options are located on the right while on the Page Editor.


Section Title

You can change your Section Title by editing it here in Section Options! Having section titles is a great way to have your site section organized. This is also good practice for SEO purposes.

image.png

Color Scheme

Choose from any of your existing Color Schemes (managed in Theme -> Colors) to be used to style your Section. All you have to do is simply select the one you want from the dropdown and you'll be all set!
Learn more about setting up Color Schemes here.

image.png


How to Change Your Background

In the Background section, you can set your background to be either a single color, a gradient color, an image, or a video. Each of these choices comes with a whole menu of editing options unique to each one.
Learn more about Background Sizes here.

Including Header with your Background

Make your header transparent!

This option can only be found in the top-most section of any page and allows you to have the section background included in your site Header. When you include the header as part of the section, the color scheme of the section will overwrite the theme settings.

  1. Locate the first section of your page

  2. Select "Section Options" on the right-hand side.

  3. Toggle Include Header.

Here is an example of a site with the header video as part of the header: https://interbaycc.com/

image.png


Padding

Padding allows you to generate blank space between your section's horizontal and vertical borders with the content inside it. Do this by toggling the padding slides up and down.

Hide From

With these settings, you can choose to hide an entire section from a specific device. Select the device type, “tablet” for example, and it will be hidden just by selecting it.

Learn how to incorporate these settings for Mobile and Tablet editing here.
​​​​​​​

Shapes

The Shape options allow you to change the design of the top of the section.

Did this answer your question?