Are you looking for a very easy strategy to display your Instagram and Twitter posts on your website? Divi Social Plus is a plugin that gives 5 new social media modules to the Divi Builder. With this plugin, you’ll connect your Instagram and Twitter accounts to turn completely customizable social media feeds and carousels. The plugin moreover comes with a social media percentage module that can be completely customized and added on your layouts. In this plugin highlight, we’ll take a look at Divi Social Plus to be in agreement you decide if it’s the proper social media plugin for you.

Let’s get started!

Putting in place Divi Social Plus

To position in Divi Social Plus, navigate to the Plugin internet web page inside the WordPress dashboard and click on on Add New. Click on on Choose Record and choose the .ZIP plugin report, then click on on Arrange Now.

As quickly because the plugin is installed, click on on activate.

Get Instagram Get entry to Token

So that you can connect an account and display pictures with the Instagram modules, you need to generate an Instagram Get entry to Token. The plugin writer has some documentation you’ll practice to organize the entire thing and get the App ID and App Secret you need to generate the Instagram Get entry to Token.

Divi Social Plus

The plugin supplies 5 new social media modules to the Divi Builder: Instagram Feed, Instagram Carousel, Social Percentage, Twitter Feed, and Twitter Carousel. Let’s take a look at each module.

Instagram Feed

With this module, you’ll display your Instagram posts in a feed anywhere on your website. Let’s take a look at the settings.

Content material subject matter Settings

Underneath the Instagram Feed settings, you’ll add your generated Get entry to Token. Once added, your Instagram photos will appear inside the Visual Builder and on your website.

Instagram Settings

Throughout the Instagram Settings segment, you’ll set the data cache time and cache timeout time. You’ll moreover choose to show the icon and caption on hover and set the number of Instagram posts to turn.

Additionally, you’ll allow the image link, show the post caption, set a custom designed products height, and allow RTL enhance.

Other Content material subject matter Settings

You’ll moreover set a link, background color, and admin label inside the content material subject matter tab settings.

Design Settings

Let’s take a look at the design settings.

Instagram

Underneath the Instagram tab, you’ll choose the structure, the number of columns, and the distance between items. Along side the grid structure pictured above, you’ll moreover choose the masonry structure or the highlight structure. That’s the masonry structure.

That’s the highlight structure. When this structure is selected, you’ll choose to focus on every few pictures, making them appear larger inside the grid.

Overlay

Throughout the overlay settings, you’ll set the Instagram icon color and icon measurement, the overlay background color, and completely customize the caption text types.

Caption

Proper right here you’ll industry the styling of the caption, if enabled. You’ll set the padding and caption background, and customize the caption text types.

Other Design Settings

Along side the ones unique design settings, you’ll moreover customize the sizing, spacing, border, box shadow, filters, grow to be, and animation alternatives for the Instagram feed module.

Instagram Carousel

With the Instagram carousel module, you’ll showcase Instagram photos on your website in an attractive carousel construction. Let’s take a closer look.

Content material subject matter Settings

First, you need as a way to upload the Get entry to Token you generated to the field inside the Instagram Feed settings. Then your pictures will appear inside the carousel.

Instagram Settings

Proper right here you’ll set the data cache time and cache timeout kind, show or disguise the icon and caption on hover, set the number of Instagram posts to show, allow the image link, and show or disguise the caption beneath the image.

Carousel Settings

There are two tabs inside the carousel settings – not unusual and complex. First, let’s take a look at the total tab. Proper right here you’ll set the animation speed, allow autoplay and set the autoplay speed, allow navigation, and allow pagination. You’ll moreover allow mounted width slide and set a width for each image.

If mounted width slide isn’t enabled, you’ll specify the number of slides to show. In this segment, you’ll moreover set the spacing between slides, choose whether or not or to not use spacing on the first and really very last thing, and allow never-ending looping.

Throughout the sophisticated tab of the carousel settings, you’ll set the sliding CSS transition kind. You’ll choose between linear, ease-in, or ease-in-out. You’ll moreover allow swipe navigation and set the number of items to scroll. Proper right here, you’ll moreover allow vertical mode to turn your Instagram photos in a vertical carousel.

You’ll moreover allow center mode for the carousel. With this mode enabled, you’ll choose from antique or highlighted. Right here’s what the highlighted center mode structure turns out like, it choices the center image more than the encircling pictures.

Moreover in this segment, you’ll allow the wait for animate setting, which ignores requests to advance the slide during animation, and also you’ll allow a custom designed cursor that appears over the slider.

Right here’s the grasp cursor style.

In spite of everything, you’ll adjust the perfect and bottom wrapper spacing and allow RTL enhance.

