Divi Product Highlight: Divi Pixel

Posted on July 16, 2023 by 3 Comments

Divi Product Highlight: Divi Pixel
Blog / Divi Resources / Divi Product Highlight: Divi Pixel

Divi Pixel is a third-party plugin for Divi that adds over 45 custom modules and more than 200 settings to extend the capabilities of Divi. These settings make it easy to create websites that stand out from the crowd. In this post, we’ll look at Divi Pixel and see what it can do to help you decide if it’s the right plugin for your needs.

What to Expect from Divi Pixel

Let’s start by taking a look at what you can expect from the Divi Pixel plugin, if you decide to purchase it.

45+ Customizable Modules

Divi Pixel adds a ton of new customizable modules to Divi. There’s a lot of variation in modules. It ranges from a before/after slider, to star rating, floating images, carousels, and more.

Divi Pixel Product Highlight

200+ Custom Options

Divi pixel also provides you with a ton of custom options, more than 200 extra options to take your website to the next level! These custom options help you customize your Divi website even further. This goes from being able to upload SVG files, to creating a custom login page, customizing your header & navigation, and more.

Divi Pixel Product Highlight

& More

The options and modules mentioned above aren’t the only ones that come with Divi Pixel. You can expect unique features dedicated to the Blog area and the mobile experience. There’s a also a layout injector included that lets you insert layouts wherever you want!

Installing Divi Pixel

Upload and activate Divi Pixel the same as any plugin. Go to the WordPress dashboard and select:

  1. Plugins
  2. Add New
  3. Upload Plugin
  4. Choose File
  5. Install Now

Installing Divi Pixel

Next, activate the plugin. Divi Pixel is now ready to use.

Installing Divi Pixel

Divi Pixel Settings Screen

The settings are found in the dashboard under Divi > Divi Pixel. They include 7 tabs with detailed options.

Divi Pixel Settings Screen

The settings add features through CSS class IDs, options to enable, and modules added to the Divi Builder. The newest features are labeled. A few are marked as coming soon.

We’ll look at the latest features and some interesting features in each tab. We’ll see many of the settings on the back and front end.

Divi Pixel General Tab

The General tab includes 25 settings that include general options, header and navigation options, and footer options.

Particles Background

The Particles Background displays a CSS class ID to add to the module or section you want to display the background. It includes two class IDs to choose from and you can adjust them in the customizer settings.

Particles Background

I’ve added the CSS ID to the section.

Particles Background

Here’s the background with the animated particles enabled.

Particles Background

Maintenance Mode

Maintenance Mode sets your website to show that it’s coming soon or performing updates. Select any page to show as the maintenance mode page. A custom URL provides access to the site.

Maintenance Mode

Here’s the page I selected for my coming soon page. It now shows this page in place of my home page.

Maintenance Mode

Allow TTF, OTF, and WOFF Uploads

Enabling this lets you upload more file types. These file types can now be uploaded the same as any regular file in your media library.

Allow TTF, OTF, and WOFF Uploads

Custom Header and Navigation Styles

Custom Header and Navigation Styles includes hover animations, custom menu dropdown, CTA button, selecting the menu, button text and URL, CSS, a few mobile settings, and more.

Custom Header and Navigation Styles

Here’s the header on the front end. It has added a CTA button with a hover animation.

Custom Header and Navigation Styles

Footer Customizations

Footer customizations add new features to the theme customizer.

Footer Customizations

The customizer adds the footer menu, bottom bar, and social icons. I’ve adjusted the menu and bottom bar in this example. You can also see the custom scroll bar in this image, which is added separately.

Footer Customizations

Divi Pixel Blog Tab

The Blog tab adds 9 settings and lots of theme customizer options.

Custom Archive Page Style

The custom styles include 6 layouts. Choose from a single column with the image on top, a single column with the image on the left, a single column alternating, two columns with the image on top, three columns with the image on top, and alternating using smaller images. You can also apply these layouts to the Divi Blog Module with the CSS Class.

Custom Archive Page Style

Here’s the default setting. It adds styling to all the elements including a styled button. The images are wide. This also shows another setting that’s enabled by default called Add icons to meta text and the Read More button. It also adds the author box, post navigation, and related posts, which you’ll see on the posts themselves.

Custom Archive Page Style

Changing the layout is as simple as clicking the one you want and saving the changes. Here’s the 3-column layout. The images are tall. I’m hovering over the middle image in the example below to show the overlay.

Custom Archive Page Style

You can adjust all the styling with the theme customizer. It includes options for the categories, archives, buttons, sidebar, post navigation, author box, related articles, and comments. I’ve adjusted the title font and excerpt font in the example below. This example also shows the social icons added to the header.

Custom Archive Page Style

I’ve adjusted the fonts for the navigation, author box, and related posts. You can adjust all the elements independently. For the author box, I’ve adjusted the title font, body font, and image.

Custom Archive Page Style

Divi Pixel Social Media

The Divi Pixel Social Media tab lets you add social media icons to the header. Choose which part of the header the icons are added to, and the social networks to add.

Enable Divi Pixel Social Icons

You can enable the social media icons to display in the header. This also includes options to control how they work on click, for mobile devices, etc.

Enable Divi Pixel Social Icons

The icons are placed in the secondary menu by default.

Enable Divi Pixel Social Icons

You can also adjust them in the theme customizer. Adjust the icon, background, hover, animation, shape, size, etc. I’ve added the social icons to the primary menu, adjusted the size of the icons, and the hover settings for the icon and background colors.

Networks

Select from 19 popular networks. Display them by adding your URL.

Networks

Divi Pixel Mobile Tab

The mobile tab includes breakpoints, fixing the mobile header, hiding the search icon, changing the logo on mobile, etc. This gives you a lot of control over the mobile settings. You can upload any logo you want.

Divi Pixel Mobile Tab

Mobile Menu

The mobile menu adds 9 settings that include options for the menus’ animation style. Choose from a slider, squeeze, spin, elastic, collapse, stand, spring, minus, and vortex. Simply click the one you want. It shows an animation on the settings screen to give you an idea of how it would work on the front end.

Mobile Menu

You can adjust all the styling for the hamburger icon in the theme customizer. Adjust the color, open color, background color, opened background color, border radius, padding, etc. In this example, it’s using a different logo, background color, and dropdown menu than the desktop version.

Mobile Menu

Collapse Submenu Items on Mobiles

Choosing Collapse Submenu Items on Mobiles opens another new option- Remove Parent Menu Link. This prevents the parent menu links from opening.

Collapse Submenu Items on Mobiles

Divi Pixel Modules Tab

The Module tab adds over 40 new modules to the Divi Builder. Some of these work with the new post types that are added by Divi Pixel and accessed in the WordPress dashboard. You can show or hide them all or enable the specific modules you want. We’ll look at a few of the Divi Modules.

Divi Pixel Modules Tab

Testimonials

Testimonials adds a new post type where you can create the testimonials for the module to display. You can create them in the editor or get them from Facebook, Google, and WooCommerce. The editor includes fields for the title, content, image, name, company, website, and rating.

Testimonials

The module displays the testimonials and provides many options, including the number to display, testimonials to include or exclude, which elements to show or hide, popup settings, carousel settings, the review type, and more. All of the standard Divi design options are here as well.

Testimonials

Popup Maker

The popup maker uses the Divi Builder to create the layouts. The editor also includes trigger settings, popup location options, and customization. This one isn’t a module, but you can show or hide it in the module settings. It’s added to any element with a CSS class ID.

Popup Maker

The trigger settings let you choose the trigger events, close options, etc.

Popup Maker

The location options include the user roles, site area, and posts that can show the popup. Choose post types, specific posts, and exceptions.

Popup Maker

The customization options let you choose the overlay background color, popup animation, position, blur, and more.

Popup Maker

FAQ with Schema Markup

Divi Pixel’s FAQ module is built upon Google’s Structured Data principles. The FAQ builder uses the classic editor. You can create them like any content in the classic editor and add FAQ categories.

FAQ

Once you’ve built the FAQs, you can display them with the FAQ Module. Show all FAQs or exclude specific FAQs, display by categories, output structured data and HTML, etc. Style them in the design tab.

FAQ

Balloon

The Balloon Module creates a balloon that is selected as a menu item. Add any content within the balloon and style it in the design tab.

Content Toggle

The Content Toggle Module is interesting. It lets you specify two layouts and provides a toggle so the user can switch between them. I’ve specified two layouts. The image below shows the first layout.

Content Toggle

Clicking the toggle changes to the second layout, as seen below.

Content Toggle

Info Circle

The Info Circle Module is an interesting way to display information and content. It lets you add icons or images around a circle. Create as many sets of info as you want, choose icons and images for each one, and style them together or independently.

Divi Pixel Layout Injector Tab

The layout injector lets you select a Divi layout and place it in certain locations on the website. Place the layout before and after the navigation, footer, and after the blog and archive header. It can also build a 404 page.

Divi Pixel Layout Injector Tab

Divi Pixel Supplementary Files

Divi Pixel also includes many demos you can import to get a head start on your layouts.

Divi Pixel Supplementary Files

Where to Purchase Divi Pixel

Divi Pixel is available in the Divi Marketplace for $169. It includes unlimited website usage, a 30-day money-back guarantee, and 1 year of support and updates.

Where to Purchase Divi Pixel

Ending Thoughts

That’s our look at Divi Pixel. There are a lot of features and modules in this plugin. I’ve only scratched the surface in this post. If you want to extend what you can do with Divi, Divi Pixel is a good place to start.

We want to hear from you. Have you tried Divi Pixel? Let us know what you think about it in the comments.

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time 👇

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

3 Comments

  1. I’ve been a Divi Pixel user for quite some time, jumping in back when it didn’t have anywhere near as many modules. Over that time, there have been regular updates which covered bug-fixes, new modules, and feature tweaks to previous modules. The bug fixes are the good type: jumping on to making things solid when a bug is discovered, as opposed to stuff being rushed and buggy! They seem to take a lot of feedback from their community when adding new modules or tweaking current ones, and so the modules are useful and fully-featured… and often just fun to use. Support (in the couple of times I needed it early on) was great. Definitely a Divi Pixel fan!

  2. I absolutely LOVE Divi Pixel! I purchased a lifetime license when they had them available during a sale. I highly recommend this plugin!

  3. I’m a little reluctant to purchase Divi specific plugins until I see when and how Divi 5.0 shakes out.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

👋 It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Join To Download Today