For WordPress users who have been used to Elementor, by now you are aware that it is a very genuine WordPress page builder which is worth doing more than designing page layouts. Nowadays one can create a custom footer using the page builder and set the footer to be used in the entire site or in several pages. The process of creating a custom footer also involves creating a layout just like in pages but in this case it has to be minimalistic as it requires less space. In this tutorial, we will show you how you can create a custom Footer in the Seeko theme using Elementor.
To get started you will require to have installed and activated the Elementor plugin and the Pro version in some steps, then proceed with the following steps:
Step 1:- Create a New Template
First, Head over and login to your WordPress website and go to WP Admin > Elementor > My Templates.
Next you can hover on the templates section and click “Add New” or you can simply click on Templates option, and on the next page click on “Add New” link.
Step 2:- Label the Template
After you have clicked on the “Add New” button you would then need to select the type of template as “Footer”. Give it a Name and click on the Create Template button.
Step 3:- Choose a Pre-Design
On the next screen, you will be prompted to choose from the pre-designed Footer Templates offered by Elementor or you can close this box and start building from scratch. Select the one you want and click on the Insert button. Please note that you would require the Elementor Pro version to insert the pre-designed template. If you do not have one you can simply close the box and design your own custom layout from scratch.
Step 4: Editing the Template
To create the template from scratch you would need to simply use your own layout. To do this first click on the red plus icon to add a layout. In this case use a 4-column row as the footer layout.
Next on the first left column drop a heading widget and give it a title of your choice (e.g About Us). Below it add a text editor widget and type in the text of your “About Us” section.
You can then add another heading widget for the social buttons title, in this case you can label it: “Find Us”. Once done drop in the Social icons widget and style it as you like.
Proceed to the 2nd column of the footer section. For this part you may opt to display some of your site categories or tags. For our case with the Seeko (Mentorship) theme, we used the “Rainbow Categories” widget. As for its title we labeled it “Interests”.
Next is the 3rd column where you can opt to feature some of your members within the site. In this case, the Seeko mentorship theme uses the members as “mentors”, thus we included the BuddyPress members widget and then edited the title as Featured Mentors. You can always set how many members to display and which type of members to show in terms of (Newest, Active or Popular).
Lastly on the 4th right column you may add a section showing the last activity of the members. This can be displayed using the “Recent Comments” widget. However, you would need to change its title to “Recent Activity”, and then change the number of activities you want to display.
If you want to, you can also decide to stretch the layout or set a fixed width when you create a custom footer with Elementor.
Step 5:- Styling the Layout Section
On this step we will include some styling on this row section to make it look unique. You can style it in a way that all the text widgets are visible to the visitor of the site. In any case the row styling does not blend with the widgets you would also need to style the individual elements like text editor to change the typography, color and other styling options.
- In this section you can apply styling options for the background where you choose a background type over the classic, gradient, video or slideshow options.
- Next styling section is the background overlay where you would also choose a background type between classic and gradient. You can optionally add a blend mode for this styling option.
- Then you can opt to include a border type of your choice and add radius and color to it.
- Additionally adding a shape divider type to this section improves its unique appearance toward the site visitors.
- Under the typography part you can change the heading, text and link color and font options.
Step 6:- Setting Conditions
Once done with all the styling and editing options you need to click on the Publish button to save your changes. When you click on the Publish button, you will be prompted to add some conditions to the page. These conditions define where your footer or any other theme parts will be displayed. Since I want this footer to show up on the Entire Site, I will select the same from the list.
If you have created a custom template using the free Elementor version, please navigate to the Appearance>Customize>Seeko Options>Footer>Elementor Template and select the custom template created.
After all the editions and setting the conditions is done, this is the result. A styled unique footer with a social and members activity widgets. You can also try pre-designed footer template designs as well.