Unlock the Power of Divi Presets: A Beginner’s Guide

/in
Post Views: 5

Divi is a popular WordPress theme that offers a wide range of customization options for creating beautiful websites. One feature that many Divi users take advantage of is the ability to save and import presets, which can save a lot of time and effort when designing a new website or making changes to an existing one. In this post, we’ll take a look at what Divi presets are, how to use them, and where to find some great ones to use on your own website.

What are Divi Presets?

Divi presets are essentially pre-designed layouts and settings that you can apply to your website to quickly and easily create a specific look and feel. These presets can include anything from the overall design of your website to specific elements, such as the colors, fonts, and spacing. The main benefit of using Divi presets is that they allow you to create a professional-looking website without having to start from scratch or spend a lot of time on design.

How to Use Divi Presets

Using Divi presets is relatively simple and straightforward. First, you’ll need to have the Divi theme installed on your WordPress website. Once you have Divi set up, you can start using presets by going to the Divi Library, which is located in your WordPress dashboard.

To import a preset into your Divi Library, click on the “Import & Export” button at the top of the page. From there, you can upload a preset file (usually in the form of a .json file) and then apply it to your website by clicking on the “Use this Layout” button.

You can also export your own custom presets to share with others, or to use on other websites you manage. To export a preset, go to the Divi Library and click on the “Export & Import” button. Then, select the preset you want to export and click the “Export” button.

Where to Find Divi Presets

There are many places to find Divi presets, both free and paid. Some popular places to find free presets include the Divi Community, Elegant Themes, and various Divi Facebook groups. Paid presets can be found on Divi Marketplace, Themeforest, and other marketplaces.

It’s important to keep in mind that not all Divi presets are created equal, so be sure to read reviews and check out the demos before purchasing or using any preset. Additionally, it’s a good idea to make a backup of your website before applying any presets, just in case something goes wrong.

In conclusion, Divi presets are a great tool for quickly and easily creating a professional-looking website. With just a few clicks, you can apply pre-designed layouts and settings to your website, saving you a lot of time and effort. Be sure to keep in mind that not all Divi presets are created equal, so be sure to read reviews and check out the demos before purchasing or using any preset.

Creating a Custom Module for the Divi Theme in WordPress

/in
Post Views: 1

Creating a custom module for the Divi theme in WordPress can open up a whole new world of possibilities for your website. With Divi’s built-in module system, you can easily add new functionality to your website without having to touch a single line of code. In this blog post, we’ll go over the process of creating a custom Divi module step by step.

Prerequisites

Before you begin, you’ll need to make sure that you have a few things set up:

  • A local development environment for WordPress. You can use something like XAMPP or WAMP to set this up on your local machine.
  • The Divi theme installed on your local WordPress installation.
  • A text editor, such as Notepad++ or Sublime Text, to write your code.

Step 1: Create a new folder

The first step in creating a custom Divi module is to create a new folder in the Divi theme’s “includes/builder/modules” folder. The name of this folder should be the same as the name of your custom module. For example, if you’re creating a custom module called “My Custom Module,” the folder should be named “my-custom-module.”

Step 2: Create the module’s PHP file

Inside the new folder, create a new PHP file. This file should be named the same as the folder, with the “.php” extension added. So, if your folder is named “my-custom-module,” the PHP file should be named “my-custom-module.php.”

Step 3: Define the module’s class

Inside the PHP file, you’ll need to define a new class for your custom module. The class should extend the “ET_Builder_Module” class, and the name of the class should be the same as the name of the folder, with “ET_Builder_Module” added to the end. So, if your folder is named “my-custom-module,” the class should be named “My_Custom_Module_ET_Builder_Module.”

Step 4: Define the module’s properties

Inside the class, you’ll need to define several properties for your custom module. These properties include the module’s name, slug, and options. The name and slug are used to identify the module in the Divi Builder, and the options are used to control how the module behaves and looks.

Step 5: Define the module’s functions

