Requisitos
Antes de empezar, necesitamos tener una cuenta de Webflow. Al principio, puede tomar el plan gratuito de Webflow y después elegir uno mejorado. Cada plan desbloquea diferentes características.
Paso 1 - Crear el ambiente apropiado
Como comentamos, Webflow será la plataforma que nos ayudará a crear nuestro blog de una manera rápida y fácil. Después de registrar tu cuenta, sigue estos pasos:
- Elige, entre las opciones dadas, qué plantilla de blog te gusta más y haz clic en ella.
- Crea la estructura y aplica los estilos.
⚠️ Maqueta solamente tu primera entrada de blog. Crearemos las siguientes entradas con el componente CMS ⚠️
Ahora tenemos la estructura de nuestro blog diseñada y estamos listos para añadir el componente CMS que sujetará nuestro trabajo.
Paso 02 - Creando una colección CMS
En el menú de la derecha encontramos las diferentes funciones que tiene Webflow. Una de esas funciones es el botón de "Colecciones de CMS". Si hacemos clic en él, podremos crear una nueva colección.
- Nombrar la colección ("Collection Name")
- Cumplimentar los diferentes campos del post ("Collection Fields")
Ahora básicamente tendremos:
- En Basic Info la sección Name. Por ejemplo, el título del post.
- En Add Fields añadiremos los elementos del post. Por ejemplo, la descripción del blog(Plain Text), un enlace que será el del blog y un texto enriquecido (rich text) que tendrá todo el contenido del post.
Debería aparecer así:
Una vez hagas click en "Crear colección" podrás elegir cuántos elementos tendrá nuestra colección. Haz clic en " Add 5 items". Después de implementar estos ajustes, los siguientes cinco posts se generarán automáticamente y sólo tendremos que añadir las características personalizadas en los diferentes campos que ya hemos creado -título, descripción,...- El componente Rich text nos ayudará a agilizar la creación del contenido del post.
Paso 03 - Conectando el componente CMS a los elementos del post
En la sección del menú "Añadir componentes" encontraremos el componente CMS. Lo que haremos será añadir nuestra Collection list a la estructura y conectarla a la colección ya creada.
¿Cómo conectarla?
- Insertar el componente CMS en el contenedor general que guarda los diferentes posts.
- Hacer click en el icono de configuración del componente y seleccionar la colección ya creada.
- Insertar el contenedor de los elementos de los postes en el campo Elemento de colección
- Conectar cada elemento del post con los campos de la colección ya creados. Podrás conectar estos elementos a través del icono de configuración y seleccionando"Get text from (nombre de lacolección)"
Después de seguir estos pasos deberíamos tener todos los posts con los elementos conectados.
Paso 04 - Creando la plantilla del post
Como podemos ver, al añadir y conectar el componente CMS con los elementos del post, se creará automáticamente una página o plantilla en blanco.
En esta plantilla en blanco crearemos la estructura que tendrás en cada post.
Replicaremos la estructura base del blog con características como la barra de navegación o el pie de página. En el contenido del post añadiremos el componente rich text. Al igual que hicimos antes con los otros, ahora necesitamos añadir el componente CMS al contenedor de texto enriquecido para conectar ambos. Automáticamente, deberemos tener los posts estructurados con sus títulos, imágenes y demás.
💡Para comprobar que todos los posts se han cumplimentado correctamente podemos cambiar
las diferentes páginas a través del botón que se encuentra en la parte superior izquierda de la página, al lado del botón de vista previa.
Si has seguido estos pasos deberías tener tu blog y todos sus posts listos 👏🏻
Aquí puedes ver la respuesta de nuestro blog y en el Escaparate de Webflow puedes encontrar un proyecto clonable.
¡Gracias!
