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 Events Calendar
- Smash Balloon Social Photo Feed
- CookieYes | GDPR Cookie Consent & Compliance Notice
The Occasions Calendar Desktop
Right here’s The Occasions Calendar at the desktop model of our Divi web site.
The Occasions Calendar Cellular
That is The Occasions Calendar on cell.
Wreck Balloon Social Picture Feed Desktop
That is the Wreck Balloon Social Picture Feed at the desktop.
Wreck Balloon Social Picture Feed Cellular
Right here’s the Wreck Balloon Social Picture Feed on cell.
CookieYes Desktop
Right here’s the desktop model of our new footer with CookieYes.
CookieYes Cellular
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
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.
Upload The Occasions 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.
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.
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.
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.
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.
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
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.
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
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
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.
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.
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.
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.
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.
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
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.
Allow the Visible Builder on your own home web page, scroll the footer, and make a selection Edit Footer Template.
Scroll right down to the copyright realize and alter the row to double-column.
Click on at the darkish grey plus icon at the proper and make a selection both the Code or Textual content module.
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
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
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.
Within the Customise Buttons tab, make a selection every of the buttons and make a selection Huge for the Button Dimension.
- Button Dimension: Huge
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
Right here’s the development submit sort at the desktop.
The Occasions Calendar Cellular
The cell model stacks the weather of the occasions submit sort.
Wreck Balloon Social Picture Feed Desktop
Right here’s the desktop model of our Instagram feed.
Wreck Balloon Social Picture Feed Cellular
Right here’s the cell model. It puts the photographs in a stack.
CookieYes Desktop
Right here’s the desktop model of our new footer with cookie consent.
CookieYes Cellular
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.
0 Comments