Divi Product Spotlight: Divi Social Plus

by | Jun 25, 2023 | Etcetera | 0 comments

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.

Divi Social Plus Install

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

Divi Social Plus 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 Instagram Access 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.

Divi Social Plus Modules

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.

Divi Social Plus Instagram Feed

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.

Divi Social Plus Instagram Feed Access Token

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.

Divi Social Plus Instagram Feed Instagram Settings

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

Divi Social Plus Instagram Feed Instagram Settings

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.

Divi Social Plus Instagram Feed Background

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.

Divi Social Plus Instagram Feed Masonry Layout

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.

Divi Social Plus Instagram Feed Instagram Settings

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.

Divi Social Plus Instagram Feed Overlay

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.

Divi Social Plus Instagram Feed Caption

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.

Divi Social Plus Instagram Feed Design Settings

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.

Divi Social Plus Instagram Carousel

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.

Divi Social Plus Instagram Carousel Access Token

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.

Divi Social Plus Instagram Carousel Instagram Settings

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.

See also  10 PHP Trying out Equipment for WordPress Plugins

Divi Social Plus Instagram Carousel Carousel Settings

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.

Divi Social Plus Instagram Carousel Carousel Settings

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.

Divi Social Plus Instagram Carousel Vertical Mode

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.

Divi Social Plus Instagram Carousel Center Mode

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.

Divi Social Plus Instagram Carousel Custom Cursor

Right here’s the grasp cursor style.

Divi Social Plus Instagram Carousel Custom Cursor Example

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

Divi Social Plus Instagram Carousel Wrapper RTL Settings

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.

Divi Social Plus Instagram Carousel Background

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.

Divi Social Plus Instagram Carousel 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.

Divi Social Plus Instagram Carousel Overlay

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.

Divi Social Plus Instagram Carousel Caption

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.

Divi Social Plus Instagram Carousel Navigation

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.

Divi Social Plus Instagram Carousel Navigation

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

Divi Social Plus Instagram Carousel Navigation

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.

Divi Social Plus Instagram Carousel Pagination

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.

Divi Social Plus Social Share

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.

Divi Social Plus Social Share Settings

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.

Divi Social Plus Social Share Networks

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

Divi Social Plus Social Share Design Settings

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.

See also  How to Prevent Hotlinking on Your WordPress Website

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

Divi Social Plus Social Share Placement

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.

Divi Social Plus Social Share Layout

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.

Divi Social Plus Social Share Layout Classic

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.

Divi Social Plus Social Share Button Background

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.

Divi Social Plus Social Share Icon

Text

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

Divi Social Plus Social Share 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.

Divi Social Plus Social Share Other Design Settings

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.

Divi Social Plus Twitter Feed Username

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.

Divi Social Plus Twitter Feed Elements

Grid Settings

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

Divi Social Plus Twitter Feed Grid Settings

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.

Divi Social Plus Twitter Feed Background

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.

Divi Social Plus Twitter Feed Tweets Background

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.

Divi Social Plus Twitter Feed User Avatar

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.

Divi Social Plus Twitter Feed User Text

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.

Divi Social Plus Twitter Feed Content

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.

Divi Social Plus Twitter Feed Footer

Other Design Settings

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

Divi Social Plus Twitter Feed Design Settings

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.

Divi Social Plus Twitter Feed Username

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.

See also  Get a Unfastened Song Venue Structure Pack for Divi

Divi Social Plus Twitter Carousel Twitter Settings

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.

Divi Social Plus Twitter Carousel Settings

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.

Divi Social Plus Twitter Carousel Advanced Carousel Settings

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

Divi Social Plus Twitter Carousel Center Mode

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.

Divi Social Plus Twitter Carousel Content Settings

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.

Divi Social Plus Twitter Carousel Tweets Box

Client Avatar

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

Divi Social Plus Twitter Carousel User Avatar

Client Text

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

Divi Social Plus Twitter Carousel User Text

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.

Divi Social Plus Twitter Carousel Content

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.

Divi Social Plus Twitter Carousel Footer

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.

Divi Social Plus Twitter Carousel Navigation

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.

Divi Social Plus Twitter Carousel Pagination

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

Divi Social Plus Twitter Carousel Active Pagination

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.

Purchase Divi Social Plus

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

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *