¿Cómo usar el editor de contenido WPBakery de tu sitio web WordPress?

Introducción al constructor de páginas WPBakery

Ahora que tienes instalado el Constructor de Páginas WPBakery, es hora de empezar a configurar el plugin. En el panel de WordPress deberías ver la opción Visual Composer. Haz clic en ella para abrir la página de configuración.

La pestaña Configuración general contiene opciones simples para habilitar o deshabilitar la acumulación de elementos responsivos en pantallas pequeñas (de modo que puede tener una fila estándar de tres columnas que se convierta en tres filas de una sola columna en lugar de reducir la fila de tres columnas en dispositivos móviles), seleccionar un subconjunto de fuentes de Google y un botón de descanso para volver a activar las visitas guiadas de WPBakery Page Builder.

Si tu sitio web utiliza varios roles de usuario, el Administrador de Roles de WPBakery Page Builder te resultará muy útil. Esta página de configuración te permite restringir el acceso de los usuarios a diversas funciones de Visual WPBakery Page Builder según su rol. De esta forma, puedes permitir que los administradores accedan a todas las funciones, mientras que los editores solo pueden acceder a las páginas del blog y a los colaboradores a nada. Ya lo mencionamos durante la instalación, pero la  pestaña «Licencia del producto» es donde puedes verificar tu código de licencia si compraste tu propia copia del plugin. Si tu copia de WPBakery Page Builder venía con un tema, puedes ignorar esta sección.

Elementos del generador de páginas

El Constructor de Páginas de WPBakery incluye más de 34 elementos estándar para muchas funciones que querrás añadir a tus páginas (la captura de pantalla anterior los muestra todos, además del elemento Contact Form 7, del que hablaremos más adelante). Muchos de los elementos incluyen opciones adicionales de colores, bordes, relleno, márgenes, CSS personalizado, animaciones y más. Aquí tienes un breve resumen de lo que incluye:

• Las filas son la página de tus páginas. Usarás el elemento de fila para crear columnas e insertar todos los demás elementos de página.
• Los bloques de texto son exactamente lo que parecen: bloques de texto. Al utilizar el editor WYSIWYG estándar de WordPress, puede agregar y formatear texto con este módulo.
• Los iconos incluyen iconos de fuentes de las siguientes bibliotecas de iconos: FontAwesome, Open Iconic, Typicons, Entypo, Linecons y Mono Social.
• Separador y Separador con texto son formas de crear saltos de línea (y/o texto) entre las secciones que crea en sus páginas.
• Los cuadros de mensajes son ideales para agregar notas, alertas u otros mensajes en caja.
• Facebook, Tweet, Google+ y Pinterest son botones simples para compartir en redes sociales que puedes agregar para que los usuarios compartan la página que estás creando.
• Las preguntas frecuentes son botones que se pueden usar para agregar contenido oculto que los usuarios pueden revelar a medida que leen su página.
• Una imagen única es justamente eso: una imagen sencilla con opciones añadidas de tamaño, animación, enlace y más.
• Las pestañas, los recorridos y los acordeones  son similares a las preguntas frecuentes en el sentido de que contienen contenido oculto o contraíble, pero con la primera sección abierta.
• Un contenedor paginable es un control deslizante de contenido básico (pero puedes insertar prácticamente cualquier elemento del generador de páginas en cada “página” del contenedor).
• Los encabezados personalizados facilitan la adición de sus propios encabezados a las secciones utilizando fuentes personalizadas, tamaños, colores y más.
• Los botones le permiten agregar enlaces a otras páginas o sitios web externos.
• Un llamado a la acción es un cuadro de llamada con un botón agregado que capta la atención de los usuarios y le permite agregar un poco de contenido convincente.
• La barra lateral con widgets le permite insertar su propia barra lateral personalizada en cualquier lugar de la página.
• El reproductor de vídeo facilita la inserción de diferentes formatos de vídeo compatibles con WordPress.
• Google Maps es otra opción sencilla: simplemente pegue el código de Google Map para insertar un mapa en su página.
• Las barras de progreso, los gráficos circulares, los gráficos circulares y los gráficos de líneas son formas de graficar o mostrar datos o habilidades.
• El espacio vacío facilita la adición de un salto vertical entre elementos.
• Las cuadrículas de publicaciones, medios, mampostería de publicaciones y mampostería de medios son cuadrículas personalizadas que puede agregar a las páginas (con la opción de mezclar y combinar tipos de publicaciones o medios).

El complemento también incluye 8 widgets  que puedes usar para crear tu propia barra lateral si lo deseas. Estos resultan útiles al crear páginas de destino personalizadas donde la barra lateral podría no estar en una ubicación típica, o si todo tu sitio web es una gran red de páginas de destino y ninguna usa la misma barra lateral.

Extensiones del generador de páginas de WPBakery

Los elementos básicos de Visual Compose son ideales para empezar, pero con el tiempo necesitarás más para crear tus diseños de página personalizados. Esto es posible mediante extensiones. Existen diferentes fuentes de extensiones para WPBakery Page Builder.

Edición de backend y frontend

Con WPBakery Page Builder, no tienes límites en la creación y edición de tus páginas. Con este potente plugin, puedes realizar cambios desde el backend modular o desde el frontend visual.

Si elige usar el editor de backend, cada elemento se muestra como un elemento modular que puede insertar, arrastrar y soltar. Este método es ideal para diseñar rápidamente un wireframe del aspecto que desea para su página y también puede ser más rápido que el frontend si su servidor o conexión a internet son más lentos. El editor de backend es bastante fácil de usar. Simplemente haz clic en el botón azul del Editor de backend para activar el generador de páginas de la página o entrada que estás editando.

Luego haga clic en el botón turquesa para +Agregar elementos .

¡Desde aquí puedes comenzar a insertar todos los elementos de página que desees!

El editor frontend ofrece una visión mucho mejor del aspecto final de tu página, ya que es básicamente un editor visual en tiempo real. Te permite insertar los mismos elementos del constructor de páginas que el editor backend, con la ventaja adicional de poder verlos directamente en lugar de un módulo. Puedes ver el tamaño real de una imagen de 300 px o si un botón morado con el valor hexadecimal #6e2f93 realmente resalta. Para habilitar la edición frontend, haga clic en cualquiera de las dos  opciones del Editor frontend para su página o publicación.

Esto actualizará su pantalla y lo llevará a una vista previa en vivo de su publicación o página con las mismas opciones de creación de páginas que el editor de backend.

Simplemente haz clic para empezar a añadir elementos. La principal diferencia es que ahora puedes ver los elementos a medida que los insertas y usar las opciones de vista previa  en la barra superior para ver cómo se verá tu página en ordenadores, portátiles, tabletas y teléfonos.

Agregar y editar elementos de página

Tanto si usas el editor backend como el frontend, tendrás las mismas opciones para personalizar los distintos elementos del constructor de páginas. Si bien las opciones varían según el elemento, hay algunas características clave que debes tener en cuenta después de insertarlo.

Independientemente de lo que desee agregar a su página, primero debe insertar una fila . Una vez insertada, puede pasar el cursor sobre el elemento del frontend para ver las  opciones de fila azules (en el backend, estas siempre están visibles en la parte superior de cada fila).

• El primer ícono de fila es donde puede hacer clic para arrastrar y soltar la fila a una nueva posición en su página.
• El icono del lápiz abre las opciones para configurar las filas. Estas pueden variar según el tema. Con el tema Total, verá opciones para el ID de desplazamiento local, el ajuste de fila (para filas de ancho completo), la altura completa de la fila, la altura mínima, la visibilidad en dispositivos móviles, el contenido centrado, las columnas de igual altura, la animación, la tipografía, el ancho máximo, el espaciado entre columnas, el vídeo de fondo o el paralaje, y las opciones de diseño (margen, borde, relleno, color/imagen de fondo).
• Las columnas definen el número de columnas en la fila. Hay opciones predeterminadas para hasta 6 columnas, pero también puedes definir tu propio diseño de columnas si lo deseas.
• Plus agrega una nueva fila debajo de la que estás editando.
• El icono Duplicar clonará la fila actual y todo su contenido (es decir, todos los elementos que haya insertado en ella). Esto es ideal si desea reutilizar un diseño de fila varias veces en la misma página.
• Papelera es simplemente eliminar una fila entera y su contenido.

