Skip to content Skip to sidebar

Home › Support › English Support › [Resolved] Code translation

[Resolved] Code translation

This thread is resolved. Here is a description of the problem and solution.

Problem:
You have inserted HTML code on your website and noticed that it can be translated in the WPML Advanced Translation Editor on one site but not on another, despite similar settings.
Solution:
We recommend the following steps to potentially resolve this issue:
1. Edit the page in Elementor and remove any CSS from the HTML widget, leaving only the HTML markup.
2. Move the CSS to your theme’s custom CSS area or another appropriate location, if available.
3. Update the page.
4. Open the translation again and check the results.
If the behavior remains the same, the only supported option for translating the HTML content is to disable the WPML Translation Editor for that page and translate it directly in the Elementor editor.
For more detailed guidance, please visit Using Different Translation Editors for Different Pages.

If this solution does not apply to your case, or if it seems outdated, we highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. Should you need further assistance, please do not hesitate to open a new support ticket at WPML support forum.

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.

Tagged: 

This topic contains 2 replies, has 1 voice.

Last updated by Andrey 1 month, 1 week ago.

Assisted by: Andrey.

Author Posts
August 5, 2026 at 9:45 am #18193740

unicR

Hello,
I have inserted HTML code on hidden link and I could easily translate it with translator, see screenshot.
Why is this option not available in all cases. For example on my other website hidden link it does not work (different HTML code). I checked the settings for WPML and that they look the same for both websites. Am I missing something? Can I translated these codes in the translator or not? Why the first code showed in the translator?
August 5, 2026 at 9:51 am #18193764

unicR

the code on casa metalica is this:
<style>
.diagrama-proces {
--diag-accent: #fc4a1a;
--diag-teal: #1a7768;
--diag-ink: #444444;
--diag-heading: #2a2a2a;
font-family: 'Inter', 'Helvetica', Arial, sans-serif;
max-width: 1140px;
margin: 0 auto;
padding: 10px 0 30px;
}

.diagrama-proces .timeline {
display: grid;
grid-template-columns: repeat(5, 1fr);
position: relative;
gap: 10px;
}

.diagrama-proces .timeline::before {
content: "";
position: absolute;
top: 34px;
left: calc(100% / 10);
right: calc(100% / 10);
height: 2px;
background: repeating-linear-gradient(90deg, #ddd 0 8px, transparent 8px 16px);
z-index: 1;
}

.diagrama-proces .step {
position: relative;
text-align: center;
padding: 0 8px;
z-index: 2;
}

.diagrama-proces .step .num {
width: 68px;
height: 68px;
margin: 0 auto 18px;
border-radius: 50%;
background: var(--diag-accent);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
box-shadow: 0 8px 18px -6px rgba(252, 74, 26, 0.35), 0 0 0 4px rgba(252, 74, 26, 0.12);
transition: transform 0.25s ease;
}

.diagrama-proces .step:hover .num {
transform: scale(1.08);
}

.diagrama-proces .step .num svg {
width: 26px;
height: 26px;
stroke: #fff;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}

.diagrama-proces .step .idx {
position: absolute;
top: -6px;
right: -4px;
width: 22px;
height: 22px;
background: var(--diag-teal);
border: 2px solid #fff;
border-radius: 50%;
color: #fff;
font-size: 11px;
font-weight: 800;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
box-sizing: border-box;
}

.diagrama-proces .step h4 {
color: var(--diag-heading);
font-size: 15px;
margin: 0 0 6px;
font-weight: 700;
}

.diagrama-proces .step .days {
color: var(--diag-accent);
font-size: 13px;
font-weight: 600;
margin: 0 0 10px;
}

.diagrama-proces .step p {
color: var(--diag-ink);
font-size: 13.5px;
font-weight: 400;
line-height: 1.5;
margin: 0;
}

/* Tablet */

 @media (max-width: 900px) {
.diagrama-proces .timeline {
grid-template-columns: repeat(2, 1fr);
row-gap: 40px;
}
.diagrama-proces .timeline::before {
display: none;
}
}

/* Mobile */

 @media (max-width: 520px) {
.diagrama-proces .timeline {
grid-template-columns: 1fr;
row-gap: 32px;
}
}
</style>

<div class="diagrama-proces">
<div class="timeline">

<!-- 01 -->
<div class="step">
<div class="num">
<span class="idx">1</span>
<svg viewBox="0 0 24 24">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14 2 14 8 20 8"/>
<text x="7.8" y="16.2" font-size="7" fill="#fff" stroke="none" font-weight="600">$</text>
</svg>
</div>
<h4>Price Estimate</h4>
<div class="days">1–2 Days</div>
<p>Project review and preparation of the initial quotation.</p>
</div>

<!-- 02 -->
<div class="step">
<div class="num">
<span class="idx">2</span>
<svg viewBox="0 0 24 24">
<rect x="3" y="3" width="18" height="18" rx="1"/>
<path d="M3 9h18M9 3v18"/>
<path d="M14 13h4v4h-4z"/>
</svg>
</div>
<h4>Technical Design</h4>
<div class="days">14 Days</div>
<p>Structural engineering, 3D modeling, and preparation of production documentation.</p>
</div>

<!-- 03 -->
<div class="step">
<div class="num">
<span class="idx">3</span>
<svg viewBox="0 0 24 24">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
<polyline points="22 4 12 14.01 9 11.01"/>
</svg>
</div>
<h4>Review & Approval</h4>
<div class="days">5 Days</div>
<p>Verification and approval of the documentation before production begins.</p>
</div>

<!-- 04 -->
<div class="step">
<div class="num">
<span class="idx">4</span>
<svg viewBox="0 0 24 24">
<path d="M3 21h18"/>
<path d="M5 21V10l5 4V8l5 4V5h4v16"/>
</svg>
</div>
<h4>Manufacturing</h4>
<div class="days">12 Days</div>
<p>Production of galvanized steel components and pre-assembly when required.</p>
</div>

<!-- 05 -->
<div class="step">
<div class="num">
<span class="idx">5</span>
<svg viewBox="0 0 24 24">
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
</svg>
</div>
<h4>Assembly</h4>
<div class="days">14 Days</div>
<p>Assembly of the steel structure according to the installation drawings and 3D model.</p>
</div>

</div>
</div>
August 5, 2026 at 4:08 pm #18194430

Andrey
WPML Supporter since 06/2013

Languages: English (English ) Russian (Русский )

Timezone: Europe/Kyiv (GMT+03:00)

Thank you for contacting WPML support.

Translating HTML code directly in the Advanced Translation Editor is not the expected behavior. I cannot say with certainty why you are seeing different results on another site, as there may be differences in the page structure or configuration. There is no such setting in WPML.

As a first step, I recommend trying the following:

1. Edit the page in Elementor and remove any CSS from the HTML widget, leaving only the HTML markup.
2. Move the CSS to your theme’s custom CSS area or another appropriate location, if available.
3. Update the page.
4. Open the translation again and check the results.

If the behavior remains the same, the only supported option for translating the HTML content is to disable the WPML Translation Editor for that page and translate it directly in the Elementor editor.

You can find more information here:

https://wpml.org/documentation/translating-your-contents/using-different-translation-editors-for-different-pages/