How To

How To Edit Footer In WordPress Using Elementor

I was trying to remove “Powered By WordPress” branding and was struggling on how to edit footer in wordpress using elementor. To enable my self to write my own custom copyrighted sentence, I did a lot of research on how to edit footer in wordpress using elementor to make it look professional. There were a couple of methods to do that. So I decided to write a helpful post to share with you all, how I did it.

But first of all, how to edit footer in wordpress using elementor? You can edit footer in wordpress using elementor and Envato elements wordpress plugins to make it look beautiful and professional. The Elementor’s drag and drop page builder and Envato elements free template kits will help you make your footer stand out.

If you want to do something extra with your website footer, then I have an excellent way you can make your footer stand out in terms of design and functionality, instead of just the plain old “Powered By WordPress (or your site name)”.

So there are a couple of things you can do when it comes to editing footer in wordpress. There are many reasons why we try editing the footer, and I have written down a few of them below. 

To Remove “Powered By WordPress” Branding.

The easiest way to remove the “Powered By WordPress” branding from your brand new default “Twenty Twenty” wordpress theme is to copy-paste a simple line of code into your “Additional CSS” option.

To do that, head over to your wordpress dashboard and click Appearance > Customize > Additional CSS (last option). Copy-paste below CSS code and hit publish.

.footer-copyright a, .powered-by-wordpress a {
    display: none;
}

Another method which is the most recommended method is to install a new wordpress theme that has built-in “Theme Options”. To install a new theme go to Appearance > Themes > New Themes. Chose your favorite theme and install it. You can also upload a zip file of the theme, but that’s for some other tutorial.

Astra WordPress Theme
Astra WordPress Theme

My no. 1 choice for the wordpress theme is the Astra WordPress Theme. It is completely free and super fast to load. It also provides me with a built-in option to change the copyrighted branding in the footer. 

Another reason we edit the footer is to style them according to the theme we selected. We can make use of Footer Widgets here. If you’re using the default “Twenty Twenty” wordpress theme, then you have two Footer columns by default.

At both, the columns you can display your desired content by making use of Footer Widgets. The footer widget content can be.

  • Your website logo.
  • Social Media Icons.
  • Popular or Recent Posts.
  • Your Address & Site Info.
  • Newsletter forms. Etc.
Adding Footer Widget

There are footer widgets available for each of the display element. So you can go to the theme customizer > Widgets. Select the footer you want to work on and hit the “Add Widget” button. 

You can also stack any number of widgets depending upon your desired results.

You can take your footer game a step further by making use of some pre-made templates that are offered by many premium wordpress themes and plugins.

Footer example

However, buying premium themes & plugins can cost you a lot of money. I am not saying that investing money on them is a waste. But I do believe if you’re just a beginner, then you should make smart investments. And for the time being, you can probably skip spending money on buying premium themes and plugins.

That doesn’t mean that you have to settle for a weak footer section. Instead, you can make use of the three most awesome wordpress plugins that professional designers use to design the whole website and not just the footer.

Here’s the secret

Three awesome wordpress plugins can help you design your wordpress theme in the way you want. And the best part is, you don’t have to code or do technical stuff. 

Envato Elements WordPress Plugin

Envato Elements is an excellent plugin that contains tons of free pre-made design kits that you can install right away. Getting started with Envato Elements is simple. But first, go to your wordpress dashboard and select Plugins > Add New and type Envato at the search form.

Hit install and activate the plugin. Now, follow the below steps.

  • Select Envato and click on “Free Kits”.
  • Chose the right kit that pertains to your services. For example, if you’re a Music Teacher, chose the Music Lesson Teacher kit.
  • Hit the “Install Kit” button.
  • And click on the “View Kit” button.

You’ll see a bunch of pre-made templates for various pages of your website. There is a template for the homepage, About Us page, contact page, video lessons, pricing table, FAQs and coming soon page.

Editing The Templates

But to edit them and make it your own you’ll need another free plugin. The Envato elements will notify you of all the requirements at the top. Just click the “Install Requirements” button. A pop up will appear with all the required plugins.

If you see the “Elementor Pro” plugin as one of the requirements, then you can select any other kit which does not need the Elementor Pro plugin, since you have to buy it before using it.