Cuando pasa el cursor sobre una fila en el editor frontal, también verá opciones de columnas amarillas (en el backend encontrará las mismas opciones e íconos mostrados sobre cada columna).

• El primer ícono de Columna es el mismo que el de Filas: haga clic en él para arrastrar y soltar y reorganizar las columnas dentro de su fila.
• El Lápiz es la configuración general de las columnas. Al igual que las filas, las opciones de columna pueden variar según el tema que uses. Con Total, están disponibles las siguientes opciones: visibilidad en dispositivos móviles, animación, tipografía, altura mínima, opciones de diseño (margen, borde, relleno, fondo) y configuración de adaptabilidad (desplazamiento personalizado, ancho u opciones ocultas según el dispositivo).
• Para las columnas, el icono Más agregará un elemento en la parte superior de la columna, encima de cualquier otro elemento ya insertado.
• Nuevamente, el icono de la Papelera sirve para eliminar la columna completa y su contenido. Tras eliminar una columna, las restantes conservan sus dimensiones (si elimina una de las tres, las dos restantes seguirán teniendo un tamaño de 1/3), así que recuerde modificar el ancho de las columnas después de eliminarlas.

Dentro de la fila o columna, usará el icono «+» para insertar un elemento de página. En la captura de pantalla anterior, hemos añadido un cuadro de mensaje . Al insertar un elemento, la configuración se abrirá automáticamente. Para editar un elemento ya añadido, simplemente pase el cursor sobre él en el editor front-end o back-end para ver las siguientes opciones:

• El icono del lápiz abrirá la configuración (que se describe a continuación).
• El icono Duplicar clonará el elemento de tu página exactamente como lo tienes (configuración y todo).
• Por último, la Papelera eliminará solo el elemento del generador de páginas de la fila o columna donde lo insertó, dejando todos los demás elementos intactos.

Al insertar un nuevo elemento o hacer clic en el icono del lápiz, se abrirá la configuración del elemento del constructor de páginas . Esta se divide (en su mayoría) en varias pestañas para que puedas ver fácilmente todas las opciones de personalización disponibles. Además de la pestaña de configuración, hay un icono de engranaje en la esquina superior derecha que puedes usar para guardar la configuración seleccionada como preajuste para reutilizarla más adelante o como predeterminada para que se aplique automáticamente cada vez que insertes este elemento específico. La pestaña General incluye opciones generales para el elemento de tu página. Estas varían según el elemento que insertes (pero en todos los casos, editar es tan sencillo como usar un menú desplegable, un selector de color, una marca de verificación o un cuadro de texto). Por ejemplo, el cuadro de mensaje de la captura de pantalla anterior incluye opciones de estilo, forma, color, icono, texto y animación. Pero si insertas un botón , encontrarás opciones de texto, URL, estilo, forma, color, tamaño, alineación, icono y animación.

La pestaña «Opciones de Diseño» es la segunda pestaña estándar que verá en casi todos los elementos del constructor de páginas. Desde aquí puede agregar un fondo personalizado (color o imagen), borde, relleno y margen a su elemento. La opción «Simplificar Controles» reduce las opciones del cuadro CSS para que pueda ingresar un valor universal para cada opción (margen, borde y relleno). Recuerde: al aplicar un fondo, este se incluye dentro del borde. Por lo tanto, al aumentar el relleno, aumentará el fondo visible que agrega alrededor de su elemento, pero si aumenta el margen, aumentará el espacio vacío alrededor de su elemento de página (mostrando la fila/página detrás de él). Claro que, dependiendo del módulo que insertes, tu elemento de página puede tener muchas más pestañas. Por ejemplo, la cuadrícula de entradas del constructor ha añadido pestañas de opciones para la configuración de datos y el diseño de elementos. Y si usas elementos de página personalizados mediante una extensión como Total Staff Grid, puedes incorporar aún más opciones (como opciones de consulta, recorte de imágenes personalizado, metadatos, enlaces a redes sociales, extractos, etc.) según lo que haya incluido el autor de la extensión.

Complementos compatibles populares

Además de las extensiones de WPBakery Page Builder, muchos plugins populares son compatibles con el constructor y añaden automáticamente su propio elemento de creación de páginas. Aquí tienes algunos de los muchos plugins que te alegrará saber que funcionan a la perfección con WPBakery Page Builder para una creación de páginas aún mejor.

WooCommerce : Si quieres crear una tienda con WordPress , WooCommerce es la solución ideal. Este plugin no solo es gratuito y está repleto de funciones increíbles, sino que también es totalmente compatible con WPBakery Page Builder. Una vez instalado y activado, WooCommerce no solo añadirá sus propias configuraciones y opciones, sino que también añadirá 17 nuevos elementos de creación de páginas con los que podrás experimentar.

Slider Revolution : Los sliders son una excelente manera de añadir una sección atractiva y llena de contenido a cualquier página, y Slider Revolution es el plugin perfecto para lograrlo. Con este plugin, puedes arrastrar y soltar elementos como texto, botones, imágenes e incluso vídeos, todo con animaciones y efectos adicionales para crear sliders impresionantes. ¡Míralo en acción en muchas de nuestras demostraciones de Total!

Formulario de Contacto 7 : Los formularios de contacto son una parte importante de cualquier sitio web, ya sea un bloguero con un formulario para consultas comerciales o un dentista con un formulario para citas. El Formulario de Contacto 7 es completamente gratuito, flexible y, con el Constructor de Páginas de WPBakery, insertar tus formularios de contacto es fácil gracias al elemento de formulario personalizado.

WPML : Si necesitas crear un sitio web multilingüe, WPML es una de las mejores opciones para traducir tus entradas y páginas. Además, es totalmente compatible con el constructor de páginas WPBakery, por lo que puedes traducir todas las páginas personalizadas que crees.

Polylang : si no quieres invertir en WPML, Polylang es una excelente opción gratuita que es totalmente compatible con WPBakery Page Builder (es uno de los complementos gratuitos que recomendamos para que tu sitio de WordPress sea multilingüe ).

Yoast SEO : Yoast facilita a cualquier usuario mejorar el SEO en su sitio web. Incluye muchas funciones SEO importantes, como mapas de sitio, meta descripciones, rutas de navegación y más. Lo mejor de todo es que Yoast SEO funciona bien con prácticamente cualquier creador de sitios web, así que puedes preocuparte por crear mejores páginas en lugar de investigar sobre SEO.

Templatera : Este plugin no solo es compatible, sino que fue creado por WPBakery para ampliar la funcionalidad de su creador de páginas. Templatera permite guardar y reutilizar plantillas, lo que facilita la creación de páginas repetidas. Una vez instalado, el plugin añade su propia opción en la configuración de WPBakery Page Builder, en el panel de control de WordPress, para que sea fácil importar, exportar y reutilizar tus plantillas (esta función nos pareció tan fantástica que también la incluimos en Total  ). ¡Estamos seguros de que hay muchos más plugins compatibles! Si tienes dudas sobre la compatibilidad de un nuevo plugin con WPBakery Page Builder, contacta con el autor del plugin y pregúntale.

Opciones avanzadas para el constructor de páginas de WPBakery

Para los usuarios más avanzados, hay un par de opciones adicionales dentro del generador de páginas WPBakery que puedes usar para agregar códigos cortos personalizados a tu generador de páginas y crear cuadrículas de medios personalizadas.

Primero está el  Asignador de Shortcodes . Esta opción se encuentra en la configuración de WPBakery Page Builder y te permite asignar tus shortcodes personalizados al constructor. Es ideal si tienes un shortcode que te encanta (como uno para una tabla de precios) que no viene incluido por defecto en Visual Composer. La segunda opción avanzada es el Constructor de Cuadrículas incluido . Con esta función, puedes crear cuadrículas personalizadas (similares a las cuadrículas de medios y entradas) con tus propios diseños para tu contenido. Por ejemplo, puedes crear una cuadrícula de entradas de blog personalizada con imágenes redondas, el nombre del autor en negrita, longitud de extracto personalizada, un botón para leer más y un segundo botón con un enlace a un producto recomendado. ¿Te haces una idea? Puedes crear cualquier diseño de cuadrícula que quieras con muchísimas opciones de elementos, colores, márgenes, bordes y más.