Elementor vs Divi: Design Features Comparison

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.

Adding a shape divider in Elementor
Adding a shape divider in Divi

– 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.

ElementorDivi
Icon ProviderFont AwesomeDivi’s native icons, Font Awesome
Background VideosYesYes
Background SlideshowYesNo
Background MaskNoYes
Background PatternNoYes
Shape DividerYesYes
Image MaskingYesNo

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.

– Gradients

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

  • Blur
  • Brightness
  • Contrast
  • Saturation
  • Hue

CSS Filters in Divi

  • Hue
  • Saturation
  • Brightness
  • Contrast
  • Invert
  • Sepia
  • Opacity
  • Blur

– 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).

ElementorDivi
Global ColorsYesYes
GradientsTwo colors onlyMore than two colors
Background OverlayYesYes
Blend ModesYesYes
CSS Filters5 options8 options
Box ShadowYesYes

Typography

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

  • Color
  • Size
  • Weight
  • 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.

ElementorDivi
Global TypographyYesNo
Typography ControlYesYes
Custom FontsYesYes

Layout

– 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

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.

ElementorDivi
Layout CustomizationYesNo
Custom PositioningYesYes
Margin & PaddingYesYes
Z-IndexYesYes
Flexbox AlignmentYesRequires CSS code
Inline PositioningYesRequires CSS code

Responsive Design

– 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.

ElementorDivi
Custom BreakpointsYesNo
Reverse ColumnsYesNo
Show/Hide ElementsYesYes

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:

Elementor:

  • Vertical Motion
  • Horizontal Motion
  • Transparency
  • Scaling Up/Down
  • Rotating
  • Blur

Divi:

  • Vertical Motion
  • Horizontal Motion
  • Fading In/Out
  • Scaling Up/Down
  • Rotating
  • Blur

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).

Elementor:

  • Rotate
  • Offset
  • Scale
  • Flip Horizontal
  • Flip Vertical

Divi:

  • Scale
  • Translate
  • Rotate
  • Skew
  • Origin

– 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.

Elementor:

  • Fade
  • Zoom
  • Bounce
  • Slide
  • Rotate
  • Pulse
  • Rubber band
  • Shake
  • Head shake
  • Swing
  • Tada Wooble
  • Jello

Divi:

  • Fade
  • Slide
  • Bounce
  • Zoom
  • Flip
  • Fold
  • Roll

– Parallax

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
  • Transparency
  • Blur
  • Rotate
  • Scale

– 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.

ElementorDivi
Scrolling EffectsYesYes
Mouse EffectsYesNo
Hover Animation and CSS TransformYesYes
Entrance and Exit AnimationsYesYes
ParallaxYesYes
Sticky EffectsYesYes

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.

How to Disable HTML in WordPress Comments (Without Plugin)

The WordPress commenting feature by default allows you to use some HTML elements within the comments. You may welcome the comments with the HTML element if the elements are used for content with strong importance, or urgency by using the <strong> tag which typically renders the content in bold type, or emphasizes the text using the <i> or <em> tag to turn the text to italics.

Unfortunately, spam comments also love to use HTML elements, especially the hyperlink (<a>) tag to promote their website’s links to increase their page rank, or in the worst case, the link may lead the user to visit a malicious site where they could become victims of cybersecurity attacks.

Disabling the HTML support for Commenting Feature

Now, before you start disabling the HTML support for the comment feature, you may want to back up your site and use a child theme to avoid breaking the parent theme or losing your changes when you update your theme as this tutorial will instruct you to place some custom code in the functions.php file of the theme.

Once you’re ready, navigate to Appearance  Theme File Editor from your WordPress dashboard. Once you’ve arrived at the Edit Themes page, open the functions.php file from the Theme Files list by clicking it. Continue by copying the following code:

add_filter( 'pre_comment_content', 'wp_filter_nohtml_kses' ); 

You can place the custom code in your functions.php file under the PHP tag <?php and outside of any existing function. And once the code is in place, save the changes by clicking the Update File button at the bottom of the page.

Now, your comment section will not show any changes even when they use the HTML tag when they post a comment, which includes the hyperlink tag <a> used for spam links, or text modifiers like <b> or <strong> for Bold and many more.

The Bottom Line

The HTML element in the comment may become helpful if used for the relevant content, however, spam comments also love to use HTML tags to promote their website’s links to increase their page rank, or in the worst case, the link may lead the user to visit a malicious site where they could become victims of cybersecurity attacks.

This article shows you how to disable the HTML elements on WordPress commenting future. And you may want to disable the website field to gain more protection from the spam comment by reading our previous article on How to Remove Website Field from Comment Form in WordPress.

How to Create Table of Contents in WordPress (Without Plugin)

What makes visitors leave a website? Some reasons make users leave a website, or maybe they never return. One of the reasons is when a website doesn’t have helpful navigation. We must understand from the site visitors’ characteristics that they are always in a hurry. So, creating practical navigation is a must. Navigation contributes to user experience; it helps you allow users to access the information they want as quickly as possible by presenting an enjoyable, intuitive layout while increasing ease of use.

Providing a table of contents is one of the ways to make your site have helpful navigation. Creating the table of contents has two purposes for your site as below:

  • It gives the users an overview of your content
  • Allows users to go directly (jump) to a specific part/ section of your content

Gutenberg WordPress editor natively doesn’t have a block to create the table of contents, so you need the help of the WordPress plugin, such as Kadence Blocks, or you can also use the feature of WordPress page builders, such as Elementor. But, using creativity and some tricks, creating a table of contents in WordPress without the help of any third parties is possible.

This article will show you how to create a table of contents in WordPress without the help of any plugins.

TABLE OF CONTENTS

Steps to Create Table of Contents in WordPress (Without Plugin)

Steps 1: Add a New Content or Edit Existing Content (Page or Post)

Go to your Gutenberg WordPress editor; you can add new content or select the existing content (page/ post). In this example, we will edit our blog post.

As you can see from the GIF above, our article is quite long, but there is no table of contents in that article. What we’re going to do here is add a table of contents inside the article.

Step 2: Add a Paragraph Block and List Block

