On this page

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. 

The "Existing Block" option allows you to re-use blocks you've already customized/configured/styled for a page on any other page. Just use the "Choose Page" drop-down list to choose the desired page and then the "Choose Block" drop-down list to select the specific block you want to re-use. This feature allows you to save a lot of time, especially for blocks that you plan on re-using on every page like Header and/or Footer blocks. 

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 Background Settings

There's also the ability to edit the background of each individual block (the page's entire background can be edited from the left-side panel's "Page Settings" menu if desired). 

Click the grey pencil icon in the upper-right corner of the block's frame to open the "Block Settings" pop-up to edit the block background. 

Block Settings options include:

  • Hide on: 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: "Hide on" 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. 
  • Block Width: 2 Options are available:
    - Contain (default value): block content is limited to the container width: https://i.imgur.com/CtR5yW6.png;
    - Full: 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".
  • 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.
  • 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).
  • Background Color: Adjust the block's background color to any unique color desired by clicking the color swatch and then select your custom color.|
  • 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 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.
    - Origin: 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.

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. 

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.

Undo/Redo block edits

Each block's element and settings are equipped with an Undo/Redo feature. Use it to undo or redo up to 5 of your latest changes. 

NOTE: These controls stay gray-colored until you actually have something to Undo or Redo. Then they will become blue indicating that there is an undo or redo option available. Once you leave the Page Constructor session for a particular page, the undo/redo cache will reset for the page. This means that you will not be able to undo/redo block edits from a previous Page Constructor session. 

Did this answer your question?