Visual Composer: una guía para arrastrar y soltar la creación de páginas

WordPress es excelente, y poder personalizar su sitio web de ejecución de WordPress es solo la guinda del pastel. Sin embargo, no todos somos codificadores gurús. Diablos, algunos amantes de WordPress no saben nada sobre HTML o CSS. Pero esto no debería impedir que pueda personalizar su tema de WordPress. Aquí es donde entran los constructores de páginas.


Los creadores de páginas de arrastrar y soltar están ampliamente disponibles como complementos y están integrados en muchos temas populares. Permiten a los usuarios de todos los niveles realizar cambios en el diseño general de un tema, y ​​puede hacer que agregar adornos adicionales (iconos, barras de habilidades, tablas de precios, etc.) sea muy fácil. Específicamente, queremos presentarle nuestro nuevo complemento de WordPress para crear páginas favoritas: el Visual Composer.

Obtenga Visual Composer gratis! El complemento Visual Composer se incluye de forma gratuita con la compra de nuestro tema Total WordPress e incluye algunas extensiones excelentes para el complemento para usar con el tema.

¿Qué 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 vendedores principales en Themeforest. Le brinda las herramientas que necesita para poder crear diseños de página complejos sin necesidad de tocar una sola línea de código.

Cómo funciona Visual Composer y qué puede hacer

Es un complemento, así que solo 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 para que pueda alternar entre el modo clásico y el modo generador, así como un botón para llevarlo al editor front-end en vivo.

visual-composer-button

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

Filas

Incluido en el constructor están los elementos de construcción de páginas. Puede usar estos elementos como bloques de construcción literales para su página. primero Agregar una fila. Las filas permiten agregar columnas con un solo clic. Simplemente pase el cursor sobre la pestaña de párrafo amarillo en la esquina superior izquierda de su fila y seleccione un diseño. La fila se divide automáticamente en columnas de acuerdo con el diseño que elija.

total-add-row

Elementos de página

total-add-elements

El siguiente paso es comenzar a agregar las características de su página. Solo haz clic en Agregar elemento botón para abrir un menú emergente. Hay muchas opciones para agregar cuadros de texto, encabezados, redes sociales, imágenes y galerías, alternar o pestañas, acordeones, publicaciones recientes (que también funciona con los tipos de publicaciones personalizadas de su tema además de las publicaciones del blog), botones e incluso widgets de barra lateral.

Además, dependiendo del tema de WordPress y los complementos compatibles que esté utilizando con Visual Composer, verá más o menos elementos de página. El ejemplo anterior es de nuestro tema de WordPress Total Drag & Drop, por lo que hay 30 elementos adicionales de creación 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 para ese elemento. A continuación se muestra un ejemplo de las “opciones” para 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.

icon-box-settings

El constructor también admite cuatro complementos de terceros increíbles: Control deslizante de capas, Control deslizante de revolución, Formularios de gravedad y Formulario de contacto 7. Si tiene instalado alguno de estos complementos, aparecerá automáticamente un elemento de página para el tema. Cuando elige insertar un elemento de página para uno de estos complementos, Visual Composer muestra un menú desplegable de los controles deslizantes / formularios respectivos que ha creado, o muestra un cuadro de entrada para que agregue su ID de control deslizante. No más copiar y pegar códigos cortos!

Arrastrar y soltar

visual-composer-editor

En cualquier punto 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 repetitivo sea rápido y fácil (ideal para columnas similares, preguntas frecuentes, alternar, etc.).

Una vez que haya creado un diseño que le guste, puede guardarlo como plantilla. Esto resulta útil al crear un diseño de página personalizado o una barra lateral que le gustaría reutilizar. Simplemente haga clic en el Plantillas botón, asigne un nombre a su diseño y presione guardar. Cuando use su plantilla, completará automáticamente su página con el diseño y los elementos que guardó.

Opciones de fila: formatear, clonar y eliminar filas

Hay tres funciones adicionales agregadas a 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, editar las columnas, etc. Simplemente coloque el cursor sobre cualquier fila que necesite editar para acceder a esta configuración:

total-visual-composer-row-settings

Nuevamente, dependiendo del tema que esté utilizando con Visual Composer, las opciones de formato disponibles para usted pueden ser diferentes. Si bien algunos desarrolladores de temas eligen dejar el Compositor visual tal cual, muchos personalizan el complemento para que se ajuste a las necesidades o al estilo de su tema.

Editor frontend

El poderoso Visual Composer ahora incluye un editor frontend, que hace que sea más fácil que nunca comenzar a construir sus propias páginas y diseños. La única advertencia es que todavía no todos los temas son compatibles con el editor front-end. Asegúrese de verificar la lista de características de un tema, o de contactar al desarrollador del tema directamente, para ver si el editor frontend de Visual Composer es compatible con su tema de WordPress. Nuestra El tema total de WordPress es 100% compatible con el editor frontal así que si su tema actual no lo es, es posible que desee considerar “actualizar” a nuestro tema.

Extensiones

La última característica que me gustaría tocar es la capacidad de ampliación de Visual Composer. Si eres un programador avanzado o un desarrollador de temas, puedes integrar tus propios códigos cortos en el complemento. De hecho, agregamos nuestro propio Symple Shortcodes Premium para brindar a los usuarios de Total 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 del complemento Visual Composer. Hay muchos complementos premium excelentes que agregan características adicionales al Visual Composer e incluso algunos buenos y gratuitos, como nuestro complemento Symple Shortcodes.

Opciones de configuración de Visual Composer

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

Configuración del compositor visual

El complemento mostrará automáticamente los diversos tipos de contenido incluidos en su tema de WordPress. Simplemente seleccione cuál le gustaría usar con el creador de páginas de Visual Composer. El ejemplo anterior es de nuestro tema Total, razón por la cual hay opciones adicionales para cartera, personal y testimonios (todos los tipos de publicaciones personalizadas), así como foros, temas, respuestas y productos (relacionados con los complementos bbPress y WooCommerce compatibles con Total).

También puede asignar cualquier complemento de shortcode al Visual Composer que ya haya instalado en su sitio de WordPress. En la página de configuración, haga clic en la pestaña Mis códigos cortos en la parte superior y haga clic en el botón para asignar código corto. Esto debería agregar sus códigos cortos de terceros a los elementos de su compositor. Fácil!

Véalo en acción

Como dije, nos encanta tanto Visual Composer que lo incorporamos a nuestro tema de WordPress Total más vendido (incluido gratis con su compra). Eche un vistazo a las diferentes páginas en cualquiera de nuestras demostraciones en vivo para Total Theme. ¡La mayoría de las páginas que verá en nuestras demostraciones en vivo se crearon con Visual Composer! Agregar fondos, encabezados, texto, imágenes, iconos … etc. Es todo un “pedazo de pastel”.

demos totales

Guía completa de uso de Visual Composer

Si ya posee el complemento y está buscando una guía sobre cómo usarlo, eche un vistazo a nuestra guía de uso completa de Visual Composer que lo guiará 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 total de temas premium 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 Total Obtener Visual Composer

Háganos saber lo que piensa del complemento a continuación. Estamos realmente impresionados con Visual Composer, y nos encantaría escuchar tu opinión al respecto!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map