Divi Supreme is a third-party plugin for Divi that adds lots of settings to add new features to the Divi Builder as well as lots of new modules. In this article, we’ll look at Divi Supreme to see what it can do and help you decide if it’s the plugin you need in your Divi toolbox.
Installation
Installation is simple and straightforward.
- Purchase and download the plugin from the Divi Marketplace
- Navigate to Plugins > Add New > Upload Plugin
- Click Choose File
- Locate the plugin’s zip file on your computer and select it
- Click Install Now
- Click Activate
- Go to Divi Supreme Pro > License in the WordPress dashboard and enter your license key
General Settings
Divi Supreme adds a menu screen with several tabs to customize the settings the way you want them. The General Settings tab includes toggles to enable scheduled elements, a popup, a library widget, a read more content link, library shortcodes, and a responsive viewer. Let’s look at a few of them.
Scheduled Element
Scheduled Elements provide a calendar with the exact time so you can schedule to show or hide it for those times. You can also choose which user’s it applies to. This is added to all sections, rows, columns, and modules.
Popup
The popup feature is added to modules. You can choose the popup type, choose a layout from the library, select the open and close triggers, auto close, in and out animations, positions, widths, overlays, close buttons, icons, colors, etc.
Read More
Read More adds a link to certain modules to reveal their content on click. Choose to show the link on mobile, the collapsed height, the text, font, colors, shadow, custom CSS, and more.
Library Widget
The Library Widget lets you place any layout from the Divi Library in your sidebars, footer, or anywhere else you use widgets.
This example shows the demo layout in the sidebar. The layout I’m using wasn’t designed for this space, but it’s interesting that it can use Divi layouts to build sidebars.
Responsive Viewer
The Responsive Viewer adds new tools to the Builder Toolbar that provides more viewing options. When you select to see the tablet or phone modes, new screen sizes are added to the toolbar. It also adds a field where you can enter a custom size.
Easy Theme Builder
The Easy Theme Builder lets you configure your header, change colors of header elements on scroll, and customize the shrinking elements.
Fixed Header
By default, a header created with the Theme Builder scrolls with the site. In the example above, I’ve scrolled down the page and the header has scrolled away.
The header is now fixed, so when I scroll the header remains in place.
Scrolling
For scrolling, I’ve changed the background colors in both sections. I’ve also added the box shadow to appear on scroll.
Here’s my Theme Builder header before scrolling. I’ve set it to Fixed and to push the content down. This header has two sections.
Here’s the header after scrolling. The two sections have changed their background colors according to my settings.
Shrink
Shrink allows you to specify the size of the menu on scroll and change the logo to a new image. Add padding to the section, rows, module, and specify a percentage for the image to shrink.
Here’s my Theme Builder header with its default settings and a new logo.
I’ve set the sizing to increase so it’s easy to see the difference. I’ve added 8px of padding and set the image to 80%. It’s now changed the logo to my new image.
Social Media Settings
Social Media Settings let you enter your Facebook App ID and change the language so your modules use the same language as your website.
Misc
The miscellaneous settings allow you to remove the plugin’s data on uninstall, allow for JSON file uploads, SVG uploads, and change the Divi Supreme menu name and icon.
Divi Modules
Divi Supreme adds 42 new modules to the Divi Builder. They add lots of new features for images, text, buttons, contact forms, social media networks, etc. Let’s look at a few of them.
Supreme Business Hours
Supreme Business Hours includes sub-modules for each day of the week, allowing you to individually name them, show different hours, and style them. You can also style them together as I’ve done here. It gives you independent control over the day and time fonts. You can also enter any text you want into the fields.
Supreme Button
Supreme Button gives you two buttons that you can style together or independently. It also adds separator text, a lightbox for each button, and tooltips. Each of the elements has their own styling options. You can use the exact features you want, so you don’t have to use both buttons, the separator text, etc.
Supreme Card
Supreme Card creates cards that look like blog posts. Add an image, title, description, button, and badge. Each of the elements can be styled independently. I’ve added an image, increased the font weight for the title, changed the badge color and font size, change the color of the buttons, made the button round, and added a box shadow to the button. This is the stacked view.
You can also make in inline and choose the width, order alignment, and horizontal content alignment (which adjusts the vertical position of the image). This shows left for the order alignment and center for the horizontal alignment. The alignment option is excellent for creating CTA’s in an alternating layout.
This is right alignment. I’ve also made some adjustments to the image such as adding rounded corners, a red border, and a box shadow. You can also add an overlay to the image.
Supreme Card Carousel
The Supreme Card Carousel provides the same features as the Supreme Card, but adds multiple cards to a slider. It gives you styling options so you can style the cards independently. It also adds styling options for the carousel including arrows and dot navigation, and the standard slider features. This shows the default settings with images that I’ve added. This is the stacked alignment.
This is the inline alignment. I’ve added a background color to each of the sub-modules so the stand apart. I’ve also changed the size and color of the arrows and the colors of the dot navigation. The arrow adjustments also give you control over the position, previous icon, and next icon.
Supreme Dual Heading
Supreme Dual Heading Provides three sections for text: before, middle, and after. The middle text is a different color by default. All three use the same settings, but you can style them independently. You can also show them as inline or stacked in any combination you want. Inline is the default setting. I’ve increased the font size of the before and middle text, decreased the after text, and made the middle text bold.
Supreme Embedded Google Map
The embedded Google Map lets you add the address you want it to pin and choose the zoom level. No other setup is needed. It uses ctrl+ to zoom, so users can scroll past it without the page stopping to zoom the map.
It doesn’t have custom settings for any of the map elements, but it does have all of the standard design options. I’ve added a box shadow and adjusted the filters in this example.
Supreme Embedded Twitter Timeline
The embedded Twitter timeline lets you specify a Twitter username to embed that user’s Twitter posts into your layout. Limit the number of tweets, show the header, footer, border, scrollbar, and remove the background color. It includes standard design settings. It also includes a light and dark theme.
Supreme Facebook Comments
Facebook Comments embeds the comments of a Facebook page and allows users to comment using their Facebook accounts. Select the number of comments to show, choose a light or dark scheme, and select how the comments are ordered. Users can Like, Reply, and follow the person on Facebook. It includes standard design settings.
Supreme Icon List
Supreme Icon List includes sub-modules where you can add the content and select an icon for each item. You can style the text and icons independently. You can also add backgrounds, including color, gradients, images, and video, behind each item.
Supreme Shapes
Supreme Shapes lets you choose a shape from the dropdown list and set its size. It has 17 different shapes to choose from.
The design options let you change the color, use a border, and add a shadow. It also includes standard design settings. I’ve changed the color and added a shadow in the example above.
Purchase
Divi Supreme is available in the Divi Marketplace for $79. The price includes unlimited website usage and one year of support and updates.
Ending Thoughts
Divi Supreme Pro is an interesting plugin for Divi. It adds a ton of new features and modules but remains easy to use. All of the features are useful. Some add effects, while others add features that greatly expand Divi. If you’re looking to expand your Divi site or toolbox without needing a ton of plugins, Divi Supreme Pro is worth a look.
CHECK ALSO : WPBakery Premium 6.6.0 Page Builder GPL Latest Version
Reviews
There are no reviews yet.