Webflow: Primeros Pasos (fáciles 👍) con Webflow

Diseño Web

Si quieres empezar a hacer diseño web con Webflow, pero no sabes muy bien por dónde empezar, aquí vamos a hablar de los primeros pasos que debes hacer con Webflow y las primeras configuraciones que deberías implementar incluso antes de empezar a hacer tu sitio web.

Y hoy vamos a hablar de la herramienta de diseño web más sexy del mercado. Nosotros, en Tribu Olaf, es lo que usamos para nuestro propio sitio web y también lo usamos para desarrollar las webs de clientes.

Si estás aquí es porque ya habrás oído hablar de Webflow, quizá en alguno de nuestros vídeos. Vamos a los pasos que deberías hacer para empezar desde cero con Webflow.

. . .

Cómo crear una cuenta gratis con Webflow

El primer paso es crear una cuenta con Webflow es ir a webflow.com.

Llegarás a su homepage y simplemente tendrás que hacer clic en el botón que dice "Get Started" (empezar).

Webflow te lo pone muy sencillo.

Puedes logearte con una cuenta de Google o puedes crear una cuenta con el email que tú quieras.

Creando un proyecto en Webflow

Bien, una vez que te has creado la cuenta en Webflow, llegarás a un panel de control y lo único que tendrás que hacer es crear un proyecto.

Vas a encontrar un botón en la esquina superior derecha y creas un nuevo proyecto. Entonces aquí eliges si deseas empezar con una plantilla o si empiezas desde cero (Blank Site).

Antes de liarte con el desarrollo web, lo que deberías hacer primero es lo siguiente: entras en el proyecto que acabas de crear, te vas a la esquina superior izquierda y haces clic en Project Settings.

Crear un proyecto en Webflow
Creando un proyecto en Webflow

Aspectos generales de un proyecto de Webflow

Lo primero que vas a decidir es cómo se llama tu proyecto y cuál va a ser su subdominio.

Mientras tengas tu cuenta gratuita con Webflow, esta te va a añadir al final del dominio webflow.io. En nuestro caso es “vamos-olaf.webflow.io”. Eso, digamos, es la opción por defecto cuando creas la cuenta gratuita.

Luego, más abajo, puedes añadir el icono (favicon y webclip) y meter datos como tu franja horaria. Si tienes la cuenta gratuita no vas a poder quitar el "Hecho en Webflow". Esa es la contrapartida de usar la cuenta gratuita, simplemente Webflow te va a meter un pequeño banner.

Hosting en Webflow

Una vez que has completado la pestaña general puedes ir a hosting.

Si quieres seguir en el plan gratuito no te hace falta. Pero una vez que estés listo a cambiar a un plan premium, porque quieres un dominio tuyo propio y que no aparezca "webflow.io”, entonces tendrás que venir a hosting y seleccionar qué plan quieres.

Seleccionar un hosting en Webflow

Parámetros SEO en Webflow

En este caso vamos a la pestaña SEO, en la parte que dice “Indexing”.

Aquí puedes impedir a Google que entre a tu sitio web, es decir, que no te indexe el contenido de tu página. Si tienes la versión gratuita esto lo deberías poner NO, es decir, permite a Google entrar en tu sitio web. Por supuesto, si quieres que tu web aparezca o tenga posibilidades de aparecer en los resultados de búsqueda de Google.

Nosotros, en este caso, no permitimos que entre a este dominio porque ya tenemos tribuolaf.com. No queremos que haya duplicidades, es decir, que Google rastree tanto tribuolaf.com como vamos-olaf.webflow.io. Es uno u otro, no los dos. Entonces por eso nosotros tenemos prohibido que Google rastree ese dominio.

Aquí puedes editar tu fichero robots. El fichero robots.txt es un fichero importante para SEO.

En nuestro curso de SEO para emprendedores hablamos del fichero robots y de muchas otras cosas.

Más abajo tienes la opción de que Webflow te autogenere el Sitemap. Este es otro fichero importante para SEO y, en todos los casos, yo te recomendaría que sí, es decir, esta pestaña que esté en sí, que Webflow autogenere tu fichero Sitemap.

Parámetros SEO en Webflow
Autogenerado del fichero sitemap por parte de Webflow

Integrar Google Analytics y Webflow

Lo siguiente es integrar Google Analytics con Webflow.

Para ello tienes que ir a “Integrations” y meter dos parámetros: uno para Google Analytics y el otro el Pixel de Facebook.

El ID deGoogle Analytics lo encontramos en su panel. Luego, te vas ala esquina inferior izquierda, donde dice “Administrar”, siguiente a esto en la columna central, en el tercer elemento, “Información de seguimiento” y listo, ahí mismo vas a encontrar tu ID. Este es el que tienes que copiar y pegar aquí en Webflow.

Integrar Google Analytics con Webflow
Webflow y Google Analytics
Integración de Google Analytics y Webflow

Agregar el píxel de Facebook en Webflow

Bien, ahora vamos a añadir el píxel de Facebook en Webflow.

Este va a permitir a Facebook tracear el comportamiento de tus usuarios en tu web, con lo cual, de cara a futuro, puedes crear anuncios que vayan dirigidos a los usuarios que han navegado en tu sitio web.

Esto es interesante hacerlo desde el principio, incluso si no tienes pensado hacer campañas de anuncios de Facebook, porque Facebook va a ir recopilando toda esa información gratuitamente.

Más adelante, cuando quieras hacer un anuncio, tú ya vas a tener la información que has recogido. Sin embargo, si esperas a implementar el pixel de Facebook cuando vayas a querer crear campañas de anuncios en Facebook, vas a tener que esperar unas cuantas semanas, dependiendo del tráfico que tengas a tu web, para que Facebook recopile información sobre el comportamiento de los usuarios en tu web.

Por eso nosotros recomendamos, desde incluso antes de empezar a crear tu sitio web, que implementes el pixel de Facebook.

Para el pixel de Faceboo,k es igual de sencillo que Google Analytics. Te vas al administrador de anuncios de Facebook o tecleas facebook.com/adsmanager.

Para ver tu pixel de Facebook, tienes que ir a estos 9 puntitos (“Herramientas empresariales”), haces clic y te vas a “Administrador de Eventos”, luego tienes que ir al botoncito verde con un +, “Conectar orígenes de datos”. En la siguiente ventanita le das a “Web”, “Empezar” y listo. Tienes que seguir unos pasos muy sencillos.

Añadir el píxel de Facebook en Webflow
Conectar Facebook con Webflow
Añadiendo el pixel a Webflow

Cuando termines, te va a dar una lista de números, la copias y la pegas en la parte de “Integrations” de Webflow.

Una vez que tengas tanto el ID de Google Analytics como el pixel de Facebook, guarda los cambios y ya está.

Esos son los primeros pasos que deberías dar con Webflow.

Una vez que has hecho estos pasos, ya puedes empezar a diseñar tu sitio web.

Quizá también te interese nuestro ebook gratuito de Estrategia Web.

Y quizá también te interese este Tutorial de Webflow en español.

Eso es lo divertido realmente.

¡Hasta la próxima, vikingos!

. . .

SIGUE APRENDIENDO CON NUESTROS CURSOS, GUÍAS Y TALLERES
Para seguir aprendiendo de emprendimiento online y marketing digital, en Tribu Olaf ponemos a tu disposición varias mega guías gratuitas sobre distintas temáticas, desde Facebook a SEO. También hay cursos y talleres de pago en caso de que quieras llevar tu negocio al siguiente nivel.
¡QUIERO APRENDER MÁS!

. . .