497 | Diseña como un pro con GenerateBlocks (sin escribir CSS)

En el episodio 497 de WordPress Semanal hablamos de cómo usar Generate Blocks y sus herramientas para maquetar con control y precisión. Todo esto sin recurrir a código ni a constructores pesados. Vamos allá. Hola, hola, soy Gonzalo Navarro y Bienvenidos al episodio 497 de WordPress Semanal, el podcast en el que aprendes a crear y gestionar tus propias webs con WordPress en profundidad. Hoy vamos a hablar de Generate Blocks, que es un plugin que añade características y bloques extra al editor nativo de WordPress, pero lo hace con un enfoque súper concreto porque básicamente traslada toda la lógica que hay detrás del CSS, que ya sabéis que es este lenguaje que permite dar vida, permite maquetar diseños y que en lugar de coger y hacer como otros constructores visuales que simplemente te dan opciones para que tú vayas modificando lo que quieras, en este caso tenemos lo mismo pero con la nomenclatura y con todas las opciones propias del CSS. Ahora lo vamos a ver a continuación en detalle. Y para quién recomiendo este enfoque, qué debes tener en cuenta si lo vas a elegir y cómo puedes aprender a dominarlo desde cero. Pero antes, novedades. ¿Que está pasando en Gonzalo Navarro es esta semana? Pues tenemos nuevo vídeo de la zona código, como siempre, como cada semana, y en él aprendes a redirigir al último contenido publicado después de hacer login o después de iniciar sesión. Esto viene muy bien si por ejemplo tienes algún tipo de web de contenidos solo para usuarios, ya sea de pago o gratuitos o lo que sea, y te interesa que siempre vayan a lo más reciente. Pues con esto lo logras. Lo que hacemos es que si inicia sesión y no eres ni administrador, ni editor, ni ningún rol que realmente preferiría ir o tiene más sentido ir a la parte de administración, pues entonces va a redirigir al último contenido del tipo que tú quieras. Pueden ser entradas, pero también si tienes un tipo de contenido personalizados que son podcast, cursos, productos, incluso lo que sea, pues también lo puedes configurar. Incluso puedes configurar varios que de entre todos estos, pues eso, entradas, podcast, lecciones de un curso, por ejemplo, se vaya siempre al más reciente, independientemente de cuál sea. Esto está cubierto en el vídeo paso a paso, como siempre. La zona código, ya sabes, es código para no desarrolladores, simplemente lo copias, te enseño cómo hacerle las modificaciones que necesites por ejemplo decir venga quiero que esto aplique a entradas, a mi tipo de contenido, podcast y a lo que sea, pues te enseño cómo hacerlo, cómo copiar el código, cómo pegarlo y ya está, no tienes que hacer nada más y obtienes los mismos resultados que muestro en el vídeo. Lo dejo el enlace en las notas del episodio, pero vamos, si no te vas a Gonzalo Navarro es a la parte de snipers de código y ahí lo tendrás. Siguiente novedad, el curso de Generate Blogs, que ya la semana pasada te lo comenté porque lo que hice fue sacar las clases que ya tenía pero me quedaban algunas por editar y para cuando salga este episodio seguramente esté completo, a lo mejor falta una clase o algo así, pero vamos, ya estará prácticamente completo. No te voy a hablar mucho de este curso porque te voy a explicar todo lo que puedes hacer con Generate Blogs a lo largo de este episodio y básicamente en ese curso es donde aprendes a dominarlo. De nuevo, todas las notas del episodio, puedes ir a Gonzalo es 497 y ahí lo tienes, perfecto. Vámonos ahora con el plugin de la semana que ya lo comenté hace un tiempo. Básicamente cuando lanzamos este plugin que es Frontend User Avatar, desarrollado por Alberta Res y la gente de Sirvelia también con mi colaboración. Y hace poco me escrib Nawai Badiola porque lo está utilizando en la web de un cliente, que por cierto también fue cliente mío y suscriptor, y entonces me dijo que se podían mejorar sobre todo desde el punto de vista estético y de usabilidad, tanto en la parte de administración como en la parte frontal. Así que ya están aplicadas esas mejoras y por eso aprovecho para mencionarlo por aquí. Básicamente si no recuerdas este plugin lo que hace es que los usuarios puedan subir y gestionar su propio avatar, su propia imagen de perfil directamente desde la parte frontal de la web, sin tener que ir al panel de administración ni depender del servicio que usa WordPress que es Gravatag. Y hace solo eso, porque ahora todos los plugins que hacían esto antes le metieron mil cosas en medio, pues éste simplemente hace eso. Es 100% gratuito, es muy ligero y es útil para webs de membresía de comunidades o directorios con perfiles públicos donde hace falta que la persona pueda subir fácilmente su imagen de perfil. Os dejo el enlace en las notas del episodio. Y ahora sí, vámonos con el tema central cómo diseñar como un auténtico Pro con Generate Blogs y sin escribir CSS. Bien, ¿Para quién puede ser útil este plugin Generate Blocks? Bueno, hay muchos usuarios de WordPress que les gusta saber CSS, que aprenden, que a lo mejor han hecho mi curso de CSS básico, pero no lo terminan de dominar. Al final requiere práctica, requiere hacer varias webs, aplicarlo. Y para mí Genere Blogs es perfecto para esto porque cambia el enfoque de los constructores visuales y lo que hace es añadirte opciones a los bloques que te aporta, que sobre todo son bloques estructurales, y te añade todo lo que puedes hacer con el CSS, prácticamente todo, pero con opciones. Es decir, tú no escribes nada, ves toda esa parte y piensas en CSS sin tener que escribirlo. Entonces, si tú eres de esas personas que te gusta esa pureza y además te da mucha más, va a ser todo mucho más ligero. No es lo mismo que utilizar un constructor tipo elementor que intenta ocultarte toda esta parte de CSS, al final lo va aplicando también JavaScript y más cosas, pero claro, te da toda una estructura visual para que tú puedas arrastrar, soltar, pero ahí no haces nada relacionado con el CSS. Luego ellos sí que lo escribirán dependiendo de lo que tú vayas ajustando, pero no tiene nada que ver. Esto es un enfoque más para implementadores, más puro, y si lo vas a usar, lo normal es que lo combines con su theme hermano, que es de la misma empresa que es generatePress y del que tienes también un curso completo, tanto de su versión gratuita como de su versión Pro. Vamos a adentrarnos un poquito más en la filosofía de generate blocks. Aquí la idea es que cada ajuste visual represente una propiedad de CSS real. Por ejemplo, si tú añades un bloque de contenedor, un container, pues le podrás añadir una estructura y un fondo, y sería considerado como un quingentés o como una sección, que son elementos de HTML, o si vas a utilizar un grid, un contenedor que va a mostrar en formato cuadrícula varios elementos, pues tú desde sus opciones le puedes venga, voy a utilizar Flexbox o voy a utilizar CSS Grid, que son propiedades muy avanzadas del CSS que te permiten disponer elementos con muchísima flexibilidad y muchísimo control. Pero claro, son un poco complejos de aprender y de escribir desde cero, y con sus opciones, las de generate blocks me refiero, se hace todo mucho más fácil. Lo mismo con lo típico de espaciado, meterle margen, meterle padding, hacerlo de forma óptima para que cuando vaya pasando de tamaño de escritorio a tamaño tablet, a tamaño móvil, que todo vaya quedando también bien. Por supuesto, tipografía te permite elegir fuentes, tamaños, alturas, todo esto sin escribir nada, pero tal y como lo harías con CSS. Entonces, si entiendes esto, lo que hay detrás, la filosofía de generate blocks, vas a poder diseñar con lógica y no solo desde la apariencia. Incluso si quieres aprender CSS, Generic Blogs te enseña a usarlo de forma visual. Ahora, si te vas a centrar en esto, hay algunas claves prácticas para que lo puedas aprovechar, este sistema visual de CSS, para que lo puedas aprovechar al máximo, mi primer consejo es que te empieces a familiarizar con las jerarquías. En CSS trabajamos en cascada, de hecho la C de CSS es cascada. Esto quiere decir que cada bloque va a heredar estilos del contenedor padre. Entonces, lo más recomendable es que utilices los padres para definir estructura, fondo o tipografía base, por ejemplo, y los hijos solo para ajustes puntuales. En general, esto deberías tenerlo claro independientemente de cómo vayas a aplicar un diseño a tu web. Pero ya que estamos con este sistema tan puro entre comillas, pues todavía más. Mi siguiente consejo es que cuando aplique utilices unidades relativas. ¿Qué quiere decir esto? Pues que en lugar de utilizar siempre píxeles, cuando tenga sentido, utilices otras unidades como em, rem, viewport, height, viewport, with, que estos son en relación a el espacio que está mostrando el navegador. Esto en el curso de CSS básico, que te lo recomiendo, lo explico bien la diferencia entre todas estas unidades de medida y cuándo conviene utilizar unas u otras. Y esto, entre otras cosas, te va a permitir un diseño mucho más fluido también entre tamaños de pantalla, como te comenté, sin tener que hacer una versión muy concreta para pantalla grande, una versión súper concreta para tablet, otra súper concreta para móvil. Esto es una pérdida de tiempo y no tiene mucho sentido. Lo ideal es que cuanto más adaptable sea, mejor. Es decir, si a ti te interesa que siempre, pues yo que sé, el contenedor ocupe el 80% de la pantalla, independientemente de que sea escritorio, tablet o móvil, pues hazlo así, porque si no vas a tener que venga, quiero que el contenedor general de mi web en pantalla grande sea como máximo de 1400 píxeles de ancho me refiero, y que luego en tablet sea de 800 y que móvil sea de 400. Claro, hay distintas tablets, hay distintos tamaños de escritorio, hay distintos tamaños de móvil, entonces si eres muy específico, es decir, usas píxeles, la experiencia no tiene por qué ser la mejor. Y aquí te ha hablado de un elemento que es más fácil en un contenedor, donde incluso sí que podrías llegar a utilizar píxeles para un máximo de ancho, pero en otros elementos mucho más concretos que necesitan adaptabilidad, no va a tener sentido que lo hagas con píxeles. Mi siguiente recomendación va en esta línea y es que saques partido al diseño responsive. Desde las opciones de generate blocks vas a ver que casi todos los ajustes, espaciado, tamaño, visibilidad, tienen iconitos para ajustar la versión móvil, la de tablet y la de escritorio. Y si bien te he dicho que en la medida de lo posible intentes que todo sea adaptable desde la pantalla de escritorio, siempre vas a necesitar ajustar cositas para pantallas más pequeñas. Pues así lo puedes hacer. Estarás aplicando CSS responsive pero visualmente sin tener que escribirlo. Mi siguiente consejo es que aproveches las clases personalizadas, y esto también aplica a cualquier otro constructor o si usas el editor de bloques de WordPress de forma nativa sin añadirle nada extra para mejorarlo, pues siempre toma todos los bloques, tiene una parte que es avanzado y tú puedes añadir ahí una clase, le das un nombrecito y luego le aplicas unos estilos de CSS, sus propiedades y luego lo vas utilizando en todos los elementos que quieras. Esto se hace para reducir el trabajo y mantener una coherencia visual. Por ejemplo, si vas a tener dos tipos de botones, uno que sea el botón principal, con unos colores determinados, con un tamaño determinado, y luego vas a tener unos botones secundarios, pues conviene crear estas clases, darle sus estilos y luego ponérselas desde la pestaña de avanzado a donde quieras. Siguiente consejo, y con este terminamos, aunque podríamos hablar de un montón más, de hecho después voy a continuar con algunas buenas prácticas, pero el último consejo que te quería dar en este sentido es que utilices efectos visuales con intención, porque con Genipress es muy fácil poner efectos cuando pasas el ratón por encima de algo, que esto se llama hover, cuando quieres poner una sombra cuando quieres dar bordes redondeados o hacer fondos con degradado. Todo esto lo puedes hacer sin código y es muy fácil, pero úsalos para destacar, no para saturar, úsalos con sentido. De hecho yo lo que haría si por ejemplo no sabes diseño, Diseño al final es algo que la gente se saca carreras o que estudia muchísimo para poder diseñar. El paso previo a plasmar con herramientas como ésta un aspecto en la web es idear el diseño. De hecho muchas veces para esto, para ir practicando, yo te recomiendo que instales una plantilla prediseñada con generatepress puedes hacerlo sin problemas, y que revises todos los ajustes, cómo están hechos, cómo han conseguido ese diseño, porque lo vas a ver reflejado en el propio editor desde las opciones de generate blocks y esto te va a ayudar a ir cogiendo esos detalles, cómo han aplicado una sombra, este borde, si tiene sentido, aquí si no. Pero por el momento, si no te dedicas al diseño, si no tienes experiencia en ello o no se te da particularmente bien, simplemente ten en cuenta eso, que lo utilices para destacar y no para saturar. Vamos con algunas buenas prácticas visuales que podemos aplicar sin escribir CSS. Con generate blocks por ejemplo, podemos definir variables globales de color y tipografía. Más que podemos, te lo recomiendo. Así podemos tener, como hemos dicho, colores para destacados, colores para fondos, colores para textos, en función de si el fondo es oscuro o el fondo es claro y vas a mantener una coherencia, simplemente seleccionas ese color global y listo. Esto normalmente lo vas a hacer con el theme, con el tema que tengas instalado. En este caso normalmente las Personas que utilizan Generate Blocks también utilizan su fin Generate Press. Entonces desde GeneryPress defines todo esto, los colores globales, la tipografía global y luego desde el editor lo vas seleccionando. En lugar de poner un código de color y que todo sea un desastre y que ya no sepas qué color habías puesto aquí, qué color habías puesto allá. Más buenas prá Evita contenedores innecesarios. Menos es más. Muchas veces añades un contenedor dentro otro para poner una parte en columnas, dentro otro y así. No, primero intenta simplificar al máximo. Hay veces que sí que es inevitable que tengas que meter un contenedor dentro de otro, incluso otro más, porque lo necesitas, porque necesitas a lo mejor primero una zona que vaya a ancho completo, por ejemplo con viewport width, que vaya a todo, da igual el tamaño de la pantalla, que sea hasta el final y ahí va a tener un colorcito de fondo o incluso una imagen de fondo. Luego necesitas dentro otro contenedor donde tengas que controlar el tamaño máximo y que además dentro vaya a haber una cuadrícula o vaya a estar por columnas o lo que sea. Entonces ahí sí quizás necesites ir metiendo un par de contenedores, pero si no lo necesitas no lo hagas, pon simplemente un contenedor, el ancho máximo que va a tener y dentro los elementos. En esta misma línea te recomiendo primero pensar en la estructura y después en el estilo. Es decir, primero maqueta estructuralmente, prepara toda la estructura de tus páginas y luego ya vete al detalle, vete a las opciones de los bloques y le vas dando el estilo. De hecho cuando tú vas al editor y estás con las opciones de generate blocks vas a ver dos partes, una que es ajustes, que ahí controlas un poco la estructura y otra que es estilos, que ahí tienes un montón, hasta 12 opciones para controlar hasta donde tú quieras, porque los límites son prácticamente infinitos, los detalles desde el punto de vista del diseño o del estilo en este caso. Y luego otra recomendación, que esto independientemente de que vayas a utilizar generate blocks o lo que sea, es que reutilices bloques globales para mantener la coherencia entre páginas. Imagínate que siempre pones una llamada a la acción y que te pones a hacerla en cada momento. Primero que es mucho más trabajo y segundo que a lo mejor en una habías utilizado un gris de fondo, en otra crees que estás utilizando el mismo pero es otro, o te queda un poquito más ancha la caja que estás haciendo o lo que sea. Entonces ya que existe la posibilidad de crear bloques reutilizables, hazlo y luego los vas insertando de forma mucho más sencilla. Bueno, generate blogs me parece una forma moderna de aplicar CSS sin tener que escribirlo y entendiendo lo que hay detrás. De hecho te ayuda a aprender a utilizarlo si es lo que quieres. Yo te recomiendo de todas maneras aprender los fundamentos del CSS, que así es como vas a poder sacar verdadero partido a generate blocks y vas a poder tener un control del diseño total. Para esto te recomiendo mis cursos de CSS básico aplicado a WordPress, el curso por supuesto de generate blogs, recién salido del horno, porque ahí vemos todo esto que te he comentado, lo vemos desde el punto de vista práctico con ejemplos reales y es como mejor lo vas a entender. Y luego si te interesa también puedes revisar el curso de generatePress que es uno de los más populares de la membresía. Ya sabes que tienes toda la info en Gonzalo Navarro Es. Y si aún no eres miembro te animo a apuntarte porque no te vas a arrepentir. Nada más por este episodio, nos seguimos escuchando. Adiós.