Skip to toolbar

Cómo crear y diseñar una web de WordPress eficiente en tan solo dos pasos

Cómo crear y diseñar una web de WordPress eficiente en tan solo dos pasos

En este artículo veremos la manera de crear y diseñar una web de WordPress eficiente y realizar el diseño completo del sitio con Gutenberg.

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ñándola mediante un theme.

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? Hemos llegado a la conclusión de que, en la mayoría de los casos y en estos momentos, sí es posible con el nuevo editor de bloques, 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

WEB-GUTENBERG-FEATURE Cómo crear y diseñar una web de WordPress eficiente en tan solo dos pasos

En el Método Blogpocket, también conocido como Método de la caja 😉 , solo necesitas dos pasos para crear y diseñar una web de WordPress eficiente: lograr una web inicial optimizada, 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 e 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. Al fin y al cabo, es como conseguir un WordPress.com con esteroides como punto de partida 😉 .

PASO-1-WEB-EFICIENTE-WPO-1024x576 Cómo crear y diseñar una web de WordPress eficiente en tan solo dos pasos

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 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).

PASO-2-WEB-EFICIENTE-GUTENBERG-1024x576 Cómo crear y diseñar una web de WordPress eficiente en tan solo dos pasos

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, emprendedoras y emprendedores; 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 es el theme 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@,

¿Qué es Lanzatu.blog?

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

Descarga el theme Blogpocket Nineteen y personalízalo a tu gusto con Gutenberg. Lee las instrucciones, la guía de configuración y el blog 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.

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 Cómo crear y diseñar una web de WordPress eficiente en tan solo dos pasos

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 😉

Conclusiones

El Método Blogpocket, para crear y diseñar una web de WordPress eficiente, está orientado a usuarios finales, freelancers, emprendedoras y emprendedores, bloggers, que no pueden delegar la labor de desarrollo y diseño de su web a un tercero.

La idea es que, ahora mismo, el desarrollo y diseño de una web de WordPress eficiente solo requiere seguir el procedimiento del Método Blogpocket para implementar la web inicial independiente del proyecto, como primer paso; y aprender Gutenberg esencialmente.

Por lo tanto, si asumimos que la primera parte es metódica y muy fácil de llevar a cabo; todo se reduce a aprender a sacarle el máximo provecho al editor de bloques de WordPress.

Aprender Gutenberg es muy fácil y más si sigues las guías, videotutoriales y webinars de Blogpocket. ¿Necesitas ayuda? Por favor, contacta con nosotros.

¿Estás buscando hosting?

SiteGround es el hosting en el que está alojado Blogpocket.  Consigue un alojamiento web de alto rendimiento, seguridad y optimización para WordPress.

BIG-SHOES-PODCAST Cómo crear y diseñar una web de WordPress eficiente en tan solo dos pasos

Related Articles