¿Quién no ha querido diseñar su propia web sin tener que programar? Gracias a plataformas como WordPress, creadores de páginas y servicios de creación de sitios web como Wix y Weebly, esto ha sido posible por un tiempo. En este tutorial de Webflow, conocerás una posibilidad más.
Las webs hechas con las opciones anteriores pueden ser un poco repetitivas. Por lo general, puedes verlos desde lejos. Webflow es una herramienta en línea que promete acabar con eso.
Promete revolucionar la creación de sitios web, permitiéndote diseñar un sitio web empresarial magnífico y con todas las funciones sin necesidad de escribir una sola línea de código. Además, desde el alojamiento hasta la facturación del cliente, todo lo demás que necesitas también está directamente en la aplicación.
Si estás listo para aprovechar al máximo esta plataforma increíblemente poderosa, en este tutorial repasaremos todo lo relacionado con Webflow y te llevare en un recorrido por el back-end.
¿Qué es exactamente Webflow?
Webflow es una herramienta de diseño web, así como una plataforma de alojamiento y CMS, todo en uno. Si bien probablemente estés familiarizado con todos estos, generalmente son herramientas completamente separadas.
Webflow es similar a WordPress en el sentido de que ofrece herramientas de gestión de contenido y creación de sitios web. Sin embargo, viene con un mayor enfoque en el diseño y el alojamiento incluidos.
En resumen, es lo mejor de todos los mundos. Todo lo que necesitas está aquí en una plataforma. No es necesario intentar improvisar todas las funciones que necesitas en forma de plugins. Al utilizar Webflow, puedes evitar incluso tener que lidiar con el alojamiento de terceros.
Webflow está diseñado para pequeñas y medianas empresas, por lo que, naturalmente, viene con soporte de comercio electrónico. Construye una tienda online o cualquier otro tipo de sitio web con contenido dinámico gracias al CMS y base de datos personalizable. O, si eres un freelance o una agencia que crea webs para otros, factura a los clientes sin tener que lidiar con aplicaciones externas.
Además, como diseñador web, Webflow no solo es adecuado para lanzar sitios web completos. También es una gran herramienta de creación de prototipos para entregar maquetas interactivas. Muestra ideas o exporta tu código y utilícalo en cualquier lugar.
Siempre que tu plan se adapte a tus necesidades, Webflow es gratis. Entonces, junto con todas estas excelentes funciones, puedes comenzar a usarlo sin tener que pagar nada.
¿Cuál es el truco?
No hay «trampas» aquí. El plan gratuito está un poco limitado para animarte a actualizar, pero puedes seguir usándolo mientras disfrutes de las funciones de Webflow.
Sin pagar nada en absoluto, esto es lo que puedes hacer:
- Explorar el Diseñador con todas las funciones y utilizar todas las herramientas de creación de sitios web.
- Crear dos proyectos no alojados con dos páginas. (Si compras un plan de sitio, podrás publicarlo y agregar hasta 100 páginas).
- Publica proyectos como prototipos en el subdominio de Webflow.
- Factura a los clientes desde la aplicación Webflow.
Esto es genial si solo quieres jugar con el editor, hacer un prototipo y mostrárselo a tu equipo en el sitio web. Pero si deseas comenzar a funcionar o desbloquear funciones como la creación de equipos o la exportación de código, deberás actualizar.
En ese caso, hay dos tipos de planes de Webflow: planes de sitio y de cuenta.
Los planes del sitio son esencialmente para la compra de alojamiento. Cada uno incluye copias de seguridad, soporte de dominio personalizado y, por supuesto, alojamiento web súper rápido. Los niveles más altos desbloquean más visitas mensuales, soporte de base de datos CMS, búsqueda de sitios y espacios adicionales para editores de contenido. También hay un conjunto separado de planes de comercio electrónico que te permiten agregar más artículos a tu tienda.
Los planes de cuenta, por otro lado, mejoran las herramientas de diseño back-end. Puedes usar el plan gratuito y comprar alojamiento, pero los niveles más altos te brindan más proyectos, más páginas para tus sitios web de prueba, marca blanca y transferencia de proyectos.
También hay un plan de equipo separado para aquellos interesados en las herramientas colaborativas de Webflow. Trabaja junto a tu equipo en un panel compartido con proyectos ilimitados y todas las funciones de los planes de cuenta actualizados.
[optin-cat id=380]
Explorando el diseñador de Webflow
Cuando abras Webflow por primera vez, pasarás por una serie de útiles tutoriales y preguntas rápidas que te ayudarán a adaptar la experiencia a tus necesidades.
Puedes omitir el tutorial si estás acostumbrado a este proceso, pero si no, te guiará a través de las diversas herramientas disponibles. El diseñador se divide en pequeñas piezas que controlan varios elementos de tu sitio.
- El lienzo es el editor WYSIWYG en vivo en el centro. Puedes hacer clic o arrastrar elementos para interactuar con ellos.
- El panel Agregar (en la esquina superior izquierda) contiene varios elementos que puedes arrastrar y soltar en el lienzo. Cambia el diseño, inserta un bloque de medios o agrega un formulario. Estos son literalmente los componentes básicos del Diseñador.
- El panel Estilo (a la derecha) te permite editar y aplicar estilo a los elementos que ingresas con el panel Agregar. Por ejemplo, puedes cambiar el aspecto de un cuadro de tipografía, luego guardar esa clase de estilo y reutilizarla más tarde.
- El navegador (a la izquierda, debajo del botón Agregar panel) es como una versión reducida de la vista previa en vivo, que muestra la estructura de los elementos de la página. Al igual que en el lienzo, puedes arrastrar y soltar para reordenar cualquier cosa, o hacer clic para que aparezca la configuración en el panel Estilo .
También toma nota de otros íconos en la parte superior izquierda. El panel Páginas te permite cambiar la página en la que te encuentra o cambiar tu configuración de SEO. En el panel de comercio electrónico puedes diseñar una tienda. Usa Activos para cargar imágenes y documentos que puedes colocar directamente en tu proyecto.
Eso es todo lo básico que necesitas saber para comenzar, pero hay mucho más por explorar.
Bucear más profundo
Webflow es increíblemente complejo y hay mucho más que los simples tutoriales.
Para comenzar, toma nota de las plantillas: hay más de 100 gratuitas y premium para elegir. Solo puedes seleccionar uno cuando inicias un proyecto; no puedes intercambiarlos como los temas de WordPress.
En Designer, explora la barra superior para encontrar las vistas previas del dispositivo y aprender cómo agregar puntos de interrupción receptivos. También puedes exportar, compartir y publicar tu proyecto.
De vuelta al panel Agregar, te permite colocar piezas de diseño, componentes, elementos multimedia y bloques de texto. Incluso hay diseños prediseñados. Coloca el cursor sobre cualquier pieza y aparecerá un signo de interrogación que explica lo que hace.
Este es el panel más fácil de usar; puedes colocar un elemento exactamente donde quieras en el lienzo o arrastrarlo hasta el icono del navegador a la izquierda y colocarlo allí. O simplemente haz clic y automáticamente irá al final de la página.
El siguiente es el panel Estilo . Haza clic en cualquier elemento del lienzo o del navegador para que aparezca a la derecha. Esto es esencialmente CSS decodificado; en lugar de tener que escribir código para diseñar elementos individuales, simplemente apunte y haga clic. Hay cuatro pestañas en este panel.
- Estilo : cambia el espaciado, el tamaño, la posición y otras pequeñas características de estilo de cualquier elemento.
- Configuración : propiedades únicas para diferentes tipos de bloques; por ejemplo, puedes cambiar la URL a la que se vincula un botón.
- Administrador de estilos : una lista de todas las clases y etiquetas personalizadas de tu proyecto.
- Interacciones : diseña animaciones personalizadas para cualquier elemento del sitio.
Inicialmente, todo esto puede parecer abrumador, pero es muy sencillo una vez que lo dominas. Utiliza tu primer proyecto vacío para experimentar.
El CMS y el editor
Otra parte importante de Webflow es el CMS , que te permite agregar contenido dinámico de cualquier tipo. Tu primer pensamiento podría ser un blog, pero también admite portfolios y una gama infinita de otros tipos de contenido personalizado.
Si eres un desarrollador, te encantará usar la API para crear webhooks y funciones aún más potentes. O simplemente usa Zapier para conectar tu CMS a servicios de terceros como Twitter o Google Sheets. Programando o no, aquí hay mucho poder.
En el tablero, activa el CMS haciendo clic en el ícono de la izquierda. Crea una colección: hay plantillas para comenzar si no estás seguro de por dónde comenzar, llénala con elementos y colócala en tu sitio web utilizando el elemento Lista de colecciones en el panel Agregar .
El Editor es otra característica útil que elimina por completo la complicada edición de back-end. Cuando todo lo que quieres hacer es editar el contenido de tu sitio en lugar de meterse con el diseño y el estilo web, no necesitas molestarte en iniciar sesión en el Diseñador. Simplemente abra el Editor para obtener una vista previa en vivo de cómo se verá tu contenido.
Puedes acceder a él visitando tu sitio en vivo y haciendo clic en el botón Editar sitio que aparece en la esquina inferior derecha. Asegúrate de haber iniciado sesión y de tener habilitadas las cookies de terceros.
Aparecerá una mini barra de herramientas en la parte inferior, emulando la configuración del Diseñador. Coloca el cursor sobre lo que quieras editar y haz clic en el ícono que aparece. Luego, puedes cambiar el texto, reemplazar imágenes o editar enlaces de botones, entre muchas otras funciones.
La red de alojamiento
Lidiar con el alojamiento web es un dolor. Encontrar un host que sea barato y confiable parece prácticamente imposible. Pero una de las mejores cosas de Webflow es que viene con el alojamiento integrado. Puedes exportar tu código e intentar encontrar un servicio de alojamiento que coincida con este, o puedes mantener todo en un solo lugar.
Cuando utilizas una plataforma como WordPress, deberás configurarla tu mismo en el servidor o encontrar un proveedor de alojamiento web que lo haga por ti. Si deseas acceder a los archivos de tu sitio, deberás utilizar FTP. Todo esto puede complicarse mucho.
Con Webflow, todo está arreglado. El único servicio de terceros con el que debes tratar son los registradores de dominio, e incluso eso puedes hacerlo desde la aplicación.
El alojamiento funciona con Amazon Web Services y Fastly para obtener la máxima velocidad y confiabilidad. Incluso obtiene un CDN gratuito, un certificado SSL y copias de seguridad integradas. Si bien hay un límite de visitantes mensual, los servidores escalan bien y pueden manejar una gran afluencia de personas.
Con todas estas características de diseño web incluidas, no podrías pedir un alojamiento mejor administrado. Inicia en Webflow y tendrás garantizada la estabilidad y la velocidad para tu negocio en crecimiento .
Recursos integrados
Webflow tiene muchos recursos que ofrecer. Si alguna vez estás atascado y necesitas ayuda, o simplemente estás buscando un poco de inspiración adicional, hay mucho contenido para explorar.
El mejor lugar para comenzar es Webflow University, una serie de tutoriales en video y en texto que repasan todos los aspectos de la plataforma. Desde darle un curso intensivo para principiantes hasta detallar cómo usar un determinado panel en el editor, tiene todo lo que necesitas saber.
Ten en cuenta que también puedes acceder a estos videos desde el Diseñador, buscando los Tutoriales en video en la esquina inferior izquierda.
También está el Showcase, una colección de sitios web creados en Webflow y respaldados por otros. Algunos de estos proyectos se pueden clonar, por lo que puedes copiarlos y usarlos como plantillas, o tomar prestados elementos individuales para tus propios proyectos.
¿Interesado en unirse a la comunidad? Suscríbete para ingresar a grupos, asistir a eventos online y ofline, o conectarte con otros a través de las redes sociales. También puedes participar en los foros de Webflow para obtener ayuda y ayudar a otros.
Por último, echa un vistazo al blog de Webflow o consulta algunos de sus libros electrónicos de diseño web si necesitas material de lectura adicional.
Un tutorial sobre cómo tomar el control de tu web con Webflow
Nunca es fácil encontrar una plataforma que te permita crear excelentes sitios web personalizados sin código. Son difíciles de configurar y tienen una interfaz de usuario increíblemente confusa, o fáciles de usar, apenas permiten ninguna personalización.
Contratar a un diseñador web era casi necesario para llegar a cualquier parte, al menos si querías una Web que no pareciera una copia de todas las otras pequeñas empresas.
Webflow es la solución a ese problema. No solo es intuitivo, poderoso a pesar de ser fácil de usar y maneja la parte de alojamiento por ti, también es ampliamente personalizable. Una vez que domines el editor, pronto estarás diseñando sitios web comerciales con una precisión de píxeles perfecta.
Weblfow es gratis para comenzar, así que dedica un tiempo a explorar el Diseñador y ve lo que tiene para ofrecerte.
Es cierto que crear una web con Webflow puede ser desafiante y confuso, pero para eso estamos, para ayudar. Contacta hoy para programar tu sesión de estrategia y dejar que comience la lluvia de ideas.
