Find It In The Divi Marketplace
Divi Supreme Pro is available in the Divi Marketplace! That means it has passed our review and has been found to meet our quality standards. You can visit Divi Supreme in the marketplace to see all of their available products. Products purchased from the Divi Marketplace come with unlimited website usage and a 30 day money back guarantee (just like Divi).
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.
We want to hear from you. Have you tried Divi Supreme Pro? Let us know what you think about it in the comments.
Featured Image via VectorKnight / shutterstock.com
Does this plugin work when using the Divi page builder plugin but using other themes? Is so, are there any features that don’t?
Hello!
How WEIRD is this! I was JUST looking at buying this plug-in and was hoping you’d do a tutorial. Very spooky!
Divi Supreme Pro is a brilliant plugin, I recently bought the lifetime deal. I was hesitant though because I have had experience with plugins for Divi that just cant be maintained for what ever reason. But the list of features is great and and it saves me a lot of time. I’m just hoping that this plugin sticks around all the way past Divi 10! 🙂
Me too!
Thank you Randy for sharing this. I was tried to install divi supreme once and very happy with the outcome when it make my website way so much nicer, highlight UX design. Thanks
I own a Divi Supreme Pro licence too. It adds a lot of features that Divi lacks in comparison with Elementor Pro, like a popup builder, animated and typing headline, flipbox, icon and text dividers, Lottie and Embed anywhere. The developer also brings out a lot of updates.
Divi Supreme is a good investment, especially since Elegant Themes doesn’t regularly add new modules,
I have to say, I install this plugin on all my Divi site’s. I love Divi Supreme, the developer, and the group on Facebook. It’s a light weight and fast plugin with so many features.
Nice plugin. I like this version. Thank you so much.
Just today they added a Masonry Gallery. The Supreme Image Hotspot is my favorite. Keep up the great work!
I currently use the free version of this plugin and I absolutely love it! I didn’t know that there was a paid version. May look into getting it for a few of my clients!
very informative article..
i have no idea about divi , but now i have many things about divi….
thanks for sharing such a nice article with us….
keept it up…
Good job dear..
I love the free version,easy to use and the divider with text is brilliant
Impressive Plugin, divi always come with great effort and awesome updates. 😀
That’s a really cool plugin I would say, the one and only plugin for Divi.
I really liked the Popup extension and Modules that come with it.
Hey, you copied by Comment, Lol.
I didn’t know they had a premium version and more modules but Divi Supreme to be free is very complete to improve some designs.
This is a pretty cool plugin the only thing is that in the demo page it docent allow you to open the feature in different tabs
So you end up doing back and forth to go through all of them, that annoying.
It would be nice if they had a full feature example so you can just scroll and see all of them, it would make things much faster.
All in all they have some nice effects and features
Has anyone seen a plugin which adds parallax animations to modules, like they have in Elementor core?
E.G. A module can rotate based on the users mouse scroll, so it rotates to the right as a scroll down, then rotates to the left as I scroll up.
I have a big project coming up and I really want to use DIVI but that module parallax does add a lot of immersion.
Can’t you do that with Divi’s built-in scroll effects? https://www.elegantthemes.com/blog/theme-releases/divi-scroll-effects
I just had that need and searched everywhere, and asked on multiple forums. I ended up having to use Slider Revolution, which is like using an aircraft carrier to transport a car. If Divi Supreme, or anyone, had that function, I’d buy it in a heartbeat.
We are so proud and honoured to be featured in ElegantThemes’ blog! There will be more amazing modules, extensions and features coming very soon. So stay tuned and give us some ❤️
I am one of pro user looking forward the coming new updates keep up the wonderful job ❤
This add-on is very impressive for making websites as professionals.
Thanks, divi.
That’s a really cool plugin I would say, the one and only plugin for Divi.
I really liked the Popup extension and Modules that come with it.
I’m using it as well!
That looks like an awesome plugin. But I really would like Elegant to step up their game and stuff like this to Divi instead of relying on third party developers. I have a real bad experience where such developer doesn’t properly maintain his plugin after a Divi upgrade. It doesn’t work with the new visual builder, so I have to switch back to the old back end builder to access it’s settings. And eventually, that’s not going to be possible anymore. No matter how good a third party plugin seems to be, I just don’t want to use it.