Archived topic
Elements header - display issue with translated pages - uses WPML & Elementor
10 replies · Started by Barney on January 21, 2019
What's wrong: the image slider below the menu no longer displays in the Spanish version of the website. I am using WPML to translate the site.
The page header is a GeneratePress Elements header section (for all pages). This header section includes an Elementor shortcode in the Page Hero than links to an Elementor Template "section" that contains the slider (which you can view in the English version of the test site). The Elementor shortcode inserted in the Page Hero looks like this: [elementor-template id="914"].
Hi there,
It sounds like your Header Element is just the container to show your content, which is coming from Elementor. How does Elementor/your slider know which version to show depending on the language?
From my understanding with these multilingual plugins, it's usually necessary to create two versions (or more, depending on how many languages) of each page (and slider in your case). Have you checked with WPML on this?
WPML creates a separate Elementor Template with it's own slider. When I enter to edit the Spanish version, it seems fine. Still does not display on the Spanish pages though.
Can you tell me how to replace the slider with a single image instead? I'm willing to forgo the Elementor slider to get rid of the blank space on the Spanish page.
In that case, you could likely just use a Featured Image on the page instead.
I believe WPML has two separate pages for each language. So you should be able to add a Page Hero with a different slider to each page: https://docs.generatepress.com/article/header-element-overview/
Hi Tom,
I can't seem to get the translated Element to display anything. I've tried removing the shortcode to the Elementor template and replacing the section with an image, but nothing seems to work. I've deleted and rebuilt the Spanish version of the Element several times.
I need help on this as my client is getting restless.
Thank you,
Barney
So I assume you have two separate pages - one for English and one for Spanish.
Then, you have two separate Header Elements. One applied to the English page in the Display Rules, and the other applied to the Spanish page.
Is that correct?
That is correct, and each one has it's own content, though the Spanish one doesn't display regardless of what I do to the Spanish Element.
On the page where it's working, the background image is showing in the CSS. However, the page where it isn't working isn't getting the background image CSS: http://prntscr.com/mi600t
To me, this looks like Elementor isn't writing the necessary CSS on each separate page.
The element is the same on each page, it's only the CSS that's different.
Have you considered just using a featured image?
I've rebuilt the English Element Header and successfully included the slider from the Elementor template. There's a background image now, but it's hidden behind the slider.
I've now successfully added a background image on the Spanish Element Header but I can't seem to Height Size it to fit the background image.
I hope this is enough for you to troubleshoot.
It looks like the height of 200px is coming from this element: https://www.screencast.com/t/w2X0id5tPgO6
Not sure if that's in Elementor or the Header Element?
It doesn't look like the images actual change at all - using the slider might be overkill?
