Select Page

How to add Instagram to Divi Header

The Problem – How to add Instagram to Divi

Instagram is a photo and video sharing social network. Like Facebook, it’s audience is both individuals and businesses. Due to it’s large audience, businesses use it as branding and customer acquisition tool. Because of the growth of Instagram it is important to add Instagram to Divi.

Often, we get requests by our clients that they would like to show Instagram profiles on their website. As you know we use the divi theme to build client websites.

Divi has a top header where you can showcase your client’s social media profiles. There’s a problem. Divi comes with a limited 4 social icons for your header and footer. They are

  • Facebook
  • Twitter
  • Google+
  • RSS

You can toggle and set social profile urls at WordPress Admin → Divi → Theme Options

There’s no easy way to add more social icons like instagram unless you write lot of custom code in your child theme.

You will need to

  • Write code to toggle and set social profile urls for the new social icons. The settings need to be at WordPress Admin → Divi → Theme Options along with the default divi social icons.
  • You will need to add social icon image files and stylesheet to you child theme.
  • You will need to copy the social_icons.php file from includes folder in your Divi theme to your child theme.
  • Once copied, you will need to update the social_icons.php file to include your new social icons.

That’s a lot of work for a single website.

Depending on the business profile of your clients, they might need social profiles other than instagram. A client with a hotel might need a Trip Advisor profile. In essence, it’s highly possible that you will have to redo this for every website.

The Solution – Divi Icon Toolkit Plugin. A Free Plugin

I will make the following promise to you upfront.

  • You don’t have to write code to show social profile options in your WordPress admin.
  • You don’t have to worry about fetching the social icon images and stylesheet.
  • You don’t have to copy the includes/social_icons.php file from the Divi theme to your child theme.

We’ve got your covered. How? Enter the Divi Icon Toolkit Plugin. This plugin part of our Free Membership plan which is FREE to use.

What does the Divi Icon Toolkit do?

  • It integrates with Font Awesome Brand Icons . This gives you access to over 370+ icons. Yes, it has your Instagram icon tool.
  • We’ve added out-of-the-box support for 19 social icons including instagram. They are Instagram, YouTube, Pinterest, Linked In, Skype, Flickr, Dribble, Vimeo, 500px, Behance, Github, Bit Bucket, Deviant Art, Medium, Meetup, Slack, Snap Chat, Trip Advisor and Twitch

Font Awesome Brand Social Icons

Question: What If I Want To Use Other Font Awesome Brand Icons? Say Amazon?

You can use a filter df_update_social_icons to update the social icon list. A child theme is a good location to write this filter.

Adding extra social icons for divi

Adding custom social icons for Divi header and footer is a repetitive and time consuming process. This plugin takes the pain out of this process and adds integration with fontawesome brand icons. You save at least 1+ hour per website using this plugin.

This plugin is FREE to use.

Other Instagram Integrations

Our free membership also includes the Instagram Feed Module. This module allows you to pull your Instagram feed into a page or post using a Divi module.

Become a free member to make use of these great Instagram integrations for your Divi powered WordPress website.

Breaking Change – Restaurant Menu Plugin Version 3.0.0

Headsup: We will release this update on 8th June, 2018 around 4PM Australian Eastern Time (UTC +10)

What was wrong earlier?

The HTML markup of the menu item was not valid. The title, description and price tags of the menu item was in a H5 tag. It’s not semantically correct. Before it starts to cause any real issues, we’d like to fix it.. Also, we canot apply responsive styles to the menu item due to the way to markup is setup.

Its our mistake and we apologize for the inconvience caused. We have laid out a plan to ensure to fix your website.

Below is a representation of the semantically incorrect markup.

How will it affect me?

Here is a representation of the semantically correct markup.

The menu item title is now in a H5 tag. The menu item description and price are no longer in the H5 tag and now are sibling tags to the H5 tag

You may loose any custom css style applied to the description and price tag. Due to change in the markup, the CSS selectors are different now.

What should I do?

