¿Qué es Webflow? – Un tutorial de Webflow para principiantes absolutos

¿Quién no ha querido diseñar su propio y hermoso sitio web sin tener que codificar nada? Gracias a plataformas como WordPress,constructores de páginas, y con servicios de creación de sitios web como Wix y Weebly, esto ha sido posible durante un tiempo. En este tutorial de Webflow, conocerá una posibilidad más.

Los sitios generados con las opciones anteriores pueden ser un poco repetitivos. Por lo general, se pueden detectar a una milla de distancia.Flujo webes una herramienta en línea que promete acabar con eso.

Promete revolucionar la creación de sitios web, ya que te permite diseñar un sitio web empresarial atractivo y repleto de funciones sin necesidad de escribir una sola línea de código. Además, desde el alojamiento hasta la facturación de clientes, todo lo demás que necesitas también está en la aplicación.

Si está listo para aprovechar al máximo esta plataforma increíblemente poderosa, en este tutorial repasaremos todo lo relacionado con Webflow y lo llevaremos a un recorrido por el back end.

¿Qué es exactamente Webflow?

Webflow es una herramienta de diseño web y también unaPlataforma de alojamientoy CMS, todo en uno. Si bien probablemente esté familiarizado con todos ellos, por lo general son herramientas completamente independientes.

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, se centra más en el diseño y el alojamiento está incluido en el paquete.

En resumen, es lo mejor de ambos mundos. Todo lo que necesitas está aquí, en una sola plataforma. No es necesario que intentes juntar todas las funciones que necesitas en forma de complementos. Al usar Webflow, puedes evitar incluso tener que lidiar con el alojamiento de terceros.

Webflow está diseñado para pequeñas empresas, por lo que naturalmente viene con soporte para comercio electrónico.Crea una tienda onlineo cualquier otro tipo de sitio web con contenido dinámico gracias al CMS y la base de datos personalizable. O, si eres un profesional independiente o una agencia que crea sitios para otros, factura a los clientes sin tener que lidiar con aplicaciones externas complicadas.

Además, como diseñador web, Webflow no solo es adecuado para lanzar sitios web completos. También es una excelenteherramienta de creación de prototipospara ofrecer maquetas interactivas. Muestra tus ideas o exporta tu código y úsalo en cualquier lugar.

Siempre que el plan inicial se adapte a tus necesidades, puedes probar Webflow de forma gratuita. Por lo tanto, junto con todas estas fantásticas funciones, puedes empezar a usarlo sin tener que pagar nada.

¿Cuál es el truco?

Aquí no hay trampas. El plan gratuito es un poco limitado para incentivarte a que actualices tu versión, pero puedes seguir usándolo mientras disfrutes de las funciones de Webflow.

Sin pagar nada en absoluto, esto es lo que puedes hacer:

• Explora el Diseñador completo y utiliza todas las herramientas de creación de sitios web.
• Crea dos proyectos no alojados con dos páginas. (Si compras un plan de sitio, podrás publicarlo y agregar hasta 100 páginas).
• Publicar proyectos como prototipos en el subdominio de prueba de Webflow.
• Facturar a los clientes desde la aplicación Webflow.

Esto es genial si solo quieres jugar con el editor, crear un prototipo y mostrárselo a tu equipo en el sitio web de prueba. Pero si quieres ponerlo en marcha o desbloquear funciones como la creación de equipos o la exportación de código, tendrás que actualizar tu plan.

En ese caso, hay dos tipos dePlanes de Webflow:Planos de Sitio y Cuenta.

Los planes de sitio son básicamente para comprar alojamiento. Todos incluyen copias de seguridad, soporte de dominio personalizado y, por supuesto, alojamiento web ultrarrápido. Los niveles más altos desbloquean más visitas mensuales, soporte de base de datos CMS, búsqueda en el sitio y espacios adicionales para editores de contenido. También hay un conjunto independiente de planes de comercio electrónico que le permiten agregar más artículos a su tienda.

Por otro lado, los planes de cuenta mejoran las herramientas de diseño de back-end. Puedes usar el plan gratuito y comprar el alojamiento, pero los niveles superiores te permiten acceder a más proyectos, más páginas para tus sitios web de prueba, etiquetado blanco y transferencia de proyectos.

También existe un plan Team independiente para aquellos interesados ​​en las herramientas colaborativas de Webflow. Trabaje junto con su equipo en un panel compartido con proyectos ilimitados y todas las funciones de los planes de cuenta mejorados.