Alright, let’s start to create the table of contents. First, add a Paragraph block. We will use this block to give the title “Table of Contents.” Once you add the text, go to the block settings panel and then edit and style up the text. For your preference, you can see some changes that we applied below:

  • Text: Table of Contents
  • Text Style: Bold
  • Text Color: Blue
  • Text Size: 20 (Medium)

Next, add the List block. The List block you add depends on how many Headings you have or how many parts/sections you want to highlight.

Step 3: Add the Anchor Links

As we mentioned earlier, one of the purposes of the table of contents is to allow users to go directly (jump) to a specific part/ section of your content. To make that happen, you’ll need the help of a WordPress feature called Anchor Links.

A jump link or anchor link is a hyperlink that will jump to another section/area of the page. It could jump to the same page or another page. In this case (table of contents), we will jump the anchor link to the same page.

Go to the block that you want to jump to. Click the block settings panel. Scroll down and click the Advanced tab. On the HTML Anchor field, enter a word or two — without spaces — to make a unique web address just for this block; then, you’ll be able to link directly to this section of your page.

Next, go back to your table of contents section. Select the content that you want to create a link to, highlight the text and then click the Link (🔗) icon. Afterward, type the hashtag (#) followed by an HTML anchor you created above, and then press the Enter button on your keyboard.

That’s it. Now, the table of contents is integrated with the content. You can edit and style up your table of contents if you want to, such as typography, text and background color, etc.

Once everything is done, you can see how it’s worked by updating or publishing your page and then reviewing it on the new tab.

The Bottom Line

The blog aims to get people to visit and stay with the blog post. The table of contents can help you to reach that goal. It will keep visitors to your blog post longer; they can easily digest the content, find everything they want, jump all around, and consume your blog post in their way.

This article shows how you can easily add the table of contents through your WordPress website without the help of a plugin. We recommend adding a table of contents to your site, especially if you have a lengthy article on your blog post.

How to Disable Lazy Load for Specific Image in WordPress

As you might know, by default WordPress loads all images with the lazy load feature enabled (loading="lazy" attribute). Added to the core of WordPress since WordPress 5.5, the lazy load feature helps you improve your WordPress website’s performance by deferring the loading of each picture until your browser viewport reaches the section of the page with that picture.

With the image which is one of the website elements with a big size deferred, the lazy load feature will make your initial page load quite a bit faster. However, when the image is on the above fold, you may want to disable the lazy load on that image as it can delay the Largest Contentful Paint(LCP) and may result in a blank screen when the page is loaded and harm your SEO if the LCP score is too high. The Largest Contentful Paint is one of the three Core Web Vital that represents explicitly how quickly the biggest content is rendered within the viewport.

The above fold is most likely the first viewport the users will see on your site. So, for the above reason, you may want to disable the lazy load on the first large image of your website. In this tutorial, we will show you how to disable the lazy load feature for a specific image in WordPress.

Disable Lazy Load for Specific Image in WordPress with Plugin

To disable lazy load for a specific image, we use the LiteSpeed Cache plugin by LiteSpeed Technologies. With more than 3 Million active installs on wordpress.org, the LiteSpeed Cache plugin is one of the most popular caching plugins at the time of writing. The plugin helps to cache your pages from server-level with Lite Speed Web Server. There are also a lot more features besides caching to improve your website loading speed and help you to get better ranks. And Lazy Load Image Exclude feature is one of the plugin features we can use to disable the lazy load for a specific image on your website.

To disable lazy load for a specific image on your website, first, you need to install and activate the plugin. Once installed, navigate to a new menu the LiteSpeed Chace menu from your WordPress admin dashboard, then head to Page Optimization Media Settings and toggle on the Lazy Load Images setting.

Once enabled, the Lazy Load Images setting will automatically disable the WordPress core Lazy Load (the loading="lazy" attribute) feature and activate the plugin Lazy Load feature (adding data-lazyloaded="1" attribute). Save the setting by clicking on the Save Changes button.

The next step is to copy the URL of the image you want to exclude from the lazy load feature. You can do so by going to the Media Library from your WordPress dashboard and then clicking on the Copy URL to clipboard link from the image section. Or you can just right-click on the image and copy the image address to get the URL.

Once you have the link, continue with the plugin setting by heading to the Media Excludes tab and placing the URL you’ve copied in Lazy Load Image Excludes. As WordPress creates 3 more copy images with different resolutions when you upload an image, you may want to delete the extension of the image from the URL if you want to exclude all of the image copies from the lazy load feature or if you’re not sure which image copy is being lazy loaded. Save the setting by clicking on the Save Changes button and it will automatically remove the domain from the image URL.

Now, your image will not be lazy loaded anymore and it lost its data-lazyloaded="1" attribute.

The Bottom Line

The lazy load feature will make your initial page load quite a bit faster. However, when the image is on the above fold, you may want to disable the lazy load on that image as it can delay the Largest Contentful Paint (LCP) and may result in a blank screen when the page is loaded and harm your SEO. This tutorial shows you how to disable the lazy load feature for a specific image in WordPress.

Even without lazy loading, images are not initially loaded with the highest priority by browsers as they are not render-blocking resources. If you want to disable the lazy load feature completely, you can read our previous article about how to disable lazy load on WordPress.

How to Create Custom Search Results Page in WordPress with Divi

As web designers, we must surely improve user experience. Adding search features is one of the ways to contribute to the user experience. When the users land on your site and want to find specific information or content, they usually go to the search field and type the keyword. The users may leave your site if you don’t provide the search result page properly. This means you will lose potential business possibility or visibility.

In WordPress, the appearance (layout) of the search results page is controlled by a template on the theme you use (the search.php file in most cases). If the default layout doesn’t suit you, you can create a custom template to replace it. If you have no PHP skills, you can use the help of Divi (or other page builder WordPress plugins with a theme builder feature. Such as Elementor and Brizy) to create a custom search results page template on WordPress.

This article will show you how to create a custom search results page in WordPress with Divi. With Divi, creating custom search page results is very easy.

Steps to Create Custom Search Results Page in WordPress with Divi

Step 1: Create a Search Results Page Template

On your WordPress Dashboard, go to Divi -> Theme Builder. We want to create everything from scratch, add a new template by clicking the plus icon (+), and then click Build New Template. On the Template Settings, find the Search Results option and select it. Click Create Template -> Add Custom Body -> Build Custom Body; it brings you to the Divi editor.

Step 2: Add an Archive Title

First, we want to add the title of the search results page. The title will be displayed dynamically. It depends on what keyword users are searching for.

Add a section with a single column, select the Text module and insert the module into the column.

On the text editor field, find the Use Dynamic Content icon by hovering on the text field. Once you see that icon, click on it. Next, please set it to the Post/ Archive Title.

Now, you can edit and style up the title as you prefer.

Step 3: Add a Search Module

Adding a search module to the search results page is optional. Because most websites already have a search feature on the header. So, you can skip this step if you don’t want to add a Search module to your search results page. In this example, we will add a search module to our search results page and give tips on how to customize and style it.

Add a section with a single column, select the Search module and insert the module into the column.

As you can see from the image above, by default, the Search module looks plain and boring. Alright, let’s start solving this thing.

On the Search Settings, go to the Design tab -> Sizing. Set the Width to 50%.

Next, go to the Advanced tab -> Custom CSS. Next, paste the CSS snippet below to the Input Field.

width: calc(100% - 145px);  
border: 3px solid #2C9FC7; 
border-radius: 45px;
padding-left: 35px!important;

Now, we want to customize and style up the Seach module button. Paste the CSS snippet below to the Button field on the Custom CSS.

width: 75px;  
background: #FFFFFF;
border: 3px solid #2C9FC7; 
border-radius: 45px;
margin-left: 15px

Well, now the search module looks way better.

Step 4: Add the Blog Module

Next, it’s time to build the search results page so that when the users come to the search feature and type some keyword, whatever they were looking for, a page will display the results. We will use a Blog module to get a dynamic search results page in Divi.

Add a new section with a single column, select a Blog module and insert the module into the column.

Your posts will be displayed when you’ve added a Blog module. So, make sure that you already have some posts on your site.

On the Blog Settings, go to the Post For Current Page, then enable it by switching the toggle to YES. Enable this option will allow you to display posts for current pages, which will be helpful for archive and index pages. In this example, we want our search results page to contain a maximum of nine posts per page. So, go to the Post Count and then set it to 9.

Next, go to the Design tab -> Layout. On the Layout option, set it to Grid.

That’s it. You can play around with other settings if you want to. Once everything is done, save and publish your template. To see how it worked, go to your site and start to test it.

The Bottom Line

This article shows you how to create a custom search results page in WordPress with Divi. As we mentioned at the beginning of this article, customizing a search results page is one of the ways to ensure a better user experience. So, create a search results page as well as possible, and get potential business possibility and visibility.

How to Allow Users to Sort Posts in Alphabetical Order in Elementor

What should our website have? Some of you maybe will be answering high-quality content, or perhaps you will be answering strong brand identity. Well, those aren’t the wrong answers. But, in our opinion, everything will be useless if a website doesn’t have helpful navigation.

Navigation contributes to user experience; it helps you allow users to access the information they want as quickly as possible by presenting an enjoyable, intuitive layout while increasing ease of use. Providing a feature that allows users to sort contents in alphabetical order is one of the ways for our website to have helpful navigation.

This article will show how to allow users to sort posts alphabetically in Elementor.

Steps to Allow Users to Sort Posts in Alphabetical Order in Elementor

Step 1: Install and Activate JetSmartFilters

Until this article is made, Elementor doesn’t have a feature to sort contents in alphabetical order by default. So, you’ll need the help of a third-party add-on. In this tutorial, we use the Sorting Filter widget by JetSmartFilters add-on.

You can purchase JetSmartFilters for a single plugin or buy a bundle of Crocoblock plugin—download JetSmartFilters on its official website. Please install and activate it once you have downloaded it.

Step 2: Add the Sorting Filter Widget

Go to your Elementor editor. You can create new content or select existing content. In this example, we will create a new page. Alright, let’s get started!

On your WordPress dashboard, go to the Pages -> Add New. Give a title, then click the Edit with Elementor button that will bring you to the Elemento editor.

Select the Sorting Filter widget from the widget panel and then drag and drop it into the canvas area.

Step 3: Edit and Style up the Sorting Filter Widget

We are going to apply some changes to this widget. On the Content settings tab, go to the This filter for option, then set it to Elementor Pro Posts. Once you set the filter to the Elemento Pro Posts, the instruction text will appear. Follow the instruction by copying the text jet-smart-filters query ID that we will use later.

You can also edit the Placeholder if you want to.

Next, we move to the Sorting List settings. By default, you will get four sorting lists. In this example, we only need two sorting lists as below:

  • A – Z
  • Z – A

Here, we removed the unused sorting list and edited the sorting list’s title.

Step 4: Add the Elementor Posts Widget

Please select the Posts widget from the widget panel and then drag and drop them into the canvas area. Please make sure that you already have some posts on your site.

As you can see from the image above, by default, you will get three columns, and six posts per page, and the posts displayed are ordered by date (recent posts).

First, we will change the number of posts per page. On the Layout settings block, go to Post Per Page and set it to 9.

Step 5: Add the Query ID of Posts Widget

Next, we will apply the instruction in Step 3. As we mentioned in Step 3, you need to copy the query ID.

Alright, go to the Query settings block, then find the Query ID option. Paste the query ID that you’ve copied into the Query ID field.

Next, go to the Order by option and set it to Title. Afterward, go to the Order option and select the order to ASC (ascending).

That’s it. Now, you can sort the posts in alphabetical order. You can also add the pagination and edit or style up your page as your preference. To see how it worked, publish your page by clicking the PUBLISH button and test it in the new window.

The Bottom Line

Alphabetical sort is best when you have an enormous amount of data, in this case, posts. This article shows how to allow users to sort posts alphabetically in Elementor. With the help of the Sorting Filter widget by JetSmartFilters, creating sort posts alphabetically is very easy and makes the filtering user oriented.

JetSmartFilters have 17 filtering widgets. Here are some filter types offered by JetSmartFilters.

How to Remove Website Field from Comment Form in WordPress

There may be many times when you expect feedback or a reply from the visitors to your posts, turns out you have to deal with a bunch of spam comments which may lower the quality of your comments section and make your site appear less professional. One of the trademark characteristics of spam comments is irrelevant links. These URLs may lead users to malicious sites where they could become victims of cybersecurity attacks. And for that reason, you may want to remove the website field from the WordPress comment feature.

The default comment setting which you can tweak at Setting Discussion from your WordPress dashboard let you take control of some of the comment systems such as allowing comments on new posts or imposing requirements to fill out a name and email to comment. However, to remove the website field, you may need to use another method which we will show you later.

In this article, we will show you how to remove the website field from commenting feature in two ways:

Removing Website Field from Comment with a WordPress Plugin

Whenever you want to add an additional feature or want to solve some issue on your WordPress site, the first place you may want to try is the WordPress plugin repository (wordpress.org). To remove the website field from your commenting feature, you can check out the Advanced Comment Form plugin by Thomas Maier.

The Advanced Comment Form plugin allows you to remove the website and email field from the comment form and insert custom text before or after the form.

Removing the website field with the plugin is very easy. First, you need to install and activate the plugin. Once activated, navigate to Comment → Comment Form from your WordPress dashboard then continue by activating the remove website field option by ticking the checkbox. Finish by saving the changes by clicking the Save Changes button.

Removing Website Field from Comment Without Plugin

This time, we will show you how to remove the website field from commenting feature without using a plugin. Instead, you will use a custom code to achieve that task. However, before you start, you may want to back up your site and use a child theme to avoid breaking the parent theme or losing your changes when you update your theme.

Once you’re ready, navigate to Appearance  Theme File Editor from your WordPress dashboard. Once you’ve arrived at the Edit Themes page, open the functions.php file from the Theme Files list by clicking it. Continue by copying the following code:

add_filter('comment_form_default_fields', 'website_remove');
  function website_remove($fields)
       {
         if(isset($fields['url']))
         unset($fields['url']);
         return $fields;
       }

You can place the custom code in your functions.php file under the PHP tag <?php and outside of any existing function.

Once the code is in place, save the changes by clicking the Update File button at the bottom of the page.

Now, your comment feature will lose the website field which was the target for spam comments irrelevant and malicious URLs.

The Bottom Line

Unfortunately, not everything goes the way you expected from the commenting feature of WordPress. You may often have to deal with a bunch of spam comments with irrelevant links on your WordPress site instead of the type of comments you expected when you wrote your articles. This article shows you how to remove the Website field from comments. If you want to stop the spam comments, you may want to read the previous article we wrote about how to stop spam comments in WordPress.

How to Add Image Masking in Divi

This may sound cliché, that an image is worth a thousand words. Nevertheless, we have admitted that image has that much power. There are so many ways to create an image more interesting. Masking is one of the methods that we can use to make the image stand out.

In short, image masking uses a shape or object to cut off or hide portions of the image. You can adjust a specific part of your image while leaving the rest untouched. This article will show you how to add an image mask in Divi.

Steps to Add Image Mask in Divi

Step 1: Add New Section

Go to the Divi Builder editor and then create a row with three columns. We want to add the Code module for each column in this example. We prepare the first column for the main image, and for two other columns, we will use them for shapes.

Step 2: Edit and Style up the First Column

Alright, we start with the first column. Add a Code module. On the settings panel, go to the Background block and then add a background image as your preference.

Once you add a background image, go to the Admin Label block, then give it a name for this module. We named it "1st" for this module. Applying the admin label will make it easier when you want to access it on the Layers menu.

Still on the Code module settings panel, go to the Design tab -> Sizing options. Set the Width and Height to 450px.

Now, it’s time to mask the image. Go to the Advanced tab -> Custom CSS. Next, paste the CSS snippet below to the Main Element field.

-webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1MDAgNTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48cGF0aCBkPSJNMjY0LjM1MywzMy42ODFjMTAzLjEwMiwyOC42NDcgMjM0LjQ1NSw4MC42NzEgMjM0LjQ1NSwyMjMuOTYzYzAsMTMzLjk0NSAtMTU3LjA4OSwyMzYuODY3IC0yNTcuMDIyLDIyNS42NjFjLTg3LjU5MywtOS44MjEgLTE0Ny43MzIsLTQ5LjI0NSAtMTgzLjUxNiwtMTE0LjE5Yy0zNy45MzcsLTY4Ljg1NiAtNjcuNjg4LC0xOTYuOTkxIC01My40NTUsLTI1OC44OTFjNy40NTMsLTMyLjQxNSAyMi44NzgsLTU1LjcwMiA0NS42NTYsLTcwLjQ3YzU0LjM2NSwtMzUuMjQ3IDE0MC42NywtMjYuNDE0IDIxMy44ODIsLTYuMDczWiIvPjwvc3ZnPg==");
-webkit-mask-repeat: no-repeat;

Step 3: Edit and Style up the Second Column

Next, we move to the second column. Add the Code module, then go to the settings panel. Afterward, go to the Background block and add a background color of your preference.

Once you add a background color, go to the Admin Label, then give a name for this module. We named it "2nd" for this module.

Next, we want to edit the size of this module. Go to the Design tab -> Sizing options. Set the Width and Height to 145px.

If you want to rotate the shape, you can go to Transform and choose Transform Rotate. In this example, we set 15deg to the first field only.

Now, it’s time to mask the shape. Go to the Advanced tab -> Custom CSS. Next, paste the CSS snippet below to the Main Element field.

-webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAzIDMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+PHBhdGggZD0iTTIuMDY4LDEuMjk3YzAsMC4yMDQgLTAuMDg0LDAuNDA1IC0wLjIyNiwwLjU0OWMtMC4xNDQsMC4xNDIgLTAuMzQ0LDAuMjI4IC0wLjU0NiwwLjIyOGMtMC4yMDUsLTAgLTAuNDA3LC0wLjA4NiAtMC41NDksLTAuMjI4Yy0wLjI4NywtMC4yOTEgLTAuMjg3LC0wLjgwNSAtMCwtMS4wOTVjMC4xNDIsLTAuMTQyIDAuMzQ0LC0wLjIyNSAwLjU0OSwtMC4yMjVjMC4yMDIsMCAwLjQwMiwwLjA4MyAwLjU0NiwwLjIyNWMwLjE0MiwwLjE0NyAwLjIyNiwwLjM0NCAwLjIyNiwwLjU0NiIgc3R5bGU9ImZpbGwtcnVsZTpub256ZXJvOyIvPjwvc3ZnPg==");
-webkit-mask-repeat: repeat;
-webkit-mask-size: 5px;

You can adjust the shape’s position to the main image per your preference. Go to Position. Set to Absolute, edit the Vertical Offset, Horizontal Offset, and Z-Index.

Step 4: Edit and Style up the Third Column

Alright, now we will edit and style up the third column. Add the Code module, then go to the settings panel. Afterward, go to the Background block and add a background color of your preference.

Once you add a background color, go to the Admin Label, then give a name for this module. We named it "3rd" for this module.

Next, we want to edit the size of this module. Go to the Design tab -> Sizing options. Set the Width and Height to 45px.

If you want to rotate the shape, you can go to Transform and choose Transform Rotate. In this example, we set 315deg to the first field only.

Now, it’s time to mask the shape. Go to the Advanced tab -> Custom CSS. Next, paste the CSS snippet below to the Main Element field.

CLIP-PATH: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);

