Você já se deparou com títulos em inglês como “Category:”, “Search Results:” ou “Archives:” no seu site WordPress com Elementor? Neste tutorial completo, vou mostrar como traduzir esses elementos usando apenas CSS e JavaScript, sem a necessidade de plugins adicionais.
Por que traduzir sem plugins?
- Melhor performance do site
- Sem dependências extras
- Maior controle sobre as traduções
- Solução leve e eficiente
Passo a Passo da Implementação
1. Identificando o elemento no Elementor
Primeiro, precisamos identificar corretamente o elemento que queremos modificar:
- Abra o Elementor
- Localize o widget de título que contém o texto “Category:”, “Search Results:” ou “Archives:”
- Na aba avançado, adicione um ID ou classe personalizada
- Exemplo:
titulo-categoria - Importante: Não é necessário adicionar o ponto (.) na frente da classe ao configurar no Elementor
- Exemplo:
2. Adicionando o CSS
Adicione o seguinte código CSS no seu tema (Aparência > Personalizar > CSS Adicional) ou no Custom CSS do Elementor:
.titulo-categoria .elementor-heading-title {
visibility: hidden;
position: relative;
text-align: center; /* Garante que o texto original está centralizado */
}
.titulo-categoria .elementor-heading-title::after {
content: "Categoria: " attr(data-original);
visibility: visible;
position: absolute;
width: 100%; /* Ocupa toda a largura do container */
left: 50%; /* Move para o centro */
transform: translateX(-50%); /* Ajusta o posicionamento exato no centro */
text-align: center; /* Centraliza o texto */
}
3. Implementando o JavaScript
Adicione um novo widget HTML no Elementor bem abaixo do título e insira o seguinte código:
<script>
document.addEventListener('DOMContentLoaded', function() {
const title = document.querySelector('.titulo-categoria .elementor-heading-title');
const originalText = title.textContent.replace('Category:', '').trim();
title.setAttribute('data-original', originalText);
});
</script>
EXTRA
Personalizando para Diferentes Tipos de Arquivo
Para Resultados de Busca – Search Results for:
Na aba avançado, adicione um ID ou classe personalizada no Tittle Archive
- Exemplo:
titulo-busca - Copie e cole o Css abaixo e coloque no Css Personalizado
.titulo-busca .elementor-heading-title {
visibility: hidden;
position: relative;
text-align: center; /* Garante que o texto original está centralizado */
}
.titulo-busca .elementor-heading-title::after {
content: "Resultados da busca por: " attr(data-original);
visibility: visible;
position: absolute;
width: 100%; /* Ocupa toda a largura do container */
left: 50%; /* Move para o centro */
transform: translateX(-50%); /* Ajusta o posicionamento exato no centro */
text-align: center; /* Centraliza o texto */
}
Insira o widget de html logo abaixo do título e cole esse Javascript:
<script>
document.addEventListener('DOMContentLoaded', function() {
// Mapeamento de traduções
const translations = {
'Category:': 'Categoria:',
'Search Results for:': 'Resultados da busca por:',
'Archives:': 'Arquivos:',
'Tag:': 'Tag:',
'Author:': 'Autor:'
};
// Função para traduzir títulos
function translateTitles() {
const titles = document.querySelectorAll('.elementor-heading-title');
titles.forEach(title => {
let text = title.textContent.trim();
for (let [eng, pt] of Object.entries(translations)) {
if (text.startsWith(eng)) { // Mudamos para startsWith
const originalText = text.substring(eng.length).trim(); // Pegamos o texto após o prefixo
title.setAttribute('data-original', originalText);
title.closest('.elementor-widget-heading').classList.add('translated-title');
break;
}
}
});
}
translateTitles();
});
</script>
Para Página de Arquivos
Na aba avançado, adicione um ID ou classe personalizada
- Exemplo:
titulo-arquivo
.titulo-arquivo .elementor-heading-title {
visibility: hidden;
position: relative;
text-align: center; /* Garante que o texto original está centralizado */
}
.titulo-arquivo .elementor-heading-title::after {
content: "Arquivos: " attr(data-original);
visibility: visible;
position: absolute;
width: 100%; /* Ocupa toda a largura do container */
left: 50%; /* Move para o centro */
transform: translateX(-50%); /* Ajusta o posicionamento exato no centro */
text-align: center; /* Centraliza o texto */
}
Solução Completa para Múltiplos Elementos
Para uma solução mais abrangente que cubra todos os tipos de títulos, você pode usar este JavaScript mais completo:
<script>
document.addEventListener('DOMContentLoaded', function() {
// Mapeamento de traduções
const translations = {
'Category:': 'Categoria:',
'Search Results for:': 'Resultados da busca por:',
'Archives:': 'Arquivos:',
'Tag:': 'Tag:',
'Author:': 'Autor:'
};
// Função para traduzir títulos
function translateTitles() {
const titles = document.querySelectorAll('.elementor-heading-title');
titles.forEach(title => {
let text = title.textContent;
for (let [eng, pt] of Object.entries(translations)) {
if (text.includes(eng)) {
const originalText = text.replace(eng, '').trim();
title.setAttribute('data-original', originalText);
title.closest('.elementor-widget-heading').classList.add('translated-title');
break;
}
}
});
}
translateTitles();
});
</script>
