Footer is a block that is placed in the bottom of your site. It is a great way to organize a lot of site navigation and add additional information about your company.

Our team designed a fully customizable and user-friendly footer with a wide range of settings. It allows you to add rows and elements of your choice as well as setting up the animation and proper background.

In this article you can find the detailed instructions on how to:

add a footer to your site;
change the footer layout;
change the footer background;
add elements to your footer.

Adding a footer to your site

To get started, select the wireframe-series-1-footer block in the gallery:



You can choose whether to add the block to all site pages or to a current one:



Note: we recommend adding the footer to all pages. This way, it will become a global block, and the changes made on one page will automatically apply to other pages. Check the article Global blocks to see more information on how to make your footer global.

Changing the footer layout

If you're planning to add several elements to the footer, then it will be more convenient for you to place them on separate rows. This way, they won't be stacked in one place, and the site will generally look neater.

Adding rows to the footer

You can add a new row to your footer in the top left corner of the block:



In the drop-down menu, you can choose the type for your new row. You can add all available elements on our platform to rows with the vertical flow, including embed code, images, videos, or even a map. Rows with the horizontal flow are meant for the elements that can be typically found in global blocks — for example, menus or social icons.

Important: the maximum number of rows you can have in the footer is 4.

By clicking on the "gear" in the top left corner of the row, you can move it within the footer, duplicate or delete it and access its settings:



In the Layout tab of the row settings you can change its paddings or add the decorator between the rows:



Note: the option of adding the decorator appears only in footers with two or more rows. Bear in mind that you can't add the decorator to the last row of your footer.

Changing the footer background

In the Background tab in the row settings you can add color or image background to the footer:



When you set a photo as a background of the row, you will see more customization options — e.g., applying filter or color correction:



Important: these settings are applicable for each row in the footer separately.

Adding elements to your footer

Once your users have finished scrolling through the current page, you can provide them with an additional information about your site by adding elements in the footer — for example, authorship information, navigation menu or contacts.

Each row with the horizontal flow in your footer contains 3 empty boxes to fill with content. To add the needed element to it, hover over the empty section and click on the "plus", then choose the element in the pop-up window:



Important: rows with the vertical flow can contain maximum 8 columns.

After you've added an element to the box, you can supplement it with other items by clicking on the "plus" sign near the particular section:



You can also adjust the width of the boxes using the dividers that are placed next to them. To do this, hover over the empty space between the boxes, click on the divider and drag it to the needed direction:



Once you've done customizing your footer, don't forget to publish your site for the changes to appear live.

Important: if you don't have an option of adding rows to your footer, you're using the previous version of the block. You can still proceed with using it on your site. However, we highly recommend to change it to the new one to avoid unexpected issues with display or functionality.
Was this article helpful?
Cancel
Thank you!