Creating a Footer Layout with Elementor and Creativo

Creating a Footer layout is done using Creativo Elements and Elementor plugins. See this tutorial on how to Install, Activate and Update Plugins.

Creating the Footer Layout

To create a Footer layout, navigate to your WordPress admin dashboard -> Creativo Elements -> Footers.

The Creativo Footer Builder page will open up.

All the existing footers will be listed here.

If this is a new installation of Creativo, this page will not have any Footers layouts listed.

Click on Add New button.

Enter a Title for the new Footer layout.

Try using something descriptive: Global Footer, is a good name for our new Footer layout which will be set for the entire site.

Next click the Publish button.

The page will be opened with Elementor Editor.

Similar to the Header creation tutorial we can begin adding elements inside Sections.

Let’s create a 4 columns Footer layout.

Add a new section by clicking the plus sign.

Choose the 4 Columns layout/structure for the Section.

Click on the Elements button to access elements.

Add a Heading element first – it’s located in the Basic elements section.

Change the text for the Heading with your own text.

Under Style tab, set a color and play around with the settings for Typography.

Next add a Text Editor element – it’s located in the Basic elements section as well.

Change the content of the Text Editor element with your own content.

You should have something like this:

That looks good, but we should have some spacing above and below the Footer.

Edit the Section that holds the 4 columns.

Navigate to Advanced tab.

Under Padding, uncheck the Link values together button.

For Top and Bottom fields enter 40.

Now the Footer layout looks good with some decent spacing above and below its content.

Play around with the padding values until you have the layout you want.

For the rest of the columns, try adding different elements like: Basic Gallery, Contact Info, Latest Posts.

Click again on the Elements button to access elements.

Close all sections, except for WordPress section.

Search for WP Contact Us widget and add it to the second column.

Enter the info you need for the Contact address, phone, email, etc.

Next clone the Heading element from the first column, by right clicking on the Heading element in the first column and select Duplicate.

Drag the newly created element to the second column, above the WP Contact Us element.

This is a good way to use the same styling without having to recreate it again and again for each column where the Heading element will be used.

Change the text of the Heading element to Footer Heading 2.

You should now have something similar to the image below:

Clone the Footer Heading 2, a few more times and add them to the third and fourth columns.

In the Third column add the Image Gallery element.

Access the Elements section and under General -> find the Basic Gallery element.

Drag the Basic Gallery element in the Third column.

Add about 6 images to the gallery element by clicking the + sing. Upload them first to your Media Library.

For Image Size, choose Thumbnail – 150 x 150px.

By now you should have something like this:

In the last column add Creativo Custom Recent Posts element – it’s located under Elements -> WordPress, similar to the WP Contact Us element.

Leave the Title empty because we want to use our own Heading element as the title.

Change the Amount to show to 3.

Update the page.

The Footer layout should look similar to the following image:

Visit your site and the newly created Footer layout should appear on your site.