It’s sometimes easy to get lost in all the customization options, and simple actions such as removing the footer can easily be missed.

This article will teach you how to remove the footer in Divi with or without using CSS.

Why Remove Footer in Divi

Generally, your website’s header and footer sections appear on every page. However, some specific scenarios will require you to remove the footer. Here are some of them:

• Sales pages are usually lengthy content pages with a particular offer and call to action button. These pages will usually hide the header and footer to prevent interruptions and keep the visitor’s focus on the request.
• Cart and checkout pages also come without a footer to prevent visitors from clicking on links that will navigate them out and abandon the checkout funnel.
• Opt-in pages are usually short pages focusing on a specific goal to capture the visitor’s email address. Footer can take the attention of the offer, and therefore, it should be removed.
• You would like to remove the proudly powered by WordPress paragraph.

Those were just a few reasons you should remove the footer in Divi. You can read additional reasons in our how to edit a WordPress footer article.

There are many ways to remove Divi’s footer, and I’ll show you the three most common methods in this article.

Let’s start with the first way: removing the footer from the Divi theme builder screen.

Remove the Footer in Divi Theme Builder Screen

This method is my preferred one because you can easily remove the footer through the default Divi theme builder screen with a button click.

You can remove the footer for all pages altogether or specific pages only.

Remove Footer from Specific Pages

The steps above will remove the footer from all WordPress pages. However, if you want to remove the footer only from specific pages, we will first need to create another template and hide the footer. It’s a very similar process to the method above, with an extra step.

First, click on the Add New Template box to add a new Divi template.

Then, click on the Specific Pages option to choose the pages you want to display without the footer. Once you have checked your desired pages, click the Create Template button.

Finally, remove the footer by clicking on the eye icon next to the Add Custom Footer option and save the changes. Please remember to visit one of the pages in the new template to ensure that the footer was removed successfully.

Although that was the easiest way to remove the footer in Divi, it’s certainly not the only one. The following method will show you how to achieve the same results by editing the theme’s files.

Remove the Footer from Divi’s Theme Files

By default, WordPress uses different template files to create the structure of a page. Divi’s theme is not exceptional.

In general, the function that runs and executes the footer section is called get_footer(), and you can find it at the bottom of many template files.

Therefore, to remove the footer from the pages, we will need to remove or comment out the get_footer() function.

Note: please back up your website before editing core files.

To do that, use an FTP to access your website or navigate to Appearance -> Theme File Editor and click on one of these files:

• Main Index Template (index.php)
• Single Page (page.php)
• Single Post (post.php)

After clicking on your desired file, please scroll to the bottom of it, add double dashes (//) to the left of the get_footer() function, and save the changes.

The double dashed will comment out the function and prevent it from execution. That way, the template won’t call the footer, and the page won’t display it.

Once you save the change, navigate to any pages and verify that the footer was removed successfully.

If you can still see the footer, you removed it from the wrong theme file. Therefore, revert and repeat the process on the other two files from the list above.

Next, I’ll show you how to remove the footer in Divi using CSS in the following method.

Remove Footer in Divi with CSS

CSS (Cascading Style Sheets) is a coding language that creates a website’s overall appearance, feels, and layout.

We can use CSS rules to hide Divi’s footer on all pages or specific ones.

First, navigate to Appearance -> Optimize screen, and click on the Additional CSS tab.

Then, add this CSS rule and save the changes.

#main-footer {
display: none;
}

The code above will remove the footer from all pages. Alternatively, if you only want to remove the footer from specific pages, we will need to add .page-id-1 to the left of the rule above.

Make sure to replace 1 with the actual id of your desired page. For example:

.page-id-1 #main-footer {
display: none;
}

The above code will remove the footer from the page with ID 1. Each WordPress page has its unique ID number, and you can read our article on how to find page ID in WordPress.

Once you save the changes, visit the relevant page, and ensure that you managed to remove the footer successfully.

Conclusion

This article taught you three simple methods to remove the footer in Divi.

Leave us a comment and tell us which of the methods above you used to achieve this task.

The post How to Easily Remove Footer in Divi in Every Possible Way appeared first on PluginsForWP.

Many users prefer you delete this paragraph or use their text instead.

This article will show you how to remove the proudly powered by WordPress text from your website’s footer.

Are You Allowed to Edit Files

Whenever dealing with modifying software, we would often like to know if it’s legal to edit the files.

Because WordPress was released under the GPL (General Public License), it is perfectly legal to edit and modify the files.

Due to that fact, web agencies modified the code and added their text to the credit like so:

‘Proudly powered by WordPress by Company Name’

When running a business website, it is highly recommended to remove that text.

Why Remove the Proudly Powered by WordPress Text

As mentioned above, the proudly powered paragraph is positioned inside the bottom part of the footer.

Although the text is still reasonably visible to our visitors at the bottom of the website, here are only some of the many reasons why to remove it:

• A cleaner look – many designers would like to remove the text to have a more uncluttered website.
• Custom text – you can enter your custom text. As mentioned above, a web agency company will join with a link to their website.
• Hide the platform – you can hide the text if you don’t want your visitors to know if you are using WordPress.
• White label – when developing custom CMS for other companies.

Whatever your reason is, I will show you how to hide the proudly powered by WordPress text in a few different ways in the next section.

Remove ‘Proudly Powered by WordPress’

There are various ways to remove the text from the footer, and in this article, we will show you these methods:

• From the theme customization screen.
• By editing the core file.
• Using CSS.

Let’s start with the first method and remove the Proudly powered by WordPress from the theme customization screen.

Method #1: Theme customization option

Most of the WordPress themes (free or pro) come with editing the text footer from inside the customized screen.

Therefore, navigate to Appearance -> Customize and look for the appropriate option.

It is usually under the footer tab.

Below is a list to find the proper settings screen for the most popular themes.

• Astra – footer -> footer bar -> custom text.
• OceanWP – footer bottom -> copyright.
• Divi – footer -> bottom bar -> edit footer credits.

Again, most likely, the theme you are using can change the bottom text. It would be best if you found it under the right tab.

We can still remove the option if you couldn’t find the option through the customization screen by modifying the template files.

Method #2: Edit the footer template file

This method is only recommended for intermediate WordPress users because it requires you to edit the theme core file.

Before messing around with template files, it is vital to backup your website if something goes wrong. If anything happens, you can always restore your website with the backup file you created.

Please note: It’s better to perform this method on a child theme to avoid losing the changes in the next theme update.

Inspect the element

First, we need to find the ID or the proudly powered by WordPress element class.

To do that, right-click on this paragraph and click on ‘Inspect.’

We can see in the console that the text is inside an div element with a class of powered-by.

<div class="powered-by">

Once we find a suitable class, we can move forward and look for it inside the footer.php file.

Delete the element

From inside your WordPress dashboard, navigate to Appearance -> Theme Editor and click on the footer.php file from the list on the right.

Then, click on COMMAND + F (Mac) or CTRL + F (Windows) and search for the class name.

After finding the opening div element with the ‘powered-by’ class name, click on it to see where the closing div is.

In the Twenty-Twenty-One theme, we can see that the proudly powered by WordPress section is on lines 56 (opening div) to 64 (closing div).

We will first highlight the relevant lines and then delete them.

When done, click on the update file button and revisit your website.

If you don’t want to deal with core files, we can also use CSS to hide the copyright text.

Method #3: Hide the text with CSS

This method is straightforward but not recommended because it won’t remove the proudly powered by WordPress text but hide it instead.

While for the human visitors of the website, it doesn’t matter, for some search engines, it is.

Search engines may see this act as an attempt to mask links with keywords to help you rank higher. Although it is doubtful, I need to put it out there and inform you.

To hide the text with CSS, follow the first step of the method above and find the ID or the element’s class name.

After finding the right attribute, navigate to Appearance -> Customize -> Additional CSS.

Here, enter the CSS rule below:

.class-name-here {
display: none;
}

Make sure to replace the class-name-here with the actual ID or class of the element and click publish.

When targeting a class, use a period (.) before the class name. Use a hashtag (#) before the ID name when targeting an ID.

If you couldn’t find the correct attribute, let us know below which theme you are using, and we will provide you with the proper CSS.

This is just one aspect of modifying your website’s footer. Feel free to read the how-to edit WordPress footer in four easy steps article and learn more remarkable ways.

Conclusion

This article showed you how to remove the ‘Proudly Powered By WordPress’ text from the footer of your website in there different ways.

Leave us a comment and tell us which one of the three methods you chose to achieve this task.

The post Remove Proudly Powered by WordPress from Your Website appeared first on PluginsForWP.

The footer section often contains valuable links to other pages and copyright text.

Because WordPress has thousands of themes and every theme has its footer, it will be impossible for us to tackle every one of them.

Yet, there are many similarities between the footers and common ways to edit them.

This article will show you all the possible ways to edit your WordPress footer. The methods below can be used on most footers and are easily implemented.

I’ll provide you with general guidelines to try on your footer, and by the end of this article, you’ll be able to apply them to your needs.

Why Edit the Footer

Because the footer is located at the bottom of the website, many website owners tend to neglect it, but it must be treated with respect.

It is recommended to add valuable information about your business and website that you can’t add to the header because of limited space.

For example, showing the contact email address or location map can help your business immensely. When you position these two elements in the footer, they will be displayed on every page instead of the contact-us page only.

There are many more elements that you should add to the footer. Some are XML sitemaps, phone and fax numbers, social icons, etc.

So, let’s start editing the footer by jumping straight into the first method without further delay.

Method #1: Edit the Theme Footer File

We will dive deep and play with the theme footer.php file first.

If you have never dealt with or are unfamiliar with core files, you may find it scary to jump right into it. Yet, have no fear. We will only use it for small tasks like removing copyright text.

We will work with the default Twenty-Twenty theme and remove the ‘Powered by WordPress’ text in this example.

To know which section of the footer to delete, we must first get its class or ID attribute.

That way, we will find it in the footer.php file and remove it from there.

Inspect the item that you would like to edit

One way to find the item class is by using the inspect option of your browser. Right-click your mouse on the element you would like to inspect (the copyright paragraph) and choose ‘inspect.’

The inspect screen may look intimidating, but we will only use it briefly to find the suitable class.

As you can see in the image below, the ‘Powered by WordPress’ is a paragraph with a powered-by-wordpress class.

If you got lost and couldn’t find what you were looking for, you can also try a chrome extension like CSS Peeper to expose the element class.

It is straightforward and friendly to use. All you need to do is install the extension and hover over your desired element to find its class.

Find it in the footer file

Once we found the desired element, it’s a good time to delete it from the footer.php file.

Navigate to Appearance -> Theme Editor and make sure you’re editing your desired theme from the list on the top right corner.

Please note that the changes will be overwritten on the following theme update if you edit the parent theme. Please make sure to install and work with a child theme.

Search and click on the footer.php file from the list of files on the right.

Then, target the item that we would like to change or delete.

Delete it

Let’s search for the element that contains the ‘powered-by-wordpress’ class and delete it.

Click on CTRL + F on Windows or Command + F on Mac and search for ‘powered-by-WordPress.’ If we inspected it correctly and found the right element, it should find it there in the footer file.

Before editing the footer, copy all the footer content and paste it into a note editor for backup. We can always recover and start again if we’re making any mistakes.

After finding the correct element, we can delete or modify it based on our needs.

Once finished, save and revisit your website. If done correctly, the copyright text should be gone.

Hopefully, you find it reasonably straightforward to edit the WordPress footer file as said above.

If you managed to find the element class but couldn’t find it in the footer.php file it may be because it was generated by a function and not hardcoded into the footer itself.

Please don’t lose hope. In that case, we can still hide or edit it using some CSS rules.

Method #2: Edit the Footer With CSS

CSS rules are another great way to modify the whole or certain parts of the WordPress footer.

Like the previous method, we first need to inspect the footer class attribute and then apply the CSS. The good news is that you already know how to do it

To enter CSS into your website, click on the Customize option from your WordPress admin bar.

On this screen, based on your active theme, you’ll have some options (some themes have many and some just a few) on the left side.

Regardless of which theme you are using, all of them have the Additional CSS option.

Click on it and enter the code below:

.powered-by-wordpress {
display: none;
}

The CSS rule in the code above will hide the powered-by-wordpress element.

Please note that the code above will work for the twenty-twenty theme. If you have a different theme, you’ll need to change the powered-by-wordpress class with the class of the item that you’ll like to hide.

Another example of using a CSS rule could be to edit the footer background color.

As I showed you earlier, we will need to find the footer class or ID and apply a different color.

Once again, let’s click ‘Inspect’ on our footer and look for the footer ID or class.

We can see that the footer contains both ID and class attributes, and in that case, we are always going to target the ID.

Use the code below to paint the footer with a purple color in the Additional CSS screen.

#site-footer {
background-color: purpule;
}

