Tutorial Visual

Composer
Contenido del Tutorial

Contenido del Tutorial ................................................................................................................... 2

1. Uso del Visual Composer...................................................................................................... 3
2. Configuración de Visual Composer .................................................................................... 10
3. Constructora de red avanzada ........................................................................................... 15
4. Usando Beaver Builder ....................................................................................................... 16
5. Tema Beaver Builder .......................................................................................................... 26
6. Configuración del generador de páginas ........................................................................... 28

P á g i n a 22 |
36
 1. Uso del Visual Composer

Una vez instalado Visual Composer, verás una nueva barra de Visual Composer en sus pantallas
de edición. Uno carga el editor backend, el otro carga el editor frontend (esta barra se muestra
aunque haya desactivado el editor visual de WordPress).

Cuando cargas el editor backend, tu área de contenido se transforma en un lienzo para

construir tu página. Un botón llamado "Modo Clásico" reemplaza el botón del editor backend
en el que hiciste clic anteriormente y te ayuda a regresar al modo de edición
predeterminado de WordPress.

En la parte superior de la interfaz hay cinco botones: tres a la izquierda y dos a la derecha.

A la izquierda, el icono de Visual Composer te lleva al sitio web oficial del plugin, el símbolo
más te permite añadir elementos a tu página y el icono T abre la caja de plantillas. A la
derecha hay un icono de configuración que abre una pestaña para añadir código CSS
personalizado y un botón para cambiar al editor frontend.
Si aún no has añadido ningún contenido, verás una explicación sobre cómo añadirlo
rápidamente. Puede elegir añadir un elemento, añadir un bloque de texto o seleccionar uno de
los layouts predefinidos. Por ejemplo, puedes añadir una página de destino o una página de
producto con un solo clic.
Algunos desarrolladores los llaman módulos, algunos los llaman bloques, otros los llaman
widgets. Visual Composer los llama elementos. Todos ellos se refieren a los pequeños bloques
de contenido que le ayudan a construir su diseño.
El número de elementos disponibles es impresionante. En total, la versión actual de Visual
Composer ofrece cuarenta y ocho elementos de contenido (este número incluye widgets
predeterminados de WordPress). Siete elementos de contenido obsoleto más antiguos
también están disponibles y se pueden añadir elementos de contenido adicionales mediante
el uso de extensiones de plugin.

Puedes crear páginas complejas utilizando estos elementos. Puedes agregar gráficos, galerías
de imágenes, vídeos, mapas, cuadrículas, iconos, botones para compartir medios sociales y
mucho más.
Añadir elementos de contenido y luego colocarlos en filas y columnas es sencillo. Las filas y los
elementos pueden ser arrastrados hasta donde quieras colocarlos. El número de columnas
mostradas en una fila puede determinarse seleccionando una de las once estructuras de
columnas, p. ej. 2/3 + 1/3. Alternativamente, puedes crear tu propia estructura personalizada.

Existen opciones para borrar elementos, columnas y filas. Se pueden añadir nuevos elementos
a columnas y filas seleccionando el símbolo más. También puede clonar filas enteras de
contenido.

Hay una gran cantidad de opciones disponibles tanto para columnas como para filas.

En la pestaña general hay opciones que utilizan un fondo de vídeo, estirar la fila/columna y
añadir CSS personalizado. La pestaña de diseño te permite alinear la columna o fila de la
manera que desee. Puedes definir el margen, borde, relleno y colores.
Los ajustes disponibles para elementos individuales dependen del elemento que se modifique.
Un elemento básico como un botón similar a Facebook sólo te permite seleccionar el tipo de
botón, mientras que los elementos más complejos pueden tener docenas de opciones
diferentes.
Cualquier diseño que crees puede guardarse como plantilla y aplicarse a otras páginas de tu
sitio web. Se proporcionan 44 diseños predeterminados predefinidos para ayudarte a
comenzar. Esto incluye una plantilla de Preguntas Frecuentes, una plantilla de ayuda, una
plantilla de servicios y varias plantillas para su página de contacto.
Puedes activar el editor frontend haciendo clic en el botón frontend en tu editor de página. Si
has iniciado sesión en su sitio web, también verás un enlace "Editar con Visual Composer" en la
barra de administración de WordPress en la parte superior de cada página. Al hacer clic en este
enlace se cargará el editor frontend para que puedas editar esa página.

El backend y el editor front-end funcionan de forma similar. Verás los mismos botones en la
parte superior de la página para agregar elementos y abrir el cuadro de plantilla. A la derecha
verás un botón que le devuelve al editor backend y un botón de actualización para guardar
cualquier cambio que hayas hecho.
El botón de guía te permite modificar tu página. Puede hacer todo lo que puedas en el editor
backend, como editar elementos y mover columnas y filas.
Al hacer clic en el icono de la pantalla podrás cambiar la vista del modo escritorio al modo
horizontal y vertical de las tabletas y los smartphones. Esto es útil para ver cómo se verá tu
página en los dispositivos móviles.
 2. Configuración de Visual Composer

El área Configuración de Visual Composer te permite modificar muchas características y

opciones diferentes.
En la página de configuración general puedes definir los tipos de mensajes en los que se
activará Visual Composer. Cualquier otro tipo de mensaje personalizado añadido a través de tu
tema, o a través de plugins, se listará aquí. También puedes desactivar los elementos de
contenido sensibles y habilitar los subconjuntos de fuentes de Google.

La parte central de esta página te permite controlar el acceso a Visual Composer para cada
grupo de usuarios de WordPress. Puedes definir si un grupo de usuarios ve Visual Composer,
si ven Visual Composer y el editor predeterminado, y si sólo ven Visual Composer (es decir,
desactivar el editor predeterminado).
En la página de opciones de diseño puedes cambiar los colores predeterminados de los
elementos de contenido. También puedes modificar el margen en la parte inferior de los
elementos, el espaciado entre columnas y el ancho de pantalla móvil.
Se puede añadir código CSS personalizado sin necesidad de modificar los archivos del plugin
central.
Se proporciona una licencia de producto al comprar Visual Composer. Es válido para un sitio
web y garantiza un soporte continuo y actualizaciones automáticas a través de su área de
administración.

Los códigos proporcionados por plugins de terceros pueden asignarse a elementos de

contenido de Visual Composer.

En la página de contacto hay una página de bienvenida que te informa de las últimas adiciones
al plugin. También hay una página de preguntas frecuentes que contiene enlaces a muchos
tutoriales y una página de recursos que contiene enlaces a una base de conocimientos, una
academia de vídeo y las cuentas de medios sociales de los desarrolladores.
P á g i n a 14 | 36
 3. Constructora de red avanzada

Visual Composer te permite añadir nuevos elementos de rejilla para los siguientes elementos
de contenido: rejilla de publicación, rejilla de postproducción de mampostería, rejilla de
medios y rejilla de medios de mampostería. Estos son los elementos de contenido que se
pueden utilizar para mostrar los mensajes del blog, galerías y otros contenidos en tu sitio web.

El siguiente video te muestra exactamente cómo funciona el generador de cuadrículas.

https://youtu.be/sBvEiIL6Blo

P á g i n a 1515 |
36
Al igual que Visual Composer, Beaver Builder te ayuda a crear páginas profesionales fácilmente
usando una interfaz de arrastrar y soltar. Una de las mayores diferencias entre las dos
soluciones es que toda la edición con Beaver Builder tiene lugar en el frontend de su sitio web.
Todos los diseños son sensibles y el editor visual es compatible con los mensajes de blog,
páginas y todos los demás tipos de mensajes personalizados. Debido a su soporte de atajos y
widgets, Beaver Builder funciona bien con la mayoría de los otros plugins de WordPress. Por
ejemplo, podrías integrar fácilmente elementos de otros plugins en tus
presentaciones, como formularios, tablas y galerías.

Beaver tiene un buen soporte para WooCommerce y el plugin multilingüe de WordPress y

debería trabajar con casi cualquier tema de WordPress. También tiene soporte para WordPress
Multisite, pero desafortunadamente esta característica no está incluida en la licencia estándar
de Beaver Builder .

La característica de Beaver Builder que realmente se destaca es su sistema de plantillas de

