Back to Sidekick Plugins Guides

Integrations

WPML For Translations

This guide applies to:

  • Basic
  • Professional

Introduction

Draw Attention is compatible with WPML. By using WPML for translations, you can translate your interactive image contents to your heart’s, well, content!

Note: The WPML integration is compatible with both the Free and Pro editions of the plugin.

Setting up WPML for Translations

Step 1: Install and Activate

Before we can start translating, let’s start by installing and activating WPML. Head on over to your WordPress Admin Dashboard > Plugins > Add New and upload your WPML plugin, and then activate it.

WPML Multilingual CMS plugin

Step 2: Select Languages

Choose your default language and the language you want to translate your site into.

WPML Setup - what are the languages of your site?

Step 3: Proceed through the Setup Wizard

Continue to follow the instructions throughout the WPML setup wizard.

Step 4: Enable String Translation

Activate the String Translation system so that you can translate strings and media.

Improve your site's translations using helpful plugins - String translation

Step 5: Finish Setup

Click Finish to complete the setup for WPML.

A Language Switcher will be added to your site in the footer as well!

WPML also features a detailed walkthrough of the setup process in their documentation center.

Step 6: Enable WPML for Draw Attention

Navigate to your WordPress Admin > WPML > Settings and scroll on down to where it says Post Types Translation.

Within this section, go ahead and check Draw Attention to be Translatable, then Save.

Enable WPML for Draw Attention (da_image)

How to Translate Draw Attention

Step 1: Locate and Select Your Interactive Image

Head to your WordPress Admin > WPML > Translation Management and locate your interactive image either by scrolling or typing in the name of the interactive image.

Be sure to add a check next to the interactive image you want translated.

Select the interactive image to translate

Step 2: Select Translation Option

Select which language you want the image translated to, and select the Translate and Translate Myself options before pressing the Add to Translation Queue button.

Select the translation options for the image

Step 3: Locate the Translation Option

Navigate to WordPress Admin > Draw Attention and you’ll now see a pencil icon to translate your interactive image. You’ll also see this option within the interactive image itself in the Language sidebar, and you can click show to reveal the translations and edit them.

Make sure to toggle Use WPML’s Translation Editor OFF so that you’re instead using the WordPress Editor, and on the pop-up, select All Draw Attention from the list.

Arrow pointing towards the Language sidebar

Step 4: Recreate Your Hotspots and Manually Translate!

Publish your translated interactive image so that you can create hotspots. 

Recreate your hotspots and manually translate the hotspots and their descriptions to your desired language.

Now you can begin translating!

Recreate the hotspots and manually translate text

Step 5: Visit the Original Interactive Image

Once you’ve saved the translations, you can switch between languages to view the translated image on the page it’s embedded on. Click the alternate translation to view the interactive image in that language.

(Optional) Create Translated Page

If the translation switcher is not working for Draw Attention, please double-check to make sure a page exists for the translation. If the overall page is not translated, then Draw Attention will remain in the default language too.

Example: English

Visit the original interactive image and locate the language switcher

Example: Translated to Spanish

Translated image result

Still stuck?

File a support ticket with our five-star support team to get more help.

File a ticket

  • Please provide any information that will be helpful in helping you get your issue fixed. What have you tried already? What results did you expect? What did you get instead?
  • This field is for validation purposes and should be left unchanged.

Related Guides