Working with the Page Builder [Zipify Pages]

Know your basics - get the 101 on the ZP Page Builder

Jeff Maxfield avatar
Written by Jeff Maxfield
Updated over a week ago

The Zipify Pages "Page Builder" Interface

The Page Builder for Zipify Pages can be accessed by clicking on a page's name from the pages tables in a corresponding page section:

If you haven't created a page yet, click the "New Page" button from the Pages section. Then choose either "Blank Page" or "Use Template".

Once you do that, you will be taken to the Page Builder interface as seen below:

This is where all of the designing, editing, page building, previewing, updating and publishing of pages is performed!

๐Ÿ“Edits made during an editing session in the builder are saved automatically, with a 5 - 10 second delay between each edit and save. To ensure your edits are always saved correctly before exiting an editing session, click on the "Unsaved Changes" link located in the top-left of the builder to manually save. Always ensure it shows "Changes Saved" there before exiting an editing session:

Adding Sections to the Page

A page Section consists of multiple different Elements (image, button, text, etc) arranged in Rows and Columns to achieve a desired layout. When you add a new section, the rows, columns and elements will be included in predefined positions. The section can then be edited as-needed using the page builder.

For a new blank page, simply select the first section you want used from the Sections Library:

For a page Template or a page that already has sections included, click on an existing section and then on the "Add Section" button above or below the section where you want a new section added. Then make your selection from the Sections Library:

Section Appearance Settings

Each Section has Appearance Settings which can be adjusted on a section-by-section basis. A Section's settings can be accessed either by clicking the โœ๏ธ button in the top-left corner of the section (1) or in the sidebar of the builder (2):

The Settings that can be adjusted for each section are as follows:

  • Choose the device to Edit on (1)

  • Choose a "Scroll Action" and Toggle on the "Full Width" setting in the "Layout" tab (2)

  • In the "Background" tab (3) you can set a background color, background image or background video for the section
    ๐Ÿ“For background video, YouTube, Wistia Vimeo and Shopify videos are supported

  • In the "Spacing" tab (4) you can set Padding and Margin values for the section

  • In the "Visibility" tab (5) you can decide which device(s) you want the section to be visible or hidden on (Desktop/Tablet/Mobile)

  • In the "Advanced Settings" tab (6) you can set a "custom" CSS class name for the section. More details here.

See this article for more details on working with Sections.

Edits/changes applied in the left-side panel are saved automatically. To see these changes reflected on your published page, you must click the Update button (if the page is already Published) or the Publish button (to publish the page).

๐Ÿ“Sections generally stack left-to-right on Mobile/Tablet (portrait) view. A mobile stacking order setting is included for certain sections so you can change the stacking order if desired:

Adding and Removing Elements within Sections

Elements (image, button, text, etc) can be added and arranged in Rows and Columns within a Section to achieve a desired layout. When you add a new section, the rows, columns and elements will be included in predefined positions.

๐Ÿ“ Currently there is a restricted ability to delete "Product" elements (title, description, price, etc) in Buy Boxes directly in the builder. Instead, those need to disabled in the Layout tab of the Buy Box settings:

You can however still add and remove new elements added to the Buy Box.

To add additional element(s) to the section, first click on an existing element and then click the โž• sign above or below the existing element, depending on where you want a new element added:

That will invoke the "Add Element" popup where you can choose from a variety of elements to add:

Select the desired element by clicking on it to add it to the section:

To remove an element from the section, first click on the desired element. Then click the ๐Ÿ—‘๏ธbutton in the element settings:

Once an element has been deleted, you have 5 seconds to undo the action by clicking the "Undo" link. If the undo link is not clicked before then, the element will be completely deleted and will need to be manually added back again if desired:

Rearranging Elements within Sections

Elements within the same section can be rearranged and moved to different positions via drag and drop. To move an element to a different position within the section, first click on the element you want to move. Next, left-click and hold on the move button in the element settings:

Once you start to move the element, visual drop zones will be shown to indicate where the element can be moved to, which is generally above or below any other existing element within the same section. Drop the element into the desired location to move it:

Managing Rows and Columns within Sections

Most Sections consist of a single Row and multiple Columns (up to 12 per Row) within the row to achieve the desired layout. The "Image + Text + Button" section shown below for example consists of 1 row and 2 columns within the row:

The width of each column in a row can be adjusted using the slider action available between columns. Content included in each row adjusts dynamically based on the set column width:

Row Settings

By clicking into the Row settings (1), you can:

  • Choose the device to Edit on (2)

  • Add additional Columns (3) by clicking the "+ Add New Item" button

  • Rearrange existing Columns (4) via drag and drop

  • Edit, Copy or Delete an existing Column (5)

  • Access Column Settings for the Row (6)

  • Access Alignment Settings for the Row (7)

  • Access Background Settings for the Row (8)

  • Access Spacing Settings for the Row (9)

  • Delete the Row by clicking the ๐Ÿ—‘๏ธ button (10)

  • Add an additional Row or other element (11) above or below the existing row

