Tanto en su versión de tema como de plugin, Divi es una de las formas más populares y flexibles de crear un sitio web de WordPress. Pero si bien Divi te brinda mucha flexibilidad de diseño, no hay una forma integrada de traducir sitios de Divi, que es la razón por la que probablemente estás aquí leyendo esta publicación.
En este tutorial, aprenderás a traducir una página web creada con Divi utilizando la versión gratuita del plugin TranslatePress.
Si hay algo Divi a los usuarios les encanta, su diseño visual y TranslatePress aporta ese mismo enfoque visual a la creación de un sitio multilingüe con Divi.
Al final de esta publicación, podrás usar una interfaz visual para traducir todo tu contenido de Divi, incluyendo imágenes, formularios, botones y más, simplemente señalando y haciendo clic en una vista previa en vivo de tu sitio:
¿Listo para aprender a traducir cualquier sitio web de Divi? Empecemos…
*Este método funcionará tanto para la versión del tema como para la versión del plugin de Divi.
Cómo traducir sitios web de Divi con TranslatePress: paso a paso
Aquí tienes una vista de pájaro del proceso de creación de un sitio web multilingüe con Divi:
- Diseña tu contenido usando el Divi Builder
- Configura los ajustes básicos de TranslatePress
- Utiliza la interfaz del editor de traducción visual ’TranslatePress»
- Agrega un selector de idioma frontend a tu sitio multilingüe de Divi
1. Crea tu contenido con Divi
Divi viene tanto en versión de tema como de plugin de Divi Page Builder. De cualquier manera, podrás usar una interfaz visual de arrastrar y soltar para diseñar tu contenido. O, también puedes usar una interfaz de backend abstracta si prefieres ese enfoque.
Para empezar, usa Divi para crear todo el contenido que quieras usar en tu sitio. No te preocupes por el idioma en este momento, simplemente crea el contenido en el idioma que quieras que sea el idioma predeterminado de tu sitio.
Para este tutorial, elegiremos uno de los muchos diseños prediseñados de Divi, ya que proporcionará mucho contenido de ejemplo para que lo traduzcamos. También puedes crear tu contenido desde cero, aunque, depende totalmente de ti:
Divi viene con más de dos mil plantillas preconstruidas, junto con 342 “Paquetes de Diseño” dedicados, que son básicamente un conjunto temático de plantillas para un nicho de sitio web específico.
Después de importar la plantilla de página de inicio de uno de los paquetes de diseño de sitios web de servicios eléctricos y personalizarlo un poco, así es como se ve nuestro sitio Divi:
No dudes en personalizar cualquier parte del contenido y reorganizarlo según sea necesario mediante la interfaz de arrastrar y soltar de Divi; independientemente de los elementos que añadas con Divi, podrás traducirlo todo con TranslatePress en los siguientes pasos.
¡Puedes editar cualquier texto, cambiar el estilo, añadir formularios, controles deslizantes, etc. Siéntete libre de hacerlo!
2. Configurar los ajustes básicos de TranslatePress
Una vez que hayas terminado con tu contenido de Divi, ya estarás listo para traducirlo con TranslatePress.
Antes de hacer eso, sin embargo, necesitas realizar algunos pasos básicos de mantenimiento, como elegir qué idiomas quieres ofrecer tu contenido de Divi en.
Para empezar, instala y activa el plugin gratuito TranslatePress. Una vez que hayas activado el plugin, ve a Configuración → TranslatePress configurar los ajustes básicos.
Tu primera opción es qué idiomas usar en tu sitio. Usa el Idioma predeterminado menú desplegable para elegir el idioma en el que se encuentra actualmente su sitiopor ejemplo inglés). Luego, usa el Todos los idiomas sección para añadir tantos idiomas nuevos como sea necesario.
La versión gratuita de TranslatePress te permite añadir un idioma más, pero puedes actualizar a la versión de pago para traducir tu contenido de Divi a ilimitados nuevos idiomas:
Otra opción importante aquí es si se utilizará o no la traducción automática, que puede configurar desde Traducción Automática pestaña.
Si quieres ahorrar tiempo, puedes usar la API Google Translate para traducir automáticamente el contenido 100% de tu sitio web, incluido todo el contenido de Divi. A continuación, puedes volver atrás y pulir manualmente las traducciones donde sea necesario:
La versión premium de TranslatePress también incorpora compatibilidad con el Traducción automática DeepL servicio.
Siéntete libre de revisar las otras configuraciones, ya que podrías encontrar algo relevante para tu sitio de Divi. Luego, una vez que guardes tus cambios, estarás listo para empezar a traducir el contenido de Divi.
3. Utiliza el editor visual TranslatePress para traducir sitios web de Divi
Para traducir tu sitio web de Divi, utilizarás el editor visual de traducción en el front-end de TranslatePress.
Para acceder a este editor, abre la página de Divi que deseas traducir en el front-end de tu sitio. Luego, haz clic en Traducir página botón en la barra de herramientas de WordPress:
Esto abrirá el editor de traducción visual, que te permite traducir 100% del contenido de tu sitio web.
Para traducir un contenido específico, simplemente colócalo sobre él y haz clic en el icono del lápiz azul o verde. Esto abrirá el editor de traducciones para ese contenido en la barra lateral, donde podrás hacer tus modificaciones:
Tan pronto como guardes tu traducción, el texto traducido aparecerá en el editor en tiempo real cuando veas ese idioma, lo que te permitirá asegurarte de que el diseño de tu sitio aún se vea genial:
Para moverse rápidamente entre diferentes traducciones, puede Utiliza los atajos de teclado de ’TranslatePress».
Lo poderoso de este enfoque es que puedes usarlo para todo del contenido de tu sitio, incluyendo imágenes, enlaces de botones, elementos del menú, ventanas emergentes¡Todo!
Veamos algunos ejemplos...
Traducir botones/enlaces en Divi
Como viste arriba, nuestro sitio Divi contiene dos botones/enlaces:
- Botón de envío – va a una página interna que muestra un mensaje de éxito.
- Llamada para reservar: lleva a los visitantes a un sitio web de terceros para concertar una cita (Calendario de Google).
Para traducir un botón, solo tienes que pasar el cursor sobre él y hacer clic en el icono del lápiz azul.
Lo que es diferente, sin embargo, es que puedes traducir ambos el texto del botón y el enlace del botón. Para nuestro ejemplo del sitio eléctrico, esto significa que puede enviar a los visitantes de habla hispana directamente a la versión en español de Google Calendar:
TranslatePress modificará automáticamente los enlaces internos para que dirijan a la versión en el idioma correcto; no es necesario que edites manualmente los enlaces internos..
Traducir Elementos, Widgets, Pies de página, etc. de Divi.
El modelo TranslatePress no solo sirve para el contenido adentro el Divi Builder – también permite traducir contenido del tema Divi (o de cualquier otro tema de WordPress). Esto incluye tu menús de navegación y cualquier widget que estés utilizando en tu barra lateral o pie de página. También detecta y te permite editar/traducir cadenas gettext añadido por el tema Divi o el plugin de constructor de páginas.
Una vez que hayas traducido el texto, TranslatePress aplicará automáticamente esa traducción a todo tu sitio web:
Traduciendo Imágenes
Además del contenido de texto, TranslatePress también te permite “traducir imágenes. Es decir, puedes usar diferentes imágenes dependiendo del idioma en el que el visitante esté navegando.
Por ejemplo, puedes usar un logotipo diferente para idiomas distintos. O puedes traducir una imagen que se usa en tu contenido para una mejor localización.
Para traducir una imagen, puedes usar el mismo enfoque: pasa el cursor sobre ella y haz clic en el icono del lápiz azul. Luego, puedes usar la barra lateral para elegir una imagen nueva de tu Biblioteca de Medios de WordPress o escribir la URL de una imagen externa.
Así se ve la traducción del logotipo en el tema Divi:
Y funciona igual para las imágenes en tu contenido, o incluso imágenes en un deslizador que creaste con el módulo de slider de Divi:
Traduciendo Formularios
Finalmente, veamos un ejemplo más específico que es relevante cuando creas un sitio multilingüe con Divi: tus formularios.
Prácticamente todos los sitios web de Divi utilizarán el formulario de contacto o los módulos de suscripción por correo electrónico de Divi, por lo que traducir esos módulos es una consideración importante al traducir un sitio de Divi.
Como probablemente ya habrás adivinado, TranslatePress te permite utilizar el mismo método de «apuntar y hacer clic» para traduce tus formularios, también.
Incluso puedes traducir el texto de marcador de posición que aparece adentro campos del formulario:
¡Y ya está! Tanto si vas a traducir texto, botones, enlaces, elementos de menú, widgets o cualquier otra cosa, traducir tu sitio web de Divi es tan sencillo como apuntar y hacer clic con TranslatePress.
4. Configura tu selector de idioma del frontend
Por defecto, TranslatePress añade un selector de idioma a la esquina inferior derecha de su sitio, que probablemente vio en las capturas de pantalla de ejemplo anteriores.
Sin embargo, si quieres modificar ese comportamiento predeterminado, TranslatePress también te ofrece otras opciones para elegir dónde añadir el selector de idioma a tu sitio web multilingüe de Divi.
Una opción es añadirlo como un elemento del menú de navegación, lo cual puedes hacer añadiendo el Cambiador de Idioma elementos del menú (Apariencia → Menús):
Así es como se ve en el front-end de tu sitio:
También puedes mostrar un selector de idioma con el
Crea un sitio web multilingüe con Divi hoy mismo
Divi te da el poder de construir un sitio web hermoso de WordPress con un editor visual de arrastrar y soltar.
Además, TranslatePress te permite tomar ese bonito diseño y traducirlo a otros idiomas mediante una experiencia de traducción visual igualmente sencilla.
Cuando combinas los dos, puedes construir verdaderamente personalizado Sitios de WordPress accesibles a visitantes de todo el mundo.
Todo lo que viste arriba se puede hacer con el Versión gratuita de TranslatePress en WordPress.org. Para mayor flexibilidad, sin embargo, puedes considerar Pasarse a la versión premium de TranslatePress, que ofrece…
- Soporte para campos dinámicos (genial si estás usando Funcionalidad de contenido dinámico de Divi)
- Soporte más detallado para SEO multilingüe
- Soporte para idiomas de traducción ilimitados
- Integración con DeepL para traducción automática
- Cuentas de traductor dedicadas
- La capacidad de navegar por su sitio como diferentes roles de usuario (genial para sitios con contenido restringido)
Para saber más sobre las funciones premium, ir a la página de precios.