Divi Pixel is a third-party plugin for Divi that provides over 45 customized modules and greater than 200 settings to increase the functions of Divi. Those settings make it simple to create web sites that stick out from the gang. On this publish, we’ll take a look at Divi Pixel and notice what it could actually do to lend a hand you make a decision if it’s the suitable plugin to your wishes.
What to Be expecting from Divi Pixel
Let’s get started through having a look at what you’ll be able to be expecting from the Divi Pixel plugin, if you make a decision to buy it.
45+ Customizable Modules
Divi Pixel provides a ton of latest customizable modules to Divi. There’s a large number of variation in modules. It levels from a ahead of/after slider, to famous person ranking, floating photographs, carousels, and extra.
200+ Customized Choices
Divi pixel additionally offers you a ton of customized choices, greater than 200 additional choices to take your web page to the following degree! Those customized choices mean you can customise your Divi web page even additional. This is going from having the ability to add SVG information, to making a customized login web page, customizing your header & navigation, and extra.
& Extra
The choices and modules discussed above aren’t the one ones that include Divi Pixel. You’ll be expecting distinctive options devoted to the Weblog house and the cellular revel in. There’s a additionally a structure injector incorporated that allows you to insert layouts anyplace you wish to have!
Putting in Divi Pixel
Add and turn on Divi Pixel the similar as any plugin. Move to the WordPress dashboard and make a selection:
- Plugins
- Upload New
- Add Plugin
- Make a selection Report
- Set up Now
Subsequent, turn on the plugin. Divi Pixel is now able to make use of.
Divi Pixel Settings Display
The settings are discovered within the dashboard underneath Divi > Divi Pixel. They come with 7 tabs with detailed choices.
The settings upload options thru CSS magnificence IDs, choices to permit, and modules added to the Divi Builder. The latest options are categorised. A couple of are marked as coming quickly.
We’ll take a look at the most recent options and a few attention-grabbing options in each and every tab. We’ll see lots of the settings on the front and back finish.
Divi Pixel Common Tab
The Common tab contains 25 settings that come with normal choices, header and navigation choices, and footer choices.
Debris Background
The Debris Background shows a CSS magnificence ID so as to add to the module or segment you wish to have to show the background. It contains two magnificence IDs to make a choice from and you’ll be able to regulate them within the customizer settings.
I’ve added the CSS ID to the segment.
Right here’s the background with the animated debris enabled.
Upkeep Mode
Upkeep Mode units your web page to turn that it’s coming quickly or acting updates. Make a choice any web page to turn as the upkeep mode web page. A customized URL supplies get entry to to the web page.
Right here’s the web page I decided on for my coming quickly web page. It now displays this web page instead of my house web page.
Permit TTF, OTF, and WOFF Uploads
Enabling this allows you to add extra report sorts. Those report sorts can now be uploaded the similar as any common report for your media library.
Customized Header and Navigation Types
Customized Header and Navigation Types contains hover animations, customized menu dropdown, CTA button, deciding on the menu, button textual content and URL, CSS, a couple of cellular settings, and extra.
Right here’s the header at the entrance finish. It has added a CTA button with a hover animation.
Footer Customizations
Footer customizations upload new options to the theme customizer.
The customizer provides the footer menu, backside bar, and social icons. I’ve adjusted the menu and backside bar on this instance. You’ll additionally see the customized scroll bar on this symbol, which is added one by one.
Divi Pixel Weblog Tab
The Weblog tab provides 9 settings and a lot of theme customizer choices.
Customized Archive Web page Taste
The customized kinds come with 6 layouts. Choose between a unmarried column with the picture on best, a unmarried column with the picture at the left, a unmarried column alternating, two columns with the picture on best, 3 columns with the picture on best, and alternating the use of smaller photographs. You’ll additionally observe those layouts to the Divi Weblog Module with the CSS Elegance.
Right here’s the default surroundings. It provides styling to the entire parts together with a styled button. The photographs are broad. This additionally displays any other surroundings that’s enabled through default referred to as Upload icons to meta textual content and the Learn Extra button. It additionally provides the creator field, publish navigation, and similar posts, which you’ll see at the posts themselves.
Converting the structure is so simple as clicking the only you wish to have and saving the adjustments. Right here’s the 3-column structure. The photographs are tall. I’m soaring over the center symbol within the instance beneath to turn the overlay.
You’ll regulate the entire styling with the theme customizer. It contains choices for the types, archives, buttons, sidebar, publish navigation, creator field, similar articles, and feedback. I’ve adjusted the name font and excerpt font within the instance beneath. This case additionally displays the social icons added to the header.
I’ve adjusted the fonts for the navigation, creator field, and similar posts. You’ll regulate the entire parts independently. For the creator field, I’ve adjusted the name font, frame font, and symbol.
Divi Pixel Social Media
The Divi Pixel Social Media tab allows you to upload social media icons to the header. Make a selection which a part of the header the icons are added to, and the social networks so as to add.
Allow Divi Pixel Social Icons
You’ll permit the social media icons to show within the header. This additionally contains choices to regulate how they paintings on click on, for cellular units, and so forth.
The icons are positioned within the secondary menu through default.
You’ll additionally regulate them within the theme customizer. Alter the icon, background, hover, animation, form, dimension, and so forth. I’ve added the social icons to the main menu, adjusted the dimensions of the icons, and the hover settings for the icon and background colours.
Networks
Make a choice from 19 in style networks. Show them through including your URL.
Divi Pixel Cellular Tab
The cellular tab contains breakpoints, solving the cellular header, hiding the quest icon, converting the emblem on cellular, and so forth. This provides you with a large number of regulate over the cellular settings. You’ll add any brand you wish to have.
Cellular Menu
The cellular menu provides 9 settings that come with choices for the menus’ animation taste. Choose between a slider, squeeze, spin, elastic, cave in, stand, spring, minus, and vortex. Merely click on the only you wish to have. It displays an animation at the settings display to come up with an concept of ways it might paintings at the entrance finish.
You’ll regulate the entire styling for the hamburger icon within the theme customizer. Alter the colour, open colour, background colour, opened background colour, border radius, padding, and so forth. On this instance, it’s the use of a unique brand, background colour, and dropdown menu than the desktop model.
Cave in Submenu Pieces on Mobiles
Opting for Cave in Submenu Pieces on Mobiles opens any other new option- Take away Dad or mum Menu Hyperlink. This prevents the guardian menu hyperlinks from opening.
Divi Pixel Modules Tab
The Module tab provides over 40 new modules to the Divi Builder. A few of these paintings with the brand new publish sorts which can be added through Divi Pixel and accessed within the WordPress dashboard. You’ll display or cover all of them or permit the precise modules you wish to have. We’ll take a look at among the Divi Modules.
Testimonials
Testimonials provides a brand new publish sort the place you’ll be able to create the testimonials for the module to show. You’ll create them within the editor or get them from Fb, Google, and WooCommerce. The editor contains fields for the name, content material, symbol, title, corporate, web page, and ranking.
The module shows the testimonials and offers many choices, together with the quantity to show, testimonials to incorporate or exclude, which parts to turn or cover, popup settings, carousel settings, the assessment sort, and extra. The entire same old Divi design choices are right here as smartly.
Popup Maker
The popup maker makes use of the Divi Builder to create the layouts. The editor additionally contains cause settings, popup location choices, and customization. This one isn’t a module, however you’ll be able to display or cover it within the module settings. It’s added to any component with a CSS magnificence ID.
The cause settings allow you to select the cause occasions, shut choices, and so forth.
The positioning choices come with the person roles, web page house, and posts that may display the popup. Make a selection publish sorts, particular posts, and exceptions.
The customization choices allow you to select the overlay background colour, popup animation, place, blur, and extra.
FAQ with Schema Markup
Divi Pixel’s FAQ module is constructed upon Google’s Structured Information rules. The FAQ builder makes use of the vintage editor. You’ll create them like every content material within the vintage editor and upload FAQ classes.
While you’ve constructed the FAQs, you’ll be able to show them with the FAQ Module. Display all FAQs or exclude particular FAQs, show through classes, output structured knowledge and HTML, and so forth. Taste them within the design tab.
Balloon
The Balloon Module creates a balloon this is decided on as a menu merchandise. Upload any content material throughout the balloon and elegance it within the design tab.
Content material Toggle
The Content material Toggle Module is attention-grabbing. It allows you to specify two layouts and offers a toggle so the person can transfer between them. I’ve specified two layouts. The picture beneath displays the primary structure.
Clicking the toggle adjustments to the second one structure, as observed beneath.
Data Circle
The Data Circle Module is an engaging method to show data and content material. It allows you to upload icons or photographs round a circle. Create as many units of information as you wish to have, select icons and photographs for each and every one, and elegance them in combination or independently.
Divi Pixel Format Injector Tab
The structure injector allows you to make a selection a Divi structure and position it in sure places at the web page. Position the structure ahead of and after the navigation, footer, and after the weblog and archive header. It could additionally construct a 404 web page.
Divi Pixel Supplementary Information
Divi Pixel additionally contains many demos you’ll be able to import to get a head get started in your layouts.
The place to Acquire Divi Pixel
Divi Pixel is to be had within the Divi Market for $169. It contains limitless web page utilization, a 30-day money-back ensure, and 1 12 months of beef up and updates.
Finishing Ideas
That’s our take a look at Divi Pixel. There are a large number of options and modules on this plugin. I’ve best scratched the outside on this publish. If you wish to lengthen what you’ll be able to do with Divi, Divi Pixel is a superb position to begin.
We need to listen from you. Have you ever attempted Divi Pixel? Tell us what you take into consideration it within the feedback.
The publish Divi Product Spotlight: Divi Pixel gave the impression first on Sublime Issues Weblog.
WordPress Web Design