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 (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 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.

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

Block Appearance Settings

There's also the ability to edit the Appearance of each individual block. 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 block'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 "Full Width" option for the block On/Off. "Contain" is the default.
    πŸ“To make the block edge-to-edge, you must also set left/right padding values to 0 when the full width option is enabled.

  • Set the Vertical Alignment of the block with presets available for Top / Middle / Bottom options

  • On mobile edit mode, this section also includes a Stacking Order setting with options for "Left to Right" and "Right to Left", depending on how you want elements within blocks stacked on mobile:

2. In the "Background" tab you can:

  • Set a Background Color for the block 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 block's background image

    • Tile options include:

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

      • Repeat X - Repeats the image horizontally across the block

      • Repeat Y - Repeats the image vertically down the block

        πŸ“Tile options are only available for the Original and Contain size options.

3. In the "Spacing" tab you can adjust the block'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 block on:

  • Show on Desktop

  • Show on Tablet

  • Show on Mobile

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

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

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

  • Add "Custom Class Name(s)" to the block 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 block. The same class name can be applied to multiple page blocks 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 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?