Creamos Webflow pensando específicamente en diseñadores y desarrolladores que quieren dar vida a sus ideas de forma rápida, estética y adaptable. Pero eso no significa que Webflow sea solo para expertos en diseño. De hecho, es una plataforma muy potente para blogueros de todo tipo, desde equipos de marketing internos hasta cualquiera que quiera construir su marca en línea.
Sin embargo, para el bloguero promedio, Webflow puede parecer una plataforma imponente. Por eso estamos aquí para demostrarte que, en realidad, es bastante sencillo empezar a bloguear con Webflow.
Pero primero…
¿Por qué bloguear con Webflow?
Hay todo tipo de razones para bloguear con Webflow, pero estas son algunas de nuestras favoritas:
1. Es fácil empezar rápido y aprender sobre la marcha
Como te mostraremos en este artículo, es súper fácil empezar a bloguear con Webflow.
Empezarás haciendo pequeños ajustes al diseño visual y a las estructuras de contenido, pero pronto querrás personalizar más. Y Webflow es una plataforma de aprendizaje fantástica. A medida que juegues con la herramienta y veas nuestros tutoriales en video, podrás convertir tu blog en una experiencia realmente personalizada para tus lectores.
2. Webflow incluye un CMS intuitivo
Para bloguear de forma rápida y eficaz, necesitas un CMS (o sistema de gestión de contenidos). Y aunque hay un montón de opciones ahí fuera, Webflow destaca por dos razones:
- Edición en la página. No hay nada más intuitivo que hacer doble clic en un texto y editarlo. Ahí mismo, en la página. Es como escribir y editar en Medium, pero actualizando tu propio sitio web. Genial.
- Tipos de contenido fácilmente personalizables. Llamamos a nuestros tipos de contenido “Colecciones”, y es muy sencillo ajustar las Colecciones existentes o crear las tuyas desde cero, especialmente a medida que mejoras con el Diseñador.
Lecturas relacionadas: Cómo usar el CMS de Webflow como herramienta de modelado de contenidos
3. Es compatible con SEO
Si te tomas en serio lo de bloguear, también tienes que tomarte en serio la optimización para motores de búsqueda (SEO). Porque así es como la gente encuentra el contenido increíble que produces.
Afortunadamente, Webflow te ayudará a triunfar con tu SEO al ser:
- Rápido
- Con un código limpio
- Adaptabilidad
Además, te permite:
- Define sus estructuras de URL (que por defecto tienen un formato legible y amigable para el usuario)
- Genere automáticamente títulos meta, descripciones y configuraciones de Open Graph (OG) basados en su contenido, para que pueda usar campos que ya ha redactado para los metadatos o crearlos manualmente
- Añada etiquetas alt a las imágenes
Dicho esto, aquí le explicamos cómo empezar a bloguear con Webflow.
Lecturas relacionadas: SEO para sitios web: la guía definitiva para posicionarse en Google
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Cómo empezar a bloguear con Webflow
Muy bien, vamos directo al grano.
Paso 1: Elija una plantilla CMS de Webflow
Primero, eche un vistazo a nuestras plantillas adaptables y asegúrese de hacer clic en el filtro "CMS". (Si hizo clic en ese enlace, ya está hecho).
¿Por qué? Porque usar una plantilla con CMS le da acceso a la edición en la página y al panel del CMS, así que no tendrá que meterse en el Designer, que es más complejo, hasta que esté listo.
Tenemos un montón de plantillas con CMS, pero para facilitarle las cosas, usaremos la plantilla de blog gratuita y minimalista Tokyo.
Si lo desea, también puede consultar nuestras plantillas de blog, ya que también son plantillas CMS (sistema de gestión de contenidos), pero filtradas específicamente para sitios web de blogs.
Paso 2: Personalice el diseño de su sitio
Para mantener las cosas simples, haremos un par de ajustes menores al diseño visual de la plantilla Tokyo usando el Webflow Designer.
Actualización de la tipografía
Primero, actualizaremos la fuente predeterminada del sitio. La tipografía tiene un impacto enorme en cómo la gente percibe y siente un sitio web, así que es un cambio sencillo que rinde mucho.
La fuente predeterminada de la plantilla, Montserrat, es una sans serif geométrica y amigable, lo cual está bien. Pero como queremos escribir reseñas de aplicaciones enfocadas en las necesidades de los trabajadores tecnológicos modernos, buscamos algo un poco más serio.
Al revisar el menú desplegable de fuentes en el panel de Tipografía, no vemos nada que nos convenza, así que iremos a la configuración del sitio haciendo clic en la W de la esquina superior izquierda y luego en Site Settings.
Luego, entre en la pestaña Fonts y abra el menú desplegable de Google Fonts, donde podemos elegir entre cualquiera de la enorme colección de Google Fonts.
Nos decantaremos por otra sans serif llamada Work Sans, así que la cargamos (asegurándonos de seleccionar el grosor fino, que tiene un toque delicado de diseño suizo) y volvemos al Designer.
Para que los cambios sean eficientes, queremos que Work Sans sea la fuente predeterminada de todo el sitio. Para lograrlo, debemos establecerla como la fuente del cuerpo (Body) del sitio.
En Webflow (y en el diseño web en general), el Body es la entidad fundamental de tu sitio web, así que si quieres que una elección de estilo afecte a todo el sitio, empieza por ahí. Para seleccionar el Body y darle estilo, hago clic en "Body" en el navegador a la izquierda del Diseñador.
Luego, en el panel de estilos a la derecha del Diseñador, hago clic en el campo Selector y elijo Body (All Pages). Haz clic en esa etiqueta, vuelve al panel de Tipografía para elegir la nueva fuente y, ¡pum!, el cambio de imagen ha comenzado.
Nota: Por lo general, es mejor aplicar estilos a las etiquetas que crear selectores únicos para todo en tu sitio. Esto garantiza que tus cambios tengan el mayor alcance posible y ayuda a mantener el código limpio.
Cambiar la etiqueta Body a Work Sans modificó gran parte del texto del sitio, pero no todo. Esto se debe a una de las leyes esenciales de CSS: la especificidad: las clases más específicas prevalecen sobre las menos específicas. Por eso elementos como los encabezados siguen en Montserrat: la etiqueta de encabezado es más específica que la etiqueta del cuerpo.
Así que ahora vamos a recorrer todo el texto que sigue en Montserrat y lo actualizaremos a Work Sans. Después de cambiar el nombre del sitio, pasaremos a los enlaces de navegación, otro elemento importante de Webflow.
Cuando hacemos clic en el enlace "Blog", vemos que tiene dos selectores: Nav Link y Current. "Current" nos indica que este selector tiene una transición aplicada. Como la web es un medio interactivo, el sitio puede reflejar las acciones que realizan los usuarios. En este caso, el selector cambia de color para mostrar que Blog es la página actual.
Eso no afecta a los cambios de fuente, pero vale la pena tenerlo en cuenta a medida que profundizas en las personalizaciones de diseño en Webflow.
Una vez terminada la página de inicio (feed del blog), cambia a la plantilla de páginas individuales de entradas de blog (usando el selector de páginas en la parte superior izquierda). Aquí vemos que, aunque el cuerpo del texto está en Work Sans, los titulares siguen en Montserrat.
Lo complicado es que no podemos dar estilo directamente al contenido de la entrada del blog, ya que, de nuevo, se extrae de la Colección. Por eso, añadiremos un segundo campo de Texto enriquecido al lienzo y le daremos el mismo nombre de clase que al contenido dinámico (en esta plantilla, "Blog Content"). Luego, podremos dar estilo a los H2 y H3 dentro del texto enriquecido y ver cómo se actualizan los subtítulos en el contenido del blog de arriba.
¡Solo no olvides eliminar ese elemento de Texto enriquecido que añadiste! De lo contrario, aparecerá en cada entrada de blog que publiques. (Lo mismo ocurre con cualquier elemento no dinámico que añadas a una plantilla de página de Colección).
Añadiendo un toque de estilo Material con sombra paralela
Bien, simplemente cambiar la fuente de nuestro blog ya ha transformado bastante su aspecto. Pero queremos hacer un cambio sencillo más que también tendrá mucho impacto.
Como soy un gran fan del enfoque de diseño Material de Google y de las interfaces basadas en tarjetas, queremos convertir estos avances de blog en tarjetas. No te preocupes, es súper sencillo.
Solo selecciona todo el contenedor del avance —eso que envuelve la imagen, el título de la entrada, los metadatos, el extracto y el enlace— y añade una sombra paralela desde la sección Efectos del panel de estilos.
Y así de fácil, hemos hecho que nuestro blog sea bastante distinto de nuestra plantilla original, y sigue viéndose genial. Todo sin tocar ni una línea de código.
Paso 3: Personaliza tus Colecciones
Como mencionamos antes, llamamos a los tipos de contenido "Colecciones", y es muy fácil hacerlas tuyas. ¡Aquí es también donde nos adentramos en el lado del Diseñador del CMS de Webflow!
Primero, tendrás que actualizar la Colección de Categorías para que coincida con los temas sobre los que escribirás. Así que, simplemente abre el panel de Colecciones a la izquierda, haz clic en Categorías y luego revisa cada una, actualizándola a lo que sea relevante para tu blog.
Al hacerlo, asegúrate de actualizar tanto el campo Nombre como la URL. ¡Después de todo, no querrás que tus publicaciones sobre aplicaciones web tengan la palabra "música" en su URL (a menos, claro, que se trate de una aplicación de música)!
Verás una advertencia de que cambiar la URL romperá la anterior, pero no te preocupes. Como aún no has publicado nada, en realidad no has roto ninguna URL, y cualquier publicación de blog asociada a las categorías que edites se actualizará automáticamente.
Si necesitas más categorías, simplemente haz clic en +Nuevo, y si necesitas menos, haz clic en Eliminar dentro de la categoría.
Paso 4: Actualiza las publicaciones de blog de muestra
Cada plantilla de Webflow viene con contenido de muestra para completar el diseño, pero obviamente querrás actualizar todo ese contenido para que coincida con tu visión editorial.
Puedes hacerlo de dos maneras:
- Actualizar el contenido dentro del Diseñador, antes de publicar. Si te preocupa que alguien vea tu blog lleno de contenido de muestra, quizás prefieras esta opción.
- Publicar tu sitio y actualizar el contenido en el Editor. Dado que es poco probable que alguien se tope por accidente con nuestro nuevo blog —y porque quiero presentarte el Editor—, elegiremos este camino.
Para publicar tu sitio, simplemente haz clic en el botón Publicar en la esquina superior derecha y luego haz clic en el icono de enlace a la derecha del nombre del sitio. Esto abrirá el sitio en el Editor, la parte frontal del sistema de gestión de contenidos de Webflow.
A diferencia del panel de WordPress, el Editor de Webflow no se comporta como un backend (en su mayor parte). En cambio, te permite moverte por el sitio usando tus enlaces de navegación reales y editar el contenido directamente en la página.
Como redactor, esto es increíblemente valioso, porque la apariencia de las palabras en la página realmente importa. Además, elimina esa molesta capa de abstracción entre tú y tu contenido al no tener que "previsualizar" tus cambios.
Nota: Cambiar el título de una publicación de blog en la página no alterará su URL. Puedes hacerlo en el Panel del Editor.
Para abrir el Panel del Editor, simplemente haz clic en Páginas o Colecciones. El panel se deslizará hacia arriba, permitiéndote revisar tu contenido estático (Páginas) y dinámico (Colecciones). Luego, solo haz clic en una publicación para abrirla y actualizar el título y la URL.
Lo mejor de esto es que la página de inicio (el feed del blog) obtiene los títulos y las URLs de las publicaciones de forma dinámica, por lo que no romperás ninguna URL (¡otra vez!).
Nota: editar las URLs de páginas estáticas sí romperá los enlaces hacia ellas, ya que no son dinámicas.
Ahora ya estás listo para crear un blog increíble en Webflow.
Potenciando a creadores de contenido y diseñadores
Llamar la atención en el entorno digital actual es cada vez más difícil. Necesitas una plataforma que te permita destacar. Una plataforma que te permita crear tu propia marca y un sitio web totalmente original, con un código limpio y pensando en el SEO.
A medida que la web se vuelve más accesible y más personas crean contenido de calidad en línea, la marca y la estrategia de contenidos se convertirán en el factor diferenciador.
Dicho esto, es importante encontrar formas de fusionar la creación de contenido con el desarrollo visual. Piensa en cómo tu contenido alimenta tus diseños y cómo tus diseños alimentan tu marca. ¡Por una nueva ola de creación!
