Build your site with sections

Sections are the building blocks of your page. Each Section is a horizontal container which contains Columns where you can place the content on your page. 

By default, templates will include multiple Sections. Blank pages will allow you to add any Section (including a blank one) to get started.

Check out our video for an overview on working with Sections. 

Add a new Section to your Page

1. Head to the page you would like to edit.
2. At the top and bottom of each Section will be a + button to add a new Section.
3. Click the + button to open the Section browser. 
4. You can add Sections from your current template, other PageCloud templates, or a collection of professionally designed Sections called "Essentials".
5. Hover over the Section you would like to add, and click "Add to Page". 
6. The Section will appear on your page. 
7. You can edit the Section or any of the content within the Section. 
8. Click Save and View live to see your new Section on your live page.

Remove a Section from your Page

1. Head to the page you would like to edit.
2. Click Section Style in the upper left corner of the Section you would like to delete.
3. Click the trash can icon that appears to the left of the Edit button. 
4. The Section and the contents of the Section will be deleted.
5. Click Save to confirm the changes on the page.

Expand or shrink a Section

A Section's height can be expanded or reduced to add more or less content within a Section. 

1. Select the small circles on the left and right of the bottom edge of the Section.
2. Drag the circle downwards to expand the Section, or up to reduce the Section.
3. Click Save to save changes to the page.

Add a Section background image, gradient or color

1. Click "Section" in the upper left corner of the Section.
2. In The Edit Menu click the "Section" tab. 
3. Select Section background, then choose between: 
   • Image -  Select or upload an image to cover the Section.
   • Gradient - Add multi-color gradients for a unique look.
   • Color - a single solid color background. 
4. Click “Save” to save your page.

Rename a Section

Adding a custom name to a Section is very helpful in keeping track of the different Sections added to your site. 

1. While editing the page, Select the Section you would like to rename.
2. Click Section  in the upper left corner of the Section.
3. In The Edit Menu click the Settings tab.
4. Enter in the new name for the Section.
5. Click Save to save changes to the page.

Reorder a Section

You can reorder Sections to quickly change the layout of your website.

1. While editing the page, Select the Section you would like to reorder.
2. Click Arrow icon in the upper left corner of the Section to open up the Section browser.
3. Click the up or down arrows in the lower right of the Section thumbnail to reorder the Section. 
4. Click Save to save changes to the page.

You can also reorder Sections in the Sections tab of the Sidebar. 

1. Head to the page you would like to edit.
2. Select the Sections tab in the Sidebar on the left of the page.
3. Click and drag the Section to where you would like it to appear on the page.
4. Click Save to save changes to the page.

Duplicate a Section

1. While editing the page, select the Section you would like to duplicate.
2. In the upper left of the Section Click the + icon to duplicate the Section.
3. Click Save to save changes to the page.

You can also duplicate Sections in the Sections tab of the Sidebar. 

1. Head to the page you would like to edit.
2. Select the Sections tab in the Sidebar on the left of the page.
3. In the bottom left of each Section thumbnail, click the "⋁" icon.
4. Select Duplicate. 
5. Click Save to save changes to the page.

Header and Footer Sections

The Columns  (and content) within the Header and Footer Sections sync throughout all the pages of your website,  including blog posts. 

Learn more about Header and Footer Sections. 

Hide a Section

1. Head to the page you would like to edit.
2. Select the Sections tab in the Sidebar on the left of the page.
3. In the bottom left of each Section thumbnail, click the dropdown icon.
4. Select Hide. 
5. Click Save to save changes to the page.

Section Libraries

When adding a new Section, there are a number of  libraries to choose from:

Your Template - Sections from the template you began building your site with. 

All Templates - Sections from all PageCloud templates.

Business - Pre-built, professionally designed Sections with an unlimited amount of use cases.

Classic - Classic design principles, timeless fonts, and bold color pairings combined together.

Modern - Minimalist design with sharp accents and thoughtful amounts of negative space.

Add & Remove Column in a Section

Each Section starts with a single Column. You can add up to three Columns to better organize your content within a Section. 

1. Select a Section. You can do this by clicking "Section" in the top left corner of the Section to open up the Editing Menu.
2. Select the "Layout" tab in the Editing Menu. 
3. From the dropdown menu, Select the number of columns you would like to be available in the Smart Layout.
4. You can now add content to each column. 
5. Click "Save" and "View Live"  to see the Smart layout columns in action.

Width Options for Sections

Sections can have different width settings to change how content appears when adjusting the size of your browser window.

1. Select a Section. 
2. Click "Column" in the top left corner of the Section's column to open up the Editing Menu.
3. Select the "Layout" tab in the Editing Menu.
4. Under "Width" you have multiple choice:
   • Page Width -  Constrains Columns and content to the width set in your Page Settings. The default is 1080px wide. 

   • Full Width - Columns and content adjusts to fit the full width of the web browser. This requires the columns within the Section to be set to "Auto" Layout.

5. Select the Width choice that suites your design.
6. Click "Save"  to save changes to your page.

Height Options for Sections

You can adjust the height of a Section to change how content appears when resizing the browser window.

1. Select a Smart Layout section. 
2. Click "Column" in the top left corner of the Section's column to open up the Editing Menu. 
3. Select the "Layout" tab in the Editing Menu.
4. Expand "Height" to display your options. The Options available depend on the Column layouts set within the Section. 
   1. If the section contains only Columns in Auto Layout:
      • Auto - The height of the section will be based on the content within the section and any padding added to the content. You can choose to set a Minimum height to ensure the section is a specific side regardless of content size. 
      • Full Height - The height of the section will be based on the browser's window. As you expand or contract the browser window, the section will expand or contract. Scrolling will move the visitor to the next section.  
   2. If the section contains 1 or more Columns in Manual Layout:
      • Minimum Height - A numeric value that represents the minimum height for the section. Click the Snap to fit button to reduce the height of the section to the minimum that will fit the content.
5. Select the Height choice that suites your design. 
6. Click "Save"  to save changes to your page.

Applying Padding to a Section

Section Padding can be used to provide space around the Columns within the section.

1. Select a Section. 

2. Click "Section" in the top left corner of the Section to open up the Editing Menu. 

3. Within the Section tab, move the Padding slider to increase or decrease the Sections's padding. 

4. Click "Save"  to save changes to your page.

Sections in Mobile Mode

While in mobile mode, the Columns within a Section will stack vertically on top of one another.

Content within a Section's Column cannot be moved into another Section's Column  while in mobile mode.