Curso WordPress

Tutorial Stackable en Español

tutorial stackable español

Tabla de contenidos

Si has seguido el Curso de WordPress, seguimos trabajando en el diseño web avanzado. Además de crea una cabecera transparente en WordPress, también es posible personalizar de manera avanzada los bloques de WordPress en cualquier página web de nuestro sitio.

¿Qué es Stackable?

Stackable es un complemento de WordPress que amplía las capacidades del editor de bloques de Gutenberg. Con Stackable, puedes acceder a una gran variedad de bloques personalizables que te permiten diseñar páginas web profesionales sin necesidad de conocimientos avanzados de programación.

Instalación de Stackable

  1. Ir al Panel de WordPress: Accede a tu panel de administración de WordPress.
  2. Agregar Nuevo Plugin: Ve a la sección de «Plugins» y selecciona «Añadir nuevo».
  3. Buscar Stackable: En la barra de búsqueda, escribe «Stackable».
  4. Instalar y Activar: Haz clic en «Instalar ahora» y luego en «Activar».

Exploración de Bloques Stackable

Stackable ofrece una amplia gama de bloques que puedes usar para personalizar tu sitio web. Al momento que estoy escribiendo este post, cuentan con 40 bloques. Son muchísimos, son 40 bloques adicionales a los que ya viene el editor de bloques de WordPress.

Una vez que tengas instalado el plugin, al entrar a cualquier página o entrada, notarás que aparecen los bloques de stackable, son fácilmente reconocibles por ese color rosa degradado que tienen.

bloques de stackable

Algunos de estos bloques parecen ser los mismos que ya ofrece WordPress, pero lo cierto es que son mejorados. El mejor ejemplo y que yo uso todo el tiempo es el bloque Columnas, este bloque también viene con WordPress ya incluido, pero el bloque Columnas de Stackable es otro nivel, ya que estos bloques vienen con propiedades adicionales que no tiene ni de cerca el bloque predeterminado de WordPress.

Algunos bloques de este tipo que vienen mejorados son:

  • Columnas
  • Botón
  • Separador
  • Encabezado
  • Espaciador
  • Texto
  • Lista
  • Cita
  • Imagen
  • Botones sociales

Es decir, 10 aproximadamente son bloques mejorados, y los otros 30 son bloques completamente nuevos que hacen cosas que no serían posibles en WordPress, algunos de estos son:

  • Acordeón
  • Botón del icono
  • Llamada a la acción
  • Tarjeta
  • Carousel
  • Progress circle
  • Subtítulo
  • Tabla de contenido
  • Timeline
  • Contar hacia adelante
  • Countdown
  • Biblioteca de diseño
  • Ampliar
  • Cuadrícula destacada
  • Tabs
  • Mensaje emergente de video
  • Característica
  • Hero
  • Horizontal scroller
  • Caja del icono
  • Etiqueta del icono
  • Caja de precios
  • Progress bar
  • Miembros del equipo
  • Icono
  • Caja de imagen
  • Mapa
  • Aviso
  • Número de casilla
  • Entradas
  • Precio
  • Recomendación

Personalización de Bloques

Cada bloque de Stackable se puede personalizar ampliamente. Cuando seleccionas alguno de los bloques de Stackable, notarás que la barra de propiedades de estos bloques es diferente a los bloques de WordPress.

Esta barra de propiedades se divide en 3 partes:

propiedades de los bloques de stackable

1. Pestaña Estructura

Está pestaña cambia totalmente entre cada uno de los bloques ya que es la que define el contenido del bloque, por ejemplo ahí se define la imagen que llevará un bloque imagen o el texto que llevará un bloque texto.

Pero en la parte final de esta pestaña suele tener un grupo de propiedades que si se repiten en la gran mayoría de los bloques como son Block Size & Spacing, donde se colocan márgenes, rellenos, anchos, altos, y alineaciones de los elementos.

2. Pestaña Estilo

Esta pestaña también suele tener propiedades únicas del bloque, pero contiene algunas que son compartidos entre todos los bloques como son Fondo, y también Bordes y sombras, este es útil para agregar esas sombras que hacen ver un diseño más avanzado.

En esta pestaña se encuentran además todas las propiedades en cuanto a colores, tamaños y tipos de letra.

3. Pestaña Avanzado

Las propiedades de esta pestaña son prácticamente las mismas par todos los bloques, a excepción de un par en algunas ocasiones. No es una pestaña que se suela usar mucho, pero entre las cosas interesantes que tiene es la posición desde donde puedes modificar posiciones relativas, absolutas y el z-index.

También cuentas con las propiedades de adaptabilidad, para elegir en que dispositivos ocultar/mostrar cada bloque. Hasta el final encuentras campos para agregar identificadores o clases CSS.

Diseño Web Avanzado en WordPress con Stackable

Déjame compartirte algunas de mis características favoritas que tiene Stackable para hacer diseño web avanzado en WordPress.

Biblioteca de diseño

Stackable tiene una biblioteca de diseño que me ha facilitado horas y horas de trabajo. Esta la encuentras en cualquier página o entrada a la que accedas, el botón se encuentra en la barra superior izquierda.

biblioteca de diseño stackable

Al hacer clic, te muestra una ventana emergente con 3 pestañas:

  • Diseños en bloque.
  • Kit UI
  • Wireframes

Los primeros dos son fragmentos pre-diseñados, sin embargo, los que yo uso más son los wireframes. Un wireframe es un boceto, una estructura a la cual tu agregas el contenido. Además, vienen segmentados por tipo de wireframe. Por ejemplo, te gustaría agregar una sección de precios a tu web, pero no sabes por dónde empezar, pues encuentras alrededor de 5 wireframes sobre precios para comenzar.

Bordes y sombras

Stackable ofrece la posibilidad de agregar bordes y sombras a tus bloques, yo lo uso bastante en las columnas internas (inner column) para darle formas a los cuadros o columnas que hago en las webs que diseño.

Este tipo de efectos hacen que tu página web no se vea tan básica, es importante que los sepas usar y que no abuses de estas opciones de lo contrario, tu web en vez de verse agradable se verá saturada.

sombras en stackable

Separadores

Otra propiedad avanzada que ofrece Stackable es la posibilidad de agregar separados con distintas formas. Estas propiedades son de los bloques de columnas y las encuentras en la pestaña Estilo.

Estos separadores hacen que tu web destaque y se vea a otro nivel, y lo cierto es que es muy sencillo aplicar estos separadores. Simplemente actívalo y elige el diseño que más te guste.

efectos en stackable

Conclusión

Stackable es una herramienta increíblemente versátil que puede llevar tus habilidades de diseño web al siguiente nivel. Aunque tiene una versión de pago con características más avanzadas como las transformaciones, transiciones, efectos de movimiento, la visualización condicional y la posibilidad de agregar código CSS personalizado, la versión gratis ya de por si es muy completa y extiende muchísimo las propiedades predeterminadas de los bloques de WordPress.

He creado una lista de recomendaciones para usar WordPress que te comparto en el siguiente módulo del Curso de WordPress, estoy seguro de que te serán de mucha utilidad.

Deja el primer comentario