Tutorial Webflow para no developers: web profesional sin código

Webflow paso a paso para no devs: cuenta, designer, símbolos, CMS, formularios, hosting y conexión con Stripe/Calendly.

··11 min de lectura
Tutorial Webflow para no developers: web profesional sin código

Webflow te permite crear webs como las de las mejores marcas sin escribir código. Tiene curva, pero el resultado es 10x mejor que cualquier WordPress drag-and-drop.

01Cuenta y plan

  1. 01Webflow.com → cuenta gratis (2 sites).
  2. 02Empieza con template o blank.
  3. 03Site Plan necesario para publicar dominio propio (14$/mes).
  4. 04Workspace Plan si trabajas con equipo.

02Designer: las 4 zonas

  • Add panel: añadir elements y components.
  • Navigator: estructura del DOM.
  • Style panel: CSS visual.
  • Settings panel: interacciones, SEO.

03Construir tu primera section

  1. 01Add Section.
  2. 02Container dentro (limita ancho).
  3. 03Heading + Paragraph + Button.
  4. 04Style con classes (Webflow gestiona como CSS).
  5. 05Mobile preview: ajusta breakpoints.

04Símbolos (componentes reutilizables)

Convierte header, footer y secciones repetidas en Symbols. Editas en un sitio y cambia en todas las páginas. Equivalente a componentes en React.

05CMS para blog

  • Collections (equivalente a base de datos).
  • Fields: name, slug, body, image, author.
  • Template page automática por item.
  • Filter y sort en Collection Lists.

06Formularios y conexión

  • Form element nativo.
  • Webhook para enviar a Zapier/Make.
  • Integración Mailchimp/ConvertKit.
  • Stripe Checkout link via Button.
  • Calendly embed.

07Publicación y hosting

Webflow hosting es de los mejores del mundo (AWS + Fastly CDN). Domain → conecta tu dominio → Webflow gestiona SSL automático. Una vez publicado, web ultra rápida sin servidor que mantener.

JA
Autor

Javier Ávila

Consultor de negocios digitales. Ayuda a profesionales del conocimiento, consultores y formadores a captar clientes premium, vender servicios high-ticket y escalar sin perder margen ni libertad.

Ver perfil completo
Siguiente paso

¿Aplicamos esto a tu negocio?

Una conversación honesta sobre dónde estás y qué necesitas para llegar al siguiente nivel.

Reservar consultoría privada
Sigue leyendo

Otras guías que te interesan