Visual Composer: una guía para crear una página de arrastrar y soltar

Visual Composer: una guía para crear una página de arrastrar y soltar

WordPress es increíble, y poder personalizar su sitio web de WordPress es solo la guinda del pastel. Sin embargo, no todos somos gurús de la codificación. Diablos, algunos entusiastas de WordPress no saben nada sobre HTML o CSS. Pero eso no debería impedirle poder personalizar su tema de WordPress. Aquí es donde entran los creadores de páginas.

Los creadores de páginas de arrastrar y soltar están ampliamente disponibles como complementos y están integrados con muchos temas populares. Permiten a los usuarios de todos los niveles realizar cambios en el diseño general de un tema, y ​​esto puede facilitar la adición de detalles adicionales (iconos, barras de habilidades, tablas de precios, etc.) Específicamente, queremos presentarle nuestro nuevo complemento favorito de creación de páginas de WordPress: Visual Composer.

¡Obtén Visual Composer gratis! El complemento Visual Composer se incluye de forma gratuita con la compra de nuestro Tema total de WordPress e incluye algunas extensiones realmente buenas para que el complemento las use con el tema.

Que es el compositor visual

Visual Composer es un complemento fantástico desarrollado por WP Bakery que agrega un generador de páginas de arrastrar y soltar a su tema de WordPress. Lo incluimos en nuestro tema de WordPress multipropósito total, pero también puede verlo en casi todos los nuevos productos más vendidos en Themeforest. Le brinda las herramientas que necesita para crear diseños complejos sin tener que tocar una sola línea de código.

Cómo funciona Visual Composer y qué puede hacer

Es un complemento, así que simplemente instálelo y actívelo para aprovechar todas sus maravillosas funciones. Una vez activado, Visual Composer le da control sobre el diseño de sus páginas. Simplemente agregue una nueva página y verá nuevos botones que le permiten cambiar entre el modo clásico y el modo constructor, así como un botón que lo llevará al editor de front-end en vivo.

botón-compositor-visual

A partir de ahí, las posibilidades están limitadas solo por su imaginación (o la de sus clientes). Puede agregar filas, columnas, botones, texto, imágenes y mucho más usando todas las opciones del compositor visual. Además, hay una opción para guardar sus diseños como plantillas para reutilizar una y otra vez.

Líneas

Los elementos de construcción de la página están incluidos en el constructor. Puede utilizar estos elementos como bloques de construcción literales para su página. Primero Añadir fila. Las filas permiten agregar columnas con un solo clic. Simplemente coloque el cursor sobre la pestaña de párrafo amarilla en la esquina superior izquierda de su fila y seleccione un diseño. La fila se divide automáticamente en columnas según el diseño que elija.

total-suma-fila

Elementos de la página

total-agregar-elementos

El siguiente paso es comenzar a agregar funcionalidad a su página. Simplemente haga clic en el Añadir artículo para abrir un menú contextual. Hay muchas opciones para agregar cuadros de texto, encabezados, compartir en redes sociales, imágenes y galerías, conmutadores o pestañas, acordeones, publicaciones recientes (que también funcionan con tipos de publicaciones personalizadas de su tema además de publicaciones de blog), botones de la barra lateral e incluso widgets. .

Además, según el tema de WordPress y los complementos compatibles que use con Visual Composer, verá más o menos elementos de página. El ejemplo anterior es de nuestro Tema de WordPress Total Drag & Droppor lo que hay 30 elementos adicionales del generador de páginas que creamos y diseñamos exclusivamente para Total. Esto incluye divisores personalizados, cuadros de iconos, hitos, carruseles y más.

Haga clic en cualquier elemento para abrir las opciones de ese elemento. A continuación se muestra un ejemplo de las “opciones” de nuestro módulo Icon Box en el tema Total. Como puede ver, cada módulo puede tener muchas configuraciones e incluso múltiples pestañas de configuración.

configuración de caja de icono

El constructor también admite cuatro excelentes complementos de terceros: Layer Slider, Revolution Slider, Gravity Forms y Contact Form 7. Si alguno de estos complementos está instalado, aparecerá automáticamente un elemento de página para el tema. Cuando elige insertar un elemento de página para cualquiera de estos complementos, Visual Composer mostrará una lista desplegable de los controles deslizantes / formularios respectivos que ha creado, o mostrará un cuadro de entrada para que agregue su ID de cursor. ¡Ya no es necesario copiar y pegar códigos cortos!

Arrastrar y soltar

editor-compositor-visual

En cualquier momento del proceso de diseño, puede arrastrar y soltar cualquier fila o elemento de página para reorganizarlos. También puede duplicar cualquier fila o elemento, lo que hace que agregar contenido repetido sea rápido y fácil (ideal para columnas similares, preguntas frecuentes, conmutadores, etc.).

