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 Sections Library that contains all sections for Zipify Pages divided into categories so you can easily find any section needed:

Existing Sections

The "Existing Sections" feature lets you reuse sections you've already customized on one page across any other page. It's a huge time-saver, 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" tab from the Sections Library popup.
Select the Page Type.
Choose the Page you want to reuse the section(s) from.
Click on the Section(s) you want to add. Up to 10 sections can be added at a time.
Click on the "Add to Page" button to add them to the page.

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.

Copy/Paste Element Styles

The "Copy/Paste Element Styles" feature allows you to replicate style-related settings from one element to another of the same type (e.g., Button to Button) on the same page or across different pages. This includes copying fonts, colors, shadows, borders, and other style attributes.

Just right-click on an element and the following options will become available in the builder:

Or from the elements tree within the sidebar:

You can also use the following keyboard shortcuts. While the Safari browser doesn't support these shortcuts, you can still copy and paste styles:

Option	Keyboard shortcut
Duplicate	Mac: ⌘ + D / Windows: Ctrl + D
Copy Style	Mac: ⌘ + C / Windows: Ctrl + C
Paste Style	Mac: ⌘ + V / Windows: Ctrl + V
Delete	Mac: ⌘ + ⌫ / Windows: Ctrl + Backspace

📝This functionality is restricted to elements of the same type and will not work between different element types (e.g., Button to Image). An error message will be shown if attempting to copy/paste element styles between different types:

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 with two options available:
- Solid - A single, uniform color that fills the background consistently, providing a clean and simple look.
- Gradient - A smooth transition between two or more colors that adds depth and visual interest to the background.
  
  For both options, you can choose colors using the color picker and slider or by entering a specific Hex or RGB color code in the input field. Transparency is adjustable with the slider or by setting an Alpha value.
  For Gradient, you can also set the angle to control the direction of the color transition across the background. This angle, measured in degrees, adjusts the gradient direction as follows:
  - 0° for horizontal (left to right)
  - 90° for vertical (top to bottom)
  - 45° for diagonal (top left to bottom right)
  - 135° for diagonal (bottom left to top right)
  Changing the angle gives you greater control over the gradient's visual effect and orientation.
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 scripts or Global Header scripts. 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 to add it.
📝 Separate class-names with commas.

2. Added the CSS style code as a Local Header 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 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: