Lanza tu blog

Cómo realizar el diseño completo de una web de WordPress con Gutenberg y en un solo paso

Nos dimos cuenta de que desarrollar un sitio web de WordPress eficiente consiste básicamente en dos pasos. En el primero, se debe crear una web inicial eficiente, independiente del proyecto. En el segundo, la personalizaríamos creando los contenidos y diseñando el front-end mediante un tema.

Pero la pregunta que nos hicimos fue ¿y se puede hacer todo eso sin ser un desarrollador web ni saber HTML, CSS, PHP, javascript, etc? (lo que, habitualmente conocemos como no-code o «sin código»). Hemos llegado a la conclusión de que, en la mayoría de los casos, en estos momentos sí es posible con el nuevo editor de bloques y la edición del sitio (Full Site Editing), más conocido por Gutenberg.

Hoy en día, desarrollar y realizar el diseño completo de una web de WordPress se reduce a aprender Gutenberg.

Los 2 únicos pasos para desarrollar una web de WordPress eficiente

En el Método Blogpocket, también conocido como Método de la caja 😉 , solo necesitas dos pasos para crear una web de WordPress: lograr una web inicial eficiente, independiente del proyecto, y «rellenarla» de diseño y contenido. A continuación, tienes los puntos de partida.

Web inicial

Primero aprendimos a crear una web de WordPress inicial eficiente independiente del proyecto. Esto es como si tuvieses una caja vacía preparada para albergar cualquier tipo de diseño y contenidos (ver imagen inferior). Y sabemos hacerlo con el Método Blogpocket que es un conjunto de herramientas sólidas y un procedimiento consistente con el que obtenemos una web rápida y optimizada para móviles, segura, preparada para el SEO y adaptada al RGPD.

PASO-1-WEB-EFICIENTE-WPO-1024x576 Lanza tu blog

Diseño y contenido

Después, supimos que para personalizar el sitio web (contenidos y diseño), creado en el paso 1, solo teníamos que usar Gutenberg. Podemos emplear los bloques nativos, las colecciones de bloques extras y algunas herramientas del estilo de Gutenberg Hub y el plugin Reusable Blocks Extended; para diseñar a nuestro gusto, no solo la home sino también, si estamos en un tema clásico, cualquiera de las áreas de widgets disponibles en el theme. Probablemente en la actualidad, exceptuando la cabecera, podamos diseñar el sitio completamente con Gutenberg (ver imagen inferior). Si hablamos de temas de bloques, entonces la función de edición del sitio nos permite alterar a nuestro gusto todo el tema.

PASO-2-WEB-EFICIENTE-GUTENBERG-1024x576 Lanza tu blog

Una plataforma para poner en práctica la creación de una web de WordPress eficiente

A principios de 2020, pusimos en marcha la plataforma Lanzatu.blog con la idea de proporcionar a freelancers, emprendedor@s y bloggers, una herramienta pedagógica de creación y diseño completo de una web de WordPress con el Método Blogpocket y Gutenberg. El principal elemento fue el tema Blogpocket Nineteen (en dos versiones, Genesis Framework y para todos los públicos); una plantilla completamente funcional para que desarrolles y diseñes desde cero y a tu gusto tu web de WordPress por ti mism@. Actualmente, el tema Blogpocket Nineteen lo convertimos a un add-on aplicable al tema Sample de Genesis Framework.

¿Qué fue Lanzatu.blog?

Fue una plataforma pedagógica, pero plenamente funcional, basada en el theme Blogpocket Nineteen, para que se pudiese probar el Método Blogpocket, incluyendo el diseño de la web desde cero y por ti mism@.

Descarga el add-on de Blogpocket Nineteen y personalízalo a tu gusto con Gutenberg. Lee las instrucciones y la guía de configuración para más información sobre cómo diseñar una web solo con Gutenberg.

Recursos útiles

¿Qué es Gutenberg? El editor de bloques Gutenberg aparece en la versión 5.0 WordPress (nov 18) y presenta una nueva manera de elaborar contenidos más intuitiva y sencilla. La segunda fase del proyecto incluye la función de edición del sitio, con la que se puede construir completamente el front-end de un sitio web fácilmente y sin código.

Introducción a las colecciones de bloques y otras herramientas. En este artículo se introducen conceptos elementales de Gutenberg, como las colecciones de bloques mediante 10 recursos y trucos. También se enlaza a uno de los primeros artículos que hablan sobre la edición completa del sitio mediante bloques, novedad respecto a la creación de themes de WordPress y que veremos a finales de 2020.

Cómo configurar un theme de StudioPress con bloques de Gutenberg. Revolution Pro es la primera apuesta de StudioPress (Genesis Framework) para tener un theme de WordPress totalmente compatible con Gutenberg. Con este artículo, aprenderás el concepto de diseñar la home con Gutenberg, paso inicial y primordial para entender qué significa diseñar una web solo con Gutenberg.

Ya no tienes que ser Antonio Cambronero para aprender Gutenberg. En este artículo se exponen las distintas piezas que, actualmente, nos permiten personalizar contenidos y el diseño completo del sitio con Gutenberg. Dos herramientas fundamentales son el plugin Reusable Blocks Extended, con el que podemos llevar bloques reutilizables de Gutenberg a las distintas áreas de widgets que tenga preparada el theme; y Gutenberg Hub, que facilita el diseño de nuestra web (sin saber código HTML ni CSS y sin necesidad de instalar ningún plugin) a partir de una librería de plantillas disponibles.

¿Qué diferencia hay entre el diseño de una web de WordPress en la era pre-Gutenberg respecto a la era post-Gutenberg?

DIFERENCIAS-DISENO-WEB-GUTENBERG-1024x576 Lanza tu blog

Básicamente en la era Pre-Gutenberg el diseño de la home, por ejemplo, estaba supeditada a las áreas de widgets preparadas en el theme y a los widgets disponibles para arrastrar a aquellas. Digamos que estaba prohibido diseñar la home a nuestro gusto.

En la era Post-Gutenberg, sin embargo, podemos diseñar la home a nuestro gusto, porque tenemos el mecanismo para llevar bloques reutilizables a determinadas áreas de widgets (sidebar, footers, etc.) y, por supuesto, usar Gutenberg en la propia área de contenidos central. Incluso, si el theme lo permite probablemente exista un área de widgets asociado a la cabecera.

Todo esto, claro está, si nos limitamos a personalizaciones a nivel de usuario. Con código se puede hacer cualquier cosa, antes y ahora 😉

Ir al contenido