Webflow CMS: Crea un gestor de contenidos NoCode

En este post vamos a hablar de Webflow CMS, la herramienta que tiene Webflow para crear un gestor de contenidos sin programar.

Si has llegado aquí buscando información acerca de Webflow y su potencial, pero aún no te has adentrado a utilizar la herramienta, te dejo un tutorial para crear tu primera web con Webflow.

¿Qué es un CMS y por qué crearlo?

Necesitamos un CMS (Content Management System o Sistema de gestión de contenido) cuando queremos crear una web donde publicar contenido que comparta la estructura de información entre los mismo. Y para ello tendremos que definir dicha estructura que indique los campos que vamos a tener en cada uno de los contenidos. Por ejemplo, en Idelista todos los anuncios cuentan con los mismos campos: Titulo, descripción, precio etc.

Si queremos crear un blog sencillo, el plan gratuito de Webflow nos permite crear una colección y guardar en la misma hasta 50 items de tipo Blog post, pero si queremos sacarle partido porque nuestra web contará con más contenido o definir nuevas colecciones, necesitaremos un plan CMS que cuesta 12$ mensuales pagando de forma anual.

Por suerte, si eres estudiante puedes conseguir un año gratis del plan CMS de Webflow para uno de tus proyectos.

Accede a la lista de precios de webflow actualizada.

Crear colección con Webflow CMS

Una colección es una base de datos dónde almacenaremos los contenidos que queramos mostrar en la web. Y para poder crear dicha colección necesitaremos definir cuales son los campos con los que contarán cada uno de nuestros contenidos.

Para poder crear nuestro CMS en Webflow, necesitamos crear una colección en nuestro proyecto. Para ello, iremos a nuestro dashboard y abriremos el diseñador sobre el proyecto que nosotros queramos.

Una vez abierto el diseñador iremos a la sección CMS que encontraremos en el menú de la izquierda.

Una vez seleccionada la opción nos mostrará un listado de colecciones ya creadas y un botón en la parte superior que nos permite crear una colección nueva.

Por defecto una colección cuenta con dos campos para cada elemento, ambos obligatorios y en formato texto:

• Nombre: Representa el nombre del item que crearemos en nuestra base de datos
• Slug: Representa el nombre de la colección dentro de la URL. Por ejemplo, si la colección fuese «Coches» y nuestra web fuese nocodespain.es, cada uno de los items se tendría la URL con estructura nocodespain.es/coches/xxxxx-xxx

Para crear la colección de Webflow tenemos dos opciones:

• Plantilla predefinida: Podremos seleccionar alguna de las plantillas que nos ofrece con contenidos comunes en otras webs.
• Colección personalizada: Podremos crear una colección personalizada con los campos definidos por nosotros.

Plantillas de CMS Webflow

Webflow dispone de diferentes plantillas de colecciones. Cada una de ellas corresponde a un conjunto de campos que suelen ser comunes en la mayoría de sitios web. Por ejemplo para blog de post, autor, eventos etc.

Si seleccionamos una de las opciones, por ejemplo «Blog post» automáticamente nos cargará el nombre de la colección, un slug y una serie de campos en la parte inferior que representa la información de cada uno de los items.

Crear colección Webflow

Si por el contrario queremos crear nuestra propia colección, tan solo tendremos que ir añadiendo campos a través del botón «Add New Field».

En mi caso, y aprovechando que tengo una colección llamada Coches, voy añadir un campo nuevo de tipo imagen y servirá para añadir una foto a cada uno de los elementos.

Una vez pulsamos el botón tendremos que ir completando la siguiente información:

• Tipo de campo: Permite definir los tipos de valores que tendrá nuestro campo
• Atributos: Permite definir atributos para nuestro campo, por ejemplo en la imagen nos permite definir el máximo de altura y anchura, el peso etc.

Una vez tengamos la colección lista pulsaremos el botón «Save collection» y nos llevará al listado de registros de nuestra colección.

Añadir contenidos a una colección de Webflow

El último paso para crear nuestro CMS en Webflow es añadir contenido a la colección. para ello pulsaremos en el botón de «New» que encontraremos en la parte superior derecha de nuestra ventana y nos cargará el formulario de contribución con todos los campos que se han definido previamente.

Una vez hemos rellenado los campos que queramos pulsaremos la opción «Create» y automáticamente nos llevará al listado de registros, donde se nos mostrará el nuevo registro en estado «Staged for publish». Esto se debe a que no hemos publicado aún la actualización del sitio.

Para poder cambiar el estado de nuestro elemento, iremos a publicar el sitio y automáticamente cambiar a estado «Published». Para ello, iremos a la sección «Pages» y pulsaremos la opción publish que encontraremos en la parte superior del menú.

Por último, vamos a comprobar que se ha publicado nuestro elemento del CMS de Webflow correctamente, para ello tan solo volveremos a la sección CMS y haremos click en nuestra colección.

Visualización de CMS en Webflow

Para no alargar más este tutorial, voy a crear otro donde aprenderás a mostrar tus registros de CMS en Webflow dentro de una página.

Conclusiones

Como has podido ver, para crear con Webflow un CMS será necesario una cuenta de plan CMS. Tendrás que crear una colección nueva a través del panel de control, definiendo todos los campos que quieras para cada uno de los contenidos y una vez listo crear cada uno de los items en tu colección. Por último, tendrás que publicar tu web para hacerla disponible a todo el mundo.

Si te ha gustado el post, te animo a compartir en tus redes sociales o dejar tu comentario con cualquier duda.