Other Content material subject matter Settings

You’ll moreover customize the module link, background types, and admin label during the content material subject matter tab.

Design Settings

Many of the design settings for the Instagram Carousel module are similar to the settings for the Instagram Feed module. Let’s take a look.

Instagram

In this segment, you’ll set the image height.

Overlay

Throughout the overlay segment, you’ll customize the Instagram icon color and icon measurement, along with the overlay background color and caption font types. Proper right here I’ve set a forged overlay color that appears on hover.

Caption

Right here’s where you’ll customize the styling of the caption confirmed beneath the image, if enabled. You’ll set the padding, caption background, and font types.

Navigation

There are 3 tabs of settings inside the navigation segment: No longer ordinary, Prev, and Next. First, let’s take a look at the standard tab. Proper right here you’ll choose between navigation varieties A or B. Kind A choices an arrow on each and every facet of the carousel. Kind B choices each and every arrows closer together, as pictured proper right here. You’ll adjust the vertical and horizontal placement, the height and width, and icon measurement.

In this segment, you’ll moreover set the icon color and background, skew the icons, adjust the spacing between icons, set the vertical position, allow horizontal position center, and adjust the border.

Throughout the prev and next tabs, you’ll set the navigation icons and set the border radius.

Pagination

Throughout the pagination settings you’ll choose from the dot kind or amount type of navigation. You’ll moreover choose the alignment, the pagination background color, height and width, border width, vertical position, and spacing. Underneath the full of life tab you’ll set the full of life pagination background, text color, and width.

Other Design Settings

Moreover inside the design tab you’ll customize the sizing, spacing, border, box shadow, filters, grow to be, and animation alternatives.

Social Percentage

The social percentage module supplies a social neighborhood percentage button on your internet web page. Each and every social percentage products is added to the module individually underneath the content material subject matter tab.

Sharing Products Settings

Each and every specific particular person sharing products can be added underneath the Content material subject matter tab and has its private settings internet web page.

Underneath the content material subject matter tab of the settings window for the sharing products you’ll set the neighborhood kind, specify the share text, industry the background, and set the admin label. You’ll choose to turn buttons for Twitter, Facebook, Messenger, Pinterest, LinkedIn, WhatsApp, Viber, Tumblr, Reddit, Electronic mail, VK, and Telegram.

Underneath the design tab you’ll customize the icon, text, border, box shadow, spacing, filters, and grow to be types.

Content material subject matter Settings

Now let’s take a look at the settings inside the content material subject matter tab of the social percentage module. Most settings are underneath the settings segment, with the exception of the background types and admin label.

Underneath the settings segment you’ll choose between a horizontal or vertical placement. Right here’s the vertical structure.

You’ll moreover choose between the antique structure (pictured above) or the stylish structure, pictured proper right here. With the display kind selection you’ll choose between the block structure, which spans the period of your block, or an inline block structure like this. If the stylish structure is selected, you’ll moreover show an icon arrow and change the icon placement.

If the antique structure is selected you’ll set the content material subject matter alignment. You’ll moreover show or allow the share text, set the button alignment, the button spacing hollow, and allow RTL enhance.

Design Settings

Throughout the design tab, you’ll customize the design of all social percentage buttons.

Customary

Proper right here you’ll set the button padding, button background, and button border types.

Icon

Throughout the icon settings, you’ll industry the icon spacing hollow, arrow color, icon color, measurement, wrapper height and width, background color, padding, rounded corners, and border types.

Text

Throughout the text settings, you’ll style the button text.

Other Design Settings

Moreover inside the design tab, you’ll customize the border, box shadow, sizing, spacing, filters, grow to be, and animation types for the social percentage buttons.

Twitter Feed

With this module, you’ll add a Twitter feed on your website structure. Let’s take a closer take a look on the settings.

Content material subject matter Settings

Twitter Feed

Underneath the Twitter Feed alternatives, add the username for the Twitter account you want to display Tweets from.

Elements

Proper right here you’ll set how the feed is taken care of: by means of contemporary posts, old-fashioned posts, favorites, or retweets. You’ll moreover set the number of Tweets to show, and allow or disable the following elements: Twitter emblem, particular person image, name, particular person name, date, favorite, retweet, and read further. You’ll moreover industry the be informed further text.

Grid Settings

Throughout the grid settings, you’ll set the number of columns, industry the column gaps, and allow RTL enhance.

Other Content material subject matter Settings

Along side the ones alternatives, you’ll moreover set the module link, background, and admin label inside the content material subject matter tab.

Design Settings

Throughout the design tab, you’ll customize how the Twitter feed seems to be like.