In the "Column Settings" tab you can set the default value for column spacing for columns included within the row. Preset values of S/M/L/XL are provided. You can also use the slider or text input field to set a custom value:

In the "Alignment" tab you can set the Vertical Alignment of columns included in the row. Top/Middle/Bottom options are available:

In the "Background" tab you can edit the row's:

  • Background Color - Set a background color for the row

  • Background Image - Set a background image for the row
    โ€‹

In the "Spacing" tab you can edit the row'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โ€‹

Column Settings

Columns also have their own set of independent Settings as well, which can be adjusted by clicking on the column element:

In the "Background" tab you can edit the column's:

  • Background Color - Set a background color for the column

  • Background Image - Set a background image for the column
    โ€‹


    โ€‹In the "Shape" tab you can edit the column's shape:

In the "Border" tab you can edit the column's:

  • Border Style - None, solid, dotted or dashed

  • Border Size - How thick you want the border to be

  • Border Color - The color you'd like used for the border
    โ€‹

In the "Box Shadow" tab you can edit the column's:

  • Color - The color of the shadow

  • X offset - The horizontal distance of the shadow. You can use positive values to push the shadow rightwards and negative values to push it leftwards

  • Y offset - The vertical distance of the shadow. Positive values will push the shadow downwards, while negative values will push it upwards
    ๐Ÿ“ X and Y offsets can also be set using the pin in the square to the right of the offset fields. The pin can be dragged to set coordinates

  • Blur - The blurriness of the shadow. Higher values create a more blurred shadow, while lower values create a sharper shadow

  • Spread - The size of the shadow. Range of allowed values is 0 - 20

In the "Spacing" tab you can edit the column'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
    โ€‹

The Page Builder Sidepanel

The Sidepanel can be expanded or contracted as needed, to give more or less on-screen real estate for editing. To contract the panel for more editing room, click the โ—€ button located on the side of the panel. To expand the panel to access the sections list and other settings, click the green โ–ถ button:

There are 3 settings tabs available in the sidepanel of the Page Builder:

  1. Sections List

  2. Page Settings

  3. Page Styles

Sections List

In the Sections List tab, you can view the page structure listed in order of sections. Settings and options available include:

  • Expand/Collapse the section structure into Rows > Columns > Elements for clearer visibility and easier editing

  • Edit the section name: Double-click on the section name to edit it.

  • Edit the section appearance settings by clicking the โœ๏ธ button

  • Make a Copy of the section by clicking the copy button

  • Click into the "More Actions" menu where you can:

    • Add to Favorites

    • Hide the section

    • Delete the section

  • Move sections: Click and hold on the "move" button to rearrange page sections via drag and drop

You can also expand or collapse the structure of all sections at once by clicking on the "Expand All" or "Collapse All" button respectively:

When working within a section, Breadcrumbs are displayed at the top of the editor to make it easy to see the structure of the section and the particular element that has been selected. Each link included in the breadcrumbs menu is clickable, allowing easy edit access to each element included in the section:

Page Settings

In the Page Settings tab you can set the Header and Footer settings for the page, the Background settings, the General settings and the option to "Save Page as a Template":

  1. "Use theme header/footer" - When enabled, this setting will pull in your store Theme's header and footer to the page. Placeholder images will be shown in the page builder, your actual Theme header/footer will be shown and used on the published page version only. More details
    โ€‹๐Ÿ“ When the "Use theme header/footer" feature is enabled, the ZP page content will be wrapped by the main theme container and inherit the main theme's width for content.
    โ€‹
    โ€‹"Use my Global Header" - Enable this option to use your Global Header configured in the Global > Sections> ZP Header section of the Zipify Pages app.
    โ€‹
    โ€‹"Use my Global Footer" - Enable this option to use your Global Footer configured in the Global > Sections > ZP Footer section of the Zipify Pages app.
    โ€‹
    "Enable fixed layout" - When enabled, this setting constrains page sections to a predetermined max width. This setting is applicable to Desktop/Tablet views for the page only.
    โ€‹

  2. Background: Adjust the page's background settings including Color and Image.
    โ€‹Background Color - Adjust the entire page's background color by clicking on the color swatch or by entering the color hex code to set your custom color.
    - Background Image - Add a page background image to the page by clicking the "Choose Image" button to add an image from the Image Library.


    โ€‹Background Image options:
    โ€‹


    Click the "Crop" button (1) to crop and rotate the imageโ€‹. Click the "Change" button (2) to use a different image. To remove the background image, hover over the image then click the "Remove Image" button (3) that appears.
    โ€‹
    โ€‹Size options (4) for the image include:
    - Original (keeps the original dimensions for the image)
    - Cover (enlarges the image and covers the whole page from top to bottom)
    - Contain (enlarges the image to fill the page width)
    โ€‹
    โ€‹Tile options (5) for the image include:
    - Repeat X and Y (repeats the image horizontally and vertically across the page)
    - Repeat X (repeats the image horizontally across the page)
    - Repeat Y (repeats the image vertically down the page)
    ๐Ÿ“Tile options are only available for the Original and Contain image size options
    โ€‹

  3. General:
    - Timezone - Set the time-zone you want used for any/all countdown timer elements added to the page.
    - Scroll To Top Button - Adds a "back to top" widget to the page. The widget appears once you've scrolled down 20% of the published page. Enabled by default.
    โ€‹

  4. Save Page as a Template: Click this button to save the current page as a Template, available for use in the "My Templates" category of landing page templates. More details here

Page Styles

The Page Styles options allows you to save time by applying default styles for various Text (1) and Button (2) types being used on a particular page:

Style changes applied manually to text within sections take priority over the styles set in Page Styles. More details on the Page Styles options can be found in our help article here.

๐Ÿ“ Edits/changes applied in the sidepanel are saved automatically. To see these changes reflected on your published page, you must click the Update button (if the page is already Published) or the Publish button (to publish the page).

There are also Global Styles which can be applied to the page instead if desired. Applying global styles will override any/all page styles applied to the page:

The Page Builder Navigation Panel

Exit Builder

To exit the builder and return to the main app interface at any time, click the Zipify Pages logo located at the top-left of the page builder screen:

Preview Modes: Desktop / Tablet / Mobile

To enter into page Preview mode, click on the ๐Ÿ‘๏ธ button located at the top-center of the builder's navigation bar:

Once in preview mode, click into the Desktop, Tablet or Mobile button icons (1) to preview your page on different devices. To exit page Preview mode, click the green ๐Ÿ‘๏ธ button (2) and you'll return to Builder mode:

The "Visibility" setting for page sections and elements is taken into account in preview mode I.e. a section that is set to be shown on Mobile only will not be shown in the Desktop preview.

Switching between Pages in a Group

If the page you're working on belongs to a Group, you will be able to quickly switch between the pages in that group without needing to leave the page builder.

To do that, simply select the page that you want to work on from the group using the available dropdown menu in the builder as shown below:

Adding Scripts

Click the </> button to open up the "Page Scripts" pop-up window where you can add Local additional scripts or manage which Global scripts to use on the page:

The "Manage Scripts" dropdown allows you to choose one of the following options (separately for Header and Footer sections):

  1. Use global scripts only: This option will only use the Global scripts which have been added. The Global scripts will appear for you to select which ones you want used.

  2. Use local scripts only: This option will open up the script addition form (similar to the Global scripts form in the Settings > Global Scripts section of the app) where you can add Local scripts to the page.

  3. Use both global and local scripts: This will show a list of both Global and Local scripts which allows you to check the ones you want used for the page.

  4. Use no scripts for this section: No scripts added through Zipify Pages will be used for the page.

Publish/Update your Page

  • If the page has "Editing" status and is yet to be Published, you will see the "Publish" button shown in the top-right corner of the Page Builder interface.

  • If the page has "Published" status and is published, you will see the "Update" button shown in the top-right corner of the Page Builder interface instead.

Once the page is published a success popup will show where you can copy the live page URL or click on the "Live Preview" button to view the page on your storefront. You can also scan the QR code on your mobile device to view the published page on mobile:

Published landing pages are also listed in the Sales channels > Online Store > Pages section of your Shopify admin:

๐Ÿ“ To make edits to the Title, Handle, Description, etc. of a published page click into the Publish Settings > General section of the page builder, apply the edits and click the Update button.

Glossary

  • Breadcrumbs - a visual trail of links, indicating the user's current location within the section's hierarchy for easy navigation and context.
    โ€‹

  • Column - a vertical arrangement of content that helps organize and structure a section, to improve readability and create a balanced layout.
    โ€‹

  • Element - a fundamental building block, such as text, image, button, or form, that contributes to the overall structure and visual composition of a web page.
    โ€‹

  • Row - a horizontal arrangement of elements, such as text, images, or buttons, used to organize content and create a structured layout.
    โ€‹

  • Section - a distinct and visually cohesive grouping of content, often used to organize and separate different parts of a webpage for improved structure and readability.
    โ€‹

  • Sidebar - a vertical menu or container typically positioned on the side of the interface, providing quick access to key features, sections, or navigation options.

Did this answer your question?