Localization Tricks: How to Use Effectively WPML with SiteOrigin Page Builder


As a Localization Specialist, I am always shocked by how many localization problems can arise if we switch the way we built a webpage. For instance, the following example was meant to be an easy task in WordPress… But then, I had the fantastic idea of finding a more interesting way to create the Proof-of-Concept page we wanted to localize because why not?

So, after navigating among different tutorials in Google and YouTube, I found this fantastic tutorial by Greg Narayan, and immediately I was hooked. I followed the instructions to the T while recreating the Women in Localization page (our version is currently unpublished) and discovered the great functionalities and widgets of the Sydney Theme along with Site Origin Page Builder, one of the most powerful page builders of WordPress.

I was amazed by how fast I was able to build a WordPress from scratch and how awesome it looked in record time!

While I was getting myself excited with how beautiful our proof-of-concept page was looking I stopped for a second to see if WPML, the powerful multilingual plugin for WordPress that we wanted to use, supported Site Origin Page Builder, and quickly I found my answer or so I thought:

So after that reassurance, I finished the English page so that my colleagues and I could localize it without any problems in our target languages. Unfortunately, I did not know that I had open a whole can of worms for me and my colleagues…


The Does and Don’ts of Localizing a Website Built with SiteOrigin Page Builder

Traditionally, while localizing a webpage, Localizers will use the plugin WPML String Translation to localize the strings into the different target languages. However, SiteOrigin Page Builder magic is mostly done via widgets and not strings.

This SiteOrigin Page Builder structure adds a whole new layer of complexity to our Localization Workflow, as my colleagues and I discovered a little bit too late.

After banging our heads against the wall (figuratively and almost literally), my colleague Dean Christopher found a solution that rescued us from the disaster, as he explains better in his post that I encourage you to look at it.

After that, we had smooth sailing and localized almost all the pages until we found other small bumps in the road. (Like the Localization of the Contact Form and Events page, that my colleague Ying-Ting Wu describes perfectly in his blog.) 

A Nice Touch: How I use WPML to Localize Pictures with Text. 

Besides, what my colleagues already covered in their own blogs. I found very easy the WPML plugin for localizing pictures.



How we did it?

  1. Activate WPML Media 

2. Navitage to WPML Media Translation

3. Find the picture from the source text that you want to localize, and click on edit the target language.



If the picture doesn’t change you have to go to where the widget is located and manually changed it. For example, these pictures are part of Services, so I had to change them there. 

As you can see thanks to putting our knowledge together to find the different solutions that we encounter we would able to fully localize the webpage built with SiteOrigin Builder into Spanish and Chinese. So, if you have any questions about your website localization method please feel free to ask for advice, it always pays off! 🙂 

If you want to learn more about the overall process, do not forget to watch our video below.


Follow me on Twitter
Follow me on Twitter