Header Element and WPML

[Gary]

I have setup a Hero Header with GP Elements and it all works fine. The setting include Merge and Full Screen image.

I have 3 lines of text in the Hero Header.

As I am using WPML, these 3 lines need translating. That is the easy part. The Elements can be translated using WPML. I have done that. But the problem is that my ‘Full Screen’ settings don’t work in the translated language.

This is what is looks like in Engish:
https://www.ipohgo.com/

This is what it looks like in Chinese:
https://www.ipohgo.com/zh-hans/

[David]

Hi there,

thats odd – simplest fix would be to add full-height to the Element classes field in the Header Element. Then add this CSS:

.page-hero.full-height {
    min-height: 100vh;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Gary]

Hi David,

Thanks for this, but sadly it didn’t work. Nothing has changed:

https://www.ipohgo.com/zh-hans/

[David]

I am not a WPML user – does it require you to create a separate Element for each language?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Gary]

No, WPML doesn’t require that. All the element/post/page settings are supposed to stay the same, and other than this particular case, that is exactly what happens throughout my site.

It’s very odd.

I’ve inspected the page and I note that the code is different but I can’t understand why.

On my English language page, it is:

<div class="page-hero hide-on-mobile full-height" style="background-position-y: 0px;">

But on my Chinese-language page it is:

<div class="page-hero hide-on-mobile">

It’s using exactly the same element, so I don’t understand why the height and style are being removed.

[Gary]

Hi David,

I have finally resolved it.

WPML has a set of ‘system fields’ for each page/post/element etc. These are usually not touched but I have just inspected them and noticed there was a system field titled ‘_generate_hero_full_screen’ that was set to ‘Don’t Translate’. I changed the setting to ‘Copy’ and hey presto, it now works.

I have put this info here in case it happens to another GP user in the future.

[David]

Awesome – yeah i am sure we have answered this type of query before ( Tom normally deals with translations ) – thanks for sharing, at least i have an idea where to direct WPML users in the future.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts