Are you searching for a very easy technique to show your Instagram and Twitter posts in your site? Divi Social Plus is a plugin that provides 5 new social media modules to the Divi Builder. With this plugin, you’ll be able to attach your Instagram and Twitter accounts to show absolutely customizable social media feeds and carousels. The plugin additionally comes with a social media proportion module that can be absolutely custom designed and added on your layouts. On this plugin spotlight, we’ll check out Divi Social Plus to assist you make a decision if it’s the correct social media plugin for you.

Let’s get began!

Putting in Divi Social Plus

To put in Divi Social Plus, navigate to the Plugin web page within the WordPress dashboard and click on Upload New. Click on Make a selection Report and choose the .ZIP plugin record, then click on Set up Now.

As soon as the plugin is put in, click on turn on.

Get Instagram Get entry to Token

As a way to attach an account and show pictures with the Instagram modules, you want to generate an Instagram Get entry to Token. The plugin creator has some documentation you can follow to arrange the whole lot and get the App ID and App Secret you want to generate the Instagram Get entry to Token.

Divi Social Plus

The plugin provides 5 new social media modules to the Divi Builder: Instagram Feed, Instagram Carousel, Social Percentage, Twitter Feed, and Twitter Carousel. Let’s check out every module.

Instagram Feed

With this module, you’ll be able to show your Instagram posts in a feed any place in your site. Let’s check out the settings.

Content material Settings

Beneath the Instagram Feed settings, you’ll be able to upload your generated Get entry to Token. As soon as added, your Instagram footage will seem within the Visible Builder and in your site.

Instagram Settings

Within the Instagram Settings segment, you’ll be able to set the knowledge cache time and cache timeout time. You’ll additionally make a selection to turn the icon and caption on hover and set the selection of Instagram posts to show.

Moreover, you’ll be able to permit the picture hyperlink, display the publish caption, set a customized merchandise top, and permit RTL toughen.

Different Content material Settings

You’ll additionally set a hyperlink, background colour, and admin label within the content material tab settings.

Design Settings

Let’s check out the design settings.

Instagram

Beneath the Instagram tab, you’ll be able to choose the format, the selection of columns, and the space between pieces. Along with the grid format pictured above, you’ll be able to additionally make a selection the masonry format or the spotlight format. That is the masonry format.

That is the spotlight format. When this format is chosen, you’ll be able to make a selection to spotlight each and every few pictures, making them appear bigger within the grid.

Overlay

Within the overlay settings, you’ll be able to set the Instagram icon colour and icon dimension, the overlay background colour, and entirely customise the caption textual content types.

Caption

Right here you’ll be able to trade the styling of the caption, if enabled. You’ll set the padding and caption background, and customise the caption textual content types.

Different Design Settings

Along with those distinctive design settings, you’ll be able to additionally customise the sizing, spacing, border, field shadow, filters, turn into, and animation choices for the Instagram feed module.

Instagram Carousel

With the Instagram carousel module, you’ll be able to show off Instagram footage in your site in an interesting carousel layout. Let’s take a more in-depth glance.

Content material Settings

First, you want so as to add the Get entry to Token you generated to the sector within the Instagram Feed settings. Then your pictures will seem within the carousel.

Instagram Settings

Right here you’ll be able to set the knowledge cache time and cache timeout sort, display or conceal the icon and caption on hover, set the selection of Instagram posts to turn, permit the picture hyperlink, and display or conceal the caption under the picture.

Carousel Settings

There are two tabs within the carousel settings – basic and complicated. First, let’s check out the overall tab. Right here you’ll be able to set the animation velocity, permit autoplay and set the autoplay velocity, permit navigation, and permit pagination. You’ll additionally permit fastened width slide and set a width for every symbol.

If fastened width slide isn’t enabled, you’ll be able to specify the selection of slides to turn. On this segment, you’ll be able to additionally set the spacing between slides, make a selection whether or not to use spacing at the first and last thing, and permit limitless looping.

Within the complicated tab of the carousel settings, you’ll be able to set the sliding CSS transition sort. You’ll choose between linear, ease-in, or ease-in-out. You’ll additionally permit swipe navigation and set the selection of pieces to scroll. Right here, you’ll be able to additionally permit vertical mode to show your Instagram footage in a vertical carousel.

You’ll additionally permit middle mode for the carousel. With this mode enabled, you’ll be able to choose from vintage or highlighted. Here’s what the highlighted middle mode format looks as if, it options the middle symbol greater than the encompassing pictures.

Additionally on this segment, you’ll be able to permit the stay up for animate surroundings, which ignores requests to advance the slide all through animation, and you’ll be able to permit a customized cursor that looks over the slider.

Here’s the take hold of cursor taste.

In spite of everything, you’ll be able to modify the highest and backside wrapper spacing and permit RTL toughen.

Different Content material Settings

You’ll additionally customise the module hyperlink, background types, and admin label inside the content material tab.

Design Settings

Most of the design settings for the Instagram Carousel module are very similar to the settings for the Instagram Feed module. Let’s have a look.

Instagram

On this segment, you’ll be able to set the picture top.

Overlay

Within the overlay segment, you’ll be able to customise the Instagram icon colour and icon dimension, in addition to the overlay background colour and caption font types. Right here I’ve set a cast overlay colour that looks on hover.

Caption

Here’s the place you’ll be able to customise the styling of the caption proven under the picture, if enabled. You’ll set the padding, caption background, and font types.

Navigation

There are 3 tabs of settings within the navigation segment: Commonplace, Prev, and Subsequent. First, let’s check out the typical tab. Right here you’ll be able to choose between navigation sorts A or B. Kind A options an arrow on each side of the carousel. Kind B options each arrows nearer in combination, as pictured right here. You’ll modify the vertical and horizontal placement, the peak and width, and icon dimension.

On this segment, you’ll be able to additionally set the icon colour and background, skew the icons, modify the spacing between icons, set the vertical place, permit horizontal place middle, and modify the border.

Within the prev and subsequent tabs, you’ll be able to set the navigation icons and set the border radius.

Pagination

Within the pagination settings you’ll be able to choose from the dot sort or quantity form of navigation. You’ll additionally choose the alignment, the pagination background colour, top and width, border width, vertical place, and spacing. Beneath the lively tab you’ll be able to set the lively pagination background, textual content colour, and width.

Different Design Settings

Additionally within the design tab you’ll be able to customise the sizing, spacing, border, field shadow, filters, turn into, and animation choices.

Social Percentage

The social proportion module provides a social community proportion button on your web page. Each and every social proportion merchandise is added to the module for my part beneath the content material tab.

Sharing Merchandise Settings

Each and every person sharing merchandise may also be added beneath the Content material tab and has its personal settings web page.

Beneath the content material tab of the settings window for the sharing merchandise you’ll be able to set the community sort, specify the percentage textual content, trade the background, and set the admin label. You’ll make a selection to show buttons for Twitter, Fb, Messenger, Pinterest, LinkedIn, WhatsApp, Viber, Tumblr, Reddit, Electronic mail, VK, and Telegram.

Beneath the design tab you’ll be able to customise the icon, textual content, border, field shadow, spacing, filters, and turn into types.

Content material Settings

Now let’s check out the settings within the content material tab of the social proportion module. Maximum settings are beneath the settings segment, apart from the background types and admin label.

Beneath the settings segment you’ll be able to choose between a horizontal or vertical placement. Here’s the vertical format.

You’ll additionally choose between the vintage format (pictured above) or the trendy format, pictured right here. With the show sort possibility you’ll be able to choose between the block format, which spans the duration of your block, or an inline block format like this. If the trendy format is chosen, you’ll be able to additionally display an icon arrow and alter the icon placement.

If the vintage format is chosen you’ll be able to set the content material alignment. You’ll additionally display or permit the percentage textual content, set the button alignment, the button spacing hole, and permit RTL toughen.

Design Settings

Within the design tab, you’ll be able to customise the design of all social proportion buttons.

Normal

Right here you’ll be able to set the button padding, button background, and button border types.

Icon

Within the icon settings, you’ll be able to trade the icon spacing hole, arrow colour, icon colour, dimension, wrapper top and width, background colour, padding, rounded corners, and border types.

Textual content

Within the textual content settings, you’ll be able to taste the button textual content.

Different Design Settings

Additionally within the design tab, you’ll be able to customise the border, field shadow, sizing, spacing, filters, turn into, and animation types for the social proportion buttons.

Twitter Feed

With this module, you’ll be able to upload a Twitter feed on your site format. Let’s take a more in-depth take a look at the settings.

Content material Settings

Twitter Feed

Beneath the Twitter Feed choices, upload the username for the Twitter account you wish to show Tweets from.

Components

Right here you’ll be able to set how the feed is looked after: by way of fresh posts, previous posts, favorites, or retweets. You’ll additionally set the selection of Tweets to turn, and permit or disable the next parts: Twitter emblem, person symbol, title, person title, date, favourite, retweet, and browse extra. You’ll additionally trade the learn extra textual content.

Grid Settings

Within the grid settings, you’ll be able to set the selection of columns, trade the column gaps, and permit RTL toughen.

Different Content material Settings

Along with those choices, you’ll be able to additionally set the module hyperlink, background, and admin label within the content material tab.

Design Settings

Within the design tab, you’ll be able to customise how the Twitter feed seems to be.

Tweets Field

Right here, you’ll be able to set the Tweet field alignment, Twitter icon alignment, padding, background, and border types.

Consumer Avatar

Within the person avatar settings you’ll be able to trade the profile symbol dimension, set the avatar spacing, upload rounded corners, and alter the border types.

Consumer Textual content

The person textual content settings are separated by way of the Title tab and the Username tab, so you’ll be able to set other types for every.

Content material

That is the place you’ll be able to customise the styling of the Tweet content material. Those choices also are separated into 3 tabs for various styling: Description, Learn Extra, and Date. You’ll customise the font types and colours for every of those parts. You’ll additionally modify the ground spacing within the description settings.

Footer

Right here you’ll be able to set the footer alignment and padding in addition to the textual content and icon colours and sizes for the favourite and retweet signs.

Different Design Settings

Moreover, you’ll be able to customise the sizing, spacing, filters, turn into, and animation types for the Twitter feed module.

Twitter Carousel

This module means that you can upload a carousel of Tweets on your site.

Content material Settings

Twitter Feed

Right here you’ll be able to upload the username for the Twitter account you wish to show Tweets from.

Twitter Settings

Beneath the Twitter settings, you’ll be able to choose the kind sort, the selection of Tweets to turn, and permit or disable the next: Twitter emblem, person symbol, title, person title, date, favourite, retweet, and browse extra. You’ll customise the learn extra textual content right here as smartly.

Carousel Settings

Within the basic tab you’ll be able to set the animation velocity, permit autoplay, set the autoplay velocity, permit pagination, permit fastened width slides, choose the selection of slides to turn, modify the slide spacing, observe spacing at the first and last thing, permit limitless looping, and equalize column heights.

Within the complicated tab, you’ll be able to choose the CSS transition sort, permit swipe, set the selection of pieces to scroll, permit vertical mode, permit middle mode, stay up for animate, permit customized cursor, modify the wrapper spacing, and permit RTL toughen.

Here’s the carousel with middle mode enabled and the spotlight format sort decided on.

Different Content material Settings

You’ll additionally set a module hyperlink, trade the background types, and set an admin label within the content material tab.

Design Settings

Within the design tab, you’ll be able to utterly customise the styling of the Twitter carousel. Let’s take a more in-depth glance.

Tweets Field

Right here you’ll be able to set the content material alignment, Twitter icon alignment, Twitter icon dimension, padding, background, and border types for every Tweet.

Consumer Avatar

Within the person avatar settings you’ll be able to set the profile symbol dimension, avatar spacing, rounded corners, and border types.

Consumer Textual content

Within the person textual content settings, you’ll be able to customise the font types for the title and username.

Content material

Right here you’ll be able to customise the font types for the Tweet content material, the learn extra hyperlink, and the date.

Footer

Within the footer settings, you’ll be able to set footer alignment and padding. You’ll additionally customise the textual content and icon colours and sizes for the favourite and retweet signs.

Navigation

You’ll permit two forms of navigation: Kind A and Kind B. That is sort A, with the navigation on every facet of the carousel module. Right here you’ll be able to additionally set the peak and width of the navigation icons, set the icon dimension, colour, and background, permit a skew impact, set the vertical and horizontal place, and set the border types. Within the Prev and Subsequent tabs, you’ll be able to set the icons and border radius for every button.

Pagination

Within the pagination settings, you’ll be able to choose from quantity or dot taste navigation. That is the quantity navigation taste. You’ll customise the alignment, textual content colour, textual content dimension, background, top, width, border radius, vertical place, and spacing.

Within the lively tab, you’ll be able to set the types for the lively pagination merchandise.

Different Design Settings

You’ll additionally customise the sizing, spacing, filters, turn into, and animation choices within the design tab.

Acquire Divi Social Plus

Divi Social Plus is to be had within the Divi Marketplace. It prices $49 for limitless site utilization and 1 12 months of toughen and updates. The associated fee additionally features a 30-day money-back ensure.

Ultimate Ideas

Divi Social Plus provides 5 new social media modules to the Divi Builder, permitting you to combine your social media content material in your site. With Divi Social Plus, you’ll be able to upload Instagram and Twitter feeds and carousels in addition to social sharing buttons on your site. Each and every module comes with many various configuration choices and design settings that can help you have complete keep an eye on over the design of the social media modules. When you’re searching for a technique to combine a social media feed in your Divi site, this plugin could also be a perfect answer for you.

We would really like to listen to from you! Have you ever attempted Divi Social Plus? Tell us what you take into accounts it within the feedback!

The publish Divi Product Highlight: Divi Social Plus seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more