Elementor and Divi are two great tools to create a website with WordPress, especially for those wanting to create a website that focus on design. Be it Elementor or Divi comes with a visual editor to make it easy for you to create pages on your WordPress website.
On the previous article, we have written an article that compare the general features of the two page builders. This time, we will compare the detailed design features offered by both Elementor and Divi.
First thing first. Both Elementor and Divi come with a visual editor whereby you can design your page on. The editor comes with a responsive editing capability. Meaning that you can optimize your design for all device types (desktop, tablet, and smartphone). Be it Elementor or Divi allows you to use different settings (e.g., margin values) for each device type.
The responsive editing capability offered by Elementor and Divi allows you to adopt a mobile-first design approach on your website.
There are tens of design features offered by Elementor and Divi. To make it easy for you to learn the differences, we will divide the comparison into six sections.
Assets and Media
– Icon Library
For some designers, the availability of icons collection is the aspect they consider the most when picking a page builder. In web design, icon has a vital role just like typography.
Since the beginning, Elementor relies on Font Awesome to provide icons collection to users. Although the number of icons is huge enough, they don’t really fulfill the needs of designers. Especially if you want to add thin icons. You need to upgrade to the pro version of Font Awesome to access thin icons and other premium icon sets.
If you have your own icon sets downloaded from Fontello, IcoMoon or Fontastic, Elementor allows you to use them.
What about Divi?
Unlike Elementor, Divi has its own icons collection. To be honest, we have no idea the exact number of icons offered by Divi, but you can easily find thin icons as well as general icons such as social media icons to brand icons.
Recently, Divi has also integrated with Font Awesome. Meaning that you can also add an icon provided by Font Awesome just like on Elementor. In other words, Divi has two icon providers: Divi’s native icon library itself and Font Awesome. Unlike Elementor, Divi doesn’t allow you to upload custom icon set.
– Background Videos
Be it Elementor or Divi allows you to add a video as the background on a section. The different is that Divi doesn’t allow you to add background video from an external source (e.g., YouTube). You can only use video background by uploading the video file in an MP4 format or Webm.
Meanwhile, Elementor allows you to add the background video from a third-party source (YouTube and Vimeo). You can even add a dynamic video using custom fields plugin like ACF or JetEngine.
– Background Slideshow
In addition to video, Elementor also allows you to use slideshow as the background of a section. The same feature is not available in Divi.
When setting up background slideshow, you can add as many images as you want. In order to not interfere the loading speed of your website, Elementor offers lazy load option.
– Background Mask
Divi has a native feature to add a background mask. With the feature, you can add a certain shape to your current background. Be a solid color background, gradient, image, or video. Thanks to the feature, you don’t need upload a transparent, PNG image to add a shape to a background. There are 23 shape options you can choose from.
Here is how the feature works:
What about Elementor?
By far, Elementor has no native background mask feature yet.
– Background Pattern
To further decorate the background of a section, Divi also allows you to add a pattern. Same as mask, pattern also works on solid color background, gradient, image, and video. Divi offers 24 pattern you can choose from.
Elementor has no native feature to add a pattern to a background yet.
– Shape Divider
A shape divider allows you to decorate either the bottom or top area of a section by adding a certain shape. Both Divi and Elementor allows you to add a shape divider to a section.
There are over 20 shape divider options offered by Elementor and Divi. When adding a shape divider in Elementor, you are only provided with the list of the divider names. While in Divi, you are provided with the previews of the dividers.
– Image Masking
In Elementor, you can turn a square or rectangle image into a certain shape thanks to the native image masking feature. There are six default shapes you can choose from: circle, flower, sketch, triangle, blog, hexagon. You can also create a custom shape by creating an SVG image.
Divi has no native image masking feature.
|Icon Provider||Font Awesome||Divi’s native icons, Font Awesome|
Color & Effects
– Global Colors
Global color is a useful feature, especially if you often create websites consisting of a lot of pages. By using a global color, you can change the colors on several elements — be it on the same page or on different pages — with a single click.
Both Elementor and Divi come with global feature. You can read this post to learn how to use global color in Elementor. While for Divi, you can read this post.
If you love playing around with gradients, Divi might be a better suited option. The reason is that Divi allows you to add multiple colors (more than two) two your gradient. The advanced gradient feature of Divi can be used on any element that support gradient. From section background, row background, column background, to button.
The gradient feature of Elementor supports only two colors.
– Background Overlay
When styling up a section or column in Divi, you can add an image as the background. To make the content of the section or column be more visible, you might want to add an overlay.
Elementor has a setting block on the settings panel dedicated to adding a background overlay. You can use whether a solid color or gradient. Divi also allows you to add a background overlay (solid and gradient) just like Elementor.
– Blend Modes
If you often use Photoshop and other image editing tools, you must already be familiar with the term “blend mode”. This feature allows you to mix up two elements to make them blended in the same color tone.
Elementor and Divi come with this type of feature, allowing you to blend two elements into the same color tone. In Elementor, the option to add blend mode is only available on the Heading widget. While on Divi, you can add blend mode on background image, Image module, Text module, and other modules.
– CSS Filters
CSS filters is a feature that allows you to apply certain effects to an image on your design. With the feature, you don’t need to edit your image using Photoshop to add effects like blur, sepia, and so on. Instead, you just need to resize your image and then upload it right away.
In Elementor, you have five CSS filter options. While in Divi, there are 8 CSS filter options you can choose from:
CSS Filters in Elementor
CSS Filters in Divi
– Box Shadow
The image above is an example of box shadow which you can set on Elementor and Divi. Box shadow itself can be added to all elements, be it on Elementor or Divi. From section, column, to widgets (called modules in Divi).
|Gradients||Two colors only||More than two colors|
|CSS Filters||5 options||8 options|
– Global Typography
Global typography is as useful as global color. You will find how useful it is when you create a website that consists of a number of pages. With global typography, you can change the typography settings on many areas with a single click.
Global typography, as well as global color as we have mentioned earlier above, can save you a lot of time in editing your website.
Elementor is a page builder that has this type of feature. Unfortunately, Divi has no such a feature by far.
– Typography Control
The ability to customize a font is the feature you will get from page builder plugins like Elementor and Divi Builder. The live editing feature allows you to see the changes in real-time. In Elementor and Divi, you can customize a font by setting the size, weight, and so on.
The following setting options are available to customize a font in Elementor and Divi:
- Transform (uppercase, lowercase, capitalize)
- Style (normal, italic, oblique)
- Decoration (Underline, overline, line through)
- Line height
- Letter spacing
- Word spacing
Be it on Elementor or Divi, font preview is available to allow you to preview a font family before you use it.
– Custom Fonts
The vast majority of today’s design tools make use of Google Fonts to add font library to their editor. Elementor and Divi are not the exception. In Divi, you have an option to disable Google Fonts to make the font options simplified.
For a certain website project, you might want to use custom fonts instead. Both Elementor and Divi make it possible if you want to use your own font. In Divi, the allowed file types for custom font are TTF and OTF. In Elementor, you can upload TTF, and WOFF.
If you use Adobe Fonts, Elementor supports integration with Adobe Fonts to allow you to use a font from Adobe Fonts without downloading the font file first. Divi doesn’t support integration with Adobe Font. So, you need to download the font file first to use a font from Adobe Fonts.
– Page Layout
In Elementor, before you start to create the design of your page, you can set the page layout first. There are four page layout options you can choose from:
- Default: The default page layout you set from Site Settings
- Elementor Canvas: The blank page layout. Without header and footer
- Elementor Full-width: Similar to Elementor Canvas, but with the header and footer
- Theme: The default page template of your theme
Divi has no setting options to set the page layout from its editor. In Divi, the container (section) is automatically set to full-width. If you want your page to have specific size (e.g., 1200px), you can set the size of the rows (you can set the default width of row via Theme Customizer).
Divi also allows you to create a blank page (no footer and sidebar). However, you need to set it via the Gutenberg settings panel instead of Divi Builder settings panel.
– Custom Positioning
Custom positioning allows you to place an element anywhere on your design. With this feature, you can achieve a certain design layout. Here is the example:
As you can see on the screenshot above. There are five elements surrounding the image on the center area. The layout like the above can be achieved thanks to custom positioning.
Custom positioning works by placing an element based on the vertical and horizontal position of the device screen, not the container. Be it in Elementor or Divi, you can achieve a design layout like the one above.
– Margin & Padding
Margin and padding are the settings feature that you can use to set the space between a certain element and other elements around it. In Elementor and Divi, you can set the margin and padding on all elements. From section, column, to widgets (modules).
Z-index is a CSS property that specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Both Elementor and Divi allows you to set z-index value of an element.
– Flexbox Alignment
Flexbox alignment allows you to align and distribute elements across each column within a section, either vertically or horizontally.
In Elementor, you can set the flexbox alignment from the settings column. There are built-in setting options you can choose from as shown below:
Divi also supports flexbox alignment. However, you need to add certain CSS code, which is troublesome for beginners. Especially for those who don’t have CSS knowledge.
– Inline Positioning
Inline positioning allows you to place two elements inside a column side-by-side. Take a look at the following screenshot.
As you can see, there are two buttons placed side-by-side. These buttons — as well as the image above them — are in the same column. The design layout like the one above can be achieved thanks to the inline positioning feature.
In Elementor, you can effortlessly set an inline positioning of an element as Elementor has a built-in setting option to do so. In Divi, you need to add CSS code to set inline positioning to an element.
|Margin & Padding||Yes||Yes|
|Flexbox Alignment||Yes||Requires CSS code|
|Inline Positioning||Yes||Requires CSS code|
– Custom Breakpoints
The layout of a web page is different on each device. It follows the size of the screen devices.
In Elementor and Divi, you can optimize the layout of your design on three device types (desktop, tablet, and device). What if you want to optimize your design for devices with a specific screen size (e.g., a large screen desktop)?
In Elementor, you can add a custom breakpoint, which is quite useful if you need to optimize your design for a device type that has a specific screen size. After adding a new custom breakpoint, you will have a new device option on the editor to optimize your design on.
Unlike Elementor, Divi has no native feature to add custom breakpoint. You can only optimize your design for the default device types available on the editor: desktop, tablet, and smart phone.
For your information, here are the screen sizes of the device types:
- Widescreen: 2400px
- Desktop: 1209px
- Laptop: 1025px
- Tablet: 881px
- Mobile (smartphone): 360px
– Reverse Columns
When you have a section that consists of two columns (or more), the first column (leftmost) will be placed on the top on mobile device. Take a look at the following animated GIF.
For a certain reason, you might want the second column to be placed on the top. In Elementor, you can achieve it effortlessly thanks to the built-in column reverse feature.
Divi also allows you to set column reverse on a section. However, you need to deal with CSS code.
– Show/Hide Elements
When creating a responsive design with Elementor or Divi, not all elements need to be displayed on mobile device due to the limited area on the screen. Be it Elementor or Divi allows you to hide a certain element (section, column, or widget/module) on specific device types.
Motions and Interactions
– Scrolling Effects
Scrolling effect allow you to add an effect or more to an element based on page scroll. Meaning that the effect will only take place when the page is scrolled down or up. Both Elementor and Divi come with this feature. You can apply the following scrolling effects to your design:
- Vertical Motion
- Horizontal Motion
- Scaling Up/Down
- Vertical Motion
- Horizontal Motion
- Fading In/Out
- Scaling Up/Down
Scrolling effects can be applied to section, column, and widget/module.
– Mouse Effects
Mouse effects allow you to add an extra effect to a certain element on your design whereby the effect takes place based on the movement of the cursor. Elementor comes with this feature while Divi doesn’t have one.
There are two mouse effects you can apply in Elementor: Mouse Track and 3D Tilt
– Hover Animation and CSS Transform
Want to add an effect that only take place on mouse hover?
Elementor and Divi come with built-in hover effects that you can use to apply hover effect to a section, column, and widget/module. You can, for instance, apply different opacity levels to an image on the normal state and hover state. You can also effortlessly add hover effects like shrink, pulse, and so on.
In addition, Elementor and Divi also comes with CSS Transform which you can apply on both states (normal and hover).
- Flip Horizontal
- Flip Vertical
– Entrance and Exit Animations
Entrance and exit animations are standard features available on a page builder. In Elementor, you have over ten entrance and exit animations to choose from. While in Divi, you only have seven options (fade, slide, bounce, zoom, flip, fold, and roll). Be it Elementor or Divi allows you to set the speed of the animation.
- Rubber band
- Head shake
- Tada Wooble
Parallax refers to a background behavior that moves at a slower pace than the foreground. You can apply parallax to a section and column.
Divi offers only one parallax effect, while Elementor offers six parallax effects as follows:
- Vertical scroll
- Horizontal scroll
– Sticky Effects
With sticky effects, you can set an element to always be visible when the page is being scrolled down. The feature is especially useful when creating a custom header using theme builder.
Both Elementor and Divi allow you to add a sticky effect to an element. You can set an element to stick whether to bottom or top. You can also set the offset value for the sticky effect to apply.
|Hover Animation and CSS Transform||Yes||Yes|
|Entrance and Exit Animations||Yes||Yes|
The Bottom Line
Elementor and Divi are great tools to create your WordPress website projects. They allow you to create beautiful websites with less effort thanks to the extensive design features. Be it in Elementor or Divi, you can effortlessly set the padding and margin between elements, set the size, apply animation effects, and so on. All changes are applied in real-time on the editor. What’s more, you can also optimize your design on any device type thanks to responsive editing feature offered by the two.
Before picking which page builder you want to use for your projects, you might want to learn the detailed features offered by the two first.
As you have read above, both Elementor and Divi have the similar design features — with some differences on some details. For instance, Elementor allows you to set global typography setting while Divi don’t. Conversely, Divi allows you to create a multi-color gradient while Elementor only allows you to create a gradient with the maximum of two colors. Whichever the option you eventually choose, make sure they can fulfill your needs to get your projects done.