The Custom Layout Block provides you with the ability to have complete control over the layout of your website. With this block, you can add multiple rows of content, with each row having up to four columns that can be adjusted to fit your needs. This allows you to arrange images, buttons, and text in a way that aligns with your creative vision for your website.
Adding the Custom Layout Block
To add the Custom Layout Block to one of your website pages, follow these steps:
- In your Zenfolio account, click on the Website icon on the left-hand side.
- From your Site Pages in the column on the left, select the Page you want to add to. Or create a new page for your site.
- On that page, click on the
icon in the place you want to add this Block.
- Scroll down to the Content Blocks section and select the Custom Layout Block.
Customizing the Custom Layout Block
Once the Custom Layout Block has been added to the page, you can begin creating custom layouts that incorporate images, buttons, and text. It is worth noting that the range of possible combinations that can be achieved with the Custom Layout Block is virtually limitless. To assist you in this process, we have also included a selection of pre-determined Suggested Layouts for you to consider.
Suggested Layouts
To choose from our pre-selected Layouts, follow these steps:
- Add the Custom Layout Block to your page.
- On the left-hand side of the page, click on the Suggested Layouts button.
- A list of various styles and arrangements will be displayed for you to choose from.
For example, you could select a CTA (Call To Action) Suggested Layout that will allow you to set up something like this:
There are many different Suggested Layouts to select from. However, it is important to note that once a Layout is chosen, any previous customizations made to the Block will be lost if you decide to switch to another Suggested Layout.
Creating Your Own Custom Layouts
Even with the wide variety of Suggested Layouts available, you may feel more inclined to explore and create your own Custom Layouts from scratch.
After incorporating the Custom Layout Block onto the page, you will notice a grid of eight icons on the right-hand side. This serves as a starting point for placing content within the Block. It is important to note that this grid is customizable, allowing you to add or remove rows and columns as needed.
Click on one of the icons and choose whether you want to add an image, text, or button.
- Text can be edited directly within the Block, just place your cursor into the text area and begin typing and editing the text you want to add.
- Buttons can be customized by hovering your mouse pointer over the button and clicking on the icon
that appears. You'll be able to control the size, text, alignment, color, and link destination of the button – you can even create a Mail-To link.
- Images can be customized by hovering your mouse pointer over the image and clicking on the icon
Customizing the Options of the Custom Layout Block
Now, lets analyze the different sections of options that will be available on the left-hand side of the page. These options will allow you to manage the amount of content within the Block and provide additional customization for the added content.
First, you will be able to select the types of devices (desktop, tablet, mobile) on which this Block will be displayed. Directly below that, you will find the Text section of the Block. The Text area will enable you to include a Heading and Body of text at the top of the Block.
Next, you will encounter the Columns & Rows section. This section serves as the primary option for controlling the overall layout of the content displayed in the Block. Here, you can utilize these options to add additional rows for content and select the desired number of columns (1, 2, 3, or 4) for each row. Moreover, this area also provides the flexibility to specify the number of columns in which the content should be displayed on mobile devices. Given the limited screen size of mobile devices compared to desktop computers or tablets, you have the choice to display your content in either 1 or 2 columns.
The Appearance section provides options to adjust the padding and width of the Block and its content. The "Top & Bottom Padding" setting determines the space between this Block and the Blocks above and below it. The "Fixed or Full Width" option allows you to specify whether this Block has a fixed width or will expand to fill the browser window. The "Column Gutters" setting determines the space between each vertical column within the block, while the "Padding Between Rows" setting controls the horizontal spacing between each row.
The next section, called the Background section, provides options for determining the type of background for the overall Block. You have the choice to have no background, which will adopt the background color of the entire website. Alternatively, you can opt for an image or a custom color background. If you select an image background, you can also specify whether this image should be visible on mobile devices or if a color background should be displayed instead.
Lastly, you have the option to utilize the Scroll FX feature to specify whether this Block will gradually appear as visitors scroll through the page.
Customizing Individual Columns of Content
You can enhance the level of customization for your Layout by choosing a specific column space and utilizing the options provided on the left-hand side to modify attributes such as the width and height of the column, gutters (padding) within the column, background color, and the addition of a border.
If you choose the Row option while a specific column is selected, you have the ability to add more rows and columns within that particular column.
You may now begin to see the vast range of possibilities for creating various layouts to showcase your content.
If you have any questions regarding the Custom Layout Block and how to customize your content within the Block please contact our helpful Support team HERE.