403 | Spectra: ¿el único builder que necesitas?
10 Jan 2024 · 17 min
Podcast episode (Spanish) by Gonzalo Navarro — episode 403 — reviewing the Spectra plugin for WordPress. The host explains that Spectra augments the native WordPress block editor with ~28 extra blocks, advanced container/layout controls (including visual flex settings), copy/paste style sharing, global typography/color controls, Lottie and CSS-style animations, conditional/ responsive display options, and performance-minded toggles to enable/disable features. The episode also compares Spectra to traditional page builders (Elementor/Divi), recommends using Spectra when the native editor is insufficient, and outlines Pro features (loop builder, dynamic content, popup builder, extra blocks and templates). The host mentions a related paid course and community resources.
Chapters
En el episodio 403 de WordPress semanal repasamos las características del plugin Spectra, qué te ofrece y cuándo es buena idea que lo utilices para construir tus páginas web. Vamos allá. Hola hola, soy Gonzalo Navarro y Bienvenidos al episodio 403 de WordPress Semanal, el podcast en el que aprendes a crear y gestionar tus propias webs con WordPress en profundidad. Y hoy vamos con una review del plugin Spectra, que convierte el editor nativo de WordPress en un mejor constructor, digamos en una especie de constructor visual. Si combinamos lo que trae por defecto el editor de WordPress con este plugin, pues tendríamos algo más parecido a Elementor Divi, estos servicios o plugins más conocidos por este nombre, por el nombre de maquetador visual o constructor visual. Ahora vamos a entrar en los detalles de qué nos ofrece, de si realmente se podría considerar un Page Builder, de cuándo puede ser buena idea que lo incorpores a tu arsenal de plugins y por último destacaré sus características Pro, que bajo mi punto de vista no son ni mucho menos esenciales, pero que te pueden dar ese extra si así lo necesitas. Bien, en un momentito vamos con esta review, comentamos todos los detalles del plugin Spectra, pero antes, como siempre, novedades. ¿Qué está pasando en Gonzalo Navarro es esta semana? Pues precisamente tenéis el curso de este plugin, el curso de Spectra Builder, donde hacemos un repaso de todas y cada una de sus características, lo configuramos desde el principio repasando qué puedes activar y qué puedes desactivar, porque esta es una característica que a mí me gusta de este plugin, y es quitar todo lo que no vayas a usar. Y esto da muy buena muestra del foco que tienen puesto en que sea un plugin que ofrezca buen rendimiento, que no sea un plugin que vaya a retrasar en demasía la carga de las páginas de tu web, ni tampoco tu experiencia mientras estás utilizando su constructor o sus características. Hago un repaso por todos y cada uno de sus bloques, incluidos los premium en las clases finales, así como el uso de sus funcionalidades especiales, como puedan ser las animaciones, el contenido condicional y responsive, la construcción de layouts avanzados, porque dedico una clase específica al bloque más importante y más útil dentro de Spectra, que es su contenedor. En definitiva, un repaso completo por todas y cada una de las características y opciones del plugin Spectra ya disponible. Ya sabes, en Gonzalo Navarro es donde Tienes más de 80 cursos para crear y gestionar webs con WordPress de forma profesional. Algunos tan concretos como este, como un plugin específico y otros más genéricos. WordPress básico, WordPress intermedio, WordPress avanzado, Seguridad en WordPress, SEO en WordPress, servicios de email marketing como Active Campaign y todo acompañado de soporte personalizado conmigo a través de correo electrónico, la comunidad privada en Telegram para que puedas interactuar con el resto de miembros e incluso contenidos más avanzados por código, donde puedes ver el vídeo, copiar el código que te dejo debajo y pegarlo en tu web. Esto es parte de la zona código. Ya digo, todo este contenido y toda esta información incluida cuando te haces miembro en Gonzalo Navarro es perfecto. Pues una vez vistas las novedades, vámonos ahora con el plugin de la semana que se llama Two Factor. Simplemente se llama así, Factor, y te permite configurar diferentes tipos de identificación en dos factores para el inicio de sesión en tu web con WordPress. Por eso se llama así. Two Factor es un plugin creado por miembros de la comunidad de WordPress. Está activo en más de un millón de webs y básicamente te ofrece eso, distintas maneras en las que puedes configurar el típico inicio de sesión en dos pasos. No solo poner tu contraseña, sino después a lo mejor recibir un correo electrónico con una clave, crear un password o generarlo, mejor dicho, que expire cuando pase un poco de tiempo. Tienes como las cuatro o cinco formas más típicas para crear esta identificación, este inicio de sesión en dos pasos, pues la puedes configurar, puedes combinarlas, tener varias para tu usuario o utilizar simplemente una. Es un plugin interesante, así que si buscáis algo de este estilo, pues lo tenéis disponible de forma gratuita. Si buscáis en la sección de plugins de WordPress Two Factor o si vais a las notas del episodio, yo os dejo el enlace directo. Por cierto, he dicho activo en más de un millón de webs, está activo en más de 70.000 webs, que me he pasado por unas 30.000. Como digo, el enlace para esto y para todo lo que vaya comentando, las notas del episodio a las que puedes acceder escribiendo en tu navegador Gonzalo es 403 Gonzalo Navarro es 403 Y ahora sí, nos vamos con el tema central del episodio, una review del plugin Spectra. Y vamos a comenzar diciendo qué ofrece este plugin qué nos da. Bueno, básicamente ellos se venden como un Page Builder que funciona con el editor nativo de WordPress. ¿Por qué? Bueno, primero porque te aporta plantillas y patrones prediseñados, tienes plantillas de páginas completas o de secciones de páginas y tú puedes partir de ahí, pero además te trae 28 bloques extra. Realmente la mayoría de estos plugins tipo Spectra, lo que hicieron fue nacer como una suite, un conjunto de bloques extra que tú podrías ir añadiendo al editor nativo de WordPress. En el momento en el que se produjo ese cambio en que WordPress pasó de permitirte simplemente escribir, añadir imágenes de una forma un poco parecida a lo que haces con un documento de Word y pasó a hacerlo de una manera mucho más visual, todo en base a bloques, pues empezarán a hacer todo este tipo de plugins. Y Espectra, pues fue evolucionando, de hecho no se llamaba Espectra antes, al igual que otros muchos plugins de este tipo, a darte más características, no solo solo la de los bloques extra, sino cositas que veían que le podía faltar al editor nativo de WordPress. Por ejemplo, la característica de copiar y pegar estilos entre bloques, me refiero, algo súper útil. Imagínate que tú diseñas un botón, lo tienes perfecto y luego quieres ese mismo diseño con sus bordes redondeados, su fondo de un color, su color diferente cuando pasas el ratón por encima y como digo, te lo quieres llevar a otros botones que tengas en otras páginas o dentro de esa misma página, pues simplemente copias estilo y lo pegas. Algo que sin Espectra u otro plugin u otra cosa que añadas aparte no se puede hacer y es súper útil. También ofrece control de tipografía y colores a lo largo de toda la web, es decir, igual que esta característica de copiar y pegar estilos que te va a aparecer en cualquier bloque, pues también tendrás un control de la tipografía y los colores disponible en cada bloque. Da igual el bloque que sea, aparecerá en la típica barrita, pues si es texto, de poner el texto en negrita o si es imagen de centrarla, ya sabes que te aparece una barrita como de herramientas encima de cada bloque que estés editando. Esto es algo nativo del editor. Pues Spectra te da esas funcionalidades extra muy útiles. ¿Qué más te ofrece? Destacando uno de sus bloques, podemos hablar del contenedor. El contenedor es muy avanzado y es básicamente el punto de partida de cualquier diseño que vayas a hacer o cualquier maquetación, mejor dicho, que vayas a llevar a cabo en una página, en una entrada o en cualquier contenido. Te permite partir de un layout específico, ya sea por columnas, sin columnas y sobre todo controlar la disposición de los elementos que vayas a tener dentro de ese contenedor, tanto a nivel de espaciado, margen y demás, como de la propia disposición en sí. De hecho incorporan flex, que es una característica del CSS que te da como su nombre. Te permite intuir muchísima flexibilidad en cuanto a la manera de mostrar los elementos que están dentro de un contenedor determinado. Lo que pasa que en lugar de tener que escribir el CSS de las propiedades flexibles, lo tienes de forma visual directamente desde las opciones del contenedor. Hay una clase concreta específica para este bloque porque es el más importante y es el que más opciones tiene, así que puedes aprender todas estas características, ya digo, en esa clase. Más opciones interesantes que ofrece Spectra la posibilidad de utilizar animaciones. Por un lado trae un bloque que son animaciones Lotti, que esto es como un servicio aparte que te permite generar animaciones, pero luego te trae la posibilidad de tú aplicar animaciones a cualquier bloque que estés utilizando, por ejemplo a un trozo de texto, a la cabecera de la web, animaciones del tipo fade in bounce, estas que hace como que el elemento aparece en pantalla o que bota o lo que sea. Las típicas animaciones de CSS las puedes utilizar si activas la característica dentro de Spectra. Y además tiene otras características interesantes, como por ejemplo hacer condicional la visualización de determinados bloques o determinados elementos de tu web y tener más control sobre las condiciones de adaptabilidad de los elementos con los que estés diseñando los bloques que estés utilizando. Adaptabilidad es qué va a pasar cuando pase de una pantalla grande a pequeña o viceversa. Bueno, en definitiva, estamos hablando de un plugin que ofrece mucho más que simplemente bloques extra para el editor nativo de WordPress. Entonces, ¿Podemos considerar Spectra realmente un Page Builder? Bueno, no realmente mejora el editor nativo de WordPress y esta combinación hace que se pueda considerar considerar un Page Builder desde el punto de vista de lo que estamos más acostumbrados como son Elementor y otros. Realmente el builder, el constructor, lo aporta WordPress ya de forma nativa, lo que pasa que gracias a Spectra lo potenciamos haciendo, ya digo, que se llegue a parecer a otros actores que había antes de que WordPress tuviese este constructor, pero bueno, al final son nombres que se le da las cosas simplemente. Spectra es un plugin que mejora la forma en la que puedes editar y hacer realidad los diseños en tu web con WordPress. Bien, pero ¿Cuándo lo puedes usar? ¿Cuándo te recomiendo que lo utilices? Pues básicamente cuando el editor nativo de WordPress se te quede corto. Yo siempre recomiendo empezar sin nada, porque al final uno se pone a instalar cosas que luego o ni utiliza o utiliza una de sus opciones por utilizarla, porque como lo tienes pues bueno, voy a aprovecharlo, pero hay veces que no lo necesitas, empiezas con lo que viene con WordPress y si vas necesitando cosas pues ya te planteas, venga pues voy a usar esto porque de aquí usaría todas estas cosas, pero si no, no hace falta. ¿Algunas pistas que te pueden llevar a decir, venga, me hace falta o no me hace falta? Pues más allá de los bloques, que ya digo, Spectra ofrece 28 bloques extra, o sea que si tú necesitas alguno de ellos, por ejemplo el de galería de imágenes, porque los que vienen de forma nativa, pues que tienen que ver con imágenes y demás, están bastante limitados, sobre todo ya digo en la parte de galerías, pues bueno, te lo puedes empezar a plantear a partir de ahí. Pero además ten en cuenta el resto de características que hemos comentado, por ejemplo la opción de copiar y pegar estilos, esto para M es casi lo más útil y suena a tontería pero es súper útil, te ahorra muchísimo trabajo. También la posibilidad de crear layouts, disposiciones de elementos mucho más avanzadas. Es cierto que de forma nativa tú puedes utilizar columnas, puedes agrupar elementos, puedes hacer muchas cosas, pero si buscas más control, si necesitas más, pues seguramente el contenedor que viene con espectra y que es muy avanzado pues te dé la solución en este sentido. También puedes fijarte en características para mostrar contenido condicional o controlar mejor el responsive si te interesa el tema de las animaciones, pues ya si vas viendo todo esto y dices, venga, esto lo necesito, esto lo necesito, esto lo necesito, entonces ahí es buena idea que utilices Spectra. Por supuesto estoy obviando que uses el editor nativo de WordPress si tú usas Elementor, pues Spectra no lo necesitas, no lo vas a usar porque Elementor es la sustitución de la forma en la que se maquetan contenidos, se construyen webs con WordPress, es como una forma alternativa, digamos que cuando uno usa Elementor, Divi o lo que sea está diciendo no, voy a usar lo que viene con WordPress y voy a usar esta forma alternativa de construir webs, pero si sigues la línea dentro de WordPress y necesitas estas características que he estado comentando, entonces Spectra es una gran opción. Y en este sentido una pro tip, un consejo Pro es que desactives todo lo que no uses, porque una de las cosas buenas que ya he comentado de pasada de Spectra es que no tienes que tenerlo todo activo, incluso tienes características de rendimiento en las que puedes decir por ejemplo, venga de todas las fuentes de tipografía que yo puedo seleccionar cuando voy a editar un texto, un encabezado o lo que sea, no me cargues todas, cárgame solo estas tres porque son las que uso. Entonces ahí ya te estás quitando un montón de cosas que se cargan y que no son necesarias, o imagínate que de todos los bloques, pues no lo sé. Lo que hace Spectre es que la parte de ajustes te los pone como por características y te pone los bloques relacionados con el SEO, los relacionados con el diseño, los relacionados con la publicación de contenidos y tú puedes ir activando y desactivando los que uses y no uses, de modo que no se cargan, después cuando tú estás dentro del editor no se cargan si no los necesita, pues todo esto lo puedes ir controlando y es una buena práctica, de hecho lo vemos en la primera clase o en las primeras clases, poner todo a punto y dejar solo lo que vayas a necesitar. Bien, no quiero dejar esta review sin mencionar las partes Pro, porque hemos hablado de Spectra, los que estáis dentro de la comunidad, los que sois miembros, pues en Telegram lo hemos comentado y genera mucha curiosidad las características Pro, yo creo que porque no está muy claro si aportan demasiado y yo tengo la sensación de que están creando todavía estas características, pero tenemos bastante, bastante más de lo que parece incluido la versión Pro de Spectra. Primero tienes bloques extra, tienes bloques de formulario, de login y de registro Spectra básico, la parte gratuita ya trae la característica para que tú puedas crear formularios, típico formulario de contacto, formularios no tampoco muy avanzados, pero lo suficiente por ejemplo para eso, para un formulario de contacto. Pero con la parte premium, pues tienes también la posibilidad de construir un formulario de inicio de sesión o uno de registro. También traen un bloque extra para publicar tu feed de Instagram, que me parece interesante, que para mí no tiene utilidad. Y luego dos bloques que sí que están muy relacionados con lo que podríamos esperar de otros constructores visuales aparte, y son el bloque loop, que este es el típico bloque para crear por ejemplo una página de blog desde cero o una página de categoría desde cero, con mucho control sobre lo que vas a mostrar, quiero mostrar todas las entradas o solo las entradas de estas dos categorías, pero no solo eso, sino también con mucho control sobre el aspecto de cada contenido que se va a mostrar. Imagínate la típica página de blog, pues tú quieres que se muestre en tres columnas, con el título en verde, con este espacio entre los elementos, con la imagen a la izquierda, con el texto a la derecha, debajo siempre quiero un botón que ponga suscríbete a premium, no lo sé. Todo esto pues tienes mucho control y puedes aprovechar las características de Spectra para, ya digo, diseñar loops, que es como se llama un poco a nivel interno, todas estas páginas que muestran un archivo de contenidos. También tienes el bloque extra de contenido dinámico. El contenido dinámico permite mostrar contenido que va cambiando, por ejemplo una fecha o contenidos nuevos que se van publicando, de modo que tú puedes diseñar elementos y no tienes que poner escribir por ejemplo una cosa y que después eso no se pueda cambiar, a menos que lo cambies de forma manual, sino que puedes hacer que se recoja de forma dinámica, de forma automática. Esto en cuanto a bloques extra, pero también tienes características extra, por ejemplo, además de las plantillas que ya vienen y que son gratuitas, hay plantillas premium y van sacando regularmente nuevas plantillas. También tienes la característica del constructor de pop up, el pop up builder, es decir, pues el típico aviso que quieres que aparezca en pantalla para que la gente se suscriba o para mostrar un mensaje de feliz Navidad o un código de descuento o lo que sea, lo que es un constructor de pop ups que traen otros Page Builders, pues Spectra lo trae en su versión Premium. También tienes la característica extra de los estilos globales de bloques esto te permite generar estilos que después puedes reutilizar cuando estás en otro momento. Imagínate que tú quieres crear un estilo específico para un encabezado, porque después es el mismo que vas a utilizar en todas tus landing pages, pues puedes crear un estilo, lo haces una vez, lo configuras como estilo global y luego cuando estás utilizando un bloque de encabezado puedes decir quiero coger este estilo que yo he guardado previamente, sería como copiar y pegar el estilo, pero lo tienes siempre guardado para poder utilizar cuando quiera. ¿Más características extra? Pues de las animaciones que te he comentado antes, que puedes hacer el fade in y todo esto, básicamente te ofrecen más, las gratuitas están limitadas, no me acuerdo Si son a 6 animaciones o así, y las de pago o la parte. Cuando tienes la parte Pro pues tienes más opciones, básicamente igual que para otros bloques como por ejemplo el de galería de imágenes, pues si tienes la parte Pro te ofrecen más características. Para otros bloques como el slider también te ofrecen más características. También para el contador, que hay un bloque que es de contador que está en la parte gratuita, pero cuando tienes la parte Pro pues también tienes más funcionalidades, así que bueno, van mejorando o van dándote más opciones en algunos bloques de los que tienen así más avanzados. Así que bueno, en definitiva la versión Pro va un paso más allá, pero ya te digo que la gratuita es súper completa, en muchos casos no vas a necesitar la premium, la Pro, pero en el curso lo cubro porque además me lo pedisteis porque queréis ver qué características son para los que tengáis la Pro pues poder aprovecharlas y los que no lo tengáis que podáis ver si os interesa o no contratarlo para vuestras webs. Bueno, con esto dejamos la review de Spectra, espero que te deje claro qué es lo que te ofrece este plugin y si te animas a utilizarlo y quieres saber cómo hacerlo paso a paso desde el principio, pues ya sabes que tienes disponible el curso en Gonzalo Navarro. Es al igual que el resto de contenidos, la comunidad y el soporte. Nada más por este vídeo, nos seguimos escuchando, adiós.
More from Gonzalo
518 | Redes sociales, precios personalizados, audios desde Drive y temas de bloques (Q&A)
513 | Por qué sigo usando estos plugins después de tantos años (y cuáles he abandonado)