WPBakery es uno de los principales constructores de páginas para WordPress, utilizado en más de 5.8 millones de sitios en todo el mundo. Conocido por sus editores duales de arrastrar y soltar y su amplia integración con temas, especialmente a través de plataformas como ThemeForest, ha sido una opción predilecta para desarrolladores, agencias y propietarios de sitios desde 2011.
A diferencia de otros constructores, WPBakery es muy preferido por usuarios no técnicos debido a su facilidad de uso, lo que facilita que las agencias y los desarrolladores entreguen sitios web a clientes que desean actualizar contenido por su cuenta.
En este tutorial te mostraremos cómo sitios web creados con WPBakery utilizando TranslatePress. WPBakery es totalmente compatible con TranslatePress, y te guiaremos a través de los pasos básicos para traducir cualquier página o entrada en su editor de interfaz de usuario con TranslatePress.
Crear un sitio web con WPBakery Page Builder
Como creador de páginas, WPBakery te permite controlar el área de contenido de las publicaciones, páginas y tipos de publicación personalizados. El encabezado y el pie de página, sin embargo, dependen de tu tema de WordPress.
WPBakery no ofrece una versión gratuita, pero puedes Pruébalo en un sitio de demostración gratuito. Una licencia regular cuesta $69 por cada sitio, que incluye actualizaciones gratuitas de por vida y un año de Support Plus. Puedes renovar el servicio de asistencia anualmente, con descuentos por suscripción que pueden llegar hasta 50%. También hay disponibles planes para grandes volúmenes y multisitio.
WPBakery tiene ambos un editor de frontend y un editor de backend, que pueden ser usados indistintamente.
El editor de backend proporciona una visión general detallada de la estructura de la página y es bueno para rastrear elementos utilizados. Pero en este tutorial, usaremos el editor de frontend, ya que nos permite ver cómo se verá la página en vivo mientras la editamos, gracias a su interfaz visual.
Creando nuestra primera página con WPBakery Page Builder
Puedes comprar una licencia de WPBakery en sitio web oficial. Después, puedes instalar y activarlo tal como lo harías con cualquier otro plugin.
Luego, desde tu panel de WordPress, ve a crear una nueva página. Desde allí, podrás seleccionar entre el editor de backend y el de frontend.
Una vez que abras el editor, podrás seleccionar empieza desde el diseño predeterminado de tu tema de WordPress o desde una página en blanco. Empezaremos con una página en blanco.
Desde allí, se te pedirá que comiences agregando elementos o plantillas a tu página.
Para agilizar las cosas, utilizaremos uno de los plantillas prediseñadas de página completa disponible en WPBakery. Puedes acceder a la biblioteca de plantillas desde el editor haciendo clic en el “Plantillas” icono en la barra de navegación. Para descargar una plantilla, simplemente pasa el cursor sobre ella y haz clic en el botón de descarga.
Seleccionamos la plantilla “Layout de Negocios Página Completa”. Cada elemento puede ser personalizado, reorganizado y duplicado (no solo entre páginas, sino también entre sitios).
También puedes guardar ajustes de ciertos elementos como preajustes o guarda tus propios diseños como plantillas para reutilizar más adelante. Puedes repetir el mismo proceso con otras páginas o publicaciones en tu sitio de WordPress.
Si recién estás comenzando con WPBakery y necesitas más orientación, te recomendamos que veas el tutorial completo para principiantes, que cubre los conceptos básicos del uso del page builder:
Traducción de un sitio web de WPBakery con TranslatePress
Ahora que hemos creado una página web de WordPress con WPBakery, vamos a convertirla en multilingüe con TranslatePress.
Añadir un segundo idioma a tu sitio de WPBakery
Para este tutorial, traduciremos el sitio que creamos con WPBakery a un segundo idioma. Vayamos con el español, ya que es el segundo idioma más hablado del mundo.
Primero, instalar y activar el complemento multilingüe TranslatePress.
Después de activar el plugin, verás “Traducir sitio” en la barra de administración de tu WordPress.
Pasa el cursor sobre él y haz clic Configuración o haz clic en TranslatePress debajo Configuración en tu panel de administración de WordPress).
Esto te llevará al TranslatePress Ajustes Generales página. Aquí podemos agregar el segundo o incluso el tercer y cuarto idioma en el que queremos que nuestra página y sitio creados con WPBakery se traduzcan automáticamente. Para nuestro sitio, el inglés está configurado como nuestro idioma predeterminado, por lo que agregaremos “español” (incluso puede seleccionar el dialecto).
Elegir y personalizar el selector de idioma del frontend
A continuación, elegiremos cómo nuestros visitantes pueden cambiar a su idioma preferido.
En la pestaña «Selector de idioma», TranslatePress ofrece un montón de opciones de personalización para mostrar un botón de idioma o un menú desplegable. Puedes mira este video para aprender todo sobre este personalizador, pero por ahora, simplemente activemos Conmutador flotante y elige un diseño preestablecido.
Esto creará automáticamente un selector de tipo desplegable que permanecerá en la parte superior de cada página de su sitio web. Si desea personalizarlo aún más, puede desplazarse hacia abajo en la página y ajustar colores, bordes, formas de banderas y mucho más.
Traducir automáticamente una página de WPBakery
Ahora que tienes tus idiomas agregados y el selector en su lugar, todo lo que necesitas son las traducciones.
Ahora bien, si quieres que esto se haga lo más rápido posible, TranslatePress AI es la mejor opción. Puedes activar las traducciones automáticas accediendo a la Traducción Automática pestaña en el TranslatePress Configuración.
Cada licencia TranslatePress incluye un número determinado de palabras de IA que se pueden utilizar para traducciones automáticas; aquí podrás hacer un seguimiento de tu consumo.
Si prefieres utilizar tu propia API de Google Translate o DeepL, puedes elegir una de estas dos opciones de la Motores Alternativos sección justo debajo. Sin embargo, ten en cuenta que esto requerirá cierta configuración de tu parte para conectar tu clave API a TrnalsatePress.
Ahora, simplemente Guardar nuestros cambios en la parte inferior de la página y vaya a probar todo visitando cualquier página de nuestro sitio.
En la esquina inferior derecha (si mantuviste la configuración predeterminada), verás el selector de idioma. Simplemente colócate sobre él y haz clic en el idioma al que deseas traducir la página, y esta se traducirá automáticamente.
Ahora cada vez que alguien visite cualquier página de tu sitio, podrá seleccionar su idioma preferido.
Traducir manualmente una página de WPBakery
Ahora, veamos cómo traducir manualmente una página concreta con TranslatePress. Esto resulta útil si quieres editar alguna de las traducciones automáticas o si, sencillamente, prefieres optar por la traducción manual desde el principio.
Abre la página que construimos con WPBakery en los pasos anteriores en tu navegador y, desde la barra de administración, haz clic en Página.
Esto abrirá la página en el editor visual de TranslatePress, donde podrás traducir todas las cadenas de la página y realizar correcciones en las traducciones si es necesario.
Todo lo que necesita hacer es seleccionar la cadena del menú desplegable en el lado izquierdo (debajo del idioma predeterminado) o pasar el cursor sobre ella y hacer clic en el ícono del lápiz junto a ella.
Luego, en la segunda ventana de idioma (“Al español” en nuestro caso), haga los cambios necesarios. Si hay alguna sugerencia, estará disponible a continuación.
Lo mismo se puede hacer con todos los elementos de WPBakery en la página, ya sea un botón, un elemento de derechos de autor o incluso un imagen.
Además, TranslatePress también puede ayudarte a traducir elementos del menú, formularios, y, aun Productos de WooCommerce, que se puede integrar en páginas de WPBakery.
No olvides hacer clic “Guardar” después de cada edición.
Convierte tu diseño de WPBakery en una experiencia multilingüe
Y con esto terminamos nuestro tutorial. Como puedes ver, traducir cualquier sitio web, página, entrada o elemento creado con WPBakery es ahora más fácil que nunca gracias a TranslatePress. Además, es muy intuitivo y sencillo, ¡así que tu sitio web de WPBakery estará listo para ser multilingüe en un abrir y cerrar de ojos!
Aprende también cómo mostrar/ocultar elementos multilingües de WPBakery según el idioma.