Explicación de la adición de Spectra (Ultimate Addons for Gutenberg) para personalizar el diseño de páginas

El nuevo editor de componentes integrado en WordPress, conocido como Gutenberg, ofrece la posibilidad de crear artículos y páginas de tu sitio web fácilmente mediante el uso de bloques o componentes. Este editor se destaca por la capacidad de ampliar sus características y añadir opciones excelentes para el diseño del sitio. Una de estas opciones es proporcionar componentes adicionales que expanden sus capacidades y pueden añadirse a través de complementos especiales para este editor, como Ultimate Addons for Gutenberg.

O conocido como Spectra, un complemento gratuito que ofrece una serie de componentes personalizables y listos para usar en tu sitio web. En el artículo de hoy explicaremos en detalle

Cómo utilizar este complemento que mejora el editor Gutenberg

Y te mostraremos cómo aprovecharlo para crear diseños destacados para páginas o artículos de tu sitio WordPress y llevar tu sitio a un nuevo nivel profesional sin necesidad de utilizar

complementos constructores de páginas (Page Builders) ni escribir código alguno. Si eres un amante de este nuevo editor y prefieres basarte en él principalmente en tu sitio, este artículo está dirigido a ti.

Tabla de contenidos

¿Qué es el complemento Spectra – Ultimate Addons for Gutenberg? Instalación y configuración del complemento Spectra – Ultimate Addons for Gutenberg Bloques más importantes del complemento Spectra – Ultimate Addons for Gutenberg Agregar bloques de Spectra a artículos o páginas del sitio Importar plantillas del complemento Ultimate Addons for Gutenberg Conclusión ¿Qué es el complemento Spectra – Ultimate Addons for Gutenberg? El complemento Spectra es un complemento gratuito de WordPress que anteriormente se conocía como Ultimate Addons for Gutenberg, y funciona principalmente para expandir el editor de componentes Gutenberg en WordPress, proporcionándole numerosos componentes o bloques adicionales, plantillas prediseñadas y otras herramientas avanzadas que facilitan el diseño de un sitio web profesional y hermoso. Este complemento está disponible en la tienda oficial de temas de WordPress y tiene una calificación de cinco estrellas con más de 300,000 instalaciones activas.

Este complemento fue desarrollado por la empresa Brainstorm Force, la misma empresa que desarrolló el famoso tema Astra y muchos otros complementos conocidos en el sistema WordPress. Pronto estará disponible una versión de pago Pro de este complemento, que proporcionará componentes y diseños adicionales exclusivos no disponibles en la versión gratuita, además de ofrecer características profesionales como contenido dinámico y un constructor de temas completo Full theme builder.

El complemento gratuito ofrece una gran cantidad de componentes o bloques adicionales que expanden las características del editor predeterminado de WordPress Gutenberg. La palabra bloque (Block) en el editor Gutenberg se refiere a una parte independiente que puede contener cualquier tipo de contenido, por lo que cualquier cosa que insertes dentro de un artículo o página en tu sitio (ya sea un párrafo de texto, un título, una imagen, una galería de fotos o un video...) estará contenida en su propio bloque. Este complemento es compatible con todos los tipos de temas de WordPress, aunque generalmente se recomienda utilizarlo con el tema Astra debido a que son desarrollados por la misma empresa.

Sin embargo, es ideal para usar con todos los temas, especialmente aquellos que no incluyen su propia herramienta de creación de páginas, ya que te evita usar cualquier complemento de construcción de páginas que pueda ralentizar tu sitio web. Instalación y configuración del complemento Spectra – Ultimate Addons for Gutenberg

La instalación del complemento Spectra es similar a la instalación de cualquier otro complemento de WordPress.

Ve al panel de control de tu sitio y selecciona

La pestaña Complementos Plugins > Añadir nuevo Add New > y busca el nombre del complemento Spectra en el cuadro de búsqueda. Una vez que aparezca el complemento, haz clic en el botón Instalar ahora para instalarlo, luego haz clic en el botón Activar para activarlo en tu sitio. Lee más: Cómo instalar y activar correctamente un complemento de WordPress en tu sitio

Una vez que actives el complemento, te aparecerá una ventana de bienvenida y configuración que puedes acceder en cualquier momento haciendo clic en Configuración en el panel de control y luego haciendo clic en UGA. En la parte superior de la ventana se muestra información útil y enlaces sobre el complemento, y en la sección Blocks en la parte inferior se muestran todos los componentes o bloques que te proporciona el complemento y que se adjuntarán con los bloques del editor, ordenados alfabéticamente por nombre (el número actual al momento de preparar el artículo es de 32 bloques, y se añaden bloques adicionales periódicamente) Junto al nombre Blocks también encontrarás dos botones: Activate All y Deactivate All para activar o desactivar todos estos bloques según sea necesario, así como el botón Reusable Blocks

que se utiliza para añadir componentes reutilizables. También puedes activar cada bloque individualmente

Haciendo clic en el enlace de activación o desactivación Activate|Deactivate

ubicado a la izquierda de su nombre como se muestra en la siguiente imagen. En este artículo activaremos todos los bloques del complemento haciendo clic en el botón Activate All, pero se recomienda que actives solo los bloques que necesites en tu sitio y desactives los bloques innecesarios para que tu sitio web no se vuelva innecesariamente más pesado.

Bloques más importantes del complemento Spectra – Ultimate Addons for Gutenberg En esta sección te daremos una descripción general de los bloques más importantes que ofrece el complemento Ultimate Addons for Gutenberg y cómo aprovecharlos en el diseño de páginas y artículos de sitios WordPress. El complemento ofrece muchos componentes o bloques, algunos diseñados para mostrar contenido (Content blocks) y otros diseñados para diseño (Layout blocks).

Estos bloques te ayudan a crear tu página fácil y rápidamente. Dado que el número de estos bloques es muy grande, mencionaré algunos aquí y te dejaré explorar el resto de los componentes por ti mismo: Advanced Heading: se utiliza para crear títulos hermosos que constan de un título principal y subtítulos con un separador horizontal entre ellos.

Info Box: para añadir cuadros de información elegantes que incluyen imágenes, títulos y subtítulos.

Call to action:

Para colocar un botón de llamada a la acción fácilmente. Tabs Block: para mostrar información en pestañas elegantes.

Form Block: para crear formularios de contacto en la página y personalizarlos. Star Ratings: para colocar calificaciones de estrellas en el contenido y aumentar la confianza en tu marca.

Table of Contents:

para insertar una tabla de contenidos que facilite a los visitantes acceder al contenido.

Google Map:

para añadir un mapa de Google a tu sitio e informar a los visitantes sobre la ubicación de tu negocio. Post Timeline: para mostrar los artículos de tu sitio en cronogramas con control total sobre su orden y diseño.

Agregar bloques de Spectra a artículos o páginas del sitio Los bloques o componentes del complemento Spectra funcionan exactamente como cualquier otro componente de los bloques del editor Gutenberg.

Para añadirlos a cualquier página o artículo de tu sitio, todo lo que necesitas hacer es editar la página o el artículo y hacer clic en el icono (+) para insertarlo en la posición que desees. Después de hacer clic en el botón de añadir bloque, puedes escribir el nombre del bloque para encontrarlo rápidamente e insertarlo, o puedes hacer clic en Explorar todo para ver todos los bloques del editor y elegir el que se adapte a ti.

Los componentes del complemento estarán agrupados en la sección ULTIMATE ADDONS BLOCKS y puedes pasar el ratón sobre cualquier componente para mostrar una vista previa de ese componente y hacer clic en él para insertarlo en la posición que desees en la página o artículo como sigue: ULTIMATE ADDONS BLOCKS También puedes controlar la configuración de cada bloque del complemento a través de la barra lateral izquierda que aparece para cada bloque de la misma manera que se usa en el editor Gutenberg, y los bloques pueden incluir opciones de alineación y opciones de formato que se pueden administrar desde la barra que generalmente aparece en la parte superior del bloque.

Por ejemplo, vamos a insertar el componente Advanced heading que te permite añadir tus títulos de forma profesional y añadir un subtítulo y usar un separador entre el título principal y el subtítulo con la posibilidad de personalizarlo completamente. Todo lo que tienes que hacer es hacer clic en el botón + y escribir el nombre del bloque Advanced heading. Una vez que aparezca el bloque requerido, puedes hacer clic en él para añadirlo a tu artículo.

Después de añadir el bloque puedes añadir tu título y subtítulo, y aparecerá un conjunto de opciones de formato asociadas con este bloque en la parte superior, como alinear el título (a la izquierda, al centro, a la derecha), además de la aparición de todas las opciones de configuración en la barra lateral derecha que te permiten controlar las fuentes y colores tanto del título principal como del subtítulo, personalizar la longitud, ancho y color del separador y el espacio entre los elementos del bloque y otras opciones como sigue: personaliza el bloque de la manera que te convenga, y de la misma manera puedes añadir cualquiera de los excelentes bloques que proporciona el complemento y configurarlos según tus necesidades hasta que llegues a la forma y diseño deseado.

Una vez que termines de añadir todos los componentes que necesites, publica tu artículo para que esté listo para mostrar. Importar plantillas del complemento Ultimate Addons for Gutenberg Si no deseas construir tu página pieza a pieza y configurar cada componente individualmente, el complemento Spectra

Además de los bloques que explicamos anteriormente, incluye una librería de diseños profesionales prediseñados a los que puedes acceder haciendo clic en el botón UGA Templates en la ventana de edición del artículo o página, donde te aparecerá una librería de diseños agrupados en tres pestañas:

Páginas Pages: te proporciona diseños de páginas listas con varios modelos o plantillas subordinadas (Templates) entre las que puedes elegir y editar dentro del editor Gutenberg para crear nuevas páginas web rápida y fácilmente. Patrones Patterns: es una colección de bloques que proporciona el complemento para secciones específicas de páginas que han sido creadas y personalizadas profesionalmente, y puedes importar cualquier patrón a tu página o artículo y personalizarlo según las necesidades de tu sitio.

Marcos Wireframes: son diseños simples sin contenido, solo en blanco y negro con estilos Dark y Light. Por ejemplo, vamos a crear una nueva página de inicio para nuestro sitio usando uno de los modelos de página lista que proporciona el complemento.

Seleccionamos del panel de control del sitio Páginas > Añadir nueva y nombramos la página como Nueva página de inicio, luego hacemos clic en el botón UGA Templates como se muestra en la siguiente imagen. Después de hacer clic en el botón, te aparecerá en la pestaña Pages varios modelos para diseños de páginas listas

que se adaptan a diferentes objetivos para que elijas el diseño que te guste. Elegiremos, por ejemplo, el diseño Digital Agency y luego aparecerá una ventana emergente con varias opciones para modelos disponibles de este diseño.

Este modelo ofrece, como ves, 4 modelos, seleccionaremos de ellos el modelo Home y haremos clic en el botón Import Template para importarlo, también puedes obtener una vista previa del modelo antes de importarlo haciendo clic en el botón Preview Site Después de obtener una vista previa del modelo y hacer clic en el botón de importación, el proceso de importación comenzará automáticamente para el contenido del modelo o página que elegiste como

También se instalarán y activarán automáticamente los complementos necesarios para mostrar los elementos de este modelo si es necesario. Por ejemplo, el diseño que importamos contiene un formulario de contacto, por lo que el complemento WPForms Lite se importará y activará automáticamente en el sitio durante el proceso de importación.

Una vez que se complete la importación, tendrás que editar el contenido según las necesidades de tu sitio y publicar tu página cuando termines. Por ejemplo, después de importar el modelo Digital Agency, editamos y formateamos su contenido, reemplazamos todas las imágenes que proporciona con nuestras propias imágenes, eliminamos las partes que no necesitábamos del diseño listo y obtuvimos el siguiente diseño para nuestra nueva página.

Todo lo que tenemos que hacer ahora es publicar esta página en nuestro sitio y mostrarla como una página de inicio dedicada. De esta manera, pudimos diseñar una página nueva para nuestro sitio con una apariencia hermosa y profesional muy fácilmente y con solo unos pocos clics

sin necesidad de construir los componentes de la página desde cero. Lee también: Aprende cómo crear una página web profesional en WordPress de más de una manera Nota 1: Algunos modelos de diseños listos pueden incluir widgets o elementos dinámicos que no se importan y para mostrarlos correctamente debes añadirlos manualmente a tu página.

Nota 2: Al importar una página o modelo, es posible que veas algunos colores y fuentes que se importaron con una apariencia diferente al contenido que se obtuvo una vista previa. Esto se debe a que la configuración del personalizador se heredará automáticamente en el diseño de la página o modelo importado.

Por ejemplo, supongamos que la página que está importando contiene un botón de color negro, pero ha asignado el color azul para los botones en el personalizador. Después de importar la página, se aplicará la configuración que personalizaste y el botón aparecerá en color azul en lugar de negro, y lo mismo ocurre si asignaste un tipo de fuente específico para títulos o párrafos en el personalizador, será adoptado en el diseño importado.

Conclusión Aprendimos en el artículo de hoy sobre el complemento Spectra conocido como WordPress Gutenberg Blocks que amplía el funcionamiento del editor de componentes Gutenberg predeterminado en WordPress que por sí solo no tiene

la flexibilidad suficiente para lograr diseños profesionales. Por lo tanto, puedes expandir las capacidades del editor de WordPress a través de este complemento que es compatible con todos los temas de WordPress, y te proporciona muchos componentes excelentes personalizables que te ofrecen la ventaja de mostrar y diseñar el contenido de tu sitio, además de proporcionarte muchos diseños de página listos que puedes usar y modificar fácilmente según tus necesidades sin necesidad de herramientas adicionales de creación de páginas. Te recomendamos que pruebes este complemento, especialmente porque trabajar con los componentes y diseños de este complemento es muy fácil y es muy similar a trabajar con los componentes del editor mismo, e incluye una interfaz gráfica para cada componente e incluye muchas opciones de personalización que te ayudan a obtener el diseño que deseas rápida y fácilmente, lo que lo convierte en una opción preferida para muchos propietarios de sitios de WordPress.