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.

The Divi map module will require us to generate an API key and enter billing information. That is a long, complicated process that we should avoid.

This article will show you how to embed a Google map in Divi without an API key.

Divi Map Module Problems

Since the new Google Maps policy took place in July 2018, you can no longer display a map on your website unless you generate an API key.

Moreover, in addition to the generated key, you’ll also need to enter billing information for the map to work correctly.

Because displaying a Google map on your website is a free service, site owners prefer to find a better solution before providing their payment information.

In addition, using an API key and entering billing information does not guarantee that the map will be displayed correctly or at all.

Here are some of the most common problems that can happen when trying to embed a Google map with Divi:

• MissingKeyMapError – An API key is not being used
• RefererNotAllowedMapError – Key doesn’t allow your URL
• ApiNotActivatedMapError – API is not enabled
• InvalidKeyMapError – The API key used is incorrect

Because an API key and billings information may not be enough, we should find a more accessible alternative to embed Google Maps in Divi.

How to Embed Google Map in Divi Without an API Key

Embedding a map on your business website should be a top priority. Maps are one of the must-have elements you should display on your contact page. A map will help your website with engagement and conversion.

In this section, I will walk you through the process of how to embed a Google map on your WordPress website with the Divi page builder plugin.

That’s it. Please revisit your website and ensure the map displays correctly on the front-end.

Change the Map Size

You’ve probably noticed that the map size is limited. In fact, the HTML code is framing the map to be 600px in width and 450px in height.

While the displayed size is suitable for many, others may like to change it and make the map to take the entire width of the page or the container.

To adjust the map’s size, we will need to change the values inside the HTML code.

Open the code module in Divi once again and replace the width attribute value from 600px to 100%.

Most times, changing the map’s width will be enough. However, if you want to change the height, replace the 450px with your desired value.

TIP: The height attribute only accept scalable value such as pixels and em but not percentages.

Please save the changes and visit your website to verify the map size.

Embed Google Map in Divi Using a Plugin

A dedicated plugin is another great way to embed Google Maps in Divi. There are plenty of good maps plugins to choose from, but I’ll focus on one of them in this article.

From your WordPress dashboard, navigate to Plugins -> Add New, install and activate the Very Simple Google Maps plugin.

As the name suggests, it is a straightforward plugin to use, and it will be ready once activated.

Open the Divi visual editor and add the code module to your desired position as we did earlier.

Then, add the shortcode below into the text field of the module.

[vsgmap address="street address to display"]

Make sure to replace the street address to display with the actual location’s address.

Then, save the changes and revisit your page to verify the map’s size.

Adjust the Map with Variables

By default, the map size is 480 pixels width by 300 pixels height. We can adjust the shortcode attributes to change the map’s display like the embedded code method above.

For example, if we want to make the map to take the entire width of the page, we will add the width attribute with the desired value into the shortcode like width="100%".

As a result, the map’s width will adjust accordingly and take the entire container width.

The complete code will look like this:

[vsgmap address="street address to display" width="100%"]

Check the table below to view all the available attributes and values that you can use inside the shortcode.

Conclusion

This article taught you how to easily embed a Google map on your website with the Divi plugin without an API key.

Leave us a comment and tell us if you have any questions about the process.

The post How to Embed a Google Map in Divi for Free Without API Key appeared first on PluginsForWP.