Tutorial de WordPress Gutenberg sobre cómo crear un sitio web personalizado

Este es un tutorial de WordPress Gutenberg escrito por desarrolladores web que tienen una gran experiencia en la creación de sitios web de WordPress utilizando su nuevo editor de bloques.

En esta guía, le mostraremos cómo crear un sitio web complejo que incluirá plantillas de contenido, archivos y una búsqueda personalizada. Usaremos el editor de bloques de WordPress conocido como Gutenberg y Toolset Blocks para construir el sitio web.

Por qué Gutenberg es ahora una excelente manera de crear sitios web

Gutenberg ha estado disponible durante casi un año y es lo suficientemente maduro como para que ahora sea una forma excelente y confiable de diseñar el sitio web exacto que había planeado.

Gutenberg usa bloques para construir sus páginas. Los bloques son elementos que contienen diferentes tipos de contenido para que puedas crear tus diseños.

El editor de bloques aún está evolucionando, pero ya es increíblemente intuitivo y flexible. No necesita ser un experto en codificación para crear contenido. Además, cuando lo combina con complementos como Toolset Blocks, puede crear fácilmente sitios web complejos que se ven geniales.

Gutenberg también es mucho más fácil de usar en dispositivos móviles que su predecesor. Dada la cantidad cada vez mayor de trabajo que hacemos en nuestros móviles, es un paso importante en la dirección correcta.

Los mejores tipos de temas para usar con Gutenberg

Hay un montón de temas premium de WordPress que son compatibles con Gutenberg Block Editor y también admiten otros complementos premium.

Puede buscar rápidamente los mejores temas consultando nuestra lista de temas de WordPress que son compatibles con Gutenberg.

El mejor complemento de bloques para usar con Gutenberg

Desde el lanzamiento de Gutenberg hace más de un año, se han lanzado una serie de complementos excelentes que complementan el nuevo editor de WordPress.

Para nuestro tutorial de WordPress Gutenberg, usaremos Toolset Blocks junto con Gutenberg para construir nuestro sitio web de WordPress. Toolset Blocks ofrece una serie de ventajas que facilitarán tanto a los programadores como a los no programadores diseñar e implementar sus sitios web rápidamente:

• Su flujo de trabajo será mucho más simple . Ahora no es necesario que diseñe sus páginas y luego las implemente. Simplemente puede crearlos en WordPress y ver instantáneamente cómo se verán.
• No es necesario cambiar entre el back-end y el front-end . En su lugar, puede simplemente diseñar sus plantillas en el back-end y ver instantáneamente cómo se verán.
• Los no desarrolladores pueden crear los sitios web de sus sueños . Ya no necesita ser un experto en codificación para crear el sitio web que desea. Con los bloques, usted mismo puede agregar fácilmente elementos complejos sin html o css.
• Pase menos tiempo leyendo la documentación . La naturaleza simple e intuitiva de Toolset Blocks significa que no necesita leer montones de documentación para comprender cómo construir ciertos elementos. Muchos de los bloques describen lo que puede lograr y se puede usar y experimentar con facilidad.
• No hay más integración con complementos de terceros . Con el editor clásico de WordPress, habría necesitado instalar un generador de páginas y complementos compatibles adicionales. Esto podría inflar su sitio web y ralentizarlo significativamente. También confía en que terceros actualicen sus complementos y los mantengan seguros. Toolset Blocks está integrado con Gutenberg y WordPress, por lo que no causará los mismos problemas.
• Sigue el mismo flujo de trabajo que el núcleo de WordPress . No necesita preocuparse por cambiar la forma en que trabaja con el nuevo editor de WordPress.

Tutorial de WordPress Gutenberg sobre cómo construir un sitio web personalizado usando bloques

Ahora podemos comenzar a construir nuestro sitio web personalizado. Como ejemplo, crearemos un sitio web de demostración que puede usar para buscar el mejor gimnasio o entrenador personal en su área.

Esto es lo que cubriremos en este tutorial de WordPress Gutenberg:

• Agregar, editar, mover y eliminar bloques
• Mostrar contenido uno al lado del otro
• Navegando a través de tus bloques
• Visualización de campos en los diseños de su editor de bloques
• Mostrar una galería de imágenes
• Aplicar estilo a los bloques del conjunto de herramientas en el editor
• Controles de tipografía
• Creando una plantilla
• Creación de sus páginas de archivo
• Creación de listas personalizadas de contenido
• Agregar una búsqueda personalizada

¡Empecemos!

Agregar, editar, mover y eliminar bloques

Lo primero es lo primero, repasemos los conceptos básicos de cómo crear y eliminar sus bloques. Los bloques son una forma completamente nueva de crear sitios web, pero solo te tomará unos minutos acostumbrarte a ellos.

1. En una página o publicación, haga clic en el botón +.
2. Busque y haga clic en el bloque que desea utilizar para insertarlo.

3. Ingrese su información de contenido para el bloque. Por ejemplo, aquí hemos agregado el bloque "Encabezado" e insertaremos un título para él.
4. A la izquierda de cada bloque, verá un conjunto de controles que puede usar para mover sus bloques.

5. Use la barra lateral derecha para cambiar las opciones del bloque que ha seleccionado. Por ejemplo, puede cambiar el color de la fuente, el tamaño de la imagen o la alineación del texto.
6. Si hace clic en la opción de tres puntos, puede ver opciones adicionales, como el bloque Eliminar

Cómo mostrar su contenido uno al lado del otro

Puede mostrar su contenido uno al lado del otro en su página fácilmente usando el bloque de columnas.

1. Seleccione el botón +.
2. Busque el bloque Columnas e insértelo.

3. Ahora puede ver dos columnas a las que puede agregar bloques normalmente.

4. Aumente el número de columnas seleccionando el bloque de columnas y alternando el número en la barra de la derecha.

Navegando a través de tus bloques

A medida que construye su sitio, algunos de sus diseños y plantillas tendrán muchos bloques. Una de las formas más sencillas de seleccionar el que desea editar es mediante el botón de navegación de bloque en la parte superior del editor y seleccionando el bloque con el que desea trabajar.

Visualización de campos en los diseños de su editor de bloques

Puede mostrar información de los campos de la publicación (el título, el cuerpo, etc.) o de los campos personalizados que podría haber creado utilizando Bloques del conjunto de herramientas.

Hay tres formas de mostrar sus campos que describiremos a continuación como parte del Tutorial de WordPress Gutenberg:

1. Establecer el contenido del bloque para que provenga de valores de campo

Cada bloque en la biblioteca de bloques de conjunto de herramientas le permite configurar su contenido a partir de campos. Por ejemplo, puede configurar cualquier texto de encabezado para que provenga de un campo de publicación o de un campo personalizado de Toolset.

Veamos a continuación cómo funciona agregando texto de encabezado de un campo de publicación al bloque de encabezado del conjunto de herramientas para nuestros entrenadores personales.

1. Cree una nueva plantilla de contenido y elija qué tipo de publicación personalizada desea mostrar.
2. Seleccione el botón +.
3. Agregue el bloque Encabezado del conjunto de herramientas.

4. Active el Texto de encabezado dinámico.

5. Seleccione el campo de publicación que desea mostrar. A continuación, he seleccionado el título de la publicación.

Ahora podrá ver el título correcto para cada una de las publicaciones relacionadas con un determinado tipo de publicación personalizada.

2. Mostrar campos como bloques individuales

Puede mostrar cualquier campo de publicación o campo personalizado individual creado con Toolset como un bloque. Por ejemplo, a continuación agregamos el contenido principal de la publicación a nuestra plantilla para nuestros gimnasios.

1. Seleccione el bloque Campo único .
2. En la barra lateral derecha, debajo de Tipo de campo , seleccione el campo Estándar .
3. En Campo de publicación, seleccione la opción Contenido de publicación (cuerpo) .

