Divi Product Spotlight: Divi Pixel

by | Jul 16, 2023 | Etcetera | 0 comments

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.

Divi Pixel Product Highlight

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.

Divi Pixel Product Highlight

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

  1. Plugins
  2. Add New
  3. Upload Plugin
  4. Select File
  5. Arrange Now

Installing Divi Pixel

Next, flip at the plugin. Divi Pixel is now in a position to use.

Installing Divi Pixel

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.

Divi Pixel Settings Screen

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.

See also  SE Score Assessment: Characteristic-Wealthy & Inexpensive? (2024)

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.

Particles Background

I’ve added the CSS ID to the section.

Particles Background

Proper right here’s the background with the animated particles enabled.

Particles Background

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.

Maintenance Mode

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.

Maintenance Mode

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.

Allow TTF, OTF, and WOFF Uploads

Custom designed Header and Navigation Varieties

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.

Custom Header and Navigation Styles

Proper right 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 choices to the theme customizer.

Footer Customizations

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.

Footer Customizations

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.

Custom Archive Page Style

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.

Custom Archive Page Style

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.

Custom Archive Page Style

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.

Custom Archive Page Style

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.

See also  What Is Google Lighthouse and How to Use It?

Custom Archive Page Style

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.

Enable Divi Pixel Social Icons

The icons are located inside the secondary menu via default.

Enable Divi Pixel Social Icons

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.

Networks

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.

Divi Pixel Mobile Tab

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.

Mobile Menu

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.

Mobile Menu

Collapse Submenu Items on Mobiles

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.

Collapse Submenu Items on Mobiles

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.

Divi Pixel Modules Tab

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.

Testimonials

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.

Testimonials

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.

See also  Need to Be a Laravel Developer? Right here’s The whole lot You Wish to Know

Popup Maker

The reason settings permit you to make a choice the reason events, close possible choices, and so on.

Popup Maker

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.

Popup Maker

The customization possible choices permit you to make a choice the overlay background color, popup animation, position, blur, and additional.

Popup Maker

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.

FAQ

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.

FAQ

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.

Content Toggle

Clicking the toggle changes to the second construction, as noticed underneath.

Content Toggle

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 Layout Injector Tab

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.

Divi Pixel Supplementary Files

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.

Where to Purchase Divi Pixel

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.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

DON'T LET YOUR WEBSITE GET DESTROYED BY HACKERS!

Get your FREE copy of our Cyber Security for WordPress® whitepaper.

You'll also get exclusive access to discounts that are only found at the bottom of our WP CyberSec whitepaper.

You have Successfully Subscribed!