Explorando el Diseñador Webflow

Cuando abras Webflow por primera vez, verás una serie de tutoriales útiles y preguntas rápidas que te ayudarán a personalizar la experiencia. Solo tienes que elegir un color y un estilo y te guiaremos directamente.

Puede omitir el tutorial si está acostumbrado a este proceso, pero si no, le guiará a través de las distintas herramientas disponibles.Diseñadorse divide en partes pequeñas que controlan varios elementos de su sitio.

• Ellienzoes el vivo,Editor WYSIWYGEn el centro. Puedes hacer clic o arrastrar elementos para interactuar con ellos.
• ElAgregarEl panel (en la esquina superior izquierda) contiene varios elementos que puedes arrastrar y soltar en el lienzo. Cambia el diseño, inserta un bloque multimedia o agrega un formulario. Estos son literalmente los componentes básicos del Diseñador.
• ElEstiloEl panel (a la derecha) le permite editar y dar estilo a los elementos que coloca con elAgregarPanel. Por ejemplo, puede cambiar el aspecto de un cuadro de tipografía, luego guardar esa clase de estilo y reutilizarla más tarde.
• ElNavegador(a la izquierda debajo de laAgregarEl botón del panel es como una versión reducida de la vista previa en vivo, que muestra la estructura de los elementos en la página. Al igual que en el lienzo, puede arrastrar y soltar para reordenar cualquier elemento o hacer clic para que aparezcan las configuraciones en elEstilopanel.

También tome nota de otros iconos en la parte superior izquierda.PáginasEl panel te permite cambiar la página en la que estás o cambiar la configuración de SEO.Comercio electrónicopanel que puedesdiseñar una tienda. UsarActivospara cargar imágenes y documentos que puedes colocar directamente en tu proyecto.

Esos son todos los conceptos básicos que necesitas saber para comenzar, pero hay mucho más por explorar.

Buceando más profundo

Webflow es increíblemente complejo y abarca mucho más que lo que cubre el simple tutorial.

Para empezar, tome nota de lo siguiente:plantillasHay más de 100 temas gratuitos y premium para elegir. Solo recuerda que solo puedes seleccionar uno cuando comienzas un proyecto; no puedes cambiarlos como los temas de WordPress.

En elDiseñadorQuerrás explorar la barra superior para encontrar las vistas previas del dispositivo y aprender cómo agregarpuntos de interrupción responsivosTambién puedes exportar, compartir y publicar tu proyecto.

De vuelta a laAgregarPanel que permite colocar piezas de diseño, componentes, elementos multimedia y bloques de texto. Incluso hay diseños prediseñados. Pase 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; puede colocar un elemento exactamente donde lo desee en el lienzo o arrastrarlo hacia elNavegadoricono de la izquierda y colóquelo allí. O simplemente haga clic y se colocará automáticamente en la parte inferior de la página.

El siguiente es elEstiloPanel. Haga clic en cualquier elemento del lienzo oNavegadorpara que aparezca a la derecha. Básicamente, se trata de CSS decodificado; en lugar de tener que escribir código para dar estilo a elementos individuales, solo hay que apuntar y hacer clic. Hay cuatro pestañas en este panel.

• Estilo— Cambiar el espaciado, el tamaño, la posición y otras pequeñas características de estilo de cualquier elemento.
• Ajustes— Propiedades únicas para diferentes tipos de bloques; por ejemplo, puede cambiar a qué URL se vincula un botón.
• Administrador de estilo— Una lista de todas las clases y etiquetas personalizadas de su proyecto.
• Interacciones— Diseñe animaciones personalizadas para cualquier elemento del sitio.

Al principio, todo esto puede resultar abrumador, pero una vez que lo dominas, es muy fácil. Usa tu primer proyecto vacío para experimentar.

El CMS y el Editor

Otra parte importante de Webflow es laCMS, que te permite agregar contenido dinámico de cualquier tipo. Tu primera idea podría ser un blog, pero también admitecarterasy una gama infinita de otrostipos de contenido personalizados.

Si eres desarrollador, te encantará usar la API para hacer que tus aplicaciones sean aún más potentes.webhooksy funciones. O simplemente use Zapier para conectar su CMS a servicios de terceros como Twitter o Google Sheets. Codifique o no, aquí hay mucho poder.

En el panel de control, active el CMS haciendo clic en el ícono de pila a la izquierda.Crear una colección— Hay plantillas para ayudarte a comenzar si no estás seguro por dónde empezar. Llénalo con elementos y colócalo en tu sitio web usando elLista de coleccioneselemento en elAgregarpanel.

ElEditores otra característica útil que elimina por completo la complicada edición del back-end. Cuando todo lo que desea hacer es editar el contenido de su sitio en lugar de complicarse conDiseño weby estilo, no necesitas molestarte en iniciar sesión enDiseñador. Simplemente abre elEditorpara obtener una vista previa en vivo de exactamente cómo se verá su contenido.

Puede acceder a él visitando su sitio en vivo y haciendo clic en elEditar sitioBotón 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 laDel diseñadorAjustes. Pase el cursor sobre cualquier elemento que desee editar y haga clic en el icono que aparece. A continuación, podrá cambiar el texto, reemplazar imágenes o editar los enlaces de los botones, entre muchas otras funciones.

La red de hospedaje

El alojamiento web es una molestia, notoriamente. Encontrar un proveedor que sea barato y confiable parece casi 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, necesitarás:configúrelo usted mismo en el servidoro busque un proveedor de alojamiento web que lo haga por usted. Si desea acceder a los archivos de su sitio, deberá utilizar FTP. Todo esto puede volverse muy complicado.

Con Webflow, todo está bajo control. El único servicio de terceros con el que tendrás que lidiar es el de los registradores de dominios, e incluso eso lo puedes hacer desde la aplicación.

El alojamiento está a cargo de Amazon Web Services y Fastly para máxima velocidad y confiabilidad. Incluso obtienes una CDN gratuita, unCertificado SSLy copias de seguridad integradas. Si bien hay un límite de visitantes mensual, los servidores escalan bien bajo carga y pueden manejar una gran afluencia de personas.

Con todas estas funciones de diseño web incluidas, no podría pedir un hosting mejor administrado. Inicie su sitio en la red de Webflow y tendrá estabilidad y velocidad garantizadas para su sitio.negocio en crecimiento.

Recursos integrados

Webflow tiene muchísimos recursos para ofrecer. Si alguna vez te quedas atascado y necesitas ayuda, o simplemente buscas un poco de inspiración adicional, hay muchísimo contenido para explorar.

El mejor lugar para empezar esUniversidad Webflow, una serie de tutoriales en video y texto que repasan todos los aspectos de la plataforma. Desde un curso intensivo para principiantes hasta detalles sobre cómo usar un panel determinado en el editor, tiene todo lo que necesita saber.

Tenga en cuenta que también puede acceder a estos videos desde dentro delDiseñador, encontrando elTutoriales en vídeoEn la esquina inferior izquierda.

También está elEscaparate, una colección de sitios web creados en Webflow y respaldados por otros. Algunos de estos proyectos sonclonable, para que puedas copiarlos y usarlos como plantillas, o tomar prestados elementos individuales para tus propios proyectos.

Interesado enUnirse a la comunidad? Suscríbete para ingresar a grupos, asistir a eventos en línea y fuera de línea o conectarte con otros a través de las redes sociales. También puedes participar en elForos de Webflowpara obtener ayuda y ayudar a otros.

Por último, eche un vistazoBlog de Webflowo echa un vistazo a algunos de suslibros electrónicos de diseño webSi necesitas material de lectura adicional.

Un tutorial sobre cómo hacerloTome el control de su diseño webcon Webflow

Nunca es fácil encontrar una plataforma que te permita crear excelentes sitios web personalizados sin código. O son difíciles de configurar y tienen una interfaz de usuario increíblemente confusa, o son fáciles de usar pero apenas permiten personalización.

Contratación de un desarrollador webEra casi necesario para llegar a alguna parte, al menos si querías un sitio web que no pareciera una copia al carbón de todos los demás pequeños negocios emergentes.

Webflow es la solución a ese problema de larga data. No solo es intuitivo, potente a pesar de ser fácil de usar y se encarga de la parte de alojamiento por ti, sino que también es ampliamente personalizable. Una vez que te familiarices con el editor, pronto estarás diseñando sitios web comerciales con una precisión de píxeles perfecta.

Comenzar a usar Weblfow es gratuito, así que dedique algún tiempo a explorar el Diseñador y vea lo que tiene para ofrecerle.

Después de probar Webflow, ¿qué otras características… ¿Qué te gustaría ver en la plataforma? ¡Cuéntanos qué te parece en los comentarios!