La descripción de cada uno de los gimnasios ahora aparecerá en sus respectivas publicaciones.

3. Combina campos con texto en un bloque

Es posible que deba agregar una combinación de campos y textos a sus diseños. Como ejemplo, es posible que deba agregar etiquetas junto a sus campos personalizados.

1. Seleccione el campo Campos y bloque de texto .

2. Escriba la etiqueta que desea agregar. Por ejemplo, agregué "Calificación" porque quiero mostrar los resultados del campo personalizado Calificación que muestra el puntaje de cada gimnasio de 5.

3. Seleccione de los iconos qué tipo de contenido desea agregar. Puede agregar un campo, un formulario o una salida condicional. En nuestro caso, queremos agregar un campo.

4. Seleccione el contenido que desea agregar (en mi caso, es el campo Calificación ) y haga clic en Insertar código abreviado .

Mostrar una galería de imágenes

También puede agregar múltiples imágenes a sus publicaciones usando bloques.

1. Seleccione el campo de repetición/bloque de galería .

2. Seleccione el grupo de campos personalizados que desea mostrar.
3. Elija el campo personalizado que desea mostrar.

Estilizando tus bloques en el editor

Cuando esté creando el sitio web que tenía en mente, deberá diseñar sus bloques. Por ejemplo, es posible que desee cambiar la fuente, los colores, el fondo o los márgenes de sus bloques.

Hay dos maneras de diseñar tus bloques:

1. Estilizar elementos usando la interfaz

1. Seleccione el bloque que desea diseñar. Por ejemplo, he seleccionado el bloque Calificaciones que agregué anteriormente.
2. Expanda la sección Configuración de estilo en la barra lateral.
3. Aquí puede ajustar el color de fondo, el relleno, el borde y mucho más.

Por supuesto, cada bloque ofrecerá diferentes opciones de estilo. Por ejemplo, el bloque de imagen contendrá una serie de funciones de personalización adicionales, como la capacidad de ajustar la posición de la imagen, el desenfoque o cuánto gira.

2. Usando el bloque Contenedor

El Container Block es un bloque que solo puede encontrar exclusivamente con Toolset Blocks. Use el Bloque contenedor para agrupar ciertos bloques y ciertos estilos para cada uno de ellos que se mostrarán para cada una de las publicaciones.

Por ejemplo, he agregado un bloque contenedor para mostrar toda la información relevante para un entrenador personal en una sección uniforme que incluye la imagen, el título, la calificación y mucho más. Ahora puedo diseñar el Bloque contenedor para que cada una de mis publicaciones de Entrenador personal muestre los mismos estilos.

Una vez más, puedo hacer esto usando la barra lateral en el lado derecho.

Controles de tipografía

Con Toolset Blocks, puede diseñar y formatear fácilmente su texto usando su sección Tipografía.

Aquí hay una lista de lo que puede ajustar:

• Tipo de fuente: elija entre una gran selección de fuentes
• Tamaño de fuente, altura de línea y espacio entre letras
• Estilo de fuente
• Transformación de texto: mayúsculas, mayúsculas, minúsculas
• Color de texto
• Sombra de texto

Cómo crear plantillas para mostrar publicaciones personalizadas

Una de las características más importantes que deberá crear para un sitio web personalizado es la plantilla. Cuando crea una plantilla, significa que todas las publicaciones para el mismo tipo de publicación personalizada tendrán el mismo diseño y diseño.

Por ejemplo, podemos diseñar una plantilla para cada uno de los gimnasios que queremos mostrar como parte de nuestro tipo de publicación personalizada "Gimnasios".

1. Vaya a Conjunto de herramientas->Panel y haga clic en la opción Crear plantilla de contenido para el tipo de publicación para el que desea diseñar una plantilla.

2. Tal como lo hemos hecho antes, puede comenzar a agregar campos a su plantilla. A continuación, he agregado una serie de bloques diferentes, incluidos el encabezado, la imagen y el bloque de campo único, que contienen campos.

3. Una vez que guarde y publique su plantilla, cada una de sus publicaciones para ese tipo de publicación personalizada mostrará el mismo diseño y estilo.

Creación de sus páginas de archivo

Los archivos son la lista de contenido para cada tipo de publicación personalizada que WordPress genera para ti. Puede usar Toolset Blocks y Gutenberg para personalizar el aspecto de cada una de sus páginas de archivo.

A continuación, como parte del tutorial de WordPress Gutenberg, he creado un archivo para mi tipo de publicación personalizada "Gimnasios".

1. Vaya a Conjunto de herramientas->Panel y haga clic en la opción Crear archivo junto al tipo de publicación para el que desea crear un archivo.

2. En el Editor de bloques, ahora puede agregar los diferentes elementos que desea mostrar para cada una de sus publicaciones. Por ejemplo, puede mostrar todos sus campos estándar y personalizados (como las Calificaciones, la Dirección y los Títulos de las publicaciones que creé para mis tipos de publicaciones personalizadas "Gimnasios") utilizando Bloques de conjunto de herramientas.

3. Para cambiar el número de columnas, haga clic en la opción Bloquear navegación y seleccione el bucle de archivo de WordPress .
4. En Estilo de bucle , puede ajustar el número de columnas.

5. También puede realizar una serie de cambios en la configuración predeterminada de los archivos, como la paginación, el orden y mucho más, en el bloque Archivo de WordPress.

6. También puede agregar textos personalizados y otros bloques antes o después del bucle de archivo principal que mostrará sus publicaciones. Simplemente haga clic en el ícono + antes o después del ciclo para agregar sus bloques o texto.

Mostrar listas personalizadas de contenido

Puede usar Toolset Blocks y Gutenberg para mostrar cualquiera de sus publicaciones como una lista en el orden que desee. También puede diseñar la lista de la forma que desee, como en una cuadrícula, HTML simple, una tabla o de cualquier otra forma. En Toolset, este tipo de lista se denomina Vista.

Esta lista se puede agregar a cualquier página. Por ejemplo, a continuación he agregado una lista de gimnasios destacados a la página de inicio.

1. Haga clic en el botón + en la página a la que desea agregar su Vista.
2. Agregue el bloque Vistas y asígnele un nombre.
3. Seleccione el contenido que desea que muestre su Vista. Por ejemplo, quiero mostrar mis gimnasios.

4. Agregue los bloques que desea mostrar como parte de su Vista.
5. Puede editar el orden, qué contenido se muestra y más cuando hace clic en Bloquear navegación , selecciona su Vista y usa la barra lateral.

6. En View Loop , puede cambiar una serie de configuraciones para toda la vista, incluida la cantidad de columnas.

Añadir una búsqueda personalizada

Puede agregar a su Vista su propia búsqueda, lo que permitirá a sus usuarios restringir el contenido que les interesa en el front-end. Por ejemplo, puede crear una búsqueda para que sus usuarios encuentren el mejor gimnasio que esté más cerca de ellos.

1. Inserta el bloque Ver en tu página.
2. Habilite la opción Buscar en el asistente de creación de vistas.

3. Luego puede agregar campos de búsqueda, botones de búsqueda y mucho más en el área de edición de Vistas.

4. Puede usar la barra lateral derecha para modificar las opciones de este campo de búsqueda. Esto incluye la configuración del campo principal y las opciones de etiqueta y estilo.

Así es como se ve nuestra búsqueda personalizada del mejor gimnasio en el front-end.

¡Comience a construir su sitio web personalizado hoy!

Ahora que conoce los conceptos básicos después de leer este tutorial de WordPress Gutenberg, puede comenzar a diseñar y construir su propio sitio web personalizado. Puede descargar WordPress y Toolset Blocks hoy mismo para ver lo fácil que es para usted crear su propio sitio web.

Si tiene alguna idea o pregunta, háganoslo saber en los comentarios a continuación.