Ámalos o ódialos, los controles deslizantes y los carruseles son opciones de diseño populares para muchos sitios de WordPress. Pero si buscas crear un sitio web multilingüe en WordPress, descubrir cómo traducir controles deslizantes en WordPress puede resultar difícil porque el contenido del control deslizante existe fuera del editor de WordPress.
Es posible que estés usando un plugin de control deslizante dedicado o el widget de control deslizante en un plugin de maquetación de páginas como Elementor. De cualquier manera, deberás poder traducir esos controles deslizantes para garantizar una experiencia multilingüe coherente para tus visitantes.
Para ayudar, te vamos a mostrar cómo traducir los controles deslizantes en WordPress utilizando una interfaz sencilla y no técnica como esta:

Este método funcionará con todo plugins de control deslizante y podrás seguir este tutorial gratis – no es necesario comprar un complemento prémium solo para traducir tus controles deslizantes de WordPress.
Lo que necesitas para traducir controles deslizantes en WordPress
Para seguir este tutorial y crear controles deslizantes multilingües en WordPress, solo necesitarás dos cosas:
- Tu control deslizante – crearemos un control deslizante de ejemplo con el gratuito Complemento Smart Slider 3, pero el método que describiremos funcionará con cualquier complemento/widget de control deslizante, incluidos MetaSlider, Slider Revolution, Soliloquy, Elementor, Divi Builder, y más.
- TranslatePress – un plugin de traducción de WordPress fácil de usar que te permite traducir automáticamente los controles deslizantes (no se necesita compatibilidad especial). Puedes descargarlo gratis desde WordPress.org y la versión gratuita es todo lo que necesitas para seguir este tutorial.
Como viste en el GIF de arriba, TranslatePress te permite traducir todo tu sitio web utilizando una interfaz visual que se parece mucho al Personalizador de WordPress.
Puedes traducir manualmente todo tu contenido o utilizar la traducción automática de Google Traductor (y luego refinar manualmente las traducciones si es necesario).
A continuación, te mostraremos todos los pasos del proceso, desde la creación de tu slider con Smart Slider 3 hasta su traducción con TranslatePress. Si ya tienes un slider que quieres traducir, puedes saltarte el primer paso y pasar directamente al segundo para ir a la parte de la traducción.
1. Crear un control deslizante con Smart Slider 3
Activo en más de 600,000 sitios de WordPress con una calificación de 4.9 estrellas en más de 700 reseñas, Smart Slider 3 es uno de los plugins de sliders para WordPress más populares que encontrarás.
Hay una buena razón para ello: Smart Slider 3 es sencillo y gratuito, pero aun así incluye funciones que muchos otros complementos de sliders solo ofrecen en una versión prémium.
Smart Slider 3 te permite diseñar cada diapositiva utilizando una interfaz visual de arrastrar y soltar y diferentes capas de contenido. Puedes añadir todo tipo de contenido, como imágenes, texto, botones y más.
Si no quieres empezar desde cero, Smart Slider 3 también incluye infinidad de plantillas prediseñadas que puedes utilizar como punto de partida.
Una vez que instales y actes el plugin, dirígete a la Smart Slider pestaña. Allí, puedes crear una Nuevo control deslizante desde cero o elegir entre el Biblioteca de plantillas. Para este tutorial, usaremos una de las plantillas gratuitas llamada “Free Layer Slider”:

Desde allí, puedes usar la interfaz visual de arrastrar y soltar para personalizar tu contenido:
- Editar el texto
- Cambiar la URL del botón
- Cambiar imágenes
- Etc.
Añadiremos dos botones: uno a un enlace interno y el otro a un enlace externo. En el siguiente paso, también podrás “traducir” estos enlaces de los botones. El enlace interno irá automáticamente a la versión de idioma correspondiente y podrás cambiar el enlace externo para cada idioma (si lo deseas):

Una vez que termines de configurar y diseñar tu control deslizante, puedes mostrarlo en la interfaz pública de tu sitio usando un código corto o un bloque dedicado:

Ahora, traduzcámoslo...
2. Configurar el complemento TranslatePress
Antes de que puedas empezar a traducir tu control deslizante, deberás configurar unos cuantos elementos básicos en el Complemento TranslatePress, como los idiomas que quieres ofrecer y si quieres utilizar o no la traducción automática de Google Translate.
Para empezar, instala el plugin gratuito TranslatePress de WordPress.org y, a continuación, ve a Configuración → TranslatePress en tu panel de WordPress.
Primero, querrás elegir los idiomas que usarás en tu sitio. Selecciona el idioma actual de tu sitio en el Idioma predeterminado desplegable. Luego, elige el nuevo idioma al que deseas traducir tu control deslizante (y otro contenido):

La versión gratuita de TranslatePress te permite traducir tu página web a un idioma adicional, mientras que la versión premium tiene soporte para un número ilimitado de idiomas.
Más abajo, también puedes personalizar la apariencia de tu selector de idioma y elige dónde usarlo en tu sitio web multilingüe.
Debajo de Traducción automática En la pestaña, puedes elegir si deseas que tu contenido se traduzca automáticamente (utilizando Google Translate o DeepL). Aunque utilices la traducción automática, podrás editar manualmente tus traducciones:

Te recomendamos revisar también las demás configuraciones. Puedes tomar las decisiones que mejor se adapten a tu situación.
3. Iniciar el Editor de Traducción para Traducir Control Deslizante
Llegados a este punto, ya está preparado para empezar a traducir su(s) control(es) deslizante(s).
Para empezar, ve a la página que contiene tu control deslizante y haz clic en Traducir página botón en la barra de herramientas de WordPress:

Esto abrirá la interfaz de traducción visual; debería ver una barra lateral a la izquierda y una vista previa en vivo de su sitio web a la derecha.
Para traducir el texto en tu control deslizante, pasa el cursor sobre él y haz clic en el icono del lápiz azul. Esto abrirá el texto en la barra lateral, donde podrás agregar tu traducción:

Puedes repetir el mismo paso para traducir otro texto.
También puedes seguir interactuando con tu control deslizante. Por lo tanto, para traducir texto en diferentes diapositivas, puedes usar las flechas para navegar entre ellas tal como lo harías si estuvieras navegando por tu sitio en vivo.
Por ejemplo, así es como se ve la traducción de la segunda diapositiva:

TranslatePress también te ayuda a traducir algo más que texto. Por ejemplo, puedes utilizar diferentes imágenes de fondo en las diapositivas en función del idioma del usuario. Para “traducir” una imagen, puede usar el menú desplegable en la esquina superior izquierda para seleccionar la imagen correspondiente:

Luego podrás elegir una imagen de fondo diferente de tu biblioteca multimedia:

Como mencionamos anteriormente, también puedes “traducir” las URL de destino. Por ejemplo, si haces clic para traducir el botón “Enlace externo”, podrás traducir ambos el texto ancla del enlace, así como la URL de destino a la que lleva a los visitantes:

En el caso de los enlaces internos de tus sliders, TranslatePress reescribirá automáticamente las URL para redirigir a los usuarios a la versión en el idioma correcto. Por ejemplo, si el enlace original es yoursite.com/hello-world, TranslatePress reescribiría automáticamente la URL para ir a yoursite.com/es/hello-world cuando una persona navega en español.
¡Así es como se traducen los controles deslizantes en WordPress!
¡Y ahí lo tienes! Una forma completa de traducir todo en tu control deslizante, desde el texto hasta las imágenes y URL.
No hace falta perder el tiempo con código ni con plugins de integración: TranslatePress es compatible con los sliders de forma predeterminada y te permite traducir todo utilizando una interfaz visual sencilla.
Y esto es lo mejor:
Puedes utilizar exactamente el mismo método para traducir el resto de tu sitio web, incluido el contenido de tu tema y de otros plugins. Si quieres ver cómo funciona TranslatePress con otros tipos de contenido de WordPress, tenemos un montón de tutoriales que te pueden interesar sobre cómo traducir…
- Productos de WooCommerce
- Bloques de Gutenberg
- Campos personalizados
- Tipos de publicaciones personalizadas
- Formularios de WordPress
- Menús de WordPress
- Imágenes
- Contenido emergente
Puedes traducir todos esos tipos de contenido gratis.
Pero si de verdad te planteas crear una página web multilingüe con WordPress, también hay algunas ventajas que debes tener en cuenta si optas por la versión premium de TranslatePress.
La versión prémium añade muchas funciones útiles como:
- Mayor soporte para SEO multilingüe para ayudarte a posicionar el contenido de cada idioma en Google.
- La capacidad de usar idiomas ilimitados en su sitio. La versión gratuita admite la traducción de su sitio a un idioma adicional.
- Cuentas especiales de WordPress para traductores, que te ayudan a trabajar con autónomos o servicios de traducción.
- La capacidad de previsualizar el contenido de su sitio como diferentes roles de usuario, lo cual es útil si muestra contenido dinámicamente según el rol del usuario.
- Detección automática del idioma del usuario, para que puedas redirigir a los visitantes a su propio idioma según el idioma del navegador o la dirección IP.
TranslatePress Multilingüe
Para saber más, dirígete aquí para ver todas las funciones prémium.
¿Todavía tienes alguna pregunta sobre cómo traducir controles deslizantes en WordPress? ¡Háznoslo saber 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.
¡Hola, gente increíble!
He utilizado translatepress para traducir mi página web. Sin duda voy a contratar el plan Pro para poder editar el SEO y demás. Mi página está diseñada con Elementor Pro y vuestro plugin ha funcionado a la perfección para traducir todo el contenido… pero hay una cosa: el slider.
esto es lo que usé
https://docs.elementor.com/article/93-slides
Y no me sale el lápiz mágico azul para traducir el texto, cuando es diferente en cada diapositiva. ¿Hay alguna solución alternativa?
Atentamente
hugo
PD, el control deslizante en cuestión está en la página de inicio y en nuestra página de cervecería
Hola Hugo,
La traducción de los sliders de Elementor debería funcionar sin problemas con TranslatePress.
Quizás puedas comunicarte con nuestro canal de soporte para que podamos analizar de cerca lo que está pasando. Estoy seguro de que llegaremos al fondo del asunto 🙂
Bueno, no funciona bien como traductor para Slider Revolution ni para ningún otro plugin de slider, si no podemos mover elementos que tienen diferente tamaño en diferentes idiomas. Por supuesto, funciona bien cuando usamos solo elementos centrados. Pero yo uso campos de texto que vienen de la izquierda y de la derecha y se encuentran en la misma fila (no en el centro) – para diferentes idiomas – se ve como un desastre total 🙁
Oye, cuando se cambia el idioma mediante TranslatePress, se añade una clase al cuerpo de la página que indica el idioma actual.
En un caso como el que describes, con algo de CSS personalizado, harías uso de esa clase para reorganizar el texto si fuera necesario.