La cuadrícula en Visual Composer, plugin de WordPress

por CTD
La cuadrícula en Visual Composer

[vc_row][vc_column][vc_column_text]

La cuadrícula en Visual Composer es una de las herramientas más poderosas que existen a la hora de generar cuadrículas de contenido en WordPress. Pero también es cierto que realizar cuadrículas en Visual Composer requiere de ciertos conocimientos y de cierta dedicación invirtiendo algún tiempo en el aprendizaje de su funcionamiento. Con éste post, te lo voy a poner más fácil explicándote paso a paso como realizar la cuadrícula en Visual Composer.

Si estas leyendo estas lineas, sin duda es por que sabes de que estamos hablando cuando decimos «WordPress». Com debes saber, una de las cosas más interesantes de que dispone el CMS más importante del momento, es de un sin fin de plugins y/o extensiones que nos facilitan mucho las diferentes funcionalidades que le queremos dar a nuestra web tanto en el frontend (web pública) como en el backend (panel de administración web).

Una de las carencias que WordPress nos ofrecía desde sus inicios es la dificultad que mostraba cuando lo que queríamos era realizar una maquetación web distinta a la que nos permitía la base del propio gestor o las plantillas dedicadas. En un principio, no te quedaba otra opción que conformarte con una maquetación plana e idéntica en todas las páginas y entradas de tu sitio web, a no ser que supieras hacerlo picando código, opción que WordPress, siempre ha permitido.

Con la llegada de Visual Composer, todo eso cambió. Visual Comoposer, es un pluigin que te permite maquetar cada página o cada entrada de tu sitio web en WordPress de una forma super sencilla e intuitiva, pues, genera un nuevo modo de edición en el que podemos insertar «Drag and Drop», es decir: arrastrando con el ratón, elementos web y editarlos fácilmente rellenando una serie de campos y características que te ofrece la herramienta.

Visual Comoposer, ya es hoy en día, si no el que más, uno de los plugins maquetadores para WordPress más importantes que hay. Después de albergar semejante éxito, y como era de esperar,  a Visual Composer le salieron varios competidores e incluso extensiones para el propio plugin.

Una de las extensiones más potentes e interesantes de Visual Composer y que viene incluida en el paquete básico del mismo plugin es el «Constructor de cuadrícula» o «Grid builder» para los que prefieren la versión no traducida.

Seguramente hayáis visto en muchas webs, cuadrículas con las que cargan las ultimas entradas de un blog o los artículos relacionados. Incluso catálogo de productos o servicios con un diseño llamativo y perfectamente funcional. Pues bien, el Constructor de la cuadrícula en Visual Composer te permite generar creativas cuadrículas con enlace a contenidos aprovechando toda la potencia y eficacia del gestor de contenidos WordPress.

La cuadrícula en VIsual Composer: implementación

Bien, para empezar a trabajar con la cuadrícula en Visual Composer debemos tener creadas las páginas de la que vamos a mostrar el acceso en dicha cuadrícula. Cada página deberá tener como mínimo tres factores «sine qua non» en algunos casos no tanto para su funcionalidad, sinó para que tenga sentido el uso de la propia grid.

Por tanto, los elementos de que deben disponer como mínimo cada página a mostrar en su correspondiente celda de la cuadrícula en Visual Composer son los siguientes:

  • Categoría asignada (si es una página, instala este plugin para disponer de la funcionalidad «categorias»)
  • Titulo de la página
  • Imagen destacada asignada

Una vez tenemos un mínimo de tres páginas (recomendación) creadas podemos generar la cuadrícula en Visual Comopoer.

Para entrar a la sección de edición de la celda patrón de la cuadrícula en Visual Composer debemos acceder por el menú principal del panel de administración de WordPress. Nos ponemos encima de «WPBakery Page Builder» y pinchamos en «Constructor de cuiadrícula»

Lo primero que hay que hacer es poner un nombre a nuestra nueva cuadrícula y guardarla tal como si fuera cualquier otro elemento típico de WordPress, es decir, con el botón de «Publicar».

Podríamos empezar a crear la «celda patrón» desde cero pero yo siempre recomiendo utilizar una de las muchas plantillas que el mismo builder nos proporciona muy amablemente. Por tanto, lo que haremos ahora será insertar una plantilla, y para ello pincharemos en el siguiente botón:

La cuadrícula en Visual Composer

Pinchamos en ese botón para insertar una plantilla de celda patrón.

