Working with Page Sections [Zipify Pages]

Learn how to build a page using Page Sections and how to work with Section Settings

Ash avatar
Written by Ash
Updated over a week ago

Adding Sections to your page

In order to add another section above or below an existing section, first click on the Section element then on the "Add Section" button on the top or bottom of the section respectively:

You will then be presented with the Section Library that contains all sections for Zipify Pages divided into categories so you can easily find any section needed:

Existing Section

The "Existing Section" option allows you to re-use sections you've already customized/configured/styled for one page on any other page. This feature allows you to save a lot of time, especially for sections that you plan on re-using on the majority of pages like Header and/or Footer sections.

  • Click into the "Existing Section" category from the Page Section Library.

  • Click on the "Choose Page" drop-down list to choose the desired Landing Page, Product Page or Blog Post that you want to copy the section from.

  • Click on the "Choose Section" drop-down list to select the specific section(s) you want to re-use and click the "Add Sections" button to add them to the page:

*Notes:

  • This feature is cross-compatible between ALL page types available in the Zipify Pages app I.e. it works across Landing Pages, Product Pages, Home Pages and Blog Posts.

  • You can select and add multiple sections (up to 5 at a time) by holding the Ctrl key (Windows) or Cmd key (Mac) or by left-click hold and drag.

Editing elements within sections

Once a section is added to your page, you can customize it and the elements within per your needs. Just hover your cursor over any section to have the control elements appear. Each editable section's element will have a blue frame around it with accessible settings:

To begin editing any section element, simply click on the element itself or the blue pencil button to open the element settings in the sidebar:

πŸ“ The available editing options for each element within a section varies depending on the type of element being edited.

Section Appearance Settings

There's also the ability to edit the Appearance of each individual section. Appearance Settings can be accessed from either location in the Page Builder:

The following Tabs are available for in the sidebar of the builder, allowing for customization of the section's appearance:

πŸ“Choose the device type you'd like to edit the image styles on from the "Edit on" section, prior to making changes. All settings are available in Desktop edit mode, while only style edits are available in Tablet/Mobile modes.

1. In the "Layout" tab you can:

  • Toggle the "Enable Max Width" option to set a max width value in pixels for the section (2000 px max).

  • Set the "Scroll Actions" for the section. Available options include:

    • Scrolls with Page (Default)

    • Fixed on Screen (Sticky)

    • Appears on Scroll Up

  • Toggle the "Full Width" option for the section On/Off. To make the section edge-to-edge, you must also set left/right padding values to 0 in each edit mode desired.

2. In the "Background" tab you can:

  • Set a Background Color for the section using an rgba / hex code or you can choose a color from the color picker

  • Add a Background Image or Video:

    • Click the "Choose Image" button to add an image from the Image Library or upload a new one from your computer

    • Use a URL or Embed code for a Video
      πŸ“ The following 3 video services are supported for this feature: YouTube, Wistia and Vimeo. Background videos are set to autoplay/mute automatically. YouTube video doesn't support the autoplay feature on tablet/mobile devices

  • Once a Background Image is added, the following settings become available for it:
    ​

    • Color Overlay - Overlay a color over the background image added. Use the transparency slider to make the overlay less/more intense

    • Size options include:

      • Cover: Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains

      • Contain: Scales the image as large as possible without cropping or stretching the image

      • Original: Keeps the original dimensions for the image

    • Alignment - Control the X and Y positions for the section's background image

    • Tile options include:

      • All - Repeats the image across the entire section horizontally and vertically

      • Repeat X - Repeats the image horizontally across the section

      • Repeat Y - Repeats the image vertically down the section
        ​
        β€‹πŸ“Tile options are only available for the Original and Contain size options.

3. In the "Spacing" tab you can adjust the section's:

  • Padding - Top/Bottom and Left/Right in px. Padding is the space between the content of the element and its border

  • Margin - Top/Bottom and Left/Right in px. Margin is the space outside the border of the element
    ​
    πŸ“ Click the πŸ”’ icon to adjust left/right and top/bottom values independently.

4. In the "Visibility" tab you can choose which device(s) to show the section on:

  • Show on Desktop

  • Show on Tablet

  • Show on Mobile

πŸ“"Device Visibility" icons will display in the section's top-left corner when the section is hovered over in the page editor, to show which device types the section is hidden on.
​

5. In the "Advanced Settings" tab you can:

  • View the specific Section ID number

  • Toggle on the "Delay Section Display" setting to delay the section loading on the page for a set period of time. The max number of seconds a section can be delayed from showing is 999 seconds

  • Add "Custom Class Name(s)" to the section for additional CSS style customizations. More details on this setting can be found below.

Custom Class Name

The Custom Class Name setting is for advanced users familiar with CSS/HTML coding. This setting allows you to set a custom CSS class for the specific page section. The same class name can be applied to multiple page sections as well, if needed.

In CSS, a class is a group of elements that are the same or similar. You can have as many elements as you want in a class. And each element can be the member of multiple classes. Every class has CSS attributes (like color and font-size) that are specific to that class: https://www.w3schools.com/cssref/sel_class.asp

⚠️ All the settings set in this section will be overwritten by the Custom Class settings (if present).

To be sure the Custom Class Name works as expected, make sure it's setup in the Local Header/Footer scripts or Global Scripts in the Settings. It's mandatory the Class Name in the Script(s) you use is the same as the Custom Class Name you've given the section(s).

Example:

1. Entered the custom class name "blue-class" to the section settings and pressed the "Enter" key on my keyboard to add it.
​*Note: Separate class names with commas.

2. Added the CSS style code as a Local Script to the page:

<style> .blue-class { background-color: blue !important;} </style>

3. Save the script and Update the page.

4. View the published page to see the result.

Class Priority:

Favorite Sections

Favorite sections can be saved into the "Favorites" section category of the Section Library, to make it easy to re-use them on pages you're building out.

Any section can be saved as a Favorite by clicking the "Add to Favorite" option which is available from the Page Structure table in the sidebar or from the more actions menu in the Section settings:

More details on Favorite section and how to work with them can be found here in this help article.

Copying a section

A section can be copied either from the Page Structure table in the sidebar or from the more actions menu in the Section settings:

Deleting sections

A section can be deleted either from the Page Structure table in the sidebar or from the more actions menu in the Section settings:

Once a section (or element within a section) has been deleted, the action can be undone by clicking the "Undo" link within 5 seconds:

Rearrange page sections via Drag and Drop

Sections can be moved and rearranged as needed up and down the page, either from the Page Structure table in the sidebar or from the more actions menu in the Section settings:

Just left-click and hold on the move button, drag the section into the desired position and drop it once ready:

Did this answer your question?