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.
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.
& 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:
- Plugins
- Add New
- Upload Plugin
- Choose File
- Install Now
Next, activate the plugin. Divi Pixel is now ready to use.
Divi Pixel Settings Screen
The settings are found in the dashboard under Divi > Divi Pixel. They include 7 tabs with detailed options.
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.
I’ve added the CSS ID to the section.
Here’s the background with the animated particles enabled.
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.
Here’s the page I selected for my coming soon page. It now shows this page in place of my home page.
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.
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.
Here’s the header on the front end. It has added a CTA button with a hover animation.
Footer Customizations
Footer customizations add new features to the theme customizer.
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.
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.
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.
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.
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.
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.
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.
The icons are placed in the secondary menu by default.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The trigger settings let you choose the trigger events, close options, etc.
The location options include the user roles, site area, and posts that can show the popup. Choose post types, specific posts, and exceptions.
The customization options let you choose the overlay background color, popup animation, position, blur, and more.
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.
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.
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.
Clicking the toggle changes to the second layout, as seen below.
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 Supplementary Files
Divi Pixel also includes many demos you can import to get a head start on your layouts.
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.
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.
The post Divi Product Highlight: Divi Pixel appeared first on Elegant Themes Blog.