{"id":2429355,"date":"2018-08-23T09:07:35","date_gmt":"2018-08-23T09:07:35","guid":{"rendered":"https:\/\/wpml.org\/?p=2429355"},"modified":"2018-08-23T09:25:03","modified_gmt":"2018-08-23T09:25:03","slug":"how-to-translate-elementor-designs-the-easy-way-with-wpml","status":"publish","type":"post","link":"https:\/\/wpml.org\/ko\/announcements\/2018\/08\/how-to-translate-elementor-designs-the-easy-way-with-wpml\/","title":{"rendered":"How To Translate Elementor Designs The Easy Way With WPML"},"content":{"rendered":"<p class=\"lead\">This guest post is brought to you by Daan, from <a href=\"https:\/\/wplift.com\/\">wplift.com<\/a>. He recently launched <a href=\"https:\/\/www.easythemepacks.com\/\">EasyThemePacks<\/a>,\u00a0an amazing premium library of Elementor templates. He&#8217;s\u00a0going to show you exactly how to translate them with WPML.<\/p>\n<p><a href=\"https:\/\/cdn.wpml.org\/wp-content\/uploads\/2018\/06\/Elementor-WPML-and-Easythemepacks.png\"><img decoding=\"async\" class=\"aligncenter wp-image-2429475\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/06\/Elementor-WPML-and-Easythemepacks-300x128.png\" alt=\"elementor wp\" width=\"700\" height=\"298\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/06\/Elementor-WPML-and-Easythemepacks-300x128.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/06\/Elementor-WPML-and-Easythemepacks-150x64.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/06\/Elementor-WPML-and-Easythemepacks-768x326.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/06\/Elementor-WPML-and-Easythemepacks-1024x435.png 1024w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/06\/Elementor-WPML-and-Easythemepacks.png 1200w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<hr \/>\n<p>If you&#8217;re a regular Elementor user, you&#8217;re probably already pretty familiar with how Elementor lets you create beautiful designs with no code required. But can Elementor help you create beautiful <i>multilingual<\/i> designs as well?<\/p>\n<p><b>Good news:\u00a0<\/b>With WPML, yes it can!<\/p>\n<p>By the end of this tutorial, you&#8217;ll know exactly how you can start creating multilingual websites built with Elementor, even if you&#8217;re using the completely blank Elementor Canvas option.<\/p>\n<h2>What You Need To Create A Multilingual Website With Elementor<\/h2>\n<p>Here&#8217;s everything that you&#8217;ll need to follow along with this tutorial:<\/p>\n<ul>\n<li><b>A page that you&#8217;ve designed with Elementor<\/b> &#8211; we&#8217;re using the <a href=\"https:\/\/www.easythemepacks.com\/themes\/barista-bluegrass\/\">Barista Bluegrass template from EasyThemePacks<\/a>, which is a complete landing page design based on the blank Elementor Canvas template.<\/li>\n<li><b>WPML Multilingual CMS<\/b> &#8211; this is what helps you create a multilingual WordPress website, including your Elementor content.<\/li>\n<\/ul>\n<p>You&#8217;ll also need to make sure to install the other components of the WPML Multilingual CMS package, notably WPML String Translation and WPML Translation Management.<\/p>\n<p>Once you&#8217;ve got those bare essentials, let&#8217;s dig into how you can use WPML to create a multilingual Elementor website!<\/p>\n<h2>Step 1: Install And Activate WPML CMS And Components<\/h2>\n<p>Once you&#8217;ve installed WPML Multilingual CMS and its components, you can go through the WPML setup wizard to configure your basic language settings (<i>like which languages you&#8217;d like to translate your Elementor designs into<\/i>).<\/p>\n<p>For this example, we&#8217;re going to translate our template into German (<i>with Google Translate &#8211; sorry for any mistakes, German grammar sticklers!<\/i>):<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-1-e1535015776932.png\"><img decoding=\"async\" class=\"wp-image-2669284 size-full\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-1-e1535015776932.png\" alt=\"\" width=\"700\" height=\"366\" \/><\/a><\/p>\n<p>Make sure to also enable the translation manager (<i>WPML will prompt you to do this in your dashboard &#8211; it&#8217;s hard to miss and you just need to click a button<\/i>).<\/p>\n<h2>Step 2: Go To The Elementor Page That You Want To Translate<\/h2>\n<p>Once you&#8217;ve set up WPML&#8217;s basic settings, go to the WordPress dashboard editor for the Elementor page that you want to translate (<i>don&#8217;t open the Elementor editor &#8211; stay in the regular WordPress editor<\/i>).<\/p>\n<p>Here&#8217;s what the EasyThemePacks Barista Bluegrass template looks like in its native English:<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-2.png\"><img decoding=\"async\" class=\"wp-image-2669295\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-2.png\" alt=\"\" width=\"700\" height=\"336\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-2.png 1334w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-2-150x72.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-2-300x144.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-2-768x369.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-2-1024x492.png 1024w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>In just a few minutes, we&#8217;ll be able to translate it into German!<\/p>\n<h2>Step 3: Create A New Translation For Your Elementor Design<\/h2>\n<p>In the WordPress Editor, click on the <b>+<\/b> icon to create a new translation of your Elementor design:<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-3.png\"><img decoding=\"async\" class=\"wp-image-2669306\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-3.png\" alt=\"\" width=\"700\" height=\"355\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-3.png 1084w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-3-150x76.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-3-300x152.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-3-768x389.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-3-1024x519.png 1024w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>This will open up a handy side-by-side editor.\u00a0On the left side, you&#8217;ll see all the information from the original English translation. WPML pulls in every individual string from your Elementor design, as well as other helpful attributes (<i>like the URL that a button links to so that you can send users to the proper translation<\/i>).<\/p>\n<p>To start translating your Elementor template, you just need to enter the translation in the corresponding box on the right side:<\/p>\n<p><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-4.png\"><img decoding=\"async\" class=\"wp-image-2669317\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-4.png\" alt=\"\" width=\"700\" height=\"415\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-4.png 1086w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-4-150x89.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-4-300x178.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-4-768x455.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-4-1024x607.png 1024w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p>As you go through, make sure to mark each translation as <b>Translation is complete<\/b> so that you can quickly tell what&#8217;s been done and what still needs to be translated. Additionally, while you can always save partial work, you won&#8217;t be able to display your translation on the front end until you&#8217;ve marked everything as complete.<\/p>\n<p>Once you finish up your translations and save them, you&#8217;re done!Now, you&#8217;ll be able to edit your existing translation whenever needed:<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-5.png\"><img decoding=\"async\" class=\"wp-image-2669329\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-5.png\" alt=\"\" width=\"700\" height=\"384\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-5.png 904w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-5-150x82.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-5-300x165.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-5-768x421.png 768w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p>And if you go to the front end of your site, you&#8217;ll be able to access the translated version of your page by changing the URL according to your preferences (<i>more on how to create a language switcher in a second!<\/i>).<\/p>\n<p>Here&#8217;s how the translated version of our EasyThemePacks template looks, including the URL structure so that you can see how everything is localized:<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-6.png\"><img decoding=\"async\" class=\"wp-image-2669340\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-6.png\" alt=\"\" width=\"700\" height=\"394\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-6.png 1248w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-6-150x84.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-6-300x169.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-6-768x432.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-6-1024x576.png 1024w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<h2>What If You Change The Original Elementor Design?<\/h2>\n<p>At some point, you&#8217;re probably going to run into a situation where you want to change the original version of the Elementor design.<\/p>\n<p>So what happens then? Will you lose your translated content after making the changes?<\/p>\n<p><b>Nope!<\/b><\/p>\n<p>If you ever use the Elementor interface to edit the existing translation of your page, WPML will simply mark those translations in the editor and give you an option to show the differences:<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-7.png\"><img decoding=\"async\" class=\"wp-image-2669351\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-7.png\" alt=\"\" width=\"700\" height=\"353\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-7.png 869w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-7-150x76.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-7-300x151.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-7-768x387.png 768w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p>WPML won&#8217;t do anything to already-translated strings that weren&#8217;t changed. So all you need to do is update the edited text and you&#8217;re good to go!<\/p>\n<h2>What About The Language Switcher With The Elementor Canvas Template?<\/h2>\n<p>All of EasyThemePacks designs are based on using the blank Elementor Canvas template. And if you&#8217;re making your own pages with Elementor, there&#8217;s a good chance you also might use the blank Elementor Canvas template.<\/p>\n<p>When you use that template, there&#8217;s no navigation menu or sidebar from your theme, which are the two places you&#8217;d usually add a language switcher with WPML.<\/p>\n<p>So then&#8230;how do you actually let visitors access the translated version of your Elementor template <i>when you&#8217;re using Elementor Canvas<\/i>?<\/p>\n<p>While you can <a href=\"https:\/\/wpml.org\/documentation\/getting-started-guide\/language-setup\/language-switcher-options\/custom-language-switcher\/\">create your own WPML language switcher<\/a> using code, the easiest way is to just include a language switcher shortcode in your Elementor template.<\/p>\n<p>To do that, place the Elementor Shortcode widget where you want it to display and include this shortcode:<\/p>\n<p>{{wpml_language_selector_footer}}<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-8.png\"><img decoding=\"async\" class=\"wp-image-2669362\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-8.png\" alt=\"\" width=\"700\" height=\"257\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-8.png 1062w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-8-150x55.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-8-300x110.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-8-768x282.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-8-1024x376.png 1024w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p>This shortcode will pull the settings for your WPML footer language switcher. To configure those settings, go to <b>WPML \u2192 Languages <\/b>in your WordPress dashboard and scroll down to the <b>Footer language switcher <\/b>section:<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-9.png\"><img decoding=\"async\" class=\"wp-image-2669374\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-9.png\" alt=\"\" width=\"700\" height=\"308\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-9.png 829w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-9-150x66.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-9-300x132.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-9-768x338.png 768w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p>When you click on the <b>pencil<\/b> icon, you&#8217;ll be able to configure how your language switcher functions. You can:<\/p>\n<ul>\n<li>Change the layout<\/li>\n<li>Choose whether or not to display language names and flags<\/li>\n<li>Choose a new color scheme<\/li>\n<li>Configure individual elements&#8217; styles<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-10.png\"><img decoding=\"async\" class=\"wp-image-2669386\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-10.png\" alt=\"\" width=\"700\" height=\"398\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-10.png 1014w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-10-150x85.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-10-300x170.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2018\/08\/translate-elementor-10-768x436.png 768w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p><i>As a tip, using a language name is a great option as it allows people to search for their local language by using <\/i><b><i>CTRL + F<\/i><\/b><i>.<\/i><\/p>\n<h2>Final Thoughts On How To Translate Elementor<\/h2>\n<p>With the WPML Multilingual CMS package, it&#8217;s easy to translate any Elementor page template, including those based on Elementor Canvas like the premium templates available at EasyThemePacks.\u00a0You can go through string-by-string to translate all the content you build with the visual Elementor page builder. And if you ever make any changes to your original Elementor design in the future, WPML will help you find those changes to make sure you also update the translated version.<\/p>\n<p>Finally, even if you&#8217;re using the blank Elementor Canvas template, you can still include a user-friendly language switcher via either WPML&#8217;s shortcodes or the custom code method that we linked to.<\/p>\n<p><b>Have any other questions about how to translate your Elementor designs? Leave a comment!<\/b><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This guest post is brought to you by Daan, from wplift.com. He recently launched EasyThemePacks,\u00a0an amazing premium library of Elementor templates. He&#8217;s\u00a0going to show you exactly how to translate them with WPML. If you&#8217;re a regular Elementor user, you&#8217;re probably already pretty familiar with how Elementor lets you create beautiful designs with no code required. [&hellip;]<\/p>\n","protected":false},"author":76577,"featured_media":2429475,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"ep_exclude_from_search":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-2429355","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-announcements"],"_links":{"self":[{"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/posts\/2429355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/users\/76577"}],"replies":[{"embeddable":true,"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/comments?post=2429355"}],"version-history":[{"count":8,"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/posts\/2429355\/revisions"}],"predecessor-version":[{"id":2669429,"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/posts\/2429355\/revisions\/2669429"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/media\/2429475"}],"wp:attachment":[{"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/media?parent=2429355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/categories?post=2429355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpml.org\/ko\/wp-json\/wp\/v2\/tags?post=2429355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}