Background of the issue:
I am trying to add Line Break CSS in the Elementor text box for a translated version of a page (Japanese) on my site. After editing and saving, it looks good. I have applied the global CSS to my theme global setting (the gem) and applied a CSS class to the Elementor text box like this: 新規ユーザー ボーナス.
Symptoms:
If I make any changes to the page in the default language (English) and save each language with ATE, the change on the Japanese text box disappears.
Questions:
How can we keep the page synchronized while maintaining the line-break CSS in the translated copy?
From your description, I understood that you Translated the contents first using WPML Translation Editor and later manually edited the Translation using Elementor Editor. Please note that the mix of translation methods you're using is not typically recommended, as it can lead to such conflicts. To avoid this issue, it's advisable to stick to one method of translation.
If you have started translating content using the ATE, please don't manually alter the translation using the WordPress Editor. Since the translation memory isn't shared between the translation method or editors, any manual changes you make will be overridden when you update the translation again using the ATE. I hope you can understand.
If you want to apply a line break using CSS for the translation, you can do that by specifically defining the CSS for that language, instead of manually making changes to the translation. You can target the Chinese language with CSS like this:
html[lang="zh-hans"] .your-css-class {
/* Specific styles for Chinese */
white-space: pre-wrap;
color: red; /* Example styling */
}
Replace .your-css-class with the actual class you're using (e.g., .line-break and value for lang with the actually lang value for the Chinese language. If you inspect the Chinese version, you'll see that value in the HTML tag.).
I hope you can understand. If you have any more questions or need further assistance, please feel free to reach out. I'll be happy to help.
Thank you! I would like to clarify the steps to make it work.
1. So I will apply the CSS you provided in the gem global custom CSS.
2. I only edit the translation in ATE but not edit with elementor.
3. When I need an line-break, for a specific position of the sentennse, for example.
"I want to fix the line break issue. "
Should I just press Enter at the position I wanna break?
Or I have to add a CSS code there in the ATE?
"I want to fix
the line break issue."
"I want to fix <be class=".your-css-class">
the line break issue."
And I want this line break to be applied screen width specific . For example:only Mobile will apply this line-break CSS rule.
I were able to make it work if I add the CSS class in elementor. but it was overwritten.
4. Since it's ATE, all the setting there won't be overwritten unless the default language has been changed.
Hello There!
I hope you're doing well. Sorry for the delay in responding due to the weekend
Thank you for the update. Here’s my response to each of your points below.
1) Yes. You can also add the custom CSS by going to Appearance > Customer > Additional CSS.
2) Yes. If you add the translation using ATE, you'll need to use the ATE to make any edits/updates. If you make manual changes, that will be overwritten next time when you update the translation using ATE.
3) To format text in the editor, you’ll need to apply the same formatting in the default language. For example, if you add a line break using a `<br>` tag in the default language post, you’ll see an HTML marker (screenshot: hidden link) for that sentence/paragraph when adding or updating the translation. To ensure the formatting matches the default language, place the cursor at the marker and replicate the same formatting.
However, if you want to apply the formatting to only one language, it’s best to use a CSS class. Define the class in the default language and update the translation, ensuring the class appears correctly in other languages. Then, use CSS to apply the specific styles for the language where you want the line break to appear.
If you want the CSS to apply only to a specific viewport, define the class with a line-break rule for certain screen sizes using media queries. For example, to target mobile devices:
