Flujo web intermedio: progresa en tus conocimientos de flujo web (2022) | Sam Harrison | Skillshare
Menú
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Flujo web intermedio: progresa en tus conocimientos de flujo web (2022)

teacher avatar Sam Harrison, Webflow Developer, YouTuber, Teacher

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Introducción al curso

      2:10

    • 2.

      Navegaciones

      0:24

    • 3.

      Navegación: LETO

      7:41

    • 4.

      Navegación: CENTRO

      5:41

    • 5.

      Navegación: LOGOTIPO

      3:44

    • 6.

      Navegación: HAMBURGER HAMBURGER de DESkTOP

      4:52

    • 7.

      Navegación: descentrado

      7:25

    • 8.

      Navegación: MEGA MENU

      14:17

    • 9.

      Navegación: móvil personalizado

      12:35

    • 10.

      SECCIONES de HERO

      0:34

    • 11.

      SECTION: Hos: CENTRO

      12:07

    • 12.

      SECTION: Hos: GRADIENT

      4:51

    • 13.

      SECCIón de HERO

      17:04

    • 14.

      SECTION: Hose: video de fondo

      4:15

    • 15.

      SECTION: Hos: SLIDERS

      10:00

    • 16.

      SECCIONES de información

      0:38

    • 17.

      SECCIón INFo: ICONos

      8:00

    • 18.

      SECCIón INFo: POSICIÓN de ABSOLUTO

      13:17

    • 19.

      SECCIón INFo: 3 grano COL

      4:46

    • 20.

      SECCIón INFo: cartas

      8:40

    • 21.

      SECCIón INFo: CARde CARto flex

      11:30

    • 22.

      Animaciones e interacciones

      0:45

    • 23.

      TAReta de HOña de animación 1

      15:33

    • 24.

      TAReta de animación 2 2

      4:04

    • 25.

      TAReta de HOña 3

      5:23

    • 26.

      TAReta de HOud 4

      12:33

    • 27.

      TAReta de aguar 5 de animación 5

      23:17

    • 28.

      Animaciones más animadas

      8:55

    • 29.

      Lote de animaciones en SCOLL

      5:35

    • 30.

      Proyecto de clase

      0:53

    • 31.

      Guía del proyecto de clase

      2:16

    • 32.

      Navegación de proyectos de clase

      27:05

    • 33.

      NAV de proyecto que CLans

      21:43

    • 34.

      SECCIÓN de proyecto de clase

      14:29

    • 35.

      SECCIÓN de proyectos de clase

      12:46

    • 36.

      Cojón de proyecto de clase

      28:55

    • 37.

      PRavo social

      13:50

    • 38.

      Proyecto de clase CTA y primer principio

      6:29

    • 39.

      MOBILE de proyecto de clase

      10:42

    • 40.

      ¡MÁS cursos de curso DURANTE el camino!

      0:40

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

1012

Estudiantes

7

Proyectos

Acerca de esta clase

¡TUTORIAL de WEBFLOW: la SEQUEL!

¡Hola a todos y bienvenido a mi segundo curso Webflow web!

Este curso de Webflow es para los principiantes a los niveles intermedios y abordamos los temas principales:

  • SECCIONES de HERO
  • Navegaciones personalizadas
  • SECCIONES de información
  • INTERACCIONES y animaciones de WEBFLOW
  • Proyecto de clase

El objetivo de este curso es brindarte las habilidades necesarias para empezar a crear sitios web más complejos dentro de Webflow y puedes implementar las habilidades aprendidas en este curso dentro del proyecto de clase.

Conoce a tu profesor(a)

Teacher Profile Image

Sam Harrison

Webflow Developer, YouTuber, Teacher

Profesor(a)

Hi Everyone,

I'm a multiple business owner (entrepreneur feels too pretentious) based in the UK and I currently run a digital agency along with a consulting/teaching business.

I love Webflow and currently have a beginners class on Skillshare for it.

 

 My YouTube channel:

 https://www.youtube.com/c/SamHarrisonco

Ver perfil completo

Level: All Levels

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Introducción al curso: Hola a todos y bienvenidos a mi segundo curso de Webflow para principiantes a niveles intermedios. Tengo uno, soy Sam Harrison y dirijo una agencia digital con sede en el Reino Unido. Y en este curso quiero llevarte a través de especie del siguiente paso lógico para progresar tus habilidades de Webflow. Voy a entrar en cómo enloquecerse. Entonces las secciones de comentarios y elementos que vas a utilizar dentro de tus diseños. lo que en la primera parte del curso, vamos a entrar en cómo manipular el menú o la barra de navegación y a cambiar la forma de trabajar para tener a Lego centrado, tener un Lego ajustado a la izquierda, o tener la navegación en el medio. Básicamente muchas formas diferentes de posicionar la navegación. A partir de ahí, vamos a entrar en cómo es cray, varios tipos diferentes de sección de héroes y solo una especie de tipos de columnas de diseño que vas a ver al crear sitios web. En la tercera parte del curso, vamos a entrar en cómo crear diferentes tipos de secciones de información donde tenemos quizá diferentes secciones de iconos mediante el uso de rejillas y flexbox iba a hacer uso de posicionamiento como pariente y un absolutamente para conseguir todos los diferentes artículos peso mujer para ser. En la cuarta parte del curso se profundiza más en cómo usar interacciones y animaciones para tener al menos cuatro o cinco videos y cómo crear causa de desplazamiento y cómo se pueden crear diversas animaciones diferentes al pasar el ratón filas agrarias para mirar cómo usar los archivos Lottie y cómo animar aquellos en el desplazamiento de la página. No obstante, partes del curso vamos a crear juntos una página de aterrizaje utilizando todas las técnicas aprendidas a lo largo del curso hasta el momento. Entonces, idealmente, lo que me gustaría que hicieras es usar todas las técnicas que hemos hecho y crear tu propia versión de una página de aterrizaje usando la mía como ejemplo. Si no quieres hacer eso, no tenemos que preocuparnos. También puedes hacer es solo copiar junto conmigo en la página de aterrizaje que creé, que también hace uso de al menos la mayoría de las técnicas utilizadas a lo largo del curso. Bueno, necesitarás para este curso es una laptop o una PC. Y todo lo que necesitas también es una cuenta de Webflow activa. Y en cuanto a los activos para crear la página de aterrizaje, me aseguraré de todo lo que esté disponible dentro de los materiales del curso. De acuerdo, Entonces si eso te suena bien, empezaremos. 2. Navegaciones: Bien, entonces esta primera parte del curso, vamos a ver cómo crear varios tipos diferentes de navegación. Entonces en mi primer curso, usamos el NAV estándar y lo ajustamos ligeramente. En este curso, quiero profundizar un poco más en cómo posicionar el NAV que te hizo en varios lugares diferentes También te voy a mostrar cómo crear tu propia navegación móvil personalizada, también haciendo uso de un archivo lottie Bien, así que comencemos a hacer nuestra primera navegación. 3. Navegación: LETO: Bien. En este video, vamos a estar viendo cómo darle estilo a la Navbar de varias maneras diferentes Entonces, antes que nada, qué haremos solo para que esto sea un poco más fácil de seguir. En el propio cuerpo, voy a darle a esto un color de fondo que es más oscuro que el blanco. Entonces lo que haremos es simplemente lanzar la barra de navegación incorporada que viene de serie con el flujo web Vamos a lanzar en un NV. Bien, entonces en la primera cancha que hice, prácticamente usamos esto todo el tiempo. Entonces teníamos nuestro logo en el lado izquierdo aquí, luego tenemos nuestro menú de navegación a la derecha. Ahora bien, de nuevo, esto es bastante común, y este es quizás el tipo de nab más común que verás Pero hay variantes en esto. Entonces a veces tal vez querrás tener tu logo en el medio. A veces querrás tener el menú de navegación ya sea en el centro o una alineación a la izquierda con tal vez botones a la derecha. Así que vamos a hablarte a través de todas las diferentes formas realmente puedes alterar el nab incorporado para que se adapte a tus necesidades Entonces, lo que vamos a hacer inicialmente es copiar algo similar al sitio web de HobSpot Puedes ver aquí en el sitio web de HobSpot, tenemos el logo en el lado izquierdo, tal como lo hacemos aquí, pero tienen su menú de navegación prácticamente al lado del logo con un poco de hueco aquí, y luego tenemos un botón Entonces vamos a recrear esto antes que nada. Entonces lo que vamos a hacer es empezar de la misma manera, y en primer lugar simplemente pondremos un logo, creo, solo por facilidad, vamos a hacer. Es que lanzaremos en un bloque de texto, y simplemente llamaremos a este logotipo. Y solo lo haremos un poco más grande. Vamos a probar 25, y vamos a hacerlo un poco más audaz también. Después sobre la propia marca, aplicaremos un poco de relleno. Entonces vamos a aplicar 20 píxeles de relleno, creo lo que vamos a hacer. Eso se ve bien. Vamos a tratar de recrear esto En primer lugar, lo que vamos a hacer es dentro del contenedor, que es el contenedor. De hecho vamos a darle a eso una clase en realidad, lo llamaremos contenedor. Y también vamos a hacer el contenedor un poco porque eso es generalmente lo que me gusta hacer. Haremos cien Y lo que también haremos es en la propia barra de navegación, le daremos a eso también un poco de relleno, y haremos el 3%. Voy a hacer esto a lo largo todas las diferentes versiones que hagamos. Nos vamos a apegar al mismo tipo de cosas. Te explicaré por qué un poco más tarde. Bien, entonces lo que vamos a hacer es dentro de nuestro contenedor de navegación, vamos a agregar un dibloque Y solo para que podamos ver lo que estamos haciendo, vamos a arrastrar esto un poco más arriba para poder ver lo que estamos haciendo. Bien, entonces este bloque div va a valer el 50% de este contenedor de navegación. En realidad vamos a tener dos de estos. Entonces esto estará en el lado izquierdo, y luego crearemos otra, que está en el lado derecho, que va a albergar las diferentes secciones de esta nueva navegación que vamos a hacer aquí. Entonces vamos a tener un contenedor, que es el 50% de todo el ancho, que contendrá el logo y el menú de navegación. Entonces el otro 50% restante será para cualquier botón que queramos en el lado derecho. Bien, entonces llamaremos a esto a la izquierda solo por facilidad. Entonces eso queda. Le daremos un ancho del 50%, y le daremos una altura mínima de algo así como 60. Podemos cambiar la altura más tarde. Pero vamos a hacer solo 60 píxeles para que podamos ver lo que estamos haciendo. Entonces una vez más, dentro del contenedor nav agregaremos otro bloque div y llamaremos a esto bien. Y lo que también haremos solo para poder ver dónde está. Nuevamente, solo mueve esto abajo a la izquierda. Bien, entonces ahora tenemos estos dos contenedores diferentes. Uno de ellos es del 50%. Este también tiene que serlo. Entonces el mismo tipo de cosas otra vez, 50%. Y luego le daremos una altura mínima de 60 píxeles. Bien, entonces ahí estamos. Ahora tenemos dos di bloques diferentes, uno en el lado izquierdo, uno a la derecha. Obviamente, por el momento, ambos están a la izquierda, así que cambiaremos eso en un momento. Así que solo por ahora, lo que vamos a hacer es que en realidad vamos a poner la marca y el menú de navegación en nuestro contenedor izquierdo. Entonces una vez que hayamos hecho eso, vamos a hacer nuestro contenedor nav una caja flexible solo para realinear todo esto correctamente Así que justo antes de hacer eso, vamos minimizar algunas de estas cosas para que sea más fácil de seguir. Entonces, antes que nada, vamos a tirar la marca, y eso va a estar dentro de este contenedor dejado. Entonces ya verás cuando la arrastré, como que se partió hacia adentro, y eso es lo que quieres para asegurarte No lo quieres más o menos en la misma línea como esta. Lo quieres dentro del bloque de buceo. Entonces eso está dentro del bloque div del lado izquierdo. Y lo mismo será cierto para nuestro menú de Nav también. Simplemente vomita esto y luego asegúrate de que encaje hacia adentro, y ambos van a estar sentados dentro este contenedor div, que se llama left Bien, entonces por el momento, todavía tenemos a los dos en el lado izquierdo. Entonces este que se llama correcto todavía está por aquí. De hecho, queremos que esto pase a la derecha. Entonces, la forma en que lo hacemos es asegurarnos de que el contenedor nav esté resaltado, y luego vamos a crear esto como un diseño flexible. Por defecto, ya es horizontal, y en realidad es más o menos como necesitamos que sea de todos modos. Entonces nos estamos acercando a cómo debería verse. Nuevamente, si volvemos al sitio web de HubSpot, puedes ver que ambos están alineados con el lado izquierdo, y aquí hay un poco de brecha, pero obviamente está más cerca de eso Entonces, ¿cómo nos acercamos eso? Bueno, lo que vamos a hacer es en el div izquierdo o en el contenedor div izquierdo, vamos a hacer esto también va a ser un flex box. Y de nuevo, prácticamente se hace reenviar automáticamente. Entonces lo que queremos es que se justifique a la izquierda. Y por el momento, está estirando todo el asunto por el centro, cual en realidad está bien. También podrías centrarlo también. Dependerá de lo que tengas como color de fondo. En este caso, está todo claro, así que está bien. Qué quiere hacer, ya se puede ver que ahora está bastante cerca de esto , pero hay una brecha. Entonces, lo que tendríamos que hacer es solo por la parte de la marca aquí. Simplemente pondremos un poco de relleno. Entonces simplemente haremos algo por defecto. Entonces digamos 40 píxeles, y eso solo separa ligeramente el menú de navegación del logotipo. Bien, entonces estamos más o menos ahí en su mayor parte. Entonces dentro de nuestro contenedor derecho aquí, vamos a agregar un botón. Y por el momento, se puede ver que no está alineado correctamente. Entonces, una vez más, vamos a hacer el contenedor correcto o el div correcto. Es ese flex también. Nuevamente, por defecto, lo que se hace es estirar el botón sobre toda la altura de la sección, y no queremos eso. En realidad queremos que esté alineado con el centro. Y entonces en lugar de justificarlo al principio, lo vamos a justificar hasta el final, así que va justo de aquí, derecho al otro lado. Si lo hago ahora, ahí vamos. Así que prácticamente creamos exactamente el mismo tipo de cosas que tenemos con este menú, obviamente, agradezco que también tengan una barra superior. Cubriremos las mejores barras un poco más adelante en el video o en los siguientes videos. Entonces, pero se puede ver más o menos para esta sección principal aquí, esto ahora se parece bastante a esto. También haremos que la barra de navegación sea un poco más grande. Demos a esos 20 píxeles de relleno también. Sí, y ahí vamos. Si echamos un vistazo rápido a esto, y luego como volvemos a dimensionar, bajará. Debido a que agregamos un relleno a la Navbar, verás cuando lleguemos a este punto aquí, todavía hay un poco de hueco al costado, así que eso va a ser bueno Cuando lleguemos al móvil, tendrás que decidir si quieres tener este botón aquí o no. Si no querías tenerlo ahí, todo lo que tendrías que hacer es ir al botón, y entonces siempre podrías ocultarlo en el móvil si quisieras. Y ahí estamos. Pero cuando volvamos a la vista de escritorio, todavía va a estar ahí. 4. Navegación: CENTRO: Bien, así que justo antes empezar a hacer nuestro propio contenedor que nuestra propia navegación que se centró desde cero. Sólo voy a mostrarte cómo podrías realmente alterar el que acabamos de hacer para que sea centro. Ahora obviamente, no lo harías de esta manera, pero solo quiero mostrarte cómo lo harías si dices que cambiaste de opinión. Entonces, lo que necesitas hacer es simplemente ingresar a tu navegador aquí, y todo lo que necesitas hacer es básicamente obtener el menú de navegación, así que actualmente no reside dentro del div izquierdo. Todo lo que necesitas hacer es mantener presionado el menú de navegación y empujarlo hacia la izquierda, que ya no esté sentado dentro de este contenedor div. Y luego en el menú NAV, simplemente haz clic en Flex y eso lo centrará por ti. Ahora obviamente, eso es muy, muy rápido, pero obviamente ya hemos pasado por todos los demás pasos en el primer nav que hicimos, que estaba alineado a la izquierda. Entonces no necesariamente lo harías de esta manera. Entonces lo que voy a mostrarles ahora es cómo hacerlo desde cero. Dejaremos esto aquí como algo con lo que comparar, y solo agregaremos otra barra de navegación. Da click en eso y solo para crear algo de espacio, agregaremos margen para alejarlo. Llamaremos a éste, vamos a mover esa clase, y solo llamaremos a este NAV dos. De nuevo, solo empuja eso de nuevo hacia abajo, así que tenemos un poco de espacio, y le daremos un relleno de 20 igual que el primero. Nos aseguraremos de que sea blanco, y comencemos. Se asumiría que si solo fabricamos estos 1,200 píxeles, es lo mismo que eso. Vamos a añadir en nuestro logo aquí. Entonces haz de esta una caja flexible. La forma en que asumirías que harías esto es usando la opción de justificar el espacio entre y distribuir uniformemente de principio a fin. La teoría aquí sería que el logotipo estará a la izquierda, el menú de navegación estará en el centro, y luego el botón estaría a la derecha. Hagámoslo. De hecho, eso me está lastimando ser azul, solo cambiemos eso Hagámoslo negro. Luego copiaremos este pop en nuestro contenedor. Entonces usted asumiría si ahora hago esto, resolvería nuestro problema. Asegurémonos de que esté alineado con el centro. Entonces ojalá, si hacemos esto, Ah. Bien, entonces este es el problema. Entonces esto es algo que quería mencionar. Si lo haces de esta manera, no importa lo que hagas, nunca vas a poder conseguir que esto se vea correcto. Y esto se debe a que con el flujo web de Navin incorporado, hay algunos estilos ocultos que no puedes ver ni cambiar Entonces puedes ver aquí, o tal vez sea el margen, pero no, los márgenes en el exterior. Lo que hay aquí es básicamente algún tipo de relleno en el interior, que obviamente no hay nada. E incluso si te metes con esto, en realidad no cambia nada. Entonces, lo que tienes que hacer es crear tu propio contenedor y no usar el contenedor de navegación incorporado que viene con el estándar Navbar Entonces ojalá eso tenga sentido. Y en realidad solo te mostraré la forma en que haríamos eso. Entonces, lo que haremos es en la propia Navbar para crear nuestro propio contenedor Entonces vamos a ir aquí. Haremos clic en el bloque Div, y llamaremos a este contenedor centrado. Lo deletreé mal, pero lo que sea. Entonces lo que haremos es simplemente ponerle esto a la cima, lo que haremos ahora es darle estilo a nuestro contenedor como queramos. Obviamente, el anterior que teníamos volvería a ser mil 200 píxeles. Hagámoslo ahora. Debido a que no está centrado, necesitamos centrarlo, haga clic en este botón aquí para centrar. Eso está todo bien. También queremos asegurarnos de que sea un diseño flexible y queremos que quede espacio entre ellos. Debería ser, y luego también tenemos alineada al centro. Ahora no hay nada aquí por el momento. Pero ahora, si tiramos todos estos artículos, en realidad funcionará como debería haberlo hecho la primera vez. Hagámoslo. La forma más fácil de hacerlo es con el navegador. Lo que vamos a hacer es tirar nuestra marca, asegurarnos de que se asiente dentro del contenedor. Lo mismo para el menú de navegación, asegúrate de que se sienta dentro. Lo mismo para el botón de menú. De nuevo, sólo hay que empujarla hacia adentro. Entonces este de aquí, también el mismo. Y entonces este contenedor, que es el predeterminado solo se puede deshacer de, y ya se puede ver si le echamos un vistazo a esto, realidad tenemos lo que queríamos. Entonces lo único que nos hemos perdido está en el NAV dos. El segundo NAV no tenemos ningún relleno, así que antes queremos hacer las mismas cosas. Eso será del 3% y queremos lo mismo de cualquiera de las partes. Entonces para que sea igual a ambos lados, solo tienes que mantener presionado Alt o mandar si estás en un mac, y luego a medida que lo mueves, lo cambiará por ambos lados. Y ahora, si miramos ambos, deberías ver que reaccionan de deberías ver que reaccionan la misma manera y tenemos una navegación centrada al crear nuestro propio contenedor. Ahora, obviamente, eso puede sentirse un poco largo ventoso. Y es sólo porque como que quería mostrarte el problema que encontrarías si no hubieras creado tu propio contenedor. Si lo has hecho, y no sabías de ese problema, te estarías rascando la cabeza para siempre tratando de averiguar qué estás haciendo mal Es básicamente porque que el contenedor incorporado dentro del NAV tiene algún estilo pre hecho, lo que no nos habría permitido hacer la justificación que queríamos Entonces eso es muy importante recordar, tienes que hacer tu propio contenedor para cierto estilo. Bien, así que eso prácticamente lo envuelve para el centrado. Lo que vamos a hacer ahora es que vamos a cambiarlo ligeramente para que tengamos el logo en el centro y tengamos un menú de navegación a ambos lados. 5. Navegación: LOGOTIPO: Bien, entonces a continuación, vamos a crear una versión donde tengamos un logotipo en el centro, y vamos a tener una especie de dos menús de navegación cada lado de ese logotipo. Entonces, una vez más, lanzaremos otra barra de navegación. Simplemente volveremos a mantener esto aquí como punto de referencia y lo usaremos para quitarle el logo. Así que vamos a poner en una barra de navegación, en primer lugar, y sólo vamos a alejar esto un poco. Nos desharemos de esta clase que sigue apareciendo, y vamos a llamar a este movimiento un poco más abajo. Y al igual que antes, crearemos algunos acolchados arriba y abajo. Entonces vamos a darle 20. Bien, entonces, similar al último video, en realidad vamos a crear nuestro propio contenedor una vez más. Entonces, en lugar de usar el contenedor de navegación incorporado que viene de serie con el flujo web Vamos a crear el nuestro propio. Entonces justo antes de hacer eso, sin embargo, terminemos tu estilo esto como deberíamos hacer. Entonces esto debería ser blanco. Simplemente crearemos una muestra en caso de que volvamos a esto, y pondremos nuestro logo dentro de la sección de marca Bien, no te preocupes por esto por ahora. Cambiaremos todo este estilo en un momento. Entonces en el propio NV, vamos a entrar en un bloque div, y vamos a llamar a este logo centrado. Contenedor. Una vez más, solo moveremos esto a la cima que podamos ver lo que estamos haciendo un poco mejor. Y queremos tener esto como 1,200 pixeles. Tenemos que asegurarnos de que esté centrado, que es este botón justo aquí. Y entonces lo que podemos empezar a hacer es hacer de esto un flex. Lo que haremos en este caso, una vez más, realidad podemos tener o bien espacio entre y distribuir uniformemente o también podemos tener espacio alrededor y distribuir uniformemente. Podemos pasar por diferentes versiones, y te voy a mostrar cómo se ven ambas. En primer lugar, tenemos que empezar a arrastrar algunas de nuestras secciones hacia adentro Iremos a nuestro navegador. Tenemos que lanzar nuestra marca a esta ahora. Lo mismo para el menú de navegación, que necesita encajar ligeramente hacia adentro, y lo mismo para este botón de menú aquí, puedo chasquear hacia adentro Entonces este viejo contenedor solo podemos deshacernos de nuevo. Y lo que también necesitamos son dos menús de navegación diferentes. Así que simplemente copiaremos y pegaremos eso en, y muy simplemente, simplemente arrastraremos esta marca entre los dos menús de navegación. Y luego solo nos aseguraremos de que todo el estilo en el contenedor del logotipo para que el contenedor de logotipo centrado esté como queremos que sea. Entonces necesitamos tenerlo alineado al medio para que todo sea esencial. Y entonces lo que podemos hacer es simplemente clic en el espacio entre, y ahí vamos. Tenemos un logo en el centro. Tenemos nueve artículos a cada lado. Y si no querías tenerlos completamente al borde, eso depende de ti. También podrías tener espacio alrededor. Entonces hay un poco de hueco a cada lado. Podrías hacer eso. Nuevamente, eso depende completamente de ti lo que quieras hacer, y solo están las dos formas diferentes en las que podrías hacerlo. Y solo para terminar esto, una vez más, agregaremos un poco de relleno. Entonces esto tiene que ser del 3% igual que el resto de ellos. Nos aseguraremos de que sea lo mismo en ambos lados. Y entonces echemos un vistazo a eso. Y ahí vamos. Tenemos un logotipo de navegación centrado, y tenemos elementos de navegación a ambos lados. Bien, así que para el siguiente que vamos a hacer, lo vamos a tener donde tengamos un desplegable de pantalla completa sin ningún elemento real de navegación en pantalla inicialmente. Así que un poco como lo hacemos para móviles, vamos a tener esto pero básicamente también en la versión de escritorio también. 6. Navegación: HAMBURGER HAMBURGER de DESkTOP: Bien. Entonces para este video, voy a mostrarte cómo tener esencialmente el mismo tipo de cosas que tienes en un navegador móvil. Entonces solo un botón con un menú desplegable, pero tenerlo también en la vista de escritorio. Entonces solo para deshacernos de algún desorden, solo nos desharemos de este NAV y se lo haremos a este Entonces todo lo que tienes que hacer es ir a tu tablet view o tablet móvil es la mejor para hacerlo . Y luego lo que podemos hacer. En el panel de ajustes de la Navbar, puedes ver que te da algunas opciones aquí de donde aparece el icono del menú Entonces, si quisieras que esta navegación no tuviera la hamburguesa sobre la mesa, realidad podrías hacerlo si quisieras Y también puedes ir por el otro lado. Entonces, si quieres, puedes arrastrar esto todo el camino hacia la izquierda. Y ahora en la vista de escritorio, también vas a tener el menú desplegable. Entonces echemos un vistazo rápido a esto. Y ahora puedes ver que hay un desplegable con todos los elementos de navegación. Ahora bien, eso es como el final del video, supongo, porque eso es poco hecho lo que queremos hacer, pero no se ve genial. Así que vamos a cambiar esto un poco para que se vea un poco más utilizable. Entonces lo primero que tenemos que hacer, creo que tenemos que darle algún relleno o perdón, algún margen a este botón de aquí, así que lo empuja lejos del botón. Entonces, hagamos eso antes que nada. Entonces en el propio botón, solo aplicaremos tal vez hagamos 40 solo por ahora, y eso ya se verá mucho mejor. Y luego en el botón de menú, lo que vamos a hacer es volver a ir a nuestra configuración y luego hacer clic en abrir menú. Entonces en el propio menú del NAV, vamos a cambiar el color de este. Entonces, en lugar de ser grises, queríamos que coincidiera con el fondo del nav, así que esto va a ser blanco. Así que solo convierte eso en blanco, y ya, esto va a quedar mucho mejor. Bien. Entonces eso es mejor. Pero de nuevo, todavía se ve un poco raro porque obviamente, aquí solo tenemos tres íconos. Ahora bien, realmente no haces esto si quizás tuvieras múltiples elementos de navegación aquí. Pero solo voy a mostrarte una forma ligeramente diferente de abordar este diseño, y tal vez hacerlo un poco mejor. Entonces vamos a cambiar esto también. De hecho, vamos a dejar eso por ahora. Y tal vez solo metamos esto en el centro. Ahora bien, hicimos esto brevemente en el primer curso que hice, pero solo quiero mostrarles de nuevo cómo hacerlo. Entonces, en lugar de mantenerlo así, lo que vamos a hacer es tirar un contenedor div. Ahora bien, lo que no quieres hacer es hacer esto al propio menú de navegación. No quieres reiniciar el menú de navegación porque vas a cambiarlo por otros, que quizás no quieras. Entonces, la mejor manera de hacerlo es tirar tu propio bloque dv en él, y por lo tanto, luego alterar ese contenedor para que se adapte. Entonces dentro del menú de navegación, lo que vamos a hacer es lanzar un dv. Y luego vamos a arrastrar estos elementos a ese bloque dv. Y luego ahora podemos darle estilo al bloque div dentro del menú de navegación, embargo queremos sin afectar el menú de navegación incorporado Entonces lo que vamos a hacer es tal vez hacer la altura de este div, o tal vez hacerlo 50 VH, así que ocupa el 50% de la altura de la vista Entonces eso ya se ve mucho mejor, y también haremos que el bloque div un cuadro flex y lo tendremos configurado en vertical. Y ahí estamos. Ya se ve mucho mejor. Les daremos una clase de enlace de navegación. De hecho, debería haberlo hecho antes. Nan copiaremos y pegaremos eso unas cuantas veces. Vamos a hacer este que estuvo a punto. Haremos esos servicios y éste puede ser contacto. Bien. Y luego solo haremos estos un poco más grandes. En lugar de ser 14, intentemos 25. Genial. Estoy dentro de este bloque div. También vamos a llevar esto al centro. Tengamos esa línea al centro y justificémosla al centro también. Bien, ya, esto se ve mucho mejor, y ¿qué podrías hacer también? A ver si tenías muchos artículos de navegación. También podrías convertirlas en diferentes columnas a medida que atravesamos. Pero creo que probablemente lo dejaremos en esto por ahora. Yo sólo quería mostrarte básicamente cómo harías esto. Como puedes ver ahora, no tenemos ningún menú de navegación aquí. Cuando miras el botón, sin embargo, sí trae a colación la navegación. Y ten en cuenta, sin embargo, cualquier cambio que hayamos hecho en el NAV aquí también va a ser el mismo en tablet y abajo. Entonces digamos que no querías esto en el móvil, entonces podrías alterarlo obviamente, y no cambiaría este. Entonces sólo para demostrártelo. Digamos en el móvil, si queremos que este NAV vuelva a abrir. Así que ve al botón de menú. Vaya a la configuración, haga clic en el menú abierto. Entonces digamos que para una tableta, queremos que esto llegue hasta el final, así que es el 100% de la altura de la ventanilla Hagámoslo. En lugar de 50, hagamos 100. Y ahí vamos. Ahora, es posible que desee en realidad no tener esto centrado para la vista de tableta, pero se lo dejaré a usted. Pero sólo para mostrarte la diferencia. Entonces en escritorio, sube a mitad de camino, luego en tablet y todo lo demás hacia abajo, será 100% de la altura de la vista. Bien, así que eso prácticamente lo resume para este video en el siguiente video, vamos a estar viendo cómo usar los menús desplegable 7. Navegación: descentrado: Bien, entonces a continuación, vamos a ver cómo usar los desplegables dentro del menú de navegación Entonces, antes que nada, agreguemos un estándar lo siento, una navegación estándar encendida. Y se puede ver por encima de la Navbar, en realidad tenemos una opción desplegable, que es lo que en realidad vamos a lanzar dentro del menú de navegación dentro de la barra de navegación Entonces antes que nada, sin embargo, vamos a tirar el Navbar, y vamos a hacer el fondo de la misma en lugar de este horrible color gris. Lo haremos como blanco. Y para la marca, solo agregaremos lo que sea que tengamos por ahí. Entonces tenemos este logo aquí. Obviamente, puedes hacer lo que quieras con esto. Y solo haremos que la barra de navegación en sí un poco más ancha. Así que solo agregaremos un poco de relleno abajo arriba y abajo. Bien, así que está bien. Esto no está perfectamente centrado en términos del menú de navegación. Entonces, en realidad, vamos a centrarlo, así que por el momento está un poco apagada. Así que pongamos un poco de relleno en esto también. Algo así se ve bien. Así que solo lo estoy haciendo mirándolo por ahora. Eso está bien. Bien, entonces lo que vamos a hacer entonces está dentro de nuestro menú de navegación, vamos a lanzar ese elemento desplegable que viste dentro del panel de elementos. Entonces, antes que nada, asegúrate de tener tu menú de navegación seleccionado, y luego ve a tu panel de elementos y solo ve a la opción desplegable aquí Haga clic en eso y luego agregará un elemento desplegable. Entonces, por el momento, solo te mostraré cómo es esto. Si tenemos una vista previa de esto, esto es de nuevo, como normalmente sería para el menú de navegación, no pasa nada emocionante, pero luego para desplegable, si haces clic en esto, se despliega. Bien, así que eso está bien. Y básicamente todo lo que harás desde aquí es entonces obviamente alterar Si abrimos el menú, puedes alterar los enlaces dentro, y luego tienes un menú desplegable Ahora bien, esto no es particularmente sexy, ¿verdad? Cuando solo haces clic en él, esto es realmente, realmente básico. Obviamente, podrías darle estilo a esto como quieras, pero no anima nada por defecto Vamos a ver más que ver con animaciones más adelante en el curso. Pero solo voy a mostrarte rápidamente cómo harías esto para conseguirlo, así que es un poco más interesante de lo que es actualmente. Bien, así que pasa al panel de interacciones aquí. Haga clic en Interacciones, y haga clic en el icono t más aquí, y verá que en realidad tenemos una nueva opción disponible. Entonces, por lo general, esto va a ser de grado fuera. Pero como hemos seleccionado el desplegable, ahora dice, Dropdown se abre, y esto es lo que queremos seleccionar porque queremos tener esta animación cuando aparezca el desplegable Bien, así que eso está bien. De hecho, solo abriremos el menú también. Volver a nuestra animación aquí. Y lo que podemos hacer ahora es dar clic en Inicio y Animación. Haga clic en el icono más para iniciarlo. Y solo llamaremos a este desplegable. Y ahora, en realidad quieres animar la lista. Entonces esta es la lista desplegable. Ahora estaban en el panel de interacciones. Es necesario cambiar desde el menú desplegable debe estar resaltado. Ahora cámbialo a la lista desplegable porque esto es lo que realmente vas a estar animando El desplegable en sí mismo con este pequeño rayo es el significante de que sea el gatillo Entonces eso es lo que está desencadenando la animación, y la lista desplegable es lo que realmente queremos animar Así que asegúrate de que la lista desplegable ya esté seleccionada. Vuelve a tu panel de acciones aquí en el ícono más. Lo que vamos a hacer es cambiar el tamaño. Para ello, lo que queremos hacer es hacer clic en para cronometrar, establecer en estado inicial, y esto va a ser en realidad cero. En realidad ya ambos dicen cero, pero es calificación fuera. De hecho hay que entrar en cero para ambos de estos para que esto funcione. Simplemente haga clic en Entrar. Básicamente, va a estar completamente oculto. Entonces lo que podemos hacer es correcto, clic en la lista desplegable, duplicarla, y esta vez, vamos a tenerla establecida en s vamos a tenerla seleccionada en lugar de en píxeles. Haga clic en eso y luego configúrelo en auto tanto para el ancho como para ambos la altura también. Entonces ahora si tenemos una vista previa de esto, verás que se está animando hacia abajo, y está creciendo en tamaño a medida que animamos Bien, entonces esa es la primera parte hecha, así que solo guarda esto. Entonces lo que tenemos que hacer también es asegurarnos que cuando se cierre el menú se anima también Lo mejor que puedes hacer es entrar en acción aquí y luego iniciar una animación. De hecho, vamos a duplicar este menú desplegable de nuevo. Haga clic derecho sobre los tres puntos aquí y duplique eso. Ahora dice desplegable dos. Asegúrese de seleccionarlo y luego haga clic en Configurar. Y entonces lo que podemos hacer es simplemente eliminar esta inicial aquí, deshacernos de eso. Este, necesitas desmarcar estado inicial, deshacerte de eso Entonces necesitarás simplemente restablecer la flexibilización que deseas En lugar de lineal, queremos que se ajuste a la facilidad. Esto en realidad está bien. De hecho queremos que vuelva a cero porque cuando obviamente cuando vuelve a salir, tiene que volver a cero, así que no se puede ver. Asegúrate de que esté seleccionado, y ahora todo eso debería estar bien. Eso lo guardaremos. Ahora veamos si tenemos una vista previa de esto, cómo se ve esto. A medida que hacemos clic en él, cae hacia abajo. Tenemos un problema. Entonces el problema que tenemos es que baja bastante bien, pero cuando hacemos clic fuera de él, simplemente desaparece muy rápido, y la animación que deberíamos tener en realidad no está ahí. Y la razón de esto es establecer otra opción. Entonces, cuando vayamos a la opción desplegable aquí, entra en la configuración de la configuración del menú abierto. Y verás aquí, lo que también haremos es hacer clic en Abrir en Host que cuando solo pasamos el cursor sobre él, se abre, pero también el retraso cerrado necesita ajuste Si no configuras esto, la animación no funcionará correctamente. Entonces lo que vamos a hacer es escribir 500 milisegundos, que es lo mismo que las animaciones establecemos para una especie de 0.5, que es 0.5 segundos, lo que equivale a 500 milisegundos Así que asegúrate de que esté todo seleccionado, y ahora todo debería estar funcionando como debería hacerlo. Entonces ahora si pasamos el cursor sobre él, se va a animar hacia abajo, entonces nos quitamos nuestro ratón, vuelve a animarlo adentro. Y ahí estamos. Eso es prácticamente todo lo que tenemos que hacer por ello. Ahora obviamente, entonces puedes darle estilo a esto, como quieras. Si quisieras tenerlo cuando haces clic hacia abajo a estos que estos cambian de color, podrías hacerlo fácilmente y agregar más animaciones o incluso una transición, podrías hacerlo. No necesariamente tendrías que usar una animación para eso. Si quieres tener varios de estos, puedes hacerlo también. Entonces solo para mostrarte eso, si pasamos al menú desplegable, asegúrate de que el menú desplegable esté seleccionado, y luego puedes simplemente copiarlo y pegarlo tantas veces como quieras. Entonces ahora vamos a echar un vistazo a eso. Como puedes ver, todos hacen el mismo tipo de cosas y todos animan hacia abajo Bien, entonces ese es un ejemplo realmente básico de cómo usar los menús desplegables Ahora, de nuevo, no es demasiado emocionante lo que hemos hecho. Pero nuevamente, para que se ajuste a sus necesidades o proyectos particulares, entonces podría cambiar los colores. No obstante, quieres si quisieras que algún tipo de efecto hover estuviera en cada uno de estos, podrías hacerlo Nuevamente, hay infinitas posibilidades en cómo podrías animar esto Bien, pero eso prácticamente lo envuelve para la parte desplegable. A continuación, vamos a hacer algo nuevo lo que implica desplegables Pero en lugar de simplemente una especie de menús desplegables singulares de un elemento de navegación, vamos a crear un mega menú 8. Navegación: MEGA MENU: Bien. Entonces para este video, vamos a estar viendo cómo crear un mega menú. Entonces esto va a seguir desde el video desplegable que acabamos de hacer anteriormente. Y en realidad también vamos a usar un elemento desplegable para el mega menú, y simplemente modificarlo para adaptarlo a nuestras necesidades. Bien, así que antes que nada, vamos a lanzar el NAV predeterminado dentro Webflow. No tienes que hacer esto. Podrías crear el tuyo si realmente quieres , pero solo por velocidad, voy a usar el menú estándar y luego algo así alterarlo para que se adapte. Simplemente lanzaremos un bloque de texto, y solo llamaremos a esto para el logotipo. Sólo lo llamaremos mega menú. Oh. Bien, eso está bien. Simplemente lo haremos un poco más grande, así que algo así como 30 píxeles. Y en la parte de la marca aquí, solo le daremos un poco de espaciado, así que tal vez 20 estaría bien. Bien, entonces ahora, dentro del menú de navegación, tenemos que lanzar un menú desplegable. Entonces hagámoslo igual que antes. Y ahora, esto es lo que vamos a usar para obtener este ancho completo. Entonces actualmente, si abrimos esto, vaya a nuestro panel de configuración aquí y vaya a menú abierto. Puedes ver que literalmente va directamente hacia abajo y tiene algo de estilo para literalmente ocupar el espacio de los artículos actualmente en él. Pero lo que queremos es que esta lista desplegable ocupe toda la extensión de la pantalla Hay algunas cosas que tenemos que hacer para conseguir que haga eso. Entonces, si vamos a un navegante, necesitamos alterar algunas cosas. Así que en realidad necesitamos que se establezca el menú desplegable en lugar de un relativo, que es actualmente, necesitamos establecer esto en estático. Te explicaré por qué en un momento. Esto tiene que ser estático. Se puede ver en cuanto lo haga, algo ha pasado. Ahora está tomando un poco más de espacio, amable a mitad de camino Y el menú de navegación actualmente también está configurado en relativo, y eso tendrá que ser también estático. Entonces también, tenemos que asegurarnos de que la barra NAV en sí, la barra real en sí está establecida en bien, podrías usar fijo o absoluto, y vamos a usar absoluto, y luego vamos a asegurarnos de que se pegue a la parte superior de la pantalla pase lo que pase. Ahora, cuando volvamos a nuestra lista desplegable, si abrimos el menú. Ahora bien, si seleccionamos la opción aquí, podrías tenerla como arriba a la izquierda o podrías usar esta de aquí. Lo vamos a tener desde arriba. Ahora se puede ver que está ocupando toda la extensión de la pantalla Y si solo bajamos un poco esto usando los controles del posicionamiento, ahora puedes ver que podemos moverlo a donde queramos. Y si lo hacemos al 100% aquí en la parte inferior, Bien, entonces ahí estamos. Ahora tenemos un mega menú, que ocupa toda la extensión de la pantalla Ahora bien, la razón de esto es que necesitábamos que la lista desplegable fuera relativa a la propia Navbar Ahora, actualmente, el Navbar se llama Navbar cinco. Nuevamente, deberías estar nombrándolos correctamente, pero Nuevamente, solo para este video, no voy a ser del todo estricto en eso, pero nuevamente, es relativo a la Nav Bar, razón por la cual ahora ocupa toda la extensión de la pantalla Si no hubieras hecho el Navbar absoluto o relativo o fijo, esto no funcionaría Quiero decir, solo para mostrarte eso, si vuelvo a poner la barra de navegación a estática, ya verás cuando abramos este menú, en realidad ya no va a estar llena. Entonces en realidad no está funcionando en absoluto. Así que asegúrate de que la propia Navbar, en este caso, queremos que se pegue a la parte superior de la pantalla, asegurarnos de que en realidad es absoluta y a la parte superior, y ahora cuando la abrimos, hace lo que queremos que Bien, así como puedes ver en este momento, todos nuestros enlaces de navegación están justo al borde de la pantalla. Entonces lo que tenemos que hacer es conseguir esto a un ancho máximo, que coincidirá con el contenedor dentro de Webflow Entonces, el tamaño máximo del contenedor por defecto dentro de Webflow es de 940 píxeles Entonces, qué vamos a hacer dentro de nuestra lista desplegable, si nos aseguramos de que esté seleccionado, vamos a lanzar un div, y llamaremos a este contenedor NVLink Y vamos a darle a esto un ancho máximo de 940 píxeles, y vamos a centrarlo. Luego, usando el navegador, solo mueve esto a la parte superior, así que está justo debajo de la lista desplegable, y luego simplemente arroja uno de estos enlaces desplegables dentro de ese contenedor, y luego justo ahora borra estos otros dos Bien, entonces puedes ver que tenemos un ligero problema de alineación porque en realidad tenemos algún relleno predeterminado en el propio nav Lnk Quieres deshacerte de eso, así se alinea correctamente. Se puede hacer. Entonces, si solo vas a esto y luego solo te deshaces de eso para que se ponga a cero, ahora verás que se alinea completamente con nuestro lego Bien, entonces ahí estamos. Ese es nuestro primer enlace de navegación. Hecho. Obviamente, lo que podrías hacer entonces es obviamente cambiar esto a lo que quieras hacer, así que esto podría ser, no sé, servicio uno. Y luego si solo quieres duplicar esto, como quieras. Lo que haces inicialmente, por supuesto, es darle estilo a este enlace desplegable en particular y luego pegarlo. Pero dentro del menú desplegable dentro del contenedor de enlaces de navegación, lo que quiero hacer es meter esto en una cuadrícula, y de esa manera, en realidad podemos tenerlos espaciados uniformemente a lo largo. Entonces, lo que haremos nos aseguraremos se seleccione el contenedor nav Link, que actualmente es solo un div, pero convertirlo en una grilla. Bien, y ahora vamos a tener creo que tendremos tres columnas, y también tendremos dos filas. Así que todo está bien. Y entonces lo que también haremos es este enlace desplegable. Tenemos que darle un poco de estilismo. Entonces, por defecto, tiene algo de espacio aquí. Así que vamos a poner a cero eso. Sólo deshazte de eso. Y entonces lo que vamos a hacer es asegurarnos de que sea un alineado a la izquierda, que actualmente es. Y luego si luego copiamos y pegamos esto una vez que lo hayamos estilizado, quieras , entonces ocupará todas las diferentes celdas Entonces esto te dará un desplegable bastante común. Entonces, lo que también tenemos que hacer, sin embargo, es que esté un poco apretado en este momento, tenemos que darle un poco de espaciado. Entonces dentro del contenedor Navaln, vamos a darle un poco de relleno a eso Entonces vamos a hacer algo como, no sé, algo así como 50 pixeles. Eso se ve bastante bien. Bien, hay 50, y ahí estamos. Tenemos un menú desplegable básico, que se alinea correctamente con nuestro menú Bien, así que hagámoslo. Y también, podemos cambiar la forma en que esto funciona. Si quieres tenerlo desplegable en Hava, también puedes hacerlo Y si solo tenemos una vista previa de esto ahora, si solo nos deshacemos de él, ahora cuando muevo el mouse sobre él, cae hacia abajo. Bien, entonces ahí estamos. Esa es una forma muy básica de crear un desplegable. Ahora bien, no vamos a parar aquí, porque esto es increíblemente aburrido. Así que solo tenerlo literalmente pop hacia abajo recto así sin ningún tipo de animación no es genial. Generalmente no se ven los menús desplegables tan sencillos como este. Así que en realidad vamos a poner una animación en el menú desplegable. Entonces vamos a darle una idea a esto. Así que tenemos que asegurarnos de que el menú desplegable esté seleccionado. Así que asegúrate de que esté seleccionado en el navegador, ya que este va a ser nuestro disparador para activar la animación para que aparezca esta lista desplegable Lo que quiero que suceda es que quiero que la lista desplegable básicamente crezca de tamaño o va a ser obviamente comenzar desde cero píxeles y vaya a solo auto por muy grande que sea esto en realidad. Bien, así que asegúrate de que el menú desplegable esté seleccionado. Vaya a su panel de interacciones por aquí, y luego vaya a un elemento disparador y verá porque hemos seleccionado nuestro menú desplegable por aquí, nos está dando una nueva opción, que es el desplegable se abre Entonces eso es lo que vamos a elegir. Y luego vamos a iniciar una animación, crear una nueva aquí. Y vamos a tener esto como lo han llamado desplegable abre. Bien, entonces nuestro disparador ahora está seleccionado, pero obviamente, tenemos que elegir entonces lo que queremos animar Y lo que queremos animar es nuestra lista desplegable. Así que asegúrate de que se haga clic. Y lo que vamos a hacer a partir de aquí es entonces pasar a dimensionar. Y queremos fijarlo como el estado inicial. Entonces haz clic en este de aquí. Por lo que se selecciona el estado inicial. Y entonces tenemos que básicamente simplemente poner a cero esto. Ahora, actualmente dice cero. Pero en realidad están calificados. De hecho hay que poner en cero para que esto funcione correctamente. A veces conozco gente que usa Webflow por primera vez acaba asumir que dice cero y luego funcionaría, pero en realidad hay que ingresar cero para que funcione correctamente Bien, así que ya está todo hecho. No te preocupes demasiado por esto por ahora. Vamos a resolver este problema en un momento. Esto va a ser algo oculto de desbordamiento. Lo vamos a hacer en un momento. Sin embargo, lo que vamos a hacer ahora es simplemente hacer clic en esto y duplicarlo. Esta vez, en lugar de no ser un estado inicial, vamos a tenerlo listo para facilitar. Lo que realmente vamos a hacer es establecer esto en auto. Y de esta manera, va a respetar el dimensionamiento que en realidad le dimos a esto nosotros mismos. No es necesario establecer un valor de píxel. Solo asegúrate de que esté configurado en automático, y nos aseguraremos de que también esté configurado para facilitar. Y entonces vamos a salvar eso. Y ahora, si tenemos una vista previa de esto, verás que crece y aparece hacia abajo así. Bien, así que eso está bien. Así que vamos a previsualizar esto en lo real. Ahora, puedes ver, tenemos un problema con el texto que aparece cuando se abre el menú. Entonces tenemos que asegurarnos de deshacernos de este problema. Así que solo te voy a mostrar esto otra vez en las animaciones, si nos fijamos en esto. Se puede ver que este texto ya está algo así como ahí. Entonces, lo que tenemos que hacer está en la lista desplegable. Asegúrate de volver a tu panel CSS, antes que nada, Entonces en lugar de que esto sea visible el flujo, simplemente haz clic en desbordamiento oculto, y esto habrá resuelto el problema para ello. Si volvemos al menú desplegable de las animaciones aquí, ahora verás que no lo tenemos visible, que es lo que queremos. Entonces, si hacemos clic en Reproducir, ahora verás que hace eso, y no hay texto que sea realmente visible. Bien, así que eso está hecho. Pero lo otro que tenemos que hacer es conseguir que esto se vuelva a animar hacia arriba cuando quitamos nuestro ratón del gatillo. Así que ya está hecho. Y entonces lo que vamos a hacer ahora es en menú cerrar, vamos a iniciar una animación. Y se abre el desplegable. En realidad vamos a duplicar el que acabamos de crear. Aquí tengo unos que he hecho anteriormente, así que solo ignora estos. Así que creamos las aperturas del desplegable. Haga clic en los tres puntos a la derecha aquí y duplique esto, y luego vamos a renombrarlo desplegable cierra O desplegable cerrando. Bien, eso está bien. Y luego asegurarnos de que esté seleccionado, y luego podremos configurar éste. Entonces, muy sencillo. Todo lo que tenemos que hacer es deshacernos de este primero de aquí, desmarcar el estado inicial para el que ahora queda Así que asegúrate de que eso se haya comprobado, y luego vamos a configurarlo para que también se aliente. Y lo mantendremos como 0.5 para el momento de eso. Así que todo está bien. Y entonces esto ya debería estar puesto a cero, pero solo asegúrate de que en realidad esté escrito Bien, así que guarda esto, y solo hay una cosa más que tenemos que hacer. Entonces, antes que nada, en realidad, asegúrate de haber seleccionado los correctos. Muy a menudo, ya sabes, cometí errores de muerte donde simplemente me olvido de seleccionarlo, y me pregunto por qué no está funcionando. Así que asegúrate de no hacer eso. Asegúrese de que los dos correctos estén realmente seleccionados aquí. Así que asegúrate de que no sea eso. Nos aseguraremos de que se caiga cerrando, aseguraremos de que este se haya caído abierto. Entonces solo tienes que ir a tu panel de ajustes aquí. Ya lo hemos configurado para abrir menú en Hov, pero también quieres agregar un retraso cerrado Ahora, hay que configurar esto para que funcione correctamente. Entonces el retraso cerrado, vamos a tener es de 500 milli segundos, que va a ser lo mismo que la velocidad de animación para el cierre de extremo abierto Así que asegúrate de que esté seleccionado. Esta vez, cuando pasamos el cursor sobre, se anima al aire libre y también se anima en la ropa. Entonces ahí estamos. Tenemos nuestro mega menú muy básico todo ordenado. Ahora bien, una cosa que quiero mencionar en realidad, si en realidad muevo el mouse un poco hacia abajo, en realidad hay una brecha muy pequeña aquí, lo que está haciendo que se cierre antes de que pueda llegar a cualquiera de estos. Ahora bien, esto sucede en los casos en los que has hecho ajustes en la propia barra de nab Si consigo el Nabar algo de relleno y ahora trato de hacer esto, verás que en realidad se está cerrando antes de que tengamos la oportunidad de entrar en el mega menú Y la razón de esto es que verás aquí, realidad hay una brecha entre donde se detiene este tugle desplegable porque le hemos dado algo de espaciado a la barra de navegación Entonces, qué tenemos que hacer para asegurarnos de que esto no suceda. Si abrimos el menú es solo retroceder esto un poco. Entonces, si pasamos a nuestro posicionamiento absoluto, en lugar de 100, lo movemos un poco hacia arriba aquí, y esta vez, vamos a tener suficiente espacio aquí, se puede ver que la brecha en realidad está cerrada. Entonces ahora, no hay brecha para que esto desencadene un poco si eso tiene sentido Ahora bien, si volvemos a hacer esto, si muevo mi ratón hacia abajo lentamente, verás que no hay ningún punto en el que detenga el gatillo. Entonces ahora cuando pasas el cursor sobre él, hace exactamente lo que se supone que debe hacer. Bien. Bien, entonces eso más o menos es para este video. Para el proyecto de clase, voy a crear algo que use muchas facetas diferentes de todas las cosas que vamos a usar en este curso Y para el proyecto de clase, voy a volver a usar un mega menú, y voy a hacer algo una variante de esto básicamente. Entonces, en lugar de solo usar enlaces de texto, lo que puedes hacer, por supuesto, es que puedes poner lo que quieras en este mega menú. No tienes que tenerlo son solo enlaces de texto. Se pueden poner imágenes en. También puedes animar lo que entra aquí. Entonces podrías en lugar de solo el enlace desplegable, podrías tener imágenes, podrías tener un bloque de enlaces en lugar de un enlace desplegable. Y eso es lo que voy a hacer para el proyecto de clase. Así que en realidad vamos a volver al menú del NAV un poco más tarde. Bien, así que eso es prácticamente todo para este video. Ojalá, todo eso tenga sentido. Y nuevamente, vamos a volver a un mega menú hacia el final del curso cuando hagamos nuestro proyecto de clase. Pero solo por ahora, este es un mega menú muy sencillo con una animación desplegable. 9. Navegación: móvil personalizado: Bien. Bien, entonces para el navegador móvil, básicamente vamos a seguir lo que acabamos de hacer desde el mega menú. Y de hecho, solo siguiendo ese video, si miramos el tipo de versiones de tablet y móvil del mega menú, tenemos un pequeño problema, que cuando hacemos esto, esto sucede, lo que, por supuesto, no se ve bien. Ahora, lo que podrías hacer es intentar alterar esto para que se ajuste a la versión móvil. La forma en que lo harías es quizás yendo al propio menú de navegación y haciendo que la posición del menú de navegación sea absoluta, y volviendo a la normalidad, como suele ser. Esa es una forma de hacerlo, pero el único problema con esto es que a veces obtienes fallos cuando vuelves a esta versión también. Entonces no siempre es perfecto hacerlo de esta manera, no diría yo. En realidad estás mejor. Ves, esta es la falla de la que estoy hablando. Entonces a veces tiene un conflicto. Entonces, lo que siempre hago es poner una nueva navegación en la que esté completamente separada, y simplemente se convierte en algo propio como NAP móvil. Entonces lo que haríamos en la vista de tableta hacia abajo es básicamente solo ocultar esta versión del nav. Entonces hagámoslo. Y entonces lo que podemos hacer es simplemente lanzar una nueva barra de navegación. Y entonces podemos darle estilo a esto, sin embargo queramos conservando aquí el nav original. Y obviamente, en el escritorio, tendríamos que ocultar esta versión ahí también. Entonces queremos quedarnos con eso. Y solo por velocidad, en realidad solo copiaremos este texto, dónde estamos y volveremos a aquí. Entonces, bien, entonces tenemos que asegurarnos de que lo mostramos en la vista de tableta, así que eso sería como suele Y dentro de nuestra marca, pondremos nuestro logo. Entonces hagámoslo. Y en lugar de mega menú, llamaremos a este menú móvil. Y de hecho haremos esto un poco más pequeño, así que solo nos daremos una subclase de mob para móviles y lo haremos algo así como 20 en su lugar, y solo por velocidad, aplicaremos un poco de relleno a esto Bien, entonces tenemos los makings de un menú móvil. Y la forma en que esto se ve actualmente es solo la forma estándar de pantano en que Webflow los tiene Entonces, lo que quiero hacer hoy es cambiar realmente la forma en que interactuamos con el ícono de la hamburguesa Entonces la hamburguesa es estática. No se mueve. No hay ningún tipo de efecto de animación. Si miramos el sitio web de Webflow, por ejemplo, y nos fijamos en la versión móvil, Verás como hacemos clic en la Hamburguesa, tiene animación, lo cual es bastante agradable Y esto obviamente es súper común con muchos sitios web. Y es algo un poco más interesante que el tipo estándar de pantano, ya sabes, simplemente se mantiene en su lugar Entonces quiero mostrarte cómo hacer algo así. Y en realidad hay algunas formas diferentes de abordar esto. Así que en realidad puedes crear este tipo de efecto que tuvimos en el sitio web de Webflow en términos de usar una interacción, cual es bastante complicado, lo cual es bastante complicado, puede ser, dependiendo qué tipo de interacción tengas Pero hay otra forma de hacerlo, que podría decirse que es un poco más fácil Entonces todavía implica interacciones, pero significa que en realidad no tenemos que construir el efecto de que se mueva. Y la forma en que vamos a hacer eso es usando algo llamado archivos lottie o un archivo lottie Por lo que este sitio web se llama lottifies.com. Y los archivos lottie básicamente son una especie de animaciones creadas en after effects que puedes usar en tu sitio web de Webflow Y lo mejor de ellos es que tienen un tamaño de archivo muy bajo, y se ven absolutamente geniales. Y hay todo tipo de cosas para las que puedes usar esto. Lo que vamos a hacer es simplemente escribir hamburguesa. Y cuando hagamos esto, verás que en realidad se carga en muchos menús de hamburguesas si finalmente se carga. Y ahí estamos. Entonces algunas de ellas son hamburguesas reales, pero verás que el término hamburguesa se refiere a las tres líneas que generalmente usas para las siestas móviles Y vamos a utilizar uno de estos como nuestra animación para nuestra navegación móvil. Nuevamente, podríamos usar cualquiera de ellos. Es solo un caso de desplazarse y encontrar uno que te guste mirar Creo que este para mi se ve bastante bien. Vamos a usar esto. Por cierto, todos los. Muchas de las animaciones en archivos lottie que vienen también son completamente gratuitas de usar completamente gratuitas de usar. Es realmente, realmente genial. De hecho vamos a volver a usar archivos lottie un poco más tarde en el curso cuando hablemos más animaciones e interacciones Voy a mostrarles esto ahora porque obviamente estamos en la etapa del NAS móvil. Entonces también tienen un mercado de donaciones pagas, que son algo más complejas, pero estas son en realidad gratuitas. Entonces vamos a ir a esta, y vas a descargar el archivo. También vale la pena mencionar que estos son todos negros por defecto, pero en realidad también puedes cambiar el color de ellos, si bajas a editar colores de capa, en realidad puedes cambiarlos a blancos si tuvieras una especie de fondo negro o el color que quisieras. Bien, entonces vamos a descargar esto. Entonces queremos el archivo Lottie JS, y luego volveremos a nuestro proyecto aquí Y lo que vamos a hacer es hacer pop este archivo dentro del contenedor del botón de menú. Entonces le echamos un vistazo a eso. Entonces dentro de este botón de menú, vamos a deshacernos de este icono, y vamos a reemplazarlo con este archivo lottie Así que justo antes de hacer eso, necesitamos subir esto aquí. En realidad ya lo he cargado fuera de pantalla, pero lo voy a cargar de nuevo solo para que puedas ver algo así. Entonces una vez que eso se carga, todo lo que necesitas hacer es luego arrastrarlo a este botón de menú aquí. Entonces voy a hacer eso ahora. Entonces si lo arrastramos adentro, Y ahí estamos. Entonces por el momento, es enorme, obviamente, vamos a tener que arreglarlo. Así que deshazte de eso por ahora. Y también, tenemos que deshacernos de este icono porque ya no lo necesitamos. Bien, entonces el tema que tenemos es absolutamente enorme, así que tenemos que tratar de hacer esto mucho más pequeño. Y muchos de los archivos lottie que tienes tienen mucho espacio a su alrededor, razón por la cual esto ha sucedido Entonces tenemos que hacer algo tipo de astucia para sortear este problema. Y la forma de evitarlo es hacer clic en el selector de botones de menú aquí, y en lugar de tenerlo visible desbordamiento, lo vamos a tener como desbordamiento oculto. Después en la animación de Lotte, vamos a darle una altura establecida. Algo así como 40 píxeles estará bien, y luego la altura también será de 40. Pero eso ahora obviamente es demasiado pequeño. Entonces, lo que vamos a hacer ahora es escalar esto usando una transformación dos D y tres D. Ahora bien, si vamos a escala, y solo arrastramos esto a donde parece correcto, creo que algo como tal vez tres realmente se vería apropiado. Y lo que realmente está sucediendo ahora es el contenedor real en sí mismo ahora está oculto o desbordamiento oculto, así que no se está mostrando, sino que solo tenemos escala para hacerlo un poco más grande. Entonces espero que eso tenga sentido. Bien, entonces ahora lo que podemos hacer es empezar a hacer que esto se vea bien y de hecho lo animaremos para que abra el menú Entonces, la forma en que hacemos esto, de hecho, justo antes que nada, necesito ajustar esto ahora, en realidad. Entonces esto no se ve del todo bien. Entonces tenemos algo de relleno. Sí, vamos a ajustar ligeramente el acolchado. Bien, entonces tenemos que hacer clic en la propia Navbar. Ahora bien, a esto se le llama Navbar six. Nuevamente, debería haberlo llamado algo propio, pero como sea. Ojalá, al ver el primer plato, te hice saber que deberías estar nombrando todas las clases a medida que avanzas Pero sólo por la velocidad, no voy a hacer eso. Bien. Entonces, lo que vamos a hacer ahora es pasar a nuestro panel de interacciones. Con el Navbar seleccionado. Y entonces verás que tenemos una opción especial que ahora está abierta para nosotros. Entonces no siempre tienes a este Mofult. Normalmente es de grado fuera. Pero como he seleccionado el Navbar, ahora tenemos esta opción Entonces, si haces clic en esto, ahora vamos a iniciar una interacción. Entonces iniciaremos una animación. Tengo algunos diferentes aquí solo de proyectos anteriores. Entonces vamos a comenzar uno nuevo y lo llamaremos pluma de menú móvil. Oye, J. Y entonces lo que vamos a hacer es iniciar la animación. Entonces esto está encendido cuando se abre el menú del móvil. Entonces lo que queremos efectuar, sin embargo, es la animación de lottie Así que asegúrate de que la animación lottie esté seleccionada cuando hagamos esto Entonces ve a acciones, y luego verás aquí una opción para Lottie. Así que da click sobre esto. Y creo que la animación en sí es en realidad un poco de retraso antes de que comience la animación. Así que en realidad puedes desplazarte aquí. A través de toda la animación. Se puede ver a medida que muevo el cursor, si miras el archivo lottie en sí, realidad se está moviendo como yo lo hago Y se puede ver, durante los primeros milisegundos, realidad no está pasando nada Entonces solo empieza a moverlo hasta que empiece a moverse. Entonces pienso por alrededor del frame 3.1 o frame tres, tal vez voy a hacer. Lo que sea. Eso está bien. Eso es por donde empieza. Entonces vamos a establecer eso como el estado inicial, en lugar de tenerlo a cero. Entonces ahora haga clic en el momento para estado inicial, y eso está bien. Y entonces lo que vamos a hacer es hacer clic derecho sobre él, y luego lo vamos a duplicar. Y esta vez, en lugar de ser 3.1, vamos a simplemente arrastrar esto hasta que tengamos la animación completa ordenada. Si sigues adelante, eventualmente volverá , lo que en realidad no queremos. Queremos simplemente llegar al punto en que tengamos el tipo de cruz. Entonces A aquí, creo que está bien. Así que alrededor alrededor del marco 35.1. Es muy específico. Bien, está bien. Entonces eso es lo que queremos que haga. Y si hacemos clic en Es cuando hacemos esto también. Si pulsas play ahora, vas a C, cambia, y se detiene en este momento, lo cual es genial. Bien, entonces esa es la primera parte hecha. Ahí es cuando abre el Navbar. Entonces, si guardamos esto, está todo bien, ahora necesitamos agregarlo cuando se cierre. Entonces, si inicias una animación, lo que podemos hacer una vez más es duplicar el menú móvil abierto. Entonces vamos a hacer eso. Y luego simplemente cambiaremos el nombre este menú de Mobile close. Así que solo deshazte de eso. Bien, eso está bien. Asegúrate de que también esté seleccionado, y luego podremos comenzar a configurarlo. Todo lo que tenemos que hacer es deshacernos de esta inicial de aquí. Desmarque el estado inicial para esta opción, pero esencialmente puede mantenerla prácticamente donde está Así que todo está bien. Eso es más o menos. Así que tal vez podamos poner la flexibilización también. Entonces, si jugamos eso, en realidad no vamos a jugar. Entonces eso debería estar todo bien ahora. Entonces ahora, creo que eso es todo lo que realmente necesitamos hacer. Así que vamos a previsualizar esto. Entonces, si hacemos clic en él, deberíamos obtener la animación, y cuando volvamos a hacer clic en ella, debería desaparecer. Y ahí estamos. Ahora tenemos un icono de hamburguesa de animación de lottie, que es mucho más interesante que el nav estándar Bien, entonces ojalá, eso tiene sentido. Voy a apretarme un poco esto. Obviamente esto es una especie de gris no se ve bien. Y lo que creo que también voy a hacer es si conseguimos que el menú abra un momento, botón de menú, menú abierto. Y necesitamos conseguir esto en lugar de ser grises. Lo queremos blanco, así que todo coincide. Entonces hagámoslo. El menú de navegación puede ser blanco y el fondo del botón de menú también debe ser blanco o transparente. De hecho, era gris, ¿no? Me acabo de dar cuenta. Te digo, vamos a hacerlo blanco. También haré que el menú de navegación móvil sea blanco a solo para como. Eso está bien. Cierra el momento del menú y haré que todo el menú de navegación sea blanco. De nuevo, esto realmente no importa. Solo estoy haciendo esto para mostrarte cómo se vería Pero ahí vamos. Tenemos una animación en el menú móvil. Ahora bien, ¿qué tiene de bueno hacerlo de esta manera? Si hago click off, sigue volviendo a la normalidad. A veces, dependiendo de cómo quieras obtener estas animaciones, no siempre va a hacer eso. Por lo que es muy importante tener esta animación establecida el propio menú de navegación de Navbar Y en realidad solo puedes hacer esto con el menú NAV predeterminado dentro de Webflow Si haces el tuyo, no tienes esta opción, así que tienes que usar ese menú de navegación predeterminado para hacerlo. Bien, entonces ojalá, todo eso tiene sentido. Vamos a entrar en más detalles sobre las animaciones de lottie un poco más adelante Y los vamos a usar más de varias maneras diferentes. Pero por ahora, ese es nuestro menú de navegación móvil con mucha animación para el ícono de la hamburguesa 10. SECCIONES de HERO: Así que vamos a crear varios tipos diferentes de sección de héroes. Así que hicimos esto muy brevemente en mi primer curso para principiantes de flujo web, pero vamos a profundizar un poco más en esto, y vamos a hacer uso de algunas de las técnicas que no cubrimos en ese primer curso. Entonces en ese primer curso, no cubrimos videos de fondo, y no miramos deslizadores Entonces vamos a usar al menos dos de esos tipos diferentes dentro nuestra sección de héroes para este curso. También te voy a mostrar cómo posicionar varios bloques y secciones de inmersión diferentes usando el posicionamiento relativo y absoluto para que las cosas se adhieran a ciertas áreas de la pantalla. Bien, así que comencemos con nuestra primera sección de héroes. 11. SECTION: Hos: CENTRO: Bien, entonces, antes que nada, vamos a crear una sección de héroes que esté prácticamente centrada en todo. Entonces la imagen inicial que vamos a usar va a estar centrada, y por lo tanto, vamos a hacer coincidir eso con nuestro título y especie de párrafo y botones también. Bien, así que comencemos. Entonces ya he precargado algunas de estas imágenes solo para ahorrar tiempo Entonces, lo que haremos inicialmente es lanzar una sección, y simplemente llamaremos a esta sección de héroes. Bien. Y también queremos que esto tenga una altura mínima de 100 VH. De esta manera, ocupa toda la altura de la ventana gráfica. Y entonces lo que haremos es hacer pop en nuestra imagen de fondo. Así que baja a tu sección de antecedentes. Busca el símbolo más y luego ve y elige imagen, y en este caso, vamos a elegir este primero aquí. Bien. Y también, lo vamos a tener centrado, creo. No queremos que se teja y queremos que cubra. Bien, entonces aquí vamos. Entonces tenemos los makings de nuestra sección de héroes, que ya va a estar centrada Entonces nuestro texto va a dar vueltas por aquí. Obviamente, podrías hacerlo de cualquier lado. Esto en realidad le convendría tampoco. Pero como el foco principal de esta imagen está todo centrado, vamos a tener el texto también en el centro. Bien, entonces, ¿cómo hacemos esto? Hay algunas formas diferentes en las que podrías hacer esto. Podrías empezar a lanzar texto a la sección de héroes si quisieras. Y lo que creo que vamos a hacer es colocar todo nuestro tipo de títulos y textos y botones dentro de su propio contenedor div. Y la razón de eso es que vamos a usar potencialmente flex. Te voy a mostrar una de las formas en las que podrías usar flex para esto y otra manera simplemente centrarlo y luego simplemente acolchado para adaptarse. Realmente no importa de qué manera lo hagas. Así que vamos a probar ambos de todos modos. Bien, entonces primero arriba, entonces, lo que vamos a hacer es simplemente lanzar un bloque div. Y vamos a darle a esto un ancho máximo de algo así como 800 pixeles. Y vamos a centrarlo también. Ahora bien, esta primera forma va a ser básicamente al igual que usando el relleno, que está completamente bien. También podríamos usar flex, claro, lo que vamos a hacer en un momento. ¿Y sabes qué? De hecho, justo antes de hacer esto, en realidad, vamos a deshacernos de eso, y solo limpiaremos eso y nos desharemos de él. En realidad vamos a lanzar primero nuestra navegación. Y lo vamos a poner dentro de esta sección de héroes. Entonces solo te voy a enseñar cómo hacer eso porque no creo que hayamos hecho esto antes. Así que baja a tu sección de navegación y luego haz clic en Navbar. Y ahora esta barra de navegación está realmente sentada dentro de la sección de héroes Entonces, en lugar de estar por encima él, en realidad está sentado dentro de él. Entonces, si vas a la sección de héroes. Se puede ver que la barra de navbar está sentada dentro. Ahora, anteriormente, lo que hemos hecho es hemos tenido como que no forma parte de él, y ha estado algo así como, ya sabes, por encima de él, pero en realidad también puedes hacer estallar barras de navegación dentro de las secciones de héroes. Y esto es útil, si por ejemplo, quieres tener un nav transparente, que es lo que en realidad vamos a hacer para este. Entonces, antes que nada, pondremos un logo temporal, o simplemente crearemos algo muy rápido. Así que simplemente vamos a aparecer en un bloque de texto, y simplemente llamaremos creativamente a este logotipo Y luego vamos a darle estilo a esto un poco. Entonces lo tendremos como digamos 25. Eso está bien. Y lo tendremos un poco más audaz que eso. De hecho, usaremos la fuente que vamos a usar. Entonces vamos a usar esta. Y bien, así que eso está bastante bien. En realidad vamos a tener esto como transparente. Entonces, en lugar de tenerlo todo oscuro, vamos a tenerlo blanco. Entonces hagámoslo. Entonces, en lugar de esencialmente negro, lo tendremos como blanco. Simplemente crea una muestra para el infierno de ello. Bien. Y obviamente, este trasfondo va a tener que ir también. Entonces, qué vamos a hacer. Justo antes de hacer eso es que solo obtendremos el Vamos a conseguir la marca, así que es centro un poco mejor. Entonces vamos a simplemente poner espaciado arriba y abajo. Y algo así como 20 píxeles deberían coincidir con lo que tenemos aquí. Entonces tienen 20 pixeles aquí. De hecho, solo para que podamos estilizarlos mejor también. Vamos a deshacernos de dos de ellos como los tenemos antes. Vamos a crear una clase de Nav Link, y vamos a hacer estos blancos. Bien. Y luego solo copiaremos y pegaremos esto unas cuantas veces y reventaremos lo que eran antes, que se trataba y luego contactaremos también. Y luego en la propia barra de navegación, actualmente tiene un color, que es un color ligeramente blanquecino. Da click en esto y luego simplemente básicamente deshazte de la opacidad, así es completamente transparente Y ahora tienes una navegación clara, que básicamente está tomando hasta el gbfusly ningún color ahí, y es solo que puedes ver cuál realmente la imagen de fondo es realmente la imagen de fondo a través de la propia Navbar Todavía podemos hacer esto un poco más grande así que es el espaciado un poco mejor. Así que lo vamos a dar bien para darle a la Navbar un poco de relleno también. Así que vamos a hacer eso. Y vamos a hacer 20 por eso también. Bien, así que eso es bastante bueno. Bien, ahora podemos hacer estallar en un bloque div, y este será nuestro contenedor de texto héroe, y este tendrá un ancho máximo de 800 píxeles. Podrías hacerlo más pequeño, pero eso servirá por ahora. Y luego lo centraremos haciendo clic en este botón aquí y lo haré estallar en el centro. Bien, y luego nos pondremos en una partida y ¿cómo llamaremos a esto? ¿Cómo se ve el prestigio? Eso va a hacer. Bien. Voy a comprobar que voy a detectar eso bien. Creo que lo derrama bien. Bien, así también, vamos a elegir nuestra fuente por aquí, así que todo coincide, y esto va a ser blanco. Y en realidad cambiaremos el nombre de la clase para esto. Entonces, en lugar de simplemente encabezarlo, lo cambiaremos como encabezado uno, para que podamos identificarlo, y tendremos esto centrado. Bien. Entonces el bloque div que se encuentra dentro realmente lo hará, así que esto está centrado en. Entonces esto significa lo que sea que pongamos en el dvlock ahora, heredará automáticamente el estilo centrado Entonces solo para probar eso, si nos aseguramos de que el dv lo siento, si, se selecciona el contenedor de texto hero, luego agregaremos un párrafo en, y podrás ver automáticamente, ya lo está centrado porque el div en el que se sienta está preestablecido para estar centrado, si eso tiene sentido. Bien, y vamos a hacer esto blanco también. Ahí estamos. Y también pondremos un botón en dos. Bien. Y eso está todo bien. Entonces todo se centró. Bueno, tal vez solo el espaciado en esto un poco. Así que voy a poner un poco de margen para aquí. 20 parece bueno. Y ese texto es un poco más pequeño, en realidad. Entonces digamos 50. Y creo que también. ¿Qué haremos? Deja que el espaciado, y vamos a tener unos pixeles que valgan la pena por eso. Y si, estoy muy feliz con eso. Obviamente, este botón se ve mal siendo azul, así que cambiemos eso a amarillo. Consigue una especie de globo ocular en esto, de verdad. Entonces eso parece algo cercano. Eso es lo suficientemente bueno para mí. Y también tendremos el texto del botón en lugar de blancos, también lo tendremos tan oscuro. Bien, entonces ahí estamos. Entonces eso es realmente sencillo. Esta es probablemente la forma más sencilla de hacerlo. Podríamos haber usado flex, pero eso no lo hace realmente si no necesitas usar flex, no tiene sentido hacerlo. Si puedes hacerlo literalmente usando bloques dip y luego alterando el relleno donde sea necesario, entonces también puedes hacerlo de esa manera. Quiero decir, obviamente, el flex es una forma de centrar las cosas. Pero si no necesitas usarlo, entonces no sientes que no deberías sentir tener que usarlo. Entonces todo lo que haría por esto. Esto es más o menos perfecto es tal vez ajustar el acolchado ligeramente para esto un poco más abajo, y eso se ve bastante bien. Bien, así que también te mostremos cómo hacer que esto sea receptivo para tablet y móvil también. Entonces, tal como está, no tenemos ningún relleno ni en la sección ni en el contenedor que contiene el texto. Así que tendríamos que hacer eso. Entonces, si solo muestro cómo se ve por el momento, también se puede ver que nos estamos quitando bastante la imagen, también. En este punto, puede valer la pena intentar alterar ligeramente cómo se ve esto en el móvil. Y también, como también puedes ver, cuando llegas a este tipo de escenario aquí, cuando llegamos a una especie de 800 píxeles, va directo al borde. Entonces, lo que realmente vamos a hacer es que en realidad vamos a aplicar un poco de relleno a la sección. Ahora bien, en el curso anterior, creo que lo apliqué a los contenedores, pero en realidad no importa cuál hagas siempre y cuando seas consistente con qué versión haces. Para mayor facilidad, lo que voy a hacer solo para mostrarte puedes hacerlo de ambas maneras. Voy a aplicar un poco de relleno a la sección misma. Entonces probemos eso. Entonces lo que hice antes fue algo así como 3%. Entonces hagámoslo y nos aseguraremos de que sea lo mismo a cada lado. Y para hacer eso, solo tienes que mantener presionado cualquiera de los comandos o lt si estás en una PC, y luego solo arrastrarlo, así que y luego solo arrastrarlo, así que es el 3% a cada lado, que significa que ahora cuando vamos a la vista de tableta, puedes ver que ahora hay algo de espaciado en el borde, lo que significa que el texto no va a ir por la pantalla. Y será tentador también potencialmente en la vista de tableta para tal vez hacerlo así que no va a través de toda la pantalla, pero en realidad tal vez eso está bien por ahora Entonces hagámoslo parte por parte. Entonces, para la vista de tableta, esto en realidad está bien. La imagen en sí, vamos a cortar parte de ella de lo que sea que hagamos. Pero vamos a ver si hay algo que podamos hacer para intentar hacer esto y así poder ver más de ello. Si volvemos a nuestra sección de imagen aquí, puedes especie de ver tener esta opción de contener. Ahora bien, esto no va a funcionar. Obviamente, solo significa que lo va a contener y no lo extenderá por todo el asunto. Entonces eso no va a funcionar. Entonces, hasta cierto punto, en realidad tenemos que tenerlo. Por lo que cubre toda la sección. Entonces, de veras, no hay tanto que podamos hacer para resolver esto de alguna manera. En serio, va a estar cortando parte del auto. Lo que podrías hacer es tal vez simplemente tenerlo así. Entonces para mí, esto es lo que tal vez haría por la sección móvil. Entonces esto se ve un poco extraño. Al tener una especie de medio auto, realidad no estás viendo ninguno de los dos extremos. Quiero decir, también tenerlo hasta el final. Eso también se ve bien. Entonces eso es lo que haría en este tipo de situaciones. Ahora, obviamente, esto le corresponderá al individuo si fueras diseñador, tendrías que decidir qué preferirías ver. Creo que en este caso, para mí, probablemente elegiría tener la parte delantera del auto. Hagámoslo. Y obviamente, cada vez que hacemos esto, porque lo hemos hecho en la vista de tablet, a medida que bajes, habrá hecho lo mismo para el móvil también. Ahora, podríamos, de nuevo, optar por alterar esto ligeramente si quisiéramos. En realidad puedes escribir los porcentajes que quieras. Entonces, en lugar de solo confiar en estos marcadores de posición, en realidad podrías alterar esto un poco. Entonces tal como está, lo tenemos algo así como, de nuevo, bastante centrado, pero es 0% de la izquierda aquí. Entonces, si solo intentamos hacer ese 10%, lo va a sacar adelante un poco. Y en realidad, creo que eso se ve un poco mejor. Entonces, si hacemos el mismo tipo de cosas en el móvil dos, sí, en este punto, de nuevo, no estás viendo cuál de los autos porque al final del día la pantalla es pequeña. Pero a lo mejor tal vez lo guardarías así, creo, en realidad. Entonces creo que eso está bien. Creo que es lo mejor que vamos a sacar de esta imagen. Entonces puedes ver que tienes que pensar en esto creativamente cómo resolverías estos problemas porque hasta cierto punto, a medida tamaño de tu pantalla se reduce, vas a tener que cambiar el diseño ligeramente en pantallas más pequeñas Pero creo que ese es un compromiso bastante bueno. Bien, así que eso prácticamente lo envuelve para este. El siguiente que vamos a hacer es un tipo de cosas similares donde todo va a permanecer más o menos centrado. Pero a veces cuando tienes una imagen, no siempre será perfecta así donde tienes una especie de parte ligera donde no hay texto sobre ella y una parte oscura para texto. A veces, toda la imagen va a ser bastante brillante. Entonces en la siguiente, te voy a mostrar cómo mantenerlo centrado, pero voy a usar un gradiente lineal para oscurecer parte de la pantalla 12. SECTION: Hos: GRADIENT: Bien, entonces, primero voy a cambiar la imagen de fondo para esto. Entonces, en lugar de lo que tenemos aquí, escojamos una imagen diferente, y voy a elegir esta de aquí. Bien, así como pueden ver, todo es algo así como que se siente bien tener todo esto centrado todavía, pero el gran problema que tenemos es que no se puede leer ninguno de los textos en absoluto. Ahora, obviamente, lo que podrías hacer es simplemente hacer que el texto doc. Eso tendría sentido. Pero aunque hagamos eso, va a ser difícil leer en cierto tamaño de pantalla. Entonces este está un poco bien. Pero se puede ver aquí ese tipo de que es una especie de límite en este punto Y obviamente, lo que podríamos hacer tal vez es simplemente mover el bloque div un poco más alto. Quiero decir, solo intentaremos eso solo para que puedas ver algo así. Entonces en ese punto, ya sabes, te estás acercando mucho más que ahora y eso se verá un poco raro en sí mismo. Ahora bien, lo que en realidad vamos a hacer es decir que en realidad queremos mantener esta imagen, exactamente como es, y no queremos moverla. Quiero decir, en toda la realidad, lo que quizás quieras intentar hacer. Quiero decir, solo para mostrarte que podrías hacer esto para que le baje un toque. Pero incluso entonces, en algún momento, vas a tener el tema de que esto esté algo en el camino. Entonces lo que vamos a hacer es simplemente mostrarte cómo puedes oscurecer una parte de la pantalla o una parte de la imagen, debería decir, y luego mantener la mayor donde no tiene una superposición completa Porque si tuvieras que poner una superposición completa sobre esto, está arruinando un poco la imagen Entonces solo voy a mostrar lo que quiero decir con esto. Entonces, si volviéramos a hacer un ícono más, y luego hizo clic en Color Overlay, esto automáticamente le dará una superposición completa sobre toda la pantalla Ahora bien, de nuevo, este tipo de cosas está bien, pero arruina un poco la imagen. Entonces, en lugar de hacer eso, vamos a deshacernos de eso. Y vamos a repuntar en un gradiente. Entonces, en lugar de la superposición, tienes gradiente radial, que para este, en realidad no necesitamos. Entonces un gradiente radial básicamente significa que tendrá un color diferente en el centro, y poco a poco se volverá diferente y se convertirá en un color diferente a medida que irradia hacia afuera. Era un gradiente lineal, como sugiere, es una especie de lado a otro. Puede ser la dirección que quieras, puedes alterar la dirección del gradiente solo girar esta rueda. Y en nuestro caso, lo que queremos es tenerlo realmente para que la parte más oscura esté en la parte superior. Así que vamos a llevar esto a uno 80. Bien, entonces no queremos que el degradado en la parte inferior tenga ningún color en absoluto. Entonces, lo que haremos es simplemente hacer clic en eso, y luego simplemente tiraremos de esta barra hasta el final. Entonces esta parte de aquí está completamente bien. Entonces en la parte superior, en realidad queremos un color un poco más oscuro. Entonces no lo queremos tan oscuro como eso. Entonces, cuando solo lo hagan un poco más claro, y esto nos permitirá retener nuestro texto en blanco o volveremos a cambiarlo en un momento. Así que solo asegúrate de que esté seleccionado, ve al negro de aquí. Y luego cuando solo retroceden un poco esto. Y eso probablemente va a estar bien, en realidad. Así que ahora volvamos a poner nuestro color de texto en blanco como lo era antes, y solo veremos cómo se ve esto. Así que volvamos al blanco. Lo mismo con eso. Y ahí vamos. Y eso se ve bastante bien, en realidad. Entonces eso probablemente no necesitaría mucha más alteración. Se puede ver que hemos logrado retener la mayor parte de la imagen siendo bastante brillante, en lugar de tener que poner una superposición a todo color sobre todo. Ahora, obviamente, depende completamente de ti qué versión te gustaría probar. Pero para mí, algo así, ya sabes, tiene sentido hacerlo de esta manera, solo porque no quieres arruinar lo que es esencialmente una imagen bonita. De hecho, también puedes mover el degradado ligeramente alrededor, solo para mostrarte cómo harías eso. Vuelve aquí. Ahora, por el momento, ambos marcadores están hacia el final. Pero si arrastras esto, en realidad puedes moverlo más hacia abajo si quisieras. Ahora, obviamente, en este caso, eso probablemente no es lo que queremos. Bueno, digamos que querías oscurecer algo en cierto momento También podrías hacer eso. De hecho , puedes crear uno extra por aquí. Puedes ver cuando volví a hacer clic en él, en realidad se creó otro punto para ese color degradado Entonces para éste, por ejemplo, al final, podríamos tener eso esencialmente completamente claro. Obviamente, en este punto, puedes empezar a verlo un poco, así que tendrías que retroceder un poco. Pero llegas al grano. Básicamente, puedes controlar el gradiente de muchas maneras diferentes. Pero creo que para mí, lo que en realidad haríamos es tenerlo como estaba antes. Lo tenemos, así que aquí solo hay dos diferentes, y nos aseguraremos de que eso sea hacia la cima. Y eso prácticamente lo resuelve para eso, creo. Bien, así que de nuevo, ese es un pequeño truco rápido bastante agradable solo que pensé en mostrarte. Y en el siguiente que vamos a hacer, lo vamos a tener donde vamos a usar no vamos a usar flex todavía, pero vamos a tener todo nuestro texto al lado izquierdo. Entonces eso está en el siguiente video que viene ahora. 13. SECCIón de HERO: C. Entonces, a continuación, vamos a volver a tener nuestro texto al lado izquierdo como lo hemos hecho anteriormente Entonces lo que haremos inicialmente es de nuevo, cambiar la imagen de fondo. Así que vamos a deshacernos de todo esto y empezar de nuevo. Entonces vamos a agregar nuestra imagen, y va a ser esta de aquí. Entonces vamos a tenerlo centrado por ahora. No queremos que se teja y lo tendremos para cubrir. Y solo por el momento, en realidad vamos a deshacernos de todo esto. Así que vamos a seleccionar que vamos a seleccionar el contenedor de texto héroe, y sólo vamos a eliminar eso. Y solo para que no haya conflictos, solo entraremos en nuestro administrador de estilo y haremos clic en limpiar y eliminaremos cualquier cosa que no queramos Bien, entonces esta vez, obviamente, tenemos un fondo blanco o en gran parte, es bastante ligero. Y por lo tanto, obviamente, este no es el mejor para tener, así que vamos a cambiarle todo esto, así que es oscuro, en lugar de ser blanco, lo tendremos como justo negro suficiente. Y crearemos una muestra para eso también. Y también haremos todos los enlaces de navegación, también estarán oscuros. Entonces probemos eso. Bien, genial. Entonces eso es mucho mejor. Entonces te habrás dado cuenta de que la última vez, no habíamos creado nuestro propio contenedor la manera estándar que lo haríamos. Así que anteriormente en el curso anterior, cuando usamos contenedores, lo teníamos, así que era una especie de ancho máximo que coincidía igual que el contenedor dentro de la barra de navegación Ahora bien, porque estaba centrado, no necesariamente necesitábamos hacer eso porque obviamente estar centrados, realmente no importa porque no estaba justo al borde en ningún momento. Siempre estuvo en el medio. Ahora vamos a tener nuestro texto a la izquierda. Tenemos que ir y volver a ese estilo otra vez. Lo que también vamos a hacer, nuevo, solo por el carajo de ello, vamos a hacer esto un poco más grande solo para que se vea un poco más agradable Entonces, en lugar de ser 940 píxeles, que es el tamaño predeterminado del contenedor dentro de Webflow, vamos a hacer de este un contenedor Nav. Dale una clase a eso. Y vamos a darle a esto un ancho máximo de 13 50. Y eso está todo bien, y el relleno aún queda en la sección de héroes. Bien, así que eso está todo bien. Y entonces ahora lo que vamos a hacer es tirar sobre un contenedor para que contenga todo nuestro texto a otra vez, un ancho máximo del mismo. Entonces en la sección héroe, vamos a simplemente agregar un bloque div, y vamos a tener esto como lo vamos a llamar contenedor 13 50, solo para que sepas lo que es. Y también nos aseguraremos de que esté centrado, y tendremos un ancho máximo de 13 50. Bien, para que puedas ver automáticamente ahora está todo completamente alineado con el propio nav , que es lo que queríamos. Bien. Entonces en este caso, también, vamos a realmente, no, no necesitamos hacer nada en términos de flex para éste, en realidad. Entonces, lo que haremos ahora es, de nuevo, siempre es mejor contener los elementos de texto de tu grupo con su propio bloque div. Quiero decir, podríamos empezar a tirar artículos directamente al contenedor. Pero es sólo una buena práctica tener todo contenido. Solo significa que puedes mover las cosas más fácilmente. Entonces hagámoslo a continuación. Entonces lo que haremos ahora es lanzar otro bloque div, y este será nuestro contenedor de texto héroe. Y comencemos a tirar en una partida. También queremos tener un párrafo, y vamos a tener bien, tengo dos botones en este caso. Bien. Entonces, como pueden ver, va a cruzar la pantalla otra vez, lo que en realidad no queremos. Entonces podrías hacer esto de algunas maneras diferentes. Vamos a restringir el látigo. Así que al igual que antes, podríamos hacer un ancho máximo de algo así como 800 píxeles, y eso se ve bien. Mi tal vez 700 este. Bien. Entonces volvamos a hacer el mismo tipo de cosas. Entonces tendremos el prestigio de Sam Harrison deletreado correctamente. Autos. Bien, bien. Y volveremos a tener la misma fuente. Entonces, si quieres cargar la misma fuente, solo entra en Google Fonts y busca cómo has pronunciado este Bebas lo que sea Bien. Y entonces tendremos eso como inter también. Y lo tendremos un poco más atrevido. Y porque eso me duele, voy a hacer que esto vaya a por aquí. Bien, eso está bien. Y una vez más, vamos a hacer. Claro. Eso parece correcto. Y es mucho más grande también, así que creo que fueron unos 50 la última vez. Sí. Eso se ve bien. Bien. Entonces aquí estamos. Entonces ahora todo nuestro texto contiene la izquierda. Sin embargo, todavía no se ve del todo bien. Entonces para mí, esto es un poco demasiado alto. Entonces creo que necesitamos alterar esta imagen un poco más. Entonces está un poco más abajo. Entonces veamos si podemos hacer eso. Así que baja a tu sección de imagen y degradado aquí. Y se puede ver actualmente que está centrada. Pero lo que quiero hacer es intentar conseguir esto lo más abajo posible. Entonces, lo que puedes hacer, obviamente, incluso antes de cargar esta imagen en lo que podrías haber hecho es básicamente recortar esto un poco para ayudarte con esto. Pero lo que vamos a hacer es simplemente clic en la posición arriba aquí, y se puede ver ahora que se ha creado un poco más de espacio para ello. Entonces eso va a estar bien. Así que eso está todo bien. Y lo que podemos hacer ahora es en nuestro contenedor de texto héroe, ahora podemos simplemente mover esto un poco hacia abajo. Y eso todavía se ve bastante bien. Bien. Así que vamos a un poco de hambre a estos botones también, solo para que puedas hacer que se vea un poco más agradable Lo que creo que haremos es más que tenerlos con un color relleno. Vamos a tener esta. Este tendrá un color relleno, y lo tendremos con el texto oscuro. Entonces dice que está oscuro, pero solo hay que volver a hacerlo. Y luego éste, vamos a tenerlo ligeramente diferente. Entonces este será el botón normal. Este no tiene clase en realidad. Entonces esto puede ser botón transparente. Bien. Y luego en lugar de ser azules, lo tendremos transparente. Pero vamos a tener un borde para ello, y también vamos a querer tener el color del texto tan oscuro también. Entonces hagámoslo. Y luego en la sección fronteriza aquí, solo puedes tener eso, así que es para todos ellos. Y pienso, si eso se ve bastante bien. Y debido a que esta es una clase diferente a esta, realidad podemos afectar el margen en esta, así que lo separa un poco. Bien, vamos a tener eso por ahí Vamos a tratar 25. Y sin embargo, eso se ve bien. Bien, entonces para nuestras rodillas, eso nos va a quedar perfectamente bien. Y ahí estamos. Entonces eso se ve bastante bien. Ahora bien, esto es bastante sencillo, y esto fue bastante fácil de hacer. Ahora, a veces, aunque, en una sección de héroes, no solo tienes literalmente texto y luego algunos botones. A veces tienes otras cosas dentro de la sección de héroes. Para ello, lo que vamos a hacer es que vamos a hacer uso de la posición absoluta. Entonces vamos a tener una barra en la parte inferior, que te llevaría a varias partes diferentes del sitio web. Ahora, de nuevo, hay todo tipo de cosas que esto podría ser, pero solo por el proceso de esto, básicamente voy a crear otro bloque div, que se pega al fondo de esta sección. Y la forma en que vamos a hacer eso es usando la posición absoluta. Bien, así que solo asegúrate de que la sección de héroes esté seleccionada. Lo que vamos a hacer es tirar un dibloque. Y vamos a tener esto, y vamos a llamarlo el banner inferior. Entonces esto esencialmente va a ser como una navegación secundaria, que te llevará a través de diferentes partes del sitio web, y lo vamos a colocar en la parte inferior de la pantalla. Y la mejor manera de hacerlo es asegurarnos de que aquí usemos posición absoluta para este contenedor. Entonces para hacer eso, a lo que vamos a hacer antes que nada, justo antes de empezar a hacer eso en realidad, vamos a darle algo de color. Entonces en esto, lo vamos a tener como lo vamos a tener como blanco. Y también le daremos algo de altura solo para que podamos ver lo que estamos haciendo. Entonces le vamos a dar una altura de 70 pixeles. Y eso es sobre bien. Y luego en la sección de héroes, tenemos que asegurarnos de que en realidad es un pariente. Entonces, por defecto, viene como una estática. Así que solo asegúrate de que sea relativo. Y luego cuando hacemos clic en nuestro banner inferior de héroe, ahora hacemos que esta posición sea absoluta, y trae aquí esta sección. Todo lo que tenemos que hacer para que esto se pegue al fondo de esta sección es simplemente dar clic aquí, y eso lo llevará al fondo. Y ahí tienes. Así que ahora hemos creado un banner para la parte inferior de la pantalla donde podemos poner varias cosas diferentes en. Entonces lo que creo que voy a hacer, voy a una especie de olla, diferentes opciones para diferentes autos. Digamos solo. Entonces digamos que uno de ellos va a ser autos nuevos, autos usados, intercambio de piezas, y luego contacto. Entonces otra vez, esto podría ser cualquier cosa. Sólo estoy haciendo esto como ejemplo. Y lo que también vamos a hacer es tirar otro contenedor dentro de este banner inferior, solo para que se alinee correctamente con esto Y lo que en realidad podríamos hacer es simplemente usar nuestro contenedor 13 50. Entonces lo que haremos es lanzarlo en un div y le daremos la misma clase que nuestro contenedor normal. Así contenedor 13 50. Como puedes ver, no hay nada en él por el momento, pero puedes ver que está alineado con nuestro contenedor, así que todo se alineará correctamente. Entonces comencemos ahora a tirar algunas cosas. Entonces lo que vamos a hacer es que vamos a usar en lugar de bloques div, vamos a usar bloques de enlace. Así que en el contenedor, Simplemente haga clic y agregue un bloque de enlace. Y vamos a obviamente, lo que harías desde aquí es vincular esto a una página diferente, pero no vamos a hacer eso todavía, así que lo dejaremos como está. Pero dentro de este bloque de enlaces, vamos a agregar vamos usar un bloque de texto para esto, en realidad. Y lo que vamos a hacer es. Bien, reiniciaremos esto en un momento. De hecho, te lo voy a mostrar ahora. Entonces, por defecto, cada vez que uses un bloque de enlaces, vas a obtener este tipo de azul oscuro realmente feo con un subrayado, que por supuesto no quieres Si no quieres eso, si intentas hacerlo en el cuadro de texto en sí, realidad no se deshará de él. Entonces, si no estás al tanto de este problema, volverás a estar, es una de estas peculiares del flujo web mientras que si no lo sabes, te estarías arrancando el pelo tratando de averiguar por qué esto no funcionará Entonces si solo voy a mostrar si intento deshacerme de este color y este subrayado, si hago clic en la x, realidad no se ha deshecho de ella Entonces, lo que realmente tienes que hacer es en el bloque de enlaces en sí es deshacerte de eso. Y ahora se puede ver que en realidad se ha ido. Y lo que también haremos mientras estemos aquí es a pesar de que dice que está oscuro, obviamente, no lo es. Así que solo hazlo otra vez, y ahora verás que realmente ha cambiado. Entonces eso es algo importante para recordar. De lo contrario, estarás ahí para siempre. Bien, así que hagámoslo otra vez. Entonces, en lugar de dejar esto como está, vamos a darle una clase a este bloque de enlaces. Entonces le está dando automáticamente una clase de bloque de enlace, que, ¿ sabes qué? Lo dejaremos por ahora. Eso está bien. Bien, así que comencemos a poner estas diferentes opciones. Entonces el primero, hagamos autos nuevos. Y luego vamos a copiar y pegar este bloque de enlaces a lo largo de algunas veces. Entonces hagámoslo. Hagámoslo al menos cuatro veces. Los espaciaremos en un momento. Así que autos nuevos. Y luego para éste, vamos a tener autos usados. Eso está bien. Y luego vamos a aparecer tal vez en una opción de intercambio parcial. Y entonces tal vez solo tal vez conseguir una valoración. Hagámoslo. Bien, entonces todos estos son de la misma clase. Así que por ahora solo se les llama caja de texto dos , lo cual no es muy importante. Entonces normalmente obviamente darías a estos una clase adecuada, pero solo por velocidad, no voy a hacer eso. Lo que haremos es simplemente hacerlos más grandes, así que nos aseguraremos de que sean, nuevo, el mismo tipo de fuente también. Hagamos 25 pixeles y los haremos todos esta fuente también. Bien, entonces lo que también podríamos hacer es este contenedor, vamos a darle una clase especial porque lo que vamos a querer hacer es convertirlo en una caja flexible para que podamos distribuirlas de manera uniforme. Entonces en un navegador, en el contenedor 13 50, vamos a darle un calificador de flex Y ahora lo que podemos hacer es convertirlo en una caja flexible. Entonces, si hacemos eso, está bien. Y la opción que vamos a elegir es espaciar establecer espacio entre y distribuir uniformemente de principio a fin. Entonces si hacemos eso, ahora puedes ver que todos estos están espaciados a lo largo de esta barra de pancarta. Bien, así que eso está bien. Y como hemos creado un nuevo calificador para nuestro contenedor, también podemos alterar un poco el relleno Entonces hagámoslo. Vamos a darle un poco de relleno. Entonces hagamos algo como 25. Y ya, eso se ve bastante bien. Bien. Entonces, como pueden ver, mientras vuelo el cursor sobre, ahora tenemos la opción de hacer clic realmente a través de algo Obviamente, por el momento, en realidad no están vinculados a nada, pero esa sería una opción ahí si quisieras. Entonces, de nuevo, esto es, de nuevo, bastante sencillo. Solo quería mostrarte una especie de otra sección de héroes con algo más interesante en ella. Esto es, de nuevo, solo otro ejemplo de cómo se puede usar la posición absoluta. Posición absoluta es muy, muy útil para pegar cosas a ciertas secciones. Entonces significaría ahora, hagamos lo que hagamos, siempre estaría ahí. Ahora bien, el tema que tenemos, obviamente, está en el móvil, tendría que cambiar esto ligeramente. Pero lo que creo que en realidad vamos a hacer es que vamos a ocultar esto en el panorama móvil y la versión móvil. Solo porque no hay una manera realmente agradable de hacer que esto se vea genial. Entonces, lo que creo que haremos cuando lleguemos a esta parte de aquí, ya que se va a hacer más pequeña , se va a acercar demasiado. Entonces lo que creo que vamos a hacer es que vamos a sólo en el banner inferior del héroe, vamos a subir a mostrar non, y eso va a deshacerse de él. Y eso es algo bastante común hacer en la vista móvil de todos modos, así que eso no es algo inusual que hacer. Entonces, lo que también haremos, sin embargo, es simplemente cambiar la forma en que se ve la imagen de fondo a medida que la pantalla se hace más pequeña. Ahora bien, en este punto, está un poco bien. Se puede casi leer el texto, pero no es lo ideal. Entonces, lo que podrías hacer, por supuesto, es simplemente mover esto un poco más allá, lo cual podríamos intentar eso. Y eso estaría bien. Alternativamente, lo que también podríamos hacer es simplemente jugar con la imagen de fondo. Porque ahora estamos en la vista de tablet. No necesariamente tenemos que tener esta imagen cubriendo y bajamos a la costumbre. Entonces, si vas a la imagen en sí en lugar de cubrir, haz clic en personalizado y ahora eso te permitirá jugar con hay un poco más. Y como sucede, en realidad probablemente podríamos haber guardado esto en el mismo lugar en el que estaba antes, y se vería bien. Entonces eso es algo así como algo así como 60 píxeles. Y en realidad no necesitamos alterarlo mucho en absoluto. Eso me parece bastante bien. Aún se puede ver el auto. Todavía se puede ver el fondo. Eso es bastante bueno. Y a medida que bajemos, vamos a hacer lo mismo con esto. De hecho he jugado alrededor de esto fuera de pantalla, razón por la cual no se copia la misma versión. Entonces, hagamos lo mismo con esto. Haremos clic en. Ya está en Custom, pero quizá lo tengamos, así que es algo así. Ahí vamos. Entonces se ha ido al centro puesto hacia arriba, y eso solo nos permitirá ver un poco mejor, y tal vez solo movamos a subir este un toque. Creo que como 20. Y luego para el móvil, lo mismo otra vez, vamos a jugar ligeramente alrededor de la imagen. Entonces, en lugar de tapar, vamos a tener costumbre, y lo pondremos. Sí, similar a cómo tratamos para el paisaje móvil, lo tendremos hacia la cima, y tal vez incluso Mmm A lo mejor intentaremos moverlo un poco más para que podamos ver un poquito más del auto. Vamos a ver cómo se ve eso. Entonces, en lugar del 50%, intentemos 40. Todo empieza. Esa es la manera equivocada en realidad. Bien, entonces 60%, creo que eso es bastante bueno. Y también nos aseguraremos de nuevo, todo esto está oculto en esta versión. A medida que pasamos por todas las diferentes versiones ahora, eso debería quedar bastante bien. Bien. Y en realidad, este texto es demasiado pequeño. Hagámoslo más grande. Vamos a probar 70. Sí. Y eso es mucho mejor. Bien, así que eso prácticamente lo envuelve para esta sección de héroes en particular. Entonces solo quería mostrarte una manera de hacer una sección de héroes donde no tengas que usar flex, particularmente, puedes simplemente tenerla algo alineada a la izquierda y ordenar y jugar un poco con la imagen. Y también tenemos todas estas diferentes opciones aquí para hacer click a través. Esto es bastante común. Esto a veces también podría ser como una sección de logotipo. Entonces es bastante común tener este tipo de barra en la parte inferior, y si quieres hacer eso, y quieres que se pegue al fondo, usarías posición absoluta y te asegurarías la sección de héroe en sí sea relativa para permitirte hacer eso. 14. SECTION: Hose: video de fondo: Bien, entonces a continuación, vamos a hablar de video de fondo. Así que en realidad no hemos cubierto esto en el primer curso ni en este curso hasta el momento. Y en términos de video, hay algunas opciones diferentes que tienes dentro de Webflow, tienes la opción de tirar un video a una sección o a un bloque div También tienes la opción de tener un video de YouTube incrustado. Y también tienes la opción aquí de un video de fondo. Y eso es lo que vamos a estar viendo para este video. Digamos que no queríamos tener este auto como fondo. Podrías simplemente deshacerte de eso. Y entonces lo que vamos a hacer en cambio es lanzar un video de fondo para esta sección. Entonces la forma más fácil de hacer esto, si vamos a nuestro navegador, asegúrese de que en el cuerpo esté seleccionado y luego agregaremos un video de fondo desde la sección de componentes. Y ahí estamos. Para que lo habremos agregado a continuación por ahora. Lo que en realidad vamos a hacer es volver al navegador. En realidad vamos a lanzar la sección de héroes, dentro de nuestro video de fondo. Entonces, lo que haremos es simplemente agarrar la sección de héroes, pasar el cursor sobre ella y luego la verás entrar. Y ahora puedes ver que la sección de héroes está sentada dentro del video de fondo. Ahora bien, el problema que tenemos es que la sección de antecedentes, lo siento, la sección de héroes es de 100 VH. Pero obviamente, tal y como está, la parte o sección del video de fondo no tiene ese calificador Entonces lo que tenemos que hacer es simplemente ir a una altura mínima de 100 VH, y ahí vamos. Eso es más o menos perfecto. Entonces, obviamente, por ahora, cuando presionemos preview, no va a pasar nada porque no tenemos un video. Entonces lo que tenemos que hacer es subir un video a esto. Entonces asegurándose de que se seleccione la parte del video de fondo, vaya a la configuración que todos estamos aquí, y luego continúe subiendo video. Y solo subiremos este. Ahora, en realidad ya he cargado este, así que se ha ido muy, muy rápido a casa. Esto en realidad toma alrededor de tres a 4 minutos para codificar. Pero una vez hecho eso, verás que automáticamente estará en la página. Y luego cuando lo previsualicemos, ya verás que tenemos un video de fondo. Ahora bien, el tema que tenemos, por supuesto, es que si bien esto se ve bastante bien. El texto va a ser muy difícil de ver dependiendo de lo que esté presentando en tu video. Entonces este video en realidad es bastante brillante. Entonces, lo que podríamos necesitar hacer es tener algún tipo de superposición para esto para que podamos leer un poco mejor el texto. Por lo que todos los mismos controles con imágenes de fondo todavía se aplican al video también. Entonces, si vamos a nuestra sección de fondo aquí y vamos a irradiar gradientes de imagen, y lo que haremos es agregar solo una superposición de color, lo que la hará un poco más oscura Sólo lo retrocederemos un poco. Y luego cuando pulsamos vista previa ahora, puedes ver que es mucho más fácil de leer, y todavía tenemos un video de fondo muy bonito. Entonces eso es básicamente realmente para videos de fondo. Quiero decir, todos los ajustes que esperarías ver para las imágenes también están ahí. Entonces no es solo superposición de color, si quisieras tener un degradado radial. También podrías hacerlo. Obviamente, lo que tendrías que hacer en este caso es retroceder un poco la pacidad Entonces solo te voy a mostrar cómo se vería eso. Entonces, para uno de ellos, vamos a tener una especie de color TL, y retrocederemos un poco la opacidad de eso por algo sobre algo alrededor del 70 Y luego para el otro lado, tendremos tal vez no lo sé. Tendremos tal vez azul, y también retrocederemos a alrededor de 70. Y como ves ahora, cuando presionamos preview, todavía tenemos el video, pero ahora tenemos una especie de superposición de color en él también. Ahora bien, esto se ve asqueroso, pero obviamente, solo te estoy mostrando esto para que puedas ver como se vería. Bien, así que eso es más o menos para videos de fondo. Obviamente, no tienes que hacerlo del todo como yo lo hice. También puedes simplemente arrastrar sobre un video de fondo a la sección dos, si quieres hacerlo de esa manera. Entonces, si solo te muestro eso, y solo volveremos por un momento. De hecho, hagamos esto de esta manera. Entonces lo haremos pop, así que esto está fuera de eso. Y entonces también podrías simplemente cambiar el tamaño de este video de fondo Entonces en lugar de 100 VH, podrías tener, no sé, 50 y luego tipo de estilo que se adapte. Pero la forma en que lo hicimos es, ya sabes, una forma mucho más fácil de gestionar, y esa es probablemente la forma en que lo harías general si vas a tener un video de fondo. Bien, entonces eso lo resume bastante por eso. En el siguiente video que vamos a hacer, vamos a estar viendo cómo usar los deslizadores 15. SECTION: Hos: SLIDERS: Entonces, para la siguiente sección de héroes, vamos a estar viendo cómo usar un control deslizante. Entonces, lo que haremos, simplemente dejaremos esto donde está por ahora porque podemos usar algunos de los activos de esto. Lo que haremos es ir a nuestro cuerpo, y luego solo agregaremos un deslizador, que volverás a encontrar en la sección de componentes. Así que haz clic en deslizador y tendremos un deslizador en la parte inferior. Entonces, tal como está, obviamente, no hay nada en esto, y no está ocupando gran parte de la página. Entonces, lo que haremos es en el propio deslizador real. Entonces solo haremos este 100 VH solo para que podamos ver con qué estamos haciendo. Y ahí estamos. Tenemos una altura 100% vertical para el deslizador. Entonces, antes que nada, comencemos a mostrarte cómo agregar imágenes. Entonces, obviamente, esto es generalmente lo que vas a tener con el control deslizante, y entraremos en la configuración en un momento. Entonces en cuanto a la anatomía del deslizador, tenemos el slider, tenemos la máscara, tenemos luego la diapositiva uno, diapositiva dos es predeterminada. Ahora, obviamente, puedes agregar tantas diapositivas diferentes como quieras a esto. No es necesario que solo tengas imágenes. También puedes agregar video, que te mostraré en tan solo un momento también. Bueno, antes que nada, hagamos clic en la diapositiva número uno, y luego pondremos sobre una imagen de fondo. Y usaremos uno de los que ya tenemos cargados. Así que tenga a esa como la nuestra primera. Lo tendremos centrado. No queremos que se teja, y vamos a tener que cubrirlo. Y luego para la diapositiva número dos, podemos hacer el mismo tipo de cosas en una imagen de fondo, y simplemente elegiremos esta . Otra vez el mismo tipo de cosas. Bien, entonces ahora tenemos un control deslizante, que, a medida que haces clic en él, nos deslizamos hacia obviamente, cualquier diapositiva que tengas ahí. Y por lo que yo sé, no hay límite en cuanto a cuántos de estos puedes tener. Probablemente haya algún tipo de límite, pero para la mayoría de los deslizadores, generalmente vas a tener una especie de tres a cuatro como cosa estándar para una sección de héroes Entonces, obviamente, por el momento, solo tenemos imágenes, y aquí no hay ningún tipo de texto. Entonces empezaremos a hacer eso en un momento. Pero antes que nada, solo quiero mostrarte los diferentes tipos de efectos que puedes tener con el slider. Entonces actualmente, solo tenemos una especie de flexibilización normal de un efecto de deslizamiento que va de izquierda a derecha Hay algunas cosas diferentes que puedes hacer para esto. Entonces, si vamos a la pestaña de ajustes aquí, volverás a enfrentarte diferentes configuraciones para cada diapositiva, y también podrás tener diferentes animaciones. Así que vamos a ver esto primero, y vamos a trabajar nuestro camino hacia abajo a través de todos estos diferentes escenarios. Entonces el primero es solo una animación de diapositivas. El siguiente que tenemos es el destino cruzado. Entonces solo te voy a mostrar cómo se ve esto. Eso te lo demostramos. medida que hacemos clic en el siguiente, en lugar de deslizarlo todo por la pantalla, simplemente se desvanece Entonces, de nuevo, eso es bastante sencillo. El siguiente que tenemos es fade out dash in. Así que de nuevo, en lugar de tratar de explicar eso, solo te mostraré cómo es eso. Así que de nuevo, algo similar. Es como que se desvanece y luego entra con el siguiente. El siguiente que tenemos se va a desvanecer. Te voy a mostrar éste también. Nuevamente, este tipo de solo transiciones. De nuevo, te das la idea, solo hay efectos ligeramente diferentes para cada diapositiva. Después deslízate sobre nosotros solo reemplazamos toda la imagen de izquierda a derecha, y solo te voy a mostrar eso. Ahí vas. Bien, entonces son todos los estilos predeterminados para la diapositiva que puedes tener. Y en cuanto a otros efectos que tengas, realidad puedes aplicar diferentes flexiones a este efecto para cada una de estas diferentes animaciones, también. Así que al igual que lidias con el tipo de interacciones, puedes tener facilidad de entrada, facilidad de entrada, facilidad de entrada. Todos los que encontrarías con el panel de interacciones son los mismos cuanto a cómo se moverán las diferentes diapositivas. Entonces, si te muestro éste, por ejemplo, y volveremos a previsualizar, es el mismo tipo de cosas, pero solo actuará de manera ligeramente diferente, así que la forma en que está pasando, es muy sutil y la que acabo de elegir, pero solo tienes que tomar mi palabra para ello. Es ligeramente diferente. Bien, entonces lo volveremos a la normalidad por ahora para ambos. Y nuevamente, puedes tener una duración de diapositiva. Entonces, si quieres que sea un poco más, podemos hacerlo mil y verás que esta vez no va a ser tan rápido si lo vuelvo a hacer. Simplemente toma más tiempo, así que tienes la idea para eso. Y luego lo devolveremos solo por el momento. Bien. Y también, dice aquí, los gestos de deslizamiento deshabilitados. Entonces por el momento, si arrastro y hago clic, también se moverá sobre el deslizador. Ahora bien, puede que no quieras eso por cada proyecto que tengas. Entonces, si quieres desactivar eso puedes hacer, y simplemente, todo lo que tendrías que hacer es simplemente hacer clic en los gestos de deslizamiento deshabilitados. También puedes tener reproducción automática. Esto es bastante autoexplicativo. Esto obviamente solo reproducirá automáticamente las diapositivas en el momento en que se cargue la página. Y también puedes ocultar estas flechas también si quieres. Entonces, si recolectas eso, lo ocultará en cada extremo en lugar de en ambos. De hecho, también puedes esconderlos a ambos si realmente quieres, y el control deslizante seguirá funcionando, pero solo para mostrarte eso. Entonces esta vez, no hay nada aquí. Pero ahí hay uno y esta vez, se esconderá en este extremo más que en ese final. Bien, entonces ojalá eso tenga sentido. Es bastante sencillo. Estoy seguro de que estás bien con esto. Y desmarquemos eso por ahora Entonces también tenemos diferentes tipos de navegación por diapositivas. Entonces, por el momento, tenemos estos dos círculos aquí. Si no querías eso, podrías tener números en su lugar. Así que el mismo tipo de cosas. Si no querías redondear, podrían ir al cuadrado si tú también quisieras eso. Y si, así puedes tener una sombra para ello. Puedes invertir los colores y todas las cosas que esperarías ver con un control deslizante están aquí. El espaciado puede ser alterado a. Entonces, si no querías tres pixeles y llegas a decir algo loco como diez, podrías hacer eso. Así que de nuevo, es bastante maleable, igual que todo lo demás en Webflow, puedes cambiar casi todo lo que quieras Bien. Yo prácticamente lo resume para eso. Entonces esa es una especie de parte de la configuración. Ahora te puedo mostrar cómo poner algo de contenido en la propia diapositiva. Ahora, el elemento slide es ligeramente diferente a un tipo normal de bloque div o sección o contenedor. Entonces puedes ver aquí, tengo la diapositiva seleccionada, y no tengo ninguna opción para las opciones de visualización, así que no puedo convertirla en una caja flexible. No puedo hacer otra cosa que lo que ya es. Entonces, lo que tendrías que hacer si quisieras algún tipo de texto aquí es poner algún tipo de envoltorio sobre él. Así que pondremos un bloque div y llamaremos a este envoltorio de diapositivas. Y esto va a ser de nuevo 100 VH. Y entonces lo que podemos hacer es entonces si quieres cambiar las opciones de visualización, ahora puedes hacerlo dentro de esta diapositiva div rápida que acabamos de crear. Entonces lo que vamos a hacer es poner algo de texto dentro de la diapositiva. Entonces, si ahora agregamos otro bloque div, vamos a alojar nuestro texto en la diapositiva este. Y vamos a hacer eso antes que nada, en realidad. Entonces pondremos un encabezado , pondremos un párrafo y también pondremos un botón. Y a este bloque div, llamaremos a contenido de diapositivas. Y le daremos a eso un ancho máximo de algo así como 900 píxeles, y lo tendremos centrado. Y el propio envoltorio deslizante hará de esto una caja flexible, y luego solo alinearemos y justificaremos todo hasta el medio. Y luego también para el contenido de la diapositiva, lo haremos, así que también está centrado. Bien, entonces, obviamente, no podemos ver esto, así que vamos a cambiar ligeramente esa fuente. Lo haremos blanco. Lo mismo para el párrafo. Bien. Y también en la propia diapositiva. Nuevamente, al igual que las imágenes de fondo normales, también puedes aplicar una superposición. Entonces vamos a hacer eso porque realmente no podemos ver lo que estamos haciendo. Entonces esto está en la diapositiva misma. Obviamente, ahí tenemos la imagen. También añadiríamos un color de superposición, y lo dejaremos así por ahora. Bien, entonces ahí estamos. Así es como le agregarías contenido. Entonces no puedes si quieres tipo de maniobrar diferentes elementos alrededor de la propia diapositiva, querrás usar un envoltorio de alguna naturaleza, que puedas controlarlo con las opciones de visualización a las que estás acostumbrado porque no puedes hacerlo Como estándar en la diapositiva real en sí. Entonces ojalá, eso tiene sentido. Entonces, si ahora queremos mover esto como lo hacemos normalmente con flex, puedes hacerlo como normalmente quisieras. La razón por la que no lo hizo del todo, ya que acabo de hacer clic en él es porque hemos hecho este contenedor centrado, así que esa es la razón por la que no se veía bien Bien, entonces ojalá esa voluntad tenga sentido. Y no estás restringido a solo tener imágenes de fondo. Entonces, si quieres, en realidad puedes tener un video en una de las diapositivas. Entonces voy a hacer eso con la diapositiva número dos. Entonces lo que haremos es ir a nuestra diapositiva dos y deshacernos de esta imagen. Y lo que haremos en cambio es hacer pop nuestro video de fondo que está actualmente aquí, lo haremos pop en este en su lugar. Entonces hagámoslo ahora. Entonces actualmente, creo que tenemos nuestra sección de héroes dentro de este div. Entonces, lo que haremos hará que sea más fácil de seguir. Voy a sacar la sección de héroes del video de fondo. Voy a arrastrar este video de fondo a la diapositiva dos. Entonces se sienta dentro de él. Y ahora, cuando vayamos a esa diapositiva, va a reproducir el video. Entonces, antes que nada, ve a la diapositiva uno. Vamos a previsualizar esto. Ahora como vamos a la siguiente diapositiva, el video debería comenzar a reproducirse, lo que hace. Obviamente, si quisieras tener todos los diferentes textos que actualmente tienes aquí, entonces obviamente podrías hacer exactamente lo mismo. Podrías copiar y pegar y luego pegarlo en esta sección también. Bien, entonces ojalá que todo tenga sentido, y eso es más o menos una descripción básica de cómo harías esto. Ahora, más adelante, en realidad vamos a volver a las diapositivas. Te voy a mostrar cómo animar el texto en la diapositiva Entonces actualmente, cuando vamos a la diapositiva, el texto ya está ahí, y es un poco aburrido. Entonces lo que vamos a hacer es una vez que entremos en la sección de interacción de este curso con un poco más de detalle, y voy a volver a este tipo de cosas. Te voy a mostrar cómo animar este texto cuando la diapositiva salga a la vista Entonces, no voy a hacer eso solo por ahora, porque vamos a pasar por toda una sección de animación en poco tiempo. Y voy a esperarlo en esa. Pero ojalá, eso te da una visión básica de cómo usar las diapositivas y cómo podrías usarlas para una sección de héroes. Bien. 16. SECCIONES de información: Bien, entonces para esta siguiente parte, vamos a ver cómo crear varias secciones de introducción diferentes Entonces lo llamo secciones de introducción, pero esto podría ser para cualquier cosa, de verdad Entonces vamos a cubrir cosas como cómo crear tarjetas de información y cómo usar el posicionamiento absoluto para pegar varias imágenes diferentes a la parte superior de la pantalla. Nuevamente, cualquier tipo de activo que use dentro de esto, voy a dejar en la descripción del curso. Algunas de las imágenes que no puedo darte porque forman parte del sitio web establecido, así que lo que tendrás que hacer es simplemente usar tus propias imágenes, que puedes descargar de un sitio web de fotografía de stock, como píxeles o Pixabay Bien, así que comencemos con nuestra primera sección de información. 17. SECCIón INFo: ICONos: K. Entonces primero, tenemos el sitio web de pila de miembros, solo voy a usar este sitio web como ejemplo para mostrarte algo así como una sección de iconos. Ahora obviamente, podría haber usado cualquier sitio web. Casi todos los sitios web que han existido tienen algún tipo de sección de iconos. Así que solo voy a mostrarte cómo ordenarías estructurar esto usando cuadrículas Ahora bien, también podrías usar flex para esto, pero como tenemos una especie de dos dimensiones, una atravesando, otra bajando, tiene sentido usar cuadrículas Y si has visto mi primer plato, lo sabrás personalmente, me encanta usar cuadrículas para la mayoría de las cosas Bien, así que vamos a probar esto. Entonces primero de lo haré en realidad, justo antes de que hagamos algo. Solo echemos un vistazo a esto en diferentes puntos de vista. Entonces obviamente, vista de escritorio, tenemos esto. En vista de tableta, baja baja baja a dos. Entonces en la vista móvil, baja a uno, pero también los íconos están en realidad ahora al lado de los contenidos. Así que solo te voy a mostrar cómo hacer eso también. Tendremos que cambiar la forma que estructuramos esto por eso. Probablemente hay algunas formas en las que podrías hacer esto. Creo que la forma en que lo vamos a hacer es que en realidad los alojaremos en sus propios bloques div, y luego podemos hacer que probablemente usen flex para el contenedor div general para ponerlos uno al lado del otro. Esa es probablemente la manera que tiene más sentido para mi cerebro. Probablemente puedas hacerlo simplemente haciéndolos en línea. Llegaremos a eso en un momento, en realidad. Lo pensaremos ahí de la época. Bien, así que vayamos a nuestra página y vamos lanzar una sección y vamos a llamar muy creativamente a esta sección Le daremos una altura mínima de 100 VH. Entonces lo que haremos también es simplemente poner un poco de relleno a cada lado. Entonces agregaremos 3% a la izquierda y a la derecha. Entonces vamos a hacer nuestro propio div vamos a hacer nuestro propio contenedor de nuevo. esto lo llamaremos este contenedor, y le daremos un ancho máximo de 13 50 y nos aseguraremos de que esté centrado. Luego, en la sección misma, haremos que la sección flexione en términos de la opción de visualización, y tendremos todo de vuelta al centro y simplemente expandiremos eso también. Bien, entonces lo que podemos hacer ahora es que podríamos haber convertido esto en una grilla si queremos. De hecho, no sé si he mencionado esto en mis videos anteriores. Entonces no tienes que arrastrar necesariamente un div a este contenedor si no quieres. De hecho, puedes simplemente convertir esto en una grilla. Entonces nuevamente, si harías eso o no, depende de tu caso de uso, pero solo para mostrarte que es posible en el propio contenedor, simplemente haz clic en este ícono aquí, y luego tienes una cuadrícula. Bien, entonces vamos a ajustar esto como sea necesario. Entonces necesitamos tener al menos tres columnas, y luego las filas también se generarán a medida que vayamos de todos modos. Bien, así que está bien. Entonces, lo que vamos a hacer inicialmente es simplemente darle estilo a uno de estos, y luego los vamos a copiar y pegar. Bien, entonces antes que nada, vamos a lanzar un bloque div, y llamaremos a este contenedor de iconos. Vuelvo a deletrear eso mal. No puedo deletrear la palabra contenedor. Bien, de todos modos, ya sabes lo que quería hacer. Lo que también haremos entonces, solo para asegurarnos de que podamos obtener esto correcto en el móvil. De hecho vamos a albergar la imagen y el texto en sus propios divs Entonces hagámoslo también. Así que vamos a pop en otro div y vamos a llamar a este icono div. Y luego en realidad vamos a poner nuestro icono en. De hecho lo he cargado anteriormente. Bien. Así que todo está bien. Y nuevamente, en el contenedor de iconos, haremos pop en otro div, y este será contenedor de texto de icono escrito correctamente esta vez Y luego ahí dentro, pondremos un encabezado, que será H tres, y también meteremos un párrafo en. Y solo nos desharemos de algo de este texto. Probablemente sea un poco demasiado aquí. Entonces, deshagámonos de eso. Bien, entonces también queremos darle una clase a la imagen solo porque si cambiamos el tamaño y queremos hacerlo por todo. Entonces simplemente llamaremos a este icono, y le daremos un ancho de al menos para escritorio, le daremos algo así como 50 píxeles. Podemos cambiar esto en el móvil, y luego H tres y párrafo. Simplemente les daremos una clase en caso de que quieras cambiar algo. Entonces simplemente llamemos muy creativamente a eso H tres, y solo llamaremos a ese párrafo Bien, así que está bien. Entonces, una vez que hayas hecho uno de ellos, aquí es donde básicamente puedes copiar y pegar esto. Ahora, no voy a aparecer en todos los diferentes íconos porque ese sería usted viéndome copiar y pegar las cosas. Solo te estoy mostrando esto para propósitos de estructuras. Lo que haremos ahora es asegurarnos de que el contenedor de iconos esté seleccionado, y luego simplemente puede copiar y pegar todo el contenedor a lo largo de varias veces hasta tenga la cantidad deseada que necesitamos. Y como pueden ver, eso prácticamente es exactamente lo mismo que esto. Obviamente, el espaciado es ligeramente diferente. Podemos establecer el ancho máximo para esto si quisiéramos o puedes ajustar el espaciado. Hagamos eso en realidad también. Entonces, obviamente, la belleza de la grilla, puedes hacer esto simplemente arrastrando puedas hacerlo visualmente, lo que realmente me gusta mucho, y lo haremos a 30 pixeles desde un lado, y también lo haremos 30 desde abajo. Entonces es todo parejo. Bien, entonces eso se ve bastante bien. Entonces, lo que vamos a hacer ahora es empezar a cambiar esto en diferentes puntos de vista. Entonces para tablet, creo que probablemente esté bien, creo que para tablet. Pero para el panorama móvil, creo que esto está bien lo cambiaremos. Para deshacerse de una columna, simplemente haga clic en el icono de la cuadrícula y luego simplemente deshágase de una de las columnas de aquí, y luego bajará a dos. Entonces para el móvil, esto es que necesitamos cambiar las cosas un poco más. Tenemos que volver a deshacernos de una columna, pero también tenemos que cambiar la forma en que estas se muestran ligeramente. Entonces en la grilla, solo voy a poner algo de margen para que veas mejor. Bien. Así que de nuevo, hay algunas formas en las que probablemente podríamos conseguir esto junto a este ítem. Pero como lo he hecho de esta manera intencionalmente, creo que la forma más sencilla es que en el contenedor de iconos, asegúrate de que esté seleccionado. Solo para verificar dos veces en tu navegador para ver cuál estás seleccionando. Lo que podríamos hacer ahora es básicamente convertirlo en una caja flexible. Y ahora se puede ver que el icono en realidad está al lado del texto. Bien, pero como pueden ver, todavía no está del todo bien, así que tenemos que cambiar esto ligeramente. Entonces, en el icono en sí, necesitamos darle realmente un ancho mínimo. Así que de esa manera, por mucho que cambiemos el tamaño de esto, no va a ser diferente en tamaño Así que nos aseguraremos de tener un ancho mínimo de 40 píxeles. Eso probablemente sea lo correcto para esto. Y entonces lo que podemos hacer es tal vez solo en el propio contenedor div para esto. Podemos aplicar un poco de márgenes, así que hay algo de espaciado, ya que lo hicimos. Hagamos 20. Eso probablemente se siente bien. Y también se puede ver que algo no está del todo bien. Entonces, por defecto, si estás pensando, bueno, técnicamente, ese debería ser el mismo tipo de altura y lo que tienes tú. Digamos que en realidad lo has hecho tan alineado con la parte superior y nada cambia. Todavía se puede ver aquí en realidad hay una brecha. Donde el icono es realmente más alto que el texto. El motivo de ello, tener en cuenta que por defecto, los rubros vienen con margen Entonces, si solo te deshaces de él, va a afectarlos a todos también, y ahí vamos. Entonces ahora eso está completamente alineado correctamente. Así que esa es la forma más fácil que podría pensar en hacerlo. Probablemente hay algunas formas diferentes. Pero nuevamente, como lo hicimos, poniéndolo en su propio div, esa es probablemente la mejor manera de hacerlo. Bien, entonces ojalá, ¿ todo eso tiene sentido? Bien, así es como vamos a crear nuestra sección de iconos mediante el uso de cuadrículas. 18. SECCIón INFo: POSICIÓN de ABSOLUTO: Bien, entonces lo que tenemos ahora es este tipo de cosas donde tenemos, nuevamente, dos columnas, una con una imagen, y otra con algún texto, y también tenemos algunas imágenes algo así como pegadas a las esquinas de la sección misma. Y como se mencionó anteriormente, vamos a estar usando una posición absoluta para hacer esto. Entonces quiero que solo hagas al menos un par de videos sobre posición absoluta por lo útil que es. Y conseguir que las cosas sean una especie de conseguir que se queden exactamente donde las quieras, sin importar el tamaño de pantalla que tengas, posición absoluta es muy, muy útil para eso. Y para este tipo de sitios web tipo SASS donde ves bastantes gráficos vectoriales, esto es bastante común donde tienes tipo de imágenes en lugares insólitos, y tendrás que pensar creativamente cómo llegar Y muy a menudo, vas a estar usando la posición absoluta, para que se posicionen exactamente donde quieres que lo hagan. Bien, así que comencemos. Así que una vez más, vamos a mantener la misma sección que hemos estado usando en el curso hasta ahora, que es 100% de la altura de Veport, y tenemos algo de relleno a cada lado Y lo que creo que vamos a hacer es que en realidad sólo vamos a lanzar una grilla de inmediato No necesitamos tener dos filas, así podemos deshacernos de una fila, y eso está bastante bien y simplemente expandiremos esto hacia afuera para De hecho, también le daremos a esta cuadrícula un ancho máximo. Le daremos digamos 1,200 de ancho máximo, y pasa que ya está centrado. Eso está todo bien. Bien, así que comencemos. Entonces, antes que nada, entraremos en un bloque DIV. De hecho, entraremos en un div para ambos porque van a ser ligeramente diferentes, así que podemos hacer esto esta vez. Nuevamente, deberías estar nombrando todo cada vez que hagas esto, pero solo por velocidad, no voy a hacer necesariamente eso Y dentro de este bloque div, vamos a hacer pop en nuestra imagen. Y he pre oded estas imágenes en. Ahora, he proporcionado estas imágenes dentro de la descripción del curso. Algunos de los otros, no puedo hacer eso porque obviamente, ya sabes, son sitios web establecidos, y no puedo proporcionar imágenes gratis. Obviamente, eso sería ilegal. Entonces estos, sin embargo, esto es parte del paquete de animación humanos, que se puede descargar gratis. Entonces lo que voy a hacer es proporcionar al menos los que he usado para esto dentro de la descripción del curso. Pero si quieres descargar todo, te proporcionaré un enlace a eso también. Esto básicamente es solo una lista de animaciones que ha creado un tipo llamado Pablo Stanley, que es un diseñador bastante famoso. Y básicamente, la idea es que puedas mezclar y combinar todos estos diferentes gráficos vectoriales para que se adapten. Pero lo que vamos a hacer es simplemente usar esto como ejemplo de cómo posicionar las cosas alrededor de la pantalla. Bien, así que eso está hecho. Y eso está bastante bien en realidad. Probablemente solo nos aseguraremos de que también esté justificado al centro. Y si quieres cambiar el estilo o el tamaño, podrías hacerlo. Creo que de hecho lo mantendremos de ese tamaño por ahora. Sólo parezcamos en un toque. Sí, está bien. Bien, entonces ahora tenemos aquí esta sección, que obviamente es un título, con un párrafo, y luego tenemos aquí algún tipo de secciones de enlace, así que hagámoslo. Bien, entonces hagámoslo ahora. Entonces vamos a tirar en un rumbo y lo haremos un H dos. También lanzaremos un párrafo. Y luego también vamos a lanzar en una sección de lista aquí también. Bien, así que vamos a copiar y pegar el texto uno. Entonces es lo mismo. No me voy a preocupar por la tipografía ni nada por ahora Sólo vamos a bajar eso a la siguiente línea. Haremos esto mucho más grande, algo así como 50 más grande que eso tal vez lo tengamos un poco más grande también. Simplemente copiaremos y pegaremos este texto en. El tamaño de fuente para esto era 18, acabo de ver. Hagámoslo. Bien. Entonces, de hecho, eso parece mucho más grande, para ser justos. Decir es 18, pero no se siente como 18. No, no cambió. Por eso. Bien, intentemos eso otra vez. Entonces, en lugar de 14, haremos 18, y eso es más parecido. Bien, así que eso está bien por ahora, y luego obviamente, queremos tener esto adentro también. Entonces solo copiaremos y pegaremos una línea de esto y luego la copiaremos. Así que eliminaremos dos de estos elementos de la lista. Haga doble clic, pegue su texto. Y entonces podemos ajustar eso sin embargo, tenemos que hacerlo. Entonces tendremos el tamaño de eso como 18 también, así que coincide. Y también vamos a poner un poco de margen en esto, así que lo empuja ligeramente hacia abajo. Bien. Voy a tener 30, y sólo vamos a hacer un poco de margen más margen por debajo. Eso se ve bastante bien. Y luego lo que podamos hacer con este ítem de la lista, solo copiaremos y pegaremos esto unas cuantas veces. Bien, así que prácticamente tenemos exactamente lo mismo que eso. Obviamente, no he metido todo el texto solo para ahorrar tiempo. Bien, así que eso es como los huesos desnudos de que realmente se completó. En esta versión, parece que el elemento de texto está algo centrado dentro de esta imagen. Entonces volveremos a hacer lo mismo. Entonces, si haces clic en el bloque DIV, que está albergando todo este texto, todo lo que necesitas hacer es conseguir que esto esté en el centro, lo que en realidad no estará justificado, se alineará, de hecho. Bien. Así que estamos más o menos ahí. Entonces, a continuación, tenemos que meter estas imágenes en todos los rincones de la pantalla. Y una vez más, lo que vamos a hacer es en la propia sección, vamos a hacer que la posición sea relativa, y eso nos permitirá posicionar las imágenes absolutas a lo largo de cada esquina. Entonces hagámoslo ahora. Así que vamos a nuestra ficha de posición aquí. Entonces, lo que tenemos que hacer es abrir eso. Y entonces más que estático, tendrá que ser relativo. Entonces lo que podemos hacer en la sección, puedes empezar a agregar estas imágenes en. Así que solo arroja una imagen. Por ahora va a aparecer en lugares aleatorios hasta que lo consigamos configurarlo correctamente. Hagamos el primero. El primero es este de aquí, que es que éste pasa a estar en la parte superior izquierda. Eso está bien. Y esto va a tener que ser posición absoluta. Entonces podemos simplemente dar click en este de aquí arriba a la izquierda y ahí vamos. Si necesitamos volver a dimensionar, podemos hacerlo, pero eso probablemente sea correcto de todos modos. Eso es bueno. Lo mismo otra vez, agrega otra imagen. Todas estas imágenes necesitamos tener una clase diferente porque obviamente si les das la misma clase, todas estarán posicionadas absolutamente en el mismo lugar. El siguiente va a estar arriba a la derecha, que es éste. Una vez más, esta tendrá que ser posición absoluta, y esto fue en la parte superior derecha. Eso es bueno. Después dos más. ¿Cuál fue el siguiente? Entonces haremos esta la siguiente, que fue esta de aquí. Una vez más, necesita ser una posición absoluta, y esa será a la parte inferior izquierda. Haremos eso un poco más pequeño. Eso es bueno. Y luego sólo una más. Lo mismo otra vez, imagen en la última imagen será esta. Una vez más, esa tendrá que ser posicionar la posición absoluta hacia abajo a la derecha. Bien, entonces ahí estamos. Ojalá, puedas ver lo fácil que es una vez que te acostumbras al concepto de esto. Ahora tenemos prácticamente exactamente lo mismo que esto, y hemos utilizado la posición absoluta para obtener estas imágenes en la parte superior de la pantalla. Bien, ahora que tenemos esto, cómo queremos en versión de escritorio, no vamos a poder tener esto para móviles. Entonces esto va a parecer muy extraño. Realmente no podemos tenerlos en la parte superior de la pantalla. Simplemente no va a quedar bien, así que tendremos que tomar una decisión estilísticamente en algún momento de lo que vamos a Ahora, en la vista de tableta, probablemente haya una manera de que podamos hacer que esto funcione hasta cierto punto, pero la tableta es probablemente la última versión que realmente podemos tener los cuatro en la parte superior. Entonces lo que creo que voy a hacer para el dimensionamiento de esto, voy a usar ancho vertical. Entonces ahora, esto se puede cambiar para tal vez de escritorio y para tableta. Lo que haremos para el escritorio es que tendremos algo así como Hagamos 12 de ancho vertical, y eso probablemente sea correcto, y haremos lo mismo para todos estos en realidad. A eso quizás le vendría bien ser un poco más grande, hagamos 15. Estoy haciendo esto solo por la vista realmente. Nuevamente, 12 de ancho vertical. Explicaré el ancho vertical en un momento y cómo funciona esto. Lo he mencionado brevemente en el curso antes, y entraremos en un poco más de detalle y cómo funciona esto realmente. Entonces el ancho vertical básicamente significa que va a escalar con el tamaño de la pantalla. Entonces, a diferencia del valor de píxel ca, que se establece en su lugar un poco como porcentaje, estas imágenes realmente van a estar escalando dependiendo del tamaño de la pantalla. Yo sólo te lo mostraré. Entonces ahora los hice más ancho vertical. De hecho, necesito ajustar esto un poco más. Pero verás si miras éste, por ejemplo, medida que me desplace hacia abajo, deberías poder ver que la imagen en realidad se está haciendo más pequeña. Como es aquí es mucho más pequeño que como está ahí. Esto es muy útil para este caso de uso donde a medida que la pantalla se contrae, no va a poder quedarse del mismo tipo de tamaño. Este es probablemente el último momento que en realidad vamos a tener estas imágenes en las esquinas superiores. Quiero decir, en este punto del panorama móvil, se ve bien, pero es un poco raro en este punto, quizás. Pero creo que para escritorio y para tablet, está bien. De hecho, también puede ajustar la dimensión de ancho vertical para cada uno también. Entonces digamos en tablet, querías que en realidad volviera a ser un poco más grande, en este punto, podrías hacerlo así podrías hacerlo como 13, así que es un poco más grande. No tres, 13. Ahí vas. Esto depende de ti, cómo lo harías, pero puedes ajustarlo para cada uno. Bien. Así también en la vista de tableta. Este texto es probablemente un poco demasiado grande también, así que tenemos que también, hay que mencionar, en realidad también se puede hacer ancho vertical para el texto también. Así que sólo te lo voy a mostrar muy brevemente otra vez. Entonces, en lugar de ser de 60 píxeles, hagamos algo así como 30 de ancho vertical. Definitivamente no 30. Hagamos diez. Bien, así que eso es algo así como lo que era antes, tal vez un poco menos, así que tal vez antes eran ocho. Ahora bien, si empiezo a mover mi cursor hacia adentro, verás que el texto también se está haciendo más pequeño o más grande dependiendo de cuánto se contraiga la pantalla Y puedes usar esto para cualquier cosa. Y es muy, muy útil en los casos en los que quieres tener cierta palabra en la línea de abajo, y no quieres que ordene solapamiento o caiga sobre otra línea. De esta manera, se mantendrá en las mismas dos líneas, y el tamaño del texto en sí solo se contraerá dependiendo como quieras que lo haga. Entonces eso es muy útil para eso. Bien, entonces en el panorama móvil, en este punto, vamos a necesitar alterar ligeramente la cuadrícula, así que no está en dos columnas. Así que ve a la grilla y deshazte de una columna. También vamos a hacer esta imagen un poco más pequeña también. Entonces, en lugar de ser tan grande como es, vamos a ajustarlo ligeramente. Le vamos a dar un ancho de ¿qué vamos a hacer? De hecho, también le daremos a esto un valor de ancho vertical. Entonces, el ancho vertical de 80 es probablemente aproximadamente correcto. Nuevamente, como pueden ver, mientras muevo la maldición hacia arriba y hacia abajo, la imagen va a hacerse más grande dependiendo de qué tan grande sea la pantalla. Nuevamente, muy, muy útil tener. De nuevo, vamos a entrar en más detalles sobre el ancho vertical en poco tiempo. Y entonces algo más que tenemos que hacer, por supuesto, es que ahora tenemos un problema con estas imágenes como que interactúan con esta parte de aquí. Entonces vamos a necesitar aplicar algún relleno en algún momento para deshacernos de ese problema. Entonces en cuanto al relleno, eso está actualmente en esta sección, necesitamos tener, nuevamente, el cien estándar, tal vez un poco más porque tenemos esto en el camino. Si hicimos 200 píxeles de relleno, eso nos va a resolver este problema. Eso está bien, y luego para el móvil. Nuevamente, tal vez solo te desharías de estos o los esconderías en este momento. Obviamente, también necesitas ajustar tu texto para la vista móvil. Pero entiendes la idea. Esta es una forma en la que básicamente podrías usar ancho vertical para varios elementos de texto y elementos de imagen diferentes en la página. Pero sí creo que para esta sección de aquí, tal vez solo esconderías estos. Entonces, si querías ocultarlos, solo tienes que hacer clic en las opciones de visualización aquí, luego haz clic en non, y eso te deshará de él solo en versión móvil. Ponlo de nuevo por ahora, en realidad. Entonces ahí vamos. Hemos utilizado la posición absoluta, y también hemos usado atributos de ancho parcialmente verticales para escalar el tamaño de ciertos elementos a escalar el tamaño de medida que la pantalla se contrae. El principal obvio de esto será a medida que bajemos, tipo de SVG de plantas se están haciendo más pequeños a medida que bajamos, como es esta imagen de aquí Y también, hicimos lo mismo para este bloque de texto también. Bien, así que eso lo envuelve para este, y vamos a hacer un par secciones de información más diferentes antes de pasar a las tarjetas de información. 19. SECCIón INFo: 3 grano COL: Bien, entonces a continuación, tenemos aquí esta sección donde tenemos una imagen con el título y luego algún golpe de texto. Nuevamente, esto es súper súper súper común. Creo que en realidad hemos hecho esto en el primer curso, pero voy a mostrarte de nuevo y cómo hacer esto y solo un poco de detalle sobre el tamaño de la imagen dos. Bien, así que comencemos. Y vamos a usar la misma sección que hemos estado usando hasta ahora. Por lo que esta es una sección con el 100% de la altura de la ventanilla con 3% de relleno a cada lado Y lo que pensaremos que vamos a hacer es que en realidad sólo vamos a lanzar en una parrilla de inmediato Queremos tener tres columnas. No queremos tener dos filas, así que deshazte de una de esas, y eso está bien. Y luego expandiremos esto. Y luego también le daremos un ancho máximo de 1,200 píxeles. Bien, entonces, antes que nada, vamos a diseñar uno y luego copiarlo y pegarlo. Entonces, antes que nada, agreguemos un bloque dip. Entonces vamos a agregar en vamos a hacer encabezado, párrafo y botón. Y luego también, por supuesto, agregaremos en una imagen. Y luego solo usaremos esta otra vez. Y simplemente arrastraremos esto a la cima. Estamos más o menos a mitad de camino. Bueno, estamos prácticamente todo el camino allí, en realidad. Entonces todo lo que necesitas hacer ahí es asegurarte de dar una clase a todos estos por si quieres cambiar algo de ellos. Pero no voy a hacer eso sólo por un momento. Voy a copiar y pegar esos a lo largo. Y ahí estamos. Obviamente, si quieres cambiar la imagen, tendrás que asegurarte de que tengan la misma orientación. Entonces eso es importante porque si no haces eso, esto va a pasar. Entonces, si haces esto, claro, obviamente, no va a quedar bien. Debes asegurarte de que estás cargando la proporción de imagen correcta en Simplemente te ahorrará mucho tiempo si haces esto de antemano. Hay formas en las que puedes hacer que la imagen cubra un espacio si defines el tamaño, pero es mucho más fácil si en realidad solo subes la proporción correcta de inmediato. Así que también vamos a poner ese solo para que lo veas. Ahí estamos. Entonces es súper simple. Y a medida que bajemos, obviamente, vamos a ajustar esto ligeramente cuando lleguemos a la vista de tablet. Entonces en la vista de tableta, obviamente, necesitamos hacer el texto un poco más pequeño. Y la vista de tabla es probablemente el último momento en el que creo que esto es aceptable estando en tres columnas como esta. En el panorama móvil, ahí es cuando se pone un poco demasiado. Entonces lo que creo que vamos a hacer es de esta manera, simplemente nos desharemos de ambas columnas. Es un poco raro solo que esto se ve bien de esta manera, pero se ve totalmente raro que falte uno. Entonces necesitas deshacerte de ambos, solo hay una columna y luego por supuesto, lo que puedes hacer es entonces simplemente ajustar el relleno en la cuadrícula, que es, de nuevo, otra razón por la que me encantan las cuadrículas. Vamos a volvernos locos. Hagamos 100 Y eso está hecho, y eso va a hacerlo obviamente en lo mismo para todos ellos. Entonces, lo que debería haber hecho, y esta es una razón por la que es posible que también quieras hacer esto, es que quizás quieras alojar el texto y los botones en su propio bloque div. Entonces de esa manera, si quieres volver a reutilizar este encabezado, si quiero aplicar, especie de margen ya sea a la imagen o a esta, entonces hay un espacio más grande entre estos dos aquí, La única manera de hacerlo ahora es aplicando más de un margen al encabezado real o un margen abajo en la imagen. Lo que debería haber hecho realmente es hacer pop esto dentro su propio bloque div para que podamos espaciar el div lejos de él. Pero en realidad no importa en este caso. Bien, entonces en este punto de vista, estamos un poco bien, y en realidad no hay mucho más que decir que realmente lo hago . Eso es algo así. Entonces hay una cosa que sí quiero mencionar, que es acerca de que los clientes suban sus propias imágenes Ahora bien, lo mencioné antes, si un cliente, ya sabes, usa la función de editor de flujo web , lo cual es, de nuevo, muy útil, pero puede causar problemas porque si un cliente hace esto y simplemente reemplazan una imagen, no han pensado en las proporciones de imagen, vas a enfrentarte a esto, claro. Quiero decir, van a darse cuenta de que esto está mal la mayor parte del tiempo. Pero hay cosas que puedes hacer para que esto sea un poco más fácil para tus clientes. Como mencioné antes, en realidad puedes definir el tamaño o usar un bloque div con un tamaño definido, y luego puedes hacer estallar tu imagen. Pero con toda honestidad, trato ofrecer a mis clientes un paquete de atención donde pueda. La razón es que aunque lo hagamos para que cuando el cliente ingrese esta imagen, todavía va a recortar parte de la imagen de todos modos. Entonces, si están tratando de poner una imagen de retrato en un espacio horizontal, realmente no importa Incluso si logramos que eso se vea bien, todavía va a ser raro porque van a estar recortando la imagen Y obviamente, la razón por la que subieron esa imagen es para tener toda la imagen en ella. Entonces realmente, tienes que explicarle a tus clientes de antemano, si van a subir sus propias imágenes, necesitan seguir la misma relación de aspecto. Y puedes poner esto en un documento para ellos si alguna vez quieren hacer eso. Pero esto vuelve a ser algo muy común para todos los sitios web, y esto es algo que probablemente vas a estar usando bastante. 20. SECCIón INFo: cartas: Bien, así que con esto, de nuevo, probablemente vamos a usar rejillas para tener estas dos columnas, y básicamente vamos a usar la posición absoluta para que esta imagen se pegue al fondo de este contenedor div Así que hemos hecho un poco de esta posición absoluta en uno de los videos anteriores, y lo volveremos a hacer en un momento también. En primer lugar, cuando probemos este, básicamente tendremos dos bloques did a cada lado dentro de una grilla. No se requiere ningún tipo de configuración flexible para esto porque de manera predeterminada, los elementos de texto irán por defecto a la parte superior izquierda de todos modos. Entonces, comencemos a hacer esto. Entonces antes que nada, entonces, no pasaremos por el papel de cinta de hacer una sección y un contenedor. Simplemente eliminaremos esto, y luego en realidad solo convertiremos este contenedor y solo convertiremos esto en una cuadrícula. Bien, entonces a partir de aquí, no necesitamos dos filas. Entonces nos vamos a deshacer de uno de estos, y eso va a estar completamente bien. Bien. Entonces ahora, dentro de este contenedor, vamos a tener eventualmente todos van a tener dos de estos, pero solo por ahora, vamos a tirar uno y vamos a darle estilo a éste y luego lo duplicaremos una vez que lo hayamos hecho, y luego simplemente cambiaremos la imagen hacia el final. Bien, entonces tenemos que darle a esto algún tipo de altura. Así que vamos a intentarlo así vamos a hacer una altura mínima, al menos una versión de escritorio de algo así como 600, vamos a intentarlo de nuevo. Bien, entonces no va a ser exactamente lo mismo que esto, pero eso está bastante cerca. A lo mejor es un toque más en realidad, así que tal vez seis 50. Sí. Bien, bueno, lo que sea, eso servirá por ahora, solo para ilustrar cómo hacer esto. Bien, entonces dentro de este Diplock, lo que tenemos que hacer es antes que nada, darle a esto un color de fondo Entonces el color de fondo, no lo voy a hacer exactamente. Es sólo un gris claro. Entonces hagamos eso antes que nada, así que es de un color gris bastante claro. Eso me parece lo suficientemente bueno. Bien. Y a continuación, lo que vamos a hacer es tirar en un bloque div para albergar aquí el texto del título. Bien. Entonces volvamos a hacer eso. Entonces, pase a la configuración de Tbiography y haga clic en el encabezado. Lo haremos una H dos. También luego lanzaremos un párrafo, y luego también lanzaremos un botón. No voy a molestarme en estilizar esto exactamente igual. Nuevamente, esto es puramente para mostrarte cómo estructurar estos. Obviamente, estilismo, cambias de todos modos. Entonces, entonces ya estamos más o menos ahí, así que tenemos el título, tenemos el texto, y tenemos el botón. Entonces, a continuación, tenemos que ponernos esta imagen. Ahora, puedes pensar para ti mismo, bueno, podrías haber puesto tal vez una imagen de fondo en esta sección, que potencialmente podría funcionar. Pero cuando comienzas a moverlo a su alrededor y cambiarlo de tamaño para diferentes tamaños de pantalla, posiblemente se movería. Bueno, posiblemente no me movería por ahí lo haría. Entonces, la mejor manera de hacerlo es usar la posición absoluta. Y lo que hacemos es hacer que el bloque div sea relativo. Entonces hagámoslo antes que nada. Nos preocuparemos por el estilo de esto en solo un momento. Así que asegúrate de que el DVlock en sí esté seleccionado. Ve a tu configuración de posición y luego la tendremos en lugar de estática, tendremos como posición relativa. De esta manera, cuando echamos sobre nuestra imagen, podemos entonces hacerla posición absoluta, y será al fondo de este bloque div. Entonces hagámoslo. Vamos a trow en nuestra imagen Y ese será éste de aquí. Nuevamente, de vuelta al posicionamiento, y luego esta será posición absoluta, y será al fondo de esta sección. Ahí vamos. Ahora es posición absoluta porque hicimos relativo al bloque div, si eso va a tener sentido. Bien, ahora, cada vez que movemos la pantalla, siempre va a quedar en la parte inferior de este bloque div pase lo que pase. Obviamente, va a hacerse más pequeño cuando hagas eso, pero nunca se alejará de estar en el fondo de esto, que en realidad es lo que queremos. Bien, entonces ahora, vamos a darle estilo a esto correctamente. Entonces, obviamente, eso es justo hacia el borde. Lo que podemos hacer es simplemente asegurarnos de que estos estén sentados dentro de su propio div. No sé si le puse un div. Yo no lo hice. Bien, bien. Entonces dentro de este bloque div, necesitamos albergar el encabezado y el párrafo en la parte inferior dentro de su propio div. Entonces, en el bloque div general, haga clic en esto y luego ponga otro div y luego simplemente arrastraremos estos elementos adentro. Lo mismo para el encabezado, y solo reubicaremos esto un poco Bien. Y entonces lo que podemos hacer es en el nuevo div. Entonces simplemente llamaremos a este texto div solo para que sepamos con qué estamos trabajando. Ahora lo que podemos hacer es aplicar relleno a todo el asunto. Entonces lo que vamos a hacer esta vez está en el relleno. Mantén el turno, y luego vamos a arrastrar eso. Entonces hay igual acolchado en todos los lados. Entonces bvioly solo elige donde creas que se ve bien. Creo que algo así como 30 píxeles me parece correcto. Y eso se ve bastante bien. Ahora cuando cambiemos el tamaño de esto, se puede ver que esto sí se queda ahí pase lo que pase Ahora obviamente, vamos a tener que cambiarlo un poco por tablet y tal vez, pero vamos a llegar a eso en solo un momento. Pero eso se ve bastante bien por ahora. ¿Y en qué cantidad de texto tenían? Tres líneas. Eso está bastante bien. Sólo nos quedaremos así por ahora. Eso se ve bastante bien. Entonces lo que podemos hacer ahora es simplemente seleccionar el div general y luego simplemente podemos copiar y pegar eso una vez y simplemente para esta, todo lo que necesitamos hacer es reemplazar la imagen por la otra imagen, así que esa sería esta de aquí, y ahora tenemos exactamente lo mismo. Bien. Entonces ahí estamos. Ahora bien, agradezco que el estilo sea ligeramente diferente. Estos se ven un poco más delgados, y el tamaño del contenedor para este sitio web es en realidad un poco más pequeño que lo que tenemos, por lo que se ve un poco diferente Pero nuevamente, esto es más solo para mostrarte cómo realmente controlarías esto y darle estilo usando las diferentes técnicas de posicionamiento. Bien, entonces lo que vamos a hacer ahora es pasar a nuestra vista de tablet. Y esto se ve bastante bien, en realidad. No hay nada realmente malo en esto. Creo que tal vez a medida que nos adentramos más. No, todavía estoy contento con eso. A lo mejor podría estar haciendo con un poco menos en cuanto a alturas, y tal vez en lugar de 650 600. Y eso estaría bien. Y luego para el paisaje móvil, está empezando a agruparse un poco Entonces veamos qué hacen en su sitio web. Entonces hacemos clic en inspeccionar. Y parece como si Sí, pueden colocarlo en uno realmente para el paisaje móvil, así que eso es lo que en 750. ¿Qué es eso? Sí, lo hacen. Lo meten en una sola. Entonces lo que podemos hacer entonces, si hacemos lo mismo es ir a la grilla, deshacernos de una de las columnas, y luego ocupará todo el espacio. Ahora bien, esto probablemente se vea un poco grande en realidad. Entonces, lo que creo que haríamos en lugar que fuera el 100% del ancho, tal vez solo cambie esto. Entonces, lo que también haremos, solo para que podamos ver lo que estamos haciendo un poco mejor es solo en la sección misma. Simplemente agregaremos un poco de relleno para que podamos ver lo que estamos haciendo correctamente. Bien, entonces en el bloque div general, lugar de que sea el 100% del ancho es por defecto, vamos a establecer un ancho para ello y estableceremos un ancho máximo de, no sé, algo así como digamos 600. No, quizá cinco entonces. Bien, eso se ve bastante bien. Eso se ve bastante parecido a eso. Y entonces lo que tenemos que hacer es asegurarnos de que esté justificado a la mitad, así que salta por encima. Y también habría que hacer lo mismo para éste. Así que solo asegúrate de que esté justificado. Así que asegúrate de que todo esté seleccionado actualmente. Entonces estoy seleccionando el div general para todo el asunto, y luego la justificación será al centro. Bien. Y ahí estamos. Obviamente, cuando bajemos al móvil también, vamos a tener exactamente lo mismo. Bien, entonces ojalá que todo tuviera sentido lo que hicimos ahí. Y prácticamente lo hemos cubierto todo, creo. Ahora, de nuevo, potencialmente hay algunas formas en las que podrías haber hecho esto, pero creo que la forma en que lo hice tiene más sentido. De nuevo, podrías haber usado flex box para esto. No tenías que usar necesariamente cuadrículas. Pero como he mencionado muchas muchas veces, solo me gusta el hecho de que puedo controlar el espaciado visualmente. Entonces, de nuevo, esto probablemente necesite estar un poco más ancho aparte. Entonces, si lo hicimos, no sé, algo así como 50 pixeles. Eso me parece bastante bien. Bien, así que eso prácticamente lo envuelve para este. Y a continuación, vamos a hacer otra en la que usemos la posición absoluta en una especie de estilo web más de ASA usando gráficos vectoriales. 21. SECCIón INFo: CARde CARto flex: Bien. Entonces, a continuación, vamos a recrear este tipo de diseño desde el sitio web obviously.ai Entonces, como pueden ver, tenemos una especie de aquí con un encabezado, y luego tenemos una sección de párrafo por aquí. Entonces tenemos este tipo de tres secciones de tarjetas también. Así que vamos a lograr todo esto usando una mezcla de grid y flex. Así que vamos a usar una especie de cuadrícula para esta parte de aquí, una cuadrícula para esto también, y luego vamos a usar flex para distribuir esto de manera uniforme. Bien, así que comencemos de nuevo en nuestro proyecto. Vamos a lanzar una sección, que vamos a llamar sección muy creativamente Y esto una vez más va a ser 100 VH. Entonces solo vamos a usar el contenedor predeterminado solo para la velocidad. Y para meter este contenedor en el medio, vamos a hacer que nuestra sección se flexione. Y luego este contenedor va a simplemente expandirse hacia afuera. Bien, eso está todo bien. Entonces dentro de este contenedor, vamos a tirar en nuestra primera cuadrícula, queremos tener solo dos columnas, pero solo una fila, así que deshazte de una de las filas. Y entonces lo que tendremos que hacer también es meter este contenedor en el centro también. Lo siento, la grilla hacia el centro. Entonces dentro de nuestro contenedor, también haremos del contenedor en sí una caja flexible. Y eso va a necesitar ser justificado al centro, y también será vertical. Bien, entonces ahí estamos, y lanzaremos nuestro primer dibloque, y luego simplemente lo duplicaremos Entonces este va a tener un rumbo adentro. Simplemente copiaremos parte de este texto buceador en realidad solo para que se vea algo similar. Lo resolveremos en un momento. Y luego aquí dentro, tenemos una especie de dos párrafos. Normalmente lo hago en dos párrafos diferentes, pero solo por velocidad, voy a separar estos dos, así que se ve similar. Bien, eso es lo suficientemente bueno para mí. Y luego a menudo necesitamos tener esto solo en tres filas. Entonces, a medida que expandimos esto hacia abajo como verás, en realidad conserva las tres líneas hasta que lleguemos a una especie de sección de tableta móvil. Así que hay algunas maneras en las que podrías hacer eso, en realidad. Podrías establecer un ancho máximo del bloque dip en el que este se asienta para lo empuje en tres líneas, o realmente puedes cambiar el encabezado a un ancho de carácter. Entonces CH es algo que puedes usar dentro de Webflow. Entonces solo te voy a mostrar lo que es CH. Entonces, si vamos al encabezado, asegúrate de que el encabezado esté seleccionado. Y si lo tienes por aquí, verás a Maxwith actualmente dice no, entonces tienes esta opción aquí que dice CH Entonces CH es básicamente un valor de carácter, y básicamente limita la cantidad de caracteres dentro de cualquier línea. Entonces básicamente tiene que ver con la cantidad de ceros que puedes tener dentro de una sola línea Entonces, sea cual sea el tipo de fuente que tengas, limitará la cantidad de caracteres que tengas en función de un número de ceros Si eso suena un poco abstracto, básicamente, solo piensa en ello ya que limita la cantidad de palabras que vas a tener en una línea. Entonces, si hago algo como el 20, verás que lo pone en tres filas. Entonces nuevamente, podrías usar un ancho máximo para hacer el mismo tipo de cosas, pero esa es solo otra forma que puedes usar en términos de un valor diferente. Entraré más en estos valores un poco más adelante en el curso. Bien, así como pueden ver, algo no está del todo bien aquí. Se puede ver que esta es línea a la cima, pero este tipo de tiene un hueco. Vale la pena tener en cuenta que por defecto, todos los encabezados de flujo web tienen cierto margen Entonces, si no quieres esto, solo deshazte de él y simplemente arrástralo hacia arriba, lo siento, hacia abajo, y luego vuelve a cero, y ahora puedes ver que estos están alineados a la parte superior nuevamente. Bien, entonces esa es más o menos la primera grilla hecha. También dentro de nuestro contenedor, agregue el siguiente en. Y esta, vamos a tener tres columnas, y luego vamos a deshacernos de una de las filas también. Y luego también solo aplicaremos un poco de margen a esto, así que es un poco de espacio. Entonces vamos a tener 50 píxeles de margen. Bien, a continuación, vamos a empezar a peinar esto. Nuevamente, vamos a crear uno de estos y luego básicamente copiarlo y pegarlo y luego cambiar los colores como necesitemos. Entonces, como pueden ver, tenemos un icono junto a un encabezado, era esencialmente un encabezado. Entonces entonces tenemos un poco de hueco y tenemos un bloque de texto en la parte inferior. Así que vamos a usar de nuevo, flex box para distribuir esto uniformemente de principio a fin, y vamos a necesitar aplicar un radio al propio dvlock Y tendremos que hacer esto en línea para que se asiente uno al lado del otro. Bien, así que comencemos. Entonces, antes que nada, lanzaremos un div, y solo llamaremos a esta tarjeta div, y le daremos una altura mínima de algo así como 200 píxeles. Eso está bien. Y le daremos un color de fondo de apenas un azul apagado. También queremos tener esto con un radio dos. Entonces algo como diez probablemente haría el trabajo. Y creo que se ve bastante similar. No tan azul como debería ser en realidad. Así que vamos a hacerlo un poco más azul. Ahí vamos. Eso es mejor. Bien, así que eso está prácticamente bien. Y también vamos a aplicar un poco de relleno dentro de esto también. Entonces, para obtener este texto para que no esté del todo al borde, vamos a aplicar relleno al div real en sí. Entonces hagámoslo. Y aplicaremos algo así como 25 píxeles en todos los sentidos. Entonces, si mantienes presionado el turno y luego arrastras estos, puedes ver que todo lo hace al mismo tiempo. Y 25 debería hacerlo bastante bien. Bien, entonces para este bit, vamos a tener un div que albergará ambos. Hagámoslo. Así que vamos a hacer pop en un bloque div, y sólo vamos a llamar a este icono div y vamos a lanzar una imagen. Así que he precargado uno de los íconos en para la velocidad. Eso está todo bien. Entonces también lanzaremos otro rumbo, y esto puede ser H tres. Y como puedes ver, por el momento, la imagen en realidad está en línea por defecto, y el encabezado en realidad no lo está. En realidad es el bloque de visualización. Entonces lo que necesitamos es conseguir esto el salto al lado de éste. Y la forma en que lo hacemos es asegurarnos de que el encabezado es en lugar de bloque se establece en bloque en línea, y verás que salta a la misma línea. Bien, vamos a ordenar el espaciado en un momento. Asegurémonos que esto también sea blanco. Se ve bastante bien. Y entonces lo que vamos a hacer es que solo aplicaremos. Entonces, ¿cómo es el dimensionamiento de eso? Eso está bastante bien. Entonces vamos a aplicar algún margen al icono para que empuje esto lejos para que el margen pueda estar de este lado. Entonces vamos a tener una especie de 20 pixeles. En el original, en realidad no hay mucho ahí, pero no sé. Creo que se ve mejor así. Bien, entonces vamos a meter el texto. Y, yo podría simplemente escribirlo, no podía 3.000 y esto en realidad puede ser más grande, así que lo tendremos algo así como 40. Eso va a hacer. Entonces en cuanto al espaciado se puede jugar con un poquito, obviamente, podría ajustar el margen sobre esto, para que podamos hacer eso, creo, así lo consigue un poco mejor posicionado. Lo siento, no funcioné del todo. Hagámoslo otra vez. Entonces lo haremos Bien, obviamente, necesitamos jugar un poco con el posicionamiento de esto, así que está un poco alineado con el centro. Nuevamente, una manera fácil y agradable de hacerlo es quizás tenerlo para que el icono div en realidad sea un cuadro flexible en sí, así que podríamos hacer eso, y verás que el icono se moverá un poco. Entonces ahora está más o menos en el centro, y puedes ajustar el margen de estos dos palos, así que está un poco alineado correctamente. Así que algo como diez sería sobre lo correcto. Y eso está muy alineado con el centro, creo. Bien, entonces el siguiente, vamos a lanzar un bloque de texto. Y nos aseguraremos de que esto también sea blanco. Creo que había dos líneas de texto no estaba bien. Así que sólo copiaremos y pegaremos eso otra vez. Inténtalo de nuevo. Ahí estamos. Ahora lo que tenemos que hacer es conseguir este espaciado correctamente. Entonces lo que podemos hacer es en el div de la tarjeta real en sí es hacer esta caja flexible también. Lo siento. Otra forma en la que podríamos hacer esto. Bien. Bien, entonces ahora para espaciar apropiadamente esto de arriba a abajo, haré del div de la tarjeta una caja flexible, y en lugar de ser horizontal, la haremos vertical. Entonces podemos usar la dificación del espacio entre y distribuir uniformemente de principio a fin, y luego verás esto salta al fondo Bien, eso es más o menos en realidad. Entonces lo que tenemos que hacer ahora es simplemente copiar y pegar esto y luego darle a los otros dos un color diferente, y obviamente, lo que realmente harías es cambiar el texto. No voy a hacer eso por esto. Solo te estoy mostrando esto para propósitos de maquetación. Pero si solo copio y pego eso a lo largo de ahora, tendrías que darle a cada una de estas diferentes tarjetas un calificador o una subclase diferente Así que tendríamos que darle a esto una clase combo de algo así como el verde. ¿De qué color era? Oh, era verde. Bien. Entonces sí, este podría llamarse verde por razones obvias, luego solo cambia el color de fondo. Entonces, si tenemos eso, y luego el último, creo que era morado, así que solo llamas a este morado. Y luego cambiar eso. Obviamente, si no lo hubieras hecho, cuando cambiaste el color en una de ellas, habría cambiado en todas ellas, lo que obviamente, no queremos hacer. Bien, así que eso más o menos termina para este. Vamos justo antes de hacer cualquier otra cosa, sin embargo, vamos a asegurarnos de que también sea apropiado en el móvil y la tableta. Entonces para la vista de tableta, creo que todavía la mantienen con tres columnas, así que solo se expandirá un poco hacia abajo, y luego, va a estar en una línea en este punto. Bien, eso está bien. Entonces hagamos el mismo tipo de cosas. Entonces en la vista de tableta, creo que sigue siendo aceptable estar así. Pero en el panorama móvil, creo que aquí es donde vamos a cambiarlo que se asiente solo en una columna. Entonces solo ve a tu grilla aquí y deshazte de dos columnas, y automáticamente la expandirá hacia abajo así. Y luego para el móvil, claro, no vamos a tener que preocuparnos por eso. Y creo que también, se me olvidó hacer esta parte aquí. Entonces sí, paisaje móvil. Vamos a ajustar esta, dos, deshacernos de una de las columnas, así que el texto todo se sienta abajo. Y puedes ver algo que me olvidé hacer al principio es darle cualquier tipo de relleno a la sección o al contenedor. Entonces solo hazlo rápidamente. Entonces en la sección, lo haremos esta vez, y haremos el 3% tanto a la izquierda como a la derecha. Y ahora a medida que bajamos los diferentes tamaños, todo debería quedar bastante bien. Entonces ese es el panorama móvil, y luego también tenemos móvil. Bien, así que eso es más o menos para este. Y sí, bien, así que eso es prácticamente todo, obviamente. No voy a poner todo el texto diferente en. Solo te estoy enseñando esto a cómo lo harías en realidad. Y este tipo de cosas, de nuevo, son bastante comunes. Entonces ojalá esto sea bastante útil. Bien. Bien. 22. Animaciones e interacciones: Bien. Entonces ojalá, hasta ahora, estés logrando seguir todo esto. Ahora vamos a entrar en interacciones y animaciones. Entonces nuevamente, tocamos muy brevemente sobre esto en mi primer curso pero para este curso. Quería profundizar un poco más y darte algunos casos de uso un poco más utilizables para usar interacciones. Así que vamos a empezar primero el personal creando algunas tarjetas de desplazamiento Así que has visto esto muchas veces dentro de varios sitios web diferentes donde pasas el cursor sobre el mouse, y obtienes algún tipo de interacción con esa tarjeta en particular, ya sea una especie de zoom, o algún tipo de animación cuando pasas Además, a lo largo de este curso e incluyendo este video, también vamos a ver cómo animar muchas animaciones e implementarlas en tus diseños Bien, así que comencemos. 23. TAReta de HOña de animación 1: Bien, entonces para nuestra primera interacción, vamos a tener las tres imágenes aquí, y a medida que pasemos el cursor sobre ellas, van a aparecer más oscuras como la imagen de fondo y luego vamos a tener algunos textos que aparecerán a medida que pasemos el cursor sobre Entonces esto va a ser sorprendentemente una grilla. Entonces vamos a volver a usar animaciones o transiciones para crear este efecto. Entonces a medida que avancemos a lo largo del curso, estas animaciones van a ser cada vez más complejas. Pero pensé que empezaríamos con esto porque esto es bastante común y este tipo de cosas se pueden ajustar como quieras, y es bastante útil tenerlo Bien, así que comencemos. Vamos a recrear esto. Entonces voy a asumir que sabes estructurar esto. Entonces tenemos una sección aquí con 100 V H vertical de altura de ventana gráfica Y luego también, solo he centrado esto usando flex. Otra vez, si no estás seguro de la estructura, ve a ver mi primer curso sobre esto, y eso te ayudará con eso. Bien, entonces esto está dentro de su propio contenedor. Entonces lo que vamos a hacer es dentro de este contenedor otra vez. Vamos a tirar otra grilla. Y esto va a tener tres columnas, y vamos a tener sólo una fila, y eso está todo bien. Y luego para esta grilla, vamos a simplemente sacarla un poco más lejos. Así que es como de unos 100 píxeles por valor de margen. Bien. Y en lugar de llamar a la cuadrícula dos, ahora lo que es el timón, solo lo llamaremos cuadrícula dos. Entonces deberías llamarlo algo más obvio que eso, pero por ahora, esto va a estar bien. Entonces, lo que tenemos que hacer, en primer lugar es lanzar en un div a la primera celda. Y esto va a ser 250 pixeles por valor de altura mínima. Bien. Y vamos a renombrar esto, en realidad. Haremos esto correctamente, y cambiaremos el nombre de la clase de tarjeta llámala fondo de tarjeta. Bien. Y lo que vamos a hacer ahora es darle a esto la imagen de fondo. Entonces hagámoslo. Y el primero que vamos a elegir es este auto de carreras. Y eso va a estar cubriendo también. Ponlo en el centro, y creo que le di un poco de compensación aquí. Entonces, en lugar del 50%, creo que lo hice el 40%, por lo que lo centra ligeramente. Bien, eso está todo bien. Derecha. Entonces este elemento aquí, no vamos a estar aplicando ninguna transición o animación al fondo de la tarjeta. Esto está literalmente aquí solo para tener la imagen adentro. Todo lo demás va a estar por encima. Así que ahora vamos a tener otro bloque div se va a sentar encima de este fondo de la tarjeta. Bien, la forma en que vamos a hacer eso. Lo que tenemos que hacer, en primer lugar, es hacer el fondo de la tarjeta div, que alberga esta imagen. Tenemos que hacerlo relativo. Entonces, en lugar de estático, solo ve a relativo. Y la razón de esto es que ahora vamos a lanzar otro bloque div. Esto va a ser básicamente un envoltorio para todo ese div. Llamaremos a este envoltorio de tarjetas, esto queremos que sea posición absoluta, y queríamos ocupar todo el espacio de esta imagen. La forma de hacerlo es asegurarse de que el envoltorio de tarjetas esté seleccionado. Entonces en lugar de estática, vamos a darle una posición de absoluta, y la vamos a tener en la parte superior derecha, así que la selección de extrema derecha aquí llena, y eso va a ocupar todo el espacio. El elemento que va a activar todas las animaciones es el envoltorio de cartas. Entonces no es el elemento de fondo de la tarjeta o div. Es el envoltorio de tarjetas, que está ocupando todo el espacio del div de fondo de la tarjeta si eso tiene sentido. Si va a tener más sentido a medida que avanzamos. Así que solo asegúrate de tener seleccionado el envoltorio de tarjetas, y luego pasaremos al panel de interacciones aquí y clic en el disparador de elemento y el mouse sobre Entonces, cuando pasamos el cursor sobre, el envoltorio de cartas va a desencadenar esta animación Así que hagámoslo ahora y haremos animación iniciada y haremos una nueva animación cronometrada, y llamaremos a esta tarjeta hover Lo sentimos, Card hover Bien, y entonces podemos empezar. Lo que vamos a hacer inicialmente es conseguir el fondo se oscurezca a medida que lo hacemos. En primer lugar, vamos a dar un color de fondo. Entonces este es el envoltorio de tarjetas en sí, y este será el estado inicial para ello, y queremos que sea completamente transparente tal como lo es actualmente. ¿Bien? Muerto simple. Entonces lo que queremos hacer es al hover in, queremos que sea más oscuro Una vez más, haremos clic en el color de fondo. Y esta vez, vamos a tenerlo flexibilizando y vamos a tener una duración no de 0.2 Esta vez, vamos a elegir un color de fondo de negro. Pero en lugar de estar completamente oscuro, lo vamos a tener, así que es solo un poco transparente. Eso va a funcionar bien. Obviamente, la razón por la que estamos haciendo esto para que podamos ver mejor el texto cuando pasamos el cursor sobre él. Eso va a hacer muy bien. Bien, entonces ahora vamos a echar un vistazo rápido a esto, y ya lo puedes ver. Cuando pasamos el cursor sobre, se oscurece. Cuando nos quitamos el ratón, se queda como está. Ahora, vamos a hacer el hover out en un momento. Pero de lo que también tenemos que hacer es obtener este texto también. Así que justo antes de hacer eso, ahora vamos a aplicar otro div a este envoltorio de tarjetas, y esto va a albergar nuestro texto. Y solo por velocidad, voy a copiar y pegar esto de nuevo, así que es exactamente la misma clase. Entonces es lo mismo para este también. Se va a sentar dentro del Diplock. Y en realidad le daremos un nombre a este bloque div. Entonces el bloque DV, que actualmente alberga aquí este texto, vamos a darle a eso una clase de texto de tarjeta. Y dentro del texto de la tarjeta, en realidad vamos a darle un poco de relleno también. Entonces por el momento, se puede ver en esta versión, el texto, de nuevo, no está justo al borde, y queremos el mismo tipo de cosas. Y la forma de hacerlo es por todos lados, vamos a simplemente aplicar algo así como 20 a 25 pixeles de relleno, y eso me aseguraré el texto no esté del todo al borde. Bien, entonces ahí vamos. Y una vez más, a medida que nos acercamos, de nuevo, se oscurece, pero el texto ya está ahí, lo que por supuesto no queremos Entonces ahora necesitamos obtenerlo para que este texto aparezca al flotar Así que tenemos que asegurarnos el envoltorio de la tarjeta sea seleccionado una vez más. Vuelve a nuestras animaciones, ve a la animación del mouse que ya comenzamos. Haga clic en eso. Y esta vez, con este panel de animaciones abierto, en lugar de tener seleccionado el envoltorio de cartas, necesitamos seleccionar el bloque div, que es en el que se encuentra el texto, que llamamos texto de tarjeta. Entonces esto es muy, muy, muy importante. Y esto básicamente te permite hacer muchas cosas diferentes y te permite aplicar una animación a un elemento que no es el elemento desencadenante. ¿Eso tiene sentido? Entonces con eso, lo que quiero decir es, el elemento disparador, es el envoltorio de tarjetas. Cuando pasemos el cursor sobre esto en cualquier parte de esta plaza, comenzará la animación Si aplicamos la animación a este texto de tarjeta, solo se aplicaría si el mouse estuviera dentro de este bloque div aquí. Si viniéramos desde abajo, significa que no lo haría. Entonces lo que tienes que hacer, es asegurarte de que el disparador es a lo que quieres aplicar la transición. Pero en esta sección aquí, para que se aplique a este texto de tarjeta, entonces hay que seleccionarlo y luego aplicar la transición a ese elemento. Espero que eso tenga sentido. Voy a pasar por eso a medida que avanzamos. Entonces, lo que vamos a hacer ahora, ahora el div de texto de tarjeta que llamamos se selecciona el div de texto de tarjeta que llamamos texto de tarjeta, y ahora vamos a aplicar algo de opacidad a esto Entonces esto va a ir dentro de la primera parte aquí también, que te mostraré en un momento. El estado inicial de esto va a ser completamente transparente. No queremos que en realidad esté ahí inicialmente. Simplemente vamos a arrastrar esto dentro de ese primero para asegurarnos de que estén agrupados. Estos dos tienen que suceder al mismo tiempo. Bien, eso está bien. Entonces lo que podemos hacer es simplemente hacer clic derecho sobre el texto de la tarjeta, duplicarlo, y luego vamos a meter esto dentro de este de aquí. Y también, lo que vamos a hacer ahora, es en lugar de tenerla completamente transparente, vamos a subir completamente la opacidad, así que es completamente visible Entonces básicamente, los dos primeros que tenemos aquí es que el color de fondo es completamente claro. No hay oscurecimiento de la imagen, y el texto de la tarjeta también es completamente claro. En realidad no se puede ver. Y luego cuando comienza la animación, el envoltorio de tarjeta de fondo se oscurece y aparecerá el texto de la tarjeta. Entonces esa es la idea y eso rima. Bien. Entonces el texto del auto, también necesitamos darle algo de flexibilización a esto Entonces vamos a darle en lugar de lineal. Vamos a tener facilidad, y le vamos a dar una duración de 0.2 tal como lo hicimos antes, y eso debería estar completamente bien. Y ahora, si tenemos una vista previa de eso, puedes como que lo veas pasando, pero solo lo guardaremos y lo saldremos, y te mostraré cómo nos vemos actualmente. Entonces el primero que hice antes, se ciernen en la imagen se oscurece y tenemos el texto aparecer A medida que nos quitamos el ratón, desaparece y vuelve a la normalidad. Lo acabamos de hacer ahora, a medida que nos desplazamos hacia adentro, tenemos el encabezado y aparece el texto, pero luego le quitamos un mouse, se puede ver que se queda donde está Entonces, la razón de eso es que en realidad tenemos que alterar el estado Hover out. Entonces solo te voy a mostrar cómo hacer eso ahora. Entonces, si volvemos a la configuración de animación de nuestro envoltorio de tarjetas, entonces actualmente tenemos esto aquí, dice Card hover in Lo que podemos hacer en lugar de comenzar nuestra propia animación hovrot completamente desde cero, lo que puedes hacer es básicamente simplemente hacer clic en esta de aquí Y vamos a duplicarlo. Entonces cuando vayamos a flotar hacia fuera e iniciemos una animación, verás la duplicación aquí, que dice Card hover en dos, que es la que literalmente acabamos de duplicar justo ahí está ahora Y lo que podemos hacer es darle un nombre diferente a eso. En lugar de tarjeta flotar en dos. Vamos a renombrarlo, y vamos a llamarlo Tarjeta hover out. Y luego tendremos que configurarlo ligeramente. Entonces, si vas a la pequeña rueda de ajustes aquí, lo primero que debes hacer es simplemente eliminar estos dos últimos de aquí, así que simplemente deshazte de ellos por completo. Y luego para estos, actualmente están establecidos en un estado inicial. Entonces, lo que tienes que hacer es básicamente simplemente deshacerte de ese estado inicial para ambos, y eso va a ir a mitad de camino para resolver este problema Y entonces lo que tenemos que hacer es ajustar una vez más la flexibilización para asegurarnos de que sea lo mismo Entonces lo que tendremos que hacer es darle una facilidad y eso fue una facilidad de 0.2 Y entonces también queremos tener el envoltorio de tarjetas igual en lugar de 0.5, necesitamos ser 0.2, y necesita ser flexibilizante Y también, dado que eliminamos la parte de la animación, necesitamos asegurarnos de que esto esté dentro de la misma línea de tiempo que el envoltorio de cartas. Así que simplemente haz clic en esto y arrástralo a la misma caja que el envoltorio de la tarjeta. Y entonces si guardamos esto, todo debería funcionar correctamente. Bien, entonces ahora que ya lo hemos hecho, solo asegúrate de que la tarjeta verte esté seleccionada para esta de aquí, y debería funcionar como la anterior. Entonces si tenemos una vista previa de esto ahora, éste, medida que nos desplazamos hacia adentro, obtenemos un fondo oscuro con texto apareciendo Y con nuestro nuevo, acabamos de crear a medida que nos desplazamos hacia adentro, obtenemos un texto apareciendo y flotando, desaparece Así que acabamos de recrear exactamente lo mismo que tenemos en esta Cuando tenemos una vista previa de esto, esto está apareciendo así, porque creo que también le apliqué una vinculación. Eso lo haremos hacia el final. Pero justo antes que nada, lo que tenemos que hacer ahora es simplemente cambiar estas imágenes. Así que nos aseguraremos de copiar y pegar esto a lo largo de la fila. Y cuando hagas esto, asegúrate no solo hacer clic en él y presionar copiar y pegar. La razón es que, es que el envoltorio de cartas está sobre el fondo de la tarjeta div. Entonces, si por defecto, basta con hacer clic en esto y copiar y pegar, no va a hacer nada. Debes asegurarte de seleccionar el fondo de la tarjeta, que es el div general que alberga todo. Para asegurarte de que estás haciendo esto, puedes usar el navegador y asegurarte de que esté seleccionado. Y luego solo puedes copiar y pegar eso. Y una vez más, cuando empieces a cambiar las imágenes en estas, vas a asegurarte de que se selecciona el fondo de la tarjeta. Y antes de comenzar a cambiar las imágenes, necesitamos darle a esto un calificador, así que necesitamos darle una clase combo, así que nos permitirá cambiar la imagen en cada uno individual De lo contrario, si no hicimos esto, si cambiamos una imagen en una de ellas, cambiará en todas ellas. Entonces queremos tener una clase combo para cada caja. Así que voy a darle esta clase combo de uno solo por lo siento dos, y luego podremos ajustar la imagen. Entonces, en lugar de eso, ¿ vamos a dónde estamos? Vamos a tener esta aquí. Y luego para éste, de nuevo, asegurarnos de que se seleccione el div de fondo de la tarjeta, y luego podremos cambiar este a una clase combo de número tres. Eso es muy importante para asegurarnos de que haces eso, y luego podemos cambiar la imagen de nuevo, y luego podemos tener esta. Y ahora tenemos prácticamente exactamente lo mismo en todos estos. Y sólo para que sea exactamente igual, voy a aplicar la diapositiva en transición a. Lo que también hice, aplico la transición a la propia grilla. Entonces, cuando haces clic en Vista previa, se desliza hacia arriba desde la parte inferior. Entonces haremos lo mismo para esta grilla también. Entonces este es un tipo de interacción ligeramente diferente. Esta es una interacción que es especie de entrevista preestablecida y desplazable, se deslizará y estará hacia arriba desde abajo Y eso ahora será lo mismo que éste, ahora adelanto, debería ser exactamente lo mismo. Todos aparecen arriba y todos tienen el mismo tipo de efecto hover Entonces espero que eso haya sido útil, y espero que todo eso tenga sentido. Lo más importante a entender en este momento es lo que desencadena otros elementos en términos de animación. Entonces, lo que hicimos, aplicamos el disparador de la animación al envoltorio de cartas. Lo siento, el envoltorio de tarjetas. El envoltorio de tarjetas, cuando pasamos el cursor sobre él, activó este bloque div de texto de tarjeta Entonces no lo aplicamos al div de texto de la tarjeta. Aplicamos todas las transiciones al envoltorio de tarjetas. Pero cuando estábamos dentro de nuestra sección de animación aquí, acabamos de seleccionar el div que queríamos animar. Entonces eso es muy importante. Si no estás seguro de eso, solo vuelve a ver esto algunas veces Creo que esto es lo que confunde a la gente al principio, es cómo afecto una cosa por otra. Y la forma más sencilla que puedo explicarlo es que quieres básicamente tener un elemento gatillo, que es el envoltorio de cartas en nuestro caso. Entonces cuando llegues a nuestro panel de animación, puedes seleccionar cualquier cosa dentro este dibloque aquí y animarlo por Pero el disparador siempre será el hover del envoltorio de tarjetas Bien, tan esperanzado que tiene sentido. lo agradezco un poco al principio, pero una vez que te hayas acostumbrado a esa idea, va a hacer que todo lo demás sea mucho más fácil de entender. Bien, así que eso prácticamente lo envuelve para este. El siguiente que vamos a hacer va a ser más o menos lo mismo esto aparte de más que este tipo de aparecer con opacidad, vamos a hacer que se deslice por la izquierda 24. TAReta de animación 2 2: Bien, entonces el siguiente, tenemos el mismo tipo de cosas, pero vamos a hacer una ligera variación. Entonces, en lugar de que el texto solo aparezca de repente y el fondo se oscurezca, vamos a hacer algo un poco más interesante. Y cuando hayamos terminado, vamos a tener una diapositiva de texto desde la izquierda Bien, entonces para hacer esto, obviamente vas a haber creado este primero. Entonces todas las animaciones que voy a hacer, de aquí en adelante, voy a estar usando este tipo de tres ejemplos. Entonces comencemos. Entonces esto es bastante fácil. Sólo vamos a alterar básicamente el que ya hemos hecho. Así que vaya al envoltorio de tarjetas, que ya tiene la interacción encendida y vaya a la pestaña de interacciones aquí y haga clic en el hover in y luego asegúrese de que el div envoltorio de cartas esté seleccionado Y lo que vamos a hacer es entonces sumar movimiento a esto. Entonces, si haces clic en mover, asegúrate de que esto vuelva a estar, agrupado dentro de esta primera sección aquí. Y lo que vamos a hacer es tener ese conjunto como estado inicial, y vamos a moverlo justo fuera de marco de este dibloque. Entonces lo moveremos. 394. No puedo hacer frente a eso, así que eso tendrá que ser -400 mi TOC entra en acción. Bien, está bien. Entonces -400 píxeles se van a establecer en el estado inicial. Entonces lo que podemos hacer es duplicar eso otra vez, y luego arrastrar esto a esta colección aquí. Y esta vez, se va a poner de nuevo a cero. Entonces actualmente, está en -400. Asegúrese de que el estado inicial no esté seleccionado y simplemente haga clic en cero, y eso lo va a empujar de nuevo en su lugar. Y queremos que la flexibilización de eso solo se establezca para facilitar y tendremos la duración de 0.2, al igual que los otros que tenemos Entonces todo eso debería estar bien. Bien, genial. Entonces ese es el primer bit, hecho. Yo sólo te voy a mostrar eso. Aún no hemos hecho la sección out, así que te lo mostraré en un momento. Sólo para probar lo que hemos hecho hasta ahora. A medida que flotamos hacia adentro, se dispara, pero tenemos algo raro sucediendo Yo si viste eso, es como hacer algo extraño. Y la razón es que, porque tenemos algo saliendo de esta sección aquí, en realidad no queremos que aparezca antes de que llegue al envoltorio de tarjetas en sí mismo. Entonces te mostraré la manera de sortear esto. Entonces, en el envoltorio de tarjetas real, lo que vamos a hacer de nuevo al panel CSS aquí, asegúrese de que esté configurado para desbordar oculto. Y de esta manera, no vas a ver este texto volar desde fuera de este tipo de marco. Entonces ahora si lo hacemos, verás solo lo verás dentro de esta plaza. Bien, ¿si eso tiene sentido? Ahora, obviamente, ahora tenemos que establecer la configuración de hover out para que tenga sentido Bien, ahora agreguemos la animación hover out. Así que de nuevo, asegúrate de que el envoltorio de la tarjeta esté seleccionado. Ve a éste, y luego en el hover out. Sólo vamos a agregar la animación para el texto de la tarjeta DVLock Entonces voy a ir en el plus, haga clic en Mover. Y éste era -400, si no recuerdo bien. Entonces en este de aquí, lo vamos a tener como -400 píxeles, y eso va a sacarlo de nuevo. Puede que en realidad no haga eso para mostrarte, pero va a hacerlo en la propia animación. Asegúrate de que esté configurado en 0.2. Y lo configuraremos para que sea más fácil y también aseguraremos de que esté dentro de este grupo también. De lo contrario, se va a quedar un poco Janke. Anky una palabra. Lo es ahora. Bien, así que guarda eso. Y ahora, deberías ver cuando demos una vista previa esto que todos tienen el mismo tipo de interacción, todos se deslizan dentro y fuera, y ese es más o menos el final de esa. Bien, entonces ojalá que todo tuviera sentido. El siguiente que vamos a hacer, también vamos a tener algunas otras cosas aquí, y tal vez vamos a agregar un borde al fondo también, y haremos algo más interesante esto también. 25. TAReta de HOña 3: Bien, entonces ahora tenemos una ligera variante de lo que ya hemos hecho. Entonces, obviamente, el que acabamos hacer es donde tenemos el texto deslizándose desde la izquierda entrando en la caja. Esta vez, tenemos algo similar, así que va a usar la mayoría de las mismas propiedades aparte de le acabo de dar un poco de color solo para que sea más emocionante. Y también tenemos una línea, que también está disparando desde la izquierda también. Bien, entonces obviamente, necesitarás haber hecho el anterior para que esto realmente funcione. Y todo lo que realmente vamos a hacer es cambiar el color de fondo. Y obviamente, vamos a sumar esta línea en, que va a ser un bloque div. Bien, así que comencemos. Entonces, antes que nada, tenemos que sumar esta inmersión, eso va a actuar como nuestra línea. Entonces, lo que haremos es simplemente lanzar un div en el envoltorio de cartas. Vamos a darle algo de altura al dvlock. Y además, le vamos a dar un nombre muy creativamente de línea Y va a tener una altura de unos cinco píxeles. Y también le voy a dar un color de fondo, así que va a ser blanco en este caso. Y también queremos que se pegue al fondo de este envoltorio de tarjetas. Entonces lo que vamos a hacer es simplemente ir a nuestra posición aquí. Y en lugar de estática va a ser absoluta, y vamos a ponerla al fondo. Entonces, aunque este envoltorio de tarjetas ya es absoluto, todavía va a funcionar y se va a pegar al fondo del envoltorio de tarjetas. Bien, así que eso está bien. Y obviamente, entonces necesitamos animar esto entrando de izquierda a derecha, y vamos a hacerlo prácticamente de la misma manera que hicimos para el texto de la tarjeta a div también Bien, entonces antes que nada, asegúrate de que el envoltorio de la tarjeta esté seleccionado. Vaya a su panel de interacciones aquí. Haga clic en la interacción del mouse hover que ya tenemos. Y entonces lo que vas a hacer es dar click sobre esto. Ahora con este panel abierto, vas a seleccionar el div de línea que acabamos de crear, y luego vamos a agregar una animación para esto, que va a ser movida una vez más. Voy a hacer que coincida con la otra. Entonces, antes que nada, tenemos que arrastrarlo a esta colección de tres aquí, así que ahora se asienta dentro de todos ellos, así que ahora es una colección de cuatro. Vamos a tener eso como estado inicial, y eso va a ser -400 así que es lo mismo que el texto que vuela también Entonces eso es -400 píxeles. Entonces está fuera del elemento aquí, y eso va a estar bien. Y luego simplemente volveremos a la línea y luego lo duplicaremos y lo arrastraremos a esta colección aquí. Y esta vez, queremos asegurarnos de que no se aplique el estado inicial, probablemente no sea por defecto, sino solo asegurarnos de que no lo sea. Y entonces todo lo que puedes hacer es cero esto así que vuelve a su lugar, y también le vamos a aplicar algo de flexibilización Y también lo haremos un poco más largo. No del todo 0.5. Nosotros lo lograremos. No, lo haremos. Lo mantendremos 0.5, en realidad. Eso vamos a hacer. Entonces, si tenemos una vista previa de esto, 0.5 es demasiado largo. Hagamos 0.4. De hecho, he olvidado lo que hice. Estoy bastante seguro de que era 0.4. Bien, así que eso está bien. También necesitamos cambiar el color de fondo también. Entonces esto era rojo. Entonces, permítanme volver a éste solo para ver qué hice por esto. Un momento. Digamos lo que hicimos antes que nada. Regresa a esta. Sólo voy a comprobar lo que hicimos. Así que el color de fondo. Simplemente deslizaremos este desde aquí. Obviamente, puedes hacer esto lo que quieras. Sólo voy a tratar de mantenerlo igual solo así que obviamente, se parece a lo que hice antes. Entonces eso está todo bien. Bien, volveremos a esta. Y entonces sólo voy a cambiar este color de fondo que tenemos aquí. Entonces el color de fondo para el envoltorio de tarjetas va a ser más bien que lo que es actualmente. Vamos a tener este tipo de color listo. Y tenemos que retroceder un poco también en la capacidad. Bien, así que todo está bien. Entonces todo lo que tenemos que hacer ahora es en la tarjeta hover out es simplemente básicamente agregar este elemento extra que tenemos Obviamente vamos a duplicar esta línea y copiarla y pegarla en las nuevas cajas en un momento. Pero antes que nada, seleccionaremos la línea que tenemos. Después agregaremos la animación de movimiento. Asegúrate una vez más de que se asiente dentro de esta colección, y luego lo vamos a tener ya que va a ser 0.4 y también queremos asegurarnos de que esté configurado de nuevo en -400 Entonces eso es aquí abajo. Bien, entonces ahora con eso guardado, deberíamos tener exactamente lo que queremos. Entonces debería verse así. Y ahí vamos. Entonces, como pueden ver, hay un ligero retraso en la línea. Yo como que quería eso solo para que sepas, le da algo un poco más interesante. Ahora, obviamente, en estos aunque, no tenemos exactamente la misma animación porque no hemos agregado esta línea en. Tenemos el color, que ha cambiado. Pero como agregamos algo a esto, en realidad no lo agregué a estos de aquí. Entonces todo lo que tenemos que hacer de manera muy simple es simplemente copiar y pegar esta línea, pegarla en el propio envoltorio de tarjetas. Automáticamente se va a poner al fondo porque todas las demás clases son iguales de todos modos. Y ahora si tenemos una vista previa de esto, deberíamos tener exactamente lo mismo para todos y cada uno. 26. TAReta de HOud 4: Bien, así que vamos a empezar de cero otra vez con este porque va a ser un poco diferente. Entonces el primero en el que la imagen se está desvaneciendo en cierto modo. Esta vez, vamos a tener un efecto de zoom de imagen junto con algunas otras cosas que están pasando aquí. Entonces, a medida que pasamos el cursor sobre, la imagen es una especie de acercar, tenemos un borde así como entra, y al igual que antes, el texto se está desvaneciendo Bien, así que comencemos a hacer esto. Entonces ya tengo otra grilla aquí. Entonces, lo que vamos a hacer es simplemente volver sobre nuestros pasos sobre lo que he hecho anteriormente Entonces dentro de esta grilla, voy a hacer pop en un div, y vamos a llamar a esto para llamarlo tarjeta. Y esto va a tener una altura mínima de 250 pixeles. Bien. Y entonces lo que vamos a hacer es arrojar una imagen. Entonces esta no será una imagen de fondo. En realidad solo será una imagen dentro de este bloque div a la que has llamado tarjeta. Entonces hagámoslo ahora y lanzaremos el primero y elegiremos el auto de carreras. Y lo que también haremos es hacer esto 100% del ancho y 100% de la altura también. Entonces de esa manera, ocupa toda la extensión de eso, y el ajuste, puedes elegir lo que quieras para eso, pero yo voy a ir con tapadera por ahora Bien, bien. Entonces esa es la primera parte hecha. También en el elemento de la tarjeta en sí, también vamos a dar un borde. Esto va a formar parte de la animación más adelante. Entonces vamos a tener una frontera, que será blanca. Voy a hacer eso unos cinco pixeles. Entonces eso está bien por ahora. Bien, entonces la primera parte hecha. Oh, perdón, una cosa que olvidé mencionar en el elemento de la tarjeta en sí, lugar de que ser estático en realidad se va a establecer en relativo porque lo que vamos a hacer ahora es tirar en un bloque div, que albergará el texto que tenemos aquí. Así que al lado del plan, asegurándonos que tenemos los elementos de la tarjeta seleccionados. Entonces vamos a agregar un DVLock. Y este bloque deb se va a poner en posición absoluta, y eso va a ser a esta opción aquí, que está llena, y que ahora está ocupando toda la extensión de esta sección aquí porque el elemento de carta está configurado Entonces eso es muy importante. Necesitas tener ese conjunto en relativo para que el bloque deb haga esto básicamente Bien, así que eso está bien. Lo que haremos ahora es simplemente copiar y pegar nuestro texto. Voy a copiarlo y pegarlo desde aquí. Pero obviamente, necesitas simplemente Obviamente, tirar en un encabezado y tirar en un bloque de texto, creo que he usado. Así que todo está bien. Entonces esto se está lanzando al bloque div, que deberíamos nombrar en realidad. Esto será renombrar esto y lo llamaremos aros de tarjeta. Re nombra Texto de la tarjeta. Bien. Y ese dip block, vamos a darle un poco de relleno porque obviamente de momento, esto es justo al borde que no queremos. Entonces le daremos 25 píxeles de relleno, así que coincide con el que he hecho antes. Así que eso está todo bien. Así que puedes ver, estamos prácticamente ahí con una especie de construcción de la primera parte, y luego tenemos que empezar a hacer las interacciones. Entonces vamos a darle una vuelta a esto. Entonces, obviamente, lo que queremos hacer es que queremos que aparezca la frontera. También queremos que la imagen se acerque, y también queremos que el texto, ya sabes, aparezca también desde una opacidad cero Bien, así que eso está bien. Entonces lo primero es lo primero, comencemos asegurándonos de que nuestro elemento de tarjeta esté seleccionado porque es la carta, que va a ser el detonante de la animación. Bien, así que subamos hasta aquí, y comenzaremos con el mouse hover y comenzaremos una animación Y a esto lo llamaremos. llamaremos hover in. Eso está todo bien. Bien, entonces con eso iniciado, ya podemos empezar a hacer todas las diferentes cosas que necesitamos. Entonces lo que creo que vamos a hacer antes que nada, es conseguir esta imagen a Zoom, en primer lugar. De hecho, no, señor, ¿sabe qué? De hecho vamos a hacer aparecer la frontera. Entonces lo primero, pasemos al color del borde. Y habrá que seleccionar el estado inicial , y vamos a tenerlo. Por lo que no hay capacidad cero. Así que puedes ver tan pronto como lo haga, en realidad lo cambió aquí, así que ahora ya no lo puedes ver. Bien, eso es lo primero que tenemos que hacer. Y a partir de ahí, vamos a seleccionar la imagen después. Hagámoslo ahora. Y así para la imagen, lo que vamos a hacer es que vamos a tener esta escala. Así que eso será escalado. El estado inicial solo se establecerá en uno. Entonces, básicamente, eso será como es esencialmente. Así que todo está bien. Y entonces también lo que queremos hacer es darle al bloque div, El bloque textivo de la tarjeta, tenemos que darle a esto algo de opacidad, así aparece cuando flotamos adentro Entonces hagámoslo también. Entonces vamos a darle opacidad a esto. Y porque podríamos establecer esto a elementos de texto individuales. Entonces, si quisieras tener este tipo de uno saliendo primero, seguido de otro , tendrías que hacer estas emaciones el elemento texto Lo que voy a hacer, sin embargo, es que estoy seleccionando el div de cartas, que significa que todo dentro él va a tener la misma animación. Básicamente, lo que quiero decir con eso es que ambos elementos de texto van a pasar de cero pacidad a opacidad completa al mismo tiempo porque están emparejando elemento, que es el div de texto de la tarjeta va a tener aplicada la animación Espero que eso tenga sentido. Bien. Bueno, yo solo lo haré y luego podrás ver si has logrado seguirlo. Bien, entonces vamos a ir por la opacidad y el estado inicial va a ser cero Para que puedan ver en cuanto lo esté haciendo, ambos elementos de texto están desapareciendo porque están dentro de este elemento de texto de tarjeta, y eso es a lo que estamos aplicando la transición. Ahí vamos. Eso va a quedar completamente en blanco. Bien, hasta ahora tan bien. Eso está bien. Y luego, a continuación, vamos a necesitar empezar a obtener un color diferente cuando también coloquemos el cursor Así que de nuevo, una vez más, el texto de la tarjeta div, vamos a aplicar un color de fondo a, y el estado inicial va a ser de nuevo, nada va a ser completamente transparente. Pero entonces ya podemos empezar a hacer las versiones alternas de todas estas. Entonces, antes que nada, lo que vamos a hacer es arrastrar todos estos para que definitivamente estén anidados uno dentro del otro, lo que en este momento se puede ver, todos están dentro de esta caja juntos Así que todo está bien. Entonces lo que podemos hacer ahora es empezar a duplicar todos estos, perdón Entonces antes que nada, vamos a duplicar la tarjeta. Entonces vamos a hacer eso primero. En lugar ser el estado inicial, que no se debe seleccionar, eso va a estar desmarcado, y va a ser 0.5 De hecho, vamos a mantenerlo 0.5 segundos porque en realidad funciona bastante bien con ese tipo de marco de tiempo. Y lo vamos a tener todo flexibilizando como de costumbre. Así que todo está bien. Y en lugar de transparente, va a estar lleno, y va a ser blanco también. Bien, primero hacia abajo, luego duplicaremos el texto de la tarjeta, arrastraremos eso debajo de esta, así es todo lo mismo. Aún 0.5, eso también va a estar flexibilizando. Eso es todo bueno y eso en lugar de cero capacidad va a estar lleno. Empareja más texto de la tarjeta, duplica esto y luego arrástralo hacia abajo debajo de este. Una vez más, eso va a ser con flexibilización y eso va a tener un color de fondo, lo que hace básicamente negro pero retrocederemos un poco la opacidad Se puede ver mejor el texto. Así que todo está bien. Después el último, el escalado de la imagen. Vamos a duplicar esto. Otra vez, arrastra eso a esto. No importa en qué orden estén dentro de la caja contenida, pero sí necesitas asegurarte de que siempre has contenido en la misma caja juntos, para que apliquen las animaciones al mismo tiempo. Bien, sí, eso va a ser escalado ahora, en lugar de uno, tenemos que configurarlo en algo así como 1.2 Cuando golpee enter, vas a ver la imagen expandirse. En realidad no queremos esto, y voy a hacer algo que va a corregir esto, que básicamente es un error en este momento. Pero vamos a simplemente hacer clic en Guardar por ahora porque eso es prácticamente todo configurado como debería ser. Aparte de que tenemos que hacerlo fácil también. Bien, entonces estamos ahora, de hecho, todo bien. Entonces solo te voy a mostrar el problema que tenemos en este momento que tenemos que arreglar. Cuando tenemos una vista previa de esto, como esta, donde la imagen se está acercando, pero no se está haciendo más grande como tal Este es cada vez más grande, lo que obviamente no queremos, y hay una manera muy sencilla de arreglarlo. Lo que todos tenemos que hacer, está en el elemento card, que es el div principal que es la vivienda, todo lo que está pasando actualmente. Esto necesita ser configurado en nuestro panel CSS para desbordar oculto. Y ahora, cuando ocurra la animación, no va a hacer lo que hacía antes, que es como expandirse fuera del bloque div, si eso tiene sentido. Bien, así que está bien. También nos aseguraremos de haber seleccionado todo correctamente aquí. Así que todo está bien. Obviamente, tenemos que hacer el hover out en solo un momento Pero vamos a ver cómo se ve inicialmente. Así que ahí vamos, y eso es más o menos perfecto. Ahora obviamente, por el momento, no hay una función de hover outt Así que muy rápidamente necesitamos simplemente conseguir que eso cambie. Bien, entonces para la animación hovert, vamos a hacerlo ahora Así que asegúrate de que la tarjeta esté seleccionada. Ve a nuestras animaciones y en la opción hover out, puedes ver que aún no tenemos uno de hover outt creado Lo que vamos a hacer es duplicar el hover en uno. Lo siento. Así que simplemente duplique éste, y luego vamos a renombrarlo hover out. Así que ahora solo renombraremos hover out. Y luego podemos seleccionarlo, y luego podremos ajustar esto nuevamente. Así que de nuevo, al igual que los anteriores, vamos a tener que eliminar algunos de estos, así que eliminaremos todos estos . No los necesitamos. Ahora bien, estos actualmente están todos puestos al estado inicial. Necesitas desmarcar esto para todos ellos. Y luego tenemos que asegurarnos de que estén todos juntos para que veas, actualmente, todos están en diferentes momentos. Tenemos que asegurarnos de que todos estén al mismo tiempo. Pero justo antes de hacer eso, volvamos y asegurémonos de que todo esté listo como debería ser, tendremos que volver a aplicar la flexibilización a cada uno de estos ahora que lo hemos metido con Entonces nuevamente, cada uno de ellos necesita estar flexibilizando. Oh, lo siento. Uno más. Bien, así que eso es todo fácil. Y entonces tenemos que simplemente arrastrarlos a todos la misma colección, para que todo lo haga al mismo tiempo. Bien, entonces eso ahora debería ser perfecto. Entonces, si echamos un vistazo a esto, igual que ese, éste hace exactamente lo mismo flotar hacia fuera, también se cierne hacia fuera Así que de nuevo, creo que una especie de punto medio segundo para este tipo de animación funciona bastante bien con el efecto de zoom Entonces sí, eso es más o menos lo completó. Obviamente, lo que tenemos que hacer ahora es simplemente conseguir los otros en dos. Entonces hagámoslo. Y obviamente, la forma más fácil de hacerlo es seleccionar la tarjeta. Y luego literalmente solo copia y pega el dibloque a lo largo. Y todo lo que tendrás que hacer es cambiar las imágenes. Entonces hagámoslo, vamos a un navegante. Y así para éste de aquí, perdón, por éste. Simplemente haga clic en la rueda ahí. Coloca la imagen, y vamos a tener esta. El siguiente a lo largo. Solo asegúrate de que la imagen esté seleccionada, donde esta ahora esta. Mira eso y luego tendremos éste. Bien. Y ahí estamos. Hemos recreado un efecto hover donde la imagen se acerca, el borde aparece al igual que el texto 27. TAReta de aguar 5 de animación 5: Bien, entonces ahora tenemos, de nuevo, un tipo similar de armado donde tenemos tres cartas, y cuando flotamos esta vez, algunas cosas cambian Así se puede ver que a medida que pasamos el cursor sobre, tenemos una especie de línea que se está expandiendo en el lado izquierdo, y tenemos algo de texto y un botón que aparece también Entonces esto es de lo que vamos a hacer, también tenemos un cambio de color en el fondo. Bien, así que comencemos a hacer esto. Entonces esto es un poco más avanzado. Tenemos bastantes animaciones diferentes sucediendo aquí. Entonces voy a pasar por esto tan lentamente como pueda y explicaré lo que estoy haciendo como lo hago. Bien, entonces estacioné en otra parrilla, y qué haremos. En primer lugar, se lanza en un div. Ahora, al igual que los anteriores que hemos hecho, básicamente vamos a darle estilo a uno de estos y luego copiarlos y pegarlos cambiando la imagen al final. Esa es probablemente la forma más rápida de hacerlo. Bien, entonces este bloque div, vamos a llamar solo lo llamaremos contenido de tarjeta. No, lo siento, no el contenido de la tarjeta. Sólo lo llamaremos base de tarjetas. Porque eso va a albergar nuestra imagen. El dibloque para esto va a necesitar tener alguna altura definida Entonces para esto, vamos a tener una altura mínima de 250 pixeles. Y luego vamos a tirar una imagen. Y en este caso, va a ser este auto de carreras amarillo. La imagen también necesita tener algún tamaño definido. Entonces vamos a tener un ancho del 100%. Eso es el 100% del elemento en el que se asienta y también queremos la altura también al 100%, y de esta manera llena todo el espacio. Bien, entonces esa es la primera parte que se hace ahora, tenemos que empezar a tirar sobre nuestro contenido. Y la forma en que vamos a hacer eso es poniendo otro bloque div dentro del div base de cartas. Entonces, en lugar de ponerla encima de la imagen, obviamente no puedes simplemente hacer eso, la hará aparecer abajo. La forma de hacer esto es poner otro div y tener eso posicionado absoluto. Pero justo antes de hacer eso, hay que asegurarse de que el div base de cartas, que es el que nos lanzamos para empezar, que actualmente alberga esta imagen. La base de cartas necesita posicionarse relativa porque entonces cuando lanzamos sobre un div Inicialmente, va a aparecer aquí abajo, pero lo que queremos es hacer que esta posición dibloque sea absoluta Entonces eso es lo que vamos a hacer. Pero justo antes de hacer eso, vamos a darle un nombre a este bloque div y este será el contenido de la tarjeta. Vuelvo a detectar eso mal. Mi micrófono está frente a mi cara. No puedo ver tan bien. Esa es mi excusa de todos modos. Bien, auto contenido dos, tres, ya que he hecho algunos otros. Contenido del auto dos. Nosotros lo llamaremos. Bien esto tiene que ser posición absoluta. Sin relleno. Tiene que ser más que estático, tiene que ser absoluto. Luego seleccionaremos este aquí, que dice completo y que ahora cubrirá sobre la imagen y también sobre el dip buck original. Entonces ahora podemos empezar a arrojar todas las cosas que necesitamos para esto. Eso está todo bien. Sólo hay una cosa que creo que hice en esta. Creo que hice la imagen. Vamos a ver qué hemos hecho con esto. Por lo que la imagen también necesita estar cubriendo también. Entonces vamos a hacer eso y eso está bien. Y si quieres puedes ordenar de posicionar esto un poco diferente. Entonces voy a hacerlo para que el auto esté un poco más siempre a este lado. Mi quizá no tanto como eso, tal vez una especie de 10% o 20% más. Sí, está bien. Bien, entonces 20% a la izquierda y luego 50% arriba, está bien. Bien, así que estamos todos bien. Ahora, empecemos a arrojar las cosas que necesitamos. Ahora bien, lo que voy a hacer solo para que tenga sentido y tenga el mismo tipo de aspecto y sensación de éste. Sólo voy a copiar todas estas clases. Lo que harías, por supuesto, inicialmente es lanzar en un rubro para este de aquí. Entonces lo tengo es una H tres. Y obviamente, esto es en realidad un bloque de texto, y esto es un botón. Solo necesitas darle estilo a estos como quieras. Otra vez, no tienes que hacer que el tuyo se vea igual que el mío. Así que solo por velocidad, en realidad voy a reutilizar estos. Así que voy a copiar y pegar éste en. Lo mismo para el cuadro de texto también, y lo mismo para el botón. Bien, para que veas que tenemos un problema. A diferencia de este de aquí, hay un ligero hueco donde tenemos el texto el forro y luego hay un hueco. Entonces tenemos esta línea que pondremos en un momento. El tema, sin embargo, por supuesto, es que no queremos tenerlo hasta el borde. Entonces lo que tenemos que hacer es en el contenido de la tarjeta dos div, que he llamado. Solo asegúrate de tener algo de relleno en eso. Entonces eso es lo que vamos a hacer. Asegúrate de que esté seleccionado y luego lo haremos en todos los lados, mantén presionada la tecla shift y luego haremos algo como 20 a 25 píxeles de relleno por completo, y eso te dará la ligera brecha. Bien, así que ya estamos más o menos ahí. Sin embargo, lo único que nos falta es esta línea. Y en realidad, en lugar de copiar y pegar eso en realidad te voy a mostrar cómo hacer eso Entonces lo que vamos a hacer es en el contenido de la tarjeta, agregaremos un dibloque Esto va a tener una altura mínima de 250 píxeles Entonces va a ser bastante grande. El ancho sólo va a ser algo así como cinco píxeles. Entonces es bastante pequeño. Ahora obviamente, no está en el lugar correcto, obviamente, tenemos que tratar de encontrar una manera de conseguir eso por ahí. Entonces, mientras nos doy una llamada de antecedentes, piensa un poco en cómo podrías hacer esto. Entonces se llama Di seis por ahora, lo que no queremos. Así que vamos a cambiar el nombre de esto y sólo vamos a renombrarlo como línea. Y le daremos un color de fondo blanco para que coincida con el otro. ¿Cómo crees que hacemos esto? Bueno, igual que otras cosas, cuando quieres que algo se pegue a una determinada posición, vas a usar la posición absoluta. Esta línea necesita pegarse a este lado izquierdo. La forma en que vamos a hacer eso, es por más que tenerla posición estática, que es actualmente, hacerla posición absoluta. Entonces si haces clic en este de aquí, se va a pegar a un lado. Ahí estás. Ahora prácticamente tenemos todo lo que necesitamos para empezar a hacer esta animación. Y se puede ver cuando pasamos el cursor sobre esto, nuevo, están sucediendo bastantes cosas diferentes Se puede ver en su estado inicial que el fondo en realidad es ligeramente oscuro. Y la razón por la que lo he hecho es para que realmente puedas ver el texto. Ahora bien, para este, no sería gran cosa porque está en el fondo negro de todos modos. Pero para ésta y ésta, las imágenes son un poco más claras en la parte superior, particularmente aquí arriba, no habrías podido leer el texto blanco. Así que también necesitamos obtener una superposición ligeramente oscura sobre el estado inicial. Y obviamente en Tener se va a poner rojo rojo. Bien, así que comencemos con la animación. Entonces el disparador para la animación va a ser la base de cartas como la llamamos. Obviamente, puedes llamar a esto como quieras llamarlo, pero nosotros lo llamamos base de tarjetas, que es solo el dip inicial que lanzamos. Y este va a ser el detonante de todas las animaciones. Así que de nuevo, es importante que obtengas el elemento correcto que desencadena las animaciones. Y para éste, es la base de cartas. Así que ve a tu panel de interacciones aquí. Y entonces lo que vamos a hacer es en go on mouse hover. Bien, y luego empezaremos una animación. Y llamaremos a esto hover in. Bien, entonces lo que vamos a hacer inicialmente es tener la imagen ligeramente escalada hacia adentro un poco para que cuando la movemos hacia un lado, realidad haya algo de espacio para que la imagen realmente haga eso Entonces eso es lo primero que vamos a hacer, y eso solo va a estar en su estado inicial desde el principio. Así que justo antes de hacer eso, sin embargo, en realidad vamos a asegurarnos de que la base de la tarjeta esté oculta por desbordamiento. Y la razón de eso es que cuando lo escalemos, en realidad va a salir del bloque Did. De hecho, en realidad solo te voy a mostrar eso solo para mostrarte lo que pasaría si lo hiciéramos. Entonces, en realidad hagamos eso primero. Entonces, para la imagen, asegúrate de que esté seleccionada. Vamos a escalarlo. Y lo vamos a tener como algo así como 1.1. De nuevo, puedes elegir lo que quieras hacer. Voy a elegir 1.1. Ya puedes ver, la imagen ahora sobresale del dibloque, que en realidad no queremos En sólo un momento, vamos a volver y corregir esto. Entonces queremos este conjunto al estado inicial, y eso va a estar bien. Solo para solucionar este problema que mencioné hace apenas un momento, simplemente lo guardaremos rápidamente y volveremos a esto en un momento. Entonces la base de la tarjeta, si volvemos a nuestro panel de estilo está actualmente configurado para desbordar visible. Entonces lo que realmente queremos es tenerlo como desbordamiento oculto. Esta vez, cuando volvamos al panel de animaciones por aquí, verás que la imagen ya no sobresale del dibloque Entonces eso es muy importante para que eso se vea correcto. Bien, entonces a continuación, lo que tenemos que hacer es empezar afectar todas las interacciones para los estados iniciales. Obviamente, el estado inicial inicialmente para la imagen se escala en En realidad no vamos a cambiar eso en absoluto. Eso va a quedarse ahí. Bien, así que lo siguiente que tenemos que hacer es conseguir esto tenga algún tipo de superposición ligeramente oscura. Bien, entonces entonces en el div de contenido de la tarjeta, que es de nuevo, vivienda, todo este texto y lo que tienes. Eso va a tener el color de fondo ligeramente oscuro. Entonces hagámoslo. Así que asegúrate de que el contenido de la tarjeta dos esté seleccionado o como lo hayas llamado. Y entonces vamos a darle a esto un color de fondo, y va a ser negro. Pero solo queremos retroceder un poco esto para que podamos realmente ver a través hasta cierto punto. Entonces eso va a estar bastante bien, creo. Eso es bueno. Y este va a ser el estado inicial. Entonces, una vez que lo has hecho, todo agrupa esto. Eso está bien. Entonces puedes ver ahora si solo tenemos una vista previa de esto, ya tiene el color un poco más oscuro. De hecho, esta versión, en realidad hice un poco más oscura aún, pero esto es probablemente aceptable. Bien, así que eso está bien. En realidad, no, lo haremos un poco más oscuro. Sólo un poquito. Solo volvamos a respaldar esa espalda. Eso está bien. Algo así como 50. Bien, así que está bien. Y luego vamos a expandir esta línea hacia afuera. Entonces en la animación en el haber terminado, no se puede ver, y luego se expande hacia afuera desde el medio Entonces eso es lo que también vamos a hacer. Entonces con la línea seleccionada, vamos hasta aquí, y la vamos a tener como escala. Ahora, por defecto, estas dos opciones aquí para escalar en los ejes x e y, vienen como bloqueadas juntas. En realidad no queremos eso. Entonces haz clic aquí en este botón para desbloquearlo, porque lo que queremos hacer es en realidad hacer que esto no sea completamente visible. Y entonces también vamos a establecer eso como su estado inicial también. Entonces, para empezar, nunca lo vas a ver. Así que todo está bien. Y nuevamente, estos siguen agrupados. Y ahora podemos empezar a afectar el bloque de texto tres y el botón. Realmente debería haberle llamado algo más que el bloque de texto tres, pero lo que sea. Bien, entonces ya sabes la importancia de nombrar las cosas. Bien, pero de todas formas, hagamos eso, haga clic en el bloque de texto, y esta vez, vamos a tener esto. Esto en realidad va a hacer dos cosas. Esto va a ser no visible para empezar, y también va a moverse ligeramente hacia arriba. Ahora, yo sugeriría hacer primero la opción de mudanza porque si la haces invisible, obviamente, tratando de llegar a moverte, no podrás ver dónde está. Así que haz clic en Mover inicialmente. Nuevamente, este será el estado inicial. Y vamos a simplemente moverlo sobre el eje y, algo así como algo así como menos diez estaría bien. Entonces hagámoslo. Menos diez. Guárdalo a números redondos. Lo siento, no menos diez , solo serían diez. Bien. Entonces diez hace que vaya un poco más bajo de lo que es actualmente. Eso está bien. Entonces en el botón, vamos a hacer algo muy parecido. Vamos a tenerlo como una jugada. Será el estado inicial, y ese va a ser diez también en el eje y. Entonces hagámoslo. Y ahora se puede ver que el botón ha ido un poco más abajo. Bien, entonces las dos últimas cosas que tenemos que hacer, las tres últimas cosas que tenemos que hacer es también el color de fondo va a cambiar es entonces conseguir que esto tenga una capacidad donde no sea visible para empezar y luego se haga visible más adelante. Pero hagamos primero la capacidad. Da click en la pacidad Este será el estado inicial, y obviamente va a ser simplemente no visible Y lo mismo también será cierto para el botón. Asegúrate de seleccionar todos estos a medida que lo haces, capacidad y luego deshazte de eso por completo. Y entonces ese será también el estado inicial. Entonces necesitamos establecer un estado inicial para la propia imagen porque en HVO, vamos a hacer que la imagen se mueva un poco Entonces lo que tenemos que hacer es asegurarnos de que la imagen esté seleccionada dentro del contenido de la tarjeta, así que solo selecciona la imagen y luego vamos a afectar otra transición aquí y la tendremos puesta para que se mueva. Y su estado inicial será de cero píxeles, por lo que estará exactamente donde está ahora mismo. Pero entonces cuando empecemos a pasar a Hov, ahí es cuando en realidad vamos a cambiar esto ligeramente Bien, entonces ahora estamos, hecho, hechos con todos los estados iniciales. Bien, entonces lo guardaremos, así que está bien. Entonces lo siguiente, entonces, lo que tenemos que hacer es empezar a alterar todo esto en el estado Haves Ahora, obviamente, tenemos bastante aquí en cuanto a animaciones. Ahora bien, no quieres tener que empezar a hacer estos individualmente uno a la vez. Hay una manera mucho más rápida de hacerlo. Entonces lo que vamos a hacer es hacer clic en el de abajo aquí, que es nuestro botón. Mantenga pulsada la tecla Mayús y luego haga clic en la imagen tres, y luego verá que selecciona todas ellas al mismo tiempo. Ahora bien, esto es súper útil porque si no lo sabías, la lógica podría ser que individualmente vuelvas a hacer todo esto, pero no, definitivamente no. Lo que quiero hacer es seleccionarlos todos. Y luego, de nuevo, sólo para repetir cómo lo hice. Lo que hice fue hacer clic en el lugar del que quiero seleccionar, y luego hice clic en el lugar que quería seleccionar hasta Entonces en este caso, seleccioné imagen tres justo el camino hacia la cima, y esa las seleccionó a todas. Entonces nuevamente, esto funcionaría para cualquier cosa. Entonces hice esta de aquí. Digamos que solo quería destacar estos de aquí. Haga clic en el lugar donde desee seleccionar y luego mantenga presionada la tecla Mayús y haga clic en eso, y seleccionará solo los que hizo clic Así que de nuevo, super super ul. Bien, entonces en nuestro caso, ahí, lo que queremos hacer es seleccionar de aquí hasta aquí porque el escalado en realidad no va a verse afectado en absoluto. En realidad va a permanecer escalado. Entonces no necesariamente necesitamos cambiar esto en absoluto en Hov Quiero decir, podríamos simplemente seleccionarlo todo de todos modos, cual creo que haremos, lo tendremos todo ahí, pero esta no es una propiedad que en realidad vamos a cambiar en absoluto. Bien, así que volvamos a hacerlo. Así que asegúrate de que esto esté seleccionado, mantén presionado un turno, haz clic en Imagen tres, selecciona todos ellos y luego haz clic derecho, y luego puedes duplicar. Bien, y ahí estamos. Así que de nuevo, nos acabamos de ahorrar muchísimo tiempo. Bien, entonces ahora que tenemos todos estos, obviamente, tenemos que cambiar algunas de las propiedades porque por defecto, todas están establecidas en el mismo posicionamiento que estas de aquí. Pero obviamente, en Hova queremos cambiar estos ligeramente. Entonces, para el escalado de la imagen , de nuevo, eso en realidad puede quedarse exactamente lo que es. La capacidad del botón, en lugar de ser 0% puede ser del 100%. Lo mismo para la mudanza aquí. Entonces movemos esos diez píxeles que solo se pueden poner a cero, así que vuelve a donde estaba Bloque de texto, nuevamente, en lugar de 0% de capacidad, eso puede ser del 100%. El bloque de texto moviéndose de nuevo, era de diez píxeles igual que el botón, que ahora se puede poner a cero Y luego la línea, que puede ser de vuelta a uno. Y luego para el contenido de la tarjeta, queremos tener esto como una especie de color rojo con una ligera capacidad. Entonces, en lugar de solo oscuro, vamos a cambiar esta especie de rojo oscuro. Entonces no va a ser exactamente lo mismo que el primero, pero va a estar muy cerca. Así que eso me parece bastante bien. Eso está bien. Y luego para el movimiento de la imagen, aquí es donde vamos a tener que aplicar por mucho que queramos hacer eso. Entonces algo así como algo así como 20 píxeles, así que es bastante sutil, tal vez 25 píxeles, y todo eso va a estar bien. Entonces ahora si tenemos una vista previa de esto, ya verás, Tenemos la interacción que queremos. Ahora bien, es bastante lento, sin embargo. Entonces creo que lo que tal vez queremos hacer es conseguir que esta línea sea un poco más rápida cuando hacemos eso. Así que de nuevo, esto sigue siendo más rápido haciéndolo. Bueno, todavía tenemos que alterar realmente las cosas, pero imagínense cuánto tiempo habría llevado esto en haberlo hecho una por una de nuevo. Tener este tipo de copiado en realidad nos ha ahorrado bastante tiempo. Pero vamos a hacer clic en la línea. Y en lugar de que esto sea 0.5, hagámoslo 0.2. Creo que es un poco más rápido. También creo que tendremos el color de fondo una fracción más rápido también. Así que en lugar de 0.5, intentemos. Probemos 0.3 para eso. Y vamos a previsualizar esto. Y si, eso me queda bastante bien. Creo que está bien. Bien, así que vamos a guardar esto y vamos a previsualizarlo correctamente. Así que en la vista previa. Ya ves que entra éste. El tiempo puede ser ligeramente diferente de éste en comparación con este, pero a medida que nos acercamos, ahí vas Se puede ver que tenemos más o menos lo mismo. No obstante, ahora, si lo dejo ir y me alejo, no pasa nada Entonces, lo que tenemos que hacer ahora es configurar la animación on hover out. Entonces hagámoslo ahora. Bien, entonces lo que podemos hacer para ahorrar tiempo una vez más es duplicar lo que ya hemos hecho, y luego simplemente cambiar las cosas ligeramente. Entonces actualmente tenemos este que está flotando en. Si vas a la sección hover out aquí y haces clic en Iniciar animación, y vamos a esta vez básicamente simplemente duplicar este de aquí, que dice hover adentro Así que haz clic en estos tres puntos y haz clic en y duplica. Y en lugar de llamarlo hover en dos, vamos a llamarlo Hover out Entonces, cámbiale el nombre a éste. H fuera. Asegúrate de que esté seleccionado, y luego puedes hacer clic en la pequeña rueda de ajustes para configurarlo. Ahora, de nuevo, si lógicamente, podrías pensar, Oh, tengo que pasar por todo esto otra vez Pero no, no tienes que hacer eso. Entonces, una vez más, lo que vamos a hacer es eliminar en masa todos estos haciendo clic en este de aquí, mantenga presionada la tecla Mayús y luego haga clic en la parte superior para seleccionarlos todos, y luego simplemente puede eliminar todos esos. Sin embargo, lo que sí necesitamos es todo esto. Entonces sí tenemos que cambiar algo. Entonces, en lugar de que estos estén todos puestos al estado inicial, ese ya no es el caso. Entonces lo que tenemos que hacer es reservar, seleccionar todos estos usando el mismo método que antes, seleccionarlos todos. Esta vez, desmarque el estado inicial, y ahora todos ellos habrán sido desmarcados De lo contrario, en uno de los videos anteriores, tenemos que hacerlo de manera individual. Esto es en realidad mucho más rápido y una forma mucho mejor de hacerlo si tienes muchas cosas diferentes sucediendo. Y ambas formas funcionan, pero obviamente, esto es mucho más rápido. Bien, así que está bien. Ahora, de nuevo, hay que volver a afectar algunas cosas. Entonces la flexibilización, todo estaba configurado para facilitar, y la mayoría de ellos tenían 0.5, pero algunos de ellos, en realidad cambiamos Entonces hagámoslo también. Ahora desmarquemos todos ellos. Ahora, la línea que teníamos como 0.2, creo. Eso está bien. Además, eso es todo lo que necesitamos cambiar en realidad porque está volviendo a cero, nada de esto necesita cambiar. Solo las duraciones ahora necesitan cambiar para esto. Haga clic en Entrar en eso. Entonces también creo que cambiamos el color de fondo también. Esto no fue 0.5, fue 0.3. Y si guardamos eso. Bien, ahora si hacemos clic en Guardar, deberíamos tener todo esto funcionando como lo hace el primero , para que puedas ver este aquí. Te metes, todo se pone. Éste, te metes y sales, todo desaparece. Bien. Y en realidad, creo que la animación que he hecho para esta de aquí es en realidad un poco más agradable que esta Este es un poco entrecortado. Probablemente hice la velocidad un poco demasiado rápida en esto. Este es agradable y lento y es agradable y gentil. Bien, entonces eso más o menos es todo. Ahora después de lo que tenemos que hacer es entonces duplicar esto algunas veces. Entonces hagámoslo ahora. Y lo que vas a hacer es asegurarte de que todo esté seleccionado aquí, así que esta será la base de cartas que necesitamos seleccionar. Solo asegurémonos de que se elimine todo lo que me sobró. Entonces sí, asegúrate de que la base del auto esté seleccionada y luego mantén presionado el Control C para copiar o comando C, estás en una Mac y luego controla o comando V, y luego copia esto dos veces. Simplemente cambiaremos el texto para que sea lo mismo que el punto superior. Entonces esto está debajo, y luego este S Bro Bien. Y entonces obviamente, lo que necesitamos cambiar entonces es la imagen. Ahora, en realidad no podrás seleccionar la imagen simplemente tratando de encontrarla aquí porque lo que tenemos es un div, que es como que va por encima de ella. Entonces, lo que tendrás que hacer es simplemente usar el navegador y luego algo clic holgadamente alrededor de esta área aquí y en el navegador, te mostrará aproximadamente lo que tienes Entonces obviamente, este de aquí como lo destaco sobre la imagen tres. Ahí lo puedes ver. Y luego simplemente haz clic en la rueda de ajustes y luego reemplaza la imagen de esta manera. Entonces esta es la forma en que lo vas a hacer. Entonces para esa. Lo mismo para este de aquí también, usa de nuevo el navegador, selecciónalo por aquí, y luego cámbialo en esta parte aquí. Entonces el último está ahí. Y ahí vamos. Prácticamente terminamos todo, y tenemos prácticamente la misma animación en cada uno, y se puede ver que se cierne hacia adentro y luego sale con un color de fondo ligeramente diferente Bien, así que eso prácticamente lo envuelve para este. Ahora bien, en términos de conseguir esto, mobile responsive y qué tienes, obviamente tendrías que desactivar algunas de las animaciones potencialmente con efectos hover Efectos de desplazamiento en el móvil tipo de interesante. C no funciona de la misma manera. No tienes ratón. Lo que podrías hacer, por supuesto, es simplemente tener este texto, siempre apareciendo. Podrías hacerlo de esa manera o. Podrías tenerlo, así que tienes que darle clic a Hovver entonces en lugar de que esto sea un bloque de enlaces, podrías tener esto primero tienes que hacer clic en él y luego hacer clic en el botón para llevarte a la sección que necesites Hay algunas formas diferentes de hacerlo. Pero de nuevo, esto es principalmente solo que estoy mostrando esto para la vista de escritorio para fines de interacción. Ahora, hay una cosa que debo mencionar, en realidad. Estos dos elementos aquí en el panel de interacciones, en realidad lo hicimos como elementos individuales. Ahora, lo que quiero que pruebes. La razón por la que hice eso es, quiero que intentes cambiar la velocidad a la que ambos hacen esto. Entonces solo te voy a mostrar lo que quiero decir con esto. Entonces lo que podríamos haber hecho. Dado que estos dos elementos están realmente separados dentro de la animación, lo que podrías hacer es afectar la velocidad a la que aparece cualquiera de ellos. Ahora bien, para la velocidad, puede haber sido más rápido haber agrupado realmente el texto y el botón en una sola cosa. Y entonces eso hubiera significado que no hubiéramos necesitado haber