Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Primeros pasos con Visual Composer

by
Difficulty:BeginnerLength:LongLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by César Noriega Mendoza (you can also view the original English article)

Wordpress es el Sistema de Gestión de Contenidos -SGC (CMS: Content Management System,por sus siglas en inglés), favorito a nivel mundial debido a su sencilla interfase, temas altamente personalizables y una interminable variedad de poderosos plugins.  Ha simplificado el desarrollo y gestión de sitios web, incluso para la mayoría de los usuarios más aficionados. 

Sin embargo, hay momentos en los que ve el diseño de un sitio web determinado, que le llama la atención de inmediato, y desea modificar su propio sitio web para que luzca igual. Desafortunadamente, si eres un completo aficionado, no podrás hacer mucho, incluso con WordPress, ya que las modificaciones de los temas requieren un cierto grado de experiencia en HTML, CSS, PHP y varias otras habilidades dependiendo de la naturaleza de tu tema. Pero incluso si eres un codificador experto, aún te tomará algunas horas realizar las modificaciones deseadas.

Afortunadamente, el plugin Visual Composer, para Wordpress, ha simplificado este problema. Con este increíble plugin de creación de páginas, incluso los usuarios más básicos de WordPress pueden modificar los diseños de temas y crear un aspecto completamente único para su sitio web. Para los expertos en Wordpress, es un gran ahorrador de tiempo y puede ayudarles a modificar páginas en solo unos pocos minutos. En general, el plugin ha tenido tanto éxito, que ya viene incluido en muchos de los temas más recientes de WordPress.

Entonces, con este trasfondo, permíteme explicarte algunas de las características principales del Visual Composer y cómo se puede configurar para tu sitio web WordPress.

Principales Características

Visual Composer está diseñado por personal de WP Bakery. Es un plugin de pago, que no está abiertamente disponible en el directorio de plugins en Wordpress. Solamente puede ser descargado desde CodeCanyon.

Ha sido descargado por más de 70,000 usuarios y parece que se dirige hacia un mayor éxito! Visual Composer ha hecho la construcción de páginas en Wordpress, una experiencia extremadamente agradable . He aquí una mirada rápida de algunas de ellas:

Creación de páginas tanto en Frontend como en Backend

La característica más poderosa del Visual Composer es que le proporciona un sencillo generador de páginas "drag and drop", que puede usarse desde el área estándar de edición / publicación de WordPress o directamente desde el frontend.

Compatibilidad universal con temas

Visual Composer no es específico para algún tema. Esto significa que puede usarlo con cualquier tema de WordPress sin tener que hacer ningún ajuste al código existente. This means you can use it with any WordPress theme without needing to make any adjustments to the existing code.

Diseño altamente personalizable

Los elementos de "drag and drog" del Visual Composer tienen un diseño y un tema predeterminados.  Sin embargo, pueden modificarse de acuerdo con el esquema de color y apariencia de su sitio web.

Más de 40 Elementos de Diseño Listos para Usarse

La interfaz de "drag and drog" del Visual Composer tiene más de 40 elementos listos para usar y con los que se pueden crear diseños únicos para su sitio web en cuestión de minutos.

Elementos completamente responsivos

Los elementos de diseño y de página creados con Visual Composer, son completamente responsivos y mobile ready.

Amigable para el Desarrollador

El Visual Composer está lleno de versátiles elementos "drag and drop". Si quieres agregar más, puedes hacerlo fácilmente,gracias a su naturaleza amigable para el desarrollador.

Instalación de Plugin y Configuración

Como se mencionó anteriormente, Visual Composer es un plugin de pago. Por lo tanto necesitará comprarlo primero y luego subirlo a su sitio Wordpress.

Paso 1

El proceso de instalación es el mismo que el de cualquier otro plugin Wordpress. Una vez activado, el plugin aparecerá en la opción "Ajustes" en el menú izquierdo del panel principal de Wordpress.

Paso 2

Aquí, puedes configurar algunos ajustes básicos del plugin.


Paso 3

Puede habilitar Visual Composer para páginas y entradas, o solo una cualquiera de ellas. También puede establecer derechos de acceso específicos por tipos de usuarios. Para cada tipo de usuario, puede elegir mostrar el Visual Composer tanto en el área de edición de publicaciones como en el editor de estándar de WordPress, o puede mostrar solo el Visual Composer. También puede habilitar o deshabilitar elementos individuales de Visual Composer para diferentes usuarios.

Paso 4

En la pestaña Design Options, puede modificar la apariencia de los elementos de Visual Composer de acuerdo con el tema de su sitio web. La pestaña Custom CSS le permite modificar el CSS sin cambiar ningún otro archivo, mientras que la pestaña Licencia del producto le permite integrar su cuenta Envato para habilitar la compatibilidad y las actualizaciones automáticas. En la pestaña My Shortcodes, puede agregar códigos abreviados adicionales desarrollados manualmente a la lista existente de shortcodes en Visual Composer.

Ahora, vamos hacia el verdadero uso del plugin!

Usando VC en Páginas y Entradas

Como mencioné anteriormente, puedes habilitar Visual Composer para Entradas, Páginas o cualquiera de ellas. Después de activar el plugin, verá las pestañas Visual Editor en la parte superior de su editor de texto estándar de WordPress.

Las dos pestañas que aparecen en la parte superior del editor de texto son Backend Editor y Frontend Editor. Estas son las opciones que hacen a este plugin tan divertido de usar. Desde aquí, puede crear cualquier estructura de página que desee. Comencemos con el editor backend.

Editor Backend

Paso 1

Cuando haces clic en la pestaña Backend Editor, el área del editor de texto cambiará a un cuadro "drag and drop", donde puedes agregar elementos simplemente seleccionándolos de la lista. Pero primero, necesitas agregar una row (fila). A partir de aquí, lo único que limitará tu diseño será tú imaginación.

Paso 2

Puedes agregar diferentes elementos en la row (fila), y también elegir diferentes diseños de columnas para cada fila desplazando el puntero del mouse sobre el botón que se encuentra sobre el editor de contenido. Puedes agregar diferentes elementos para diseñar tú página desde la pestaña Add Element. La caja Add Elements contiene todo lo que necesitas para diseñar un sitio web.

Los elementos se dividen en las categorías Content, Social, Site Structure, New Elements y WordPress Widgets, pero también puedes verlos todos juntos. Cualquier elemento que necesites, solo haz clic en él, lo arrastras y sueltas en la caja contenedora. Tú página está básicamente dividida en diferentes rows (filas). Puedes seguir agregando nuevas filas, y a su vez, nuevos elementos en ellas.

Paso 3

Para editar, borrar o duplicar cualquier fila en particular, sólo haz uso de los iconos en la parte superior de la caja contenedora de la fila. 

Paso 4

Puedes guardar un arreglo particular de contenido como una plantilla lista para usar, que puede cargarse desde la lista en cualquier momento que lo necesites.

Paso 5

El Visual Composer también le permite agregar Custom CSS en páginas y entradas individuales. Los efectos de este Custom CSS estarán limitado a esa página o entrada en particular.

Visual Composer también soporta varios de los famosos plugins Wordpress, tales como Contact Form 7, Layer Slider, Revolution Slider and Gravity Forms. Si tienes cualquiera de estos plugins instalados, ellos serán automáticamente agregados a la caja Add Element. Cuando seleccionas cualquiera de ellos desde la lista de elementos, éste será insertado directamente en tú página, sin que sea necesario agregar shortcode alguno. El Backend Editor te brinda tanta flexibilidad y opciones que puedes crear cualquier tipo de diseño, incluso si eres un aficionado.

Editor Frontend

El Editor Frontend te permite arrastrar y soltar elementos en la vista de página en vivo. Lo que facilita ver el impacto de los cambios de forma inmediata al tener, también, todas las opciones del editor de backend.

Paso 1

Comenzando desde la izquierda, puedes agregar elementos nuevos haciendo clic en el signo + y editar el diseño de la columna con el botón "columna" a su lado.

Paso 2

También puedes agregar filas o columnas nuevas con el signo + dentro del contenido de la página.

Paso 3

Todos los elementos del Visual Composer son completamente responsivos y mobile ready. Puedes obtener la vista previa en vivo para diferentes dispositivos en el editor frontend desde los íconos debajo.

Paso 4

No obstante todas estas características y la amplia gama de elementos, Visual Composer también le permite agregar sus propios shortcodes y elementos de diseño. Puedes crear los elementos tú mismo o importarlos desde cualquier servicio de terceros.

En Resumen

WordPress siempre ha sido una plataforma flexible en términos de las diferentes funciones que puede soportar a través de sus plugins. Pero con el plugin para la creación de páginas Visual Composer, incluso el aspecto de diseño de WordPress, que una vez estuvo limitado solo a los usuarios avanzados, ahora se puede editar en muy poco tiempo.

Para mí, en lo personal, Visual Composer ha reducido significativamente el tiempo, que solía gastar en tareas de diseño y edición de sitios web de clientes, desde varias horas a solamente algunos minutos. Y con la creciente popularidad de este plugin, solo puedo ver más y más usuarios de WordPress confiando en él, en los días por venir.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.