Divi Pixel is a third-party plugin for Divi that gives over 45 custom designed modules and larger than 200 settings to extend the purposes of Divi. The ones settings make it easy to create internet websites that stand proud of the crowd. In this put up, we’ll check out Divi Pixel and spot what it would in fact do to be in agreement you decide if it’s the right plugin for your needs.
What to Expect from Divi Pixel
Let’s get began via looking at what you’ll be capable to expect from the Divi Pixel plugin, if you decide to shop for it.
45+ Customizable Modules
Divi Pixel supplies a ton of recent customizable modules to Divi. There’s numerous variation in modules. It ranges from a forward of/after slider, to well-known individual score, floating pictures, carousels, and additional.
200+ Custom designed Alternatives
Divi pixel moreover will give you a ton of custom designed possible choices, more than 200 further possible choices to take your internet web page to the next level! The ones custom designed possible choices imply you’ll be able to customize your Divi internet web page even further. That is going from being able to upload SVG data, to creating a custom designed login internet web page, customizing your header & navigation, and additional.
& Additional
The decisions and modules mentioned above aren’t the only ones that come with Divi Pixel. You’ll expect unique choices dedicated to the Blog area and the mobile enjoy. There’s a moreover a construction injector integrated that permits you to insert layouts anywhere you want!
Putting in place Divi Pixel
Upload and activate Divi Pixel the equivalent as any plugin. Transfer to the WordPress dashboard and make a choice:
- Plugins
- Add New
- Upload Plugin
- Select File
- Arrange Now
Next, flip at the plugin. Divi Pixel is now in a position to use.
Divi Pixel Settings Show
The settings are found out inside the dashboard beneath Divi > Divi Pixel. They arrive with 7 tabs with detailed possible choices.
The settings add choices through CSS elegance IDs, possible choices to allow, and modules added to the Divi Builder. The most recent choices are classified. A few are marked as coming briefly.
We’ll check out the latest choices and a couple of crowd pleasing choices in every tab. We’ll see a whole lot of the settings on the back and front end.
Divi Pixel Not unusual Tab
The Not unusual tab comprises 25 settings that include customary possible choices, header and navigation possible choices, and footer possible choices.
Particles Background
The Particles Background displays a CSS elegance ID so that you could upload to the module or section you want to turn the background. It comprises two elegance IDs to choose between and also you’ll be capable to keep watch over them inside the customizer settings.
I’ve added the CSS ID to the section.
Proper right here’s the background with the animated particles enabled.
Repairs Mode
Repairs Mode devices your internet web page to show that it’s coming briefly or performing updates. Make a selection any internet web page to show as the maintenance mode internet web page. A custom designed URL provides get right of entry to to the internet web page.
Proper right here’s the internet web page I made up our minds on for my coming briefly internet web page. It now shows this internet web page as a substitute of my area internet web page.
Allow TTF, OTF, and WOFF Uploads
Enabling this lets you upload further record varieties. The ones record varieties can now be uploaded the equivalent as any not unusual record in your media library.
Custom designed Header and Navigation Varieties comprises hover animations, custom designed menu dropdown, CTA button, deciding at the menu, button text and URL, CSS, a few mobile settings, and additional.
Proper right here’s the header on the front end. It has added a CTA button with a hover animation.
Footer customizations add new choices to the theme customizer.
The customizer supplies the footer menu, bottom bar, and social icons. I’ve adjusted the menu and bottom bar in this example. You’ll moreover see the custom designed scroll bar in this image, which is added one after the other.
Divi Pixel Blog Tab
The Blog tab supplies 9 settings and numerous theme customizer possible choices.
Custom designed Archive Internet web page Style
The custom designed types include 6 layouts. Make a choice from a single column with the image on perfect, a single column with the image on the left, a single column alternating, two columns with the image on perfect, 3 columns with the image on perfect, and alternating using smaller pictures. You’ll moreover practice the ones layouts to the Divi Blog Module with the CSS Class.
Proper right here’s the default environment. It supplies styling to all the portions at the side of a styled button. The pictures are wide. This moreover shows some other environment that’s enabled via default known as Add icons to meta text and the Be informed Additional button. It moreover supplies the writer box, put up navigation, and equivalent posts, which you’ll see on the posts themselves.
Changing the construction is as simple as clicking the one you want and saving the changes. Proper right here’s the 3-column construction. The pictures are tall. I’m hovering over the middle image inside the example underneath to show the overlay.
You’ll keep watch over all the styling with the theme customizer. It comprises possible choices for the categories, archives, buttons, sidebar, put up navigation, writer box, equivalent articles, and comments. I’ve adjusted the identify font and excerpt font inside the example underneath. This example moreover shows the social icons added to the header.
I’ve adjusted the fonts for the navigation, writer box, and equivalent posts. You’ll keep watch over all the portions independently. For the writer box, I’ve adjusted the identify font, body font, and image.
Divi Pixel Social Media
The Divi Pixel Social Media tab permits you to add social media icons to the header. Select which part of the header the icons are added to, and the social networks so that you could upload.
Permit Divi Pixel Social Icons
You’ll allow the social media icons to turn inside the header. This moreover comprises possible choices to keep watch over how they artwork on click on on, for mobile devices, and so on.
The icons are located inside the secondary menu via default.
You’ll moreover keep watch over them inside the theme customizer. Adjust the icon, background, hover, animation, shape, measurement, and so on. 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
Choose from 19 in taste networks. Display them via together with your URL.
Divi Pixel Mobile Tab
The mobile tab comprises breakpoints, fixing the mobile header, hiding the hunt icon, changing the brand on mobile, and so on. This will provide you with numerous keep watch over over the mobile settings. You’ll upload any logo you want.
Mobile Menu
The mobile menu supplies 9 settings that include possible choices for the menus’ animation style. Make a choice from a slider, squeeze, spin, elastic, collapse, stand, spring, minus, and vortex. Simply click on at the simplest you want. It shows an animation on the settings show to get a hold of an idea of how it would artwork on the front end.
You’ll keep watch over all the styling for the hamburger icon inside the theme customizer. Adjust the color, open color, background color, opened background color, border radius, padding, and so on. In this example, it’s using a novel logo, background color, and dropdown menu than the desktop fashion.
Choosing Collapse Submenu Items on Mobiles opens some other new option- Remove Mum or dad Menu Link. This prevents the parent menu links from opening.
Divi Pixel Modules Tab
The Module tab supplies over 40 new modules to the Divi Builder. A couple of of those artwork with the new put up varieties which can also be added via Divi Pixel and accessed inside the WordPress dashboard. You’ll show or quilt they all or allow the appropriate modules you want. We’ll check out a number of the Divi Modules.
Testimonials
Testimonials supplies a brand spanking new put up type where you’ll be capable to create the testimonials for the module to turn. You’ll create them inside the editor or get them from Facebook, Google, and WooCommerce. The editor comprises fields for the identify, content material subject material, image, name, company, internet web page, and score.
The module displays the testimonials and provides many possible choices, at the side of the volume to turn, testimonials to include or exclude, which portions to show or quilt, popup settings, carousel settings, the evaluation type, and additional. All of the standard Divi design possible choices are proper right here as neatly.
Popup Maker
The popup maker uses the Divi Builder to create the layouts. The editor moreover comprises reason settings, popup location possible choices, and customization. This one isn’t a module, on the other hand you’ll be capable to show or quilt it inside the module settings. It’s added to any element with a CSS elegance ID.
The reason settings permit you to make a choice the reason events, close possible choices, and so on.
The location possible choices include the individual roles, internet web page area, and posts that can show the popup. Select put up varieties, specific posts, and exceptions.
The customization possible choices permit you to make a choice the overlay background color, popup animation, position, blur, and additional.
FAQ with Schema Markup
Divi Pixel’s FAQ module is built upon Google’s Structured Knowledge regulations. The FAQ builder uses the antique editor. You’ll create them like each and every content material subject material inside the antique editor and add FAQ categories.
When you’ve built the FAQs, you’ll be capable to display them with the FAQ Module. Show all FAQs or exclude specific FAQs, display via categories, output structured wisdom and HTML, and so on. Style them inside the design tab.
Balloon
The Balloon Module creates a balloon that is made up our minds on as a menu products. Add any content material subject material right through the balloon and style it inside the design tab.
Content material subject material Toggle
The Content material subject material Toggle Module is crowd pleasing. It permits you to specify two layouts and provides a toggle so the individual can switch between them. I’ve specified two layouts. The image underneath shows the principle construction.
Clicking the toggle changes to the second construction, as noticed underneath.
Information Circle
The Information Circle Module is a fascinating strategy to display information and content material subject material. It permits you to add icons or pictures spherical a circle. Create as many devices of knowledge as you want, choose icons and images for every one, and style them together or independently.
Divi Pixel Structure Injector Tab
The construction injector permits you to make a choice a Divi construction and place it in certain puts on the internet web page. Place the construction forward of and after the navigation, footer, and after the blog and archive header. It will moreover assemble a 404 internet web page.
Divi Pixel Supplementary Knowledge
Divi Pixel moreover comprises many demos you’ll be capable to import to get a head get began for your layouts.
Where to Gain Divi Pixel
Divi Pixel is available inside the Divi Market for $169. It comprises countless internet web page usage, a 30-day money-back make sure, and 1 365 days of give a boost to and updates.
Completing Concepts
That’s our check out Divi Pixel. There are numerous choices and modules in this plugin. I’ve perfect scratched the out of doors in this put up. If you want to extend what you’ll be capable to do with Divi, Divi Pixel is an excellent place to start.
We wish to concentrate from you. Have you ever ever tried Divi Pixel? Let us know what you think about it inside the comments.
The put up Divi Product Spotlight: Divi Pixel appeared first on Sublime Issues Weblog.
Contents
- 1 What to Expect from Divi Pixel
- 2 Putting in place Divi Pixel
- 3 Divi Pixel Settings Show
- 4 Divi Pixel Not unusual Tab
- 5 Divi Pixel Blog Tab
- 6 Divi Pixel Social Media
- 7 Divi Pixel Mobile Tab
- 8 Divi Pixel Modules Tab
- 9 Divi Pixel Structure Injector Tab
- 10 Divi Pixel Supplementary Knowledge
- 11 Where to Gain Divi Pixel
- 12 Completing Concepts
- 13 Getting Began with CSS @belongings Rule
- 14 Twenty Twenty-4 Theme Assessment: All of the Options, All of the Information
- 15 WordPress vs Wix (2023) — Which is Right for You?
0 Comments