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 thread is resolved. Here is a description of the problem and solution.

Problem: When we Edit and Translate an Elementor global widget its styling are not carried over to all languages. In this case when we change the button color in the global widget, its color is changing only in the primary language and all other languages are showing the default color still.

Solution: This issue is fixed in latest version of WPML.

Relevant Documentation: https://docs.elementor.com/article/100-global

Tagged: 

This topic contains 15 replies, has 7 voices.

Last updated by samuelB-26 1 year, 2 months ago.

Assigned support staff: Noman.

Author Posts
August 2, 2018 at 10:43 pm

jamiL

I am trying to: Translate an elementor global widget which is a orange button displayed in the header

Link to a page where the issue can be seen: hidden link

I expected to see: An orange button with uppercase letters

Instead, I got: A green button (default look)

If you go to hidden link you will see the Correct CSS for the button. The widget is added to the header by the astra theme. It is also translated using the WPML advanced translation utility.

August 3, 2018 at 8:05 am #2608176

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Thank you for contacting WPML Support. I can not access your site because of authentication required, you can send us username and password to access the site. I have enabled private input box for your next reply.

Thank you

August 3, 2018 at 12:57 pm
August 3, 2018 at 1:28 pm #2609806

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

It still showing .htaccess authentication popup. Could you please provide me password of that popup also FTP login info that you have provided is not working here as you can see in attached screenshot.

Thank you

August 3, 2018 at 2:09 pm
August 3, 2018 at 6:16 pm #2611337

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

I have fixed this issue by adding following CSS in Appearance >> Customize >> Additional CSS section:

.elementor-element.elementor-element-caa7119.elementor-widget .elementor-button {
	font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #ffffff;
background-color: #ff7024;
}

And now it looks as in attached screenshot.

Thank you

August 3, 2018 at 10:30 pm #2611808

jamiL

Hi Noman,

I agree the fix you suggested works, but I thought the point of using WPML was that the look of the elements stays consistent across all translations. If you have to manually set the CSS of an elements it kind of defies the purpose of styling items in elementor and then translating them.

When I saw that elementor global widgets were supported by 4.0.5 I was very excited, but it seems it is not working fully as intended.

August 6, 2018 at 7:27 pm #2617167

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

To better help in this issue, I need a detailed list of the steps to reproduce this issue on my test install.
It would be great if you can add some screenshot of the steps too.

Thank you

August 6, 2018 at 7:46 pm #2617257

jamiL

Hi Noman,

To reproduce you need the Astra theme and Elementor, as well as WPML with 2 languages defined.

- In the customizer, go to Layout/Header/Primary Header. Set the option "Last Item in Menu" so it is a widget.
- Create a new page "Global widgets", edit with elementor, and add a button to the page. Style it a certain way. Then right-click the button and click on Save as Global widget. Give it a name.
- Go to the widgets page, drag Elementor Library to the Header widget section. Select the button you saved as template and save.
- Go to Elementor/My Templates. Click on the Plus icon for the button template and translate the text.

When you visit the page in the default language you will see the button in the menu with correct styling. If you visit the page in the 2nd language the button will have different styling.

August 7, 2018 at 4:08 pm #2621005

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Thank you for providing detailed steps, I am still working on this issue, trying to reproduce it at my end and will get back to you with my findings. Thank you for your patience.

August 7, 2018 at 6:33 pm #2621430

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

I am able to reproduce this issue. I have now escalated this issue to our 2nd tier support for further review and we will get back to you with an update.

Thank you for your co-operation and patience as we strive hard to resolve this.

August 7, 2018 at 8:19 pm #2621767

jamiL

Hi Noman,

Glad you were able to reproduce the issue. I will use the CSS fix you provided in the meantime and see if I find more issues translating global widgets. Glad I can help make this plugin better!

August 8, 2018 at 12:59 pm #2624791

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Update: This issue is forwarded to our development team and we are working on fixing this issue asap.

August 18, 2018 at 8:21 pm #2656386

sharleenY

Hi

I found this because i'm having he same issue.

Happy to hear a solution is in the works. Hopefully soon.... ;O)

Thanks

October 25, 2018 at 5:00 pm #2850542

tobiasH-26

I have the same issue! Is there an solution right now?

Astra Pro + Elementor Pro -> global widget (e.g. contactform).
German version = how I want it
English version = CSS crashed
Site: brainboost.de