Taking the following steps should ensure a quick turnaround.

  • Upgrade to the latest version of the Restaurant Menu Plugin
  • Login in your WordPress Admin and open the page containing your Restaurant Menu Divi Module in edit mode. Save this page without making any changes. Divi Theme caches the template in the browser application cache. This step refreshes that cache.
  • Preview this page to check if its affected.
  • If there is an isssue,
    • In all likelyhood, the menu item description and price element styles isn’t what it used to be.
    • Theme Customizer Setting for menu item description and price is an addition in this version.

    Menu Item Description Theme Customizer Section

    Menu Item Description Section

    Menu Item Price Theme Customizer Section

    Menu Item Price Section

    • Setup the menu item description and price theme customizer settings to match your previous menu styles. This is a workaround which takes the shortest time.
    • Restaurant Menu Divi Module also provides settings for description and price section in the Design tab. One can use that as an alternate option.

Anything else I should know?

This change helps in applying responsive styles to the markup. And we’ve done just that! With this update, the price item shows up below the menu item name which was not the case earlier.

Below is representation of how a menu item looks on a phone.

Restaurant Menu Item On Mobile

A minor css bug fix is also a part of this version.

Changes from this version lays the groundwork for future updates we are planning for the plugin.

We want to be transparent when we make a mistake. It helps us in making the right decisions for you.

New Product Video for Social Locker

We created a new video this week for the Social Locker Divi module to better describe this free product.

Check out the video and see if this could work for you.

We use it on our own site to encourage engagement and shares of our content.

Video Toolkit now supports Facebook Video Embed

Do you want to use Facebook to embed your videos on your Divi Powered website?

If so you will have found that our video toolkit for Divi wasn’t working as expected for these videos. So we fixed it.

We had a report that the tool wasn’t working as well as it should so we updated it and release a new patch today to make it happen for you.

More and more often Facebook is the go to destination for anyone online so supporting the embed of these videos was a real problem we needed to solve.

We had a report last week that it needed to happen for some of our users so we made it work this week with a new release.

Hope you guys like it and remember – we are serious about being the best at responding to our customers. We don’t always get it 100% right but we want to make sure you guys have confidence in how our modules and plugins work.

If you have any issues let us know and we will often have an update in 7 days. If its something more complex sometimes it may take longer however in most cases we will let you know and commit to an update schedule.

 

Free OpenTable module for Divi Video

Today we have released a Free OpenTable module for Divi and WordPress, the Open Table Reservation Divi Module for Divi.

The module integrates with the OpenTable booking widget providing a native module so you can easily manage your settings.

This means you can now take bookings directly on your Divi WordPress website for your OpenTable booking system.

Free OpenTable module video

This quick video overview gives you an introduction to this free plugin.

Default Behaviours for the Open Table Module for Divi

Free OpenTable module - Module Settings

Free OpenTable module – Module Settings

The OpenTable Divi Module allows you to enter your restaurant ID. You need to get the restaurant id directly from your open table account.

The next option is language. We have a number of options provided by default from OpenTable.

Widget type is a way to select a layout option for your OpenTable reservation method. The plugin provides 4 types – Standard, Wide, Tall and Button Only. I personally would recommend the button type as its simple and loads fast.

The Team at Divi Framework added in the alignment options and the ability to load the widget in an iframe. This can be helpful if you have styling conflicts from your website as the styles will have no conflict issues with an iframe.

The advanced tab provides the normal CSS styling options expected for any Divi Module in the backend.

What Else?

Yeah – its never enough so we also added in some basic styling to help you get the most out of the widget and not have problems with the default Divi Stylesheets from causing render issues. It should work in most cases but remember you have the fallback of the iframe if you have any major problems.

Remember this is also the default OpenTable offering which means you can have confidence in its abilities and it working moving forward, we have simply made a great wrapper for Divi to make it easy to use.

Hope you guys enjoy this one and keep an eye out for even more awesome tools for those of you making restaurant websites over the coming weeks.

Divi Framework - build anything with Divi to create your online business.

30 day money back guarantee

Safe & Secure online payment

Support team & documentation