Find out how to Upload Shortcodes to Your Divi Footer (3 Plugin Examples)

by DS | Nov 20, 2021 | Etcetera | 0 comments

Divi footers are versatile. You’ll be capable to place a lot of elements within them to help visitors navigate by means of your internet web page. Even though Divi is filled with modules you’ll be capable to place inside of your footer off the bat, you’ll be capable to moreover include plugin shortcodes in your Divi footer. In this article, we’ll show you the best way! We’ll tackle 3 different plugin examples, so let’s get to it.

Table of Contents

Preview

Let’s take a handy guide a rough take a look at what we’re together with to our Divi footer. We’ll add the ones plugins:

The Events Calendar Desktop

Proper right here’s The Events Calendar on the desktop fashion of our Divi internet web page.

The Events Calendar Mobile

This is The Events Calendar on mobile.

Injury Balloon Social {Photograph} Feed Desktop

That’s the Injury Balloon Social {Photograph} Feed on the desktop.

Injury Balloon Social {Photograph} Feed Mobile

Proper right here’s the Injury Balloon Social {Photograph} Feed on mobile.

CookieYes Desktop

Proper right here’s the desktop fashion of our new footer with CookieYes.

CookieYes Mobile

Proper right here’s the mobile fashion with CookieYes.

Footer Template

For this instructional, you’ll need a footer template. You’ll be capable to assemble one from scratch or use one of the loose footer templates found out throughout the Elegant Problems blog. Merely search for “loose footer”. For my example, I’m the use of the FREE Header and Footer Template for Divi’s Essential Oils Layout Pack.

Download your Divi footer template and unzip the document. You’ll upload the JSON document. We will be able to add shortcodes to the Divi footer.

Upload the Footer Template to the Divi Theme Builder

Once you have your Divi footer template downloaded and unzipped, it’s time so as to add it to the Divi Theme Builder. Go to Divi > Theme Builder throughout the WordPress dashboard. Make a choice the Portability icon throughout the upper right kind. Inside the modal, click on at the Import tab, choose Make a choice File, navigate on your JSON document and choose it, and click on on Import Divi Theme Builder Templates. Look forward to it so as to add. Delete the header template will have to you don’t want to use it and save the settings.

Now, let’s see how you’ll add shortcodes to the Divi footer, You’ll be capable to artwork throughout the Divi Theme Builder or on the front end.

Add The Events Calendar Shortcodes to Your Divi Footer

For our first shortcode, we’ll use The Events Calendar. This is the most popular events calendar for WordPress and its calendars look great in a footer. This plugin does not include shortcodes, then again we will be able to add them with an extension known as Events Shortcodes For The Events Calendar. Arrange every plugins. Create your events as same old.

The Events Calendar isn’t going to come up with shortcodes, then again you’ll be capable to create them with the shortcodes addon. This addon moreover incorporates styling possible choices and a field for custom designed CSS. See the add-on’s settings throughout the WordPress dashboard. Go to Events Addons > Shortcodes Settings.

The shortcodes tab for the add-on is positioned throughout the Shortcodes Attributes tab. This gives a trend shortcode along with the attributes you’ll be capable to use to build a custom designed shortcode. Apply the instructions and assemble the shortcode in your fit.

For my examples, I’ll artwork from the doorway end. Permit the Visual Builder and scroll proper all the way down to the footer. Hover over the footer and click on on Edit Footer Template.

Hover over the world underneath the footer elements. This space is just above the footer copyright perceive. Click on at the fairway plus icon and add a single-column row.

Make a choice each a Text or Code module. It doesn’t matter which you choose. I’ve determined on a Code module for this example. Paste your shortcode into the code field. Click on at the fairway check out and save your internet web page.

Style The Events Calendar Shortcodes to Your Divi Footer

Make a choice the Design Tab for the Code module. Scroll to the Border Types and add a 1px border.

Border Types: 1px

We’ll style the rest of the advance throughout the Events Shortcodes Addon the use of design elements from the footer.

Inside the Events Shortcodes Addon Fundamental Settings tab, change the colors and fonts to these settings:

Primary Pores and pores and skin Color: #000000
Match Background Color: #E3E3E3
Text Font: Cantarell
Font Size: 14px
Match Identify Types: Spartan, Bold, #000000, 18px
Events Description Types: #000000
Match Venue Types: #ffffff
Match Dates Types: Cantarell, 36px, #ffffff

The footer now incorporates an events calendar that matches the rest of the footer.

Add Injury Balloon Social {Photograph} Feed Shortcodes to Your Divi Footer

Smash Balloon Social Photo Feed connects on your Instagram account by way of an API and shows the images from your feed. It is a superb way to assemble your social following. To connect to your Instagram account, go to Instagram Feed > Settings throughout the WordPress dashboard. Inside the Configure tab, click on on Connect and Instagram Account.

This takes you to a show where you’ll be capable to connect your account. Click on directly to log in and allow the plugin to get right to use the account.

Make a choice the tab classified Display Your Feed. Replica the Instagram Feed shortcode. You’ll be capable to moreover replica shortcodes for various varieties of feeds at the side of a few feeds, customization possible choices, add buttons, and so forth. Some require the pro fashion of the plugin. I’m the use of the standard feed.

Go on your homepage (or the Divi Theme Builder). Enabled the visual builder and scroll to the footer. Hover over the footer and click on on Edit Footer Template.

Hover where you need to be able to upload the feed. Insert a brand spanking new row and choose a single column.

Your Instagram feed is displayed automatically. It includes a Load Additional button, an Instagram Apply button, and a label that shows how the feed belongs to.

Every phase can be customized. You’ll be capable to change the background color, layout, collection of footage to turn, and so forth., throughout the plugin’s settings show throughout the Configure tab. It’s already showing the best way through which I would like it to, so I received’t need to style this one.

Add CookieYes | GDPR Cookie Consent & Compliance Understand Shortcodes to Your Divi Footer

Add CookieYes

CookieYes | GDPR Cookie Consent & Compliance Notice shows a cookie consent that can be embedded into your footer. The shortcodes are available throughout the Have the same opinion Data tab. Go to GDPR Cookie Consent > Settings throughout the WordPress dashboard. There are a variety of to make a choice from and also you’ll be capable to customize them.

Add CookieYes

Permit the Visual Builder on your own home internet web page, scroll the footer, and choose Edit Footer Template.

Add CookieYes

Scroll proper all the way down to the copyright perceive and change the row to double-column.

Add CookieYes

Click on on on the dark gray plus icon at the correct and choose each the Code or Text module.

Add CookieYes

Add the entire shortcodes to the module. Close the module and save the internet web page. We’ll make some adjustments with every modules and the plugin’s settings.

Style CookieYes | GDPR Cookie Consent & Compliance Understand

Style CookieYes

Open the Code module and choose the Design tab. Beneath Spacing, set the Highest Margin to -24px. You’ll be capable to drag this throughout the Visual Builder.

Highest Margin: -24px

Style CookieYes

Open the copyright Text module. Inside the Design tab, add 14px of padding.

Padding: 14px

Save your settings and navigate to the plugin’s settings.

Style CookieYes

Inside the Customize Buttons tab, choose each of the buttons and choose Large for the Button Size.

Button Size: Large

Style CookieYes

Make a choice the Be told Additional possible choices and set the Text Color to #888888.

Text Color: #888888