How to Add Shortcodes to Your Divi Footer (3 Plugin Examples)

by | Nov 20, 2021 | Etcetera | 0 comments

Divi footers are flexible. You’ll position numerous components inside them to assist guests navigate thru your web site. Despite the fact that Divi is filled with modules you’ll position within your footer off the bat, you’ll additionally come with plugin shortcodes to your Divi footer. On this article, we’ll display you the way! We’ll take on 3 other plugin examples, so let’s get to it.

Preview

Let’s take a snappy have a look at what we’re including to our Divi footer. We’ll upload those plugins:

The Occasions Calendar Desktop

The Events Calendar Desktop

Right here’s The Occasions Calendar at the desktop model of our Divi web site.

The Occasions Calendar Cellular

The Events Calendar Mobile

That is The Occasions Calendar on cell.

Wreck Balloon Social Picture Feed Desktop

Smash Balloon Social Photo Feed Desktop

That is the Wreck Balloon Social Picture Feed at the desktop.

Wreck Balloon Social Picture Feed Cellular

Smash Balloon Social Photo Feed Mobile

Right here’s the Wreck Balloon Social Picture Feed on cell.

CookieYes Desktop

CookieYes Desktop

Right here’s the desktop model of our new footer with CookieYes.

CookieYes Cellular

CookieYes Mobile

Right here’s the cell model with CookieYes.

Footer Template

For this educational, you’ll want a footer template. You’ll construct one from scratch or use probably the most loose footer templates discovered within the Sublime Topics weblog. Simply seek for “loose footer”. For my instance, I’m the usage of the FREE Header and Footer Template for Divi’s Essential Oils Layout Pack.

Obtain your Divi footer template and unzip the document. You’ll add the JSON document. We can upload shortcodes to the Divi footer.

Add the Footer Template to the Divi Theme Builder

Upload the Footer Template to the Divi Theme Builder

After getting your Divi footer template downloaded and unzipped, it’s time to add it to the Divi Theme Builder. Move to Divi > Theme Builder within the WordPress dashboard. Make a choice the Portability icon within the higher proper. Within the modal, click on the Import tab, make a selection Make a selection Document, navigate for your JSON document and make a selection it, and click on Import Divi Theme Builder Templates. Look ahead to it to add. Delete the header template for those who don’t need to use it and save the settings.

Now, let’s see the best way to upload shortcodes to the Divi footer, You’ll paintings within the Divi Theme Builder or at the entrance finish.

See also  Get a FREE Crucial Oils Structure Pack for Divi

Upload The Occasions 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. That is the most well liked occasions calendar for WordPress and its calendars glance nice in a footer. This plugin does now not come with shortcodes, however we will be able to upload them with an extension known as Events Shortcodes For The Events Calendar. Set up each plugins. Create your occasions as commonplace.

Add The Events Calendar Shortcodes to Your Divi Footer

The Occasions Calendar is not going to provide you with shortcodes, however you’ll create them with the shortcodes addon. This addon additionally contains styling choices and a box for customized CSS. See the add-on’s settings within the WordPress dashboard. Move to Occasions Addons > Shortcodes Settings.

Add The Events Calendar Shortcodes to Your Divi Footer

The shortcodes tab for the add-on is located within the Shortcodes Attributes tab. This offers a pattern shortcode together with the attributes you’ll use to construct a customized shortcode. Observe the directions and construct the shortcode to your match.

Add The Events Calendar Shortcodes to Your Divi Footer

For my examples, I’ll paintings from the entrance finish. Allow the Visible Builder and scroll right down to the footer. Hover over the footer and click on Edit Footer Template.

Add The Events Calendar Shortcodes to Your Divi Footer

Hover over the realm below the footer components. This house is solely above the footer copyright realize. Click on the fairway plus icon and upload a single-column row.

Add The Events Calendar Shortcodes to Your Divi Footer

Make a choice both a Textual content or Code module. It doesn’t topic which you select. I’ve decided on a Code module for this case. Paste your shortcode into the code box. Click on the fairway take a look at and save your web page.

Taste The Occasions 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 Kinds and upload a 1px border.

  • Border Kinds: 1px

We’ll taste the remainder of the development within the Occasions Shortcodes Addon the usage of design components from the footer.

Style The Events Calendar Shortcodes to Your Divi Footer

Within the Occasions Shortcodes Addon Normal Settings tab, alternate the colours and fonts to those settings:

  • Major Pores and skin Colour: #000000
  • Match Background Colour: #E3E3E3
  • Textual content Font: Cantarell
  • Font Dimension: 14px
  • Match Identify Kinds: Spartan, Daring, #000000, 18px
  • Occasions Description Kinds: #000000
  • Match Venue Kinds: #ffffff
  • Match Dates Kinds: Cantarell, 36px, #ffffff

Style The Events Calendar Shortcodes to Your Divi Footer

The footer now contains an occasions calendar that fits the remainder of the footer.

Upload Wreck Balloon Social Picture Feed Shortcodes to Your Divi Footer

Add Smash Balloon Social Photo Feed Shortcodes to Your Divi Footer

Smash Balloon Social Photo Feed connects for your Instagram account by means of an API and presentations the pictures out of your feed. This is a wonderful technique to construct your social following. To connect with your Instagram account, pass to Instagram Feed > Settings within the WordPress dashboard. Within the Configure tab, click on Attach and Instagram Account.

See also  How to Configure WooCommerce Settings

Add Smash Balloon Social Photo Feed Shortcodes to Your Divi Footer

This takes you to a display the place you’ll attach your account. Click on to log in and make allowance the plugin to get admission to 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 categorized Show Your Feed. Replica the Instagram Feed shortcode. You’ll additionally replica shortcodes for different kinds of feeds together with more than one feeds, customization choices, upload buttons, and so on. Some require the professional model of the plugin. I’m the usage of the usual feed.

Add Smash Balloon Social Photo Feed Shortcodes to Your Divi Footer

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

Add Smash Balloon Social Photo Feed Shortcodes to Your Divi Footer

Hover the place you wish to have so as to add the feed. Insert a brand new row and make a selection a unmarried column.

Add Smash Balloon Social Photo Feed Shortcodes to Your Divi Footer

Your Instagram feed is displayed robotically. It features a Load Extra button, an Instagram Observe button, and a label that displays how the feed belongs to.

Each and every part will also be custom designed. You’ll alternate the background colour, structure, choice of pictures to show, and so on., within the plugin’s settings display within the Configure tab. It’s already showing the way in which I need it to, so I gained’t wish to taste this one.

Upload CookieYes | GDPR Cookie Consent & Compliance Realize Shortcodes to Your Divi Footer

Add CookieYes

CookieYes | GDPR Cookie Consent & Compliance Notice presentations a cookie consent that may be embedded into your footer. The shortcodes are to be had within the Assist Information tab. Move to GDPR Cookie Consent > Settings within the WordPress dashboard. There are a number of to make a choice from and you’ll customise them.

Add CookieYes

Allow the Visible Builder on your own home web page, scroll the footer, and make a selection Edit Footer Template.

Add CookieYes

Scroll right down to the copyright realize and alter the row to double-column.

Add CookieYes

Click on at the darkish grey plus icon at the proper and make a selection both the Code or Textual content module.

See also  Download a FREE Header and Footer Template for Divi’s Softball League Layout Pack

Add CookieYes

Upload the entire shortcodes to the module. Shut the module and save the web page. We’ll make some changes with each modules and the plugin’s settings.

Taste CookieYes | GDPR Cookie Consent & Compliance Realize

Style CookieYes

Open the Code module and make a selection the Design tab. Below Spacing, set the Most sensible Margin to -24px. You’ll drag this within the Visible Builder.

  • Most sensible Margin: -24px

Style CookieYes

Open the copyright Textual content module. Within the Design tab, upload 14px of padding.

  • Padding: 14px

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

Style CookieYes

Within the Customise Buttons tab, make a selection every of the buttons and make a selection Huge for the Button Dimension.

  • Button Dimension: Huge

Style CookieYes

Make a choice the Learn Extra choices and set the Textual content Colour to #888888.

Textual content Colour: #888888

Effects

Right here’s how every of the footers seems to be on desktop and cell.

The Occasions Calendar Desktop

The Events Calendar Desktop

Right here’s the development submit sort at the desktop.

The Occasions Calendar Cellular

The Events Calendar Mobile

The cell model stacks the weather of the occasions submit sort.

Wreck Balloon Social Picture Feed Desktop

Smash Balloon Social Photo Feed Desktop

Right here’s the desktop model of our Instagram feed.

Wreck Balloon Social Picture Feed Cellular

Smash Balloon Social Photo Feed Mobile

Right here’s the cell model. It puts the photographs in a stack.

CookieYes Desktop

CookieYes Desktop

Right here’s the desktop model of our new footer with cookie consent.

CookieYes Cellular

CookieYes Mobile

Right here’s the cell model.

Finishing Ideas

That’s our have a look at the best way to upload shortcodes to the Divi footer to enlarge your web site even additional. Shortcodes are simple so as to add with both textual content or code modules. The 3 plugins I used listed below are simply the top of the iceberg of what will also be added to Divi with shortcodes.

We need to pay attention from you. Do you upload shortcodes to the Divi footer? Tell us about your revel in within the feedback.

The submit How to Add Shortcodes to Your Divi Footer (3 Plugin Examples) gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment