Visual Composer es uno de los constructores de páginas más populares para WordPress. En este tutorial, profundizaremos en cómo Convertir sitios web de Visual Composer utilizando TranslatePress.
Repasaremos los sencillos pasos necesarios para construir un sitio multilingüe utilizando Visual Composer junto con TranslatePress.
Los dos complementos son totalmente compatibles, por lo que puedes utilizar TranslatePress para traducir cualquier tipo de elemento o plantilla disponible en Visual Composer, directamente desde la interfaz de usuario. Todo ello mediante una interfaz de traducción visual muy intuitiva.
Creando tu sitio web con Visual Composer
Visual Composer tiene un editor visual de arrastrar y soltar que hace que la creación de cualquier página de tu sitio web sea rápida y fácil, sin tener que escribir una sola línea de código.
Viene en una versión gratuita y otra de pago. La versión gratuita ofrece elementos estándar para abordar tanto la estructura como el contenido de tu sitio. Puedes agregar fácilmente filas y dividirlas en columnas. Luego, rellénalas con contenido en forma de texto, imágenes, botones, elementos de menú, shortcodes y más.
Los planes de pago te dan acceso a cientos de elementos de contenido premium y plantillas prediseñadas (a través del Visual Composer Hub). Esto puede ayudarte a acelerar las cosas y no tener que empezar desde cero con la estructura y el diseño de tu sitio.
Para este tutorial y con el fin de agilizar las cosas, comenzaremos usando una plantilla predefinida que ya contiene bastantes elementos. También puedes empezar desde cero y crear algo único para tu propio sitio web.
Creando nuestra primera página con Visual Composer
Puedes comprar o descargar Visual Composer gratis desde su sitio web. Luego, simplemente instálalo y actívalo como cualquier otro plugin de WordPress.
Una vez activado podrás empezar y crear tu primera página.
Serás llevado a un editor visual de front-end y se te pedirá que le des un nombre a tu página, selecciones un diseño, y luego procedas a agregar elementos y/o usar una plantilla.
He seleccionado una plantilla de Página de Producto Único, explorando el Visual Composer Hub. Esta plantilla de restaurante incluye una sección de encabezado, descripción, reseñas y características. Puede ser una elección inspiradora para ventas en línea o reseñas de productos.
Así se ve mi página después de cargar la plantilla. Puedo personalizar la plantilla para incluir otras páginas de tu sitio, como un blog, menú, galería, ubicación, etc.
Puedes mover elementos fácilmente, personalizar su configuración, opciones de visualización así como duplicar ciertos bloques para ir más rápido. Hay mucha flexibilidad que te invito a explorar.
Puedes aplicar el mismo proceso visual de arrastrar y soltar para crear todas las páginas restantes de tu sitio web.
Traducir sitios web creados con Visual Composer utilizando TranslatePress
Ahora que hemos creado nuestra página web con Visual Composer, veamos lo fácil que es convertirla en multilingüe con TranslatePress.
Añadir un segundo idioma a tu sitio
Para este tutorial, veremos cómo traducir la página que creamos usando Visual Composer a un segundo idioma (digamos italiano).
Primero instalar y activar el complemento multilingüe TranslatePress.
Tras activar TranslatePress, verás que aparece un nuevo Traducir sitio artículo añadido en la barra de administración.
Solo pasa el ratón sobre él y haz clic Configuración o puedes hacer clic en Configuración elemento de menú y seleccionar TranslatePress). Esto te llevará a la página de configuración de TranslatePress.
Aquí podemos agregar los idiomas en los que deseamos traducir la página/sitio web creado con Visual Composer.
El inglés es nuestro idioma predeterminado, así que también añadiremos “Italiano”. Hay algunas otras configuraciones (como Google Traductor integración para traducción automática, o personalizar la selector de idioma), pero podemos saltarlos por ahora y hacer clic Guardar cambios.
Traduciendo tu página usando el editor de traducción de front-end
Ya estamos listos para empezar a traducir nuestro sitio de Visual Composer.
Para empezar a traducir tu sitio al italiano, puedes hacer clic en Traducir sitio pestaña azul en la configuración de TranslatePress o, simplemente, ve a la página que quieras traducir y haz clic en el Traducir página elemento del menú de la barra de administración (junto a Editar con Visual Composer).
Esto abrirá un editor de traducción visual de front-end donde podrás traducir cada cadena en una página y ver los cambios en tiempo real.
Todo lo que necesitas hacer es pasar el ratón sobre un texto o elemento determinado que quieras traducir, luego aparecerá un icono de lápiz y, al hacer clic en él, podrás insertar la traducción. Una vez que pulses Guardar, el texto traducido se actualizará en el editor en tiempo real. Así de simple.
El mismo proceso se puede aplicar a todos los elementos de una página, ya sea que traducir un elemento del menú, a formulario, botón, o un imagen que contiene texto. Incluso Productos de WooCommerce se puede traducir fácilmente con TranslatePress.
Puedes usar el atajos de teclado para agilizar la navegación por las cadenas de texto en una página y guardar su traducción.
Traducir un botón que contiene un enlace
Profundicemos un poco más. Como notarás debajo del “Menú de Mariscos”, hay un botón de “Descargar Menú”.
Puedes traducir fácilmente el texto del botón al italiano siguiendo los pasos anteriores, pero digamos que también quieres dar a las personas que navegan por la versión italiana de tu sitio la capacidad de descargar el menú en su propio idioma.
TranslatePress también se encarga de esto. Al pasar el cursor por encima de un elemento que contenga un enlace, además de traducir el texto, también puedes modificar el Enlace de anclaje elemento.
En este caso, he subido la versión italiana del menú y la he seleccionado como el Enlace de Anclaje para la versión italiana. Las personas que naveguen por la versión italiana del sitio podrán descargar el menú en italiano.
Ten en cuenta que, una vez que traduzcas un texto repetitivo de tu página web, TranslatePress se encarga de modificarlo en todos los lugares donde aparezca. Por ejemplo, basta con traducir un “PEDIDO ANTICIPADO”texto del botón para que todos ellos sean traducidos.
Traduciendo imágenes y controles deslizantes que contienen texto
Existen situaciones en las que durante el proceso de traducción te encuentras con imágenes que contienen texto. Texto que debería ser traducido una vez que el idioma cambie. En nuestro caso, digamos que el logo de CodHouse, necesita mostrar “Ristorante”, no “Restaurant”, cuando se navega en italiano.
Con TranslatePress es muy fácil mostrar diferentes imágenes, logos o sliders para diferentes idiomas.
Una vez que hacemos clic en el logo, notará lo fácil que es modificar las fuentes de las imágenes del logo y del héroe para la versión italiana. Puede simplemente cargar una versión diferente para el italiano.
Añadir un selector de idioma a tu sitio web
Por defecto, una vez que añadas un idioma secundario en TranslatePress, se añadirá automáticamente un menú desplegable flotante para la selección de idioma en la interfaz de tu sitio web. Básicamente, este menú seguirá al usuario en todas las páginas.
También puedes añadir un código corto selector de idioma a cualquier página o widget. También hay un elemento de menú Selector de Idioma disponible. Puedes personalizar fácilmente todos estos y elegir cuáles deben ser visibles.
Traducir el resto de tu sitio de Visual Composer
Como ya habrás podido comprobar, traducir sitios web creados con Visual Composer mediante TranslatePress es realmente intuitivo y rápido.
Simplemente navegas por el sitio, página por página, usando el editor de traducción visual, seleccionas un cierto texto o elemento, pasas el ratón por encima y haces clic en el icono del lápiz, luego introduces su traducción. Guardas y pasas al siguiente.
Haz esto con las cadenas restantes y tendrás tu página traducida en poco tiempo.
Y eso es todo. Crear una página web multilingüe con Visual Composer y TranslatePress es más fácil que nunca.
Dulce oferta de Visual Composer
Y para que sea aún mejor, nos complace compartir un código de descuento exclusivo con el que obtendrás un descuento de 20% en todos los Versiones premium de Visual Composer.
Usar el código de cupón TRANSLATEPRESS en el check-out y obtén acceso a Visual Composer Hub para descargar elementos, plantillas y extensiones exclusivos.