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.

1 + 13 =

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!

 

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.

Prologue

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.

(more…)

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:

css.php