Cómo convertir Gutenberg en un generador de sitios web (para usuarios finales y sin código) – 1ª parte

Share to social media

Es muy fácil convertir Gutenberg en un generador de sitios web.

El editor de bloques (Gutenberg) facilita la creación de sitios web personalizados de tal manera que, sin conocimientos técnicos de desarrollo web y sin necesidad de saber lo que hay detrás de WordPress, cualquier usuario final puede hacerlo. WordPress es así una fabulosa herramienta sin código.

Para ello, solo necesitas saber el funcionamiento del Administrador de WordPress y, por supuesto, aprender a diseñar con bloques. Al final de este post, tienes enlaces a los recursos precisos para adquirir ese conocimiento básico.

Una vez que conozcas cómo funciona el editor de bloques de WordPress, crear sitios web sin delegar el trabajo en terceros es coser y cantar.

A continuación, va la primera parte del método para convertir Gutenberg en un generador de sitios web.

1. Edición de la página de inicio

Lo primero que debe dejarte hacer el tema que tengas activo es editar la página home. Un tema orientado a bloques debería pero tienes que verificarlo.

Una vez que tengas acceso a la página home en blanco, solo es cuestión de «rellenarla» con bloques de Gutenberg. Esto es válido también para el resto de páginas (about, contacto, etc.) Y, por supuesto, para las entradas del blog.

Blogpocket Sustie es nuestro tema orientado a bloques. Presenta algunas limitaciones pero es plenamente funcional para crear un sitio web solo con bloques del editor.

Blocksy es un tema, también orientado a bloques, mucho más completo que Sustie y muy recomendable para convertir Gutenberg en un generador de sitios web. Por ejemplo, con Blocksy podrás editar la cabecera y el footer, algo que no puedes hacer en Sustie.

2. Restricción de ancho completo impuesta por el tema

El principal problema para diseñar un sitio web con bloques de Gutenberg es las restricciones que impone el tema que tengas activo. Una restricción importante es el ancho de la columna de contenidos, normalmente debida a lo que se conoce como la «plantilla predeterminada».

En Blogpocket Sustie, la plantilla predeterminada no afecta a la página home, ya que ésta se programó para admitir siempre el ancho completo en los diseños. Si creas una página nueva (about, contacto, etc.) que no sea la página de inicio, el diseño con bloques se ajustará al ancho de la plantilla predeterminada. Esto provoca que no se pueda abarcar, probablemente, todo el ancho de la página.

Pero si el tema es Blocksy, el comportamiento es diferente, presentando los bloques y grupos de bloques la opción de «ancho completo» o «ancho amplio» en la botonadura de configuración (que se muestra en la parte superior de cada bloque). Puedes, por lo tanto, romper la restricción del ancho obligado por el tema, sin más que usar ese botón de configuración.

En cualquier caso, el plugin Fullwidth Page Templates resuelve de un plumazo este problema.

3. Plugin «Fullwidth Page Templates» para resolver las restricciones de ancho completo

El plugin Fullwidth Page Templates es la solución ideal para resolver las restricciones de ancho de contenidos impuestas por el tema que tengas activo.

Con él se añaden nuevas plantillas a las plantillas por defecto en el tema, para elegir dentro del apartado de «Atributos de página (o de entrada)», en la pestaña «Página» (o Entrada) de la rueda dentada de configuración.

Estas opciones son:

  • FW No Sidebar. Quita la columna lateral si estuviese habilitada.
  • FW Fullwidth. Hace que el contenido abarque todo el ancho de la página.
  • FW Fullwidth No Header Footer. El contenido abarca todo el ancho de la página pero quitando la cabecera y el footer.

4. Cómo crear una landing page usando el plugin «Fullwidth Page Templates»

Uno los resultados inmediatos que se obtienen aplicando este método es la construcción de sitios web de una sola página (o landing pages), muy fácilmente, simplemente con los siguientes pasos:

  1. Crea una página nueva.
  2. Elige «FW Fullwidth No Header Footer» en atríbutos de página.
  3. Diseña la landing con bloques del editor. Si eres principiante, empieza con los patrones de bloques de Sustie, modificando textos e imágenes.

En la segunda parte veremos los siguientes pasos del método para convertir Gutenberg en un generador de sitios web.

Recursos

Como se ha visto con esta primera parte del método para convertir Gutenberg en un generador de sitios web, todo se reduce a aprender el funcionamiento del editor de bloques.

Para ello, hay mucha información en Blogpocket.

Pero si quieres iniciarte, empieza con lo siguiente:

Suscríbete a la newsletter

Todos los lunes por la mañana, enviamos a los suscriptores un boletín especial con las últimas noticias e ideas sobre WordPress y el editor de bloques.

Suscríbete ahora y accede a contenido exclusivo (ebooks, cursos, trainings, etc.)

Responder en Mastodon (requiere usuario en esa plataforma)

Puedes usar tu cuenta de Mastodon para responder a este post de

Copia y pega esta URL (https://www.blogpocket.com/2021/05/26/convertir-gutenberg-generador-sitios-web-para-usuarios-finales-y-sin-codigo-1-parte/) en el campo de búsqueda de la interfaz web de tu servidor Mastodon.

Icono de Mastodon

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido