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) with two options to choose from:
Section overlaps the previous one (if any) when scrolling
Section attaches to the previous one (if any) when scrolling
Appears on with two options to choose from:
Scroll Up - The section will appear when the page is scrolled upward.
When the first Product Button is out of the view - The section will appear once the first "Product Button" is out of view.
📝For "Fixed on Screen" and "Appears on" options, you can also set the Position the Section should be shown in on the page (Top or Bottom):
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 4 video services are supported for this feature: YouTube, Wistia Vimeo and Shopify. 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:
Class priority is being defined based on CSS Specificity (https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) and the order/time when the class was added.
Class which is added last to the Scripts section has a higher priority.
Footer scripts have higher priority over Header ones since they're located lower in the DOM-tree (https://javascript.info/dom-nodes)
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:
