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 my other blog 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.

Andrej

Andrej is a WordPress developer and blogger from Slovakia. In his free time he likes traveling & cycling. You can find more about him on his blogs http://divitheme.net or https://wpvivo.com (in Spanish & Italian).

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

5 + 9 =

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!

 

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:

Interactive slider with Divi Builder

Interactive slider with Divi Builder

This has been long in the making but finally it is here. The tutorial on how to create an interactive clickable slider with Divi.

Two important notes as a start:

Note 1: This is an intermediate level tutorial. You will need to work a bit with your browser’s developer tools (or the Firebug extension) to check some CSS and you will need to work with CSS. Don’t be afraid, it sounds more scary than it is.

Note 2: This tutorial covers the creation of an interactive slider for the Desktop view only!

It is possible to create interactive sliders that work in Tablet and Phone view as well, but they require much more work. And I personally think that interactive sliders are a pain to use on small screens, so see my recommendation for this at the end of the article. And now let’s get interactive!

The vision

First let’s see what we are going to make. It’s always good to have as clear an idea as possible, that will make work much faster and it eliminates re-work. So this is what we are going to make.

Use the Force...

Click on the posters to learn more!

 

Episode I

The film is set thirty-two years before the original film, and follows Jedi Master Qui-Gon Jinn and his apprentice Obi-Wan Kenobi as they protect Queen Amidala, in hopes of securing a peaceful end to a large-scale interplanetary trade dispute. Joined by Anakin Skywalker—a young slave with unusually strong natural powers of the Force—they simultaneously contend with the mysterious return of the Sith.

 

(Source: wikipedia)

Episode II

The film is set ten years after the events in Star Wars: Episode I – The Phantom Menace. The galaxy is on the brink of civil war. Led by a former Jedi named Count Dooku, thousands of planetary systems threaten to secede from the Galactic Republic. After Senator PadmĂ© Amidala evades assassination, Jedi apprentice Anakin Skywalker becomes her protector, while his mentor Obi-Wan Kenobi investigates the attempt on PadmĂ©’s life. Soon Anakin, PadmĂ©, and Obi-Wan witness the onset of a new threat to the galaxy, the Clone Wars.

 

(Source: wikipedia)

Episode III

The film begins three years after the onset of the Clone Wars. The Jedi Knights are spread across the galaxy, leading a massive war against the Separatists. The Jedi Council dispatches Jedi Master Obi-Wan Kenobi to eliminate the notorious General Grievous, leader of the Separatist Army. Meanwhile, Jedi Knight Anakin Skywalker grows close to Palpatine, the Supreme Chancellor of the Galactic Republic and, unknown to the public, a Sith Lord. Their deepening friendship threatens the Jedi Order, the Republic, and Anakin himself.

 

(Source: wikipedia)

Episode IV

The plot focuses on the Rebel Alliance, led by Princess Leia (Fisher), and its attempt to destroy the Galactic Empire’s space station, the Death Star. This conflict disrupts the isolated life of farmhand Luke Skywalker (Hamill) who inadvertently acquires a pair of droids that possess stolen architectural plans for the Death Star. When the Empire begins a destructive search for the missing droids, Skywalker accompanies Jedi Master Obi-Wan Kenobi (Guinness) on a mission to return the plans to the Rebel Alliance and rescue Leia from her imprisonment by the Empire.

 

(Source: wikipedia)

Episode V

The film is set three years after Star Wars. The Galactic Empire, under the leadership of the villainous Darth Vader and the Emperor, is in pursuit of Luke Skywalker and the rest of the Rebel Alliance. While Vader chases a small band of Luke’s friends—Han Solo, Princess Leia Organa, and others—across the galaxy, Luke studies the Force under Jedi Master Yoda. When Vader captures Luke’s friends, Luke must decide whether to complete his training and become a full Jedi Knight or to confront Vader and save them.

 

(Source: wikipedia)

Episode VI

The Galactic Empire, under the direction of the ruthless Emperor, is constructing a second Death Star in order to crush the Rebel Alliance once and for all. Since the Emperor plans to personally oversee the final stages of its construction, the Rebel Fleet launches a full-scale attack on the Death Star in order to prevent its completion and kill the Emperor, effectively bringing an end to the Empire’s hold over the galaxy. Meanwhile, Luke Skywalker, a Jedi apprentice, struggles to bring Darth Vader, whom he finds out is actually his father Anakin Skywalker and a fallen Jedi, back from the Dark Side of the Force.

 

(Source: wikipedia)

The Story of Darth Vader

Click forward to learn more!

This slider is visible on small screens only.

For the interactive slider please view this on a bigger screen.

 

 

Episode I

The film is set thirty-two years before the original film, and follows Jedi Master Qui-Gon Jinn and his apprentice Obi-Wan Kenobi as they protect Queen Amidala, in hopes of securing a peaceful end to a large-scale interplanetary trade dispute. Joined by Anakin Skywalker—a young slave with unusually strong natural powers of the Force—they simultaneously contend with the mysterious return of the Sith.

 

 

(Source: wikipedia)

Episode II

The film is set ten years after the events in Star Wars: Episode I – The Phantom Menace. The galaxy is on the brink of civil war. Led by a former Jedi named Count Dooku, thousands of planetary systems threaten to secede from the Galactic Republic. After Senator PadmĂ© Amidala evades assassination, Jedi apprentice Anakin Skywalker becomes her protector, while his mentor Obi-Wan Kenobi investigates the attempt on PadmĂ©’s life. Soon Anakin, PadmĂ©, and Obi-Wan witness the onset of a new threat to the galaxy, the Clone Wars.

 

 

(Source: wikipedia)

Episode III

The film begins three years after the onset of the Clone Wars. The Jedi Knights are spread across the galaxy, leading a massive war against the Separatists. The Jedi Council dispatches Jedi Master Obi-Wan Kenobi to eliminate the notorious General Grievous, leader of the Separatist Army. Meanwhile, Jedi Knight Anakin Skywalker grows close to Palpatine, the Supreme Chancellor of the Galactic Republic and, unknown to the public, a Sith Lord. Their deepening friendship threatens the Jedi Order, the Republic, and Anakin himself.

 

 

(Source: wikipedia)

Episode IV

The plot focuses on the Rebel Alliance, led by Princess Leia (Fisher), and its attempt to destroy the Galactic Empire’s space station, the Death Star. This conflict disrupts the isolated life of farmhand Luke Skywalker (Hamill) who inadvertently acquires a pair of droids that possess stolen architectural plans for the Death Star. When the Empire begins a destructive search for the missing droids, Skywalker accompanies Jedi Master Obi-Wan Kenobi (Guinness) on a mission to return the plans to the Rebel Alliance and rescue Leia from her imprisonment by the Empire.

 

 

(Source: wikipedia)

Episode V

The film is set three years after Star Wars. The Galactic Empire, under the leadership of the villainous Darth Vader and the Emperor, is in pursuit of Luke Skywalker and the rest of the Rebel Alliance. While Vader chases a small band of Luke’s friends—Han Solo, Princess Leia Organa, and others—across the galaxy, Luke studies the Force under Jedi Master Yoda. When Vader captures Luke’s friends, Luke must decide whether to complete his training and become a full Jedi Knight or to confront Vader and save them.

 

 

(Source: wikipedia)

Episode VI

The Galactic Empire, under the direction of the ruthless Emperor, is constructing a second Death Star in order to crush the Rebel Alliance once and for all. Since the Emperor plans to personally oversee the final stages of its construction, the Rebel Fleet launches a full-scale attack on the Death Star in order to prevent its completion and kill the Emperor, effectively bringing an end to the Empire’s hold over the galaxy. Meanwhile, Luke Skywalker, a Jedi apprentice, struggles to bring Darth Vader, whom he finds out is actually his father Anakin Skywalker and a fallen Jedi, back from the Dark Side of the Force.

 

 

(Source: wikipedia)

You can find another nice example here, which I built.

The needs

The most important thing you will need is a background image that contains your clickable elements as well. Don’t think of anything fancy, it is basically one big image. Like the one on the right. I did mine 1080 px wide, that should work for most sites. If you want to have a wider slider, then you can make it wider.

 

The trick

Actually there are more tricks to this. 🙂

We are going to use this background image as the background for all slides. (To speed up your work, create one slide to the fullest you can, then copy it as many times as you need. This way you need to set up the background and the rest of the details only once.)

Second trick is, we are going to use the control dots to make it interactive. You know, the little dots that appear at the bottom and show you how many slides there are.

We will need to use the same background image on all slides, because the control dots are rendered only once for the slider. So we cannot have different clickable areas on the different slides. But that’s quite normal.

Setting up

Let’s set up a row with one column and let’s put a slider module in it.

First and foremost, go to the Custom CSS tab and give it a custom CSS ID. (I used sw-slider.) We will need this to be able to refer to this one slider only.

As for the other General Settings:

  • Arrows: Show arrows (later on I usually hide these)
  • Show controls: yes
  • Automatic Animation: no
  • Parallax: no
  • Remove Inner Shadow: as you wish
  • Background image position: Top Center (this will depend on the layout of your slider)
  • Background image size: Actual Size (so that it doesn’t resize with the browser)
  • Disable on: Phone and Tablet

Advanced Design Settings:

For this specific case we need to add a top padding of 300px and a bottom padding of 50px.This again will depend on your specific execution. This moves the text down, so it doesn’t cover the posters.

Add your slides

Add your first slide and set it up. You will need to add the background image for sure. The rest of the settings is up to you.

For this test case I just added a heading, a body text and I left everything as it’s default setting.

Then copy this slide as many times as you need it. In this case it is a total of 7 slides.

Then edit the content of your slides as needed. Remember to leave the background image as it is.

Once this is done, you should have something like the picture on the right. You have all your slides and you can flip through them.

So you have your basic slider.

Time for some CSS magic

This is where it can get confusing. 🙂 I will try to be as detailed as possible.

First we move our control dots to the top center. Remember, this is how we set up our background image as well. So add the below to your theme’s style.css file. (And as of now all code that you see here will go there.)

#sw-slider .et-pb-controllers {
    top: 0;
    width: 100%;
    left: 50%;
    bottom: unset;
    background-color: rgba(255,255,255,0.5) !important;
}

Note: At the end we will remove the background color, now it’s only there so we see what we are doing. 🙂

Use the force…

Now we need to move the control dots into position, to cover the large images.

The first dot is easy. Since I didn’t set up any hot spot for the first slide, we only need to hide the first dot, using this code:

#sw-slider .et-pb-controllers a:nth-child(1) {
    display: none;
}

Notice the ‘nth-child(1)’ in the code? That is how we are going to refer to the specific dots.

For the second dot / hotspot add this as a start, then we take it from there:

#sw-slider .et-pb-controllers a:nth-child(2) {
    position: absolute;
    background-color: rgba(0, 255, 255, 0.5) !important;
    margin: 0;
    padding: 0;
    width: 10px;
    height: 10px;
    top: 0px;
    left: 0px;
}

You should end up with a blue dot somewhere near the middle. (See image on right.)

Stuck somewhere? Get in touch!

11 + 8 =

Inspect

Now right-click on that blue dot and choose Inspect Element (or Inspect Element with Firebug). This will bring up a panel with the code of your site. Go to the CSS values in the inspector panel and start adjusting top, left, width and height until the blue dot covers your first image. (When you have the value highlighted you can use the up / down arrow keys to adjust the value.)

This was easy, right? 🙂

Some thinking and consolidation

Now, before we do any more work, let’s stop and think a bit. As you know, a good programmer is a lazy programmer: he doesn’t want to do anything twice.

So let’s think how we can be lazy.

