Divi Builder UI Plugin Update

Divi Builder UI Plugin Update

Happy to share that the Divi Builder UI plugin has received an update! The Pro version has 4 new settings, plus there are some bugfixes and tweaks.

Head over to the plugin page to check the plugin out, or jump straight to the change log. If you just want to get your hands on it, then click here. 🙂

Oh, and it’s Black Friday at The Divi Magazine as well! 😉 Get 50% off with the code ‘DMBF2017’ until November 30.

My WordCamp 2017 Presentation

My WordCamp 2017 Presentation

In September I attended WordCamp Switzerland in Bern. This time I wasn’t only attending though, but I also had a presentation on “4 Tips For A Safe WordPress And Plugin Update”. It was super exciting to be there, especially because this was my first WordCamp presentation. Hopefully more will come. 🙂

You can watch the video at wordpress.tv or simply below.



What are you doing to have a safe update process? I would love to hear about your ideas.

Divi Builder UI plugin released

Divi Builder UI plugin released

When it comes to work, I’m all about being effective. As effective as possible with as little scrolling and as few clicks as possible.

The design team at Elegant Themes did a great job in designing and further improving on the Divi Builder user interface. It is well organized and quite intuitive. I like working with it in general. And the Visual Builder on the front end was a nice addition recently, however, in most cases I still use the backend with the Divi Builder, it is simply more effective for me.

After working with it for some time – a couple years back – I realized though that there is too much scrolling involved when I need to adjust one thing in a module. So I started thinking and tinkering and wrote about it … But I wanted more!

And at last, all that tinkering resulted in the Divi Builder UI Light | Divi Builder UI Pro plugins, which I am happily releasing today.

You can visit the plugin page to read and see what it does and what are the differences between Light and Pro.

I am very proud of this plugin and I really hope it will reach to popularity of Font Awesome for Divi, which has been downloaded more than a 1500 times so far.

Go ahead and check it out!

Divi Magazine Secured with SSL

Divi Magazine Secured with SSL

Finally I had some time to do this. I moved divi-magazine.com over to a different server and activated SSL/HTTPS. Although it is a self-signed certificate, you can be assured that as of now (actually as of yesterday) you and your data is safe when browsing the Divi Magazine. Hurray! :o)

Full-width row with colored columns with Divi

Full-width row with colored columns with Divi

While I was doing a new website, for one of the pages I wanted to create a nice 2-column design. The main column would be giving a detailed description about a service, the other column would be the “sidebar” outlining the different services in that area.

It’s quite easy to do with the Divi builder, just choose a section, set the gutter, set the background and you are done.

But what happens if you want to have a more complex layout in the main column, for example start with 1 wide column, then have more columns, while the sidebar remains the same and follows the content all the way to the end? And filling the whole width of the screen?

That is where it gets a bit tricky.


Fortunately it is not at all that hard to do and most of it can be done with the settings in the Divi Builder. Only a few lines of CSS is needed, which you can find in the sidebar (step 12) and you will need to paste it into the Divi > Theme Options > General tab > Custom CSS box.

In the sidebar you can read the detailed steps for creating such a layout.

If you don’t want to bother setting it up, then you can simply download 2 free layouts or purchase the full pack of 9 layouts from the store. (More layouts will likely come soon.) Note though, you will still need to manually paste the CSS snippet!!! Otherwise it will not work.

An in any case I suggest to check the video below which walks you through the setup step by step.

You like it? Or you don’t? Let me know about it in the comments below.

Got questions? Leave a comment at the end of the page or write me.

10 + 12 =

This is my short version:

  1. Insert specialty section (1/3 – 2/3)
  2. Insert module in the left column
  3. Insert column and module in right column
  4. Open Specialty Section Settings, Content tab
    1. Set background color (this will be the background color of the wider column)
    2. Set background color of column 1
  5. Open Specialty Section Settings, Design tab
    1. Use custom width: yes
    2. Unit: %
    3. Custom width: 100%
    4. Equalize column heights: yes
    5. Use custom gutter width: yes
    6. Gutter width: 1
    7. Custom padding: 0px 0px 0px 0px
    8. Column 1 padding: 2em 2em 2em 2em
    9. Column 2 padding: 2em 2em 2em 2em
  6. Open Specialty Section Settings, Advanced tab
    1. CSS Class: tdm-full-special-section
    2. Column 1 CSS Class: tdm-full-special-section-sidebar*
    3. Column 2 CSS Class: tdm-full-special-section-main*
      * The sidebar should be the one where you can only insert modules, the main should be the one where you can also insert rows with different layouts
  7. Save & Exit
  8. Open Row Module Settings, Design tab
    1. Custom padding: Top 0px
  9. Save & Exit
  10. Open the settings of the Module in the sidebar column, Design tab
    1. Custom padding: Bottom 1em
  11. Save & Exit
  12. Go to Divi > Theme Options > General tab > Custom CSS box and paste in the code
    /* Make the row really full width */
    .tdm-full-special-section .et_pb_row {
        width: 100% !important;
    /* Adjust sidebar column content for large screens */
    @media screen and (min-width: 981px) {
        /* Content more narrow than sidebar column */
        .tdm-full-special-section-sidebar.narrow .et_pb_module {
            max-width: 300px;
        /* Content floating right, typically when narrow and when on left side */
        .tdm-full-special-section-sidebar.float-right .et_pb_module {
            float: right;

    Notes: if you want to make the content of the sidebar column less wide, add “narrow” in the CSS class field of the sidebar. If you also want to make it stick to the right, then add also “float-right”.

  13. Done

Going Multilingual with Divi

Going Multilingual with Divi

Happy 2017!

If you are running a multilingual site with Divi, then you are going to LOVE THIS piece of news!

The teams of WPML / OnTheGoSystems and Divi / Elegant Themes have been working together hard on making their plugins compatible with eachother. It looks like they have achieved their goal and now you are able to translate the pages built with Divi in a few clicks thanks to WPML.

Check out this short intro video to get into the mood of making your site multilingual. 🙂



When I saw the video I was jumping with joy. A client of mine is running a multilingual site with 7 languages at the moment and getting the content translated was kinda difficult. I still need to test the above, but it looks like a gigantic load has been lifted off of multilingual site owners.

If you want to have a very detailed written tutorial, then you can find one in the WPML Documentation library here.

I am sooooo much looking forward to testing and using this! Thanks WPML and thanks Divi!


4 tips for a safe WordPress update

4 tips for a safe WordPress update

This post is not specifically Divi related, but I believe it touches a topic that might help WordPress users in having less frustration with updates to plugins and WordPress.


Some 6 months ago I joined the support team of Modern Tribe, the creators of The Events Calendar and it’s add-ons. (Best job and team I ever had! I love you guys!) Usually, when a new release comes out (maintenance or major) the number of questions and complaints increases. Sometimes new bugs are discovered and occasionally an update can wreck a website, no matter how thoroughly the QA team tests it before release. These complaints have inspired this post.


Font Awesome for Divi Builder 2.3 released

Font Awesome for Divi Builder 2.3 released

The Font Awesome for Divi Builder plugin received an important update!!!

Font Awesome has changed their apporach in how the icon library can be included with a site – for good. Until now when a new version of the icon library was released you needed to paste a new code into the head of your site. Now this is over. There is one code (you can generate it here) which you never have to change again and you will always receive the latest and greatest of font icon.

Note: you will need to generate your own Font Awesome embed code here! It is not provided by The Divi Maganize.

This change has also been reflected in the Font Awesome for Divi Builder plugin. Activate it, enter the code received from Font Awesome and you are ready to go – for a loooooooong time. 🙂

Also a new feature of the plugin is a dashboard widget where you will receive news about any updates and news from The Divi Magazine.

Head over to the store to grab the new version, or just click this button below: