Cargando...

Cómo utilizar Spectra para WordPress para diseñar páginas y publicaciones

Actualizado el 31 de mayo de 2024

El editor Gutenberg cambió para siempre la creación de páginas en WordPress, pero muchos todavía quieren más. Afortunadamente, para esas personas, WordPress tiene una increíble selección de plugins para elegir, con Espectros Al inicio de la lista.

Spectra es esencialmente un kit de mejora para el editor Gutenberg. Agrega más de 30 bloques a Gutenberg para ampliar la cantidad de opciones que tiene cuando se trata de diseño web y, al igual que los bloques normales, todos son fáciles de usar.

Por supuesto, Spectra va más allá de los bloques adicionales. Agrega características de diseño básicas a su sitio, como un creador de ventanas emergentes, opciones de inteligencia artificial, nuevas animaciones y mucho más. Si buscas más opciones en WordPress, Spectra es sin duda la mejor elección que puedes hacer.

Hoy repasaré algo de lo que Spectra es capaz de hacer en WordPress.

Características de espectros

Primero, echemos un vistazo a algunas de las características clave que agrega este plugin y que pueden revolucionar la forma de diseñar contenido en WordPress. Estos van más allá de los simples bloques y pueden afectar sus elecciones de diseño web de maneras que nunca fueron posibles.

Generador de ventanas emergentes

Muchas empresas dependen de las ventanas emergentes para ayudar a generar clientes potenciales, mantener a los visitantes en la página e informarles sobre las ofertas que están ejecutando. Desafortunadamente, debido a algunos malos actores, las ventanas emergentes se han ganado muy mala reputación entre los usuarios.

De todos modos, siguen siendo una herramienta poderosa para que la utilicen los desarrolladores, y Spectra crea un generador de ventanas emergentes completo.

Para encontrar Popup Builder, haga clic en Spectra y seleccione la opción Popup Builder.

Generador de ventanas emergentes

Haga clic en el botón «Crear ventana emergente» en la parte superior.

Crear ventana emergente

Esto abrirá el editor Gutenberg y habrá un generador de ventanas emergentes dentro de él. Puede elegir entre crear una barra de información o una ventana emergente normal. Haga clic en la opción que desea crear.

Tipo de ventana emergente

En este caso, hice clic en la opción Ventana emergente. Por lo tanto, genera una ventana emergente genérica para usar como base. Desde aquí, puede hacer clic en los elementos individuales y editarlos como mejor le parezca. Esto incluye el contenido, los colores, la fuente, etc.

Editar ventana emergente

Dado que editar la ventana emergente es idéntico a usar Gutenberg, no profundizaré más que esto, pero el generador de ventanas emergentes es perfecto para ventanas emergentes simples con un llamado a la acción.

Desafortunadamente, si bien puedes crear una ventana emergente con la versión gratuita de Spectra, no puedes crear activadores para que aparezca. Esa función sólo está disponible en la versión Pro del plugin. En cambio, la ventana emergente aparecerá cuando se cargue el sitio.

Espectros IA

¿Qué pasaría si te dijera que se acabaron los días de diseñar tu propio sitio web? Bueno, eso sería mentira, pero la IA algún día podría llevarnos a ese resultado, y Spectra AI es uno de esos primeros sistemas que puedes probar.

Básicamente, puede decirle a la IA que diseñe un contenido en su sitio haciendo clic en la opción IA correspondiente.

Entonces, por ejemplo, con la ventana emergente que acabamos de crear, podría decirle a la IA que me ayude con la generación de contenido. Si puede usar la IA en cualquier sección particular de un bloque, verá un Asistente de IA, simplemente haga clic en él y resaltará el contenido que puede modificar.

Asistente de IA

Esta IA no es de uso gratuito, aunque obtienes 1000 créditos para probarla. Después de eso, tendrás que pagar. Con él, puedes traducir contenido, generar contenido escrito, generar código personalizado, personalizar plantillas, crear descripciones de productos y más.

Es importante tener en cuenta que la IA a menudo no ofrece resultados satisfactorios en lo que respecta a la generación de contenido, por lo que deberías esperar editar todo lo que la IA realmente cree. Todas las opciones están en el lado derecho después de hacer clic en AI Assistant.

Opciones de IA

Si está interesado en integrar la IA en su sitio web, el Asistente de IA de Spectra es un excelente lugar para comenzar.

Condiciones receptivas

La forma en que se consume el contenido de un sitio web ha cambiado drásticamente a lo largo de los años. Antes de que existieran los teléfonos inteligentes y las tabletas, el escritorio era el único dispositivo para el que se creaba un sitio web, pero ese no será el caso en 2024.

Hoy en día, los usuarios de dispositivos móviles representan la mayor parte del tráfico de sitios web. Como tal, la mayoría de los sitios web utilizan un diseño responsivo. Sin embargo, a veces eso no es suficiente. Ciertos contenidos simplemente no se ven bien en un dispositivo móvil.

En estas situaciones, Spectra proporciona opciones avanzadas llamadas Condiciones de respuesta en WordPress.

Básicamente, esto detectará en qué dispositivo un visitante está viendo la página y usted puede optar por ocultar bloques específicos en esos dispositivos.

Para encontrar estas opciones en cualquier bloque de Spectra, haga clic en la pestaña Avanzado.

Lengüeta avanzada

Haga clic en Condiciones de respuesta para expandir las opciones. Aquí tendrá la opción de ocultar el bloqueo en computadoras de escritorio, tabletas y dispositivos móviles. Simplemente mueva el interruptor al dispositivo en el que desea ocultar el bloqueo.

Ocultar contenido con Spectra en WordPress

Y eso es. Esto puede ayudarle a hacer que su contenido sea más legible en dispositivos móviles si nota algún problema con la vista móvil de su sitio.

Bloques de espectros

Con más de 30 bloques para elegir, no es ningún secreto que son el pan de cada día de este plugin. Muchas son pequeñas actualizaciones de bloques existentes, mientras que otras son nuevas y pueden adaptarse perfectamente a su negocio.

El objetivo de instalar Spectra es obtener todas las herramientas de una sola en lugar de tener que instalar varios plugins. Dicho esto, permítanme ser claro y decir que las herramientas dedicadas tendrán más funciones disponibles.

Esto puede convertirlos en una mejor opción si van a desempeñar un papel destacado en su sitio web. Obviamente, hay demasiados para cubrir, por lo que solo me centraré en los artículos más importantes.

Nota: Debido a la simplicidad de los bloques, no los cubriré en detalle, sino que explicaré lo que pueden hacer.

Testimonios

Testimonios de Spectra en WordPress

Los testimonios son un elemento básico para los sitios comerciales. Permiten a los clientes dejar comentarios y que usted muestre ese frente y centro para que los clientes potenciales sepan cómo se sintieron los clientes anteriores o existentes.

El bloque de Testimonios de Spectra es un control deslizante que puede utilizar para mostrar varios testimonios en un solo lugar. Por defecto muestra 3 testimonios, pero se puede personalizar hasta 50 de ellos. También puedes agregar una imagen de la persona que deja el testimonio.

Calificaciones de estrellas

Reseñas de estrellas de Spectra en WordPress

Si su sitio trata sobre reseñas de productos, películas, juegos, restaurantes o cualquier cosa, querrá implementar un sistema de calificación. Si bien hay mucho para elegir, Spectra tiene un sistema de calificación de estrellas simple que puedes usar.

De forma predeterminada, comienza con 5 estrellas, pero se puede personalizar hasta 10 si es necesario. Hay algunas personalizaciones simples que le permiten controlar el color de la estrella, las animaciones, la posición y todo eso. En general, es simple, pero normalmente necesitarías otro plugin para esto.

cuenta regresiva

Cuenta regresiva de Spectra en WordPress

El bloque Cuenta regresiva es exactamente lo que parece, un bloque que le permite realizar una cuenta regresiva hacia una fecha determinada o hasta que algo termine. Por lo general, esto se usa para resaltar los próximos eventos o mostrar cuánto tiempo queda para un acuerdo.

El reloj mostrará días, horas, minutos y segundos hasta que llegue la hora designada. Hay algunos diseños diferentes para el reloj entre los que puede elegir, pero en general, el reloj es muy simple y solo implica seleccionar una fecha de finalización en un calendario.

mapas de Google

mapas de Google

Google Maps es un elemento básico para cualquier sitio que tenga una ubicación física. Ayudan a los usuarios a encontrar su tienda o la ubicación más cercana. Por lo general, necesitarás obtener una clave API y un plugin para usar Google Maps en WordPress, pero no con Spectra.

Spectra usa su propia clave API, por lo que todo lo que necesita hacer es agregar las ubicaciones deseadas al bloque y él se encargará de todo lo demás. Las únicas opciones que puedes ajustar son el nivel de zoom y la altura del mapa.

Lista de precios

Lista de precios con Spectra en WordPress

Si vende productos, necesitará mostrar productos y etiquetas de precios. El bloque Lista de precios existe para este propósito y se parece mucho al menú de un restaurante donde puede ingresar la imagen, la descripción y el precio del producto.

Tiene cuatro estilos preestablecidos entre los que puede elegir y puede personalizar el diseño para excluir o incluir otra información. Funcionará como un menú simple para un restaurante o para resaltar una línea de productos y mostrar las diferentes versiones o niveles de un plan.

Tabla de contenido

Tabla de contenidos con Spectra en WordPress

La tabla de contenido (TOC) permite a los lectores ver cómo está etiquetado cada encabezado de una publicación o página, y pueden hacer clic en él para ir directamente a ese encabezado. Es extremadamente conveniente para navegar por contenidos más largos.

Y en este caso, todo lo que necesitas hacer es agregar el bloque. Completará automáticamente la información analizando sus encabezados. Y sí, los subtítulos aparecerán debajo de sus respectivos encabezados en el TOC.

Cronología del contenido

Línea de tiempo con Spectra en WordPress

El bloque Línea de tiempo de contenido le permite crear una línea de tiempo para cualquier cosa. Por ejemplo, puede usarlo para mostrar los lanzamientos de sus publicaciones en su sitio web, o puede usarlo para mostrar cómo ha evolucionado su negocio a lo largo de los años.

Incluso puedes usarlo para mostrar tu progreso en proyectos más grandes, como escribir un libro o algo similar. La línea de tiempo se puede ampliar según sea necesario y solo requiere que usted complete la información como mejor le parezca.

Equipo

Bloque de equipo de Spectra en WordPress

El bloque Equipo le permite mostrar su personal a los visitantes. Por ejemplo, si desea destacar a su jefe de cocina, es posible que desee contarles a los usuarios sobre su experiencia culinaria, como dónde fueron a la escuela, con quién se capacitaron, etc.

También puedes incluir enlaces a redes sociales. Esto puede ser muy útil si desea destacar a un autor o orador invitado, para que no se limite solo a su personal. El bloque es para una sola persona, pero puedes agregar tantos bloques como necesites.

Creación de una página de destino con bloques Spectra

Ahora que hemos cubierto algunos de los bloques clave de Spectra, veamos cómo podemos usarlos para crear una página de destino. Primero, tomemos un minuto para analizar qué contenido debería estar en una página de destino.

Lo que incluya en una página de destino depende completamente del propósito de esa página de destino. Por ejemplo, si está lanzando un nuevo producto o servicio, su página de destino debe estar dedicada a vender ese producto o servicio.

Seamos simples y digamos que vamos a crear una página de destino para un nuevo menú en un restaurante.

En este caso, nos gustaría incluir muchas imágenes que muestren los alimentos de ese menú, las ofertas que ofrecemos y el menú en sí. Entonces, ¿qué bloques de Spectra serían útiles?

Bueno, puedes usar el bloque Lista de precios para crear un menú en la página de destino. Si se trata de una oferta urgente, puede usar el bloque de cuenta regresiva para mostrar cuánto tiempo le queda para ver esa oferta especial antes de que desaparezca para siempre.

Quizás quieras presumir de tu jefe de cocina, así que incluye un bloque de Teams para compartir esos detalles. No es tan difícil descubrir qué bloques pueden resultar útiles. Una vez que los elijas, solo tendrás que crear un diseño que te guste.

Lleve WordPress al siguiente nivel con Spectra

Spectra es un plugin diseñado para ampliar sus opciones en WordPress y hace un gran trabajo en ello. Muchos de los bloques adicionales que ofrece serían plugins por derecho propio, pero con Spectra, obtienes todo en un solo paquete.

Esto ayuda a evitar la sobrecarga de plugins en su sitio web y, al mismo tiempo, le brinda un montón de opciones. También hay funciones adicionales como un generador de ventanas emergentes y un asistente de inteligencia artificial. Estos pueden ayudarle con el diseño web en un nivel diferente.

Espero que este tutorial te haya resultado útil para aprender lo que puedes hacer en WordPress con el plugin Spectra.

¿Cuál es tu característica favorita de Spectra para WordPress? ¿Planeas utilizar el Asistente AI?

Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments