In this tutorial, we are going to create custom footer in GeneratePress with the help of GenerateBlocks.
Here we are going to use the Generateblocks plugin, a plugin by the same developer behind GeneratePress and WP Show Posts.
I want to remind you that GenerateBlocks is one of the best plugins that helps you to design almost anything in WordPress with ease.
Moreover, in this guide, you are also going to learn
- How to use GenerateBlocks?
- How to use the Elements Module?
- Customize Footer Section
Here, we are going to use the combination of both GeneratePress and Generateblocks to customize the footer section of our website. The combination makes the site more powerful and customization very easy.
Recommended Reading: GenerateBlocks Review
Before customizing the footer section in GeneratePress, you need to install the GenerateBlocks plugin from the WordPress repo.
- Go to your Dashboard.
- Go to Plugins > Add New.
- Search GenerateBlocks.
- Click on Install and Activate the plugin.
- Now you are ready to use GenerateBlocks with GeneratePress Theme.
Activate Element Module
To use the block element feature you need to activate the Elements module which is available in GeneratePress Premium Theme.
- Go to your Dashboard > Appearance > GeneratePress.
- Activate the Elements Module.
Adding Block Element
After activating the Elements Module, go to Appearance > Elements to use the different functionalities.
To replace the original footer with a custom footer, you need to use Block Element Type. so follow this process.
- Go to Appearance > Elements.
- Click on Add New Element.
- Choose Block as Element Type.
- Click on Create.
Check Out: GeneratePress Tutorials
Now, add a title to the new element, you can name it anything as it’s only for internal purposes.
On the right sidebar, you see the Block Element section, in this area, you need to select Site Footer in the Element Type Section.
After selecting the Site Footer Section, you will see 2 footer templates for now, maybe in the future, there will be more templates to import and edit.
You can choose any of them, let’s say we are selecting Full Footer 1 here.
Note that, here you can customize the whole template, this is possible due to GenerateBlocks.
Edit all the dummy text: Edit the Title, Link all the Social Profile Links, Link privacy policy, Terms of Service page, etc.
Note that, with Generateblocks you can edit everything related to Typography, Spacing, Colors, Icon, Backgrounds, Shapes, etc. Play with some settings to make the footer section beautiful.
Learn to play with 4 basic building blocks of Generateblocks i.e. Container, Grid, Headling, Buttons.
For example, select the whole container block and add a curve to the top or bottom of the container using the Shapes block. You can choose between Waves, Angles, Curves, Triangles, etc. You can also manage Padding, Margin, Border Size, and Border Radius using a Spacing Block.
The final step to complete this tutorial is to use the Display Rules setting,
Go to Location under Display Rules and Choose Location as Entire Site.
Furthermore, you can also use Exclude, Users, and Internal Notes settings here.
Finally, after editing and applying all the settings in the Elements Module, Hit the Publish button.
Bottom Line
Without using the templates, you still can create a custom footer in GeneratePress with the help of the GenerateBlocks plugin but with the templates, it is one or two clicks away.
Moreover, the GenerateBlocks Pro version has a lot more features related to it than the basic version.
If you love this tutorial then you can get your hands on the Premium version of both GenerateBlocks & GeneratePress.
Thanks for this post!
I went with the template you choose. Is it possible to change the entire background color of the template? Also, how can I get it to reduce in height from top to bottom. It takes up a lot of vertical space. Let me know. Again, thanks.
Hi Sylvester,
You can change the entire template. Just play with the Generateblocks setting, I am sure you’ll be able to fix the issue.
Thanks
Sir i want to create footer like footer in your template please can you provide me your footer element code. if its not possible here you can mail me as you already have my mail address.
thank you