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:

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

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!

13 + 1 =

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!

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

Font Awesome for Divi 2.1 update

The Font Awesome for Divi plugin has been updated to include version 4.5.0 of the icon library.

Now you can use cool icons like and some more.

Don’t be an ! Hop to the store and put the plugin in your .

I won’t be asking for your because the plugin is for free. Don’t there, grab some other goodies as well.

Upload the plugin to your WordPress site and you are ready to go. It works in all major browswers, even in .

And if you like it then about it. Or you can invite me for a . 🙂

Divi Builder Admin UI revisited

Happy 2016 to everyone! Hope you all had happy holidays with lots of joy and good food. I’m still trying to recover, so I’m taking it easy. 🙂 This gave me some time to re-check how the admin UI of the “new” Divi can be improved.

A lot has changed since February 2015, when I posted the first article on this topic, which was still done pre Divi 2.4. Since then we have a more enhanced Divi with more options, more user-friendlyness and more of everything, thanks to the dedication of ET. And we also have the amazing Divi Builder plugin which you can use with any theme you want, and we have the Extra theme, which is also based on the Divi Builder. (Thanks guys! You are the best!!!)

And this brings us to the first big improvement of this trick: it WORKS WITH ALL THREE: the Divi Builder, the Divi theme and the Extra theme. Updated to Divi 2.6.x.

The UI of the Divi Builder also has changed dramatically to its advantage. But for me there was still some “room for improvement”. 🙂 I’m always looking for ways to optimize things that make work (or fun) easier whether it’s less clicks, less scrolling or more data on the screen. So read on to find out how you can have a Divi user interface that makes your work faster.

(more…)

More Font Awesome icons in a blurb

To follow up last weeks post about using Font Awesome icons for a blurb instead of the built in Elegant Font icons, and as promised, here is what you can do to make it easier, faster and using less code and clicking to use them in blurbs all over your site.

Note 1: This post is not about using more than 1 icon in one blurb! Why would you anyway, right? 🙂

Note 2, to set the expectations: This solution needs some very minor technical experience (basically search and copy-paste). The solution IS simple, however it does not provide a super-simple click-and-drag-and-it-works solution. (I’m thinking about one, but it’s a tad bit difficult.)

(more…)

css.php