Tweets Box

Proper right here, you’ll set the Tweet box alignment, Twitter icon alignment, padding, background, and border types.

Client Avatar

Throughout the particular person avatar settings you’ll industry the profile image measurement, set the avatar spacing, add rounded corners, and change the border types.

Client Text

The individual text settings are separated by means of the Name tab and the Username tab, so that you’ll set other forms for each.

Content material subject matter

That’s the position you’ll customize the styling of the Tweet content material subject matter. The ones alternatives are also separated into 3 tabs for more than a few styling: Description, Be informed Further, and Date. You’ll customize the font types and colors for each of the ones elements. You’ll moreover adjust the bottom spacing inside the description settings.

Footer

Proper right here you’ll set the footer alignment and padding along with the text and icon colors and sizes for the favorite and retweet indicators.

Other Design Settings

Additionally, you’ll customize the sizing, spacing, filters, grow to be, and animation types for the Twitter feed module.

Twitter Carousel

This module means that you can add a carousel of Tweets on your website.

Content material subject matter Settings

Twitter Feed

Proper right here you’ll add the username for the Twitter account you want to display Tweets from.

Twitter Settings

Underneath the Twitter settings, you’ll choose the sort kind, the number of Tweets to show, and allow or disable the following: Twitter emblem, particular person image, name, particular person name, date, favorite, retweet, and read further. You’ll customize the be informed further text proper right here as well.

Carousel Settings

Throughout the not unusual tab you’ll set the animation speed, allow autoplay, set the autoplay speed, allow pagination, allow mounted width slides, choose the number of slides to show, adjust the slide spacing, practice spacing on the first and really very last thing, allow never-ending looping, and equalize column heights.

Throughout the sophisticated tab, you’ll choose the CSS transition kind, allow swipe, set the number of items to scroll, allow vertical mode, allow center mode, wait for animate, allow custom designed cursor, adjust the wrapper spacing, and allow RTL enhance.

Right here’s the carousel with center mode enabled and the highlight structure kind made up our minds on.

Other Content material subject matter Settings

You’ll moreover set a module link, industry the background types, and set an admin label inside the content material subject matter tab.

Design Settings

Throughout the design tab, you’ll completely customize the styling of the Twitter carousel. Let’s take a closer look.

Tweets Box

Proper right here you’ll set the content material subject matter alignment, Twitter icon alignment, Twitter icon measurement, padding, background, and border types for each Tweet.

Client Avatar

Throughout the particular person avatar settings you’ll set the profile image measurement, avatar spacing, rounded corners, and border types.

Client Text

Throughout the particular person text settings, you’ll customize the font types for the name and username.

Content material subject matter

Proper right here you’ll customize the font types for the Tweet content material subject matter, the be informed further link, and the date.

Footer

Throughout the footer settings, you’ll set footer alignment and padding. You’ll moreover customize the text and icon colors and sizes for the favorite and retweet indicators.

Navigation

You’ll allow two varieties of navigation: Kind A and Kind B. This is kind A, with the navigation on each aspect of the carousel module. Proper right here you’ll moreover set the height and width of the navigation icons, set the icon measurement, color, and background, allow a skew have an effect on, set the vertical and horizontal position, and set the border types. Throughout the Prev and Next tabs, you’ll set the icons and border radius for each button.

Pagination

Throughout the pagination settings, you’ll choose between amount or dot style navigation. That’s the amount navigation style. You’ll customize the alignment, text color, text measurement, background, height, width, border radius, vertical position, and spacing.

Throughout the full of life tab, you’ll set the categories for the full of life pagination products.

Other Design Settings

You’ll moreover customize the sizing, spacing, filters, grow to be, and animation alternatives inside the design tab.

Achieve Divi Social Plus

Divi Social Plus is available inside the Divi Market. It costs $49 for infinite website usage and 1 three hundred and sixty five days of enhance and updates. The price moreover includes a 30-day money-back be certain that.

Final Concepts

Divi Social Plus supplies 5 new social media modules to the Divi Builder, allowing you to mix your social media content material subject matter on your website. With Divi Social Plus, you’ll add Instagram and Twitter feeds and carousels along with social sharing buttons on your website. Each and every module comes with many more than a few configuration alternatives and design settings that can help you have entire regulate over the design of the social media modules. When you’re looking for a strategy to mix a social media feed on your Divi website, this plugin is also a very good resolution for you.

We wish to pay attention to from you! Have you ever ever tried Divi Social Plus? Let us know what you believe it inside the comments!

The post Divi Product Spotlight: Divi Social Plus appeared first on Chic Topics Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more