Close Preloader Screen

This Promo Bar is also part of premade Divi blocks.

Q

Kick Start Divi Sites

With Divi Block

478+ Divi Blocks

To Choose From

F.A.Q.S

Documentation

How to switch a block to light / dark version?
You just have to click the below light / dark button:

How to change the red color scheme for Divi Block?
There’s a color box at bottom right of the builder. Just change it to your desired color scheme:

Why I can't edit / move the blocks around in Divi Block builder?
This is because you’re in page editing mode. You just need to click the below & you can now edit the blocks again:

I'm working on Divi Block Builder half way & wish to continue the next day. How to save current work?
By default, your latest work will be saved on your browser cache. Thus, when you re-open our builder the next day on the same browser, it will automatically load your latest work. But you may also choose to save it for backup purposes & load it later on.

To save your current work, just click the below & it will download a file with extension .diviblock:

And to load your saved work, just click the below & upload the .diviblock file:

How to import the json file exported from Divi Block builder?
After importing json file, it shows success but nothing happen?

If you’re unable to import the json file, check if you have Wordfence plugin installed on your Divi site. If yes, then try to disable it & import the json again.

If you don’t have any plugin installed, then it’s due to your server mod_security. You will have to contact your web host to check their mod_security error log & whitelist the action.

How to know the dimension (width / height) of the images used in Divi Block?
Step 1: Add the below CSS in Divi > Theme Options > Custom CSS:

.et-fb-settings-option-inner-upload--previewable .et-fb-settings-option-input.et-fb-settings-option-upload {
    display: block!important;
    width: 100%!important;
    margin-top: 42px;
}
.et-fb-settings-option-inner-upload--previewable:after {
    margin: 0 0 4px;
    color: #32373c;
    font-size: .875rem;
    font-weight: 600;
    content: 'Image URL';
    position: absolute;
    bottom: 33px;
}

Step 2: Look for your image in the module settings & you will see a new option called Image URL (see screenshot below):


From the image URL, the last 2 values as shown above is the width & height. Take the screenshot for example, the width of the image is 1000px & height is 500px.

What is the font used on the preview site?

Title Font: Poppins
Body Font: Open Sans

Special modules are not working properly. What to do?

Try to disable this option: WP Admin > Divi > Theme Options > General > Performance > Defer jQuery And jQuery Migrate > Disabled

Icons are not showing properly. What to do?

Try to disable this option: WP Admin > Divi > Theme Options > General > Performance > Dynamic Icons > Disabled

Section Heading Styles block doesn't show up. What to do?

For Section Heading Styles block, you will need to use it together with normal page design blocks. It will change all blocks section heading design. Examples of page design blocks are About Us block, Services block, etc.

In other words, Section Heading Styles block only consist of custom CSS to change the section heading design of other blocks.

Try to mix & match it with other page design blocks & preview it & you will see it in action.

My mega menu is not centering. What to do?

The mega menu will be align in the center if the mega menu width is bigger or equal to the width of the menu Row container.

Perhaps on your site, the menu Row is set to have a bigger max-width. For that case, you need to first go to the menu Row Settings & find the value of your max-width. Then, go to the mega menu Section Settings & set the same value for max-width.