Next, you’ll need to define several functions for your custom module. These functions include the module’s render function, which is used to output the module’s HTML, and the module’s shortcode function, which is used to output the module’s HTML when it’s used in a post or page.

Step 6: Add the module to Divi

The last step is to add the custom module to Divi. To do this, you’ll need to include the custom module’s PHP file in the Divi theme’s functions.php file. You can do this by using the “require_once” function, and passing in the path to the custom module’s PHP file.

Conclusion

Creating a custom module for the Divi theme can be a bit of a complex process, but with the right approach, you can add new functionality to your website without having to touch a single line of code. With Divi’s built-in module system, you can easily create custom modules that look and behave exactly how you want them to.

Keep in mind that, this blog post is a basic guide to creating a custom Divi module, and it may not cover all the possible options and configurations you can use while creating

How to extend number of DIVI columns (more than 6)?

/in , ,
Post Views: 4

Step 01: Include the below CSS to theme options

/* Custom Columns */
.ten-columns .et_pb_module {width: 10%; float: left;}
.nine-columns .et_pb_module {width: 11.11%; float: left;}
.eight-columns .et_pb_module {width: 12.5%; float: left;}
.seven-columns .et_pb_module {width: 14.28%; float: left;}
.six-columns .et_pb_module {width: 16.66%; float: left;}
.five-columns .et_pb_module {width: 20%; float: left;}
.four-columns .et_pb_module {width: 25%; float: left;}
.three-columns .et_pb_module {width: 33.33%; float: left;}
.two-columns .et_pb_module {width: 50%; float: left;}

@media (max-width: 980px){
  .ten-columns .et_pb_module {width: 20%;}
  .nine-columns .et_pb_module {width: 33.3%;}
  .eight-columns .et_pb_module {width: 25%;}
  .seven-columns .et_pb_module {width: 33.33%;}
  .six-columns .et_pb_module {width: 33.3%;}
  .five-columns .et_pb_module {width: 33.3%;}
  .four-columns .et_pb_module {width: 50%;}
  .three-columns .et_pb_module {width: 33.33%;}
  .two-columns .et_pb_module {width: 50%;}
}
 
@media all and (max-width: 767px) {
  .ten-columns .et_pb_module {width: 25%;}
  .nine-columns .et_pb_module {width: 33.33%;}
  .eight-columns .et_pb_module {width: 25%;}
  .seven-columns .et_pb_module {width: 33.33%;}
  .six-columns .et_pb_module {width: 50%;}
  .five-columns .et_pb_module {width: 33.33%;}
  .four-columns .et_pb_module {width: 50%;}
  .three-columns .et_pb_module {width: 33.33%;}
  .two-columns .et_pb_module {width: 50%;}
}

@media only screen and (max-width: 479px) {
  .ten-columns .et_pb_module {width: 50%;}
  .nine-columns .et_pb_module {width: 50%;}
  .eight-columns .et_pb_module {width: 50%;}
  .seven-columns .et_pb_module {width: 50%;}
  .six-columns .et_pb_module {width: 50%;}
  .five-columns .et_pb_module {width: 50%;}
  .four-columns .et_pb_module {width: 100%;}
  .three-columns .et_pb_module {width: 100%;}
  .two-columns .et_pb_module {width: 50%;}
}

Step 02: Add the relevant class to your row, depending on the number of columns needed.

Step 03: Remember to only keep one column in the DIVI row settings and use DIVI modules as columns. That’s it Happy Coding!

How to center a div vertically and horizontally using CSS?

/in , ,
Post Views: 4
Centered DIV element

Please use following method to align any content vertically and horizontally centered..

<title>Vertical and horizontal center align div</title>
<style>
  .container-box {
    background: #efefef;
    max-width: 1080px;
    min-height: 500px;
  }

  .centered-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;     
  }

  .box {
    background: #ccc;
    text-align: center;
    padding: 50px;
  }
</style>
  <div class="container-box centered-div">
    <div class="box">
        This element is horizontally and vertically aligned to center!
    </div>
  </div>
Vertical and horizontal center align div
This element is horizontally and vertically aligned to center!