My thoughts on Gutenberg

My thoughts on Gutenberg

Everyone is talking about the release of WordPress 5.0 and the Gutenberg block editor. You can read my thoughts and my experiment here:

The Switch

 

(I have yet to update this site to WP5. Once I do you’ll hear about it.)

Webshop error

Webshop error

It has been brought to my attention that none of the items in the store can be purchased, the cart remains empty. I do apologize for this inconvenience.

I’m working on resolving the issue, while the site is being moved to a different host in parallel.

Your patience will be rewarded with a prolonged Black Friday sale. 😉

Self hosting option added to FA Icons for Divi

Self hosting option added to FA Icons for Divi

Summer is in full blast, but it looks like the Font Awesome team does not go on vacation. They just delivered 4 new category packs and that also means there is an update for the FA Icons for Divi plugin.

What’s new in FA Icons for Divi 2.8?

Quite a lot, actually.

Obviously it supports the new icon packs. (Check here.)

Beside using the Font Awesome CDN now you also have the option of Self hosting the icons of FA 5 Free. What is self hosting? It means that the icons will be served from the same server as your site, and not from a server that is part of a Content Delivery Network.

In case you use your WordPress dashboard in a different language than English you can now translate the whole plugin, including the labels on the switches through a css file. (If you want your translation to be included in the next version, send it over, and I’ll be happy to add it. You will find my contact on the Help tab.)

I fixed a bug which caused an error when trying to network activate the plugin on a multi-site installation. (Thanks to Stian for reporting this.)

I updated the URLs on the Help tab because they were pointing to already non-existing pages.

The the FA assets were updated in the plugin to make sure you get the latest icons under all circumstances.

I ran some test to make sure that the plugin works with the latest versions of Divi, Extra, and Divi Builder.

New packs in Font Awesome 5.2

Disclaimer

To get all the details of what the plugin does and doesn’t do, please check out the plugin page before making a purchase. This will also help avoid any disappointments and frustrations.

Also the plugin still does not provide a UI for inserting icons into your content, blurbs, etc. To see how you can insert specific icons, please refer to the Examples page of Font Awesome.

 

[Update] FA Icons for Divi

[Update] FA Icons for Divi

Without much fireworks, the plugin now supports Font Awesome version 5.1!

What is new in Font Awesome version 5.1?

  • Travel category pack
  • Design category pack
  • Emoji category pack
  • Commissions and top requests
  • and a bunch of improvements

As for the plugin itself

  • Increased supported Font Awesome 5 version number to v5.1.0
  • Updated Font Awesome assets
  • Updated compatible version numbers

To get all the details of what the plugin does and doesn’t do, please check out the plugin page before making a purchase. This will also help avoid any disappointments and frustrations.

Also the plugin still does not provide a UI for inserting icons into your content, blurbs, etc. To see how you can insert specific icons, please refer to the Examples page of Font Awesome.

And the offer is still on for a couple of days

If you use the below coupon code at checkout then you can get my other plugin, the Divi Builder UI Pro plugin for only half the price! Let’s say, until end of June. 🙂

50offbup

Enjoy summer! Or winter, if you happen to be living on the Southern hemisphere. 😉

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!

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.

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

css.php