On this page
- Adding blocks to your page
- Editing elements within blocks
- Block Background Settings
- Sticky Headers
- Duplicating a block
- Deleting page blocks
- Rearrange page blocks via drag and drop
- Undo/Redo block edits
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.
- 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.
Upload background image: Upload a background image for a specific page block. Add a block background image by clicking the "Browse" button to upload the image from your computer.
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.
Once you're finished configuring the Block Settings, click the Save button to save your changes.
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.
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.