# 5 Maneras de construir Sitios Web sin código usando Gutenberg de WordPress - Link: https://creativa.dev/wordpress/5-maneras-de-construir-sitios-web-sin-codigo-usando-gutenberg-de-wordpress/ - Published: 2020-07-01T10:54:15-04:00 - Author: Juanito Ortega La respuesta inicial al lanzamiento de **Gutenberg** ciertamente fue condenatoria:**«… Inútil … Un chiste … Terrible …»** Puede discutir sobre cómo WordPress manejó el lanzamiento de su nuevo editor de bloques de contenido (y podría tener razón al pensar que no fue genial), pero lo cierto es que, después de una serie de actualizaciones, **Gutenberg** se ha convertido en una excelente herramienta para Creación de sitios web. A continuación, le mostraré 5 formas en que un diseñador web con experiencia limitada en codificación puede aprovechar **Gutenberg** para crear los tipos de sitios web personalizados que buscan las empresas. ## 5 Maneras de construir Sitios Web sin código usando Gutenberg de WordPress Creé un sitio web de viajes con una serie de características personalizadas utilizando estas tres herramientas: * **Gutenberg** * [Conjunto de herramientas](https://toolset.com/): sus nuevos bloques de conjunto de herramientas le permiten agregar funciones personalizadas a sus sitios web, incluido [tipos de publicaciones personalizadas](https://www.webdesignerdepot.com/2014/10/how-to-take-your-wordpress-sites-to-the-next-level-with-custom-post-types/), un buscador y contenido dinámico. * [GeneratePress](https://generatepress.com/): un tema ligero y rápido que es fácil de usar para principiantes. ![](https://www.creativa.dev/wp-content/uploads/2020/07/image3.jpg) Ahora te contaré un secreto. No soy un 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 requerirían los sitios web personalizados. A continuación, te mostraré cinco de ellos. ## 1. Puedes crear contenido dinámico Una ventaja que tiene sobre los creadores de páginas es que **Gutenberg** viene con una serie de [extensiones](https://www.webdesignerdepot.com/2019/03/17-plugins-tutorials-and-resources-for-gutenberg/) de [bloque](https://www.webdesignerdepot.com/2019/03/17-plugins-tutorials-and-resources-for-gutenberg/) para mejorar tus 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 tours; más adelante, explicaré cómo puedes hacer esto con **Gutenberg**. ¿Notas algo extraño en los títulos a continuación? ![](https://www.creativa.dev/wp-content/uploads/2020/07/image9.jpg) El encabezado es exactamente el mismo para cada uno de mis tours. Eso es porque los encabezados son estáticos, lo opuesto a dinámico. 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 tour. Para ilustrar, aquí está mi publicación sobre cómo visitar Cisjordania en el back- end. Puedes ver el título de la publicación en la parte superior. ![](https://www.creativa.dev/wp-content/uploads/2020/07/image21.jpg) Quiero mostrar esta publicación de la gira con el encabezado correcto en mi lista de contenido. Todo lo que necesito hacer gracias a **Gutenberg** y **Toolset** es lo siguiente: 1. Seleccione el bloque de encabezado de **Toolset**: a diferencia de los bloques normales de **Gutenberg**, **Toolset’s** le permite dinamizar su contenido; 2. Seleccione la opción dinámica; 3. Elija la fuente de su encabezado; 4. Confirme que el encabezado es correcto. ![](https://www.creativa.dev/wp-content/uploads/2020/07/image7.jpg) Puede crear contenido dinámico para otros bloques disponibles en Gutenberg, incluidas imágenes, campos personalizados y el enlace para botones. ## 2. Mostrar listas personalizadas de contenido En un sitio web personalizado, habrá ocasiones en las que deseará enumerar su contenido de un tipo de publicación particular en diferentes partes de su sitio web. Por ejemplo, una lista de propiedades en venta en su página de inicio de bienes raíces. ![](https://www.creativa.dev/wp-content/uploads/2020/07/image13.jpg) Cada una de estas propiedades utiliza el mismo diseño, mostrando la misma información, como el precio, el número de habitaciones y el número de baños de la misma manera. Esta información se agrega utilizando campos personalizados que son piezas de información que puede agregar al contenido de **WordPress**. Los creadores de páginas por sí solos no pueden construir campos personalizados. Sin embargo, puede crearlos utilizando** Gutenberg** y sus plugins de bloques. A continuación, para mi sitio web de viajes, mostré un control deslizante con una lista de los tours destacados. La lista incluye una serie de campos personalizados que incluyen el precio, la calificación y la duración. ![](https://www.creativa.dev/wp-content/uploads/2020/07/image8.jpg) Utilicé **Gutenberg** y **Toolset** para crear los campos personalizados que puedes ver en mi lista anterior. Aquí están todos los campos personalizados que creé. He resaltado el campo de precio como ejemplo. ![](https://www.creativa.dev/wp-content/uploads/2020/07/image2.jpg) En el back-end, puedo usar el bloque Toolset View 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. ![](https://www.creativa.dev/wp-content/uploads/2020/07/image5.jpg) 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. ![](https://www.creativa.dev/wp-content/uploads/2020/07/image10.jpg) Ahora puedo seleccionar qué campos quiero mostrar. Muchos de estos campos serán los campos personalizados que creé anteriormente. Cada uno de mis tours mostrará los campos con el mismo diseño. Una vez más, he resaltado el campo personalizado de precios a continuación. Para cada campo, creo un bloque y luego elijo la fuente del contenido (como el precio) en la barra lateral derecha. ![](https://www.creativa.dev/wp-content/uploads/2020/07/image17.jpg) Una vez que he 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 visualizo publicaciones como la publicación de blog más reciente; * El número de publicaciones que muestro; * Si quiero un filtro en mis publicaciones, por ejemplo, mostrar solo los tours que cuestan menos de un cierto monto. Agregué un filtro para mostrar solo los tours 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. ![](https://www.creativa.dev/wp-content/uploads/2020/07/image16.jpg) 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 los tours que se muestran. ![](https://www.creativa.dev/wp-content/uploads/2020/07/image1.jpg) Observe cómo puedo personalizar completamente mis listas de publicaciones en Gutenberg sin usar ningún tipo de codificación. 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 modelo para sus tipos de publicaciones que proporciona una estructura a cada una de sus publicaciones. Por ejemplo, he creado una plantilla para mis tipos de publicaciones de tours, lo que significa que cada publicación de tour tendrá exactamente la misma estructura cuando la mire en el front-end. ![](https://www.creativa.dev/wp-content/uploads/2020/07/image6.jpg) ![](https://www.creativa.dev/wp-content/uploads/2020/07/image12.jpg) 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 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 alternar entre las publicaciones y ver cómo se ve la plantilla con diferentes contenidos. ![](https://www.creativa.dev/wp-content/uploads/2020/07/image14.jpg) ## 4. Crear un buscador personalizado Una de las características más importantes en un sitio web personalizado es un buscador. 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 el buscador personalizado que creé usando Gutenberg y Toolset para mis tours. Contiene una serie de filtros. Uno de los filtros es mostrar solo esos recorridos con una calificación de 3-5 estrellas. ![](https://www.creativa.dev/wp-content/uploads/2020/07/image4.jpg) Crear un buscador personalizado consta de dos pasos. Primero, creando el buscador( que puedes ver arriba) y segundo, diseñando los resultados. ![](https://www.creativa.dev/wp-content/uploads/2020/07/image20.jpg) Creé el buscador usando el bloque Toolset View en una nueva página. A continuación se encuentran las opciones para mejorar el bloque. Puedo seleccionar la opción de búsqueda, agregar una clasificación frontal para que el usuario pueda ordenar los resultados cuando aparezcan (por ejemplo, el precio más bajo al más alto) y la paginación para dividir el contenido en páginas. ![](https://www.creativa.dev/wp-content/uploads/2020/07/image11.jpg) Una vez que agregue 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. ![](https://www.creativa.dev/wp-content/uploads/2020/07/image22.jpg) Para los resultados, agregué bloques como lo hice para la plantilla y la lista personalizada de contenido. ![](https://www.creativa.dev/wp-content/uploads/2020/07/image18.jpg) Y así, tengo una búsqueda personalizada para mis tours. Ahora puedo hacer búsquedas usando los filtros en el front-end. ![](https://www.creativa.dev/wp-content/uploads/2020/07/image19.jpg) ## 5. Crear un «Archive» de publicaciones similares Un «archive» facilita a los usuarios encontrar todas las publicaciones que ha publicado. Si desea un «archive» con campos estándar como un encabezado y el contenido, entonces un generador de páginas como Elementor es una gran opción. Sin embargo, si desea incluir campos personalizados con contenido dinámico, deberá utilizar **Gutenberg**, Construí un «archive» para todos mis tours en mi sitio web de viajes. Cuando alguien hace clic en el «archive», verá todos los tours que he creado. Puedes crear un tour para cualquiera de tus publicaciones. Al igual que con la lista personalizada de contenido, puedo agregar los bloques para el contenido y organizar las publicaciones como yo quiera. También puedo diseñar los bloques cambiando el color del texto, agregando un relleno/ margen, agregando el color de fondo y mucho más. ![](https://www.creativa.dev/wp-content/uploads/2020/07/image15.jpg) ## No necesita ser un desarrollador profesional para crear sitios web profesionales Ahora que ha visto cómo incluso un desarrollador principiante 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 eres nuevo en **Gutenberg**, Colorlib ofrece un buen [tutorial de Gutenberg](https://colorlib.com/wp/wordpress-gutenberg-tutorial/)( inglés) que te mostrará cómo puedes crear bloques. * El plugin que utilicé con Gutenberg, Toolset, ofrece un [curso de capacitación](https://toolset.com/course/wordpress-directory-and-classifieds-sites/)( inglés) sobre cómo puedes usar las dos herramientas para crear sitios web de directorios de WordPress. Es una excelente manera de comprender exactamente qué características 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 echarle un vistazo al manual oficial del [editor de bloques](https://developer.wordpress.org/block-editor/)( inglés) de WordPress. Gutenberg todavía está en su infancia y está lejos del producto terminado. Pero eso no significa que no pueda revolucionar la forma de construir sitios web porfesionales. Si aprovecha su interfaz de usuario visual y sus plugins bloques, podrá crear sitios web personalizados que nunca antes pensó que fueran posibles. Artículo traducido del [inglés](https://www.webdesignerdepot.com/2020/06/5-ways-to-build-codeless-websites-using-wordpress-gutenberg/).