I need to add an option for translating the website, which works fine with plugins, or even Google Translate directly on the browser. However, the Hero Words, that have the animation when scrolling over with mouse, always translate to nonsense, and does not allow my to use css rules, such as the notranslate class directly. Example: <span class="notranslate">Moddux</span>
I verified that it works on other sections of the website, only the Hero part does not accept it, i think, because of the animation of the letters perhaps.
I added some images that show the diference between the original Portuguese option, in comparison when translated to english.
Hello,
I need to add an option for translating the website, which works fine with plugins, or even Google Translate directly on the browser. However, the Hero Words, that have the animation when scrolling over with mouse, always translate to nonsense, and does not allow my to use css rules, such as the notranslate class directly.
Example: <span class="notranslate">Moddux</span>
I verified that it works on other sections of the website, only the Hero part does not accept it, i think, because of the animation of the letters perhaps.
I added some images that show the diference between the original Portuguese option, in comparison when translated to english.
Attached files: moddux_pt.jpg
moddux_en (translated).jpg
Hello Gabriela,
your intuition is correct, as the theme - to achieve the hero animations is breaking the hero title, wrapping each letter with a <span> element.
https://prnt.sc/i1w76UsCUqjw
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
So how can I fix this? Is there a way around it?
also, I see that it automatically applies the translate: none; in each span. Why does it translate the "O" to "the" then?
Translate is the css translate
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
and has nothing to do with multilingual translation.
Perhaps the best solution is to disable the animation but for that you need to modify the js code and (hopefully) your code will work.
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio