Divi Plugin Highlight: Divi Supreme

Posted on October 8, 2020 by in Divi Resources | 25 comments

Divi Plugin Highlight: Divi Supreme

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).

Purchase In The Divi Marketplace

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

Installation is simple and straightforward.

  1. Purchase and download the plugin from the Divi Marketplace
  2. Navigate to Plugins > Add New > Upload Plugin
  3. Click Choose File
  4. Locate the plugin’s zip file on your computer and select it
  5. Click Install Now
  6. Click Activate
  7. Go to Divi Supreme Pro > License in the WordPress dashboard and enter your license key

General Settings

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 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

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

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

Library Widget

The Library Widget lets you place any layout from the Divi Library in your sidebars, footer, or anywhere else you use widgets.

Library Widget

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

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

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

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.

Fixed Header

The header is now fixed, so when I scroll the header remains in place.

Scrolling

Scrolling

For scrolling, I’ve changed the background colors in both sections. I’ve also added the box shadow to appear on scroll.

Scrolling

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.

Scrolling

Here’s the header after scrolling. The two sections have changed their background colors according to my settings.

Shrink

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.

Shrink

Here’s my Theme Builder header with its default settings and a new logo.

Shrink

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

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

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 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

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

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

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.

Supreme Card

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.

Supreme Card

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

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.

Supreme Card Carousel

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

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

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.

Supreme Embedded Google 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

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

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

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

Supreme Shapes lets you choose a shape from the dropdown list and set its size. It has 17 different shapes to choose from.

Supreme Shapes

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

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

Looking For More Great Divi Extensions? Check These Out!

Divi Supreme Pro

With 40+ Divi premium modules and extensions to choose from. Take ...

View Product

1016 Sales

Divi Carousel Module 2.0

Robust and extremely customizable carousel module for divi.

View Product

1071 Sales

Table Maker

Divi-Modules – Table Maker brings beautiful responsive tables to the ...

View Product

593 Sales

Divi Responsive Helper

The Divi Responsive Helper allows you to easily adjust device ...

View Product

357 Sales

Divi Events Calendar

Easily display and style events from The Events Calendar with custom ...

View Product

658 Sales

Divi Modal Popup

Create interactive popups, overlays, and lightboxes for videos, ...

View Product

481 Sales

DiviMenus

A powerful menu builder that brings the coolest designs and popups ...

View Product

320 Sales

Divi Image Hover

Subtle image hover effects. Comes with 250+ amazing designs that ...

View Product

316 Sales

Premade Layouts

Check Out These Related Posts

25 Comments

  1. 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.

  2. 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!

  3. This add-on is very impressive for making websites as professionals.
    Thanks, divi.

  4. 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 ❤

  5. 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.

  6. 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

  7. 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.

  8. 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.

  9. Impressive Plugin, divi always come with great effort and awesome updates. 😀

  10. I love the free version,easy to use and the divider with text is brilliant

  11. 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..

  12. 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!

  13. Just today they added a Masonry Gallery. The Supreme Image Hotspot is my favorite. Keep up the great work!

  14. 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.

  15. 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,

  16. 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

  17. 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! 🙂

  18. Hello!
    How WEIRD is this! I was JUST looking at buying this plug-in and was hoping you’d do a tutorial. Very spooky!

  19. Does this plugin work when using the Divi page builder plugin but using other themes? Is so, are there any features that don’t?

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today

Pin It on Pinterest