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:
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)
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.
