DISEÑO Y DESARROLLO WEB CON WORDPRESS

TE AYUDO A CONVERTIR TUS GRANDES IDEAS EN REALIDAD

QUIÉN SOY ¡CONTÁCTAME!

La magia de personalizar WordPress sin ser diseñador web

Personalizar WordPress

WordPress es una plataforma formada por una gran comunidad de usuarios y desarrolladores. Eso nos da la garantía de contar con una enorme variedad de productos para poder personalizar WordPress a nuestra medida, siguiendo todos nuestros gustos y requisitos. Sin embargo, si tú no encuentras lo que buscas en un tema prediseñado, aquí te voy a mostrar una herramienta que expandirá tus posibilidades.

Tener tu blog exactamente como tú lo quieres es posible con WordPress y lo mejor de todo es que no necesitas conocimientos de programación para hacerlo. Ya sea que encuentres prediseñado lo que esperas o te animes a echar mano por tí mismo. Sin embargo, el editor que trae WordPress por defecto hace difícil la tarea, por lo que aquí voy a contarte acerca de un plugin, el Visual Composer, que te permitirá hacer tu trabajo de diseño mucho más sencillo.

Personalizar WordPress con el plugin Visual Composer

Se trata un constructor de páginas, tanto del frontend como del backend, que no requiere de conocimientos de trabajo con código. Tal como lo dice su nombre, el diseño se realiza con herramientas visuales, del tipo arrastrar y soltar elementos.

Es en verdad una herramienta muy potente, que nos permitirá un grado avanzado de diseño pero sin hacer la tarea algo reservado para entendidos. Para ello utiliza shortcodes dentro de WordPress que crean contenidos especiales y te ofrece una interfaz muy amigable e intuitiva. Los shortcodes entonces, corren de forma invisible a nosotros, con los cuales no tendremos que lidiar.

El plugin pertenece a la cartera del popular proveedor CodeCanyon y tiene muchos usuarios. Esto hace que ya cuente con varias actualizaciones que han ido mejorando sus funcionalidades. También cuenta con un importante soporte y muchos recursos en la web donde conseguir sugerencias y soluciones a nuestros problemas. Además el plugin tiene una versión en español, lo que hace más sencillo su uso.

Si bien el plugin tiene su costo, éste se paga por única vez. A partir de su compra podremos utilizarlos cuantas veces queramos y en todos nuestros sitios. Todas las actualizaciones están incluidas en ese costo, no tendrás que abonar por ellas en el futuro.

Instalación y modalidades del Visual Composer

Visual Composer es un plugin de pago, por lo que debemos descargarlo desde la web de CodeCanyon, su costo es de $28 pero podemos estar tranquilos que las posibilidades que nos da y el tiempo que nos ahorrará vale la pena. Una vez instalado el plugin en nuestro WordPress, veamos cómo utilizarlo. Yendo a la construcción de una nueva página, como lo hacemos habitualmente desde nuestro Escritorio, veremos que en el editor tradicional tenemos dos nuevos botones: backing y frontend editor.

El Backing Editor

Desde allí vamos a construir nuestra página como un editor similar al estándar de WordPress, sólo que con muchas más posibilidades. Podemos utilizar un diseño predefinido o comenzar uno desde cero. Tenemos varios diseños para elegir, según el tipo de página que queramos crear, puede ser de productos, servicios, información, etc. Cada modelo tiene un formato creado, con elementos movibles que podemos arrastrar y reubicar en nuestra página.

También se pueden incluir muchos otros elementos en la página, más de 40, como son:

  • Filas, columnas
  • Separadores
  • Cuadros de mensajes
  • Botón de Facebook, Twitter, Pinterest, Google+
  • Barras de progreso
  • Reproductor multimedia
  • Google Maps
  • Calendarios

Para cada uno de ellos se puede personalizar características como su título, descripción, contenido, color, unidades, dimensiones y otros. Simplemente elegimos el que deseamos y lo ubicamos en nuestra página. Podemos editarlas cuantas veces queramos y crear otras. Cada vez que terminamos con ellas guardamos los cambios y listo.

El Frontend Editor

Este editor permite diseñar las páginas pero desde la perspectiva del usuario. En lugar de realizar el diseño desde nuestro Escritorio de WordPress, como estamos habituados, ahora el diseño se hace desde lo que el usuario ve en la página desde su navegador.

Allí tendremos todos los mismos elementos y posibilidades que vimos en el Backing Editor, pero con la ventaja de que ahora el diseño se hace de manera aún más visual, ya que estamos teniendo una vista previa de todo lo que vamos haciendo.

Diseño responsivo

Una de las principales ventajas del Visual Composer es que todos sus diseños son responsivos y se adaptarán perfectamente a la navegación desde todo dispositivo y pantalla que se utilice. No será necesario para nosotros prever esto, ya que todo queda hecho automáticamente en nuestra página.

Estructura del Visual Composer

Veamos ahora en concreto cómo hacer para diseñar e implementar los diferentes elementos de nuestra web a través de esta herramienta.

Las filas y columnas

El Visual Composer estructura en filas y columnas todos sus contenidos. Tú puedes ajustar el número de columnas de cada fila, como también las características de cada una de ellas. Por ejemplo, podemos implementar 3 para tener nuestro contenido en 2 y una barra lateral.

Dentro de cada una de ellas se pueden agregar elementos que utilizaremos en nuestras páginas, como los que ya te he mencionado más arriba. A medida que los vamos añadiendo podemos ir ubicándolos, simplemente arrastramos y soltamos, incluso podemos duplicarlos si queremos repetirlos.

Podemos ir más allá aún, ya que el Visual Composer permite la integración con otros plugins, con lo que podemos sumarle los elementos de terceros. Muchos de los temas que puedes encontrar en ThemeForest, aprovechan esta posibilidad y expanden sus posibilidades.

Cuando creamos un diseño que vamos a volver a utilizar, ya sea en forma idéntica o como base para otro parecido, podemos guardarlo como plantilla. Con esto vamos a ahorrarnos mucho tiempo y trabajo. Comúnmente nuestro sitio tendrá un formato común a todas nuestras páginas, por lo que el uso de las plantillas puede resultar muy conveniente.

Otros ajustes del Visual Composer

Además de estas funcionalidades, el plugin nos permite más configuraciones en cuanto a su uso general en nuestro sitio. Para encontrarlas vamos a la zona de Ajustes y Maqueteador Visual. Allí podremos definir algunas otras opciones como son:

  • Las páginas o entradas donde utilizaremos el compositor. Es posible utilizarlos para el diseño de ambas o de una de ellas. Esto más que nada depende de ti y del grado de diseño que vayas a darle a cada una. Quizá haya sitios más simples, donde el diseño de entradas no requiere de tantas opciones y prefieras utilizar el editor por defecto de WordPress con sus pocas opciones.
  • Si tu sitio tiene un cierto grupo de usuarios, el plugin permite definir las opciones que estarán al alcance de cada uno. De esa manera si por ejemplo tienes redactores, puede que quieras habilitarles menos opciones que a, por ejemplo, los diseñadores. El evitar darle opciones a quien no las utiliza te permite ahorrarte posibles dolores de cabeza.
  • Podemos definir una apariencia visual por defecto para cada uno de sus elementos. De esa manera, cada vez que insertamos uno de ellos se verá de la manera que más comúnmente lo queremos. Otra opción que nos permitirá ahorrarnos un buen tiempo.
  • Quienes tengan un poco más de conocimientos técnicos y dominen el uso del CSS podrán añadir códigos personalizados sin tener que modificar los archivos del plugin. Esta opción ya está contemplada dentro de sus opciones.
  • De la misma manera, se pueden agregar más shortcodes provenientes de terceros que encontremos en la web.

Algunos otros comentarios

Compatibilidad

En general el uso del Visual Composer no presenta conflictos con los temas Premium de los principales proveedores en la web. Sin embargo, te recomiendo que al momento de comenzar a utilizarlos o querer cambiar de tema, estudies tu caso en particular. Ya que es posible que existan ciertas incompatibilidades entre tu tema y el Visual Composer, asegúrate de estar comprando dos productos que puedan utilizarse conjuntamente.

El tiempo de carga de tus páginas

Como sabes, todo plugin que instales en tu web tendrá como consecuencia un aumento en los tiempos de carga de tus páginas. Esto es algo muy delicado y que debes seguir con atención, ya que podríamos tener un sitio repleto de funcionalidades pero tan lento que nadie quiere navegar por él.

En cuanto al Visual Composer, es un plugin que aumentará tus tiempos, dado su potencia y variedad de herramientas, aunque no dramáticamente. Una buena idea es eliminar otros plugins que tengas que pasen a quedar obsoletos tras la instalación de él. Probablemente puedas hacer con el Visual Composer muchas tareas que antes te requerían de más de un plugin, así que elimínalos y compensarás el aumento en los tiempos de carga.

Los Add-ons

¿Aún quieres más? Bueno si estás con hambre de mayores posibilidades debes saber que existen los Add-ons, herramientas que expanden su uso y que se adquieren por separado. En el proveedor CodeCanyon existen más de 100 Add-ons a la venta para el Visual Composer, en general su costo ronda los $10.

Entre ellos podemos encontrar algunos como el Easy Tables que permite gestionar tablas bajo la misma interfaz visual e incorporar todas sus opciones; el Templatera, un gestor de plantillas que nos facilita la tarea de crear, editar, configurar y controlar todas ellas de manera más sencilla y con mayores posibilidades.

Ahora te toca a ti, ¿has podido personalizar WordPress con Visual Composer? ¿qué te ha parecido esta guía?

Artículos recomendados