FA Icons for Divi Builder 2.5 now supporting Font Awesome 5

FA Icons for Divi Builder 2.5 now supporting Font Awesome 5

Font Awesome has launched version 5. That absolutely called for an update of the FA Icons for Divi Builder plugin!

Due to licensing reasons the plugin had to be renamed but it’s still the same, just better. :o)

The plugin now supports Font Awesome 5 Free, both SVG and Webfonts versions, as well as the good old version 4.7.

The settings page also received a nice facelift and the plugin became multilingual. If you want your translation to be included in the package, just translate is with the help of the included .pot file and send it over to me. I will be happy to include it in the package.

Here’s a rundown of what all is new.

* [Tweak] Renamed the plugin due to licensing reasons (https://fontawesome.com/license)
* [Feature] Added the option to use Font Awesome 5 free (v5.0.8)
* [Feature] Added possibility to translate the plugin and included .pot file
* [i18n] Added Hungarian translation
* [Tweak] Added tabbed options to better separate basic and advanced settings
* [Tweak] Improved the design of the setting page
* [Compatibility] Updated compatible version numbers
* Removed deprecated code
* Bumped version number
* February 13, 2018

Read the plugin details here or go grab it from the store.

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 Breadcrumbs Module for Divi – A Plugin Review

Divi Breadcrumbs Module for Divi – A Plugin Review

First of all I’d like talk about the breadcrumbs a little in general. If you don’t know what website breadcrumbs are, they are links usually located somewhere at the top of the page of a website that show your current location on a certain website. I mean which page you currently are viewing and in which category. For example, if you are viewing an automotive website and you may be viewing particularly the “Opel Corsa” page, the breadcrumbs could be something like this: “Small Cars > German Cars > Opel > Corsa”. As you can see, the breadcrumbs may be useful if you have a website that has many pages. And possibly many categories as well.

“So, when you want to display the breadcrumbs navigation links somewhere on your Divi website, just place there this module and it will do its job.”

The Divi theme (you can read more about Divi on https://wpvivo.com ā€“ just note that it’s in Spanish) doesn’t have the breadcrumbs feature by default. Luckily, there is someone who has developed a premium plugin to add this feature to Divi. The plugin is called Divi Breadcrumbs Module and I will briefly review it in this article.

After activating the plugin in your WordPress admin panel, you will see a new module among your Divi modules options in the Divi Builder settings. This module will be called Divi Breadcrumbs and will be highlighted with the pink color. So you will surely notice it because of this color.
So, when you want to display the breadcrumbs navigation links somewhere on your Divi website, just place there this module and it will do its job. Then in the settings of this module you have some options. For example, you can choose to hide the homepage or the current page breadcrumb. Or, you can insert custom text for the home breadcrumb. And you can also change the separator icon “>>” to something different. You have 12 options there. In the design settings of the module you can customize the colors as well as the fonts sizes of the texts.

In overall, I think this is a pretty good plugin that does a really nice job. And if I had a website with a lot of content and many categories, I would most likely buy this plugin.

You can get a copy of this plugin here and I hope this review will help you.

Do you use breadcrumbs? Or only on certain types of sites? Or you try to avoid them as much as possible? Let me know in the comments below.

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 + 11 =

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
    /* TRUE FULL-WIDTH ROW WITH COLORED COLUMNS */
    /* 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!

 

css.php