páginas, te permite crear páginas grandes y detalladas en segundos. Todo lo que tiene que
hacer es seleccionar la plantilla de página que desees. Por ejemplo, puedes crear una
página de contacto comercial con sólo hacer clic en un botón.
Las licencias más caras de Beaver Builder también vienen empaquetadas con el tema de Beaver
Builder WordPress.

4. Usando Beaver Builder

Beaver Builder se integra con WordPress de la misma manera que Visual Composer. Una vez
que el plugin ha sido activado, puedes cargar el editor haciendo clic en la pestaña "Page
Builder" en tu editor de mensajes.
Alternativamente, si has iniciado sesión, puedes hacer clic en el enlace "Page Builder" en la
barra de administración de WordPress en la parte superior de cada página.

Cuando se activa por primera vez el generador de páginas, se mostrará una superposición que
muestra las plantillas de diseño. Como el nombre sugiere, las plantillas caseras están diseñadas
para ser usadas en la página principal de su sitio web.

Catorce plantillas de diseño de página de inicio únicas están disponibles. También puedes optar
por utilizar una página en blanco.
Las plantillas de diseño de contenido te ayudan a crear páginas comunes rápidamente. Por
ejemplo, hay disposiciones para tu página de información, tu página de contacto y tu página
de blog.

En total, hay trece plantillas de contenido para elegir. Por supuesto, puedes guardar cualquier
página que crees manualmente como plantilla y utilizarla en cualquier otro lugar de tu sitio
web.

Beaver Builder tiene una interfaz fácil de usar que no tardarás mucho en comprender.

En la barra de administración hay enlaces, en la parte superior derecha: Plantillas,

Herramientas, terminar y un icono de ayuda. A la derecha se encuentran los menús
desplegables para diseños de filas, módulos básicos, módulos avanzados y widgets de
WordPress.
El botón de plantillas carga el cuadro de plantillas de diseño anterior.

Haciendo clic en la caja de herramientas se muestran algunas opciones. Duplicar la página

generará una copia del post/página con la misma disposición. También hay una opción para
guardar su diseño como plantilla.

Seleccionando "Editar configuración global" se cargará el cuadro "Configuración del generador

de páginas". Desde aquí puedes modificar los ajustes para el encabezado de página
predeterminado, las filas, los módulos y la disposición de respuesta.
Al hacer clic en el botón Terminado, podrás publicar los cambios realizados o guardarlos como
borrador. Si decides descartar los cambios, todas las modificaciones realizadas se perderán y la
página volverá a la última versión guardada.

P á g i n a 2020 |
36
El icono de ayuda muestra opciones para realizar un recorrido interactivo, ver un video tutorial
de siete minutos y saltar a la base de conocimientos o foros de Beaver Builder.

La primera opción en el menú del lado derecho es la disposición de filas. Puedes elegir entre
una o seis columnas de contenido. También se pueden añadir barras laterales izquierda y
derecha.
Todo lo que tienes que hacer es seleccionar las columnas o la barra lateral que desee y luego
arrastrarla al área de contenido.

Puedes eliminar, duplicar o mover filas. También puedes modificar la configuración de las filas.

Eliminar una columna reducirá automáticamente el número de filas en esa fila en particular.
Las mismas opciones están disponibles para filas y columnas. Puedes ajustar la anchura, el
texto, cambiar de un color de fondo a una foto de fondo, modificar la configuración del fondo y
definir el borde. En la pestaña avanzada puedes modificar márgenes y relleno, su diseño de
respuesta y selectores CSS.

Guardarás los cambios tan pronto como hagas clic en el botón guardar.

Hay cinco módulos de contenido básicos: Encabezado, foto, separador, editor de texto y
vídeo.
Simplemente arrastra y suelta los módulos de contenido en tu página en la columna y fila que
desees. Una vez que lo hagas, puedes modificar la configuración de ese módulo de contenido.
Al igual que Visual Composer, la configuración que se muestra depende del módulo de
contenido que está modificando.
Puedes estar un poco confundido después de añadir tu primer módulo de contenido, ya que el
menú a la derecha de la página desaparece. Para hacer que el menú vuelva a aparecer, es
necesario hacer clic en el botón "Añadir contenido" en la parte superior de la página.
Están disponibles veintidós módulos avanzados. Esto incluye post acordeones,
deslizadores, tablas de precios y formularios de suscripción.

Doce widgets predeterminados de WordPress también están disponibles. Con ello, el número
total de módulos de contenido asciende a treinta y nueve.
Una vez que hayas creado tu página, debería guardar el borrador o publicar la página. También
recomienda guardar su diseño como plantilla.

5. Tema Beaver Builder

El tema de Beaver Builder se incluye con las versiones profesionales y de agencia de Beaver
Builder (más información sobre los planes de precios más adelante). El tema es esencialmente
un lienzo en blanco que te permite crear el sitio web que deseas.
Durante los últimos años WordPress ha estado animando a los desarrolladores de temas a
integrar el desarrollador de temas de WordPress en su diseño. La tasa de adaptaciión ha sido
lenta, y la mayoría de los desarrolladores de temas siguen utilizando su propia página de
configuración de temas.

Sin embargo, los desarrolladores del tema Beaver Builder han adoptado el desarrollador de
temas,cada una de las opciones de tema y configuración se puede encontrar allí. Esto se
relaciona muy bien con el plugin de Beaver Builder WordPress, ya que significa que todos los
cambios que realice en su sitio web se pueden previsualizar en tiempo real.

Hay una gran cantidad de opciones de configuración disponibles. Puedes modificar tu

encabezado, pie de página, widgets, colores y mucho más. También se incluye una
herramienta de importación y exportación
Está claro que el tema de Beaver Builder fue creado para los usuarios del plugin ya que el tema
en sí es muy básico. Te permite personalizar una gran cantidad de configuraciones de su
diseño, pero hay pocas opciones para cambiar la estructura de su sitio web.

Sin embargo, hay disponibles diez presets de temas diferentes. Estos presets cambiarán la
combinación de colores de tu sitio web.
 6. Configuración del generador de páginas

El área de configuración del plugin Beaver Builder se muestra en una página. En el menú se
muestran diez secciones.
La primera sección es una opción para introducir tu clave de licencia para recibir
actualizaciones y soporte remoto. El plugin seguirá funcionando correctamente si no introduce
la clave.

Todos los módulos básicos y avanzados se pueden desactivar desde la sección de módulos.
También puede desactivar los widgets de WordPress para la selección, sin embargo, no hay
ninguna opción para desactivar los widgets de forma individual.
En la sección de plantillas puedes habilitar todas las plantillas, habilitar sólo las plantillas
principales, habilitar las plantillas de usuario (es decir, las plantillas guardadas) y deshabilitar
todas las plantillas.

P á g i n a 3030 |
36
También hay opciones para editar las plantillas del generador de páginas en el área de
administración y para anular las plantillas principales.

Todos los tipos de mensajes disponibles en tu sitio web de WordPress se muestran en la

sección de tipos de mensajes. Puedes desactivar cualquier tipo de publicación en la que no
desees que Beaver Builder esté activo.
Con el plugin se incluyen tres juegos de iconos diferentes. Éstos se pueden desactivar en la
sección de iconos. También hay una opción para cargar su propio conjunto de iconos.
En la sección de edición puede definir el nivel de capacidad de WordPress requerido para editar
Beaver Builder.

La etiqueta blanca está disponible para aquellos que compren la licencia de agencia de Beaver
Builder. Puedes introducir tu propia marca y definir tu propio icono de empresa.
Cuando haces clic en el icono de ayuda en el generador de páginas. Puedes desactivar este
icono si lo deseas. Alternativamente, puedes desactivar elementos individuales. También se
puede definir la URL del vídeo de ayuda, la base de conocimientos y los foros.
Si has transferido tu sitio web a un nuevo plan de hosting, es posible que tengas que borrar la
caché del plugin.
Al hacer clic en el botón de desinstalación se eliminará el plugin y todos los datos asociados a
él.

Como puedes ver, Beaver Builder tiene muchas opciones útiles para configurar en la página de
configuración. Lo único que realmente necesitas es la capacidad de modificar permisos en base
a un rol de usuario (es algo que Visual Composer tiene).