Stackable: el plugin que desbloquea tus bloques

¿Recuerdas los años 80? La llegada de la nueva ola, el advenimiento de los cortes de pelo mullet, el éxito de Cyndi Lauper, Michael Jackson, Madonna, Prince, Whitney Houston, Duran Duran, etc. En los años 80, también es la explosión de los videojuegos y el lanzamiento de un juego en el que muchos hemos estado cerca del chasquido del pulgar: Tetris.

Este juego, de principio sencillo, consistía en apilar bloques de diferentes formas optimizando el espacio disponible.

El concepto se puede resumir en una línea: “Tetris encaja perfectamente en la definición del mejor juego: un minuto para aprenderlo, toda una vida para dominarlo” , como dijo el periodista Bill Kunkel (también conocido como The Game Doctor).

Una afirmación que podría aplicarse a muchos programas, como WordPress.

Hablando de WordPress, si menciono Tetris, es porque el plugin que voy a diseccionar hoy se llama Stackable. Y por una buena razón, este complemento agrega nuevos bloques de Gutenberg para anidar en su sitio de WordPress .

¿Listo para esta nueva prueba? ¡En sus marcas, listos, fuera!

Escrito originalmente en julio de 2021, este artículo se actualizó en noviembre de 2021 con las versiones gratuita y premium 3.0.5 de Stackable.

¡Tus mejores proyectos de WordPress necesitan el mejor anfitrión!

WPMarmite recomienda Bluehost: gran rendimiento, gran soporte. Todo lo que necesitas para un gran comienzo.

Prueba Bluehost

¿Qué es apilable?

“Potenciando la próxima generación de diseño web”. Esta es la misión de Stackable en su sitio web oficial, donde el complemento se define a sí mismo como una "nueva experiencia de creación de páginas para Gutenberg". ¡No menos!

Hay que decir que en el directorio de WordPress, el complemento de bloque tiene más de 40.000 instalaciones activas y una calificación agradable de 4,9 de 5 estrellas, acompañada de una serie de críticas favorables.

Si ya está buscando nuevos bloques de Gutenberg , es posible que ya haya encontrado complementos como Ultimate Addons para Gutenberg, Qubely, Getwid o Coblocks.

Hablamos de ellos en nuestro artículo sobre complementos para aumentar los poderes de Gutenberg. Su misión es simple: diversificar la gama de bloques de Gutenberg disponibles en el editor de contenido.

Stackable es también un plugin diseñado para Gutenberg, al que aporta un sinfín de bloques, desde los grandes clásicos (cabecera, galería, llamada a la acción) hasta los más exóticos (cotizaciones, tablas de precios, cronómetro, testimonios, etc.).
Estos bloques están listos para usar y personalizables.

Entonces, podría pensar, ¿cuál es el punto de instalar Stackable? Son solo bloques entre otros bloques. Bueno, Gutenberg proporciona muchos bloques útiles, pero con Stackable, las posibilidades se multiplican.

Además, tiene acceso a funciones de personalización más avanzadas que las que se ofrecen de forma nativa con Gutenberg, como: ajustar el diseño de los elementos dentro de los bloques, espaciado, cambiar el fondo, agregar efectos de desplazamiento, etc.

Hay dos versiones de Stackable:

• Una versión gratuita está disponible en el directorio de WordPress.

• Una versión paga está disponible en el sitio web oficial del complemento, a partir de $ 49 para usar en un sitio.

Como puedes imaginar, el segundo da acceso a más bloques y permite personalizarlos más finamente.

Para esta prueba, nos enfocamos en la versión Premium.

Configuraciones apilables

Para comenzar a configurar Stackable, instale y active el complemento. Luego vaya a Configuración > Apilable.

En su interfaz, tendrá acceso a las siguientes configuraciones:

• Font Awesome icons Pro (premium): para integrar un kit Font Awesome Pro a Stackable.
• Configuración del editor: le permite controlar ciertas funciones del editor de Stackable. Por ejemplo, puede deshabilitar la Biblioteca de diseño, establecer el ancho de ciertos bloques, cerrar los paneles del editor que no esté usando y vincular las columnas para que sufran los mismos cambios.
• Administrador de roles (premium): para dar o bloquear el acceso al editor de bloques a algunos roles de usuario y dejar que solo editen el contenido. Nota: esta gestión funciona en todos los bloques , no solo en los incluidos con Stackable.
• Campos personalizados (premium): esta característica le permite crear campos personalizados que puede agregar dinámicamente a su contenido desde el editor. Para hacerlo, vaya a la sección Campos de su administración de WordPress, haga clic en “Agregar nuevo”, defina un tipo de campo (Texto, Número, Fecha, Hora o URL) y un nombre.

Luego haga clic en "Guardar campo", ingrese un valor para su campo y haga clic en "Guardar cambios" para guardarlo.

Para integrarlo a tu contenido, coloca el cursor donde quieres que aparezca el valor de tu campo y haz clic en el ícono de la base de datos (corresponde a Campos Dinámicos).

Seleccione "Sitio" como "Fuente dinámica", luego su campo recién creado (aparece en "Campos personalizados apilables") y finalmente haga clic en "Aplicar". ¡Eso es!

Eso está muy bien, pero ¿por qué hicimos todo esto? Gracias a la magia del contenido dinámico, tan pronto como lo actualice, mi dirección de correo electrónico se actualizará automáticamente en cada lugar de mi sitio donde esté integrado el campo personalizado.

• Puntos de interrupción receptivos: es posible cambiar el ancho de pantalla desde el cual se verá su sitio en modo Tablet o Móvil, y así mostrar la configuración que ha definido para estos dispositivos.
• Configuración global: hay dos funciones disponibles para superar posibles incompatibilidades con el tema de su sitio. Puedes ingresar al selector del área de contenido de tu tema, y ​​forzar el uso de las tipografías de Stackable para que tomen el relevo a las de tu tema.

Al igual que Elementor, Stackable tiene una configuración global: los colores y la tipografía que se aplican a las páginas creadas con Elementor. Pero con Stackable, tienes la posibilidad de definir estas configuraciones para todos los bloques que componen tu sitio .

• Habilitar y deshabilitar bloque: si no necesita algunos bloques, puede deshabilitarlos para que no aparezcan en la lista de bloques disponibles.
• Configuración de optimización (premium): le permite cargar archivos JavaScript y CSS solo en publicaciones que contienen bloques apilables en lugar de en todo el sitio. El propósito de esta función es mejorar el rendimiento de su sitio. Esta función solo se aplica a los bloques de la versión 2 porque ya se aplica a los bloques más recientes del complemento (desde la versión 3).

¿Cómo usar Apilable?

kits y bloques

Stackable se usa directamente desde el editor de WordPress. Para hacerlo, cree o abra una página o una publicación, luego seleccione Biblioteca de diseño en la parte superior de su publicación.

La biblioteca de diseño contiene categorías y kits de interfaz de usuario. ¿Qué es?

De hecho, estas dos secciones contienen los mismos elementos, pero categorizados de manera diferente. Los Kits de UI reúnen los bloques disponibles por la guía de estilo y las Categorías los agrupan por tipo de bloque: encabezado, testimonial, llamada a la acción, etc., que se pueden encontrar en todas las guías de estilo disponibles.

Las categorías y los kits de interfaz de usuario son dos formas diferentes de encontrar el bloque adecuado para usted.

Cada bloque viene con un diseño listo para usar y personalizable. Veremos cómo personalizarlos en la siguiente parte.

Para encontrar el bloque que necesita, también puede utilizar la barra de búsqueda a su disposición. Los cuatro íconos en la parte superior derecha de la ventana le permiten actualizar los resultados de la búsqueda y cambiar el tamaño de las miniaturas para obtener una vista más precisa o más grande de los diferentes bloques.

Cómo integrar un bloque apilable en una publicación

También puede simplemente hacer clic en el ícono "+" como lo haría para agregar cualquier bloque, y reconocerá fácilmente los bloques del complemento apilable, ya que están adornados con un degradado de color púrpura anaranjado.

Al hacer clic en el botón "Examinar todo", puede acceder a todos los bloques de Gutenberg a su disposición. Los bloques apilables están presentes en las secciones "Texto" y "Apariencia", y están todos agrupados en la sección homónima "Apilable", que también da acceso a la Biblioteca de diseño.

Todos estos caminos conducen a Roma a los bloques apilables, sí, pero es principalmente el camino de la biblioteca de diseño el que da acceso a los diseños prefabricados.

Tome este bloque Testimonial, por ejemplo, que tiene un formato mínimo, texto de relleno y ninguna imagen de ejemplo:

Y vea otro bloque Testimonial, agregado desde la Biblioteca de diseño (el bloque Prime Testimonial 2 ):

Una vez que haya encontrado el ajuste perfecto, haga clic en el elemento deseado para insertarlo directamente en su publicación. Luego puede reorganizar el elemento en la página, como cualquier bloque de Gutenberg, y personalizarlo.

Personalización Apilable

Para personalizar un bloque apilable, dirígete a la sección "bloque" en el lado derecho de tu publicación, donde encontrarás un montón de opciones, clasificadas en tres categorías: Bloque , Estilo y Avanzado .

Encontrar el que le interesa puede ser tedioso porque hay mucho para elegir, pero también puede encontrarlo simplemente haciendo doble clic en el elemento de bloque que desea cambiar. A continuación, accederá a la configuración de ese bloque con un solo clic.

Las diferentes opciones de personalización se agrupan en tres pestañas:

• Bloque : aquí es donde puedes personalizar el diseño de los diferentes elementos que componen tu bloque, añadir bordes y sombras y actuar sobre el fondo, el espaciado y la alineación del texto.

También puede ajustar el espacio entre los elementos de sus bloques pasando el cursor sobre ellos y luego usando las manijas en la parte inferior del elemento. Incluso puedes ver la cantidad de píxeles que lo separan de su vecino. ¡Muy útil!

• Estilo : permite gestionar las columnas y actuar sobre la tipografía, colores, botones y separadores. Es más inesperado, pero también puede agregar un título y una descripción a su bloque.
• Avanzado : aquí tienes acceso a funciones avanzadas como la etiqueta HTML asociada al bloque y la gestión del responsive (posibilidad de ocultar el bloque en ordenador, tableta o móvil). Puede ajustar los márgenes del bloque y la alineación del contenido, pero también puede divertirse agregando animación o efectos de transición a sus elementos (sin embargo, hágalo con calma).
  La guinda del pastel para los aficionados a CSS es la posibilidad de modificar el CSS del bloque directamente en esta interfaz, al lado del bloque, y con una vista previa de los cambios en tiempo real.
  Finalmente, la visualización condicional le permite mostrar un elemento solo cuando se cumple una condición que ha definido previamente.

Únase a los suscriptores de WPMarmite

Obtenga las últimas publicaciones de WPMarmite (y también recursos exclusivos).

SUSCRÍBASE AHORA

Si no estás completamente satisfecho con el diseño de un bloque, tienes la posibilidad de modificar muchos parámetros para ajustarlo a tu gusto.

Por ejemplo, me gustó poder agregar fácilmente efectos al pasar el mouse sobre los elementos o el elemento principal (aplicar un fondo al bloque principal para aprovechar esta última característica), o modificar fácilmente los márgenes de cada elemento del bloque. .

Aún mejor: ¡puede elegir diferentes márgenes en dispositivos móviles y tabletas! Para que pueda cambiar fácilmente el aspecto receptivo de su sitio. Para hacer esto, primero haga clic en el ícono del escritorio (computadora) para mostrar los íconos de otros dispositivos.

Otra buena opción es agregar separadores en la parte superior o inferior de un elemento, como con Elementor. Por supuesto, puede ajustar el aspecto de estos separadores e incluso agregar una o dos capas más claras en la versión Premium.

Así es como se ve el fondo de esta apetitosa hamburguesa:

Cuando pasa el cursor sobre su nombre, algunas configuraciones se vuelven moradas y el cursor se convierte en un signo de interrogación. Si no sabes qué son, haz clic para ver una animación que te ayudará a entender para qué sirven. Bastante útil para orientarse en todas estas opciones.

¿Qué adaptación a temas y plugins?

Adaptación a temas

Según la documentación oficial, "Stackable debería funcionar con cualquier tema", siempre que el tema que tengas en tu sitio esté optimizado para Gutenberg.

Hablando de temas, lo mencioné al comienzo de esta publicación: hay un tema interno , diseñado para funcionar con el editor Gutenberg y el complemento Stackable. Es gratis y está disponible en el directorio oficial de WordPress. Con él, la compatibilidad está garantizada, en definitiva.

Tiene los colores del complemento del mismo nombre, así que espero que no te importe el rosa caramelo.

Descarga el tema Apilable:

Adaptación a complementos

La documentación apilable asegura que es compatible con el generador de páginas elementor (enlace aff). Pero tenga cuidado, no podrá usar bloques apilables en el editor del generador de páginas.

En realidad, es de la misma manera que para los bloques de Gutenberg, no puede usarlos en el editor de Elementor, debe elegir: crear su página con Elementor o con el editor de WordPress.

La web oficial de Stackable también asegura que sus bloques son compatibles con cualquier plugin , por lo que puedes usarlos con otras bibliotecas de bloques sin ningún problema.

Construye tu sitio web con Elementor

Diseñe fácilmente la apariencia de su sitio web de WordPress con el famoso creador de páginas. Prueba Elementor

Prueba Elementor

Documentación y soporte

En caso de que tenga alguna dificultad al usar Stackable, puede consultar la documentación oficial en cualquier momento.

Encontrarás allí:

• Una sección dedicada a comenzar con el complemento.
• Una sección de solución de problemas.
• Precios y detalles de licencias.
• Guías dirigidas.
• Preguntas frecuentes.
• Y otros recursos.

También puede encontrar esta documentación en Configuración > Apilable, pestaña Documentación .

En caso de fallas técnicas, el equipo a cargo del complemento proporciona a los usuarios una lista de problemas frecuentes, así como soluciones para solucionarlos.

Si todavía está atascado, puede llamar al soporte de Stackable o unirse a su grupo de Facebook para obtener respuestas a sus preguntas.

Con respecto al soporte, el equipo de Stackable puede ayudarlo si les envía su solicitud a través del formulario de contacto en la pestaña Contáctenos en Configuración > Stackable, o a la dirección de correo electrónico [email protected] .

¿Cuál es la relación calidad-precio?

La versión premium es naturalmente más generosa en la variedad de bloques que ofrece. Las opciones de personalización también son más numerosas.

Para el bloque de características , por ejemplo, hay 2 opciones de diseño en la versión gratuita (Básico y Simple ), en comparación con 13 en la versión Premium.

En la versión Premium también hay parámetros más o menos interesantes, según el uso que hagas de Stackable, como la integración con Font Awesome Pro y el Role Manager , así como la posibilidad de modificar cualquier bloque en CSS.

Para usar esta última función, vaya a la sección Avanzado , luego CSS personalizado . Conveniente: sus cambios se muestran en tiempo real.

La versión Premium también da acceso a un año de soporte y actualizaciones .

Usar Stackable o un creador de páginas: esa es la cuestión

Eso es todo, hemos repasado las características y configuraciones de Stackable juntos. Ahora tiene una idea más clara de lo que tiene reservado el complemento de bloque.

Si eres fanático de los creadores de páginas, o ya los has examinado de cerca, es posible que te preguntes: ¿por qué usar Stackable en lugar de un creador de páginas?

Porque las opciones que ofrece Stackable y la versión gratuita de Elementor por ejemplo son comparables. Y por una buena razón, Stackable aborda una experiencia de diseño con un creador de páginas , como se afirma en su sitio web oficial: "Tenga la confianza para crear fácilmente los sitios web más rápidos utilizando una nueva experiencia de creación de páginas para Gutenberg" .

Y con la llegada de Full Site Editing, que permitirá actuar sobre todos los elementos de la interfaz del sitio (y no solo sobre el contenido de las publicaciones), Stackable podría acercarse aún más. Dicho esto, Stackable tiene la ventaja de usarse directamente en el editor de contenido de WordPress , lo que simplifica la experiencia de diseño en comparación con los creadores de páginas actuales.

Por otro lado, la versión pro de Elementor ofrece widgets y funciones mucho más avanzados. Dado que ambos complementos cuestan lo mismo para un solo sitio ($ 49), le sugerimos que recurra al gigante de los creadores de páginas.

Nuestra opinión final sobre Stackable

Con todo, podemos decir que Stackable es un complemento bastante intuitivo que ofrece diseños modernos y estéticos.

Stackable es para cualquier creador de sitios que quiera tener bloques más avanzados para personalizar el diseño de su sitio , sin necesidad de tocar ninguna línea de código (pero teniendo la posibilidad, si domina el CSS, de poner los bloques a su gusto).

Sin embargo, ¿debería usarlo o ir directamente a un creador de páginas más avanzado como Elementor?

De hecho, con Stackable nos acercamos a una experiencia de diseño de un creador de páginas directamente en el editor de WordPress. Se podría decir que este es el comienzo del objetivo final del Proyecto Gutenberg, que es convertirse en un verdadero "constructor de sitios".

Sin embargo, todavía no estamos allí. Por ahora, Stackable te ayudará a crear publicaciones de la misma manera que la versión gratuita de Elementor, sin ninguna gestión de plantillas (Stackable te permite cargar diseños prefabricados, pero no guardar los tuyos).

Si te gusta trabajar con el editor de WordPress y los bloques proporcionados por Stackable son suficientes para tu proyecto, ¡adelante! No será necesario utilizar Elementor.

Sin embargo, si necesita funciones más avanzadas o necesita diseñar un sitio desde cero (me refiero a personalizar todas las plantillas de página), Elementor (enlace aff) o uno de sus competidores será indispensable.

Y si eres uno de los usuarios que ya ha sido seducido por Elementor, Stackable podría no ser un gran éxito. Después de todo, tienes tus propios hábitos, por lo que no hay ninguna razón real para cambiarlos.

Si estás interesado en la versión Pro de Stackable, no dudes en ver la demo disponible y navegar por la versión gratuita, para asegurarte de que los bloques y opciones son de tu agrado.

Descargue el complemento apilable:

Y tú, ¿ya lo has usado? ¿Este artículo te hizo querer usarlo? Comparte tu opinión en los comentarios.