Una vez que haya creado un diseño que le guste, puede guardarlo como plantilla. Esto resulta útil al crear un diseño personalizado o una barra lateral que desea reutilizar. Simplemente haga clic en el Plantillas , asigne un nombre a su diseño y toque Guardar. Cuando usa su plantilla, automáticamente llena su página con el diseño y los elementos que guardó.

Opciones de fila: formatear, clonar y eliminar filas

Hay tres características agregadas en la esquina izquierda de cada fila que se pueden usar para clonar o duplicar una fila completa y todo su contenido, agregar nuevos módulos, modificar columnas, etc. para acceder a estos parámetros:

total-visual-composer-row-settings

Nuevamente, dependiendo del tema que use con Visual Composer, las opciones de formato disponibles para usted pueden ser diferentes. Si bien algunos desarrolladores de temas eligen dejar Visual Composer como está, muchos personalizan el complemento para que se adapte a las necesidades o el estilo de su tema.

Editor de frontend

El poderoso compositor visual ahora incluye un editor de interfaz, lo que facilita más que nunca la creación de sus propias páginas y diseños. La única salvedad es que no todos los temas son compatibles con el editor de front-end todavía. Asegúrese de verificar la lista de características de un tema o comuníquese con el desarrollador del tema directamente para ver si el editor frontal de Visual Composer es compatible con su tema de WordPress. Nuestra El tema de Total WordPress es 100% compatible con el editor de front-end. así que si su tema actual no lo es, puede considerar “actualizar” nuestro tema.

Extensiones

La última característica que me gustaría cubrir es la extensibilidad de Visual Composer. Si es un codificador avanzado o un desarrollador de temas, puede incrustar sus propios códigos cortos en el complemento. De hecho, hemos agregado nuestros propios códigos cortos de símbolos premium para brindar a los usuarios de Total algunos elementos adicionales de creación de páginas. ¡Esto brinda a los usuarios aún más opciones al crear páginas!

Si no es un programador, consulte CodeCanyon y realice una búsqueda rápida en el complemento Visual Composer. Hay muchos complementos premium que agregan funcionalidad adicional a Visual Composer e incluso algunos buenos complementos gratuitos como nuestro complemento Symple Shortcodes.

Opciones de configuración de Visual Composer

Sigo refiriéndome a Visual Composer como un creador de páginas, pero también funciona muy bien con publicaciones personalizadas y tipos de publicaciones. Todo lo que tienes que hacer es activar la opción. Ir hacia Configuración> Visual Composer. Debería ver una pantalla similar a esta:

Configuración de Visual Composer

El complemento mostrará automáticamente los diferentes tipos de contenido incluidos en su tema de WordPress. Simplemente seleccione el que desea usar con el generador de páginas de Visual Composer. El ejemplo anterior es de nuestro tema Total, por lo que hay opciones adicionales para Portafolio, Personal y Testimonios (todos los tipos de publicaciones personalizadas), así como Foros, Temas, Respuestas e Historias. Productos (relacionados con los complementos bbPress y WooCommerce compatibles por Total).

También puede asignar todos los complementos de código corto al Visual Composer que ya ha instalado en su sitio de WordPress. Debajo de la página de configuración, haga clic en la pestaña My Shortcodes en la parte superior y haga clic en el botón de Map Shortcode. Esto debería agregar sus códigos cortos de terceros a sus elementos de composición. ¡Fácil!

Míralo en acción

Como dije, amamos tanto a Visual Composer que lo hicimos parte de nuestro bestseller. Tema total de WordPress (incluido gratis con su compra). Eche un vistazo a las diferentes páginas de una de nuestras demostraciones en vivo para el tema Total. ¡La mayoría de las páginas que verá en nuestras demostraciones en vivo fueron creadas con Visual Composer! Añadiendo fondos, títulos, texto, imágenes, iconos … etc. Es todo un “pedazo de pastel”.

demostraciones totales

Guía de usuario completa de Visual Composer

Si ya posee el complemento y está buscando una guía sobre cómo usarlo, consulte nuestra guía completa para usar Visual Composer, que lo llevará paso a paso y le mostrará cómo usar el complemento.

Donde puedes conseguirlo

Visual Composer está disponible en CodeCanyon si desea obtenerlo usted mismo. También se ha integrado completamente con nuestro tema premium total de WordPress (junto con otros dos complementos premium por un valor total de $ 67, ¡que es más de lo que paga por el tema!).

Obtener el total Obtenga Visual Composer

Háganos saber lo que piensa del complemento a continuación. ¡Estamos realmente impresionados con Visual Composer y nos encantaría saber de ti!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba