220 | Webs minimalistas sin renunciar al diseño ¿Es posible?

En el episodio 220 de WordPress semanal te hablo del concepto de webs minimalistas hoy en día y te explico una aproximación que creo que puede ser muy interesante para la creación de páginas web livianas. Vamos allá. Hola, hola, Soy Gonzalo de Gonzalonabarro. Es y bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress de principio a fin. Porque como ya sabes, no hay mejor inversión que la de aprender a crear y gestionar tus propias webs con WordPress. Y el episodio de hoy es uno de ellos que puede ayudarte a decidir cómo quieres plantear la creación de tus páginas web. Y esto del minimalismo está muy de moda en todos los aspectos de la vida, pero como verás ahora lo de minimalismo, pues bueno, es una palabra que es muy bonita y está muy extendida, pero toda web requiere unos mínimos y toda web requiere ciertas cosas y además no todas las webs son iguales. Así que voy a hablar de todo eso a lo largo de este episodio. Pero básicamente quiero transmitirte la idea de que ahora que puedes diseñar y maquetar tus páginas web con Gutenberg y en el futuro pues con mucho más control, pues quizás sea un buen momento para buscar temas de WordPress que sirvan de punto de partida y que no vengan cargados de opciones. Y es un poco la idea de este episodio, explicarte cómo abordar eso y qué opciones tienes ahora mismo. Seguro que en un futuro cercano habrá muchas más, pero sin duda esto pues te puede guiar un poquito por ese camino para lograrlo. Pero antes de entrar en cosas muy concretas, vamos a ver las novedades que está pasando en Gonzalo Navarro es esta semana. Y por un lado tenemos el vídeo de la Zona Código, ya sabéis que saco uno cada semana, todos los martes y si eres suscriptor lo tienes disponible. Y te enseño en este vídeo a invertir el orden de las columnas en dispositivos móviles cuando las has creado con Gutenberg. Y esto de las columnas es muy típico porque se hace muchísimo la típica disposición de, imagínate imagen texto en dos columnas y luego debajo texto imagen. ¿Qué te puede ocurrir aquí? Que cuando esas columnas se pasan a una única columna en un dispositivo pequeño ya no cumple el efecto que tú buscabas, que era romper un poquito con imagen texto, texto imagen y jugar con ello al pasarse a columna, bueno, a una única columna lo que te va a ocurrir es que vas a tener en este ejemplo que te digo, imagen, debajo texto, debajo texto y al final imagen, con lo cual no queda bien, no es el efecto que buscabas porque cada imagen va con su texto y no tiene sentido que se muestre así. Y si lo hicieses al revés, imagen, texto, imagen y debajo imagen texto, pues te quedarían dos imágenes una debajo de otra, lo cual tampoco quedaría bien. ¿Cómo se soluciona? Con un poquito de CSS y con Gutenberg lo tenemos muy fácil porque simplemente tenemos que asignar, esto ya lo expliqué en un vídeo anterior de la zona código, pero simplemente tienes que asignar una clase, un nombrecito a el bloque de Gutenberg de la columna en cuestión y por CSS se le da una instrucción para que cambie el orden, invierta el orden de las columnas y así quede perfecto también en dispositivos móviles. Pues te enseño a hacerlo, es muy facilito, copias tal y como lo hago en el vídeo, lo pegas donde te muestro y tienes el mismo resultado que logro yo en el vídeo. Recuerda, vídeo 171 de la zona código, tienes disponible este y el resto de 170 y pico vídeos en Gonzalo Navarro es la siguiente novedad es que hay curso nuevo y por eso te estoy hablando de creación de webs minimalistas. Te estoy hablando en este episodio de ello porque el curso va precisamente sobre ello, es el curso de creación de webs minimalistas y utilizamos themes livianos y aprovechamos Gutenberg para el diseño. Y básicamente el curso lo que hago es que he cogido tres temas. Ahora mismo tengo pensado, según vuestro feedback, aumentar el securso, hacerlo más grande con algún tema que vosotros me podáis decir, ¿De acuerdo? Por el momento escogido 3 y lo que hago es que en las clases pues una se la dedico a coger, configurar todo el tema, todas las opciones que tiene, es decir, estructuralmente configurar la web gracias al tema, que eso es lo que nos aportan los temas, y luego hacemos un caso real y diseñamos la página de inicio aprovechando Gutenberg. En algunos casos instalo alguna extensión que va bien con el thing que usamos. Ahora te hablaré en este episodio un poco de los distintos temas que tienes que son compatibles con Gutenberg, pero es eso, es partir de un tema bien desarrollado, liviano, con las opciones justas y luego aprovechar Gutenberg u otro constructor en el curso lo enfoco a usar Gutenberg, pero si tú prefirieras utilizar Elementor, utilizar otro constructor visual, estos temas que te recomiendo también van muy bien para esa aproximación, porque no dejan de ser un punto de partida para controlar partes estructurales de tu web, pero luego los diseños los puedes hacer como quieras. Ya tienes disponible este curso, ya sabes que si eres suscriptor accedes a todos, más de 45 cursos y este es el más reciente, Gonzalo Navarro es cursos y ahí tienes todos, puedes filtrar y navegar entre toda la oferta de cursos. Y vamos ahora con el plan de la semana, y en esta ocasión es un plugin bastante curioso, está activo nada más que en 100 webs, pero porque es muy particular, se llama Find My Blogs y lo que te permite es localizar, saber qué bloques de Gutenberg estás utilizando en tu página web, cuántas veces, en qué páginas. Te da como un control para que sepas, pues primero eso, una lista de todos los tipos de bloques que has usado, el tiempo o las veces mejor dicho, que se ha utilizado en tu web en general, las veces que se ha utilizado en post y páginas en particular, te dice si un bloque en concreto lo tienes como bloque reutilizable, es decir, es tener como un control interno de todo lo que está pasando con los bloques de tu web, un poco para que no pierdas el norte. Seguramente esto esté más enfocado a los que hacen webs, si estás haciendo un diseño de una web, estás aprovechando Gutenberg para ello, pues seguramente sea muy útil este plugin para saber qué has utilizado, dónde lo has utilizado, cuántas veces y cuándo lo has hecho. Pero bueno, de todas formas me parece curioso para que puedas tú también ver qué bloques usas y cuándo y dónde. Así que está interesante, se llama Find My Blogs, es uno de esos plugins pequeñitos que a veces me gusta descubrir y ya sabes que los tienes en las notas del episodio, al igual que todos los enlaces. Gonzalo Navarro es 220. Y ahora ya sí nos vamos con el tema central, cómo crear webs minimalistas sin renunciar al diseño. Y como te decía en la intro del episodio, esto de minimalismo pues está muy extendido, pero te voy a decir lo que para mí es una web minimalista en WordPress y no es más que partir en primer lugar de un thing liviano, lo más liviano posible para tu objetivo. Y esto quiere decir pues que esté bien desarrollado por un lado, es decir, que tengas la certeza de que el desarrollador es bueno. Tú no tienes por qué investigar el código de esa web, porque muchas veces pues no vas a tener ni idea de por dónde empezar, pero puedes hacerte una idea preguntando, leyendo y al final sabrás si es un tema bien desarrollado. Eso por un lado, y por otro, que traiga las opciones que vas a necesitar, no más y no menos, porque muchas veces por instalar algo minimalista nos quedamos cortos y nos faltan cosas, entonces es simplemente que sepas que es bueno y que sepas que tiene lo que necesitas. En cuanto a opciones de configuración, pues si necesitas que tenga un área de menú a la derecha del logo, pues busca un tema con un área de menú a la derecha del logo, salvo que tengas conocimientos de hooks y demás y lo puedas, o de PHP y tú lo puedas, puedas modificar y lo puedas poner, pero si no, pues busca algo que ya lo traiga. ¿Que necesitas que tenga X áreas de widget en el footer? Pues tenlo en cuenta. ¿Que te gustaría que trajese una opción de búsqueda cómoda, por ejemplo en el menú, lo típico con la lupita, esto que ahora empiezan a traer muchos Teams, pues tenlo en cuenta, aunque eso quizás sí que después puedas añadirlo con un plugin, pero es interesante cuando ya te viene la opción? Eso por un lado desde el punto de vista del tema, que es siempre el punto de partida, Y luego el otro punto de vista es cómo vamos a extender la web para que siga este concepto de minimalismo. Pues esto es lógica pura, el uso justo de plugins y de código, porque al final es lo mismo, un plugin es código empaquetado, entonces muchas veces decimos, no, yo tengo muy pocos plugins, pero lo mismo estás copiando y pegando códigos de todos lados y tienes un lío ahí de código pegado que a lo mejor hace peticiones a no sé qué servidor externo de tu web y tienes una liada que no veas. Entonces es importante tener esto en cuenta, tanto uso de plugins como de código. ¿Yo lo pongo en el mismo paquete porque al final es lo mismo, pues usa solo lo que vaya a extender de verdad las posibilidades de tu web y no que tengas ahí cosas por tenerlas o porque la probaste un día y la dejaste, de acuerdo? Pero básicamente si lo necesitas úsalo, lo que pasa que claro, digo, he creado el curso de web minimalistas y he creado este episodio y hablo de minimalismo porque pues está no. Nadie va a hacer clic si pongo un título que sea cómo crear webs con lo justo y necesario pero básicamente es eso. Bien, una vez explicado eso, vámonos al segundo punto que sería que ya que tenemos el punto de partida, básicamente nuestros things, nuestros plugins, nuestro código, después necesitamos algo que nos permita crear nuestros contenidos de forma bonita, maquetar nuestras páginas en la medida de lo posible y WordPress pues ha tomado la directa en esto y nos ofrece Gutenberg para diseñar nuestras páginas. Entonces una opción, y digo una opción porque tú puedes tomar el camino que mejor vaya contigo y con tu forma de trabajar, pues es combinar ese tema minimalista, que ahora te hablaré de algunos que están súper bien y que vemos por supuesto en el curso, pues como digo, combinar un tema como éste con el editor de Gutenberg. Y para esto tienes que tener en cuenta algunos aspectos. Primero, asegúrate de que el tema minimalista que estás eligiendo o el tema que sea es compatible con Gutenberg, porque todavía hay muchos que no lo son, Por ejemplo, hay muchos que tú intentas poner o intentas utilizar la típica funcionalidad que te trae Gutenberg de poner un elemento a pantalla completa y no puedes porque el thing no viene preparado para ello. Una forma rápida de localizar temas gratuitos compatibles con Gutenberg, irte al buscador de temas de WordPress y escribir Gutenberg. Y luego ya de los que vayas viendo, pues yo te recomiendo buscar en Google, porque al final ahí sí puedes ver los que tienen instalaciones y demás, pero lo más fácil es buscar en Google, vas a ver reseñas, ya vas a ver cómo la gente lo usa, vas a ver si Hay gente en YouTube ya explicando cómo usar esos temas y al ver ese vídeo en YouTube por ejemplo, tú ya te puedes hacer una idea de todas las opciones de configuración que trae ese tema, ¿De acuerdo? Hay que hacer un poquito de búsqueda si queremos algo bueno. Y luego ten en cuenta que más allá de los temas de los que te voy a hablar ahora, que digamos son temas clásicos de WordPress que simplemente pues los instalas y ya está, ten en cuenta que los frameworks como por ejemplo Genesis se están pasando al carro también de Gutenberg, así que si te gusta también tener un marco de trabajo específico como es Genesis Framework por ejemplo, puedes sumarte a esta idea digamos y seguir utilizando Genesis. De esto, Nawai Badiola y Esther Solá, que tienen un podcast que está muy bien que se llama Freeland Dev, ellos hablan mucho de esto. Y si quieres estar al día de Genesis y de cómo se están subiendo al carro de Gutenberg y de los planes que tienen para el futuro y de qué themes o child themes mejor dicho, de Genesis son ya compatibles con Gutenberg, pues te recomiendo que escuches sus episodios, están en todas las plataformas de podcast. Y luego otros temas populares como GeneratePress también se están subiendo al carro, de hecho GeneratePress ha sacado un plugin que se llama Generate Blogs, que si os interesa, lo he estado pensando, lo que pasa que no estoy seguro de incluirlo o no, pero si os interesa lo puedo incluir, puedo hacer más grande o más. Vamos a incluir una clase más en el curso que acaba de salir, como digo, de creación de webs minimalistas e incluir el uso de este plugin o si no, pues lo podría añadir también al curso de generatePress que ya sabéis que lo tenéis disponible. Así que si os interesa, decídmelo desde vuestra área, desde vuestra cuenta, vamos, en gonzalonabarro es vais a vuestra cuenta y tenéis una parte donde me podéis pedir qué es lo que queréis en la plataforma, ¿De acuerdo? Yo prefiero sacar cosas que me habéis pedido expresamente porque así sé pues que os estoy dando lo que queréis. ¿Sí? Bueno, ya tenemos un poco clara la base. Ahora, ¿Qué temas de WordPress cumplen estos requisitos? Y además que sean gratuitos encima, es decir, que sean minimalistas y que traigan una configuración básica, que sean compatibles al 100% con Guttenberg y que estén bien desarrollados. Pues bueno, en primer lugar tenemos el tema Chaplin. Chaplin es un tema de un desarrollador bastante reputado en WordPress, se llama Anders Noren, está basado en el tema Twenty Twenty, pero mucho mejor desde mi punto de vista. Ha cogido lo mejor de Twenty Twenty y le ha dado una optimización a nivel de código y una sección de configuración muy sencilla, muy intuitiva en el personalizador de WordPress, que para mí tiene prácticamente todo lo que busca una persona cuando quiere configurar lo básico de su web, los colores, las fuentes, la posibilidad de mostrar la opción de buscar en el menú o no, algo de juego en cómo se va a mostrar la cabecera si la queremos, pues con el típico menú de hamburguesa o no, es decir, opciones que casi todos necesitamos cuando estamos creando una web e incluso va un punto más allá. Y tienes opciones para controlar el scroll suave, que para mí esto es un básico, básicamente es cuando tienes un enlace dentro de la misma página y le das, si no tienes el scroll suave, que por cierto yo explico en la zona código cómo hacerlo, cómo habilitarlo, es nada, una línea de código, pues si no lo tienes, el paso de la parte donde le has dado al enlace al destino es como muy brusco y el scroll suave pues lo suaviza. Y luego tiene otra opción también muy interesante y es optimizar las imágenes de forma automática. Tiene una opción ya desde el configurador, es muy básica, no es como los plugins de optimización, pero en muchos casos es suficiente y te puedes ahorrar un plugin de optimización. Y luego, como casi todos los temas de los que te voy a hablar, tiene también una parte que para mí es de las más útiles y es la posibilidad de elegir plantillas de página con distintos anchos, porque ¿Cuántas veces has querido por ejemplo tener una página a ancho completo para jugar con las imágenes y demás, pero luego a lo mejor has querido tener otra de menos ancho, más acotada? Pues este tema lo tienes. Y además trae opciones para la página de blog, que esto está muy bien y no todos los temas lo traen y es muy útil y muy demandado. La posibilidad de decir si quieres que se muestren dos columnas en tres, si quieres que se muestre lo típico, el nombre de la categoría del post, cuando se muestra el resumen, todo ese tipo de opciones que muchas veces no piensas que necesitas hasta que estás configurando el tema, pues este tema las trae. Así que para mí es completo a la par que minimalista porque trae para mí pues prácticamente lo justo y necesario. Luego tenemos dos temas también muy minimalistas, más minimalistas que Chaplin, como son Coblox Themes y Atomic Blocks Theme. Te los digo juntos porque son muy similares. Estos temas nacen porque tanto Atomic Blocks como Coblox son plugins, o digamos estas empresas tienen plugins con esos nombres que extienden las posibilidades o el funcionamiento del editor de Gutenberg. Entonces lo que hicieron es crear temas de WordPress que fuesen 100 % compatibles con Gutenberg porque les interesaba y son temas muy livianos, con las opciones como te digo justas, incluso más justas que el tema de Chaplin, Si a lo mejor hay cosas de Chaplin que tú sabes que no vas a usar, puedes pensar en estos temas, además de que te guste el aspecto global que da el tema, que yo lo que te recomiendo es que vayas a sus páginas y veas cómo quedarían. Pero por ejemplo Coblox Theme es vamos, es prácticamente como partir un tema sin nada. Para mí tiene quizás demasiadas pocas opciones, el de Atomic Blocks tiene alguna más y de hecho el de Atomic Blocks lo vemos en el curso, el de Coblox ni siquiera lo iba a poner en el curso, pero ni siquiera porque me di cuenta que tiene tan pocas opciones que el vídeo me iba a quedar pues de muy muy poquitos minutos, así que no merece la pena, se entiende perfectamente. Cuando lo instalas y te pones a configurarlo pues ya ves las opciones que tiene, que son muy poquitas. Pero Atomic Block sí que lo cubro en el curso, seguramente sea el tema más minimalista a nivel de opciones de configuración que trae de todos los que vemos en el curso y te permite por un lado controlar el ancho de las páginas, aquí sí que ponen mucho énfasis y te dan muchas opciones tanto a nivel de página concreta como a nivel general de la web, en este caso tienes incluso más control sobre los anchos que con Chaplin, tienes opciones de fuentes de tamaño y de colores muchísimo más reducidas que con Chaplin en este caso, y luego la opción de mostrar o no la lupa, de buscar. Así que como ves tiene opciones de configuración muy muy muy limitadas, pero si te gusta el aspecto general puede ser un muy buen punto de partida y como digo muy minimalista. Y luego tenemos el tema Go, que particularmente me gusta mucho, es del mismo creador que el de Goblocks Themes, es Richard Tabor, lo que pasa que luego lo compraron todo esto, toda su empresa y todas sus cositas enfocadas a WordPress lo compró Godaddy, por eso el tema se llama Go y tienes también desde un punto de vista de la sencillez y desde el minimalismo, pero tienes opciones muy muy útiles y yo creo que casi todo el mundo las necesita cuando crea una web. Como digo tienes la estructura general de controlar el diseño porque te viene como que puedas partir de diseños ya predefinidos y luego trabajar sobre ellos, te pone ya los colores, las tipografías y todo eso y entonces tú eliges el punto de partida que más te gusta y de ahí vas modificando por ejemplo las opciones del logo que son más avanzadas que en los otros temas que te he dicho. Aquí puedes controlar como de ancho o como de grande se muestra el logo, esto mucha gente también lo pide porque a lo mejor sube un logo de un tamaño y luego pues se da cuenta de que tiene que subirlo más pequeño desde su ordenador tiene que volver a subirlo y en este caso pues puedes modificar el ancho directamente con las opciones que te da este tema que como digo se llama Go de Richard Tabor y los de Godaddy. Luego puedes elegir gamas de colores tanto para la parte del cuerpo como para la cabecera y el pie de página, digamos que los tienes bien diferenciados y tienes más control seguramente con los otros temas que te he comentado. Introducen un aspecto bastante interesante que es el control de los espacios, el padding. Puedes controlar a nivel general cuánto espacio hay entre cada elemento de tu web, lo que hace es que localiza los bloques de Guttenberg y te permite controlar el espacio a nivel general. Luego ya tú si estás creando una página ya puedes ir jugando también tienes además un elemento, un bloque de Gutenberg para dar espacio y ya puedes jugar con ello, pero a nivel general, de la estructura general de tu página lo puedes controlar y esto sí que creo que es una funcional bastante bien pensada y bastante útil. Luego tiene una cosa que está muy chula, es que puedes elegir distintos tipos de cabecera y de pie de página, cuando digo distintos tipos me refiero a estructuralmente, puedes decir pues lo típico, logo a la izquierda, menú a la derecha o puedes decir logo centrado y menú debajo. Este tipo de cosas las puedes elegir de una forma muy visual y también en el footer, algo que no suelen traer los temas de WordPress pero que en este caso han pensado en ello y te permiten también decidir la estructura básica de tu footer, de tu pie de página y. Y una opción también que me encanta y que creo que todos en algún momento necesitamos es la opción de esconder los títulos de las páginas, te introduce, bueno tienes una opción global por si quieres esconderlos todos y luego a nivel de página mostrar los que quieras o al revés, dejarlos todos visibles, que suele ser lo más habitual y luego a nivel de página ocultar los que quieras. Y eso es más o menos un poco el resumen de las opciones de configuración que te da el tema Go. Así que estos son algunos, hay más, pero algunos de los temas minimalistas que sé que son muy buenos y que puedo recomendarte de primera mano, de hecho me los he trabajado mucho porque en el curso te explico cómo configurar todos y cada uno de ellos. Así que con esto seguro que no fallas. Recuerda que después lo puedes combinar o bien con el editor de bloques de WordPress o si quieres, si estás por ejemplo acostumbrado a trabajar con Elementor, pues puedes hacerlo también. ¿De acuerdo? Es un poco pues ya el enfoque que le quieras dar, que ya no sería tan minimalista porque ya estás introduciendo más cosas. Pero al final, como te voy a hablar en el último punto, el minimalismo debe ser un concepto liberador y no un concepto restrictivo, Es decir, cada web necesita de un diseño y de una funcionalidad específica. Si tú estás pensando en el minimalismo como restricción pues seguramente lo vayas a pasar mal creando tu web porque estás diciendo no quiero instalar más plugins, no quiero poner más código, no quiero más nada. Pues eso, primero que cuando estás creando la web es un rollo porque sientes que está que están tirando de ti y no tiene por qué. Si necesitas algo úsalo, instálalo, configúralo y ya está. Si no es que el resultado no va a ser ni el que querías y el proceso va a ser tedioso. Eso sí, implementa lo que necesites de la forma más óptima posible. Pues si a lo mejor vas a hacer una cosa y ves que un plugin tiene esa cosa, pero ese plugin además tiene mil cosas más, pues mira a ver si puedes solo utilizar la funcionalidad que necesitas de otra forma, mira ver si lo puedes hacer por código, mira a ver si existe un plugin más pequeñito que haga solo eso, mira a ver si de verdad es algo que necesitas, porque muchas veces vemos algo en una web y de inmediato ya lo queremos en la nuestra. Pues piensa, digo, a ver, ¿Para qué creo yo esto? ¿Lo necesito de verdad? ¿Me va a aportar algo positivo? ¿Voy a vender más? ¿Va a percibir la gente algo mejor de mi web? Tienes que valorarlo. Básicamente el minimalismo no es ser un tacaño entre comillas, es aprender a crear webs pues de la forma más optimizada posible y utilizando lo que de verdad necesitas y para eso necesitas calma, necesitas estructurarte mentalmente sobre lo que vas a hacer y no ir instalando todo o todo lo nuevo, todo lo reluciente que vas viendo. Bueno, te voy a dejar enlaces a todo lo que he comentado, a los temas que te he recomendado y ya sabes que la mejor forma de acceder a todos ellos es yendo a Gonzalo es 220 y al final del todo pues tienes los enlaces y todo lo que necesites. Si te gusta este concepto de webs minimalistas, quieres hacerlo, quieres implementarlo, pues tienes el curso de creación de web minimalistas en WordPress, si estás suscrito pues ya lo tienes disponible y si no pues te puedes apuntar, ahí vemos paso a paso cómo crear webs en base a un tema de WordPress liviano y aprovechar el editor de Gutenberg para diseñar sus páginas. Para más información o para apuntarte puedes ir a Gonzalo Navarro es cursos. Nada más por este episodio, nos seguimos escuchando, adiós.