Diseño web sin código - Fundamentos de flujo de web para principiantes

1. Video de introducción: Hola, soy Kai. Y juntos aprenderemos todos los fundamentos de Webflow construyendo su primer sitio web desde cero. Ahora, Webflow es una herramienta de desarrollo web sin código que le permite crear sitios web personalizados completos sin la molestia de tener que aprender HTML, CSS y JavaScript. En su lugar, estaremos creando el sitio web completamente visualmente usando la interfaz del editor Webflow. Ahora, en este curso, aprenderás los entallados de cómo se estructuran los sitios web y cómo crear todos los elementos necesarios para un buen sitio web. Estaremos cubriendo la diferencia entre secciones, contenedores, margen y relleno y mucho más. Este curso está basado en proyectos, lo que significa que aprenderemos todas las características fundamentales construyendo una landing page completa desde cero. Estaremos trabajando con imágenes, clases CSS y clases combo, color y tipografía. Pero también vamos a estar aprendiendo a crear unos diseños más complejos usando grid y flexbox. Por supuesto, también aprenderemos cómo crear un formulario de contacto y cómo hacer que nuestro sitio web sea receptivo para que sea utilizable en todos los dispositivos. Quiere aprender flujo de trabajo. Si es así, te veré en la primera conferencia. 2. ¿Qué es Webflow?: Ahora antes de sumergirnos en nuestro proyecto, hablemos de qué es Webflow y qué puedes hacer con él. Nuestro flujo de trabajo no es exactamente un creador de páginas, pero tampoco está lleno de codificación como el desarrollo. No vamos a escribir ningún código. Es una llamada nota llamada herramienta. Ahora lo que subimos hace es donde usamos el diseñador, la interfaz de Webflow para hacer todos nuestros cambios de estilo y el diseño y desarrollar nuestro lado visualmente usando el llamado panel de estilo. Este de aquí mismo. Entonces, como puede ver, tenemos acceso a todas estas diferentes opciones. Podemos agregar un tipo, fondos y cosas así. Y usando eso, podemos construir nuestro sitio web visualmente a través Webflow en segundo plano tarifas HTML, CSS y código JavaScript muy limpio para nosotros. Ahora, tenemos acceso a ese código. Y también podemos exportar nuestro sitio web como código. Pero si no quieres, no tienes que tocar ese lado. Y eso es realmente genial sobre Webflow. Entonces siempre ves exactamente en qué estás trabajando. Todo es visual, lo cual es perfecto para los diseñadores. Y eso nos permite construir prácticamente todos los sitios web. Pero nosotros queremos. Ahora bien, hay algunas cosas que podemos hacer con ese flujo específicamente. Ahora, Webflow es perfecto para sitios web estáticos simples como este que vamos a construir en esta clase. Sin embargo, también podemos construir CMS, impulsados por sistemas de gestión de contenidos sitios web impulsados por sistemas de gestión de contenidos que son más dinámicos. También puedes construir tiendas en línea así como sitios web de membresía. Entonces tenemos muchas opciones. Podemos construir una gran variedad de sitios web diferentes. Y todo sin escribir una sola página de código, lo cual es perfecto. Eso es lo que Webflow es es una herramienta de desarrollo sin código que te permite construir y desarrollar sitios web sin la escritura de código. 3. Proyecto de clase: Bien, así que antes de sumergirnos en Webflow, echemos un vistazo rápido a lo que vas a aprender. Entonces esta clase, vamos a construir un sitio web completo de principio a fin. Ahora aprenderás a construir estas navegaciones. Echar un vistazo a nuestro trabajo de tipografía. Entonces vas a construir todo este sitio web. Entonces tenemos un diseño de tres columnas. Entonces tenemos diseño de dos columnas, lo que significa que estamos Cada va a trabajar con el llamado componente de cuadrícula. Aprenderás a crear los efectos de libración de botón. Vas a construir estas secciones de precios más complejas e incluso cómo construir un formulario de contacto de trabajo. Y al final, también vas a agregar estas luces en animaciones, además de vincular todo el sitio web usando nuestros enlaces. Y eso es lo que vamos a construir en esta clase. 4. Creación y gestión de sitios: Muy bien, así que una vez que hayas hecho cuenta de desbordamiento y estés listo para comenzar, asegúrate de ir a tu panel simplemente haciendo clic en el elemento de navegación del tablero. Y ahora necesitamos crear nuestro primer proyecto. Entonces en tu tablero, tienes aquí mismo una lista del proyecto en el que estás trabajando. Ahora puedes ponerlos en carpetas para crear una nueva carpeta, puedes hacer click sobre este botón aquí mismo. Esto te permite crear nuevas carpetas para que puedas organizar tus documentos un poco mejor. Ahora para crear un nuevo documento, un nuevo sitio web, simplemente haga clic en el botón de nuevo sitio. Ahora, a la hora de poner en marcha un nuevo proyecto, tenemos algunas formas diferentes de hacerlo. Ahora, mi forma preferida es simplemente usar el preajuste del lado en blanco. Es un sitio web sin contenido alguno, sin clases, nada. Un borrón y cuenta nueva. Podemos empezar de cero si quieres tener un punto de partida, pero flow sí tiene algunas plantillas gratuitas listas para funcionar. Pero también puedes comprar plantillas en el mercado de plantillas. Quién iniciará un nuevo proyecto. Simplemente pasa el cursor sobre la plantilla que quieres elegir. En nuestro caso, lado en blanco y haga clic en Seleccionar. Ahora podemos darle un nombre. Vamos a llamarlo proyecto Skillshare. Así, y haz clic en Crear sitio. Y así así, nuestro sitio web es, ha sido creado. Y ahora podemos empezar a echar un vistazo a la interfaz de usuario y cómo trabajar realmente en nuestros sitios web. 5. La interfaz: Bien, así que ahora que tenemos nuestro sitio web creado, hagamos un rápido recorrido por la interfaz de usuario o Webflow. Ahora, empecemos aquí mismo por el lado izquierdo. Entonces aquí arriba tenemos este flujo de trabajo veterinario local cambia al menú de hamburguesas cuando tenemos un ave que nos da acceso a nuestro menú. Así que aquí mismo, podemos acceder al tablero o a la configuración del sitio, por ejemplo, cuando necesites volver a uno de estos, solo usa el menú aquí arriba. Y luego debajo de él tenemos un montón de menús diferentes. Así que por ejemplo tenemos este plus puedo agregar elementos menú. Y aquí por ejemplo tenemos acceso a todos los diferentes elementos, pero podemos agregar a nuestra página y podemos usar para construir nuestros sitios web. También tienes este menú de componentes. Tienes acceso a V Navigator, que nos muestra la estructura de la página. Siempre que trabajamos en nuestro proyecto, siempre queremos tener feed navigate para abrir. Entonces, si no está anclado a un lado, puedes anclarlo al sitio haciendo clic en este icono en el navegador hasta que se vea así. También puedes redimensionarlo si colocamos cursor sobre el borde de la misma, así. Ahora bien, si trabajas en una pantalla muy pequeña, puedes mantenerla flotando así. Asegúrate de que siempre que busques un elemento, quieras verificar tu estructura de tu sitio, asegúrate de usar el navegador para eso. Voy a fijarlo al Navegante. A ti te encanta. También tenemos acceso a nuestras páginas. Ahora, este menú nos permite administrar y buscar en todas nuestras páginas, pero tenemos en nuestro sitio web para crear nuevas páginas, simplemente hacemos clic en esto, creamos un nuevo botón de página aquí arriba. También puedes estructurarlos en carpetas para mantenerlos más organizados. Y por debajo de eso tenemos íconos gratuitos. Uno es el menú CMS, uno es el menú V Usuarios y uno V menú de comercio electrónico. Y esto se utilizará para trabajar con cualquiera de estas opciones. Entonces, si quieres un sistema de gestión de contenidos, así que si creas un blog, por ejemplo, quieres usar el CMS. Si creas sitios web de membresía, vas a necesitar el menú de usuario, y así sucesivamente. Ahora, debajo de esto, tenemos el panel assets, y ahí es donde subimos todas nuestras imágenes, están nuestros íconos y cosas así. Puedes gestionar todo eso en el panel Activos. Y claro, tenemos algunos ajustes que podemos usar. Ahora eso no es algo que nos importe estos momentos. Vamos a cerrar eso. Bien, ahora pasemos al medio. Tenemos esta amplia área derecha. Aquí es donde construimos nuestra página, visitas, nuestro sitio web en este momento, es una pizarra en blanco. Aún no se honra nada. Aparte del elemento body, que es prácticamente solo un titular de nuestro contenido, de nuestro sitio web. Aquí arriba tenemos algunos íconos. Entonces estos son los puntos de interrupción. Usando esto, podemos cambiar entre modo tablet, Enscape, vista móvil o móvil. También podemos utilizar los estándares para decidir cambiar debe ser el tamaño. Estoy fuera de la lona. Y usando estos puntos de interrupción, podemos comprobar rápidamente cómo se ve algo en diferentes tamaños de pantalla. Y es una web muy moderna. Todos tienen un monitor diferente. La mayoría de la gente mira algunos sitios web usando teléfonos o tabletas. Así que todos nuestros diseños necesitan ser receptivos. Y usando estos puntos de interrupción, si podemos asegurarnos que nuestro sitio web funcione y se vea bien, tamaños de pantalla diferentes reales. Ahora, al extremo derecho, tenemos nuestro panel. Y aquí podemos aplicar todos los diferentes estilos y hacer que nuestros sitios web realmente se vean bien. Esto se comportará de manera muy similar a trabajar en Figma o Photoshop. Y la forma de ajustar la topografía de entrada y cosas así. Ahora aquí arriba tenemos algunas pestañas más. Así que tenemos algunos ajustes de elementos que cambiarán dependiendo del elemento que hayas seleccionado. Tenemos un Style Manager que nos mostrará una lista de todos los diferentes clústeres pero que estamos usando en nuestro proyecto. Y somos actividad también podemos limpiar nuestro producto, nuestro sitio web, de estilos, pero no estamos usando y no se usan grasas. Podemos eliminarlos muy fácilmente haciendo clic en el botón de limpieza. Y luego también menú de interacciones, lo que nos permite crear interacciones y animaciones para nuestro sitio web. Ahora lo eventos sobre la interfaz de usuario. No es demasiado. Es simple. Y te veo en la próxima conferencia. 6. Cómo agregar fuentes personalizadas: Bien, entonces antes de comenzar a trabajar en nuestro proyecto de sitio web, tenemos que hacer algunas cosas. Entonces, antes que nada, necesitamos agregar algunas fuentes personalizadas a nuestro proyecto, que es lo que haremos en esta conferencia. Ahora para agregar nuevas fuentes a tus proyectos. O no solo quieres usar las fuentes básicas que ya están preinstaladas y Webflow. Ahora para agregar nuevas fuentes, es realmente simple y tenemos algunas formas diferentes de hacerlo. Pasamos a la configuración de nuestro sitio. Entonces, si haces clic en el ícono Menú y en la configuración de la camioneta en el sitio. Ahora en la configuración de este sitio, puede cambiar su nombre, por ejemplo aquí mismo en la configuración general. Y podemos agregar un favicon y cosas así. Si hay muchas más opciones aquí mismo. Lo que nos interesa en este momento es el paso de la fuente. Así que aquí mismo, da clic en las fuentes. Ahora mismo aquí tenemos tres formas diferentes de agregar realmente nuevas fuentes a Webflow. En primer lugar, la forma más fácil es simplemente usar Google Fonts. Entonces aquí mismo tenemos una gran lista de diferentes fuentes que podemos agregar fácilmente dos flujos de trabajo, tenemos fuentes personalizadas. Entonces, si ya tienes instalada una fuente en tu computadora, o tal vez quieras, quieres usar tus propias fuentes que hayas hecho tú mismo. Puedes subirlos aquí mismo. Y luego también podemos conectar nuestra cuenta de Adobe usando la clave API y en Adobe fonts si quieres. Ahora, vamos a instalar dos fuentes distintas. Una será Open Sans y otra será ferroviaria, que será la que usaremos para rubros y cosas así. Me gusta bastante la combinación. Así que vamos a Google Fonts. Y una vez que hagas clic en este desplegable, podrás comenzar a escribir el nombre de tu fuente que quieras agregar. Tecleemos ferrocarril y busquemos ferrocarril aquí mismo. Justo aquí está. Ahora mismo, tenemos muchas variantes diferentes, son muchos pesos de fuente diferentes, pero podemos agregar. Ahora quiero usar que encontramos principalmente para rubros. Entonces lo que voy a hacer es que me voy a llevar los 700 dólares, que es un peso audaz. Voy a quedarme con la versión regular también por si acaso. Ahora la razón por la que no quieres habilitar todos estos es para mantenerlo al mínimo. Cuantas más fuentes tengas instaladas en tu sitio web con más tiempo, realmente tardará en cargarse. Entonces, elegir los que realmente vamos a necesitar aumentará tu velocidad de cada velocidad de desaceleración de tu sitio web. Entonces vamos a elegir irregular y 700. Y luego simplemente damos clic en Agregar fuente. Y así, hemos agregado el aficionado ferroviario a nuestro proyecto Webflow. Ahora también queremos Open Sans y yo proporciono eso. Yo lo tengo. Se puede instalar vía, vía Google fuentes también. Pero para demostrar cómo instalamos fuentes personalizadas, lo puedes encontrar en los archivos de tu proyecto en la carpeta de fuentes. Entonces lo que vamos a hacer es hacer clic en Subir bajo fuentes personalizadas. Y luego busca las carpetas de fuentes en tus archivos de proyecto. Y aquí mismo tenemos Open Sans Light y Drácula. Seleccione ambos y haga clic en Abrir. Y ahora como puedes ver, tenemos nuestras dos fuentes aquí mismo. Y tendremos que hacer clic en Subir archivo de fuente o en ambos. Y así, hemos instalado Open Sans y Railroad en nuestro sitio web. Si vuelves a nuestro diseñador, lo cual podemos hacer haciendo clic en esta parte morada aquí mismo. Y solo vamos a seleccionar el elemento del cuerpo. Deslízate a tus ajustes de topografía en USD manager. Y aquí arriba se pueden ver las fuentes personalizadas, que es Open Sans. Entonces como puedes ver, si lo seleccionamos, tenemos una tizón y normal. Y también tenemos Ferrocarril aquí mismo. Tenemos un sitio web editorial normal y audaz. Y así es como agregas fuentes personalizadas para tu proyecto. 7. Construcción de la primera Sección - Trabajo con secciones y contenedores: Bien, entonces en las siguientes lecciones, vamos a construir nuestra primera sección, que será esta sección de héroes agradable y limpia. Vamos a agregar algo de relleno al elemento de sección b, r. bueno, al principio vamos a aprender a agregar nuevos elementos. Y también hablaremos de clases CSS. Y entonces vamos a agregar algún texto como este encabezamiento aquí mismo, este párrafo. Te voy a mostrar cómo puedes enviar realmente este párrafo también. Y eso es lo que vamos a cubrir en esta primera conferencia. Vamos a crear el elemento de sección real, vamos a construir este contenedor. Y luego también vamos a sumar toda nuestra tipografía. Esta sección. Empecemos a construir esto en nuestro proyecto. Ahora. En primer lugar, permítanme eliminar esto bien muy rápido. Bien, ahora tenemos borrón y cuenta nueva. Teníamos un clúster creado por flujo de trabajo porque mostré ajustes de Tipografía UP el video anterior. Ahora, antes que nada, tenemos que crear. Necesitas decirle a nuestro sitio web qué fuentes usar y los ajustes básicos para el tipo. Siempre que añadamos un nuevo elemento de párrafo, por ejemplo, asegúrate de tener tu cuerpo seleccionado. Y aquí arriba en este selector de estilo, ahora, en el estilo seleccionado, podemos crear nuevas clases y también podemos editar las etiquetas HTML. Ahora, las etiquetas HTML, por ejemplo, tienes el cuerpo todas las páginas etiquetan, editan V y neumático. Así que todos los elementos de este sitio web, en todas las páginas donde hacemos comercio en este sitio web, todos tienen el cuerpo, todas las etiquetas de páginas. Entonces, por ejemplo si dices Queremos Open Sans, un regular y un tamaño de 16 píxeles en todas las páginas del cuerpo. Puedes hacer veterinario aquí mismo y tener un limpio y consistente. Yo en realidad, nuestro proyecto y clases son prácticamente todos los cambios de estilo que hacemos en un objeto se almacenan en una clase. Entonces, por ejemplo, si haces un botón y le asignamos el botón, lo agrupamos. Si se hunde en un botón novedoso de nuestro panel de elementos, simplemente puede asignar esa clase de botón y se verá exactamente igual. Bien, basta de platicar. Así que vamos a hacer clic en el cuerpo. Todas las páginas etiquetan aquí arriba. Y bajo fuente, no voy a ser fuente Open Sans que hemos agregado a nuestro proyecto antes. Así que ve a fuentes personalizadas y haz clic en Abrir Sans. Quiero mantenerlo en un peso de fuente predeterminado normal. No obstante, quiero aumentar el tamaño a 16 píxeles. Así. El color de la fuente está bien por ahora, el color gris. Una cosa que sí necesito para cambiar la altura de la fuente. Ahora, en este caso, no me gusta trabajar con píxeles. Lo que voy a hacer es que voy a escribir 1.5 e m. Ahora que usaremos unidades EM, una es de 16 píxeles porque dijimos que nuestra etiqueta de cuerpo todas las páginas es de 16 píxeles en tamaño de fuente. Pero una m equivale al tamaño de la topografía que has dicho en tu cuerpo. Etiqueta de todas las páginas. Queremos que sea uno y medio de 16 píxeles. Entonces 1.5 e M. Y ahora tenemos una buena, una buena altura de fuente. Ser texto es legible. Ahora veterineros VET por ahora. Ahora, agreguemos nuestro primer elemento. Ir al icono más nosotros menú de elementos. Y en Layout, vamos a agregar nuestra primera sección, MPD haga clic y arrástrela a su lienzo. O también puedes arrastrarlo directamente en el navegador. Ahora mismo aquí tenemos nuestra primera sección. Ahora vamos a darle una clase a esta sección. Ahora bien, esta sería nuestra zona de héroes. Entonces llamémoslo sección héroe. Y para crear el clúster, simplemente haz clic en Enter en tu teclado. Así. Ahora echemos un vistazo rápido a qué tipo de ajustes queremos darle a esta sección de héroes. Entonces en este proyecto, si seleccionamos la sección de héroe, puedes ver que queremos un relleno de 150, tanto en la parte superior como en la inferior, solo para que tengamos mucho respiro alrededor de nuestro contenido. Añadimos mojados. Es muy sencillo. Vamos a nuestras opciones de espaciado en el panel lateral con tu sección de héroe seleccionada. Y luego podemos hacer clic y arrastrar sobre el relleno. Si mantenemos turno todos los lados, obtenemos relleno. Y si mantienes presionado Control Alt o Control de Comando, puedes aplicarlo a ambos lados. Así que arriba y abajo. Para izquierda y derecha. Ahora para eliminar un estilo que hayas hecho, simplemente haces clic en el tipo azul. Y luego puedes hacer clic en restablecer. También puedes, como puedes ver, Alt y hacer clic en algunos atajos. Así que mantén presionada la tecla Alt. Y así es como puedes quitar el estilo de algo. También podemos teclearlo. Así que haz clic en los números. Entonces 150.150, así. Ahora tenemos 150 píxeles, ambos sumando tanto en la parte superior como en la inferior. Ahora no queremos margen. Entonces aún no lo he explicado. Entonces padding es el espacio que está dentro del elemento y margin es v space, pero le damos fuera de los elementos. Entonces, si quieres poner algo abajo, toda la sección abajo, podemos hacerlo agregando algo de margen. Bien, ahora, una cosa importante es que queremos agregar un contenedor. Ahora la razón de eso es que no todas las pantallas son FE, del mismo tamaño. Entonces algunas personas tienen pantallas realmente grandes con una resolución realmente alta o un monitor ultraligero. Necesitamos contener nuestro contenido y limitarlo a un cierto ancho solo para que podamos mantenerlo contenido. Y en realidad, una información guapa y realmente accesible y legible está bien estructurada. Ahora para agregar un contenedor, da clic en el icono más y agregamos elemento contenedor V desde el panel de diseño B. Y queremos dirigir la lectura a nuestra sección de héroes así. Ahora como puedes ver, tenemos el relleno aplicado, así que el contenedor se asienta muy bien en el medio. Y ahora queremos agregarle algo de tamaño. Porque ahora mismo en realidad está completamente vacío y nada. En realidad no está ahí. Esta frontera es confianza Webflow diciéndonos, oye, ahí hay un contenedor. Lo vemos mientras editamos. Ahora vamos a ir a además del panel y darle un ancho máximo de 1,340 píxeles, así. Ahora bien, ¿por qué usamos max-width? El ancho máximo simplemente significa que este es el más grande que puede obtener el contenedor. Se puede encoger. Entonces, si vamos a un punto de quiebre diferente, se puede ver que en realidad escala muy bien así. Por lo que es receptivo. Si hubieras hecho eso irregular, pero no sería receptivo. Y si compraste algunos SV, ancho mínimo, simplemente escalaría hasta los bordes, pero nunca por debajo de ese punto. Es por eso que usamos ancho máximo , ancho mínimo en algunos casos también. Ahora, ¿qué queremos añadir? ¿Siguiente? Queremos agregar un encabezamiento y algunos textos. Y queremos que eso esté centrado en el medio. Entonces agreguemos algo de topografía a nuestro sitio web. Haga clic en el icono más y busque los ajustes de topografía. Ahora queremos una rúbrica. Así que hagamos clic y nos dirigimos directamente dentro de nuestro contenedor. Y aquí, como pueden ver, tenemos algunas opciones con popped up entonces será veterano directo. Así que tenemos H1 todo el camino hasta H6. Ahora eso es solo el, ¿qué tan importantes son los elementos? Entonces cada uno será el elemento más importante. H2b, segundo más importante, y así sucesivamente. Entonces con esta siendo nuestra cabeza de héroe, este se fijará en uno. Y luego también queremos agregar un párrafo. Bien, Siguiente a ser encabezado es el elemento de párrafo. Simplemente haz clic y arrastra eso debajo tu encabezado dentro del contenedor. Y como puedes ver, siempre se llena con algún texto marcador de posición, que podemos conservar. Se puede trabajar con él. Ahora, veamos nuestro proyecto de ejemplo. Se puede ver que esto se ve completamente diferente. Entonces necesitamos agregar una clase a este rubro. Y también tenemos que darle estilo. Entonces tenemos que darle un tamaño diferente, una fuente diferente, un peso de fuente diferente. Y hagámoslo. Empecemos con veterinario. Ellos seleccionarán el rumbo. Y antes que nada, tenemos que darle una clase. Si no creamos una clase al hacer pequeños cambios, Webflow crea automáticamente una clase para nosotros, lo cual es útil. Sin embargo, no lo es. No permite que nuestro sitio web esté muy limpio. Entonces, por ejemplo si se trata de una clase llamada encabezado principal, y queremos reutilizar la clase de veterinario en una página más adelante es simplemente no. Bien, este es el encabezamiento principal. Podemos aplicar esa clase a este texto. Con nuestra clase para nuestro rubro negociado. Derribado. Y 44. Y aquí mismo hemos instalado la familia de fuentes ferroviarias. Y queremos que la tasa sea negrita y tamaño v. Queremos estar a 56 pixeles. Y vamos a darle a esto una altura de fuente de 1.5 e m. Así. Ahora vamos a darnos también algún texto. Entonces Webflow sitios web que funcionan, vamos a escribir en. Podemos editar el contenido de nuestro encabezado simplemente haciendo doble clic sobre él. Y ahora podemos editar el texto tal como lo haríamos en Google Docs o Harvard. Entonces Webflow, sitios web que funcionan igual que locos y veteranos, nuestra clase de encabezado hecha. A continuación, echemos un vistazo a este párrafo, este párrafo principal. Entonces como puedes ver, es más pequeño, no llega a los bordes de nuestro contenedor como lo hace el encabezado. Y está contenido a 650 píxeles, así que no puede crecer más grande que eso. Construyamos esto. Elige tu párrafo. Dale una clase. Entonces, vamos a ir por el párrafo principal. Vamos a llamarlo párrafo héroe. Sabemos exactamente dónde se usa. Para hacer esto realmente más pequeño. Se puede ir a max-width y escribir en 650 píxeles. Como pueden ver, se encoge. Ahora bien, un hecho muy obvio en estos momentos es que esto no está centrado. Entonces, si nos fijamos en nuestro proyecto aquí mismo, este texto está en el medio. Ahora para lograrlo, basta con seleccionar primero que nada, el rubro principal. Y vamos a centrarlo haciendo clic en una línea y centro. Ahora, esa es la parte fácil. La única razón por la que eso funciona es porque el rumbo principal ocupa todo el espacio hasta los bordes del contenedor. Como se puede ver. No se puede decir lo mismo que para el párrafo héroe, si tuvieras que hacerlo centrado por eso es algo que queremos. No empuja tu cuadro de párrafo en el medio. Ahora, una forma de lograrlo, puedes pasar a nuestras opciones de margen. Si haces clic en eso, puedes ver que tenemos este botón Auto. Ahora lo que hace el auto es simplemente empujar los elementos hasta un lado. Y si aplicamos IN marginal para auto, está siendo empujado perfectamente en el centro de nuestro contenedor. Así como así. Ahora, veterineros, VET para este video. En la próxima conferencia, vamos a agregar algunas imágenes. Entonces vamos a agregar esta imagen de fondo. También vas a agregar esta superposición oscura. Y luego estamos cambiando muy rápida y fácilmente el color de nuestra fuente. Este color blanco. Vas a echar un vistazo a los botones después de eso. En primer lugar, comencemos con la imagen de héroe. 8. Optimización de imágenes y carga - Adición de imágenes a tu fondo: Muy bien, a continuación y agreguemos la imagen V a este fondo. También vamos a cambiar el color de la fuente a blanco. Y estamos dando la imagen de fondo versus superposición oscura para que podamos leer mejor los textos para aumentar un poco el contraste. Ahora, antes que nada, cuando se trata de imágenes en la web, si necesitas optimizarlas, queremos que las imágenes sean lo más pequeñas posible. Por lo que los tiempos de carga se reducen a un mínimo. Ahora, ¿cómo logramos eso? Con sitios web como image compresa our.com, por ejemplo , ahora, vis a vis website, por ejemplo , nos permite dejar caer nuestra imagen aquí mismo y luego comprime un débito y reduce el tamaño del archivo. Ahora en tus archivos de ejercicio, puedes encontrar la carpeta de imágenes. Y en aquí a nombre el héroe imagen J peg. Simplemente haz clic y arrastra eso al optimismo. Y entonces se puede ver que empieza a comprimir nuestra imagen como loca. Entonces, como puede ver, eliminó el 55 por ciento de la totalidad de los datos. Entonces básicamente cortó el tamaño por la mitad. Descargadas. Ya hice esta carpeta optimizada y la guardo en tu computadora. Ahora, a continuación, pongamos esta imagen en la parte de atrás de nuestra sección de héroes. Antes que nada, subamos esa imagen a nuestro proyecto Webflow. Ahora, ¿cómo subimos imágenes a Webflow en el panel Activos? Por supuesto, abre el panel de activos y haz clic en este ícono de Subir. Ve a tu carpeta de imágenes. Asegúrate de usar la versión optimizada y cargarla a Webflow. Ahora, una cosa muy importante, el diseño web es donde no todos pueden ver y algunos, algunas personas usan lectores de pantalla. Entonces, si no pueden ver, si tienen una discapacidad visual, obtenemos el lector de pantalla lee el sitio web de feed para ellos. Entonces necesitamos darle a esta imagen, algunos textos, una breve descripción de lo que es. Solo para que algunas personas puedan experimentar nuestro sitio web como cualquier otra persona. Simplemente llamemos a este escritorio limpio con una computadora una computadora en él. Estoy pensando como mal. Ahora, una cosa que queremos hacer también, primero quieres expandir el panel V Assets. Tenemos más opciones aquí mismo. Y cuando queramos seleccionar nuestra imagen de héroe haciendo clic en esta marca de verificación aquí mismo. Y luego haciendo clic en comprimir. Esto reduce aún más el tamaño de nuestro archivo al convertirlo en un archivo p.sit. Así como así. Eso es algo a lo que sería solo querer acostumbrarnos solo para que podamos optimizar nuestro sitio web tanto como sea posible. Pero ahora agreguemos esta imagen al fondo de nuestra sección de héroes. Ahora para agregar una imagen para ser sección héroe, el fondo. En primer lugar, selecciona tu sección de héroe y luego desplázate hasta los fondos en tu gestor de estilo. Ahora aquí podemos darle un color de fondo si quieres. Vamos a quitar ese estilo. Puedes dar click sobre este ícono más aquí, imagen y degradado. Ahora aquí tenemos algunas opciones diferentes. Podemos agregar algunas imágenes. Podemos darle un gradiente, gradiente radial o un color sólido. Queremos la imagen. Ahora. Elige la imagen V, que será nuestra imagen de héroe. Y luego bajo tamaño queremos que cubra toda la sección, así que así. Pero el posicionamiento está un poco apagado. Entonces ahora mismo, vamos a hacer clic en el punto medio aquí mismo. Centrado. Así como así. También quieres apagar el tailing. Entonces no queremos, si no tienes si la imagen no llena toda la sección y el embaldosado está apagado, se verá así. Si el embaldosado simplemente repetirá la imagen V. Nuestros veterinarias VET para la imagen de fondo. Sin embargo, también podemos agregar una superposición exactamente de la misma manera. Así que vuelve a hacer clic en el icono más. En esta ocasión damos clic en Color Overlay. Ahora simplemente podemos entrar en nuestro seleccionador de color, tal vez aumentar la opacidad un poco así a 70. Y ahora tenemos dos capas aquí mismo. Podemos moverlas, al igual que el panel de capas en Figma o Photoshop. Quieres que la superposición de color esté encima de la imagen, así. Ahora tenemos la imagen pero nuestro texto es ilegible, no como aquí. ¿Cómo cambiamos la variable uno? Una manera extremadamente fácil de hacerlo. Seleccione su contenedor. Y bajo Topografía y bajo color. Cámbialo a blanco. Ahora bien, ¿por qué este bloque, estos dos estilos? Toma ese color del contenedor. Entonces CSS, hojas de estilo en cascada. Siempre y cuando no sobrescribamos este color, tomará el valor de color del contenedor, de su elemento padre. Así. Eso nos puede ahorrar mucho tiempo. Y te recomendaría que trabajaras así siempre que puedas. Para que puedas hacerte la vida un poco más fácil. Ahora, así es prácticamente como subes, optimizas tus imágenes. Cómo puedes agregarlos al fondo de una sección. Y también hemos aprendido a hacer di tri y solo leemos rápida y muy fácilmente. Ahora, en la próxima conferencia, vas a estar construyendo estos dos botones. Aquí. Voy a agregarles algunas animaciones. Y también vamos a usar algo llamado clases combo para crear múltiples variaciones de un solo objeto, como este botón sólido y este botón de contorno. Eso es lo que vas a intercambiar en la próxima conferencia. 9. Cómo crear un elemento de botón: Bien, entonces en esta conferencia, vamos a estar construyendo este botón desde cero. Empecemos. Entonces, en nuestro proyecto Webflow, quieres agregar un botón. Ahora, podríamos ir si los elementos, sin embargo, una forma más rápida de agregar nuevos elementos sería simplemente presionar el atajo de teclado V Control E en su teclado. Y eso abre esta barra de búsqueda. Y ahora podemos simplemente escribir en v elemento que queremos buscar. Entonces en nuestro caso, entonces simplemente puede hacer clic en el elemento y agregarlo a nuestra página. Ahora bien, si dependiendo del elemento que hayas seleccionado, puede que no esté dentro del contenedor. Simplemente puedes arrastrarlo a un contenedor o a un bloque de disco simplemente yendo a usar Navigator y arrastrándolo dentro del contenedor donde quieras que esté. Así como así. Ahora, tenemos que centrar este botón. Si quieres centrar algo o cosas alineadas. Lo primero que debes hacer es mirar su elemento padre. Tenemos este elemento contenedor, pero no está configurado para centrar todo. Enviamos todos estos elementos nosotros mismos con los elementos respectivos. Entonces en este párrafo, si usamos el margen automático y quién está encabezando el uso el align en tipografía. Hagamos algo diferente para este botón. Así que selecciona tu contenedor y lugar, pasa a la tipografía y alinéalo al centro. Así como así. Ahora, toda la topografía en su contenedor estará centrada. Bien, construyamos el botón real. Así que asegúrate de seleccionar tu botón. En primer lugar, tenemos que darle una clase. Entonces en nuestro selector de estilo, llamemos a este botón. Ahora, podemos cambiar el texto de este botón al igual que con los otros tipos de topografía simplemente haciendo doble clic sobre él. Y ahora podemos escribir en nuestro texto. Vamos con ponernos en contacto. Así. Bien, entonces, ¿qué queremos con este botón? Queremos que la tipografía V sea de este color negro o gris. Y el botón en sí debería tener un color blanco y algunas esquinas, por lo que se le aplicó un radio de esquina. Entonces selecciona el botón y comencemos con el. Vamos a nuestras opciones de tipografía y ahora podemos ajustar todo como quisiéramos. Podríamos cambiar la fuente, podríamos cambiar el tamaño. En nuestro caso, solo queremos cambiar el color del botón. Vamos a escribir en el campo de texto, Libre, Libre, Libre. Y eso seleccionará automáticamente este color negro grisáceo. Ahora, vamos a usar esto a lo largo del proyecto. Así que asegúrate de hacer clic en este ícono más, lo que nos permitirá agregar una muestra a nuestro sitio web. Ahora, usando esta muestra, podemos aplicar este color de manera muy fácil y muy rápida a casi todos los elementos. Y si haces un cambio a la muestra misma, todos los colores, todos los elementos cambiarán todos los colores, todos los elementos que tengan mala luz coloreada. Entonces es más o menos como muestras globales en Figma si estás familiarizado con eso. Ahora, una cosa realmente importante a tener en cuenta es la relación de contraste aquí mismo. Ahora mismo, tenemos una muy mala puntuación. Entonces dice fallar. Y veterinario solo quiere decir que apenas hay contraste entre el fondo y el color de la tipografía, pero no lo podemos ver muy bien. Ahora eso no es problema para nosotros porque queremos cambiar el color de fondo a blanco. Vamos a los fondos. Y nuestro color. Arrastre el control deslizante hasta el borde B en la esquina y hágalo blanco. Ahora bien, si vuelves a nuestro color de tipografía, puedes ver que tenemos esta calificación triple a verde encabezándonos, pero sé consciente la proporción es realmente, muy buena y es extremadamente legible. Bien, entonces ahora tenemos el fondo blanco y hemos cambiado el color de nuestro texto. ¿Cómo hacemos estas esquinas redondeadas? Es realmente sencillo con botón profundo seleccionado, anotó dos aguas. Y aquí podemos darle un radio fronterizo. Ahora, podemos ajustar todos los bordes a la vez así. ¿Y si quisiéramos ajustar cada uno individualmente? Puede hacer clic en este icono. Y ahora podemos ajustar todos nos compraron dependiendo de lo que necesitemos. Queremos cambiar todos nos compraron individualmente, todas las botellas al mismo tiempo. Y vamos ocho píxeles de radio de borde. Ahora, una cosa más que quiero cambiar es la, quieres darle un bonus a este botón por nuestro efecto hover. Cuando pasamos el cursor sobre el botón, quiero que el fondo sea transparente y se necesita para cambiar a blanco. Pero eso significa que necesitamos un borde alrededor del botón V. Para agregar un borde, un elemento, simplemente vaya a Bordes. Y aquí tenemos cinco opciones diferentes. Podemos establecer un borde para todos los lados, o podemos cambiarlos individualmente. Estas opciones, vamos a darle un ancho aquí mismo de un píxel. Y asegúrate de cambiar el color del borde a blanco. Así. Ahora bien, si tenemos una vista previa de nuestro proyecto con este icono, puedes ver que nuestro botón se ve bastante bien. Es posible que queramos ajustar el acolchado en el interior, así que dale un poco más de espacio para respirar. Pero si pasas el cursor sobre el botón, solo el cambio de cursor nos dice que es un elemento interactable. Queremos crear una pequeña animación. Entonces tenemos esa retroalimentación que dice, oye, puedes hacer clic en este elemento. En primer lugar, ajustemos el relleno. Ahora, si mantienes el control Alt o el control de Comando, estás usando una Mac. Se pueden cambiar ambos lados opuestos. Así. Vamos con 30 pixeles. Y ahora queremos crear un estado hover. Ahora, los estados de desplazamiento son realmente muy fáciles crear con nuestros elementos de botón seleccionados en nuestro selector de estilo, haces clic en esta flecha desplegable. Y veterinario nos da acceso a nuestros estados. Aunque hacemos clic en hover. Este greenfield, dicen los textos de pantalla es que actualmente estamos editando el estado hover. Ahora, si te desplazas hacia abajo, hagamos los cambios. Entonces para esta animación, para este estado de hover, quiero que el texto se vuelva blanco y el fondo se vuelva transparente. Cambiemos la tipografía y luego cambiemos el fondo. Tan solo hazlo transparente así. Ahora como puedes ver, si pasamos el cursor sobre el elemento, el texto cambia y el patrón de bits v se vuelve transparente. Ahora una cosa que quieres hacer es que queremos que la transición sea un poco más suave. Ahora mismo. Es instantáneo. No se siente muy bien, ¿verdad? Podemos ver que, Oye, puedes interactuar con este elemento. No es la forma más limpia de hacerlo. Ahora para darle una transición a este botón, deje que el botón D y asegúrese de que simplemente esté editando la clase de botones y no el estado de desplazamiento. Si todavía estás en el estado de desplazamiento, simplemente haz clic en ninguno en tu selector de estado. Cuando nos desplazamos todo el camino hacia abajo hasta el panel de efectos. Aquí, ten cuidado con esta pequeña sección llamada Transiciones. Haga clic en el icono más. Y ahora tenemos esta gran lista de todas las diferentes transiciones que podemos editar. Podríamos agregar el color de fondo y color de tipografía, ambos individualmente. Sin embargo, si nos desplazamos todo el camino hacia abajo en la sección avanzada, tenemos todas las propiedades. Tarifas veterinarias, una transición por cada cambio de propiedad individual que realizamos. Ahora podemos cambiar la duración de la misma. Entonces vamos, vamos con 400 milisegundos. Y también podríamos cambiar la flexibilización aquí mismo. Quiero que se quede así. Simplemente déjalo por defecto. Ahora, si tenemos una vista previa nuestro proyecto y tenemos nuestro botón de visión general, puedes ver que es mucho más suave. Se siente muy bien. Y en realidad se siente como un botón real. Y así es como puedes tratar estos botones. Ahora, en la próxima conferencia, vamos a aprender a usar algo llamado clases combo para crear variaciones de ciertos elementos. Entonces como pueden ver, tenemos este botón normal aquí mismo. Pero junto a él, también tenemos este botón veterinarias que delineamos pero cambia a un botón sólido cuando pasamos el cursor sobre él. Y como puedes ver en nuestro selector de estilo, tenemos clase de retroalimentación, inventar, esquema de clase combo. Y te voy a mostrar en la próxima conferencia cómo podemos crear lo malo. 10. Clases combinadas - haz variaciones para diferentes elementos: Bien, en esta conferencia, vamos a hablar de clases combinadas. Ahora vamos a aprender a usar clases combo creando esta segunda variación de botón, que tendrá el contorno y cuándo cambiará para ser de color sólido. Ahora, vamos a construirlo. En nuestro proyecto Webflow. Puedes comenzar simplemente haciendo una copia de este elemento de botón. Entonces el botón flip seleccionado e aquí, podríamos entrar y simplemente hacer clic derecho y copiar o duplicar. También puede simplemente presionar Control C y Control V para duplicar objetos, igual que en otro software. Ahora, antes de hacer la clase combo, quiero limpiarlo un poco porque como pueden ver, los botones están aplastados juntos. Pero en este proyecto de ejemplo que tengo justo aquí, hay un poco de espaciado. Ahora, ¿cómo logramos eso? Mi forma preferida de hacer este espaciado es simplemente envolver ambos botones en un bloque de disco y luego darle un poco de espacio usando Flexbox. Ahora, eso suena muy complicado, pero en realidad no lo es. Así que vamos a construir este envoltorio muy rápido. Ve a tu pestaña Elements y agrega un bloque de disco a nuestro contenedor, así como así. Y cuando queramos arrastrar ambos botones dentro de este bloque rígido, haz clic y mantén presionado tu primer botón, arrástralo al bloque de disco, y luego repite el proceso para el segundo botón. Ahora se asegura de seleccionar este bloque de def. Y vamos a darle una clase llamada envoltura de botones o hero, Hero button rapper. Así. Ahora, ¿cómo creamos esto, esta brecha entre ambos botones? En Diseño, simplemente puede hacer clic en flex, que es el segundo icono. Y ahora como pueden ver, tenemos mucho más control sobre el posicionamiento de los artículos. Ahora mismo. Se justifican a V. Arrancar la goma. Si haces clic en el icono del centro V, podemos centrarlos de nuevo. Y para crear un hueco entre dos elementos. Puedes usar esta área aquí mismo. Sí. Y luego en columnas. Vamos con 18 pixeles. Sí, creo que eso me parece bueno. Bien, y ahora tenemos la brecha negociada. Hablemos de clases combo. Entonces selecciona el segundo botón. Y lo que es una clase combo, es más o menos, nos permite crear una variación de clases que hemos hecho antes. Habrá necesidad en un botón, pero no vamos a estar estilizando y en general el botón para ser exactamente el mismo con cambios menores aplicados a él. Así que selecciona el botón y ve a tu selector de estilo. Y como puedes ver, ya dice nuevo tipo de clase combo para crear una nueva clase combo. Ahora en nuestro caso, queremos llamarlo delineado porque es un botón de esquema. Me han delineado y haga clic en esquema comercial. Ahora tenemos un botón con el esquema de clase combo. Ahora bien, si hacemos un cambio a este elemento button, solo se aplicará a la clase outline. Este botón, esta clase no se verá afectada por ello. Ahora, eso solo nos ahorra mucho tiempo, pero no tenemos que duplicar un montón de clases. Tenemos que construirlo desde cero. Es árabe, forma limpia de leer desviaciones de ciertos elementos. Bien, el siguiente. En primer lugar, echemos un vistazo a esto. Este es el estado de contorno de la animación hover. Así es como queremos que se vea. Pero cambiemos la tipografía a blanca, así. Y el color de fondo a transparente así. Ahora si la previsualiza, puedes ver que tenemos dos tipos de botones. Uno es el botón sólido, que cambiará al contorno. Y uno es el botón de contorno sin animación en este momento, porque nosotros la animación es el botón de contorno en sí. Convirtamos eso en este estado sólido. Así que la edición vía hover estados para clases combo funciona exactamente igual que el elemento botón anterior. Entonces en este desplegable, vaya a flotar. Y ahora podemos editar el estado hover de la clase combo delineada. Así que vamos a dibujarlo hacia abajo. Cambiar ser tipografía a nuestro color gris, y hacer que el fondo sea 100 por ciento. Así. Ahora anteriormente en nuestra clase de botón, ya tenemos una transición suministrada, por lo que no necesitamos hacer ningún trabajo aquí. Vamos a previsualizar eso. Y como puedes ver, nuestro botón de contorno cambia a un botón sólido. Y al revés. Si el botón sólido. Y así es como puedes usar clases combo para crear revelaciones de botones o párrafos apagados. Contenernos prácticamente todo donde necesites ligeras variaciones de la clase ya existente. 11. Cómo trabajar con redes: Bien, así que ahora que hemos terminado nuestra área de héroes, continuación, construyamos esta sección de servicio de columna gratuita. En esta conferencia, vamos a aprender a usar el componente escrito para crear este diseño de tres columnas. Y también vamos a crear las tarjetas de servicio VCE con bloques, que contendrán nuestro contenido. Vamos a agregar algunos íconos y un encabezado y algún texto de párrafo. Vas a encargarte de este enlace animado en la próxima conferencia. Bien, vamos a construir esto. Entonces en nuestro proyecto, antes que nada, vamos a cerrar todo esto. Entonces, si hacemos clic en este icono aquí mismo, puede cerrar todas nuestras secciones abiertas. Y ahora con el cuerpo seleccionado, usa el atajo de teclado Control E. Abre la barra de búsqueda y busca el componente de sección. Simplemente puedes, una vez que lo tienes, una vez que lo encontraste en la barra de búsqueda, y es el único elemento, simplemente puedes golpear Enter en tu teclado y automáticamente lo agrega. Ahora bien, la razón por la que queremos tener el cuerpo seleccionado es porque simplemente agregará el elemento en la parte inferior de nuestro navegador. Así. Ahora, un atajo adicional donde es realmente útil en términos de velocidad es Control. Enter selecciona automáticamente el selector de estado. Entonces, si tienes un elemento seleccionado, por ejemplo esta sección aquí mismo, y presionas Control Enter. Puedes seleccionar instantáneamente el selector de estilo y buscar tu clase. Ahora como aún no tenemos una clase de sección, hagamos eso y le demos un poco de relleno. Vamos con 100 en la parte superior y 100 en la parte inferior. Así. Ahora si volvemos a nuestra sección, podemos ver que es una sección blanca. Y ahora necesitamos el contenedor para sostener a nuestro contador. Entonces, una vez más, controla E y busca los componentes del contenedor. Igual que mal. Controla Intro para seleccionar el selector de estilo. Y luego simplemente podemos seleccionar la clase de contenedor. Bien, entonces ahora hablemos de cuadrículas. Ahora en nuestros elementos, Elementos, diseño de paneles, tenemos este componente de cuadrícula. Simplemente haz clic y arrastra eso a tu contenedor. Y ahora tenemos esta zona justo aquí. Y es que se puede ver de este lado, también tienes este nuevo menú. Ahora aquí podemos editar nuestra grilla. Aquí arriba podemos cambiar las brechas entre estas cuadrículas. Entonces aumentemos la brecha de V aquí mismo para que le gusten 48 píxeles tal vez. Sí, creo que eso me gusta. Ya que vamos a trabajar con un diseño de tres columnas, vamos a agregar una columna o columnas. Simplemente presiona el ícono Plus, así. No queremos crecer. Así que vamos a eliminarlo. Entonces, si pasas el cursor sobre una de estas filas de aquí abajo, puedes ver que tenemos este ícono de basura. Simplemente haga clic en Quitar. Una vez que haya terminado, haga clic en, Hecho aquí mismo. Y terminamos de operar con nuestra red básica. Ahora como hicimos algunos cambios, se puede ver el flujo creado automáticamente esta clase. Si hace clic en esta flecha desplegable, puede hacer clic en Cambiar nombre de clase. Llamemos a esta red de servicios. Justo al lado. Vamos a crear nuestros corazones. Vamos a crear uno de ellos y luego simplemente copiarlo y pegarlo dos veces. Ahora para crear un corte de servicio así, simplemente agregue un bloque de disco, que será v cart en sí. Y llamemos a este bloque de servicio. Bueno, llamemos a esta tarjeta de servicio. Siempre nombra tus clases. Ahora, sí queremos algo de relleno, así que mantén pulsado la tecla Mayús y luego podremos ajustar el relleno por todos los lados. Vamos con 31 píxeles por ahora. Siempre podemos ajustar eso después. Dale un color de fondo blanco. Y como pueden ver, también tenemos este color en el exterior con sombra paralela. Ahora, eso es realmente fácil de agregar en Webflow. En nuestra sección Efectos de su panel de estilo, tenemos sombras de caja. Haga clic en Plus. Y aquí tenemos todas estas diferentes opciones. Ahora podemos aumentar el desenfoque de la misma, así. También podría aumentar la distancia. Vamos a marcar para píxeles. Y también podemos aumentar el tamaño si queremos. Ahora bajo color, podemos cambiar el color. Entonces hagamos la opacidad un poco menos, como diez. Y ahora tenemos esta sombra paralela muy básica. Ahora, agreguemos algo de contenido a esto. Pero sí queremos un icono. Entonces quieres este ícono, un encabezado y un párrafo. Empecemos con el icono D. Ahora, para el icono en tus paneles de elementos, simplemente busca la imagen. Bajo los medios, tenemos elemento de imagen. Haz clic y arrastra eso a tu Escocia. Como puedes ver, se vuelve un poco más complicado. Entonces lo que vamos a hacer, simplemente arrástralo directamente a la tarjeta en nuestro navegador así. Ahora también queremos una rúbrica. Una vez más, acude a tu panel de elementos y destroza el rumbo debajo de la imagen. Así como así. Y entonces también queremos algunos textos de párrafo como ese. Ahora, ahora mismo, todo el texto es blanco. Cambiemos eso seleccionando nuestra tarjeta de servicio a tipografía y seleccionando nuestra muestra de color que la hemos leído antes. Bien, ahora necesitamos nuestra imagen. Necesitamos subir nuestros íconos. Vamos al panel Activos. Haga clic en el icono del archivo v. Y en nuestros archivos de proyecto y nuestros archivos de ejercicios, tenemos la carpeta del icono. Y aquí tenemos todos estos iconos diferentes. Simplemente haz una selección y ábrelas todas. Como puedes ver ahora tenemos nuestros íconos listos para funcionar. Ahora, este será el bloque de servicios de diseño. Así que vamos a hacer clic en. Esto. Aparecerá configuración de elementos p. Y cuando pueden elegir una imagen. Vamos con v Icono de diseño. Y así, hemos añadido nuestro icono. Ahora vamos a ponerle estilo al encabezado y al párrafo. Si echas un vistazo a este proyecto aquí mismo, tienes este rubro de servicio. Y la fuente es ferroviaria, y tiene 28 píxeles de tamaño. Selecciona el encabezado, dale un nombre de clase. Controle, ingrese y llámalo servicio. Encabezamiento. Tus opciones de tipografía. Y busca enseguida, aquí mismo. Y 28 pixeles? Sí. Así. Cambiemos también la altura de la fuente a como 1.3 EM. Sí, suena bien. Cambiemos también el texto de esto, así que haga doble clic sobre él. Y una cosa más realmente importante sobre los encabezamientos. Da click en el real y cámbialo a H2. H1 rumbo es siempre quisimos la parte superior y luego cae en cascada hacia abajo. Entonces vamos con H2 para no saltarse nada. También eliminemos un poco de estos textos que es un poco demasiado. Entonces pongamos a ajustar algunas de estas distancias de espaciamiento un poco mucho entre estos dos objetos. Entonces, seleccionemos la configuración del servicio. Esto puede ver que tenemos este margen de 20 píxeles automáticamente aplicado a él. Pongamos eso a cero. Y creo que por ahora me gusta el espaciado entre estos objetos. Una cosa más es que podemos redondear estas esquinas en este corte de servicio. Selecciona tu tarjeta de servicio, ve a comprarnos. Y para todos los rincones sólo un poquito. Y eso es ahora que queremos darle una clase al texto de servicio en caso de que le hagamos algunos ajustes. Entonces se traduce para ser nuestros bloques. Y ahora vamos a seleccionar la tarjeta de servicio y duplicarla. Haga clic con el botón derecho en duplicar y duplicar. S puede ver que el espaciado entre estas columnas es exactamente el mismo. Y v, una cosa que tenemos que hacer ahora es que necesitamos ajustar los iconos. Esto será desarrollo. En primer lugar, Cambia el título de la película, y luego haz clic en la configuración del elemento de tu icono. Reemplazar imagen y usar v desarrollo. Eso lo puedo sentir. Y cuando hayamos publicado y también cambiemos el icono de V, así. Ahora, eso es todo por ahora. En la próxima conferencia, vamos a echar un vistazo a cómo trabajar con enlaces de textos y cómo podemos hacer esta pequeña animación agradable. Entonces, como pueden ver, si pasamos el cursor sobre el enlace, se mueve un poco hacia arriba. Es decir, los cambios de color de ustedes estarán construyendo ese estado flotando en la próxima conferencia. 12. Enlaces de estilo: Bien, ahora que hemos construido los cortes de servicio básico y nuestra grilla de servicio de tres columnas, lo único que queda por hacer es agregar este enlace con enlaces animados. Entonces, si pasas el cursor sobre él, se convertirá en un color más claro y se moverá ligeramente hacia arriba, dándonos la indicación de que puedes hacer clic e interactuar con este elemento. Bien, así que primero agreguemos un enlace. Antes de agregar el enlace, seleccionemos la tarjeta de servicio y necesitamos asegurarnos de que todos los elementos estén centrados. También sean elementos que vamos a agregar. Cortes de servicio de películas. La forma más fácil de hacerlo es simplemente transformarlo en un flexbox. Las pocas tarjetas de servicio seleccionadas, vaya a sus opciones de diseño y haga clic en flex. Ahora que inicialmente romperá el layout porque primero tenemos que decir, no quieres que sea horizontal. Quieres que sea vertical, así. Y luego queremos alinearlo al centro, lo que fijará nuestros íconos así. Y esto solo asegurará que no importa qué elemento agreguemos a esta tarjeta de servicio, siempre estará centrada. Bien, así que agreguemos el parpadeo de los textos. Ahora, una forma más rápida de agregar un nuevo elemento, esta tarjeta de servicio es seleccionar los textos de servicio. Búsqueda avanzada del enlace de texto. Y la razón por la que seleccionamos primero el texto del servicio es así que el elemento V que vamos a agregar será empujado a continuación. El elemento seleccionado, permanece dentro de nuestra tarjeta de servicio. Ahora bien, hay pocas cosas que tenemos que hacer. En primer lugar, en primer lugar, todos los enlaces en Webflow tienen este estilo básico, el texto azul y subrayamos. Y una forma de deshacerse de ella es editar la etiqueta HTML misma, tal como hicimos con la etiqueta body. Así que selecciona tu enlace, ve a tu selector de estilo y selecciona la etiqueta HTML Todos los enlaces. Ahora si nos desplazamos hacia abajo, podemos eliminar en la sección de tipografía que subrayamos. Y también queremos cambiarlo a nuestro color negro. Entonces ahora tenemos este enlace. Es indistinguible del texto del párrafo. Eso no es un problema. Vamos a encargarnos de inmediato. Ahora, selecciona tu enlace y vamos a darle una clase a este. Llamemos a esto slink serbio. Y queremos agregarle un subrayado. Entonces, si miras este proyecto que he construido anteriormente, tienes este bonito subyacente encima, debajo de nuestro elemento. Ahora, podríamos darle un subrayado. Pero creo que nosotros, no lo hace Es un poquito demasiado cerca. Quién los textos reales. Eso no me gusta. Pero vamos a quitar eso. Y lo que vamos a hacer es simplemente vamos a darle un borde inferior a este enlace. Asegúrate de hacer clic en la parte inferior en la configuración de tu botella. Si David, de uno píxeles y también un color de negro. Al igual que así. Ahora tenemos el subyacente también. Cambiemos el texto de esto. Aprenderás más. Entonces ahora el siguiente, queremos crear la animación para este enlace V efecto hover. Si le echas un vistazo a este proyecto, como puedes ver, si pasamos el cursor sobre el enlace, se vuelve un poco más ligero y se moverá un poco hacia arriba. Ahora, construyamos esto. En primer lugar, acude a tu estado en tu clase de link. Y cambiemos primero el color. Tipografía. Elige un color un poco más claro, tal vez este de aquí. Por conveniencia, hagamos también una muestra de esto. También podemos aplicarlos fácilmente a nuestra frontera. Ahora bien, si pasas el cursor sobre un botón, el color cambia. A continuación. Asegurémonos de que en realidad se moverá hacia arriba como lo hizo en el proyecto de ejemplo. Ahora, podemos hacer eso en nuestro estado de flotación. Bajo la pestaña Efectos, tenemos transformaciones 2D y 3D. Aquí, podemos mover un poco nuestro objeto. Como puede ver, si hace clic en el eje y, puede moverlo hacia arriba y hacia abajo. Ahora solo queremos un poco de movimiento. Entonces digamos menos dos píxeles, un poco arriba. Ahora bien, si pasamos el cursor sobre este enlace, se moverá hacia arriba en dos píxeles. Hagámoslo suave agregando la transición. Vamos a ir con todas las propiedades y 400. Ahora, es una transición suave a nuestra animación. Y nos da, al igual que con los botones, una indicación visual de que oye, puedes interactuar con este elemento. Ahora a continuación, copiemos y peguemos este enlace a este servicio cortes. Podríamos copiarlo y pegarlo, solo seleccionamos copiar con el botón derecho, y luego simplemente pegarlo con Control V. A veces es un poco delicado si no te deja pagar cosas antes de hacer clic derecho. Pero nosotros controlamos el atajo siempre funciona. Ahora una forma en que también podemos agregar este enlace es simplemente agregar un nuevo mensaje de texto. Cuando simplemente le damos el enlace de servicio de clase. Eso es así. Y todas las propiedades se llevan en esta clase. Así que enlazamos funciona exactamente así. Solo necesitas cambiar tus textos. Bien, y así es como creas estos enlaces. Ahora bien, ¿cómo vinculamos realmente las cosas? Bueno, vamos a hacer eso una vez que terminemos de construir nuestro sitio web. Pero si haces clic en la configuración del elemento, tienes muchas opciones diferentes. Podemos agregarle una URL. Podemos enlazar a páginas, puedes enlazar dos secciones. Vamos a hacer eso al final de construir nuestro proyecto. 13. Construcción de un diseño de 2 columnas con redes: Bien, entonces en esta conferencia vamos a empezar a construir nuestras secciones de características. Comenzaremos con este diseño de dos columnas. Es bastante estándar. Vamos a estar creando esta variación oscura de nuestra sección. Y luego vas a crear un diseño de dos columnas, una sosteniendo algunos textos y otra sosteniendo nuestra imagen. Ahora vamos a construir. En nuestro proyecto. Seleccionemos el cuerpo y agreguemos otra sección. Control E para abrir la barra de búsqueda y agregar una sección a nuestro sitio web. Por supuesto, con Control Enter, podemos seleccionar este selector de tipo y seleccionar la clase de sección, pero ya hemos hecho anteriormente. Ahora, esta vez, no queremos que esta sección tenga un fondo blanco. Querrías tener un fondo más oscuro. Así que vamos a crear un formato de clase combo. Seleccione su selector de estilo, y simplemente cree una nueva clase comp llamada dark. Y ahora podemos cambiar tanto la topografía el color de fondo de nuestra sección. Ya que vamos a crear un fondo oscuro, queremos contrastar para que sea lo más alto posible. Para nuestra tipografía, el color será blanco y nuestro color de fondo será negro. Vamos a usar la muestra de color que hemos hecho anteriormente. Bien, ahora, en esta sección, por supuesto, necesitamos agregar nuestro contenedor. Vamos a agregar un contenedor y darle la clase de contenedor. Pero como puedes ver, cuantas más secciones, pero construyas cuantos más componentes hayas terminado de reutilizar como la sección B, el contenedor, enlaces, botones y todas esas cosas. Ahora, a continuación, tenemos que sumar nuestra grilla. Tienes un diseño de dos columnas y vamos a usar una cuadrícula para crear ese diseño. Entonces busquemos el elemento grid y agreguemos eso a nuestro contenedor. Ahora, no queremos, podemos dejar el, obtenemos lo mismo que 16 pixeles. Queremos quitar la segunda fila, así. Cambiemos el nombre del flujo de trabajo malo de clase creado para nosotros solo para mantener las cosas organizadas. Digamos que llamar a leer. Ahora, a continuación, queremos crear, queremos agregar algo de texto. ¿Quién? Nuestra sección. Ahora bien, si tuviéramos que añadir simplemente el encabezado, agreguemos un encabezado. Y también queremos un párrafo. Entonces, si agregas el elemento de párrafo, podrás ver que salta a la segunda fila, a la segunda columna de nuestra cuadrícula. Ahora, lo que tenemos que hacer es que necesitamos envolver nuestro contenido dentro de un bloque de disco. Por lo que def block sostendrá el contenido en una fila de nuestra grilla. Al igual que usamos, servimos como formato de tarjeta. Eliminemos v encabezado, probable que se coagule y agreguemos un simple bloque div. Vamos a darle la clase de servicio. Siguiente rapero. Y dentro de este bloque div, podemos agregar nuestro encabezado así como nuestro párrafo. Y como pueden ver, también queremos tener un botón y una campana. Así que agreguemos también el botón. Ahora bien, no queremos que esto esté centrado. Estaba tomando el está tomando ese estilo del contenedor. Si seleccionas el envoltorio de servicio y te desplazas todo el camino hacia abajo, el estilo es, al igual que con el naranja, el fondo es de color naranja y haces clic en él, puedes ver de dónde viene el valor. Entonces es tomar ese estilo del contenedor. Podemos anular eso simplemente dándole un estilo diferente, así como así. Alinear a la izquierda. A continuación, veamos si este botón, nuestra clase, así como así. Y también empecemos a trabajar en el encabezado v. Ahora, antes que nada, necesitamos crear una clase de encabezado. Ahora vamos a llamar a este encabezamiento. Y ahora vamos a darle una clase combo. Antes de darle la clase combo, cambiemos la fuente de ese rumbo a ferrocarril. Un poste y a EM en altura, así como así. Y lo que vas a hacer a continuación es que le vamos a dar la clase combo de H2. Ahora bien, ¿por qué H2? Porque es el segundo tipo de rubro más importante. Entonces tenemos el H1 superior y luego para cada sección tenemos el encabezado H2. Y la razón por la que hemos agregado la clase combo para estar encabezando clase es que ahora solo podemos cambiar su tamaño y manipularlo sin tener que volver siempre y cambiar el color de la fuente, la fuente en sí, el peso de la fuente y cosas así. Ahora echemos un vistazo al escenario que tengo aquí mismo. Entonces ocho píxeles, un punto a EM. Se puede dejar como está. Cambiemos la oficina de texto haciendo doble clic sobre ella. Algo como esto. Y entonces vamos, si este párrafo es una clase, tengo una gráfica. Y queremos que este sea un tamaño establecido de 650 píxeles. Ahora hacemos la clase de párrafo en sí misma. Podemos mantenerlo como está porque está tomando información del cuerpo, de todas las páginas. Bueno, vamos a darle a esto una clase combo de 650 píxeles. Y con esta clase combo seleccionada, podemos ir al ancho máximo 650 píxeles. Y ahora siempre se establecerá un ancho máximo de 650 píxeles. Ahora, a continuación, cambiemos texto del botón para ponernos en contacto. Al igual que así. Si nos fijamos en nuestro proyecto, puedes ver que tenemos esta imagen rapero también. Aunque. Vamos a seleccionar V2 llamado grano. En una derivada negativa, blog, salta automáticamente a la segunda columna. Y esto sostendrá nuestra imagen. Vamos a llamarlo imagen Rabaa. Y dentro de esta imagen de goma, vamos a poner v elemento de imagen. Ahora solo usemos la imagen de héroe que hemos subido anteriormente. Simplemente lo selecciono y ahora tenemos un diseño básico de dos columnas. Entonces tenemos nuestro texto en el lado izquierdo y una imagen en el lado derecho. Lo que quiero hacer es empujar un poco este texto hacia abajo. Sólo para que sea un poco más interesante. Damos servicio al trampero de impuestos seleccionado. Ve a tu acolchado y simplemente empújalo un poco hacia abajo. Así, como vamos con como 38 píxeles. Y también quiero incrementar algún cambio el espaciamiento entre estos elementos. Ahora bien, una forma de hacerlo es que podríamos aplicar el encabezamiento directamente al elemento del párrafo VI. Siempre que usemos la clase de párrafo o la clase combo de párrafo 650 píxeles, también se tomará el relleno o margen. Entonces lo que vamos a hacer es que vamos a agregar un, otro bloque de disco. Y vamos a rastrear nuestro párrafo dentro de este bloque div. Ahora, nada ha cambiado. Seremos difíciles, simplemente se envuelve alrededor del párrafo sin intercambiar más espaciado entre los elementos. Lo que vamos a hacer ahora es que vamos a agregar algo de margen para ser bloqueo sordo. Digamos como rentar pixeles en la parte superior. Y vamos a ver. Vamos con 28 píxeles en la parte inferior. Ahora la razón por la que envolvemos esto en una dificultad es porque ahora tenemos una forma muy no destructiva de escribir estos márgenes. Ahora cambiemos el nombre de clase de este bloque def. Vaciar clic en el desplegable, renombrar y llamarlo margen. Tenemos 20 píxeles en la parte superior, por lo que la parte superior e inferior irradian. Ahora bien, la razón por la que un énfasis, por lo que si aterriza en el navegante, puede ver instantáneamente, bien, estos regalos diferentes, margen severo. Nuestros elementos. Bien, ahora tenemos esta sección básica negociada. Y como puedes ver si vamos a nuestro proyecto de previsualización que he hecho, tienes dos secciones más de estas. Uno será exactamente el mismo y el otro será volteado. Y el color del texto y el color de fondo también estarán volteando. Construyamos esto muy rápido. Simplemente puede copiar y pegar la sección V. Así control Z sección seleccionada y Control V para pegarlo en. Una forma muy rápida de simplemente cambiar la sección. Así que vamos a quitar la oscuridad. Ahora, como pueden ver, aunque tenemos algunas cosas. Estos elementos tienen el color adecuado. Ellos sacando estos del contenedor. Ahora una solución rápida para eso sería simplemente tomar el trampero de impuestos de servicio, ir al color y cambiar el texto aquí mismo, y cambiarlo a nuestra muestra negra. Ahora no es tomar la información del contenedor, sino de nuestro envoltorio de impuestos de servicio. Ahora, una cosa que tenemos que cambiar es el botón. Necesitamos crear una nueva clase combo para un botón más oscuro con el botón seleccionado en la clase combo. Ok. Y ahora simplemente podemos cambiar los colores del botón rojo. Queremos que el texto sea blanco y el fondo del botón será nuestro gris. Y por supuesto también tenemos que cambiar el efecto hover. Haga clic en el menú desplegable. Evento de flotación de estados. También queremos usar la tipografía. El fondo de la pierna debe ser transparente. Y compramos un será negro. Ahora vamos a echarle un vistazo. Se ve bastante bien, pero creo que tenemos que cambiar, sí, necesitamos cambiar el color del borde de la clase combo oscuro para plagar también. Perfecto. Ahora tenemos un patrón de caminar para esta sección. Y una forma rápida de sí, y por eso hay que tener mucho cuidado a la hora de cambiar estas clases. Entonces, como pueden ver, esta sección se ve muy bien. Voy a dejar esto adentro solo para que veas lo que tienes que buscar cuando crees V. Y harás los cambios de estilo con clase porque salgo y puedes romper muchas cosas. Entonces, como puedes ver, el color del texto también cambió. Entonces ya no es como no textos blancos porque servimos este texto envuelven lo que hemos usado en ambas secciones fue cambiado. Entonces la clase misma, ¿ has hecho los cambios de color a la clase v misma? Una solución rápida para esto sería simplemente agregar una clase combo y llamarla blanca. Ahora, hay soluciones más elegantes para esto. Pero esa es solo una forma rápida de arreglar esto. Así que con la clase combo wide, vamos a cambiar la tipografía de nuevo a blanco. Y como pueden ver, ahora está arreglado. Estas son solo algunas de las pequeñas cosas pero hay que buscar. Y solo sé consciente de lo que estás haciendo y qué clase estás editando. ¿Bien? Pero lo que queremos hacer es que queremos voltear la imagen y el texto. Sí, nada más fácil que eso. Hola a ti y navegante. Y simplemente haz clic y arrastra tu imagen encima del envoltorio de servicio de un switch de lugares así como así. Y ahora también queremos tener una tercera sección del área Publicar. Simplemente vamos a copiar y pegar la sección más oscura y pegarla a continuación. Una nueva sección blanca. Eso va a ser lo mismo de todos modos. Ahora tenemos estos libres reconocen a quienes los llaman secciones. Ajustemos el contenido muy rápido. Así que vamos a intereses para un rápido desarrollo. Y esto será una publicación rápida. Así como así. Cambiaremos las imágenes más adelante. Cuando agregamos un poco más y optimizamos algunas imágenes más, pueden irse y lo mismo por ahora. Ahora, eso es todo para esta conferencia. Y te voy a ver en la siguiente. 14. Diseños complejos - Creación de una sección de precios: Muy bien, así que ahora que tenemos nuestras secciones de características terminadas, construyamos un diseño más complejo. Vamos a construir una sección de precios de columna gratuita. Ahora para comenzar, una vez más, dirige tu elemento corporal y crea una nueva sección. Vamos a hacerlo de la manera más rápida con nuestro atajo de teclado Control. Buscando el espectro. Y al usar Control, Ingresa la búsqueda de nuestra clase de sección. Vamos a usar la versión lite de esto. Cuando una vez más, controle E, busque su contenedor y aplique rápidamente el agrupado. Ahora como puedes ver, si tienes preparados estos clústeres y si conoces los atajos de teclado. Construir el diseño base es increíblemente rápido. Bien, próxima aplicación, y queremos una cuadrícula de columnas libre. Ahora, ya tenemos uno, y en realidad podríamos usar este. Entonces es la clase de red de servicio. Vayamos a nuestro contenedor y busquemos una grilla. Simplemente haga clic en Listo aquí. Así que tenemos acceso a nuestro selector de estilo. Y a nuestro grupo se le llama red de servicios. Entonces busquemos eso aquí arriba, esta grilla de servicios. Y así, tenemos una cuadrícula de columnas libre. Bien, siguiente, si quieres crear la propia tarjeta V. Entonces los antecedentes de nuestra sección de precios o el contenedor para ello. Vamos a agregar en un bloque y Control Enter para seleccionar el selector de estilo. Dale el nombre de la tarjeta de precios. Así. A continuación, comencemos con solo un poco antes de agregarle algo de contenido. Bueno, bajemos y agreguemos tipografía. Queremos que siempre sea negro. Podríamos. Hagamos de la topografía del descarte nuestro color negro. Y el fondo será un blanco sólido, así como así. Ahora, a continuación la forma en que quiero estructurar esta tarjeta de precios. Ahora veamos este proyecto de ejemplo aquí mismo. No lo vas a construir exactamente así. Entonces quiero tener un pequeño título para nuestra tarjeta de precios así como un subtítulo. Entonces quiero bien, primero necesitamos saber lo mucho que realmente es. Así que vamos a hacer este nivel de precios y v por mes o por año dependiendo de tu caso de uso. Y todos estos están envueltos en diferentes bloques diff que podemos alinearlos un poco mejor. Queremos un botón, y también queremos esta lista aquí mismo. Ahora, vamos a construir todo aparte de la lista. La lista va a ser el siguiente video. Bien, así que comencemos con esto. Agrega nuestro div. En primer lugar, asegurémonos de que se trata de un flexbox. Ahora desplácese hasta el diseño y debajo de la pantalla. Asegúrate de que sea un flexbox. El alineamiento quiero alinearlo para que sea centro quedaría bien. Y luego queremos alinearlo a la parte superior también. Así alineado a la parte superior y justificar a vCenter. Jugaremos si Center se ve mejor con la alineación derecha, la alineación izquierda se ve mejor. Se puede jugar con él. Muy bien, así que ahora si tenemos una tarjeta de precios establecida para flexionar, tenemos listas las opciones de alineación. Pero antes que nada, cambiémoslo a dos verticales. Ese fue mi error. Asegúrate de que esté configurado en vertical, línea para ser centro y justificar para ser superior. Bien, Ahora quiero que me dirija a tener un título y un subtítulo. Voy a envolver ambos dentro de un bloque de disco. Busquemos un bloque de def simple y le demos el nombre de precios. Ahora antes de continuar, vamos a darle a esta tarjeta de precios una sombra paralela también. Sólo para que podamos ver en qué estamos trabajando. A lo mejor algo así. Distancia al golpe 15, tamaño 5.0, valor de opacidad de 0.15 en V. Bien, ahora tenemos nuestro encabezado de precios. En húmedo presionando más duro, desea etiquetar. Uno será el nombre y el otro será el subtítulo. Ahora la forma en que lo voy a construir es que voy a usar un elemento de encabezado para el título de la tarjeta de precios. Voy a fijarlo a los tres años. Y vamos a agregar un poco de texto encima después de que hayamos terminado de construir la sección de precios real. Ahora para la clase de este rubro, vas a usar V clase básica de rubro. Apuesto a que vas a crear una nueva clase combo llamada h tres. Ahora, vamos al estilo con un poco, hazlo un poco más grande. Tal vez como ocho píxeles parece estar bien. Y le daremos el nombre de cervecería. Así como así. A continuación con el precio, ya sea selecciónelo. Vas a buscar un elemento de bloque de texto simple, este de aquí mismo. Y asegúrate de colocarlo dentro del encabezado de precios V. Vamos a llamar a esto. Sólo tienes que escribir. Perfecto, también. Perfecto para principiantes, algo así. Y también darle la clase de precios. Subtítulo. Algo en esa línea. Aumente el tamaño a aproximadamente 18 píxeles. Y podemos dejarlo en Open Sans solo para que sea un poco diferente. Nos encabezamos elemento. No me gusta el espaciamiento entre estos dos. Entonces lo que vamos a hacer es ir a nuestro espaciado y eliminar el valor de espaciado. En cambio marcamos, margen inferior a cero. Consideremos ahora que está un poco más cerca. Ahora lo que también podemos ver es que no hay relleno aplicado a esta tarjeta de precios. Así que selecciona tu tarjeta de precios y ve a tus opciones de relleno. Mantenga presionada la tecla Mayús y aplique algún tipo de relleno como 18 en todos los lados. A lo mejor podamos jugar con eso más tarde. Bien, y ahora tenemos el encabezado de precios prácticamente terminado. A continuación, construyamos esto. El precio en sí. Entonces, una vez más, la tarjeta de precios de la conferencia y un bloque de disco a ella, así como así. Y esta vez lo vamos a llamar v def blog. Simplemente precio o etiqueta de precio. Bueno, vamos a mantenerlo a un precio. Ese va a ser nuestro bloque de discos. E invertir el rebaño. Queremos un bloque de texto y otro cuadro de texto. Entonces vamos a Control C y Control V para agregarnos dos bloques de texto. Ahora, digamos que el precio base va a ser tres. Y esto va a ser lo que sea. Es gratis para siempre. Ahora, vamos a darle a este bloque de texto una clase como además de selector. Y llamemos así a esta etiqueta de precio. Le vamos a dar V fuente ferroviaria. De nuevo por sólo alguna variación. Quiero la versión en negrita. Y para además tal vez 32, tal vez incluso 36. Sí, esto se ve mejor. Y asegúrate de que es 1.2 E m porque la altura parece estar bien. Ahora, el segundo libro de texto, vamos a ser este de aquí mismo, el que dice por mes o por año dependiendo de lo que quieras. Entonces llamemos a este tiempo creciente. Sí. Tiempo de fijación de precios. Siempre y cuando sepas con qué estás trabajando, tu equipo lo sabe. Está bien siempre y cuando sepas exactamente lo que representa cada clase. Bien, mantengamos esto en Open Sans. A lo mejor hacerlo un poco más grande, como 18 píxeles. Y 1.3 EM parece estar bien. Ahora bien, una cosa que no me gusta de esto en este momento es que no tenemos espaciado entre el encabezado y la etiqueta de precio en sí. Así que selecciona tu encabezado de precios y aplica algún margen inferior, así. 28 parece perfectamente bien. Ahora tenemos el nombre de nuestra tarjeta de precios. Nosotros etiquetamos precio, y ahora queremos agregarle un simple botón. Y eso es solo básicamente seleccionar la tarjeta de precios, buscar el elemento botón en vet. Y cuando le agreguemos nuestra clase de botón, asegúrese de que sea lo que se ve mejor. Podríamos ir con la versión oscura o el contorno. Vamos con la versión oscura y aprendamos muro. Así. Ahora por supuesto tenemos que añadir un poco de espaciado entre estos dos elementos. Se puede aplicar algún margen inferior al elemento V price. Eso es flexible. A lo mejor un poco menos cuando está en la parte superior, 24 píxeles. Bien, ahora tenemos prácticamente todo hecho. Lo único que vamos a necesitar hacer con la tarjeta de precios está en una lista de características que tiene esta categoría de precios. Y eso es lo que vamos a hacer en la próxima conferencia. 15. Cómo trabajar con las listas - Listas ordenadas y no ordenadas: Bien, ahora para terminar nuestra sección de precios, necesitamos agregar una pequeña lista de características a esta tarjeta de precios. Ahora, en Webflow, tenemos en diseño web en general, tenemos dos tipos de listas, listas ordenadas y listas desordenadas. Ahora echemos un vistazo a ambos. Así que abre tu barra de búsqueda y simplemente escribe en la lista. Y eso te dará acceso al elemento V list a tu tarjeta de precios. Ahora como pueden ver, tenemos estas viñetas. Y aquí podemos hacer doble clic y podemos escribir algún contenido. Ahora bien, en nombre, sin embargo, algunas opciones más, por supuesto, en la configuración de la lista. Si haces clic en esta rueda aquí mismo , tienes algunas opciones. Entonces tenemos dos tipos de listas. Tenemos D lista desordenada, que es la lista de viñetas. Y luego también tenemos la lista ordenada, que simplemente va bajando 1-3 y similares. Y también tenemos la opción de retirar la bala por completo. Si solo quieres una lista. No necesitamos viñetas ni números en el costado. Podemos quitarlo de esa manera. Ahora, en nuestro caso, queremos crear una lista desordenada. Y si hacemos doble clic sobre esto, simplemente vamos a escribir en lista uno al otro solo como marcador de posición. Ahora podemos simplemente encajo para cada punto, así. Y para darle estilo a estos elementos de la lista, tenemos algunas formas de hacerlo. Entonces en el electoral de nuestro estado, él puede eva, podemos crear una nueva clase para los elementos de la lista. Si bien lo que es aún más fácil, podemos ir a la etiqueta HTML, todos los elementos de la lista. Y ahora podemos hacer los ajustes como los necesitemos. Y como puede ver, cada elemento de la lista en nuestro sitio web cambia en consecuencia a los cambios que hacemos. Entonces digamos que queremos que esto sea de 18 píxeles. Y creo que el d, Podemos dejar el resto igual. Así como así. Sí. Lo que quiero hacer, sin embargo, es que quiero tener esto centrado. Entonces quiero que esté perfectamente en el centro, como pueden ver ahora mismo. Está un poco desviado a la derecha. Y eso es porque el elemento list tiene algún relleno base de 40 aplicado a él. Vamos a quitar ese relleno, que sea cero. Como puedes ver, Webflow hizo nuestra clase matriz V que centraba perfectamente nuestra lista. Ahora un veterinario no incluye las viñetas. A lo mejor necesitamos empujarlo, solo necesitábamos mirarlo más o menos. Algo así, como diez. Esto me parece bastante centrado. Y también queremos darle cierto margen también para separarlo del botón, un poquito. Como 24 tal vez. Y así, hemos construido esta tarjeta de precios muy básica. Ahora, si quieres tener más elementos de lista, simplemente puedes copiar y pegar un elemento de lista y agregar tantos como quieras o eliminarlos. Y eso es prácticamente todo para esta tarjeta de precios. Ahora, vamos a opiearlo y pegarlo, así que automáticamente salta a la segunda fila. Cambiemos también el texto. Entonces esto será básico. Y será, digamos solo 4 dólares al revés y por mes. Entonces copia eso. Y eso será cero. Eso será de 9 dólares mensuales. Perfecto para lo básico. Y perfecto para filas así. Ahora, como agregamos mate v encabezando un campo H, queremos tener una etiqueta H2 por encima de esto. Hagamos esta grilla un poco más pequeña. Y con nuestro contenedor seleccionado, agreguemos un encabezado. Asegúrese de que esté en la parte superior del contenedor, en la parte superior de la rejilla. Y también hay que darle la clase de la clase de rubro H2. Y ahora está ajustado a la derecha, tan malo porque nuestro contenedor tiene el color base del blanco. Cambiemos eso. Ahora vamos a verificar de nuevo si todo sigue funcionando. No lo es. Si haces estos cambios, siempre quieres estar atento a estas cosas. Entonces porque solo teníamos la clase básica de contenedores en nuestra sección de héroes y eso lo hicimos blanco. Tenemos que ajustarlo en consecuencia. Entonces digamos contenedor y darle la clase combo. ¿O por la derecha? Ahora podemos arreglar mal, volvemos a bajar. Y ahora por cada contenedor que tengamos, el color será negro. Eso se llama este precio. Y agreguemos también un párrafo. La clase de párrafo. Y creo que la clase combo 650 debería verse bastante decente. Sí. Asegurémonos de que esté centrado. Ahora bien, si cambiamos estos márgenes, claro que también va a cambiar aquí mismo donde usamos la misma clase combo. Ahora una forma de combatir eso es simplemente envolverlo en un bloque de disco. Así. Llamemos a este centro y asegurémonos de que esté alineado a la izquierda, no funcione. ¿Necesitamos flexionarlo? A veces piensas que algo debería funcionar. Si algo no tiene sentido, solo prueba de una manera diferente, juega con los escenarios. Podría arreglar tu problema. La mayoría de las veces, podrás encontrar una solución. Voy a empezar a probar algunas formas diferentes de hacer algo. Ahora. Quiero crear un poco de relleno para ser, así que vamos a agregarlo al centro. Si algún margen. Así que empuja eso un poco hacia abajo. Entonces con nuestro centro, este empuje hacia abajo. Y creo que esto me gusta. Podríamos eliminar algo del texto de marcador de posición base así. Y así, creamos una sección de precios básicos de aspecto bastante decente. 16. Cómo crear un formulario de contacto: Bien, por lo que ahora 50 sección de precios hecho. Hablemos de una de las cosas más importantes de cada sitio web o contacto del cliente o de su cliente potencial. Necesitan tener una forma de ponerse en contacto contigo para tu servicio. Entonces, por supuesto, necesitamos agregar un formulario de contacto a nuestro sitio web. Ahora crear formularios de contacto es realmente increíblemente fácil en Webflow, y son solo unos pocos pasos. Entonces, antes que nada, construyamos una sección tal como hicimos con nuestra sección, elemento de sección. Si es nuestra sección plus. Ahora, ya que aquí hemos usado el fondo blanco, quiero que alternen entre oscuro y claro. Entonces agreguemos la clase combo, dark. Y claro que tenemos que poner en un contenedor. Y esa clase de contenedor o contenedor. Ahora, en ese contenedor, quiero tener un encabezamiento y un párrafo. Agreguemos el encabezamiento igual que aquí arriba. Y asegúrate de elegir v rumbo tipo H2. Y como puedes ver, el color del texto es exactamente el mismo color que el color de fondo. Así que ve a tu contenedor y añádele clase V combo blanco. Eso solo será typeof para configuraciones de hipertrofia de negro a blanco. Ahora, pongamos esto y digamos que ponte en contacto. Y también necesitamos aplicar nuestra clase de rumbo, rumbo H2. Y también queremos agregar un pequeño párrafo debajo de eso. Entonces una vez más, gráfico de barras de búsqueda de avena. Dale la clase de párrafo de alimentación, pero hemos hecho y queremos usar el formato de clase combo V 650 píxeles. Vamos a elites algo de eso Placeholder Text. Y queremos tenerlo centrado. Entonces vamos a hacer la misma configuración aquí con esta clase central, pero hemos hecho, Vamos a frotar en un bloque de def. Pon el párrafo dentro nuestro bloque de def y regala que la clase de bloque vCenter. Y así, hemos centrado nuestro texto. Bien, siguiente, hablemos del formulario de contacto. Ahora, tenemos acceso a todos nuestros elementos de contacto en el panel de elementos, el panel aquí abajo en formas. Tenemos acceso a todos los elementos individuales, pero podemos tener también tenemos este bloque básico de forma. Al agregarlo, agregamos un elemento de bloque de formulario a nuestro sitio web. Ahora echemos un vistazo rápido a la configuración. Tenemos tres estados diferentes a esto. Efd estado normal, que es la forma B misma. El estado de éxito, que aparece si el correo electrónico se envió con éxito y si algo sale mal, por supuesto tienes un estado de error. Ahora, también podemos dar nuestro nombre anterior. Vas a dejar todas estas opciones, SVR. Ahora bien, si abrimos el bloque de formulario en nuestro navegador, puedes ver que tenemos tres divs diferentes. Una es la forma V misma, que en realidad nos ayuda a vi etiquetar campos de texto y los botones. Y cuando tenemos dos motivos, mientras que el mensaje de éxito y el mensaje de error. Estos están ocultos ahora mismo. Y son exactamente lo mismo, pero te he mostrado antes diferentes estados, simplemente están ocultos. Ahora lo que quiero hacer es que no quiero que la forma se estire hasta el final. Entonces lo que vamos a hacer es que vamos a agregar un nuevo bloque de disco, harapado en la parte superior del bloque de formulario y poner el bloque de formulario dentro de ese bloque div. Vas a darle a ese bloque def una clase de envoltorio de formularios, y un ancho máximo de, digamos 750 píxeles tal vez. Sí, esto se ve bien. Y claro que tenemos que centrarlo. Así que vamos a aplicar algo de margen automático a ambos lados. Como veterinario. Bien, ahora hemos centrado nuestro elemento, nuestro bloque de formulario. Y vamos a diseccionar esto un poco. Así que para cada campo de texto solemos tener una etiqueta y el campo en sí. Este campo simplemente nos dice, está etiquetado, nos dice de qué se trata el campo, qué tipo de información necesitamos poner en él. Y así es como se estructuran estos campos Individuales, y por supuesto al final, tenemos un simple botón de enviar. Ahora, a pesar de que esto se llama botón de envío aquí mismo, simplemente podemos aplicarle nuestra clase de botón. Así como así. Ahora el patrón coincide con todos los demás botones. Incluso puedes cambiar las ofertas de texto de cruz doble clic sobre él. Y aquí podemos escribir el texto del botón V. Vamos a recibir mensaje enviado, así. Bien, ahora una cosa que quiero cambiar como quiero, todas estas alineadas a la izquierda. Entonces el Bloque de Formulario seleccionado. Pasemos a los ajustes de topografía y la alineemos para dejarla. Como puede ver, Webflow creado automáticamente antes de clase para nosotros. Ahora bien, con estas etiquetas de campo, lo mejor de ellas es que en realidad no necesitamos crear una clase para ellas. Si seleccionas la etiqueta de campo y vas al selector de sitio, puedes ver que tenemos una etiqueta HTML de todas las etiquetas. Podemos agregarlo. Entonces hagámoslo. Seleccione el peso normal de la fuente Open Sans. Mantengámoslo a 16 píxeles. Creo que esto se ve bien por ahora. Ahora lo que quiero, el primer formulario, quiero hacer clic en el nombre, la dirección de correo electrónico. Entonces estos dos están perfectamente bien. Podemos mantenerlos como PR, pero también quiero un campo de mensaje. Ahora, vamos a nuestro menú Agregar y bajo formularios. En primer lugar, vamos a caer en una nueva etiqueta. Por aquí. Llamemos a este mensaje. Y agreguemos en el elemento de área de texto. Ahora este elemento te permite escribir tu mensaje real. Y dejémoslo por debajo del mensaje V, así como así. ¿Bien? Ahora bien, una cosa que ves instantáneamente es que tenemos con texto de marcador de posición aquí, pero no en la dirección de correo electrónico o el campo de nombre. Ahora como podemos agregar texto marcador es simplemente hacer clic en el icono de Configuración. Aquí mismo tenemos acceso a nuestra configuración de campo que podemos darle un nombre. Y entonces podemos declarar el tipo de entrada que queremos que este sea. Ahora mismo. Son textos sencillos, así que todo vale. Entonces puedes escribir un nombre, así puedes escribir mensajes y cosas así. Pero también tenemos contraseña de correo electrónico, número de teléfono. Para ello. Ya que es sólo un nombre sencillo, lo vas a mantener en avión. Y podemos darle algunos textos de marcador de posición. Solo ve con algo básico, John Doe, punto, punto, punto. Y entonces tienes dos campos. Se requiere uno. Por lo que no se puede enviar el formulario si no se ha rellenado la información. Entonces queremos eso. Y tenemos autofocus, que no queremos en este caso, enfoque automático simplemente selecciona para que se forme para ti. Una vez que ingreses al sitio web, podemos comenzar a escribir instantáneamente. No quieres eso en este caso. Ahora editemos la configuración desde nuestro campo de correo electrónico. Cambiar el tipo a correo electrónico. He sido un correo electrónico de marcador de posición. Vamos a ir con algo ficticio como John doe@gmail.com. Manténgalo en lo requerido, y eso es todo. Ahora, por supuesto, podemos editar estos campos, pero tenemos un control total del diseño sobre ellos. Una cosa que quiero hacer es cambiar el texto del marcador de posición. Entonces, antes que nada, vamos a darle a esto una clase llamada campo de texto. Y para editar el marcador texto ego levantado campo de texto seleccionado. Nos bajamos. Y como este es un campo de texto, tenemos este estado de marcador de posición. Ahora inmediatamente cierra muchas ventanas. Y aquí tenemos acceso a la topografía de la misma. Y como puedes ver, podemos darle estilo como cualquier otro. Vamos con algo como esto, como 30, 30% en valor de opacidad V, y tal vez hacerlo un poco más pequeño, como 14 píxeles. Sí, eso me gusta. No es demasiado intrusivo, pero no muy poco Eva. Ahora, agreguemos la clase V TextField a los otros campos de texto. Así. Ahora una cosa que aún necesitamos diseñar son los diferentes estados del estado de éxito, así como v estado Aero. Ahora selecciona tu bloque de formulario y puedes alternar el éxito y nuestro estado aquí mismo en nuestra configuración de bloque de formulario. Si simplemente hace clic en la configuración del Bloque de Formulario aquí arriba, puede hacer clic en el éxito. Y vamos a hacer un estilo realmente simple. Hagamos de esto un fondo verde. Un poco más oscuro, solo esto, se pone verde nos dice, bien, funcionó. También. Vamos a redondear un poco las esquinas. Al igual que para que puedas dejar tu texto tal como está. Este sería nuestro estado de éxito. Y para editar v Aero estado, una vez más, el bloque de formulario inactivo. Y da clic en la flecha aquí mismo. Y vamos a darle estilo al estado de error. Ahora aquí solo queremos un negro rojo ligeramente más oscuro así y también redondear las esquinas un poco así como así. Y creo que eso se ve bastante decente. 17. Cómo construir una navegación: Bien, si el formulario de contacto hecho por ahora, solo quedan dos secciones donde realmente no podemos llamarlas secciones que nos quedan para construir. Y uno por supuesto, será el pie de página, y el otro será la navegación. Entonces comencemos a construir una navegación para este sitio de representante. Ahora un Webflow hace que esto sea realmente fácil y conveniente para nosotros porque si miras el panel Elements, y nos desplazamos hacia abajo alguna variedad, justo aquí en la parte inferior. En la categoría avanzada, tienes un componente Navbar prefabricado para que diseñemos y diseñemos. Así que vamos a arrastrar eso y asegurarnos de que esté en la parte superior de la sección de héroes. Eso es así. Ahora vamos a ponerle estilo a esta barra de navegación. Ahora bien, si miras esto, como puedes ver, la nefrona es su propio pequeño icono. Y luego solo tiene un contenedor, un bloque de rama, un blog de enlaces donde podemos poner en nuestro logo, así como un div llamado menu nav, que contendrá nuestros enlaces de navegación. Estos bonos aquí mismo. Y cuando también un botón invisible. En un tamaño de pantalla más pequeño. Ya ves que tenemos este Berg yo puedo. Ahora para esta conferencia, vamos a darle estilo a la versión de escritorio de esta barra de navegación. Empecemos con la parte superior. Ahora quiero que este sea un simple color blanco. Entonces, antes que nada, dale un estilo, una clase, y vamos a llamarlo navegación. Entonces vamos a cambiar el color de fondo de gris a blanco. A continuación, vas a seleccionar el contenedor. Y vamos a darle la clase básica de contenedores. Entonces es exactamente el mismo ancho que el sitio web restante. A continuación, veamos este bloque de sucursales. Ahora, podríamos, solo, en una imagen, también podríamos agregarle alguna topografía básica también. Si no tienes un logo listo ahora mismo, hagámoslo en realidad. Vamos a tirar, en realidad vamos a usar un bloque de texto y poner eso en la marca. Así. Simplemente llamemos a este sitio web de flujo de trabajo. Ahora, una cosa que tenemos que arreglar ahora es que tenemos que hacerlo realmente enviado. Entonces, si vas a seleccionar el contenedor, queremos, podríamos flexionarlo en realidad y luego simplemente alinear todo para que quede centrado. Por lo que se seleccionaron 50 contenedores. Vamos a darle una clase combo llamada nav y ponerla como Flexbox. Y vamos a hacer eso horizontalmente y alinearlo al centro. Así. Bien, Ahora lo que probablemente te hayas dado cuenta es que nosotros Nav Menu fue empujado todo el camino hacia el lado izquierdo. Ahora eso es muy fácil de arreglar. Menú seleccionarlo, vamos a darle un menú de navegación de clase. Simplemente aplique algo de margen automático y se empuja hacia la derecha, así. También puedes darle estilo a este texto de logotipo. Simplemente llamemos a este banco de logo. Formamos dos ferrocarriles. Hazlo audaz y aumenta el tamaño hasta que estés feliz. 24 píxeles parece estar bien. Por ahora. Bien, ahora tenemos nuestro logo. El, todo está centrado, y tenemos este nav links aquí mismo. Ahora echemos un vistazo a estos. En primer lugar, como puede ver, no se le ha aplicado ningún estilo, por lo que no se le ha aplicado ninguna clase. Entonces cambiemos eso antes de hacer cualquier cambio. Se llama nav link y aplica la clase a todos los enlaces. Así. Ahora bien, si haces algunos cambios, ya que estamos usando la misma clase, todo va a ser exactamente igual. De hecho hagamos esto como 18 píxeles, solo un poco más grande que V o el texto. Ahora como estamos acostumbrados, ya que estos son enlaces que queremos diseñar, hacer algunos efectos de hover a ellos. Entonces hagamos algunos básicos. Agreguemos un estado básico de libración. Desplegable, ve a estados de flotación de la clase naftalina y hazlo un poco más ligero. Usemos este color gris. También podríamos moverlo un poco hacia arriba. Yo creo. Pasemos a las transformaciones 2D y 3D. Menos dos, tal vez menos dos en el eje y de movimiento. Agreguemos una transición a la cama. En una transición o propiedades, vamos a pasar más de 400 milisegundos. Y ahora tenemos estas pequeñas animaciones agradables en nuestro Netflix. ¿Verdad? Ahora. Eso es más o menos. Sin embargo, hay una manera de elementos de navegación. Entonces, si vas a Configuración de Elementos y seleccionas el menú de navegación, verás que tenemos un montón de nuevas configuraciones en la configuración de la barra de navegación. Ahora, puedes alternar el menú del móvil como puedes verte, también puedes ocultarlo. Ahora, vamos a echar un vistazo a estos en la próxima conferencia, donde vamos a hacer que este móvil sea receptivo. Lo que quiero mostrarles es esto de aquí. El F es una pequeña opción ordenada llamada Agregar enlace, que nos permitirá agregar un nuevo enlace de navegación a la barra de navegación. Ahora ten en cuenta que no se le ha aplicado ninguna clase sin embargo necesitamos aplicar esa clase. Pero la opción siempre es donde podrías, por supuesto, también copiar y pegar tantos de estos enlaces como necesites. Bien, ahora editemos estos enlaces. Entonces no necesitamos un enlace a casa porque ese será nuestro propio logotipo. Entonces, si haces clic en el logo, volveremos a la casa, a la cima aquí. Quieres, sin embargo, características, que se dibujarán aquí mismo. Y luego queremos un enlace para precios y contacto. Vamos a entrar iPad. Precios. Y el contacto ya ha fallado para que podamos mantenerlo como está. Y así es como creas una navegación básica o tu sitio web. 18. Cómo hacer la navegación móvil: Bien, Así que en la conferencia anterior, hemos hecho esta barra de navegación básica, el sitio web. Ahora necesitamos que sea móvil responsive. Entonces, si vas a un punto de interrupción más pequeño aquí mismo, puedes ver el cambio de icono, el ícono hamburguesa, y el menú en sí desapareció. Entonces nuestro lugar de navegación se ha ido. Pero tenemos este botón aquí mismo. Al igual que ya sabes, de otros sitios web móviles. Ahora, antes que nada, no creo que sea necesario. Tener el botón de menú y la vista de tableta. Ahora, ¿cómo ajustamos eso? En la configuración de nuestro icono de menú de barra de navegación para tablet y abajo, simplemente puedes arrastrar ese deslizador al siguiente punto de interrupción. Y como puedes ver ahora tenemos nuestro menú principal visible en el tamaño de la tableta, pero invisible, y el ícono de VFD en el teléfono apaisado y abajo. Y eso es exactamente lo que queremos porque no tenemos muchos elementos y una barra f. Eso está perfectamente bien. Cambiemos al modo horizontal móvil. Y empecemos a peinar ahora. En primer lugar, gases antes queremos el icono aquí mismo. Entonces, la forma más fácil de hacerlo es simplemente darle algún margen a la izquierda del margen automático, empujarlo hasta el final hacia la derecha. Así como así. Ahora, a continuación, cómo darle estilo a esto. Porque si tenemos una vista previa de esto y si haces clic en el menú, ahora, vemos demandarte ahora, pero no en nuestro diseño de vista. Así que volvamos a volver a la configuración de la barra V f. Puedes mostrar el menú aquí mismo usando Mostrar y apretado. Y ahora puedes volver al Style Manager y darle estilo a este menú. En primer lugar, necesitamos cambiar el color de fondo del botón de menú. Así que vamos a seleccionar el elemento. Y cambiemos eso. Vamos a cerrarlo. En realidad, sé que podemos ocultarlo así. Y vamos a acercarnos al fondo, ventralmente el color de fondo al blanco. Y seleccione el icono. Ahora puedes importar tu propio icono. Olvídate si quieres. Creo que está bajo Tipografía. Sí. Se puede cambiar el color tipográfico del icono. Es un icono SVG aquí mismo. Y cámbialo a negro. Ahora de eso se ha ocupado. Y cuando necesitamos cambiar esta caja gris bastante fea. Ahora esa caja gris es en realidad el menú Nav def. Ahora quiero que esto cubra la totalidad de la pantalla. Ahora bien, ¿cómo lo hacemos? Seleccionamos el Menú Nav y el valor de altura. Se puede cambiar eso a 100 vh y altura de ventana gráfica de los vets. Si haces eso, no importa qué pantalla la estés viendo desde la ventana, altura es siempre la altura completa de la pantalla de la ventana. Usando esto, esta medición asegura que el menú cubra toda la pantalla. Ahora cambiemos también el color de fondo, blanco, así. Ahora bien, si queremos aumentar el tamaño de estos enlaces de navegación, seleccionemos un enlace de navegación y aumentemos el tamaño. Ahora no tienes que preocuparte que haga ningún cambio en nuestra vista de escritorio. Ya que esencialmente estamos trabajando con HTML y CSS, con hojas de estilo CSS en cascada C y F, cambiaremos solo se hará este punto de interrupción y por debajo. Pero como se puede ver, los cambios son los mismos. Si vamos a un punto de interrupción más grande. Como puedes ver, sigue siendo lo mismo antes y sabe que se ha hecho cambio en la dieta. Eso es lo mejor de CSS. Volvamos a abrir el menú para que podamos seguir editándolo. Ahora también quiero centrar estos botones. Vamos a hacer clic en Alinear Centro. Y también podríamos agregar relleno a la parte superior. Pero vamos a seleccionar el menú de navegación y agregar un poco de relleno a la parte superior, empujarlo un poco hacia abajo. 100 píxeles. También podríamos aumentar el espaciado entre estos, darle algo de relleno, margen inferior. Entonces obtienen como 48 pixeles. Y ahora tenemos con un menú móvil bastante bonito. Ahora bien, si le echas un vistazo. Entonces como puedes ver, tenemos la versión de escritorio. Tienes la versión tablet. Una vez que llegamos a la versión horizontal, la versión móvil del paisaje, tenemos nuestro icono. Y si haces clic en ese menú se desliza hacia abajo. Y tenemos nuestros elementos de menú. Lo mismo va para la versión móvil así. Y así es como creas un servicio, barra de navegación receptiva móvil. 19. Creación de y edición de componentes: Muy bien, en este video, quiero mostrarles una característica muy útil de Webflow y que son los componentes. Ahora, un componente es simplemente un elemento reutilizable que has hecho. Para que puedas, puedes convertir prácticamente todo en un componente. Y puedes hacer cambios en ese componente. Y cada componente que se use, ese mismo componente se puede usar varias veces en su sitio web y todos los cambios realizados en él actualizarán cada componente. Entonces es bastante poderoso. Por ejemplo, podemos hacer en la navegación en un componente. Y si agregamos un nuevo enlace, por ejemplo no tenemos que preocuparnos por Upload, actualizando v Neff bar para cada página. Simplemente se actualiza automáticamente. Crear un nuevo componente es muy, muy fácil. Seleccionando navegación. Y cuando hacemos clic en Crear componente en nuestro panel lateral aquí arriba. Y ahora a la izquierda, le podemos dar nombre. Llamemos a esto navegación. Haga clic en el comercio. Y eso es todo. Así es como podemos crear componentes. Ahora, como puedes ver, todo fuera de nuestros componentes, fuera de nuestra barra de navegación está oscuro. Se puede, realmente no se puede editar nada. Si quieres volver. Puede ir y hacer clic de nuevo a instancia. Y ahora como puedes ver, el contorno de nuestra navegación tiene este color verde y también tiene este icono de componente. Ahora, puedes, como puedes ver, realmente no podemos editar nada en este momento para editar un componente. Pero si hago doble clic sobre él, y luego tenemos control de diseño completo, da clic en este icono junto a su nombre. Una vez que hicimos un cambio aquí, ese cambio se actualizará real nosotros todas las páginas web donde se utilice ese componente. Así que realmente potente y función de ahorro de tiempo. 20. Construcción de el pie de página: Ahora hay algún elemento importante falta en nuestro sitio web, y ese es el pie de página. Así que entremos directamente en él y construyamos una sección de fotos simple para este sitio web. Ahora, vamos a desplazarnos todo el camino hacia abajo y seleccionar nuestra etiqueta corporal, elemento del cuerpo. Y vamos a añadir una sección sencilla. La forma en que construimos esta foto va a ser muy similar a cómo construimos nuestras otras secciones. Selecciona este selector lateral y dale clase. Vas a hacer de esta una foto blanca. Y también vas a agregar v contenedor básico y darle a la clase contenedor. Una cosa que quiero cambiar es con la sección seleccionada. Quiero darle una clase combo de pie de página. Y quiero reducir un poco el relleno. Entonces vamos con 50 en la parte superior y en la parte inferior. Sólo para que no ocupe tanto espacio. Ahora, a continuación, veamos cómo queremos estructurar nuestro pie hacia arriba. Entonces quiero mi logo aquí mismo. Y entonces podemos tener algunas filas, como dos o tres columnas con algunos enlaces de navegación. ¿Correcto? Ahora bien, la forma en que podemos construir esto es realmente simple. Primero, vamos a agregar una cuadrícula a esta foto. Y la rejilla veterana tendrá una fila. Pero ahora vamos a echar un vistazo a esta fracción de unidades aquí mismo. Entonces como pueden ver, tenemos estos mangos en la grilla. Y si haces clic y arrastras sobre ellos, puedes ver que realmente puedes ajustar la forma en que se ven las granallas y la cantidad de espacio que ocupa cada fila. Eso nos da mucho control de diseño. Entonces ahora si haces clic en hecho, tenemos un rojo con una sección más grande la derecha y una sección más pequeña a la izquierda. Ahora, pongamos un simple bloque de def y llamemos a ese envoltorio de logotipo. Y bloque inventivo. Quiero poner un simple bloque de marca, un bloque de enlace. Ese de aquí mismo. Y dentro de ese blog de enlace. Quiere tener un simple bloque de texto con nuestra clase local aplicada a él. Ahora, si estás usando una imagen para tu logo, simplemente puedes dejar caer una imagen y eso es malo. Al igual que así. Una cosa que debemos asegurarnos es que esté a la derecha, a la izquierda alineada con su envoltorio de logotipo. Y asegúrate de que todos los textos estén alineados a la izquierda. Ahora tenemos nuestro logo en su lugar. Qué podríamos hacer para agregarle un poco más de carácter. Podríamos añadir un párrafo. Entonces ese podría ser solo un texto diciéndonos más sobre para quién es este sitio web, qué estás haciendo, ¿verdad? Qué servicio eres a menudo cosas así. Podríamos poner ahí. Ahora quiero aumentar el marginal en la parte superior justo aquí para darle un poco más de respiro. Entonces agreguemos un div. Poner en nuestro párrafo. Y ya lo he hecho, o ya hemos creado una clase para eso. Así que vamos a seleccionar el selector de estilo y escribir en el margen. Y seleccione margen, top 20, inferior 28. Y eso solo hace que sea un poco más de espaciado aquí mismo. Todo bien. Esa es la primera parte de la foto. Ahora a algo un poco más complejo es que vamos a poner en un bloque dentro de esta cuadrícula, recogiendo la columna derecha. Y vamos a llamar a esa grilla Neff. Porque hay dos formas de agregar cuadrículas a un sitio web de Webflow. Uno con el elemento de rejilla. Uno. Si las opciones de visualización en el diseño, simplemente puede hacer clic en la primera cuadrícula de opciones. Y eso nos permite convertir cualquier div en una grilla. Ahora, eliminemos esta fila y mantengámosla en dos en realidad. Entonces ahora tenemos dos cuadrículas, tenemos una grilla y tenemos otra en su interior. En grid, suena realmente complicado, pero ayudará mucho cuando hagamos que el sitio web sea receptivo. Muy bien, entonces en esta grilla, vas a poner un div. Llamemos a este envoltorio de navegación. Y aquí queremos tener una pequeña partida. Vamos con H para eso será sitio web. Y asegurémonos de que quede alineado a la izquierda. Al igual que así. Vamos a mantenerlo V rumbo clase y la clase combo, de cuatro años. Vamos a darle estilo a esto un poco, hazlo un poco grande, como 22 pixeles. Podríamos ser de banco de color y un niño No seas opacidad a gustar 70%, como malo. Y también lo que quiero hacer es quitar el margen del encabezado solo para que se alinee perfectamente con éste. Y ahora está perfectamente alineado en la parte superior. Y ahora lo que vamos a hacer es vamos a crear un nuevo div dentro de la nefrona. Ahora como puedes ver, vamos a estar trabajando mucho con un montón de bloques div diferentes solo para envolver nuestro contenido. Entonces tenemos un poco más de control sobre todo. Vas a llamar a este bloque de def. ¿Qué son los Neff? Y dentro de este bloque de disco, vas a poner en algunos textos enlaces. Y estos serán nuestros elementos de navegación. Este será el hogar. Vamos a darle una clase a esto. Podríamos simplemente mantenerlo en. De hecho, vamos a darle un enlace de navegación de clase. Se utilizará para la misma clase que aquí arriba. Y le vas a dar la foto de clase combo. Porque en la vista móvil, no queremos que sea muy grande, así que vamos a encargarnos de eso más adelante. Pero no queremos esto. Cambio de la foto para que surta efecto en la navegación en la parte superior. Entonces vamos a hacerlo de esa manera. Y entonces simplemente vas a copiar y pegar este enlace de navegación. Algunas veces donde contamos con servicios. Entonces tenemos levantamiento y también tenemos contacto. Ahora, inmediatamente ves que algo no está bien aquí. Necesitamos cambiar la opción de visualización. Y la forma más fácil es simplemente ir, ir a Layout, Lex it y vertical. Ese era el objeto equivocado. No queremos que esto esté en la nefrona. Y sólo para estar en el fotón F. Queremos flexionar esa línea vertical hacia la derecha, así. Y en el fotón F13 lo flexionó. También se puede agregar un diente hueco. 18 píxeles. Esto un poco mucho. Vamos con 12 píxeles entre elemento VCE. Eso es incluso un poquito demasiado. Vamos con ocho. Sí, eso se ve bien. Y como puedes ver, ya que usamos la clase de naftaleno, todas las animaciones, cada óvulos. Muy bien, siguiente, simplemente copiemos la nefrona y la peguemos. Y ahora tenemos una segunda fila para los elementos de navegación. A esto se le llama servicios. Dependiendo de cómo necesites que se vea tu sitio web, por supuesto, puedes diseñar completamente la foto de una manera diferente. Esto será diseño. Esto será desarrollo, y esto será editorial. Y puedes eliminar el final. Y eso es más o menos para nuestro fotón. Una cosa que realmente quiero cambiar fila es la alineación de esto. Creo que se vería mejor si en realidad está alineado a este lado. A ver, ¿cómo podríamos arreglarlo? ¿Así? Simplemente puede alinearlo a la derecha, seleccionar la cuadrícula Neff y alinearla a la derecha. Porque ahora en realidad se alinea con nuestro contenedor. Simplemente se ve mucho más limpio. Pero también podríamos hacer es aplicar un párrafo más este párrafo aquí mismo. Y tal vez 350 píxeles quedarían bien. 350 píxeles de ancho máximo. Sí. No ocupa todo el espacio aquí mismo. Es sólo un poco más limpio. Ahora. Eso es todo por ahora. Esa será la foto. Entonces es muy básico. Podemos hacer mucho más de ello, claro. Pero creo que hasta ahora se ve bastante decente. Una última cosa que quiero hacer es convertirlo en un componente. Así que haz clic en Crear componente. Y ahora cada vez que necesitamos volver a usar esto, tenemos un componente de ello. 21. Hacer que nuestro sitio web responda: Bien, Ahora es el momento de algo sumamente importante en nuestra época. Cada sitio web debe ser receptivo y debe verse bien en todos los tamaños de pantalla. Ahora mismo, se ve bastante decente en los escritorios. Pero en cuanto cambiamos a un tamaño más pequeño como el modo tablet, se puede ver que esto no se ve muy bien. No se supone que se vea de esa manera. Ahora, en realidad arreglemos eso. Ahora, lo mejor de CSS es mojado. Una vez que seleccionamos este punto de interrupción y realizamos cambios de estilo en todos nuestros elementos. Estos cambios sólo se llevarán a los puntos de interrupción más bajos. No afectan los puntos de interrupción más altos. Puntos de interrupción que son más grandes que él mismo. Si realiza algunos cambios en el modo tablet, a se traspasará a las vistas móviles, pero no a las vistas de escritorio. Empecemos a diseñar nuestros elementos. Ahora. En primer lugar, comencemos con la sección Servicios. Ahora, un diseño de tres columnas no se ve bien en este centro comercial de un tamaño de pantalla. Y como pueden ver, tampoco tiene respiro en absoluto. Justo aquí. Ahora bien, ¿cómo cambiamos dónde? ¿Es súper simple? En primer lugar, comencemos con este respiro. Selecciona nuestro contenedor y simplemente le damos un poco de relleno en ambos lados, como diez píxeles, tal vez 2020 píxeles en ambos lados. Y ahora como puedes ver, todos los contenedores actualizados y todo, eso es un poco más respiro, se ve mucho más limpio. Ningún elemento está tocando los bordes como queríamos. A continuación, cambiemos esta grilla de aquí mismo servimos como Gretchen. Entonces como dije antes, un diseño de columna libre, no creo que se relaje demasiado bien. Entonces cambiemos eso. Ahora para editar una cuadrícula, puede hacer clic en este botón Editar cuadrícula o puede hacer clic en el icono rojo aquí arriba en la esquina. Y la mejor manera de hacerlo, creo que sólo vamos a agregar otra fila. Y cuando eliminamos un elemento aquí mismo, y vet empuja automáticamente el objeto hacia abajo en la segunda fila. Y aumenta la cantidad de espacio que tienen los elementos V. Si haces clic en Listo. Ahora tenemos este diseño de dos columnas. Y la tarjeta de firmware restante se empuja hacia abajo. Creo que eso se ve bastante bien por ahora. Tal vez incluso podríamos hacer que sea un diseño de una columna. Entonces, cuando en realidad solo le damos a esto un ancho máximo, seleccione la tarjeta de servicio, déle un ancho máximo de 350. A lo mejor un poco más como 450 pixeles así. Y cuando necesitamos empujar esto al centro, ahora ¿cómo lo hacemos? Seleccionamos la grilla de servicio y la alineamos para que se centren aquí arriba. Ahora como puedes ver, se ve mucho más limpio que antes. Si bien tenemos mucho respiro en todos estos sitios, no tienes el problema de que sea asimétrico. Si solo tienes dos columnas, aquí mismo habrá espacio vacío. Eso no queremos. Una gran cosa adicional de eso es que si vas a un tamaño de pantalla más pequeño, como puedes ver, todavía se ve muy bien y simplemente funciona. Bien, volvamos a la vista de tablet. Desplázate hacia abajo, y vamos a agregarlo V secciones. Ahora bien, la mejor manera de hacerlo, creo, es simplemente editar la cuadrícula, agregarle otra fila y eliminar una fila. Y como pueden ver, ahora tenemos este bonito diseño de una columna. Ahora bien, una cosa más que podríamos hacer es poder separar un poco más estos dos elementos el uno del otro. Así que volvamos a nuestra configuración de cuadrícula. Y si bien podríamos escribir un valor establecido aquí mismo, también se puede preguntar sobre el espacio entre ambas filas. Haga clic y arrastre. Para aumentar el espaciado. Vamos con como 42. Y eso solo le da a todo un poco más de respiro. Es que se ve un poco más agradable. Creo que para la vista de tablet, quiero mantenerlo en quiero mantenerlo alineado por ahora. A lo mejor podamos cambiar eso más tarde. Lo que también queremos hacer es que pudiéramos quitar el acolchado de la parte superior. Creo que eso se ve mucho mejor. Si establecemos el relleno a cero en nuestro servicio, resumen de texto. Así como así. Ahora bien, si te desplazas hacia abajo, creo que queremos hacer lo mismo aquí mismo. Sí. Entonces vayamos a este resumen de texto de servicio. Esto no tiene aplicada la clase combo correcta, así que vamos a que nosotros relleno a cero aquí también. Y como puedes ver, ya que hemos editado la propia grilla, la clase, la distancia entre las columnas entre los diferimientos está en cada sección. Ahora bien, esto se ve perfectamente bien. Ahora echemos un vistazo a esta sección de precios. Ahora, como pueden ver, esto no se ve nada bien. ¿Por qué? Soy fanático del diseño de una columna. En gran medida tienen que ajustar los costos de precios en sí. Todo ya está alineado a la izquierda, alineado al centro. Solo necesitamos aumentar el tamaño de esto. Así que selecciona tu tarjeta de precios y ve a tu menú de tallas, a tus opciones de talla. Y vamos con un ancho máximo de 450 píxeles. También hay que ajustar la puja mínima para. Estableceremos el ancho mínimo n V, puja máxima a través de ambos elementos. Ahora, todo tiene un poco más de respiro. Lo que también podríamos hacer es que podríamos aumentar el acolchado a la parte superior e inferior. Digamos la bandera f, un acolchado inferior de como tal vez si mas como 48, E puede mantenerlo a los 18 en la parte superior, creo que eso se ve bastante decente. Y si aumentamos el tamaño, todo se ve perfectamente bien. Sí, me gusta esta sección de precios. Ahora, echemos un vistazo a esta forma. En la sección de contacto. Creo que podríamos dejarlo como está. Es bastante agradable. Se ve esto, esta vista de tableta Avi sensible, podemos mantenerla tal como está. Ahora, una cosa que queda es el pie de página. Ahora vamos a entrar en componentes. Así que haz clic en Editar componente. Y ahora vamos a ver por qué queríamos hacer los grits. En primer lugar, quiero que estos dos se queden uno al lado del otro en la vista de tableta. Pero quiero este bloque en la parte superior. Así que selecciona la grilla que hemos hecho y vamos a sus opciones. Vas a agregar otra fila. Y también vamos a eliminar v es 0.5 fracción rho de ella, la columna de ella. Y ahora si haces clic en Listo, puedes ver que esta grilla sigue en la parte inferior. Y este logo rapero justo aquí está ahora en la cima. Ahora vamos a ponerlos. Así que seleccione la goma del registrador y simplemente haga clic en justify para ser centro. Y haz lo mismo. Sus opciones de tipografía y haga clic en la línea para estar al centro. Solo el texto de Toby está alineado al centro. Ahora lo que queda es que tenemos que ir a la grilla del v Neff. Y ahora mismo está alineado a la derecha. Queremos alinearlo al centro. Así como así. Una cosa más que queremos es realmente queremos entrar en el pie y F Now y alinear eso al centro también. Entonces vamos a ti opciones de epigrafía. Creo que tenemos que editar el año. Necesitas editar el enlace de navegación en. A ver ¿a dónde lleva V? Sí, tenemos una F y la alineamos con el centro. Así. Y por supuesto hacer lo mismo. ¿Nos dirigimos H? ¿Tan solo así? Ahora, todo está muy bien alineado con el centro. Ahora claro, un veterinario mocos, eso. Aún no terminado. Si bien la mayor parte del sitio web se ve bastante bien, incluso en tamaños de pantalla realmente pequeños tenemos algunas cosas que necesitamos ajustar. Así que aquí por ejemplo , en realidad podrías, sí, podemos hacerlo en la vista de tableta. El espaciado entre estas líneas es un poco demasiado para mí. Encabezamiento principal selectivo mientras está en el punto de ruptura de la tableta. Y acude a tus opciones de altura en V topografía. Y vamos a reducir esa altura de línea. Como 1.21. Se ve bastante decente. Comprobemos eso en los otros puntos de interrupción. Sí, eso se ve bien. Aunque cuanto más pequeña se vuelve la pantalla, creo que si nos dirigimos necesita ser un poco más pequeños, es un poco mucho. Así que en la vista del paisaje móvil. Hacer estamos agregando tamaño como tal vez como 48. Sí, eso se ve bastante **** bien. Comprobemos eso en el tamaño más pequeño. Estoy contento con eso. Ahora, una cosa que quiero cambiar ahora, estas patentes a Berg siguiente, Bueno uno al lado del otro. , en el modo horizontal, Sin embargo, en el modo horizontal, necesitas ajustarlos en la vista móvil real, no quiero que se aplasten así. Vayamos a nuestro envoltorio de patrón de héroe. En nuestro punto de interrupción móvil. A ver. Justificarlos. Cambia la dirección de la caja flexible a vertical y alinea para que se centren así. Veamos cómo se ve el resto del sitio web. Creo que en realidad quiero, creo que se ven bastante bien en un tamaño más pequeño así también. El precio también funciona. Lo único que realmente necesitamos ajustar es el pie de página. Entonces volvamos a V0. Haga clic en Editar componente en su foto. Y ahora una cosa. En primer lugar, tenemos que asegurarnos de que nosotros, Netflix en realidad nos mantendremos igual. Entonces 18 píxeles, 1.5 e m. En este momento, toma la información del valor Knaflic, que es de nuestro menú móvil que hemos construido anteriormente. Pero como tenemos aplicada la clase footer, podemos volver a cambiar estos valores a 18. Y también quiero quitar el remove tal vez como hacer el margen inferior como seis. Eso se ve mucho mejor. Creo que para el paisaje móvil, podemos mantenerlo en dos columnas. Versión inmóvil sin embargo, quiero ser genial. No tanto dos columnas sino 22 filas en cambio, así. También queremos aumentar el que mantuvimos entre ambas rutas a como 36 píxeles. Entonces ahora si lo previsualiza, se ve bastante decente en todos los tamaños de pantalla. Y así es como haces que tus sitios web sean receptivos. Como puedes ver, es un proceso bastante sencillo. Simplemente te pasearías a través de tus secciones. Ahora, incluso puedes hacerlo al final de tu proyecto. O puedes hacerlo al final de cada sección y ajustarlo a lo largo del camino. Vamos a estar a la altura de tu preferencia. 22. Cómo agregar animaciones básicas - la pestaña de interacciones: Muy bien, así que ahora que terminamos de construir nuestro sitio web, vamos a previsualizarlo. Se ve que se ve bastante decente, pero falta algo. Y ese algo son algunas animaciones básicas. Una vez que nos desplazamos hacia abajo, queremos que esta sección se desvanezca suavemente desde la parte inferior. Sólo para que sea un poco más interactivo. Ahora bien, ¿cómo lo hacemos? Ahora, cuando te mostré ve style manager y la interfaz, rápidamente hablé sobre el menú de interacciones, que se puede encontrar aquí arriba en tu gestor de estilo. Ahora, usando vet en el menú Acciones, podemos crear muy fácilmente algunas animaciones básicas o animaciones muy complejas para cada una de nuestras secciones, para cada uno de nuestros elementos. Ahora bien, la forma en que me gusta hacerlo, al menos en este ejemplo, asegura de seleccionar su contenedor. Ahora, vamos a hacer esto realmente básico, así que no vamos a pasar demasiado tiempo en estas animaciones con un montón de diapositivas y efectos y demás. Lo que queremos es que queremos que esto se desvanezca lentamente. Entonces, antes que nada, tenemos que pensar ¿qué es exactamente lo que queremos animar? Ahora, en nuestro caso, queremos que el texto y los botones se desvanezcan lentamente. No queremos desvanecerse y toda la sección. Así que el seleccione nuestro contenedor. Y luego en nuestros elementos, en nuestro panel de acciones, ve al elemento trigger y haces clic en ese ícono más. Y aquí tenemos algunos disparadores. Desencadena nuestras animaciones. Eso puede ser un clic del mouse, que pueden ser efectos de desplazamiento. Para la mayoría de nosotros. Lo que queremos es desplazarnos a la vista. Tan pronto como el elemento esté en nuestra ventana gráfica, comenzará la animación. Ahora, cuando hacemos clic en scroll into view, tenemos este nuevo menú aquí mismo. En primer lugar, podemos seleccionar la acción. Entonces, ¿qué debería pasar cuando el elemento se desplaza hacia la vista? Ahora como puedes ver, tenemos un montón de animaciones prefabricadas para elegir, pero también podemos crear animaciones personalizadas. Ahora por el bien de este curso, vamos a usar las animaciones prefabricadas Como solo queremos tocar lo básico, leer animaciones personalizadas puede llevar mucho tiempo, y es un poco más complicado y complejo. Muy bien, así que queremos que esto se deslice desde abajo. Entonces en este desplegable, vamos a escoger la ligera animación. Y ahora tenemos un montón de opciones diferentes. Puedes hacer que se deslice adentro, nosotros podemos hacer que se deslice hacia afuera. Y como pueden ver, también tenemos este botón de vista previa. Entonces en este momento está puesto a de izquierda. Y si la previsualiza, se desliza por la izquierda. Ahora queríamos deslizarnos desde abajo. Entonces vas a escoger en este desplegable de abajo. Vamos a previsualizarlo. Vamos a agregarle un poco de retraso. Así como 200 milisegundos. Esto se ve mucho mejor. Ahora, también podemos agregar una animación cuando se desplace fuera de ti. Ahora bien, eso no es algo que queramos en este caso, pero la opción siempre está ahí. Y por supuesto también podemos limitar la animación v a ciertos puntos de quiebre. Ahora, debajo de eso, tenemos los botones de elemento y clase. Ahora podemos escoger ¿qué debería comenzar la animación solo en el elemento, o debería ser en toda la clase? Por lo que todas las clases con las clases de contenedores de petróleo tendrán que innovar esa animación. También tenemos este desplegable. Y como pueden ver, tenemos nuestras dos clases. Entonces contenedor, entidad, clase blanca. Si haces clic en eso, puedes seleccionar la clase de contenedor simple. Ahora lo que eso hace es ahora cada elemento con la clase contenedor aplicada a él. Tendremos esta diapositiva en animación. Vamos a cerrarlo. Ahora. Si quieres editar la animación, simplemente seleccionas el elemento con la animación. Para dar click en esta animación aquí mismo. Y ahora tienes todas tus opciones de edición. También puedes ver si un elemento está animado por este icono verde en la parte superior derecha. En tu navegador en el lateral. Ahora vamos a previsualizar nuestro sitio web. Como se puede ver. Los elementos obtienen este crecimiento en. Y una vez que nos desplazamos hacia abajo, ya que todos estos USB de la misma clase de contenedor, se desvanecen lentamente. Y eso solo le da a v todo el sitio web un poco de una sensación más completa. Ahora una visa, solo lo básico de las interacciones. Si realmente pasas mucho tiempo, puedes crear algunas interacciones increíbles y únicas para tu sitio web. Ahora una cosa que quizás hayas notado es que la navegación así como nuestro pie de página también se desvanece. Ahora eso no es algo que yo quiera. Entonces, lo que vamos a hacer es la forma más rápida de hacerlo es simplemente duplicar la clase contenedor para nuestra navegación y seguir nuestro pie de página y cambiar su nombre. Así que vamos a hacer clic en su navegación y dar clic en Editar componente. Y busca la clase de contenedores. Y lo que vamos a hacer es simplemente hacer clic en este desplegable y hacer clic en Duplicar clase. Y llamemos a este contenedor de navegación. Al igual que así. Ahora si la previsualiza, como puedes ver, la navegación no se deslizará. Repetimos ese mismo proceso para nuestro componente Footer, contenedor B. Y vamos a darle la misma clase de contenedor nav, como esa instancia EC2. Y vamos a ver. Como pueden ver, ya no se desvanece. Exactamente como queríamos. Y así es como creas algunas animaciones básicas para tu sitio web. Ahora te recomiendo que solo juegues con estas diferentes opciones. Porque realmente tenemos, realmente no hay límite para lo que podemos hacer usando las interacciones. Entonces siempre que tengas una idea para una animación que quieras, gas, pruébala y trata de construirla. 23. Vincular nuestros botones a diferentes páginas y secciones: Muy bien, entonces en esta conferencia, vamos a hablar de los botones de enlace y de nuestros enlaces. Ahora terminamos, prácticamente terminamos nuestro sitio web. Tenemos la animación lista y todo está hecho. Responde a dispositivos móviles. Lo único que queda es en realidad hacer que estos botones marquen. Como puedes ver, si haces click en alguno de estos enlaces de los patrones Andes. No pasa nada porque aún no hemos dicho lo que debería pasar. Ahora bien, ¿qué es lo que realmente queremos lograr? Quiero, si hago clic en el botón de función, quería que la página se desplazara para ser secciones de Característica. Y lo mismo va con los precios y el contacto. Y si estos dos botones aquí mismo. Ahora, comencemos con la sección de héroes. Entonces, si quiero, si hago clic en el botón “get in touch”, quiero que el patrón me lleve hasta el formulario de contacto que hemos hecho. Ahora, ¿cómo vinculamos esto? Entonces, si seleccionas tu botón y vas a la configuración de tus elementos, aquí tenemos la configuración del enlace. Podemos vincular el patrón a una URL específica. Podemos vincularlo a una página de nuestro sitio web. Puedes vincularlo a una sección que es lo que queremos. Y también podemos, también podríamos decir que se quiere abrir un correo electrónico desde un número de teléfono o incluso una descarga de archivo. Ahora, queremos vincularnos a una sección específica. Así que vayamos aquí a la pestaña de sección y escojamos una sección de página. Ahora como puede ver, solo tenemos estas secciones de correo electrónico y estas provienen de nuestro formulario de contacto. Están pre-hechos en la cama. Entonces, antes que nada, tenemos que decirle a Webflow cuál es cada sección. Tenemos que darles una idea así llamada. Entonces, la sección de héroes pocos seleccionados, por ejemplo, en los ajustes de elementos. La primera opción es con campo ID para en la página Lincoln. Y aquí podemos darle un nombre a esta sección. Vamos a llamarlo héroe. Y ahora esta sección de héroes se llamará héroe. Si vas a nuestro botón y elegimos una sección de página, tenemos la sección héroe aquí mismo. Muy bien, ahora vamos a repetir ese proceso y vamos a dar a todas nuestras secciones una y una idea. Entonces esta sería la sección de características. No hace falta darle éste a n. Do. Queremos enlazar de nuevo a nuestra sección de precios? Y así como nuestra sección de contacto. Así. Ahora una cosa más que queremos es que si haces clic en el logotipo, queremos desplazarnos hasta arriba. Por lo que tenemos que dar nuestra navegación e identificación también. Así que vamos a editar este componente y darle una idea. Vamos a llamarlo nav, así. Muy bien, ahora comencemos a vincular estas secciones juntas. Entonces comencemos con D, ponte en el botón táctil y la configuración de los elementos MP. Sección Lincoln. Y busquemos el Contacto. Y ahora con el seleccionado, la sección de contacto para el enlace. Si la previsualiza y hacemos clic en este botón Obtener y tocar. Como puede ver, nos desplazamos suavemente hasta el formulario de contacto que hemos hecho. Y así, podemos vincular todas estas secciones. Ahora vamos a repetir ese proceso para los enlaces restantes, como el botón de precios o para ti en la sección de vinculación. Y busca la sección de precios. En realidad también podríamos vincularlos juntos. Demos estas secciones e identificación. Entonces llamemos a este diseño. También podemos vincular estos botones. Esto será desarrollo, y esto será editorial. Así como así. Y ahora seleccione V design link. Y elija la sección de diseño V. El enlace de desarrollo se vinculará a la sección de desarrollo. Y el enlace publicado se vinculará sección de película publicada, todo el camino en la parte inferior. Bien. Ahora tenemos algunos botones de mercado y táctiles. Y podemos vincularlo a nuestra sección de contacto. Entonces ahora no vamos a vincular estos botones. Trabajemos en nuestra navegación. Entonces edita el componente, selecciona el enlace de navegación de características. Queremos que esto se vincule a una sección. Entonces en este caso, vas a la configuración de Knaflic y bajo tipo simplemente seleccionas sección y eliges una sección de página que será característica. Hagamos lo mismo para el tipo de entrada de precios de URL externa a sección. Y ve y enlaza para que sea sección de precios. Y lo mismo para el contacto también. Así. Ahora también queremos vincular ese logo. Seleccione el bloque de marca en su navegador es un blog de enlaces, es decir, donde podemos conectar un enlace a él. Aquí en ajustes de marca, tipo de entrada desde la sección URL externa. Y pongamos eso a Neff. Una vez que hagamos clic en ese botón, automáticamente nos quedaremos de este lado. En realidad podría hacerlo y simplemente vincularlo para que sea Paige. Paige a casa. Entonces, si haces clic en esto, volverá a cargar la página y nos llevará hasta la página principal. Y ahora vamos al componente de edición de pie de página. Y vamos a vincular también los enlaces de navegación. Esta vez, el enlace Inicio será la sección Neff. Entonces todo el camino en la parte superior, los servicios enlazarán para ser sección Servicios, sección de características. Así lo llamamos, subiendo Foucault a precios y contacto. Vamos a la sección de contacto. Ahora, vinculemos estos enlaces de servicios también. Entonces un diseño, vamos a ser La sección de la señal, desarrollo. Vamos a la sección de desarrollo y publicación irá a la sección editorial. Ahora por supuesto, necesitamos editar nuestro bloque de enlace desde el logo, de nuestra foto. Y mojados enlazaremos a la página. Así como así. Bien, ahora veamos si todo es derecho laboral. Puedes hacer sección de precios. Nos lleva a los precios. Da clic en Ponerse en contacto. Te desplazas hacia abajo aquí. Si vas a nuestros enlaces de pie de página y haces clic en Inicio, vas a estar en la parte superior. Y nuestros enlaces de navegación también deberían funcionar. Entonces vayamos a la sección de características. Sí, ahora todo está muy bien vinculado, así es como enlazas tus botones y todos tus enlaces y unes tu sitio web. 24. Publicación de la página web: Bien, entonces en esta conferencia final, primero vamos a hacer algunos ajustes a nuestro diseño. Y luego vamos a hablar de publicar el sitio web. Oh, está en vivo y disponible para todos. Ahora, antes que nada, repasemos este sitio web y veamos algunas de las cosas que quizás queramos cambiar. Por ejemplo, en esta sección de héroes, algo que me molestó desde el principio es el espaciamiento entre estos elementos. Yo sí quiero que un poco de musgo agregue un poco más de espaciado entre el párrafo y estos dos botones, y también reducir el espaciado entre el encabezado y el párrafo. Ahora primero que nada, seleccionemos el encabezado principal. Y usamos el margen a cero. En la parte inferior, margen a cero, así. Y a continuación, seleccionemos la clase de envoltura de botón héroe y le apliquemos un margen superior. A lo mejor como 24, 24 píxeles parece perfectamente bien. A continuación hay una cosa más que queremos cambiar es la distancia entre estas dos columnas. Así que selecciónate para cuadrar. Y la razón por la que estoy haciendo esto en la sección blanca, porque solo tenemos un poquito de mejor visión de lo cerca que están realmente juntos. Así que selecciona tu cuadrícula y aumenta un poco el espaciado. Pero es de dos píxeles parece estar bien. Sí, se ve muy bien. Y creo que eso es todo para los toques finales con los que quería hacer. Y ahora hablemos de publicar sitio web de acuerdo. Entonces tienes este botón Publicar aquí arriba. Y si haces clic en eso, puedes ver que tenemos este dominio de puesta en escena, este subdominio, pero podemos publicar nuestro sitio web en. Entonces en este momento es el proyecto Skillshare y este número dot Webflow punto io. Ahora podemos publicar este sitio web a dominio veterinario y estará en vivo en internet y todos podrán acceder a él. También puede conectar un dominio personalizado a él. Sin embargo, eso solo es posible con un plan de sitio. Entonces, si quieres quedarte gratis, así que si no quieres pagar por hosting o si esto es solo un proyecto de práctica, no puedes conectar un personalizado para pesarlo. Ahora para publicar el proyecto en este dominio de puesta en escena, simplemente da clic en publicar en dominios seleccionados. Ahora esperamos un poco mientras se está publicando. Y ahora como se puede ver, publicado con éxito. Ahora, si haces clic en esto aquí mismo, puedes abrir el proyecto en ese dominio. Y como puedes ver, todo está funcionando perfectamente bien. Justo como queríamos. Ahora lo mejor de Webflow es que podemos hacer cambios realmente rápidos. Y una vez que lo publicamos, en realidad es completamente, se actualiza increíblemente rápido. Entonces digamos que queremos cambiar el color de esta rúbrica. Seleccione el encabezado principal, vaya a la pestaña Color. Y vamos a ir. Si este color azul claro, no se ve bien, pero es todo solo para demostración. Volver a publicar, publicar, para seleccionar los dominios. Ahora, volvamos a nuestro proyecto y refresquemos el sitio web. Como se puede ver, el cambio ya está en vivo. Volvamos a todo ese proyecto de flujo. Mueve ese cambio y publícalos en pequeño para deshacerte de ese color azul. ¿Bien? Ahora bien, si quieres conectar una costumbre para hacerlo, lo que tienes que hacer es tener que ir a la configuración de tu sitio. Así que haga clic en este menú, configuración del sitio. Y luego tenemos tierras y facturación. Y aquí tenemos todos los diferentes planes de sitio. Ahora, como puedes ver con el lado startup. Así que hacemos dólar al mes con versión gratuita. Tenemos el dominio Webflow dot io. Ahora, una vez que vayas, una vez, comenzando con lo básico por 14 dólares mensuales, si Bill , idealmente, tienes acceso a un dominio personalizado y puedes conectar un dominio personalizado a él. Ahora, una vez tú, si vas por esa ruta, si quieres crear tu propio blog o tu propio sitio web personal, hay algunas formas de conectar un dominio. La forma más fácil es simplemente hacerlo a través de Webflow. Entonces, si haces clic en publicar, aquí tendrás algunas opciones para un dominio personalizado. Y puedes comprar un dominio directamente a través del flujo de representación usando dominios de Google. Su configuración es increíblemente rápida. O tu tipo en el dominio que has comprado en otro lugar. Y luego te dará como un onboarding. Dependiendo de tu hosting o donde hayas comprado, tus pasos principales serán un poco diferentes. No es nada difícil. En realidad es increíblemente simple. Ahora para este sitio web que hemos hecho, te vas a quedar con el dominio dot io de reflujo. Y así es como publicamos nuestro sitio web. Ahora, una cosa más que quiero mostrarles está vuelta en el panel de diseñadores. Nosotros diseñamos. También tenemos el botón Compartir y eso nos permite compartir un think toggle de solo lectura esto. Tenemos este nuevo enlace, pero podemos enviar a nuestros compañeros de trabajo son nuestros clientes. Y eso les dará esta vista de editor. Y podremos realizar cambios en este sitio web. No obstante, no se salvarán. Así que prácticamente después de que se abra este editor de flujo de eventos, pueden inspeccionar todos los diferentes elementos y cosas así. Fuera, destruyendo cualquier cosa en cosas de cambio hechas por el hombre. Entonces estos son los enlaces de solo lectura. Entonces tal vez necesites ayuda con algo. Puedes proporcionar un enlace solo de cuadrícula y dejar que alguien eche un vistazo a tu proyecto. Y a lo mejor puedas encontrar la flecha de esa manera. Eso también es muy importante. 25. Conclusión: Bien, así que ahora que has construido tu primer sitio web en Webflow, y has llegado al final de esta clase. Ahora, ¿qué viene después? Bueno, te recomiendo encarecidamente que juegues con Webflow y pruebes diferentes diseños. Y simplemente estás trabajando en un montón de proyectos diferentes acostumbrarte más a ser el editor de flujo de trabajo y cómo se construyen los sitios web. Ahora, si tienes alguna duda, quedan restaurantes, simplemente puedes enviarme un mensaje o preguntar en la sección de preguntas frecuentes. Y volveré a ti lo antes posible y trataré de ayudarte. Con eso. Te agradezco por ver esta clase y te veré la próxima vez.