How To Use Divi Builder In 2022 (Detailed Guide)

How To Use Divi Builder - CurateLabs

You’ve heard of WordPress, and you’ve heard of the multiple themes available on WordPress. With a library of hundreds of themes, WordPress boasts website-building features that are essential for an engaging, interactive, and attractive website. Enter Divi. 

One of the best website-building tools out there, Divi’s drag-and-drop site-building feature is a great way to make a low-code, edit-friendly website in relatively less time than a purely code-based site-builder. 

If you’re looking for a blog that shows you how to use Divi Builder, its advantages, features, and bonus tips on making this site builder more efficient, this is it. 

Why Choose Divi To Create Pages – 5 Superb Advantages

Knowing how to use Divi is incomplete without knowing why Divi is the perfect website builder for you. Here are five of the best advantages Divi brings to the table;

  1. Drag and drop features 

One of the biggest hassles site owners face while building a site from scratch is understanding and using code-heavy website-building tools. While these tools may be preferred by a specific section of the web dev community, they can be very time-consuming. Divi’s drag-and-drop feature allows you to seamlessly integrate Divi’s various elements onto your site without writing lines and lines of code beforehand. This feature also allows you to experiment easily with layouts, widgets, and buttons on your site, where you can quickly move elements around your site according to your needs. 

Divi-Overview
  1. Multiple Customization Options 

With other themes and site builders on WordPress, you’re often limited by the number of customizations you can make to your site in terms of layout, the addition of certain elements, as well as color palettes. With Divi Builder, you can choose from thousands of website features, all fully customizable for a website that is perfect for your brand identity. Let’s take an example – headers and subheaders are an integral part of your site, drawing your audience’s attention to what is essential. Divi lets you customize every aspect of your site’s headers and subheaders, such as font style, font size, alignment, placement, and color. Divi is a master builder for all of your customization needs. 

  1. Real-time edits, undo and redo options 

Need to make a couple of quick fixes on your site, but need a tool that lets you see the changes in real time, not after a 1-hour/24-hour upload period? Divi lets you do exactly that. Instead of having you rely on code-based editing options, you can easily change the elements (such as text, images, and buttons) on your site and see how they would look on your site – a perfect application of What You See Is What You Get (WYSIWYG). With flexible undo and redo options, you can backtrack on any edits you may have made without worrying about messing up the framework of the entire website. 

  1. Built for Responsiveness 

Most users browse websites via their mobile devices. Optimizing your site and its layout for better mobile accessibility is essential for a solid UX. Divi lets you build and optimize a site that is light, fast, and adjusted for layout on mobiles, tablets, and desktop devices. 

  1. Lead Generation Features 

One of the end goals of building a responsive and attractive website is to drive more potential customers and build revenue and brand growth in the long run. Divi’s lead generation features help you integrate your site with your marketing efforts for a seamless pipeline. You can install the Bloom extension and build it on your emailing list. With the Divi Leads extension, you can A/B test your landing pages before a marketing campaign and understand what’s working well and what’s not. Adding CTA buttons and tracking their performance is also an added benefit of building your site on Divi. 

Steps To Use Divi Builder For Your WordPress Website

Now that you know why Divi is the best site-builder for your website, it’s time to take a look at setting up Divi on your WordPress. 

Step no. 1: Install 

The first step to integrating Divi with your WordPress website is to install it. The best part? You can install Divi just like any other plugin from the WordPress library. After purchasing the theme from Elegant Themes, you’ll see that the Divi builder has been downloaded as a compressed file on your device. On your WP dashboard, visit Plugins → Add New → Upload, and select the .zip Divi builder file. Once you open and launch this theme, you will be asked for the credentials to your theme membership. Once you enter these, you’re good to go! 

Divi Builder Install

Step 2: Work on your landing page 

The first thing your audience will notice when they visit your website? The main landing page. Divi comes with a ton of pre-built landing page templates that you can use for an easy start. Select the template you wish to build on using Divi (it can be a pre-made one or simply a blank page) and click on “Use Divi Builder”. You can now change the column layout of the site, switch around the template you wish to use, etc.

Step 3: Edit Text Elements 

This step is particularly crucial if you’re working with a pre-made template. With Divi, you can change the text inside of any of your site’s placeholders without having to manipulate any complex code. First, enable the Visual Builder on Divi by clicking on the purple Visual Builder at the summit of the page. Then, simply click on the text box/text element you wish to add/change the text in and edit away! Once you’ve satisfied, click on ‘Save’ and exit the Visual Builder. 

P.S. – You can adjust text sizes and layouts according to the user’s device. You can customize the size and look of your site text for mobiles, tablets, and desktops using a simple sidebar option. 

Step 4: Edit image sizes 

If you’re building a website that’s optimized for mobiles and tablets, you need to make sure your visual elements are optimized too. Uploading images and other visual elements is the first step in the process. And then, replacing images on the mobile version with an image size that is compatible with phone screens is the second step. 

P.S. – Make sure to check both the height and width of the image you select to upload. 

BONUS – Tips To Make Divi More Efficient 

Once you’ve followed the steps above and set up Divi on your WordPress, here are a few extra tips to help you make the most of the site builder. 

While Divi as a site-builder and theme is a highly-responsive one, making sure you optimize it as much as possible can genuinely add to your website performance and UX.

  1. Opt for the correct hosting service 

It might be cheap to use a one-size-fits-all hosting service for your site, but it can affect your site’s performance and speed. Investing in a hosting service that is built for WordPress sites is the best decision for site success. Alongside a hosting service, make sure you opt for CDN and caching services to make your site ultra-responsive and lag-free. 

  1. Opt for lazy-load 

Another aspect of your site that affects site speed is not opting for lazy-load. Lazy-load is a nifty feature that ensures the images/videos on your site don’t load until the user scrolls to view them. For example, the images at the bottom of your “About Us” section will only load once the user scrolls down to that section of your site. 

  1. Optimize your images and videos 

Tying in tip #2, optimizing your media is a one-time key to a responsive site. Compressing your images before uploading them onto your site with tools such as Imagify, built especially for WordPress. Making your images lighter in size without affecting their quality is what optimization of images is all about.

  1. Compress your text

Also known as GZip compression, text compression is another way to make your Divi site lighter and more responsive across network speeds and devices. What text compression does is it compresses your HTML, CSS, or JS text into a smaller file so that the size of the text sent to your server is not as heavy as the uncompressed text. 

Bottom line: Divi Builder

Divi is a worthwhile investment for anyone looking to build an engaging website with multiple customizations, layout, and theme edit options. Apart from designing your website from scratch, you can also use Divi to edit your current one on WordPress. Apart from the basics, keeping in mind a few optimization tips for Divi is a must-have for any site owner. 


Leave a Comment

Your email address will not be published. Required fields are marked *