You can adjust the shape’s position to the main image per your preference. Go to Position. Set to Absolute, edit the Vertical Offset, Horizontal Offset, and Z-Index.

If you want to set the position of your image masking to the center of the page, go to the Row Settings -> Design tab -> Spacing. Set 400px of left margin.

That’s it. Don’t forget to click the Save Draft button or Publish button if you want to save or publish your project.

The Bottom Line

This article shows you how to add image masking in Divi without the help of any add-ons. Image masking is impressive; it will make your image look stunning. But keep in mind that not every image is suitable for masking. In some cases, the basic image is much better.

There is actually a simpler solution to add image masking in Divi: using the Divi Pixel plugin. The plugin offers several masking shapes. You can apply a certain masking shape with a single click. No need to deal with CSS code. Here are some masking shapes offered by Divi Pixel.

Where to get Divi Pixel?

You can get it on Divi Marketplace.

9 Free Elementor Template Kits to Download (No Extra Plugin Needed)

Free Elementor Templates Illustration

As you know, there are two ways to start creating a website with Elementor. First, you can start from scratch. Second, you can start from a premade template kit. The first option is the best option if you want to create a website with your own design concept. Although it requires extra effort, creating a website with your own design would be so much satisfying.

Meanwhile, creating a website from a premade template kit is a better option if you run out of design idea. Also, it is a smarter option to get your website done more quickly.

To help getting your website project done more quickly, Elementor offers tens of template kits which you can access via Kit Library (Templates -> Kit Library). If you can’t find a suited template kit for your project, sites like ThemeForest to Creative Market are there to go to.

At WP Pagebuilders, our design team also love playing around with Elementor to create website designs. The following template kits are the outcomes. You can download and use the following Elementor template kits for free. Feel free to modify and tailor them with your needs.

Free Elementor Template Kits to Download

1. Keadilan

Are you looking to create a law website with Elementor? If you plan to start from a template kit, then Keadilan is a perfect option. The template kit is designed specifically for a law website. It comes with the necessary pages you need such as homepage, about page, contact page, and so on. In addition, the template kit includes custom templates for header and footer created with Elementor Theme Builder. That being said, you need to have Elementor Pro installed and activated before importing the template kit.

The Keadilan template kit consists of the following templates. No need to install a third-party add-on to import them.

  • Homepage
  • About page
  • Practice Area page
  • Contact page
  • 404 page
  • Header template
  • Footer template

2. Suara

If you are a podcaster and want to create a website to strengthen your podcasting business brand, Suara is the template kit for you. The template kit is created using all the native Elementor widgets available on the free version and the pro version (read: Elementor Free vs Pro) so that you don’t need to install a third-party Elementor add-on.

You can further develop the Suara template kit to create a self-hosted podcasting platform with WordPress+Elementor. For instance, you can create a custom post type dedicated to accommodating the podcast episodes. If you need to add some custom fields, you can use ACF, JetEngine, or Pods. You can use plugins like Restrict Content to restrict access to your podcast episodes based on certain criteria.

Here are the templates included on the Suara template kit.

  • Homepage
  • About page
  • Podcasts page
  • Contact page
  • 404 page
  • Header template
  • Footer template

3. Digimaru

Do you want to start a new digital marketing agency business? If yes, then creating a website is a must. Digimaru is a great template kit to create a digital marketing agency with Elementor. It has a modern design to impress your aspiring clients.

The template kit is aimed at digital marketing agencies that serve multiple areas, not a specific area (e.g., social media). It comes with page templates for each digital area. From social media, search engine, to email. There are over 10 templates offered by Digimaru in total. All widgets used on each template are available on Elementor Free and Pro. No need to install a third-party add-on.

Here are the templates included in the template kit.

  • Homepage
  • About page
  • Blog page
  • Contact page
  • FAQ page
  • Pricing page
  • Services pages
    • Digital consultancy page
    • Email marketing page
    • Link generation page
    • Search engine marketing
    • Search engine optimization
    • Social media marketing
  • Header template
  • Footer template

4. Samara

Do you have a co-working space business? If yes, it would be a great idea to create a website to make it easy for aspiring users to learn about what your co-working space offers. It has a modern design — with a transparent header that turns into a solid header as the page is scrolled down. Of course, the header template is included in the kit, along with the footer and the core pages.

Same as other template kits above, Samara also uses the native Elementor widgets only. No third-party widgets are involved. The template kit consists of the following templates:

  • Homepage
  • Features page
  • Blog page
  • About page
  • Contact page
  • Header template
  • Footer template

5. Di Natale

In Elementor, you can create a full-screen menu without installing an extra WordPress plugin thanks to its popup builder feature. If you want to create a website that has a full-screen menu, Di Natale is a perfect template kit for you. The full-screen menu, as mentioned, is powered by Elementor Popup Builder.

Di Natale is designed specifically for an Italian restaurant website, but you can modify it to create a website for other restaurant types. In addition to the popup template for the full-screen menu, Di Natale also offers the following templates:

  • Homepage
  • About page
  • Contact page
  • Blog page
  • Header template
  • Footer template

6. My Book

