Fundamentos del flujo web: cómo construir una página de destino

1. Introducción: Todos, y bienvenidos a Webflow Foundations. Este curso está pensado como una introducción a Webflow, y te proporcionaremos todas las habilidades necesarias que necesitas para comenzar en la plataforma El sitio web que vamos a estar construyendo en este curso es de Tesla inspira landing page Es sólo una sola página. En esa página, vamos a cubrir todos los elementos esenciales de Webflow Al final de este curso, debes entender la plataforma con mucha más profundidad. Vamos a hablar sobre la plataforma Webflow y cómo funciona realmente Vamos a ver cómo construir tu propio g rancio, estás en secciones personalizadas, tienes tus propios diseños dred, acechando tu sitio web para asegurarte de que es exactamente como quieres que se vea y asegurando que tu sitio web sea receptivo en todos Cuando combinamos todas estas habilidades juntas, el producto final debe ser una landing page bien diseñada. Y al final de este curso, deberías poder seguir ampliando tus habilidades de Webflow y construir un sitio web completo y completo con Tas blancas en este curso Así que estoy súper emocionada de saltar a este curso contigo. Entonces con eso dicho, comencemos. 2. Cómo crear tu página de destino: El proyecto para este curso es realmente sencillo. Todo lo que tienes que hacer es seguir junto con todos los pasos por los que voy a estar pasando en este curso. Al final de la misma, deberías tener una página algo así, que está inspirada en Tesla. Ahora, las imágenes se pueden descargar en los archivos del proyecto de este curso. Pero también si quieres construir tu propia página con tu propio tema, eso sigue una capa similar en estructura, eso también está bien. Esto es totalmente abierto. El objetivo de esto es solo familiarizarte con Webflow y ponerte más cómodo con la plataforma Independientemente de lo que acabes aquí, sigue siendo progreso. Sea lo que sea que hagas, termina saciando, por favor compártelo en el panel de discusión para que todos puedan aprender de lo que has construido, y realmente podamos impulsar esto Tengo muchas ganas de comenzar con esto. Si tiene alguna pregunta sobre el proyecto o alguna pregunta sobre webflow, por favor comente el curso, y me pondré en contacto con usted lo antes posible o alguna pregunta sobre webflow, por favor comente el curso, y me pondré en contacto con usted lo antes posible. Vamos a saltar a. 3. Lección 2 Diseño antes del desarrollo: Bien. Antes de que realmente saltemos a la flote web y empecemos a construir nuestra landing page había algo realmente importante que quería discutir primero Se trata de wireframing y diseño y cómo eso es diferente del desarrollo y cómo el diseño de marcos de alambre siempre debe venir Porque este es un error que se comete muy fácilmente, y puede que ni siquiera te des cuenta de que es un error para después, pero puede ser bastante costoso en términos de tiempo. Y en mi opinión, de todos modos, porque esto es algo que hice incorrectamente al inicio. Cuando comencé a usar Webflow, solía hacer todo lo que estaba dentro de los flujos web Solía hacer todo mi diseño ahí y mi desarrollo ahí. Sólo estás haciendo una. Al principio, piensas que puedes. Realmente no ves la diferencia. Realmente no entiendes esa diferencia entre diseño y desarrollo. Y creo que esta diferencia sería mucho más frecuente si lo estuvieras si no tuvieras flujo web y estuvieras obligado a codificar tus proyectos, si estuvieras construyendo un nuevo sitio web y tuvieras que escribir el código desde cero. Esto sería mucho más obvio porque es muy difícil para mayoría de la gente escribir código desde cero para un nuevo sitio web y hacer el diseño cuando están haciendo eso. Esa es una muy dura. Pero si tienes una plataforma como Webflow frame, etcétera, es muy fácil entrar ahí y pensar que puedes simplemente hacer todo tu diseño de estructura de alambre y desarrollo, solo hazlo todo Pero esto es un error. Lo que en realidad es un proceso mucho mejor a seguir. Es entrar a FM o crear una cuenta con Figma como tengo aquí Si no has oído hablar de Figma en un futuro cercano, voy a estar creando un curso completo sobre Figma y diseño y todo lo que necesitas saber al respecto, será completamente amigable para principiantes si eres completamente nuevo en él si eres completamente nuevo Pero solo como nota al margen por ahora en este curso, te animo mucho a que entres y experimentes con esta plataforma. Puedes seguirme conmigo mientras hago esto. Puede que no necesites hacer esto para este proyecto en particular, pero definitivamente voy a acostumbrarlo y definitivamente lo recomendaría. Entonces aquí, tengo este curso aquí y solo voy a este curso aquí llamado Skillshare assets del curso Este es para el curso que estamos haciendo ahora, obviamente. No he puesto mucho en esto, pero te voy a mostrar lo que tengo dentro. Los que realmente quería llamar su atención sobre algunos de los proyectos que he hecho en el pasado. Tengo uno para déjame ver. Estoy tratando de pensar en una buena que pueda mostrarle. Probablemente uno te pueda mostrar que no es trabajo de cliente, eso sería Vamos a ir con este. Entonces A sin tomar demasiado tiempo lejos del verdadero foco está aquí. Abi es una empresa de software. He estado diseñando el back end de mi software y el front-end del mismo en Figma por falta de más contexto Pero una cosa que tiendo a hacer es que solo intento diseñar todo en Figma primero Este es un elenco rudo de la landing page que puedes ver aquí. Y que en realidad terminé creando esta página, resultó un poco diferente. Puedes ver aquí que le faltan imágenes en ciertos espacios. Pero en su mayor parte, hice casi todo el diseño que necesitaba aquí. Y también para estas páginas aquí arriba. Ahora bien, esto es que nunca lo vas a conseguir perfecto cuando lo haces en Figma a menos que aquí tengas un ejemplo de más páginas que creo no es mi mejor trabajo, pero no está mal Pero el punto es que cuando estás trabajando en Figma, puedes enfocarte completamente en el diseño debido a la forma en que Figma ha diseñado su propia interfaz de usuario Porque no necesito preocuparme por bloqueos de muerte y clases, instrucción y todo eso. Yo solo puedo enfocarme en el diseño y en poner, estás creando comió que quiero crear. Y ese es el beneficio de ello. Entonces cuando estoy satisfecho, lo he diseñado todo en toda su extensión, entonces puedo entrar en Webflow y solo puedo ir todo lo que es enfocarme en copiar este diseño y recrearlo en Webflow, que es mucho, mucho más fácil que tener que hacer ambas Eso te lo estoy diciendo por experiencia. Bueno, eso fue ambu. Eso básicamente solo te da una idea de cómo me parece que sería el documento figma si eres diseñador en él, puedes llevarlo incluso más lejos que eso Soy bastante malo por no mantener todo organizado y mantener todo actualizado y eso es algo para mí que necesito seguir mejorando a medida que avanzo en mi propio viaje. Este de aquí para el curso solo tiene imágenes en él que vamos a estar usando en el sitio como ya se dijo, pero es solo un buen punto para tener en cuenta el diseño antes del desarrollo, y te animaría a que lo hagas en el futuro. Proyecto es posible que incluso quieras probarlo en este. Como dije, tengo un curso completo sobre Figma en un futuro próximo Bien. Y eso es todo. Pasemos a saltar realmente al flujo húmedo, construir esta landing page y realmente crear algo. Entonces hagámoslo. Bien. 4. Lección 1 Cómo entender el flujo de web con el usuario Int(1): Bien. Todo bien. Lo primero que vamos a estar viendo aquí es entender la interfaz de usuario de Webflow Creo que este es un lugar muy importante para comenzar porque te proporciona un contexto esencial sobre cómo funciona realmente Webflow y qué está haciendo detrás de escena cuando estás construyendo sobre él Porque Webflow es un poco diferente de algunas de las otras plataformas con las que compite Entonces, si estábamos viendo bicicletas o Schramerbflow hace lo mismo que ellas Todas estas plataformas hacen lo mismo. Todos están destinados a ayudarte a crear sitios web de manera más fácil, más rápida y con menos complicaciones, en realidad. Porque si puedes escribir código y eres bueno en ello, entonces eso es lo que harás y serás genial en él y lograrás las mismas cosas que lo que haríamos por no usar ninguna plataforma de código. Pero si no puedes codificar y no tienes tiempo para aprender a codificar, estas plataformas marcan una gran diferencia. Realmente llenan un vacío porque te proporcionan una interfaz de usuario más accesible que realmente solo te ayuda a obtener ayuda para lograr lo que estás tratando de lograr mucho más rápido. Pero Webflow es diferente en comparación con estas plataformas porque está más estrechamente alineado con el programa y los linajes que generalmente asociaríamos con la construcción Está más alineado con HTLCSS Javascript que lo que le gusta de X y Y lo que quiero decir con eso es que Cuando diseñas en We framer, te presentan un lienzo en blanco justo en Webflow, también te presentan un lienzo en blanco Pero en nosotros y en framer, cuando realmente tienes una pizarra en blanco, como un trozo de papel en blanco para escribir, puedes arrastrar y soltar elementos sobre ella y moverlos como mejor te parezca. En realidad no tienes que pensar tanto en esas cosas. En Webflow, sí hay que pensar esas cosas y hay que ser mucho más considerado con Lo mismo ocurre con las clases y solo la forma general que estás estructurado en todo el sitio. Estoy seguro de que es arrastrar y soltar, pero es arrastrar y soltar con restricciones. Pero esas limitaciones son en realidad mucho más útiles de lo que pensarías que son medida que profundizas en el proceso de desarrollo, y entiendes más de lo que realmente se trata esta plataforma. Bien. Entonces, para ayudar a esto, lo que quiero hacer aquí es platicar. Quiero darte una pequeña introducción a HTML, CSS y JavaScript. Entonces vamos a saltar al propio Webflow, y solo voy a hablarte a través la interfaz y dónde encajan estos lenguajes de programación y las diferentes partes de la plataforma donde Webflow realmente está tratando con estos lenguajes de programación Con HTML, CSS y JavaScript, no estoy tratando de darte una toma loca en profundidad aquí de cada uno de estos lenguajes porque cada uno de ellos por su cuenta son muy profundos y se vuelven muy complicados, muy rápido. Todo lo que trato de ayudarte a entender es lo que son y el propósito que cumplen. HTML o lenguaje de mercado hipertexto, básicamente deberías estar pensando en esto como el bloque de construcción de la web Ahora las dos metáforas que tengo aquí para intentar ayudarte a llevar ese hogar un poco mejor, deberías pensar en HTML como el marco de un auto o el marco de una casa, simplemente proporciona Para el marco de un auto, el marco no me dice nada sobre es el auto cómo se verá su interior, qué tan rápido irá, cómo se verá. No me da nada todo lo que sé por el marco del mismo es que es un auto, y es muy similar con HTML cuando se trata de sitios web. Si solo uso HTML sin estilo sin CSS, no javascript, no va a quedar muy bien. Y a continuación aquí, tengo un ejemplo de cómo sería un sitio web HTML básico. Este código de aquí, como puedes ver, no tienes que entender mucho de lo que está pasando aquí, pero básicamente todo lo que tenemos es un título, alguien texto y un par de enlaces. Así es como se ve esto en HTML, y no hay CSS en esto no hay estilo en esto, esto es solo HTL directo Y así es como se ve. Ahora bien, si tuviera un cliente o un cliente y diseñara un sitio web y se vea algo así, no vamos a estar muy contentos y ellos no van a estar muy contentos por ello porque esto no es lo que esperaríamos de un sitio web moderno. Esperamos que algo se estile correctamente para tener una marca que sea única para seguir los principios de diseño moderno, todo ese tipo de cosas. Esto no lo haría, pero esto es lo que quiero decir con ser el marco porque HTML proporciona la estructura si piensas solo tomar una página web individual, HTML proporcionaría la estructura de esa página entera para esta, me proporciona una estructura. Tengo una sección, tengo un título, tengo texto corporal y enlaces, y si quisiera agregar más contenidos a esta página, lo agregaría en HTML. Pero si quisiera agregar algún color de fondo, si quisiera cambiar las fuentes, si quisiera cambiar algo al respecto, lo haría con CSS. De igual manera, si quisiera agregar alguna interacción, Si quisiera que los pilares de enlace cambiaran cuando flotaba sobre ellos, usaría Java Script para hacer eso Si quisiera que cambiara el tamaño del texto cuando pasara el mouse, usaría JavaScript para eso Cualquier cosa que implique pequeñas animaciones o interacciones, eso es todo JavaScript que está haciendo eso. Pero de todos modos, eso te da un ejemplo de HTML. Sigamos adelante. Si vamos a pasar a CSS, CSS básicamente define cómo va a quedar nuestra página web y eso es lo que ya he mencionado. Se trata de diseño ahí es donde llevas el pincel a la página y lo haces exactamente como quieres hacerlo Colores, fuentes, tamaño y proporciones, capacidad de respuesta, cómo estos elementos cómo cambiarán los elementos HTML a medida que una página aumenta de tamaño o disminuye de tamaño Por ejemplo, a medida que se mueve del escritorio al móvil, ahí es donde entra en juego el CSS, y siguiendo la metáfora que usé antes CSS va a dictar cómo se ve tu casa. Eso es lo que lo lleva de un marco a otra casa. Lo mismo para un automóvil, el CSS en términos de diseño web es la diferencia entre el marco de un automóvil y un Tesla completamente construido. Es lo que hace que un sitio web sea un sitio web al final. Un ejemplo de CSS, este es un ejemplo muy básico y no necesariamente es un buen ejemplo, pero ilustra exactamente lo que es. El CSS aquí a la izquierda básicamente nos está diciendo que queremos que los colores de fondo cambien los colores de fondo de ambos elementos. Ahora bien, este código, como puedes ver, es HTML, y CSS se ha aplicado dentro del código HTML. Esto a menudo no sería el caso. Si tenías un proyecto real, tu CSS va a estar en un archivo diferente a tu HTML, y vas a importar tu CSS cuando lo necesites. Ahora, todo lo que estoy haciendo aquí es, solo estoy agregando los orzuelos CSS dentro los elementos HTML por conveniencia porque sé que no necesito un archivo separado para ello Para el primero para el H Bien. Es para la cabeza en un estilo. Estamos cambiando el fondo de eso a azul. Y para el párrafo, estamos cambiando ese tomate, como puedes ver aquí, y azul Dodger por el primero Y eso es puramente para ilustrar cómo se ve cuando estamos tratando de cambiar estos elementos y lo que realmente hace. Eso es todo lo que estamos tratando de mostrar aquí. Ahora bien, si tomamos lo que sabemos de HTML y CSS, y pasamos a Javascript. Si pensamos en un auto, JavaScript es como el motor de un auto. Se trata de movimiento. Se trata de interacción. Se trata de hacia dónde va el sitio web. Entonces JavaScript es un programa poderoso, y la línea se utiliza principalmente para agregar interactividad y comportamientos dinámicos a los sitios web Opera junto a HTML y CSS, donde HTML maneja la estructura del contenido web y CSS administra su apariencia. JavaScript da vida a los elementos estáticos, permitiéndoles responder a las acciones del usuario y realizar funciones complejas. Así que JavaScript puede complicarse muy rápidamente y puedes hacer muchísimo con él. En el nivel muy básico, ahí es donde te agregas interacciones para pasar el cursor sobre los botones o si quieres que un botón haga algo cuando haces clic en él, um si quieres tener una presentación de diapositivas en tu sitio web y quieres un botón para activar eso todo eso es Javascript. Pero Javascript puede ir mucho más allá que eso. Pero en serio, es el motor de un sitio web. Si quieres que tu sitio web haga cosas, JavaScript va a hacer que eso suceda. Un ejemplo, Y de nuevo, debería decir un ejemplo muy básico de JavaScript es lo que tengo aquí. Nuevamente, tenemos código HTML a la izquierda y tenemos la salida de eso a la derecha. Todo lo que sucede en esta interacción es que cuando alguien hace clic en ese botón que dice, haga clic en mí, aparecerá una notificación diciendo hola mundo, y este es el código que lo hace. No sería posible crear nada como esto sin JavaScript. Cuando esté bien. Si alguna interacción como esta, algo como esto involucra script Java. Y te voy a mostrar exactamente dónde entra en juego esto en Webflow, porque no se ve así Ya sabes, en Webflow, no vas a tener que escribir ningún código No vas a tener que preocuparte por nada de eso. Pero sí ayuda entender que esto es lo que tendrías que hacer si estuvieras diseñando esto si estás escribiendo código desde cero, tendrías que estar escribiendo tu propio script Java, tendrías que estar ideando estas funciones tú mismo. Puede ser, aquí mismo. Esta es la función JavaScript aquí mismo en verde, tendrías que estar escribiendo tus propias funciones y creándolas desde cero básicamente. Entonces creo que lo mencioné al principio pero la mayoría de los sitios web en Internet están construidos usando una combinación de CSS HML JavaScript, creo que el porcentaje exacto de eso es 94% de todos los sitios web en Internet, que son una combinación de estos tres idiomas. Y el punto es que E incluso cuando usas una plataforma como Webflow, tu sitio web sigue siendo publicado en estos lineamientos Un Webflow hace es que te proporciona una interfaz en tu sitio web, y luego se traduce un lenguaje que No es como si el sitio web se publicara de manera Webflow como si Webflow tuviera una forma especial de hacerlo Todas estas plataformas, todas estas plataformas locales hacen lo mismo. Toman tu diseño. El convertirlo en un código que Internet pueda entender y lo publiquen. Mflows no es diferente en ese sentido, pero la forma en que lo hace es mejor que la mayoría Entonces lo que voy a hacer ahora es que vamos a saltar de aquí y voy a entrar en webflow y de hecho echar un vistazo a la plataforma y ver qué está pasando Me voy a mudar aquí, y luego así que este es un sitio web para mi startup llamado ambo. Esto no es para promocionar ambos solo este es el sitio web en el que he elegido demostrar. Pero esta página en sí está destinada a ser bastante directa y simple y la página de tierra que vamos a diseñar también va a ser la misma. Vamos a centrarnos en la simplicidad y solo crear algo que esté bien diseñado, pero enfocándonos en la interfaz de usuario. Hay un par de áreas clave que quiero discutir aquí y todas ellas se relacionan con todo lo que acabamos de hablar anteriormente. Porque no quiero complicar demasiado esto. Solo quiero explicarte básicamente las áreas clave que más usarás cuando diseñes con Webflow y por qué son importantes En pocas palabras, esta primera pestaña aquí es la pestaña de tus páginas. Ahí es donde crearás y agregarás nuevas páginas y administrarás las páginas que tienes. Estas son tus colecciones CMS. No vamos a meternos en eso ahora, pero llegaremos a eso en otro momento. El segundo es en algún lugar donde pasarás mucho tiempo. Esta es la estructura de tu página, y de esto es de lo que estaba hablando cuando se trata de HTML. Para mí cuando miro esto, esto representa una estructura HTML para mí. Esta es la estructura de su sitio. Por cada sitio web, tiendo a clasificar todo con sección estándar, contenedor estándar a menos que tenga algo único que esté haciendo. Pero como puedes ver aquí para esta sección superior, he llamado a esta sección de héroe un contenedor de héroe y luego le he puesto una envoltura alrededor y luego todo mi contenido está en eso. Entonces he diseñado cada uno de estos puntos muertos básicamente en el lado derecho, que es a lo que voy a meterme a continuación. Entonces, si quiero agregar elementos a la página, los agrego con el botón más, y así si quiero agregar un deck puedo arrastrarlo, pero no es que pueda simplemente arrastrar o arrastrar el texto y ponerlo lo que quiera. Tengo que estilizar en consecuencia, usando los principios adecuados de HTML y CSS. Yo sólo voy a borrar eso por ahora. Si vuelvo aquí, si quisiera editar este encabezado, lo haría en el lado derecho, en el lado derecho, esto es lo que considero que son todas tus ediciones CSS Cuando pensamos en CSS y estilo, todo sucede en este lado derecho. A menudo pienso en ello en el lado izquierdo, aquí estoy tratando con HTML. Y luego en el lado derecho, estoy tratando con mi CSS. Ahora, eventualmente, no lo pensarás demasiado de esa manera, pero para empezar, ayuda mirarlo así. Siempre que quieras hacer ediciones al título o un botón o color o cualquier cosa lo haces en este lado derecho Pero luego, por último, cuando pensamos JavaScript, JavaScript es interacciones. En la parte inferior de esta columna de la derecha, verás que puedes agregar efectos. Ahora, Webflow agregó esto inicialmente como una forma más fácil de agregar interacciones que no son enormes y complejas y requieren mucho tiempo para construir Puedes tener animaciones para tu opacidad, contornos, sombras de caja, transformaciones TCD Todo eso puede pasar aquí. Pero si querías crear interacciones más sofisticadas, lo haces en las interacciones Parel Entonces esto puede ser animaciones para cuando las páginas son clic del mouse, mouse hover, si desplaza la página, los elementos IN se desplazan hacia la vista, todos esos serían considerados interacciones Javascript. Entonces con eso, espero haberte explicado y dado un poco más de contexto en la plataforma en su conjunto. Pero vamos a sumergirnos en esto mucho más profundo y puedes seguir todo el camino como yo. Esto solo tenía la intención de darte un poco más de introducción sobre cómo funciona la plataforma. Y y las poderosas tecnologías que lo están apuntalando. Pero vamos a meternos en todo esto y vamos a construir una gran landing page. Pasemos al siguiente video. 5. Lección 3 Cómo construir tu guía de estilo: Bien. Entonces ahora que hemos hablado un poco sobre la interfaz de usuario webfll, hemos hablado de la importancia del diseño antes del desarrollo, y te di una pequeña introducción a lo que es GM y por qué deberías usarlo Ahora lo que realmente vamos a hacer es seguir adelante y comenzar a construir esta landing page. Y si eres un principiante en esto, como se pretende este curso, recomiendo encarecidamente que solo sigas exactamente lo que estoy haciendo para familiarizarte con la plataforma y luego compartir tu proyecto al final, y puedo revisar. Te puedo dar algunos consejos sobre cómo mejorarlo. Pero en serio, el objetivo de este curso es solo para que te familiarices con la plataforma, y eso es lo que espero que podamos ahí es donde estoy tratando de llegar aquí. Entonces lo primero que vamos a hacer y lo primero que siempre recomendaría a cualquiera que haga. Cada vez que están construyendo un nuevo sitio web en Webflow es construir una puerta de estilo Ahora, es posible que ya sepas lo que es una puerta de estilo, si alguna vez has usado una para la marca. Básicamente solo te da una visión general de lo que es tu marca y las especificaciones de la misma, lo que debería seguir si alguna vez estás creando activos de diseño para una marca en particular. En Webflow, el uso de esto es ligeramente diferente. Se trata menos de demostrar la marca, pero hay una aplicación mucho más práctica para ello. Entonces, cuando creamos una puerta de estilo, elegimos una fuente o colores. Creamos botones, ahí es donde podemos darle estilo a nuestras granjas o bloques de texto enriquecido, básicamente, todo lo que vamos a usar consistentemente en todo el sitio, ahí es donde lo diseñaríamos cuando lo diseñamos en la guía de estilo, podemos reutilizar los elementos que creamos en cualquier otro lugar del sitio sin tener que recrearlos cada vez Webflow se trata de elementos reutilizables. Esa es una cosa clave que creo que si eres nuevo en esto, cuanto antes entiendas eso mejor porque Webflow puede ser muy, muy apretado si estás construyendo todo desde cero cada vez Lo que harás si haces eso, todo lo que harás es volar todas tus clases. Lo harás un poco más lento. Tu sitio será mucho más pesado de lo que necesita ser. Pero si estás enfocado en crear elementos reutilizables, tu sitio será mucho más liviano, será más rápido y te será mucho más fácil expandirte y construir sobre él. Entonces eso es lo que realmente me estoy metiendo aquí. Puedes ver aquí eso dentro del panel de control de flujo web. Lo que vamos a hacer es que he creado muchos pliegues aquí llamados sitios web de demostración. Sólo vamos a entrar en eso vamos a crear un nuevo sitio para comenzar desde un documento en blanco. Sólo voy a llamarlo sitio web Tesla Inspires Model three La otra cosa que quiero decir son las imágenes que voy a estar usando a través de este sitio. Los encontrarás enlazados a continuación en algún lugar para que descargues y puedes usarlos para seguirlos. No voy a estar usando muchas imágenes en esta primera página, pero en las lecciones que siguen, voy a estar. Vamos a solo y podemos empezar con esto. Genial. Entonces, cuando empiezas con un nuevo proyecto en WebP, siempre se te presentará un lienzo en blanco que se ve así Pero si vas a la pestaña Páginas aquí, por defecto, tendrás una página de inicio, una página de contraseña y una página 404. Esa es tu línea de base. Eso es con lo que empezarás. Lo que vamos a agregar aquí es que vamos a hacer clic en este botón, y vamos a agregar una página llamada Snail guys Bien. Y no necesitas preocuparte por nada más dentro de la oración de la página por ahora, pero solo vamos a seguir adelante y crear eso. Entonces, lo primero en lo que quiero que piensen aquí es volver a lo que estaba hablando con los diferentes lenguajes de programación y el diseño de cajas que usa la web. Técnicamente, sigue siendo un biller de arrastrar y soltar, pero requiere que lo hagas con el diseño de la caja Tiene un poco más de restricciones, pero son útiles, cuanto más te adentras en aprender sobre esta plataforma Cuando te enteres de esta plataforma, preferirías trabajar de esta manera, en mi opinión, de todos modos. Entonces lo primero que vamos a hacer es simplemente agregar una sección. Y esto aquí arriba en la esquina superior derecha, es donde vas a crear clases. Ahora, solo puedes tener clases de línea base, que son solo clases individuales donde escribo una cosa aquí, y esa es mi clase, o podemos tener clases combo, que es donde tenemos una clase base, que vas a verme crear aquí para nuestra cabeza ins. Y luego agregaremos otras clases además de eso para que podamos agregar venta individual y opciones a cada elemento. Entonces llegaremos a un poco más tarde. Pero lo primero que siempre haré cuando entre aquí. Acabo de crear una clase llamada sección básica. Entonces esta es solo una sección reutilizable que voy a usar voy a lo largo esta página y la mayoría de las otras páginas porque las secciones no necesitan tanto estilo por lo general. Entonces eso es lo primero que voy a hacer, y pondré el ancho a esto al 100%. Y no voy a añadir ningún relleno ni nada por el estilo, solo porque no hay necesidad real de hacerlo. Eso es lo primero. Entonces por aquí, se puede ver el valor de la sección. Ahora voy a agregar un bloque div. Ahora bien, quiero señalar una cosa aquí que creo que sería muy bueno que te acostumbras para contenedores. Intenta no usar Contenedor Webflos Estructura que te doy por hábilmente Siempre solo usa un punto muerto y luego estilízalo a la manera que quieras No hay diferencia entre ninguno de estos en cuanto a cómo va a funcionar tu sitio o la forma en que lo va a usar. Se usan de la misma manera. Contenedores Webflow versión de un punto muerto personalizado pero solo te da si lo necesitas parte del tiempo, aunque me parece que el contenedor es mucho más redundante que tal vez lo que pretenden ser. Siempre solo uso un punto muerto y lo estilizo como mejor me parezca. Eso es lo que recomendaría. He añadido un punto muerto aquí, y sólo vamos a llamar a este contenedor básico. Eso es lo primero. Dentro de eso, este es el último bloque que vamos a agregar antes de que realmente empecemos a agregar elementos. Sólo voy a llamar a este rapero. Porque vamos a poner el encabezado de la página. No tienes que hacer esto. Yo igual que la práctica. También es solo un buen lugar para comenzar realmente. Además entonces vamos a agregar nuestro primer encabezamiento aquí. Y vamos a añadir un párrafo. Todavía no vamos a darle estilo a estos. Vamos a volver a eso. Los estilizaremos más tarde porque todavía no tiene sentido acechar a ninguno de estos. Y luego si vamos al envoltorio Tao, vamos a hacer algunos cambios en el lado derecho. Vamos a poner el relleno para cada lado de este lo voy a poner como 60. De hecho podría cambiar voy a cambiar a 40 y luego te voy a mostrar lo que voy a hacer en un segundo. Entonces voy a cambiar la alineación del bloque paso para que todo el texto muestre que todo el texto está centrado. Entonces lo que vamos a hacer aquí es que vamos a cambiar a flex, y vamos a tener que bajarlo, y luego lo queremos en el centro. Queremos todo en el centro. Ahora, se puede ver que centró el encabezamiento, pero no lo ha hecho con el párrafo. Eso es porque necesitamos cambiar esto a nivel de párrafo, pero sólo vamos a dejar estos por ahora. Ahora en cuanto al ancho del envoltorio de título, voy a cambiar esto a un porcentaje, y voy a hacer este 60% porque me parece que dos sabios. Ahora bien, se puede ver sin embargo que ha tirado todo hacia el lado izquierdo, y aquí es donde tenemos que subir la jerarquía uno y tenemos que cambiarlo para asegurarnos de que el envoltorio de título esté centrado. Entonces iremos a contenedor básico. Y esto en realidad es algo que todos modos habría tenido la intención de hacer. Vamos a hacer ese flex, y vamos a asegurarnos de que ese sentido eso es todo, y vamos a asegurarnos de que va hacia abajo de manera vertical. Ahora volveremos a esto un poco más tarde, pero solo voy a poner en tu estilo que el texto de relleno pueda permanecer igual. Pero nada del estilo de esto no importa por ahora, vamos a volver a Entonces lo que vamos a hacer es que vamos a agregar otra sección. Vamos a poner otro bloque div dentro eso y otro dentro de ese. Ahora voy a mostrarte cómo se ven estos de este lado. Solo tenemos una sección con el dvlock luego otro diblock dentro de él, pero queremos hacer un look algo así Y a esto me refiero cuando hablamos de elementos reutilizables. Lo llevaremos un poco más adelante, pero ahora mismo solo nos estamos enfocando en lo básico. Ya hemos creado una sección básica clásica, envoltorio de título de contenedor básico. Por aquí para esta sección, vamos a llamar a esta sección básica básica. Entonces vamos a llamar a este contenedor básico. Y ya tenemos estos ahí y puedes ver que aplicará cualquier opción de estilo que hayamos hecho a estas clases por defecto. Entonces este último bloque, vamos a llamar a esto algo diferente. Voy a llamar a este envoltorio de encabezamientos. Porque aquí es donde van a estar los rubros. Entonces dentro del envoltorio de encabezamientos. Aquí es donde vamos a ver nuestros encabezamientos. Vamos a darles estilo. Vamos a aplicar las fuentes de colores correctos. Vamos a hacer que se vean exactamente como queremos que se vean y vamos a asegurarnos de que tengan un estilo apropiado en cada dispositivo Entonces lo primero es lo primero, agreguemos seis encabezados porque hay seis etiquetas de encabezado diferentes en HTML que son H uno, H dos, H, H cuatro, cinco, seis, y queremos que eso sea reflexivo en nuestra puerta de estilo Puede que no uses todos los encabezados H six, sino una buena práctica solo para tenerlos y saber que los has creado. Entonces eso es encabezar uno. Y luego para el envoltorio de encabezamientos, queremos cambiar el ancho de este al 100% Y eso es porque tengo los estilos de contenedor para ser Esencial la vesícula Simplemente sacará todo a menos que le diga al elemento hijo de eso, que tiene que ser el ancho completo de la página. Así que lo hemos hecho, y luego también voy a agregar cuatro Px a cada lado de esto para que se vea algo en proporción. Entonces vamos a duplicar estas seis veces. Vamos a llamar a este encabezado uno, rumbo dos, tres, o Cinco y seis. Derecha. Así que ahora en realidad podemos enfocarnos un poco en esto. Aquí es donde vamos a crear una clase combo. La primera clase que vamos a crear es sólo para un encabezado en sí mismo. Entonces vamos a agregar una clase a todos estos serán estilos, pero vamos a agregarla de todos modos. Vamos a agregar un encabezamiento aquí. Aquí, puedes ver cómo Webflow me lo recomendará porque sabe es uno que acabo de crear recientemente Palabras, queremos cambiar las propiedades, todos estos elementos van a tener en común. Entonces sabemos que la fuente es algo que todos van a tener en común, sabemos que el color es algo que todos van a tener en común. Lo único que no van a tener en común es el tamaño de ellos y la altura. Pero otro que tendrán en común es altura de línea solo para señalarlo. Pero vamos a pasar. Entonces vamos a cambiar la fuente de esto a ferrocarril. Ahora bien, si vamos a la tipografía por encima del lado derecho, y ya puedes ver solo porque los tengo sobre estos, puedes ver cómo cambian todos Pero el primero que queremos agregar es cuál es la fuente que quiero usar pero el ferrocarril no se muestra aquí. Entonces, si queremos agregar una fuente personalizada de Google a Webflow. Eso es muy fácil de hacer porque Webflow tiene todas las fuentes personalizadas construidas Pero si queremos agregar un fondo verdaderamente personalizado uno que descargamos o pero de un sitio web de terceros, en realidad tendríamos que subirlo. Así que vamos a presionar el botón agregar fuentes aquí arriba. Y nos llevará a la stence del sitio para Webflow. Y cuando se cargue, ya veremos. Entonces, para Google Fonts, puedo elegir una fuente de esta lista. Entonces voy a golpear ferrocarril. Sólo voy a revisar todos estos. A veces Webflow puede darte una patada para verificar todos estos Otras veces, no es problema. Pero solo estoy comprobando todos ellos solo porque quiero tener quiero tener un control total sobre la fuente que estoy usando. Entonces vamos a añadir eso. Y si tuvieras un fondo personalizado que quisieras agregar, lo harías aquí, subirías uno. Así que subirías subirías tus archivos. Generalmente, serían aquellos que serían TTF o archivos OTF De todas formas. Avanzando, hemos subido eso. Entonces volvamos al diseñador y veamos si ahora podemos acceder al ferrocarril o al menos ver si podemos usar eso en nuestro proyecto. Así que estamos de vuelta aquí y vamos a ir a Stairway. Entonces si voy a rumbo, ahí vamos. Se puede ver que el ferrocarril está ahí. Entonces esa es la fuente que vamos a usar. Ahora bien, el color para los fines de este curso, sólo voy a estar usando básicamente blanco y negro. No voy a estar haciendo nada que me apetezca con los esquemas de color, sobre todo porque las imágenes para la landing page van a hacer la mayor parte de la plática. Sería bastante redundante para mí intentar arrojar nuevos colores y solo quieren que sea bastante simple. Entonces quiero las fuentes quiero que los colores sean negros. Nunca realmente quieres usar negro para este, estoy usando un negro bastante pesado. Más pesado que el que proporciona Webflow por defecto. Pero si, siempre quieres mantenerte verdadero negro o a veces, verdadero blanco se usa a menudo verdadero negro, siempre me mantengo alejado de. He establecido el color para eso. Hemos puesto el frente. Lo último que queremos hacer es establecer la altura de la línea. Entonces en ppografía puedes ver aquí que tenemos altura. Ahora, una cosa que recomendaría con esto es Webflow lo pondremos en 44 px por defecto Yo recomendaría editar esto en lo que estamos haciendo ahora en nuestro nivel de clase base, y recomendaría cambiarlo a un porcentaje, y puedes ver que tira adentro. Y entonces recomendaría cambiarlo al 145% al 125% sería tu mínimo Yo recomendaría 145%. Y si sientes que realmente lo necesitas, podrías empujarlo al 165% Pero ese es el tipo de rango que hemos estado viendo en cuanto a la altura de sus cabezas y su texto de párrafo. Entonces vamos 145. Creo que ese es un buen lugar para nosotros. Por defecto, todos tus encabezados van a tener margen agregado Se ve que tengo 20 márgenes en la parte superior para este, y tengo diez en la parte inferior. Los voy a dejar así por ahora. Podría volver atrás y cambiarlos más tarde si no creo que encajen con el texto, pero como defecto general, estos deberían estar bien. Ahora que accionan la clase base para esto. Lo siguiente que vamos a hacer es que cada uno de estos individualmente. Por encabezamiento uno, voy a agregar otra clase llamada H uno. El segundo que voy a agregar es H dos. Entonces otro es H tres. Bien. H cuatro Bien. Entonces, ahora que hemos valorado cada uno de ellos, lo que realmente queremos hacer ahora es cambiar el tamaño de cada uno de estos encabezados para asegurarnos que sean consistentes en cada dispositivo como podemos ver aquí arriba La herramienta que voy a recomendar que uses para esto se llama escala de tipos, y la he usado la mayor parte del tiempo. Básicamente lo que voy a hacer es que solo te dará los tamaños correctos que deberías estar usando para cada una de tus cabezas. Entonces en este caso, he establecido la base en 18. Nosotros apoyamos cada uno de estos REM PX o PT. Pero yo solo me quedaría con P x, y estos se usarán en cada dispositivo. El primero que vamos a tomar es 53.75, y estamos literalmente pasado directamente adentro Y se puede ver que debido a que hemos agregado estas clases combo, ahora puedo rancio cada una de estas cabezas individualmente sin cuando estoy haciendo un encabezado, no va a aplicarse a todas ellas, solo se aplicará a la que estoy en Y vamos a hacer esto. Yo 44.79 pasado recto en. Tres Y por último, seis. Yo diría que se ve bien. Entonces ahora que lo hemos diseñado, solo echemos un vistazo a cómo se ven estos en diferentes dispositivos Creo que en general como estilizan a medida que bajan. Cuando lleguemos aquí, pienso en general que el H uno va a estar bien. Encuentro en eso un poco grande. Pero volveremos a eso todos modos si pensamos que es demasiado. Pero que eso, vamos a crear otra sección. En esta siguiente sección, vamos a hacer los párrafos, en realidad, sólo voy a agregar estos directamente aquí. Voy a cambiar el nombre de esta clase para hacer el envoltorio de texto. Yo debería ayudar. Volveremos aquí arriba. Vamos a añadir un párrafo. Ahora bien, lo que generalmente haría por párrafos, estaría buscando agregar texto grande, medio medio o texto estándar y luego texto pequeño porque podrías necesitar diferentes tamaños del texto dependiendo de qué parte del sitio web estés trabajando. Entonces uno a tres y básicamente vamos a repetir lo mismo otra vez. Nosotros sólo vamos a poner párrafo. O a veces o bien poner párrafo o texto estándar. Ahora solo usaremos el párrafo. Y vamos a poner el frente de eso a ferrocarril y vamos a cambiar el tamaño del mismo a 18 porque eso es lo que dijimos el tamaño base de nuestro texto va a ser. Entonces lo último que vamos a cambiar la altura. Ahora bien esto va a ser 125 o uno cuatro, cinco, creo que vamos a ir uno cuatro, cinco, entonces tomaremos párrafo. Vamos a aplicar a cada uno de estos. Eso solo nos da un párrafo de aspecto estándar. Entonces vamos a hacer es que vamos a agregar estándar grande y mediano y luego pequeño. El primero va a ser grande. Voy a ir con estándar aquí porque lo sé. Ese es el uno y luego pequeño. Y lo que queremos hacer es texto grande, yo usualmente pondría dos P x más alto que la línea base, texto pequeño, dos P x, más bajo que la línea base. Entonces si nuestra base es 18, entonces voy a hacer una grande y voy a hacer una pequeña 16. Podrías ampliar esto. tener extra grande extra pequeño. Podrías tomar eso arriba o abajo como mejor te parezca. Pero para mí, generalmente voy a necesitar estos grandes medianos y pequeños. Entonces ahora que eso está hecho, nuevo, podemos echar un vistazo a eso y ver cómo se escala hacia abajo. A mi, eso se ve bastante bien. El tamaño se ve bien y las proporciones se ven correctas. Ahora tal vez te estés preguntando qué estamos haciendo con esto aquí arriba. Ahora que tengo el tallaje y estilismo correctos para cada uno de estos, y lo único que me olvidé de durar. Vamos a hacer éste aquí arriba. Vamos a reutilizar estas clases como deberíamos encabezar y luego vamos a poner C Webflow sugerir ahora, luego vamos a poner H uno Entonces vamos a poner párrafo. Y vamos a usar estándares. Ahora bien, lo que a menudo hago es que hay dos formas en las que puedes hacer esto. Puedes duplicar esto porque lo que quieres aquí es que querrás que tus encabezados o texto se envíen en ciertos puntos Ahora bien, lo que va a pasar es que si realmente cambio esto ahora mismo, solo tomaré el estándar uno de estos ejemplos. Si centle eso, ahora he cambiado esta propiedad por cada lugar, el párrafo de clase común en estándar aparece y no quiero eso Entonces, lo que en realidad me gustaría es agregar otra clase Bien. Y lo que en realidad voy a hacer aquí es demostrar esto. Sólo voy a duplicar toda esta sección para mostrártelo. Entonces ahora tenemos un duplicado. Y lo que voy a hacer aquí es para cada sección. Tenemos una cabeza en H uno, y voy a sumar senores. Puedes ponerle el nombre que quieras. Esta es solo mi preferencia personal. Esta es la forma que he elegido para ello. Pero yo agregaría sensores. Y entonces cambiaría la propiedad de eso a sensores. Bien. Se puede ver a dónde voy con esto ojalá. Y ahora sólo voy a tomar eso y se lo voy a hacer a todos y cada uno. Entonces, si quiero agregar un título de sensor, agregaría uno sensores lugar de encabezar H uno o algo diferente. Me facilita categorizar fácilmente exactamente lo que quiero mientras estoy construyendo mi sitio web Voy a C Este se aplicará automáticamente porque básicamente, aunque lo llamemos lo mismo, Webflow tratará a cada una de estas como clases individuales que están siendo utilizadas como parte de esta clase combo Volviendo a ello, vamos a hacer este sensores. Bien. Sólo voy a copiar esto justo en el momento interesado. Y podemos ver que está uniendo muy bien en general. Y entonces vamos a hacer lo mismo por aquí. Genial. Eso es que hecho. Y ahora para volver al punto inicial que iba a hacer, si volvemos aquí arriba, ahora simplemente puedo agregar en esta forma central, y no va a romper todo mi sitio en mi sistema de clasificación Entonces esa es la forma en que recomendaría hacer eso. Ahora tenemos encabezados estándar, tenemos encabezados centrados ¿Qué viene después de esto? Lo siguiente que estaría viendo son los cambios de fondo. Tenemos estos rubros están en negro. Pero qué pasa si tenemos un fondo negro o un fondo muy oscuro y queremos agregar o contras y no queremos tener que crear un conjunto de clases completamente nuevo solo para hacerlas blancas o más claras. Lo que recomendaría hacer aquí es que voy a duplicar esto de nuevo. Sólo una vez más. Toda esta sección. Tómate ese duplicado un tiempo. Y entonces lo que rápidamente vamos a hacer aquí es que voy a cambiar el fondo de la sección. Entonces esto es otra cosa que haría por las secciones. Tendrás un montón de clases diferentes que crearás porque diferentes secciones tendrán diferentes orígenes naturalmente, esa es una de las que vas a cambiar muchísimo. Entonces solo voy a llamar a este fondo oscuro uno. Todo bien. Y entonces cuando hago eso ahora puedo dit esta sección como individuo. Entonces voy a simplemente agregar un color aquí para hacer esto básicamente negro casi completamente negro. Y ahora que ya lo hemos hecho, voy a volver a entrar en cada uno de estos individualmente, y voy a agregar fondo oscuro. Bueno, yo diría que a menudo aquí agregaría fondo oscuro, pero en realidad tal vez quieras agregar algo que tal vez sea un poco más relevante para ti. Así que las luces sólo vamos a hacerlo blanco. Esto puede tomar un minuto cuando estás haciendo esto. Ahora que lo hemos hecho por los cielos, y solo quieres hacer lo mismo otra vez para el texto así que yo Texto ligero Siento que tengo que equivocarme. Tienes todos tus textos y todo. Ahora tienes que establecer un conjunto diferente de clases. Tienes una clase de conmbo diferente si quieres tener la cabeza y el texto sobre una bolsa más oscura Y esto es sólo un buen hábito para entrar a hacer todo esto. Puede parecer un poco tedioso y lento, pero al final del día, estas cosas realmente hacen una gran diferencia si estás en un proyecto más grande y estás tratando de trabajar a gran velocidad. Ahora, ya lo hemos hecho, esos nuestros textos bastante atendidos. Algo de esto es posible que quieras volver y retocar en ciertos puntos, especialmente si tienes colores específicos que estás tratando de usar o alguno de estos elementos necesitaba más trabajo, nosotros lo haríamos Pero como solo estoy usando blanco y negro para la mayor parte de esta landing page, no voy a necesitar mucho color ni nada. Sé que esto va a ser suficiente. Lo último que quieres hacer aquí te recomendaría al menos, quieres agregar tus botones y estilizarlos en consecuencia. Ese es probablemente uno bastante grande también. Y luego el último después de eso, veremos texto enriquecido, rápidamente solo haremos los botones, y luego al menos podrás ver cómo hacerlo correctamente. Simplemente agregaremos otra sección nos permite. A veces esto puede jugar gracioso a veces. Tan fresca sección ahí, entonces tendremos que bloquear. Entonces todo lo que vamos a hacer es simplemente simplemente duplicar esta sección nuevamente porque no tiene sentido tener que construir una completamente nueva. Básicamente sólo voy a borrar todo lo que hay en él y volver a cambiarlo. Deshazte del dar Para este, nos desharemos de él, nos desharemos de Y luego para eso aquí, solo me voy a deshacer del envoltorio de texto porque sé que no lo necesitamos. Entonces agregaremos otro bloque aquí. Y sólo voy a llamar a esto per add para que podamos verlo. Y haremos algo parecido a lo que hemos hecho antes. Sólo podemos ir los blancos cientos por sets. Y sólo vamos a arrastrar un botón y quedarnos con esto como mejor nos parezca. Lo que voy a hacer aquí antes y con las cabezas en el texto el texto. Yo tendría tres botones, grande mediano pequeño. Ese es un buen hábito para entrar. Sólo hagamos eso y veamos aquí vamos. Se vuelve a, va a ir Bien. Bien. Entonces ahora que tenemos a los hijos y aquí, nos vamos a quedar simplemente vamos a continuar Y creo que en esta instancia, probablemente voy a hacerlos todos negros y luego los voy a duplicar y hacer blancos porque no creo que vaya a necesitar nada más que eso. Pero solo nos aseguraremos de que al lado Lo que haremos aquí para este primer botón o para todos estos botones, sabemos que van a ser blancos. Entonces vamos a cambiar el fondo a blanco. Voy a agregar un borde P x solo para poder ver cada uno de ellos. Y luego para el texto, vamos a hacer eso negro. Ahí se puede ver. Vamos a cambiar las esquinas por lo menos 20 px. Curva así como así. Entonces me voy a asegurar de que la fuente se cambie a ferrocarril y que estemos usando negrita. Entonces voy a cambiar el relleno para que sea 20 P x por dentro en vez de 15 porque creo que eso se verá mejor. Entonces voy a cambiar el a grande pequeño. Para cada uno de ellos, voy a agregar una sombra de caja para que me ayude. El estándar para eso está bien. Una vez que agregué la sombra de caja, puedo quitar el borde porque ya sé cómo se ve. Puedes deshacerte de eso. Y ten en cuenta, estos botones blancos se van a mostrar generalmente con un fondo oscuro. Entonces, aunque no los puedas ver muy bien aquí, los verás mucho mejor sobre un fondo oscuro. Eso es. Y entonces lo último que quiero hacer es agregar un estado de hover y hacer clic Entonces quiero agregar no una transición. Quiero agregar Sí, una transición. Y quiero cambiar el color de fondo. Ahora lo que voy a hacer ahora que he añadido esa transición. Si voy a Hover, simplemente puedo cambiar el color de fondo a lo que quiero que sea el estado de flotación, y solo voy a hacer que eso sea un poco blanquecino , nada demasiado loco Ahora pongo el cursor sobre eso. Realmente no se puede saber con fondo blanco, pero solo le doy sobre comentarios al usuario que cuando se ciernen sobre él Pueden ver que es clicable. Y eso es sólo una buena práctica. De nuevo, es sólo otra de estas cosas. Es una buena práctica. Ahora hecho eso último que queremos cambiar como tamaño tenemos botón clase base, van a querer cambiar a grande. Apuntar y pequeño. Tan grande voy a traer esto lo voy a hacer Vamos a llamarlo 30 30, y luego vamos a ello a 12 en la parte superior 12 en la parte inferior. Y luego vamos a cambiar el tamaño de la misma a texto grande estamos viendo 20. Genial. Entonces esa se ve bien. Entonces para el segundo, vamos a estar viendo 18 para el tamaño del texto porque ese es nuestro tamaño de texto base. Vamos a aumentar esto a creo que en realidad arriba que vamos a 15 hacer el medio 12. Y voy a hacer 25. Y luego para los pequeños, nos vamos a ir vamos a subir a 16. Lo vamos a dejar a los 28 y a las nueve. Y eso es todo lo que realmente necesitamos para cambiar a eso. Y luego voy a tomar cada uno de estos botones. Voy a tomar el botón. Voy a duplicarlo hacia abajo. Voy a cambiar el trasfondo de esto a otra vez. Bien. Y ahora que he duplicado que lo que voy a hacer es que voy a cambiar estos a solo necesito cambiar el color bro y el color del texto de estos. Nosotros sólo vamos a hacer voy a poner invertir aquí. Nuevamente, puedes llamar a estas clases como quieras. No tienes que hacer exactamente lo que estoy haciendo aquí. Es solo que se trata más de que entienda cuáles son las clases. Entonces voy a poner invertir color porque eso es algo que normalmente haría si literalmente estoy haciendo inversa de todo lo que hay ahí. Es color. Entonces vamos a hacer que los fondos sean negros. Vamos a hacer que el texto blanco. Ahí vamos. No. Estas son las cosas clave que debes hacer cuando estás construyendo tu guía de estilo porque quiero decir, los elementos fueron creados aquí, estos son los elementos más reutilizables. O sea, necesitas encabezamientos, necesitas texto, necesitas botones y estos son Pero en vez de tomarte otros 25 minutos para pasar por todo esto y seguir mostrándote y seguir mostrándote porque creo que ojalá a estas alturas, si me sigues, te das la idea. Deberías saber cómo dar clases. Debes saber qué propiedades debes cambiar y qué no y estar y qué no y estar familiarizado con la creación de clases de Cbo Pero voy a mostrarte rápidamente una guía de estilo completamente terminada al hacerlo probablemente tomará alrededor de más de una hora. Yo diría que si lo estás haciendo correctamente, depende de la cantidad de tu sitio que hayas reunido. Entonces voy a volver al tablero. Y el que te voy a mostrar es para ambi otra vez, lo tomo demasiado. Solo quiero que entiendas cómo es una guía de estilo completamente terminada. Entonces otra vez, este es el sitio web para mi puesta en marcha que te voy a demostrar. Entonces aquí. Y de nuevo, cuando estaba construyendo el sitio, esto es lo primero que crea. Guía de estilo. Tengo mis logotipos aquí. Ya sabes, he creado más encabezados y cosas aquí para darle un poco más de contexto todos los diferentes colores que estoy usando Porque como dije antes en este video, este es más un sitio web ilustrado, así que los colores y la marca necesitan ser un poco más, ya sabes, necesitan estar haciendo más del trabajo por mí. Entonces tengo mis colores ahí dentro tengo mis cabezas. Tengo diferentes tipos de textos, diferentes tamaños de enlaces, montones de diferentes tamaños de botones y solo diferentes formaciones. Entonces tengo mi texto, formas, textos inversos. Quiero decir, todo está aquí porque cuando salgo y en realidad estoy construido en el sitio porque ya hice todo este trabajo. Es mucho más fácil simplemente crear páginas desde cero. Porque no tengo que crear nada usado desde cero, tal vez a veces lo haga, pero cualquier cosa reutilizable, no tengo que hacer eso. Entonces ahí es donde lo voy a dejar para guías de estilo porque sé que tenemos suficiente en el un edificio más para una landing page ahora puedo seguir adelante y usar eso. No voy a hacerlo no voy a tener que juguetearlo demasiado. Tengo todos los sitios importantes todas las clases importantes que necesito ahora se han creado, cuál tiene Bien. Entonces lo que te animaría a hacer, si quieres agregar más variación en propiedades a estas si quieres usar diferentes colores, tal vez quieras agregar botones rojos, botón azul, lo que quieras, tal vez quieras que los colores del texto sean ligeramente diferentes. Te recomiendo que te tomes el tiempo para hacerlo. Pero voy a dejar esto aquí para la puerta de venta. Y en el siguiente horario, realidad vamos a seguir adelante y vamos a empezar a construir la página desde cero. Y vamos a usar estas clases para ayudarnos a hacer eso. Te veré en la siguiente. Bien. 6. Lección 4: Bien. Entonces, ya deberías haber creado tus guías de estilo y podrías haber seguido agregando más elementos a los tuyos que hice en el video anterior, independientemente, el siguiente paso es pasar a construir tu navegación. Ahora, en serio, no tienes que empezar con esto, pero yo lo recomendaría. Tu barra de navegación y tu fo son generalmente cosas que van a aparecer en cada página de tu sitio web. En este caso, solo estamos construyendo una landing page. Pero si tuvieras un proyecto grande y era un sitio más grande. Siempre recomendaría simplemente conseguir el Nav Bar de la manera primero. La razón de eso es que si bien el que vamos a construir aquí es relativamente sencillo y sencillo, barras de navegación definitivamente pueden complicarse más rápidamente, especialmente si estás trabajando en un proyecto más grande, que es solo algo a tener en cuenta. Además de eso, pueden tener un poco de problemas cuando lo intentas cuando intentas obtener la capacidad de respuesta correcta en todos los dispositivos Nuevamente, para este que estamos haciendo aquí, no deberíamos tener ningún problema, pero yo diría que es más probable que se encuentre con problemas aquí el patio y otros lugares en su viaje de desarrollo. Entonces, en realidad hay dos formas en las que puedes hacer esto. El primero es ir a la pestaña de elementos y desplazarte hacia abajo y puedes simplemente arrastrar en una barra de navegación desde aquí, pero no tendrá muchos estilos y opciones. De hecho probablemente no recomendaría usar este porque siempre hay algo que tengo que cambiar cada vez que lo uso, pero déjame sacarlo si puedo ver mientras que ellos irían. Entonces cuando levantas esto, lo principal que enfatizo de este es que viene con un contenedor incorporado. Ahora bien, esto puede ser un poco problemático si quieres hacer cosas diferentes con la capacidad de respuesta Y esto es como decía antes, Webflow construido en los contenedores están restringidos No son como un bloqueo normal porque Webflows um acaba editar ciertas partes de ella como las webs y la almohadilla y es bastante fija y rígida en comparación con Diplock No vamos a usar eso. Lo que en realidad solo recomendamos hacer para su tranquilidad es simplemente entrar en plus y luego diseños. Ahora, solo voy a hablar rápidamente de esto porque Webflow está integrado en bibliotecas para cada proyecto que construyas, tendrás tu biblioteca iniciada, pero hay otras bibliotecas que puedes agregar a tu espacio Si haces clic aquí, navega Más bibliotecas, tienes todos estos diferentes UIKits que puedes usar Y si estás en las primeras etapas de esto, prefiero que pases por el proceso de crear tus clases y diseñar tus propios elementos para que te familiarices más con ese proceso. Si realmente estás buscando conseguir algo rápido y tienes prisa y tienes plazos, entonces estas bibliotecas realmente pueden marcar una gran diferencia porque te proporcionan todo lo que necesitas básicamente para construir un sitio web desde cero y luego simplemente puedes personalizar estos elementos como mejor te parezca. Volviendo a ello. Flow, vamos a ir a iniciar nuestra biblioteca, y luego solo voy a tomar uno de estos diseños de navegación, que en realidad no es tan importante. Vamos, sólo vamos a tomar esta. Vamos a tomar este de aquí arriba. Y esto nos proporciona una navegación realmente estándar. Y si voy a la vista gratuita aquí arriba, podemos ver que viene no estoy seguro de cuánto me gusta eso, pero veamos cómo se ve en el móvil. Vendré con navegación incorporada. Y en realidad ver que está bien. La forma de aparecer en tablet no es fan de, pero en realidad está bien. De hecho, lo miro de cerca. Pero independientemente, volvamos al escritorio por un minuto. Y saldremos de revisión. Entonces Webflow escalará tu Navbar, incluso si usas los otros métodos y sacas uno directamente de la pestaña de elementos Tomará eso y analmente respondería por defecto Entonces no hay ninguna configuración especial que tengas que hacer para que aparezca así en el móvil o tablet. Eso lo hará por defecto, y puedes editarlos en consecuencia para frentes y solo las cosas habituales. Lo que vamos a hacer aquí es que vamos a hacer que esto encaje con nuestra marca. Recuerda que somos Tesla inspira landing page. Por lo que este botón viene con una clase predeterminada de Bustin primaria A lo que vamos a cambiar eso es solo botón y nos vamos a ir creo que solo vamos a ir medio aquí. Y luego lo haremos negro. Ahora eso viene con todas nuestras fuentes. Pero lo que tenemos que hacer aquí es realmente cambiar la configuración del navlink Si eso fuera algo diferente, hubiera borrado y lo hubiera cambiado a Nav link es la clase general a la que iría si estuviera haciendo esto. Queremos cambiar la fuente a ferrocarril y dejarme ver esto un segundo. Sí. Queremos que el tamaño de la fuente sea 18. En realidad estoy pensando que eso es demasiado grande. Solo volvamos a eso. El botón, voy a bajar de una talla a pequeña. Bien. Y luego invertiremos el color de eso. Vuelve a parpadear. Ferroviario, lo haremos 16, y luego lo haremos creo que lo haremos semi audaz. Sí. Entonces haremos lo mismo por aquí. Las clases que ésta ha utilizado por defecto Webflow. Estas son las clases que estaría creando de todos modos si estuviera construyendo esto desde cero, para tu desplegable a, ese es el nombre de la clase que usamos Yo sólo copiaría estos. Cuanto más hagas, más los memorizarás, más tendrás el hábito de solo usarlos. Vamos a hacer lo mismo esto es lo que soy Y entonces no puedo recordar esas albercas o semis Fresco. Ahora bien, todos estos se van a mantener. En realidad solo voy a seguir adelante y en realidad los voy a mantener con fines ilustrativos, pero ninguno de estos largos aquí estará activo. Así que dejémoslos como está por ahora. Voy a cambiar esta. Podemos cambiar esa vista lo último que queremos hacer es agregar el logo. Entonces encontrarás el logo en el archivo que tengo para ti en el curso que puedes descargar. Entonces vamos a ir a elegir imágenes, sube una imagen. Y voy a ir a descargar y lo tengo aquí, y este es un logo. Es un logotipo vectorial, un vector le dice a un logotipo. Es SVG. Realmente no vas a poder cambiar mucho de ello. Pero cuando lo subes, está absolutamente bien. Si agrega. Ahí vamos. Voy a derribar esto. Genial. Ahí vamos. Esto es esencialmente básicamente carreras o Na siempre tienen que vincularse. Pero nuevamente, aquí solo estamos creando una landing page. No voy a tener que vincular todo esto, pero lo harías aquí abajo. Si vas a seguir adelante y estás tratando de construir un sitio web completo desde la parte posterior de esto, si estás agregando enlaces a tu barra de NaF, lo harías abajo en el enlace stens por aquí y seleccionarías tu página o puedes seleccionar una sección de la página, que es más probable lo que vamos a hacer con esto Volveré a eso un poco más tarde. Bien. Entonces sí, eso es esencialmente una barra de NaF, y es escalable, como puedes ver, traerlo de vuelta a pocos modos libres Entonces, si me lo quito, va a escalar hacia arriba y hacia abajo conmigo. Como dije, en mi experiencia, he hecho muchos de estos Naar en el valor nominal suele ser muy sencillo, pero pueden complicarse muy rápidamente, dependiendo de lo que intentes hacer, especialmente si tienes una idea muy específica en mente de lo que intentas crear En esta instancia, no me molesta realmente el camino para mí, esto se ve absolutamente bien. Pero aparte de una cosa en realidad voy a arreglar. Pero si esto era mío y realmente me importa marca y asegurándome de que fuera una forma muy particular, podría estar en esto durante mucho tiempo. Entonces, en esta instancia, podría llevarte 10 minutos, pero y otra vez puede tardar muchísimo más. Pero sí. Eso es. Entonces te veré en la siguiente. Bien. 7. Lección 5 Cómo crear un símbolo: Todo bien. Había una última cosa que quería agregar sobre el Navbar Cuando has creado tu barra de navegación, la estiliza correctamente. Todo se ve exactamente como quieres que se vea. Lo último que necesita para convertirlo en un componente. Un componente es básicamente volver a esta idea de elementos reutilizables. Ahora mismo, hemos estado usando elementos reutilizables en el sentido de clases. Hemos estado agregando clases a los elementos para que sea más fácil para nosotros hacer nuestro trabajo de desarrollo. Pero crear un componente básicamente crea un elemento fijo que puedes arrastrar y soltar en cualquier página y lo hace mucho más fácil. Ayuda a que su proceso de diseño sea más eficiente nuevamente. Entonces lo que vamos a hacer aquí es que vamos a hacer click en Navbar Ahora, quieres asegurarte de que realmente haces clic en todo el asunto. En mi caso aquí, y luego vamos a aquí y vamos a crear un nuevo componente, y solo lo vamos a llamar N lo que va a pasar es si yo solo como ejemplo, voy a las guías ranciadas y quiero agregar esta Navbar, solo vuelvo a componentes, y luego solo puedo arrastrarla Para. Y entonces literalmente puedo simplemente tomarlo y puedo agregarlo a la parte superior de mi página así. Obviamente, eso no parece correcto. Entonces lo que voy a hacer es quedarme rápidamente con esto. Y como puedes ver ahí, tienen una barra de NaF en nuestra página de Sale gate Así que eso termina para el bar de Nath. Cualquier duda, deja algunos de los comentarios, y estaré encantado de responderlos . Entonces voy a ver el siguiente. Bien. 8. Lección 6 Cómo construir tu sección de héroe: Todo bien. Entonces ahora que hemos creado la barra NaF, lo siguiente que vamos a hacer es crear la sección de héroes Ahora bien, si no sabes qué es la sección de héroes, la sección de héroes es simplemente el banner que se mostrará encima de los pliegues de la página. Entonces básicamente, es lo primero que la gente va a ver cuando visite una página en particular. En esta instancia, si era tu página de inicio, es lo primero que la mayoría de la gente va a ver cuando visite tu sitio en su conjunto. Um, tal vez no vayan más profundo. Puede que no miren nada más en el sitio. Puede que ni siquiera se desplazen, pero lo primero que verán es la sección de héroes. Entonces quieres que eso sea lo mejor que pueda ser, básicamente. Entonces aquí es donde comúnmente verás videos agrega como fondo. Verá que los especialistas en marketing y diseñadores dedican la mayor cantidad de tiempo y esfuerzo a asegurarse de que esta sección sea lo más convincente posible Y en esta instancia, solo vamos a intentarlo y sí vamos a intentar crear una buena sección de héroes que eso impulse a los usuarios. Entonces lo que vamos a hacer es agregar nueva sección. De nuevo, voy a pensar que voy a construir esta parte desde cero, pero solo voy a mencionarla si acaso quieres ir por este camino. Solo puedes agregar una sección de héroe desde uno de estos diseños si quieres. No vas a sacar el mayor beneficio de eso desde el punto de vista del aprendizaje, pero puedes hacerlo si quieres literalmente tiene secciones de héroe que puedes agregar aquí. Tienen plantillas. Pero lo que voy a hacer lo voy a crear desde cero solo para que veas el proceso completo y lo que tienes que hacer si lo estás construyendo desde cero. Vamos a agregar una nueva sección. En esa sección, vamos a agregar Diplock. Voy a asegurarme de que eso entró y no fue así. Así que sólo vamos a corregir que voy a asegurarme de que estos son nombres correctamente. Sección básica básica. Contenedor básico. Esta es una de las instancias en realidad donde estoy realmente como clases fuera de mi sección básica y contenedor básico dependiendo del tamaño y proporción que quiero que sea. Eso es lo que solía hacer y normalmente solo llamaría al héroe de clase, pero me pondré en eso cuando lleguemos allí. Entonces dentro de mi contenedor, quiero agregar otro candado. Y no sé realmente qué voy a poner aquí todavía, así que vamos a volver a eso. Entonces para la sección, lo que quiero hacer es el wtf es 100% tamaño y proporción Lo que voy a hacer primero es agregar la imagen, creo. Voy a simplemente tomar todas las imágenes que tengo porque aún no lo he hecho. Voy a agregar todas las imágenes de mi carpeta al sitio. Entonces puedes ver aquí subimos la imagen antes, así que deberías saber cómo hacer esto, pero solo subiremos Y luego son estas imágenes de aquí, una salida. Así que los tenemos a todos dentro de Webflow. Muchas de estas imágenes son bastante grandes. Por lo general, me dedicaría el tiempo a escalarlos a un tamaño más pequeño porque se puede ver. Estoy bastante seguro de que Webflow los va a marcar cuando los suba Sí, lo hice. Parece ser que no está subido todos ellos, sino la mayoría de ellos. Eso está bien. Voy a rápido solo salir aquí y voy a hacer algunos cambios rápidos. Yo ya estaba tendido. Bien. Llévalos, mételos ahí. Y creo que eso lo hará. No sé si voy a dejar eso en el video encendido, pero si quieres saber cómo convertir imágenes a algo más pequeño en Mac, entonces ahí tienes. Volvamos a pantalla completa aquí. Entonces cuando estás agregando antecedentes a tu sección y yo voy a seguir adelante y agregar esa clase, vas a poner y yo voy a hacer la altura de esto. Sólo voy a hacer algo que pueda ver los antecedentes inicialmente. Eso lo haremos y luego solo lo llamaremos 500 solo para que pueda ver exactamente qué hay aquí. Ahora lo que vamos a hacer es si te desplazas hacia abajo hasta los fondos, y vamos a agregar la imagen de fondo. Ahora, uno que no he decidido. Yo sólo voy con la corriente aquí, si soy honesto contigo, pero creo que vamos a ir por algo un poco más brillante. Como uno de estos en realidad creo que este debería hacerlo. Derecha. Ahora, tienes un par de opciones aquí. Tienes cubierta personalizada y contiene. Personalizado es donde puedes elegir exactamente en qué parte de la imagen, qué quieres mostrar. Portada es donde intenta mostrar toda la imagen dentro, pero aún puedes seleccionar qué parte realmente quieres mostrar. Custom es solo establecer el ancho y alto lo configuras todo, pero terminas con una cosa rara donde la imagen empezará a repetirse, en este caso, tres veces está tratando de repetirse porque simplemente no encaja y realmente no sabe lo que le estás pidiendo que haga. Vamos a ir con tapa solo que siempre quepa en la pantalla. Lo vamos a tener centrado y voy a ajustar la altura de esto a Like, 800, creo, tal vez menos que eso, tal vez siete. Sí, y luego quiero cambiar la forma en que el fondo también se sienta. Eso no va a hacer mucha diferencia. Vamos a probar seis. A lo mejor esa será la parte del interruptor. Sí, eso parece mejor. 600. Lo que quiero hacer aquí, quiero que mi barra de navegación se muestre sobre la imagen. Y lo que quiero decir con eso es que quiero que se siente encima de la imagen, y no quiero ningún fondo blanco. Yo sólo quería sentarme amablemente. Quiero que todo se junte. Lo que vamos a hacer es que vamos a volver a subir al Bar NaF Y vamos a cambiar el trasfondo de esto. Así que vamos a bajar aquí, y creo que los antecedentes podrían estar viniendo de Nope Debe estar viniendo del contenedor. No, no viene del contenedor. Pero veamos que solo lo intentaremos desde arriba. Entonces hay blanco en realidad podría no ser. Lo que vamos a hacer es crear vamos a hacer pegajosa esta barra de siesta, lo que solo significa que en términos de dónde se sienta en la página, no tiene pavimento o no hereda nada Así que simplemente se sentará como un elemento fijo encima de todo lo demás en la página. Y a medida que se desplaza, se mantendrá fija. Entonces vamos a hacer eso ahora. Entonces si voy aquí arriba, ahora mismo, está configurado en estático, pero voy a cambiar eso y voy a configurarlo a y se puede ver que no había fondo blanco. Al principio me equivoqué sobre eso. Entonces, ahora que he cambiado eso hacia arriba, el logo y el texto ahora la Navbar ahora se sienta en la parte superior de la sección de héroes Pero como lo he cambiado a fijo, se ha hecho algo al ancho de la Navbar, así que vamos a seguir adelante y arreglar eso Y tenemos que asegurarnos de que esto esté ajustado al 100% de ancho. Bien. Porque ahora mismo, como pueden ver está en el 86. Nosotros hacemos eso, eso es todo de vuelta. Ahora, creo que eso se ve bien, pero no estoy seguro de esta imagen ahora que la estoy viendo. Creo que a lo mejor quiero cambiarlo si puedo encontrar uno que sea más brillante o un color claro en el sentido de que no hay patrones. Creo que voy a usar una imagen así. Veamos qué tenemos. Entonces volveremos aquí, escoge imagen. Y este con el azul justo aquí, ahí vamos. Eso se ve 100 veces mejor. Para que podamos ver fácilmente todo el texto desde el punto de vista de la accesibilidad, nadie va a tener problemas para leer eso, y la imagen del auto está mucho más enfocada, y probablemente solo se ajuste un poco mejor como sección de héroes. Ahora, en términos de texto, Eso fue lo siguiente que tenemos que hacer. Y vamos a subir aquí. Ya agregué un bloque deve, así que volveremos a eso y veremos cómo va eso. Eso está arriba aquí. Entonces aquí es donde voy a realmente voy a poner algo de relleno en esto y aún no voy a clasificarlo. Voy a cambiar eso más tarde, solo para que puedas ver exactamente dónde está ahora puedes ver este bloque dev aquí. Déjame volver a ello. Bien. Puedes ver cómo está sentado en la parte superior de la página. Si empiezo cualquiera de los textos a esto, no va a quedar bien y tendría al mono alrededor con mucho para intentar conseguirlo si mantenía esta opción de diseño. Pero si subo al par de este deblock que es el contenedor básico Voy a hacer de este héroe el s para contenedor casero. Lo que voy a hacer es editar el layout del contenedor. Voy a hacer que todo se envíe básicamente. Entonces aquí. En realidad eso está bien. Ahora que vamos a seguir adelante y añadir algunos textos. Hay algunas cosas que tenemos que considerar antes de hacer eso. Recuerda que estaba hablando de colocar clases combo fuera de la sección básica y del contenedor, aquí es donde en realidad vamos a tener que hacer eso porque si empiezo a intentar agregar texto y agregar elementos y moverlos en esto de la manera en que esto esté configurado, va a ser muy difícil para mí hacerlo. Lo que quiero hacer hay dos cosas que tengo que añadir aquí Tengo que editar el contenedor básico, y tengo que editar el bloqueo de desarrollo que he agregado, pero en realidad todavía no me han hecho ninguna personalización Si bajamos al contenedor básico, Qué vamos a hacer, voy a hacer la altura de este 100%. Cuál fue el porcentaje, y vamos a hacer este 100 y ya se puede ver que ahora va a caber 100% vertical y horizontalmente. Pero lo que eso me permite hacer es que me permita llevar el bloque de la muerte al centro, básicamente. Ahora que está hecho, puedo volver aquí arriba, y esto debería ser y podemos ver los puntos muertos aquí en el centro Entonces ahora vamos al bloque D y voy a cambiar el nombre de esto a uro Content wrap o algo así. De nuevo, puedes llamar a tus clases a lo que quieras. Soy solo que algunas personas prefieren usar códigos o abreviaturas para sus clases porque quieren usar pequeñas cantidades de textos Para mí, soy una persona bastante lingüística, así que me gusta usar las palabras que como ideal, a veces, tal vez quieras que tus clases sean un poco cortas, solo me resulta más fácil identificarlas y también recordarlas. Ese soy solo yo. Todo el mundo es diferente. Ahora que tenemos eso aquí, el ancho de esto, vamos a hacer de nuevo el 100%, que es actualmente. Al igual que el contenedor, vamos a hacer que la altura sea 100%. Se pone divertido. Entonces tal vez te estés preguntando la razón por la que me he tomado el punto muerto y básicamente lo hice igual que un contenedor Y eso es porque cuando agrego los elementos a este texto, lo que voy a agregar y los cambios que podrían tener que hacer tiene más sentido para mí solo tener mi propio punto muerto para todo eso en lugar de intentar hacer ediciones directamente al contenedor cada vez Porque a pesar de que es una clase combo, todavía no quiero estar haciendo muchas ediciones a eso Quiero que eso sea bastante consistente sin importar a dónde vaya porque podría crear una sección de héroes totalmente diferente con una intención completamente diferente y quiero mostrar cosas diferentes, quiero que sea completamente diferente. Esa clase combo que tengo para la sección de héroes entonces podría volverse redundante porque la he personalizado específicamente para lo que estoy haciendo aquí. Siempre solo tiene sentido solo usar un bloque muerto fresco donde pueda y no impacta en el sitio en absoluto más o menos. Aquí, vamos a agregar algunos textos. Eso va a ser lo primero. Puedes ver dónde está configurando eso aquí. En cuanto al texto, sólo voy a ir rápido. Va a ser rápido eléctrico. Volveré y me cambiaré, creo. Pero para que podamos hacerlo. Y vamos a ir Clasre va a hacer rumbo y vamos a poner h uno ¿Qué fue lo último que quería hacer aquí? Vamos a hacerlo centrado y eso debería hacer lo que pienso. Ahora bien, lo que tengo que hacer aquí es la posición de que el texto es un poco demasiado alto, así que quiero que eso sea un poco más bajo y ahí es donde puedo llegar al wrapper de contenidos heedro y puedo cambiar esto básicamente En vez de hacer 40, puedo hacerlo 60, 100, 140. Se puede ver que eso es demasiado bajo. 160, tal vez un poco demasiado alto, así que vamos a ir de 65 a tal vez 70. Sí. Eso parece hacer el cheque por mí. Ahora bien, y si quiero agregar algo al fondo en esta sección aquí, como solo alguna información, pequeños bloques de texto. Lo que en realidad voy a hacer es agregar otro de block. Y voy a poner eso para que realmente haga alguna en realidad. Solo saltemos y veamos si podemos simplemente agregar una cuadrícula recta a esto. Voy a deshacerme del deblock voy a tomar un grid quick stack en realidad es algo bueno, solo una oportunidad para mí de señalarlo cuadrículas son algo a lo que te acostumbrarás a usar mucho en el flujo web, diría yo Las rids hacen que sea mucho más fácil para ti agregar elementos en posición, especialmente si es como columnas, un poco de texto, cosas que quieres alinear y que está en formato de cuadrícula No querrías estar usando muchos deplocks eso. Es posible que no quieras usar muchas columnas para ello. En general, el uso de una cuadrícula suele tener más sentido. Puedes ver aquí he añadido una grilla de dos por uno. Voy a hacer cuatro por uno. Entonces dentro de ella, voy a agregar Dlocks me deja, lo cual no es como siempre Así que estamos aquí abajo. Sólo vamos a agregarlo directo a las celdas. Todavía no parece estar como en ella. Tened miedo conmigo. Hago estos 20. Y en cada una de estas celdas, solo voy a dejarlo caer sobre el texto solo para que puedan ver como estoy trabajando en esto si me deja, lo cual no parece ser. Sólo voy a tomarlo y copiarlo y pegarlo en cada celda porque creo que eso sería mucho más fácil. En fin, vamos a copiar pegar, pegar, pegarlo aquí. Y pegarlo aquí. Ahora, antes comenzar a personalizar algo de esto, quiero asegurarme de que la posición en la página sea la correcta Entonces lo que queremos hacer es volver a nuestro envoltorio de contenido. Y la forma en que tenemos esta configuración y creo que me he equivocado esta es. Entonces queremos ir a flex. Queremos que esto vaya verticalmente. Y queremos que sea queremos que se muestren en la parte superior e inferior. Así que déjame aguantar conmigo por 1 segundo. Ahí vamos. Entonces queremos que quede espacio entre. Entonces quiero tener mi mosaico aquí en la parte superior, y luego quiero tener todos mis elementos de texto en la parte inferior. Entonces lo que vamos a hacer es que vamos a hacer esta grilla, y simplemente la llamaremos grilla realmente no importa. Vamos a hacer eso Bien. 100%. Ahora dentro de aquí, quiero agregar texto de párrafo, así que solo tomaremos esto y lo agregaremos ahí. Nuevamente, esto va a cambiar, así que no te preocupes. Al final, se verá mucho mejor. Bien. Ahora, obviamente, los colores texto y esas cosas, estamos a punto de cambiar el contenido. En realidad no voy a tocar demasiado. Pero de todos modos, empezaremos a personalizarlo. Vamos a hacer rumbo y voy a compartir con ustedes algo aquí. El h12 345, los que fueron estilizados en la guía de estilo Esos se pueden aplicar a diferentes etiquetas. Entonces ajustes, que es algo que debería mostrarte aquí, tendrás estos son los ajustes de tu cabeza aquí. Este es correcto, obviamente, en la parte superior de la página, el H que también es tu defecto. Ese es el que vamos a usar. Para este de aquí, Esto sería técnicamente un H dos, y se dimensionará proporcionalmente sin ninguna clase Pero cuando voy aquí, puedo hacer que una H tres o una H cuatro si quisiera. Puedo hacer que sea una H cinco si quisiera, y no va a afectar la etiqueta. Entonces, lo que quiero decir con eso es que no necesitas restringirte al estilo específico que has creado para una etiqueta específica. Así que puede ser etiqueta como H dos, pero realmente estás usando un estilo H four, algo a tener en cuenta a medida que vas pasando por esto. Vamos a ir por cinco porque quiero que sea bastante pequeña y con rumbo H cinco, vas a meterte por estos dos. Pgraph entonces lo que vamos a hacer es que vamos a hacer eso pequeño Y vamos a aplicar rápidamente todo esto. Pgraph Pequeño. M. Bien. Y necesitamos cambiar el color de estos porque ahora mismo no se ven bien. Vamos a hacer cada uno de ellos sensores y quiero que tengan una cabeza ligera. La célula en sí, tenemos que poner ese sensor. Para que veas que la acabo de cambiar por esa celda y solo voy a hacer una celda. A veces también para las células. Si no quieres editarlos directamente, puedes agregarles un punto muerto directamente en este caso, y solo d la celda porque puedo si era una capa más complicada, solo agrego un punto muerto solo para darme esa capa extra de personalización si quisiera Derecha. Y tenemos que deshacernos de algo del texto de aquí, así que vamos a tomar eso. Ahora bien, este texto, tal vez se esté preguntando es casi definitivamente va a tener que cambiar. No quiero decir que el texto vaya a tener que cambiarse solo. Me refiero al estilo de la misma porque no creo que esto vaya a encajar muy bien cuando estilo todos estos estoy debatiendo aquí, debatiendo Ahora, también algo que se puede Estoy haciendo todo esto de manera individual. Por lo general, sólo voy a copiarlos y pegarlos. Esto es solo para fines de demostración. También solo demuestra lo fácil que es simplemente agregar clases con bastante rapidez. No es difícil porque la web es bastante intuitiva, sabe aproximadamente lo que le vas a pedir que haga antes de pedirlo porque sabe cuáles son las clases como existentes. Ahora mismo eso está hecho, este texto no se ve bien. Entonces el texto del párrafo, creo que tiene que ser más pequeño. Aquí es donde nuevamente, podemos agregar otra clase común para que esto funcione. Entonces necesito que esto sea más pequeño. Entonces ahora mismo esto está sentado creo que 16 lo pueden ver ahí. Realmente necesita ser 14. Entonces lo que haría es agregar otra clase combo, generalmente. Ahora, en un mundo ideal, lo acomodaré por el hecho de que voy a necesitar texto aún menor que 16 p. lo agregaría a mi guía de estilo. Lo traería de vuelta aquí, y lo aplicaría en este caso y no. Sólo voy a crear una nueva clase aquí ahora porque como es más conveniente y me ahorra un poco de tiempo. Entonces sólo vamos a poner héroe rojo pequeño texto. Y esto es específicamente solo para este elemento. Yo uso esta capa, y si reutilizo una capa y estoy usando en diferentes lugares, entonces volveré a cambiarle el nombre. Sólo vamos a tomar eso y vamos a hacer este 14. Eso es mucho mejor y el cien 45% se puede quedar. Eso está bien. Tomaré eso aplica a todos estos. Quiero ver si debo mantener esta oscuridad debatiendo debatiendo. Y creo que en realidad creo que voy a mantenerlo negro. Entonces ahora que he pasado por todo eso, puedes ver que esto en realidad no está apareciendo tan bien como tal vez quería. Así que voy a seguir adelante y en realidad hacer algunas ediciones más Así que quiero derribar esto un poco esta grilla, y voy a hacer que sea tal vez hasta diez, traerlo hasta ahí abajo. A nivel de sección, voy a agregar algo solo para que esta textura suba un poco mejor. Si volvemos a bajar a los fondos, podemos hacer click. Podemos hacer clic en más, y solo vamos a agregar un degradado. Ahora, el nivel superior de este gradiente va a ser la transparencia cero, trae eso, deshazte de eso. En la parte inferior, vamos a cambiarlo a negro, así como esto. Entonces vamos a bajar así este deslizador. Entonces podemos ver ahí que hemos creado un contraste suficiente entre el fondo y el texto para el texto blanco para que aparezca correctamente ahora. Pero realmente no interfiere con la imagen o ese texto superior en absoluto, ¿puedo simplemente blanquear juntos bastante bien ahora Así que de nuevo, no voy a pasar demasiado tiempo en la copia aquí porque esto no es por supuesto en derechos de autor. Voy a poner superior. Nunca he corrido la tele, nunca he conducido una, pero si crees que fue superior, entonces para jugar. Entonces, este es un buen ejemplo de una sección de héroes. Ahora, tal vez te estés preguntando, qué hacemos aquí cuando queremos darle estilo a esto lo siento cuando queremos que sea receptivo. Ahora voy a añadir una lección un poco más adelante sobre la capacidad de respuesta en su conjunto Pero solo para fines de demostración aquí, si llevo esto a la tableta, eso en realidad no se ve tan mal, pero hay algunas ediciones que voy a querer hacer Entonces en el envoltorio de contenidos, esto va a tener que cambiar probablemente a cero, creo. Sí. Y luego en términos de la propia grilla, si haces clic en la cuadrícula y justo ahí, puedes disminuir el patrón de la historia de margen entre cada elemento, y en realidad no sé si quiero hacer eso. A lo mejor quiero mantener eso exactamente donde está. Pero como puedes ver, como puedes ver, este texto no ha mostrado exactamente cómo se ve un poco torpe para la tecnología juntos Y para el tamaño de pantalla, este texto se ve un poco demasiado grande. Entonces, debido a que ya agregué mi clase combo, solo puedo seguir adelante de nuevo a la tipografía, y probablemente voy a cambiar esto a 12 Creo que eso se ve bien. Se puede ver la diferencia que parece más fácil de leer y mirar Siguiente, ether estamos bajando a los más pequeños, teléfono horizontal y un teléfono, y aquí es donde realmente podemos cambiar la cuadrícula y Lo que me gustaría hacer es deshacerme de estas columnas y hacer de esto un cuatro por cuatro. Y eso se ve bien, pero choca con la imagen, y voy a tener que ampliar el tamaño de la sección para que ésta funcione Así que fueron 600, desguártela poco a poco en 100 y ver que conseguimos. 700 es mejor, 800, que sea demasiado. No, en realidad, está bien. 800 obras también. Eso me queda bien. Entonces por último, Lo último que vamos a querer mirar es el móvil mismo. Así que ahora en el móvil. Este en realidad se ve bien. Solo necesito extenderlo de nuevo un poco más solo para que el texto no se interponga en el camino. Y tal vez quiera sacar ese gradiente pero más aún el texto sigue siendo fácil leer más arriba en la página donde dice más rápido y potente. Iremos a la sección. Vamos a aumentar eso a 900. Eso se ve mejor. Vamos a bajar a los fondos, y ahí podemos ver nuestro gradiente de fondo. Vamos a traer esto de vuelta solo un poco y eso parece mucho más fácil de leer ya. Ahora, te darás cuenta aquí, esto es algo en lo que no voy a pasar demasiado tiempo para propósitos de esta demostración, pero esto es una ilustración de dónde las barras de nab pueden llegar a ser bastante complicadas Puedes ver aquí cuando empiece a desplazarme que los elementos se fijaron, y esto se hará más evidente medida que agreguemos más a la página Pero el negro va a no va a quedar bien ya que voy por la página y los elementos no son dinámicos, así que no van a cambiar de color ya que van a repasar cosas que son más oscuras o más claras. Lo que realmente me gustaría aquí, me gustaría alguna interacción o animación que cuando empiezo a desplazarme el fondo se vuelve blanco Ahora bien, las interacciones no es algo en lo que voy a trabajar aquí, sino el liderar el rumbo que dará seguimiento a este, que se llamará Maestría para flujo web o algo así Cuando ampliamos este sitio web y lo convertimos en un sitio web de Tesla en toda regla con todos los vehículos y esas cosas, me verás crear interacciones y de hecho voy a ampliar esto mucho más, pero solo lo vamos a dejar así por ahora Pero se puede ver que se ve bien. A mis ojos, esta es una herosección terminada tan buena como Tesla quizás no De hecho ahora que estoy mirando hacia atrás en esto tal vez hacer esto un poco más grande. Así que de nuevo hacia abajo para mover mi cara fuera del camino de vuelta a la sección. Y voy a hacer 700. Bien. Batir. Sí, eso es definitivamente. No hay poco más espacio abarrotado. El espacio es tu amigo cuando se trata de diseño y sitios web. Esto, en mi opinión, haber mirado muchos de estos. Esto sería considerado uno bastante bueno. Pone énfasis en el vehículo. Obtendremos texto abajo y arriba. Si estamos poniendo buena copia en esto, probablemente sería bastante convincente. Ahora que hemos creado nuestra sección de héroes y lo siguiente que debemos hacer es seguir adelante y agregar más contenido a esta página y hacerla más bien una página completamente formada. Eso vamos a hacer. Te veré en la siguiente. 9. Lección 7 Cómo crear el cuerpo de tu página: Todo bien. Acabamos de terminar de construir nuestra sección de héroes. Lo siguiente que tenemos que hacer ahora es simplemente seguir adelante y comenzar a llenar el resto de esta página. No he pensado demasiado en ello en esta instancia. Si tomaste mi consejo en video anterior y has seguido adelante e intentado crear un marco de alambre o tienes algo de inspiración de la página que estás tratando de crear el brillante. En esta instancia. Yo sólo voy a la corriente. Esta no va a ser una página enorme. Todo lo que realmente estoy tratando de hacer aquí es cubrir todas las estructuras básicas de los diseños de página básicos que probablemente vas a implementar. El primero que vamos a hacer es que sólo vamos a crear una columna básica. Básicamente debido diseño de columna. Voy a tomar sección contenedor. Y cuando se trata de columnas, hay dos cosas que puedes hacer. Webflow justo abajo de la parte inferior. Solían poner mucho más énfasis en esto que lo hicieron. Ahora solían usar Quickstak para todo. Entonces puedes o bien puedes usar las columnas o la función de cuadrícula aquí abajo. No recomendará declam porque realmente no necesitas preocuparte por ninguno de estos Yo solo me enfocaría en usar Quicksta para todo. Es mucho más fácil, satisface todas tus necesidades y no vas a tener que saltar entre el antiguo sistema de diseño dri o el sistema de columnas Así que solo usa Quickstak. Así que vamos a arrastrar eso Y luego voy a ir rápidamente solo asegurarme de haber agregado mis clases a estas correctamente, así iremos a la sección básica. Contenedor básico. Y entonces voy a llamar a esta grilla de doble columna. Y vamos a hacer cientos de palabras. En cuanto a los antecedentes. Esas son un par de cosas que podemos hacer aquí. Podemos ya sea ahora mismo, sólo voy a hacerlo negro. Vuelvo y agrego una imagen, no realmente decidido todavía, pero estamos solo voy a agregar otra. Vamos a ir aquí y literalmente vamos a hacer esto negro. Entonces en la celda, vamos a agregar otro diplo y de esto es de lo que estaba hablando antes solo era un poco más de personalización Voy a añadir una imagen aquí. Bien y vamos a elegir una imagen. ¿La imagen voy a elegir? Esa es la pregunta. Ahora otra vez, si realmente nos estamos enfocando en el contenido de esta página y en todo, estaríamos haciendo algo tal vez hablando accesibilidad o el interior o las especificaciones del motor, cosas así. este momento, solo nos estamos enfocando en las capas y realmente usando el flujo web. Entonces vamos a ir por algo como esto, creo. Entonces por aquí, vamos a agregar otro dip block le vamos a agregar un párrafo. Vamos a agregar un encabezado arriba y debajo de eso, vamos a agregar un botón. Vamos a crear rumbo y luego vamos a hacer que sea una H dos. Vamos a lograrlo, no queremos que sea censurado. Vamos a lograrlo. Hazlo rumbo. He tenido que crear otra clase aquí llamada cielo claro porque quiero mantenerlo a la izquierda quiero mantenerlo a la izquierda un encabezado estándar. Quiero que sea blanco. Pero como no estoy usando el centro entonces la clase combo de rumbo ligero, quiero sacar el centro. Estoy teniendo que crear una nueva clase que la haga blanca. Nuevamente, es algo que tienes que hacer de vez en cuando, pero no es tan importante. Probablemente voy a pedir hacer lo mismo con este, lo cual está bien. Párrafo. Vamos a ir estándares, vamos a ir como párrafo, y vamos a hacer esto blancos. Creo que en realidad haremos lo pequeño. No me gustan demasiado las gradas creo que las gradas, a lo mejor la dejo demasiado grande. Eso es mejor. Entonces haremos el. Creo que eso va a estar bien. Ahora bien, si estamos viendo estos, en realidad me ve bien en general, pero quiero asegurarme de que el patrón para esto esté un poco más afinado vamos a poner tal vez 40. Creo que vamos a ir por 4020 de ese set entonces en cuanto a la g, vamos a ir Primero aquí y 40 abajo Estoy pensando que tal vez tejer más espacio, así que tal vez 60100100 aquí Eso es mejor un tejido más espacio. Y voy a poner el interior. Esa es una sección hecha. A continuación, vamos a otra sección de enfoque de imagen más. Abajo aquí, voy a agregar otra sección. Otro dev. Y lo que haremos es hacer otro rumbo y haremos otro dev. Entonces haremos un párrafo y debajo de eso, haremos un botón. Y ya verás a dónde voy con eso en un segundo. Entonces volveremos aquí arriba, sección básica. Entonces te darás cuenta a medida que voy. No he estado trabajando en la capacidad de respuesta ya que he estado haciendo esto, pero voy a volver a eso y hacerlo al final Entonces entonces este va a ser contenedor básico. Y luego para esta sección, voy a hacer voy a hacer antecedentes. A uno. Y aquí, vamos a asegurarnos de que teníamos una imagen. Vamos a elegir una imagen. Entonces uno que probablemente podríamos eso es bastante llamativo, creo que sería bueno. Quiero decir, tenemos mucho para elegir aquí. A lo mejor ese que tuvimos inicialmente puede ser un buen comienzo para esto nuevamente, queremos asegurarnos de que la altura del tramo sea la adecuada, así que vamos a hacer ese 800. Y solo estoy asegurándome de que esto sea correcto a medida que avanzo. Y necesito un envoltorio aquí, que es algo que notarás que no han agregado, así que necesito ir dentro del contenedor, y luego voy a poner todo lo demás dentro de eso. Sólo voy a llamar a esto contenidos. No, como voy una buena para hacer por tus envoltorios es tal vez solo tener una clase base de envoltorio de contenido Y luego además de eso, tal vez quieras agregar otra clase combo para hacer las cosas más específicas, pero nuevamente, eso es completamente para ti mismo. Y luego el envoltorio de contenido otra vez, nos vamos a ir. Tenemos que hacer el ancho de este 100%. Hacemos la altura al 100%. Y arreglar esto era el contenedor. Eso debería establecerse de manera un poco diferente. Entonces con el trampero de contenido vamos a hacer ese flex, bajando y queremos quiero asegurarme de que esto se estire, pero no creo que lo esté haciendo todavía. Yo lo haré para que veas eso pero esto no se ve bien, así que necesitamos agregar algo de relleno alrededor de esto. Hay un par de cosas que tenemos que hacer tal vez disparadas a la altura de la sección porque puede ser que somos demasiado altos para lo que estamos apuntando. Bien. Y sí queremos que se centre esta vez, y queremos que sea como y para el punto muerto, nuevo, queremos hacer esto centros Bien. Sólo voy a añadir al botón. A mí me importa. Una vez que has estado haciendo esto por un tiempo, eventualmente simplemente se vuelve bastante segunda naturaleza. Lleva tiempo, por supuesto, pero Webflow no es tan difícil como lo que algunas personas hacen. Creo que es una queja común al respecto que he tenido sobre Rigid. Yo entiendo de dónde viene la gente para eso, pero cuando estás haciendo este tipo de trabajo por el tiempo suficiente, empiezas a apreciar un poco más las limitaciones. Emmausalmente tienes una estructura con la que estás trabajando. Cuando ya sabes, ya sabes, otras plataformas como Wicks que ya he usado muchas veces Definitivamente no soy tanto fan de. Y no quiere decir que sean malas plataformas. Es solo que cuando empiezas a intentar hacer algunas cosas más complicadas o de verdad quieres disminuir algunas cosas o, digo que lo principal es la complejidad. Si estás iniciando la complejidad de tipo de tu proyecto, entonces wx no es el que debes usar Yo no diría que realmente no tiene las capacidades en mi opinión, pero entonces de nuevo, cada uno tiene su propia opinión. Entonces de todas formas, así que vamos a traer eso Bien. Baje eso y todo esto debería amarrarse bastante bien. Creo que por aquí, necesitamos cambiar el ancho de esto porque te darás cuenta con este párrafo abajo aquí abajo, es demasiado amplio si estuvimos hablando, estábamos viendo la experiencia de usuario de esto y el diseño, esta no es una buena experiencia de usuario, y no es un buen uso del diseño. Queremos que esto sea mucho más tomador. Entonces vamos a ir 60 ahí, y luego necesito que me asegure de que se trata de sensores. Bien. Ahí vamos. Lo que voy a hacer de nuevo a nuestros antecedentes, vamos a agregar algo más a esta sección. Nuevamente, se trata de asegurarse de que el texto sea legible. Esa está bien. Ese al que vamos a ir en el medio. Deshazte de la transparencia de esa. Al final aquí, vamos a agregar otro color, que sólo va a ser bla. Ahí se puede ver. Eso se ve. Bien. Bien. Yo sólo voy a poner el desempeño primer lugar para el fondo más. Otra vez, esa es otra sección. No pensar demasiado en ello. Lo bueno de este tipo de mezcla de página y quiero decir esto es crédito para Ted nada que conmigo pero la calidad de las imágenes es realmente alta. Creo que si estás pasando por esto y estás trabajando en tu propio proyecto y estás tratando de dar vida a tus propias ideas, tus propias ideas. No puedes no puedes restar importancia No puedo restar importancia la importancia de tener buenas imágenes Y si es de tu producto. Quiero decir, estas son técnicamente imágenes de productos que estamos viendo. Simplemente son un estándar tan alto, tan alto. Pero si estás en, solo quieres probar y asegurarte de que el contenido sea lo más alto posible. Porque simplemente reúne todo lo demás y hace que todo sea mucho más fácil. Bien. Para que se haga esa sección. Ahora, vamos a Vamos a tomar esta sección. De nuevo, esto es solo un trabajo de cortar y pegar, pero vamos a llevar esa pasta por el fondo, y luego vamos a voltear el contenido de esto. Y esa va a entrar en la siguiente celda. Vamos a cambiar la imagen. Algo así. Sé buena plataforma que se ve bien otra vez. Vamos a cambiar obviamente cambiarías el texto como lo hiciste así que voy a poner no sé. Drive puede decir poner bajos de pensamiento en el contenido de la página de destino. Pero en general, creo que desde el punto de vista del diseño, creo que es total. Entonces haríamos eso y bien. Y con esa sección hecha, voy a llamarla ahí para el cuerpo de la página. Para que veas lo fácil que es armar eso. No es demasiado complejo, yo no diría. Estos son diseños bastante sencillos, pero cuanto más hagas estos effaci obtendrás de él, más cómodo te sentirás con Webflow da más miedo de lo que parece. No es tan difícil de usar. Voy a meterme en un ritmo de que es una plataforma realmente, muy útil. Entonces voy a llamar a esto aquí por ahora. Lo siguiente que tenemos que hacer, voy a crear una sección de granja para la generación de leads, algo bastante estándar que verás muchos sitios web, y probablemente querrás por tu cuenta. Y luego después de eso, vamos a crear el fzer lo tomaremos a partir de ahí Entonces mira en la siguiente. 10. Lección 8 cómo construir tu formulario de generación principal: Bien. Entonces ahora que tenemos el cuerpo para nuestra página. Lo último que quiero de una de las últimas cosas que quiero hacer en esta página es construir nuestra granja de generación y granjas son una gran parte de Webflow y son una gran parte porque son muy personalizables, y eso es algo que no obtienes en muchos otros creadores de sitios web e incluso constructores de formularios Muchas veces realmente no se puede hacer mucho para personalizar los formularios, cómo se ven de la manera en que interactúan las interacciones de desplazamiento o la animación de desplazamiento Hay muchas cosas que puedes hacer en muchas otras formas que obtienes en estas otras plataformas. Pero en el flujo puedes estilizar exactamente como quieras. Quería tomarme el tiempo para sumergirme en los formularios específicamente porque normalmente los agregaría antes en el proceso cuando estés creando tu guía de estilo, ahí es donde estaría trabajando en ella, y luego solo la importarías a la página que quieras. Pero en esta instancia, quiero actuar quiero ir paso a paso. Vamos a saltar de nuevo a la guía de estilo. Ahí vamos a hacer todas las configuraciones que necesitamos. Entonces voy a agregar en una nueva sección aquí abajo y voy a hacer que se vea voy a hacer que encaje con esta página y ojalá se vea rápido y va a ayudar a contribuir a esta página. Volvamos a saltar a la puerta rancia. Voy a desplazarme hacia abajo hasta el fondo aquí. Vamos a crear otra nueva sección. Sólo tienes que aguantar conmigo. Esto es algo con lo que podemos tener bastante errores, que es que cuando estás colocando secciones en una página, a veces simplemente no le gusta tanto. Vamos a bajar esto al botón. Delo adentro. Otro bloque dev dentro de estas clases agrega. El contenedor. Y luego vamos a agregar que solo vamos a llamar a este formulario referir. Probablemente usaré esto en la página de Landon, pero ya veremos. Haremos el 100%. Y vamos a hacer este 100% también. Sólo voy a añadir un poco de pad y espacio. Vamos solo para que sea un poco más fácil de ver. Derecha. Y luego vamos a simplemente arrastrar un formulario y voy a pasar por todo esto contigo paso a paso. Lo principal que estamos tratando de hacer aquí al igual que hicimos con todos estos otros elementos del estilo solo para hacer un resumen rápido Estamos agregando el formulario. Vamos a agregar estilo las clases correctas, y luego podemos tomar esa forma y podemos agregar esas clases en cualquier otro lugar del sitio. Así que vamos a arrastrar un formulario y vamos a empezar con esto. Bien. Esta es solo una forma realmente básica, pero hay algunas otras cosas que quiero agregar aquí porque hay otra funcionalidad que puedes tener con los formularios de Webflow Para que puedas tener tu bloque de formulario, luego obtenemos etiquetas como ya hemos visto una casilla de verificación Entonces queremos agregar un botón de radio. Si me deja. Si vamos. Y luego vamos a agregar un desplegable. Y luego recapturar. Yo sólo voy a pasar por todos estos. Vamos a hablar de ellos, y sólo vamos a personalizarlos. Entonces comencemos con las etiquetas de campo. Entonces solo voy a las como etiquetas, queremos hacer este ferrocarril. La fuente solo puede decir rápido sobre eso y solo vamos a tomar esa clase, y ahí la vamos a agregar. Derecha. Los insumos son importantes. Quiero decir, esto es lo que la gente va a escribir. Desea asegurarse de que los usuarios obtengan los comentarios correctos de ellos. Quieres asegurarte de que sea fácil de escribir y fácil de leer y entender. Así que vamos a seguir adelante y la entrada de la granja. Vamos a asegurarnos de que la topografía esté puesta en ferrocarril. En esta en particular, quiero hacer la altura de esto creo que vamos a ir con 30 40. Estoy seguro de que normalmente. 50 voy a decir 51. Y luego con eso, vamos a solo voy a agregar texto de marcador de posición a esto solo para que sea más fácil de entender Entonces vamos a yo solo voy a agregar en realidad. Aquí voy a hacer lo mismo. Bien. Derecha. Y creo que me gustaría que estos fueran curvos. Ahora mismo, sólo se ve un poco boxy. Entonces, si bajamos al fondo, tal vez necesite agregar más que eso. A lo mejor siete pies, debería hacerlo. Bien. Y el tamaño del texto en su interior así que estoy pensando 16 a 181618 Creo que 18 es mejor. Y aquí arriba, sólo voy a cambiar el padn ligeramente. Quiero 20 cada talla, no 12. Estaba buscando lo mejor. Y entonces realmente no quiero una frontera. Lo que quiero es una sombra de caja, así que si bajamos al fondo aquí. Y eso está bien para una sombra de caja, y no necesitamos cambiarla mucho. En realidad no soy tan rápido al respecto. Entonces bordeamos ahí eso es gris. De nuevo, porque G va a estar hablando tanto por nosotros. Realmente no necesitamos preocuparnos por la frontera. La sombra de caja ayuda solo a ver si la estamos viendo sobre un fondo blanco, pero en general, está bien. Lo único que realmente cambiaría aquí y esta es otra interacción para agregar vamos a agregar una transición y va a ser color de borde o Sí, vamos a hacer que sea color de borde. Y cuando un usuario está enfocado y enfoque significa cuando está escribiendo activamente dentro de él, queremos que cambie el color de los bordes. Y vamos a cambiarlo a quiero cambiarlo a rojo. Yo sólo voy a intentarlo y aquí, creo. No, en realidad, lo cambiaremos. Sí, lo cambiaremos a rojo. Lo cambiaremos a esto. Ya veremos cómo se ve eso. Ahora si voy a previsualizar, si empiezo a escribir sobre esto, verás los cambios. Una última cosa que necesitan cambiar es el color del texto y alguien está escribiendo en él porque ahora mismo eso es demasiado débil Entonces vamos a salir aquí. Y yo cambio ojalá. Bien. Ahí vamos. Así es como lo queremos. Eso es bueno. Verás aquí que las tablas están cambiando de color. Eso es algo que probablemente hayas visto cuando interactúas con muchos sitios web. Estamos acostumbrados a pequeñas cosas como esta. Cada empresa lo hace de manera ligeramente diferente. Pero lo clave aquí es dar comentarios al usuario. Si eso se vuelve rojo aparte del cursor parpadeando en ellos para escribir, simplemente les dice que hicieron clic en él y pueden comenzar a escribir algo de accesibilidad Es una cosa de diseño. Es bueno para la experiencia del usuario, ese es el resultado final. Podemos salir aquí y voy a tomar forma insumo. Voy a aplicarlo hasta aquí. Bien, así que ya se ve mejor. Ahora, para checkbox, esto va a ser similar otra vez, pero vamos a vamos a cambiar la fuente a ferrocarril no solíamos hacer mucho más Bien. Y vamos a cambiar la radio por radio. Lo acabo de hacer sin agregar clases personalizadas porque sé que estas son las clases que quiero usar para esto y luego podrás ver si va a freview si la revisas ahí Radio Radio tiene que estar dentro de sus preguntas, así que no va a funcionar aquí. Estoy bastante seguro de que tampoco funciona si pruebas. No funcionará la vista libre de entrada, tendrás que probar en el sitio en vivo o en un enlace de feview Entonces por último, tenemos esto ahora voy a tomar entrada de forma y voy a hacer pop esto aquí. Y eso probablemente estará bien, en realidad. Entonces notarás que esto se quedará gris. Sólo déjalo así. No intentes cambiarlo. Esta es una de las que en nosotros caíamos formas. Es un poco más rígido. Yo solo recomendaría dejar eso como está. Y cuando apareces, no necesitas preocuparte por el menú desplegable ni nada porque te brinda tus opciones, y esas son las opciones que obtienes. Y eso es todo de verdad. Ahora recaptura, esta es una en la que quiero dedicarme un segundo. Entonces si tienes habilitada la recaptura, y voy a entrar en la oración del sitio porque ahí es donde esto tiene que activarse Por lo que si tienes recaptura activa, se debe agregar a cada formulario en el sitio web Si no está activo, no podrás usarlo. Actívelo como duro, solo necesitas crear una clave desde la lectura hasta el resto de Webflow Es No es demasiado complicado. Vas a granjas. Y luego bajamos aquí a recapturar la validación. Y luego nos registramos para Reino Unido. Entonces puedes ver que ya tengo un par de estos aquí para diferentes sitios web. Solo quieres agregar uno aquí. Yo soy solo voy a cubrir este sitio web modelo tres. El que usas es la versión dos. Sí. Es la versión dos y no soy un robot chatbox. Ese es el que llegamos a usar. El sitio web solo admite ese. Esa es una que quieres asegurarte de usar cada vez. Y entonces aquí no tenemos el dominio. Bueno, en este caso, voy a tener que simplemente poner uno en solo poner el sitio web del modelo tres. Punto com. Cuando haga eso, voy a conseguir dos llaves pueda tomar y tú solo tomarlas y copiarlas, pegarlas de nuevo en Webflow y aquí Asegúrate de que permite guardar tus cambios. Después después de publicarlos y empiezas a recapturar todo tu formulario Entonces de todos modos, así que eso es recaptura. Nuevamente, si lo habilitas, se debe agregar a cada formulario del sitio. Ese es un error común que se hace y te ahorrará algunos dolores de cabeza si solo recuerdas esa cosa Así que volveremos a la guía de estilo aquí. En general, eso es básicamente aparte del botón en la parte inferior aquí. Tenemos que cambiar eso. Bien. Nuevamente, debido a que ya estamos creadas las clases de botón, estas solo pueden agregarse. Generalmente, querrás usar un botón grande para tu botón de envío. Eso es más o menos. No hay mucho más para ello. Ahora que tenemos el formulario que crean las clases y estamos contentos con eso. Podemos regresar a casa y vamos a empezar a construir esta sección de formulario. Vamos a asegurarnos de que tenemos correctamente en contenedor de sección básica básica. Cerradura. Entonces vamos a agregar envoltorio de formulario aquí en realidad. Creo que esa es solo la mejor apuesta. Porque ya he agregado envoltorio de formularios en la puerta rancio, pero sé que voy a tener que cambiarme aquí Entonces lo que vamos a hacer es agregar bloque de formulario. Y lo que vamos a hacer aquí es cambiar el fondo de la sección a algo bonito. Así que eso encaja en línea con el tema del resto del sitio web. Entonces vamos a ir a sección y voy ir imagen de fondo a algo para hacer la altura de esta probablemente 800 otra vez. Quizá no tan grande como eso. A lo mejor tal vez fueron 600. Una vez hecho eso. Toma eso y agregaremos una imagen. La imagen para escoger a cualquiera de aquí que voy por ella en realidad bastante así o una de estas rojas. Eso es bastante bonito pero la portada formal de la imagen. Entonces creo que vamos a elegir algo diferente. ¿Qué? No sé cómo sentirme al respecto. Sí, vamos por algo así. Yo creo. Ahora lo que queremos hacer es solo querer aplicar las clases a este formulario. Y creo que vamos a cambiar un par de cosas, pero te voy a mostrar eso. Bien. Entonces puedes ver que esta es la forma va a tener un enorme contraste con el fondo, ¿verdad? Y esto es algo que puedes dejar y puedes trabajar, pero yo siempre intentaría evitarlo. Y te voy a mostrar lo que suelo hacer para tratar de hacer esto. Entonces para etiqueta, y luego vamos a ir tú vas a ir blancos. Bien. Derecha. Bien. Así que para la entrada, y voy a asegurarme de que tengo lugar aquí otra vez. Vamos por mail.com Si queremos agregar. Yo solo voy a agregar un área de texto aquí también. Yo sigo adelante. Y no creo que agrego una Y luego en el lado final, tenemos que tratar de hacer eso un poco. Esto puede ser bastante tedioso como estoy seguro se puede ver, pero vale la pena al final y el resultado final sea satisfactorio, real. 18. Esto va a tener que entrar. Sí, está bien. Creo que ambos soy t él consistente. Sí, está bien. Bien. Ahora, lo que quiero hacer es que no quiero que la imagen se sienta como la imagen de fondo, lo siento, siento que está divorciada de la forma. Quiero que todo se funda. Quiero que sea un buen año de experiencia cuando alguien haya interactuado con Entonces para el insumo, voy a hacer lo más cool, vamos a poner Nos quieren entrenar Dark bros. Lo que vamos a hacer aquí Antecedentes aún no lo han decidido en realidad. Lo primero que vamos a hacer es disminuir opacidad hasta el 75%, 50%, tal vez solo lo quieras lo suficiente para que sea un número mezclado el fondo, pero no quieres que sea transparente Eso es lo primero que vamos a hacer. Tal vez regrese y cambie esto, pero sólo tengan que aguantar conmigo. Entonces vamos a cambiar el color del texto p en general, pero también voy a cambiar el color del marcador a completamente blanco, así como así Las tablas son La frontera, creo que va a ser completamente blanca, va a ser negra. Creo que iremos con blanco. Creo que eso mantiene bastante alta la accesibilidad. Entonces si acabo de revisar esto, asegurémonos de ese lío. Eso se ve bien. Vamos a tomar esa clase vamos a poner eso aquí. Entonces vamos a poner eso en el área de texto también, pero yo solo para asegurarme Y necesito hacer que el lugar se mantenga son texto blanco de nuevo y toma 2 segundos. Genial. Entonces, veamos mejor. Todo lo que realmente está pasando aquí es que estoy tratando de unir el fondo con la forma. No me gusta lo dije, no quiero que se sientan divorciados el uno del otro. Entonces esto hace un trabajo mucho mejor de eso, en mi opinión, solo necesito hacerlo centrado ahora y necesitan texto a la cima. Entonces vamos a agregar un encabezamiento aquí párrafo aquí. Este va a ser Encabezado Salta yo mismo rumbo, entonces haremos esta H dos. En este caso, sí, creo que vamos a lograrlo. Texto de párrafos. Entonces voy a poner eso en dep porque necesito asegurarme de que de nuevo, el párrafo es simplemente demasiado amplio. Y vamos a hacer ese punto muerto. Rumbo rapero. Creo que ese debería ser el indicado. Yo creo. Independientemente, solo vamos a ir con esto. Encabezando rapero y luego vamos a hacer el ancho del 60%. Y luego necesito asegurarme de que la forma rapero esté centrada para que todo esto funcione, haga que este vérticle derecha Bien. Entonces necesito que se sienta, pero se puede ver cuando lo hago que trae la granja a lo que vamos a hacer es simplemente ir a la granja Y entonces sólo vamos a hacer eso. Esto no se juega bien por alguna razón. Al 800% Bien. Simplemente mejor yo mientras intento arreglar este bloque. Entonces puedes ver aquí los problemas con los que puedes encontrarte cuando haces esto. Hace ahí vamos. Creo que eso debió haber sido un bicho débil. Ahí vamos a trabajar. La forma sigue siendo de color blanco. De hecho voy a cambiar eso. Para hacer sabes lo que es. Es el bloque de formulario el que está causando problemas aquí. Acabo de darme cuenta que lo hacen 60%. Tal vez 70. Puedes decidirte, pero solo estoy tratando de encontrar ese equilibrio. Eso se ve bien. Para la etiqueta del formulario, quiero agregar un margen de poco a la parte superior aquí para todos estos porque un specim Ahora, solo necesito asegurarme de que la sección tenga una altura adecuada. Deberíamos estar bien para irnos. Bien. Bien. Ahí vamos. Esa es una forma. De nuevo, vamos a volver y editar la capacidad de respuesta Nuevamente, vamos a volver y editar la capacidad de respuesta de esto, pero esto te da una buena idea de dónde estamos En general se ve bien. No voy a pedir hacer ninguna edición a esta página No lo creo, pero podemos ver aquí el formulario de factura. Y te voy a llevar rápidamente a configuración de la página para mostrarte las cosas que debes hacer para asegurarte de que tus formularios serán de acceso. Entonces, si vas a la configuración del sitio y luego entramos aquí, puedes cambiar tu nombre de remitente. Desea asegurarse de que sus envíos en firme se reenvíen a la dirección de correo electrónico correcta y asegúrese de que su dirección de correo electrónico esté ahí. Puedes agregar tu línea de asunto como mejor te parezca. Webflow deja notas sobre eso en el lado derecho. Si quieres una plantilla de correo electrónico, puedes agregarla ahí. Ya hablamos de recaptura. Si quieres integrar tus firmas con cualquier otro lugar, pero eso creo. La mayoría de la gente no se va a preocupar por eso porque eso es para la empresa. Filtrado de spam, tenlo encendido. Y sí, definitivamente quieres restringir el acceso a los archivos de subida en. Te diré ahí abajo cuántos de tus envíos de formularios has usado durante el mes. Aparte de eso, eso es todo. Los formularios pueden ser un poco difíciles de diseñar y esas cosas, pero cuando te acostumbras , son bastante sencillos, yo diría que todas las cosas en las formas del ecosistema Webflow son probablemente las más subdesarrolladas en términos del hecho de que El hecho de que necesites estar en Webs plan empresarial para integrar adecuadamente estos formularios con otras plataformas es un verdadero pero cuando te acostumbras, son bastante sencillos, yo diría que todas las cosas en las formas del ecosistema Webflow son probablemente las más subdesarrolladas en términos del hecho de que El hecho de que necesites estar en Webs plan empresarial para integrar adecuadamente estos formularios con otras plataformas es un verdadero patear los dientes porque lo hace mucho más difícil cuando solo estás tratando de enviar información a diferentes lugares como si casi tuvieras que usar Zapier todo el tiempo Pero aparte de eso para los envíos de formularios básicos , son realmente sencillos. Entonces, eso es todo. Y lo siguiente que tenemos que hacer o lo último que tenemos que hacer en esta instancia es crear el pie de página y lo vamos a hacer en el siguiente video. Bien. 11. Lección 9 Cómo construir el pie de página: Todo bien. Así que hemos hecho la mayoría de las cosas que tenemos que hacer para esta landing page. Lo último que tenemos que hacer es agregar un fitter, y luego tenemos algunas cosas de capacidad de respuesta en las que trabajar, y hay un par de pequeñas cosas que voy a mostrarte solo para pulirlo todo Entonces, solo agreguemos un fitter. Y el proceso que vamos a seguir para agregar al fitter va a ser sencillo Entonces va a ser similar a lo que hicimos para agregar la barra de navegación. Entonces puedes hacer esto , en realidad no creo que Webflow no tenga Vamos a ir a los diseños, y vamos a ir a iniciar la biblioteca nuevo y vamos a desplazarnos hacia abajo hasta el fusor puedes elegir el que quieras aquí Realmente no hace la diferencia. Sólo con el propósito de demostrar esto, sólo vamos a elegir este, y voy a hacer que esto vaya al fondo. Una vez hecho eso y estamos abajo aquí abajo. Genial. Tenemos un pie en su lugar. Ahora sólo tenemos que hacerle las ediciones necesarias. Lo primero que voy a hacer es que voy a hacer el fondo negro. De hecho, antes de hacer eso, creo que me aseguraré de agregar todos los activos correctos aquí. Sí. En realidad el negro lo hará blanco. Creo que en realidad podría simplemente quitar el logotipo por completo. Porque esto no tiene que ser demasiado complicado. Entonces cambiaremos todos estos por ferrocarril. Casi ahí. Y voy a dejar esto en No vamos a poner esta parte. La parte en la que estamos pidiendo a los usuarios que se pongan el vestido uni y esas cosas. No hay necesidad, pero la voy a vender y ya veremos. Entonces vamos a cambiar eso de la manera real. Y lo haremos c creo que será, lo haremos. Entonces aquí, haz que eso sirva por eso. Lo último que vamos a hacer es simplemente hacer que estos sean todos blancos. Entonces vamos a voy a cambiar esto a la para doctor para que la clase sea precisa. Yo hago Haremos este botón. Creo que eso sería. Bien. No parece cambiar la edad en realidad. Entonces solo dejaremos eso como por el momento. Eso es básicamente necesidad de estilizar más. No voy a perder demasiado tiempo en ello. Pero hay muchas cosas diferentes que puedes hacer aquí. Estos son, no puedo cambiar. Estas son imágenes, así que solo voy a ellas en realidad. Frontera aquí que definitivamente vamos a querer cambiar porque es un poco. Y entonces eso es todo. Y entonces debería escalar porque es nosotros zona, que sí lo hace. Eso está bien. Sí. Eso es perfecto. Solo queremos hacer ese símbolo de la misma manera con la indumentaria ¿es así? Components component, call The create after the instance that we are creating multiple pages here, we would be just to add on that bar and fister to every page that we are working on Eso es. Entonces, lo último que tenemos que hacer es editar esta página para respuesta y luego estamos en un buen lugar. Te veré en la siguiente. 12. Lección 10 cómo hacer que tu página sea receptiva: Bien. Entonces, ahora que básicamente hemos terminado de crear todo nuestro sitio, solo queremos asegurarnos de que sea receptivo en todos los dispositivos aquí arriba. Entonces en escritorio, creo que en general, esta página se ve bastante bien, bastante contenta con ella. Sabes, no voy a estar gastando mucho más tiempo en esto, pero si lo fuera, quiero decir, creo que este sería un sitio web realmente, realmente genial. Bien. Pero de todos modos, centrémonos en la capacidad de respuesta. En general en escritorio, creo que todo esto como cabría esperar. Ir a tablet, y lo único aquí. Lo que voy a hacer es que quiero que la imagen esté centrada la imagen es demasiado alta aquí. Entonces en la celda, voy a tomar esto y voy a hacerlo centrado para que ya se vea mejor. Y lo que quiero señalar aquí es que en cada punto de interrupción, que es lo que son estos puntos de interrupción, cuando haces un cambio, no lo va a cambiar en el escritorio Pero en esta instancia, cualquier cambio que haga sobre mesa, se aplicará a teléfono horizontal y teléfono. Como que funciona. Y de igual manera, cualquier cambio que haga en el escritorio se aplica a todos ellos. Y cualquier cambio que haga en el móvil, solo se aplica al móvil, así se puede ver el tipo de jerarquía ahí. Todo esto se ve bien. Lo mismo otra vez aquí. Quiero hacer esto centrado En esta forma, este año, voy a aumentar al 70%, creo que es suficiente. Genial. Y eso se ve bien aquí. Y en horizontal, solo volvamos a subir a la cima aquí. Esto se ve bien. Esto aquí A medida que entramos, se puede ver que probablemente no estaría muy contento con eso, pero a medida que salimos, en realidad se ve bien. Este es uno, vamos a probarlo. Si vamos a la arena y eliminamos esta columna, veamos cómo se ve Eso en realidad se ve bien así. Estoy bastante feliz. En realidad, estoy contento con eso porque esta es la cosa. A veces las imágenes no son lo suficientemente buenas como para tener el A veces para algunos sitios web no son lo suficientemente buenas para que no quieras tener tanto énfasis en ellas. En esta instancia, esta imagen es lo suficientemente buena como para poner énfasis en. En realidad esto funciona muy bien, así que voy a hacer eso para la otra sección de aquí abajo. Genial. Eso funciona muy bien. Y Genial. Eso lo dejaremos así. Entonces aquí, de nuevo, voy a cambiar esto a probablemente. Eso es mejor. Por último, móvil. Este no debería tomar mucho tiempo en absoluto. Este se ve bien. Esto necesita extenderse. Voy a sacar esto un poco. Sí, esto arreglado. Esto tiene que cambiarse al 100% ellos van a necesitar alguna almohadilla en el interior de aquí y hacer que ese 20. Y luego para el tamaño del texto en sí, Bien. El lado del texto. Creo que déjame ver. Si hago la sección más grande, expandiría con y tal vez más del degradado atraparía ese texto y haría que se vea bien. Vamos a hacer este 800. Eso es que vamos a bajar aquí. Veremos nuestro gradiente. Entonces vamos a traer esa mitad que es mucho mejor. Ese se ve bien. Eso es brillante. Me encanta eso. Esto tiene que cambiar al 100%. Lo mismo con esto. Bloque de forma. Genial. Y esa justa suelta, genial. Entonces ahí vamos. Eso es. Entonces esa es la respuesta de la señorita Dunn Entonces, todo lo que debes tener en cuenta cuando haces esto, solo estás tratando el sitio web o la página se vean lo mejor posible en cada punto de interrupción individual Eso es. Una vez que hayas hecho eso, be Esta página web está en un buen lugar. Hay un par de cositas que quiero hacer aquí. Y en el siguiente video, te voy a hablar. Te voy a mostrar una interacción específica. Quiero agregar a esta página solo para traerlo realmente a casa porque en este momento está 99% hecho. Sólo hay una cosa que necesito cambiar para llevarla al estándar que quiero que sea, y la compartiré contigo en la siguiente. 13. Lección 11: introducción a las interacciones: Bien. Entonces por eso. Así que esta landing page está prácticamente terminada y ojalá hayas disfrutado pasando por este curso conmigo hasta ahora, pero solo hay una cosa que no puedo dejar y que tiene que ver con la barra de navegación. Se puede ver aquí como un pergamino. A veces el texto simplemente se mezcla completamente con el fondo, y realmente no funciona. Le resta simplemente no se ve bien. Esto no pudo ser publicado como una página terminada. Para arreglar esto, necesito agregar una interacción porque en la parte superior aquí, todavía quiero ser claro y mezclarme con la sección de héroes. Pero como pergamino, quiero que el fondo de la barra na cambie de color a blanco para que siga siendo legible y fácil de usar en el sitio como alguien que se desplaza Entonces lo que vamos a hacer aquí es interacciones es algo que voy a cubrir mucho más profundamente en el seguimiento de este curso, que es el dominio wi flow Pero en este caso en particular, solo vamos a crear una interacción realmente simple, y esta es probablemente una buena oportunidad para ver cómo funcionan realmente las interacciones. Porque ya hemos estado viendo cómo se usan algunas interacciones más pequeñas y menos significativas en la sección de estilo en la columna de efectos. Pero las interacciones son un poco diferentes. Son más complicados. Los, se pueden complicar muy rápidamente. En este caso, es bastante sencillo, y probablemente sea un muy buen ejemplo de usar. Así que sólo voy a hacer esto. Lo que tenemos que hacer aquí es que necesitamos crear una animación de desplazamiento Cuando alguien se desplaza hacia abajo, algo sucederá y cuando el scroll vuelva a subir a la parte superior volverá a la forma en que estaba Para ello, necesitamos un disparador de página. El que vamos a usar es mientras la página se desplaza, esta de aquí Voy a hacer clic en eso y luego vamos a seleccionar una acción, y vamos a presionar reproducir animación de desplazamiento. Ahora bien, no tengo animaciones actuales que se hayan creado, y este es un lugar donde el flujo generalmente no te proporciona ningún valor por defecto. Hay que construir con ellos desde cero. Vamos a crear una nueva animación. Vamos a darle al icono más aquí y vamos a golpear el color de fondo. Puedes ver aquí, me ha dado dos lugares para mí figura el color de fondo. En esta primera, vamos a establecer el color de fondo en completamente transparente, tal como ha sido, y eso es 0%. Y el porcentaje representa qué tan abajo de la página que estamos desplazando Entonces el segundo aquí, vamos a movernos hasta cerca del 5% Lo haremos 4%. Entonces para esta, vamos a hacerla completamente blanca. Ahora lo que vamos a hacer es que vamos a activar la vista previa en vivo. Entonces mientras me desplazo, se puede ver que la barra de navegación ahora se vuelve blanca, y eso es todo lo que estamos haciendo aquí. Pero eso marca una gran diferencia en la experiencia del usuario y la accesibilidad en su conjunto. La forma en que era antes, no se podía publicar en esta instancia, sí puede. Entonces solo necesito asegurarme de que guardemos esto y que esté activo. Como puedes ver aquí, lo vamos a hacer aquí que es activar lo que vamos a hacer es aquí, no lo verás en el diseñador, pero si pulsas el botón de reproducción aquí arriba, y eso no es lo realmente estoy buscando ese 50% aquí arriba, puedes ver como un pergamino cambia, lo cual es perfecto. Eso es exactamente lo que estamos buscando. Y puedes ver aquí a medida que empezamos a desplazarnos, cambia, y eso es exactamente lo estamos buscando. Eso es. Esta página está prácticamente hecha. Estoy absolutamente contento con esta página. Si tuviera todo el tiempo del mundo para gastarlo, podría hacerlo mucho mejor que eso pero en general, creo que esta es una muy buena demostración de lo que puedes hacer en Webflow, si eres principiante y es un muy buen ejercicio para seguir Eso es. Um Bien. Y eso es todo. En el siguiente video, te voy a hablar sobre las picaduras de página para este sitio web y simplemente hablarte sobre cómo publicarlo y conseguirlo en vivo Pero luego después de eso, sí. Así que ojalá ya deberías estar en un mejor lugar con Webflow y entender mucho más sobre la plataforma. Te veré en el siguiente video. Bien. 14. Lección 12 Cómo publicar tu sitio: Entonces, ahora que estamos en la posición que hemos completado nuestra landing page, es posible que estés en la posición que estés listo para publicar esto. Entonces eso es lo que voy a mostrarte rápidamente cómo hacer. Entonces, antes incluso de entrar en la conexión de tu dominio o algo por el estilo, voy a llevarte a oración de la página solo por un segundo. Entonces vamos a páginas, y aquí. En tu etiqueta de título, esta sería la página de inicio en general, pero aquí es donde quieres optimizar para que pongas la marca, que podría ser Tesla. Entonces pondríamos modelo o pedido modelo C hoy o algo así. Algo así. Y entonces tendrías una descripción aquí. Esa etiqueta de título y descripción, luego puede establecer que sea la descripción de su método en la etiqueta de título. Si tienes una imagen que quieres agregar, tomarías yo solo te mostraré como ejemplo. Así que solo tomaremos esta. Probablemente no lo haga porque no es el derecho que copia lo que vuelve a la oración de su página. Y luego pegarías la URL aquí. Todo bien. Eso sí funciona. Bien. Para que lo veas ahí. Así apareceríamos si la gente lo estuviera compartiendo en redes sociales. Entonces aquí abajo, puedes agregar cualquier código personalizado que quieras. Probablemente no va a hacer eso en esta instancia, pero si había algo que necesitabas agregar , aquí es donde lo agregarías. Y luego solo ahorra. Ahora bien, esta página estaría lista para publicar, pero supongamos que tienes un proyecto completo, tendrías bastante de esto y probablemente querrás pensar un poco más detenidamente sobre cómo vas a abordar el SEO. Ahora si queremos publicar, solo subimos aquí, publicamos, podemos publicarlo en nuestro dominio staging. Yo sólo voy a hacer eso ahora mismo. De todas formas. Entonces aquí abajo para la producción. Staging, ese es tu dominio de staging, y luego querríamos llevarlo a producción si terminamos, queremos agregar un dominio personalizado. Si estamos en la configuración del sitio, tendrías que elegir un plan de sitio. Ahora, la estructura de precios de weblos generalmente va con usted pagará por un espacio de trabajo Tienen diferentes niveles para eso y luego dentro de eso cuando esté listo para publicar un sitio individual, pagará por un plan de sitio. El que normalmente iría por el que normalmente recomendaría es el plan CMS. Se puede pagar mensualmente o anualmente. Si literalmente estuvieras publicando algo parecido a lo que acabamos de hacer, no necesitarías la versión CMS, solo necesitarías la básica. Y la razón de eso es que en realidad no hemos usado el CMS Webflow No hemos creado ninguna colección. No hay contenido dinámico. No necesitamos nada de eso. Entonces solo usarías el plan básico. Pero ojalá eso te ayude a darte un poco más de contexto en torno a eso. En cuanto a agregar realmente el dominio, íbamos a publicar, estoy seguro, lo es. Entonces Tendrías que agregar un plan de sitio antes de que podamos hacer algo de esto. Pero te voy a mostrar otro sitio muy rápido. Te voy a mostrar el ambio uno solo para que sepas exactamente cómo se ve Si voy aquí y por aquí, puedes ver aquí que puedes ver que tengo ambu por defecto, y también tengo capaz como otro dominio que pueda usar Para agregarlos, solo necesitas insertar un par de registros TXT y un registro de nombre que insertes en él. Por ejemplo, utilizo nombre ovejas, agrego eso en nombre ovejas, y luego puedo usar los dominios sobre on web flow. Y eso es todo. Eso es lo harías para publicar cuando hicieras tu dominio seleccionas uno que quieres publicar y luego un botón publicado, y entonces eso es bueno para ir. 15. Conclusión próximos pasos: Muy bien, entonces ya estamos al final de este curso. Primero y ante todo, solo quiero darte las gracias por tomarte el tiempo para pasar por este curso. Y cualquier comentario que pueda proporcionar sobre la calidad y cualquier cosa que pueda hacer para mejorarla sería muy, muy apreciada. Aparte de eso, ojalá estés en una posición ahora en la que puedas seguir adelante y seguir construyendo tus habilidades en Webflow y convertirte en un mejor diseñador Hemos cubierto todo, desde la interfaz de usuario de Webflow y cómo funciona realmente la plataforma Así que el diseño de la caja y todos demás componentes introductorios que necesita conocer para que pueda construir de manera efectiva en esta plataforma. Si estás en una posición en la que dices que eres dueño de una pequeña empresa y estás tratando de construir tu sitio web, pero tal vez aún sientes que no tienes todas las habilidades necesarias que necesitas para construir el sitio web que deseas, dudes en ponerte en contacto conmigo y estaré encantado de ayudarte. O de otra manera, simplemente deja lo que tengas que decir en la sección de comentarios de este curso, y me pondré en contacto contigo lo antes posible. Pero en general, disfruto mucho impartiendo este curso, y no puedo esperar para lanzar más contenido como este en un futuro próximo. Así que gracias, y nos vemos en el próximo