Our posters on the background image are the same size, right? And their top edge is aligned. And they should have the same color. So if it is all the same, then we don’t need to define this for every dot separately, we can define it once for every dot! Hurray!

Once we define it for all dots, then we can remove the definitions from the second dot. So this is how the full code will look like now:

/* Move the controllers to top center */
#sw-slider .et-pb-controllers {
    top: 0;
    width: 100%;
    left: 50%;
    bottom: unset;
    background-color: rgba(255,255,255,0.5) !important;
}

/* Define common values for hotspots */
#sw-slider .et-pb-controllers a {
    position: absolute;
    background-color: rgba(0, 255, 255, 0.5) !important;
    margin: 0;
    padding: 0;
    width: 100px;
    height: 150px;
    top: 25px;
}

/* Hide first dot */
#sw-slider .et-pb-controllers a:nth-child(1) {
    display: none;
}

/* Adjust position of second dot */
#sw-slider .et-pb-controllers a:nth-child(2) {
    left: -425px;
}

Tinkering

If you made it this far, then the rest of it is a piece of cake. We only need to align the rest of the dots and we are done.

So let’s set up the base for the rest of the dots with this code:

#sw-slider .et-pb-controllers a:nth-child(3) {
    left: 0px;
}
#sw-slider .et-pb-controllers a:nth-child(4) {
    left: 0px;
}
#sw-slider .et-pb-controllers a:nth-child(5) {
    left: 0px;
}
#sw-slider .et-pb-controllers a:nth-child(6) {
    left: 0px;
}
#sw-slider .et-pb-controllers a:nth-child(7) {
    left: 0px;
}

This will give you something like you see on the image in the right. The 2nd dot / hotspot is in place, the rest are stacked on top of each other. Now let’s move those.

Right click on the blue area in the middle and select Inspect Element. In your panel with the CSS code you will see which dot / hotspot you are working with in the ‘a:nth-child(7)’ part. So for me that’s the seventh / last dot this time. Adjust the left value until it covers the last poster. Once you have that value, paste it in your style.css file in the appropriate place:

#sw-slider .et-pb-controllers a:nth-child(7) {
    left: 325px;
}

Do this with the rest of the hotspots.

Sounds like Chinese? Reach out!

7 + 3 =

When you are done with all, then you should have a blue box covering all posters. Like on the image.

Now we’re ready for the cleanup and the finishing touches.

Cleanup

Remember, in the beginning I said we are going to remove some stuff? That comes now. We remove the background color from the #sw-slider .et-pb-controllers section, so that will look like this:

#sw-slider .et-pb-controllers {
    top: 0;
    width: 100%;
    left: 50%;
    bottom: unset;
}

And one more, in the #sw-slider .et-pb-controllers a section. From here we don’t remove the background color, we rather change it to transparent like this:

#sw-slider .et-pb-controllers a {
    position: absolute;
    background-color: rgba(255, 255, 255, 0) !important;
    margin: 0;
    padding: 0;
    width: 100px;
    height: 150px;
    top: 25px;
}

Beautification

This now all looks good and works good. We just don’t know which image is selected. For simplicity, let’s put a white frame around that.

#sw-slider .et-pb-active-control {
    border: 3px solid #ffffff;
}

Maybe you can also hide the arrows in your sidebar settings, to make it look less like a regular slider.

And we are done. 🙂

 

Closing thoughts

This should give you a basic idea on how you can make some cool interactive ‘sliders’ for your website. Of course it is always possible to make them look more funky and more beautiful, the possibilities are infinite: the hotspots don’t need to be all the same size; they don’t need to be all lined up; the inactive hotspots can be shaded; and so on.

In the beginning I noted this will not work on Tablet and Phone view. Depending on the layout of your background / slider it might work on Tablet mode. There is a very low chance for Phone view, plus it is such a small screen, that most of the time it wouldn’t even make sense to have an interactive slider. So what I would do is the following:

Create an interactive slider that works in Desktop view and hide it in Phone view.

Create a separate simpler (possibly non-interactive) slider that looks good in Phone view and hide it in the other views.

For Tablet view decide based on how the original looks on a tablet. Or you can create a Tablet view that looks well on Phone view as well.

This way you will have everything covered.

I hope this tutorial helps you get started on your interactive slider. In case you are stuck, feel free to reach out and I’ll try to help. If you need more help or you would like me to build it for you, get in touch, I’m happy to help out as well.

And if you liked this tutorial, please share with your connections. Maybe it’s useful for them too.

Cheers,
Andras

And here’s the full final CSS code again, for reference:

/* Move the controllers to top center */
#sw-slider .et-pb-controllers {
    top: 0;
    width: 100%;
    left: 50%;
    bottom: unset;
}
/* Define common values for hotspots */
#sw-slider .et-pb-controllers a {
    position: absolute;
    background-color: rgba(0, 255, 255, 0) !important;
    top: 25px;
    width: 100px;
    height: 150px;
    margin: 0;
    padding: 0;
}
/* Hide first dot (Overview) */
#sw-slider .et-pb-controllers a:nth-child(1) {
    display: none;
}
/* Adjust second dot (Episode 1) */
#sw-slider .et-pb-controllers a:nth-child(2) {
    left: -425px;
}
/* Adjust third dot (Episode 2) */
#sw-slider .et-pb-controllers a:nth-child(3) {
    left: -275px;
}
/* Adjust fourth dot (Episode 3) */
#sw-slider .et-pb-controllers a:nth-child(4) {
    left: -125px;
}
/* Adjust fifth dot (Episode 4) */
#sw-slider .et-pb-controllers a:nth-child(5) {
    left: 25px;
}
/* Adjust sixth dot (Episode 5) */
#sw-slider .et-pb-controllers a:nth-child(6) {
    left: 175px;
}
/* Adjust seventh dot (Episode 6) */
#sw-slider .et-pb-controllers a:nth-child(7) {
    left: 325px;
}
/* Adjust selected dot */
#sw-slider .et-pb-active-control {
    border: 3px solid #ffffff;
}

Do you need help?

Reach out!

11 + 13 =

Font Awesome for Divi plugin now supports Extra and the Divi Builder!

The Font Awesome for Divi plugin has been updated! And what an update!!! Font Awesome for Divi Builder 2.2 supports not only the Divi theme, but also the Divi Builder plugin (with any theme) and the Extra theme as well!

(Yes, the plugin has been renamed to TDM: Font Awesome for Divi Builder, as the Divi Builder plugin is the core element of all three items.)

What else do you get with this version?

[Bugfix] No error messages are shown on frontend or backend after first plugin activation (when no data is saved yet)

[Bugfix] Styles are not loaded anymore when Font Awesome is disabled

[Feature] Styles can be loaded when other plugin is used to load Font Awesome

[Feature] You can keep the options when deleting the plugin

Where can I get the Font Awesome for Divi Builder 2.2 plugin?

Go and grab the plugin from the store for free, while stocks last! 🙂

(If you feel generous, you can invite me for a coffee here.)

How do I install the plugin?

Just like any other WordPress plugin.

Method 1: In your WP admin go to Plugins > Add New > Upload > Select the zip file and click the button.

Method 2: Unzip the zip file and copy the contents (including the parent directory) via ftp to your server under ‘wp-content/plugins’.

How do I upgrde from an older version?

Method 1: In your WP admin go to Plugins, delete the old plugin, then add the new plugin. Warning: your settings will not be saved! That feature comes in the new version.

Method 2. Upload the files to your server via ftp and simply override the old files. Your settings will be kept!

Where will I find the settings?

In your WP admin area, either under the menu ‘Divi’ or ‘Extra’, depending on the theme you use. For the Divi Builder plugin it is also under the menu ‘Divi’.

Do you have other information on Font Awesome and Divi?

Yes, here is the list of posts that have to do with Font Awesome and Divi:

Enjoy!

css.php