Plugins

Guía completa Essential Grid en español

Essential-Grid-guia
En todas las páginas web, tenemos algunas secciones con contenido, que queremos mostrar de una manera atractiva y cautivadora, por ejemplo, nuestro blog, el portfolio con nuestros trabajos, una galería de imágenes o vídeos, los productos de una tienda online, medios de redes sociales, y muchos otros. Además con pretensiones de que el usuario se sienta cómodo con una interfaz fácil de usar y con encanto. Este plugin que os vengo a presentar, Essential Grid, es el que se encarga de todo esto. Un buen plugin de grid o cuadrícula para WordPress, por esto, y porque no hay demasiada información en español, me he decido a hacer esta guía. Con esta guía espero que consigáis llenar de vida vuestras páginas y hacer que los usuarios puedan disfrutar una experiencia única en vuestro sitio web, aplicando el plugin a los diferentes elementos que os interesen.

¿Qué es Essential Grid?


Essential Grid, es un plugin que nos permite realizar grids o cuadrículas, visualmente muy atractivas e interactivas, con casi cualquier elemento que tengamos a nuestra disposición. Nos da muchísimas opciones de personalización y configuración, tanto a nivel técnico como a nivel visual. Por lo que las opciones que tenemos son casi ilimitadas.

Las aplicaciones son infinitas, por ejemplo para la creación de un​ grid con todas nuestras entradas, como lo tengo yo en mi blog, donde nos permite filtrar fácilmente por categorías y con scroll infinito; así como para cualquier tipo de galería, de imágenes, clientes, vídeos, etc, igual o similar a mi portfolio; también para conexiones con medios sociales, como youtube, facebook, twitter, etc; para tiendas online, donde se muestran todos los productos; y muchísimos más. El límite lo ponéis vosotros.
Podemos estructurarlo todo a nuestro gusto con diferentes opciones, como paginación, filtros, orden y muchos más, que veremos más adelante.

Una vez se capta la idea de funcionamiento, es relativamente sencillo, pero si no lo has visto nunca probablemente puede asustar la cantidad de opciones de configuración y puede tener algunos aspectos que pueden llegar a ser algo confusos.

Es necesario comentar que Essential Grid, es un plugin Premium, y por tanto de pago. Y se que para mucha gente esto es un handicap, pero en mi opinión, merece la pena destinar una parte del presupuesto que tengáis, en la inversión de este plugin. Lo encontraréis por 26$+IVA, que al cambio son unos 24-25€ en Envato Market.

¿Empezando con Essential Grid?


La primera parte es, evidentemente, comprarlo y descargarlo. Podéis hacerlo desde desde aquí.

Una vez lo tengáis descargado, deberéis descomprimir el archivo en una carpeta y se descomprimirán 3 carpetas, un archivo «essential-grid.zip» y otro html.

El siguiente paso será acceder a nuestro panel de administración WordPress e ir a la sección Plugins > Añadir nuevo. Allí pulsaremos la opción «Subir plugin», seleccionaremos el archivo «essential-grid.zip», y finalmente pulsaremos Instalar ahora.

Una vez instalado, aparecerá una nueva sección llamada «Ess. Grid» donde tendremos los siguientes elementos:

– Ess.Grid

Desde aquí podrémos crear, duplicar, editar o eliminar un grid, ver la información de la versión, indicar la clave de licencia, suscribirte a la newsletter de ThemePunch, y ver los cambios de las últimas actualizaciones.

– Item Skin Editor

Nos permitirá crear, duplicar, editar y eliminar máscaras/plantillas que utilizaremos para mostrar el contenido. También podremos marcar como favoritas aquellas que queramos.

– Meta Data Handling

Desde la pestaña «Custom Meta» podemos crear, editar o eliminar campos de metadatos. Estos son unos campos que tras crearlos nos aparecerán en los diferentes elementos (imagenes, entradas, etc…) donde podremos añadir la información que requiramos, y así poder utilizar esa información más tarde en la máscara del grid, para mostrarla donde queramos.
Por ejemplo, si queremos poner una URL distinta a cada imagen del grid, crearemos un campo de metadatos para la URL y definiremos en cada imagen la URL. Posteriormente en el diseño de la plantilla, podemos usar este campo para que por ejemplo un texto, icono o imagen redirija a esa URL.

También podemos referenciar otros campos (incluso de otros plugins) a alguno de nuestros campos de metadatos desde la pestaña «Meta References/Aliases». De manera que la información que haya en el campo «Original» es pasada al campo de metadatos creado.

– Search Settings

En la pestaña «Global Settings», podemos activar «Enable Search Globally», para configurar que el buscador global sea sustituido por un buscador con aspecto de uno de nuestros grids creado. Para ello, tras activar en «On» esta opción, deberemos añadir una configuración con el botón «+ Add Setting» e indicar la clase o ID (se necesitan nociones de HTML y CSS) de nuestro buscador actual, seleccionar el grid que utilizaremos y seleccionar entre fondo oscuro o claro.
Tras hacer clic en el buscador, nos aparecerá un lightbox donde realizaremos la busqueda, y los resultados se mostrarán en forma de grid, con las características del seleccionado en la configuración.

También tenemos la otra pestaña, «ShortCode Search» donde podremos crear un código corto (shortcode) para poner un buscador en cualquier parte de nuestra web, con el formato de busqueda del grid seleccionado.

– Global Settings

Los ajustes globales del plugin los encontramos aquí. Podemos desde gestionar los permisos hasta habilitar o deshabilitar las cajas de opciones del plugin en las páginas y posts. Dejo una imagen con la traducción al español de las opciones.

– Import/Export

Nos permite exportar o importar los datos y configuraciones que tengamos en Essential grid, de una manera sencilla. De este modo podemos pasar o recuperar configuraciones que tengamos establecidos del plugin entre diferentes sitios web.

Diseñando el grid


Desde la pantalla principal de Essence Grid, seleccionaremos el botón Create New Ess. Grid y entraremos en la edición del grid/cuadrícula.

Naming

Aquí deberemos indicar en primer lugar el nombre o titulo que queremos darle al grid.
En el segundo campo hemos de incluir un nombre sin caracteres especiales ni acentos, que nos servirá para como identificación en el shortcode.
El tercer campo se genera automáticamente, y será el shortcode que tendremos que incluir allí donde queramos que se muestre nuestro grid/cuadrícula.
El último campo sirve para incluir un ID de CSS con parámetros específicos para el grid, de manera que podamos aplicarle cualquier característica CSS a la totalidad del grid (como un margin o padding, un border, un gradiente, ajustar posición, etc..).

Source

Es aquí donde empieza la verdadera base del plugin.
En primer lugar nos encontramos con Source, donde especificaremos de donde extraeremos la información que queremos que muestre nuestro grid. Tenemos tres opciones con una parte común.

Post, Pages Custom Posts

Cuando los elementos que vayamos a incluir en nuestro grid, sean Páginas, Entradas u Otros tipos de entradas, escogeremos esta opción.

– Tipo y categoría:
Seleccionamos tipos y categorías, en estas dos cajas está permitida la selección múltiple.
En «Category Relation» escogemos si solo se seleccionan las que estén en TODAS las categorías escogidas con la opción AND o las que estén en CUALQUIERA de las categorías escogidas con la opción OR.
Por último, en Parámetros adicionales, podemos incluir algunas sentencias que filtren los resultados, como por ejemplo por año. La lista completa de parámetros la puedes encontrar aquí.

– Paginas:
Si hemos seleccionado páginas en el apartado anterior, nos aparecerá esta casilla, donde podremos escoger que paginas queremos incluir.

– Opciones:
Especificaremos cual es el número máximo de entradas que se mostrarán. Si indicamos un «-1» se mostrarán TODAS las coincidentes.

– Origen del medio:
Podremos seleccionar y ordenar de donde vamos a extraer la imagen de referencia a mostrar.

Custom Grid

Cuando vayamos a incluir en nuestro grid, cualquier tipo de medio, ya sean Vídeos, audios, texto o imagenes, escogeremos esta opción.

– Origen del medio:
Podremos seleccionar y ordenar de donde vamos a extraer la imagen de referencia a mostrar.

– Añadir objetos:
Esta opción aparecerá abajo, y podemos añadir cualquiera de los objetos mostrados.
Nota: Si seleccionamos «Image(s)» nos pedirá si queremos añadir una (Single) o varias (Bulk).

Una vez seleccionado el objeto, nos abrirá una pantalla donde podremos seleccionar la imagen de referencia o bien indicar la ruta del vídeo, etc. Además de darle las propiedades que queramos.
A remarcar como importantes:
Propiedades Meta que tengamos creadas, aquí asignaremos su valor
Title: Titulo del video, imagen, etc
Excerpt: Descripción del objeto
Post Link: Si queremos redirigir a algún Post, aunque las URL, es mejor definirlas siempre como «Meta».
Filter: nombres para filtrar, como si fueran categorías.

Stream

Cuando vayamos a incluir en nuestro grid, una serie de elementos integrados en alguna red social, escogeremos esta opción.

– Servicio:
Seleccionaremos el medio social desde el que vayamos a recopilar la información.

– Conexión:
Los siguientes puntos, variarán dependiendo del medio social que hayamos escogido, pero básicamente sirve para conectarse con ese servicio. Puede ser mediante una API, token u otro método. Tiene un enlace con instrucciones de como realizar estas acciones.

– Detalles:
En la primera casilla, «Count», indicarémos el número de elementos que incluiremos.
En «Stream Cache» indicarémos el número de segundos que tendremos el resultado en caché.

– Origen del medio:
Podremos seleccionar y ordenar de donde vamos a extraer la imagen de referencia a mostrar.

– Tamaño del origen, donde podremos escoger si queremos en el grid el tamaño original, o alguno más pequeño. Siempre es recomendable que se escoja el más pequeño posible, sin distorsionar la calidad de la imagen. De esta manera, reducimos el peso de la imagen.
– Filtro del medio, podremos escoger entre los diferente filtros que nos ofrecen, para que tengan todas las imágenes de referencia un toque similar.
– Origen por defecto, nos permite escoger una imagen genérica para aquellas entradas u objetos que no tengan una asociada.

Grid Settings

En esta sección daremos forma a nuestro grid/cuadrícula, estableciendo el tipo, filas, dimensiones, etc.

Boxed

Con esta disposición el grid permanecerá dentro del contenedor que se encuentre.

Fullwidth

Con esta disposición el grid se ensanchará hasta el máximo de la ventana.

Fullscreen

Con esta disposición el grid adopta pantalla completa, en ancho y alto, hasta el máximo de la ventana.

Even

Se establecen unas dimensiones fijas y simétricas para los objetos del grid, que vendrán definidas por el ratio que apliquemos posteriormente.

Solo muestra la imagen de referéncia y la parte del contenido fuera de la imagen de referéncia (en adelante, contenido Masonry) está oculta si no pasamos el ratón por encima.

Al seleccionarla nos habilita la opción «Content Push» que permite empujar la página hacia abajo cuando tiene contenido Masonry.

Masonry

Las dimensiones de cada objeto son variadas y se establecen individualmente, dependiendo de la imagen de referencia y el contenido Masonry.

También es posible mantener un ratio fijo desmarcando la opción Auto, de manera que quedarían todos los elementos del mismo tamaño, al igual que «Even», pero mostrando la parte de contenido Masonry.

Cobbles

De manera similar a «Even», crea grids simétricos, pero tiene la característica de permitir aplicar multiplicadores, lo que permite crear diseños interesantes.

Escogiendo esta opción más abajo nos permitirá crear patrones de diseño fijo para el grid. O bien configurarlos individualmente para cada elemento desde el editor/previsualización.

En cualquiera de estas tres opciones anteriores tendremos también la posibilidad de activar el «RTL«, que sirve para cambiar la dirección del grid, y que este sea de derecha a izquierda en vez de a la inversa.

En la sección de columnas, podremos escoger cuantas columnas tendremos para cada ancho de pantalla o dispositivos. Bastante simple e intuitivo. Si activamos el modo Avanzado, podremos afinar más las medidas para cada ancho, definiendo las columnas a nuestro gusto.

El bloque de paginación permite activarla para que se muestren un número de páginas cuando no se puedan mostrar todos los resultados, o bien desactivarlo para que los resultados se muestren con un «Cargar más» que permita incluso hacer un scroll infinito.
Si escogemos la paginación, con la opción de máximas filas visibles estableceremos el número de filas que se cargarán por página.

El siguiente bloque permite la carga inteligente de los objetos. Activando «Lazy Load» solo cargaremos los objetos visibles, de manera que no se precargarán todos los objetos si no es necesario.
La opción «Blurred Image» hace que se hagan previsualizacines borrosas de la imagen mientras estas cargan, en vez de aparecer en blanco, de manera que se detecta que un objeto está siendo cargado. Con conexiones buenas esto es casi inapreciable.
Podemos también seleccionar el color de fondo de la imagen, mientras esta está siendo cargada.

En «Spacing» podremos establecer los pixeles de separación entre objetos, así como entre estos y los margenes.

«Paddings» nos sirve para darle un espaciado interno general a todo el grid, pudiendo definirlo por cada zona individualmente.

Nav-Filter-Sort

En esta pestaña encontramos todas las opciones de navegación, filtros, ordenación y búsquedas.

En primer lugar, en el bloque de posiciones de navegación podemos ubicar cada elemento en una de las zonas habilitadas con respecto a nuestro grid. Simplemente con arrastrar y soltar uno de los elementos a una posición lo generará automáticamente en el resultado del grid. Como elementos de control de navegación tenemos:
En azul, las flechas de paginación, que nos permiten pasar a la página anterior o siguiente
En morado, la paginación, que mostrará los números de páginas existentes y podemos ir directamente a ellos.
En amarillo, la ordenación, que nos permitirá escoger como queremos ordenar los resultados mostrados.
En azul oscuro, el filtrado, que nos permite hacer un filtrar los resultados por categorías.
En gris, la búsqueda, que genera un cuadro de búsqueda, para poder buscar en todo el grid resultados coincidentes.

En el siguiente bloque podremos establecer los margenes y posición de las zonas anteriores, de manera sencilla.

Si hay dos o más elementos de control de navegación en una misma linea o dropzone, podemos establecer en el siguiente bloque los margenes entre ellos.

El bloque de opciones de paginación nos permite en primer lugar indicar que si el número de páginas es muy elevado, haga saltos de las páginas intermedias, entre la actual y la inicial o final, con el modo «Smart» o en cambio usar el modo «Full», que muestra TODOS los números de páginas, haya los que haya.
En segundo lugar podemos escoger que al paginar entre números de página, vuelva automáticamente a la parte de arriba de la página (ON) o se quede estático donde está (OFF).
Por último se puede afinar el movimiento de vuelta hacia la parte de arriba, ajustando los pixeles según convenga.

El bloque de filtro permite, en primer lugar, establecer si se van a realizar filtrados simples (una categoría) o múltiples (varias categorías).
Podemos como segunda opción establecer un filtro inicial, que será aplicado al cargar el grid.
Si escogemos la opción de mostrar las categorías en modo lista desplegable, podemos escoger que esa lista se despliegue al hacer clic o al pasar el ratón por encima.
Dentro ya de cada cuadro de filtro, el primer campo habrá que cambiar el contenido con el texto a mostrar cuando queramos quitar el filtro o seleccionar TODO. Yo suelo usar «Todas» en referencia a las categorías.
Tenemos después la opción de que se muestren las categorías en una lista desplegable o en linea. A no ser que tengáis pocas, yo recomiendo usar la lista.
Seguidamente tenemos el texto que mostraría el desplegable. Yo suelo poner: «Filtrar categorías».
A continuación escogemos entre mostrar o no el número de elementos que forman cada categorías en el desplegable.
Por último podemos escoger entre los filtros disponibles, por si alguno no lo queremos mostrar. Por defecto todos están activados.
Si queremos añadir otro filtro, deberemos hacerlo desde el rectángulo inferior justo debajo del filtro inicial, con un signo +.

El bloque de ordenación nos sirve para establecer el orden inicial y para dar la posibilidad de cambiarlo al usuario.
En primer lugar ofrece la posibilidad de cambiar el texto de la etiqueta. Yo uso «Ordenar por»
Seguidamente podemos escoger de la lista, los campos por los que vamos a permitir ordenar al usuario.
La tercera opción, nos sirve para establecer el orden inicial del grid.
Con última opción indicamos si el orden que hemos establecido en la tercera opción lo aplicamos en Ascendente o Descendente.
Yo suelo usar una ordenación inicial por fecha Descendente.

El último bloque únicamente se utiliza para determinar el texto que se mostrará dentro del cuadro de búsqueda.

Skins

Aquí podremos seleccionar la plantilla sobre la que se regirá nuestro grid. Es posible modificar y crear nuevas plantillas, pero esto se hará desde el menú Item Skin Editor, que explicaré más adelante.

En el primer bloque podemos cambiar el color de fondo de TODO el grid. Para dejarlo sin fondo, deberemos escribir «transparent» en la casilla.

En el bloque de navegación, podemos cambiar, crear o editar una plantilla/mascara para los botones de navegación que hemos visto antes.

Por último, en el bloque de mascara/plantilla de objetos, podemos escoger uno de la lista que tengamos y este se aplicará a todos los objetos que tengamos. Podemos filtrarlo por tipos.
Como he mencionado antes, se podrán crear, editar o eliminar, pero desde el menú «Item Skin Editor».

Animations

Esta pestaña nos sirve para hacer algunos ajustes simples en las animaciones del grid.

En primer lugar, en el bloque de animaciones del grid, podremos escoger una animación para el filtro, el cambio de página y los efectos iniciales. Así como ajustar los valores de velocidad de la animación y el retardo de la animación.

En el segundo bloque definiremos el retraso en el tiempo hasta que empiece la animación al pasar el ratón por encima de un objeto.

Lightbox

En esta pestaña podremos configurar todas las opciones que hacen relación a las lightbox o ventana emergente.

En el primer bloque se puede ordenar que elementos queremos que nos aparezcan primero en el Lightbox, en caso de que un elemento tuviera dos de estos elementos, aparecería primero el indicado en esta lista.

El segundo bloque nos sirve para definir que mostrar al abrir el lightbox. Podemos seleccionar a mostrar, un único elemento, todos los elementos del grid (que serán navegables con las flechas de navegación), TODOS los elementos filtrados, los elementos filtrados de la página actual, basada en el contenido (es decir, los elementos que tenga cada objeto) o basada en la galería del contenido (los elementos del contenido en el objeto abierto).

El tercer bloque nos da la opción de incluir el título del elemento mostrado en alguno de los puntos seleccionables.
Además permite activar enlaces para compartir en Twitter y Facebook.

El espaciado interno tanto del título como del elemento mostrado, lo podemos controlar con el cuarto bloque, indicando el padding deseado en cada punto.

Los efectos están en el quinto bloque, y con ellos podemos establecer que efecto queremos al abrir y cerrar el lightbox o al paginar entre diferentes elementos.

El sexto bloque nos sirve para establecer los tamaños de ventana por defecto, mínimo y máximo. Dependiendo como queramos optimizarlo, estableceremos estos valores a nuestro gusto.

Con el séptimo bloque podemos activar la opción de que se reproduzcan automáticamente todos los elementos de la paginación y seleccionar la frecuencia con la que se cambian los elementos, así como el número de elementos precargados (cuantos más se precargen, más recursos y datos consumimos).

Por último podemos indicar si queremos mostrar o no las flechas de navegación, y si queremos mostrar miniaturas de los próximos elementos.

