En esta publicación
En esta publicación
¿
Elementor es el plugin de constructores de páginas de WordPress más popular y te permite crear sitios web increíbles y dinámicos. Pero si quieres ofrecer esos sitios web en varios idiomas, necesitarás la ayuda de un plugin de terceros.
TranslatePress es un plugin multilingüe gratuito para WordPress que ofrece un soporte profundo para Elementor, permit.
En esta entrada, te mostraremos cómo puedes utilizar el plugin gratuito TranslatePress para añadir un selector de idioma a Elementor, incluyendo también la traducción de tu contenido de Elementor de forma manual o mediante herramientas como Google Translate.
Aquí tienes un ejemplo de cómo agregar un selector de idioma a una plantilla de Theme Builder, pero también obtendrás otras opciones para colocar tu selector de idioma:
Además de permitirte añadir el selector de idioma, TranslatePress también incluye otras integraciones con Elementor, como la posibilidad de mostrar u ocultar determinados widgets y secciones de Elementor en función del idioma que elija el visitante.
Antes de empezar, aquí tienes un breve tutorial en vídeo que explica cómo hacerlo rápidamente:
Pero si quieres entrar en más detalle y tomarte las cosas a tu ritmo, por favor, sigue leyendo este artículo.
¿Listo para empezar? Aquí te explicamos cómo configurarlo...
Cómo agregar un selector de idioma de Elementor gratis
Para crear tu selector de idioma, necesitas el plugin gratuito TranslatePress.
TranslatePress es un plugin multilingüe completo para WordPress, lo que significa que te ayuda tanto a traducir tu contenido como a añadir un selector de idioma en la interfaz de usuario que tus visitantes pueden utilizar.
TranslatePress te permite utilizar tanto la traducción automática como la manual (o una combinación de ambas) y podrás gestionar todas tus traducciones a través de un editor visual de «apuntar y hacer clic», igual que Elementor te permite utilizar un editor visual para crear tus diseños:
Además, TranslatePress incluye algunas integraciones especiales para Elementor, como la posibilidad de mostrar u ocultar determinados widgets y secciones en función del idioma que haya elegido el usuario.
Podrás utilizar la versión gratuita de TranslatePress para añadir el selector de idiomas y traducir el contenido de tu sitio web creado con Elementor a un nuevo idioma. Para añadir compatibilidad con un número ilimitado de idiomas y acceder a otras funciones avanzadas, también puedes cambiar a la versión de pago de TranslatePress. Nos.
TranslatePress Multilingüe
Aquí está el proceso básico:
- Instala TranslatePress y elige los idiomas;
- Personaliza tu selector;
- Traduce tu contenido.
Veamos cada paso en detalle…
1. Instala TranslatePress y selecciona los idiomas
Para empezar, instala y activa el plugin gratuito TranslatePress de WordPress.org.
Una vez que hayas activado el plugin, ve a Configuración → TranslatePress para elegir los idiomas que quieres ofrecer en tu sitio:
- Idioma predeterminado – el idioma en el que existe actualmente el contenido de tu sitio de Elementor.
- Todos los idiomas – uno o más idiomas nuevos a los que desea traducir el contenido de su sitio de Elementor. La versión gratuita admite un idioma nuevo mientras la versión premium de TranslatePress permite idiomas ilimitados.
Estos son también los idiomas que aparecerán en las opciones de tu selector de idioma.
Para conocer el proceso de instalación y configuración de TraslatePress, también puedes ver este tutorial en vídeo:
2. Personaliza tu selector de idioma de Elementor
De forma predeterminada, TranslatePress añade un selector de idioma flotante en la esquina inferior derecha de tu sitio web que incluye todos los idiomas que has seleccionado en el paso anterior. Este selector de idioma aparecerá en todas las páginas*, independientemente de si has creado la página con Elementor o no.
* Nota: si excluir cierto contenido de la traducción, el selector de idioma no aparecerá en páginas donde hayas desactivado la traducción.
Si quieres ajustar la ubicación, TranslatePress también te permite colocar el selector de idioma mediante un código corto o una opción de menú, lo que incluye modificar su comportamiento (como, por ejemplo, mostrar únicamente el nombre del idioma y ocultar la bandera).
Puedes gestionar todas estas configuraciones desde la Cambiador de Idioma pestaña del área de configuración de TranslatePress (Configuración → TranslatePress → Cambiador de Idioma).
Aquí, verá tres opciones para agregar un conmutador de idioma a su sitio de Elementor, y también encontrará muchas opciones de personalización para su apariencia y funcionamiento.
Ahora, veamos cómo puedes usar estas opciones para colocar tu selector de idioma en diseños de Elementor.
Usando el Shortcode del Conmutador de Idioma en Elementor
Por ejemplo, para añadir un conmutador flotante que permanezca en la parte superior de cada página de tu sitio y siga al lector a lo largo de su visita, simplemente activa el Conmutador Flotante. Esta es la configuración más fácil y conveniente.
Puedes aplicar simplemente un ajuste preestablecido de diseño y dejarlo así, o empezar con un ajuste preestablecido y personalizarlo para que coincida perfectamente con el diseño de tu sitio. Siéntete libre de jugar con colores, tamaños, bordes, animaciones, banderas y más.
Verás una vista previa en vivo de tu conmutador en el lado izquierdo de la pantalla que se actualiza en tiempo real a medida que realizas cambios.
A continuación, puedes personalizar su diseño: cosas como la posición en la pantalla, el ancho, el relleno o la posición de la bandera en relación con el nombre del idioma.
Si solo tiene 2 idiomas en su sitio, en la Ajustes adicionales sección podrás configurar tu conmutador para que siempre muestre el idioma opuesto al que se muestra actualmente en el sitio. Esto transformará tu menú desplegable del conmutador en un botón en el que se puede hacer clic.
Usando el Shortcode del Conmutador de Idioma en Elementor
Ahora, si deseas que tu selector tenga una posición fija en tu sitio y necesitas la flexibilidad para hacerlo, puedes usar la opción Shortcode.
Puedes personalizar este conmutador igual que la opción anterior, y luego añadirlo donde quieras en tu sitio utilizando [language-switcher] shortcode. Puedes colocarlo en cualquier lugar de tus diseños de Elementor utilizando el Código corto widget
En el Avanzado pestaña de la configuración del widget, puedes usar toda la configuración normal de Elementor para controlar el espaciado, la posición, etc.
Si estás usando Elementor Pro y su Theme Builder, también puedes incluir el shortcode del selector de idioma en las plantillas que creas con Theme Builder. Por ejemplo, podrías crear una plantilla para tus entradas de blog individuales e incluir el selector de idioma debajo del título de la entrada.
Aquí tienes un ejemplo sencillo que utiliza el bloque de código corto para colocar un selector de idioma debajo del título y la información de la publicación:
Usando el Elemento del Menú del Selector de Idiomas en Elementor
Si utilizas Elementor Theme Builder para diseñar tu propio encabezado personalizado, también puedes incluir el selector de idioma en esa plantilla de encabezado utilizando la opción de menú específica para el selector de idioma que ofrece TranslatePress.
Primero, abre la plantilla de encabezado que creaste con Elementor Theme Builder para verificar el nombre del menú que estás usando en el Menú de navegación widget. En este ejemplo, el nombre del menú es “Menú principal”:
Luego, ve a Apariencia → Menús en tu panel de WordPress para editar ese menú. Asegúrate de estar editando el menú correcto usando el menú desplegable en la parte superior. Luego, puedes agregar tu selector de idioma al menú usando el dedicado Cambiador de Idioma elementos del menú.
Puedes añadir cada idioma como un elemento de menú principal. O, puedes establecer Idioma actual como elemento principal y añade los otros idiomas como submenús (en la foto de abajo):
Una vez que guardes los cambios, verás que el selector de idioma aparece en el menú de tu plantilla de cabecera de Elementor:
Si tu sitio web de Elementor solo tiene 2 idiomas, también puedes optar por un botón de idioma en el que tu selector siempre muestre la opción de idioma alternativo. Para ello, todo lo que tienes que hacer es añadir el Idioma opuesto elemento de la lista. No es necesario agregar los idiomas al elegir esta opción.
Ahora, cuando guardes tus cambios, si tu sitio se muestra en inglés, tu selector solo mostrará español (o el idioma al que elegiste traducirlo). Una vez que el visitante cambie a español, el botón ahora mostrará inglés.
También puedes usar exactamente el mismo enfoque para agregar tu selector de idioma a una plantilla de pie de página que crees con Elementor Pro (o realmente en cualquier lugar donde utilices el Elementor's Menú de navegación widget).
3. Traduce tu contenido
Una vez que hayas añadido tu selector de idioma de Elementor (o selectores de idioma; puedes añadir varios selectores de idioma en diferentes posiciones si es necesario), tu próximo paso es traducir el contenido de tu sitio para que los visitantes puedan ver tu contenido traducido cuando elijan un idioma no predeterminado a través del selector de idioma.
TranslatePress admite dos métodos de traducción:
- Traducción automática de máquinas – Puedes generar automáticamente las traducciones de tu sitio web utilizando TraslatePress AI, DeepL o Google Translate (disponible en la versión gratuita de TranslatePress).
- Traducción manual – puedes añadir o editar manualmente las traducciones de tu sitio usando el editor visual.
También puedes mezclar y combinar los dos enfoques, de modo que podrías usar la traducción automática para generar las traducciones base de tu sitio y luego volver y ajustar manualmente esas traducciones automáticas según sea necesario.
En esta sección te mostraremos rápidamente cómo funciona la traducción. Sin embargo, si deseas una mirada detallada, también hemos escrito guías completas sobre la traducción de Elementor:
- Cómo traducir sitios de Elementor en general
- Cómo traducir el contenido de los popups de Elementor para sitios multilingües
Configurar traducción automática (opcional)
Este paso es opcional (100%); también puedes pasar directamente al siguiente paso para traducir manualmente tu contenido..
Si quieres activar la traducción automática a través de Google Translate o DeepL, ve a Ajustes → TranslatePress → Traducción automática. Habilite la funcionalidad y luego configure su servicio de traducción automática preferido.
Consejo profesional: Si utilizas cualquier versión premium de TranslatePress, puedes ahorrarte el trabajo manual de configurar las claves API de Google Translate y DeepL gracias a la función integrada TranslatePress AI solución.
Traducir tu página web con TranslatePress AI consiste en tres pasos: activar tu licencia, elegir los idiomas y habilitar la traducción automática, y ¡listo! Ya está todo hecho.
Esto hace que la traducción automática de todo el contenido de tu sitio web (incluida la metadescripción SEO) sea 100 veces más rápida.
No obstante, si por cualquier motivo prefieres este método, puedes conectarte directamente a la API de Google Translate o DeepL. Esto requiere un poco más de configuración por tu parte, pero podría suponer un mayor ahorro si tienes una página web pequeña.
Tenemos una guía detallada sobre cómo traducir WordPress automáticamente y WooCommerce, junto con guías de configuración dedicadas para ambos servicios:
Ten en cuenta, sin embargo, que la versión gratuita de TranslatePress no admite la traducción a través de la API de DeepL. Para ello, necesitarás la versión premium.
Usar el Editor de Traducción Visual
Para añadir o editar manualmente tus traducciones, puedes utilizar el editor visual de traducciones de TranslatePress, del que ya hemos hablado brevemente en esta entrada.
Para abrir el editor, ve a la pieza de contenido que deseas traducir en el front-end de tu sitio y haz clic en Traducir página opción en la barra de herramientas de WordPress:
Deberías ver una vista previa en vivo de tu sitio junto con una barra lateral a la izquierda donde puedes administrar tus traducciones. Para editar la traducción de cualquier contenido, puedes pasar el cursor sobre esa pieza de contenido en la vista previa en vivo de tu sitio y hacer clic en el ícono del lápiz.
Esto abrirá la traducción del contenido en la barra lateral, donde podrás añadir la traducción (o editar la traducción existente, si usaste traducción automática):
Puede repetir el proceso para traducir todo su contenido, ya sea que provenga de Elementor, el editor de bloques nativo de WordPress u otro plugin. También puede “traducir” imágenes para mostrar una imagen diferente según el idioma elegido por el usuario.
El proceso es siempre el mismo: hacer clic. Pero si quieres ver ejemplos en contexto para tipos específicos de contenido, tenemos muchas guías para ayudarte:
- Imágenes
- Bloques del Editor (Gutenberg)
- Campos personalizados
- Tipos de publicaciones personalizadas
- Formularios de WordPress
- Menús de WordPress
- Contenido emergente
- Deslizadores
- Productos de WooCommerce
Metadatos detrás de escena (como títulos SEO)
Con la versión premium de TranslatePress y su complemento SEO Pack, también puede utilizar este mismo enfoque para traducir información entre bastidores como Títulos y metadescripciones de Yoast SEO, por ejemplo, información de grafos de redes sociales y más.
Una vez que actualices e instales el complemento SEO Pack, podrás acceder a estas traducciones utilizando el menú desplegable en la barra lateral del editor de traducciones:
También obtendrás un nuevo Lista de cadenas sección que te permite traducir todas las diferentes URLs de las categorías en tu sitio.
Extra: Mostrar u ocultar widgets y secciones de Elementor según el idioma
Además de ayudarte a crear un selector de idioma, TranslatePress también incluye una integración especial con Elementor que te permite mostrar u ocultar determinados widgets o secciones de Elementor en función del idioma que haya seleccionado el usuario.
Por ejemplo, podrías crear un widget especial que solo se muestre para personas que navegan en inglés. O podrías crear un widget especial que se muestre para todos. excepto por gente navegando en inglés.
Podrás acceder a esta función desde la interfaz de Elementor. Cuando edites cualquier widget o sección, obtendrás dos nuevas opciones en Avanzado pestaña
- Restringir por idioma – mostrar este widget o sección solo a personas que navegan en un idioma determinado.
- Excluir por Idioma – muestra este widget o sección a todos los visitantes excepto a las personas que navegan en un idioma determinado.
Crea tu selector de idioma de Elementor hoy mismo
Con TranslatePress, puedes añadir fácilmente un selector de idioma de Elementor y traducir el contenido de tu sitio web creado con Elementor a uno o más idiomas nuevos.
TranslatePress ofrece compatibilidad inmediata para traducir contenido de Elementor, permitiéndote incluso traducir los diseños que crees con Elementor Popup Builder o Theme Builder.
Además, también dispondrás de integraciones especiales con Elementor, como mostrar u ocultar widgets o secciones en función del idioma que el usuario haya seleccionado en el selector de idioma.
Puedes empezar con la versión gratuita de WordPress.org para traducir tu sitio a un nuevo idioma y acceder a todas las configuraciones del selector de idioma.
Entonces, actualizar a la versión premium para poder añadir idiomas ilimitados, traducir metadatos de SEO y redes sociales, y acceder a otras funciones útiles como:
- Soporte de DeepL para traducción automática.
- Redirigiendo automáticamente a los usuarios a sus idiomas preferidos.
- Cuentas de traductor.
- Mostrar menús distintos en función del idioma del usuario (en lugar de solo traducir el mismo conjunto de elementos del menú).
TranslatePress Multilingüe
¿Todavía tienes alguna pregunta sobre cómo trabajar con el selector de idioma de tu sitio de Elementor? ¡Infórmanos en los comentarios!
Si encontraste útil esta publicación, por favor visita nuestro Canal de YouTube, donde subimos constantemente tutoriales en video cortos y fáciles de seguir. También puedes seguirnos en Facebook y Twitter ser el primero en enterarte cada vez que publicamos.
