5 formas de crear sitios web sin código utilizando Gutenberg de WordPress
Se podría perdonar a los diseñadores web si sus ojos se pusieran vidriosos ante la mera mención de crear un sitio web personalizado. La creación de un sitio web avanzado utilizado para requerir conocimientos de programación y horas de codificación.
Pero gracias a Gutenberg, incluso aquellos que no conocen su HTML por su CSS podrán crear sitios web profesionales que se destaquen de la competencia.
La respuesta inicial al lanzamiento de Gutenberg fue ciertamente condenatoria: «… Inútil … Una broma … Terrible …»
Puede discutir sobre cómo WordPress manejó el lanzamiento de su nuevo editor de bloques de contenido (y puede que tenga razón al pensar que no fue genial), pero el secreto sucio es que, después de una serie de actualizaciones, Gutenberg se ha convertido en una excelente herramienta para construcción de sitios web.
A continuación, le mostraré 5 formas en que un diseñador web con experiencia en codificación limitada puede aprovechar Gutenberg para crear los tipos de sitios web personalizados que buscan las empresas.
Creé un sitio web de viajes con una serie de funciones personalizadas utilizando estas tres herramientas:
- Gutenberg
- Conjunto de herramientas – Su nuevo Toolset Blocks le permite agregar funciones personalizadas a sus sitios web, incluidos tipos de publicaciones personalizadas, una búsqueda y contenido dinámico.
- GeneratePress – Un tema ligero y rápido que es fácil de usar para principiantes.
Ahora te contaré un secreto. No soy desarrollador. De hecho, tengo una experiencia de codificación limitada. Sin embargo, pude usar Gutenberg para crear un sitio web profesional con una serie de características que los sitios web personalizados requerirían. A continuación, revisaré cinco de ellos.
1. Puede crear contenido dinámico
Una ventaja que tiene sobre los creadores de páginas es que Gutenberg viene con una serie de extensiones de bloque para mejorar sus sitios web. Uno de ellos es Toolset, que ofrece capacidades de contenido dinámico.
El contenido dinámico significa que puede crear un elemento (como una imagen) que extraerá el contenido correcto de la base de datos. Entonces, cuando crea una lista de publicaciones, solo necesita agregar cada bloque para cada elemento una vez, pero ese bloque mostrará contenido diferente para cada publicación.
Por ejemplo, he creado una lista de publicaciones de recorridos; más adelante explicaré cómo puede hacer esto con Gutenberg. ¿Notas algo extraño en los títulos a continuación?
El título es exactamente el mismo para cada uno de mis recorridos. Eso es porque los títulos son estáticos, lo contrario de dinámicos. Significa que cuando agrego mis bloques, cualquier texto que ingrese en el encabezado se mostrará para cada una de las publicaciones. Sin embargo, cuando es dinámico, verá el rumbo correcto en cada recorrido.
Quiero mostrar esta publicación de la gira con el título correcto en mi lista de contenido. Todo lo que necesito hacer gracias a Gutenberg y Toolset es lo siguiente:
- Seleccione el bloque de encabezado de Toolset: a diferencia de los bloques normales de Gutenberg, Toolset le permite hacer que su contenido sea dinámico;
- Seleccione la opción dinámica;
- Elija la fuente para su título;
- Confirme que el título sea correcto.
Puede crear contenido dinámico para una serie de otros bloques disponibles en Gutenberg, incluidas imágenes, campos personalizados y el enlace para botones.
2. Mostrar listas de contenido personalizadas
En un sitio web personalizado, habrá ocasiones en las que querrá enumerar su contenido de un tipo de publicación en particular en diferentes partes de su sitio web. Por ejemplo, una lista de propiedades a la venta en su página de inicio de bienes raíces.
Cada una de estas propiedades utiliza el mismo diseño, mostrando la misma información como el precio, el número de dormitorios y el número de baños de la misma manera. Esta información se agrega mediante campos personalizados que son piezas de información que puede agregar al contenido de WordPress. Los creadores de páginas por sí mismos no pueden crear campos personalizados. Sin embargo, puede crearlos usando Gutenberg y sus complementos de bloques.
A continuación, para mi sitio web de viajes, mostré un control deslizante con una lista de recorridos destacados. La lista incluye una serie de campos personalizados que incluyen el precio, la calificación y la duración.
Usé Gutenberg y Toolset para crear los campos personalizados que puede ver en mi lista anterior. Aquí están todos los campos personalizados que creé. Destaqué el campo de precio como ejemplo.
En el back-end, puedo usar el bloque Ver de Toolset para crear una lista de publicaciones. Puedo elegir qué publicaciones quiero mostrar y cómo quiero mostrarlas.
Por ejemplo, a continuación puede ver que puedo seleccionar qué contenido quiero mostrar.
También puedo decidir cómo quiero mostrar mi lista, ya sea en forma de cuadrícula, lista ordenada, sin formato o mucho más.
Ahora puedo seleccionar qué campos quiero mostrar. Muchos de estos campos serán los campos personalizados que creé anteriormente. Cada uno de mis recorridos mostrará los campos en el mismo diseño. Una vez más, he resaltado el campo personalizado de precio a continuación. Para cada campo creo un bloque y luego elijo la fuente del contenido (como el precio) en la barra lateral derecha.
Una vez que haya organizado el diseño de mis publicaciones, puedo decidir exactamente qué publicaciones mostrar y en qué orden. Usando Gutenberg y Toolset puedo seleccionar:
- El orden en que muestro las publicaciones, como la publicación de blog más reciente;
- La cantidad de publicaciones que muestro;
- Si quiero un filtro en mis publicaciones, por ejemplo, mostrar solo los recorridos que cuestan menos de una cierta cantidad.
Agregué un filtro para mostrar solo los recorridos destacados. Como parte de mis campos personalizados, creé un campo para «Tours destacados» en el que puede hacer clic para cada publicación en el back-end.
Puedo usar Gutenberg y Toolset para crear un filtro usando la barra lateral derecha que le dice a mi lista de contenido que solo muestre las publicaciones de tours que aparecen.
Observe cómo puedo personalizar completamente mis listas de publicaciones en Gutenberg sin usar ningún código en absoluto. Incluso los diseñadores sin experiencia en programación podrán agregar una lista de publicaciones a su sitio web.
3. Cree una plantilla para su contenido
Una plantilla es su plano para los tipos de publicaciones que proporciona a cada una de sus publicaciones una estructura. Por ejemplo, he creado una plantilla para mis tipos de publicaciones de viajes, lo que significa que cada publicación de viajes tendrá exactamente la misma estructura cuando la mires en el front-end.
Como puede ver, ambas publicaciones son de la misma plantilla. Lo sabes porque cada publicación tiene el mismo diseño, con el contenido siguiendo la misma estructura.
Todo lo que necesitaba hacer para crear mi plantilla en mi editor Gutenberg era insertar mis bloques y agregar contenido dinámico. A medida que agrego el contenido, puedo usar el menú desplegable en la parte superior de la página para cambiar entre las publicaciones y ver cómo se ve la plantilla con diferentes contenidos de publicación.
4. Cree una búsqueda personalizada
Una de las características más importantes de un sitio web personalizado es la búsqueda.
Si está diseñando un sitio web de directorio que vende artículos, por ejemplo, querrá que sea lo más fácil posible para los clientes potenciales encontrar sus productos. La mejor manera es con una búsqueda que contenga filtros para que puedan reducir los resultados y encontrar exactamente lo que están buscando.
A continuación, puede ver la búsqueda personalizada que creé usando Gutenberg y Toolset para mis recorridos. Contiene varios filtros. Uno de los filtros es mostrar solo aquellos recorridos con una calificación de 3-5 estrellas.
La creación de una búsqueda personalizada consta de dos pasos. Primero, creando la búsqueda (que puede ver arriba) y segundo, diseñando los resultados.
Creé la búsqueda usando el bloque Ver de Toolset en una nueva página. A continuación se muestran las opciones para mejorar el bloque. Puedo seleccionar la opción de búsqueda, agregar ordenación de front-end para que el usuario pueda ordenar los resultados cuando aparecen (precio de menor a mayor, por ejemplo) y paginación para dividir el contenido en páginas.
Una vez que agrego el bloque puedo proceder a agregar filtros adicionales como el precio máximo. También puedo incluir un mapa y marcadores para mostrar los resultados. Una vez más, gracias a Gutenberg y sus extensiones, no necesito usar codificación. Solo selecciono los bloques y ajusto las opciones en la barra lateral derecha.
Para los resultados, agregué bloques como lo hice para la plantilla y la lista personalizada de contenido.
Y así, tengo una búsqueda personalizada para mis recorridos. Ahora puedo ingresar búsquedas usando los filtros en el front-end.
5. Cree un archivo de publicaciones similares
Un archivo facilita a los usuarios encontrar todas las publicaciones que ha publicado. Si desea un archivo con campos estándar, como un encabezado y contenido de publicación, un creador de páginas como Elementor es una excelente opción. Sin embargo, si desea incluir campos personalizados con contenido dinámico, deberá usar Gutenberg,
Creé un archivo para todos mis recorridos en mi sitio web de viajes. Cuando alguien haga clic en el archivo, verá todos los recorridos que he creado. Puede crear un recorrido para cualquiera de sus publicaciones.
Al igual que con la lista personalizada de contenido, puedo agregar los bloques para el contenido y organizar las publicaciones como quiero.
No es necesario ser un desarrollador profesional para crear sitios web profesionales
Ahora que ha visto cómo incluso un principiante en codificación puede crear sitios web personalizados completos, es hora de que lo pruebe usted mismo. Aquí hay algunos tutoriales y documentación que vale la pena revisar:
- Si es nuevo en Gutenberg, Colorlib ofrece una buena Tutorial de WordPress Gutenberg que le presentará cómo puede crear bloques.
- El complemento que utilicé con Gutenberg, Toolset, ofrece una curso de entrenamiento sobre cómo puede utilizar las dos herramientas para crear sitios web de directorios de WordPress. Es una excelente manera de comprender exactamente qué funciones puede crear y cómo para cualquier tipo de sitio web.
- Para mantenerse al día con cualquier cambio en Gutenberg, también vale la pena estar atento a la manual del editor de bloques.
Gutenberg está todavía en su infancia y está lejos del producto terminado. Pero eso no significa que no pueda revolucionar los contratos de creación de sitios web que puede asumir. Si aprovecha su interfaz de usuario visual y bloquea los complementos, podrá crear sitios web personalizados que nunca antes pensó que fueran posibles.
