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

Este es un tutorial de WordPress Gutenberg escrito por desarrolladores web que tienen una experiencia significativa 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 fuera 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 pueda crear sus diseños.

El editor de bloques aún está evolucionando, pero ya es increíblemente intuitivo y flexible. No es necesario 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 creciente cantidad 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 son compatibles con otros complementos premium.

Puede buscar rápidamente los mejores temas consultando nuestra lista de los más de 30 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 varios 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 el diseño e implementación de sus sitios web rápidamente:

• Tu flujo de trabajo será mucho más sencillo . 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, puede agregar fácilmente elementos complejos usted mismo sin html o css.
• Dedique menos tiempo a leer documentación . La naturaleza simple e intuitiva de Toolset Blocks significa que no necesita leer mucha documentación para comprender cómo construir ciertos elementos. Muchos de los bloques describen lo que puede lograr y se puede usar y experimentar fácilmente.
• No hay más integración con complementos de terceros . Con el editor clásico de WordPress, habría necesitado instalar un creador 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.
• Siga el mismo flujo de trabajo que el núcleo de WordPress . No necesita preocuparse por cambiar su forma de trabajar con el nuevo editor de WordPress.

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

Ahora podemos empezar a crear 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 por tus bloques
• Visualización de campos en los diseños de su editor de bloques
• Visualización de una galería de imágenes
• Bloques de Styling Toolset en el editor
• Controles de tipografía
• Creando una plantilla
• Construyendo sus páginas de archivo
• Crear listas de contenido personalizadas
• 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 debería tomar unos minutos acostumbrarse 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. Utilice 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 Eliminar bloque

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 de forma normal.

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

Navegando por 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 fáciles de seleccionar el que desea editar es usando 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 publicación (el título, el cuerpo, etc.) o de los campos personalizados que podría haber creado usando Toolset Blocks.

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

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

Cada bloque de la biblioteca Toolset Blocks le permite establecer su contenido a partir de campos. Por ejemplo, puede establecer que cualquier texto de encabezado 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 desde un campo de publicación al bloque 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 usando Toolset como un bloque. Por ejemplo, a continuación agregamos el contenido de la publicación principal 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 Publicar campo, seleccione la opción Publicar contenido (cuerpo) .

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

3. Combinar campos con texto en un bloque

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

1. Seleccione el bloque Campos y 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 la puntuación 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 corto .

Mostrar una galería de imágenes

También puede agregar varias imágenes a sus publicaciones usando bloques.

1. Seleccione el bloque Campo de repetición / Galería .

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

Diseñando tus bloques en el editor

Cuando esté creando el sitio web que tenía en mente, necesitará 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 formas de diseñar los bloques:

1. Diseñar elementos usando la interfaz

1. Seleccione el bloque que desea diseñar. Por ejemplo, he seleccionado el bloque de 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 Bloque contenedor es un bloque que solo puede encontrar exclusivamente con Bloques de conjunto de herramientas. 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, agregué 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 del lado derecho.

Controles de tipografía

Con Toolset Blocks, puede diseñar y dar formato fácilmente a 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 de control 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 hicimos antes, puede comenzar a agregar campos a su plantilla. A continuación, agregué 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.

Construyendo sus páginas de archivo

Los archivos son la lista de contenido para cada tipo de publicación personalizada que WordPress genera para usted. 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 de control y haga clic en la opción Crear archivo junto al tipo de publicación para la 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") usando Toolset Blocks.

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 pedido 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 icono + antes o después del bucle 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 manera. En Toolset, este tipo de lista se denomina Vista.

Luego, esta lista se puede agregar a cualquier página. Por ejemplo, a continuación agregué 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, incluido el número de columnas.

Agregar una búsqueda personalizada

Puede agregar a su Vista su propia búsqueda, lo que permitirá a sus usuarios reducir el contenido que les interesa en el front-end. Por ejemplo, puede crear una búsqueda para sus usuarios para encontrar el mejor gimnasio más cercano a 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. A continuación, puede agregar campos de búsqueda, botones de búsqueda y mucho más en el área de edición Vistas.

4. Puede utilizar 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.

¡Empiece 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.