Are you a professional writer and plan to create a website with Elementor to promote your books? If you want to start your website from a premade template, then My Book is a great option for you. Unlike other template kits above, My Book is a template kit to create a one-page website. So, you will only get one page template. Even so, a header template and footer template are included to allow you to create a complete website. The header template comes with a one-page navigation feature to allow your visitors to jump between sections on the page effortlessly.

Includes on the template kit:

  • Homepage
  • Header template
  • Footer template

7. Mobilio

Same as My Book above, Mobilio is also aimed at creating a one-page website. The different is that Mobilio is designed for mobile app. So, if you have a mobile app and want to create a website with Elementor to promote it, Mobilio is a great template kit for you. Although the template kit consists of only one page template, header template and footer template are included in case you want to create a blog page and other pages. The header template also offers a one-page navigation.

Templates included on the Mobilio template kit:

  • Homepage
  • Header template
  • Footer template

8. Panji

Are you a content creator looking to create a website to strengthen your brand? If yes, Panji is a perfect template kit for you, then.

The Panji template kit is designed specifically for content creators who create content for YouTube and other video-based platforms. The template kit has included all the necessary page templates you need such as Contact page to make it easier for aspiring clients to reach you out. A Sponsors page to make it easier for aspiring clients to learn the brands you have worked with, and so on.

Here are the templates included in the kit:

  • Homepage
  • About page
  • Blog page
  • Contact page
  • FAQ page
  • Merch page
  • Platform page
  • Sponsor page
  • Header template
  • Footer template

9. Early

Are a social media influencer or run a firm that manage social media influencers? If yes, then Early is a perfect template kit to start your website. The template kit comes with a modern design to impress your aspiring clients or anyone visiting your website.

The Early template kit, just like other template kits above, is created with Elementor (Free and Pro) only. There are 10 templates included in the kit: 7 page templates and three theme builder templates for the header, footer, and 404 page. Here are the templates included in the kit:

  • Home page
  • Talent page
  • Service page
  • Service detail page
  • Contact page
  • FAQ page
  • About page
  • 404 page
  • Header template
  • Footer template

The Bottom Line

Elementor comes with a number of features to ease your job in creating a website on WordPress. One of which is the ability to create your website from a premade template kit, which can cut off the duration of website creation process.

If you want to create a website from a premade template, you can first go to Kit Library to access the template kits offered by Elementor. If you find no suited option for your project, you can look for some options on ThemeForest or Creative Market. Or you can download the free Elementor template kits created by our team above.

6 Best Landing Page Builder Plugins for WordPress (All-time)

Before we jump into the list section, let’s start with the definition of landing page first. Then, you can decide what required features you need when creating a landing page.

Simply put, a landing page is a web page that is created with a specific purpose. Say you have a blog and want to create a page dedicated to collecting email addresses of your visitors — whereby the page will be boosted via ads. In this case, you need an email subscription form connected to the email marketing service you use.

Another example. Say you have a business that serves digital marketing, and you want to promote your service on Google Ads or Facebook Ads. Before start promoting, it would be much better to create a dedicated page that contains a call-to-action element and the necessary elements such as pricing table, testimonials, and so on.

In WordPress, you can use a landing page builder plugin to make it easier for you to create the landing pages according to your needs. You can definitely use Gutenberg — the default editor of WordPress — to create a landing page. However, landing page builders offer a better editing experience. And most importantly, they offer the necessary elements such as form, call to action, to pricing table.

Here are some of the best landing page builder plugins for WordPress:

Best Landing Page Builder Plugins for WordPress

1. Elementor

Elementor is one of the best options to design a page on WordPress. It has a very intuitive editor that can be used by anyone. Even if you are not a designer or have no design background at all, Elementor can help you create a decent landing page.

While Elementor offers a great editor, what’s more important is that it comes with the necessary elements you need. If you want to create a landing page to collect email addresses, for instance, you can effortlessly add a form element and connect it with a service like MailerLite, Mailchimp, to ConverKit. Want to create a landing page for your digital services? Elementor has elements (called widgets) to add pricing table, call-to-action, and so on. If you have no idea about the design of the landing page, you can start from a pre-made template as Elementor offers hundreds of pre-made landing templates.

Elementor itself is available in two versions: the free version and the pro version. To unlock all the useful features, we recommend using the pro version. Here are some key features offered by Elementor:

  • Visual editor with a responsive editing capability
  • Premade landing page templates
  • 90+ (widgets)
  • Action links
  • Extensive integration with email marketing services
  • Add-on support
  • Custom fonts
  • Custom icons

2. Divi Builder

Divi Builder is the default page builder of the Divi theme. Even so, you can also use it on a non-Divi theme in case you have a favorite WordPress theme. Divi Builder also offers a visual editor to make it easy for you to create the landing page. The editor has a responsive editing feature to allow you to optimize the design of your page on each device type (desktop, tablet, and smartphone). The feature allows you to set different settings on the elements (called modules).

Same as Elementor, Divi Builder also allows you to create a landing page from a pre-made template to streamline your workflow. Divi Builder doesn’t offer as many elements as Elementor, but the necessary elements such as form, call to action, and pricing table are available. It also supports nearly all prominent email marketing plugins and services such as MailPoet, MailerLite, ConvertKit, ActiveCampaign, and so on.

The key features offered by Divi Builder include:

  • Visual editor with a responsive design capability
  • Premade landing page templates
  • 40+ (called modules)
  • Extensive email marketing service integrations
  • Add-on support
  • Custom fonts

3. Breakdance

If you are looking for a landing page builder that has a user-friendly editor, then Breakdance is the one you can consider. Breakdance is developed by the same company as Oxygen Builder, but it has more comprehensive features than its brother. One of the useful features when it comes to landing page building is form builder which you can use to create a wide range of forms, including email subscription form. The form builder feature of Breakdance supports integration with Mailchimp, MailerLite, ConvertKit, ActiveCampaign, etc. Breakdance also comes with a built-in form submission manager.

To allow you to create a responsive landing page, Breakdance also comes with a responsive editing feature. Useful elements such as pricing table, business hours, countdown timer, and progress bar are available. There are over 70 elements offered by Breakdance in total.

The key features offered by Breakdance:

  • Visual editor with a responsive editing capability
  • 70+ design elements
  • Third-party email marketing integration
  • Custom icon

4. Brizy

Brizy is a multi-purpose page builder plugin for WordPress that you can use to create any page, including, of course, landing pages. Brizy comes with a simple, lightweight editor that is extremely easy to use. Even for newbie. The editor also has the responsive editing feature to allow you to optimize your design for every device type. When creating a landing page with Brizy, you can effortlessly add a form and connect it with the email marketing service you use.

Want to display a WooCommerce product on your landing page? Brizy makes it easy for you to do so thanks to its dedicated elements to displaying WooCommerce products (both Elementor and Divi Builder also offer this feature).

Same as Elementor, Brizy is available in a free version and pro version. Using Brizy Pro allows you to unlock all the useful features that Brizy offers.

Key features of Brizy:

  • Visual editor with responsive editing capability
  • 50+ elements
  • Email marketing integration
  • Custom fonts

5. SeedProd

SeedProd is a page builder plugin by Awesome Motive, the company behind popular plugins like WPForms, OptinMonster, Easy Digital Downloads, and so on. You can also use SeedProd to create a landing page on your WordPress. There are some handy features you can make use of, including email marketing service integration. SeedProd allows you to add a form to the landing page you are working on and connect it with services like ConverKit, Aweber, GetResponse, and so on. If you prefer to collect the email addresses on your WordPress dashboard, SeedProd also comes with built-in form submission manager.

Of course, you can also add elements like pricing table and call to action to your page. Furthermore, SeedProd also allows you to display WooCommerce products or blog posts on your landing page.

What about the editor?

SeedProd comes with an intuitive editor just like other plugins above. You can switch between desktop mode and mobile mode upon editing to make sure your page is responsive.

Here are some key features from SeedProd:

  • Visual editor with responsive editing capability
  • 30+ elements
  • Email marketing integration

6. Beaver Builder

If you are looking for a landing page builder that offers extensive email marketing service integration, then Beaver Builder is a great option to go. The plugin supports nearly all prominent email marketing services, including AWeber, Mailchimp, ConverKit, MailerLite, and so on. In addition, Beaver Builder also comes with the necessary plugins to create a landing page such as pricing table, team members, and so on. Adding a call-to-action element is also straightforward thanks to a dedicated call-to-action element. To streamline your workflow, Beaver Builder also offers pre-made landing page templates.

The editor of Beaver Builder also comes with responsive editing capability. Meaning that you can optimize your design for desktop, tablet, and smartphone. Here are some key features offered by Beaver Builder:

  • Visual editor with responsive editing capability
  • Extensive email marketing integration
  • 30+ elements
  • Custom fonts

The Bottom Line

Creating a landing page would be a great idea if you want to run a certain campaign to grow your online business. While Gutenberg is more than enough to create a landing page, you might want to use a page builder instead. Especially if you want to add elements like email subscription form, pricing table, and call to action.

Using a landing page builder is more recommended as it offers a simple solution to fulfill your need. First, you have more options over the design. Second, you can optimize your page design on each device type. Third, you can effortlessly add the necessary elements as we mentioned above. When it comes to landing page building, the necessary elements are:

  • Form (email subscription form in particular)
  • Call to action
  • Pricing table

How to Create Anchor Links in Gutenberg

Let’s say you want to redirect your website visitors from one section to another section of the content on the same page or a specific section of another page. Well, it’s called jump links or anchor links. Maybe you are wondering, “Is it possible to create jump or anchor links only using Gutenberg WordPress editor?”. With Gutenberg WordPress editor, you can easily create anchor links.

This article will show you how to create anchor links in Gutenberg. It might be surprising because we know Gutenberg has flexibility and compatibility issues in designing a website.

How to Create Anchor Links in Gutenberg

1. Anchor Links on the Same Page

A jump link or anchor link is a hyperlink that will jump to another section/area of the page. It could jump to the same page or another page. First, we start by jumping to the same page.

Go to your Gutenberg WordPress editor; you can create new content (post/page) or select existing content.

We will create a link on the text “By setting Z-Index and By creating a pop-up” to jump straight to the tutorial sections.

Now, go to the block that you want to jump to. Click the Block tab settings panel. Scroll down and click Advanced tab. On the HTML Anchor field, enter a word or two — without spaces — to make a unique web address just for this block; then, you’ll be able to link directly to this section of your page.

In this example, we type a “z-index” on the HTML Achor field of the Z-index tutorial section, and for the popup tutorial section, we give a “pop-up” on the HTML Anchor field (see the GIF).

Next, go to the text where you want to create the link. Highlight the text and then click the Link (🔗) icon. Afterward, type the hashtag (#) followed by an HTML anchor you created, and then press the Enter button on your keyboard.

To see how it worked, you can update or publish your page and then preview the page in the new tab.

2. Anchor Links to Another Page

As you can see from the GIF above, it jumps immediately to the tutorials section when you click the link. That hyperlink is on the same page as you’re jumping to. But, as we mentioned earlier, you can create a link on another page that will jump to the same sections we just added as an Anchor link (z-index and popup tutorials).

To get started, you can create new content (page/post) or select existing content.

Next, go to the text you want to link to the section on the previous page where you’ve just created an Anchor link. Highlight the text and then click the Link (🔗) button. To fill the link field, you must go back to the previous web page where you’ve just created an Anchor link and copy the URL. Afterward, paste the URL into the link field, followed by the hashtag (#) and the Anchor link you’ve just created. You can enable the Open in new tab option if you want to.

To see how it worked, you can update or publish your page and then preview the page in the new tab.

The Bottom Line

WordPress is a very popular tool for individuals without coding experience who want to build websites and blogs. The WordPress block editor or the Gutenberg WordPress editor is an interpretation of WordPress itself–simple and easy to use.

This article shows you how to create jump links or anchor links in Gutenberg. We hope this article is helpful for you and improve your skill in web designing.

How to Increase Maximum File Upload Size on WordPress

Have you ever felt that your WordPress upload size limits are too small? Some WordPress websites may have as small as 8 MB or lower for their default upload size limit. Small upload size limits may stop you from uploading large files, plugins, and themes. Particularly when you run a stock photo site or other media-heavy website, and you need to upload big-size media when the max upload limit size is smaller, then it will be an issue for you.

In this article, we will show you how to increase the maximum upload limit size in WordPress in several methods, however, you may want to check your upload limit size first to make sure if it’s enough for your file later.

Find Out the Current Maximum Upload Size of Your WordPress

From the Media Library

The quickest way to check your WordPress site’s current max upload size is by going to Media Library Add New from your WordPress dashboard, and the Maximum Upload File Size value will be displayed on that page.

Using Site Health Tool

Another option to find out your WordPress site’s current max upload size is through the Site Health tool which you can access from the Tool menu on your WordPress dashboard. Introduced in WordPress 5.2, this tool helps you to monitor and give valuable insight into your site’s health on the Status tab and you can find most of your server and WordPress configuration info on the Info tab.

To check the upload limit from the WordPress side, head to the Info tab and toggle open the Media Handling block then you can see the limit on Max size of an uploaded file.

And to check the max upload size limit from the server side, you can toggle open the Server block and find the Upload max filesize to get the information.

How to Increase Maximum File Upload Size on WordPress

Once you find out your site’s current Maximum Upload File Size and you think it’s not enough for your files, then you can try the solutions we will show you in this article.

There are some ways to increase the WordPress maximum upload size limit issue we will cover in this article:

  • Contact your hosting provider
  • Using a WordPress plugin
  • Modifying or creating the PHP.ini file and .user.ini file

Let’s start with the most straightforward way first to address the issue.

Method 1: Contact Your Hosting Provider

Reaching out to your hosting provider for assistance is one of the solutions we recommend. Not only it is one of the quickest ways to solve your issue with the max upload file size limit, but in fact, on the most hosting provider, reaching out to them is the only way to increase it as they configure it on a server level.

For example, at SiteGround the maximum upload file size limit is predefined at 256MB. If you are using a cloud server hosting plan and want to increase that limit, you need to request it from the SiteGround team by posting a support ticket.

Method 2: Using a WordPress Plugin

Another quick and easy method to increase the maximum upload file size limit on your WordPress site is by using a WordPress plugin. For the plugin, we use the Big File Uploads plugin by Infinite Uploads.

Big File Uploads allow you to increase the upload limit and bypass your hosting file size limit by seamlessly uploading the file in multiple smaller chunks from the client side. And you even can set the maximum file size limit for each user role with upload capabilities. The plugin is available for free on wordpress.org.

Once you decided to use the plugin, proceed to install and activate the plugin so you can start uploading big files on your WordPress sites!

To increase the maximum file size limit on your WordPress with the Big File Upload plugin, start by heading to Settings then open up the newly created menu the Big File Uploads menu.

Once you are inside the Big File Uploads page, you can see your default upload limit on the right side of the page, then change it to any size you want in Megabytes (MB) or Gigabytes (GB) format.

If you want to specify the limit for each user role, you can do so by toggling on the Customize by user role option that will bring out all the user role available on your WordPress site, then proceed to modify the limits as you wanted to for each user role.

Method 3: Modifying or Creating the php.ini file and .user.ini file

The last method requires you to have more control of your hosting than basic shared hosting which may prevent you to increase the max limit upload file size from the server side. Users of Virtual Private Server (VPS) or dedicated hosting services for example may have root access to their own virtual space which may give them more administrative access to the server.

There are two ways we will show you to increase the max limit upload from the server side:

  • By modifying the upload limit value on the php.ini file
  • By creating or modifying a .user.ini file

Increase Upload Limit on Main php.ini File

When PHP starts to run, it looks for the php.ini file and then loads it. The php.ini file contains the default configuration for running applications that require PHP. There are also some configurations in that file which we can modify its value to increase the maximum upload file size limit on WordPress.

The location of the main php.ini file varies greatly by the environment you’re running PHP with, so It’s difficult to guess the exact location of the file. To locate the current loaded php.ini file, you can create a .php file with the name phpinfo.php in your web root (public_html in most cases) folder and then load that file on your browser. The content of the PHP file is as follows:

<?php
  phpinfo();
?>

Once you created the file, try to load it on your browser with this URL format www.yourwebsite.com/phpinfo.php. And the information displayed on that page will look like this.

As you can see in the above image, our main php.ini configuration file is located at /opt/alt/php-ffpm74/usr/ folder.

Once you find yours, open the php.ini file to make some adjustments to increase your max upload limit. Find these three configurations then modify their value in this format.

  • memory_limit = 128M
  • post_max_size = 64M
  • upload_max_filesize = 32M

Generally speaking, the memory_limit should be larger than post_max_size and the post_max_size should be larger than upload_max_filesize. You can change the value as you want by following the format above. If you follow our limit value, then your WordPress upload limit will be 32MB.

Increase Upload Limit Using .user.ini File

You can also increase your site’s max limit upload file size by creating or modifying a .user.ini file on your web root (public_html in most cases) folder. A .user.ini file is a file that controls the PHP settings in a single directory. There are only certain directives allowed to use in this file, including the directives to configure the maximum upload limit size. The directives in .user.ini will override the main php.ini configurations, so if you want to give different max limits for each of your websites, feel free to create or modify the .user.ini file on each website web root.

To start increasing your website using a .user.ini file, log in to your hosting control panel then open up the file manager to get inside your website web root folder. Once you are in the folder, create a file and name it .user.ini then add these configurations to the file then save it.

memory_limit = 128M
post_max_size = 64M
upload_max_filesize = 32M

And if there is already a .user.ini file that exists, you just need to edit the file and add the above configuration to the file.

Similar to the php.ini configurations to increase the maximum upload limit, the memory_limit should be larger than post_max_size and the post_max_size should be larger than upload_max_filesize. You can change the value as you want by following the format above. If you follow our limit value, then your WordPress upload limit will be 32MB.

The Bottom Line

Small upload size limits may stop you from uploading large files, plugins, and themes. Particularly when you run a stock photo website or other media-heavy website, and you need to upload big-size media when the max upload limit size is smaller, then it will be an issue for you. Fortunately, there are ways to break that limit. This article shows you how to increase the maximum upload limit size in several ways that may help you solve your issue with the limit.

Pin It on Pinterest

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.