One of the most powerful features Divi Pixel has to offer is our custom Divi modules. Divi Pixel comes with 19 fully functional modules which will help you to build more interactive and stunningly beautiful websites – and the best part is that we’re always working on adding more custom modules!
All modules can be individually disabled globally in Divi → Divi Pixel → Modules in case you don’t want to use any of them.
Before & After Slider
The Before & After Slider is a powerful module that comes with the Divi Pixel plugin. It’s great for showcasing work in progress or overall results. Whether you’re a graphic designer who wants to show off your editing skills, or you’re a photographer or makeup artist, you simply add two images to make this work. Users will be able to move a slider to easily compare the before and after images.
Content → Images
In this section you can add the two images: Before Image and After Image. You can also set Alt text for SEO.
Content → Labels
Here you can define and edit the text for the Before and After labels.
The design settings let you customize all the module elements to match your website’s brand and style.
Slider – Customize slider direction (horizontal/vertical), initial position, and colors
Labels – customize label backgrounds, fonts, colors, and style
Overlay – Enable image overlays and define colors.
With the Flip Box module, you can create interactive blurbs with a twist. Reveal additional content on the back of the module on hover. You can add an Icon and/or Image, Title Text, Descriptions, and a Button on both sides independently. This module is great for showcasing your portfolio, services, events, products, and more!
Content → Front Side/Back Side
In this section you can add the Title, Image or Icon, Body Text, and enable/disable the Button on the front and back of the module.
Content → Settings
In this tab you can define the height, animation speed, and content alignment on the front and/or back to either Left, Center, or Right.
Content → Flip Animation
The Flip Animation settings are a core part of this module. Here you can select the animation direction, add 3D Content Effects, or enable a 3D Flipbox Effect.
In the Design Tab you’ll find customization options for all the Flip Box elements, as well as the usual default Divi module settings.
Front Background – Add background color or image to the front
Back Backgound – Add background color or image to the back
Front Image/Icon – Customize the front image or icon
Back Image/Icon – Customize the back image or icon
Front Text – Customize the front text (title & description)
Back Text – Customize the back text (title & description)
Front Button – Customize the front button
Back Button – customize the back button
The Typing Text module allows you to add catchy text animations on your website. You can add animated text as well as non-animated prefix and suffix text – and each of them can be easily customized in the Design tab. Create stunning text effects to make your website more dynamic!
Content → Text
In this section you can manage the text displayed within the module. If you want to type multiple sentences, simply use the pipe “|” character to separate them.
You can also add Prefix Text, Suffix Text, Cursor Text, and switch the Flex Direction to Row or Column.
Content → Typing Settings
Here you’ll find all the core settings for the typing text effect. You can enable the Loop option, Show/Hide Typing Text Cursor, set the animation speed, back speed, and back animation delay.
In the Design Tab you’ll find the customization options for all of the Typing Text module elements, as well as the default Divi module settings.
Text Style – General settings for all texts
Prefix Style – Customize Prefix text
Typing Style – Customize Typing Text style
Suffix Style – Customize Suffix text style
Cursor Style – Customize Cursor style
Easily add Star Ratings to your Divi website! This module is very flexible, and allows you to add and customize star ratings on any page. It comes with plenty of useful settings, like a star rating scale, so you can define your own scale, whether it be 3, 5, 10 or more. It also allows you to add decimal values, switch the Display Type (Block/Inline) and show the rating number. All these elements can be easily customized in the Design tab.
Content → Rating
In this section you can add the Title, Description, Rating Scale, and Rating, select the Display Type (block/inline) and enable/disable the Rating Number. The best part: you can pull the rating scale and the rating dynamically from custom post fields.
In the Design settings you can customize each Star Rating module element.
Text – Customize the Title and Description text.
Star – Customize the Star Rating style – change alignment, size, icon spacing, color and more.
Have you ever wanted to add more than 1 or 2 buttons in a Divi Section? With Divi Pixel it’s now possible! The Button Grid module allows you to add as many buttons as you like in a row or column direction. Each button can be customized independently in the Design tab. But that’s not all. You can also alter the Buttons and plain text. What would normally involve very complicated CSS is now as simple as pie.
In the (main) parent module, you can add Button or Text elements.
Content → Flex Settings
Choose the display direction via the Flex Direction setting. You can display the child items in rows or columns. Here you can also enable flex wrapping.
Content → Button Settings (child module)
This is where you add the Button Text and URL, and select if the link should be opened in the same window or in a new window.
Design → Text Style (child module)
If you choose to display Text in the child module, then the text styles can be customized in the Design/Text Style toggle.
Design → Button Style (child module)
If you choose to display a Button in the child module, then the button styles can be customized in the Design/Button Style toggle.
With Divi Pixel you can easily create beautiful carousel sections in Divi. You can use the default elements, like Icons, Title Text, Descriptions, and Buttons, or you can select Divi Library items to be displayed in the carousel module. This creates virtually unlimited possibilities. In other words, with the Pixel Carousel module you can slide anything!
In the (main) parent module, you can add carousel elements.
Content → Carousel Settings
Carousel Settings allow you to tweak the Number of Columns, Spacing between carousel items, and select effect (Slide/Coverflow).
You can also enable Loop, Autoplay, Navigation, and Pagination, and center the slider. All of these elements can be customized in the Design tab.
Design → Carousel Text
If you use the default item, you can customize the Title Text and the Description Text in the Design/Carousel Text tab.
Design → Carousel Item
In this section, you can customize the Carousel Item’s appearance, and tweak borders and box shadows globally.
Design → Navigation
Here you can customize the navigation by changing the Next and Prev icons, size, spacing, and color.
Design → Pagination
Here you can customize the navigation by changing icons, sizes, spacing, icon colors and backgrounds. You can also select if the navigation should be square or circlular.
Design → Button
If you use the default layout and add buttons, you can customize the button style here.
Content → Content (child module)
Once you add modules to the carousel, you can select if they should be the default items (with icon, title, description and button) or Divi Library Items.
If the Divi Library Item is selected, you can upload any Divi Library item saved to the Divi Library, and display it in the Carousel module.
The Masonry Gallery module allows you to create amazing galleries! Its powerful options make it easy to create beautiful mosaic galleries with lightbox effects. Its advanced design settings allow you to fully style this module to your liking, and to change the thumbnail sizes for super-fast loading.
Content → Images
Gallery Images – Add the gallery images you want to display.
Order By – Select the ordering of the gallery images.
Show Image Title in Lightbox – Enable this option to show the image title in a lightbox when an image is clicked.
Show Image Caption in Lightbox – Enable this option to show the image caption in the lightbox when an image is clicked
Use Responsive Thumbnails – Enable this option to use responsive gallery image thumbnails. This will allow you to choose custom image sizes for desktop, tablet, and mobile thumbnails. You can perfectly match the column width and greatly speed up loading times.
Design → Grid
Columns – Select how many columns the module should display. Use the responsive toggle to display a different amount of columns on desktops, tablets, and mobile.
Gutter – Define the spacing between images.
Show Overflow – Enable this option to show overflow. This is useful if you want to have drop shadows on the images.
Design → Grid Items
Border Options – Customize the gallery items borders.
Box Shadow Options – Customize the gallery item box shadow
With Divi Pixel you can display counters in a more effective and attractive way. This module allows you to easily count numbers, dates, and even posts. You can add prefix and postfix text, as well as format the numbers to show a decimal value. Each Pixel Counter element can be customized in the Design tab. One of the unique options in this module is the Scale Style, which allows you to add a scale to your circular counters.
Content → Text
In this toggle you can add Prefix and Suffix text. Perfect if, for example, you’d like to count currencies, percentages, or anything else that might need a bit more explanation.
Content → Counter
The Counter toggle allows you to define the Counter Type (Number/Circle) and what to Count (Numbers/Dates/Posts). You can also enable Decimal Places and Separators, in case you want to use something different.
Content → Count To
In this toggle you can define the number, date, or select the posts or pages to be counted
Content → Count From
If the Count Numbers setting is selected, you can define the number from which the counter will start counting.
On the Design tab you can customize all of the module elements.
Counter – Set up the animation duration for the counter.
Circle – If Circle style is selected, you can customize it in the Design / Circle toggle. You can change line colors, line width, line cap, and enable the Scale. The number of lines of the scale cannot be changed. This is a limitation in Divi’s core code.
Text – Customize all Counter text (prefix, counter number, and suffix).
Tilt Image is another module that will help you display content on your website in a more interactive and engaging way. This module offers a tilt effect on hover, including a 3D Content Effect which makes the module really stand out! In the module settings, you can add an Image or Icon, Title Text, Description Text, and a Button. Each of these items can be enabled or disabled.
Content → Image
In this section you can add the image or icon for the module.
Content → Tilt Settings
Tilt Settings allow you to customize the tilt effect animation. You can customize Max Tilt Rotation, Tilt Speed, Tilt Perspective, and Tilt Scale. There are also 3 other powerful settings available. You can enable Reverse Direction, use a Glare Effect, and enable the Parallax/3D Pop Out Effect for Tilt Image content.
Content → Overlay Content
In this toggle you can add all the content that will be displayed in the module. Each element can be enabled or disabled individually.
In Design settings you can customize the style of all the different elements in the module.
Overlay – Add an overlay to the Tilt Image to make your text easily readable on any background.
Alignment – Define the Tilt Image content alignment (Left/Center/Right).
Image/Icon – Customize the Image or Icon
Tilt Text – Customize the Title Text and Description Text
Button – customize the Tilt Image Button.
Adding Breadcrumbs to your site will not only improve overall site navigation and the user experience, but it’s also good for SEO. This module allows you to easily include Breadcrumb navigation on any page, and customize it to fit your website’s style and company branding.
Content → Settings
In this section you can Enable Custom Homepage with custom text and link, Enable Homepage Icon, select the Breadcrumb Separator, and enable Schema Markup.
In the Design settings you can customize each breadcrumb element.
Home Icon – Customize the Home Icon color (default/hover/active) and size.
Item Style – Customize the breadcrumb style. You can tweak the font, color, box background, padding, border, box shadow, and more.
Active Item Style – Customize the active breadcrumb style.
Hover Item Style – Customize the Breadcrumb style on hover.
Separator – Customize the Breadcrumb separator.
The Floating Images module is an advanced module that will add some movement to your website. It allows you to add multiple images with animations, and each image has its own settings for position and animation. This module is responsive and looks great on all devices.
In the (main) parent module you can add images as child modules.
Content → Settings
In this toggle, you can define the module’s total height.
Content → Image Position (child module)
In this toggle you can set the position of the image.
Content → Animation (child module)
Here you can define the image animation (Up-Down/Left-Right), the animation interval delay, and the animation speed.
This is the most advanced module in Divi Pixel, and the first module of its kind available to the Divi community. Our Testimonial Slider integrates with Facebook and Google pages. All you need to do is to add page ID’s and access credentials for your Facebook and Google pages, and fetched testimonials can be easily displayed as a slider. You can also add testimonials manually, and display WooCommerce testimonials. This module is highly customizable, and allows you to style the testimonials displayed on your site in a very accessible and intuitive way.
Content → Testimonial Settings
In this section you can set the following settings:
Total Testimonial – The number of testimonials displayed within the module.
Hide specific elements – Image, name, review text, company name, and rating.
Testimonial Length – Set the number of testimonial words displayed.
Display by Review Type – Select what types of testimonials will be displayed in the Testimonials module.
Display by Categories – Categorize testimonials and display testimonials from only specific categories.
Content → Carousel Settings
In this section you can customize these slider settings:
Number of Columns – Define the number of columns for desktop, tablet, and mobile.
Spacing – Set the spacing between testimonial boxes.
Effect – Select the default grid slider or Coverflow effect.
Rotate – Set the angle for Coverflow 3D effects.
Slide Shadow – Enable or disable slide testimonials shadow.
Transition Duration – Set transition duration for the slider.
Loop – Enable testimonial looping.
Autoplay – Enable Autoplay for the Testimonial Slider.
Navigation – Enable or disable arrow navigation for the slider.
Pagination – Enable or disable pagination navigation.
Centered – Center the carousel slider.
Design → Testimonial Item
In this section you can customize the look of a single testimonial box. You can select text alignment, slide box shadow for the Coverflow 3D effect, set padding, and background color/gradient and image.
Design → Image
In this tab you can customize testimonial profile images.
Design → Rating
Here you can customize the appearance of star ratings if enabled by changing the color, size, and star spacing.
Design → Testimonial Text
In this tab you can customize the testimonial’s text: name, review text, and company.
Design → Navigation
In the Navigation tab you can customize the arrow navigation by changing the icon, icon size, position, make it boxed or circular, tweak the icon box padding, and more.
Design → Pagination
In the Pagination section you can customize the dot navigation position and colors for active and inactive dots.
Integrate Facebook Reviews
The Testimonial Slider module allows you to display Facebook and Google reviews by adding access credentials for each to make them work.
For Facebook integration, you need to add a Facebook Page ID and Access Token.
You can find out how to get a Facebook page ID here.
The Access Token can be generated here.
All access credentials should be added under Divi → Divi Pixel → Settings
The Price List module has been developed to help you easily display price lists on Divi websites. This module is a great addition for restaurants, cafes, and bistro websites (and many more) as it can be used for displaying any items where a list view is required. You can add an item image, title, price, and description. Each element can be fully customized to fit your company’s brand, color scheme, and style.
In the main Content tab you can add price list items as child modules.
Design → Layout
In this tab you can control the Price List title and Image alignment. For these elements, the following settings are available:
Center – Define the number of columns for desktop, tablet, and mobile.
Flex Start – Set the spacing between testimonial boxes.
Flex End – Select the default grid slider or Coverflow effect.
Baseline – Set the angle for Coverflow 3D effects.
Design → Image
In this section you can customize the price list item images. You can set image spacing, image width, add rounded corners, borders, and shadows.
Design → Separator
The Price List module allows you to use separators between the Title and Price. This separator can be customized by selecting the separator style, weight, color, and spacing.
Design → Text
In this tab you can customize the Price List text: title, description text, and price.
The Image Hotspot module allows for easily creating an interactive image. You can select a background image, and place multiple hotspots on it, such that on hover, a tooltip box appears with additional details. You can use default items for the tooltip box, or Divi Library items. Default item features include image/icon, title, description, and button, and each of these elements is fully customizable.
In the main Content tab you can add price list items as a child modules.
Hotspot Settings → Content → Hotspot
Each hotspot has separate settings. In the Hotspot tab, you can add the hotspot label and choose an icon or image.
Hotspot Settings → Content → Tooltip
In this section you can choose to display default tooltip elements or Divi Library items. If you select Default Content Type, you can add tooltip images or icons, titles, descriptions, and buttons.
Hotspot Settings → Settings
In this section you will find the following positioning and sizing settings:
Hotspot Position Vertical
Hotspot Position Horizontal
Tooltip Position – Left, Right, Top, Bottom
Tooltip Content Alignment
Use Tooltip Arrow
Hotspot Settings → Design → Hotspot
In this tab you can customize the tooltip icon or image by making it circular, adding borders and shadows, changing the colors, and selecting the hotspot icon/image size.
Hotspot Settings → Design → Hotspot Ripple Effect
To make hotspots even more interactive, we’ve added a Ripple Effect, which can be enabled or disabled. If enabled, you can control the pulsing effect color.
Hotspot Settings → Design → Tooltip Image
This section allows you to customize the tooltip image. You can define the image size, add rounded corners, borders, and image shadows.
Hotspot Settings → Design → Tooltip Box
In this tab, you can customize the tooltip box appearance and change the background color, add tooltip box padding, rounded corners, borders, and box shadows.
Hotspot Settings → Design → Tooltip Text
In this tab you can customize the Tooltip text: title and description.
Hotspot Settings → Design → Tooltip Button
By enabling this button in the tooltip, you can customize it in the Tooltip Button section, where all the default Divi button customization options are available.
Content → Date
In this tab you have 3 options to select:
Current Time + Offset
Content → Style
In this section you can select the countdown clock style. There are 3 styles available:
Design → Clock Text
In this tab you can customize the countdown module Clock and Label text.
Design → Clock
This section allows customizing the clock style. You can choose which elements will be displayed (weeks, days, hours, minutes, or seconds). You can also select the label position, change the clock colors, width, height, and set the Face Clock margins.
Lables Position – Above/Below
Top Face Top Border Color
Top Face Bottom Border Color
Bottom Face Top Border Color
Bottom Face Bottom Border Color
The Pixel Hover Box module has been developed to dynamically display your content with an attention-grabbing presentation. You can add default and hover elements in the module settings, so the card will display different content on mouseover. You can add Images/Icons, Titles, Descriptions, and Buttons for both the default and hover states, and display hover content with a silky-smooth animation. The module comes with 6 animations, so you can be assured that there will be a style that will meet your needs.
In the Content tab you can add Default/Hover content, select animation style and speed, define the content alignment for both cards, and set the Box Height.
Content → Default Blurb
In this section you can add the content that will be displayed by default.
Content → Hover Blurb
In this tab you can add the content that will be displayed on mouseover.
Content → Settings
In the Settings tab, you can select Hover Animation, Speed, Content Alignment, and Box Height.
Slide – Bottom to Top, Top to Bottom, Left to Right, Right to Left
Content Align/Hover Content Align: Top Left, Center Top, Top Right, Left, Center, Right, Bottom Left, Center Bottom, Bottom Right
Design → Content Background
In Content Background you can set the default blurb background adding solid color, gradient, or an image.
Design → Hover Background
In the Hover Background tab you can set the background for the hover blurb, and add solid colors, gradients, or images.
Content → Image & Icon
The Content Image & Icon tab allows the customization of the icon or image selected for the default blurb, allowing tweaking of borders, and adding shadows.
Content → Hover Image & Icon
The Hover Image & Icon tab allows customizing of the icon or image selected for the default blurb. You can tweak borders, and add shadows.
Content → Content Text
In this tab you can customize the title and description text.
Content → Hover Text
In this tab you can customize the title and description text on the hover card.
Content → Hover Button
In this section you can style the button on the hover card.
Blog Slider module is a perfect way to showcase your blog posts in a sliding form. You can customize a number of columns that will be displayed for desktops, tablets and mobiles. The module offers many customization options. We can select what elements in the blog post box will be displayed and what not. We can add a nice hover animation for the blog post image, customize navigation, date ribbon, read more button, all texts and more!
In the Content tab, we can select how many posts will be displayed, select categories and control if the excerpt text should be displayed. If it’s enabled, we can also define how long excerpt text should be.
Content → Elements
In Elements tab we can select what elements will be displayed for our slider blog posts. We can Enable/Disable the following elements:
Define Featured Image Height
Read More Button
Content → Slider Settings
In this tab we can customize how our Blog Slider will look like. We can select columns for desktops, tablets and mobiles, define spacing between blog post boxes, select effect, enable navigation and more. Here is a list of all available options:
Number of Columns
Pause on Hover
Design → Image
In Design tab tab we will find 7 custom tabs with options that will help us customize the design of our Blog Slider module. First tab is an Image. We can select image animation on hover and add image overlay background for the default and hover state.
Design → Blog Item
Blog Item tab allows us to customize the look of our single blog post box. We can add background, border and box shadow.
Design → Blog Texts
In Blog Texts we have tabbed area with text customization options for title, description, category and author.
Design → Blog Date
The Pixel Blog Slider offers custom design. We have separated date from meta text and placed it in the right corner. We can display square or circle ribbon with date. We can also change spcaing, date fonts and ribbon colors.
Design → Navigation
If we enable Arrow Navigation for our Blog Slider, then we can customize its look in Design/Navigation tab. We can select icons for left and right arrow, tweak positioning, define icon size, colors, make the arrows circle and tweak spacing.
Design → Pagination
In Pagination tab we can select color for active and not active pagination bullets. We can also tweak Pagination Navigation position.
Design → Read More
In Read More tab we can enable custom style for our Read More button where all default Divi button customization options are available. Additionaly, as all other elements, we have added options for position, so the button can be aligned to the left, center or right.
The Fancy Text module allows you creating animated headings by using texts that change with a nice animation. You can take any text and rotate it with different phrases so you can create attractive headings for your Divi site. The module allows adding as many texts as you want and style them independently. You can also select animations IN and OUT for how the texts come in and how they go out.
In the Content tab, we can add child modules with each text phrase we want to display within the module.
Content → Text
The Fancy Text module allows adding a prefix and suffix text in addition to our animated texts. You can also select if those texts will be displayed horizontally or vertically.
Content → Animation
In this tab, you can select what animation you want to use. You can apply different settings for Animation In and Out and also define Delay and Animation Duration.
Design → Text
Here you can customize each child module text independently. You can change text font, color, size, letter spacing, add text-shadow and more!
Accordion Image module is another module that will help you display the image galleries with content in a nice and interactive way. You can add icon, title, description and button to each image added and reveal that content on hover or after the image is clicked. The module allows adding image overlay for default state and on hover which makes it, even more, user friendly. It’s a great addition to any website that utilizes images, so rather than displaying static images, we can show them in a nice accordion-style section.
In the Content tab, we can add child modules with images we want to display within the module.
Content → Settings
In this tab, we have several options for our Accordion Module. We can select when each image will reveal content (On Click or On Hover), define Accordion Direction for each device (Horizontal or Vertical, and control height of our module.
Child Module → Content → Background Image
Each child theme module features Background Image upload field where we can add image for our Accordion Module.
Child Module → Content → Accordion
Here we can customize each child module content independently. We can add an icon, title text, description and button. We can also select tab to be active/opened on load.
Child Module → Design → Image Overlay
In this tab, we can add Image Overlay for our image. It also supports hover state, so if we select to open tabs on click, it’s a great idea to add hover overlay to let users know there is something else to see.
Child Module → Design → Accordion Image/Icon
Customize image or icon. Define width, select icon color, display circle icon, add a border and select icon size.
Child Module → Design → Accordion Text
This tab is divided into 2 sections where we can style our title and description text.
Child Module → Design → Button
Customize Accordion Image Button – select colors, font, size etc.