Ajax

Esta pestaña nos sirve para mostrar los elementos del grid dentro de la propia página en grande una vez seleccionado. Es parecido al lightbox, pero no abre una ventana flotante, sino que lo hace en la propia página en la ubicación que le indiquemos.

En el primer bloque se puede ordenar que elementos queremos que nos aparezcan primero en el contenedor Ajax, en caso de que un elemento tuviera dos de estos elementos, aparecería primero el indicado en esta lista.

En el segundo bloque vamos a poder configurar en primer lugar el ID del container.
Después la ubicación, podemos escoger si el contenedor lo posicionamos encima del grid, debajo o lo insertamos con ShortCode en una zona específica de la web.
Podemos seleccionar también si queremos que la página haga un desplazamiento hasta donde está el contenedor, para la visualización del contenido mostrado.
Por último podemos variar el desplazamiento anterior, ajustándolo según nos convenga (en pixeles).

El tercer bloque tiene las opciones de navegación del contenedor Ajax.
Podemos mostrar un botón para cerrar, y otros con flechas de navegación si así lo requerimos.

El cuarto bloque permite insertar cualquier contenido antes del contenedor Ajax.

El quinto bloque, es similar al cuarto pero en este caso, permite insertar cualquier contenido después del contenedor Ajax.

Podremos agregar cualquier código CSS que queramos aplicar al contenedor Ajax, en el sexto bloque. Por ejemplo, imaginemos que queremos añadir un borde, sin declarar clase, agregaríamos directamente el código: border: 3px solid #000000

Para finalizar, el bloque avanzado permite se puede agregar una llamada JavaScript, que se lanzará cada vez que el contenedor sea cargado.
Podemos hacer que agregue argumentos a la llamada, marcando la casilla para ello.
Si queremos agregar un archivo CSS o JS extendido, podremos hacerlo en sus casillas respectivas.

Spinner

Esta pestaña es muy simple y breve.
Tenemos una previsualización del elemento de carga o spinner, y debajo tendremos la opción de escoger entre 6 distintos, para que se muestre cuando sea necesaria una carga de objetos en la página.
La otra opción que tenemos es la de esconder o no el contenido antes de cargar los objetos.

API/JavaScript

En el primer bloque de esta pestaña podremos agregar código JavaScript para implementarlo en el grid.

Como ejemplo, os voy a dejar este código que yo utilizo para realizar un filtrado automáticamente, para cuando se enlaza desde otras páginas.

Funciona incluyendo al final de la URL: #filtro. De esta manera se consigue que la página cargue el grid con el filtro deseado.

