Adding blocks to your page
Existing Block
Editing elements within blocks
Block Settings
Custom Class Name
Example:
Class Priority:
Sticky Headers
Product and Header Settings
Favorite Blocks
Duplicating a block
Deleting page blocks
Rearrange page blocks via drag and drop
All Collections
Zipify Pages - Tutorials & Documentation
Zipify Pages Builder
Working with Page Blocks [Zipify Pages]
Working with Page Blocks [Zipify Pages]
Learn how to build a page using Page Blocks and how to work with page block settings
Jorge avatar
Written by Jorge
Updated over a week ago

Adding blocks to your page

In order to add another block above or below an existing block, just click the ➕ button on the top or bottom of the block respectively.

You will then be presented with the Block Library that contains all page blocks for Zipify Pages divided into categories so you can easily find any block you might need.

Existing Block

The "Existing Block" option allows you to re-use blocks 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 blocks that you plan on re-using on the majority of pages like Header and/or Footer blocks.

  • Click into the "Existing Block" category from the Page Block 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 block from.

  • Click on the "Choose Block" drop-down list to select the specific block(s) you want to re-use and click the "Add Blocks" 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 and Blog Posts.

  • You can select and add multiple blocks by holding the Ctrl key (Windows) or Cmd key (Mac) or by left-click hold and drag.

Editing elements within blocks

Once a block is added to your page, you can customize it as per your needs. Just hover your cursor over any block to have the control elements appear. Each editable block's element will have a blue frame around it and a blue pencil icon.

To begin editing any block element, simply click on the element itself or the blue pencil icon. To hide the control elements, press the Esc key.

Note: The available editing options for each element within a block varies depending on the type of element being edited.

Block Settings

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

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

  • Hide on (Visibility) - Decide which device(s) you want the block to be visible on (Desktop/Tablet/Mobile)

  • Block Width - Contained (default) or Full Width

  • *Vertical Alignment (Desktop) - Top / Middle / Bottom

  • *Stacking Order (Mobile) - Left to Right / Right to Left

  • Block Padding - Adjust the top/bottom/left/right padding of the block

  • Block Background - Set a background color/image/video for the block

  • Advanced Setting - Set a "custom" CSS class name for the block

* Only available for the following blocks; Small Image + Text, Text + Small Image, Testimonial + Image 1, Testimonial + Image 2, Text + Image 2 Rows, Image + Text, Text + Image, Plain Text 2 Column, Plain Text 3 Column, Text + Opt-in Form, Testimonials, Image + 3 Column Text, Image + Text - Left, Text + Image - Right

Block Settings options include:

  • Hide on (Visibility): show/hide any block on Desktop, Tablet or Mobile devices (or a combination of any of those devices). Gives you the ability to create Desktop and Tablet/Mobile versions of your pages.
    Note: "Device Visibility" icons will display in the block's top-left corner when the block is hovered over in the page editor to quickly show which device types the block is hidden on.

  • Delay Display of Block: In some cases, you may want to have a page block delayed from showing up on the page until a certain amount of time has passed. For example, if you have a video that educates someone and tells a good story that leads into a sales pitch, you don't want the CTA button to show up before the pitch starts. Click the switcher to the ON position to enable this feature and enter in the number of seconds you want the block delayed before appearing on the page. The maximum number of seconds a block can be delayed from showing is 999 seconds.

  • Block Width: This setting is applicable to Desktop/Tablet views for the page only. On Mobile, 15px left/right padding will be used for all blocks by default.
    - Contain (default value): block content is limited to the container width: https://i.imgur.com/CtR5yW6.png;
    - Full Width: block content is stretched out to the full width of the page: https://i.imgur.com/VamGhau.png.

    How the width setting set to "Full" works with different Page Layout settings:
    1. Fixed layout disabled: blocks where Full Width is enabled are stretched to the full screen size:(https://i.imgur.com/ZLOhjCu.png).
    2. Fixed layout enabled: blocks are limited to the container width in any case: (https://i.imgur.com/0VWqH7e.png).
    3. Theme header/footer enabled: blocks where Full Width is enabled will be stretched to the full screen size in the Page Builder and Preview modes,(https://i.imgur.com/9CkNiw7.png) but they will be stretched to the full width on the live page only if the store theme does not have main container width restrictions.

    Note: By default there are right/left padding options for blocks on all devices. So, for blocks where the width setting is set to "Full" we're defaulting all "Padding" settings to 0px.

    How the width setting set to "Full" works with our single-element blocks:
    There are 5 single-element blocks in the App:
    "Image", "Video", "Divider", "Headline + Divider", and "Plain Text #1".
    Previously to stretch these elements to the full width, you needed to enable the "Full" size option inside the element popup (e.g., https://i.imgur.com/HPQI55t.png). Now an additional step is required - you should go to the "Block Settings" popup and set the "Block Width" setting to "Full".

  • *Vertical Alignment (Desktop) - Set the vertical alignment (Top / Middle / Bottom) of the text element included within certain blocks.

  • *Stacking Order (Mobile) - Set the block's element stacking order (Left to Right / Right to Left) for certain blocks on mobile devices.

  • Padding: Adjust the top/bottom padding of the block in pixels to provide more or less space between the block and the other block above or below. Adjust the left/right padding of the block in percentages relative to screen size. Left/right padding only works for Desktop and Tablet views of the page (doesn't work on Mobile due to lack of screen size).
    Note: Click the "Lock" icon in the center of the padding settings to lock the padding values you've set for the block.

  • Background Color: Adjust the block's background color to any unique color desired by clicking the color swatch and then select your custom color. The "rgba color code" can also be inserted directly if you have that available.

  • Add a background Image or Video:
    - Upload an Image from your computer
    - Use a URL or Embed code for a Video
    *Note: The following 3 video services are supported for this feature: YouTube, Wistia and Vimeo

    Background Image 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 block's background image.

    - Texture: Repeat X (repeats the image horizontally across the block) or Repeat Y (repeats the image vertically down the block).
    Note: Texture options are only available for the Contain and Origin image options.

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

    Background Video options include:
    - A field to add the Video's URL or Embed code.
    *Note: YouTube video doesn't support autoplay on tablet/mobile devices, so the video's thumbnail image will be shown on those devices instead.

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

Once you're finished configuring the Block Settings, click the Save button to save your changes.

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 block. The same class name can be applied to multiple page blocks as well.

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 block 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 block(s).

Example:

1. Entered the custom class name "blue-class" to the block 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:

Sticky Headers

Any of the Header blocks can become "sticky" (the Header will stay glued to the top of the page when scrolling down to view page content) by simply clicking this "pin" button:

Two Header blocks can be made "sticky" per page. Use one for the Mobile version of the page and one for the Desktop/Tablet version.

Product and Header Settings

Buy Boxes and the Dynamic Header Block will have a ⚙️ button available in the top-right corner of the block where additional Product and/or Header block settings can be accessed.

For Buy Boxes, clicking in either/or location shown below will invoke the same action:

Favorite Blocks

Favorite blocks are blocks you save into the "Favorites" block category of the Block Library, to make it easy to re-use them on pages you're building out.

Any block can be saved as a Favorite by clicking on the ★ icon in the top-right corner of the block, which is shown after the block is hovered-over:

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

Duplicating a block

Click the "Duplicate Block" button to quickly duplicate any block on the page.

Deleting page blocks

Click the "Trashcan" icon to delete the page block. This action is non-reversible so a pop-up will appear asking you to approve this action before the block is deleted.

Rearrange page blocks via drag and drop

There's an ability to rearrange blocks up and down the page. Just place your mouse cursor over the "Drag" icon and click and hold your mouse's left-click button.

Drag the block into the desired position and then release the mouse's left click button once you've moved the block into the desired position.

Did this answer your question?