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

by | 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.

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

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

The Events Calendar Mobile

This is The Events Calendar on mobile.

Injury Balloon Social {Photograph} Feed Desktop

Smash Balloon Social Photo Feed Desktop

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

Injury Balloon Social {Photograph} Feed Mobile

Smash Balloon Social Photo Feed Mobile

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

CookieYes Desktop

CookieYes Desktop

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

CookieYes Mobile

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

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.

See also  5 Issues Gen Z Will Spend Cash On & Why Entrepreneurs Wish to Care

Add The Events Calendar Shortcodes to Your Divi Footer

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.

Add The Events Calendar Shortcodes to Your Divi Footer

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.

Add The Events Calendar Shortcodes to Your Divi Footer

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.

Add The Events Calendar Shortcodes to Your Divi Footer

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.

Add The Events Calendar Shortcodes to Your Divi Footer

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.

Add The Events Calendar Shortcodes to Your Divi Footer

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

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.

Style The Events Calendar Shortcodes to Your Divi 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

Style The Events Calendar Shortcodes to Your Divi Footer

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

See also  The whole thing You Want to Know About Touch Control

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

Add Smash Balloon Social Photo 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.

Add Smash Balloon Social Photo Feed Shortcodes to Your Divi Footer

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.

Add Smash Balloon Social Photo Feed Shortcodes to Your Divi FooterAdd Smash Balloon Social Photo Feed Shortcodes to Your Divi Footer

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.

Add Smash Balloon Social Photo Feed Shortcodes to Your Divi Footer

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.

Add Smash Balloon Social Photo Feed Shortcodes to Your Divi Footer

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

Add Smash Balloon Social Photo Feed Shortcodes to Your Divi Footer

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.

See also  Discover ways to Use the WordPress SmugMug Embed Block

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

Results

Proper right here’s how each of the footers seems on desktop and mobile.

The Events Calendar Desktop

The Events Calendar Desktop

Proper right here’s the advance post sort on the desktop.

The Events Calendar Mobile

The Events Calendar Mobile

The mobile fashion stacks the elements of the events post sort.

Injury Balloon Social {Photograph} Feed Desktop

Smash Balloon Social Photo Feed Desktop

Proper right here’s the desktop fashion of our Instagram feed.

Injury Balloon Social {Photograph} Feed Mobile

Smash Balloon Social Photo Feed Mobile

Proper right here’s the mobile fashion. It places the pictures in a stack.

CookieYes Desktop

CookieYes Desktop

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

CookieYes Mobile

CookieYes Mobile

Proper right here’s the mobile fashion.

Completing Concepts

That’s our take a look at how you’ll add shortcodes to the Divi footer to amplify your internet web page even further. Shortcodes are easy to be able to upload with each text or code modules. The three plugins I used listed here are merely the top of the iceberg of what’s going to even be added to Divi with shortcodes.

We want to concentrate from you. Do you add shortcodes to the Divi footer? Let us know about your experience throughout the comments.

The post How to Add Shortcodes to Your Divi Footer (3 Plugin Examples) seemed first on Elegant Themes Blog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment