{"id":175,"date":"2024-07-31T10:29:46","date_gmt":"2024-07-31T10:29:46","guid":{"rendered":"https:\/\/wp-multilang.com\/docs\/?post_type=ht_kb&#038;p=175"},"modified":"2024-08-01T06:21:45","modified_gmt":"2024-08-01T06:21:45","slug":"how-to-add-wp-multilang-language-switcher-in-multilingual-site-which-customized-using-divi-builder","status":"publish","type":"ht_kb","link":"https:\/\/wp-multilang.com\/docs\/knowledge-base\/how-to-add-wp-multilang-language-switcher-in-multilingual-site-which-customized-using-divi-builder\/","title":{"rendered":"How to add \u201cWp-Multilang Language Switcher\u201d in Multilingual site which customized using DIVI Builder."},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A language switcher, available in WP Multilang, lets users add an icon or option to translate a page&#8217;s content into their desired language. This feature is compatible with Divi, enhancing multilingual functionality. In our recent released 2.4.10 version we have added full compatibility Divi Builder.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this tutorial we will see how add this option on your post\/page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 1:<\/strong> Go to the <strong><a href=\"https:\/\/wp-multilang.com\/pricing\/\">Wp-Multilang <\/a><\/strong>website. Download the plugin and install it. Also make sure that you have Pro version activated on your site.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"100\" src=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download1-1024x100.png\" alt=\"\" class=\"wp-image-153\" srcset=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download1-1024x100.png 1024w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download1-300x29.png 300w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download1-768x75.png 768w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download1-50x5.png 50w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download1-1536x150.png 1536w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download1-2048x201.png 2048w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download1-60x6.png 60w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download1-100x10.png 100w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 2:<\/strong> Go to the WordPress Dashboard and activate the plugin.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 3:<\/strong> Once you will activate the plugin you will get the multiple options. Click on <strong>Compatibility <\/strong>option.(<strong>Make sure that Divi builder also present on your end.<\/strong>)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"548\" src=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download3-1024x548.png\" alt=\"\" class=\"wp-image-155\" srcset=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download3-1024x548.png 1024w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download3-300x161.png 300w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download3-768x411.png 768w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download3-50x27.png 50w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download3-1536x822.png 1536w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download3-2048x1096.png 2048w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download3-60x32.png 60w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download3-100x54.png 100w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"545\" src=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download2-1024x545.png\" alt=\"\" class=\"wp-image-154\" srcset=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download2-1024x545.png 1024w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download2-300x160.png 300w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download2-768x408.png 768w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download2-50x27.png 50w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download2-1536x817.png 1536w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download2-2048x1089.png 2048w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download2-60x32.png 60w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download2-100x53.png 100w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 4: <\/strong>Now click on <strong>Pages\/Post<\/strong> and add new <strong>page\/post<\/strong> on your website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"549\" src=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download4-1024x549.png\" alt=\"\" class=\"wp-image-156\" srcset=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download4-1024x549.png 1024w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download4-300x161.png 300w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download4-768x412.png 768w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download4-50x27.png 50w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download4-1536x823.png 1536w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download4-2048x1098.png 2048w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download4-60x32.png 60w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download4-100x54.png 100w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 5:<\/strong> You will redirect to<strong> Divi Builder editor <\/strong>option where you can customized your <strong>page\/post <\/strong>according to your choice. you will get multiple option, To add the \u201c<strong>WPM Language Switcher<\/strong>\u201d to your page or post, click the \u201c+\u201d sign or drag and drop the switcher to your desired location on the page or post.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download6.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"676\" src=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download6-1024x676.png\" alt=\"\" class=\"wp-image-163\" style=\"aspect-ratio:1;width:840px;height:auto\" srcset=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download6-1024x676.png 1024w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download6-300x198.png 300w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download6-768x507.png 768w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download6-50x33.png 50w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download6-60x40.png 60w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download6-100x66.png 100w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download6.png 1136w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 6: <\/strong>You can modify this option as per your choice. You can drop down menu or vice versa. Not only Language switcher but you will get complete compatibility with Divi Builder.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download7.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"557\" src=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download7-1024x557.png\" alt=\"\" class=\"wp-image-164\" srcset=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download7-1024x557.png 1024w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download7-300x163.png 300w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download7-768x418.png 768w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download7-50x27.png 50w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download7-60x33.png 60w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download7-100x54.png 100w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download7.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download8.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"542\" src=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download8-1024x542.png\" alt=\"\" class=\"wp-image-165\" srcset=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download8-1024x542.png 1024w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download8-300x159.png 300w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download8-768x407.png 768w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download8-50x26.png 50w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download8-1536x813.png 1536w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download8-2048x1084.png 2048w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download8-60x32.png 60w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download8-100x53.png 100w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 7:<\/strong> Once you done with your setup save all the settings and click on preview. You will get language switcher on your website. Once you will click on that it will expand.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download9.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"485\" src=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download9-1024x485.png\" alt=\"\" class=\"wp-image-166\" srcset=\"https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download9-1024x485.png 1024w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download9-300x142.png 300w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download9-768x363.png 768w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download9-50x24.png 50w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download9-1536x727.png 1536w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download9-2048x969.png 2048w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download9-60x28.png 60w, https:\/\/wp-multilang.com\/docs\/wp-content\/uploads\/2024\/07\/download9-100x47.png 100w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In this way you can use WP Multilang plugin with <strong>Divi Builder<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it for this tutorial, if you need more help check our other <a href=\"https:\/\/wp-multilang.com\/docs\/\">docs<\/a>. Still not able to find answer, kindly fill the below form. \ud83d\udc47<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A language switcher, available in WP Multilang, lets users add an icon or option to translate a page&#8217;s content into their desired language. This feature is compatible with Divi, enhancing multilingual functionality. In our recent released 2.4.10 version we have added full compatibility Divi Builder. In this tutorial we will&#8230;<\/p>\n","protected":false},"author":2,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[5],"ht-kb-tag":[],"class_list":["post-175","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-how-to"],"_links":{"self":[{"href":"https:\/\/wp-multilang.com\/docs\/wp-json\/wp\/v2\/ht-kb\/175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp-multilang.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/wp-multilang.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/wp-multilang.com\/docs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wp-multilang.com\/docs\/wp-json\/wp\/v2\/comments?post=175"}],"version-history":[{"count":4,"href":"https:\/\/wp-multilang.com\/docs\/wp-json\/wp\/v2\/ht-kb\/175\/revisions"}],"predecessor-version":[{"id":188,"href":"https:\/\/wp-multilang.com\/docs\/wp-json\/wp\/v2\/ht-kb\/175\/revisions\/188"}],"wp:attachment":[{"href":"https:\/\/wp-multilang.com\/docs\/wp-json\/wp\/v2\/media?parent=175"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/wp-multilang.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=175"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/wp-multilang.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}