How To Hide The Divi Logo On A Single Page

>>> Shared from Original Post Elegant Themes Blog

While your site’s logo is one of the most important parts of consistent branding, you might have some pages where you want that screen real-estate for something else. Or to highlight the content on the page more than the overall branding of your site. Whatever the reason, the Divi Theme Builder gives you the power to control every aspect of your site, down to which pages do or do not show your site’s logo. Let’s dig in so we can show you how simple this effect can be to implement.

Sneak Peek

Below, you can see the results we’re working toward in today’s article on both desktop and on mobile. The effect works great on both and requires no additional steps for mobile integration.

Desktop

desktop results

Mobile

mobile results

Uploading a Header into the Divi Theme Builder

For this post, we’re going to be using the freebie header for our homemade cookies layout pack. Just go to that post to download the files.

Open the Theme Builder

With that done, open the Divi Theme Builder on your admin dashboard. You can find it under Divi – Theme Builder at the bottom of the left-hand sidebar.

theme builder

Upload the Header Template

Look to the upper-right, and you will see an icon of two arrows going up and down. Click that to open the template uploader, and then select the Import tab.

divi import

Make sure that you open the zip folder that you downloaded from the freebie post and extract the JSON file from it.

json file

Next, select the JSON file in the upload tool and click the Import Divi Theme Builder Templates button.

upload json

When the file finishes uploading, you will see that the new designs have been installed as the new Global Header and Global Footer for your site.

global header

Enter the Global Header Template

Click the pencil icon or double-click on the Global Header to open the visual builder for that element.

inside the header editor

Save the Header Design

Because this is the Global header (meaning that it will show on every single page of your site unless stated otherwise), we are going to save this header to our Divi Library so that we can apply it to individual pages and edit that instance of it. Doing it this way will keep the design we want, but not allow us to edit the global settings.

save header

Add Page Template

With this done, it’s time to use this template to remove your logo on specific pages.

Select Pages for Template

Using the Divi Theme Builder, you can select specific pages, categories, tags, and more. To start, click the Add New Template box to bring up the selection menu.

add new template

Check the box next to Specific Pages, then a secondary menu will appear. Now, pick which pages you want to exclude from the global settings. These will be the pages without the site logo.

select specific pages

Remove Global Header From That Template

When ready, select Create Template. Doing so will automatically add the Global Header and Global Footer. Click the three-dots icon in the header box and select Disable Global. When it changes into a grey Custom Header box, click the pencil icon or double-click it to enter the visual builder.

custom header

Edit the Header

Now that the header template is no longer global, whatever you do inside will only apply to the pages you selected.

Remove the Site’s Logo

So highlight the logo in the center of the header and click the trashcan icon to delete it.

delete icon

You will now see only the black + icon, indicating that the space where the logo once occupied is empty.

deleting, saving, and leaving

Be sure to press the green Save button at the bottom-right of the screen. You can exit the builder by clicking the X in the upper-right corner.

Save the Overall Site Changes

The final step is making sure that all your changes have been saved and applied to your site. Many times, your changes will be saved automatically. However, just to avoid data loss, click the Save Changes button at the very top of the Divi Theme Builder screen.

save the theme builder changes

When you get the All Changes Saved message, you know you’re good to go.

all changes saved

Now all you have to do is check the pages that you selected to ensure that your logo is, indeed, gone.

Final Results

If you followed the steps above, you will have been able to remove your site’s logo from any specific pages that you want.

Desktop

desktop results

Mobile

mobile results

Conclusion

By using the Divi Theme Builder and selectively using the Global Header and Custom Header features, you can maintain design consistency across your site, but remove specific elements that may or may not need to be on certain pages. You can also use this technique to adjust the headers, footers, sidebars, and even content areas of your site to include/exclude individual elements.

Let us know how you plan on using this technique in the comments!

The post How to Hide the Divi Logo on a Single Page appeared first on Elegant Themes Blog.

>>> Read the Full Story at Elegant Themes Blog