But if you loved the design and want to continue with the selected theme, then you should consider purchasing the Elementor Pro wordpress plugin. It will be the best investment you can make to stand out in terms of design perspective. It will also save you tons of time and money in hiring a professional web designer.  

At this point, click on “Install Above Selected Requirements.”

Start Designing Your Home Page

Now, what you have to do is go back to your dashboard and select Pages>Add New. Enter the title of the page, for example, type “Home.” You’ll also see a button at the top that says “Edit With Elementor.”, click on it. 

Import The Templates

At the new page, click on the “Leaf” icon and select one of the installed template kits. There will be several designs shown for your homepage. If you hover over any of the design, you’ll see a preview icon that you can click and experience the look and feel of the design template.

Chose the one you like and hit “Insert Template.”

Make sure, after inserting the template, you go to elementor page settings (bottom left gear icon) and change the page layout to “Elementor Full Width.”

Now, you’ll see that your homepage design is complete. At this point hit the “Publish” button and view your homepage.

You will also notice that the header and the footer still contain the design of your installed theme. If it goes with your current web design, then that’s good, but most of us would like to edit the header and footer according to the new homepage design.

Installing Block Kit

For this, go to your dashboard and install a block kit from the Envato elements. To install a block kit, click on “Free Kits” then at the top right click on the categories button and chose the “Blocks” category. Preview the designs, then select and install your preferred design.

Now, we can make use of another free wordpress plugin called “Elementor – Header, Footer & Blocks.” install and activate the plugin right now and go to your wordpress dashboard select Appearance > Header Footer Builder.

Now click on “Add New” and name it. For simplicity let’s say we call it “Footer” but you can give it any name. Now click the “Edit with Elementor” button. 

At this point, click on the “Leaf” icon and choose your block kit. Scroll down to the bottom of the page and click “Insert Template” below the footer. 

To add the “Copyright” sub footer below, you can repeat the same process and this time chose the copyright template kit. You can stack your footer sections by just inserting other template kits. But a footer and a sub footer is enough for this tutorial.

Next, you can edit the footer and sub-footer using elementor builder. Just play with it and add your custom content. On completion, hit the “publish” button. 

Now get back to your edit page in wordpress, scroll down the template editor where you’ll see a drop-down menu option. For “Type of Template” select “Footer” and for “display on” select “Entire Website” option and “All” for user roles option that appears. Now scroll to the top and click the “Update” button.

You can repeat the same process to build a custom header for your website. While you’re importing your header template, you might encounter that it requires you to have Elementor Pro plugin. But you can click on “Ignore Requirements” button and still be able to edit. 

Change To New Homepage

Finally, in the end, you have to make this page your homepage. For that, go to your wordpress dashboard, and in the setting, click on “Reading”. Chose the “Home” page as your static page, scroll down and click on save changes.

Visit your site, and you’ll see you have just created a new homepage for your website with a brand new footer that looks way cooler than before.

Getting Started With The Elementor.

Unfortunately, I cannot teach you how to use Elementor through images, as the post will become extremely long. However, I have found a perfect video from youtube that you can watch to understand the basics of how Elementor’s drag and drop elements work.

I have found a beginner-friendly video to make it easy for you to get started with the Elementor wordpress plugin. But, this is a powerful plugin that can do much more than what the video will teach you. For more advanced tutorials, consider subscribing a proper youtube channel.

How to edit header in wordpress?

For the header in wordpress, you can make use of the theme options or the wordpress customizer. Open your wordpress dashboard go to Appearance > Customizer > Header.

You can change a bunch of settings to edit the header in wordpress. Alternatively, you can go to Appearance > Theme Editor, and look for the header.php file. But in most cases, the options available in the theme options of premium plugins are enough to edit the header.

In the wordpress default “Twenty Twenty” theme, you can go to the style.php file and look for the footer CSS class (.site-footer) and change its padding attribute to 0 pixels to minimize the footer height which is most often the desired results.

The recommended way and by far the easiest way to change the footer height is to make use of additional CSS in the customizer. Go to Appearance > Customize > Additional CSS and copy-paste the below code to minimize the footer height. And you can increase or decrease the padding accordingly.

.site-footer { padding-top: 0; }