Again, the code above targeted the ID #site-footer of the default theme. If you are using a different theme, you’ll have to find the ID or the class of your themes’ footer.

You can also specify a unique color by its hex code. Read our how-to change link color in WordPress article and learn how to find the hex code.

Method #3: Footer and Theme Customization

The theme customization screen provides us with many options to customize our footer section.

Unlike the other two methods above, this way is more theme-dependent.

Some themes, such as Hello by Elementor, give you very minimal options in the customization screen. Other themes, like oceanWP, will provide you with many customization options to change the footer layout. Some options are the colors, text size, copyright text, and much more.

Change the footer layout and the copyright text from the footer tab when available. Style-related options like colors or text size can be found in the typography tab.

The number of customization options does not reflect the quality of the theme. More doesn’t always mean better. Many themes will let you build a custom footer using a page builder like Elementor.

This example will use the oceanWP theme because it comes preloaded with many options to edit the footer.

If, for example, we would like to change our footer background color, navigate to the Footer Bottom option, and change it there.

We will have many options to change the footer background color or text color to any color we want.

Once satisfied, save and revisit your website to verify that it was changed successfully.

Method #4: Edit Footer Widgets

Widgets are blocks of content placed on various parts of your website. The most common sections to hold widgets are the header, sidebar, and footer.

Not all footers will have the option to place widgets in them, but the majority will. I tested many themes during my years as a developer, and I only ran into two that didn’t have that option.

To see if the option exists for your theme, navigate to Appearance -> Widgets.

On the left side, you’ll have all the available widgets that you can use, and on the right side, the locations where you can display the widgets.

The image below shows that our default twenty-twenty theme has a footer with two widgets columns.

We can now drag many widgets as we want into or out of the widget column and re-organize their order by dragging them up or down inside the column.

In this example, I display three widgets in the left column and three widgets in the right column.

The website now displays all the widgets in the correct order as we set it up above.

More Ways to Edit the Footer

The methods above are the most common ways to design the footer, and they should work with most themes.

Today, users have a high demand for editing various parts of their theme without any single line of code.

The good news is that it’s possible. Visual drag-&-drop page builders such as Elementor or Divi will let you do that. If you haven’t built your website yet, I recommend you go that route.

The theme builder feature of Elementor will enable you to design a footer from scratch and display it instead of your default theme footer.

If you already have a live website and don’t want to install a page builder just for one section, I hear you.

There are many plugins in the WordPress plugin repository to help you edit your website’s footer without coding.

We recommend you go through some of them and explore how they can help you achieve the tasks you want.

Feel free to install some of them on your website and do some experiments if they help you. Good. If they didn’t, delete them and try different ones.

Conclusion

This article taught you how to edit the footer of your WordPress website in a few different ways.

If you need a custom CSS rule for your theme’s footer, leave us a comment, and we will provide it for you.

The post How to Edit WordPress Footer in Four Easy Steps appeared first on PluginsForWP.