Place a custom language switcher in header (made with Divi Theme Builder)

This thread is resolved. Here is a description of the problem and solution.

Problem:
I would like to place a custom language switcher in the top right corner of the header (I have 1 global header and 2 custom headers made with Divi Theme Builder)

Solution:
Place the custom language switcher shortcode [wpml_language_selector_widget] in the Divi code module in the global header made with Divi builder.

That shortcode outputs the language switcher based on the options set in the Custom Language Switchers section.

Relevant Documentation:
- https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#using-wpml-shortcodes

100% of people find this useful.

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

This topic contains 4 replies, has 2 voices.

Last updated by carolineD-12 4 years, 5 months ago.

Assisted by: Dražen.

Author	Posts
November 12, 2020 at 2:46 am #7430123
carolineD-12	Hi, I would like to place a custom language switcher in the top right corner of the header (I have 1 global header and 2 custom headers made with Divi Theme Builder). See image attached, made in Photoshop. Is there any documentation that you are following? I tried to put the shortcode [wpml_language_selector_widget] in a code module inside the header but then I couldn't get to have a transparent background, and in the widget language switcher settings I had to choose the place where I wanted to put it, but there was only "sidebar" or "Footer#1...#6". I also wanted to try twig template but then I saw the message on top of the article saying that this method was being deprecated and that I should not use it. I didn't try the PHP method because I have not enough knowledge in PHP. Is there a similar example that we can see? See image below What is the link to your site? hidden link username : ** pass : ** I hope there's a simple way to do this, because all the documentation I read so far make it look like a really complicated task ! Thank you in advance for your help !
November 13, 2020 at 9:28 am #7441671
Dražen Supporter Languages: English (English ) Timezone: Europe/Zagreb (GMT+02:00)	Hello, thanks for sharing the info. I think adding a language switcher shortcode would be the best approach. That shortcode outputs the language switcher based on the options set in the Custom Language Switchers section. If you want to use the [wpml_language_selector_widget] shortcode, you must first enable the Custom language switcher option on the WPML → Languages page. Then click "Customize" just under the Enable button and adjust your style. - https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#using-wpml-shortcodes If you still have an issue with setting transparent background, that there is probably some other style CSS code adding a white background to the switcher. Share with me a URL where I can see it, and I will check the CSS code and try to provide a fix for a background. Please note to achieve the effect you shared in your image (underline efect etc) you might need some more complex CSS custom programming, which is a bit out of the scope of our work. Let me know how it goes. Kind regards, Drazen
November 16, 2020 at 1:30 am #7453559
carolineD-12	Hello Drazen, Thank you for your reply. I managed to place the custom language switcher's shortcode in a code module on top of the global header made in Divi Builder see image below) but I didn't succeed in putting it directly inside the header (like the example in my first post). I still have an issue with the spacing of this module, but I know that it can be solved with some custom CSS. I will contact the Divi support to zsk them if it's possible to place the language switcher inside the header, but before that, I have one last question for you : does this custom language switcher always has to be fullwidth or is there a way to set a fixed width or some custom right and left margins ? Thank you. Kind Regards Caroline
November 16, 2020 at 7:47 am #7455311
Dražen Supporter Languages: English (English ) Timezone: Europe/Zagreb (GMT+02:00)	Hello Caroline, thanks for getting back. I think this is excepted since you are adding a new module, so it will need some custom CSS to move around and set this module transparent, and to appear as on your design. If you can share the link to check the site, I can take a look, otherwise, I advise hiring a developer to write some CSS code so it appears as in your design. Does this custom language switcher always has to be fullwidth or is there a way to set a fixed width or some custom right and left margins ? I think this is up to Divi builder settings, layout, if you have put code module inside fullwidth row/column it will appear like that. You will probably have to create different layout/columns inside that 1 row or inner rows. I would advise checking Divi documentation and how to set up the correct layout, overlap row etc: - hidden link - hidden link - hidden link I hope I was helpful. Don't hesitate to ask if you find any problem along the way, I'll gladly help you. Regards, Drazen
November 17, 2020 at 12:35 pm #7466339
carolineD-12	Hi Drazen, I finally got to achieve what I wanted 🙂 I was not using the right Divi module for the header : now I'm using a row with 3 columns, and in the right column I put a code module with the language switcher shortcode (and the background is transparent now). Thank you very much again for your help ! Regards, Caroline