(function() {

var grid = jQuery(‘.esg-grid’),
url = window.location.href;
if(!grid.length || url.search(‘#’) === -1) return;

var hash = url.split(‘#’);
hash = hash[hash.length – 1];
if(!hash) return;

hash = hash.toLowerCase().split(‘ ‘).join(‘-‘);
var timer = setInterval(function() {

if(grid.is(‘:visible’)) {

clearInterval(timer);
jQuery(‘div[data-filter=filter-‘ + hash + ‘]’).trigger(‘click’);
}
}, 500);
})();

A continuación el siguiente bloque nos permite copiar los métodos API para reescribir el grid. De manera normal o rápida.
Esto se utiliza para códigos en JavaScript

Finalmente, ofrece algunos códigos JavaScript de ejemplo

Cookies

Es la última pestaña y controla las cookies para guardar las últimas configuraciones realizadas en el grid.

El primer bloque controla durante cuanto tiempo se guardan las cookies del usuario.

En el último bloque podremos decidir que cookies queremos activar. Recordaros que es obligatorio tener vuestra política de cookies bien definida y explicada, así como notificar que se utilizan cookies.

Diseñando el grid


Para acceder al diseño de la máscara o plantilla (skin a partir de ahora), iremos al menú de Essential Grid y haremos clic en la opción «Item Skin Editor». Para modificar un skin ya asociado a un grid, podemos hacerlo también desde Ess. Grid seleccionando el botón azul «Edit Skin» del grid a modificar.

En primer lugar, nos encontraremos con la lista de todos los skins que tenemos disponibles, con la opción de poder filtrarlos por categorías. Podemos editar uno con el botón verde, copiarlo con el naranja o eliminarlo con el rojo. También podemos crear uno nuevo con el botón azul inferior.

Una vez en el modo creación/edición lo primero que tendremos que hacer es introducir o cambiar el nombre del skin en la parte superior

Observaremos que el editor se divide en cuatro partes claramente diferenciadas. Layout Composition, Item Layout, Layer Settings y Available Layers

Layout Composition

Esta parte incluye todas las opciones de configuración que afectan al skin completo, y se divide en seis pestañas.

Layout

En esta pestaña podemos controlar el estilo general del Grid, entre Even (sin contenido externo a la imagen de referencia) o Masonry (con contenido externo a la imagen de referencia)

Primeramente, escogemos entre Even o Masonry.
A continuación podemos configurar donde establecer el contenido fijo.
El tercer punto es para indicar si la imagen de referencia se repite en alguna dirección o no.
Después indicamos el tipo de ajuste de la imagen sobre la ventana.
Y ajustamos también la alineación de la imagen.
El ratio se podrá modificar en los dos últimos puntos.

Cover

La pestaña Cover nos permite establecer parámetros sobre una cubierta que le vamos a dar a la ventana donde se muestra la imagen.

Es posible escoger entre una cubierta completa o bien adaptada al contenido.
La segunda opción permite escoger el color de la cubierta.
Por último la opacidad se puede modificar con el selector.

Spaces

En la pestaña Spaces se pueden modificar los espaciados que vamos a dar a toda la ventana y al contenido

En primer lugar escogemos un color para el fondo del objeto. Podemos añadir un padding al objeto, específico para cada lado. Pasa lo mismo con el borde en la tercera opción. Podemos incluso aplicar una curvatura al borde, especificando el radio. Deberemos también añadir el color y el estilo del radio en las siguientes opciones. Con la última opción podemos evitar que el contenido salga del objeto, escondiéndolo, en caso que este fuera a salirse. Las opciones son las mismas en la subpestaña de Content.

Shadow

Podemos aplicar y configurar una sombra al objeto estableciendo los parámetros necesarios en esta pestaña.

Si queremos aplicar una sombra, el primer paso será establecer donde la queremos, en el contenido, en la imagen de referencia o en ambos.
Seguidamente, escogeremos el color.
Con el selector podremos ajustar la transparencia.
Por último, podemos establecer los valores de la sombra:
[Desplazamiento horizontal] – [Desplazamiento vertical] – [Difusión] – [Alcance]

Animation

Animación nos permite establecer las diferentes animaciones generales del objeto.

Primeramente, podemos establecer una animación para la cubierta que hemos establecido antes.
En segundo lugar una animación de grupo para el conjunto de capas.
Y en último lugar, una animación para la imagen o medio.

Link/SEO

Esta última pestaña permite añadir un enlace, del objeto, estableciéndolo en la cubierta o en la imagen o medio.

Si queremos añadir un enlace, debemos especificar primeramente si lo queremos en la imagen o medio; o en la cubierta.
Si seleccionamos una de las anteriores, nos permitirá escoger entre enlazar a la entrada, a una URL en concreto, a un campo meta (que puede contener una URL por ejemplo), a un JavaScript, abrir en un Ligthbox o abrir en Ajax.
Por último escogemos donde lo abrimos: «_self» para abrirlo en la propia pestaña del navegador; «_blank» para abrirlo en una nueva pestaña; «_parent» para abrirlo en el marco anterior; «_top» para abrirlo en el marco superior.

Item Layout

Es la zona donde podremos añadir las capas que conformen nuestro objeto del grid.
Agregaremos objetos arrastrándolos desde la zona «Available Layers», e iremos conjugando el diseño que busquemos.

Con el botón azul de play, podremos ver, en una previsualización, las animaciones que​ tenemos actualmente
El botón Schematic simplemente nos muestra el esquema de funcionamiento visual del objeto del grid.
Los botones con flechas sirven para variar la ubicación de las capas en relación a otras capas en el objeto.
Finalmente con el botón verde Hide DropZones, ocultamos las zonas de ubicación de capas.

Layer Settings

Es la zona donde podremos añadir las capas que conformen nuestro objeto del grid.
Agregaremos objetos arrastrándolos desde la zona «Available Layers», e iremos conjugando el diseño que busquemos.

Con el botón azul de play, podremos ver, en una previsualización, las animaciones que​ tenemos actualmente
El botón Schematic simplemente nos muestra el esquema de funcionamiento visual del objeto del grid.
Los botones con flechas sirven para variar la ubicación de las capas en relación a otras capas en el objeto.
Finalmente con el botón verde Hide DropZones, ocultamos las zonas de ubicación de capas.

Source

El origen o fuente de los datos y el tipo de elemento de una capa se seleccionan siempre desde esta pestaña.

La opción Source, nos permite escoger entre – Post (entrada): Nos habilita Element, el cual nos permite escoger entre todos los posibles campos de una entrada, incluido un campo Meta, donde podamos tener una información personalizada. – Icon: Podremos escoger un icono de una larga lista. – Text/HTML: Nos permite incluir un texto fijo o un código HTML y tenerlo ubicado en el objeto. Cada una de estas opciones, nos habilita otras opciones extras diferentes para cada opción.

Style

Pestaña con la que daremos forma a nuestra fuente de datos escogida anteriormente

Tenemos multitud de opciones y subpestañas donde podremos configurar los parámetros siguiente de la capa:
– Estilo de tipografía
– Espaciado
– Bordeado
– Color de fondo
– Sombreado

Son opciones bastante sencillas y fáciles de entender. Escribidme en comentarios si tenéis alguna duda.

​También podemos habilitar la subpestaña «Hover», y darle un estilo totalmente distinto a la capa para cuando se pasa el ratón por encima de esta.
Tiene las mismas opciones que el «Idle», a excepción del espaciado, que se respeta y no es modificable.

Show/Hide

Si necesitamos que alguna capa no se muestre bajo alguna circunstancia o por algún motivo, deberemos especificarlo en esta pestaña. Esto es muy útil cuando necesitamos 

La primera opción nos permite ocultar la capa si el ancho es menor a unos determinados pixeles.

La misma idea para la segunda opción pero para un cierto alto en vez de ancho.

​Existen dos modos para ocultar la capa, y en esta tercera opción nos piden que especifiquemos cual de ellos utilizar.

​Las siguientes dos opciones nos permiten modificar el estado de la capa si el medio es un vídeo, o tenemos un vídeo en el Lightbox.

​Por último se pueden personalizar reglas avanzadas desde el botón Advanced Rules, por si queréis ocultar objetos de una manera más compleja.

Animation

Animando la capa podemos dar un toque visual muy interesante a nuestro grid. En esta pestaña se realiza la configuración de animación.

Tenemos una larga lista de transiciones disponibles en la primera opción. Deberemos escoger una.
Dentro de la primera opción, tenemos otro campo donde escogeremos entre «IN» para que la capa sea visible solo al pasar el ratón por encima, «OUT» para que la capa sea visible mientras no tengamos el ratón encima, o «Always visible» para que siempre sea visible ( si seleccionamos esta opción, en las animaciones de Layout Composition, hemos de tener Group Animation en «none».
Por último, especificamos el retraso en la animación.

Link/SEO

Finalmente en la última pestaña, tenemos las opciones de enlaces, con lo que conseguimos que al hacer clic en esta capa se desarrolle alguna acción.

La primera opción nos da a escoger enlazar con:
– Post (lo que abriría la entrada)
– URL (una dirección específica)
– Meta (un campo meta que contenga una dirección)
– Ajax (abriría el visor Ajax)
– JavaScript (activaría un script)
– Lightbox (abriría una ventana emergente)
– Play embedded video (reproduce video)
– Share on Facebook (compartir en Facebook)
– Share on Twitter (compartir en Twitter)

Yo estos dos últimos no he conseguido que me funcionen, pero deberían funcionar. Comentad si a vosotros os ha funcionado.

Con la opción de Link Target escogeremos, como hemos hecho antes en Layout Composition, donde queremos abrir el enlace.

Podemos cambiar donde se engloba la capa, con la siguiente opción, entre un contenedor DIV o cualquiera del resto de opciones.

​La siguiente opción yo la considero muy importante. Fix !important lo que hace es que a los parámetros que hemos definido en Style, les añade !important, para que se apliquen correctamente. Esto muchas veces es necesario, ya que si no, puede coger los estilos por defecto de los que tenemos en nuestro archivo CSS y no obtendríamos los resultados esperados. Marcando esta casilla nos aseguramos que funcionen correctamente.

Las dos últimas opciones tampoco les he encontrado la utilidad, ya que el enlace lo definimos arriba. Si alguien quiere aportar más información que lo haga desde los comentarios.

Available Layers

Available Layers es la zona donde encontraremos algunos ejemplos de capas, que podremos, una vez incluidas en el Item Layout (arrastrando desde esta zona a Item Layout) modificar totalmente a nuestro gusto y necesidad.

Escoged la que más se parezca a lo que queréis incluir para ahorraros trabajo. Las podéis filtrar por Iconos o Textos.

Videotutorial de Essential Grid


No os perdáis los videotutoriales para que veáis como crear vuestras máscaras y cuadrículas.

Parte 1 – Diseñando la máscara

Parte 2 – Diseñando la cuadrícula

Guía completa Essential Grid en español
5 (100%) 4 vote[s]

Las claves para crear la web que necesitas 2

EBOOK GRATUITO

Prepárate para tener una web efectiva

De acuerdo con el RGPD (Reglamento General de Protección de Datos), te informo que los datos facilitados serán incorporados a un fichero con el fin de poder enviarte publicaciones informativas relacionadas. En cualquier momento podrás ejercer tus derechos de acceso, rectificación, cancelación y oposición dirigiéndote a: info@joseconde.es

14 comentarios en “Guía completa Essential Grid en español

  1. Muy bueno el tutorial. Una duda, se puede llegar a dejar un item fijo? es decir, de un grid de 6, que una de ellas, no tenga interaccion y solo contenga una imagen?

    Saludos y gracias.

    • Hola Carlos,
      ante todo, gracias por tu comentario.
      La respuesta a tu pregunta es sí, puedes hacerlo, siempre y cuando sea un custom grid (es decir, que no sea basado en posts o páginas), te explico como:
      1- Crea una máscara con las características que quieras (en tu caso, que solo muestre la imagen).
      2- Entra en la configuración del grid y baja abajo, donde te aparece el «Editor/Preview» del grid, selecciona el objeto que quieras cambiar, y pulsa el icono verde «Edit element».
      3- Baja hasta donde pone «Choose Specific Skin:» y selecciona de la lista el skin que acabas de crear.

      Con esto ya lo tendrías.
      Un saludo!

  2. Hola Jose, el tutorial es magnífico. Lo he seguido paso a paso y estoy intentando utilizarlo para integrar mis redes sociales en mi web, con instagram ha funcionado perfecto y a la primera pero ahora estoy con facebook y me está costando bastante más. He creado la aplicación en facebook y he puesto en el grid que he creado para facebook la APP ID y la APP secret pero en vez de aparecerme los posts de facebook me aparece todo el rato el error

    Facebook reports: An access token is required to request this resource.

    Sabes que puedo estar haciendo mal?

    Muchísimas gracias de antemano

    • Hola Silvia,
      Ante todo, darte las gracias por tu comentario 🙂
      Te voy a dejar un link, de otro vídeo, donde realizan el proceso de sacar el stream de Facebook con Essential Grid paso a paso, ya que puede que te hayas saltado alguna parte.
      https://youtu.be/gseqv_5uan8
      El vídeo es en inglés, aunque no pudieras entenderlo, puedes ver paso a paso las acciones realizadas.
      Si aún así te siguen quedando dudas, vuelve a contestarme.

      Muchas gracias!

  3. Buenas noches Jose, muy útil el tutorial y los videos, muchas gracias. Al poner páginas, habría alguna forma de filtrarlas? Añadiendo categorías a las páginas o algo parecido? Gracias.
    P.D: En la sección ¿Qué es Essential Grid?, el enlace a tu blog da error.
    Un saludo.

    • Hola Rubén,
      muchas gracias por tu comentario.
      Comentarte que las páginas se considera contenido estático, por lo que no tienen categorías por defecto.
      Yo te recomiendo crear siempre un CPT (Custom Post Type), que es un tipo de entrada personalizado. De este modo puedes añadir taxonomías personalizadas también y hacer la estructura que tu web necesite.
      Imagínate por ejemplo, que quieres hacer Cursos, pues bien, crearías un CPT cursos con las taxonomías que necesites y después podrías filtrar mediante esto. Además consigues estructurar mejor la web, tener el contenido ordenado, tener una plantilla diferente para ese CPT, campos personalizados, etc…
      P.D: Gracias por el aviso sobre los enlaces. Están todos cambiados y actualizados.
      Un saludo!

  4. Hola Jose:

    Muchas gracias por tus aportes. A los que estamos un poco perdidos nos vienen de maravilla.

    Una consulta. He creado un grid con todos los productos de mi tienda pero cuando le doy al icono Lupa, para ver alguno de ellos, este se abre en una página nueva y lo que me gustaría es que se abriera tipo popup. ¿Esto se podría hacer de alguna forma?

    Gracias de nuevo por tu ayuda.

    Un saludo.

    • Hola Rafael,
      Gracias por tu comentario 🙂
      Por lo general, si no has modificado el Skin, el icono de lupa lo que hace es abrir un Popup con la imagen (solo la imagen). Supongo que habrás modificado el «Link To» en Layer Settings > Link/SEO a Post, y posteriormente el «Link Target» a _blank para que te lo abra en nueva ventana.
      Lo que no nos permite es abrir toda la información de ese producto en un Popup. Eso implicaría insertar todo un código extenso que este plugin no contiene, y dudo que llegue a tener, ya que es muy concreto.
      Espero haberte ayudado.
      Un saludo!

  5. Buenas tardes Jose,
    Me gustaría importar una tipografía corporativa para los títulos de los videos y en Styles no veo la opción, me puedes indicar como importo una tipo?
    Gracias

    • Buenos días Jordi,
      Si esa tipografía ya se está cargando en tu web en otra parte, simplemente tendrás que escribir manualmente en Font Family, el nombre dado en «font-family» de esa tipografía.
      Te pongo un ejemplo con la tipografía «Acme» de Google Fonts, quedaría así:
      Tipografia Font-family Essential Grid

      De otro modo, si esa tipografía no la estás cargando aún en tu web, deberás primeramente cargarla con plugins como «Use Any Font» o bien manualmente, subiéndola al servidor por FTP y declarándola posteriormente mediante CSS en el archivo style.css de tu plantilla, con @font-face.

      ¡Un saludo!

  6. hola !

    muy bueno el tutorial,

    pero sigo teniendo una duda, el grid es muy bueno y nos da opcion a poner elementos antes de estar con el raton por encima y después, pero en opciones y en el tutorial que tu haces solamente veo opción de poner elementos a la parte de hover , pero yo quiero poner elementos cuando no estamos por el raton por encima tambien,

    espero me entiendas,

    gracias,

    un saludo

    • Hola Marta!
      Gracias por tu comentario.
      Configurar la parte sin hover (ratón encima), se hace del mismo modo que la parte hover, pero se juega con las animaciones. Depende si quieres que la animación entre o salga.
      Te recomiendo que vuelvas a ver la parte 1 del vídeo, donde se explica.
      Gracias.
      Un saludo.

Deja un comentario