Tutorial Webflow – Crear una web NoCode

En este tutorial, vamos a ver como crear una web con Webflow gracias al no code. Repasaremos las diferencias con Carrd y veremos la posibilidad de utilizar plantillas predefinidas para crear nuestra web con Webflow mucho más rapido.

Tutorial Webflow – Qué es Webflow

Webflow es una herramienta online que nos permite crear webs sin código de manera rápida y consiguiendo un diseño muy profesional.

Permite la integración con diferentes herramienta gracias a sus widgets con tan solo arrastrar elementos. Algunas de las integraciones que podemos hacer con Webflow son:

• Almacenamiento de datos
• Analítica de tráfico web: Integración con Google Analytics.
• Formulario para captar leads

Diferencias entre Webflow y Carrd

Cuando hablamos de crear una web NoCode, sobre todo si es una landing básica porque necesitamos algo rápido podemos crear una web con Carrd.

Si por el contrario necesitamos crear una página compleja para nuestro proyecto y queremos hacerlo sin código, es mejor optar por Webflow.

A continuación, te dejo algunas de las diferencias o ventajas de Webflow frente a Carrd.

Sitio web multipágina

La principal diferencia es que Webflow te permite la creación de diferentes páginas dentro de un site asignando a cada una de estas su propia URL y ofreciendo la posibilidad de personalizar cada una de las páginas a nivel de SEO.

Mientras que Carrd, únicamente te permite crear páginas «one-page» y utiliza secciones y estilos para identificar las diferentes diferenciar zonas de la web.

Crear gestor de contenidos

Imagina que quieres crear sin código una web similar a Idealista, donde cada uno de los anuncios tiene la misma estructura. Por ejemplo, cada anuncio tendrá un título, una imagen, descripción y teléfono de contacto.

Bien, pues con Webflow, gracias a la herramienta CMS puedes crear tu propia estructura de contenido (Colecciones) con los campos deseados e ir contribuyendo elementos para mostrarlos posteriormente en tu web.

Importante: Para poder crear colecciones necesitas un plan de pago CMS. En la sección de Crear cuenta de usuario en Webflow te dejo un post donde conseguir un año gratis de Webflow.

Creación ecommerce

Si el otro día hablábamos sobre como crear un ecommerce en Carrd, con Webflow pudes hacerlo mucho más rápido gracias a que incorpora la generación de las colecciones necesarias y existen plantillas para mostrar dichos contenidos.

Crear web con Webflow

Ahora sí, a continuación vamos a comenzar con la parte principal de este tutorial de Webflow para crear nuestra web en cuestión de minutos y sin necesidad de programar.

Crear cuenta de usuario en Webflow

El primer paso es crear nuestra cuenta de usuario Webflow, y para ello, iremos a la página de inicio y pulsaremos en el botón «Get Started». Nos permitirá iniciar sesión con Google o bien creando una cuenta con nuestro correo electrónico de la forma tradicional.

Importante: Si eres estudiante, te dejo un post donde te enseño a conseguir un año gratis de Webflow

Dashboard de Webflow

Una vez hemos iniciado sesión, seremos redirigidos a nuestro Dashboard, que será el panel de control donde podremos visualizar los diferentes sitios que tenemos creados.

Sin entrar mucho en detalle, en la barra superior, además del dashboard encontramos un menú de navegación con las siguientes opciones:

• Made in Webflow: Nos mostrará proyectos que se han creado recientemente con Webflow y la posibilidad de encontrar plantillas similares para utilizarlo en nuestro sitio
• Designers: Mostará el perfil de diferentes diseñadores de plantillas webflow y la posibilidad de seguirlos para estar al tanto de sus proyectos
• Learn: Acceso a la documentación de Webflow y a todos los cursos disponibles.
• Resources: Otra serie de recursos como acceso a la comunidad, foros etc.

Fuera del menú de navegación, en la página principal nos encontramos dos secciones:

• All sites: Listado de nuestros sitios generados con webflow que nos permite buscar y ordenar por fecha de creación
• Tutorials: Que nos dará acceso a una serie de tutoriales básicos para aprender nuestros primeros pasos.

Crear nuevo sitio con Webflow

La primera vez que accedemos a nuestro dashboard nos ofrecerá la posibilidad de crear un nuevo sitio y nos listará una serie de plantillas que podremos utilizar como punto de partida.

En este punto tenemos dos opciones:

• Crear un sitio en blanco: Esta opción es más lenta, pero una persona que tenga conocimientos de diseño web le sacará mucho más partido.
• Utilizar una plantilla: Esta opción es mucho más rápida, y nos permitirá tener la web lista en cuestión de minutos.

Si queremos ver una plantilla pero no sabemos como va a quedar, podemos poner el cursor sobre la plantilla y nos mostrará un menú para poder previsualizar el resultado.

Nota: Para es tutorial, voy a seleccionar la plantilla «Business Starter» que es gratis y tiene una estructura sencilla.

Una vez que hemos seleccionado una plantilla, el siguiente paso es seleccionar como se llamará nuestra web.

Modificación de página en Webflow

En este post no quiero ahondar sobre el uso de los paneles de control de Webflow, si no en algo más rápido. Por ello, dejo en tus manos la modificación a tu gusto.

Tan solo debes saber que haciendo click en cualquier elemento de la página, te permitirá modificar tanto el contenido como la mayoría de atributos básicos de CSS que además se desplegarán en el menú lateral de la derecha.

Publicar sitio web

Por último, y cumpliendo con el objetivo de este tutorial de Webflow vamos a ver como podemos publicar nuestra web.

Para publicar el sitio, tan solo tendremos que hacer click en el botón «Publish» que encontraremos en la parte superior de nuestra página y se nos desplegará el menú de opciones:

• Publicar en dominio Webflow: En esta opción Webflow te asigna una URL en función del nombre del sitio elegido.
• Publicar en dominio custom: Esta opción requiere de cuenta PRO.

Una vez pulsemos el botón «Publish to Select Domains» empezará el proceso de publicación, si todo va correctamente nos mostrará un mensaje de confirmación y un botón para ver nuestra web en una nueva pestaña

Una vez hemos publicado nuestro sitio, tan solo tendremos que pulsar el botón que nos ofrece para navegar en nuestra web y seremos redirigidos a la URL que nos ha asignado Webflow.

Plantillas web gratis para webflow

En este tutorial hemos visto como Webflow nos ofrece algunas plantillas por defecto para nuestra web, pero si queremos darle más colorido y no queremos gastar dinero, existe un repositorio de Webflow donde los diseñadores suben algunas plantillas gratis:

https://webflow.com/templates/free-website-templates

Conclusiones

Como puedes ver, hemos creado una web con Webflow en cuestión de minutos totalmente gratis y sin programar. Estas herramientas abren muchas posibilidades a perfiles que no son técnicos y necesitan una ventana online para sus negocios.

Si te ha gustado Webflow, te dejo un artículo sobre ¿Qué es Softr? Una alternativa bastante potente para crear tus web no code que cuenta con otras ventajas.