En la ventana que se nos abre a continuación, vemos un listado de plantillas. Vamos a pinchar por ejemplo en «Fundido de entrada con icono». Automáticamente, el pugin nos genera un perfecto patrón de celda.

La cuadrícula en Visual Composer

En la parte derecha de la pantalla, veremos un «combo» con un listado de efectos. En él, podemos indica cual es el efecto con el que los elementos se presentarán en cada celda de la cuadrícula cuando el ratón se posicione encima. En este caso, como hemos escogido una plantilla, nos aparece uno por defecto: «Fundido de entrada»

En la parte central nos encontramos una representación visual en clave Visual Composer para el maquetado y diseño de una única celda que será el patrón que se repetirá en todas y cada una de las celdas de nuestra cuadrícula.

Pero como siempre es mejor una imagen que mil palabras, seguidamente tenéis un gráfico con anotaciones:

La cuadrícula en Visual Composer Donde pone «Normal» y «Hover» se trata de dos pestañas que nos permiten discriminar el diseño y maquetado de la celda según queramos editarla en estado inicial o de inactividad (Normal), o bien, que debe hacer cuando colocamos el ratón encima (Hover). Cada pestaña dispone de un lápiz para la configuración de más opciones.

Como Podéis ver en el gráfico, Visual Composer, nos divide la celda en tres secciones, la superior, la central, y la inferior. En cada una de ellas disponemos de los accesos típicos de maquinación del plugin, con un símbolo de lápiz accedemos a la configuración de la columna o sección, y si pinchamos en el símbolo central de «más» o «plus», se nos abrirá el menú de inserción de elementos de Visual Composer. Para el ejemplo, se ha insertado el icono en la zona central de la celda automáticamente al haber elegido este tipo como plantilla. Recomiendo que le dediquéis tiempo a esta fase y hagáis pruebas con las diferentes posibilidades que ofrece el constructor.

Una vez tengamos a nuestro gusto la celda patrón, pinchamos en «Publicar» y ya la tenemos creada.

Ahora lo que debemos hacer es insertar la cuadrícula en una página o entrada. Por tanto, accedemos a la página seleccionada de WordPress en el panel de administración y accederemos al modo Visual Comoposer en caso de que no aparezca por defecto pinchando aqui:

La cuadrícula en Visual Comoposer

Acceso al «modo» Visual Comoposer en el panel de administración WordPress.

Para abrir el menú de elementos de Visual Composer, pinchamos aquí:

La cuadrícula en Visual Comoposer

Y de todos los elementos de Visual Comoposer debemos escoger la cuadrícula que nos aparece como «Post Grid»

La cuadrícula en Visual Comoposer

Pinchamos en «Post Grid» para generar la cuadrícula.

El plugin se encarga de generar automáticamente todo para obtener una cuadrícula y los ajustes de la grid se abrirán automáticamente. Es en este momento cuando el plugin demuestra su verdadero potencial. En primera instancia debemos indicar el tipo de post de donde queremos que venga la información y su categoría.

La cuadrícula en Visual Comoposer

Rellenado el tipo de post y la categoría es suficiente para generar la cuadrícula.

En la pestaña «General» nos permite configurar otros factores como el método de visualización y la cantidad de celdas por fila. En la pestaña «Ajustes de datos» es donde indicamos el orden de carga de los elementos en las celdas y la pestaña de «Opciones de diseño» nos permite realizar ajustes generales del elemento como en cualquier otro item propio de Visual Composer. Pocas veces harás uso de está pestaña en la construcción de cuadrícula.

En la pestaña «Diseño del elemento» nos encontramos con un «combo box» donde hay una larga lista de los tipo de cuadrículas pre-establecidas que hemos visto antes en el constructor, y en último lugar aparecerá la que hemos creado anteriormente. Pinchamos sobre ella, y guardamos todos los cambios. Publicamos.

La cuadrícula en Visual Composer 09

Una vez completados todos estos pasos, dispondrás de una moderna cuadrícula de contenido hecha en Visual Composer tal que así:

[/vc_column_text][vc_basic_grid post_type=»post» max_items=»3″ orderby=»rand» item=»4493″ grid_id=»vc_gid:1520784351036-ac3645d8-6f49-9″ css=».vc_custom_1519973920571{margin-top: -40px !important;}»][/vc_column][/vc_row]

Esto, también te interesa ...

Dejar comentario