Conceptos básicos de Webflow: guía de creación de hermosos sitios web para principiantes

1. Introducción al curso de capacitación en flujo web: Hola, mi nombre es Dan Scott y juntos vamos a aprender a construir sitios web receptivos, hermosos y accesibles en Webflow. Ahora este curso está dirigido a personas que son nuevas en el software de flujo de trabajo. Y para aquellos de ustedes que son nuevos en el diseño web en general, comenzarán creando un sitio web simple de una página. Y en los fundamentos del diseño y animación están usando Webflow no es software de código, todo está diseñado para visualmente, aprenderás a hacer que tu sitio web se vea consistente en computadoras de escritorio, tabletas, y móvil. Empieza a aprender clases CSS para diseño y estilo de fuente, así como la importancia de las convenciones de nomenclatura de clases. Si eres alguien que ha usado flujo de trabajo solo un poquito, ¿de acuerdo? Y encontrarás cosas como grid y flicks y columnas y devs. Todo un poco complicado saber cuál usar. No me preocupo, te lo prometo al final de este curso, tú, amigo mío, sabrás cuándo usar qué NY. Luego abordará nuestro proyecto más grande donde construye su propio sitio web de cartera. Aquí también empezarás a hacer animaciones más complejas, animaciones cronometradas, animaciones de paralaje , fantasía. Aprenderás a crear y diseñar formas. Algunos de ustedes pueden tener algunas habilidades en Figma o Adobe XD, y les mostraré cómo convertir esos diseños en un sitio web de flujo de trabajo. Pero conociendo a Figma lo que XD no es esencial para el curso, aprenderás navs pegajosos son símbolos E0, marcas flotadores, gradientes de rojo a verde, Comic Sans. Pero está mal con el impacto de Comic Sans. Entonces, una vez que tengamos los fundamentos del flujo web en nuestro haber, luego veremos la creación de un sitio web CMS dinámico. Vamos a crear un blog. Bien, aprenderás a crear un nuevo estilo y luego a entregar las responsabilidades de ese sitio a tu cliente, tu cliente, tu miembro del personal, tu planta de casa. Pueden iniciar sesión y comenzar a hacer sus propios cambios en el sitio web y crear sus propias publicaciones de blog sin ninguna de tu ayuda. Luego, al final del curso, usarás tus nuevas habilidades de medicina para crear una tienda de comercio electrónico, creando y diseñando carritos de compras, formularios de pedido, pasarelas de pago. Aprenderá sobre la venta de productos físicos y digitales así como la venta de servicios. Si estás ahí sentado pensando en películas de clase global, cuadrículas, flotar, todo eso suena demasiado caliente. Puerta. Recuerda, vamos a empezar desde el principio y trabajar paso a paso. Este curso está dirigido a cualquier persona que quiera construir sitios web y flujo de trabajo. Es posible que solo tengas un sitio web o tienda que necesites construir para ti o para un cliente. O tal vez quieras convertirte en un diseño web de tiempo completo, o tal vez ya eres freelancer y necesitas expandir lo que ofreces como freelancer. Me siento en tareas a lo largo este curso para que puedas practicar lo que has aprendido y construir cosas realmente para tu portafolio. Bien, es cronometrado para actualizarte. Pasa de sitios web cero a héroe de Webflow. 2. Empezando con el tutorial de Webflow: Bien, para empezar. Lo primero es que hay algunos archivos de ejercicios. Habrá un enlace en esta página aquí. Descárgalos. Ahí estarán los archivos que usemos para este curso. Bien, el flujo de trabajo del software en realidad está basado en navegador. Entonces vas a, puedes usar este enlace aquí si quieres ir y registrarte. Es un enlace de afiliado. Entonces Webflow dame encontrar su tarifa por eso o simplemente ir directamente al flujo de trabajo, regístrate para obtener una cuenta allí. Es gratis registrarse. Es Mac o PC porque está basado en navegador. Estoy usando Google Chrome. Consulta las especificaciones del navegador de Webflow, ya sean compatibles con tu navegador, si estás usando Safari o Edge o algo más, pero estoy usando Chrome en este curso. Por lo tanto, el flujo de trabajo pagado versus gratuito tiene uno gratuito y uno de pago. Para este curso en particular, vamos a iniciar el curso utilizando la versión gratuita en la medida de lo que podamos. Y hay un punto en el que necesitamos las características adicionales y nos registraremos para la de pago. Entonces, si lo eres, puedes hacer dos opciones. Puedes hacer todas las cosas gratis y luego simplemente ver las cosas pagas y decidir si es vista. O lo que podría ser útil es que puedes registrarte para una cuenta mensual con ellos cuando lleguemos a esas cosas pagadas. Y entonces puedes decidir después de su primer mes, si es adecuado para ti o no gay y tal vez cambiaste una anual después de entonces. Pero sí, podrás hacer una parte de este curso, digamos del 20 al 30% del mismo usando la versión gratuita. Y te avisaré cuando hagamos crossover la línea de versión paga. Ahora el flujo de trabajo se actualiza muy rápido. Entonces, si hay alguna actualización en la interfaz de usuario que no sea obvia, y mira los comentarios debajo del video solo para ver si hay algo o si es realmente malo o un gran cambio, iré y re- grabarlo, pero avísame si hay algún cambio y para que puedas ayudar a otras personas o si hay algo que no sabe, quejas, solo pollo al video Para ver. Ha habido una pequeña actualización. La otra cosa es que hablo muy rápido. No lo sé, no estoy seguro de si estoy hablando rápido ahora mismo. Siento que estoy un poco más tranquilo. Estoy al principio del curso un poco nerviosa porque acabamos de conocernos, pero hablo rápido. Notarás que hay un diente y la parte inferior de ese lado de todos los videos. Alguna vez has cambiado la velocidad y me has ralentizado a Dan ebrio, puede ser más fácil si tal vez el inglés no es tu primer idioma o simplemente hablo rápido. Algunas personas me aceleran. Ambos. Un raro suena bien, pero te acostumbras a ello. Y lo último fue, oh, sí, yo, hay un poco de explicar el flujo de trabajo, lo que hace para los próximos videos. Si quieres saltarte eso, salta al video llamado weight. Ellos van a revisar, lo encontraron. Se llama cómo construir tu primer sitio web y Webflow. Entonces lo verás un poco más adelante en el curso si solo quieres saltar a esa parte en la que estás como en realidad solo empieza a hacer cocinar relleno con todo el pavo y podrás saltar hasta allí. De lo contrario, vamos a repasar los siguientes videos solo o respondiendo todas las preguntas que tenía antes de comenzar con Webflow. Creo que es importante enmarcarlo lo que hace, lo que hace. Preguntas frecuentes. Diego. Bien, siguiente video. 3. Qué es Webflow: Entonces, ¿cuál es el flujo de trabajo? El flujo de trabajo es una forma de hacer sitios web y donde se encuentra en el mercado de la creación de sitios web es, se considera un creador de sitios web sin código. Entonces significa como en un lado de aquí tienes codificación completa, tu sitio web, HTML, CSS, PHP, lo que sea que uses. otro lado aquí está más el Wix y Squarespace donde es muy arrastrar y soltar. Y manejan todo el backend. Entonces Webflow tipo de se sienta en este medio feliz para mí de es, él, escribe código hermoso y te da acceso al código si lo quieres, no tienes que hacerlo. Pero y para mí como diseñador web que entiende mucho del código, me parece muy útil porque me da un control total como el lado de la codificación del mismo. Si codificas el tuyo para que puedas hacer lo que quieras. Pero lleva más tiempo y es una forma diferente de construir, ¿verdad? Eres un codificador. Soy más diseñadora. Lo que me gusta es Webflow porque me permite construir sitios realmente bastante complejos, personalizados, como exactamente como quiero. O puedo comenzar desde plantillas un poco más como funciona este mundo de Wix Squarespace, ¿de acuerdo? Flujos de trabajo en el medio, te ocultan el código. Es accesible si lo necesitas o quieres si quieres empujarlo más. Y tiene mucha profundidad. Codificación. Tu propio sitio web tiene una profundidad infinita. Puedes hacer lo que quieras. ¿Bien? El viento fluye en este término medio de ti puede hacer más o menos lo que quieras, cualquier cosa que sea normal hacer. Puedes hacerlo en el flujo de trabajo y se está expandiendo donde y luego por aquí en este otro conjunto son más arrastrar y soltar para las personas que quieren construir un sitio web para su equipo o club o negocios, y no quiero volver a tocarlo nunca más. Porque puedes elegir una plantilla agradable y te vas. Mientras que aquí puedes elegir una plantilla agradable y te vas. Pero también si quieres hacer esta otra cosa rara y esta cosa aquí también. Y tú querías verte de esta manera. Aquí es donde fluye conjuntos y de alguna manera te oculta el código. Escribe un buen código. Solo para aquellas personas que se asustan con como tener la sintaxis correcta y cosas así. Entonces eso es una cosa sobre lo que es el flujo de trabajo. Eso es lo que es Webflow, para quién es y quién lo usa normalmente. Normalmente son diseñadores y comercializadores los que quieren poder producir un sitio sin la ayuda de un desarrollador. Pueden sentir que solo pueden llegar tan lejos por su cuenta y luego, como que, se vuelve bastante complicado entonces involucrar a otra persona y pagarle. Por lo que el diseño es a menudo lo usará para construir múltiples sitios web para sus clientes. Podrían estar haciendo otro trabajo de diseño para ellos. Quiere construir sitios web, no sé cómo codificar. Hemos reducido esa solución perfecta. Sin código, sitios web bastante complejos y da acceso al cliente para actualizarlo también. Entonces es esto, es un flujo encantador para un diseñador hacer sitios web y se está volviendo muy popular entre los especialistas en marketing donde tienen una idea o un micrositio o algo que quieren que se haga tal vez rápido. ¿Bien? Y no quiero tener que convertirlo en un proyecto realmente grande con otros Dwell externos. No hay nada malo en trabajar con un desarrollador. Trabajo con el desarrollador todo el tiempo para hacer cosas personalizadas. Pero con logos me la capacidad de llegar bastante lejos por mi cuenta sin ninguna ayuda. Y puedes llevar el flujo de trabajo un poco más allá y no lo es, no puedes usar un desarrollador. Lo que puedes hacer es tomar Webflow y probablemente obtendrás el 99% de lo que necesitas hacer. Pero para ese extraño caso de borde, puedes conseguir que un desarrollador te ayude. Y cada vez son más los desarrolladores que ayudan específicamente a los diseñadores y marketing a impulsar eso con un poco más para que puedas un poco caballero allí también. Y también los dueños de negocios están usando Webflow porque significa que pueden tomar el control total. No lo están subcontratando y sienten esta desconexión entre su idea, sobre todo al principio y lo que quieren entregar. Porque hemos escuchado le permite el comercio electrónico y los sitios web basados en bases de datos de estilo CMS que tradicionalmente necesitan la ayuda de otras personas. Mientras que el flujo de trabajo lo trae todo y le permite hacerlo todo por su cuenta. Hablemos de dónde encaja en el proceso de diseño web. Por lo que Webflow no se utiliza para diseñar un sitio web. Debió haberlo hecho anteriormente. Lo haces en algo como Figma o XD o Photoshop o Microsoft Paint. ¿Por qué lo diseñarías en esos primeros y tal vez obtendrías la firma del cliente o tu propia firma? Y luego construirlo en Webflow después. Y no solo construirlo de inmediato es porque es muy rápido y fácil diseñar algo y algo así como estas otras herramientas como Figma, XD, Photoshop. Tenemos cursos sobre todo lo que ilustran no importa. Cualquier herramienta que quieras usar para diseñarlo. Es muy fácil mover las cosas y el flujo de trabajo, es mucho más estructurado. Tienes que construir cosas, Bob, desde cero. Y es muy difícil, no muy difícil cambiar las cosas, pero mover algo con el mouse versus cambiar dónde está en un sitio web es muy diferente. Y la mejor analogía es, quieres una casa, ¿de acuerdo? Podrías diseñar diez de ellos, y podrías construir casas de hojalata y decidir cuál te gusta más. O podrías dibujar unas casas de hojalata y decidir cuál te gusta nist y luego construir una para hacerte la idea. No es tan elaborado como que puedas diseñar totalmente y Webflow simplemente no es una gran manera de hacerlo. Diseñó algo primero, aprobación de cliente Git , firmar, puedes probarlo. Y estos otros programas, no estoy seguro de por qué están por aquí. Esta diapositiva son todos estos chicos, el software de diseño y luego lo construyes y el flujo de trabajo. Una vez que te encanta tu diseño, puedes hacer algunos cambios en el camino. No está escrito en piedra, pero espero que entiendas la idea. Diseño, construcción de flujo de trabajo. Y entonces el flujo de trabajo es el último puerto de escala. Entonces puedes decir, aquí hay un sitio web, ya terminé. Entonces eso es lo que es Webflow, para quién es, dónde encaja en todo el flujo de diseño web. Si eres como, Oh, tengo más preguntas. Oh yo, yo, yo. Bueno. Porque tengo otro video. Voy a repasar todas las preguntas frecuentes que la mayoría de la gente me hacía y tenía al respecto cuando empecé, estaba viendo ese video. Voy a tomar una taza de té y volveré. Te veré en un minuto. 4. Preguntas frecuentes sobre el flujo web: cuánto cuesta el flujo web Parte 1: Hola a todos. Bienvenido al video de Preguntas Frecuentes. Qué era esa cosa al principio, es como una forma para que puedas saltar en este largo video para todas las diferentes Preguntas Frecuentes. Para muchos de ustedes, solo vieron todo el asunto. Para algunos de ustedes. Se puede mirar a través de él. Ve, lo sé. Vamos a pasar al siguiente video. Para algunos de ustedes otra vez, solo quieren echar un vistazo a algunas cosas. Así que lo levanto justo al principio. Por lo que es fácil fregar hacia atrás y ver dónde está y luego moverse en la línea de tiempo. ¿Eso asegura que tenga sentido? Bueno, mientras estamos haciendo esto es porque solo había un montón de preguntas antes de entrar en Webflow que tenía y que finalmente lo descubrí todo. Y yo estaba como, ese es el tipo de cosas. Ojalá hubiera un solo lugar para todas esas cosas. Entonces eso es lo que este video es para ti. Ojalá esto responda a todas sus preguntas y respuestas todo en un solo lugar. Sólo tienes que ir hacia abajo. Bien, la pregunta más frecuente sobre Webflow es el precio. Voy a hablar de dólares estadounidenses y pagos mensuales aquí solo por consistencia. Y vamos con uno gratis primero es que los pros y los contras, los pros es que te pones a trabajar gratis y puedes construir un sitio y lanzarlo. Sólo se pueden tener dos de ellos. Y el gran inconveniente para eso es que esos fueron, el primer inconveniente es que esos dos sitios web diferentes que haces solo pueden tener dos páginas diferentes. Eso es una multa para una página de destino o un folleto, sitios web o página de inicio Contáctenos, página inicio cada vez más extensa. Y lo que estamos construyendo este curso aquí es que puedes hacerlos bastante largos para tenerlos. Todavía muestran mucho contenido para esas dos páginas. 2 sitios web, solo dos páginas. La limitación se convierte cuando quieres dejar pagar es cuando quieres un dominio personalizado, porque esos dos primeros sitios web pueden salir, pero están en, en la cuenta gratuita, pero están en Dan's sitio web increíble, punto Webflow, punto io. Entonces esa es la URL que tendrías que dar. Entonces no es muy profesional. Entonces, si quieres el increíble sitio web.com de Dan, bien. Luego necesitas actualizar a los $15 mensuales. Bien. Y ese es tu alojamiento web. Y es como si te estás tomando una eternidad, costos de alojamiento web, puede costar tan solo $5. Pero con Webflow, obtienes el puck, todos los beneficios del flujo de trabajo. Entonces tienes que actualizar desde ahí para el sitio web, pero solo cuando esté listo para salir, consigue ese dominio personalizado. Y si, el siguiente tipo de salto de precio estaría en, en este curso va a ser cuando necesitemos un CMS. Cms si nunca has usado uno, es como realmente bueno para cosas como entradas de blog. Digamos que no queremos estar diseñando cada página y Webflow. Queremos dárselo al cliente y conseguir puedan entrar en el sitio web y poner un título de blog en algunas imágenes y sus propios textos golpean Subir a sitio web. Y no tienen nada que ver con las puertas Webflow subidas a un CMS o a una base de datos y mostradas en el sitio web. Entonces permite que la gente no esté codificando y diseñando cada página solo les da un poco de área para poder subir cosas como WordPress. Entonces te mueves a gustar, supongo 20 dólares al mes para llegar a ese CMS, hay un tráfico de ancho de banda. Por lo que la mayoría de los sitios pequeños no van a superar en absoluto este ancho de banda. Pero si tienes un sitio web de tráfico súper alto, posible que te pidan que actualices al siguiente nivel porque está recibiendo mucho tráfico, pero es muy popular y estás ganando mucho dinero así que será capaz de hacerlo. Otros paréntesis de precios, Hay muchas escalas diferentes y él, solo estoy un poco escogiendo las claves que me parecen más útiles es cuando pasan de CMS al comercio electrónico. Así que déjame mirar. Comercio electrónico. El comercio electrónico es diferente porque necesitan hacer un montón de cosas diferentes. Entonces, para obtener un sitio de comercio electrónico ligero, así que digamos que estás haciendo auriculares y quieres venderlos de tu lado, vas a tener que pasar al plan de $29 al mes porque eso es lo que estamos fluyendo estancias. Y desbloquea todas sus cosas de comercio electrónico. Puedes ir directo hasta ella como ¿Qué fue eso? Sí, eso es un mes. Puedes ir hasta el más caro que puedo ver aquí es de $212 al mes para el comercio electrónico. Y es que viene abajo a Lake. Lo descomponen con como cuántos artículos tienes en tu tienda. ¿Y te dijeron una comisión por transacción? ¿No lo hacen? Todo tipo de otras cosas. Así que echa un vistazo a un precio de recorte de webflow.com. Esas son las partes principales. Nuevamente, estos cambian, las reglas cambian. Pero esos son el tipo de 015, 2029 son los principales grupos de alimentos que podrías estar usando para Webflow. Y si estás pensando, no les estoy pagando, si alguna vez has hecho diseño web antes, ya sabes, necesitas algún tipo de hosting y necesitas registro de dominio y alguien va a tienes que hacer el e-commerce por ti. Vas a pagar en alguna parte. Esto es lo que hace el flujo de trabajo. Está por encima de lo que puedes conseguir si realmente tienes un poco de presupuesto ajustado. Pero los beneficios por hacerlo son bastante buenos. Ellos manejan todos los parches. Tienes que preocuparte por los servidores y si, eso es todo. Eso es el precio. 5. Preguntas frecuentes sobre el flujo web: cuánto cuesta el flujo web Parte 2: Hablemos de WordPress versus Webflow. ¿Cuáles son las diferencias? ¿Cuál deberías usar? Entonces hablemos de lo que son ambos. Wordpress se inicia esencialmente como un software de blogs que puedes manipular para hacer básicamente cualquier cosa. Gran parte del mundo está impulsado por WordPress. Tiene una cantidad exhaustiva de profundidad, tanta profundidad. Si todos estos raros casos de borde, probablemente puedas encontrar un complemento de WordPress que lo resolverá. Mientras que cuando el flujo es más el núcleo de lo que hay que hacer para el diseño web. Pero a ninguno de esos les gustan las minúsculas y pequeñas fundas de borde, o al menos no es un clic y enchufa y reproduce. Se puede hacer WordPress a bastante de ello. Y así si eres una persona que solo quiere un blog rápido esta tarde, oye, blogueando sitio web arriba. Simplemente instala WordPress, elige un enchufe o elige una plantilla que te guste instalar y comienza a enchufar. Y si quieres, si tienes un diseño que has hecho y quieres construirlo. Hazlo en WordPress. Porque conseguir esa personalización en la web, Wordpress, tomando su tiempo de diseño, quieres que sea perfecto. O al menos tienes una idea muy fuerte de cómo quieres que se vea. Y hacer que WordPress sea realmente complicado. Como si estuviera bien codificando y sigue siendo bastante complicado conseguir que WordPress haga lo que quiero. Y tienes que meterte en el código y esas cosas. Y diciendo que aunque no quiero, WordPress es increíble por todos esos plug-ins que necesitas para hacer algo. Si necesitas un plugin que acepte pagos pero solo desde su rara pasarela de pago que solo los usuarios de tu país. Y es sólo para zurdos, probablemente vas a encontrar un plug-in para ello. Mientras que WordPress tomará pagos genéricos de la mayor parte del mundo. Sí, eso es un poco de mucha profundidad, bastante complicado de personalizar, pero realmente fácil de comenzar. Wordpress, bastante fácil de empezar. Verás en este curso. Pero te permite controlarlo todo. Y eres un poco WordPress, buen flujo de trabajo, muy bueno. Y ambos tienen sus pros y sus contras, pero esos son, esa es la visión general de esos dos. Con cuál empiezas? Vas, ¿Puede su cliente actualizar su sitio web Webflow sin su ayuda? Ellos pueden. Hay dos lados en Webflow. Ahí está el lado del diseñador, tú, el creador, el creador del sitio web. Y luego hay algo que se llama el editor. Y el editor es para clientes o clientes y pueden entrar y actualizar el sitio web según lo necesiten. No necesitan ninguna interacción con Webflow, bien. Pueden hacerlo dentro del sitio web. Te voy a dar el más pequeñito es demo. Sólo para mostrarte a lo que me refiero, Aquí vamos. Hay dos lados en Webflow. Ahí está el diseñador, que soy yo entrando aquí y yendo, ¿sabes lo que tengo que hacer? Necesito aumentar este acolchado para moverlo y diseñarlo en absoluto. Consígalo luciendo bien. Publicé el sitio web y luego el cliente o mi cliente usa algo llamado editor. El editor les permite como cliente no volver a ti, sino entrar en el sitio web y hacer clic en editar y decir en realidad quiero cambiar esto. Esto tiene que ser el 2036, ¿de acuerdo? Y cuando he hecho un cambio, lo que pueden hacer es que puedan decir publicarlo, y publicaron el sitio web. Y lo genial de ello es que actualizará el sitio web en vivo para que el texto cambie o actualice. Pero también va a cambiar por aquí en mi vista de diseño. Ahí vamos. Entonces significa que los cambios de cliente me aparecen también. Cuando estoy diseñando, puedo ver lo que han cambiado. Ahora pueden cambiar imágenes de texto, enlaces, cualquier cosa. También pueden agregar publicaciones de blog si has configurado un blog o agregar productos, si has configurado un sitio de comercio electrónico, aquí es una configuración bastante agradable. Puedes usar Webflow Justin diseñando de ti y solo para ti mismo, bien, si construyes tu propia cartera y nunca tocaste al editor. Pero si quieres entregarlo a un cliente, tienen formas de actualizar el sitio web sin volver a ti cada vez. Entonces, ¿puede el cliente actualizar el sitio web? Sí, ellos pueden. Sin tu ayuda, fantasía. 6. Preguntas frecuentes sobre el flujo web: cuánto cuesta el flujo web Parte 3: La pregunta es, ¿puedo alojar mi sitio web Webflow en mi propio servidor o en mi propia plataforma de alojamiento? Sí, casos de uso limitados. Y si quieres construir algo y flujo de trabajo como un sitio web estático y tal vez su cartera. Y solo lo haces un poco y no querías ir a pegarlo en tu propio anfitrión. Totalmente factible. Si quieres hacer actualizaciones a ese sitio web, puedes hackear el código de este lado, bien, si tienes algunos conocimientos básicos de HTML y CSS, puedes hacerlo totalmente en tu propio host y olvidarte de flujo de trabajo ahora, solo lo usé para hacerlo. Si quieres seguir usando Webflow para hacer cambios, puedes entrar en Webflow y decir, OK, quiero moverlo o agregar este próximo proyecto y colocarlo todo y luego exportar el codón al tuyo anfitrión. lo puedes hacer totalmente. La limitación se convierte en cuando quieres un CMS, quieres que el cliente pueda iniciar sesión, o quieres publicar publicaciones en el blog. Vamos a crear nuestro sitio web de publicación de blogs. Y también vamos a crear un e-commerce. Ambas funcionalidades deben estar alojadas en Webflow. No exploran todas las bases de datos y cosas para que eso funcione para su propio sitio. Así que los sitios web estáticos perfectos. Cualquier cosa que requiera funcionalidad como inicio de sesión de cliente o un CMS para subir nuestras publicaciones de blog o comercio electrónico que necesite ser alojado con bajo para que eso funcione. Entonces sí y no. ¿Puedes importar tu propio código a entrada? ¿Sí o no? No. No puedes agarrar tu sitio web existente y ponerlo en Webflow y hacer ajustes y luego escupirlo nuevamente. No se puede importar un sitio web completo, así que no hace eso. Sin embargo, lo que puedes hacer en Workflow es que puedes ponerlo en tu propio código personalizado. Por lo tanto, es posible que tenga algún código que deba ir en la etiqueta de la cabeza o en el cuerpo de una página o páginas en particular. Puedes inyectar tu propio código en las páginas para que puedas traer pequeños bits de código, pero no importar todo el sitio a Webflow. Tú vas, ¿puedo construir un sitio web de membresía en Webflow? Algo así como que aún no. Está en beta. Puede que ya esté fuera, dependiendo de cuándo estés viendo esto. A partir de esta grabación, está en beta, por lo que están trabajando en ello. Entonces probablemente ya esté fuera. Sí, puedes. Por el momento, puede construir como una sección protegida por contraseña de su sitio web que ya es funcionalidad en Webflow y sitio de membresía está llegando o podría estar fuera. Ahora, ve a verificar. Ellos van. Esa es la respuesta. ¿Puedo usar mi propio nombre de dominio personalizado con Webflow? ¿Pueden darte uno como parte de la parte gratuita y sitio de desarrollo de Webflow? Y eso es como el increíble sitio web de Dan punto Webflow, punto io. Puedes usar esa. todo el mundo quiere su propio dominio personalizado Sin embargo, todo el mundo quiere su propio dominio personalizado, el increíble sitio web.com de Dan. Y si, puedes conectarlos arriba. ¿Los venden? ¿Sabes cómo configurarlos? Te mostraré más adelante en el curso de lo esencial, pero se puede hacer. Sí, otra vez, bien. adelante. ¿Webflow maneja sus direcciones de correo electrónico? Tienes el increíble sitio web.com de Dan. Bien. ¿Quieres a Dan en el increíble sitio web.com de Dan? Nuestro flujo de trabajo no maneja el correo electrónico por usted. Necesitas algo más. La mayoría de la gente usará espacios de trabajo de Gmail o Google. Eso es lo que uso, es muy común. O bien, ordena tu propio alojamiento de correo electrónico. Así que no hacen el tipo de gestión del correo electrónico por ti. Simplemente puedes usar tu cuenta de Gmail y no obtener un Dan especial en el correo electrónico especial de website.com y solo usar tu Gmail. La otra cosa es, es que sí manejan cosas como decir, hacer un pedido a través de tu sitio, alguien hace una compra. Ellos se encargarán ahí como agarrar el pedido y enviártelo por correo electrónico y darle un espacio para iniciar sesión para ver todos sus pedidos. Entonces manejan no del todo el correo electrónico, sino como esas transacciones. Lo mismo con una forma. Te voy a mostrar cómo hacer un formulario en este curso. Y cuando alguien dice Hola, mi nombre es Daniel Scott y quiero contratarte y enviarte. Éste, procesará eso que contendrá una copia de la misma y te la enviarán. Tu sea cual sea la dirección de correo electrónico que quieras enviarla a tu Gmail o Hotmail, Yahoo o ¿estaría usando? Bien, entonces procesarán ese incentivo para usar. Obtienes el contexto. Por lo que procesarán el formulario y lo enviarán a tu dirección de correo electrónico. No ordenan tus elegantes direcciones de correo electrónico, sino que procesan y envían cosas a tu dirección de correo electrónico existente. ¿Webflow es bueno para el SEO? Sí. Soy una persona ACO relativamente calificada, la atendió mucho tiempo, razonablemente buena. Y hace muy bien lo básico. Flujo de trabajo en la página, en la página SEO y en realidad se pone bastante profundo en términos de agua en realidad puede hacer por su sitio web SEO. Entonces la respuesta es sí, lo hace. Sitio web en la página SEO. Extremadamente bien. Voy a decir extremadamente ansioso. 7. Cómo crear tu primer sitio web en el flujo web: Hola a todos. Vamos a construir nuestro primer sitio web en Webflow. Va a ser súper básico así y en realidad no vamos a construirlo tanto como usar muchas de las cosas prefabricadas en Webflow. Y hago esto porque quiero una muy buena visión general de cómo es el proceso, cómo inicias un sitio, cómo pones cosas en él, cómo lo publicas, ¿cómo lo previsualizas? Bien, entonces es por eso que es un video corto y vamos a llegar a escuchar bastante rápido porque solo hay algunos conceptos básicos. Quiero mostrarte todo el proceso en un poquito y mostrarte las principales áreas que vas a usar antes de meternos en algunas cosas más fundamentales de Webflow. Bonito breve resumen. O va a ser mucha ayuda cuando estarías como, Oh si, eso estuvo bien. Ahora puedo tener una idea de adónde entramos o va a ser demasiado rápido y muy confuso. No estoy seguro de cuál es todavía, así que vayamos a la derecha para comenzar. Dependiendo de por dónde empieces, podrías estar aquí, puedes iniciar un nuevo sitio. Podrías terminar en realidad solo en esta ventana de aquí. Puedes comenzar con plantillas, lo cual va a ser genial más adelante cuando seas increíble. Pero por ahora, comencemos con un proyecto gratuito. Tú puedes, yo sólo voy a demostrarlo. Puedes seguir adelante si quieres en esta etapa, pero vamos a meter lo que voy a hacer. Es más un miembro completo de recorrido solo para darte una idea de lo que hay en el futuro. Entonces este es el diseñador. Bienvenida. Aquí es donde vas a pasar la mayor parte del tiempo. El, es un poco como cuatro lugares principales para encontrar cosas. Te voy a mostrar tres ahora y uno después llamado el editor. Vamos más adelante en el curso. Pero los principales que necesitas ahora como diseñador, aquí es donde conseguimos agregar y dibujar cosas. Entonces entro aquí y digo este pequeño botón más y puedo decir que quiero golpear y luego quiero botón. Recuerda que esto es solo un rápido fue a través si quieres, desaceleración. No el propósito de este video es darte una especie de visión general amplia. Antes de entrar en el meollo, el diseñador, ¿harás cosas y harás trabajos de diseño? El otro lugar que es útil es decir aquí arriba en la esquina Es la configuración de tu proyecto. Entonces este es nuestro proyecto, bien, este es mi proyecto. Puedo entrar en esos escenarios y tiene muchas cosas importantes. Entonces el mío se llama Dan's Awesome site. Y tenemos un botón y pegándolo aquí, cosas generales, el nombre de tu sitio web, tienen íconos. Bien. Mira dónde estás basado, todo este tipo de cosas. Y los miembros es un área para, podrías tenerla otro diseño ayudándote a ti o tu cliente va ahí formas de publicar tu facturación, cosas que puedes cambiar para el sitio web, para SEO, cualquier forma presentaciones. Supongo que no está demasiado listo para pasarlo es es más como esta sección aquí tiene muchas cosas importantes que cuando empieces, estarás como, ¿dónde está eso? Está en tu configuración, tu configuración de proyecto. Bien, así que volvamos al diseñador para este proyecto llamado Daniel is awesome site. Hay algunas maneras de llegar a todas partes. Está bien, recuerda diseñador, puedo ir a la configuración de mi proyecto, bien, pero digamos que tienes dos proyectos. Estás trabajando con tres clientes, diez clientes, eres increíble. Bien, puedes ir a tu tablero. Terminarás aquí con bastante frecuencia cuando cargues el flujo de trabajo después de un tiempo, sesión o te alejas de él y lo cierras y vuelvas aquí, terminarás aquí. Por el momento, tengo un sitio, terminarás con múltiples sitios aquí. Si construyes varios sitios desde aquí, mayor parte de las veces puedes, simplemente haz clic en él e ir al diseñador donde estuvimos antes. O puedes ir directamente a la configuración del proyecto. Ahí está, la configuración de este proyecto. Entonces esas son las tres partes, el diseñador, la configuración, y este tablero. Vas a alternar entre todos estos, estas cosas de aquí son, eso es importante. Estas cosas aquí, sitios web geniales que han hecho que los diseñadores que podrías contratar su parte educativa, como, esa es la parte principal. Y dentro de este dashboard, puedes abrir tu proyecto y un diseñador, Diego. Entonces esas son las principales áreas. Y las otras cosas principales que quiero cubrir es que voy a hacer clic en estos y simplemente eliminar en mi teclado. Y quiero simplemente pasar rápidamente por estos trozos aquí. Entonces tienes elementos y diseños. Los elementos son los bloques de construcción con los que vas a trabajar. Vas a empezar a crear un contenedor. Y luego dentro de ese contenedor puedes poner tus encabezados para que no esté golpeando estaba todo el camino por ahí. Empiezas a construir tu sitio web, vas, bien, ¿necesito qué más? Necesitamos. Cosas fáciles. Necesito una imagen. Bien, pongamos nuestra imagen. Se lo perdí, consígalo en la zona correcta. Empiezas a construir tu sitio web a través estos elementos y hay muchos aquí, hay formularios. Puedes ver que hay menús de navegación, todo tipo de cosas geniales que vamos a aprender en este curso. Layouts es déjame borrar estos diseños, no es trampa, pero es trozos pre-hechos. Quieres un nab pegajoso hasta la cima. Boom. Quieres ah, diseños. ¿Quieres una sección de héroes? Pie de página? ¿A dónde voy? Ahí vamos. Diseños Plus. Pie de página. Bien, ya tienes un sitio bastante complejo yendo. Y lo genial de ello es te voy a mostrar este es tu adelanto. Entonces este es el diseñador. Este soy yo con toda la edición y mucha basura por todas partes. Puedes limpiar todo en vista previa de cómo se verá para el usuario final haciendo clic en este pequeño globo ocular. Aquí vamos. Va a parecer que se puede ver aquí. No puedo hacer mucho. No es hermoso, pero es mucho de la estructura está ahí. Como si cambias a esta, digamos, vista móvil, ¿ puedes ver el nav? ¿Cambia? Cada pila, las imágenes se apilan de manera diferente en eso. Hizo mucho del trabajo por usted usando esos diseños para salir de la vista previa, haga clic en el globo ocular nuevamente. Los elementos, todos los bits individuales, diseños son todos los bits individuales pegados entre sí. Eso sigue golpeando, y eso siguen siendo algunos textos y eso sigue siendo un botón. Pero está centrada. Ahora, mira eso parece encajar en la caja. Entonces es solo una forma de saltar, saltar. Ahora, todavía no puedes hacerlo. Podrías. El problema se vuelve como, bien, quiero conseguir esto, quiero borrar esto, bien, quiero borrar todo este bit. Sólo estamos borrándolos a todos. ¿Por qué saltó eso ahí? Hay un montón de cosas que Esto es súper útil para una vez que sabes lo que estás haciendo. Tú al final de este curso, lo que vas a poder hacer es poder usar todo esto y saber cuáles son los flotadores y por qué Flexbox está manteniendo esto en el medio. No es difícil, solo tienes que aprenderlo. Así que saltar a estas cosas prefabricadas o plantillas de otras personas es genial. Pero solo una vez que tengas algunas habilidades básicas, te voy a dar algunas habilidades básicas para que tú también puedas ahorrar tiempo copiando plantillas o clonando sitios web o usando estos grandes trozos de diseño. ¿Algo más que quisiera mostrarle? Así que los bloques de construcción del elemento, los diseños, las trampas, bien, la vista previa. Y el otro está publicando, bien, entonces aquí arriba, podemos publicarlo y puede ser visto en Internet por la gente. Va a usar este tipo de dominio extraño. Como dije antes en el curso, puedes usar tu propio dominio personalizado. Pero por el momento vamos a usar esto. Y puedes publicarlo y la gente lo puede ver. Previsarla solo para ti, publicándola en el mundo. Construyéndola con elementos. Hacer trampa mediante el uso de flujos de trabajo, elementos que ya están hechos o algo así como pre estilizados y listos para funcionar. Bien, ese es mi breve resumen de hacer algo en Webflow. El proceso completo es breve por así decirlo. Además no olvides los lugares que necesitas estar. Recuerda que tu proyecto sentado es todo sobre este proyecto en particular. Bien, vuelve al tablero para ver todos los diferentes proyectos en los que estás trabajando y el editor hablará más adelante. Esto es lo que la opinión que potencialmente verá tu cliente si le das acceso para actualizar el sitio. Puede que no estés planeando hacer eso, pero ese es otro trozo. Bien, espero que eso haya ayudado, no haya ayudado. No lo sé. Siento que un breve breve recorrido es un poco agradable para ver a dónde va todo o va a confundir a la academia. Es una o la otra. De cualquier manera, pasemos al siguiente video y de hecho empecemos a construir algo desde cero para que conozcamos Webflow. Poco bono, supongo que a medida que llegamos a averiguar cómo eliminar un sitio web porque esto es todo para lo que era, era conseguir algo para arriba y tirarlo juntos. Entonces, si has hecho algo, lo vamos a eliminar. Así que voy a volver a mi tablero. Y voy a decir, aquí están todos mis proyectos. Esta en particular, voy a borrar. Tienes que ser muy tecleoso en todo eso porque es muy importante porque lo borran y nunca lo dejarías atrás. No copiar y pegar eso porque eso es hacer trampa. Bien, así que estamos limpios y listos para comenzar correctamente en Webflow. Te veré en el siguiente video. 8. Proyecto de clase 01: crea tu propio resumen de flujo web: Hola ahí. Vamos a hacer proyecto de clase alfas. Es una bonita y sencilla. Sólo va a generar un brief que puedes usar para seguirme conmigo en esta primera sección del curso. Y no quiero, bueno, no es muy divertido. Si todos hacemos exactamente lo mismo. Vamos a tener la misma estructura, pero quiero que todos tengan su propio cliente y breve y colores que sea único y que puedas usarlo para tu portafolio. Ahora los proyectos de clase están todos listados en tus archivos de ejercicios. Hay un PDF completo llamado proyectos de clase, para que puedas llegar a algo que se vea así. El primero es ir al generador de proyectos aleatorios. Es algo que hicimos aquí en bringyourownlaptop para que todos seamos únicos. Así que haz clic en Centrales de Webflow y todo lo que necesitas hacer es escribir tu pueblo o nombre o ciudad o lo que sea. Bien. No tiene que ser el lugar real. Simplemente no lo sé, no quiero saber dónde vives. Pero lo que queremos hacer es tener algo único para todos. Para que al hacer clic en esto, consigas tu club. Entonces este de aquí, usa el primero que consigas, no hagas trampa, no presiones reintentar. Bien, tengo la idea. Club de Apreciación Rotonda. Hay alrededor sobre Club de Apreciación, creo que en el Reino Unido. Pero todos van a conseguir algo diferente aquí en el breve que vamos a estar siguiendo es que puedo leerlo. Te han preguntado que este es un sitio web de una página para este club k esto necesita un sitio web simple. Va a ser un solo paginador solo para publicar próximos eventos, eventos pasados y patrocinadores. Este es su cliente ideal. Están en sus 60. Viven localmente. Y básicamente esta diapositiva es solo una forma para que el club no sea contactado cada vez que alguien quiera saber a qué hora nos reuniremos el sábado. Bien. Entonces ese es el objetivo de la misma. PNG descargado. No golpees reintentar solo usar el primero que tienes un a si lo haces, internet se romperá si lo golpeas tres veces. Bien. Nunca lo intenté tres veces. Descargamos, prepárate, y luego podemos dejar de construir en los siguientes videos. ¿Eso es todo? ¿Está en los proyectos de clase? Sí. A su nombre, descargó entregables. No hay nada para esto. Algunos de los futuros proyectos de clase, te pediré que tomes capturas de pantalla y las subas para éste. No, solo toma tu calzón. Opcionalmente, hazme saber en redes sociales que estás empezando, usas ese hashtag, iniciando el flujo de viento. Tienes que copiarlo y pegarlo para que veas otras personas empezando y avisarme. Estás muy emocionada. ¿Ya es demasiado duro? Porque voy a pollo más adelante en el curso, violeta, misma etiqueta y a ver como vas en. Te abrumaste más cuando empezamos a entenderlo , házmelo saber. Es genial ver a la gente comenzar con MyCourses. Tiene todos mis sociales. Sí. Envíame una línea. Bien. Consigue tu breve y te veré en el siguiente video. 9. ¿Cuáles son las secciones de contenedor vs en Webflow: Agárrense a sus sombreros, todos. Vamos a hacer de este un hermoso ejemplo de diseño. Vamos a lograrlo porque necesitamos aprender un par de cosas que necesitamos aprender debajo de tus elementos de diseño aquí. Los más importantes lo contienen en sección. Te voy a enseñar cómo hacerlo y te voy a presentar a este tipo de aquí, el navegante. Es súper útil. Bien, diseño Brilliance. Aquí venimos marcar primero. Hagamos un nuevo sitio. Si no has eliminado la fila uno o has creado un nuevo sitio, haz uno en blanco para comenzar, dale un nombre. Y mi único recuerdo se llama Dear kayaks day kayaks club de kayak. Ahí vamos. Genial. Y usted cita. Así que recuerda que este es nuestro diseñador. Se nos ha dado una cosa. Es este cuerpo. El cuerpo es todo lo que ves en el Lienzo actualmente es blanco y no hay nada en él. Si tengo una vista previa de mi sitio, este miembro Eso es difamación, no tengo nada. Haga clic de nuevo para volver a salir. Entonces vamos a aprender las dos partes más fundamentales de construir un sitio web. Vamos a dar click en este pequeño botón Agregar. Y bajo elementos vamos a ver secciones y contenedores. Veremos el resto de ellos más adelante. Pero estos son los dos principales. El contenedor generalmente está bien, esto es muy general. Tienes uno por sitio web y lo rellenaste lleno de diferentes secciones. Lo que quiero decir con eso es digamos que agrego a alguien aquí abajo. Tenía algo de topografía si la agrego aquí a mi amigo. Bien. Simplemente pasa el rato y está todo el camino por aquí a la izquierda y tú estás como, quiero que esté en el medio, como lo son los sitios web. Bien, entonces voy a deshacer eso usando Comando Z en una Mac, Control Z en una PC. Bien, entonces lo que necesitas para empezar es no golpear volcados directamente al cuerpo. Lo que haces es decir, bueno, ¿por qué puedo simplemente poner una sección en el problema, esta sección también, tiene el mismo problema que el encabezado? Se extenderá hasta donde esté permitido, que es todo el camino hasta el borde del cuerpo. Entonces no comienzas con una sección. Lo que haces es comenzar con un contenedor y puedes ver el contenedor. Tiene bordes, bien, así que como decir el lado soleado aquí. Simplemente es común ahora puedes expandirte hasta los bordes y te mostraré cómo hacerlo más adelante con un sitio web más complejo. Pero muchos sitios web simplemente pasan el rato en el medio aquí y tienen este espacio en blanco. Eso es algo común. No es central. Pero recuerda cuando los sitios web estaban a la izquierda de todos modos. Entonces tenemos este contenedor y se cuelga en el medio. Y dentro de ese contenedor agregamos, nuestras secciones son secciones. Las secciones son, echemos un vistazo a Apple. El sitio web se divide en secciones un poco únicas. Es una forma de delinear la información. Esto es una navegación. Se trata de una sección llamada navegación. Esta es una sección llamada caridad. Estoy adivinando estos esta es una sección llamada MacBook Air, iPhone 313. Bien. Entonces estas son diferentes secciones. Desplázate hasta la parte inferior, hay un pie de página, lo mismo con Sony. Tienen un nav, tienen este carrusel, tienen esto no quiero llamar a esto diferentes unidades de negocio. Y luego el fondo o últimas noticias y un pie de página. Entonces esas son diferentes secciones. Eso es lo que tienes. Y flujo de trabajo, terminarás con bastantes secciones. Entonces echemos un vistazo a nuestra vista previa. Así que esto es lo que estamos construyendo, ¿verdad? El tuyo va a verse diferente, pero hay un nav, ahí está lo que se llama una sección de héroes. Va a haber una sección patrocinada, nueva sección de eventos, y luego eventos pasados dentro de ahí. Se puede romper. Te voy a mostrar cómo hacer eso usando una grilla. Pero solo tienes algunas cosas grandes llamadas secciones. Bien, entonces lo que vamos a hacer es saltarnos la navegación y simplemente construir la sección de héroes. Y solo es más fácil aprender la sección de héroes y haremos el nav un poco más tarde. Entonces, ¿qué hice? Yo hice clic en, deshacer eso. Así que haz clic en más y arrastré mi sección a mi contenedor. Se puede ver un poco por dónde lo arrastras. Si lo arrastro ahí, va a estar debajo de mi contenedor. Malo. Entonces voy a deshacer y voy a arrastrar mi sección dentro del contenedor, el miembro, la sección simplemente poco extendida lo más lejos que pudo. Pero porque está dentro del contenedor, oye, queda atrapado ahí dentro. Tengamos un adelanto. No pasa mucho. Echemos un vistazo a agregar algo dentro de esta sección. Así que vamos más y agreguemos nuestro bateo. Así que agarra el golpe aquí abajo, haz clic en mantener, arrastrar, arrastrar. Recuerda que puedes exprimirlo en esta sección o debajo de este contenedor de sección, o simplemente aquí en el cuerpo. No es lo que quiero. Si lo consigues en el lugar equivocado, puedes simplemente hacer clic en mantener y arrastrar y decir, en realidad entrar. Ahí vas. Tenemos nuestro bateo dentro de la sección OWL. Agreguemos, bueno, podríamos seguir agregando diferentes secciones. Sólo voy a dejar uno en el, de momento, el que estamos llamando héroe porque quiero presentarte algo, dos cosas. Tengo mi bateo seleccionado, así que haz seleccionado tu bateo también. Entonces el fondo aquí, ¿ves tengo un golpeo que pasa a estar dentro de una sección que está dentro de un contenedor, está dentro de mi amigo? Estamos diseñando web Everybody. ¿Bien? Entonces estas son las migas de pan que te muestran dónde estás en el mundo, lo cual puede ser útil. Entonces quieres seleccionar el contenedor ahora. Sigue golpeando el golpeo. Se puede decir en realidad quiero hacer clic en el contenedor y darle al contenedor un color de fondo, que está aquí abajo en alguna parte, fondos. Entonces podrías hacer eso. Estos son prácticos. La otra cosa en la probabilidad, lo que más usarás o al menos yo hago, es que voy a hacer click en golpear. ¿Esto es igual que navegador? Navigator te muestra similar a las migas de pan en la parte inferior, pero tiene toda esta sangría que es realmente útil. Entonces mi golpeo pasa a estar dentro de una sección dentro de mi contenedor, que dentro del cuerpo, tendrás un amigo. 100% del tiempo, lo más probable es que tengas un contenedor y tendrás muchas secciones diferentes y muchos encabezados diferentes. Entonces navegar es útil para mover las cosas. Digamos que quiero agregar otro hit o decir un párrafo y edito aquí y aquí. Pero terminó en el cuerpo y en ella. Podrías arrastrarlo e intentar meterlo debajo del encabezado. Y eso funciona. Voy a deshacerlo para que no puedas hacerlo. Entonces navegar es realmente bueno para esto. Se puede decir, Aquí está. Está pasando el rato, no en el lugar correcto, está debajo del contenedor. Así que puedes decir que en realidad los quiero arriba al lado justo debajo de este encabezamiento. Entonces vas a arrastrar a una mafia, muévalas por ahí. Aquí vamos. Está justo debajo de estos, dentro de esta sección, pasando el rato con la calefacción. Se puede cambiar el orden que esta UVA, Ahí vamos. Entonces es una especie de buena manera de trabajar más con el código de lo que es. Lo visual, visuales geniales para un montón de cosas. Sin embargo, a veces puede ser complicado. Por eso te presenté al navegante. Vamos a darle estilo a esta sección un poco antes seguir adelante y ver los estilos probablemente. Entonces te podría gustar en el fondo, veamos nuestra vista previa. Quiero el fondo para este trozo aquí tengo una imagen en él. Voy a hacer la imagen un poco más adelante por el momento, vamos a llenarla de un color oscuro para que podamos ver el texto. Esto. ¿Colorea el párrafo? Aquí se podría decir párrafo. Me gustaría tener pergamino. Entonces deberías obtener tu opción de estilos aquí. Son un poco predeterminados, desplácese hacia abajo, desplácese hacia abajo, desplácese hacia abajo. Estoy usando mi rueda del ratón. Se puede golpear eso. Tú eres el encargado de averiguar cómo subir y bajar esta cosa. Bien, yo uso mi pequeña rueda de desplazamiento. Puedes arrastrar el pequeño deslizador o el lateral. Entonces ahí está, hay fondo. Entonces puedo decir u, etiqueta p o etiqueta párrafo tienen un fondo oscuro que te guste. Tienes que hacerlo El golpeo. Bien. Entonces quieres a menudo con estilos como este, bien, voy a deshacer, que es Comando Z en una Mac, control C en una PC. Te gustaría hacerlo a que probablemente esta sección, sé que hay cosa pegando aquí es toda una sección que quiero que quede oscura. Entonces, ¿cómo selecciono las manos arriba, manos arriba. ¿Cómo selecciono la sección? Sabes, hay dos formas aquí abajo puedo decir sección You. ¿Recuerdas las migas de pan? Primero hice clic dentro de él. Entonces sabe un poco en qué parte del mundo estás. En el párrafo. No quiero que esta sección tenga un fondo, color, fondos transparentes. Sólo voy a usar un gris oscuro por el momento. Y luego lo cambiaremos a una imagen. Ahí vas. Empezaste tu sección. Acabas de crear el primer bit de CSS. Ni siquiera lo sabías. Entonces usamos las migas de pan para seleccionarlo. Podrías tal vez si vuelvo a hacer clic en mi párrafo, estás como, Oye, el color de fondo se ha ido. ¿Cómo hago clic en la sección? El panel del navegador es probablemente lo que más uso, se podría decir, no el párrafo. Haga clic en él. Ahí vas. Ahí está mi color, al que luego puedo hacer clic y con este recogedor de color aquí. Y si no estás acostumbrado a ellos, simplemente haces clic en cualquier parte de aquí. Una vez que hago clic y arrastre, a menudo, no tengo que hacerlo, pero solo un poco encontrar un color. Y para elegir un color diferente, puedes arrastrar este deslizador de tonalidad, ¿de acuerdo? Si quieres un azul oscuro, si quieres un verde, arrastra el control deslizante a verde y luego tipo de selección dentro los tonos y saturación del verde. Pero voy a ir todo el camino hasta aquí, solo escoge un gris lavado y luego como que acaba de entrar aquí y ya terminamos. Bien, eso es. Hemos agregado un contenedor, como que nos mantiene alejados de los bordes. Y de adentro hacia afuera. Primera sección, vamos a agregar varias secciones a nuestro único contenedor. Y Buddy está ahí para todos los rurales sentados en el fondo manteniendo a todos en el lugar correcto. Bien, eso es. Estructura básica, contenedores, secciones. Pasemos al siguiente video. 10. Cómo crear clases de CSS en Webflow: Hola a todos. Este video está aprendiendo todo sobre qué clases son las clases CSS en Webflow. ¿Cómo le damos estilo a las cosas? Es largo porque es un tema relativamente importante que es bastante extraño para las personas nuevas en el diseño web. Si ya sabes qué clases CSS, probablemente lo veas de todos modos, hay algunas peculiaridades de Webflow que necesitamos obtener antes de poder seguir adelante con el curso. Bien, vamos. Entonces, ¿qué es una clase? Una clase, una clase CSS. La versión larga es una forma de estilizar los elementos de la página, les da color y estilo y relleno y lo divertido de usar. Así que arrastramos estos elementos de nivel de bloque a la página, solo estos como cosas. Acabamos de agruparlos. Y luego vamos a querer estilizarlos, los seleccionamos y por aquí, cambiar el estilo. Hicimos el fondo del gris antes. Entonces hagamos otra. Vamos a hacer clic en nuestro bateo. Bien, y echemos un vistazo a cómo estamos siguiendo el diseño. Recuerda que puedes elegir lo que quieras por tu cuenta. Vamos a darle estilo. Entonces tengo mi bateo seleccionado. Ahora bien, la forma correcta de hacerlo es entrar aquí y decir: Bien, tengo mi bateo seleccionado. Voy a hacer click aquí y darle un nombre. Entonces voy a decir que esta es mi va a ser guaridas golpeando, dale un nombre. Se puede ver por aquí que se le aplica. Entonces voy a ir al estilo y voy a decir aquí abajo y tipografía, desplácese hacia abajo. Ahí está mi color. Voy a decir, haga clic en la cosita ahí y diga en realidad quiero que el blanco se ponga blanco. Realmente no importa qué orina Hugh, siempre y cuando hagas clic en mantener y arrastrar, arrastrar, arrastrar, arrastrar, arrastrar. Algo así como todo el camino hasta esa esquina y lo voy a pasar un poco. O puedes abrir si, si, si, si, si ese es el código para el blanco en con lenguaje hexadecimal, ¿podemos presionar Enter en mi teclado? Yo no, sólo voy a hacer click. Bien, y lo hemos estilizado pegando sabor blanco. Si hago clic en él, tiene una clase CSS que llamé baile golpeando K y dice que las cosas sean blancas. Puedo reutilizarla. Bien. Podría llamar podría decir en realidad este párrafo aquí que agregué. Tú también, si hago clic aquí, puedo decir, mira, aquí están todos mis otros que he hecho. Mis clases existentes que pueden ir a bailar, golpear, tú vas, daneses golpear realmente no hace nada. Todo lo que hace es hacer las cosas blancas. Este es el único trabajo en el mundo que hoy está pegando. Voy a usarlo así podría ser amargo, texto blanco frío. Yo sólo puedo aplicar a diferentes cosas. Así que ahora has creado tu primera clase CSS llamada bateo o densidad en mi caso. Entonces, seleccionar algo y agregar una clase a propósito es lo que quieres hacer. flujo de trabajo de Bond sabe que la gente simplemente hackea y lo hace. Y lo que hacen es que en realidad hacen clases para ti. Ya hicimos uno, ya hicimos énfasis. Esto es como tu segundo estilo CSS. Recuerden cuando teníamos nuestra sección, los antecedentes. Entonces, ¿cómo hago clic en esta sección? Recuerda, puedes hacerlo aquí abajo. Voy a hacer clic en el interior primero y decir en realidad no la calefacción en la sección. Haga clic en eso. O tal vez puedas ir a tu navegador y hacer click en. La sección tiene un estilo encabezado, un buen estilo. ¿Ves que se les nombró automáticamente por nosotros, esa cosita azul que antes no estaba ahí? El sitio no nació con él. Se acaba de editar cuando inicias una cadena para cambiar el color y olvidaste nombrarla. Entonces esto es todo, solo los nombraré para ti. Entonces terminarás con mucho de eso, especialmente cuando eres nuevo. Entonces déjame mostrarte un ejemplo. No sigas a lo largo. Entonces voy a agregar una nueva sección. Sección. Voy a arrastrarlo, tratar de meterme en el lugar correcto. Bueno, no funcionaron. Bien. Deshacer, deshacer. Voy a ir a la sección. Se puede poner una dentro de la otra. Va en contra de las reglas de Internet, o al menos las reglas del flujo de trabajo. Los elementos de sección no se pueden anidar uno dentro del otro. Entonces estoy de acuerdo, voy a ponerlo aquí abajo en algún lugar donde puedas ver que su cuerpo en la parte superior ahí, puedes llegar un poco más alto, está dentro del contenedor, que es un poco donde lo quiero dentro del contenedor, no dentro de esta otra sección por y, déjame un poco conseguirlo en el lugar correcto. Aunque no lo consigas en el lugar correcto. Quiero mostrarte algunos, en realidad, no, terminemos este ejemplo. Así que voy a meterme en el lugar correcto y voy a darle estilo. Y en mi pequeña maqueta aquí, se puede ver que son fondos blancos. Oh, genial. Voy a hacer fondo blanco. Vaya, por qué no va a ser tan útil en este momento. Escojamos cualquier fondo antiguo. Entonces por aquí, y lo que quiero que hagas, voy a cambiar el fondo. Mira esto, mira este pedacito aquí arriba. Voy a decir, ¿podemos desplazarlo hacia arriba para que esté más cerca? Ahí es peor. Voy a decir que vas a tener un color de fondo de rojo muy brillante. Ya ves que decía: Oye, no le diste nombre, así que voy a nombrarlo para la sección dos. Cuando seas nuevo, terminarás con la Sección 42, lo cual no es muy útil. Entonces lo que quieres hacer es ser un poco más de propósito. Voy a deshacerlo. Quiero que veas si puedes agregar tu sección, dale una oportunidad. Entonces vamos a darle un nombre antes de darle estilo. Bien, voy a llamarlo sección. Voy a usar el caso del título aquí. No importa cómo le pongas nombre a tus clases CSS. Se les puede dar cualquier nombre antiguo. Creo que tienen que empezar con una letra, no con un número. Eso es importante. Va a ser sección y estos van a ser mis patrocinadores para dejarla entrar. Lo puedo encontrar fácilmente y ahora voy a elegir un color realmente interesante, color incorrecto, fondos. Tenemos que hacer clic aquí para ver el color. Quiero arrastrarme hasta que consiga algo. Sólo voy a usar otro gris por el momento. Estoy siendo un poco más decidida ahora que he creado un estilo, lo apliqué a la sección llamada patrocinadores. Y tú estarías como, Guau, ¿qué hacemos con el que ya hicimos? Entonces vamos a seleccionarlo. Vamos a hacer click aquí. Vamos a hacer algo. Bueno, vamos a darle click aquí abajo y digamos que quiero esta sección seleccionada. Bien, en lugar de una sección genial, porque ese no es un nombre muy bueno, simplemente puedes hacer clic derecho sobre él y simplemente puedes hacer doble clic en él y decir sección. Y éste se llama Mi Héroe. Bien, entonces ahora tengo una sección de héroes y tengo una sección. Ahí vamos. Después de un tiempo, te acosturas a hacer nombres primero, pero para el principio terminarás haciéndolos y nombrándolos después, y eso está totalmente bien. Ahora bien, lo siguiente a tener en cuenta sobre las clases CSS es que más a menudo es útil darle estilo a la sección o a lo que se en lugar de los elementos en sí que diseñamos. Usamos el bateo de Dan y lo ponemos en ambos. Y eso está bien. Puedes seguir haciendo eso. No tiene nada de malo, pero probablemente sea mejor. Vamos a deshacernos de él. Entonces, ¿cómo quitamos una etiqueta por aquí, cayó abajo. Hay uno que dice que acaba de quitar ese. Y voy a quitarlo de aquí también , quitar esa clase. Entonces se ha ido. ¿Qué? Es más fácil en lugar de crear una clase al hacerlo a ambos. Dices, en realidad, quiero que todo en mi sección, el héroe, tenga una tipografía aquí abajo que sea blanca. No es realmente, no tenías que hacerlo de esa manera, pero ves que es más fácil. Es más fácil darle estilo al contenedor que está en los elementos individuales, muchas veces diciendo con el relleno, Veamos nuestro ejemplo. Hay un gran empujón de este lado. Entonces podría ir golpeando si no le doy un nombre y le agrego algunos, digamos algo de relleno en el lado izquierdo aquí haciendo clic, sosteniendo y arrastrando. Se puede ver al instante hizo algo llamado golpear. Y si hago otra, va a estar pegando 2345674. Así que no quiero hacerlo de esa manera. Me voy a deshacer de él. Eliminar esta clase para poder nombrarla, y luego agregar el relleno, que es un poco mejor, pero en realidad es más fácil. Sólo tienes que ir a la sección. Bien, entonces estoy dando click en mi sección de héroes. Voy a decir que quiero relleno para todo lo que hay ahí dentro. Haga clic en mantener presionado y arrástrelo, y todo viene a lo largo del viaje. Lo mismo con el de arriba. Penny, desde lo alto hasta éste es un poco complicado. Lo arrastras de la manera que querías empujar. Bien, entonces voy a deshacer eso. Entonces quería que el número subiera. Entonces lo arrastré hacia arriba. ¿Quieres arrastrarlo hacia abajo? Vamos. ¿Cuánto relleno quiero? Y sólo vamos a adivinarlo por el momento. Voy a mirar hacia atrás aquí y decir algo al respecto. Eso se ve bien. Quiero un poco de relleno en la parte inferior. ¿Cuánto relleno hay aquí abajo? Más o menos lo mismo que la parte superior. Entonces voy a decir tu 23 para que pueda dar click en la parte inferior y decir 23. Ahora, tengo algunos problemas con los números. Me doy cuenta en 23 es 53. ¿Qué soy, wade rápido? Probablemente lo volverás a ver en el curso. Mis ojos, mi cerebro y mi boca. A veces no lo llaman. Así que de todos modos, hemos hecho muy a propósito nuestra sección. Le hemos dado un color de fondo. Bien. ¿O es color de fondo? Estoy desplazándome hacia abajo . Está ahí. Y hemos visto que todo dentro de aquí tiene un color de texto de blanco y algo de relleno dando vueltas. Probablemente algún acolchado en este lado también. Arrástralo como quieras que vaya. Vete tú. Mira el ejemplo tan lejos. En realidad, en realidad no necesita eso. Quiero que ese párrafo entre un poco ahí, pero quiero otro por aquí. Entonces ahora este es un muy buen ejemplo donde en realidad si hago el relleno para todo, estamos en el párrafo toma digamos, vamos, vamos a cruzar todo el camino. Aquí vamos. El bateo no va a ser lo suficientemente largo. El ego, entonces aquí es donde en realidad el relleno para el contenedor no es tan útil. Entonces lo que puedes decir es Go, tú, en realidad, voy a tender a rellenar porque solo vas a apagarlo para la sección. Tú para apagarlo. Hay un par de formas en las que puedes golpear. Cero es una especie de trabajo. ¿Bien? Entonces quitando algo, ve azul y éste no es azul. Azul significa que he hecho que sea cero. He dicho que sea cero. Esto está atenuado porque es como que solo estoy adivinando. Lo que sea que no esté puesto a cero simplemente pasa a ser cero. Estoy siendo muy específico aquí. Entonces, lo que puedes hacer es mantener presionada la tecla Opción en una Mac, tecla alt en una PC y hacer clic en algo. Ya ves cuando gris solo un poco decir es, no estoy diciendo ser cero, solo sé cualquiera que sea tu defecto, solo ve por tu día. Y ahora lo que quiero hacer es decir aquí este texto de párrafo. Voy a decir que eres mi párrafo. Voy a usar la palabra, voy a usar la letra P, k, luego un espacio porque probablemente tengo más texto de párrafo en todo mi documento. Entonces va a decir párrafo para el héroe, pequeña clase especial que vamos a hacer. Bien, créalo. Puedes presionar Enter o hacer clic en esto. Quiero que esto tenga algo de relleno por aquí, que es diferente del tipo de sección. Y lo que pasó ahí. ¿Por qué no es una especie de escuchar la sección? Esta sección es un poco como un padre. Bien. Está diciendo, bien, haz estas cosas que los niños dentro de aquí pueden anular y se llama especificidad. Hablaremos de ello, es más específico. Por lo que este párrafo toma como obtener algunas instrucciones vagas desde lo alto de arriba. Si recibe algunas instrucciones más específicas, lo anulará y dirá, oye, sí, pero quería hacer otras cosas para meter las cosas genéricas en el envoltorio exterior. Ahora casos algo llamado Héroe de la Sección. Y luego si quieres hacer cosas un poco más específicas por dentro, dales su propio nombre de clase. Y en nuestro caso, solo estamos haciendo relleno. Ahora, los nombres de clase les dan ansiedad a todos. Y aunque seas el mejor, el más diligente, yo mismo lo estoy señalando. Eso no lo ves, pero soy un poco diligente y me gustan todas estas cosas y lo entiendo todo. Siempre terminas con batear 17. No puedo recordar, tal vez no tan mal. Terminarás con clases en las que comienzas con las mejores intenciones y terminarás haciendo que funcione, pero tal vez no tan organizadas como esperabas, pero vas a mejorar. Y en este curso notarás que hay un poco de tres secciones para CSS, solo introduciendo un poquito ahora lo suficiente para ponernos en marcha. Y luego más adelante vamos a hacer un nivel dos y el nivel tres será de alto núcleo código CSS es, al final hablando de código, vamos a echar un vistazo rápido a dos cosas que quiero hacer. Quiero ver el código y el panel del navegador. Esto no tiene panel de kit porque es rápido y hay mucho como hacer clic en esto y luego figurar, digamos que quiero arrastrar esto a la siguiente sección, probablemente pueda hacerlo porque no es así de duro. Oh, muy bien. Punto. Tengo tres cosas que decirte. El primero es que el panel del navegador es simplemente útil cuando siempre está fuera. Entonces significa que cuando estás haciendo cosas en el panel del navegador y estás como, quiero arrastrar esto. Puedes ver que no desaparece, se queda ahí todo el tiempo y es fácil de arrastrar directamente a esto. Se puede decir que quiero golpear dentro de la sección, lugar de intentar arrastrarla a la página, puede hacerlo. No tiene nada de malo. Y deshacer el panel del navegador si vas a él. Bien. Porque de lo contrario se cierra automáticamente y es súper práctico estar abierto todo el tiempo. Para hacer eso conmigo, te acostumbrarás. Y esta opción aquí arriba, dice pin el navegador, no cierres. Fue a las cosas. ¿Cuáles fueron los otros dos? ¿Esperas ahí? Oh, sí. Lo recuerdo. Entonces echemos un vistazo porque dije que has estado escribiendo código, ejecutando código. ¿Cómo lo sabes? Puedes subir aquí y esta es una opción que dice Código de exportación. Puedes hacer click en él para exportar todo lo que necesites pagar para contar. Pero se puede ver una parte de ella aquí. Está cargando el código. Vamos. Carga de código. No estoy seguro de mi normalmente siempre carga. Vamos a cerrarlo e intentarlo de nuevo. Sí. Bien. Entonces, ¿qué codificamos escribimos? Hemos escrito algo de HTML, algo de CSS y algo de JavaScript HTML. Entonces hemos agregado, sabíamos que había una etiqueta corporal. Mira eso. Eso es lo que es. Entonces, si lo estabas haciendo, tengo como elementos esenciales de diseño web. Estaríamos escribiendo este código y diciendo body dentro de una clase div llamada container. Dentro de eso hay algo que se llama sección. Estamos escribiendo código y es bonito y bonito y bien presentado. Es fácil de leer, pero solo lo estamos haciendo una manera más visual. Nunca hay que mirar a este lado. Simplemente es interesante. Creo que lo es de todos modos. divs son solo contenedores genéricos, divisiones divididas etiquetas. Tenemos uno llamado contenedor que mantiene horas en el medio. Bien, voy a la sección y le dimos un nombre de clase de sección aquí. Tenemos otra sección aquí le dimos un nombre de clase, bien, entonces div clase de secciones, patrocinadores. Entonces este no es el HTML. Hemos dicho un poco, aquí hay una caja, se llama patrocinadores de sección. Por aquí en mi CSS, lo hemos diseñado. Ya dijimos, bien, donde esta mi sección patrocina ahí está ahí. Y esto es lo que quiero que le peines. Esta es la clase CSS que has hecho. Esta clase se llama patrocinadores de la sección CSS. Y este color de fondo, Eso es lo que hemos hecho. Le hemos hecho un poco más a la sección llamada héroe. Agregamos algo de relleno y color de fondo y color de la fuente. Recuerda que Dan está pegando ahí dentro. Ya no necesitamos, pero fijó el color a FFF, que es el blanco. Y algunos pegando al azar uno que hicimos. Bien, entonces estamos escribiendo HTML, CSS, y el JavaScript. No estamos realmente tocando en este momento ahí, pero se está produciendo para nosotros. Tu Coda. Por eso es como que no hay codificación de código. La otra cosa que voy a mencionar mientras estamos aquí, puedes ver que los nombres de clase tienen, si estás haciendo mi otro curso de diseño web, usamos código VS, en realidad tendrías que saber que un nombre de clase comienza con un punto y luego tiene que escribir, tiene que ser minúscula. Puedes tener espacios, todo este tipo de cosas. Mientras que Webflow dice, no queremos enseñarle a la gente que escribe nada ahí dentro. Y te lo convertiremos a la sintaxis correcta, que es que no hay espacios, así que solo ponen guiones donde pongo espacios y lo hicieron todo en espacios y lo hicieron todo minúsculas automáticamente para nosotros. Nunca tenemos que entrar aquí. Creo que es útil. De todas formas. Echa un vistazo a tu código, mira lo que hiciste. Ahora, dije que solo había dos cosas y luego había una cosa. Esto lo viste. Yo lo ignoré. Entonces es un buen ejemplo, bueno, es que esta cosa de aquí se está contando un par de cosas. Se está diciendo que sea este párrafo aquí al que nombré. ¿Y eso qué nos dice que hagamos? Nos dice que quiere todo lo que nos está diciendo que sea es que solo vemos que sea lo que era, se rellena, eso es lo único que le hicimos a esta cosa. Todo lo demás que lo hace blanco, que lo empuja desde este lado es, viene de. ¿De dónde viene eso? Así es. Viene de esta sección a sección dice B, esto de arriba, esto de lado, y ser un color de texto de blanco. Las llaves son azules cuando se hacen las cosas y todo es blanco o gris cuando no has dicho que hagas nada, discutiremos qué colorea el MBA más adelante. Pero esta etiqueta aquí, este texto de párrafo está recibiendo algunos comandos de. Se trata de obtener un comando específico conectado a él, diciendo ser relleno en este lado. Entonces cuando lo arrastre por aquí, Eso es lo único que viene con él es esta cosa de aquí porque todo lo demás que lo hace blanco y lo empuja hacia abajo desde la izquierda. Ahora vamos desde arriba y la izquierda viene de este tipo, de esta sección de aquí. Entonces eso es algo interesante de entender. ¿Ayuda lo hará más confuso desde el principio? ¿Por qué no solo lo aplicamos a todo para que cuando lo arrastras aquí abajo, esté blanco y lo apañe?. Eso se puede hacer. Simplemente es muy repetitivo, sobre todo si entonces digo que estoy haciendo un sitio de blog y tengo mis blogs, probablemente solo tengo cuatro posts porque eso es lo más lejos que consigo antes de perder intereses. Pero aunque me encanta hacer videos. Pero digamos que eres un ávido escritor de blogs o tu cliente lo es, y haces mil páginas. Y has aplicado uno a cada pedacito de los textos de párrafo y ellos dicen: ¿ Puedes hacer que la fuente sea más grande? Puedes decir que no, porque vas a tener que encontrar a cada uno, hacer clic en ellos e ir y cambiarlos todos a algún otro estilo. Mientras que si solo lo haces a los contenedores, es relativamente fácil porque todo lo que hay dentro viene de la derecha. Dices que en realidad quería llevarnos ahora a ser horrible leer contraste, fácil. Y si hubiera mil bits de texto en esta sección, podría ser como la sección del artículo. Bueno, la sección de entradas del blog, todo viene a lo largo para el paseo. Bien, hubo una larga, pero es bastante fundamental para el resto de este curso, Comprender las clases, cómo se aplican, y un poco de especificidad. Especificidad es una palabra difícil de decir, ¿de acuerdo? Y es una manera de decir, voy a ser muy específico para este bit, pero todo lo demás es simplemente genérico. Sígueme a menos que te diga que hagas lo contrario. Bien, eso es. En el siguiente video. 11. Cómo agregar imágenes con margen en el flujo web: Hola a todos. Este video, te voy a mostrar cómo traer una imagen. Vamos a mirar el panel Asset y veremos agregarle una clase y experimentar con las diferencias entre margin y padding. Bien, vamos a meternos en ello. Ah, y también te mostraré una manera de obtener imágenes de uso comercial gratis para tu proyecto. Es bono. Bien, ahora vamos a meternos en ello, bien, primera parada. Consigue tu imagen y para qué es el club para el que lo estás haciendo. Y puedes ir a algo como unsplash.com. Unsplash es solo un gran uso comercial imágenes gratis. Bien, es bastante increíble. Voy a hacer clic aquí y escribir en la lista de malabares. Solo estoy asumiendo que tus clubbers hacen malabares y encuentran alguna de estas imágenes aquí abajo y dale esta pequeña opción aquí dice descargas para encontrar algo para tu club. El tuyo podría ser, no sé, coser o seguir haciendo malabares con lo que sea. Encuentra tu imagen, descárgala y prepárate. Entonces ya tengo mi imagen, está en los archivos de ejercicios. Entonces lo primero es que tenemos que agregar una imagen, bien, así que agrega esta primera pequeña pestaña aquí, bien, y abajo aquí hay una llamada Media y su imagen. Haga clic en mantener presionado y arrástrelos y simplemente colóquelos en donde necesita ir. Se puede, pero por encima una pequeña línea azul. Bien, tengo una imagen. Vamos a elegir imagen. Esta pequeña sesión sale y puedes hacer algunas cosas básicas. Voy a usar elegir imagen. Y lo que hizo fue que abrió esta pestaña por aquí, su ficha de activos. Hemos estado en la pestaña Agregar y ese Navegador, pero ahora tenemos esta pestaña Activos. Aquí es donde guardamos todas nuestras imágenes. Puedes subir tu imagen. Vamos a hacer esto e ir a navegar e ir a buscarlo. Lo que me parece súper útil es solo arrastrarlo ahí dentro. Entonces, ¿dónde están mis archivos de ejercicios? Entonces aquí está el mío. Estoy en el club de la perspicacia. Tengo una imagen aquí. Y es realmente genial porque si tienes 20 de ellos, solo tienes que hacer clic y arrastrarlos. Aquí vamos. Aquí está mi imagen, está cargada, bien, y ahora lo que puedo hacer es porque tenemos la seleccionada. Si hago clic en eso y simplemente lo arroja ahí dentro. Bien, entonces mi pequeño titular de lugar seleccionado, solo hizo clic en él y simplemente se inyectó ahí dentro. Bonito. Y es demasiado grande. Simplemente puedes agarrar el borde de la misma. Mira este pequeño punto de anclaje aquí abajo. Haga clic en mantener, arrastre. No tienes que mantener presionado nada, solo arrástralo hacia arriba y cambiará tamaño en línea. Ese tipo de tamaño. Estoy viendo mi maqueta que hice, algo así. Aquí vamos. Entonces en cuanto a ajustes de imagen, puedes ser un poco más menú y puedes llegar a la configuración desde él. Porque en estos momentos arrastrando su multa. Se puede ver un poco los números ahí, pero dicen que tiene que ser a 50 Exactamente. Puedes ir a este pequeño cog aquí, configuración de la imagen o en realidad hay una pestaña por aquí, así que voy a cerrarla. Ciérralo hacia abajo. Aparece lo mismo. Mira este dentado aquí. Son lo mismo, dos formas distintas de llegar a lo mismo. Ese dentado, este dentado. La diferencia entre este piñón, tiene un poco más de configuración, un poco más avanzado. Así que lo básico, sin embargo, reemplazó la imagen aquí y se puede escribir en el tamaño. Entonces voy a decir, y esto necesita 50 y dejo la altura a auto. Si tecleo la altura, hagámoslo 20 pixeles. Lo aplaste. Entonces quieres dejarlo como auto eliminándolo. Entonces no hay nada ahí dentro. Ahí vamos. Bueno, haz 50. Aquí vamos. Bien, hablaremos más de imágenes más adelante, pero eso es todo por el momento. Prometí que hablaremos de relleno versus margen. ¿Bien? Entonces quiero agregar un poco de espacio entre mis párrafos son muy apretados. Entonces lo que quiero hacer es agregar una clase CSS, bien, ¿y cómo lo hacemos? Lo tengo seleccionado. Yo sólo podría ir a Styles y empezar a arrastrar cosas. ¿Cuál va a ser el problema? Así es, automáticamente me va a crear una clase a la que pueda renombrar más adelante, lo cual está bien. Pero lo que quiero hacer es ser especial y decir, quiero ir imagen. Y éste va a estar frío. Capital I. No tiene por qué serlo. Sólo sé que es una garrapata. Tengo héroe de imagen. Entonces lo puse al revés porque va a haber una imagen que va a estar tal vez en el pie de página o en la sección de patrocinadores. Así que siempre pongo imagen primero y luego las otras cosas en segundo lugar, solo para que sea más fácil encontrarla más adelante, o mi imagen salsa juntos en lugar de héroe al frente. Aquí vamos. Voy a hacer eso. Pulsa Enter en mi teclado. Y voy a decir, voy a agregar algo de relleno o margen ahora con un relleno de imagen y margen no importa. Así que voy a arrastrarlo por este de arriba. Así que ahí tengo un poco de espacio. Bonito. Notarás que si lo deshago, lo deshago, mantienes pulsada la Opción en una Mac, alt en una PC y haces clic en Bien, y se deshará de ella. Notarás margen si lo arrastro hacia arriba. Bien, aunque no lo parece visualmente ¿ Algo más? Bien, así que el relleno y el margen para una imagen es más o menos de lo que no tiene que preocuparse. Usted puede hacer cualquiera de las dos. Bien, donde se pone diferente, es decir esta sección de aquí, así que solo estoy dando click en esta área aquí. Hicimos relleno antes. Digamos que quiero más pero sólo voy a usar margen porque no importa. Dan dijo antes de la sección mira esto. Si arrastre el margen hacia abajo. Bien, bueno arriba, ves la diferencia entre margen y relleno. relleno es los límites internos de lo que se considera esta sección. Margin lo aleja de su siguiente elemento. Por lo que agrega espacio entre ellos. A pesar de que, digamos que si lo hago a esta etiqueta p, sigue haciendo lo mismo. Se va a abrir y relleno lo va a empujar desde el interior de la etiqueta p. Y el margen va a empujar el exterior de la etiqueta p algo así como lejos del siguiente elemento. Va a tener el mismo aspecto, que esto, así que si arrastro esto hacia arriba, me sale algo de espacio. Bien. Hazlo. Si uso relleno, arrástralo hacia abajo. Es raro, ¿verdad? Lo arrastras hacia arriba ese acolchado interno ahogado. Se puede ver un poco en estas cajas es la perspicacia que es el exterior. Pero lo que puedes ver es esto realmente lo mismo? Al igual que si hago click off, tiene la misma cantidad de espacio con que uso margin o padding, así que realmente no importa aquí o una imagen, pero algunas cosas hacen así. Quiero que tengas algo de espacio en la parte superior, ¿de acuerdo? O algún acolchado en el interior. Se te da la idea. Lo haremos un par de veces más aquí. Pero en este caso, si buscas un rol, bien, Es mejor para este caso usar márgenes que relleno porque puedes ver que este cuadro está todo el camino hasta aquí. No hay nada realmente malo en ello. Voy a recordar Option o Alt, dale click. Es mejor como alejarlo con margen. Entonces la etiqueta p está separada de este bit aquí. Hay una brecha en el medio. Tiene más sentido más adelante cuando hacemos que las cosas se puedan hacer clic. Si quiero que esto sea clicable, no quiero como tal vez todo esto clicable también. Solo quiero que se pueda hacer clic en la etiqueta p. Aquí vamos. Entonces voy a ¿Qué he hecho? Voy a deshacer eso lo que estoy haciendo. Entonces tu Command Z o Control Z en una PC. Y tengo algo, en este caso, margen en la parte superior de mi imagen. He agregado una clase llamada héroe de la imagen, examiné una imagen y es increíble. Podemos llegar a la configuración haciendo clic en esto o con su seleccionado pasando por aquí. Lo mismo, lo mismo. Eso fue algo extra. Bien, imágenes importando al flujo de trabajo. 12. Imágenes de fondo cómo superponer texto en el flujo web de imagen: Hola a todos. En este video te voy a mostrar cómo agregar una imagen de fondo que la llene un poco para que los textos puedan ir en la cima. También te voy a mostrar cómo oscurecer la imagen para que puedas tener textos sobre la parte superior que sean legibles. Bien, vamos a ponernos en marcha. Bien, para agregar la imagen de fondo, primero debe elegir una imagen de fondo. Bien, así que de nuevo, si quieres una imagen gratis para tu fondo, para tu club particular que estás construyendo. Ve a unsplash.com y escribe y encuentra algo. Es mejor si tiene un fondo oscuro. Vaya, no tiene por qué serlo. Si vas a tener un fondo claro como este, probablemente tendrías que tener texto oscuro en él. Y busqué algo para mí que tenga un fondo oscuro, así estaría bien porque el texto aparecerá muy bien en él. Para agregar tu imagen de fondo, lo mejor es agregarla primero a los activos, bien, así que voy a conseguirlos ficha Activos aquí. Y le das a la subida y la subes o lo haces, yo sí lo encuentro. Y la imagen dos aquí, voy a simplemente arrastrarla. Se va a subir ahí arriba. Es un archivo muy grande. Te voy a mostrar cómo conseguir estos más pequeños más adelante, pero bonito archivo grande. Y lo que vamos a hacer es agregar el gráfico de fondo. Observe como su propia unidad, no es como una imagen que empujamos detrás de todo como en otros programas de diseño. Lo que hacemos es esta sección aquí es útil pequeña sección que nombramos héroe. Vamos a decir que tienes antecedentes, ya hemos hecho antecedentes antes. Mira aquí abajo es un color de fondo de gris. En realidad lo que quiero es que veas que dice imagen y degradado. Entonces este plus aquí, fondo, quiero agregar nuestra imagen, que es genial. ¿Qué gradiente? Bien, si quieres hacer eso y donde dice imágenes, su elige imagen y yo hago clic en eso. Se abre el panel de activos y tienes que decir éste, por favor. Le vas a dar un segundo y va a ser enorme. El tuyo puede ser pequeño, depende del tamaño. Bien, entonces para empezar con mentes en la costumbre, bien. Lo que significa que realmente es el ancho aumentado que era que lo descargué. Es masivo. El que probablemente quieras es tapar. Hay costumbre que puedes escribir en cualquier tamaño antiguo. Se puede decir que quiero que sea de 30 píxeles por 30 píxeles. No podrías hacer eso. Sin embargo, es muy común, solo para ir a cubrir qué color hace es en realidad estira la imagen para que se ajuste a cualquiera que sea el tamaño de la sección. Si lo decido, voy a agregar dos etiquetas P, lo que dice si copio esta etiqueta p por Comando C en un Mac, control C en una PC, y luego pegarlo comando o control V que hice extra. Pero va este trasfondo, soy más grande. Entonces voy a mostrar más. Y lo vuelvo a pegar porque simplemente sigue llenando el fondo. Lo cubre. No puedo ver ninguno de este lado de la imagen ahora que es un poco doloroso que podrías ser como. La parte central de este diseño es este hermoso río. Quiero que esté en el medio y puedas hacerle algunos cambios. Así que recuerda la sección más pesada seleccionada porque ahí es donde se aplica el fondo. Y escuchar y fondo, voy a dar click en mi imagen. Y tienes algunas opciones. Entonces se puede decir, puede ver la posición que dice, voy a iniciar la parte superior izquierda y extenderse, puede decir en realidad solo creció desde el medio. Entonces, cuando vuelva a dimensionar, va a tener el centro de la imagen en el medio. Eliminemos esto. Ahora un poquito. El fondo ha ido un poquito ese pedacito superior poco de los lados, qué cartílago. Entonces ese es el tipo de intercambio y estarías como, oye, quiero que sea pixel perfect. Esta imagen es perfecta. Su producto shot, necesita funcionar perfectamente. Ahora bien, el problema de ser así para diseño web es la cantidad de dispositivos en los que necesitas mostrarlo. El diseño responsivo es un término utilizado para mostrar en el escritorio. Y ella consiguió este de aquí. ¿Qué aspecto tiene esto en una tableta? Es de un tamaño completamente diferente. El formato es diferente, por lo que el contenido redimensiona y reajusta para adaptarse a ese tamaño. Y también lo hace la imagen. Entonces, si lo consigues perfecto y de escritorio, no va a quedar perfecto. En tableta. No vas a poder ver cada píxel y enmarcarlo perfectamente. A diferencia del diseño de impresión donde puedes ser realmente perfecto. Necesitas ser, necesitas ser 90% buen diseño web desafortunadamente. Así que baje hasta aquí, muestra un poquito de ello. Te voy a mostrar cómo arreglar todos estos diferentes puntos de quiebre a medida que avanzamos. Pero es algo de lo que hay que tener cuidado cuando estás diseñando cosas. Y sobre todo las imágenes de fondo cubre bien porque se adapta para todos estos diferentes tamaños de dispositivo que solo estaban diseñando para un escritorio genérico. Ya has visto cuántos portátiles y grandes pantallas y pantallas hay ahí fuera. Hay tantos que tu sitio necesita para responder a todos ellos. Entonces volvamos a hacer clic en nuestra sección de héroes y veamos un par de cosas más. Antes de irnos, voy a volver a dar click sobre mi imagen. Por lo tanto, la restricción de cobertura es más como que va a mostrar la imagen completamente la, la roca abajo por el fondo aquí. Lo exprimirá en la especia proporcionada si lo hago en el móvil ahora, se apretará y luego teja. No lo uso mucho. Bien. Si no te gusta el mosaico, puedes apagar el mosaico así que constreñir, así que es el encaja todo en la ventana y puedes decir realidad quiero que no teja, azulejo para siempre. Puedes titularlo izquierda y derecha, arriba y abajo, sin alicatado, pero no es lo que quiero. Quiero que cubra. Gracias. Cubierta. Lo siguiente que quiero hacer es oscurecer en este momento es un poco ligero. Puedes oscurecer tus imágenes con CSS con estos estilos. Podrías ir a Photoshop o Figma o XD o ilustrar qué estás usando para diseñar Canva, sea lo que sea, Microsoft Paint. Definitivamente no puedes agacharte en él y Microsoft Paint, pero necesitamos oscurecerlo. Entonces hay un pequeño truco que puedes hacer. Te voy a mostrar que tenemos imagen en nuestro fondo. En realidad se puede tener más de una cosa en el fondo. Entonces por el momento tengo una imagen en el fondo, pero vamos a tener otra cosa. Por eso hay un plus. Puedes decir que no quiero agregar a nadie, pero quieres agregar, quiero agregar una imagen porque ya tengo una de esas. Ni un gradiente ni un gradiente lineal, ni uno radial. Yo quiero este. Quiero un color sólido, por favor. Bien. Y ese color sólido va a estar dando click sobre él. Y no estoy seguro si esta visita a la habitación desde última vez que la hice o esta es la predeterminada. Pero de todos modos, quiero elegir un color oscuro. Podría ser un tintado de negro. Lo que voy a hacer es arrastrarlo justo a la esquina aquí, bien, ceros negros 00000 es el color CSS para negro. Si, si, si, si, si era blanco, recuerda. Y lo que podemos hacer es que podemos usar este llamado Alfa. Por el momento es del 50%. Esa es la transparencia del deslizador. Nikola Alpha, diseño web para ser elegante. Pero sabemos que es opacidad o transparencia, bien, puedes decidir cómo elijo versus qué tan transparente es. Entonces voy a encontrar algo donde pueda leer mi texto porque queremos un buen contraste agradable entre el texto y el fondo. Bien, eso es lo suficientemente bueno para mí. Voy a hacer click off. Si eres como, Eso no me funcionó, lo que pudo haber pasado es que voy a hacer click en mi sección otra vez. ¿Puedes ver que en realidad hay un orden de capas aquí? Tu uno podría estar debajo, podría estar en la parte superior. Quieres que esté en la cima realmente con un poco de transparencia. Y la imagen de abajo, vas, bueno, una última cosa que hice una nota aquí para mostrarte es que estoy usando el comando de deshacer Z. fui directo a los atajos. Aquí hay una forma manual. Mira, deshacer, rehacer. Si cierras el flujo de trabajo y vuelves a él, esas deshazañas se han ido derrumbando. Puedes deshacer, rehacer usando los botones. Bien, eso es todo. En el siguiente video. 13. Botones con un color de flotador en Webflow: Hola a todos. En este video, vamos a ver agregar un botón y conseguir que vaya a alguna parte también agregará este color hover aquí además de algunas cosas relacionadas con un botón. Si viniste aquí solo por el color rollover, tenlo seleccionado. Y está aquí dentro. Este pequeño desplegable. Ve a hover y estilo eso, que escoja un fondo, color de fondo diferente, y estarás agregando el hover. Conozco el título del video, Promesas rollover color y comprado. Terminé haciéndolo unos cinco minutos. Entonces ahí tienes. Ese es el código de trucos para el resto de nosotros que queremos aprender todo sobre los botones. Vamos a continuar. Bien, agregando un botón, fácil. Ir a Ed. Y aquí abajo, hay un botón llamado bajo básico. Y haz clic en mantener y arrástralo. Y no va a ir por debajo. Va a querer ir al sitio de una imagen. Va a ir por debajo de este texto por etiquetas de párrafo. Pero veamos por qué voy a ir tras este botón. Verás en mi panel de navegación aquí. Recuerda si no lo tienes atascado, ve al navegador, pegatina al borde, súper práctico. Se puede ver que está en este cuadro de sección y es lo que se llama hermano porque está con sus otros hermanos. Él está entre estos tipos están todos en esta sección. Él es el padre de las necesidades de los hijos y también hermanos de estos chicos. De todas formas, algún lenguaje ahí para ti. Pero no está debajo. ¿Por qué está debajo? Es por esta imagen está haciendo algo un poco raro. Esta etiqueta de golpeo aquí, tenemos un texto de párrafo. Bien, ¿puedes ver cuando coloco sobre él ¿Ves que esta Trisha está encendida por el infinito, bien? Se llama un elemento a nivel de bloque. Y lo que pasa es que, a menos que le digas que sea un ancho, va a 0 en lo que pueda a la edad. Lo mismo con el texto de párrafo va voy hasta aquí y lo estoy llenando. Nadie más puede estar aquí arriba. Ese es el valor por defecto para ello. Una imagen se puede ver aquí, no se va corriendo a los bordes. Está diciendo, yo estoy aquí. Él es lo que se llama inline block-level, inline, cámbialos. Entonces aquí este tipo es esta opción aquí. Entonces vamos a cubrir maquetación con más detalle a medida que avanzamos, pero vamos a hacer esto ahora. Entonces con ella seleccionada, estoy en mis estilos. Voy a esta primera opción aquí dice Layout. Se ha desplazado ambientación se establece en algo llamado en línea. En la fila, solo quiere decir que él está en la fila. Este tipo también está en la fila. ¿Ves que está en la fila? Veamos la diferencia entre éste así. Él es exhibición y está listo para bloquear a y se llenará incluso puedes ver. Gracias. Pero a flote dice que llenará todo el ancho disponible. ¿O es este tipo? No lo hará. Podría apilar uno al lado del otro. Así que los botones son muy buenos cuando están en la fila. Porque si quiero muchos botones un poco como en este nav y la parte superior que aún no tenemos. Eso es muy bueno. Y como imagen, a veces quieres que las imágenes se apilen una al lado de la otra. Pero en este caso no queremos decírtelo, mi amigo realmente ha ido a este de aquí. Mira eso. Dice: Nadie puede estar a mi lado, nada amable. El botón sin embargo, se empuja hacia abajo y aprieta hacia abajo. Bien. Entonces voy a botones en su propio poquito. Vamos a hacer algunos cambios. Entonces este va a llamarse detalles del evento. Bien, veamos algunos estilos para que puedas seleccionarlos todos aquí. Puedo hacer cuencos y esas cosas en esto. Y lo que quiero hacer es con ella seleccionada, voy a mostrarte topografía avanzada. Topografía. Aquí hay uno. Dice, ¿vamos a teclear más opciones de tipo listas? Aquí hay uno que dice hacer gorras. No estoy seguro de por qué te llevó ahí. De todas formas. Nosotros hemos estado ahí. Quiero decir, solo escribes mayúsculas. Ahórrate algo de tiempo. Bien, vamos a darle estilo. Ahora. ¿Qué pasará si voy y hago? Bueno, en realidad, ya lo he estilizado. Yo no lo sabía. Lo hice todo gorras. ¿Qué pasó? Lo viste se creó un estilo llamado botón. Yo no lo logré. No estaba ahí cuando lo arrastré por primera vez. Mira esto. Si arrastro un botón ahora por sí mismo, se ve que no tiene ninguna clase aplicada. Bien, pero cuando fui y le agregué ese estilo, pretendiendo hacerlo a propósito, pero olvidando nombrarlo porque todos lo hacemos, creamos esta cosa llamada botón. Y eso puede resultar confuso cuando eres nuevo y estás como, oh, ¿eso ya se hizo algo como porque es nota especial, hiciste por accidente? Entonces llamemos a esto un botón y vamos a llamar a este aquí. Bien, solo porque es caja heredada, voy a hacer un poco de estilo que no voy a usar en ningún otro lugar de la página web, solo en esta caja de héroe. Entonces por eso lo llamo botón héroe. Podrías terminar botón de navegación o botón pie de página, botón Página de contacto. Bien, así que tenemos que encajar en. Y voy a hacer un poco de estilismo. Voy a escoger un color. Entonces bajo fondos para este botón, voy a elegir solo un verde de mi diseño. Puedes escoger los colores que más te gusten. Bien, ¿y qué más quiero hacer? Voy a escoger bien algunas áreas de topografía. Vamos a usar las nuevas áreas. Open Sans es una palabra muy bonita, bonita, bastante fuerte para ello. Es una fuente body copy muy sensata, realmente legible, de uso gratuito , y me gusta, pero voy a ir a negrita en cuanto a tamaño. Sí, 14 pixeles se ve bien para mí. La única otra cosa que quiero hacer es que quiero agregar esquinas redondeadas. Entonces ahora este panel aquí, quiero darte un pequeño consejo sobre el uso del panel de estilos. Es grande y confuso. No grande y confuso. Solo hay muchas cosas como donde está todo lo que puedes desplazarte hacia abajo y eventualmente lo encuentras. Lo que me gusta hacer, puede que no te guste es que puedes ver estas pequeñas flechas aquí. De hecho, puedes simplemente hacer clic en estos para hacerlos más pequeños y simplemente abrir el que quieras. Bien, ¿entonces qué quiero hacer? Las fronteras excelentes, solo abre eso, trabaja en ello, ciérralo de nuevo. Se siente un poco más. Libérame. Otro truco genial está con ellos. Puedes mantener presionada la tecla Opción en una Mac, tecla alt en una PC, mantenerla presionada y luego hacer clic en cualquiera de ellas, y todas se abren y mantienen presionada esa misma tecla. Todos cierran. Estos pequeños puntitos azules que te muestran que en algún lugar de aquí hiciste un cambio. has hecho ningún cambio en la frontera. Entonces no pasa nada. Así botón Héroe, Nada. No has cambiado ninguno de estos. Has hecho algo de topografía. ¿Recuerdas lo que era? Es correcto. Lo hemos hecho todo gorras y hemos hecho algunos antecedentes. Entonces si hago fronteras ahora y digo en realidad quiero que ese radio fronterizo sea algo. Lo estoy arrastrando hasta aquí. Lo estoy vigilando por aquí. Bien. Escogiendo algo y te vas. Ahora lo hago girarlo hacia abajo. Puedes ver oh, es un punto azul. Dot significa que he cambiado algo, voy a hacer n, pero más adelante significa que algo más le está aplicando. No es algo que le hayas hecho directamente, lo cual es importante, pero ya llegaremos a eso. Sé que vas a preguntar. Tengo esquinas redondeadas. Veamos el acolchado y el margen. En realidad, no, hagamos que funcione. No redondeamos las esquinas, pero no hemos hecho ese enlace en ningún lado. Entonces un botón tiene algunas cosas por defecto. Ahora, como antes de los ajustes de este diente de aquí o con él seleccionado, podemos ir a la carga por aquí. No importa. Muchas opciones, solo unas pocas opciones. Vamos a usar solo los pocos heridos por defecto aquí, vamos a usar este primero. Entonces cuando se hace clic en este botón, va a ir a URL. Puedes elegir cualquier URL que te guste. Bien, y va a abrir y ahora caso en otra pestaña, ¿de acuerdo? Eso solo significa que cuando se haga clic en el botón, va a dejar este sitio web abierto, abrir una nueva pestaña arriba por la parte superior aquí en el navegador e ir a eso. Entonces ambos están abiertos si se trata de un enlace interno a otra página de tu sitio o quieres que lo reemplace, puedes convertir ese desplazamiento. Cambiará el sitio web a donde quiera que pregunte. Bien, vamos a hacer eso y darle una prueba, abrir una nueva pestaña y cerrarla. Voy a ir a mi vista previa. De todos modos no hemos hecho mucha vista previa, porque es bonito, es bastante bueno mostrándote exactamente cómo se verá en un navegador sin que tengas una vista previa. Vista previa cierra todos tus paneles y se deshace de todo esto como extrañas líneas azules, que estas extrañas líneas azules se fueron y mira esto, puedo hacer clic en él y magia, me tengo a una increíble sitio web. Bien, entonces volvamos a aquí, apagemos el globo ocular. Otras cosas que quiero mostrarles que hacer con el botón es en realidad vamos a pasar por estos otros. Entonces vas a una URL. Esto va a ir a un sitio web externo como Hey, ve a ver este gran tutorial de Webflow que deberías ir a echar un vistazo por esta suma. Pero aquí el tío, podrías vincularlo a eso. Y otra es que puedes enlazar a un enlace en esta página. Sólo tenemos una página. Entonces, si vas a enlazar a una página de este sitio web, Oh, solo puedo ir a casa porque solo tenemos una página. Puedes hacer enlaces a una sección. Así que vamos a hacer eso en un rato. Nuestra de una página es que vamos a agregar navegación para saltar por las diferentes secciones. Aún no funciona del todo, pero lo haremos nosotros. Puedes, cuando se haga clic en este botón, ir al correo electrónico de alguien. Bien. O cuando se haga clic en un dispositivo móvil, comience a sonar. Entonces puedes tenerlo como un número de colas. Eso sólo funciona bien. No, funciona en mi navegador. Si lo pongo en un número de teléfono aquí y hago clic en él, intentará lanzar Google Voice o algo así de todos modos. Pero en un teléfono móvil, hará clic y precargará un poco el teléfono. Entonces esas son esas opciones. Por el momento, sin embargo, solo vamos a usar nuestra URL NEO solo porque es un marcador de posición. Hasta más tarde llegamos a saltar a nuestras secciones de nuestro lado. Entonces esos son los diferentes vínculos. Y la otra cosa que tal vez queramos hacer es cambiar el hover, porque en el momento en que quieras cambiar el color de la libración. Entonces veamos eso. Entonces con ella seleccionada, te voy a llevar a un lugar secreto. Entonces vamos a ir a mis estilos. Entonces en el momento que estamos viendo botón aquí, quiero darle estilo al hover. Entonces cuando tienes el mouse sobre él, funciona. Se oculta aquí con el botón seleccionado. Webflow lo sabe, oye, hay algunas cosas especiales con botones que pondríamos aquí en este momento. ¿Cómo va el suelo en algún lugar de aquí? Dice que los botones de altura tienen cosas especiales. Aquí están. Ahí está el hover, presionado enfocado visitado hover. Ya ves se le agrega una clase especial, Verde significa Figma, perdón, Figma. flujo de ancho ya sabe de lo que estás hablando. Un poco como uno preescrito. Ya hay una clase llamada hover. No tenías que nombrarlo y va, oye, estas son cosas especiales que tienen los botones, las hemos hecho. Simplemente puedes elegirlos del menú desplegable de KU con él. Ahora en adelante, se puede decir, quiero que este estilo para que el fondo cambie a otra cosa. Elige otro color, ¿de acuerdo? Porque abajo y allá vamos. Vamos a darle un adelanto. Bien, si haces clic en off, tendrá una vista previa sin entrar en modo de vista previa completa. Algunos de ellos lo hacen. Vamos a rondar. Somos menos superestrellas de CSA. Y así tenemos un hover. Cualquier otra cosa quiero mostrarte una k. Hay si lo tengo seleccionado, si quiero volver a hover porque quiero darle estilo, tengo que volver a entrar aquí porque por defecto. Una vez que he hecho clic fuera, hice clic fuera, haga clic de nuevo y se puede ver que se ha ido al botón aquí, pero ¿a dónde fue eso? Si quieres ir a cambiar ese color otra vez, ve a hover y narrativas. Es todo tipo de copia de seguridad cargada y puedes ir y cambiarla. Podrías decidir hacer uno de los otros. Los otros no, no funcionaron. Pero cosas como presionadas es cuando alguien la hace clic, lo que pasa, pero nadie ve el click. Esta es mi opinión. En fin, hagámoslo brillante y rojo, amarillo brillante, amarillo brillante. Entonces echemos un vistazo. Tienes que ir al modo Vista previa para verificar presionado. Mira esto. Al hacer clic en esto, vas a volar tras otra página. Pero, ¿lo viste? Puedes es muy rápido, pero lo puedes ver cuando es amarillo. Así que puedes hacer prensa para sentir que va a verlo enfocado es algo más Google que tiene que ver con tabular alrededor nuestro sitio web y accesibilidad y mala. Fuera del alcance para éste. Echemos un vistazo. Qué más hemos conseguido que su enfoque haya visitado. Si has ido antes a ese enlace, gente ya no usa ese. Cambiará de color si alguien le ha hecho clic una vez, recuerda esos todos los enlaces azules, van morados. Eso porque has estado ahí antes, en mi opinión no se usaba realmente para botón. Bien, genial. Y secretamente hiciste tu primera clase combo, que hablaremos en un rato. Pero sí, ese es un botón que lo está estilizando. Oh, la otra cosa es que acabo de revisar mis notas ahí. Desplázate. Pase el cursor yendo a trabajar en un teléfono. No lo es. No puedes flotar en tu teléfono. Puedes pasar el dedo sobre pantalla de tu celular y esta cambió de color. Entonces lo único de escritorio. Entonces sí, oh, la otra cosa que tenemos que hacer es relleno y margen mientras estamos aquí. Entonces tengo mis botones seleccionados, puedo ver ese estilo aquí. Voy a ir a mi espaciado y ¿quiero relleno o margen? Tienes un pensamiento ahora antes de que yo diga que cualquier cosa está doblada como un pedículo. Si elegiste acolchado, te equivocaste. Mira, haz clic en mantener. Así puedo poner relleno ahí y lo mueve hacia abajo. Pero obviamente, pagar está en el interior de la caja. Y margen. Haga clic, arrástralo hacia arriba. Así. Ahí vas. Bien, fue un parachoques. Aprendimos botones que se ciernen. Te mostramos las diferentes formas de hacerlo. Te enseñé cómo cerrar estos abajo, Opción o Alt para abrirlos todos. Haga clic en uno de ellos. Visitamos el Club de Apreciación Comic Sans y aquí encontramos los ingredientes secretos para estos botones. No solo hay botones. Hemos encontrado cosas aquí. Puedes otros elementos dentro este curso y dentro del flujo de trabajo tendrán este desplegable para mostrar cosas que están relacionadas con ese elemento en particular. Bien, genial. Entonces una cosa es que si estás siguiendo a lo largo, voy a establecer un proyecto de clase para que lo envíes y un poco. Y básicamente va a estar asegurándose de que estés a la altura de donde yo estoy. Si estas siguiendo y solo viendo, no lo sé, Es muy bueno practicar, pero también queremos hacer el proyecto de clase. Estarás mayormente terminado y listo para enviar. Sí, haz los ejercicios mientras vamos. Es bueno. Es una buena manera de aprender y hará que el proyecto de clase solo una cosita para agregar de todos modos, Bien, En el siguiente video. 14. Hacer nuestra propia nav personalizada en Webflow: Hola a todos. Vamos a construir esta navegación a lo largo de la parte superior aquí. Vamos a construirlo juntos para que entendamos algunos de los principios. Notarás que no terminé estilizando mucho estos botones. ¿Por qué? Porque en realidad vamos a doblar esto al final. Así que hazlo, sígueme, construye conmigo, pero no le pongas demasiado estilo. No pases media hora consiguiendo el Kooning correcto y el pivote de tamaño de fuente porque vamos a doblarlo. Necesitamos saber cómo se crea esta cosa de una forma sencilla para que cuando agreguemos la fácil de Webflow, podamos ajustarla sabiendo que lo que estamos haciendo es que vamos a cubrir cosas como float, elementos en línea y bloque. Así que comencemos. Bien, para hacer nuestro menú, vamos a poner en primer lugar una sección, porque tenemos una sección de héroes, tenemos nuestra aburrida sección de pequeños patrocinadores. Agreguemos otro para nuestra sección de navegación y arrástralo. Recuerda que puedo arrastrarlo en la página o puedo arrastrarlo aquí. Bien. Aquí arriba, tipo de meterse en el lugar correcto, probablemente no dentro del contenedor. Así que me lo perdí. Puedes ajustar eso después. Entonces nos vemos mi sección aquí. En realidad quiero dentro del contenedor justo por encima del héroe. Mírennos. Bien, le voy a dar un nombre. Bien, mientras lo recuerdo, bien, vas a llamar a esta sección. Este va a llamarse mi nav, Enter en el teclado. Porque vamos a recrear esto en mi maqueta aquí. A lo mejor puedas escoger tus propios colores en estilos de orina, en tus propias fuentes. Entonces hagamos este color de fondo, comencemos con eso. Así que recuerda que me mataron en línea. A lo mejor esa es Option o Alt en una PC, opción en una Mac. Voy a decir con ese seleccionado, tengo mi selección nav, fondo va a ser algún tipo de gris oscuro. Excelente. Agreguemos una imagen para el logotipo. Entonces, sigamos adelante. Bajemos a la imagen, bien, y solo arrástrala dentro. Perfecto. Ahora en cuanto al logo aquí, voy a dar clic en Elegir imagen. Y vamos a subir uno. Ahora, tengo uno que voy a usar y tengo uno genérico que puedes usar. Entonces, en Sitio del evento del Club, vaya a íconos. Y tengo, voy a usar el icono click. Bien, se ve así. Puedes usar Go consigue tu propio ícono, prueba algo así como icon finder.com y busca los gratuitos que hay ahí dentro. Puedes encontrar tu propio logotipo que puedes usar por el momento. Podríamos dibujar uno en Illustrator. Vamos a averiguar dónde x, t, o simplemente usar uno de estos dos iconos genéricos del club. Otro ícono genérico del club en este momento, solo usa el de 64 píxeles, uno pequeño. Pero voy a usar este kayak visual porque es el que estoy construyendo. Vamos Kayak logo en. Debo haber cambiado el color. En algún lugar de la línea. Nuestras notas pagaderas ahora, según el tamaño. Bien, es raro, pero a veces no puedes arrastrarlo y enumerarlo. Esto está cerrado. Eso parece ser intermitente. Y lo que haremos es agregar una clase a esta imagen. Entonces voy a decir que esta es mi imagen. Voy a usar mayúscula I, imagen, logo. Y voy a decir que esto tiene algunos, lo que va a relleno y margen no coloquen el espaciado. Hará lo mismo. Bien, así que el relleno y el margen se verán igual. Estoy deshaciendo. Bien, entonces voy a usar el margen. Bien, más o menos. Perdón por eso. Me gustaría agregar mis botonitos por aquí. Entonces vamos a agregar, agreguemos algunos botones. Vamos un botón, ponlo ahí dentro. Estás como, ¿cómo lo conseguimos por aquí? Bien, entonces la manera de conseguir eso por aquí es algo que se llama flotar. El botón seleccionado. Te voy a decir bajo Posición, tienes esta cosa llamada flotar. Voy a flotarlo a la derecha. Bien, como escribir una línea, pero para los objetos, lo va a flotar hacia la derecha. ¿Qué pasó? He agregado un estilo a este botón y olvidé agregar una clase a propósito. Se me olvidó. ¿Qué podemos hacer? Ya ha creado éste para nosotros. Eso está bien. Puedo vivir con eso. Voy a llamar botón una vez una compañía llamada Space nav. Ahora, cuales fueron mis tics y este, voy a tener eventos pasados, eventos de patrocinadores. Entonces este de aquí es el mío grande. Acontecimientos. Vamos con Vince. Quiero otro. Lo que podemos hacer es simplemente copiar y pegar. Entonces lo tengo seleccionado. Comando C V en una Mac, Control C V en una PC. De hecho, puede mantener presionada la tecla Opción o la tecla Alt en una PC y simplemente arrastrarlas hacia afuera. En realidad, hace un duplicado dos, es un poco elegante. Entonces a tres botones, este de aquí, no puedo recordar, era padrinos. Patrocinadores. Nuevamente, este fueron hechos pasados. Es botón para probablemente demasiado llamado de cerca. De todos modos, estamos construyendo nuestro navegador. Así que vamos a previsualizarlo a medida que vamos atravesando. Así que échale un vistazo. Bien, aún no va a ningún lado porque no tengo esas secciones, pero lo haré. Sí, hagamos el espaciado en esto. Eso es un globo ocular apagado. Entonces voy a decir segundo en uno de ellos. Y porque se aplica, está en todos estos porque copié y pegué botón, botón navegación, nav, botón, zona de navegación, todas estas cosas. Si tuviera un botón ahora uno nuevo que tenía ahí dentro. ¿Ves que no se aplica lo mismo? Y te gusta en realidad, oye, ¿y si voy por aquí y aplico botón de navegación? Entonces puedes ver aquí, si hice clic aquí, puedo escribir botón nav y funcionaría. Tengo que ser exactamente lo mismo. Pero ahora, sí, funciona. Sin embargo, es más fácil, solo hacer clic en él y dar click aquí y va, oye, estas clases existentes, Dan, ¿quieres usar una de estas? Como yo. Quiero usar botón nav. Y si tienes mil de ellos, lo que podrías hacer al final, puedes empezar a escribirlos, pero imagen y acabas mostrarte es tu logo de imagen inmaterial. Esa es la convención de nomenclatura que me gusta porque la pone fácil. Pero tengo botón. Sólo tengo dos de ellos, pero al menos lo reduce a estos dos. Bonito. Bien, entonces me voy a deshacer de él. Voy a estilizar estos chicos solo son necesarios para estilizar uno. Entonces los tengo seleccionados, no importa cuál. Bien, voy a entrar en mi espaciado y quiero empujarlo hacia abajo desde el ROI, empujarlo hacia abajo desde arriba y alejarlo el uno del otro. Bien, Entonces, ¿cómo hago eso? ¿Es margen o relleno? Tan solo arrastra ambos. ¿Entonces? Va a haber un poco de esto. Quiero algo de margen en los costados. Ahora bien, si quieres más espacio dentro del botón, ahora digamos que ves que mi botón aquí tiene bastante espacio negativo ahí dentro. Este está muy cerca, así que hago clic en, no importa en cuál hagas clic. Ahora, ¿esto va a ser Patagonia? Tenemos relleno Dan, vamos. ¿Puedes ver eso? El gris, tiene 15. No agregaste eso. Está gris porque es el valor por defecto. Eso es lo que Webflow y web y Jim habrán agregado. Los que son azules son los que hicimos nosotros. Voy a arrastrar esto desde un lado y 32 de este lado también. Ahora, un pequeño truco para peinar estas cosas van a deshacer, deshacer de nuevo. Se remonta a los valores por defecto. Si mantienes presionada la tecla Opción en un Mac y arrastras un lado, ¿ puedes ver que ambos vienen e porque está haciendo a la izquierda y a la derecha al mismo tiempo? Entonces esa es opción en una Mac, alt en una PC. Lo mismo para la parte superior e inferior. Cualquiera que tenga una parte superior e inferior. Si es correcto, puedes hacer eso. Depende de ti. Mantienes presionada, mantienes presionada la tecla de comando, la tecla Mayús, la tecla Alt Mayús. Alguna vez puedo recordar. Mantenga pulsada la tecla Mayús. hace todos al mismo tiempo. Todos ellos al mismo tiempo. Bien, Así que aquí está la Opción Alt un poco, el mantener presionado el turno, un poco de aplastamiento del teclado. Pero de todos modos, estamos ahí. Ahora. Debería pasar por ellos y estilizarlos completamente. En realidad, hay una cosa más antes de seguir adelante, porque vamos a haber sido esto, ¿recuerdas? Entonces quiero agregar algo de texto. Entonces quiero agregar algo de texto aquí. Quiero mostrarte cómo lo construyes. Ya lo sabes. Hablé al principio, pero quiero mostrarte cómo se construyó tu cuenta para que cuando te den el, se le llamó el elemento que es un componente listo para arrastrar y cómo para ajustarlo. Entonces agreguemos un poco de texto y esto va a ser interesante. Hemos agregado encabezamientos y párrafos que antes tenían sentido. Quiero un logo, no hay opción como logo ticks. Si no estás seguro, si es, si no es ninguno de estos, Hay este bloque toma es bloque genérico de texto. Eso no significa nada realmente. No lo es, el navegador no cree que esté golpeando especial o todos. Oye, este es el artículo y el párrafo muy especial. Bueno, las agallas principales de la misma. Bien, si solo son garrapatas de apoyo y no puedes pensar en cómo llamarlo. No es ninguno de estos para arrastrar esto y simplemente como un bloque de texto sin estilo realmente básico. Y vamos a escribir tu mirada a tu brief. ¿Y cómo se llamaba el mío? Pongo el mío en gorras. Querido. Club King. Es poner el tuyo. ¿Qué hacemos aquí? Que lo pienses un poco, lo tira como, ¿qué harías? ¿En qué empezarías a hacer clic? Qué términos burbuja a la mente. Lo miramos antes y tenía que ver con el layout. Entonces voy a hacer click sobre esto y él es el nombre, está oculto en el bloque de texto del nombre. Bloquear significa que va todo el camino, despeja un espacio para sí mismo. Nadie más puede estar en la misma línea que ellos. Pero podemos decir, Hey amigo, bajo diseño, no quiero que seas bloque, quiero que estés en bloque en línea. Ponte en fila. ¿Bien? Y se le ha dado una clase porque le he agregado un estilo que es layout display, inline-block. Oye Kate, no quiero eso. Lo que quiero es que voy a llamar a este texto. Voy a llamarlo logo. Y voy a decir que estás usando el lugar correcto, trabajo hecho. Ahora sólo voy a darles estilo. Voy a conseguir espaciado. Voy a agregar algo de margen al lado fue el camino equivocado. Bien, voy a ir a mi tipografía. ¿Bien? Y voy a ir a ¿qué estoy usando? No recuerdo a Roboto, creo que no, estamos usando Open Sans o ¿es así? Ahí está. Bien. Voy a usar el atrevido. Voy a usar el color del blanco. Haré las cosas rojas un poco, pero ese es un poco el tamaño correcto también, basado en mi maqueta, pero podríamos cambiar eso. Fresco. Así que a veces el valor predeterminado es correcto, bien, como esta imagen de aquí, solo un poco, bueno, en realidad este cuadro de texto aquí está configurado para mostrar el bloque y necesitábamos cualquier empujado hacia abajo el siguiente chico y luego queríamos eso. Pero entonces a veces estás como, No, no queremos eso. Teníamos la imagen. Recuerden que estaba en la fila, pero no fue donde lo queremos. Entonces empujas hacia abajo, despejas un espacio, empujando a este tipo hacia abajo. Bien, todo este trabajo. Y me dijiste al principio que lo vamos a eliminar. ¿Por qué? Bueno, es porque no tienes que hacerlo, pero hemos estado trabajando en un escritorio y como que acabamos de insinuar estas otras pantallas diferentes. Pero si me pongo a móvil jiggles y no encaja del todo y quieres el pequeño sándwich navbar nav, las pequeñas tres líneas en las que puedes hacer clic y desplegar. A todos les encanta eso y ponlo en marcha. Hay un poco de JavaScript. Son, son puntos de interrupción. No es difícil, pero es mucho más fácil dejar que Webflow lo haga en mí, incluso como usuario avanzado, todavía solo usaría el prefabricado en Webflow, pero es súper útil saber cómo les gusta las cosas float y inline-block funcionan primero cuando empiezas a modificarlo porque lo volcas y estás como, quiero cambiarlo todo. Y todo se desmorona y no tienes idea de por qué. Entonces ahora sabemos cómo funciona parte de la estructura. Podemos usar con un poco de autoridad, podemos usar ese componente nav. Entonces, vayamos al negocio y hagamos eso. Ahora, te veré ahí. Te veré en el siguiente video. 15. Cómo hacer una barra de navegación de menú de hamburguesas para móviles en Webflow: Hola a todos. Vamos a reconstruir esta navegación en la parte superior. Vamos a utilizar el componente incorporado del flujo de trabajo para hacerlo súper fácil. Vamos a darle estilo a como queramos. Y va a hacer lo lindo cuando bajemos al móvil, va a cambiar a este menú de hamburguesas con un desplegable sin que hagamos nada. Bien, vamos a hacerlo en Webflow. ¿Está ignorando lo mal que se ve? Totalmente m Llegaremos a eso. Lo haremos. Bien, ¿qué hacemos? Esta antigua, podríamos seleccionar nuestra sección nav. Podríamos decir en realidad, me da una excusa para mostrarte esto. Hemos mirado display, block e inline. Mira este, dice ninguno, bien, y da clic en él y di ninguno, y se va. Sigue ahí en el código. Bien, solo el navegador tampoco lo puede ver más. Así que no tiene sentido tenerlo bien volver a encenderlo. Lo que realmente quieres hacer es hacer clic en eso o eso no funciona, tienes que volver a qué pantalla sentada quieres, bien, que ahora es bloque de cajas. Entonces empuja hacia abajo a su amigo por debajo. Bien, así que en realidad sólo voy a eliminarlo, seleccionar en Sección nav y desaparecer. Necesito un puedo ir aquí y agregar mi o es mi barra de navegación? Y en realidad va a estar bastante bien si edito por encima de mi, mi sección héroe. Tengo que dentro de mi sección aquí. Bien, nunca va por encima de la sección aquí. Funcionará bien. Es mejor que esto esté dentro de una sección, no 100% esencial, pero el navegador y los buscadores quieren ver tus diferentes secciones. Y significa que podemos navegar mucho más fácilmente. Mucho más fácil. Porque ni una palabra. Pero tienes, has visto esos sitios web donde hay un error dice volver a la cima. Puede hacer clic en el botón y guardar. Ir a qué sección podemos decir la sección de navegación. Vamos. Entonces pongámoslo dentro de una sección. Entonces vamos a agregar una sección, tu sección. Voy a ponerlo justo encima de mi barra de navegación y después voy a poner mi nav. Pero de lado. Aquí vamos, no se cambia nada excepto que tengo esta sección. Y a la sección voy a llamar sección nav. Estás como, oye, pero ya lo hemos hecho. Y si, solo usamos Section nav. Podríamos, si es la primera vez que lo haces, vas a tener que lograrlo. Pero porque ya lo logramos, ahí tienes. Pero hay algo que se llama sección ahí ya por ir. Notarás que la sección ahora tiene un color de fondo. Eso no es hacer nada. ¿Por qué no está haciendo nada? Es porque la barra de navegación tiene su propio color y la está sobrepasando porque es más específica o está por encima de ella. Bien. En realidad es gris en el fondo, pero no lo podemos ver porque las barras de navegación en la parte superior. Así podemos seleccionar nuestra barra de navegación y o bien ir a la barra de navegación. Eres completamente transparente, éste de aquí. Así puedo ver a través mis secciones nav o nos estamos metiendo en las malas hierbas aquí, ¿no? Estamos aprendiendo. Todo lo que podemos simplemente darle estilo a la barra de navegación. no hay diferencia real Aquí no hay diferencia real porque ya he empezado. Voy a hacer mi navbar transparente y mi sección va a traer mi color a través, que es mi gris oscuro. Bien, echemos un vistazo a lo que tiene de especial esto. Lo especial es que hay dos grandes cosas especiales. Uno, ya está hecho. Puedo poner mi logo aquí. Ya tengo unos botones para ir. Net me ahorra tiempo de agregar botones flotando a la izquierda, flotando a la derecha. Y eso también cuando me baje a la versión móvil, miro, estos ya son un poco de JavaScript que lo cambia y lo cambia. Echemos un vistazo a la vista previa que dice que puedo hacer clic en él. O ese tipo de cosas se hacen por nosotros. Css en realidad cambia eso para este pequeño icono. Y luego algo de JavaScript hace este precioso desplegable, pero ya está todo hecho. Bien, voy a volver al escritorio y voy a ir a mi vista previa off. Vamos a tener un poco de deconstrucción. Entonces tenemos este primer trozo que se llama marca. Todo lo que es, es un contenedor al que han llamado Brand Webflow y lo han hecho vinculable. Entonces, si tiré una imagen aquí, será uno de esos enlaces que enlazan de nuevo a la página principal. Muchas gracias flujo de trabajo. Lo que también han hecho es que tienen un montón de botones. Bien. Entonces el botón, botón, botón. Y sabemos cómo los consiguieron del lado derecho aquí, estás como, lo sé, manos arriba, ya sabes, la parte de atrás. ¿Qué fue? Flotador, ¿verdad? Genial. Entonces va a decir que estás flotando dos, o está bajo posición? Ahí está. Flotar a la no está haciendo ningún flotador. No flotes. ¿Por qué no flota, Dan? Nos prometiste que flotar funcionaría. Lo que han hecho aquí es que hay este contenedor envolviéndolo todo. Entonces estos botones suaves. Bien. Eso es lo que yo también lo hice. Apliqué flotar a estos botones. Lo que han hecho es solo para ser más listos, es en lugar de hacerlo a los tres de estos a la vez al envoltorio, ponemos este envoltorio por fuera, bien, y en este caso, esto es carbón lo hizo usando esta cosa llamada diblock, que es como una envoltura genérica, que va a hacer esta casa en bits. Pero para echarle un vistazo, volvamos aquí. Tienen esta cosa genérica, llamado y han comprado y te he visto flotar a la apariencia correcta y todo dentro de ella va. Vamos a voltear a la derecha para, supongo, porque no tenemos otra opción. El navbar va volando hacia la derecha, arrastrando a estos tipos dentro a lo largo para el paseo. Entonces van prefabricados. Pero podemos entender cómo se hace un poco. Podemos hacer nuevos copiándolos y pegándolos. Bien, bien, no los necesito. Lo último que quiero mostrarte es esta marca chunkier. Es un contenedor que tiene un enlace aplicado a él. Muchas gracias. Flujo de trabajo. ¿Y qué hace? Dije el dentado, ¿por qué no funciona? No funciona porque solo hay tanto que tiene que salir de esto que sería masivo. Entonces lo que hacen es, esta es mi suposición en realidad podría estar rota. Pero si ves el dentado aquí, lo tengo seleccionado. Simplemente hay tanto que han hecho por este menú que ellos. No es realmente un desplegable fácil. Entonces simplemente no han hecho nada. Tienes que hacer clic en el diente de aquí y puedes ver ahí está mi configuración de enlaces. El momento es vincular a una URL. Lo que podría hacer ahora porque es mi poner mi logo ahí. Voy a decir ir a una página. ¿Cuál página? Sólo tengo una página a casa. Y es bueno porque cuando duplique todo este sitio web para hacer diferentes páginas, significa que siempre va a , cada vez que cocines el logo, va a volver a la página principal, que es bastante típico de los sitios web. Bien, quiero un logo ahí dentro. No es particularmente difícil. Ya tenemos un logo de antes. Bien. Sean cuales sean tus ganadores. Entonces mi panel de activos haga clic en mantener, arrástrelo adentro, compruébelo. Cuando esté dentro, voy a ajustar mi talla, que no funciona cuando eso está abierto en otro momento. Bien. Y la marcha así que ahí está mi pequeño logo. Ahora solo voy a ir a empezar a peinar cosas. Entonces eso es todo. Si quieres continuar, básicamente voy a hacer lo que ya hicimos, bien, En el último video. Así que voy a pasar y empujar esto en el texto de mi logo, en mis botones. Por eso este video es tan largo como ese poquito de solo hacer cosas. Si no tienes nada más que hacer o no puedes alcanzar el botón Skip, podrás verme sólido. Hagámoslo juntos. Entonces mi imagen, tengo todos mis estilos. A veces estás como, ¿dónde se han ido todas esas cosas? Ahí está. Quiero ponerle un poco de relleno a su alrededor. Pero ojalá, recuerden que hice imagen de un logo uno de la última vez, ahorrando tiempo. Lo mismo con estos botones. ¿Estos botones son sin embargo? No lo son. ¿Puedo aplicarles ese estilo? Vamos botón. Nav. Podemos totalmente. No trajo el color a través, pero no agregamos el color la última vez. Impresionante. Bien, así que todavía podemos reutilizar ese botón de navegación pesar de que borramos la última navegación. Y ese es un punto importante en que si creas estilos y ellos los han usado , simplemente pasarán el rato. Tendremos que limpiarlos hacia el final del proyecto, pero no se van. El Persistente, ¿qué quiero hacer? Quiero que este sea verde y en realidad quiero que el espaciado sea más alto. Taller. Ambos lados, Haití a ambos lados. Mismo tiempo. Sí, así es. Aguanta. La tecla Opción en una Mac, tecla alt en una PC. Algo así. Quiero que mi color de fondo no sea tipografía. El fondo va a ser ese tipo de color verdoso. Tú eliges el tuyo. Quiero que el botón sean las garrapatas para ser. Todo bien. Eso no funcionó. Lo que he seleccionado, tuve al amigo seleccionado. No es lo que quiero en este botón, ese botón nav aquí. Quiero que el color tipográfico sea blanco. Ahí vamos. Y eso es lo que quiero echar un vistazo? Quería ser gorras. Sabemos que podemos hacer eso. Así que ata el trabajo, pies y arriba más opciones de tipo, gorras. Quiero que sea también búho, No grandes vibraciones ni impacto. Impacto ¿los Comic Sans de Webflow no lo usan? Se puede utilizar. Eso está bien. estamos usando ningún área, usamos un Open Sans. Déjeme ir. Aquí vamos. Bien, entonces ahora que quiero hacer es aplicarlo a todos ellos. Entonces tienes un estilo llamado button nav. Tienes un estilo llamado nada. Entonces es el botón GO. Pero el botón nav U2. Ahí vamos. Quiero cambiar los colores de estos. Va a requerir clase combo, lo cual haremos en un poquito, pero dejémoslos por el momento. No voy a hacer el hover. Voy a agregar los herejes por aquí. Entonces ya lo hemos hecho antes. Tú. Cuando digo herejes, me refiero al texto del logo. Entonces voy a usar un bloque de texto, ninguno de estos otros porque es especie de texto genérico. Y ojalá, ¿a dónde fue? Es que no queremos hacer lo quiero así. La marca que tiene esto en ella. Entonces dentro de esa marca enlazable cosa se obtiene imagen y luego la tengo después? Bien, ¿cuál es un poco enloqueciendo o lo pongo después de la imagen? No estoy segura. Sólo voy a ver cómo se ve. Está un poco en la marca. Entonces está en la marca de cajas. Ahí ves, pero está haciendo algo un poco raro. ¿Cómo arreglamos eso? Vamos a echar un vistazo a nuestra posición. Entonces vamos a decir que el logo no está dejando que juegue a la pelota, o el bloque de texto no lo está haciendo uno u otro. Se trató de tomar lugar porque estoy adivinando y estoy bastante seguro de que debajo o es de tamaño? No, no vamos a mostrar mientras que voy a tener que desplazarme hasta aquí está. Pantalla. No quiero estar en bloque en línea, quiero que sea, no quiero ser bloque, bloque en línea. Ahí está. Fresco. Ahora podemos darle estilo ya sea al logo para que tenga más relleno en el lateral o este pedacito de texto que dice club de kayak. Y creo que ya hicimos estilo. Se ha creado un stock con textblock. Y esta es una interesante porque creó eso para mí porque no lo estaba, porque cambié la pantalla. Entonces dije: Bien, no hiciste una clase. Estoy haciendo uno para ti ahora en la posición donde el último video realmente hizo uno. Entonces quiero aplicarle eso, pero quiero deshacerme de esto. ¿Qué hago? ¿Bien? Quiero quitar esta clase, ¿de acuerdo? Porque no quiero dos de ellos. Quiero el que ya hice llamado ¿cómo se llamaba? Se llama logo de texto. Ya lo hicimos con inline-block, ¿no? Entonces borramos el vino automático y un poco retrocedimos un paso. Encontré el que queremos y está hecho todo lo que necesitamos. Días felices, genial. Bien, hermosa. Ish. Se está acercándose. Quiero agarrar este y jugar con el margen. Jeep. Arriba, ser la parte superior y la parte inferior de la misma. Bien, así que eso es lo suficientemente bueno por el momento y está llegando. Agregamos navegación. Estábamos aprendiendo términos venían más diseñadores web, ya sabes, términos como display block, inline-block, floating. Fancy. Bien, elegante. Pasemos al siguiente video. 16. Video de producción 1: soporte para edificios y secciones de eventos Próximos: Hola a todos. Bienvenido al video de protección. ¿Qué es un video de producción? Bueno, es un punto de la clase donde realmente necesito llenar algunos de los detalles aquí para construir un sitio web, pero no estoy usando ninguna cosa nueva. Estoy usando técnicas existentes que todos conocemos y solo ponerlas en práctica para hacer cosas repetibles, voy a comenzar algunas etiquetas, poner algunas imágenes en etiquetas de estilo poner algunas imágenes en. Y solo hay mucha repetición en esta. No mucha repetición, sino más de poner en práctica nuestras habilidades que conocemos. Ahora, podría hacer esto y no grabarlo y simplemente sorprenderte con él. Y algunas personas estarían contentas con eso. Y algunas personas estaban como, quiero saber cómo lo hizo a pesar de que son las cosas que ya hemos hecho. Así que mira este video si quieres. Eso es lo que estos videos de producción o saltarlos. Si trataste de asegurarte de que no hay nuevas técnicas aquí por si no te lo estás perdiendo si te la saltas, Bien, así que no me enojaré si te la saltas. Pero mi consejo sería ver, Mira cómo hago estas cosas problemas con los que me encuentro y cómo las arreglo. Por eso esta es un poco larga porque hacemos un par de cajas diferentes. Ahí vamos. Bien. Y copia estas dos cosas. Entonces sí, Video de Producción. Sígueme. Bien, entonces comencemos. Lo que voy a hacer es que tengo esta demo, esta cosa estoy trabajando de un ejemplo. Entonces lo que voy a estar haciendo es que obviamente puedes hacer tus propios estilos. Y lo que voy a hacer es copiar mi diseño. Cubriremos cómo sacarlo exactamente de algunos otros programas de diseño que están mal en el momento, solo vamos a hacer algunas copias. Y voy a mover el mío para que pueda ver un poco de ambos. La única cosa que podrías estar en una pantalla más pequeña y podrías estar como, no puedo usar esta cosa totalmente bien, por eso automáticamente vuelve a entrar. Si eres como, sí, pones esto y simplemente cubre demasiado. Sí, lo siento. Necesitas una pantalla más grande. Puedes sortear eso subiendo aquí y diciendo, no reduce tu sitio web, pero escala tu vista de él, bájala al 70% para que puedas ver más, bien, y luego puedes usar esto cosa por lo que se queda fuera. ¿O es esa? Sí. No. ¿Por qué te quedaste fuera? ¿Amplía tu navegador? No se quedará adentro. Aquí vamos ahora, Bueno, no me di cuenta de que si vas, todos aprendimos algo. navegador necesita tener cierto ancho para que esta cosa pueda anclar a un lado porque no hay suficiente espacio, ¿bien? Pero también puedes bajar esto si necesitas encajarlo. Bien, podrías estar diseñando en una pantalla muy pequeña y solo necesitabas hacerla más pequeña. Voy a bajar el mío más pequeño. No cambia la vista previa, que dice cuando llego a previsualizar, va al tamaño correcto, salir de previsualización. Afortunadamente se remonta. Lo siento, es el estilo de dwell. Entonces, lo siguiente que queremos hacer es trabajar en estos patrocinadores. Entonces lo primero es cambiar nuestro color de fondo porque aquí es solo un poco gris oscuro. Entonces lo que hacemos es iniciar nuestro cuerpo, que lo es todo. Y decimos que el cuerpo tiene clase, amigo. Bien, voy a decir que este cuerpo tiene una clase llamada body y va a tener un color de fondo de, voy a trabajar ralentiza un color de fondo no blanco. Voy a usar, solo estoy un poco mirándolo. Es una especie de gris azulado. Ahí vamos. Color gris azulado. Aquí vamos. Para que mis patrocinadores puedan hacer un par de cosas. Puede tener un color de fondo de blanco. Y voy a añadir algo de espaciado. Voy a añadir algo de margen. Aquí vamos. Voy a agregarle algo de texto apoyado por, bien, así que voy a agarrar mi plus, voy a agregar, esto va a ser un acierto. Voy a usar estos como pequeños calefactores todo el camino a través. Ahora mirando mi jerarquía de encabezamientos, esta es la más importante. Este es mi, lo que se llama un H1. H1, lo más importante golpeando mi H2. Probablemente debería, porque es lo siguiente que estoy haciendo. Yo digo que Alice va a ser mi H2, pero no es la información más, la segunda parte más importante de mi página. El algoritmo de Google lo mirará y se irá, Oye, ¿cuál es lo más importante? Si lo más importante es esto, estás enfermo y lo más importante es próximo evento que no es particularmente útil para los motores de búsqueda. El segundo dato más importante como rumbo es en realidad este evento fluvial. Bien, entonces voy a saltarme H2 porque voy a hacer eso en un poquito. Y voy a decir, quiero golpear, no tengo sentido en mente. Estoy haciendo un golpeo aquí. Eso va a ser h tres, pesar de que estoy un poco nixed como H2, pero en realidad quiero guardar ese porque es, esta cosa de aquí es más importante. Entonces voy a usar H3. Tiene un estilo por defecto. Te voy a decir, amigo mío, voy a llamarlo pegando a tres. Voy a hacer algunas cosas. Voy a escoger un poco de tipografía. La tipografía va a ser divertida. X0, tamaño de fuente, adivinando alrededor de 26 ish. Bien. El color del mismo va a ser este tipo de color 3D. Es una especie de platillo rojo meñique. Como a los frigoríficos Rojo nuclear, no rosa. Aquí vamos. Y necesitamos un poco de relleno alrededor. Se ha cambiado, el texto hace doble clic en él. Y éste es frío, frío, apoyado, apoyado por quiero un poco de relleno a su alrededor. Entonces lo que estamos haciendo también es que podríamos hacerlo al bateo, pero ¿cuál es una mejor manera de hacerlo? Así es. Hazlo a la sección en la que está. Porque hay muchas cosas en esta sección que necesitan seguir las reglas del espaciado. Entonces voy a poner en lo que hace este, bien, quiero ese mismo espaciado ahí. Entonces vamos a esto. Héroe de sección. Estoy 73 de este lado, k y 53 de arriba. Veamos qué queremos copiar mi sección. Yo quería ir de margen, en realidad relleno. Y el margen sabio, yo quería margen 30 es perfecto para mi. Hagamos un poco de relleno. Vamos algo así. Solo lo estoy mirando desde la maqueta que tengo. Y el fondo va a ser el mismo. Recuerda, margen, aléjalo. Rumbo empuja el interior. Probablemente necesite un poco más de acolchado inferior. Ahora bien, ¿cómo se puede hacer arriba y abajo al mismo tiempo? Bien, recuerdas, mantén presionada la tecla Opción en una Mac, tecla alt en una PC y coincidirán. Y podrías notar que en realidad esto no está perfectamente en el centro, es porque este H tres tiene su propio poco de margen. Él ve, viene solo con su propio margen sin preguntar algunos de los elementos que arrastras desde aquí. Tener algunos sus propios ajustes como un botón, un botón hace algunas cosas es azul. No le dije que fuera azul, pero viene con algunas cosas por defecto que podemos anular. Entonces podemos decir en realidad este golpeando tres, podemos decir, quiero que sea cero, no 20. Quiero que el fondo sea cero. Ahora está un poco perfectamente en el medio. Ahora me ha arruinado el ojo. Es como hacer clic en esta sección. Vamos a decir en realidad manteniendo presionada mi Opción o Alt, arrastra una de ellas. Lo suficientemente bueno. Entonces ahora necesito algunas imágenes debajo. Así que vamos a agarrar nuestras imágenes ahora. Tenemos algunos que traer. Entonces hagamos los pocos trayendo cualquier método de pollito. He hecho clic en mis activos en mis archivos de ejercicios. Tengo algunos en tus archivos de ejercicios bajo eventos del club. En realidad no están ahí. Vamos a darles un nombre. Dentro de aquí. Hay patrocinador 12.3. Entonces, lo que puede hacer es simplemente arrastrar los cuatro. Todos pueden usar estos patrocinadores. ¿Bien? Y luego voy a hacerlo, lo que hemos hecho en el pasado es que ya dijimos agregar una imagen, arrastrarla y luego elegirla de aquí. Y eso funciona totalmente. Pero te voy a mostrar, en realidad es más fácil ir directamente al panel de Activos y decir en realidad solo traer este en el lugar equivocado. Está bien. Déjeme ir. El siguiente That's AU es el siguiente. Un poco grande. Está bien cuando los estás arrastrando y estás como, ¿por qué, por qué va más arriba? Ed es raro. Es solo la forma en que funciona el flujo de código. A veces solo tienes que tirarlo y moverlo después o simplemente mantenerlo en esa línea azul porque simplemente está saltando por el lugar. Teorías. El siguiente, vamos a traer quién es el siguiente. Éste. Estos son solo varios logotipos que se hacen a partir de diversos proyectos. Y puedes ver que en realidad es bastante fácil hacerlo aquí también. Entonces hagámoslo en éste y no en el documento. Es el último es CSS grounds. Ese es el GAG para esta camiseta que llevo es que estamos coloreando. Eso es lo que siento que estoy haciendo. De todas formas. Estoy tomando mi diseño y usando CSS para colorear con crayones. Es como una gran coloración adulta en versión, pero estás haciendo codificación o al menos flujo de trabajo. Hacer frente. Entonces tengo mis imágenes, vamos a encogerlas. Así que sólo voy a hacer clic en el uno. Eres un poco más pequeño para que todos tengan el tamaño correcto. Vamos. Parece acertado. Por defecto este golpeando tres está bloqueado, por lo que los empuja a todos hacia abajo. Y por defecto las imágenes miembro están en línea, por lo que se pegarán uno al lado del otro. Lo que me gustaría hacer es espaciarlos un poco. Entonces voy a agregar una clase a esta imagen. No hay nada. Bien, entonces voy a llamarte imagen. Te voy a llamar patrocinador de imagen. Y esto sólo va a tener alguna lista de todos ellos. Voy a agregarlo a esta. ¿Dónde tiene tipo? ¿Lo puedes ver en alguna clase existente? Sólo me está mostrando unos días si voy. Yo soy. Bien. Hola, Patrocinador Angular. Ahí vas. Patrocinador. Tú apadrinas. Aquí vamos. No importa cuál haya seleccionado. Puedo decir que quiero que todos tengan un poco de margen en ambos lados. Es mantener presionada mi Alt u Opción para conseguirla un poco para que no se rompa a la siguiente línea. Sí, se ve bien. Lo siguiente es que necesito otra sección. Entonces voy a decir nueva sección, sección, sección. Ve, va a ir mucho por debajo de ti. Tiene que ir dentro de mi lata ir dentro de la de los patrocinadores, pero tiene que ir dentro de mi contenedor, lo cual es complicado de hacer, ¿verdad? Por aquí. Está fuera de ella. Aquí arriba. Ahora se ha ido dentro de mis patrocinadores. ¿Puedes ver? Todavía está dentro de mis patrocinadores, pero si lo arrastro hacia la izquierda, puedes ver que es un poco, la sangría cambia y puedes ver un poco a la derecha, tan mal, rojo aquí, va a ir dentro de mi contenedor. Voy un poco más de ascensor. Va a ir dentro del cuerpo, no lo que yo quiera. En algún lugar ahí dentro. Ahí vamos. Dentro de mi contenedor. Vamos a darle un nombre. Vamos a llamarlo sección, y este se llama próximo evento. Próximo evento, intel en mi teclado. Voy a hacer que el fondo sea verde ahora. En primer lugar, en realidad hagamos que el fondo verde. Quiero mostrarte algo. El fondo va a ser, va a ser de color verde. Ahora lo que puedes hacer es porque puedes ver, yo puedo ver ambos. Puedo, no quiere decir estar más tarde en el curso, pero bueno. Utilice la herramienta cuentagotas. Mira esto. Puedo elegir cualquier color de aquí, o puedo ir por aquí, mira, acero ese color. Ahí vamos. Entonces tengo esta sección. Vamos a previsualizar. Eso es lo que le pasa a la selección. Vista previa. Se ha ido por completo. Desaparece porque no tiene altura ni anchura. Lo que hace Webflow, porque, debido a que tenemos esta sección vacía, lo que en absoluto es que no le hay altura porque no le agregamos una altura. La altura es simplemente mágica. Y sin embargo porque Webflow sabe que si agregaste una sección y no la pudiste ver hasta que agregaste altura, te asustarías y huirías. Entonces lo que hace es que solo agrega esto como temporal realzado aquí para que puedas agregarle cosas. Y no es sólo una caja vacía completa, no hay señales visibles. Caso si estás codificando esto, agregarías esta sección y no habría nada que ver. Bien, entonces por eso es algo por eso que no hay nada que ver. No es hasta que tampoco le des una altura seleccionando esta sección y diciendo, echemos un vistazo al tamaño. Se podría decir, quiero una altura de 30 o 300. Ahora tiene una altura porque le hemos dicho que la sección tiene una altura. Si no tienes nada que se levanta auto lo tenía claro. Puedes hacer clic derecho en él. ¿Puedes hacer clic derecho si haces clic con el botón derecho en eso, pero no puedes. Si solo lo borras de ahí y presionas Enter, vuelve al valor predeterminado, ¿no? Lo hace. Bien. No sé por eso? Porque así es como lo hago. Mantenga presionada la tecla Opción en una Mac, tecla alt en una PC y haga clic en ella, haga clic en la palabra y simplemente la restablece a los valores predeterminados. Bien, así que ahora volvemos a una caja que no tiene altura ni anchura, pero sabemos que podemos agregar algunos de los espaciamientos. Entonces podríamos usar el mismo espaciado que este. Entonces echemos un vistazo. Tenemos un margen de 3,049.73. ¿Quitas un 73? Voy a recordar 49.30. Bien. ¿Qué fue? 49. Eso fue 73. Había uno que recuerdas. Gracias. Y no puedo recordar. 49. Bien. Va mal, gente. Bien, entonces 30, 49, puedo hacer eso. ¿Dónde está mi sección? ¿A dónde fue? Es pequeñito. Echemos un vistazo. Bien, ¿qué he hecho? Voy a seleccionarlo. Le he dado un margen, le he dado un ancho. No he dado ninguna. Así que vamos a teclearlo y ver si se fija el deber. Y luego 49. Hola chicos, volvamos a la vida. Y al fondo, también vamos a hacer 49. Bien, entonces tenemos algún tipo de estructura en marcha. Agreguemos ese título llamado siguiente evento. Y lo que vamos a hacer aquí es que vamos a reutilizar este, vamos a copiarlo porque tiene todo el estilo aplicado a él. Es la edad correcta de tres años, el texto equivocado. Así que lo he copiado y pegado para todos los estilos, y este solo se llama siguiente evento. Ahora bien, el único problema con esto es que el tipo de contraste parecía una buena idea por aquí, pero se ve bastante mal. De todas formas. Vamos a tener que vivir con el ojo ardiendo rojo sobre verde y mezclar. Pero quiero es, quiero esto tal vez lo que decidimos, lo vacié previamente siendo el H2, así que me lo salté. Así que me voy, ¿ya vas a estar golpeando debajo? Va a ser mi H2. Y le voy a dar un batazo de H2. Y vamos a decir, ¿qué es? Es, hagamos tipografía. Puño va a ser Open Sans. Simplemente tecleas 0. Cuando tengas esto abierto, saltará a las o's. Si es audaz, está bien. cuanto al tamaño, va a ser un poco más grande y va a ser blanco. Y va a decir, se te ocurre tu propio evento. El mío es que hay un río cerca de mí. Bien. No puedo pronunciar el Río. Irlandés. Mi Gu mi ego. Si eres irlandés, lo siento. Algunos nombres donde acabo, me resulta muy complicado. Mike. Si me das un nombre maorí, estaría bien. Pero de todos modos, así que vamos a Lo siguiente, Elisa, elementos de bloque más agradables. Así que todos son una especie de apilamiento uno encima del otro. Vamos a agregar una imagen. En realidad sólo voy a hacer trampa. Copia esa. Es la misma imagen porque eso es lo que quiero. Quiero ese tipo de como los detalles para esto salta hasta aquí. Y voy a añadir algún texto de párrafo. Yo sólo voy a copiar esto. Si copio esto, esto es interesante, así podría copiarlo porque son las garrapatas blancas que quiero y lo pego. Voy a hacer click aquí, pegarlo. Bien, ahora está hecho un par de cosas. Se trae en el estilo. Échale un vistazo. Estas dos cosas están mal en ello. Los textos blancos no llegaron y llegó este gran acolchado de aquí. ¿Qué hice mal? Entonces básicamente no es nada que quiera. Bien, entonces si lo has resuelto, ese texto de héroe, lo siento, ese héroe y los textos de párrafo que agregamos aquí está ahí. Tiene un trabajo en el mundo y estuvo un poco cerca todo esto abajo. Se puede ver esto, ¿está aquí? Tiene un trabajo y es esa cosa azul. Y qué es lo que les dimos encabezamientos. Así que vamos a todos a bordo en todos lados. ¿De dónde vino el texto blanco? Oh, eso es correcto. Vino de aquí. Bien. Vino de la sección real. Dice la sección, tengo topografía de la luz. Se puede ir. Pero esta, la sección de héroes, no dice nada sobre qué color debería ser la tipografía. Bien. Sé que no es porque tenga este color ámbar, lo que significa que está siendo coloreado por algo. Pero no es algo que haya hecho. Sería azul si lo coloreara. Así puedo hacer una de dos cosas. Mirando esto, tengo dos párrafos y tengo texto en la parte superior aquí. Todos son blancos. Vamos a hacer estas cosas rojas en un poquito. Pero lo que debería hacer en realidad es ir a esta calefacción para decir que en realidad no seas blanco. Voy a recordar que mantén presionada la tecla Opción o la tecla Alt, haz clic en ella para deshacerme de ella. En vez de decir que sea blanco, voy a decir que la sección llamada sección siguiente evento va a ser, todo dentro de aquí va a ser blanco a menos que le diga lo contrario, que es este tipo, es hijo del padre. El padre dice ser blanco y el niño dice ninguna manera, yo voy a ser rojo. Este niño no sabe nada mejor. Nadie le dijo que no quiere que le lean. Así que simplemente se lleva lo que digan los padres. Como ves ese flujo. Bien. Estiliza lo listo para usar tanto como puedas y luego haces cosas individuales para anularlo cosas un poco más específicas, especificidad. Así que siempre miro este diseño cuando estoy trabajando, soy como la mayor parte de su blanco. Hagamos la predicción Blanca y vamos a hacer un poquito. Si es mitad y mitad, elige uno de ellos. Es mejor que peinar éste, éste y éste. Entonces lo que quiero hacer es quitar ese Hero Texts porque no me gustó. Debería haber arrastrado un texto de párrafo de mis opciones de anuncios. Pero recuerda, desplegable, puedo decir solo quita esta clase. Aquí vamos. Ahora quiero dos de ellos. Tengo mi mensaje de texto. Tengo mis opiniones sobre otro documento. Simplemente escribes algo para tu próximo evento. Puedes dejarlo ahí dentro Loren Ipsum si no estás seguro de lo que obtienes aprendices y esto como texto falso que apareció, bien, puedes simplemente arrastrarlo si agregas una etiqueta p, incluso si solo quieres copiar y pegar en lo que esto entras en párrafo, lo arrastras de cualquier manera, obtienes un trozo de estas cosas, solo úsalo fuera de ella. Es una copia y luego la borra. No lo necesitas. Bueno, hay muchas opciones en línea. Puedes ir a obtener el texto de Loren ipsum de. Tengo el mío en Figma y un archivo XD. Así que voy a agarrar el mío, pegar. Bien, tengo que regresar. Ahí vamos. Voy a poner dobles devoluciones y por el momento, haremos el espacio adecuado después de las garrapatas peinando más adelante. La otra cosa que probablemente querré hacer es ¿qué debemos hacer? Ahora, podría agregar una clase a esto para decir que los ticks que están dentro de mi evento de sección pueden tener relleno en la parte superior para empujarlo hacia abajo. Y eso es crear una nueva clase. O miro piano tengo, ya hice una clase. Un material citado. Y podría simplemente agregarlo a eso. No importa si está empujando hacia abajo desde la imagen o hacia arriba desde el párrafo. Entonces te puedo decir, amigo mío, va a tener espaciado. Tengamos algunos de estos 32 en la parte superior. Vamos a hacerlo. Vamos a hacer los dos en la parte inferior. Sólo estoy haciendo clic para meterme dentro de él. Bueno, haces clic y lo arrastras. Aquí vamos, algún texto. Y la única cosa así como esta de aquí, como ¿cómo conseguiste eso? Podrías intentar dividirlo como cajas separadas, pero con eso, no estoy seguro de por qué editor que el Cohen me ha hecho ya no soy fanático de él, pero si quieres agregar ese trozo, entonces seleccione esta sección. Lo que podemos hacer es agregar una frontera. Así que vamos a cerrar todo eso. Esto va a tener chicos. Entonces hicimos bordes redondeados. Se puede hacer para secciones así como botones. Voy a deshacer eso. No es lo que quiero. Puedes ver aquí abajo, ahí están estas opciones. Frontera. Quiero una frontera, no en todos los lados. Entonces hagamos primero todos los lados. En primer lugar, ponle un ancho y pongámoslo en diez, sólo para que lo veas. Entonces, por defecto, está alrededor de todos los tamaños. Se pueden elegir diferentes tipos de bordes. Voy a tener sólo una línea dura. Y lo que quiero hacer en realidad es decir, no lo quiero a todos lados. Quiero ponerla a cero y quiero salvar este lado solo tiene un borde de unos 30, unos 50. Otro pequeño truco mientras trabajas es hacer clic dentro de aquí y solo usa tu flecha hacia arriba. Ves arriba, arriba, arriba, arriba. Si sostienes Turno, subirá en trozos de 109,000,100.1020. Así que lo uso bastante a menudo. Ahí vas. 50 va a funcionar para mi y el color es escoger un color para el acero mi herramienta cuentagotas. Todavía no coincide exactamente , pero ya estamos llegando. Otra cosa es, tengo este relleno desde un lado porque solo parece que leemos es muy difícil leer en todo el sitio web completo. Entonces voy a recortarlo. Entonces podría hacer una clase para este párrafo para agarrar el espaciado y decir que el margen va desde un lado. Cómo hacerlo a un lado, porque no hay mucho espacio para ir. Un poco arrástralo, para que funcione. Pero he tenido que crear una clase. Se llama automáticamente párrafo. Yo lo llamaría P próximo evento. Pero esa es una mala manera. Bueno, no es una mala manera. Es solo una clase extra que no necesitas. Porque tengo la sección de int y solo puedo agregarla a esto. Arrastra, arrastra. Oh, no imagínese. Es el rubro. Vamos, entra la pintura. Estoy mirando lo mío. Eso es bueno. Lo suficientemente bueno. Bien, ahí es donde estamos ahora mismo. Había algunas pequeñas cosas nuevas ahí, pero esencialmente las mismas cosas que hemos estado usando hasta ahora, algo así como en un proyecto un poco más real. Y puedes escribir conmigo y escuchar mis divagaciones de todos modos. Entonces, eso es todo. Pasemos al siguiente video. 17. Hipervínculos y quitar subrayado y color desde el enlace en Webflow: Hola a todos. Te voy a mostrar cómo hacer este hipervínculo aquí. Cuando haces clic en él, es un poco cargar otro sitio web. Te voy a mostrar como estilizar una manera que ese feo azul y subrayado. Y vamos a hacerlo blanco y subrayado. Pero también te voy a mostrar cómo eliminar el subyacente. Entonces se puede hacer clic en los hipervínculos y saltaron a un sitio web y ahora caso está saltando a un enlace a un mapa. Entonces déjame mostrarte cómo hacer que termine estilete en Webflow. Bien, así que he vuelto a la pantalla completa y puedo arrastrar mi navegador hacia afuera. Y hablemos de hipervínculos. ¿Qué son? Son cierto ejemplo y así en una entrada de blog, puedes ver aquí y ese pequeño enlace aquí dentro del texto que el autor ha decidido que es genial enlazar a algún lugar de aquí. Si hago clic en esto, irá a otra página. Bien, voy a regresar. Hay un montón de ellos aquí. Los utilizan ofrecerán enlaces de afiliados. Bien, entonces está hablando de cosas como, Oye, blocs de notas, como totalmente irrelevantes, pero he decidido que es parte de su tipo de monetización que los blocs de notas, cuando haga clic en él, irán a un enlace de afiliado a Amazon con blocs de notas. Bien. Bloc de notas al azar. No creo que sea lo que esta persona estaba mencionando, pero bueno, también puedes ir a mentas y auriculares y todos van a Amazon. Este de aquí le va a Muji, lo cual es genial. ¿Tenían un programa de afiliados? No lo parezcas. Tal vez. Me encanta que haya algo de compañía de todos modos. Entonces esos son hipervínculos. Lo que vamos a hacer es que vamos a salir a salir a un Google Map. Entonces, cuando alguien diga aquí abajo, haga clic aquí para ver el MapLocation. Vamos a seleccionarlo. Y lo que notarás si resalto algún tipo de texto, dadas estas opciones, puedo negrita, cursivas. No es lo que quiero hacer. Quiero este de aquí. Quería insertar un enlace. Ah, y el azul subyacente que amamos. Entonces ese es el enlace. Vamos a conseguir que vaya a alguna parte. Entonces voy a ir a mis mapas. Voy a encontrar mi río. Bien. Meg, Meg, yo Agriba. Al mirar ese club, ese es el comienzo del río. Quiero ir a otro lado, pero oye, está bien. Bien. Voy a compartirlo. Sólo voy a hacer que esto me envíen un enlace y lo voy a copiar. Voy a pegarlo aquí. Bien, así que aquí está mi enlace. Ahí está. Voy a dar click en el pequeño piñuelo. Y voy a conseguir que vaya a quitarle el hachís. El hash está ahí como marcador de posición, no es necesario dejarlo ahí. Simplemente reconoce que es un enlace y usa un hash. Entonces no es una flecha cuando haces clic en ella. Pero borra el hash, pon un Nance. Voy a conseguir que el mío abra una nueva pestaña porque quiero que gente mantenga abierto el flujo de trabajo. Gran salto al mapa. Hay un enlace interno. No tengas eso puesto. Fresco. Entonces vamos a probarlo. Vamos a Vista previa. Y vayamos a nuestro enlace. Oye, y abre Google Maps a L River en ataque de obstrucción. En fin, vamos a darle estilo. Así que salgamos de la vista previa. Aquí, tapas estilete. Entonces, vamos a agregarle una clase. Así que ve a nuestros estilos. Y lo tengo seleccionado. Voy a decir que vas a ser una clase de hipervínculo. Hipervínculo. Y quiero anular los valores por defecto. Hay algunas cosas que vienen a través. Ves todo eso un poco saliendo de los valores predeterminados para un enlace. Por eso están diciendo la NBA, necesito ser Aereo y tal vez esta talla, esta altura, este color, y esto lleva decoración. Eso es lo primero de lo que podemos deshacernos. Se necesita decoración está subrayada. Voy a decir, no lo quiero puesto. Entonces vamos a apagarlo yendo a ninguno, sin decoración de texto. La otra cosa que quiero hacer es cambiar el color a blanco, por favor. Bien. Pero me pregunto el subyacente de nuevo ahora, depende de ti lo que quieres hacer, bien, así que voy a dejar el subyacente puesto porque es una especie de universal, tal vez que es un hipervínculo, va a subrayar. Sin embargo, el azul es obviamente un poco resistente con nuestro diseño. Ahora un poco de presagio para la parte posterior del curso cuando hablamos de SEO. Pero estos son uno de los factores realmente importantes para conseguir tu ranking para tu sitio web es cuando otras personas hacen hipervínculos en su sitio web que enlazan contigo. Bien, entonces nuestro hipervínculo o está bien, es compatible con Google Maps, pero digamos que esto fue por vincular a un proveedor de kayaks y decir que deberías comprar tus kayaks en este lugar de aquí , y aquí está el enlace. Esos son los tipos de enlaces que son realmente importantes y lo que estás buscando y para tu sitio web o ranking. Bueno, entonces enviarlos no es tan importante para tu sitio web. Pero quien obtenga estos enlaces, estos enlaces entrantes, como la tienda de kayak, como en mi instancia aquí. Y les encantarán los enlaces de regreso a su sitio. Es un poco como lo que hace, es uno de los indicadores realmente grandes para Google. Entonces, una vez que tienes tu sitio, una de las cosas que puedes hacer es buscar personas que te vinculen usando buenas palabras clave. Aquí es donde tenía que venderte. Si te gusta este video, lo agradezco, mis cursos y eso es lo que me ayuda. Y Michael dice que hazte popular. Entonces, si estás construyendo un sitio web y es apropiado en algún lugar de la India decir el mejor curso de Webflow en Internet. Va, tú Dan, hago de eso un hipervínculo y apunté a este curso. Sí, ese es mi horneado. Pero así los hipervínculos, súper importantes. Hay algo más de navegación para tu sitio, pero para que apunten a tu sitio, ¿el polvo de oro es realmente útil para los motores de búsqueda? Bien, eso es. En el siguiente video. 18. Enlace de ancla a otra sección de página en Webflow: Hola a todos. En este video vamos a hacer esto y hago clic en un botón y se desliza hacia abajo a la sección diferente. Es una forma de hacer navegación en un sitio web de una página donde realidad no estás saltando a páginas separadas, simplemente saltando a diferentes partes de la misma. Los ID y anclajes de elementos fríos, pero en realidad son cosas de navegación de diapositivas de páginas elegantes . Déjame mostrarte cómo funcionan. Para crear esa navegación. Funciona un poco al revés. Por eso es muy difícil de recordar y terminarás volviendo a este video o escribiéndolo en alguna parte. Entonces no comienzas con el botón, bien, lo cual parece natural si empiezas por donde quieres ir. Quiero este botón cuando se haga clic para bajar aquí. Voy a decir aquí esta sección. Me gustaría ir a mi opción de Ajustes. Voy a darle una identificación. Eso es lo que usa. El botón sabe a dónde ir. Bien, entonces vamos a darle un nombre ahora. Tienes que ser razonable, bueno. Es solo espaciado en la sección llamada este es llamado siguiente evento. Bien, mira esto. Si le pego a Enter, la va a poner en los guiones para mi parece estar bien con superior e inferior, pero solo algunas cosas como identificaciones, no les gustan los espacios. Por lo que te obliga a poner pequeños guiones y cool. Entonces esa es la mitad del trabajo realizado. Ahora, subimos al botón y te decimos, cuando te hacen clic sorta ajustes. Nosotros decimos, no quiero ir a nuestra página web. Quiero que vaya a esta sección de página. Y notarás que solo aparece ahora, pesar de que tenemos secciones de cosas frías, no le importa. Quiere ver una identificación. Entonces ese enlace ahí, bien, se llama ancla. Va a ir a esta presentadora aquí llamada sección siguiente evento. Cuando se hace clic, vamos a darle una oportunidad. Vamos a previsualizarlo. Y vamos a darle un clic. Re, no hay mucho aquí abajo. Se detiene. Voy a poner más en mi sitio web más adelante, pero toda esa flexibilización ya se hace automáticamente para nosotros por el navegador y por Webflow, pero lo estamos haciendo a una sección. De hecho, puedes editar a cualquier cosa. Puedes seleccionar esto, ir a esto, darle una identificación y decir cuando haga clic, bajar a lo que sea que sea que sea esto. No tiene que ser una sección es solo obviamente, probablemente útil. Entra en una sección y ve a un H1 siempre y cuando tenga una identificación. Entonces hagamos algunas de las otras partes. Entonces el contacto con nosotros no tenemos en este momento, el sobre nosotros, nosotros en realidad eso no es lo que queremos, ¿verdad, qué es L? Dice que el evento pasado patrocina eventos. Ya lo hemos hecho. Lo borramos. ¿No vimos peso el voy a escribirlo muy rápido? Jaja. Bien, entonces tenemos nuestros botones. Bien, entonces lo que quiero hacer es que cuando vayamos a eventos, va a bajar a esa sección de aquí. Y lo genial de esto es que ya tengo esa identificación y quiero ir al mismo lugar, este botón, y ese botón va al mismo lugar. Así que sólo puedo reutilizarla. Así que selecciónala. Puedo entrar en mi configuración. Puedo decir que no es una URL. Quiero ir a una sección de página y áreas. Entonces ambos van ahí. Vamos a previsualizarlo. Aquí, ustedes. Bien, apaguemos eso. ¿Y qué más podemos montar? Podemos establecer patrocinadores. Entonces hagámoslo una vez más. En realidad, voy a hacer una pausa. Tú lo haces. Tú esperas ahí. Lo haces, pero puedes pausar. Bueno. Inténtalo. Bien, tú vuelves. Tú lo hiciste. ¿Cómo te fue? Bien. ¿Te has olvidado? Te voy a mostrar si hiciste que hiciera lo que quisieras. Siéntete orgulloso de ti mismo, increíble tu diseño web, Bien , Así que antes que nada, recuerda, es donde quieres ir primero y ajustes, voy a llamar a esto como te guste que tengo que llamarlo sección entre se va a llamar patrocinadores. Podrías haber llamado a tus seguidores se soltaban un poco con lo que yo llamo mío. Bien, entonces voy a ir allí, pero listo. Ahora, quiero decir que vas a en página y vas a uno llamado, quiere que le demos un adelanto. Los patrocinadores no van muy lejos. Pero bueno, se puede decir cuando hacemos una página más larga, cuando no estamos teniendo varias páginas, solo podemos tener esta página. Se puede mover hacia arriba y hacia abajo. Aún no teníamos un evento pasado. Ahí está. Ahí no lo tenemos vamos a construir esa sección y un poquito de tiempo haremos estas cuadrículas abajo abajo. Pero buen trabajo. Hemos hecho alguna hipervinculación, mismo tipo de cosas. Estos son enlaces, pero estos tienen diapositivas de página geniales. Bien, eso es lo que dice el siguiente video. 19. Proyecto de clase 02: crea tu página de club: Hola, buena gente. Es tiempo de proyecto de clase, no tarea. Quiero que revises y subas tu sitio web a donde estamos ahora y me envíes una captura de pantalla. Entonces el calzoncillo es usar tu propio brief si estás siguiendo junto con el kayak, eso también está totalmente bien. Pero ojalá hayas trabajado en tu propio informe que obtuviste antes y lo lleves hasta donde estamos ahora en este curso, puedes empujarlo más si quieres. Pero lo que estoy pidiendo es que llegue hasta aquí. Para que puedas elegir tus propios colores, tus propias imágenes, tus propias fuentes, depende de ti, ¿de acuerdo? Estos son los requisitos previos. Necesitas tener las cuatro secciones. Entonces nav, el héroe, el patrocinador, y el próximo evento en las imágenes, en imagen de fondo, bien, necesitas golpear el 12.3, necesitas agregar navegación en la parte superior ahí. Necesitas esa clase de botón hover. Sé que te estoy pidiendo una captura de pantalla para que realmente no puedas mostrarte la clase hover, pero sabré si no lo estás haciendo. Bien, ese es ese evento de rollover en el botón, hipervínculo, que es este de aquí, miembro en la parte inferior. Bien. Hacemos clic en él y nos dirigimos a otro lugar. Y los enlaces de anclaje, que es la navegación, donde se desliza hacia abajo. Bien, Ahora, hazlo mientras estás en vista previa, para que se deshaga de toda esta basura por todas partes, bien, Y además si tomas una captura de pantalla, es complicado cuando no puedes ver nada. Entonces lo que yo, lo que debes hacer es subir hasta aquí. Esto cambia bastante. Entonces espero que sea el mismo estilo, pero si no lo es, lo encontrarás en algún lugar aquí arriba donde puedas cambiar la escala hacia abajo. Mi laptop, me pongo abajo a unos 70, lo mejor un poco más, 60. Bien. Y luego puedo tomar una captura de pantalla. Ahora, capturas de pantalla en una PC, puedes hacer pantalla de impresión y pegarlas. Tendrás que buscar en Google que en una Mac es relativamente fácil. Es el turno de mando cuatro. Bien, mantén los presionados. Puede arrastrar una caja en su escritorio será una captura de pantalla. Si estás trabajando en otra cosa, o quizás tengas que buscar en Google cómo tomar una captura de pantalla en tu computadora. Pero sí, hazlo y súbelo a alguna parte. Habrá una sección de asignaciones o proyectos o comentarios en este sitio web. Hay un poco diferentes en diferentes. Así que súbelo ahí y me encantaría ver lo que haces. Además, tómate una puñalada para pegarlo en las redes sociales. Enséñame lo que has hecho. Estamos a la altura, aunque estés como, es complicado porque todos estos grupos están llenos de gente que tenía como tú que recién está comenzando. Así que no te preocupes por como, oh Dios mío, no estoy compartiendo lo que estoy haciendo porque soy nuevo. Es la belleza de estos grupos es que todos son nuevos, subidos y pidieron un poco de retroalimentación. O no solo publiques y digas Aquí es donde me conocí. Es interesante decir que los desarrollos de todos ven wat grupo ellos Dios, qué estilos están haciendo. Pide comentarios si lo deseas. Es una excelente manera de comenzar a recibir comentarios creativos. Si tal vez no estás acostumbrado a criticar el trabajo como diseñador o a ser criticado. Lo único es, es que quiero que se lo hagas a otra persona también. Incluso si no lo eres, no te consideras diseñador web hardcore. Al dar retroalimentación, mirar el trabajo de alguien y ver lo que te gusta, lo que no te gusta, lo que podría hacer mejor te permite mejorar tú mismo porque comienzas a tú mismo porque comienzas analizar otros el trabajo de la gente y va, eso me gusta por eso. Y guardas eso lejos y te vas, odio eso por eso. No uses la palabra odio. Un poco más gentil, pero digamos, no me gusta, esto es algo que todo funciona por X, Y y Z. También puedes guardar eso lejos. Entonces, cuando estás haciendo tu próximo proyecto web, te gusta, Oh sí, esas son las cosas que hago y no me gustan del diseño web. En fin, no tienes que compartirlo en redes sociales. Pero estos son los principales grupos de alimentos. El grupo de Facebook es súper increíble, que los grupos de LinkedIn son realmente increíbles. Estos de aquí, instagram y Twitter son un poco más de una manera, pero es genial ver lo que haces. Estos grupos aquí, un poco más de grupo como, pero me encantaría ver lo que haces una vez que me hagas saber cómo te sientes. Ahora, antes en el curso, te pedí que me dijeras, fue de nariz y abrumado? ¿Cómo te sientes ahora? Más doble nervioso, doble abrumado, sintiéndose un poco más seguro. En fin, avíseme. Me gustará desplazarme por mis redes sociales y ver dónde están todos chocando los cinco y hots para cuando sea necesario y abrazos que a la gente le resulta difícil. Bien, eso es proyecto de clase para ir a hacerlo, disfrutarlo. Te veré en el siguiente video una vez que hayas hecho tus deberes. Todo bien. 20. Comprensión de las clases combinadas de flujo web: Hola a todos. En este video vamos a ver lo que es un combo de clases. Déjame demostrarlo un poco antes de que vayamos y lo hagamos. Así que tenemos estos botones en la parte superior en mi diseño aquí. Yo quiero que en realidad solo esta sea verde y estas no van a ser. Entonces lo que puedo hacer es aplicar más de una clase, bien, para actualizarla. Está tomando parte del estilo del original, pero lo único que está cambiando es el fondo claro. Lo mismo con este texto aquí. Quiero que solo una parte de ella sea roja, así puedo hacer click aquí, y ya las hice. Bien, así que vamos a hacer esto en este video. Pero puedo decir, quiero que este pequeño trozo se lleve rojo. Si hago clic en esto, tengo dos clases aplicándose a ello, mi botón de navegación y mi fondo claro. Eso es lo que lo convierte en un combo. Bien, combinación, clases combinadas. Vamos a meternos en ello. Bien, hablemos de clases combinadas. ¿Qué son? Están en este momento tenemos como nuestro botón aquí. Tiene una clase. Si le agregamos una segunda, estas dos combinaciones, Vamos a clase combo, bien, entonces nosotros, ¿por qué la usaríamos? Buena pregunta. Porque vamos por ejemplo, digamos que nuestro diseño aquí tiene un botón verde, pero un par de ellos no. Así que queremos un poco de ella. Queremos mantener como el color de fuente, tamaño de fuente, espaciado. Sólo queremos cambiar el fondo. Lo que podría hacer es ir a ti, podría ir en realidad vamos a eliminar esta y crear una nueva clase o desde cero, conseguir que flote bien, conseguir que sea mayúscula y blanca y añadir el relleno pobre, qué dolor en el trasero. Y entonces si cambio la fuente, tengo que cambiar esto más esa nueva clase que hice. Estas extrañas clases combo son útiles. Entonces lo que puedo decir es que quiero quedarme con todo, pero quería agregarle algo un poco más específico. Entonces voy a decir que puedes ser botón nav, pero quiero agregar otra clase llamada fondo rojo que estoy haciendo. Y el petróleo quiere hacer es decir, todos estos van a decir solo, eso es lo que ahora va a decir en realidad eres este color rojo de este texto por aquí vas. Bien, entonces esa clase combo es solo un poco más específica de especificidad de oro. Creo que sólo me gusta decir la palabra especificidad de todos modos. Entonces sí, acabamos de pasar por alto y solo un solo trabajo de diseño de trabajo es ir a la tasa de fondo. Podemos aplicarlo a más cosas podemos decir también tienes clase combo preexistente ahí está ahí, puedo aplicarla a eso. Ahí vamos. Ahora, quiero que el mío sea transparente, así que probablemente voy a renombrar el mío y llamarlo claro o transparente hasta usted. Y voy a decir que en realidad sea esto como completamente transparente como zip todo el camino hasta aquí abajo. O a veces hay una muestra lista para funcionar. Van y ambos cambiaron. Mira eso, increíble. Lo bueno de la clase combo es que ahora si el cliente regresa y dice, Oye, esa fuente necesita ser negrita, no se ve ningún problema. Tengo clases combo. Entonces puedo decir, haga clic en este, bien, mi botón nav. Y voy a decir en realidad, ¿qué estamos cambiando? La topografía ahora va a ser el cerrojo. ¿Puedes verlos a todos cambiando de manera? Porque todos usan botón de navegación. Y lo único que cambia en estos dos es que los antecedentes se han hecho transparentes. Por eso lo llaman las hojas de estilo en cascada , las cascadas CSS. Empiezas con el cuerpo y le dice al sitio web haga algo a menos que suceda algo más específico, como si hubiera navegaciones es estar en el medio. Y luego está la navegación dice, recuerdo lo que es, pero podría decir que todo el texto sea blanco a menos que algo dentro de él caiga en cascada y diga, soy más específico, como quiero que sea audaz. Va a anular y decir perno. Y entonces algo aún más específico dice, quiero que este botón no sea verde, que quede claro. Entonces, ¿puedes ver que la jerarquía comienza justo en la parte superior, las cosas genéricas y te pones más específico y tu sitio web funcionará totalmente si tienes 1,000 clases, tratar de hacer cosas solo hace que sea complicado actualizar más adelante. Entonces es solo una buena práctica y es interesante, creo que de todos modos, hagamos otro proyecto donde entremos en hacer mejor la tasa impositiva. Así que echemos un vistazo a nuestro diseño. Se ve que he hecho rojo un trozo de las garrapatas ahí y el tronco o la tasa impositiva ahí. Entonces lo que vamos a hacer es que lo vamos a llevar un poco más lejos. Entonces quiero esta palabra kayak. En primer lugar, creo que tenemos un estilo para el rubro. Si hago clic en él, no hay estilo ahí. Entonces ahora quiero darle estilo, así que voy a hacer un acorde golpeando a uno. Y quiero hacer un par de cosas. Voy a hacer que sea el XO, voy a hacerlo todo gorras. Ya hemos hecho esto antes, ¿verdad? Y voy a hacer que sea la versión liviana. Creemos que tenemos uno de calefacción. Así que no puedo hacer que solo una parte de ella se lea para mí. No puedo decir una, eres roja porque todo viene a lo largo de esta cuadra gigante. Se aplica a todo. ¿Cómo aplico algo? Solo haz un poco de un trozo de texto. Entonces, lo que haces es seleccionar ese trozo de texto y esto aparece. Entonces quieres un poco que diga este, tiene rep con un lapso. Ves un poco de pincel. Es porque quiero estilo solo en esto se llama etiqueta span. No hace falta que lo recuerdes, pero en el HTML va a poner algunos bits a su alrededor para que puedas agregar una clase solo a este bit. Entonces él está haciendo clic en eso. Nada cambia realmente excepto que vamos a ver eso. Tenemos que tomar span el nombre. Llamémosle a éste. Se necesita rojo. Porque por qué lleva blanco y azul, se llama TTX, Fred y su trabajo va a ser anular lo que hay actualmente ahí. Se ha dicho en algún lugar de la hoja de estilo que sea blanco. Por eso es MBA, pero no esta clase, pero en algún lugar de ahí está. Voy a decir en realidad ir por encima de esa. Quiero romper con la norma. Quiero ser rebelde. Los niños no escuchan a sus padres. Voy a ser nuclear. Lee, vas tú. Bien, así que hemos hecho esa pequeña etiqueta span para estilizar solo ese poquito. Y como hicimos antes, si cambiamos nuestro bateo uno, así que he hecho clic en este bit aquí golpeando uno. Yo en realidad, quiero que ya no estés x terminado. Quiero que seas estos otros fondos impactan. Puedes ver por esa cascada o esa especificidad o estoy lanzando palabras que acabas de ondear maderas de diseño. Puede que estés como, ya sé lo que es eso. Si eres nuevo, solo estoy tratando de acostumbrarme a algunas de estas cosas porque hace que sea útil para la salud para encontrar. Tienes un problema. Puedes buscar en Google los términos que has aprendido, mientras que al flujo de trabajo le gusta ocultarlos un poco solo para hacer las cosas más fáciles de usar y usar el lenguaje humano de todos modos. Para que veas que siguen adelante y se vuelven rojas. Bonito. Bien, hagámoslo otra vez. Lo bueno de una vez que lo hayas hecho una vez y tengas un montón de páginas, puedes decir realmente recuerda en nuestro diseño aquí, mientras que, el 8 de junio era rojo. Lo mismo aquí. Se puede decir usted, amigo mío en un lapso. Bien, y voy a agregar la clase de ticks de texto ahí mismo está. Oye, nos tenemos a nosotros tal vez diseñando. Esa es la idea de una clase combo. Puedes agregar más de uno a un elemento para que lo ayude o hacer otra cosa. Entonces, sí, bien, creo que llegamos ahí clases combo, más de una clase aplicada a un elemento en particular, bien, una vez en el siguiente video. 21. Rejilla de flujo web: Hola a todos. Es hora de construir grid y vamos a ir a construir este tipo de diseño de tres columnas. Pero puedes atravesar fácilmente, ajustar el espaciado, qué tan anchas son, cuántas columnas son como más filas, todo es muy emocionante. Las cuadrículas son increíbles. Déjame mostrarte cómo funcionan. Deshacer, deshacer, deshacer, hecho. Ahora déjame mostrarte. Bien, Buenos días. Puede que no sea tu nueva mañana, pero es mía. Estoy listo para la acción para explicarte cuadrículas. Así que vamos a poner en marcha una grilla. Queremos poner en esto, entonces estas cajitas de aquí abajo, un poco de tarjetas de eventos pasados. Bien, entonces lo que vamos a hacer es que lo vamos a dar. Podrías recordar que tenemos nuestro contenedor, podríamos simplemente volcar una buena recta en él. No hay nada realmente malo en eso. Pero es útil ponerlo dentro de algo puño porque lo hemos hecho por todo lo demás. Vamos a la sección para los próximos eventos. Tenemos una sección aquí para patrocinadores. Tenemos una división. Vamos a poner en una sección para eventos pasados. Así nueva sección de anuncios. Bien. Voy a ponerlo aquí que me meta en el lugar correcto. Sí. Colgando por la parte inferior. ¿Qué está empujando esto hacia abajo? Aquí abajo hay un gran margen. Lo hice antes porque estaba dolorosamente cerca del fondo. Voy a quitarlo. Ahora puedes hacer clic y eliminarlo. Recuerda la Opción en Mac, Alt en una PC para deshacernos de ella, y vamos a trabajar en ella aquí abajo. Entonces esta sección va a estar fría. Vamos a darle un nombre. Le daremos una clase por lo menos sección. Y éste va a ser un medio positivo. Puedes empezar a ver mis convenciones de nombres de Miss y algunas de ellas habían mirado sección, algunas de ellas tienen guiones, algunas de ellas no se acostaron. Bien. Bien, volvamos a ponerla en su sección. Bueno, eventos pasados, llegué ahí para decir que me gustaría agregar algo de margen para la parte superior e inferior justo de nuevo, justo mientras estoy trabajando, solo para que lo empuje arriba e abajo. Entonces aquí voy a vaciar sección. Vamos a lanzar una grilla. Grid es esta y es esta última opción aquí. Haga clic en mantener, arrástrelo. Bonito. cuadrículas son increíbles y se ven un poco aterradoras, pero luego no. Entonces, básicamente, una de las cosas es cuando estás editando tu cuadrícula, puedes ver algo más gris durante esto como el modo de edición de cuadrícula mágica, puedes salir de ella golpeando hecho y volver a entrar en él ya sea haciendo clic en esto en la parrilla o cocinando adentro. Ve a tus estilos y dice debajo aquí, Layout, Grid de cualquier manera. Entonces estamos en la mano, ¿qué hace una grilla? Nos permite dividir áreas. Es muy útil porque llegamos a decir, vamos a usar las ventajas en los extremos aquí y aquí, no los que están dentro de las celdas. Estos son cómputos de topo bien, más hardcore, y vamos a hacer eso más adelante por el momento. Ahora agreguemos una nueva columna. Impresionante, bien, puedes agregar tantos como quieras. Puedes agregar algunas filas más dependiendo de lo que estés colocando. Usaremos esta opción de grilla para nuestro portafolio más adelante en el curso también para eliminarlos, tal vez haya una manera, no puedo entenderlo en pantalla. Bien, entonces tengo que hacerlo por aquí. Así que lo han seleccionado. Tienes que estar dentro del modo de edición. Haga clic en él. Este poco aparece por aquí. Se puede decir realmente columnas. No los quiero a los cuatro. Yo sólo quiero tres. Y por aquí con filas, me voy a deshacer de La Rosa golpeando el pequeño bote de basura. Eso es lo que acabo de entender. Eso es lo que necesito. Ahora vamos a hacer incluso columnas, bien, pero mira este número aquí arriba. Como ¿qué es un FR? Y es una fracción. Es muy útil, un poco como porcentajes. Es, para lo que es realmente útil es ver esto. Puedo hacer click en él y decir en realidad quiero que esto sea de dos fracciones. Bien, entonces divide el espacio en dos. Esto es dos y esta es una de ellas, una de las dos fracciones, bien, así se puede ver esa división ahí. Puedo decir que en realidad esto es la mitad de una fracción y lo divide. ¿Bien? Siempre gasta todo el espacio, bien, en nuestro caso, está siendo contenido por nuestro contenedor. Dice No seas más ancho que esto. Bien, fíjate que no pude hacer clic en eso porque estamos en modo de edición. Tienes que hacer clic en Listo. Puede escoger Ahí está mi contenedor. Eso es lo que le está dando su ancho. ¿Podemos volver a la parrilla? Vuelva a entrar aquí. Para que puedas dividir esto es a todo tipo de fracciones frías. Se puede decir que son tres y lo dividirá por usted. Bien, voy a volver al 111111. Vamos a agregarle algo porque esto es un poco extraño. Mira esto. Voy a agregar una imagen. Si estás siguiendo junto con tu propio proyecto, ve a buscar tres imágenes y si sabes recortarlas para que la misma relación de aspecto vaya hazlo. Y como dicen Photoshop o Figma o XD. Pero yo sabía decir que si eres como, qué hace una relación de aspecto, si volco en una imagen aquí que son todas de diferentes tamaños, Digamos que estas poniendo esa, luego esa, y luego esa en la misma rejilla que no coinciden porque quiero que todas sean del mismo tipo de ancho aumentado. Lo haremos más adelante. Imagen, imagen. Hay una sección llamada nivel de imágenes a donde vamos un poco más hardcore con las imágenes y las obligamos a tener el tamaño adecuado. Pero por el momento e ir a recortarlos. O he hecho algunos eventos de imagen pasados, 123, me he asegurado de que todos sean iguales. Alto versus ancho. Bien. Ve a hacer los tuyos o usa estos. Traté de hacerlos genéricos. Te voy a mostrar un golpe. Otro truco es que tengo flujo de trabajo. Voy a cerrarlo. Voy a deshacerme de mi imagen. Porque lo que voy a hacer es mostrarte una manera muy rápida de agregar imágenes. Ni siquiera tienes que tener tu panel de activos abierto. Sólo poder ver Webflow y cerrar todo esto. Yo solo voy a ir, Oye, puedes ir a ver, baja aquí, ahí va a ser editado a asset manager. Buscándolos, van, Bien, Manera agradable y fácil de agregar imágenes. Así que de vuelta a mi grilla. Y recuerda que no voy a hacerlo, voy a saltarme el conjunto agregando una imagen y luego conectándola. Sólo voy a ir al panel S8. Entras ahí. Y luego quiero poner mi título debajo de mi imagen con el título del evento. Aquí es donde se pone raro. Voy a agregar mi calefacción. Tú. Voy a ir, ¿dónde te golpeas o topografía? Arrástralo adentro. Genial. empujó por encima. Todo bien. Consíguela por debajo. Puedo usar mi práctico navegador dandy. No hay problema. Entonces mi golpeo va a meterse debajo de mis imágenes. Aunque lo mismo. Están en el mismo nivel. Son hermanos, por lo que deberían estar en la misma grilla. Lo que pasa con una cuadrícula es que mira unidades individuales aquí y va, las voy a poner fácilmente para ti en diferentes, estas celdas diferentes, lo cual es bueno cuando solo estás tratando con imágenes. Bien, así que vamos a deshacernos de eso. Golpear. Significa que puedo ir, bien, ¿dónde están mis cosas? ¿Este también es uno? Y luego voy a ir a otro. Yo te voy a ir también y ahí solo puede ponerlos en otros nuevos. Y luego lo mismo con esto, agreguemos otro. Voy a repetir el proceso. Puedes ver si sigues agregándolos. Simplemente seguirá agregándolos a la siguiente grilla. Gracias. Cuadrículas css. Pero ahora caso, en realidad queremos tener más de uno por unidad. Entonces voy a deshacer eso. Los dejaré ahí dentro a los tres. Lo que tenemos que hacer es esto necesita estar dentro de un rapero, Bien, Algo que lo contenga y golpeando juntos. ¿Y qué podría ser eso? Bien, puedes hacer una sección. Sabemos que las secciones no pueden vivir una dentro de la otra. Entonces, ¿qué utilizamos? Es éste de aquí. Se llama dibloque. El bloque div es solo tu envoltorio genérico que ha obtenido un estilo. Todo está ahí como para como una banda de goma para mantener todo junto. La sección es en realidad una etiqueta div. Div. Eso es un div, esos son sus viejos divs. Pero estos tienen comenzando en este de aquí no hace nada. Simplemente tiene esto como envoltorio vacío. Este es un div también, pero tiene un enlace aplicado a él. Div es el tipo de cosa subyacente, división del espacio k o división o bloque dividido. Voy a agregarlo al azar. ¿Bien? Entonces aquí tengo este bloque div. ¿Bien? Voy a poner mi imagen dentro de ella, lo cual es un poco complicado. Necesitas conseguirlo. Así que recuerda, es un poco así, es como dentro de él y va a estar un poco tabulado. Es duro. Realmente no se puede arrastrar aquí en el sobre el lienzo. Oye, tienes que hacerlo por aquí y luego navegador, tengo un bloque div con una imagen en él. Y ahora puedo decir, porque no hace nada, solo sé que está envuelto alrededor del borde de mi imagen en este momento. Pero si agrego algo más dentro de él, entonces mi golpeo, Bien, lo hago bien. Yo soy como que al menos están en la misma celda. Puedes ver mi calefacción debajo. Y dimos con demasiada frecuencia para estos, bueno, han llamado a las tarjetas. Estas pequeñas unidades pueden ser características o eventos pasados o publicaciones recientes de blog. Estas son como pequeñas tarjetas unitarias. Si quieres usarlo en una grilla, tienes que ponerlos dentro de un rapero. En este caso, sí bloqueo los mantiene unidos. Entonces, ¿a dónde vamos desde aquí? Hacer un eliminar estos y duplicar que todas las decisiones. Vamos a hacer los bloques div que acabo de seleccionar por aquí, copiar y pegar. Yo consigo uno nuevo y voy a conseguir, tú entra ahí. Tú vas por aquí. Entras ahí. Es difícil hacerlo con una grilla aquí. Así que en realidad no se llega a hacerlo. Entonces obtuve un bloque div con una imagen y un golpeo. Bien, tengo una imagen colgando por sí sola. Eliminarlo. Ahora tengo un div con una imagen en él sin golpear. Puede llegar a ser confuso. Voy a dejar esto adentro porque te perderás demasiado alto. Es fácil simplemente deshacerse de estas imágenes y copiar y pegar ese bloque IP. Ahí vamos. Vamos a cambiar las imágenes. De manera fácil, simplemente haga doble clic en él. Reemplazar imagen. Voy a elegir esa. Éste. Es un poco genérico de todos modos. Así que tenemos a estos chicos ahora son grid dentro de sus propios pequeños envoltorios div box para mantenerlos agradables y ordenados. Entonces, ¿qué más hay de las cuadrículas y agregamos, fueron bastante decididos y fuimos, uh, agregas grid. De hecho, puedes transformar algo en una cuadrícula porque quiero reconocer que en realidad esto es solo una pantalla y una configuración de pantalla ruidosa. Así que volvamos a L. Así que tenemos esta grilla ¿verdad? Y puedes ver que está configurado a esto lo hemos aprendido, recuerda el bloque de visualización. ¿Recuerdas lo que hace eso? Recuerda que simplemente empuja todo hacia abajo. Ese es el defecto para muchas cosas. Y luego aprendimos este de aquí, bloque inline, donde hicimos eso. ¿Dónde hacemos eso con estas imágenes o nos comprometemos cuando hicimos eso? Para estos tipos, en fin, terminan fluyendo en la misma línea. Bien, buena semana entonces. Esta es la otra cuadrícula de opciones, bien, entonces es otra opción de diseño. Así que podría subir hasta aquí y decir en realidad el contenedor para esto. Entonces las secciones llamaron patrocinador, podría decir, en vez de. Usando este bloque, pude ver tu grilla y simplemente la transforma en una grilla en cada unidad. Y entonces vamos a hacer clic es, ya sabes, eso era algo, había un elemento, ese era un elemento. Todos estos diferentes elementos se han empujado a, dentro de estas diferentes celdas como una cuadrícula, lo mismo que antes. Aquí no hay diferencia real. Puedo añadir otra fila y empezar a jugar con ella. Si llegas a un punto y lo has puesto en diblock y estás tratando de tenerlo todo y estás como, en realidad solo quiero separarlos. Simplemente puedes transformarlo en una grilla. Y igual que el mismo tipo de cosas es se puede decir en realidad deshacerse del bien y volver a la, este de aquí, el elemento bloque, bien, volver a bloquear. Otras cosas que quiero mostrarte sobre las cuadrículas. Y la cosa es, es que en realidad se creó un estilo esta grilla, una vez que te acostumbras a tratar atrapar esos estilos a medida se hacen para que puedas nombrarlos. Entonces hicimos esta grilla y empezamos a cambiar y decimos, Bien, han pasado tres de ancho. No tampoco. Y en cuanto lo hagas, dice, Oye, lo estoy estilizando porque estoy haciendo cosas en el panel de Estilos. Estamos haciendo cosas aquí. Y dice: Bien, te haremos un estilo porque no escribiste uno. Lo llamaremos grilla. Se puede decir que simplemente lo deja. El problema es, es que si hago otra grilla y terminarás con la rejilla 1, 234-567-8910. Y eso está bien, que nos están dando. Bueno. Esta va a ser mi grilla para, en este caso eventos pasados. Y aquí estoy siendo bastante específico. Si sientes que tienes una cuadrícula que puedes usar muchas páginas diferentes, lo que se llama cuadrícula. Eso está bien. Podrías reutilizarlo todo. Pero en este caso va a ser de tres de ancho. Podría encontrar otro que sea de dos lados. Y veamos también la brecha entre. Para que puedas jugar con la brecha. Se puede editar la cuadrícula. Entonces lo tengo seleccionado. Vamos a salir. Lo tengo seleccionado. Voy a ir a mis estilos. En realidad, tengo mi imagen seleccionada. Voy a dar click en mi grilla. Y o voy a editarlo aquí o decir Editar cuadrícula. Y puedo jugar con un hueco intermedio. Para que lo puedas hacer de forma manual. Bien. Y puedo usar mi flecha arriba y abajo. ¿Puedes ver el espaciamiento entre ellos? Cambios que vincularon. Bien. Yo también lo puedo hacer en la lona. Bien. Para obtener un poco visualmente, Just Do It. Se ve bien. Haga clic hecho. cuadrículas son increíbles si tienes en mente ahora, ¿ como qué pasa con Flexbox? Y si no tienes idea de lo que es Flexbox, no te preocupes, lo cubriremos más adelante en el curso. Hay una sección llamada layout, Layout Level tres, K. Y la regla general es que si tienes eso en tu oculto, te gusta, Oye, ¿qué pasa con Flexbox ahí todo el tiempo es que hacen una mucho de los mismos trabajos. Hacen el 70% de los trabajos. Lo mismo. Flexbox es un poco complicado de entender cuando eres nuevo y la cuadrícula es más fácil de entender cuando lo sabías. Entonces mi regla para cualquiera que empiece por mí mismo es hacer el diseño de cuadrícula. Y si no puedes hacer grid, haz lo que quieras. Ellos se ven Flexbox, pero en realidad no están compitiendo. Hacen muchas de las mismas cosas. Pero de todos modos, sé que vas a tener esa pregunta. Ahora. Eso es todo lo que tengo para las rejillas. Y notarás que el video es más largo porque voy a pasar y darle estilo al resto de las cajas miembro en nuestra maqueta aquí, hay algo de color y la fuente necesita cambiar y agregar esto calefacción en la parte superior aquí. Puedes saltarte. No voy a hacer nada que no hayamos aprendido ya, pero a veces es divertido seguirme y verme hacerlo. Sí, se acabaron las rejillas. Ahora vamos a darle estilo a estos elementos dentro de esta cuadrícula. Bien, así que primero, vamos a darle estilo a las cajas. Quieres ese color de fondo. Entonces voy a agarrar mi contenedor. Yo bloqueé. Bien, voy a agregarle una clase. Porque si no lo hago, va a quedar rezagado uno de todos modos. Entonces voy a llamar a este div y esto es cuatro, ¿cómo se llama? Acontecimientos pasados. Y voy a decir que tienes sobre Option o Alt click para cerrarlos todos abajo. Consígalo de nuevo te entierra. Y voy a escoger el color de nuestra fuente de la manera que usé anteriormente. Ahora en cuanto a este bateo, me gustaría haber recordado que se llama bateo. Bueno, me he levantado al batear cuatro. Lo siento, le pegó a uno. No quiero que esto esté pegando a uno. ¿Por qué? Porque ese es mi golpe más importante y me gustaría que Google y otros buscadores fueran. Eso es lo más importante, no esto. Bien. Ese es mi batazo. Decidí que este es mi bateo dos, único, Es bueno. Ese es mi bateo de tres. Siguiente elemento más importante. Y luego pegando por éste voy a usar aquí. Voy a decir KG. Eres 4.4 por defecto es más pequeño, lo que me conviene un poco de todos modos. Y voy a ir a agregarle una clase porque lo hará de todas formas. Déjame ir pegando a cuatro. Te voy a decir, amigo mío, tipografía, blanco. Quiero añadir un poco de relleno. Así que vamos a ir a Espaciado y arrastrar hacia fuera para querer relleno o margen. No va a importar en este caso. Él es margen. Probablemente lo haré por ambos lados. Voy a mantener presionada mi tecla Opción en una Mac, tecla alt en una PC para obtener ambos lados en caso de que la muestra golpee. Déjame pensar en algo que está a punto de llegar a ocurrir. De todas formas. Entonces tengo mi muestra golpeando en el aire. Quiero un poco de relleno en el sitio en caso de ladrillos a dos líneas. Bien, ahora quiero aplicarlo a todos ellos. Entonces voy a decir que tú, amigo mío, entro en este dibloque va a tener una clase de div. Acontecimientos pasados. Éste de aquí. No, no la imagen. Quiero el dibloque. Bien. Voy a ir a vivir eventos pasados. Y lo mismo con los calentamientos. Voy a decir que eres un festival de éxito. Yo pegando completo. Podría dejarlo como golpeando a uno. Y parece así que si hago calefacción, lo hace podemos decir golpeando, podemos decir que es golpeando, golpeando cuatro, aunque dijimos siendo H1 siguen siendo los valores por defecto del bateo, el gran tamaño de fuente todavía viene a través. Entonces voy a decir que en realidad eres cog, H4 diciendo contigo, voy a agregar este llamado broma. Cuatro. Siguiente. Bien, ahí está mi estilo. Ahora quiero agregar la calefacción, bien, eso está ahí. Ahora, no vamos a usar la cuadrícula porque abarcando columnas y una mayor posible. Pero es sólo porque va a causar mucho trabajo cuando podemos simplemente volcar una H, estamos golpeando justo por encima de ella. Así que cierra todos estos abajo. Ahí está mi grilla. Voy a cerrar eso para conseguir nuestro bateo y ver si podemos salir pegando en el lugar correcto. Bien. Estoy un poco mirando a mi navegador por allá, está en el lugar equivocado. Voy a ir solo arrastrarlo hasta aquí. Y éste va a ser, en realidad tiene que darme lo mismo que estos. En realidad, no necesitaba arrastrarlo y lo borro. Voy a agarrar esto porque es el bateo correcto, ya tiene la clase correcta solicitada. Copia. Y voy a decir que solo tienes que ir aquí, lo cual está mal, y luego intenta arrastrarlo , lo cual está mal. Déjame usar esto. Aquí vamos dentro de mi sección, pero está pegando a tres. Ahora bien, el truco aquí también es que quiero parecer también, esto puede agregar algo de relleno y podría hacerlo usando golpeando tres clases y solo decir, bien, vamos a marcar la línea, topografía, texto alinear el centro. El problema es, cuál va a ser el problema que estás pensando en ello. ¿Se te ocurre? Así es. Este tipo usa la misma clase. Así que necesitaba ser un poco más específico. ¿Qué podría hacer? Tienes razón de clase combo. Entonces, al golpear tres más, voy a agregarle un centro de tick. Porque quería tomar sentado y acolchado o margen. Entonces no quiero llamarlo ticks center. Así que en realidad sólo voy a llamar a éste. El evento pasado está golpeando más el evento pasado y va a estar centrado. Y voy a usar espaciado y voy a usar arriba e abajo. Probablemente sólo voy a usar fondo. Eso va a ir bien. Tengo unos márgenes gigantes en la parte superior aquí porque solo quería empujar la página. Así que voy a dar mi siguiente sección de eventos y decir, en realidad, ¿de dónde viene? Vienen de esto viene de la sección. No. Donde esta mi relleno gigante ahí está el margen contiguo. Bien, así que voy a dejar eso abajo. ¿Qué he hecho en el pasado? Echemos un vistazo. Estoy tratando de averiguar qué es esto. Estoy dando click en él. Son 30. ¿Está ahí? Está ahí. Entonces voy a decir sección eventos pasados, ustedes también son 30. Deja la gran línea de fondo encendida hasta que haga una foto más adelante. Pero eso me funciona por el momento. ¿Algo más? Creo que ya está. Se cambia el texto. Acontecimientos pasados. Buen trabajo, Dan, buena manera. Q2. Así que estiliza el tuyo. Hazme saber en los comentarios si te encuentras con algún problema, pero por ahora, dejémoslo ahí. Bonitas rejillas de trabajo. Las rejillas son increíbles, súper prácticas. Habrá limitaciones a las cuadrículas que eventualmente encontrarás. Y los arreglaremos con algo llamado Flexbox, lo que hará un poco más adelante. Bien, en adelante. 22. ¿Qué es el diseño receptivo en Webflow: Hola a todos. En este video vamos a hablar de diseño web responsive. Hablaremos de qué es y cómo lo lidia Webflow. Entonces primero, ¿qué es? Básicamente es justo cuando un sitio web responde al tamaño del navegador o al tamaño del dispositivo. Estoy en una pantalla grande aquí cuando estoy grabando. Pero digamos que estoy mirando mi iPad. Yo encojo esto. Bien. ¿Ves que cambia dependiendo de la talla? Entonces, si abro esto en una pantalla que tal vez sea una laptop más pequeña, ¿ puedes ver que Dribble ha decidido eso para, para pantalla grande , bien, y deciden cortarlo a tres para una pantalla media? Y vamos a bajar a algo como tal vez una tablilla de retratos. Estoy viendo este sitio web, dribble.com en una, en una tableta. Lo va a reducir a sólo dos platos fuertes. Entonces están ajustando el diseño para responder al dispositivo en el que está encendido. Diseño web responsivo. Es maquetación, son fuentes, son imágenes. Hay todo tipo de cosas que puedes abordar. Estos tienen un poco de mirada, bájense al móvil. puede ver que baja a una columna. Echa un vistazo a una manzana más. Entonces en una pantalla media, bien, está a la izquierda y la MacBook Air está a la derecha. Y entonces si bajamos por la mirada más pequeña, cambian la estructura de la misma. Entonces aquí abajo se puede ver un gran salto. Ver el cambio de fuentes para MacBook Air. Y lo mismo con el logo de la caridad aquí arriba. Todo simplemente establece un poco diferente en las diferentes opciones. Entonces, ¿cómo se le aplica? Así que el flujo de trabajo lo aborda haciendo escritorio. Primero, diseñas en escritorio, y luego diseñas para estos otros estilos. Entonces lo que pasa es que diseñas en el escritorio y luego te ajustas para estos diferentes. Esta es tu tablet. Se trata de un teléfono apaisado y ese es un teléfono de retrato. puedes mirarlo en la opción de vista previa, bien. Asegúrate de que todo funcione correctamente. Entonces escritorio, puedes ver cómo se verá y cómo se descompone bastante mal a través de estos debido a ese relleno en el que nos pegamos. Entonces vamos a ajustar eso en los próximos videos. Si quieres un tamaño específico, puedes arrastrarlo y puedes ver 360, puedes teclearlo aquí, sea cual sea el tamaño que quieras mirar. Podrías estar trabajando en un dispositivo que tu dispositivo, tengo un Google Pixel. Puedo escribir cualquier ancho que sea, así puedo previsualizar en mi pantalla aquí o simplemente arrastrarlo y simplemente ver cómo se descompone. Y ahora está bastante mal para empezar. Si tienes la pregunta de me gusta, ¿por qué puedo diseñar o puedo diseñar mobile-first? No se puede en Webflow, el flujo de trabajo es primero un escritorio, diseñe el diseño y el escritorio y luego cambiarlo por estos otros. ¿Hay alguna manera de cambiarlo? No. No por el momento de todas formas, dudo que tengan planes de hacerlo. Lo están basando en diseño de escritorio y luego trasladándose a estos móviles. Entonces, lo mejor es diseñar primero una computadora de escritorio, obtener todo lo que necesita ahí y luego trabajar el móvil después. Entonces ese es un diseño receptivo y responde al tamaño del dispositivo. Vamos y de hecho empecemos a trabajar en eso en Webflow en el siguiente video. 23. Cómo hacer que el flujo web sea sensible: Hola a todos, es hora de hacer que Webflow sea receptivo. Mira este título, mira este relleno en el costado aquí como una, por ejemplo, esta es mi vista de escritorio. Se ve bien. Pero cuando me baje a, digamos tableta, Esperemos el punto de quiebre. ¿Lo ves cambiado? El acolchado se hizo más pequeño. Vamos a echar un vistazo relleno, relleno masivo en la tableta, más pequeño y el tamaño de la fuente se hizo más pequeño. Volvamos a mirar. Bajemos por otro punto de interrupción, K2, nuestro siguiente tamaño más pequeño. Vamos a por eso. La fuente más grande, más pequeña. Bien, entonces esta es la capacidad de respuesta. Estamos cambiando las cosas dependiendo del tamaño del dispositivo y ponernos al móvil y ver lo que sucede. La fuente se hace más grande, de ninguna manera. Y lo hacemos centrado. También lo vamos a hacer con las imágenes, que esas imágenes pueden fluir en diferentes líneas. Jugaremos por aquí también con este próximo evento. Eventualmente una perspectiva móvil. Simplemente deshazte de él porque era un bonito elemento de diseño que funcionaba en tallas más grandes, pero móvil, acabamos de deshacernos de él. Bien, diseño web responsive en Webflow. Hagámoslo, ¿de acuerdo? En primer lugar, veamos qué tan buena es nuestra capacidad de respuesta. No es bueno ni malo ni receptividad en este momento. Entonces, cómo funciona y es Webflow, simplemente no es justo. Entonces vas a empezar por aquí. No estés ajustando las cosas de tu teléfono y preparándolo aquí. Porque hay algo llamado flujo de fallecimientos. Lo que pasa es que hay estas cosas llamadas puntos de quiebre. Estos se llaman puntos de interrupción como escritorio, ¿ puedes ver que dice base? No puedo señalarlo, pero puedes ver justo debajo de mi cursor aquí, ese es el punto de interrupción base. Hay algo para ese tamaño. Dicen tablet, pero en realidad no es para una tablet, es solo para un tamaño de pantalla que pasa a ser renderizado a 991 y abajo. Y luego puedes ver todos los diferentes tamaños aquí para diferentes teléfonos o dispositivos o cualquier cosa intermedia. Entonces, lo que pasa con este flujo es que si haces algo en el escritorio, fluye a través de todo esto, lo que sabemos porque tenemos ese relleno, que es el tipo grande de cosa extraña. Lo agregamos y el escritorio, tenía sentido tener este margen gigante por aquí, pero no tiene sentido. Obviamente, en el móvil ni siquiera cabe. Entonces no saltamos al móvil fijo. Tenemos que arreglar estos cuatro puntos de interrupción. Entonces vamos a ir aquí porque no quiero mostrarte es si cambio, solo haremos esto. Golpear garrapatas hará algo sencillo. Así que tengo esta cosa llamada golpeando uno, no me disgustó la etiqueta pequeña span. Agarra ese gran trozo de ella. Entonces estamos pegando a uno. En escritorio. Se ajusta. Hay mucho espacio. Es precioso aquí. Se está poniendo un poco apretada. Entonces lo que voy a hacer es solo para que el tamaño de fuente realmente pequeño, cambie Vértigo a la clase aplicada a ella. Práctico. Bien, y voy a decir, voy a cerrar todos estos abajo. Voy a echar de menos con la tipografía. Tipografía, ves estas cosas que Amber, significa que el estilo viene de otra parte. En realidad viene de. Si hago clic en él, dice: Oye, estoy sacando mis valores de otra parte. Lo estoy sacando de, mira este pequeño icono. Lo estoy obteniendo de mi etiqueta H1, pero lo estoy obteniendo de, mira ese pequeño ícono coincide con este ícono de aquí arriba. Bien, así que de ahí es de donde está sacando un estilo. Por eso no es azul. De vuelta aquí en el escritorio. No es azul. No era un azul. De todas formas. ¿De dónde lo está sacando a partir? Lo está obteniendo de la etiqueta H1, una genérica. Ignorar eso. Será más claro más adelante. Entonces lo está obteniendo desde el escritorio. Así que voy a anular eso y sólo decir un poco más pequeño. Estoy usando mis teclas de flecha, simplemente haciendo clic hacia abajo hasta que esté contento con eso en ese tamaño de tableta. Ahora veamos el teléfono horizontal o no cabe ni siquiera se rompe en dos líneas, tan mal. Entonces voy a decir aquí, vamos a pasar el cursor por encima de él. Esto va a tener más sentido porque se trata de Amber. Está obteniendo su estilo de, está obteniendo del estilo de encabezado uno en la tableta. Déjalo ir. ahí es de donde está sacando su partida. Entonces voy a decir que vas a ser aún más pequeña. Estoy usando mi flecha hacia abajo. Y entonces, ¿quién está visitando mi sitio web horizontalmente en un teléfono? No pienses que hay tamaños de pantalla que son solo el tamaño. Y echemos un vistazo al retrato móvil. Bien, y voy a lograrlo, hecho voy a hacerlo más grande. Eres como ¿Qué? ¿Más grande? Tengo que hacerlo más grande. Bien. Porque tengo que romper en dos líneas. Así que solo voy a ser dueño esas dos líneas y que sea agradable y grande. Entonces hagamos un pequeño adelanto. Pasemos a nuestro pequeño modo de previsualización y echemos un vistazo. Entonces escritorio, bien, es el tamaño de la tableta. Salta, reduce el tamaño y mira esto. Sólo voy a arrastrarlo porque es divertido y más interesante ver los puntos de interrupción. Entonces va, ¿Qué es esto un arrastre más grande? Va a volver a subir al escritorio, arrástrelo para ir a la tableta. Y al final voy a llegar a, por eso los llaman puntos de quiebre va a llegar hasta aquí y llegar a ir a chasquido. Bien. Entonces va, puedes verlo cambiando aquí arriba. Cuando arrastre las diapositivas, puedes ver que el cambio se hace aún más pequeño, pero está tratando de ocupar, hay bastante rango. Puedes ver que no se ve muy bien, son solo que se hacen más pequeños. Pero está ocupando este rango de píxeles entre estos dos límites diferentes. Entonces hay todo tipo de pantallas. Es por eso que el diseño web responsive es complicado si quieres ser pixel perfect, básicamente no puedes. Bien, así que llega aquí abajo y eventualmente va boom en el teléfono móvil y un masivo, bien, y todos estos diferentes dispositivos móviles, también es un poco interesante mirar los diferentes dispositivos que te dan algunas sugerencias. Mira esto. Desactivemos ese interruptor de la vista previa si arrastra ese control deslizante aquí. Así que ve a uno de estos otros. ¿Alguien? Y arrastra esta diapositiva a diferente de la anterior en adelante. Estamos justo en el diseño y ahora mira lo que pasa. ¿Lo ves en la parte inferior? Hay todos estos como reloj, lo voy a arrastrar. Vigila ahí abajo. ¿Lo puedes ver? Te mostrará todos estos diferentes puntos de interrupción y se ajustará un poco a ellos. Entonces el Kindle Fire. Entonces, si estás desarrollando algo que sea específicamente para el Kindle Fire, ahí tienes. Bien, salgamos a una talla más grande que te va la Surface Pro. En Microsoft. Puedes bajar a estos diferentes y puedes ir aún más pequeños. Como vamos al teléfono. Echemos un vistazo a los diferentes que hay aquí. Puedes ver, puedes planificar tu teléfono o tus clientes encuentran que probablemente sea más importante solo para asegurarte de que se vea bien en la persona que lo va a estar revisando. Bien, entonces echemos un pequeño vistazo. Lo que conseguimos fue mi uno, pixel tres, voy tengo pixel cuatro. ¿Te acuerdas? ¿De todas formas es antiguo? Entonces ahí tienes. Así es como se ve en mi teléfono. Bien. Estos en los iPhones más grandes, grandes máximos, y obtienes todo el camino hacia abajo para que te guste el NES. No creía que fuera como De ninguna manera tenía un NES o al menos un amigo tenía uno. Lo busqué en Google y sin embargo era de 256 píxeles. Y esa fue la resolución fue encantadora. Buena consola de juegos. En fin, yo era más un tipo de tipo Sega Master System. De todas formas. Entonces esa es nuestra capacidad de respuesta. Lo hemos hecho por el título. Puedes hacerlo por cualquier cosa relleno, color, talla. Así que eso es algo así. Voy a recorrer y darle estilo a mi sitio. No voy a tocar la grilla abajo del fondo aquí hasta el siguiente video. Entonces, si solo quieres saltar a eso, al resto, solo voy a pasar y arreglar algunos de los problemas y la navegación se ve bien, pero voy a ajustar eso porque quizás no tengas eso el lujo o el tuyo pueden ser un poco problemáticos. Voy a trabajar en el acolchado. Hagamos todo eso. Tómate eso si quieres. Bien, recuerda sin embargo, no lo estilizas aquí abajo, con la esperanza de darle estilo a las cosas en la cadena porque mira esto. Si voy a través y arreglo ese relleno, aquí voy, bien, en el layout, quiero el espaciado y lo voy a ajustar aquí abajo. Este quiero el contenedor o la sección. Y voy a quitar el acolchado aquí, justo en así. Si subo al siguiente, vuelve al grande. Está de vuelta a la grande otra vez, de vuelta a la grande. Mejor. De lo contrario, tengo que cambiarlo cada vez. Mientras que si lo deshago, vaya a la versión tablet y haga que sea mucho más pequeña. ¿Se ven los flujos que bajan a éste y a aquel? Así que es mejor comenzar a lo grande, ir más pequeño a medida que avanzas, aunque realmente quieras darle estilo al Mobile, aunque realmente quieras darle estilo al Mobile, asegúrate de trabajarlo sistemáticamente. Voy a deshacer eso porque vamos a trabajar en éste. Entonces tiene una mirada. Sí, se ve bien. Voy a hacer eso más pequeño. Mi obviamente mi acolchado por aquí ya no tiene sentido. Realmente no se puede arrastrar muy bien a la derecha. Como remar el bote o simplemente teclearlo en Dan. Adelante. Eso es lo suficientemente bueno. 149. Bien. Entonces, ¿qué más necesito cambiar en este caso? En realidad, hagamos ese relleno, así y luego lo veremos, todo lo demás. Entonces estás bien. Me gustaria que vayas que tenemos relleno en este, solo se adivina 50 en realidad van directo al borde. ¿Qué tenemos de ese lado? Eso tiene 35. Voy a hacer 35 en este otro lado. Así que en realidad voy a ir a mi párrafo aquí y decir en realidad, vamos a aclararlo. ¿Quién recuerda cómo aclararlo? Ahí está la opción de reinicio u Opción. Haga clic en una Mac, alt haga clic en una PC. Voy a deshacerme de él. En realidad, no, no lo estoy. Ese es un buen punto. Estaba como que voy a aclararlo volviendo a cero. En realidad, lo estoy limpiando. Y va a decir, voy a mirar hacia atrás la línea a cualquier párrafo que dijera. Lo siento, párrafo, sean cuales sean las tabletas la tableta decía 149. Entonces este tipo lo entiende. Así que no puedo simplemente como borrarlo o restablecerlo. De hecho tengo que decir que estás en cero. Porque lo que voy a hacer a partir de ahora es que esta sección va a tomar el control. Por qué estamos haciendo de esta manera para confundirte, principalmente para que no sepa, no sé lo que estoy haciendo. Entonces eso es 35 en cada lado. Se siente bien por aquí, bien, lo mismo, Son 35 a cada lado. Y este párrafo se pone a cero botón aquí. Probablemente sea demasiado ancho. Entonces 35, vamos a mantener presionada mi tecla Opción en una Mac. Tecla 0 en una PC, dale razonablemente cerca. Dependiendo de la parte superior, hay demasiado. Entonces voy al dispositivo móvil, voy a bajarlo, algo así. O todavía se siente demasiado cerca. No tengas miedo también de pasar y revisar los diferentes tamaños. Recuerda arrastrarlo hacia arriba, encogerlo pequeño. Nintendo NES. Sólo para ver qué van a hacer estos. Creo que probablemente el relleno sigue siendo demasiado pequeño en este dispositivo móvil. Aquí vamos. No tiene que ser igual. He hecho un igual, pero vamos a ver, así que vamos a echar un pequeño vistazo. Tú, tú, tú, tú. Una cosa que podría hacer por esto es que podría ir y estar centrado. Y en realidad voy a buscar aquí. No quiero eso sinterizado, probablemente no sólo aquí. Voy a conseguir que estés centrado. Echemos un vistazo más grande. Pero en realidad cuando estás en esta vista, es un poco diferente, ¿verdad? Si estás en el modo de vista previa, realidad puedes arrastrar puntos de interrupción más allá. Mira, puedo hacerlo más grande e ir al teléfono horizontal, tableta, escritorio. Bien, cuando no estás en modo de vista previa, tú y el diseñador, en realidad solo puedes trabajar dentro del alcance de ¿ves que no puedo hacerme más grande? Puedo ir más allá de ese punto de ruptura. No sé por qué. Bien. Entonces echemos un vistazo. Sí, me gusta. Y vamos a necesitar hacer algo con el fondo y hacerlo más oscuro porque ese rojo y verdes, ese fondo no va a funcionar. Podría tener que deshacerme de esa lectura por completo porque aquí se ve genial. Pero en este dispositivo de aquí, es sí. Dolor. ¿Qué hago? A ver si podemos arreglarlo. Voy a, voy a causar una lata de gusanos aquí. Voy a ir, arreglemos eso aunque no lo había planeado. Bien, Entonces la imagen de fondo aquí, podría pasar por y miembro del documento obtuvo dos antecedentes. Entonces en este de aquí, ¿va a cambiar solo en éste? Esa es una buena pregunta. Ni siquiera sé la transparencia fijada en 0.24. Entonces vamos a echarle un vistazo. Vamos a entrar aquí. Vamos a hacerlo más oscuro aquí. Sólo afectará al móvil que debería hacer. Ahí vamos. Así que échale un vistazo. Así imagen de fondo en esta sección, imagen de fondo héroe. ¿ Llegó todo para el paseo? Vete tú. Antecedentes. Todavía está a los 42. En este. Es de 0.7 a 72%. Funcionó. Eso lo supe todo el tiempo. Bien, entonces es más oscuro en el móvil. Bien, otras cosas que quiero hacer. Entonces veamos la imagen. Imágenes, imágenes finas bien en esta de aquí, es solo un poco raro que no cruce todo el camino. Tengo un héroe de imagen. Y lo que podría hacer es que vamos a saltar un poco el arma y decir en cuanto al tamaño, lo configuramos para que sea en realidad no lo hicimos, elegimos una talla, simplemente la arrastramos, no acabamos de pasar, bien? lo que vamos a hacer es vamos a decir que tienes un ancho de 100, y usaremos el porcentaje. El 100% hará Unidades e Increments Property más adelante y mirará todas las diferentes porque está cargado. Pero saltemos ese y digámoslo. Estas otras versiones, es un ancho específico, bien, pero en esta última salta al 100 por ciento. Bonito. Y lo que eso significa es ver esto los diferentes tamaños, bien, si voy al modo Preview, mira esto, va a ser una buena prueba. Se está poniendo bastante grande. Pero cuando va a retrato, salta de nuevo a un tamaño específico. Bonito. Bien, vista previa apagada. Qué S, Lo que quiero hacer. Esto es muy grande lejos. Así que me gustó un poco aquí. ¿Me gusta aquí? Estamos así ahí. Está bien. ¿Qué le está dando su acolchado? Eso es, ese también es un juego divertido de jugar es como ¿de dónde viene eso? Entonces con ese seleccionado, voy a abrir mi espaciado y está obteniendo algo de esto y probablemente algo de la imagen. Y puedes ver un poco si me pongo encima de él, ¿ puedes ver algo tablero de ajedrez así que lo está consiguiendo de ahí? ¿Y de dónde está sacando? Si hago clic en él desde la versión de escritorio del botón héroe en el móvil, voy a anular eso. Y voy a ponerla a cero. Y eso en realidad probablemente sea bastante bueno. Lo suficientemente bueno. Todo este lío. Mira ese lío caliente. Así que échale un vistazo. Bien. Sí. Ya sabes, bien aquí. ¿Cómo solucionamos esto? Bueno, voy a hacer es jugar con el tallaje y vamos a jugar con, veamos las secciones patrocinadoras. Bien. Digamos que todo dentro de él está alineado al centro, pero solo en tableta. Bien. Entonces ustedes, pueden ver que estoy usando el align y la topografía. Esa es una pesada. Notarás que estamos usando el centro de topografía en lugar cualquier tipo de tamaño y los centros de espaciado lo harán más adelante cuando veamos la cuadrícula y la cuadrícula flexible. Pero a menudo puedes salirte con la tuya con solo centrar el texto de una etiqueta div completa o en nuestro caso esta sección, y seguirá su ejemplo. Y tenemos tenemos una imagen, entonces tenemos algo alrededor de esto, ¿verdad? Tenemos un envoltorio llamado patrocinador de imagen. Y lo que quiero hacer es probablemente el escritorio de relleno. Entonces puedo encontrar aquí cambia al centro y quiero agregar un poco de relleno a su alrededor. Entonces voy a decir quién recuerda lo que mantienes para conseguir que todos los lados estén acolchados. Porque voy a mantener pulsada tecla Mayús y voy a decir relleno y margen. Así que podrías hacerlas todas. Ir en tableta. Hay un poco más de relleno a su alrededor. La otra cosa es que está todo tipo de agrupado por el lado. ¿Por qué? Porque mi sección tiene algo de relleno en ella y era apropiado en escritorio, pero no tan apropiado aquí. Entonces voy a decir, te vas, cero. Siempre va a haber un poco de saltos entre los diferentes tamaños. Echemos un vistazo en realidad, vamos a Vista previa. Bien, entonces escritorios, escritorios que se ponga abajo a esto, van a hacerse más pequeños. Bien, es un poco receptivo. Entonces vas tipo de talla más grande cabe tres ahí. Te metes en este, baja más pequeño. ¿Y cómo se está descomponiendo? De hecho estoy bien con cómo es a partir de ahora. No voy a cambiar nada más. Podemos ponernos elegantes con Flexbox más adelante, pero en realidad esto está funcionando bastante bien, dado que tiene un poco de relleno alrededor de las imágenes. Y ellos simplemente, simplemente parecen romperse o lo que se llama miembro de bloque en línea. Entonces encajan en línea. Si no hay suficiente espacio, se descomponen en la siguiente línea, poco como lo hace la topografía. Bien, pensé que iba a ser mucho más difícil de lo que era. Vamos con esto. Qué más tenemos Desktop esto. Entonces, ¿qué le está dando espacio a esto? Entonces, averiguemos qué está empujando esto. Que es como es u, u, vamos a echar un vistazo. Entonces, ¿es simplemente todo en esta sección? Está ahí. ¿Cuál es su gran acolchado viejo en eso? Entonces en este caso, solo voy a hacerlo mucho más corto o cabalgando hacia mí que probablemente necesite bajar también en este tamaño de dispositivo. Se ve bien. Este, es heredar todo del último es bastante bueno. Lo es. Porque no me gusta tu dispositivo móvil vertical u horizontal. Me voy un poco tableta, pesada. Mira esto, asegúrate de que no esté tan mal y luego ve al móvil. Es muy importante. No deberías hacer eso, bien, Esta de aquí, lo que podría hacer es en realidad esta pequeña elección de diseño a la que me dirijo aquí. Realmente no funciona en el móvil, necesita irse o hacerse muy pequeño. Vamos a deshacernos de él. Entonces con esta sección seleccionada, recuerdo que está bajo fronteras ahí está ahí. Entonces tiene un borde de ese lado izquierdo. Si hago clic en esto de 50, entonces va a ir a cero, se fue en el móvil. Así que vamos a previsualizarlo. En escritorio. Ahí está. En la tableta, está ahí, pero cuando se hace más pequeña, más pequeña, se ha ido. Bien. Ya ves lo que estás haciendo aquí. Y simplemente trabaja tu camino a través de todos los elementos. Empezando por la parte superior, trabaja tu camino a través. No te saltes el teléfono móvil del paisaje. Y si movemos este último, voy a ir a la sección siguiente, voy a decir que todo esto va a ser mucho más pequeño y mantener presionada la tecla Mayús. Arrástralos todos. Suficientemente bueno que todo lo que tenemos, haremos cuadrículas en la siguiente. Pero estoy contento con cómo va. Probablemente porque estás haciendo algo por tu cuenta, probablemente vas a tener algunas otras partes que tal vez no funcionan o no fueron exactamente como mía porque usamos diferentes tamaños y diferentes imágenes y diferentes en diferentes longitudes de texto si hay algo pidiendo los comentarios. Pero también sepan que nos queda una parte del curso que finalmente superaremos todo. La otra cosa que podrías estar haciendo es el tamaño de tu logotipo. Als está bien en estos diferentes dispositivos. Sobre esto, podrías decidir que quieres que sea más pequeño y que este texto sea más pequeño, bien, depende de ti para que encaje. Y tal vez el relleno se vuelve un poco más pequeño. Marca ¿De ahí está sacando su acolchado? ¿De dónde nos está sacando esto el relleno? La imagen? Sí, se estaba poniendo picando por ahí. Impresionante trabajo a través de rendimientos y mira lo que puedes hacer. Entonces puedes resolverlo, pero comenzando aquí y trabajando tu camino hacia abajo, bien, así es como hacer que Webflow sea receptivo. 24. Redes receptivas en Webflow: Hola a todos. Vamos a diseñar responsivamente esta grilla aquí abajo en el escritorio. Es de tres por tres. Se hace más pequeño al tamaño de la tableta. Y en realidad, acabo de elegir un tres por tres porque se ven bien. Y luego me sale dos dos por dos en el paisaje, móvil y luego me pongo al móvil y veo lo que pasa. Aquí está ahí. Tan grande. Y fui, lo empujé todo del borde y me pegé a una columna de altura. Entonces déjame mostrarte cómo hacer eso ahora en Webflow. Bien, hagamos que nuestra grilla sea receptiva. El momento no es responsivo ni previsualizado. Simplemente baja a la tableta y solo una especie de aplasta ahí y eventualmente simplemente se empuja hacia un lado para arreglarlo. Eso es bastante fácil cuando iniciaron el escritorio. Bien, se ve bien. Vamos a mirar tablet y probablemente esté bien en el tamaño. Entonces voy a dejarla ahí. Y en el panorama móvil, bien, se está poniendo demasiado apretado, así que lo voy a romper en diferentes columnas. Entonces lo que hacemos es dar click en la grilla. Entonces si hago clic ahí dentro, una vez, ahí está mi cuadrícula por aquí y diseño, voy a editar mi cuadrícula o simplemente haga clic en la opción en la esquina. Y lo que vamos a decir es por aquí en esta vista aquí, no quiero que sean tres columnas. 123, sólo voy a decir que borre uno. Y no borra el contenido real de las columnas, las columnas disponibles en las que tienen que entrar las cosas, eso tiene sentido. Entonces terminó simplemente empujando hacia abajo a la siguiente, creó una fila automática. Bien, solo quería empujar hacia abajo otra fila. Es debido tableta. Bajemos hasta aquí. El problema con mi diseño, sin embargo, es que no se ve muy bien en dos por un hombre. Es una elección de diseño que la próxima vez que diseñe algo, puedo decidir que esta primera tal vez sea mejor tener cuatro columnas para empezar porque luego se descompone muy bien para, para hacer esas decisiones usted mismo. A veces hay que vivir con algunos diseños extraños con capacidad de respuesta. Y también notarás que si cambias entre puntos de interrupción, lo que hago todo el tiempo, la cosa de las columnas se asusta como ¿te gustaría qué? Nunca lo había visto por ahí antes, pero simplemente no le gusta. Bien. Así que apague eso. Bien. Y si vuelvo a entrar en él, va a estar bien. Pero si intentas cambiarlo mientras estás aquí, se asusta un poco. Pero apágalo, vuelve a entrar. Y está bien. En este de aquí en mi móvil. Y sólo voy a apilar todos uno encima del otro. Entonces lo que voy a hacer es que me voy a deshacer de todas las columnas. Tienes que tener una columna, una columna, y luego solo va a poblar tantas filas como necesite. Los códigos tienen un vistazo. Vamos a Vista previa. Vamos a gastarlo para que se vea bien en el móvil. Eventualmente llega a un punto de interrupción y va a mi feo diseño y luego de vuelta a tres. Y luego los tres grandes. Digo, como que sea agradable y fácil. Vamos a ordenarlo. Y con sólo jugar con algo del espaciamiento hacia abajo de un móvil especialmente. Y aquí hay algunas grandes brechas. ¿Quiero pulgadas en él? Se podría pensar en el móvil, es agradable correr a veces hasta los bordes. Entonces voy a decir móvil, voy a cambiar, cambia este espaciado. Este caso, tiene que ver con las filas o columnas filas. La fila tiene una altura de 60 Omo, pero de hecho empecemos aquí. Vamos a asegurarnos de que no estamos solo para. Me gustó el espaciado aquí bien. Aquí. Demasiado grande. Bien, entonces lo que voy a hacer es lo que voy a decir sobre el paisaje móvil, voy a decir que la grilla, y voy a decir la altura de la fila. Y hago clic en él y voy a golpear arriba y abajo, cabeza hacia abajo, mantener el turno y mantener pulsado. Saltará en pequeñas latas. Y voy a hacer 30 , tal vez 20. Y probablemente voy a tener que hacer el Gap para esto como 20 también para las columnas, porque de lo contrario se ve raro. ¿Quiero un poco de relleno en el exterior? Creo que sí. Entonces te voy a ir porque está empujando hasta los bordes, no se ve bien en este tamaño de dispositivo. Entonces voy a decir, echemos un vistazo al espaciamiento y vamos de ambos lados. E imagínese, ahora estoy seleccionando mi grilla, en la que va a trabajar, o podría hacer mi sección. Ambos funcionarán. Hagamos esto y arrastrémoslo. Mantenga presionada la opción, arrástrela de la manera correcta. Y los 30 probablemente van a ser buenos porque va a coincidir con todo lo demás. En cambio no coincide con 30. Ahí. Échale un vistazo. Por qué un estable más grande que ese 30. Sabes por qué estás como, Oye, esa cosa, no puedo resolverlo para que parezca entrar. Eso es porque hay 20 Dan. Dan es un idiota. Esto hacen 20 ambos lados, 20.20. Todo bien. Vamos a conseguir el móvil. Y por eso lo hicimos ahí arriba. Y no sólo en la mano porque en realidad se ve bien aquí. No, quiero empujarlo hasta el borde, así que quiero deshacerme de ese 20. Entonces 0.0. Yo soy hombre feliz, ahí vamos. Nuestra cuadrícula está trazada. Eso responsivo. Es darle un sabor. Pequeño. Incómodo. Encuentra mejor. Bueno en realidad, llamémoslo mejor. Bien, es decir, la capacidad de respuesta de la red en Webflow. 25. Proyecto de clase 03 - Grid & Responsive WebsiteClass de clase 03 - Grid & Responsive Website: Hola, Es tiempo de proyecto de clase. Bien, proyecto de clase número tres, quiero que agregues tu grilla y luego hagas que el sitio sea receptivo. Bien, entonces veamos lo que tenemos que hacer. Entonces en el escritorio aquí, la única diferencia la última es que hemos agregado esta cuadrícula en la parte inferior. Se quiere que lo agregues. Y luego quiero que trabajes en todos los puntos de interrupción y decidas, tomes decisiones de diseño. Tamaños de fuente, padding, k, como tenemos en el último par de videos. Quiero verlos a todos ahora subir para capturas de pantalla de los cuatro puntos de interrupción diferentes. El problema es que no puedes verlos a los cuatro. Creo que antes en el curso lo dije, puedes ir aquí y podemos decir en realidad lo mostré como un 80 por ciento o tomar una captura de pantalla de todo. No parece funcionar en tablet. Podrías hacer que el tuyo funcione. No puedo obligarlo al 100 por ciento. Entonces, lo que te he pedido es que tomes todo lo que veas, solo llévala todo el camino hasta aquí. Entonces lo mínimo es la navegación y el tablero de héroes. Si puedes encontrar formas de hacerlo todo, reducir el navegador, eso es una especie de cosas elegantes. Por favor, hágalo. De lo contrario, solo tómalo todo el camino para tomar capturas de pantalla de todo lo que puedas ver. Para echar un vistazo a eso, súbalo a las asignaciones, recorta los comentarios de los proyectos dependiendo de dónde estés viendo esto y también compártelo en redes sociales. Me encantaría ver lo que estás haciendo si no puedes soportar el cuatro por cuatro, bien. Estoy bien que vayas y retrocedas aquí y digas En realidad, Dan, solo agrega un cuarto para que se descomponga muy bien en estos otros dispositivos. Hazlo, bien, eso es el proyecto de clase número tres. Vete, disfruta. Te voy a ver en el siguiente video. 26. Animación con botón de flujo web con el disparador de elementos: Hola a todos, es tiempo de animación, así que vamos a hacerlo a estos botones. No puedo creer que llegué tan lejos a través de la clase Webflow. Bueno, no te lo puedes creer . Estás como, ¿por qué hemos animado las cosas? Por eso me inscribí en el flujo de trabajo porque se ve genial cuando las cosas se deslizan por ahí. Eso lo vamos a ver. Voy a hacerlo dos botones para empezar. Vamos a conseguir que haga la goma elástica. Este es bastante genial. Pop, listo para toda la jello, ya sea para volar y darles a caer del cielo. Garabatos disquetes y mi jigger favorito, GIGO. Bien, aprendamos a hacer esto en Webflow. Bien, hagamos esa magia. Y así te darás cuenta, si has vuelto un poco a este video, ya tengo esta animación. ¿De dónde vino eso? Recuerda, en un botón puedes entrar aquí y cambiar el hover. Bien, entonces donde esta mi color de fondo es verde para empezar, pero puedo ir a pasar el cursor y cambiarlo a este tipo de meñique rojo. Bien, entonces esa es esa animación. Eso no es lo que quiero hacer click off, click de nuevo en. Voy a añadir algo extra. ¿Qué voy a hacer? Voy a hacer una de esas cosas desde el principio. Entonces hagámoslo. Es este panel aquí, tenga el elemento que desea seleccionar. Ahora funda nuestro botón. Haga clic en interacciones, bien, y vamos a tratar con este elemento desencadenador, no desencadenadores de página, desencadenadores de elementos. Vamos a decir cabeza más. Entonces cuando este elemento, bien, Así botón se cierne. Sí, cuando, cuando me pongo encima de él, ¿de acuerdo? Va a hacer algo no sólo cambiar de color. No, vamos a hacer que se mueva o lo que sea. En Hover, haz esta acción. Bien, entonces vamos a hacer algunas de las prefabricadas porque son agradables y fáciles y están bastante bien cronometradas. Entonces vamos a hacer algo, hagamos pop. Entonces están un poco rotos en. Esto probablemente cambiará. Parecen agregar o quitar cosas de esto. Entonces hay algo así como cosas de movimiento que aparecen y desaparecen. Y luego están las cosas que llaman su atención, énfasis, vamos a ir por el pop k Así que vamos a hacer pop, Vamos a adelantarlo, Estás listo. Y es trabajo y darle una oportunidad. Así que vamos a previsualizar y mirar. Cuando pongo el cursor sobre él, cambia de color y hace una pequeña cosa pop. Agradable flexibilización, flujo de trabajo bien hecho, genial. Se puede jugar a través de todos ellos. Entonces con las interacciones seleccionadas, verás todo esto. Y en vez de pop, podemos hacerlo. Ahora antes de pasar por más de estos con gran poder de interacción viene una gran responsabilidad. Quiero encontrar tu sitio web. Google fue divertido, pero no quiero ir a tu sitio web y tener mil cosas moviéndome. Bien. A pesar de que es muy chulo de ver, Es una buena, Bien, Pero es como aprender. Recuerda cuando aprendiste el destello de lente en Photoshop K y todo tenía un destello de lente, ten cuidado. Te lo advierto, ya sabes, todo lo en tu página necesita animarse, aunque claramente me traiga alegría. Las cosas que necesitas notar cuando agregas estos elementos disparadores. Entonces este elemento desencadena algo. Bien, ¿se pone un pequeño rayo? Impresionante, porque todo Harry Potter, solo una indicación visual que si hago clic por aquí y hago clic en, digamos como, oh, hay una interacción en esta, y solo la puedo ver cuando estoy previsualizando. Aparece también por aquí. Sólo una señal visual que este rayo ya que estamos a la espera de ir, si necesitas ajustarlo, selecciónalo. Y justo por aquí puedes hacer click en él y lo abrirá. Ciérralo. Ahí vas. Hagamos un par, un poquito más. Vamos a deshacernos de jiggle. Tan bonito como es. Hagamos otra terrible. Esto es como puertas de unión de diapositivas de PowerPoint. Es como nuestra transición, pero es genial. De todas formas. Así que tenemos nuestro hover out. Así que en este momento nos acercamos y algo y no hacemos nada cuando realmente, así podemos decir cuando se cierne , podríamos hacer otra cosa. Voy a dársela a parpadear. Dale una vista previa a eso. Puedes previsualizarlo por aquí, pero es mejor hacer una indirecta con él, supongo. Oh, se está volviendo loco. Donde tu día. Eso es extraño. Nunca antes había hecho esa combinación. Es porque lo que estoy asumiendo es porque se mueve. Entonces está tratando de flashear. Si lo sigo, no lo hará. Hará el saldo. Mira si puedo mantener el dedo en él. Lo tengo porque se mueve hacia arriba, así que está haciendo el vuelco del ratón. ¿Eso tiene sentido? Está rebotando y luego activando el despliegue y así está parpadeando y está enloqueciendo. Entonces, no hagamos balance. Sólo hay que hacer desvanecerse. Dale una opción. Cocina caliente y sal. Bien. Ah, voy a dejar esto aquí porque estos problemas con los que nos encontramos, estos problemas están en hover desvanece, probablemente no uno bueno. Vamos a hacer que vuelva a estallar. Y cuando se cierne, es un poco de parpadeo. Y veamos si eso lo arregla. Parpadeo. Oye, vete. Hay combinaciones que simplemente, simplemente no le gustan. Bien, entonces está bien. No uses parpadeo creo que es el vallado y te dejaré jugar con ellos. Otras cosas que puedes hacer, puedes agregar más de una, bien, así que deshagámonos del hover out solo porque me está matando y puedo mostrarte cómo deshacerte de él. ¿Bien? Entonces, ¿cómo deshacerse de él? Acción. Seleccione una acción. Esa tiene que ser una opción de monja, pero volvamos para seleccionar una acción. Bien, así que deshazte de él. Vamos a previsualizarlo. Va a hacer estallar el pop y algo más, así puedes agregar uno más. Entonces, vamos a cerrar esto. Entonces hay una especie de dos partes, ¿verdad? Estás en este tipo de elemento de nivel de activación y vas dentro de él para trabajar en nuestro mouse hover, vuelve a salir otra vez. Puedo agregar una segunda es un poco más. Puedo decir, quiero otro. Dice que nuestro ratón se ciernen. Quiero hacer dos cosas. Yo quería conseguir que hiciera eso además lo conseguiré o tratando de pensar en una combinación que no va a grabar todo. Lo tenemos para reventar. ¿ Podemos conseguir que haga estallar en giro? Debería haber probado esto antes de grabar este video. ¿Qué hace? No hace estallar y hacerlo, lo hace. Vamos a probarlo. Sencillo de hacer ambas cosas. Tiene un pop y una vuelta adentro. ¿Estás listo? Lo es. Está reventando. Es fácil. Es otra dura. Se mueve dentro y fuera mientras gira. Dan glorioso. Bien, puedes habilitarlos. Uno que es terrible video, pero lo dejaremos aquí porque a veces, a veces es agradable ver los problemas así como las cosas completamente siempre funcionando en caso que bajes por la madriguera del conejo de China, agregue demasiadas. Bien, en realidad, ¿qué debemos hacer? Vamos a terminarlo. Sí, ve a través de todos ellos usted mismo. En realidad, no vamos a pasar por ellos. Jiggle. Jiggle. ¿Alguien, alguien puede decir la palabra jugar sin la canción de la garganta de Louis entra y la cabeza? En fin, si no has oído hablar de Google, genial. De todas formas. Entonces lo vamos a dejar en jiggle porque eso es lo que quiero comenzar con esta introducción. Cualquier otra comida para llevar grande es que flotemos, ya hablamos antes. Hover no funciona en una tableta o teléfono porque puedes pasar el cursor con el dedo, puedes hacerlo con un mouse. Entonces, lo que haremos en el siguiente video, haremos algo un poco más como las cosas de animación de carga de página. Eso sería genial. Así que vamos a hacer eso ahora. 27. Desplázate en el desplazamiento en Webflow: Hola a todos. Vamos a hacer esto, mira esto. Voy a desplazarme hacia abajo y las cosas otra vez, un desvanecimiento, mucho ligando en el que se desvanecen mientras tú te desplazas hacia arriba. Lo haremos por completo y luego te voy a mostrar como compensarlos también. Una vez más. Echemos un vistazo. Mágico. Vamos, déjame mostrarte cómo hacer la magia. Bien, vamos a crear algunos pernos de aligeramiento más. Entonces son estos elementos aquí los que quiero desvanecerse. Entonces no quiero hacerlo a la imagen. Quiero hacerlo a lo que rodea la imagen. En este caso, tengo un div que tiene una clase aplicada a él llamada div class of int. Así que date clase si no la tienes, bien, es una buena manera de reutilizarla más adelante. Entonces vayamos a las interacciones. Ahora que lo tengo seleccionado, seguimos usando este elemento triggers. Aquí decimos este elemento. Me gustaría hacer algo diferente a antes de que hiciéramos mouse hover. Vamos a usar este llamado scroll into view. Cuando esta cosa se desplaza a la vista, ya no tiene nada que ver con el ratón. Bien, se debe con el scroll de página y un poco solo lo sigues. Solo dices, bien, cuando se desplaza ellos para ver lo que quieres hacer cuando se hace crecer a la vista. ¿Puedes hacer la acción de, yo solo voy a conseguir que el mío se desvanezca, se desvanezca y se desvanezca? Quiero que se desvanezca. Vamos a Preview y vamos a darle una prueba. Ahora, cuando estás probando, si pruebo aquí, solo carga un poco de inmediato. Bien, entonces lo que tienes que hacer es como subir a la cima. Entonces tienes que hacer algo de desplazamiento. Ahora previsualízala y ya estamos listos para el desplazamiento. desplazamiento no solo se carga una vez, no se restablece cada vez. Vamos otra vez. Desde arriba. Ahí está. Ahí está mi pergamino de pago. ¿Podemos usar esos. Bien, veamos otra cosa porque en el momento ocurre gran parte de la animación real, empieza a suceder como solo la segunda. Parece, como en este momento se está desvaneciendo y se puede terminar para cuando la persona llegue allí. Entonces lo que es bastante agradable es con mi envoltorio div seleccionado, quiero usar este offset y esto se debe con la ventana gráfica. Viewport es como todo lo que la persona puede ver de arriba a abajo. Y quiero compensarlo para que se cargue puede ser un porcentaje después del, después del inicio de la página. Entonces se va a cargar probablemente, digamos que ese es mi 100%. Se va a cargar 17% por ahí. Va a empezar a activar K. Si lo subo a gustar, es difícil de explicar. Hasta en un 40%. Solo va a comenzar a activarse una vez que sea algo así como su 100%, va a esperar hasta que obtenga el 40% hasta el final de la página luego se va a activar. Va a ser un poco raro. Es un poco demasiado. Entonces vamos a darle una oportunidad. Te vas a activar después de las 20 te enviamos eso. Recuerda, empieza por la parte superior. Dale una vista previa. Desplácese a lo largo. Y puedes ver que empezó bastante arriba en la página. Apaga y vuelve a encenderlo. Ahí vas. Entonces, ¿ qué más puedes hacer? Podrías hacer un retraso en lugar de un offset. Offset va a esperar la parte física de la cantidad de desplazamiento que se realiza. Podrías detener eso de nuevo a cero y decir que quiero retrasar, o nos gustaría que se retrasara por este mini milisegundos, 1,000 milisegundos es 1 s, ¿de acuerdo? Lo cual lleva demasiado tiempo. Bien, entonces la mitad son 500 milisegundos. Ve tú, vamos a darle una oportunidad. Así que vamos a previsualizar. Vamos a hacer algo similar. Mira esto. Si me desplazo hacia abajo, sólo va a tomar medio segundo antes de que se cargue, tú decides lo que quieres hacer. Probablemente sea mejor usar el offset porque va a esperar un físico como lo alto que es. Mientras que el temporizador, mira esto, puedo hacer trampa al temporizador si voy aquí y espero, y simplemente dejaré que no lo hiciera. Bien, vamos una vez más despacio con mi ratón. Vamos. ¿Lo ves cargado? Vi que alcanzó su punto máximo y luego comencé. Es un pequeño temporizador, lo que sea que funcione para ti. No hay verdadero bien o mal. Ahora, llevemos esto un poco más lejos porque quería hacerles a todos ellos. Entonces lo que podemos hacer es que podríamos pasar y simplemente editar a cada uno, hacer exactamente el mismo proceso. Será útil porque te pondrías bien en eso. Pero digamos que tengo esto, tengo esa interacción. Abajo de abajo aquí dice, oye, la configuración del disparador. Esto es, me gustaría que no al elemento. Ahora, que es el momento en que lo estoy haciendo a esa cosa física que quería hacerle a todo lo que tiene el mismo nombre de clase. Recuerda que tuvimos, tenemos esos eventos de clase div y puedes ver que se aplica a ese y a ese. Entonces decimos clase, Bueno, Bueno, Todos ellos, por favor miren, todos ellos tienen pernos de aligeramiento. Y es un adelanto. Aquí vamos. Así que desplázate hacia arriba. Bajemos. Y podrías hacer múltiples elementos. ¿Podrías hacerlo a toda la sección? Probablemente podrías fácilmente simplemente hacer la sección entonces. Podrías haberle hecho exactamente lo mismo a la sección y lo haría todo de manera más fácil que lo que acabo de hacer. De todas formas. Sin embargo, lo bueno de ello, es porque es reutilizable si lo usé, mientras que div elementos pasados. Si tengo algo más, repasemos eso. En una Div. ¿Necesito envolverlo en un div? Creo que solo puedo darle el nombre de clase de los elementos div parse. Esto va a funcionar. Debería practicar estas cosas antes de ir a mostrarte. Vamos a darle una oportunidad en la parte superior, probablemente no va a funcionar es totalmente funciona. Ten fe en ti mismo, entonces esa cosa es reutilizable siempre y cuando uses el mismo nombre de clase. Lo siguiente que quiero hacer es que en realidad quiero compensarlo en el momento, ¿verdad? Todos ellos simplemente aparecen al mismo tiempo. Quiero que me guste un poco uno para desvanecerse y el siguiente, el siguiente. Entonces no puedes hacerlo con este tipo de estructura que tenemos ahora donde vamos a aplicar lo mismo a todas las clases porque solo se aplicaron un poco. Y voy a decir aplicado al elemento otra vez. Y me va a repetir. Voy a decir, Bien, así que tenemos offset 20% fade in. Podemos hacer eso, pero un repetitivo. Entonces esto siguiente, este siguiente div pasa div eventos pasados. Vamos a decir, agreguemos elemento disparador de l. Desplázate a la vista. ¿Qué acción nos gustaría pensar? Quiero que se desvanezca y quiero compensarlo en un 20% aún así, en realidad, podríamos necesitar este para ir 30%. Hay un poco más alto antes que realmente comience a activarse. Entonces es una forma de cronometrarlo. Podríamos hacerlo con el retraso real también, tal como lo hicimos antes. Hasta ti, vamos a darle una oportunidad a esto. Tienes un disparador de desplazamiento a la vista. La acción es desvanecerse. Quiero que se desvanezca después de un offset de Woody. No tengo idea de cuanto tiempo va a quedar? Va a ir probablemente no muy bien. Los porcentajes son probablemente un poco altos. Comienza en la parte superior. Dale una vista previa. Vamos a lo largo. Oye, yo tenía razón. Y creo que también he intentado retrasar. Probemos el retraso porque eso estuvo un poco saltado. Entonces tu página offset, nosotros lo mantendremos todo al 20 por ciento. Así que entra en ello. Voy a mandar cero para éste. Al siguiente, entraremos en ello y diremos quédate 20 porque no quiero que eso pase demasiado pronto. Pero vamos a tener un retraso de digamos, cuarto de segundo, 250 milisegundos. Vamos. Este siguiente aquí, el mismo tipo de cosas. Ponlo de nuevo a 20%, 20% de descuento en la página. Los de Bartlett tienen medio segundo, así que 500 milisegundos. Bien, vamos a darle uno de los mejores. Ah, sí. ¿Qué opinas? Es una cohorte o hará animaciones personalizadas más adelante en el curso. Pero por el momento y la mayor parte del tiempo esos han hecho muy bien el trabajo en esos un parte del tiempo esos han hecho muy poco preconstruidos y estos elementos disparan. Muy bien, amigos míos, eso es fade-in cuando estás desplazándote por una página en Webflow. 28. Proyecto de clase 04: interacciones: Hola a todos, proyecto de clase número cuatro. Esta es para crear tus propias interacciones. Quieren crear dos de ellos, como hemos hecho en este curso. Uno para el botón y algo que está en la página scroll, por ejemplo, miembro, ese es el botón uno en hover. Bien, puedes hacer lo que quieras. Y la página se desplaza en mis casos esta desvaneciéndose, pero puedes hacer lo que quieras. La mejor manera de compartirlo conmigo es hacerlo vía video. Entonces estoy en una Mac. Sé que puedes presionar Command Shift F5 y grabar una sección de tu pantalla y luego subirla a las asignaciones, proyectos o comentarios dependiendo de dónde la estés viendo. Y a veces es más fácil solo subirlo primero a Vimeo o YouTube y simplemente publicar el enlace hasta ti en una PC. No estoy exactamente seguro de cómo podrías hacerlo en tu PC. Entonces solo Google cómo hacerlo en tu PC. Este software de grabación de pantalla tanto en Mac como en PC. He cocinado Google sobre cómo hacer eso. Si no puedes, mira, no todos pueden grabar su propia pantalla. Si no puedes, aceptaré solo capturas de pantalla. Bien, así que mira si puedes hacer el video. Me encanta ver lo que es. Practica, diviértete, disfrútalo, y te veré en el siguiente video. 29. Comparte con tu diseño con tu cliente: Hola a todos. En este video vamos a ver esquilar lo que hemos hecho con nuestro cliente. ¿Cómo lo hacemos? Ahora estamos fingiendo en este momento que se trata de un trabajo en progreso. Es un trabajo en progreso, pero eso es lo que estamos haciendo ahora mismo. Queremos compartir con el cliente algunos de los grandes finales terminados. Anunciándolo al mundo. Esto es como, Hey Jeff o Ginny, y aquí es donde estoy haciendo. ¿Qué opinas? Bueno, a lo mejor es llevarlo a algunas pruebas para que la gente pueda solucionarlo un poco, encontrar algún error o algo que falte. ¿Cómo lo hacemos? Súper fácil. Con tu sitio web abierto, ve a publicar, y eso ya debería estar marcado y simplemente haz clic en publicar como los dominios. Hagámoslo rápido y luego retrocederé y te mostraré algunas otras cosas. Por lo que ahora está en vivo en Internet. Es muy emocionante llegar a ella. Da click en esta pequeña flecha aquí, o puedes copiar y pegar eso, o debería abrirse y que mis amigos sea tu sitio web en las interwebs. Es totalmente realizable. Bien, aquí vamos. Y puedes copiar y pegar eso, enviarlo a tu cliente y decir: Oye, échale un vistazo. Es muy emocionante si eres nuevo en el diseño web para sacar tus cosas y realmente en línea, en lugar de simplemente un poco atrapado dentro Webflow o Photoshop o Figma o XD donde sea que tus primeros diseños Actúa un gran hito. ¡Hurra! Echemos un pequeño vistazo aquí atrás. Entonces este de aquí es el dominio que vas a estar usando. Piense en ello como un dominio de puesta en escena. Tan raro. Un poco utilizado en el diseño web para como una parte borrador del sitio web es completamente viable. No tiene nada de malo. Es solo en lo que se llama un subdominio. Entonces el dominio principal aquí es workflow dot io. Esta otra idea de cosas, kayak club punto flujo de trabajo a IO, el subdominio para el dominio principal. De todas formas, algunas personas lo llaman dominio de puesta en escena y es simplemente una buena, Somos una manera de trabajo en progreso. Eventualmente agregarás tu propio dominio personalizado, lo cual haremos juntos. Y será en un sitio web. Se puede vivir de éste. Simplemente no es una URL bonita. Es un poco poco poco profesional. Pero si tienes un sitio web muy poco profesional, calcetonas, usa ese subdominio. Ahora bien, si querías comprobarlo y después apagarlo de nuevo, si lo inpublicaste, lo sacará de internet. El único problema es que si voy a aquí y refresco mi página, obtiene un gran viejo para cuatro era los arameos, el sitio web no se puede encontrar. Bien. Entonces, si lo vuelvo a encender , se volverá a encontrar. Entonces es como encender y apagar. Y una cosa que podrías estar preguntando aquí es que hay algunas cosas que quizás quieras encender. Bien, entonces voy a ir a la configuración de mi proyecto. ¿Quién recuerda dónde estaba eso? Lo hicimos al principio, eso fue cuatro lugares. Miramos a tres de ellos. El diseñador, ahí estaba el editor, lo que haremos más adelante. Y luego ajustes del proyecto y tablero de instrumentos. Estábamos todos escondidos. Te acuerdas de que vaya. Bien, Ajustes del Proyecto. Ajustes del proyecto para el club de kayak de ciervos Ahora voy a mostrarte algunas cosas que probablemente aún no puedas hacer si estás en el plan gratuito. Aún no hemos hecho nada. ¿Bien? Y si lo haces, los voy a mostrar porque quieres echarle un vistazo, pero se les requiere una versión paga de Webflow. Entonces en general, uno aquí, contraseña del sitio web a la gente le gusta encender cuando son algo así como si nuevo y no me preocupo por ello. Solía hacerlo porque nadie va a adivinar que este tipo de como un club de kayak de ciervos cuando flota IO, no hay forma de encontrarlo. Bueno, es difícil de encontrar, pero podrías encenderlo, pero necesitas actualizar tu hosting. Te guiaré a través de eso más tarde también. Si aún no te acuerdas, si quieres actualizar a hosting, puedes usar mi enlace aquí en la pantalla. En otra cosa que quizás quieras hacer es si va a estar ahí arriba por mucho tiempo, está bajo la pestaña de SEO. Aquí hay uno que se llama indexación. Si enciendes esto, solo significa que Google no va a ir a indexarlo. Y lo que quieren decir con indexación es simplemente agregarlo a los resultados de búsqueda porque esto es solo un trabajo en progreso que no está del todo terminado. Es el subdominio incorrecto, podría ser tics de marcador de posición como un ALS. Entonces solo estamos diciendo que están diciendo Google, no entres, busca en mi sitio y agrégalo a tus vastos resultados de búsqueda. Muchas gracias. Pero de nuevo, si pulsas Guardar cambios, va a decir, oye, necesitas actualizar tu hosting. Entonces por el momento, y eso no es lo que queremos hacer. Bien, entonces voy a pasar de atrás a SEO. Entonces tal vez quieras encender esas cosas o podrías simplemente tener esas preguntas en tu cabeza. Sí, puedes hacerlas. Sí, necesitas un plan de hosting pago, pero por el momento, no te preocupes por ello. Como si no me preocupara por ello. Esto es lo que estoy tratando de transmitir. Podrías ser como si necesitara una contraseña. Puedes ir totalmente a hacer eso. Pero solo compartir ese enlace ahí está bien. Obviamente, cuando está encendido, en realidad puedes otro tip que puedes publicar desde las sesiones. No es que nunca lo hagas desde aquí, pero puedes doblar el sitio desde aquí. Puede Anular su publicación desde la configuración del proyecto de sitios web. Pero me parece que es más fácil trabajar así. Y si quieres encenderlo y apagarlo, solo hazle saber al cliente que hay un día de pruebas y vas a deshabilitar la URL. Bien, eso es todo para éste. Pasemos al siguiente video. Te veré ahí. 30. Cuánto cuesta el sitio de alojamiento de flujo web vs el espacio de trabajo: Hola a todos. En este video vamos a ver el hosting en Webflow, los pros y los contras. También veremos cuál es la diferencia entre un sitio y un plan de espacio de trabajo. Está saltando. Todo bien. Lo primero es, es que cuando fluyen, aposté que están en su oficina ahora mismo esperando que termine este video para que puedan ir y actualizar el idioma y los precios y las características que obtienes. Así que asegúrate de que voy a repasarlo ahora, pero esto podría cambiar, el idioma podría cambiar, pero te dará una buena visión general. Entonces estoy en mi tablero de instrumentos aquí. Verás que ese es el sitio en el que estamos trabajando. Se llama sitio de estado. Ahí está esta otra cosa llamada Empezar un lugar de trabajo. Eso fue probablemente lo más complicado entender cuando empecé. Entonces vamos a discutir esos. Y voy a saltar a esta página aquí. Es webflow.com slash pricing, y esto es probablemente lo mismo. No quiero discutir las dos opciones diferentes aquí. Hay algo llamado planes de sitio y abajo aquí, planes de espacio de trabajo. ¿De dónde viene la diferencia? Brevemente, un plan de sitio está hospedando, así lo llaman planes de sitio frío y planes de economías. Estas cosas son las mismas, solo niveles diferentes aquí, pero esto es alojar tu sitio web en algún lugar de internet que pueda vivir donde la gente pueda visitarlo. Alguien necesita hospedarlo. Entonces eso es lo que es este baúl. El plan de espacio de trabajo eres tú como diseñador, tú como diseñador es como en este momento lo estamos usando gratis. Pero digamos que quiero construir más que eso a unos sitios alojados. Necesito diez de ellos. Necesito exportar el código. Necesito agregar protección con contraseña. Ahí es donde tu como diseñador actualizas eso. Personalmente actualizarás esto y pagarás $19 al mes, entonces cada sitio necesitará alojamiento. Entonces, si tienes diez sitios, son diez veces 12. Cada sitio necesita alojamiento, pero usted, como lo necesita el diseñador, puede intentar salirse con la suya con un sitio gratuito, pero es posible que deba actualizar a este de aquí si va a construir más de un sitio web porque desbloquea muchas características. Entonces, eso es todo. Puede salirse con la suya con un solo pago. Quizás los necesites a ambos si vas a entrar en Webflow en serio, Esa es la versión flaca. Veamos un poco más profundo y los planes de sitio, ese plan de comercio electrónico, así que estamos en este plano de datos. El gran inconveniente aquí es que no obtienes un dominio personalizado, bien, todos van a querer a Daniel scott.com, no un guión de ciervo, guión kayak club ancho de punto, carga Io. Bien. Entonces eso es que si necesitas actualizarlo y eso es todo lo que estás haciendo. Digamos que este sitio web es tu sitio web. Es estático. No hace mucho y solo quieres el nombre de dominio. Eso es todo lo que tienes para ir a agarrar el básico puedes obtener el dominio personalizado y eso es todo. El siguiente salto arriba es un CMS. Entonces haremos un CMS cuando construyamos su propio blog. Es cuando hay un montón de artículos y me verás. Es como entradas de blog o podrían ser elementos de cartera o CMS, Content Management System. Si necesitas algo de eso, quieres que el cliente pueda actualizar artículos o publicaciones de blog. Vas a necesitar ir a este de aquí y solo hay una restricción en los elementos de CMS, bien, si tienes más de 2000, tienes que saltar a aquí. Lo mismo con el ancho de banda. 50 gb es bastante para un sitio pequeño a 200 es bastante. Y entonces empiezas a meterte en 400 gig. Pero es como las tendencias, cuánta información viene de tu anfitrión a la gente. Básicamente, se basa en lo mucho que realmente tienen para descargar imágenes y videos y todo tipo de otras cosas. Y realmente a lo que se reduce es a la cantidad de tráfico que tienes. Muy a menudo cuando llegas a estos precios más altos, a menudo estás generando más ingresos y es traducible. Pagar menos por menos tráfico, pagar más por más tráfico. El gran salto aquí son los planes del sitio de comercio electrónico aquí. Cms, sitios estáticos, perfectos. Cuando quieras empezar a tomar pagos, bien, vas a tener que saltar al básico de este de aquí a medida que empezamos. Aquí es donde hemos flujo comenzaremos a ayudarte con los pagos y carritos de compras y pedidos y envíos y todas esas cosas divertidas que son increíbles, realmente útiles de Webflow, pero cuesta un poco más. Entonces estos son exactamente lo mismo solo con diferentes niveles. Cómo un día un club de kayak probablemente va a estar bien en esto porque quiero el nombre de dominio extra y probablemente no va a conseguir más de 50 gb. Dice que quiero empezar a vender cosas de ella. Voy a tener que actualizar a un mínimo de esto. Y luego otra vez, esto solo mejora un poco dependiendo de tu nivel, cuántas cosas hay en tu tienda y tu volumen de ventas. Puedes echar un vistazo a todos estos. Tienen un poco como ver todas las características planificadas. Y puedes desplazarte hacia abajo y echar un vistazo de lo que funcionará para ti en lo que puedes salirte con la tuya y puedes actualizar si es necesario. Bien, esa va a ser mi versión flaca. No quiero pasar por todas las funciones porque va a cambiar. Sé que lo es, pero ir a precios, ver o planificar características tanto para hosting k, que es el sitio o planes de comercio electrónico. Y luego eche un vistazo al espacio de trabajo y solo vea lo que va a funcionar para usted. Si eres nuevo, tal vez regístrate para obtener una cuenta mensual y puedes actualizar a anual si quieres ahorrar algo de dinero a largo plazo, en realidad antes de irte. Pros y contras para mí, los contras son que es un poco caro en comparación con el alojamiento. El hosting tiene que ser pagado, alguien tiene que pagarlo en alguna parte. Pasado los días libres de las geociudades, manos arriba. Quién recuerda aquellos en los que solían financiarlo a partir de anuncios, creo que hay que pagar por hospedar en algún lugar. Pero la desventaja aquí es que es un poco más caro que otros lugares. Si has hecho este tipo de cosas antes, no es indignante, pero lleva un poco a los profesionales y te sientes cómodo sentando a tu propio anfitrión que una cosa. Si no lo estás, puedo configurar dominio. Puedo configurar, puedo configurar una base de datos y configurar mi host en otro lugar. Y, pero esto me gusta porque es alguien que lo está cuidando. Los parches de seguridad son todos manejados por otra persona. En para mí, algunos de los grandes están sentados que el cliente pueda actualizarlo para que puedan iniciar sesión en el editor y hacer actualizaciones para agregar nuestras propias entradas de blog, agregar sus propios artículos a la tienda, organizar sus propias órdenes. La forma que es todo tipo de externalización que manejan ellos. Bien, eso es. Los planes de sitio y el comercio electrónico es hosting. Y este de aquí abajo es básicamente o ¿es un espacio de trabajo? ¿Está pagando por usar el software? Estoy usando cotizaciones aéreas porque es una especie de sitio web, pero software como servicio. Ahí vamos. Bien. Probablemente estaba diciendo lo obvio ahí, pero de todos modos, espero que haya sido de ayuda si no lo fue. Lo siento. En fin, te veré en el siguiente video. Vamos a empezar a hacer que nuestra cartera sea emocionante. 31. Los mejores accesos directos y consejos y trucos de velocidad: ¿Estás listo? Este es emocionante, consejos, trucos, atajos. Ahora que tenemos algunas habilidades de Webflow en tu haber, voy a compartir contigo algunas de las cosas para que tu día vaya mucho más rápido. También te hacen lucir impresionante frente a tus colegas. Colgar hasta el final. Tengo un flujo de viento especial huevos de Pascua escondidos ahí al final. Bien, probablemente el más usado, o al menos para mí, es en una Mac, es Command Shift P. En una PC, es Control Shift P, golpea eso y simplemente alterna entre. Simplemente puedes seguir presionando esos botones y activa y desactiva el modo de vista previa, en lugar de intentar hacer clic en esta difamación más aquí arriba. Bien, entonces eso es Command Shift P en una Mac, controla Shift P en una PC, consigue que el postor entre en modo de vista previa y puedes, en tu teclado, mirar tu teclado, los números que están por encima de la cabeza de letras 12345, arcilla. Puedes simplemente saltar entre todas las diferentes vistas. 123455 no es el que quieres. Simplemente abre que solo haz 1234 o incluso puedes hacerlo tanto en el modo de previsualización como en el diseñador. One-dos-tres-cuatro, recuerdo Command Shift P o control shift P en una PC, puedes mirar el modo de vista previa. Siguiente súper impresionante uno es B vuelta en tu diseñador en una vista previa. Y en tu teclado tienes a, S, D y Z. Todos están agrupados en un teclado inglés. Todos son muy útiles. Esos son los que más uso. Si eres si estás usando lotes de interacciones, puedes ver si pasas el cursor por encima de él, es H. Nunca recuerdo el atajo para interacciones porque no estoy ahí todo el tiempo. Los que M ahí todo el tiempo. Nuestro ASD Z a es Ed. Eso tiene sentido. A para Ed. Siempre voy al anuncio y luego vuelvo al Navigator, que es z a z, a z. El otro es S para estilos. Mira esto si estás por aquí y estás en otra cosa, golpea S por estilos que tienen sentido. A para ED, S para estilos. Y cuáles serían las sesiones. D no tiene sentido. Tiene sentido porque está al lado de los otros útiles en tu teclado. Pero ahí tienes. Como cargas D utilizo cargas y Z para el navegador. Recuerda que hay muchos otros. Sólo tienes que pasar por encima de ellos. Y si estás usando las cargas de Style Manager, probablemente serás el único, pero es G. Vas, bien, ASD z. El siguiente es súper impresionante es el atajo de encontrar todo. Así que estoy, estoy aquí y quiero agregar algo lugar de entrar en mi a y luego desplazarme y averiguar como un componente, tal vez esté bajo layouts. Lo que puedes hacer es ir al persecución y simplemente hacer clic donde quieras que vaya y presionar Comando E en tu teclado. ¿Puedes ver esto? Encuentra cualquier cosa que aparezca, solo necesitas saber qué escribir. Y si quiero otra imagen, apenas empiezo a escribir imagen. Ahí vas. Agrega una imagen lista para funcionar. Entonces quiero agregar otro encabezamiento debajo de este texto de párrafo. Entonces el Comando D y yo solo vamos a golpear, ahí vamos. Golpea Enter. Acabo de escribir las primeras letras y golpeé Enter y comencé a golpear, si recuerdas vagamente cómo se llama, Comando E. Oh, así es Comando D en una Mac, control E en una PC. Lo siento, chicos de PC, me he olvidado. Sí, Bien, Entonces Comando E en una PC y luego haga clic en Pie de página. Mira eso. Hay un pie de página, un pie gigante hacia arriba. No puedo agregar un pie de página dentro de esto. En fin, entiendes la idea. El comando K también funciona. Hace Control K en una PC también. Si algunos de estos atajos no funcionan o cambian, puedes bajar para ver este pequeño signo de interrogación abajo Hugo help y atajos de teclado. Y va a enumerar el topo que te estoy dando los buenos. ¿Puedes ver en una Mac es Comando E y Comando K. En el pasado solo era Comando K, pero se abre la tecla Comando en una Mac? No puedo recordar. ¿Esa patrulla de Michigan es otra cosa? Entonces lo cambiaron pero levantan el viejo, lo cual es confuso de todos modos. Entonces eso es Control o Comando E, encuentra cualquier cosa. Ahora eso se pone mejor. ¿Qué mejor usar, oye, cuando puedes agregar una clase automáticamente? Bueno, simplemente mira esto. Digamos que aquí tengo este estilo. Voy a agregar una clase cuando hemos estado subiendo aquí y hemos estado pasando por esto y podemos elegir entre las existentes o podemos escribirlas para agregarlas. Mira esto. Si pudiera usar mi teclado, haga clic en esto y presiono Comando o Control, Retorno en las teclas de mi teclado, saltó por aquí. Aquí estoy. Puedo escribir calefacción porque he llamado a la mía relativamente bien. Ahí vamos. Vayamos a este Comando Retorno o Control Retorno. Y ya sólo voy a escribir párrafo de un instinto. Tengo texto. Ahí vas. Estoy usando mis flechas para bajar. Ahí está mi cuadrícula de bloques de texto. Aquí vamos donde se pone genial es Festival y deshacemos el mío. Comando o Control Z. para volver es déjame mostrarte un poco más de un flujo combinando un par de ellos. Entonces, debajo de este párrafo necesito un, digamos otro golpeando. Entonces voy a ir al Comando E para sitio de recarga. qué atajo me dio, no estoy seguro. Es eso otra vez. Entonces aquí vamos a golpear Comando E. Voy a escribir en bateo, golpear Retorno, comando devuelto para agregar la clase. Y voy a ir golpeando abajo a abajo uno. Para que puedas agregar cosas y darle estilo sin pasar por todos los menús. Se agrega comando o Control E, junto con Comando o Retorno de Control. Este de aquí, botón, voy a ir Comando Regreso. ¿Qué más se me ha olvidado un Más estilos de botones. Sólo tengo un botón de navegación. Puedes agregarlos. Digamos que solo quiero agregar uno. Quiero agregar un coágulo y quiero agregar una nueva clase aquí. Entonces solo voy a llamarlo botón y voy a llamar a este retorno púrpura. Se ha creado una clase. En lugar de seleccionar uno, es el mismo atajo Comando o Control Retorno. Y entonces puedo bajar aquí y decir en realidad el trasfondo de éste va a ser ahora púrpura. Ahí vamos. Bien, el siguiente es bastante genial. Es éste de aquí. Se llama modo de rayos X. Ese es el atajo es Comando Mayús X o PC. Será Control Shift X. ¿Qué hace? Hace que todo sea blanco y negro, lo cual no es tan útil. Sin embargo, lo que es útil es cuando estoy en este modo, mira cuando coloco el cursor sobre, puedes ver que no estoy haciendo nada, solo estoy flotando y me está mostrando todo el relleno y dónde está viniendo de. ¿Puedes ver eso? ¿Por qué está esto por aquí? Es porque hay relleno que es verde. ¿Qué está empujando esto un poco? Es porque hay azul que es margen, lo mismo con esto. Si hago clic hacia arriba, ni siquiera estoy haciendo clic simplemente flotando sobre esta sección aquí. Tiene relleno encima. Eso es lo que está empujando todas estas tomas. No es margen del título. Está pasando de la sección héroe. Así que es solo una manera muy práctica de moverse e ir, ¿qué está haciendo esto? Haz esto. Bien, eso es Comando Shift X o Control Shift X a un encendido y apagado y simplemente trabaje su camino para ver qué se está viendo afectado. Genial. Si estás trabajando en el proyecto de otra persona y no puedes ni el tuyo desde hace mucho tiempo y no puedes recordar lo que realmente está haciendo que las cosas hagan lo que se supone que están haciendo. El siguiente está por aquí en mis estilos, que es S para estilos. Estoy en el panel Estilos. Y si mantienes presionada la tecla Opción en una Mac, tecla 0 en una PC y haces clic en cualquiera de estas pequeñas flechas o galones. Todos cerraron y es forma agradable y ordenada de trabajar y simplemente y salir en lugar de tenerlos todos abiertos, que tiene esa misma clave, Alt u Opción, y desplazamiento a través de ellos y tratando de averiguar dónde están. La otra cosa buena de esta opción es que puedes empezar a ver si tengo esta seleccionada. Me está mostrando que esta imagen, esta clase, al menos que he seleccionado aquí, está haciendo cosas sobre el diseño y el espaciado, pero nada más. No hay los puntos azules. Eso significa que algo en realidad está haciendo algo en esta clase. Y en este caso, es el display configurado para bloquear. El dimensionamiento tiene cierto margen en él. Estos de aquí, esta clase no hace nada con posición, absolutamente nada, sin puntos. Los ámbar de aquí, solo están diciendo que en realidad hay un ancho máximo viniendo de otra parte. Y por eso es Amber. ¿Cómo averiguo qué es lo que hace que esto sea 100%? Mantienes presionada la tecla Opción en una Mac, tecla alt en una PC y simplemente haces clic en ella. En realidad hace la tecla Comando o la tecla Control en una PC. Y dice que los valores que vienen de todas las imágenes etiquetan. Veremos esa etiqueta más adelante. Pero hay momentos en los que echemos un vistazo a esta tipografía de texto. Aquí no se hace nada. Muchas, muchas cosas de MBA. Pongamos el cursor, mantengamos el cursor sobre eso. Echemos un vistazo al color, mientras que el color que viene de mantener presionada la tecla Comando en una Mac, la tecla Control en una PC. Dice, hola, viene de la sección llamada héroe. Entonces de ahí es de donde obtiene su color. Entonces podría dar click en esta sección aquí y decir: Sí, ahí está, es azul, es blanco. Está afectando a todo lo que está dentro de él. Bien, la siguiente son las unidades de recolección. Entonces digamos que este golpeando aquí, queremos ir En realidad, sí, hagamos esto. Hagamos la topografía. Y digamos que no queremos que sean píxeles. Vamos a usar objetivos, bien, en realidad no tienes que bajar esto y decir que quiero objetivos o llantas. En realidad puedo deshacer eso. Voy a simplemente teclear, quiero que sea a RAM y presione Enter. Lo ves acaba de actualizar eso y lo ajustó. Cualquiera de estos campos puedes escribir en medidas y decir quiero que el espaciado sea un margen de 50, pero yo quería ser por ciento. En lugar de cambiarlo de píxeles, solo puedo escribir por ciento y lo hará 50%. Bien, deshacer, deshacer. Las cosas se ponen torpezas y nos vamos a deshacer de él. Siguiente, bien, Este siguiente es más útil cuando tienes sitios más complejos, harás uno de esos más adelante. Pero para ponerlo todo en este video aquí, vamos a dar click sobre esta imagen aquí. Y si uso mi flecha izquierda y derecha, puedes ver que se mueve a través todo lo que es lo que se considera un hermano. Todo lo que hay en esta sección llamado héroe o estos tipos, todos son amigos. Todos son hermanos. Todos están en el mismo nivel. Puedes hacer click aquí y usar tu izquierda y derecha solo para seleccionar los diferentes. Puede ser complicado seleccionar estas cosas. Hay muchos datos en la página y a lo mejor no es muy grande. Entonces, izquierda y derecha son hermanos arriba y abajo. Así puedo usar mi flecha hacia arriba para ir y seleccionar el padre. En este caso, es el héroe de la sección. Vamos. Entonces esa es la distinción ahí. A veces incluso se puede hacer clic en la sección de abajo. Así que haces clic en el niño y simplemente golpeas la flecha hacia arriba y eso seleccionará todo lo que esté fuera de él puede ser realmente útil cuando no hay espacio. A lo mejor estos botones están cubriendo el fondo. No podemos seleccionarlo. Entonces solo podemos decirte flecha arriba, selecciona el padre que trabaja aquí abajo. Porque recuerda que aquí hay etiquetas div. Podemos usar el navegador por supuesto, pero simplemente hacemos clic en esta imagen, pulsamos la flecha hacia arriba, y seleccionaremos el div padre hacia abajo, comenzaremos a seleccionar los hijos. Entonces puedo decir Sección eventos pasados, puedo ir flecha abajo, flecha abajo e ir más profundo dentro de ella, cosa que nunca hago. Pero la flecha hacia arriba es realmente buena. Seleccionando al padre, sigue adelante. Eventualmente obtienes el cuerpo todo el camino en la parte superior, el abuelo, nadie lo llama así Bowie. Bien, el siguiente. El siguiente es, voy a dar click en las etiquetas de este párrafo aquí. Quiero cambiar la talla. Si hago clic aquí, puedo usar mi flecha hacia arriba. Se ve que se mueve a través de 16, 17, 18, 19, abajo, arriba y abajo. Apenas las teclas de flecha en cualquiera de estos pequeños campos se puede tabular a la siguiente, que esta pestaña cuando la altura. Bien, para que puedas jugar con estas tabulaciones de turno vuelve atrás. Fresco. Lo uso todo el tiempo. Pero voy a agregar, puedes mantener presionada la tecla Mayús y usar la flecha hacia arriba. Se ve que va en lotes y hojalata. Bien, y eso es cierto básicamente para cualquiera de estas opciones. Entonces digamos que quiero que el espaciado sobre el margen aquí esté comenzando en uno. Puedo hacer clic aquí y usar mi flecha hacia arriba para ir individualmente, mantener presionada la tecla Shift para repasar y trozos grandes. ¿Lo ves trasladándose a patria? Bien, ¿cómo lo restableces? Puedes presionar el botón de reinicio en la mayoría de estos o mantener presionada la tecla Opción o Alt y hacer clic en ellos y simplemente lo restablecerá a lo que sea el valor predeterminado. Recuerda el cero. Recuerda que el valor predeterminado a veces no lo es. En este caso aquí, si lo restablezco a la, si lo pongo a cero para volver al valor por defecto, no al predeterminado. El valor por defecto es en realidad probablemente 16. aferra a la opción, darle un click y en realidad lo hará, 14 es lo que el valor predeterminado para eso es. Así que recuerda, el clic de Opción o Alt es mejor para restablecerlo, sacarlo de ahí. No vuelvas a lo que era por defecto. Entiendes la idea. No tengas miedo de que Alt arrastre las cosas. Así que mantén presionada la tecla Alt en una opción de PC en una Mac y mira esto. Puedo arrastrar otro de estos y mirar, tengo dos de ellos. Ya sabes, el rumbo por aquí, mantén presionada la tecla Alt u Opción y simplemente arrástrala y la duplicará mientras estás arrastrando. La otra cosa útil es que puedes hacer clic derecho en cosas en Webflow. Puedo hacer clic derecho en esto, meterme en cosas diferentes. Copiar, duplicar. Puedo agregar una clase a, puedo renombrar la clase que está por aquí, puedo agregar un disparador. Mira esto aquí mismo, en lugar de ir a esta opción por aquí, podría convertirla en un símbolo. Puedo moverlo arriba y abajo a los padres. Ahora solo estoy leyendo esto. Y es un poco raro porque en una aplicación basada en web como esta, asumes que hacer clic derecho va a hacer todo tipo de cosas como Googly, no la aplicación real, pero de alguna manera hemos fluido de tomar el control del ratón y a veces no funciona por aquí. Puedes ver que esto es lo normal que ves en el navegador Chrome aquí que obtienes cosas de Webflow. Otra cosa que puedes hacer es con algunos de estos campos, sobre todo este tipo de campos como singulares que tienen las lapas. Puedes mantener presionada la tecla Opción en una Mac, tecla alt en una PC y simplemente arrastrarlas. ¿Puedes ver que la pequeña flecha cambió todo hacia abajo mi Opción en una Mac, alt en una PC, y simplemente arrastra estas cosas hacia arriba y hacia abajo otra vez? Solo un visualmente consígalos donde quieras, algunos de ellos les gusta este margen aquí, en realidad no tienes que mantener nada presionado . Simplemente arrástralos. ¿Te acostumbras a cuáles hacen cuáles? Estos como los de estilo infográfico, solo puedes arrastrarlo. Pero cualquiera de estos campos en los que vas a escribir, puedes mantener presionada la tecla Opción en un Mac, tecla alt en una PC solo para hacer clic y arrastrar, bonito. Hablando de arrastrar por aquí, lo hemos mirado antes, pero si mantienes presionada la tecla de opción aquí arriba y arrastras, notarás que incluso con solo hacer clic en la tecla hacia abajo, puedes ver esto pero destaca. Mostrándote el voy a hacer que ambos lados tengan el mismo aspecto. Ambos son 98. Si mantiene presionada la tecla Mayús o la tecla Comando, la tecla Mayús. Y arrástralos, harán la parte superior, inferior y levantarán. Genial para cosas como las secciones donde quieres que todas tengan algún margen o en este caso algún relleno todas sean iguales. Mantenga pulsada la tecla Mayús y arrastre una de ellas. Todos vienen a dar el paseo. Y la opción Alt es cualquiera de los lados, ya sea superior o inferior. Haciendo un lío de éste. Además, mientras estemos aquí, recuerda que puedes anclar el Navegador si tu pantalla es lo suficientemente grande. Es esta opción aquí, significa que simplemente no desaparece. De lo contrario, el navegador es súper útil y tienes que abrirlo cada vez. Quédate ahí, por favor. Gracias. Y por último pero no menos importante, el más emocionante de todos, es el huevo de Pascua dentro de Webflow, siendo el diseñador, no hagas nada más. En realidad. Digamos que tengo esto. Yo estoy como, ya sabes, ¿qué? Tiene que ser algo mejor que el impacto. No quieres algo mejor que impactar. Es esto listo para escribir IDD, QD, y luego volver a entrar. Y los días felices se ven, se apareció el cómic Sans. Te odio Comic Sans. Pero es su odio es una palabra fuerte. Lo siento, Comic Sans, amantes del cómic Sans. ¿Cuál fue ese atajo otra vez, es IDD, QD. Obtienes puntos extra. Si sabes lo que es eso. ¿Alguien recuerda de qué era eso? Házmelo saber en los comentarios. Si haces eso en Estelle broma para los de cierta añada, ¿verdad? Esos son todos los atajos que me encantan en uso. Podrías tener el tuyo propio, si tienes uno que quieres compartir , amenazó los comentarios. Y si te lo estás preguntando, tampoco puedo encontrar una manera de apagarlo. Bienvenida. Una vez que está encendido para un proyecto, parece que no puedo apagarlo. Perdón por eso. Ahí vamos. En el siguiente video. 32. Cómo cambiar los estilos predeterminados en Webflow: Hola a todos. En este video vamos a ver cómo cambiar los valores predeterminados para los sitios web de Webflow. En lugar de agregar clases a todo lo que vamos a pasar y decir este golpeo, vamos a decir todos golpeando en todas las páginas. Me gustaría que tuvieras este tamaño de fuente diferente. Puedes ver que va a cambiar todas las instancias de ese golpeo sin tener que crear una clase. Hay algunas etiquetas predeterminadas subyacentes que podemos usar. Podemos ir aún más lejos y agarrar todo el cuerpo y decir, todo en este cuerpo de todo este sitio web va a ser una nueva fuente, Comic Sans. Ahí vamos. Terminaremos en una posición de diseño muy terrible, pero una muy buena comprensión de CSS. Así que solo querer el diseño se pone malo, pero el conocimiento se pone bueno. Bien, vamos a sumergirnos y cambiar todos los valores predeterminados. Para este ejemplo, he creado un sitio, uno nuevo no está pasando mucho, si quieres seguirlo, simplemente crea un sitio en blanco y un flujo de trabajo. Y lo que he hecho aquí en el diseñador es que acabo de lanzar un montón de elementos diferentes. Bien, perdón, lo tiré en un contenedor y una sección y algunos encabezados y párrafos, algunos enlaces y algunos botones y algunas imágenes solo para que podamos mostrar cambiando los valores predeterminados. Y lo que voy a hacer para que sea obvio también. Y voy a pegar toda la sección y copiarla y pegarla. Así que tengo dos de ellos en realidad van a crear otra página también y tirarla sobre ellos. Solo para mostrarte que cuando actualizas una, va a todas las páginas o a todo lo que hay en este sitio web. Podrías sumergirte. Bien, tú vuelves. Bueno, lo hice fue crear una nueva página, así que tengo casa y segunda página, así que empezaremos por casa. Entonces digamos que quiero darle estilo a mis encabezados para todas las páginas. Sé lo que tiene que ser. Entonces, en lugar de crear un estilo y aplicarlo cada vez como lo hemos hecho, hemos pasado por aquí y digamos, hagamos un nuevo estilo llamado batear uno. No vamos a hacer eso. Lo que vamos a hacer es no tener nada escrito ahí. Simplemente haz clic ahí y estas rosas aquí, bien, esta etiqueta HTML, estas enormes etiquetas globales, estas ya existen, k son etiquetas a nivel de bloque. Dicen todos los encabezamientos H1 en todo mi documento. Ese estilo, ese, genial. Y se puede ver por defecto que hay algunos de esos incumplimientos que vimos antes en el curso. Mira, de ahí viene. Dices que en realidad no quiero ningún distinto de cero. A mí, se marchó. Y quiero mi tipografía, el último héroe. Quiero que mi defecto sea, vamos a usar, no lo sé. ¿Qué edad ves esa actualizada y esa? Y vamos a la página dos. ¿Sabes qué va a pasar? Segunda página. La segunda página también lo ha hecho. Si optas por no usar esas etiquetas a nivel de bloque, Eso es lo que el carbón, se actualizarán en todas las páginas. Aún puedes agregar clases combo a esto, bien, para cambiarlo. Puede que no le des el color porque va a aparecer en diferentes colores en diferentes páginas. Blanco sobre negro, negro sobre blanco. Podrías decir que va a ser la fuente correcta. Es un poco deshacerse de los márgenes o mantener los márgenes o cambiar los márgenes. Y podrías jugar con el tamaño de la fuente, ¿de acuerdo? Se podría decir que mi tamaño predeterminado para un H1, en lugar de cambiarlo cada vez va a ser 24. Bien, eso es lo que has decidido en ese caso, eso totalmente no funcionó. Eso creó una clase porque no tenía seleccionada esa etiqueta global a nivel de bloque. Entonces ahora deshaga eso. Regresa a donde estaba. Bien, y si hago clic en esto, notarás que no está ahí. Cuando haga un cambio, va a crear una clase llamada bateo. No es lo que quiero. Entonces voy a deshacer, hacer clic en él otra vez, clic aquí, hacer clic en éste, y luego decir que va a ser 24. Y ojalá, si he cambiado ese tipo de global, puedo volver a mi primera página y todas las han cambiado todas 24. Entonces, ¿cómo averiguas qué cambiar? Si hago clic en este de aquí, nuevamente, no escriba nada y simplemente haga clic. Se ve que hay unos párrafos viejos y yo podría decidir que todos los párrafos otra vez van a ser grandes vibraciones, terribles. Entonces el espacio después todos esos párrafos va a ser, pero se ponen, y uno pasa algún tiempo trabajando en estos justo al inicio de un proyecto. Y luego puedes agregar clases combo después y más tarde si necesitas hacer este tipo de cambios como predeterminados, vuelve a estas etiquetas rosas, solo asegúrate de que esté seleccionado antes vas y haces cambios. Lo mismo con esta imagen. Se puede ver aquí, hay algunos incumplimientos. Si no estás seguro de cuáles son los valores predeterminados, sabemos por ese azul, los colores azules. Así que recuerda si mantengo presionada Opción u Opción Alt en una Mac, alt en una PC, y tengo este tipo por defecto. ¿Se ve que las cosas azules son las predeterminadas que han venido de Webflow o puede simplemente diseñar web en general? Por lo que se asienta un diseño de pantalla. Es el miembro predeterminado. Lo cambiamos desde el principio para ser bloqueado. Podrías decidir, solo quiero que se bloqueen todas mis imágenes. Espaciado. Hay espaciamiento en Haven. Estás como, Oye, es azul. Dice que está haciendo algo. En realidad se establece en cero, que no se levanta por defecto, en realidad se establece en cero por Webflow. Lo mismo aquí. Tamaños que hicieron un ancho máximo del 100 por ciento del tamaño real, lo que no se estira y pixeló todo. Eso no está activado por defecto, Webflow lo hemos hecho por nosotros solo como una etiqueta de todas las imágenes, todas estas otras no tienen nada aplicado a ella. Y este de aquí está recibiendo algunos estilos de otra parte. ¿De dónde lo está sacando? Esa es una gran segue, pero no planeé. Pero de todos modos voy a hablar en este video. Entonces lo que puedo hacer es quiénes son los miembros, ¿cómo averiguo qué es lo que le está dando esto? Y el color. ¿De dónde vienen las acciones? Bien, no es blues, no viene de este bloque HTML de imágenes reales. Viene de otra parte. ¿Cómo lo consigues? Mantenga presionada la opción, dale un clic. Este comando de opción. Comando en un Mac Control en una PC. Y dice, oye, viene del peso corporal. ¿Qué es lo que siente ese? Hemos estado estilizando esto, este bateo, bien, y fuimos a las viejas etiquetas y fuimos todos los encabezamientos son para Homero. Lo que podemos hacer es en realidad podemos peinar incluso un paso más alto que golpear para que podamos ir al cuerpo. El cuerpo lo está todo en la página. Entonces, lo que podríamos hacer es que veas que realmente elegimos a propósito golpear y a propósito diseñamos párrafo, párrafo. Pero aún estos otros, todavía me sale un Aereo. Entonces, lo que puedes hacer es darle estilo al cuerpo primero. Probablemente sea el primero en darle estilo. Bien, entonces haces clic en amigo. Lo mismo aquí. Miro hay un cuerpo o páginas. Entonces lo que puedes decir es que en realidad todo el tipo de esto va a ser una locura. Para que podamos verlo todo IDD, QD. No funciona cuando has hecho clic ahí. Mi d, d, Q, d. mira Comic Sans. El predeterminado ahora es Comic Sans y joy enorme. Si no pide nada. Si no dice específicamente ser algo así como dos jonrones, va a por defecto a Comic Sans y mi 16. Bien, Así que dale estilo a tu cuerpo primero. También es bueno para hacer el color de fondo. Bien, así que voy a ir, mi color de fondo va a ser este color. El premio al diseño va a bailar, consiguió que el cuerpo cuida el color de fondo más todo lo que hay dentro de él. Dice, Oigan, todos ustedes, pueden pasar y decir, quiero que todas las fuentes sean de esta y del tamaño. A menos que lo anule porque la calefacción es un poco más específica que el viejo amigo genérico. Entonces la especificidad entra en acción y dice, no voy a ser Comic Sans. Voy a ser así con el párrafo si lo borramos. Si entro aquí y digo en realidad, vamos a ir a mis párrafos enteros y entrar en tipografía y decir, ¿cómo lo aclaro? Porque puedo cambiarlo, pero no quiero cambiarlo. Quiero aclararlo. Así es. Mantenga pulsada la tecla Opción en una Mac, tecla alt en una PC, va , bien, no le voy a decir qué hacer. Voy a por defecto a lo que sea el default es en un mike casos ahora Comic Sans porque viene del amigo, Oh Dios mío, las listas vienen a lo largo de k. entonces hay muchas cosas. estilo aquí es bastante importante para cambiar por defecto porque sé que cada vez que haces algo así es un subyacente ¿ Ves el subrayado? Hay un poco de color azul extraño. Podrías decidir en realidad ahora voy a ser enlaces. Así que voy a borrar eso. Bien, probemos cómo conseguí esa clase ahí. Creo que estaba meando con eso, pero voy a decir todos los enlaces ahora tengo una decoración de texto, topografía de, no quiero que quede subrayado. Quiero que no sea ninguno. Muchas gracias. Y no quiero ser de ese color azul. Quiero que sea solo el color de texto normal que estoy usando. Ni siquiera estoy seguro de cuál es el color del texto que estoy usando. Vas podrías dejar el subrayado ahí para que sepas que es un enlace en el que se puede hacer clic. Bueno, quizá no menos importante el azul se haya ido. Bien, lo mismo con los botones. Haga clic en esto. Hay un viejo enlace. Entonces todos los enlaces son un poco extraños porque todos los enlaces son muy similares a este de aquí, ¿ qué es lo que decidimos? Eslabones de bola, son lo mismo. Entonces cuando pides estilo, especialmente todos los enlaces, un botón es de estilo link, este toma link es el mismo y lo mismo cuando estás tratando con algo llamado un link block, con algo llamado un link block, sigue siendo considerado un clic en él o es un bloque vinculado? Todavía se considera todos los enlaces. Es uno de los pocos que tiene como un multi-uso. Pero si te encuentras estilizando lo mismo una y otra vez, un vistazo a su cosa de nivel base. Pasar un poco. Tiene una clase en ello. Bien, borra la clase y solo ve, quita, la seleccioné, da clic en ella para ver lo que aparece en esta etiqueta HTML aquí, y tal vez puedas estilizarlas todas a la vez en todas las páginas. Bueno, no pensé que terminaría aquí. Entonces el increíble diseñador, de nada. Hemos aprendido lo que es, este tipo de etiquetas HTML o son un poco predeterminados para la página, el estilo de etiquetas a nivel de bloque de llamadas, entonces puedes darle estilo todo en un sitio web completo a la vez. Y si quieres agregar clases encima de ellos para pequeños cambios únicos, bien, eso es todo. Te veré en el siguiente video. 33. Combo vs clases globales en Webflow: Hola a todos. Este feo diseño antiguo está aquí para enseñarnos la diferencia entre clases globales y combinadas en Webflow. Vamos a sumergirnos en una nota rápida antes de empezar a esto es relativamente complicado. Va a haber algunos de ustedes ahí afuera, van a estar asintiendo y continuando. Eso tiene total sentido. Y va a haber algunos de ustedes allá afuera que van, Oh Dios mío, mi cerebro explotó. Eso está bien. Traté de introducir esto al principio del curso para que podamos eliminarlo a lo largo del curso. Entonces no es una sorpresa al final, pero si te encuentras luchando un poco, está bien. Esto es algo complicado. Se te permite estar un poco confundido y ojalá que al final del curso, lleguemos mejor y tal vez puedas volver a este video. Bien, vamos a ponernos en marcha. No explotes tu cerebro. Bien, para entender una clase global, vamos a ignorar solo para este video, las etiquetas HTML, como las predeterminadas. Vamos a ver clases combinadas versus clases globales porque simplemente le quita algo de la complejidad. Veamos una clase combo porque entender dónde termina eso es un buen lugar para comenzar a comprender la clase global. Entonces quiero crear una clase aquí llamada bateo. Bien, y quiero que este encabezado sea una fuente de Mary con un, no quiero que sea un color de fuente de rojo. Y eso es lo que quiero. Ahora. Necesito dos de ellos. Hay otros golpes aquí abajo. Este tiene que ser azul. Entonces lo que puedo hacer es agregarle una clase combo porque cambié esta original. Va a cambiar a los dos. Entonces voy a clase combo. Y esto va a ser deshecho en frío. Tenga en cuenta, llamemos a este azul. Entonces puedo decir con azul, vas a ser azul o morado. Lo consigues y es azul. Ese es un gran uso de una clase combo. Bien, está construido encima del original y agregas un poco de extra. Lo siguiente es donde se va a descomponer. Quiero agregar la clase combo no tiene nada de malo con la tercera clase combo, pero digamos que es algo que quieres usar un poco más que solo el margen de bateo izquierdo. Y eso es una taquigrafía para margin-left. Y voy a tener una x out, que es una muy grande, grande. En vez de decir 64 pixeles por si lo cambio, solo lo voy a llamar Excel, bueno, tipo de tamaño genérico. Yo sólo lo inventé. Pulso Enter en mi teclado y voy a decir que quiero un margen de 64 pixeles, un buen tamaño de Excel. Así que tengo esa pequeña combinación. Ahora aunque más adelante en el curso o prestamista en tu página web, estás como, Bien, necesito, vamos a tomar una imagen o se le echa de menos la imagen? ¿Edom está ahí? No está dentro de mi contenedor. Va a ir dentro de mi contenedor. Y necesito empujarlo a través del mismo partido exacto. Entonces voy a ir a la derecha, voy a usarlo. Lo mismo en L. No es ahí está mi correo electrónico. Lo que sucede en Webflow, y la forma en que estructuran estas clases combinadas es que ahí en realidad, no se puede tener correo electrónico Excel un poco a nivel global. Aquí está apegada a este tipo de estructura. Echemos un vistazo a esta cosa de aquí. Se llama el encargado de la piedra, demostrándote que solo podemos tener ML o ML margin-left extra grande. Se ciernen por encima de él. Dice seis píxeles iguales solo después del azul, bien, Y solo después de golpear, están todos unidos. Es una buena manera de agruparlos. De lo contrario terminas clases por todo el lugar donde tienen problemas es, es si voy a golpear ahora y digo, bien, golpeando, me gustaría estar, cuando me puso azul es ML, no puedo usar ese espaciado globalmente. Entonces aquí es donde, aquí está el global. ¿Cómo lo haces? Lo que haces es agregar diblock. El libro tiene una cosa genérica agradable. Es solo un contenedor vacío en cualquier parte de tu documento como Meta. Y le agregas una clase a nivel raíz, no estás construyendo encima de nada más. Esto es la nada. Vamos a hacer click en él y te vamos a decir ML, Excel, mediano, lift, extra-grande. Voy a darle a Enter no, no solo haga clic aquí abajo que podría estar encontrándose con ese problema que debería haber mencionado antes. Pulsa Enter para asegurarte de que hay un, he dicho Sí, voy a hacer un selector. Y voy a decir que tienes 64 pixeles, ¿de acuerdo? Porque lo hice a este nivel como raíz, ¿de acuerdo? En realidad ya no necesito esto. Está creado. Si lo borro, sigue siendo Leah en mi manager de estilo, pero puedes ver que está en el nivel base aquí. Ahora es un estilo global. Ahora te puedo decir, mi amigo es ML Excel. Ve a empujarlo por encima. Este tipo. Quieres ser MLA Excel a Excel, eso es un estilo global. Veamos otro buen ejemplo de combo y global, y estamos, ambos son, podemos vivir en armonía. Entonces agreguemos un botón. Entonces voy a agregar botón aquí. Y digamos que esta cosa por defecto quiero cambiar. Entonces voy a agregar una clase llamada botón. Notarás que no hay, Hay un enlace antiguo, pero no hay etiquetas HTML de botón Me gusta. Así que los botones son solo enlaces de estilo con relleno y se puede hacer clic. Bien, entonces vamos a crear una etiqueta de botón, lo siento, una clase de botón tal vez había regresado para crearla. Voy a decir que las esquinas redondeadas van a ser realmente grandes y obvias. Va a tener una fuente. Debería estar cambiando esto probablemente con mi etiqueta corporal, pero solo lo vamos a hacer por este tipo. Entonces voy a decir que va a impactar. Hagamos nota Homero de algo más obvio? Escojamos esa. Bien, entonces mi botón son estas dos cosas. Digamos que quiero un botón grande. Bien, entonces voy a crear una clase combo grande y presionar Enter en mi teclado. Lo que voy a hacer es voy a decir que tienes en la parte superior aquí un poco de relleno extra. Así que sosteniendo la opción en una Mac, alt en una PC. Bien, quiero ser algo así para el grande, tal vez incluso más grande. Y voy a cambiar mi tamaño de fuente. Voy a moverlo arriba un par. Bien, entonces esa es una clase combo, una buena. Bien, entonces tengo un botón que hace las cosas genéricas. Entonces significa que puedo tener un botón o ¿tú eres botón? Un botón y esa clase de botón. Y tiene esquinas redondeadas, pero también hay una opción para un botón grande, que puedo encender y apagar. Y puedo crear una pequeña o mediana. Puede que tengas un botón cuadrado uno y no un botón cuadrado, donde la clase global sería útil ahora está coloreando a k Así que podría llamarlo el botón, pero va a haber instancias en las que yo necesita un botón de luz sobre un fondo oscuro y viceversa. Entonces el problema de hacer eso de la manera en que Webflow hace estas clases combo es que tendría que crear tantas clases combo diferentes, bien, no tengo que crear otra primaria. Digamos que el color se va a amarillo. Crearía una clase amarilla. El problema es que también tendría que crear un botón pequeño clase amarilla. No hacen tipo de crossover. Una clase global sería útil porque llego a usarla en más de una cosa. Así que vamos a crear un div. Suerte. Bien, llamemos a esto antecedentes. Entonces bg es una muy buena taquigrafía para el fondo. Y voy a crear primaria. Es útil ir primario, secundario, primario, secundario a secundario tres, lugar del nombre del color en caso de que el color cambie, alguien cambia el color principal de una marca. Nos pegamos con fondo rojo, tienes que romper la tierra. Deshacerse podría terminar siendo un caso azul. Entonces primario es un buen nombre de marcador de posición. Y todo lo que voy a hacer es que voy a hacer bajar esto. Voy a decir antecedentes para esto. Digamos que mi color primario va a ser este color como el morado. Perfecto. Bien, y voy a crear otra. Así que voy a ir, usemos algunos de nuestros atajos. Recuerda Comando E, div, diblock, hit return. Creo que mi diblock cuando dentro de mi conector diff. Ellos lo hicieron. No hagas eso. Salgan. Lo vas a hacer. Entonces voy a dejar esto en el curso. Diblock fuera de las otras cosas es un atajo. Entonces este va a llamarse BG, y esto va a llamarse el secundario. Estos colores, mi secundario va a ser mi granate. Y luego puedo borrar estos dos. Ya no los necesito. Todavía hay en mis estilos. Ahí están. Significa este botón aquí. Este botón que podría decidir son estas cosas. Además, voy a escribir BG y ahí está mi color primario. Este de aquí sin embargo, necesito que sea mi clave secundaria bg. Mira estos un poco como los de alto nivel son bastante útiles porque llego a usarlo para esos botones, pero va aquí, este, en realidad ¿qué más necesita un fondo? El golpeo realmente no necesita un fondo. Pero oye, ve a darle de todos modos. Vamos bg, secundaria. No es muy bueno, pero entiendes lo que quiero decir para ti. Es algo que necesita un trasfondo. Agreguemos una sección. La sección aquí necesita un fondo BG de primaria. Nicole lo que pasa es que si cambias, este cliente primario regresa y dice, Oh, no es suficiente Jushi. Quieres oscurecerlo o aclararlo. ¿Puedes ver todo lo que tiene esa clase global aplicada cambia? Esto es realmente bueno en esa etapa inicial. Es solo una buena práctica usar estilos globales para cosas como solo el color de fondo, cosas como el espaciado. Bien, parece que lo hicimos aquí arriba. Recuerda el correo electrónico Excel y otro buen uso tal vez sea una sombra, bien, si estás usando sombras colgantes una y otra vez en un documento y piensas que es correcto, pero luego despiertas el al día siguiente, es horrible. Puedes cambiarlos todos siempre y cuando lo acabes de hacer y eso como nivel raíz y no combinarlos todos arriba. No hay nada malo en eso porque eso tiene sentido, sino agrandar. Pero luego agregamos estos globales en los que podemos aplicar además también. ¿Eso tiene sentido? Si es un poco confuso, no lo sudes. Simplemente pasa y empieza a agregar tus propias clases, tal vez algunas clases combo para acostumbrarte. Espero que haya sido útil. Clases globales. Aquí vamos. Lo volveremos a hacer a medida que avancemos, pero eso es todo para este video. Te veré en la siguiente. 34. Convenciones de nombres de clase en Webflow: Hola a todos. En este video vamos a ver las convenciones de nomenclatura para las clases en Webflow para que también tengas algún tipo de estructura para funcionar. Entonces ya sabes, no nombra a todo, a todo. También veremos el Beam BEM, sistema de convenciones de nomenclatura también, bien, vamos a saltar en. En primer lugar, es un arte, no una ciencia. No hay como específico. Así es exactamente como debes hacerlo. Y si no lo hubiera hecho de esta manera, está roto. Puedes nombrarlo como quieras. Simplemente terminas con un poco de falta. Si no tienes algunas reglas básicas a seguir. Y diciendo que aunque acabarás con algunos nombres de clase desordenados, simplemente pasa, todos lo hacemos. Y empezó por proyecto muy bueno. Y luego al final tienes la versión final, final, final, final todo ese tipo de locas convenciones de nomenclatura. Pero vamos a repasar algunas pautas generales para que lo puedas hacer bien. El primero es este te dije antes temprano en el curso, llamo a este texto leído. Fue fácil al inicio de este curso solo para que empezáramos y entendiéramos lo que estamos haciendo aquí. El problema con el rojo es que el nombre de la clase es rojo. Si alguien pasa por y dice En realidad ahora va a ser amarillo o de algún otro color. Se puede ver que el nombre de la clase sigue siendo rojo. Así que no le des nombres literales, dale un poco más nombres genéricos. Entonces garrapatas, colores uno bueno, bien, en términos de denominación de color, muchas veces la gente no va a decir eso. Puedes decir color uno, color a color tres para los diferentes colores de textos que tienes. Pero es muy común usar primario para tu tipo principal de color de marca. Tendrás un color secundario, algún tipo de color extra que podrías estar usando. Se puede tener un color de acento. Si necesitarías un tercer color. Puedes mezclarte en. Entonces esa es una convención de nomenclatura común para colores, primaria, secundaria y salida. Así que recuerda, no lo llames rojo, dale un poco más de nombre genérico para que puedas cambiarlo más adelante. Entonces esa es la propina número uno. El consejo número dos es ser amable contigo mismo. No lo llames como podrías llamarlo btn, subrayado 01. Eso es un poco útil. Es manera. Será mucho más útil llamarlo botón. Y este podría ser mi llamado a la acción. Un llamado a la acción. Puedes ser CTA, mucho mecanografía pasando. Eso es muy ruidoso. Puedes salirte con la tuya con nombres cortos, pero recuerda, alguien más podría tener que trabajar en este proyecto. Futuro. Tú en este proyecto podría ser como, ¿Qué es esto? ¿Eso funciona? Sé que es un botón y el color de fondo y como margen izquierdo, pero van a hacer sus dientes. Se puede. Bien. Y la gente lo hace pero lo escribe descriptivamente. No duele. Consejo número dos. Bueno, propina número tres, esto es 2.5 y no tienes que preocuparte por cómo lo escribes. Se pueden utilizar espacios o guiones. Mucha gente va a poner bajo botón y van a usar como mi botón principal. Bien, eso está bien. Se pueden utilizar espacios. Puedes usar cualquier caso que te guste. Puedes ser botón y un espacio, uno. Porque y no quiero mostrarte es agregar ese ahí. Echemos un vistazo al CSS de la misma. Para que podamos verificar esta tesis bajando al pequeño signo de interrogación e ir a vista previa de CSS. Puedes ver lo que escribas en Webflow, el flujo de trabajo se vuelve tonto. Humano. Necesita ser una clase CSS, necesita no tener espacios. Entonces ya ves donde dice el espacio uno por aquí, haciendo zoom por aquí, de vuelta por aquí, pone un guión. ¿Y qué pasa con los guiones bajos? Puedes usar guiones bajos si quieres. No importa. Lo único es que no empieces tu clase con un número. No le gusta eso, pero puedes usar superior o inferior. Puedes usar CamelCase. Camelcase es emocionante. Botón. Primaria, bien. Depende de ti, lo que quieras, o tal vez has venido del mundo del desarrollo para que puedas usar tus estilos de nomenclatura de clase a partir de eso, no importa. Punta número tres, espaciado. El espaciamiento es muy común si necesito esto. Y en realidad vamos a eliminar este en clase. Si necesito esto para pasar de lado, y necesito agregar un margen. Voy a hacer que sea un margen global, bien, así que me voy a asegurar de que no estoy construyendo encima de un combo porque voy a reutilizar este margen en otro lugar. Puede arrastrar una etiqueta div y aplicarla a eso. O porque no tengo otros estilos aplicados a mi botón, podría aplicarlo a eso, pero solo hagámoslo como el bloque un margen. Es muy común usar cosas como extra pequeñas, bien, o pequeñas o medianas. Borgoña, estas grandes en Excel, puedes usar ese tipo de tamaños abreviados. Es mejor que usar 64 píxeles porque podrías decidir que más adelante tiene que ser 63, bien, y vas a ir a cambiar el nombre de nuevo. Entonces sería muy común solo usar medio. Otra cosa con el espaciado es que muchas veces las harás por separado. Entonces vamos a hacer margen y vamos a hacer a la izquierda. Primero, k izquierda, voy a abreviar. Y luego voy a decir que va a quedar medio. Voy a darle a Enter y mi espaciado para esto va a ser el margen 24. Notarás que estoy usando muchos números extraños, no, no números enteros típicos puedes usar 10203040. La gente utilizará y diseño web múltiplos de ocho. Se basa en un poco como una cuadrícula de ocho puntos. Has hecho muchos marcos de desarrollo. No lo es, no tienes que usar estas tallas. Simplemente es muy útil. Se enlaza con las cosas del tamaño de la fuente. Notarás muchas fuentes, 816-20-4302, puedo agregar. Voy a dar ahí fuera. Pero encontrarás que muchas tallas se basan en esos múltiplos de ocho. Son fácilmente divisibles, lo cual es práctico, y también te da una buena gama. Ocho bastante pequeños. 16 es bueno, tipo de tamaño mediano que 24 es un buen buen salto ahí, ahí, hay, buen espaciado. Entonces usas múltiplos de ocho o no. Puedes llegar a ser aún más pequeño. Depende totalmente de ti. Podrías estar haciendo este MD de margen izquierdo. Probablemente me baje a ese pequeño para estas cosas como márgenes y relleno dejado con solo b, P, L, MD de mi relleno izquierdo se aplican a algo que es un espacio medio de 24. La pregunta podría ser, ¿comienzas un documento y revisas y haces un montón de clases globales como esta primero, podrías, solo reviso y las construyo como lo necesito? Y a medida que paso el curso, mientras que a través del diseño de mi sitio web, necesito crear cada vez menos clases. Pero podrías al principio en el centro comercial, pero entonces probablemente nunca usarás, no sé, top acolchado, extra grande. Solo crearás los que necesites. Crédito a nivel mundial. Yendo a luego ir y decir, necesitas rumbo de ascensor, mediano, va a conseguirlo también. Acolchado izquierdo medio, reutilizable estilo global. Lo siguiente que quiero mostrarles es beam. Vas a chocar con viga porque vas a Google cuál es la convención de nomenclatura mejor clasificada. Y esta viga se usa tonta. Yo uso un sabor de ello y ya lo he estado usando en este curso. Entonces vamos a discutirlo porque sale un poco. Es el, el salvador de nombrar convenciones. El único problema es, es que funciona muy bien para sitios realmente grandes, usará un poco para nuestro sitio más pequeño aquí. Y también es un poco más útil cuando en realidad estás codificando tu sitio web. Estamos usando Webflow para hacer la codificación por nosotros, bien, Así que gran parte del haz de sintaxis es útil para cosas como ¿dónde están? Tienen estos guiones dobles y luego tienen guiones bajos. Y hay este interesante tipo de sintaxis para ayudar a alguien que está mirando el código entender lo que has hecho. Pero como aquí no miramos el código, se hace, pero no lo estamos escribiendo a mano, sino que está diciendo que todavía es útil. ¿Qué es la viga? Viga es un elemento de bloque y Modificador. Bien. ¿Dónde están? Modificador de Elemento de Bloque. ¿Qué son? Y más fácil, la forma en que lo explico como cosa genérica, cosa específica, variante de la cosa. He aquí un ejemplo. Botón, precios, botón, botón de precios amarillo. Se hacen cada vez más profundos en cuanto a los matices. Entonces haces algunas cosas genéricas, dirías, Bien, mis botones tienen esquinas redondeadas. Ellos son, son una fuente de esta fuente que estoy usando un tamaño de esta y tienen relleno alrededor de ella de esta. Eso es lo que todos los botones en mi sitio, Ese es el botón genérico, pero hay este botón específico. Bien, eso tiene que ser más grande porque está en la página de precios, el botón de llamada a la acción o CTA. Tiene que ser grande. Les toma un relleno más grande, pero es solo, así que eso es que haces cosas genéricas. Bien, entonces ese es el bloque general, botón específico, el botón de precios. Es posible que tengas una versión más pequeña que la genérica. Una pequeñita que continúa. Form submit, ok, todavía usa esquinas redondeadas y la misma fuente, pero simplemente resulta ser más pequeño que el modificador. Podría ser un botón amarillo o podría ser un modo oscuro. El modo oscuro es cuando se trata de un botón sobre un fondo oscuro. Por lo que tiene que ser un botón blanco con texto negro o botón de modo vuelo. Eso es lo que significa esta viga. Es una buena regla general un poco ruda a seguir. Entonces, hagamos realmente un ejemplo de beam porque puede resultar confuso cuando lo escuchaste por primera vez. Voy a deshacerme de todo lo que me haya aplicado. Mover clase. Lo que me gustaría hacer es hacer el botón genérico. Entonces estoy mirando mi archivo Figma o XD o Photoshop y yendo, mi botón necesita parecerse a mi botón. Ignorar las clases existentes. Si tienes clases que no quieres, puedes ir a tus estilos e ir a limpiar dos estilos. Dice todos los siguientes estilos. Estos no se habían usado de todos modos, diciendo que quieres limpiarlos y decir Sí por favor, porque no los he usado. Así que volví a mis estilos. Pulsa en mi botón, voy a hacer un botón de parada. Sólo voy a hacer cosas genéricas, las cosas de bloques, la b en la viga. Y en este caso, necesito estarlo, necesita tener tipografía. Estoy usando silla. ¿Qué estamos usando? Oswald, digamos. Bien, y genéricamente hace esto, el tamaño de fuente, genérico, el tamaño de fuente genérico es pequeño. Digamos que son 13. Decidió que va a tener unos bordes redondeados. Entonces voy a decir que eres, no sé, cinco, no lo suficientemente grande. Y usando mi flecha hacia arriba, solo para ser obvio, las cosas un poco blanditas. De todas formas. Entonces este es mi genérico, sea mi viga, mi nivel de bloque genérico. Ahora mi botón específico voy a copiar y pegar este va a ser uno de la página de precios. Y es algo así de todo eso excepto que es un poco más. Entonces este es mi elemento, la E y el rayo, lo que llamo específico debido a este pliegue específico. Lo primero, ¿hasta a qué me refiero? ¿Qué es el precio? Cta, mi botón de llamada a la acción. Bien. Va en mi página de héroes, quieras llamarlo. Y así las convenciones de nomenclatura ya se cayeron del vagón. Bien, entonces este es mi CTA y todo lo que es, va a ser un tamaño de fuente de 16, bien, va a ser más grande. Va a ser todo gorras. Y va a tener un poco más de relleno. Recuerda, mantén presionada la tecla Opción o tecla Alt en una PC y haz ambos lados. Así va a ser un poco más grande. Y de esa manera. Podría ser grande o algo más. Un botón un poco amargo, CTA probablemente no sea genial. La escuela como una grande, luego la siguiente, ¿qué hacemos? Bien. Quiero agregar el color de primaria. ¿Bien? En este color de primaria va a ser Alt u Opción. Da click en los galones, ciérralo. El fondo va a ser cualquiera que sea mi color primario está bien para mi diseño. Cuando uso una y otra vez, ahí vamos. Entonces usaré más este porque es el más genérico. Este de aquí se usa solo una vez en la página de inicio y tal vez una vez en la página de precios donde quieres usarlo y dicen que hay una versión de botón de envío, bien, así que voy a hacer lo mismo, agarra otro botón, voy a usar mi dolorido para ir a Ed. Voy a ir botón. Se puede ir en la pandilla. Entonces es mayormente lo mismo, excepto que quiero que este sea yo quiero que sea botón. Quiero que sea grande. No quiero que sea grande y lo quite. Voy a hacer este pequeño. ¿Bien? Y esta va a estar usando mis espumas. Entonces, para crear realmente lo pequeño, no se limitó a hacer clic hacia fuera. De hecho, vas a hacer clic en Crear o presionar Enter en tu teclado. Este de aquí, el tamaño de la fuente va a ser menor de lo normal. Es bueno alternar la grafía. Menos que pequeños. Va a ser Oswald extra ligero, ajusta un poco al tamaño del botón. Solo estoy jugando ahora, ¿entiendes la idea, verdad? Más pequeño, más pequeño. Y tal vez las esquinas redondeadas necesitan ser ajustadas porque son un poco grandes para este caso de uso en particular. Así que van a ser cinco. Entonces eso es todo, Esa es la viga. Hagamos otro ejemplo y después te voy a mostrar uno de los problemas que podrías haber notado que estoy ignorando porque estoy tratando de explicar beam. Entonces hagamos una más. Entonces golpear el bloque va a ser, en este caso, vamos a usar el bloque es HTML, todos los encabezados. Podríamos hacer un encabezamiento de un acorde, pero ya está éste que está en todos ellos. Nos fijamos en eso antes sobre el cambio del valor por defecto. Entonces vamos a usar este botón no tiene su botón de maquillaje. Cuando no hay etiquetas de botón como Todas, enlaces uno pero los enlaces hacen demasiadas cosas diferentes, así que simplemente calificamos alrededor de una. Este de aquí tiene un encabezado HTML genérico, una etiqueta, genial, así que este es mi b, mi bloque. Lo que quiero hacer es asegurarme de que estoy usando esta gran fuente de vibraciones. ¿Bien? Y va a ser este tamaño de golpeo de sostener Shift y solo usar mi flecha hacia arriba. He decidido que eso es lo que estoy usando. Bien. A lo mejor no estoy seguro de por qué estoy estilizando esto. Y si, eso es lo que voy a hacer, tamaño y fuente. Y entonces mis amigos podría ser, esa podría ser tu rayo sobre. Acabas de hacer la viga, la viga porque los encabezados son los mismos en cada página. Pero hay esta vez más adelante en el proyecto donde estás como, Oh, en realidad en esta página de blog, me gustaría que fuera muy grande porque tienen mucho espacio para trabajar dando mucho hay mucho espacio negativo que puede llenar. Genial, así que voy a ir, bien, así que tengo estos encabezamientos que he hecho. Ya he hecho mi bloqueo. Ahora específicamente, voy a hacer un elemento. Y voy a decir que éste es el H1, bien, para las páginas de mi blog. Entonces mi cosa específica, bien. En este caso de uso específico, es un poco hacer esto. Te das cuenta que no tenía esa misma estructura el botón hizo donde puedes tener esto porque tuvimos que inventar nuestra primera B. Mientras que en nuestro golpeo, ya hay que todas las etiquetas HTML, pero estamos en la segunda parte ahora en mi blog. Lo único que voy a cambiar como el tamaño, es como realmente grande. Porque he cambiado la talla. Voy a tener que jugar con mis márgenes en él. Bien, vamos a fingir que estamos trabajando en mi página de publicación de blog porque estos tienen como grandes descendientes aquí, vamos a tener que empujarlo hacia afuera. Entonces mi elemento es así, genial, ¿verdad? Pero luego en algunas entradas de blog, voy a tener una imagen en el fondo. Y algunas de las imágenes son claras, lo que necesita garrapatas oscuras cuando esto va a estar bien. Pero hay otro que voy a copiar y pegar esto. Hay otras entradas de blog que tienen un fondo muy oscuro. Entonces lo que voy a hacer es mi M para mi modificador, ¿estás entendiendo bien la idea? Entonces esta va a ser mi visión en modo oscuro. Bien, Doc Mode, presiona Enter y voy a decir que el único cambio en este va a ser este tipo de blanquecino. Así que todavía lo puedes ver y se ve un poco bien contra ese fondo. Entonces esa es nuestra viga en una especie de forma simplificada. Te da cierta estructura al menos de cómo hacer esto como cuánto detalle entrar en variante genérica específica. ¿Eso fue de ayuda? Sé que el ser me fue confuso. Ve a entenderlo. Entonces sí, te encontrarás con ello. La gente estaba como, ¿por qué usas vena? Serías como, ¿qué clase de él? En bits? Y cuando digo m bits, simplemente hay como sintaxis que va por aquí, y se vuelve cada vez más útil cuanto más grande sea el proyecto. Y nuestro proyecto actualmente no es súper grande. Entonces eso es rayo. Déjame hablar del problema con el que podríamos habernos topado o que tenemos es donde aparecen las vigas, comprensibles luego las clases combo y comprensibles luego las clases combo y globales porque le gustó de esta de aquí. Tenemos esto, perdón, esta primera de aquí, la B de la viga, la cuadra. Nuevamente, tenemos un botón y qué le hemos hecho a esto lo hemos hecho, hemos escogido una fuente porque es azul, perfecciona una talla, y escogimos esquinas redondeadas. Fresco. Entonces eso es lo que hicimos. Y luego este de aquí, agregamos una opción grande. Entonces encima de eso, voy a modificar que era color primario. El problema de hacerlo aquí como clase combo, estoy en mi Gestor de Estilos. Así que la clase combo se muestra así. El color primario solo se puede ver después de grande porque ese es el combo. También se muestra aquí después de pequeño, no puedo escoger ese color primario. Vamos a probarlo. Así que vamos botón. Regresa a aquí. Voy a decir después de pequeño, quiero que ese color primario no estaba ahí. Entonces tengo que hacer otra. Lo haces si va a ser una clase combo. Entonces lo que voy a hacer es que me voy a deshacer de él desde aquí. Te quitas, voy a volver a mis estilos. Todavía está ahí. Voy a ir a limpiar estilos, quitar un color primario. Fresco. Entonces lo que quiero hacer es creado por sí solo. Entonces voy a decir u div block va a ser nuestro trasfondo. En realidad va a crear la clase primero. Ahí va a llamarse color primario. Y esto va a ser ese tipo ¿recuerdas qué color escogí? ¿Qué fue? Que lo suficientemente cerca. Lo suficientemente cerca. Qué hombre, sea lo que sea que sea. Bien. Entonces voy a usarlo ahí y voy a seis como color global. Voy a decir que lo estás ahora. Recuerda que el primario y debe aparecer. Ya ves lo que salió mal. Todo bien. Espera ahí, voy a ir a comprobarlo. Todo bien. Olvídalo. Es porque le puse el nombre a esta cosa, pero luego no presioné Enter en mi teclado. Simplemente hago clic en otro lugar, lo cual tengo la costumbre de hacer. Y decía: Oh, sólo va a llamarlo diblock en vez de su nombre le diste. Entonces por eso nos equivocamos. Simplemente no golpeé regreso. Entonces voy a decir color primario. Prefiero poner bien el tipo de olla genérica, cuanto más pote reutilizable al principio de mi denominación, bien, entonces puedo tener color, color secundario. Y este podría ser BG, color de fondo primario porque también tendrás tomas de color primario. Ahí vas. Creo que esto va a funcionar. Entonces ahora puedo decir botón Lodge y puedo decir que vas a estar, puedo empezar a escribir color. Ahí está ahí. Sin embargo, lo genial de ello, es que este pequeño botón también puede hacer referencia a ese para decir color, fondo, color, primario, genial. Vete tú. Entonces, cuando estás construyendo tus vigas, a veces las haces como globales y otras como clases combinadas porque no sirve de nada tener una grande como global. No es necesario porque no hay grandes. Me voy un poco, Oh, golpeando, me gustaría aplicar dos grandes, que va a aplicar relleno ambos lados e izquierda y derecha. Es puramente para clases de combo de botones. Genial. Acerca del color de fondo es genial. Porque entonces digamos la sección en la que está, digamos en realidad hacer todo el amigo. Buddy puede tener color de fondo, heno primario. Y luego puedo decir que lo iba a dejar así porque ahora puedo ir a cambiar mi fondo Primaria, hacer cualquier otra cosa, y todos los botones vienen para el viaje. Si cambiamos el color de fondo, no los puedes ver, ¿verdad? Porque están en la cima de eso. ¿Y cómo voy a hacer esto? Venga el día. Eso no es hacer esto. Vamos a agregar un div. Está en una sección debajo de esta que tiene el color de fondo bg primario. Ahora bien, si lo cambiamos, vendrán todos a dar el paseo, hazte la idea. Lo mismo con el color de los tics, cualquiera de ese tipo de cosas genéricas es bueno porque es reutilizable. Y significa que no tengo que ir a cambiar botón, el color de fondo a algo nuevo. Y la sección y el golpeo que estoy usando no van a funcionar. Si trato de hacer Biji a esto, ¿qué va a pasar? Va a funcionar. Ese podría ser un diseño genial al que vas, pero en realidad es un poco como n, pero no es lo que significa. Voy a tener que crear otro estilo global llamado color de texto, primario y secundario. Un excelente, bien, nos hemos metido demasiado en la maleza allá. Tuvimos algunos problemas con las convenciones de nomenclatura de Dan u olvidarnos de golpear Enter. Así que no olvides cuándo estás nombrando algo y quieres editar. Tengo la costumbre de hacer esto. Denle el nombre y luego se va y da clic en él. Y lo que pasa es que simplemente no creó , no estaba ahí en absoluto. Presiona Enter en tu teclado. Ahora bien, esas son las convenciones de nomenclatura que funcionaron para mí. Hubo otras variaciones. Podrían ser algo que uses y que realmente crees que otras personas encontrarán útil. Así que tírala en los comentarios aquí. Entonces me encantaría que te tomaras el tiempo si quieres, siempre faltando ese uno o esta es otra buena manera de hacerlo o diferente buena manera o estos son los problemas y estas son soluciones. Tíralo en los comentarios porque sería súper útil para ti ahora como espectador ir a leer esos que decir, prefiero de esta manera porque no hay una regla real siempre y prefiero de esta manera porque no hay una regla real siempre el sitio web se renderiza muy bien en el navegador, puedes tener final, final v2 si quieres. Bien, esa es la guía de Dan para nombrar convenciones, no ciencia. Es más arte y no seas duro contigo mismo a mitad de un proyecto. Y es todo como en pedacitos porque tienes una terrible convención de nomenclatura. Solo sigues adelante y solo sigues rastreando lo que quiero hacer cada vez que construyo algo y cuando el flujo es empezar de nuevo a reestructurar mi clase nombrar las cosas porque a veces terminas con solo cosas que no pretendías. Pero o estamos tratando de ser rápidos o realmente no podías pensarlo en ese momento y terminas con un poco de lío. Está bien. Sé amable contigo mismo. Está bien ser desordenado. Y si eres desarrollador haciendo este curso, estás como, no, no está bien estar desordenado. Eso también está bien. Puedes ser súper legítimo, pero viene con un poco de práctica cuando tienes todo tipo de bloqueado y tienes esos nombres. Perfecto. Bien, eso es, pero una divagante, pero espero que haya sido útil. Pasemos al siguiente video. 35. Cómo usar el flujo web del gestor de estilos: Hola a todos. En este video vamos a ver esta cosa, este gestor de estilo, lo insinué en un video anterior. Vamos a repasarlo todo y lo que hace probablemente en este video ahora, bien, Style Manager, este de aquí. Entonces, ¿qué hace? Permite buscar clases, los nombres. Entonces digamos que necesito encontrar todo lo que tiene golpeando. Bien, ahí está. Aquí están estos encabezamientos. Ya puedes ver, oh, mira, hay uno genérico. Hay un golpeo de baile al azar. He hecho un uno-dos-tres-cuatro y puedes pasar el cursor sobre ellos. Te mostrará la sintaxis, y te mostrará lo que está haciendo. Este de aquí golpeando tres, dice margen superior 0% margen inferior z representa obtuvo una familia de fuentes, un color y un tamaño de fuente. Habrá diferentes. Entonces eso es una cosa que hace. Una cosa te va a encontrar como, oh, y luego puede hacer esto. No, está hecho algunas cosas básicas. Espero que el gerente de estilo haga mucho como Buscar y reemplazar en el futuro. Podría estar ahí ahora porque estás en el futuro. Pero no hace mucho de lo que pensé que estaría haciendo. Bien. Una de las cosas geniales que hace es digamos que el cliente regresa y dice, vamos a cambiar este color primario. Tiene que ser más brillante o más oscuro o verde. Bien. Lo que puedes hacer es agarrarlo porque digamos que fuiste bastante malo con tu nombre, bien. O estás viendo la purga de alguien más y estoy consciente de que la usaron porque puedo ver que ve ahí, ahí, ahí, allá. Tienes que tener cuidado porque te gusta quiero asegurarme de que lo entiendo todo porque podría ser solo un pequeño cambio de tono y podrías estar entendiendo mal. Entonces lo que puedes hacer es instalarlo, administrarlo y en realidad simplemente pegar ese color. Bien, ese es el número hexadecimal para ello. Hash cinco, si cinco, si 5D, puedes leer. Pero al menos puedes ver aquí pasó por todos los atributos y conjunto. Éste lo usa, éste lo usa, esta clase, úsalo. Para que puedas pasar y encontrarlos a todos. Ahora no encuentra y cambia. Un auto. Puede entrar aquí e ir, Oh, simplemente haga clic en él y cámbielo. Pero sí, es esperar que llegue esa característica. Pero lo que puedes hacer es apilar toma color. Veamos esto. Entonces te mostraré todos los lugares que se utilizan, los elementos afectados en esta página o en cualquier otra página. Ahora caso, sólo tenemos una página. Puedo verlo un poco. ¿Lo puedes ver? Puedes hacer click en él y te lleva a estos dos lugares. Yo lo he usado. Al menos, ya sabes, ahí es donde está. Sé cuál es el nombre de la clase para poder ir a cambiarlo. No se puede entrar aquí en este momento y cambiarlo. Puedo cambiarle el nombre. Bien. No es lo que quiero, pero sé que hay que cambiar el color de las garrapatas para que pueda pasar, encontrar el color del texto aquí y entrar y cambiarlo así sé que está ahí. Sé que es Eros fue lo que estaba ahí. Y ahora puedo ir y cambiarlo porque son del mismo color de ticks. Vamos a cambiarlo. Algo obvio. Esos dos van a cambiar. Sólo necesito encontrar uno de ellos y cambiarlo. Y puedo trabajar mi camino a través del ritmo en ese viejo color. Entonces ese es el siguiente en ir y cambiar. ¿Dónde está? Ahí está ahí. Puedo ir a buscarlo aquí, pegando a tres e ir a cambiarlo por ese nuevo. Entonces es un poco útil. Otras cosas que puede hacer, puedes escribir para fuentes. Entonces sé que estoy usando X0 un par de veces. Sé que está en golpear 1.2, que es este de aquí. Bien. No se está usando pegando a tres por alguna razón, estoy usando otra cosa. Bien, pero puedes escribir cualquier tipo de atributo, dimensionando el nombre real, código de color, irá a buscarlo . La otra cosa es limpiar. Limpieza. Te voy a mostrar aquí porque estamos en el encargado de estilo. A menudo no voy a limpiar hasta que estoy más adelante en el proyecto porque aquí hay cuatro estilos que no se están usando en el proyecto en absoluto. Vamos a limpiar caso no se está utilizando un golpeo de baile en ningún lado. Hay uno que se llama batear no se está utilizando. Hay una clase combo que no se está utilizando llamada image hero div eventos pasados. Y hay uno llamado bloque de texto j. Así puedo limpiarlos. Y en este caso, sé que va a estar bien. Pero digamos más adelante, en la siguiente página que estoy construyendo que en realidad necesito bailar golpeando y ya no está. Bien, así que ordenarlo al final. Puedes hacerlo mientras trabajas. Está bien. Al igual que, ahora me siento seguro que en realidad no voy a usar ninguno de estos flujos de trabajo finales diciéndome que en realidad no se aplican a nada. Entonces aunque lo haga, no lo es, no se va a romper. Simplemente significa que no voy a tener acceso a ellos más adelante. Entonces limpiándolos, Vega, vamos a ordenar. Poco aguinaldo que quiero tirar al final aquí es, aún no lo he mencionado, pero pensé que ya saldría. Pero digamos que tengo esto pegándole y lo copio porque solo lo uso para otra cosa, no un encabezado dos, voy a decir te quiero, voy a usarlo después de esto menos. Sí, pégalo en algún lugar al azar y te gusta, en realidad, solo voy a usar esto para otra cosa. Ya no voy a llamarlo pegando a dos. Y creo un nuevo estilo llamado, no sé, pegando cinco y voy a ir a cambiarlo. Entonces el problema de hacer eso, así que lo cambiamos y cambiamos el color a otra cosa porque lo estoy usando para ello. En realidad no has hecho una nueva clase, solo cambias el nombre a la antigua. Eso me pasa bastante. Al menos voy a copiar y pegar algo que me gusta, Bien, voy a cambiarlo y hacer uno nuevo. Así que lo dupliqué pensando que he hecho una nueva clase y tengo la oportunidad de cambiar el nombre, pero en realidad simplemente renombramos esta también. Esto es bastante golpeando cinco ahora. Entonces sí queremos duplicarlo y hacer algo nuevo. Entonces al no usar esto, van a eliminarlo o eliminar o eliminar la clase y le dan un nuevo nombre por golpear F5 y empezar a trabajar en ella. O se puede decir en realidad eso fue lo suficientemente cerca como para que pueda duplicar la clase. Y va a igualar la partida cinco. Y voy a hacer esto un montón más pequeño. Y te darás cuenta ahora que no está conectado a éste. Entonces solo debes saber si quieres un duplicado, un elemento que ya tiene una clase en él, no vayas a cambiarle el nombre. O elimínelo, haga uno nuevo, o duplique la clase. Eso tiene sentido. En realidad no es un bonus. Lo estoy llamando un bono. Bien, ese es el Style Manager en Webflow. Estoy deseando que lo actualicen. Siento que eso podría ser genial. Cosas como buscar y reemplazar aquí. ¿Podemos agregar grupos similares para que podamos arrastrar las clases al personal? Siento que tal vez el futuro de Webflow ahí dentro. En fin, ese es el Style Manager. 36. Video de producción 2 - nuevo portafolio: Hola a todos. Este video es un video de producción. Necesitamos crear un nuevo sitio porque ahora vamos a empezar a construir nuestro portafolio. Ahora que tenemos algunas habilidades CSS de Ned detrás de nosotros, en realidad vamos a dejar de hacer cosas y ponerlas en acción, así que haré las mías. Por eso este video es relativamente corto. Va a hacer un nuevo sitio. Voy a tener que actualizar mi espacio de trabajo a una versión de pago. Te llevaré a través de lo que hice. Pero sí, así que crea un nuevo sitio si puedes exprimirlo debajo de tu cuenta gratuita, hazlo. Pero es por esa vez que necesito actualizar mi espacio de trabajo. Voy a elegir mensualmente de todas formas. Vamos a hacerlo y tú lo haces. Bien, así que lo primero que nos vamos a encontrar es que si estás en una cuenta gratuita, vamos a tener que actualizar o eliminar una de tus dos. Voy a actualizar porque si quiero agregar un tercer lado aquí ahora para mi cartera, y va a decir que has llegado a tu límite, tienes que ir a actualizar. Así que voy a ir a hacer eso y volveré en un segundo. En realidad, voy a actualizar para llamar solo para que sepas, podrían cambiar el nombre de éste, pero solo necesito más de más de dos en sitios alojados. Y esos sitios necesitan más que solo dos páginas. Entonces hagámoslo. Enseguida vuelvo. Bien, así que estoy de vuelta en mi tablero en la parte superior allí, y puedo agregar un nuevo sitio ahora aunque, cualquier drama, bien, así que voy a agregar un sitio en blanco. Y esto va a ser el increíble de Daniel lo que se llama un portafolio de baile. Y puedes llamar al tuyo con tu nombre, bien, así que construye tu propia cartera para esta. No vas a darte un breve porque solo piensa en ello como tu cartera. Incluso si no tienes cosas para tu cartera ahora, ellos se unirán a una con tu propio nombre. Podemos poner en su lugar portafolios, cosas, puerta. Así que continúa y haz tu propio sitio en blanco que puedes unirte a mí. Vamos a establecer proyectos de clase adecuados más adelante, pero por el momento no voy a revisar este. Solo tienes que ir a hacerlo para que podamos comenzar a construir nuestro portafolio y aprender más cosas de Webflow en el siguiente video. 37. Altura mínima vs Alturas de ViewPort en Webflow: Hola a todos. En este video vamos a ver este grupo por aquí, Anchos Min y máximos, Altura mínima, Altura máxima. ¿Qué hacen? ¿Por qué no solo usamos la altura y la anchura? ¿Qué hace este botón de desbordamiento? Todo se revelará en este video. Bien, lo primero que hay que tener en cuenta es que si agrego, digamos un contenedor, una sección clave, bien, y le doy un nombre a esta sección. Esta sección va a ser sección fría. Vamos a hacer héroe por el momento. Solo voy a solo ejemplos genéricos aquí y los usaremos a lo largo del curso a medida que avanzamos. Y así sección héroe, va a tener, si le doy un fondo de algo, elijo este color. Si obtengo una vista previa, da clic en esto. Nosotros no fuimos. Recuerde que el comando de acceso directo Shift P. Control Shift P para vista previa desaparece. Entonces por defecto, agregando cualquier cosa, cualquiera de estos un poco como dibs que no tenían una altura por defecto, así que simplemente colapsan y desaparecen. Workflow lo sabe. Eso es un poco raro si estás tratando de usar ese diseño. Si agregaste algo y él no pudiera verlo, no sería una buena experiencia de usuario. Así que solo agregan algunos falsos aumentados aquí no existe cuando sale y publicando el sitio web aunque. Tenemos que agregar algo de altura. Entonces eso es una cosa. No hay altura. Toma la matriz. De todas formas. Sin embargo, podemos darle algo de altura. Podemos darle algo de estatura física. Podemos decir en realidad esta es la altura de mi caja de héroe quería ser de 500 píxeles y eso está bien. Bien, El problema de darle este tipo de altura absoluta, 500 pixeles es que no es muy flexible. Por lo que la gente va a usar una altura mínima. Min-height es probablemente el más común usado de todos estos minmax es, bien para mí al menos, significa que puedo agarrar algo como el texto de mi párrafo. Bien, Entonces una a, mientras que, voy a añadir párrafo. Vamos a meterlo dentro y agarrarlo todo. Y voy a copiarlo y pegarlo porque esto es lo que esta altura fija. Vamos a encontrarnos con un problema porque va a llegar hasta aquí y se va a ir, ¿qué hacemos? K que la altura fija es problemática. Bien, así que quería expandirme. Entonces todo lo que hacen es simplemente cambiarlo de, vamos a deshacernos de un trozo de esta sección raspada que el héroe solo usará en lugar de la altura, usará min-height en ambos declaran que está manteniendo presionada Opción o tecla Alt en una PC, puedes dejarla así y se expandirá y contraerá. Pero para mi diseño aquí, Bien, Hola me la primera vez que los has visto. En fin, tengo esta altura que quiero. Bien, entonces sé más o menos qué, qué tan alto es. Entonces lo que quiero hacer es que nunca va a ser tan pequeño. Bien, quería decir en realidad solo dale una altura mínima de píxeles de Foner. Entonces se veía igual que el anterior. La diferencia es, es ahora cuando lo copio y lo pego, pego, pego, pego, pego, pego, pego. Hay un mínimo de 500, pero si es necesario, se hará un poco más grande. Entonces es simplemente muy común. Simplemente use la altura mínima en lugar de altura porque tendría un poco de flexibilidad. Min-height se vuelve realmente útil si miramos algo de esto, hemos hecho antes, y por defecto simplemente trabajaron con la altura correcta aquí. Es porque la cuadrícula es bastante impresionante. Y si uno de estos se mueve hasta tres, vamos tres líneas. Todos vienen a dar el paseo. Eso no siempre es cierto. Mira esto. Si agarré mi grilla con mi grilla, ahí, ¿está bien? Si digo que en realidad solo tienes dos de ancho , automáticamente generará otra fila. Echemos un vistazo. Ves, son dos, eso es ahora solo uno. ¿Por qué son iguales? Y el diseñador de TOC y tú estás como, quiero que coincidan. Por qué en la métrica, se les puede dar una altura mínima. Entonces vamos a este de aquí. Tiene un div o una clase alrededor del miembro externo. Eso lo pusimos antes. Hay algo que controla de uno a los tres. Entonces se lo estoy haciendo a los tres. Voy a decir en realidad por el dimensionamiento y denso que podríamos darle una altura, vamos a darle una altura mínima en caso de que necesite expandirse. Bien. Pero le voy a dar una altura mínima de, sólo voy a adivinar 500 pixeles. Eso significa que pueden ser más grandes, pero no pueden ser más pequeños que eso. Bien, entonces podría, si tengo esta tarjeta realmente grande que tiene tres líneas o en mi caso, cinco líneas, se hará más grande si es necesario. Pero hay una altura mínima que es súper útil para cosas como esta, como estas tarjetas o tal vez es un precio por debajo. Una imagen de precios podría estar subtitulada, algo así te da la flexibilidad de la altura, pero configurándolo todo para que sea lo mismo. Entonces es min-altura para usar eso más, solo lo usarás en lugar de altura la mayor parte del tiempo, salto cortado porque me perdí. Y te habrás dado cuenta de que en realidad no le hice la min-altura a la sección como planeé. Terminé haciéndolo al párrafo. No es un problema en este caso excepto si quiero usar el párrafo en otro lugar. Entonces hice la min-altura en esto. Tenía muchas ganas de hacer en esta sección, min-altura de 500 pixeles. Entonces obtienes la min-altura. Vamos a deshacernos de él ahora claro. Recuerda, Opción Alt, haz clic en Instagram, altura máxima. No uso mucho la altura máxima. Puede que encuentres un buen uso para ello. Solo hay uno que se me ocurre, incluso buscó en Google, como otros buenos usos de la altura máxima, no pude encontrar ninguno bueno. Deja en los comentarios si tienes un buen ejemplo mejor que el mío K. Así que voy a haber conseguido este texto. Y está en una caja que dicen que tal vez es descriptiva debajo de una imagen, pero no quieres que continúe para siempre. Quieres que aparezcan esas pequeñas barras de desplazamiento. Entonces lo que puedes hacer es que puedas decir en realidad, quiero que este héroe de sección tenga una altura máxima de tal vez 300 píxeles. Bien, ¿qué significa eso? Significa que mira esto. Si agrego algo más de texto, copy paste, paste eventualmente obtiene una altura máxima. Uno va más grande que eso. Si está inyectando un montón de datos CMS podrían ser descripciones de productos o publicaciones de blog o algo así en allí. En realidad no lo quieres porque de momento está rebosante, simplemente no se ve bien, está bien. Aún puedes leerlo. Pero digamos que quieres esas barras de desplazamiento. Lo que puedes hacer asegúrate de ir a la sección héroe seleccionado. Puedes hacer esta opción de desbordamiento. El momento aún visible, puedes hacerlo no visible, cual no es muy útil porque quieres las barras de desplazamiento aquí arriba. ¿Bien? Para que puedas desplazarte hacia abajo y comprobar lo que hay ahí dentro. Significa que tienes al menos alguna pantalla de bienes raíces se usa, es de solo 300 píxeles, pero en realidad puedes caber en mucho más contenido si la persona realmente quiere cavar en su altura máxima, no lo uses muy a menudo. Volverán y revisarán los comentarios de este video porque estoy seguro de que hay muchas otras razones por las que usarías la altura máxima, simplemente no puedo entenderlas en este momento. Bueno, una cosa que podrías hacer con altura máxima es especialmente para hacer este desbordamiento. Haga clic en la etiqueta de la sección. Héroe es que fuimos por éste. Esto los obliga a mostrar siempre este de aquí es automático. Realmente no cambia mucho excepto si va menos, mira esto. ¿Puedo conseguir ascensores? Esto es que eventualmente se van porque no se desborda. Ahora no hay barras de desplazamiento. La fuerza de B en todo el tiempo. Desbordamiento. Bien, entonces eso es auto. Se encenderá y apagará según sea necesario o puedes obligarlos a estar encendidos todo el tiempo. Bien, esa es definitivamente la altura máxima sobre aproximadamente la anchura máxima y la mínima. Entonces para entender eso, usa el ejemplo que hicimos antes. Podemos hacer lo mismo que esto. Lo que hicimos en este es aquí, como decíamos, el párrafo en el texto del héroe tenía un acolchado grande y viejo en el costado. ¿Puedes ver eso? Lo que hicimos antes, podemos hacer algo parecido. Voy a apagarlo. Recuerda Alt u Opción, haz clic en él para deshacerte de él es voy a decir que este héroe de etiqueta p va a estar con mi tallaje va a tener un ancho máximo. Ahí vamos. De lo lejos que quieres que esté. Podrías hacerlo, digamos que 500 píxeles se ven como, nuevo, podrías decidir que eso es todo. Bien, así que el ancho máximo es bueno para los encabezados que quieres romper en dos partes. Lo vamos a hacer en un poco. Para este, tienes una pantalla realmente grande y se extiende por todo el camino. puede decir en realidad solo obligarlo a que se detenga porque me gusta este tipo de espacio negativo por aquí. Entonces este de aquí también, se podría decir, vamos a tener un ancho máximo de 600 píxeles. ¿Bien? Sólo significa, oh, en realidad son 500, significa que va a romperlo ahí. Si estás inyectando diferentes encabezados para diferentes, digamos, publicaciones de blog, no van a seguir para siempre a un lado. Se van a dar un poco de especia que haces con margen. O en este caso estamos haciendo ancho máximo. Lo que también podrías hacer es tejer usando píxeles hará un video completo en un poco sobre todas las diferentes, estas cosas. Hay montones de ellos. Pero en cuanto a porcentaje podrías decidir en realidad, solo quiero que sea al 80%. ¿Qué hace el 80% de su, 80 por ciento de su padre, k del espacio de los padres, que en nuestro caso, el padre aquí es la sección aquí, bien? 80% más allá en el cuerpo aquí es mucho más ancho. Y esto te da un mejor ejemplo. Nos agarramos calentando uno, lo copiaría. Pongámoslo dentro de algo. Pongámoslo dentro de esto. Bien. Así que lo voy a posponir a la calefacción porque ¿va a entrar? No se pueden leer datos nativos del portapapeles, no le gusta porque tiene eso en él. Tiene el texto span y voy a agarrar eso y pegarlo. Un poco puede. Vamos a intentarlo de nuevo. Bajemos aquí después de calentar por pasta. Ahora es el 80% de este espacio porque está un poco atrapado dentro de esta clase de eventos pasados div que puse aquí. Si digo 50% aquí, va a ser 50% de ella pesa diferente tamaño desde el 50% de aquí arriba. Bien. Porque es el 50 por ciento de ese contenedor más grande. ¿Eso tiene sentido? Puedes cambiarlos. Entonces un escritorio podrías decidir que 50 es bueno. Querías romper porque te gustó este espacio negativo, pero en tablet podrías ir, no me gusta. 50 también. Atrapado en la esquina y tal vez lo esté rompiendo en tres líneas. Vas a decir en realidad en tablet, voy a decir que puedes ser un poco más, 70% o 8%, ¿bien? Y cuando se baja a estos, el 80% aún no es suficiente. Así que en realidad podrías ir al cien por ciento completo en todos estos a partir de entonces hacia abajo. Bien, entonces ese es el ancho máximo. Lo hemos hecho a nuestros encabezados, pero puedes hacerlo dos etiquetas div, puedes hacerlo a lo que quieras. Bien, así que veamos hacer ancho mínimo. Ejemplo de anchura mínima. Tratando de pensar en uno. No lo uses súper a menudo, como la altura mínima. Pero el ancho mínimo puede ser útil. Probablemente entiendas lo que va a hacer, pero hagámoslo juntos de todos modos. Voy a tener que hacerlo, estos botones los van a copiar y pegar. Entonces dos de ellos. Y digamos que en realidad hay, hagamos tres de ellos. Este botón de aquí, si voy así, y uno de los botones que tiene como signo de interrogación en él, los botones demasiado pequeños. Imagínese si tuviera un ancho mínimo. Ya lo tienes. Entonces button hero en realidad va a tener un ancho mínimo de adivinar qué tan grande es 100, ¿de acuerdo? Significa que voy a hacer el texto de relleno centrado en todos ellos. Solo significa que este de aquí, si esto se reduce a como una palabra muy pequeña, como Dan, puedes ver que todavía no va a pasar del tamaño mínimo. Ese es en realidad un buen ejemplo. Estuve luchando ahí por un segundo. ¿Bien? Entonces usas mucho min-height y usas mucho el ancho máximo. Al menos hago los otros dos. No uso muy a menudo, pero ya sabes lo que hacen. Son lo contrario de los otros que usas lotes. ¿Podría ser este el peor video realizado en este curso hasta ahora? Yo creo que sí. Llevo más de una hora en esto y eso es lo mejor que tengo. Tengo que seguir adelante. Ojalá se te ocurra la idea. No uses alturas absolutas, usa mínimos y máximos para darte un poco de Flexibilidad. Antes de irnos, apliquemos nuestro min-max, bondad y arreglemos los mitos que he hecho aquí. Entonces tengo, voy a copiar esta. Voy a tener y navegación blanca por la parte superior. En realidad solo necesitas navegación sección héroe. Vamos Comando E o Control E en una PC y vamos en sección. Bien. Lo hice sobre las secciones. No pueden entrar el uno al otro y no sólo piensa en ponerlo después. Espero que puedas hacerlo creando primero un contenedor y luego ir al Comando D e ir a la sección. Y entonces debería entrar en el lugar correcto. O golpea a y lo arrastra hacia afuera. Entonces tengo mi sección, vamos a darle un nombre. Genial, esta sección. Bien, es blanco por defecto, está bien. Y recuerda si voy a previsualizarlo y volver comando Shift P, Control Shift P en una PC, ya no está. ¿A dónde fue? Está ahí en su diseñador, no en el sitio web real. ¿Por qué? Porque tal vez tenemos nuestra altura falsa aquí desde Webflow. Vamos a darle algo de altura real. Vamos a darle una altura mínima de 80 píxeles. ¿Bien? Solo para agregar, permita cierta flexibilidad. Y vamos a previsualizarlo. Comando Shift P. Eso no funcionó cuando estoy por aquí, ¿ves que estoy medio escribiendo este AD? Así que mercancía de p en cualquier smash mi teclado, luego trabajo. Voy a hacer click en ese tipo de Canvas por aquí, luego Comando Mayús P. Voy a ir a mantener abierto este espacio. Bien, esta cosa que necesita arreglar, en primer lugar, es un poco de tics de párrafo que no necesito. Así que adiós texto de párrafo, haga clic aquí. Hay algunas otras cosas que le hice, pero el desbordamiento, lo estoy sentando de nuevo a visible, que es el predeterminado. Y no voy a tener una altura máxima. Recuerda, opcional Haz clic en ese. Voy a tener una altura mínima de 400 pixeles. Y el color, por el momento no me preocupa demasiado el color. Te mostraremos como sacar colores de Figma muy pronto, o XD o Photoshop. Pero al menos mis estructuras, tienen mi héroe de la sección de navegación. Todo es un conducto diminuto. Bien, tengo Wow, eso va a ser todo para este video en el siguiente. 38. Convertir Figma en Webflow: Hola a todos. En este video vamos a llevar elementos de nuestro diseño de figma a Webflow. Te voy a mostrar cómo puedes trabajar entre los dos bits de software. Ahora hablamos brevemente sobre por qué usarías algo como Figma y no solo diseñar en Webflow, ahora tienes bastante buen sentido de ello, ¿verdad? Porque si tenemos que tomar decisiones de diseño aquí en Webflow, mover las cosas. Es bastante complicado porque tenemos que considerar cosas como espaciado y el margen como un relleno o como n, algo como Figma o alternativamente XD, que es un competidor, o hacerlo en Photoshop o Adobe Ilustrador. El diseño aquí, no tienes que preocuparte por ello. Sólo te gusta, quiero que el botón esté por aquí porque se ve bien. Bien, tendrías que averiguar cómo vas a cortar esta caja aquí. Vas a conseguir que se superponga a esta cosa. ¿Cómo consigues que vaya detrás de las cosas? Figma, solo muévelo ahí. En. Lo siento, sí, Figma sí se mueve con él. En Webflow, tenemos que tomar algunas decisiones sobre cómo va a renderizarlo el código. Por lo que lleva mucho más tiempo en Webflow. Es mucho más fácil. Diseñar, probarlo en Figma, lograr que el cliente firme y luego comience a construir y flujo de trabajo. Entonces no va a haber un curso completo en Figma solo va a mostrarte cómo sacar los elementos que necesitas para construir un flujo de trabajo. Si quieres aprender Figma, tengo un curso sobre ello. Bien, ve a comprobarlo. Se llama Figma essentials. Y entonces, sí, vamos a sacar nuestro primer bit. Echemos un vistazo a las imágenes. Digamos que necesitamos a este tipo fuera, esta cosa guapa. No preguntes. Entonces aquí en Figma bajo diseño, puedes bajar por la parte inferior aquí, dar clic en Exportar, dar clic en él. Desplázate hacia abajo hasta la parte inferior, puedes decidir qué tipo de formato de imagen quiero que haya un fondo transparente. Entonces un PNG es genial. Un JPEG lo va a exportar, y no vas a poder ver alrededor los bordes del cuadrado. Entonces PNG es genial y lo voy a exportar. ¿Y a dónde voy a exportarlo? Voy a meterlo en cualquier parte. Y lo traerá a Webflow k. así que ponlo donde necesites. Voy a poner el mío en los expedientes de ejercicio bien, después de esto. Así que puedes tirar de estas imágenes si quieres una oruga guapa en tu portafolio, pero de lo contrario estarías haciendo la tuya propia. Bien, entonces voy a tirar el mío en mi escritorio solo para tirarlo ahí. Vamos. Imagen de Dan. Ahí vamos. Dice en mi escritorio, si quieres agarrar más de una lata, puedes dar la vuelta y marcar todas estas cosas para exportar. Exporta este aquí, o simplemente haz doble clic en él aquí. Voy a exportar eso como JPEG porque es cuadrado, tiene muchos colores, no necesita transparencia. Excelente. Bien, pasa por eso, hazles todas las cosas que quieras para exportarlo. Y luego de una gran caída, puedes subir hasta aquí, ir a Exportación de archivos, y exploraremos todas esas imágenes de una sola vez. Entonces, en lugar de sacar imágenes y luego traerlas a Webflow es simplemente arrastrarlas al escritorio, a la mitad del diseñador. O usando esta opción aquí y arrástrelos ahí, o haga clic en esa para subirlos. Así que vamos a las imágenes de Figma a Webflow. Hablemos de colores, bien, entonces podría ser tan simple como hacer doble clic sobre esto. ¿Puedes ver ahí está ahí? Simplemente cópielo y pégalo. Quiero que eso sea un botón de entrada. ¿Dónde está mi botón? O puedo seguir adelante. Bien, entonces tengo un botón aquí. Necesito que sea de ese color. Bien, ahí tienes. Así que tirando de los colores de Figma, puedes ser un poco más elegante y cambiarte a esta opción Inspeccionar. Puedes seleccionar opciones bastante agradables porque significa que puedes moverte un poco y hacer clic en cosas y puedes ver Inspeccionar. Es hacer algunas cosas. Me está dando no solo mis colores, bien, en el momento en que me está dando matiz, brillo de saturación y alpha k, en realidad podrías ir a hicks, copiarlos y pegarlos de esto. puede ver que comparten la misma salida CSS. No vamos a usar eso en Figma. Solo vamos a agarrar las partes individuales que puedas agarrar los colores de esa manera. Y la otra cosa buena los inspectores que ver con el espaciamiento. Así que puedes ver aquí y yo sólo estoy rondando, no haciendo nada. Me va a decir que estoy a 21 pixeles de la parte inferior, en 16 desde el lado, probablemente incluso los dos fuera a 21. Pero digamos la altura de mi navegación que un invitado antes. Bien, si me cierro por encima de él, ¿dónde está? Me está diciendo que hay rectángulo es la altura de 86 pixeles. Vuelve a Webflow y di, oye, navegación, que dije que era un mínimo de lo que era? A lo mejor seis. Aquí vamos. Dije AT me acerqué, eso es bastante cercano. Así puedo dejar de igualar mi diseño ahora, en Figma, esa opción Inspeccionar puede ser muy útil si estás trabajando con alguien que tiene el archivo Figma y ellos lo han diseñado y tú eres la acumulación en Flujo web. Les pedirás que vayan a Compartir y podrás conseguir que compartan esta vista porque ella tenía esta opción de vista. Y significa que no es necesario tener una versión paga de Figma. Simplemente significa que terminas incumpliendo esta vista de inspección. Y puedes trabajar alrededor y revisar todos los espacios y obtener los colores. Y puedes sacar las imágenes siempre y cuando hayan cargado para la exportación, marcarlas como exportación. Entonces dependiendo de si eres la persona en Figma haciendo cosas, o si lo estás construyendo para otro diseñador que esté feliz y confiado en Figma pero que no quiera hacer todo el Flow. Parte de ello Can, podrías estar en esa posición. Entonces esa es la versión flaca de cómo usar Figma y preparar las cosas para Webflow. Y obviamente tengo un curso completo y para Figma si quieres meterte en él. Pero sí, Figma a Webflow, eso está hecho. 39. Convertir XD a Webflow: Hola ahí. En este video vamos a tomar nuestro diseño de Adobe XD y luego convertirlo en Webflow. Te voy a mostrar cómo sacar las diferentes partes que necesitas para construir tu proyecto Webflow a partir del archivo Adobe XD. Si estás pensando, oye, Adobe XD se parece mucho a Figma, bien, se ve de la misma manera. Es una herramienta de diseño. Haga clic, arrastre, haga que el cliente lo cierre, puede hacer que sus usuarios lo prueben aquí. Entonces empieza a construir en Webflow. Ahora bien, ¿cuál deberías usar? Webflow o, perdón, Figma o XD? No importa que muy comparable. Están persiguiendo al mismo público. Para mí como diseñador UX, no me importa. Yo uso ambos todo el tiempo. Construí este en XD tan rápido como construí el otro en Figma. ¿Bien? Entonces hasta usted, usted decide, sé que es un poco de una copout. Te explicaré a lo mejor el final de este video un poco más solo porque la gente me preguntaba todo el tiempo. Pero en primer lugar, está lleno, tenía una extracción de información de XD. ¿En qué se diferenciaba de Figma? Bueno, es muy similar. Digamos que queremos imágenes. Así que aquí puedes dar click sobre ellos. Y entonces lo que quieres hacer es ver por aquí, tienes estas tres pestañas diferentes. Dónde estamos en sus pestañas de activos, tenga en cuenta su pestaña de capa, pestaña capas de inmersión. No podía recordar como oro. Si no ha seleccionado aquí, puede ver que se resalta y puede hacer clic derecho en él y decir Exportar seleccionado. Esto parece una forma ligeramente diferente de hacerlo que Figma. puede decir, quiero que sea un PNG, dale una etiqueta con su nombre en su escritorio. Haga clic en ellos. Voy a hacer doble clic para meterme dentro de la imagen. Voy a ir por aquí y decir este pequeño grupo aquí he conseguido querer exportar que puedes hacer una gran exportación a granel k que hagas eso, tienes que sentarte en las cosas que quieres ir y decir, marca para exportación, ésta para ir también. Quiero que este vaya, ya está marcado. Entonces puedes hacer la exportación por lotes y dar clic en cualquiera de ellos e ir a exportar lote. Y exploraremos cualquiera de esas cosas que hayas marcado k o Exportación de archivos, lote, exportación, cualquier cosa que hayas marcado para exportar. Y tienes un montón de imágenes para arrastrar , arrastradas a Webflow. Y luego para flujo de trabajo, panel de activos, y sólo tienes que arrastrarlos todos aquí desde tu navegador, hará clic en este para subirlos. Entonces eso son imágenes de XD. Veamos cómo hacer ¿qué más? Colores. Simplemente haga clic en ellos. Bien, este es un grupo. Voy a hacer doble clic en él para entrar. Ahí está mi Fill. Da click en él, vas, puedo copiar y pegar este código a Figma. En este caso, esto es exactamente lo mismo que si fuera mayúscula. Lo mismo, lo mismo. Como Figma. Se puede hacer una versión de inspección de la misma. Y así en XD, digamos que quieres averiguarlo, y hagamos el espaciado ahora porque esto es bastante genial. En XD, puedes mantener presionada la tecla Opción en una Mac, tecla alt en una PC. Y digamos que quieres saber la distancia entre estos dos, ¿de acuerdo? Entonces quieres saber que el botón de distancias necesita ser presionado hacia abajo. Si mantienes presionada la tecla Opción y seleccionas un puño, mantén presionada la tecla Opción en una Mac, tecla alt en una PC y luego coloca el cursor sobre ella. puede ver que es como nueve píxeles es la brecha. A qué distancia estos chicos hacen clic en él, mantén presionada la tecla Opción o Alt, luego pasa el cursor por encima de esta, ¿ puedes ver que hay 11 píxeles de distancia? Simplemente puedes hacerlo mientras estás en opción de diseño. Quieres ir un poco más allá. Puedes ir a compartir. Y digamos que estás en la posición donde lo estás construyendo en Webflow, pero no eres el diseñador. Somebody S está diseñando un día siguiente y quieren que lo construyas en Webflow con tus nuevas y dulces habilidades de Webflow. Eso te dará es que irán a Compartir y dirán, qué versión quieres, Bien, ellos les dan para ponerlo en desarrollo porque por defecto es revisión de diseño. No estás haciendo una revisión de diseño. Estás en etapa de desarrollo, desarrollándolo en Webflow. Lo quieres para la web, ¿de acuerdo? A menos que estés construyendo algo para iOS, lo que no estás haciendo en Webflow porque es web. Bien. Y quieres los activos descargables, esas cosas que hemos marcado para exportar ahora formarán parte de este enlace. Entonces tengo que enviárselos por separado , lo cual es muy agradable. Le voy a dar a cualquiera con el eje de enlace. Habrá una opción aquí que dice Crear enlace, ya hecho eso. El pasado. Mi caso lo estoy actualizando se ve exactamente igual. Sólo dice Crear enlace. Bien, voy a darle click para copiarlo o simplemente abrirlo. Y esto es lo que obtienes como tu Desarrollador de Webflow. Esas son las imágenes que fueron marcadas. Puedes hacer click sobre ellos. Puedes descargarlos tú mismo en formato JPEG, PNG o PDF. Esto es lo que los colores utilizados en el documento. Esto es bastante dulce. Puedes pasar el cursor por encima de esto, puedes ver que es la altura. Puedes ver si hago clic en esto, son 29 desde arriba, 29 desde abajo. Es muy agradable. Es el CSS también, que probablemente no usaremos porque estamos más haciendo diseñador visual con Webflow. Nuevamente, solo una versión corta de cómo usar XD Figma en tu proyecto. Tengo un curso largo, XD essentials, así que puedes comprobarlo si quieres aprender XD. Bueno, lo prometí al principio, te diría cuál deberías elegir XD Figma. Realmente no importa es mi respuesta. Pero entonces la gente va pero nos dice más. Soy más es Sigma es más popular y tú como herramienta de diseño UX en este momento. Entonces, si buscas trabajo en una gran empresa que probablemente va a querer Figma. Entonces es bueno tener habilidades Figma. Y si eres freelancer, muchas veces es mejor ir con XD por los precios. fotograma clave es caro y lo pagas por separado. Pero si eres diseñador freelance y estás haciendo fuerza laboral una vez que probablemente ya tengas una licencia de Creative Cloud. Y Adobe XD forma parte de esa licencia de Creative Cloud. Así que esto ya no te cuesta. Y debido a que el conjunto de herramientas es, es idéntico, se ocupan de diferentes cosas de manera diferente. gente le apasiona mucho. Soy bastante desapasionada porque los amo a los dos. Eso es muy bueno. Tan similar. Por lo que se reduce a precios y solicitudes de empleo. Entonces, si miras a tu país y dices: Oye, mira las solicitudes de empleo para ver qué, qué requieren. Buscando un diseñador de UX, genial, debe ser aprovisionado en. Y entonces si dice XD, XD, si dicen necesitas conocer a Figma gorila y pensar en mi consejo. Haz ambas cosas. Si haces uno de mis cursos que los cursos de cualquiera, una vez que hayas hecho el primero, combustible propio XD primero y luego ve a cambiar a Figma. No es una gran transición. Está bien, solo tienes que averiguar qué es lo que han movida las cosas. Entonces las cosas tienen un nombre ligeramente diferente, pero es muy fácil recoger la segunda herramienta, esa es mi $0.02. Están trabajando muy duro ambas compañías para hacer estas increíbles herramientas, siguen volviéndose más increíbles. Pero para mí, XD, figma, o comparable, estoy seguro de que la gente está trabajando. Ambas empresas no están de acuerdo. Pero ese es mi $0,02. Bien, eso es. Xd a Webflow, hecho. Siguiente video. 40. Cómo agregar fuentes al flujo web: Hola a todos. En este video, te voy a mostrar cómo agregar fuentes personalizadas a Webflow. En este caso, vamos a usar Google Fonts. Te voy a mostrar cómo tirar de ellos y agregarlos a tu diseño. Puedes utilizarlos. Vamos. Bien, entonces he agregado un encabezado y las fuentes que están integradas en Webflow, un tipo bastante limitado de genéricos para Internet. Si quieres agregar una fuente, Oye, mira, puedes agregar fuente. Haz clic en él, abre una pestaña separada K, has entrado en tu denso sitio de portafolio. Y recuerde general, hemos estado ahí dentro. Tenemos éste dice fuentes, que te lleva directamente a allí. Entonces ambos están abiertos. Entonces no vamos a cubrir las fuentes de Adobe. Son bastante complicadas estas claves API. Y entonces tal vez tengas que conseguir que tu cliente licencie la fuente y pague por ella, a pesar de que es posible que la hayas escogido de tu Adobe Creative Cloud. Sí, es desordenado. Una aplicación de Google. Tengo una buena documentación al respecto. Vamos a ir con el fácil, el que la gente haría más Google Fonts. Encuentra tu fuente en fonts.google.com. Hay fuentes increíbles para usar. Puedes elegirlos, descargarlos, usar máquina de amoníaco, usarlos en tu diseño Figma o en tu diseño XD. Y luego eventualmente, sin embargo, necesitas incorporarlos a tu proyecto. Así que los traes por separado de tu escritorio. Bien, así que aunque lo tengas en Figma o XD, no significa que eso va a estar en tu proyecto Webflow. Necesitamos un poco como meterlo ahí para hacerlo, voy a averiguar qué tipo de letra estoy usando. Estoy usando Sans públicos. Es una buena, agradable Helvética quiere ser, me gusta. Así que entremos en el flujo de trabajo. Hacemos clic en las fuentes del anuncio y todo lo que necesitamos hacer es decir, bueno, ZZ debería haber comenzado con esto se llamaba sentido público. Un sentido público. Esta es la gran parte como estas variantes. El problema de agregar todas estas variantes que te gusten, solo las llevaré todas. Woohoo. El problema con ello es que se reduce a la velocidad del sitio. Si instalas todas estas fuentes en tu proyecto de flujo de trabajo, tu sitio web tardará mucho más en cargarse. Y si tu sitio web tarda mucho más en cargarse, a Google no le gusta. Te castigan en los rankings de búsqueda. Quieren sitios que sean buenos, de fácil acceso, y que se carguen rápido, no tarden para siempre, sobre todo en dispositivos móviles, dice ten cuidado. Los principales son 400, que es regular, 700, 900. Si eres de font land, eso es ligero, eso es regular, Eso es negrita como extra negrita. Podrías decidir, necesitas todos esos. O podrías decidir, no necesito la luz. Necesito una cursiva regular pero regular, que es esa de ahí. Para utilizarlos proyecto. Puedes encenderlos y apagarlos al final. Lo veremos más adelante cuando veamos el SEO, optimización de motores de búsqueda, pero puedes encenderlos todos por el momento. De nuevo, viene a los que no ofreces carta ahí tiene sentido. Puedo decir algo por mi diseño. Sé que aquí he usado, ¿qué se usan? Ahí he usado 400. He usado usar este. No me lo dice. Usted es 400. ¿A qué me refiero? Soy un inspector. Se va a diseñar un inspector. Aquí tienes, Dan. Tengo regular que es 400, y este de aquí, extra audaz, que es 900. Sé que hay partes de esto va a ser la versión ligera para el ego. que ya lo sé, ese hombre, que de todos modos no he usado cursiva. Así que sé muy ahorrador en las fuentes. Haz clic en Agregar y eso es todo. Si vas y luego decides vas a usar otras diez fuentes. Y va a Lowe's, van a sumar bastante rápido. Así que solo tenga en cuenta cuando esté diseñando y véndalo al cliente. ¿Qué fuentes usas? Solo pon dos, tal vez tres, y solo un par de pesos diferentes porque no quieres que tu sitio se cargue muy rápido. Esa fue una larga explicación para usar una fuente. Podemos ir pegando a uno va a ser lo que vamos a hacer es darle estilo a todos los bateadores y todos van a ser públicos. Ahora, no se cargó. ¿Por qué no cargó? Probablemente necesite refrescarse. ¿Refrescar? Sí, por favor viejo. Ahora veamos si funciona. Al golpear una tipografía, meter Sans Ahí está ahí. Bienvenida. Bien, y encontrarás solo las fuentes que realmente has escogido están aquí. ¿Bien? Y éste tiene que ser negro. Ahí vamos. Porque estoy jalando de mi cierre hacia abajo, ciérrelo hacia abajo. Estoy sacando de mi archivo Figma, que es extra audaz. Es raro cómo les darían diferentes nombres. Y negro, extra negrita o 900, todos significan lo mismo. Fuente grande y gruesa. Voy a copiar y pegar los ticks que son esto. Y así es como agregas fuentes. ¿Bien? Eso es agregar fuentes a Webflow. Y lo voy a construir para que se vea mucho más así en el siguiente video. Pero por ahora, hemos agregado fuentes, trabajo hecho. 41. Video de producción 3: texto de héroe: Hola a todos. Este es un video de producción. Lo es. Tenemos que llegar de aquí a aquí es donde terminamos el último video. Pero nuestro diseño, Echemos un vistazo a nuestro diseño. Es algo más como esto, donde hay un poco dos columnas y esto está alineado a la derecha. Hay un poco de texto azul. Entonces, lo que intenté hacer en estos videos de producción, trato de no introducir nuevos conceptos. Los separo para videos me gusta. Y luego solo lo pongo en práctica mientras estoy haciendo estos. Y puedes mirar si quieres, puedes omitirlo si quieres. Este sin embargo, terminamos con un montón de problemas tratando de completar mi diseño y descubrimos formas de superarlo. Así que omítala, pero podrías perderte buen aprendizaje mientras Dan se tambalea un poco, tratando de que haga esto. Creo que es bastante útil para la gente verlo, como si pudiéramos encontrarnos con problemas en tus propios proyectos de todos modos, que es solo empezar entonces, ¿verdad? Vamos a ponernos en marcha. Primero que nada, lo importante aquí es que es un poco como dos trozos, k dos columnas. Vamos a usar una grilla para dividirlos y luego empezaremos a peinarlo. Bien, entonces el primer trozo, en realidad, la primera parte molesta es el color de fondo. Así que vamos. Bien, el color de fondo para esta página de inicio es el color de fondo de esta. Voy a ir, ya sabes, agarrar mi etiqueta de amigo y decir, el cuerpo en todas las páginas va a tener un color de fondo de eso en voy a hacerlo en realidad un poco más oscuro. Simplemente hice clic aquí en la B para brillo y usando mi flecha hacia abajo solo para hacerla un poco más oscura, esta sección de héroe no debería tener ningún fondo. Entonces voy a Comando o Control, haz clic en esto. Bien, y eso es que mi navegación va a ser blanca. Bien, aquí vamos. Y nosotros, te mostraré más adelante cómo conseguir que se estire. ¿Puedes ver que este se extiende por todo el camino? Puede que tengas que subir el contraste es realmente bajo. No parecía que pareciera bastante diferente cuando lo diseñé, pero ya no lo hace. Entonces ese es el color ordenado. Vamos a ordenar ese espaciado. Entonces quiero un trozo para este lado y un trozo para este lado. Grid estaría bien. Entonces hagámoslo. Así que vamos a ver la grilla. Qué lío con mi ventana. Entonces primero, pongamos la grilla y pongamos este H1 dentro de ella. Entonces ahí está mi sección aquí. Agreguemos una grilla. Aquí vamos y los revisamos por debajo. Va a tener dos columnas y sólo una fila. ¿Bien? Y mi golpeando un clic Hecho o doble clic para salir de él. Al golpear a uno, vas a entrar en la parrilla. Aquí vamos. Bien, y vamos a hacer clic en una cuadrícula y obtener el espaciado correcto. Ahora bien, no voy a medir esto. Yo sólo voy a hacer un globo ocular y decir, sí, es casi tan lejos. Así que voy a ir a pasar el rato aquí. Sí, pero esa es la brecha. Voy a agarrar estas pequeñas como pequeñas líneas aquí. Vuelven a ser algo así. Puedes hacer clic aquí y teclearlo. Si quieres que sea 0.55, calculará el resto. Bien. Estoy contento con 0.5. Bien, entonces esa es esa parte. Vamos a hacer clic en Listo. Vamos a darle una altura mínima porque ¿qué tan alto es esto en general? Y en Figma, puedes mantener presionada la tecla de opción como lo hiciste en XD. Simplemente haz clic en algo como esto, mantén presionada la tecla Opción o Alt y te dará las medidas de todo lo que te rodea. Pero en este caso, porque no hay realmente una caja es solo el fondo. Se pueden usar rectángulos para decir, bien cuadrado. Este cuadrado es, puedes ver los números que están saliendo por la parte inferior, bien, mide 576 pixeles de alto. Entonces eso es lo que quiero que sea el mínimo. Entonces me gustaría que esta sección de héroes fuera un mínimo de hombres, 556. Tan malo. Ni idea de lo que acabo de medir. Lo suficientemente cerca. Bien, entonces ahí está esa parte. Ahora necesito que baje de arriba. Hasta dónde voy a hacer clic en esto, mantenga presionada mi Opción. En un Mac alt en PC, simplemente pasa el cursor sobre este botón que ves es 187. Recuerda a Dan, recuerdas que me dijiste un segundo cuando 87. Entonces puedo empujar este golpeando hacia abajo o puedo hacer que esta sección de Harris tenga margen o relleno. Entonces si agrego margen, va a hacer que mi talla total sea más grande. ¿Puedes ver que la caja real se mueve hacia abajo? Entonces voy a decir que no, va a ser 187. Me acordé del acolchado en el interior. De hecho quiero eso porque eso no es tan alto, ¿verdad? Buen punto. Bien. Entonces lo necesito solo para afectar esto. Podría aplicar estilo, solo el bateo o tal vez Gracias. Espera ahí. Bien. Hay un par de cosas que podría hacer. Entonces lo que voy a hacer es que voy a aplicar clase especial a esto. Voy a deshacer para deshacerme del relleno que estaba en la sección Harris. Y lo voy a hacer a este bateo, voy a decir golpeando. Te voy a dar lo que ya tiene una clase aplicada a ello. Peligro, Debe recordar que le agregamos el todo pegando uno a él. Ahora tiene una clase aquí. ¿Qué está haciendo esta clase? Entonces la forma en que verifico eres tú, voy a mantener presionada mi tecla Option. Da click en estos pequeños chevrones. Está haciendo algo azul aquí. Está haciendo el peso y la fuente. Simplemente asumí que lo hice con la clase. Asumí que lo hice con la etiqueta de encabezado uno. No significa que vayas. Y ahora sólo se ha conseguido eso. Y solo tengo Aereo sin sentido público o lo hago oh, bien. Estamos de vuelta en el negocio. cuanto al tamaño, ¿qué elegí aquí? Utilicé a los 50. Bien, entonces aquí esto va a ser todos mis calefactores en todas las páginas otra vez para ser 50. Pero digo 51. Esto debe ser intolerable para ti. Utilice todos los 50. Y la altura de línea k, vamos a usar una altura de línea de I, usar 95% aquí. Yo también lo voy a hacer aquí. El 95% va a entrar, pero algunas otras formas de hacerlo más adelante pero seguir el diseño. Bien, así que sigo empezando mis edades. Eso es todo lo que quiero. Este de aquí necesita uno especial que k en otro modo de clase. Esto es como bloque, recuerda nuestra parte de bloque BEM, las genéricas que voy a usar y muchas páginas. Necesito un poco más aquí para decir héroe pegando, porque necesitaba hacer un par de cosas. Necesito que esté bien alineado. Bien. Que no todos los de mi edad sean solo este en particular. Y además necesito un margen de 187, algo así. Entonces bajo espaciado, voy a tener relleno o margen no importa en este caso, está recibiendo 20 de alguna parte. Bien. Vamos a subir al 187. Vamos a teclearlo. Si todos se preguntan de dónde obtienen algunos de los miembros, mantenga presionada la tecla Mayús y haga clic en ella. Y dice que los valores vienen del H1. Así que el H1 solo por defecto tiene algún margen de relleno superior e inferior. No voy a anularlo. Vamos a enfriarnos hasta donde sea necesario. Mirando a la derecha. Ahora. La otra cosa es, es que me gustó este espacio en blanco de aquí así. No se alinea con el borde. Entonces, ¿qué puedo hacer? Esta es una buena. ¿Qué opinas? ¿Cómo lo consigo? Así que es un poco por aquí. Imagínese si pudiéramos hacer un ancho mínimo o máximo. Bien, entonces lo que vamos a hacer es el héroe especial, la heroína especial, bien, eso hace el especial solo para que esta caja pueda tener una talla. Oh, es un poco a mitad de camino. Podemos tener un ancho máximo de éste. Por qué lejos, disculpe de nuevo mi rectángulo, voy a decir que quiero que sea sobre esto, que es 54550, algo por ahí. Ancho máximo de cinco píxeles. Vamos a dividirlo en dos líneas. ¿Estoy contento con eso? A veces sí hay que estar contento con ello. No estoy contento con ello. Necesito que lo sea. Voy a seguir subiendo y usando mi tecla mayúsculas y usando la flecha hacia arriba hasta que se rompa en tres líneas. Yo un buen trabajo, Dan. Creo que es porque diseñé esto en Figma mucho más ancho que lo que está por defecto aquí para el contenedor. El contenedor es una de esas cosas raras donde puedo agarrar mi contenedor por debajo de su tamaño. Verás que dice que está cerrado. Hacen mucho trabajo y Webflow para obtener estos puntos de interrupción que harán trabajo y todo bonito estilo. Entonces lo mejor es dejarlo como el flaco. Pero bueno, llegamos aquí. Lo diseñé demasiado grande. Entonces voy a crear una clase para que la anule. Contenía un ancho. Y se aplica a contenedor. Y yo sólo voy a decir, no puedo usar eso, no puedo usar eso. Puedo usar ancho máximo. Creo que voy a decir 1080. ¿Bien? Bien, estamos más cerca del diseño. Ahora el ancho máximo está bien, excepto que está por ahí. Dijimos que este héroe que golpea aquí es así de amplio, que es del tamaño correcto. Pero quiero saber de dónde está ese lado, está alineado a la derecha. El texto dentro del héroe, golpeando héroe está alineado a la derecha, pero la caja real en sí, bien, esta cosa llamada H1 no lo es, es simplemente por defecto a la pierna izquierda. Todo lo hace en diseño web, ¿ cómo lo atravesamos? Se puede hacer a la grilla. Así que está el padre de la cuadrícula que hace poco cosas generales como nuestro espaciado y podemos hacer la cuneta o escuchamos, bien, aquí vamos. Déjalo abajo. Bien, tal vez un poco más pequeño. Y toda la cuneta en la cuneta está entre aquí, estas cosas arrastran las tallas tienen que entremedias. Bien, Así que eso hace las cosas en general. Si quieres meterte dentro del niño, puedes hacer doble clic dentro o hacer clic en Hecho, luego haz doble clic dentro. Notarás que si me desplazo hacia la parte superior en el diseño o ¿hace doble clic para entrar? Ahora, haz clic para entrar. Ahí está por aquí, la grilla niño, guau, yo totalmente ¿podemos hacerlo de nuevo? Bien, así que están más padres, haga clic en Hecho. Toma cualquier cosa dentro de esta grilla y verás al niño. Entonces esto es, estamos viendo esta celda aquí más todas las cosas dentro de ella. Pero podemos decir en realidad dentro de esta grilla niño, bien, hay una celda. Quiero que todo esté justificado a la derecha. Oye, oh, bien. Entonces el tamaño correcto. En fin, vamos a ver ¿ qué más quiero hacer? Hagamos ese color. Recuerden que hicimos ese corte resaltado. hemos hecho antes. Consideras que podrías hacerlo. Bien. Entonces quiero que recuerdes lo que era. Probablemente habrías terminado. Se llama etiqueta span. Es esta cosa de aquí. Envuélvala en un lapso. Y el span va a tener una clase span de tu puedes tener. color primario es la primera vez que hacemos una clase global, bien, va a ser el color primario. Y va a ser este color aquí es el que más vamos a usar, ¿no? No es un color secundario. Voy a renombrarlo. Este es mi color, secundario. Prefiero hacerlo esa convención de nomenclatura de esa manera. Y este es el color secundario, el texto. Bien, así que hagámoslo al mensaje de texto. Color, tipografía secundaria. Ese es mi color ahí. Entonces ahí vamos. Uno de aquí, este de aquí. Ahora, no puedo vivir con eso. China era fuente. Pensé que estaba usando bombilla extra era en realidad un 900. Eso son 900. Eso son 800, Dan. Bien, entonces lo que vamos a hacer, vamos a tener que volver a las fuentes y cambiarlo. Entonces, sí, aquí vamos. Vamos a hacerlo juntos. Entonces vamos a ir a la configuración de mi proyecto para el sitio. En la parte superior aquí hay una llamada fuentes. Estos son los que se han instalado. Y yo soy una especie de estos, pero instalé 900, 800. Puedes editarlos, bien. Lo cual es un poco molesto. Entonces puedo agregarlos de nuevo, pero no pasan por Sans públicos o ¿solo está escribiendo PUB? ¿Y puedo sumar 800? El problema será que estoy bastante seguro de que probablemente lo hará en el código ed intentar cargar estas fuentes dos veces, lo que va a ralentizar mi sitio. Entonces ambos. Y solo hazlo de nuevo por si acaso. Tan regular quiero 8000 una vez. No puedo recordar qué más necesito, debería ser mucho mejor que este regular. Regular debería estar más preparado para ti. En fin, aprendemos cosas, bien, y va a ser suficiente. Y voy a volver a entrar en mi diseñador. Se puede ir directo desde aquí. Podemos volver al tablero y volver a entrar y ojalá la fuente o la carga, porque es un poco como reiniciar aquí mismo. Va a ir a, entonces, ¿cómo llegamos a esto? Porque héroe pegando héroe era miembro solo el elemento de R BE. Entonces no fue lo inicial que hicimos el bloqueo. Bien, entonces está debajo de aquí la topografía. No es llamar a la fuente aquí porque hay todas estas cosas. Recuerde que mantenga presionada la tecla Mayús y haga clic en ella. Viene de los viejos. Y esto es bueno, algo bueno porque como, ¿cómo llego a ello? No puedo sacarlo aquí arriba. ¿Dónde está? Puedo hacer una de dos cosas. Puedo borrar las cosas que he hecho aquí o simplemente eliminarlo y agregarlo de nuevo en un segundo. Porque ahora cuando selecciono en él, no tiene otras clases. Debería poder ir a una etiqueta H1 o podrías, en lugar de hacer eso, vamos a deshacerla. Podrías simplemente agregar y golpear aquí abajo y no darle estilo a Andy. Entonces puedes acceder a él. Más adelante, te mostraré cómo agregar solo estos elementos a una página de guía de estilo para que no estés teniendo pick los tiré en la página, los cambié, y luego los borro nuevamente. Es bueno tenerlos en una página separada por completo por el momento. Lo voy a hacer de esta manera. Voy a borrarlo. Yo sólo voy a quitarlo. Se oye ir al sentido público. Ya ves que como que no sabía qué hacer, quiere ser 900, pero no puede hacerlo. Entonces está un poco gris. Entonces voy a hacer 800. Ahora. Voy a aplicar nuevo mi estilo. ¿Y cómo lo llamamos? Nosotros lo llamamos texto colores secundarios. No lo hicimos. Lo llamamos héroe, héroe de bateo. Aquí vamos. Mejor. Bien, feliz entonces hicimos mucho más en su video de lo que pensé que íbamos a hacer. Pero eso va a estar en vivo cuando estés haciendo cosas y Webflow. Hasta saber de lo que está hablando. Esa es la gran pregunta. Lo que me gustaría hacer es practicar eso un par de veces y simplemente mostrarte directamente cómo hacerlo hasta el final. Pero sé que es súper importante ver la forma en que te encuentras con problemas y te vas a encontrar con problemas y cómo solucionarlos potencialmente. Ahora bien, si estás ahí sentado pensando, oye, puedo pensar en dos mejores formas de hacer exactamente lo que hiciste aquí dentro. Hay un montón de diferentes formas de hacer exactamente lo mismo. Si puedes encontrar una mejor solución. Es genial rompecabezas. Es un rompecabezas genial. Proyectos de terminación. Es divertido encontrar las mejores formas de hacer las cosas. A lo mejor es un poco más rápido hacerlo a tu manera. A lo mejor es un poco más rápido hacerlo a la manera de la otra persona. Independientemente, es un proyecto de compilación divertido y Webflow, pero eso es todo. Bien, se acabó el video de producción. 42. Espacio de altura de línea después de espaciamiento de letras en Webflow: Hola ahí. En este video vamos a ver algunas cosas. Vamos a mirar el espacio entre personajes o Kooning o tracking, ¿cómo lo quieres llamar? Veremos el espacio entre líneas. K podría estar correlacionando dependiendo de lo que quieras llamarlo también, la altura vertical entre líneas, luego veremos el espaciado entre párrafos. Bien, entonces si tenemos dos párrafos, cómo ajustar el espaciado entre el espacio de TI después de que vengas de más de un fondo de impresión. Sí, vamos a cubrir esas tres cosas entonces. Hará un gran lío al final e intentará arreglarlo. Voy a tratar de fingir que lo metí en el curso porque es útil para que lo sepas. También es porque no pensé lo suficientemente adelante cuando estaba diseñando mi diseño y me diseñé en un agujero. También te diseñarás en un agujero. Cubra primero las cosas fáciles y luego intente solucionar nuestro problema. K es, comencemos con la altura de la línea. Ese es el espacio entre el espacio vertical entre estas dos líneas. A lo mejor podrías pensar en ello como vivir si vienes de una parte diferente del mundo del diseño. Bien, así que vamos a abrir eso. Lo haces con la altura. Ese es el sencillo k. Pero lo primero que pasa es ¿ dónde lo hacemos? Bien, podría hacerlo a esta clase que hicimos. No hay nada malo en eso. Pero en mi cabeza estoy como, en realidad, ¿sabes qué? Probablemente quiero que el espaciado sea el mismo en todos los encabezados de todas las páginas futuras. Entonces es mejor hacerlo a la, toda la etiqueta por defecto. Entonces voy a quitar esta clase por un segundo, bien, y luego voy a con ella seleccionada, tener acceso a estas viejas etiquetas H1. Y ahora puedo decir que en realidad quiero una altura de y puedo mantener presionada la tecla Opción en una Mac, tecla alt en una PC y simplemente arrastrarla, bien para obtener un poco de la manera que quieras. O veamos las medidas de estas, de Figma. Y veamos también XD, solo para mostrarte algunas de las diferencias y la forma en que funcionan. Entonces fitness es quiero una altura de línea aquí, k de 95% aquí. Y flujo de trabajo, podemos decir, quiero que sea porcentaje 95. Ahí vamos. Bien, si lo obtienes de XD, XD dirá que va a estar ahí, está ahí. Va a ser de 47 pixeles. No dicen eso. Pero si escribes 47 en todos estos píxeles, entonces lo hace alguien que trabaje, 47 más 47 en, ahí vamos. Acabas en el mismo lugar. Bien, entonces eso es interlineado o interlineado. Echemos un vistazo a Kooning o el espaciado entre letras. Bien, Está bajo esta opción como más tipo. Estoy trabajando de nuevo en mi viejo H1. Y éste de aquí, ¿dónde está? Es este de aquí, espaciado entre letras. Entonces vamos a no tiene porcentajes aquí. Vamos a echar un vistazo a las llantas y algunas otras más adelante para conseguir algo parecido. Pero por el momento, voy a simplemente, va a por defecto a píxeles. Entonces voy a mantener presionada mi tecla de opción, tecla alt en una PC y simplemente arrastrarla hacia la izquierda, hacia donde la quiero . Eso me parece agradable. Menos dos píxeles. Aquí vamos. Menos, bien, eso fue fácil. Acaba de empezar con esa. Veamos el siguiente que es un poco espaciado entre párrafos o espacio después del espacio entre párrafos, porque va a traer algunos puntos interesantes. Lo primero es que volvamos a agregar esa clase a esto. Bien, así que recuerda a nuestro héroe bateador de clase para que lo empujen un poco hacia abajo. Ahora vamos a, bueno, en realidad antes de hacer eso, hagamos un rápido Bien. Fuera de contexto antes de lo de recuperación. Sé que voy a hacer de todo. Así que voy a ir, voy a estar fuera de esta sección de héroes. Este contenedor. Doy click en este párrafo de mercancía. Aquí vamos. Tengo un párrafo. Voy a agregar otro párrafo, no imprimir pantalla. Vamos por agregar otro comando de párrafo D, Control E. En una PC, tienes dos de ellos. Entonces siempre que necesites más de un párrafo, tienes que tener dos de estos bloques de párrafo, lo cual es realmente extraño, pero es solo diseño ondulado como lo hace. Podrías fingirlo yendo a volver a hacer el reajuste. El problema es que es muy difícil espaciar esto, esta brecha aquí dentro. Si estás contento solo por hacer eso, está bien. Simplemente no me gusta. Cuando a los sitios web no les gusta, lo mejor es tener párrafos a lo largo de todo el tiempo. Entonces, en los separados, ¿ tienes 100 párrafos? Tienes 100 de estos pequeños bloques de párrafos. Ahora, veamos el espacio entre ellos, o el espacio posterior o cómo llamarlos. Básicamente es el margen inferior. Vamos a decir todos los párrafos. Hagamos todos los párrafos. Todos los párrafos. Va a tener una maquetación. Puede tener un espaciado por defecto, esta lata, la voy a abrir. Bien, así que voy a hacer eso. Y significa que si copio y pego esto, son todos todos los párrafos que tengo van a tener ese espacio entre ellos. Dependiendo de lo que quieras hacer. Yo podría hacer lo mismo e ir y hacer la altura de la línea. Bien, entonces tú, la altura de la línea va a ser un poco más alta. Depende de lo que quieras hacer. Eso es el espacio después de los párrafos y la rareza de que los párrafos estén separados. Cada trozo tiene que estar en su propio envoltorio pequeño. Terminas con montones de estos, porque el diseño web, ahora se va a poner más raro antes de que se ponga no esperar a k Así que vamos a encontrarnos con un problema y luego vamos a ser casi capaces de solucionarlo. Esto lo aprendimos antes. ¿Recuerdas nuestra grilla, esta grilla de aquí arriba, o es una grilla? Rejilla. Tenemos estas dos secciones y aprendimos antes. Recuerden que si arrastre este párrafo aquí, bien, va, bien, CO, dos cosas. Entonces van a entrar en diferentes cuadrículas. Si sigo agregando cosas a esta cuadrícula, va a seguir agregando cosas a la cuadrícula y simplemente pasarlo a la siguiente celda. Eso no es lo que queremos. Queremos agregarlos solo a esta primera. ¿Quién se acuerda de lo que hicimos para que los dos entraran ahí? Eso es correcto. Nos gusta un poco agruparlos juntos. Y eso va a funcionar mayormente aquí. Y luego va a requerir algún conocimiento futuro que me voy inclinar rápidamente pasar por aquí y si no lo entiendes, está bien porque es parte del curso posterior. Me diseñé en un agujero con esta maqueta. Entonces lo que queremos es recordar que teníamos una etiqueta div, bloque div. Lo metemos en. Sólo voy a ponerlo aquí abajo y luego vamos a poner el golpeo dentro de él. Y donde están los encabezamientos dentro de ella. Entonces ahí está mi diblock. Bien, y voy a poner un párrafo dentro de él también a ambos juntos. Entonces ellos estaban dentro de esto, voy a deshacerme de estos otros. Y normalmente si pones el diblock dentro de la grilla, bien. ¿Dónde está? Realmente no puedo ver que es mi grilla ahí. ¿Bien? Voy a hacer clic en toda la abuelita diblock. ¿En realidad lo hago de esta manera o de esta manera? Hagámoslo aquí en el navegador. Voy a agarrar el diblock, ponerlo dentro de mi grilla, y no va a ir. Entonces voy a asegurarme de que esté sangrada un poco, así que está dentro. Mira eso. Bien, entonces esos dos pueden ocupar lo mismo, pero tú estás como, ¿ Y este espacio? Esa es la parte difícil aquí. Vamos a usar algo llamado Flexbox, que tengo toda una sección sobre eso conducirá. Pero por el momento solo podemos dejarlo porque acabo de darme cuenta que en realidad no tenemos ningún texto de párrafo aquí, pero podría haber un botón tiene el mismo problema, pero lo arreglamos. Conseguimos a estos dos juntos dentro de un bloque div, dentro de esta cuadrícula. Empujar eso a través de ahí es bastante complicado con una grilla. Sólo porque he hecho un gracioso, he hecho una especie de ancho máximo y quiero escribirle una línea, pero está dentro de un bloque div, que a una cuadrícula no le gusta realmente. Entonces podría decir niño UB, derecha, alinear a la derecha. No funciona. Voy a opción haga clic en esa. Voy a darle click para deshacerme de él. Y lo que podemos estar haciendo aquí con este duplicado switch a Flexbox. Flexbox para ser vertical y quiero alinearlo a la derecha. Estás como, ¿qué es flexbox? Eso es para después si quieres arreglarlo ahora mismo , hazlo. Bien. Es lo opuesto a la grilla. Grid es increíble y hace la mayoría de los trabajos hasta que no lo hacen, entonces necesitas flexbox. En este caso es bastante fácil. Sólo tienes que ir vertical y cambiarlo a fin. Por lo que lo alinea de lado. Pero eso es de lo que vamos a hablar Flexbox por el momento. Volveremos a ellos en un rato. Bien, así que hicimos Espaciado de líneas k-space entre nuestras líneas verticales. Hicimos espacio entre letras que espacio después de párrafos, copiar y pegar, bien, miembros solo margen. Y luego fuimos y estallamos diseño en nuestra grilla, pero lo arreglamos envolviéndolo en un bloque div. Entonces hicimos algo de magia con Flexbox, pero eso es para después. Bien, eso es todo. Te veré en el siguiente video. 43. Sombras de botón de texto y caja en Webflow: Hola a todos. Vamos a mirar las sombras. Este texto aquí, mantén un ojo en él. Te vamos a mostrar cómo agregar una sombra para que puedas algo así como sacarla del fondo antes, después. Bien, nos pondremos un poco locos y nos meteremos en la sombra completa donde hay múltiples sombras. Algunos de ellos eran blancos, algunos de ellos son oscuros. Y también veremos las sombras de caja. Entonces, ya sea en los botones o lo tenemos aquí arriba también. En la navegación, apenas se puede ver ahí. Hay un derechazo. Déjame mostrarte cómo hacer las dos. Por ambos, me refiero a texto y estanterías. Está llegando ahí. Bien, comencemos con la textura. Es fácil. Decide dónde quieres, a qué clase querías postularte, y luego ve, recuerda Opción Alt, haz clic en el cheurón para cerrarlos todos. Voy a detener ese atajo pronto. Cargas de tiempos. Ojalá se esté metiendo ahí. Pero sobre la tipografía, voy a decir Más opciones. Y luego por el fondo, garrapatas sombras, fácil, horrible, horrible sombra paralela. Probablemente sea mejor en este diseño aquí, bien, que hicimos antes. Voy a ir lo mismo y me sale una sombra de texto. Y lo que en realidad voy a hacer es que la voy a dejar ahí porque ahora tenemos una sombra, somos capaces de bajar algo de la oscuridad en esta imagen posterior. Pero de esa manera, nosotros, camino, camino, mucho tiempo atrás. Puedo, voy a ocultarlo porque quiero volver a encenderlo. Lo eliminaremos. Pero ahora con un poco de sombra paralela, como que podemos verla. Ahora también, echemos un vistazo bajo Tipografía. Ahora. Si quieres volver a editarlo, simplemente haz clic en la palabra. ¿Bien? Y lo básico, puedes arrastrar esto por la distancia. Es para un poco difícil hacer zoom en ambos. Está todo el camino por aquí. Lo siento, el ángulo, en qué dirección quieres que vaya. Bien. O puedes usar esto para saltar por ahí. No lo sé. Me gusta agregar cuando AT tan poco apuntando recto hacia abajo. Y realmente no me gusta en este momento las cosas cambiaron. Estilos de sombra paralela. No me gusta el desenfoque demasiado alto, y me gustó la distancia bastante baja solo para darle una línea realmente sólida para empujar hacia afuera. Bien. Y entonces el negro aquí a menudo puede ser demasiado oscuro como qué tipo de pierna más abajo para dejar algo del fondo bajando el deslizador de opacidad aquí. Bien, puedes ir un poco más allá. Vamos por aquí, esta horrible. Lo que podemos hacer es realmente tener, y lo haremos mejor ish, en realidad puedes tener más de una textura. Entonces antes que nada, voy a ir a, voy a ir a mi distancia 180 a un píxel y el desenfoque a uno o dos dependiendo de tal vez dos. Y voy a bajar el color todo menos solo para tener una pista ahí, podría deshacerme de ese azul. Haga clic fuera. Haga clic de nuevo aquí, haga clic aquí. Entonces el vector azul uno, en realidad puedes agregar otro. Entonces voy a agregar otra sombra de texto para formar equipo. Y a veces es bastante agradable tener una interna bastante fuerte y luego una muy grande y esponjosa. Tenemos muy baja opacidad. Sigue recogiendo. Bien, entonces ahí está esa. Este no tiene distancia. La distancia es lo lejos que está. Puedes decidir lo que quieres hacer, ¿de acuerdo? Pero voy a ir una distancia, todavía bastante baja. Pero el desenfoque, ¿puedes empezar a verlo? Podría ser solo deseando esto, pero con sombras dobles, puedes obtener el corte que necesitas, pero luego puedes levantarlo del fondo un poco más. Voy a bajar la opacidad. ¿Eso es genial? ¿No es eso? Echemos un vistazo. Ve con la nada. Vamos a apagarlo. Voy a encenderlo y apagarlo. Realmente solo necesitas ir a Option o Alt click para desactivarlo y luego usar tu deshacer y rehacer, que es en un Mac Command Shift Z. Pero una gimnasia con los dedos o Control shift C. eso entonces. Bien. Ahí vas. ¿Me gusta? Sí, vamos a hacerlo bien. Puedes agregar un tercero, hagámoslo. Después otro, y no tiene que ser blanco y negro. ¿Bien? Y puedes empezar a ver, bueno, hagámoslo y está haciendo el lado opuesto y simplemente arrastrando el ángulo sobre este lado para realzar ese lado y cortarlo de ese fondo borroso. El azul va a ser bastante bajo también. Quiero como un poco de brillo en ese lado. ¿Qué opinas? Buena cama. Podría ser malo. Ahora, cuando se trata de este tipo de sombras, en realidad, hagamos el ángulo sobre esa manera. Y creo que necesito bajarlo un poco. Lo dejaré alto porque quiero mostrarte algo con él seleccionado y este orden de capas. Entonces eso se ve primero, lo cual es genial. Puede que lo hayas hecho antes. Y puedes ver si es la espalda cubierta por las otras sombras? Estos dos realmente no importan porque ambos son negros y ambos están tratando de hacer lo mismo y el tipo de mezcla, mientras que este de aquí es de un color muy diferente. Bien, así que tengo que asegurarme de que esté en la parte superior. Y voy a bajar la opacidad para conseguir esto como una pequeña pista. Probablemente lo has visto en línea. A ti te gusta algo extraño de ello. El texto. No estoy contento con la sombra que hay debajo, pero la voy a dejar porque podría ser por qué arrastrar lo más mínimo de todos modos, es decir, soltar sombras en el texto. Entonces veamos hacerlo con cajas. Lo hará con un botón. ¿Por qué no? Porque no necesito este texto de párrafo. Aunque necesito un botón. Entonces con este seleccionado, voy a ir Comando E o Control E en un botón de enum tipo PC. Para nombrar el botón. Creo que antes sí creé una clase de botón viniendo BY. Nosotros lo hicimos. Y es de este color. ¿Es el color correcto? De todos modos? Vamos a dejarlo. Sólo hagamos la sombra. La sombra no está en la tipografía, está bajo efectos y sombras de caja. Bien, ahora, quiero darle estilo al botón genérico es la pregunta, bueno, solo vamos a encenderlo. Te vas sombra. Todo lo demás se ve igual. Tiene un par de otras pequeñas opciones antes de que nos vayamos y hablemos de que el nombre de clase tiene la talla k, que es si alguna vez has visto esparcirse en cosas como Photoshop e Illustrator, la igual que eso. Entonces distancia, qué tan lejos está, desenfoque, qué borrosa es y dimensionarlo. Es como todo esto. ¿Empuja los bordes o es realmente parejo? Puedes hacer unas muy esponjosas que no puedes hacer con el texto. Simplemente algo que no es útil. Puedes hacerlo dentro para encontrar. Bien, así que digamos que quiero hacer algo bonito. Voy a hacer mi marina porque eso es lo que me gusta. Voy a una distancia de uno, capa de uno y el tamaño de uno. Y voy a bajar este color solo para ser un indicio. ¿Qué tiene de malo? Algo está pasando con él. El hecho de que tenga una sombra en absoluto, a lo mejor necesita ser un poco más borrosa. No tener un buen Chateau de todos modos, realmente no me gusta la sombra. Cien pavos eso o no sé si puedo hacer un buen. Y hablemos. Entonces así es como editas, ¿verdad? Hablemos de, me voy a deshacer de todo. Entonces voy a ir Opción o clic Alt. Bien, ¿dónde lo aplico? Caja. Y esa sombra de caja se puede usar una y otra vez. Por lo que probablemente sea mejor como global. No voy a usar esta locura que no sea como mercadear parte de mi página de inicio, ¿de acuerdo? De lo contrario, lo convertiría en un estilo global. Lo que voy a hacer es que voy a agarrar una caja. Sólo va a ser, uh, puede ser cualquier cosa. Bien. Apenas un pequeño viejo realidad es un debulking o trabajo en este caso, independientemente, esto se va a llamar box-shadow porque así es como lo llaman. Y debería ser fácil encontrar la búsqueda usando la palabra sombra. Significa que puedo aplicarlo más que solo este botón. Puedo usarlo para todo tipo de cosas. Si necesito ajustarlo, puedo ajustar esta global y solo pasará por todo el sitio, bien, en caso de que decida, en caso de que decida, a veces te has decidido una sombra y te despiertas al día siguiente, estás como, ¿por qué hay? Entonces box-shadow y luego resolverlo de esta manera. Bien, entonces voy a decidir esto, éste que es cero, bajará un poco. Pero si lo haces de esta manera, significa que voy a borrarlo. Llego a aplicarlo como así esta pandilla extra. Entonces puedo decir sombra aquí hace su sombra de caja. Si lo aplico a otras cosas como esta sombra de caja de navegación, vamos, puedo ir a por eso. Global one de nuevo para ajustar el global creará un estilo es página más adelante, así que todos están en él. Por el momento. Podemos simplemente agarrarlo, sacar caja-sombra. Y si le hacemos un ajuste, hagámoslo distanciar. ¿Puedes notarlo? Lo hace por todos ellos, no sólo por esa. Buenas cosas globales viejas. Aquí vamos. Y eso es Textos. Bien en este. Casa, apártela. Éste de aquí. Este es el empuje de los límites. Y qué buen Drop Shadow debería ser. Y luego miramos la sombra de caja. Lo hemos hecho por un botón, pero funciona para cualquier tipo de elemento box. Bien, eso es. Te veré en el siguiente video. 44. Cómo crear muestras globales en Webflow: Hola a todos. En este video vamos a ver muestras. Puedes ver aquí abajo, tengo algunas muestras prefabricadas listas para usar, pautas de marca, colores, colores corporativos. Lo bueno de ellos es que una vez que los has configurado como colores globales, lo cual es súper fácil, puedes atravesarlos y cambiarlos y todos los que estén conectados a él. ¿Ves que todos cambian al mismo tiempo? Súper práctico. Bien, así que vamos a saltar , hacer muestras globales. Y al final vamos a ordenar un poco de nuestras fuentes a dos por uno este video. Bien, vamos. Hola a todos. Hagamos una muestra global. Lo haría rápido y luego lo descompondremos un poco más. Lo voy a hacer con Comando E o Control E en una PC. Y voy a escribir div. Yo solo voy a lanzar un bloque de disco ahora en lugar de ajustar cualquier cosa aquí arriba, bien, así que rómpelo con el seleccionado. Voy a en este caso, hacer antecedentes y continuo para elegir mi color corporativo que he estado usando, o al menos el del diseño. Bien, y luego haga clic en eso, que mi amigo es una muestra global. Termina ahí arriba. Tiene una pequeña etiqueta. Es un poco el símbolo universal para global. Se le ha dado un nombre de golpe, y así es como lo haces. Vamos a hacer clic en Crear. Sólo significa que si creo algo más adelante como este nav y tú estás como, oh, quiero usar ese rosa. No tengo que ir a usar mi herramienta cuentagotas ni introducirla. Simplemente puedo hacer clic en esta muestra reutilizable, muestra global. Hagámoslo de nuevo, un poco más lento porque quiero que entiendas lo que está haciendo todo. En realidad, veamos el punto principal de una muestra global y no solo una muestra regular. Y una muestra global significa que si hago clic en esta de aquí abajo y entro en mi color, y voy a esta que dice Editar. Estoy editando la muestra global, que actualmente se llama rosa fuerte. Y mira esto cuando arrastre esto y lo cambio, ¿ves que esto se le aplica? Bien, Y eso conectó, por eso es global. Significa que cuando hago un ajuste aquí abajo, si el cliente termina escogiendo un color ligeramente diferente, he usado esa muestra global una y otra vez. A continuación se actualizará. También se puede utilizar en texto. Entonces este texto aquí, y voy a entrar y alboroto y arruinando todo. Pero el otro buen punto es que el color que hicimos Background Color Swatch, usan el mismo. Entonces este es el color del texto, pero se puede ver que las muestras globales siguen ahí. Y otra vez, puedo editarlo, no importa donde realmente donde no esté. No es necesario que te traigan ese div original, pero puedes ver uno de cambio, todos cambian. Por eso los globales son útiles. Hay momentos en los que no quieres que estén conectados. Se quiere usar, pero se pueden ajustar para que sea un poco más oscuro. Digamos que voy a deshacer eso. Di esto estrecho en la parte superior aquí, tiene que ser más oscuro porque solo por los textos enlaces en la parte superior tiene que estar cerca, pero solo voy a bajar el brillo. Entonces lo que puedes hacer es aplicar esa muestra y luego hacer clic en esta para decir romperla y simplemente me gusta que la desconecte. Y ahora cuando lo cambio y luego uso matiz saturación brillo, abajo, abajo, abajo, abajo, abajo, abajo, abajo, abajo, abajo, abajo, abajo otra vez. Voy a mantener turno y abajo. Se puede ver que uno ya no es Global, solo color independiente. Bien, veamos un poquito más. Agreguemos uno más y lo repasaremos un poco más despacio. Entonces agreguemos el azul a partir de esto. Se han estado usando, de nuevo, solo puedes sacarlo del diseño. Puedes usar este número hexadecimal. Para que puedas pasar y decir: Bien, voy a romper el enlace en este. Voy a hacer una nueva muestra ya sea escribiéndola aquí. Bien, fíjate a lo largo. Ahí está mi azul. Si tienes los números H es B, puedes introducirlos. La mayoría de la gente no los tendrá, pero tal vez en tus especificaciones corporativas o tus pautas de marca, podrías tener RGB. Así que sólo tienes que hacer clic en cualquiera de estos tipos. Se puede ver que alterna entre RGB y saturación de tono y capa de brillo. Entonces podrías hacer eso. El otro es que podría estar arrastrando un logotipo y tirando de esos. Así que voy a ir, ¿qué voy a hacer? Comando o Control E? Voy a ir imagen, pulsa Enter, elige Imagen. Voy a ir a subirlo. Y es sólo algo para mi último proyecto. Es más bien, por ejemplo, ¿dónde están mis patrocinadores? Usas el mío. Entonces ahí está mi logo. Y puedes, con él seleccionado. En realidad vamos a hacer clic en esta cosa. Voy a crear una nueva que alguien quiera hacer. Sí. Bien. Entonces voy a usar mi herramienta cuentagotas, sacarla del logo. Bien, ahora puedo hacer de eso una muestra global y este va a ser mi BYOL. En verde. Puedes usar el predeterminado. Es increíble el nombre de colores que funciona ahí abajo. No hay realmente bueno. Cada vez que hago clic en algo, es como, oh si, creo que es un gran nombre para ello. Mientras que sí, agrego blanco al final de mis colores. Yo voy. Eso es anaranjado. Para sortear el hecho de que no tienen un nombre muy bueno para m. Así que workfare, workflow, podrías sacarlo de ahí. Bien, la otra cosa que podríamos hacer es que podrías estar trabajando a partir de un documento. Tengo este abierto de nuestra clase de fragmentos, es que dependiendo de quien hizo tu proyecto, esto es cuando hicimos para entregarlo a alguien como tú ahora como nuestro diseñador de flujo de trabajo o desarrollador, y tú puedes ver estos colores aquí. Yo di este pequeño paso para que sea fácil para ellos. Para mí lo que puedo hacer es ir a Inspeccionar como lo hicimos antes. Puedo hacer click en él y ahí está el número hexadecimal. Hicks es raro. No es raro. En realidad es RGB. Las dos primeras letras representan son las segundas dos letras G, Siguiente a ser número hexadecimal. Es una especie de versión basada en la web, aunque los usuarios web RGB ahora también, he escrito también para la persona que podría estar usándola. Bien, se puede ver aquí abajo en el CSS. Segundo, toma cualquiera de esos frijoles sobre lo diligente que es la persona que está haciendo el proyecto antes que tú, podrías obtener otra gran guía de estilo. En mi caso, es bastante sencillo cuando hicimos, en el último curso astillado todas las guías hacen que sea un poco útil todo en un solo lugar. Se puede ver aquí también. Hasta ahora hemos hecho solo primaria, secundaria y un acento. Pero puedes ver que puedes tener 12.3 primaria para los diferentes tonos. Dependerá de lo complejos que sean tus diseñadores. Este de aquí solo usa esos dos colores. Entonces, bien, volvamos a Figma, de vuelta al piso de madera. Ya puedes irte, yo solo voy a agregar el resto de los colores para mi proyecto porque en realidad no quiero ese verde. ¿Cómo los borras? En realidad antes de que te vayas, Esa es una buena. Creé este ya está creado. Y vamos a borrar esa. Voy a agarrar mi azul, que ya sé que está aquí arriba. Bien, agregándolo, voy a llamar a éste y llamo al cielo azul. Gran nombre. como un blanquecino y el fondo aquí. Bien, así que voy a ir a crear otra. Y te voy a ir a saltar de altura. ¿Y puedes ver eso? Lo hice de la manera equivocada. Así que creé esta muestra y luego la cambié y sigue siendo pick celeste azul. Así que voy a cancelar eso. Lo voy a hacer es dar click sobre esto. Después haz el cuentagotas para obtener el color correcto. Entonces golpeó más humo blanco, genial, genial. Nombrarlos fácilmente impresionados. Y recuerda, si necesitas romperlo para que no esté conectado con lo global, así no cambiará nada más. Haz eso. Y si necesitas editar el global, tenerlo seleccionado, editar a algo y luego darle esa opción y puedes ir y modificarlo Cancelar porque me gustan esos. Voy a agregar liso todo negro y liso blanco viejo. En realidad hazlo de la manera correcta en. Entonces voy a ir y luego arrastrarlo a las esquinas. Si, si, si en este estamos blancos, y entonces voy a hacer todo negro. En realidad, aquí tengo un par de colores más. Es éste de aquí. Es una especie de gris azulado que hice. Aquí vamos. Voy a agarrar esa. Así que vamos y esto te seleccionó y yo poco toqué para que realmente cambie. Ellos van a ti. Y ligero gris pizarra oscuro. Azul-gris. Gracias. Figma. Ahora bien estos dos probablemente estén demasiado cerca. Voy a reordenarlos. No puedes reordenarlos. ¿Podrías usar para poder reordenarlos? A lo mejor no lo hacen. Estos dos son muy cercanos. Siento que accidentalmente voy a hacer clic en ambos. Lo que realmente quiero hacer ahora es eliminarlos todos y tener blanco justo al principio aquí, y tener algo de espacio entre ellos. Y usa este tipo de humo blanco un poco más adelante. Pero lo voy a dejar por el momento porque ya tiene suficiente. Bien, y lo último que voy a hacer, no tiene nada que ver con los colores. Solo hay que hacerlo por el resto de este curso. Y porque la fuente, voy a pelear esta batalla de cambiar de fuente todo el tiempo. Lo cambiamos aquí por el rubro. Lo hicimos para nuestro H1, X1. Hicimos este sentido público, bien. Y luego este botón a y, después agregarlo al botón también? No, porque al mirar mi diseño, solo uso el sentido público a lo largo de este diseño. Entonces lo que voy a hacer es ¿quién se acuerda? ¿Cómo lo cambio globalmente para todo en todas las páginas, en todas partes, bien, y menos y es el cuerpo? Así que haz clic en la parte superior aquí o en el exterior. Voy a cambiar el panorama. ¿De dónde lo está sacando? Recuerda Shift, click, buddy o pages. Entonces no este órgano. Aquí hay un estilo. Voy a tener que quitar esto y volver a agregarlo de nuevo. Bien, en realidad estoy haciendo este estudio. Es algo bueno. Tengo esta clase de cuerpo aquí y tú estás como, ¿qué hace? Bueno, no lo sé. Yo no lo logro, no lo hice. Simplemente no lo sé. Se trasfondo este color. En lugar del problema de tener la etiqueta body con una clase que has nombrado, o al menos Webflow nombrada en tu nombre llamada body y agregarle este color, está bien. El problema será, es que en la siguiente página que hagamos, tendrás que aplicarle ese estilo. Y en realidad sólo voy a ir a quitar esa clase. Voy a ir a darle click. Voy a decir que todas las etiquetas corporales tienen antecedentes de esto. Raras ambos se habían aplicado y te vas, Eso fue una gran pérdida de tiempo clase. Y bajo topografía, voy a decir que no Arial, voy a decir mi sentido público, público, público. ¿Bien? ¿Cuál es el valor por defecto? Y usaremos normal y luego voy a anularlo en todos los demás estilos. Entonces significa que mi botón texto aquí ahora es difícil de ver, pero si me muevo a través de él, ¿ puedes ver todo lo que es texto en este documento a menos que se diga lo contrario, va a ser pública Sans normal. Y voy a ver el tamaño de la copia del cuerpo que estoy usando. ¿Cuál es el tamaño más común que estoy usando? Estoy tratando de encontrarlo en mi diseño aquí, alejando el zoom. Esa es la app, ese será el tamaño de mi copia corporal. ¿Qué he decidido? Mucho saltando por ahí. Sé que esa va a ser mi talla más común. Van a ser 16. Entonces voy a decir en realidad, mi vieja etiqueta de amigos va a ser 16. Y la altura de la línea, donde está la altura de la línea es 26. Voy a entrar aquí y teclear 26. Te das cuenta de que esto fue y cambió. Así que es muy importante hacer la etiqueta corporal desde el principio porque terminarás iniciando ese botón perfectamente. Está usando su tiene algo de altura de línea porque usamos texto dentro de él. Entonces tú 24. Hagámoslo realmente pequeño. 12, se ve el tamaño real de los cambios de botón. Así que haz todo este tipo de derecho primero, esa etiqueta corporal primero hacia abajo, y luego muévete en términos del color del texto. Sigue hablando con el equivocado. Estoy usando, no usando negro, estoy usando este a3. A3, z3. Verás, voy a decir etiqueta corporal o texto de páginas, van a ser tres. Ver, muy parecido a lo que teníamos. Y eso es todo. O se hacen las etiquetas corporales, se deshizo de una clase. Otra cosa que podríamos hacer ahora, justo mientras estamos aquí es nosotros, ¿ deberíamos o no deberíamos? Dijimos que esto era de sentido público. Recuerda desde el principio, ya no necesitamos eso. Entonces podría repasarlo porque viene de sostener Shift y hacer clic en el sobre y decir que viene de encabezados H1 o H2 H1. Lo edito ahí. Debería pasar y quitarlo. Debería no tener que hacerlo. Esto es simplemente ser como, no sé, TOC. Pero estoy tratando de darte que lo que debes hacer y lo que probablemente lo hago practico no son lo mismo. Probablemente solo lo dejo. Bien, pero voy a hacer click aquí abajo, Comando E, golpeándolo, tirarlo. Y se puede ver que quiero mi etiqueta de encabezamientos y voy a decir en realidad en curso también. Es gracioso como si quisieras pegarle a None. Esa es mi reacción natural. No es lo que quiero hacer. Quiero apagarlo. Recuerdo que sostenías Alt u Option para decir, no, no hagas nada. Y es como, oye, pero ha vuelto al sentido público. Pero no está siendo dicho por este bateo para ser público Sans, sostengo turno y le doy click. Ahora viene de la etiqueta de mis viejos amigos, ¿eso tiene sentido? Solo significa más tarde , si alguien va, bien, no estamos usando Sans públicos, estar usando Arial porque tenemos dos te da los encabezados vienen para el viaje, no solo tendríamos que hacer eso por separado. Entonces solo tratando de darte que deberías estar haciendo lo que considerando cuando estás haciendo estas cosas, a veces necesitas retroceder solo para limpiar las cosas, hacerlo se siente bien. Bien, muestras más algo de topografía se colaron ahí. Bien, eso es todo para el video. Te veré el siguiente. 45. ¿Cuál es la relación de contraste de color en Webflow: Hola a todos. En este video vamos a ver la relación de contraste. Básicamente significa cuán legibles son tus textos comparados con el fondo. Y tiene que ver con el color, tamaño de tu fuente y el peso de tu fuente. Te dan unos números dados y una calificación aprobatoria. Consiguió AAA. ¿Quién, quién? Déjame mostrarte cómo funciona y qué significa para tu sitio web ignorarlo. Bien, relación de contraste. Bueno, comencemos con este rubro aquí. Entonces voy a seleccionarlo y tú tratas con la radio consciente, con la tipografía y el color k y no los colores de fondo. Entonces tengo esta seleccionada. Voy a dar click sobre esto. Me está demostrando que usando esa muestra global, paso la prueba. Es un AAA k Es un contraste muy bueno entre el color de primer plano, que es mi leve, y el color de fondo, que es mi blanco humo. Verás que estas líneas aparecen aquí al preguntarte qué son. Son las líneas de relación conscientes. Para que veas que soy AAA. Si lo muevo hacia arriba, puedes ver que estoy en la EDT y luego por encima de eso está phi. Bien, así que eso se considera que no hay suficiente contraste para ser legible al fondo. Ahora estamos tratando de diseñar para todas las formas y tamaños y diferentes habilidades para ver. Eso es para lo que esto nos está dando una mano útil, es un poco restrictivo en términos de diseño. Echemos un vistazo a este rosa de aquí. Entonces este botón rosa de aquí, no es el fondo. No encontrarás la relación de contraste. Y aquí tiene que ver con la tipografía. Entonces necesito encontrar la topografía que está tratando con el porque en este momento mira, me está diciendo que es pastel negro de lo que viene. Si lo cambio clic de todos los cuerpos, sabemos que es de color blanco. Te puedo ver. Eres blanco. Bien. Entonces la forma de dulce de leche esto es que voy a ir rápidamente y cambiarlo a blanco. Ahora, sumar a esta clase como clase de Bhatia, sólo a blanco, sólo para que pueda ver lo malo que es. Y es la más mala de todas las apuestas contra ese color rosa, mi rosa fuerte. Es decir que esto realmente es un fracaso y para acercarse a él, tiene que ser básicamente negro. Entonces ese es el intercambio que vamos a tener que hacer aquí para este botón en particular, porque es un botón bastante importante. Entonces vamos a tener que cambiarlo a nuestro negro. Vamos a usar esto o todavía falla hace un momento. No lo hace. Es un, es un sistema de puntos. Hay A útiles y dobles A's. No fue útil WA es AAA. Realmente vas a mirar este número de aquí, lo bueno o lo malo que es. Obviamente algo que es así va a fallar mal porque no puedo verlo. Es cama gratis. Bien. Y es bueno en este de aquí. ¿Qué tan malo es el fracaso? No 100. Ya sabes, no te gusta perder Internet si está por debajo de esto. Pero este es un buen indicador en línea para ayudarte a tener una idea de lo cerca o lejos que recuerdas, posible que podamos jugar con el tamaño de la fuente, peso de la fuente también para meterse con la relación de contraste. Entonces es interesante, podría decidir ejecutar realmente las tomas de doc y tal vez hacer que el botón tuviera una línea alrededor del exterior en lugar de una a todo color, como un borde alrededor del exterior. Pero al decir que sí se siente bastante limitante en términos del tipo de realmente aprieta al Calibán que puedes usar. Obviamente van a ser instancias en las que tiene que ser 100% de la mayor accesibilidad posible. Especialmente si estás persiguiendo ese sueño de motor de búsqueda. Y estás tratando con el público más amplio. Si estás haciendo algo mucho más artístico o creativo y estás tratando de traspasar los límites. La relación de contraste es difícil trabajar solo para que sepas, hay cosas que puedes hacer por sitios existentes, como si fuera un poco agradable aquí que tengan esta opción. Pero puedes salir a Google, tener algunas opciones donde, digamos que quiero probar esto. Volvamos a, voy a deshacerlo. Así que volví a mi texto blanco y haciendo, y haciendo y haciendo. Bien. Voy a dejarla ahí. Y voy a publicar el sitio porque Google necesita verlo se publicó el enfermo, el dominio. Y eso es herramientas útiles en general. Por lo que está publicado. Voy a agarrar el enlace, copiarlo, y voy a pegarlo en este de aquí. medida de barra diagonal de desarrollo web es una buena descripción general genérica de un sitio web. Aquí no vamos a pasar por todo. Está muy fuera del alcance de este curso, pero vamos a mirar la accesibilidad solo para demostrar que no ignores la relación de contraste porque Google sabe que es muy fácil. Va e indexa tus páginas y va, bien, vas menos información y fallas la accesibilidad como ratas tomaron accesibilidad. ¿Y dónde está? Aquí tienes. Ahora botón. Lo sabe. Es un bajo contraste para que puedas pasar, infórmate más. Pero esa es la compensación de la misma, es que se puede ver la accesibilidad. Es una parte de ello. No lo has comprometido al final de los rankings de búsqueda. Está a los 84, es amarillo, no lo es. Bien, pero no es verde. Entonces tienes que decidir qué está haciendo tu proyecto y cuánto quieres perseguir esto, ¿de acuerdo? Todas las relaciones de contraste. A veces el texto es simplemente decorativo y es una pequeña parte de un grande porque el nuestro es bastante bajo porque es como si no tuviéramos mucho en nuestro sitio. Esto está ocupando una gran parte de lo que está disponible k. Así que todo el tipo de llamada a las acciones, todos los botones importantes deben tener buenas relaciones de contraste y algunos de los más Es posible que las cosas decorativas no lo necesiten así, pero aquí hay una pequeña parte de ella. No me gustó de todos modos, Ahora es bastante ligero y la sombra, Está un poco ejecutándolo. Pero te fuiste solo en, puede ser que no valga la pena eso por el extra cualquiera que sea los puntos de estilo que vayas a por. Estoy divagando. Bien, eso es todo. Esa es la relación de contraste. Te veré en el siguiente video. 46. Fondo de degradado en Webflow: Hola a todos. En este video vamos a ver poner en este gradiente abajo de abajo aquí. Te voy a mostrar cómo agregarlo. También te mostrará algunos lugares geniales para obtener uno de otros sitios y cómo tomarlos prestados de sitios como regatear directamente desde Webflow. Bien, hagamos algunos gradientes, bien, para que sea degradado de fondo, vamos a darle estilo a nuestras secciones. Así que sólo vamos a agregar una sección en el lugar equivocado y editar. Todo lo que es es bajo antecedentes. Hemos estado usando el color hasta ahora, bien, pero hay esta pequeña ventaja aquí dice En realidad usemos el degradado de fondo. Ahí está ahí, feo en blanco y negro. Para ajustar los colores, solo tienes que hacer clic en uno de los extremos ya sea en, ¿de acuerdo? Y luego haces clic aquí abajo, bien, entonces es negro y puedes elegir tus colores. Voy a elegir este y el otro extremo. Esto es un poco espérame, quiero volver al gradiente de esta cosa aparece, tienes que hacer clic un poco y luego se va. Vete tú. Ahí está mi horrible gradiente. No lo sé. 1980. En realidad me está creciendo. De todas formas. Entonces así es como hacerlo, Bien, En su caja anual, puedes hacerlo a tu botón también. No tiene por qué serlo. Tenemos un color aquí, pero podemos agregarle un degradado. Hay uno lineal y nuestra radio y radio, que solo significa alrededor de E1, deshacen eso. La otra cosa, las otras cosas es editarlo, solo le hice clic en esto. Y puedes jugar con el ángulo porque voy a cambiar el mío en un poco. Puedes cambiar estos ins k de izquierda a derecha. Entonces eso es lo básico. Si buscas buenos gradientes, yo estaba en la gente para degradar. Así gradient.com, Solo hay algunos buenos gradientes aquí para elegir. Y cuando encuentres uno que te guste, este de aquí, das clic en él. Ahí está ese número de selecciones. Volver a Webflow. Puedo hacer click aquí, y en lugar de mi rosa fuerte, puedo simplemente pegar ese y puedo comenzar a construir mis gradientes de esa manera. Se puede añadir un tercer color. Porque incluso algunos de estos agarrando a unos se puede ver que son tres colores. Digamos este color medio aquí, puedo dar click en él, copiarlo, entrar aquí. Y lo que haces es que tienes estos dos colores. Simplemente haga clic en cualquier lugar aquí. Puedes tener tantos colores como quieras. Haga clic en la línea real. Aquí abajo, pégalo. Y puedes tener tres colores. En realidad, voy a acelerar y hacer esto. Bien, ahí vamos. Y otras cosas que podrías hacer. Así que el gradiente es agradable. A veces es bueno solo mirar el trabajo de otras personas. Así que el regate es un gran lugar para ir en busca de inspiración. Y siempre hay algunos gradientes agradables para un poco poner en marcha la creatividad. Y qué pequeño truco genial es, voy a arrastrar esta pestaña para que haya separado, así que ahí está mi Webflow y ahí está mi regate. Entonces voy a hacer driblar más pequeño. Así lo puedo ver. Oye, ahí vamos. Y voy a hacer Webflow más pequeño. Esto es un poco de gimnasia de ventana. Tal vez no puedas hacerlo. Encontraremos un monitor complicado en tu talla, gay. Pero por aquí ahora voy a ir a mi Gradiente. Entonces tengo este seleccionado. Voy a quitar este color. Simplemente haces clic en él y arrastra, arrastra, arrastra, y eventualmente simplemente desaparece. Simplemente haz clic y arrástralo un rato. Bien, y escojamos nuestros dos colores. Voy a usar esto, clic en ese color y en realidad usar la herramienta cuentagotas. Y en realidad necesito encontrar algo que me guste primero. Entonces solo buscando hallazgos. Digamos que nos gustó este, Cuentagotas, elige eso. Y luego voy a hacer click off, click en este extremo. Ahí, da click sobre esto. Se puede pasar por y apropiarse de los gradientes de otras personas. Los gradientes no son de marca registrada. He robado viejos horizontes uno. Es bastante agradable. Entonces vamos, sí, puedes hacer ese tipo de gimnasia para conseguir colores o al menos degradados. ¿Bien? También voy a con la sección solo agregar una altura mínima solo porque es difícil de ver. Es complicado ver ese gradiente cuando está un poco apretado. Y sabemos si nos Comando Mayús P, Control Shift P para previsualizar, se puede ver que desaparece. Así que a una altura mínima, solo así tenemos algunas cosas ahí dentro. Entonces esta sección aquí, no va a ser nombre de sección. Voy a renombrarle este y éste va a ser sección fría más bajo porque no puedo pensar en cómo llamarlo, porque mi diseño, nos lleva este pedazo inferior. Bien, y voy a destacar estas cosas y solo voy a conseguir un amante de la sección terriblemente llamado. Y vamos a darle una altura mínima. Entonces bajo tamaño, y recuerda que no usamos la altura porque somos inteligentes. Utilizamos altura mínima para que pueda expandirse más grande si es necesario. Bien, eso es. En realidad me voy a ir ahora y guau, ya te dejaré. Voy a ir a ponerlo en el gradiente correcto. Bien. Quiero meter esta, pero sí, vas al siguiente video. Te veré en un segundo. 47. Contenedor de ancho completo en Webflow: Hola a todos. Este video, vamos a sacar aquí esta sección de héroes y expandirla para que vaya de ancho completo. También lo haremos en nuestro sitio de cartera. Haremos que esta caja blanca de navegación vaya hasta los bordes mientras que permitimos que una sección en el medio que retengamos para la navegación actualizará este trozo inferior también para tener una sección dentro de él, Veamos cómo hacer cajas de ancho completo y navegaciones y contenedores en Webflow. Bien, así que primero, veamos el proyecto pasado. Me gustará un club que hicimos. Todo está dentro de un contenedor. Voy a pincharlo ahí. Bien. Entonces tengo un contenedor y todo está dentro de él y parece que solo deberías tener un contenedor. Eso no es cierto. Puede tener lotes y muchos contenedores depende de si quieres que todo esté restringido dentro de la parte central o como nuestro diseño donde el dolor de cabeza va todo el camino a través. Y también lo hace esta parte de degradado inferior. Entonces comencemos con esta navegación. Principalmente lo que quiero hacer es en realidad vamos eliminar la sección de navegación que hice. Y solo quiero mostrarte debajo del sumar aquí abajo debajo de componentes, hay una llamada barra de navegación. Si agrego eso a mi diseño, tipo de tratar de conseguirlo. Que lo entiendo clase no está ahí. Y si lo arrastro fuera de mi contenedor, mira lo que pasa por defecto es en realidad venir estructurado con esta sección de ancho completo. Y dentro de él hay un contenedor que contiene el bit para mi logo y todo mi botón de texto. Entonces eso ya está hecho para nosotros y esa estructura. Entonces eso es lo que vamos a reconstruir. No usaremos esta barra de navegación predeterminada porque solo tenemos como un botón. Así que aquí no necesitamos toda esta complejidad. Así que me voy a deshacer de ti. Voy a deshacer hasta que vuelva mi sección de navegación. Básicamente, todo lo que quiero hacer es agarrar esta sección y sacarla fuera del contenedor, lo cual es genial. Ahora es de ancho completo. Realmente no pasa nada con este contenedor. Tiene un estilo de alguna sombra de caja, pero no está pasando mucho. Ahora quiero poner un contenedor dentro de él. Entonces un bien. Para ir a Ed grad el contenedor, ver si lo puedes conseguir en el interior. Y luego vamos, ya hemos hecho esta sección. Voy a añadir un botón aquí por el momento. Voy a agarrar este, copiar ese, ponerlo dentro. puede ver que está un poco contenido dentro de este contenedor curiosamente. Así que eso te permite empujar, hacer un poco de estilismo para todo este ancho, decir, en nuestro caso, solo color de fondo, pero conservarlo en el centro del sitio. Práctica de diseño web muy común. Este de aquí realmente no necesita hacerlo porque tengo, no tengo relleno en esta sección aquí llamada sección aquí. Simplemente no hay relleno. Entonces el fondo se está mostrando a través k y ese es el color de fondo que estoy usando. Para que puedas tener secciones primero y contenedores dentro de ellas. Puedes tener muchos contenedores. Echemos un vistazo a Apple. Bien, entonces esta de aquí sería una sección de navegación con un contenedor dentro de este de aquí, lo mismo. Este de aquí probablemente no lo necesite, pero podría Lo mismo aquí se puede ver que todos estiran ellos usando el ancho completo. Hagamos otro ejemplo de esto poco abajo aquí, porque nuestro diseño tiene a estos chicos en unas pequeñas miniaturas en la sección media. Bien, entonces aquí, acabo de conseguir esta sección más baja. Ahora bien, esto trae a colación un buen punto. Ahora podría ir a tirar un contenedor, oye, por contenedor, entra ahí. Y podría empezar a construir mis tarjetas, lo que haremos en un segundo. Bien, está bien. El único problema es que llamo a esto una sección. Y ¿qué sabemos de las secciones? Lo que es uno de los paneles para secciones si voy, porque por el momento mi diseño no tiene nada más. No he hecho un pie de página en este solo para mantener el curso un poco más corto, pero probablemente va a ser un pie de página tal vez aquí dentro de este gran trozo. Y si quiero encajar una sección, una sección, ponla aquí, grandes líneas rojas. No se pueden poner secciones una dentro de la otra. Bien, ¿y qué pasa con esto? ¿Qué hacemos? Esta cosa de aquí probablemente sea mejor que no se llame una sección porque mirando mi diseño, esto es simplemente ornamental. Esta cosa, miniaturas de cartera como sección. Entonces tal vez haya una sección testimonial y luego una sección de fotos todo dentro de aquí. Entonces, ¿qué hacemos con él? Lo que voy a hacer es que voy a doblarlo. Voy a recordar en realidad voy a cambiar el nombre de esta clase porque me gusta. Quiero guardarlo porque tiene mi gradiente en él, pero ya no es sección más baja. A éste se le va a llamar gradiente de fondo de color. Y voy a ir a eliminar esta sección. Yo no te necesito. Pero sí necesito , ¿qué es lo genérico? Que podamos agregar una caja genérica, una división genérica del espacio aquí, diblock, tratar de conseguirlo en el lugar correcto. Tuve suerte. Entonces ya no es, no está dentro de mi contenedor héroe aquí. Está aquí. Excelente. Entonces voy a decir Ahora tienes este diblock, solo voy a usar mi degradado de color de fondo. Es lo mismo excepto que ahora puedo ir a una y puedo agregar una sección y luego llamar a esto mi sección de miniaturas. Puedo añadir otra sección llamada pie de página. Entonces sí, a veces solo tienes caja genérica, que es solo un bloque div. Quiero terminarlo porque ahora esta sección va a continuación? O el contenedor mirando mi diseño, si tuviera un pie de página aquí, bien, y va a ser del mismo ancho. Tendría un contenedor y mi sección de miniaturas más mi perdón, mis miniaturas más mi pie de página más los testimonios depende de cuál sea su estructura que esté tratando de obtener. Mi caso, un contenedor va a ser bueno. Un contenedor lleno. Te estás cansando de eso, pero te estás volviendo bueno en eso. Mi contenedor está funcionando muy bien. De hecho se ha dado cuenta por qué ese contenedor, recuerda que agregamos, queremos que el sitio web sea un poco más amplio. Entonces agregamos una clase de contenedor de ancho de contenedor. Lo hicimos lo mismo para el nav aquí arriba. Entonces el ancho del contenedor, reutilícelo cuando las clases se sientan bien. Entonces dentro de aquí, voy a agregar mi sección. Y dentro de esta sección, esta va a ser mi sección de por vida miniaturas. Y este en particular va a tener algún espaciado. Va a tener algún margen superior. Voy a adivinarlo por el momento. Y vamos a agregar una grilla dentro, pero eso es algo así como esa estructura. Entonces hay un contenedor interno que hemos resuelto que a veces solo tenemos un div ornamental alrededor del exterior de estas cosas porque en el futuro quiero la sección más probablemente quiero pie de página más adelante para ir dentro de allí también. Entonces me das dos secciones distintas. Vamos y actualicemos este. Quiero mostrarte este para que puedas irte ahora si tienes al director, si quieres un ejemplo más, vamos a hacerlo a este reacondicionado y vamos a empujarlo hasta los bordes como mostramos en la intro. Éste, no es complicado. Es solo que los navegantes son difíciles de usar. Entonces, ¿qué hacemos? ¿Cómo lo harías? Pausa, piensa en cómo no vas y hazlo. Vuelve a ello y mira si llegaste ahí, si solo quieres ver. Entonces lo que voy a hacer es que necesito que este tipo ya no esté en este contenedor porque ese contenedor los contiene. Queremos que sea libre. La sección tiene que ser gratuita. Entonces, ¿cómo lo hacemos? Voy a ir a, voy a añadir en realidad, no voy a ir sección, no voy a llegar a ella. Sólo voy a sacar a este tipo del contenedor y es un poco duro, sacarlos. Izquierda, derecha, izquierda, derecha. Así que está afuera y abajo abajo aquí. Él ya es de ancho completo. Excelente. Qué tenemos que hacer ahora mientras él está aquí abajo, lo que podríamos hacer es poner un contenedor dentro de él y tratar de abombar todo este contenedor, voy a meterlo ahí y me voy para probar en cualquiera de hacerlo, vamos a tratar de hacerlo de esta manera. Está funcionando. Está funcionando. Tipo de trabajo. Bien, entonces entiendes la idea. Puedes intentar hacerlo en. Esto es bastante fácil cuando todos están apilados en la parte superior, pero puede simplemente directamente a la derecha, arrastrarte hacia la derecha, rastrearte el derecho cuenta como más de uno a la vez en el momento, por lo que yo sé. Entonces aquí vamos. Tenemos esta sección, que es perfecta porque es mi sección de héroes. Y todas estas cosas están dentro de este contenedor. Aquí vamos. Ahora necesitamos moverlos arriba en la lista porque necesita estar entre NAB y patrocinadores todavía. Entonces, ¿qué hacemos con estos tipos? Lo que voy a hacer es probablemente meteré primero un contenedor. Entonces voy a ir a un contenedor y lo arrastraré hasta el fondo. No voy a conseguirlo. Así que voy a intentarlo de nuevo contenedor. Se pueden poner dos contenedores uno dentro del otro. Así que vas, él está fuera de lo que quiero que los patrocinadores estén en él. Trabajó. Si encuentras esto complicado de usar, es totalmente complicado de usar. Están mejorando cada vez que parezco cargar esta cosa, las cosas funcionan un poco mejor aquí dentro. Ese contenedor que contiene todos estos. Entonces ahora es solo el orden de las capas. Y creo que podría haberlo hecho todo accidentalmente. Entonces tengo este contenedor superior, que tiene mi nav en él. Entonces tengo esta sección de héroe, que se extiende a todo el ancho. Dentro de eso, tengo mi contenedor que contiene todas las cosas de aquí. A veces la sección va dentro del contenedor. Si quieres que esté dentro. A veces los contenedores dentro esta sección, es como el inicio. Entonces no estás ayudando. Estoy esperando. Entonces. Así es como modificamos ese sitio. No me gusta porque esto probablemente tenga que ser de ancho completo también, pero son exactamente los mismos precios que está haciendo este último aquí. Entonces, si quieres hacerlo, ve a hacerlo. Si no lo haces, solo querrás seguir adelante. Vamos, Dan. El siguiente video que desearás es mi mando. Vayamos siguiente video. 48. Diseño de flujo web: columnas vs Flex vs Grid vs None vs Inline: Hola a todos. En este video, vamos a ver ajustes de visualización de diseño. Vamos a cubrir bloque, bloque en línea, y ninguno. hemos cubierto en pedacitos a lo largo del curso. Nosotros sólo los envolveremos. Veremos por qué no estamos usando columnas, bien, y luego en el siguiente video haremos la grilla de batalla contra Flexbox. Pero por ahora vamos a meternos en estos primeros. Bien, así que comencemos con los dos probablemente los más fáciles. Los que ya nos hemos topado algunas veces, visualización y bloque en línea. Entonces echemos un vistazo a los encabezamientos. Golpear es por defecto nuestro bloqueo. ¿Qué quiero decir con eso? Voy a copiarlo y pegarlo. Hay dos de ellos. No quieren compartir el mismo espacio, o al menos el espacio horizontal. Se empujan entre sí hacia abajo. Son una cuadra. El némesis para el bloque es el bloque en línea. Entonces puedo decir éste de aquí. Voy a darle una clase a este bateo. ¿Bien? Voy a decir que ya no estás bloqueado por defecto, te voy a enseñar a inline-block. Realmente no pasó nada porque este tipo sigue bloqueado. Yo también le voy a tocar la clase, eso tanto en bloque en línea, si los sigo copiando y pegando ahora, están en la fila. Siguen siendo caja, pero están en la fila. Bien, entonces encontrarás algunos elementos por defecto, nuestro bloque significa que todos quieren apilar y algunos de ellos son clases en línea de uno en línea. Entonces echemos un vistazo aquí. Los botones están en línea. Ellos quieren ir uno tras otro. Déjame meterlo ahí. Si lo pongo en uno, ponga otro botón. Así. Están en línea, pegar, pegar, pegar. Ellos van a querer apilar. Todos están contentos de ocupar el mismo espacio horizontal. Puedo cambiarlos. Puedo decir mi botón, bien, va a ser el botón uno. Y voy a decir borre todos estos porque no tienen la clase aplicada. Por eso este de aquí con el botón uno. Por defecto, estás en la fila, ya no. Bloqueas. Quiere llenar todo el espacio, pero está bien. Tú les dijiste que lo hicieran. Es un poco raro que un botón para el ego pueda ser más interesante hacer eso. Y soy lo que debería haber hecho esto con una imagen. Entonces aquí está mi imagen. La imagen por defecto quiere estar en línea, pero en realidad queremos que se le dé una clase de imagen. Y voy a decir que en realidad no, estarías bloqueado. Solo empuja todo hacia abajo, por favor. Eso estaría en la misma línea. Bien, entonces bloque, bloque en línea. Busquemos otra fácil. miremos a ninguno. Ninguno solo dice Toda esta imagen. Cuando me baje al móvil, en realidad me gustaría ir a ninguno. Me gustaría que se fuera. Ver en escritorio y tableta, móvil horizontal. Pero en esta, apágala, ya va. Entonces es como borrarlo, pero al menos está disponible en estos otros puntos de interrupción. Puedes apagarlo en el escritorio y volver a encenderlo en la tableta. Sin embargo, ¿cómo lo encuentras? Ese es un buen punto. Puedes ver por aquí, Tiene esto. Todavía puedo seleccionarlo por aquí, aunque no lo pueda ver. Así puedo seleccionarlos aquí. Se establece en ninguno. Así que en realidad está aquí, bien, Aquí, vuelve a bloquear o bloque en línea o no ahí en el escritorio, aparece de nuevo en la tableta y debería estar ahí y comenzó de nuevo en el móvil. Ahí vas. Eso no es ninguno. ¿Qué más tenemos? En realidad, dejémoslo ahí. Comparemos la grilla y el flexbox en su propio video. Y el siguiente. Vamos a hacer ese video para enfermarnos. 49. Diseño de flujo web Flex vs Grid que debo usar: Hola a todos. En este video vamos a ver las diferencias entre grid, que ya hemos hecho antes, y flex, que es esta opción aquí, k, Flexbox o flex layouts, flex y grid compiten por hacer mucho de los mismos trabajos, pero tienen algunas diferencias a las que quiero saltar. Y lo mejor es entender realmente flex en comparación con grid. Entonces hagámoslo. Bien, comencemos con una grilla. Bien, ya lo hemos hecho antes de hacer clic en un contenedor aquí, voy a arrastrar mi cuadrícula dentro de él y conseguimos esto. Lo primero que quiero mencionar es que si lo deshago, notarán que las cuadrículas de aquí. Entonces fueron columnas, bien, pero por aquí donde puedo cambiar las cosas para que mi contenedor, en realidad solo pueda hacer la grilla. Aquí. Realmente no importa si tienes algo en la página, como un bloque div vacío o un contenedor y lo conviertes en una cuadrícula. O si arrastras la cuadrícula sobre, porque es más una cosa aplicada a una etiqueta div. Nos gusta arrastrar como grumos sobre k, así que vamos a hacerlo de esa manera. Pero todas estas cosas aquí en este diseño es solo un div viejo simple con este contenedor tiene algún estilo aplicado a ese div que lo hace centrado. Este de aquí lo divide en porcentajes para columnas. Este aplica un diseño de cuadrícula para nosotros. Ciertamente la sección, son solo estos bloques div con estilo aplicado. Entonces nos encantan las rejillas. Rejillas muy fáciles de agregar columnas y filas, eliminarlas. El espaciado entre estos, te estoy mostrando estos porque en comparación, Flexbox es bastante complicado hacer algunas de estas cosas de espaciado que grid hace muy bien. Es, es algo para nuestra grilla. Bien, entonces vamos a agregar algo de topografía. Sin embargo, lo único que sabemos de las cuadrículas, si ahora necesito agregar algo a una de estas celdas, también voy a agregar una imagen, ¿de acuerdo? Se pasa a la siguiente. Quieres que estos estén juntos, pero recuerdas, todo que tenemos que hacer es ponerlos en un rapero. Y estoy dando click a en mi teclado cargas para este caso, voy a ir div block. Y dentro de ese bloque va a estar mi imagen. Ven a dar el paseo. Aquí vamos. Es complicado. Es complicado para todos nosotros. Entonces ahora ese bloque div está dentro de aquí, si lo hago clic aquí y lo copio y lo pego, bien. Puedo pegarlo de nuevo, pegarlo tres veces y es otra ventaja para la grilla. Solo puedes seguir adelante y nosotros seguiremos agregando suficientes celdas. Bien, entonces ese es un gran beneficio para la grilla. Ahora bien, la forma en que funciona la cuadrícula es que gran parte de la estructura general se hace con el padre. ¿Se puede decir el padre de todas estas cosas por dentro de aquí? Yo también puedo hacer cosas. Puedo decir en realidad me gustaría alinearlos al centro dentro de sus celdas. Impresionante. tanto que digamos la imagen que tratamos en el último video, voy a decir este botón aquí abajo. Si queremos cambiarlo, no lo hacemos, hacemos su padre, simplemente se lo hacemos a él. Decimos que ahora estás en línea bloque o bloque. Entonces lo hacemos a lo real, mientras que grid y flexbox. Bien. Se lo hacemos al contenedor padre. Bien. Pero los padres tienen hijos, estos pequeños. Y se le pueden hacer cosas individuales a estos niños. Así se puede decir que todos están centrados excepto por este rebelde abajo de aquí abajo. Si haces clic en el hijo del padre, bien, puedes decir, Oye, estás bien alineado. Las cuadrículas son increíbles. cuadrículas son increíbles para contenido realmente estructurado como nuestras miniaturas que vamos a hacer para nuestra cartera. Un montón de cosas repetitivas. Podrían ser artículos en tu tienda, podrían ser imágenes o tu cartera. Muy buena pero muy estructurada. Todo es Samy flexbox en contraste, lo que haremos en un poco, es bueno para cosas irregulares. Cosas que son un poco extrañas, necesitan hacer algunas cosas raras. Lo que quiero saber es que decir esta imagen, quiero moverla a un lado. Puedes ver esta imagen no es hijo de nuestra grilla aquí. Como ves, es como si estuviera la grilla, la ensayada y baja un nivel. Entonces hay diblock aquí está el niño las cosas dentro del niño o los nietos que estoy haciendo cualquier cosa. No existe tal cosa como que un nieto haya hecho que ese upcase pareciera correcto. Bien, pero no hay como diseños adicionales para esto. Entonces es una cosa a tener en cuenta y volveremos al doble para allá porque estamos un poco cruzando y porque les gusta, pero quiero que esto se mueva por la derecha. Esto es bastante pequeño y necesito que esté a la derecha. ¿Pongo una rejilla dentro de ella y voy ahí mismo? Sería ridículo. Podrías hacerlo. Pero es mucho más fácil usar flexbox. Bien, entonces voy a elegir este diblock. Olvida que es parte de todo el niño. Es solo cerrarlo. Ignorar no tiene por qué serlo. Pero digamos ahora voy a flex box. Flexbox tiene muchas de estas opciones pero no tuvo que crear como Mike grid masivo. Y puedo decir que en realidad está apilado verticalmente, lo cual es increíble. De vuelta a donde estábamos. Siempre va por defecto a horizontal, que nunca es como yo lo quiero. Y se puede decir en realidad lo quiero todo a la derecha. Ahora que hemos combinado grid y flex, estoy agitando los brazos porque eso se sintió bien. Es complicado describir la cuadrícula frente a Flexbox y dónde usarla. Porque muchas veces vas a usar una combinación del 21 o el otro, bien, Nunca es un poco de gente como Mac o PC, tienes que comprometerte. Voy a hacer frente a mí porque me gusta, funciona muy bien. Es rápido, súper caro, pero me gusta. También puedo estar en una PC. Bien. Tengo que odiar a PCS. Ese es mi eso es parte del contrato que firmas con un Mac pero con flexbox y grid, Hay mucho como, Oh, yo solo uso flexbox o puedes usar grid. Hay una mezcla que puedes usar. Solo hay ventajas y solo hay pros y contras para ambos. Lo que voy a hacer ahora es que voy a despejar mi grilla solo para enfocarme un poco más en flex porque no queremos mezclarlos. Es entender por separado. Y luego en el siguiente video, cuando hagamos algunos ejemplos más, los mezclaremos de nuevo. Entonces tengo este contenedor y voy a agregarle un div. Bien, entonces un grab my div bloque por bloque se expandirá para llenar el espacio. Y como, no quiero que llene el espacio. Quiero que sea voy a darle un nombre. Voy a llamar a esto mi tarjeta uno. ¿Bien? Y voy a decir que eres tamaño del 33%, 33% del contenedor. Puedes verlo ahí, YZ tan pequeño tú, bien, ya sabes, porque hay necesidades de una altura mínima, voy a poner altura mínima de 500, demasiado grande, 300. Bien, entonces le voy a dar un color de fondo para que podamos verlo. Golpear en flexbox. Confía en mí, elige un color. Marge ha pasado demasiado tiempo escogiendo un color y es un color horrible. Bien, entonces tenemos una tarjeta, tiene una altura mínima, es 33 por ciento porque sería genial si pudiera ir a copiar. En realidad, primero pongamos algunas cosas en ella. Entonces vamos a agregar golpeando un, golpeando, voy a ir a una imagen por encima de mi bateo, voy a elegir una imagen. Tengo uno que acabo de cargar del tutorial anterior es que puedes agarrarlo, lo que quieras. Solo quiero agregar esto solo para que se vea bien. Bien, entonces tenemos una imagen, yo tengo esta. Intentemos reconstruir esa cuadrícula usando Flexbox y queremos ver algunas de las limitaciones. Es bueno verlo porque te ayudará a saber por eso usarías grid sobre Flexbox. Flexbox es bueno con esta tarjeta. Quiero 12 de ellos y por defecto, bien, mi tarjeta, que es una etiqueta div, está puesta para bloquear y nos gusta que solo lo haría inline. Hagamos redes de bloque en línea, peguemos, peguemos, peguemos otra. Y eso podría ser lo que quieres. Se puede agregar algo de espaciado alrededor de él que funcionaría. Ahora bien, ¿por qué en la tierra usaría flexbox? Porque tiene muchas características adicionales geniales. Voy a pinchar sobre él. Pero tenemos todo este tipo de cosas de alineación. Podemos justificarlo. Todo es muy genial. Sin embargo, vamos a deshacer eso. Porque como grid, se lo haces al padre. Entonces lo voy a hacer es darle la vuelta a bloquear. Y no quiero hacérselo a estos artículos individuales. Quiero ponerlo en un contenedor o en un envoltorio y luego convertirlo en flexbox. Y todos estos tipos se convierten en niños podría ser mis tarjetas. Entonces voy a agregar un bloque div. Se lo podría hacer al contenedor? Yo totalmente podría. Vamos a hacer su contenedor. Entonces digamos contenedor es, Flexbox sostendrá horizontal, vertical. Así que volvimos a donde estábamos. Ahora bien, teníamos, qué tenemos 33%. Hagámoslo un poco más pequeño. Entonces mi tarjeta tiene un estilo que dice que eres 33 por ciento. Hagámoslo 25 para Google's y hagámoslo un poco más grande. Bien, pero espaciado, puedo empezar a hacer porcentajes para el espaciado, bien, pero se vuelve complicado. Así que como antes podríamos usar bloque en línea y solo decir agregar un poco de espaciado. Pero aquí es donde Flexbox se pone bueno. Se puede decir en realidad el, en realidad quiero cambiar el espaciado y voy a hacerlo no al niño, sino al padre. Y yo podría decir, Hola, todos aquí, me gustaría que justificaran cómo se ve este espacio entre ellos. Trabajo hecho, en lugar de tratar de calcular y nuestro espaciado. Lo bueno de esto es que cuando llegas a este tamaño, todavía les queda espacio. Bien, entonces es agradable y receptivo. Entonces Flexbox, si solo vas a hacer eso, bien, podría ser suficiente. Bien, entonces estas tarjetas podrían ser bastante grandes. Entonces se podría decir que en realidad son 33.3%. Lo llenan todo en su mayoría. Bien. Y se puede decir En realidad aunque, me gustaría volver con el padre y decir justificarlos a todos, pero vamos a poner un poco de brecha ahí. Pero tengo diez pixeles. Flexbox gana, pero nos acercamos a donde estaba funcionando la grilla. Bien, entonces aquí es donde hay mucha confusión como ¿ cuál debo usar? Si tan solo quisieras una columna de estas pequeñas tarjetas aquí, no importaría. Flexbox o rejilla. Muchas de estas cosas son las mismas, así que no importa. Mi vicio recuerdo rejilla primero, uso flexbox. A continuación, si no funciona con Flexbox y caja fija es un poco de dolor en el pero si hay que tener cuatro de estos, si voy copy paste para ellos, trata de exprimirlos en una línea. Ahí es donde puedo decir rap de padres. Y aquí es donde todo sale terriblemente mal. Y me resulta muy complicado conseguir que las cosas alineen K, pegar otra en. Podemos trabajar en esto y hacer que estos se alineen y en su mayoría podemos conseguir que sean perfectos. Y el problema ocurre con el PAD. Solo hay manera más fácil de hacer cuadrículas. Vimos lo fácil que era todos estos tipos en una grilla a tu manera. Pero si es solo una línea de ellos, flex Flexbox y Grid, lo mismo. Nos sería útil Flexbox entonces sobre una cuadrícula aquí sería para desigual serían tarjetas desiguales o cualquier cosa. Bien, vamos a hacer algo como una cosa con aspecto de mosaico. Entonces si recuerdas, cuadrículas, bueno, siempre y cuando estén bastante estructuradas, mientras que esto, si voy tú, este topo y tú, o incluso más grande, bien, y tú bastante pequeño. El más pequeño, esta partida aquí en este caso particular es minúscula. Este es más largo a poco. Podemos con flexbox, metemos en el código, dijimos Estás 33 por ciento, bien, solo para darle algo de espaciado comprado porque ahora hemos agregado Flexbox, puedo decir en pero opcional, Voy a hacer clic, Deshazte de eso y mira eso. Será el tamaño que tenga que ser. ¿Tiene que ser pequeña o grande o pequeña? Entonces puedo decidir con el padre, puedo hacer cosas como, ¿qué hace qué hace? ¿Acaba de apilar todos? Oh, eso es lindo. Grid no puede hacer ese tipo de Caín. Pero hay que ser muy explícito. Hay que decir que la columna a es de 0.5 fracciones, mientras que esta, puede vincular el contenido, decidir qué tan grande es. Entonces flexbox, súper flexible, un poco más complicado de entender. Cuadrículas, súper rígidas, pero geniales porque muchas cosas en los sitios web son un poco paso y repiten rigidez. Vamos a enloquecer con el contenedor Flexbox. Podemos decir que todos los niños están alineados al mismo tiempo lugar de la línea superior a lo largo del tramo inferior para encajar la línea a lo largo de la parte superior en el medio de su contenedor a la derecha. Muchas de estas cosas también están en la cuadrícula, pero todas están ocupando sus propias celdas, las separan, las empujan hacia los bordes para envolverlas. Bien, así que eso es una especie de descripción general de grid versus Flexbox. Vamos a entrar en algunos ejemplos más en el siguiente video, realidad solo haremos algunas cosas y veremos dónde terminamos. 50. Diseño de caja flexible con ejemplos en Webflow: Hola a todos. Este video te mostraremos algunos, nosotros, te mostraré algunos ejemplos. Y juntos entenderemos un poco más el diseño de flexbox. Entonces pasaremos por algunos buenos casos de uso como este de aquí, la navegación, bien, todo está justificado. Entonces cosas a la izquierda, estas cosas a la derecha, puedo agregar y quitar cosas. Aquí. La alineación es muy buena para Flexbox también porque es sección y justo en el medio aquí, tengo este Lovely bit Eso no es usar margen como lo hemos hecho antes, solo quiere estar en el medio. Y otro ejemplo aquí donde obtenemos estas dos opciones case stack junto a nuestra imagen y lo haremos con Flexbox. Bien, no es hacer cosas. Bien, así que comencemos con la navegación. Se construyó esta navegación aquí en la parte superior que tiene estas cosas en el interior. Es un buen uso de Flexbox. Y lo voy a hacer de forma aislada. Entonces no lo estoy haciendo en nuestro proyecto principal, solo lo estoy haciendo en un proyecto vacío solo para que podamos trabajar en Flexbox por su cuenta. Entonces un contenedor, a, usando un en el teclado, puso en un bloque div dentro. Aviso poner una sección dentro de ella, bien, porque va a ser la sección de navegación, lado de la sección de mi contenedor llamado Sección nav. Voy a agregar un par de cosas dentro de ella, como una a, voy a agregar nuestro logo. Voy a agregar una imagen. Voy a elegir uno de nuestros expedientes de ejercicios. Hay uno que se llama patrocinador. Bien, mientras que si patrocinan uno, solo estoy usando esto como ejemplo. Puedes hacerlo un poco más pequeño y agregar un botón, un botón, apretarlo ahí. Mi sección nav se está expandiendo para encajar las cosas dentro de ella. Quiero ponerle una altura mínima. Sabemos todo sobre esa sección nav. Voy a poner una talla, voy a poner una altura mínima. Todos los ciento 50. No, 100. Eso va a hacer. Ahora. Quiero que vaya al centro, lo cual es complicado. Podría usar márgenes. Bien, y eso está bien. Podría trabajar. Hay un montón de formas de hacer lo mismo es, supongo que uno de los puntos de esta sección de layout, pero vamos a usar flexbox. Entonces una cosa genial de flexbox es, ¿se lo hago a los niños o le hago al envoltorio, al exterior, pero eso está bien. Lo hacemos a la parte externa de los padres, a estos chicos, te decimos Flexbox trabajo hecho. Uno de los valores por defecto es horizontal, que es lo que quiero, no vertical u horizontal. Pero puedes ver aquí el valor por defecto también es stretch. Quiero que sea centro. Adelante y justifica. Mira eso. Hay alineación izquierda, centrada, línea derecha. Pero mira esa. Bueno, a quien exactamente lo que yo quería. Bien. Sea lo que sea que esté rondando por encima de él, espaciado entre las cajas va a poner uniformemente el espacio entre Flexbox, súper simple en esta situación. Bien, es exactamente lo que quería hacer por la facilidad de esta alineación y justificación. Vamos un poco más allá. Quiero agregar otro botón, copiar y pegar. Bien, entonces es distribuirlos de manera uniforme, lo cual es genial. Entonces ninguno de estos otros va a funcionar para nosotros. Entonces lo que podemos hacer es que podemos empujar un poco más a Flexbox. Estos dos, si los envolvemos en su propia etiqueta div, ¿de acuerdo? Eso significará que hay un logo y una etiqueta div. Por lo que todavía los separarán. ¿Bien? El hecho de que haya dos cosas dentro de ella no importa. Simplemente mira al nivel superior. Parece que hay un logo y una etiqueta div y los separaremos. Entonces eso tiene un poco de sentido. Entonces diblock, digo div tag, es de HTML land, lo llaman etiqueta div. Lo llaman bloque aquí en Webflow, lo cual es exacto. Es sólo otra forma de llamarlo. Te voy a poner ahí y a ti dentro de esa cuadra. Entonces, ¿qué acaba de pasar? Bien, tengo una sección y solo hay dos cosas dentro de ella. Bien. Entonces dividiendo uno a la izquierda, uno a la derecha, dentro del dibloque, están pasando dos cosas, pero luego vas a arreglarlo. ¿Bien? Y obviamente puedo pasar y agregar tantos botones como me guste porque está todo en ese pequeño envoltorio, ese diblock y está empujando hacia un lado. Ahora otra cosa, otro nivel en el que podría entrar, podría agregar algo de relleno. Podría crear un texto de botón. Podría ir botón de navegación y agregar algunos márgenes. Bien, ahí vamos a espaciarlos. Totalmente bien. Bien. Pero estamos explorando Flexbox. Entonces lo que podría hacer es en este momento, bien, tenemos nuestro envoltorio, el padre Eso tiene Flexbox aplicado. Y esas dos cosas hay dos niños dentro de ella. Yo haciendo estas cosas. Bueno podemos hacer es decir, Hey niño, que se llama terriblemente llamado bloque DIV. Vamos a darle un nombre propio. Llamemos a este tiempo Nav. Botones. Ahora botón rápido, solo para que quede claro por mí más adelante, lo que puedo decir es que puedo decir, conozco a su hijo. Te puedo ver ahí. Puedes hacer cosas no hace lo suficiente. Quiero la brecha. Bien. Y eso está bien. Bien. Lo que puedo hacer es decir, conozco a tu hijo, pero ahora también vas a ser cosa de padres o abuelos. Bien. Entonces ahora eres padre, y puedo decir que la gente dentro de ti, tus hijos van a tener un hueco de columnas o filas. Hagamos columnas. Y vamos. ¿Podría simplemente poner margen en el botón? Totalmente bueno. Si yo, podría construir esto en una grilla. Yo totalmente podría. Podría ir a la parrilla después de mi contenedor, después de mi en el contenedor, pero después de esto, el problema va a ser meterlo ahí. Pero necesito 123, puedo hacer eso. Entonces voy a agarrar esto. Voy a tener tres columnas. Una fila. Voy a hacer esa de ese tipo de tamaño para el logo. En realidad, voy a hacer estos dos y hacer eso grande. Aquí es donde te encuentras con problemas que te gustaría, bien, ¿qué tan grande tiene este 1ab? Pero como es tan rígido, Mike toma enlaces y estos botones del mismo tamaño. Entonces, si no lo fueran, había exactamente lo mismo que nunca lo son, podrías usar la cuadrícula porque puedes hacer que estos tengan podrías usar la cuadrícula porque puedes el tamaño correcto y solo meter los botones y sería genial y puedes ajustar el acolchado. Bien, genial. Pero eso es problemático. Si tienes tu segundo botón tiene texto muy largo, número diez. Para que veas cómo los está separando. Y si tengo otro que ya tiene Flexbox al rescate, formas desiguales, flexibilidad Flexbox. Bien, hagamos la caja de héroes. Entonces dentro de mi contenedor principal, quiero otra sección. Así que voy a ir a una, voy a ir a la sección y voy a tratar conseguirlo en el lugar correcto. Se ha ido dentro. Ahí vamos. Entonces está debajo de esta va a ser sección fría aquí. Y lo que me gustaría hacer al principio, entonces sólo voy a colorearlo. Voy a hacer que el Alt u Opción haga clic en cualquiera de los galones. Voy a decir que vas a ser de color oscuro. Genial. Toda la tipografía aquí va a ser blanca y va a ser fuente aleatoria. ¿Bien? Y voy a hacer una altura. Entonces el tamaño va a ser no una altura, sino una altura mínima de 500 píxeles. Ahora bien, si quiero agregar un héroe, perdón golpeando en un párrafo y un botón como el principio. Si consigo un ellos no funcionaron. Lo que ves por aquí, eso pasa, le pasa a lo mejor, vuelve adentro. En realidad haga click hacia fuera. Ahora dale un y di, quiero, quiero un poco de texto de párrafo. Y cuando un botón, Bien, quiero este párrafo textos aquí dentro va a ser mi héroe p y él va a ser un tamaño. Quiero que sea mínima. En realidad, vamos a usar un ancho máximo de 600 píxeles. No se estira hacia el exterior. Y los quiero a todos centrados. Podría pasar y decir, bien, topografía. Todo dentro de esta sección de héroe es topografía Alinear Centro. Y eso funciona un poco como que. Bien. Pero al rescate como Flexbox, flexbox va a decir, hombre, eso se atreve, no es bueno. En fin, el padre externo, bien. Voy a decir que el layout es flexbox, que no funciona. Va a ser vertical. ¿Quiero que esto se estire todo el camino? Sólo tienes que ir en el centro. Oye, míranos y además no quieres equivocarte con top. Esto va a entrar en nuestro Flexbox. Parte inferior estirada, espaciado uniforme. Hay mucha flexibilidad con Flexbox. Y obviamente una grilla aquí no sería útil. Hay otras formas de hacerlo. Hay formas de hacer cosas como los márgenes de auto y hay otras formas de hacerlo. Podrías tropezarte en tus aventuras. Y puede ser igual de correcto como éste. P héroe necesita estar centrado. Aquí vamos. Y tiene que no ser la fuente gigante. Vamos por el sentido público. Puede que no tengas arenas públicas. Podemos usar un montón de buenos, bien, así que algunos buenos ejemplos de usar Flexbox. Hagamos más. Digamos que queremos esta imagen a la izquierda y estas dos cosas poco apiladas una al lado de la otra. Grid funcionaría totalmente lo haría, pero solo vamos a flexbox. Bien, entonces lo que vamos a hacer es ¿cómo lo harías tú? Siéntate ahí, haz una pausa. Tener un pequeño juego de memoria justo como pensar desafío de cómo lo haces, haz que funcione. Bien, antes que nada, vamos a necesitar un div para rodear todas estas cosas. Bien, entonces voy a ir a un bloque y a si, ponerlo ahí en alguna parte, imagen en orina. Y decía que solo queremos esto. Queremos que eso quede un poco pegado al lado. Todo lo que necesitamos hacer eso, ir al padre, al envoltorio por fuera y decir que vas a Flexbox te equivocadamente. Bien. Vertical. Horizontal es una especie de lo que quiero y quiero que se alinee al centro. Ahora, simplemente me pasó a tener mi calefacción frente a mi imagen por accidente. Y esto me recuerda, puedes hacer algunas cosas raras donde con Flexbox decir puedes cambiar la dirección para que puedas hacer, hacer la imagen primero en eso primero, luego todo está en opuestos. No sé por qué querrías hacer eso. Pero puedes, pongámoslos de la manera correcta y hagamos que se alineen hacia el lado derecho. Así que recuerda de nuevo al padre, ve a alinear a la izquierda. Y lo genial de flexbox son los huecos entre las columnas. Voy a usar mi arriba sosteniendo Shift Up Arrow es, puedes decidir ahí. Fresco. Entonces eso funciona. Digamos que quiero agregar el botón debajo de aquí. ¿Qué hacemos? Así es. Si intento editar, qué va a pasar, entra ahí. Es un poco esparcirlos a todos. Entonces necesito un div envuelto alrededor de todos estos. Entonces un diblock, tíralo ahí y allá, tú y cerca pierdes el pedido por aquí. Así que avise de inmediato. Entonces tengo este bloque div, es un niño y así es esta imagen. Aquí sólo hay dos cosas. Entonces ahora hace que sea fácil ir. Todos padres, todos se alinean a la izquierda para que encaje ahí. Ahora está centrado ¿verdad? Pero puedes ver arriba, abajo, hay todo este espacio en el medio. Entonces, descubramos qué está causando esa gran brecha. Es un buen tipo de que estábamos viendo un sitio que hicimos hace un tiempo y no estamos seguros de dónde viene todo el estilo y ¿por qué hay una gran brecha aquí? Así que recuerda esa visión de rayos X, bien, está escondida aquí. Podemos decir que vas al modo de rayos X, haces clic en off, arrancas desde el fondo, y simplemente cursor alrededor y puedes empezar a ver de dónde viene todo ese espaciado. Entonces hay un pedazo de espacio y viniendo de botón, héroe y algunos de algo llamado H2. Es una etiqueta H2 con un stock o calentamiento cinco. Así que vamos a quitárselos. Podemos hacerlo mientras estén en modo de rayos X. Así que haz clic en esto y di botón héroe. Entonces es solo el botón para una página de Hara porque la nombramos amablemente. No estamos usando en ningún otro lugar. Ojalá pueda aclarar esto. Voy a ir Option o Alt en una PC. Claro eso. ¿Necesito el lado derecho? Tampoco necesito eso ahora va a pagar eso. Ahora. Se ve mejor. A lo mejor me gustaría aclarar éste también. Vamos a hacer click sobre esto. Está obteniendo su estilo de sumar. Es un H2 las etiquetas tienen una mirada. Entonces es H2 por alguna razón. Debería ser un h5, lo que aclara nuestro problema. Porque si es H2 y voy a limpiar la etiqueta H2. He usado H2 un montón de veces. Creo que eso es un H3, eso es un H2. Acabo de etiquetar mal esto antes en el curso. Es posible que te hayas dado cuenta antes en el curso. Así que en realidad debería convertirlo en un H5 y mis problemas sobrevivieron. Bien, así que voy a apagar la vista de rayos X y buscar otro buen uso del flexbox porque tiene aún más, digamos el espaciado aquí, puedo ir a mi cuadra. En realidad, no voy a hacer un buen convertirlo en otro flexbox y jugar con el espacio entre, pero se ve bien. Y ya tengo esta clase aplicar botón frío aquí con el que sólo podría ir. Entonces no es todo. No tienes que seguir bajando por la madriguera del conejo de más Flexbox está encima de Flexbox es que no podrías hacer nada bien o mal para eso. Hagamos otra. Bien, terminemos con éste. Lo hicimos antes. ¿Recuerdas? Yo sólo lo hago flex. Megan Flexbox, empújala hacia la derecha y luego hablaré de ello. Es momento de hablar de ello. Bien, vamos a deconstruir lo que hicimos. Entonces había un contenedor dentro de ese contenedor era una sección de héroe. Dentro de esa sección, ponemos una rejilla, un poco ponemos una en un lado, una en la otra. Perfecto. Y luego para tener estas dos cosas están presionando el botón Enter, necesitan estar envueltos en un div, bien, lo contrario terminan saltando a la siguiente columna de la cuadrícula. Entonces lo hicimos. Y lo que hicimos es que dijimos: Oye, solo agarramos el div, hazlo, bueno, empezó así , pero ese era nuestro problema. Lo conseguimos para ir al lado derecho en cuanto a la alineación. Pero se puede ver al héroe, el cuadro H1 a su alrededor es para alinear a la izquierda y no pudimos hacerlo pasar al otro lado, el botón se pegó ahí y así es esto. Entonces lo que hice fue que dije diblock, por favor solo sean películas, estar alineados a la derecha. Y luego agito las manos y no preguntamos por qué hacerlo después. Pero ahora entiendes contenedor súper fácil, los padres hacen escamas a la derecha. Días Felices. También aprendimos antes en este video aunque, tuvimos que empujar esta cosa en el centro. Lo arreglamos con este diciendo, héroe uno tiene un montón de margen y funciona, no tiene nada de malo. Bien, así que hagámoslo de una mejor manera o de otra manera diferente. Solo para flexionar nuestras habilidades de películas. Entonces, ¿cómo despejamos Así es, opción Alt, dale un click a eso? Bien, entonces ahora está pegada en la parte superior. ¿Cómo puedo llegar a esto en, aquí es donde vas tú. Bien, haz clic en el dibloque, y ahí está esto en uno. Boom, boom, boom, boom. Nos topamos con este problema antes. Me encuentro con todos los problemas todo el tiempo y me confundo mucho. Yo soy como, ¿cómo llegas al fondo? Es porque este dibloque es, su altura, está ajustado a nada no ha conseguido ninguna altura. Entonces simplemente se envuelve un poco las alturas en realidad no viniendo de este dibloque, viene de arriba arriba en la lista, bastante arriba, no de la grilla. La rejilla no te está dando la altura. Es la sección de héroes. Bien. Comprobemos en realidad, ¿podemos verificar con la visión de rayos X? No estoy seguro de si recoge esto. Echemos un vistazo. ¿Esto hace eso? No, no lo recoge en esta. Bien. Mala visión de rayos X. Trabajé mi camino hasta que averiguaré cuál está dando la altura. Bien, y voy a quitarlo. Bueno, en realidad voy a cortarlo. Siéntate eso a la nada. Bien, recuerda Alt u Opción clic. Y luego voy a darle la altura o la altura mínima al diblock, entonces sabe lo grande que es ser. Así que vamos a la altura mínima, péguela en este extremo porque la tenemos en el centro. Sabe entrar al centro o al fondo. Bueno al mismo tiempo o esparcirlo uniformemente lo espació. Bien, entonces el ego, volvimos, vivimos lo que hicimos y lo mejoramos. No es mejor. Es lo mismo. Está en el mismo nicho de posición, solo una forma diferente de hacerlo. Bien. No sé cómo te sientes. Voy a seguir adelante con el flexor ahora, flex skills. Siento que esa es mi nueva mordaza el resto del curso, Vamos a flexionar, flexionar habilidades. Y siento que hemos hecho algunos pequeños proyectos nos encontramos con algunos problemas, pero siento que tenemos algunos ejemplos en nuestro haber. Pasemos al siguiente video. Aprendamos algunas cosas nuevas. 51. Tarjetas de altura iguales con botón en la parte inferior en Webflow: Hola a todos. En este video vamos a conseguir que este botón esté en la parte inferior de todas estas diferentes tarjetas. Si vas a volver del futuro y ya me has visto como ¿qué fue otra vez? Te aseguras de que el padre Rapa esté configurado en un diseño de flex y luego esto se establece en el suyo es un niño. Bien. Bueno, ella está puesta en un margen y el margen superior está configurado en auto. Empujará su camino hacia abajo hasta la caja principal. Bien, vamos a hacer todo esto. Va a ser divertido. Bien, vamos a empezar con un problema. Y yo estaba como, ¿dónde se ha ido mi botón? Un poco a la mitad funciona. Puedo manejarlo un poco. Y entonces aquí arriba estaba como, Hola, solicita control de diseño, estás diseñando y otra pestaña. Buen trabajo, Dan. Así que lo acabo de abrir dos veces. Normalmente no lo tengo abierto dos veces porque no los necesito. Pero cuando estoy haciendo estos tutoriales, lo hago. Pero oye, podrías encontrarte con ese problema. Así que vamos a tener uno de ellos abierto y vamos a ponernos en marcha. Bien, entonces vamos a estar agregando este trozo abajo a la derecha. Déjame agarrar mi archivo Figma, juntarlo ahí arriba para que pueda verlo. Entonces construir esto primero es, es que necesito ya sea un flexbox o grid. Grid solo va a ser mucho más fácil. Entonces ya configuré mi fondo que va a los bordes de este contenedor de aquí. Le di un nombre y dentro de ella, voy a poner una grilla. Así que voy a ir, voy a usar un método ligeramente diferente en lugar esconderlo y arrastrarlo. Bien, voy a hacer eso. Solo haznos sentir cómodos usando todas las formas. Va a ser una mercancía. Y voy a ir a grilla. ¿Bien? Y sólo voy a meterme porque es el único disponible. Ahí vamos. Entonces tenemos una grilla y ahora quiero que sea, voy a hacer tres al otro lado. Voy a borrar uno de ellos. En realidad no ir a no importa. Los agrega a medida que avanzas porque es orden propio. Bien, así que tengo nuestras tallas. Ahora lo que quiero hacer es construir mi pequeña tarjeta dentro. Entonces voy a hacer clic en Listo. Bien, y aquí dentro, no voy a hacer doble clic en él. Voy a arrastrar en un contenedor y un bonito contenedor genérico. Tengo esta seleccionada. Voy a ir al Comando D y tecleando div, div, div block. Voy a darle un nombre a mi bloque, solo me van a llamar bacalao. El bacalao es un buen nombre genérico para mi tarjeta de precios y nuestros estuches, estas tarjetas para miniaturas para nuestro portafolio pueden ser tarjetas que muestran diferentes artículos en tu tienda. Bien. Entonces tarjeta, miniatura. Ahora no voy a pasar demasiado tiempo. Supongo que quería mostrarte cómo conseguir la cosa del botón por la parte inferior. No quiero darle mucho estilo. Sólo vamos a tirar algunas cosas básicas. Entonces Comando E dentro de este div, voy a poner una imagen. Y voy a dejar eso por el momento. Yo sólo quiero tirar , vamos a tirar un libro de texto. Se necesita bloque es simplemente genérico. Texto. Realmente no, no es párrafo, es solo un poco ser búho. Y este es nuestro proyecto de diseño UX. Bien, dentro de ese div también voy a decir Comando E y voy a poner en un bateo. Bien, voy a asegurarme de que sea una calefacción para. Y entonces, ¿qué más no podemos meter mi botón? Botón Comando D. Y eso es lo suficientemente bueno. Lo único que probablemente he necesitado es mi imagen para que esto funcione. Voy a ir a mi panel de activos, y voy a agarrar estos también. Escojo algunos genéricos que todos podamos usar. Así que está en cartera y miniatura uno a seis. Así que ve a buscar esos y simplemente volcarlos en tu página. Voy a terminar en el panel de Activos va a vencer a tus propias cosas de cartera. Y comenzaremos con, en realidad, puedo borrar mi imagen y simplemente arrastrarla directamente desde ahí. Seguro que va en la etiqueta div. Hazlo por aquí. Aquí vamos. Bien, tan genial. Tengo una imagen. No se necesita algo de calefacción y algún botón. No vayamos demasiado lejos. Pongamos, aunque le voy a poner miniatura de tarjeta, vamos a ponerle un color de fondo. Entró pero Alt u Opción haga clic en esos galones. Voy a ir a mi pizarra. Voy a darle estilo a la biografía del doblaje va a ser lo suficientemente amplia. Lo que realmente queremos hacer es tener algunos de estos con encabezados de diferentes tamaños. Y queremos el botón abajo abajo a la derecha. Entonces voy a agarrar algunos textos. Sólo cópielo y pegarlo de esta cosa. Copiar y pegar. Voy a hacerlo, lo he copiado por aquí y lo pego. Así que tengo algunas diferentes. Y ahora voy a hacer zoom y simplemente cambiar a diferentes encabezados y cambiar estas imágenes. Bien, ignorando los márgenes alrededor del exterior, voy a estilo al final de este video, solo quiero llevarte a un punto donde quiero el botón tanto por aquí como quiero a todos en el fondo porque por el momento, debido a que estos encabezamientos son diferentes, este no está del todo en la parte inferior. Entonces es esto es un esto es un trabajo llamado Flexbox. Así que ya hemos hecho la grilla, es genial. Decir consistente. Pero queremos hacer algunas cosas graciosas. Entonces vamos a usar flexbox. Así que tengo mi miniatura de tarjeta que está envolviendo todo. Soy un niño de la grilla. Bien. Vamos a ignorar eso porque lo que vamos a hacer es ir a Layout y decir, en realidad ahora eres el padre todo Flexbox y necesita ser vertical. Y tiene que ser no estirando en el momento en que por defecto se estira. Bien, genial. Entonces, para moverlo a la derecha, lo hicimos antes. Así que recuerda, el padre hace tipo de cosas genéricas, pero el niño puede ser rebelde y decir que eres charter flex y tienes una alineación de derecho. Aquí vamos. Lo siguiente que queremos hacer es que tenemos que movernos. ¿Por qué no se traslada esa? ¿Por qué ese y no este? Porque este consiguió una clase ya que yo la estaba cambiando. Esta no tiene esa clase aplicada. Entonces voy a llamarlo tarjeta de botón. Bien, y voy a jugarlo aquí usando mis atajos súper dulces que aprendimos antes, donde antes en Command y Enter. Ya ves que simplemente saltó a los estilos de aquí. Y puedo escribir botón. Estoy usando mis teclas de flecha para bajar y aplicarlo a esa. Lo mismo con este. Comando o Control Enter. Y vamos a conseguir una tarjeta, lo que queramos botón. Probablemente sea bueno, ¿no? Todos tienen aplicada la clase. Entonces estamos haciendo lo mismo, esa línea roja. ¿Cómo conseguimos y empujamos en el fondo? En lo grande es con él seleccionado, puedes ir a tu espaciado. Y si estableces el margen en auto, auto solo significa llenar. El intelecto ya no puede llenar. Bien. Es como que se expande y empuja hasta que ya no puede ir más. Entonces, en lugar de darle un tamaño real, dale un margen. Esto solo funciona cuando has establecido el padre en Flexbox y el hijo también, margin auto. Ese es el gran truco para esto. Ahora entremos y vamos a causar más problemas, pero aprende más. Hagámoslo. Entonces quiero esto. También. Realmente no lo he estado haciendo de esta manera. Veamos lo pequeño, vamos a hacer esto, vamos a tratar de hacer esto un poco más. En lugar de usar el navegador, vamos a usar la miniatura de la tarjeta. Lo que quiero hacer es que quiero rellenar alrededor del par de cosas. Quiero que sea una altura específica o una altura mínima, así que son todas iguales. Entonces hay miniatura de tarjeta va a tener un tamaño de, no voy a usar la altura. Recuerda que podemos usar altura mínima de 300. Terrible suposición. Voy a seguir subiendo hasta que encuentre algo. Voy a dejar espacio para un tercio, un tercer trozo de texto. Y probablemente voy a bajar este espaciado, pero fui a una altura mínima. Todos estos tipos bajan para el, bajan para el paseo también, lo cual es genial. Entonces Nixon va a hacer va a destrozar totalmente lo que acabamos de hacer. Porque lo que me gustaría hacer es que quiero poner relleno por fuera ahora podría poner una clase alrededor de eso, clase alrededor de eso, pero una clase alrededor de eso. Pero obviamente, es mejor ponerlo alrededor del envoltorio. El problema es, es la imagen, quiero ir hasta el borde. Diseño. imagen va hasta el borde, pero solo este trozo. Bien, así que podría ir bacalao, espaciado de miniaturas, mantener presionado el turno y no lo siento, no relleno de margen. Bien. Yo podría hacer esto si eso es lo que quisiéramos. No es lo que quería. Porque lo que quiero es sólo espaciar aquí abajo. Entonces voy a crear un pequeño div dentro de esto, bien, otro div y poner toda esta basura dentro de ella y hacerlo. El problema es que lo he hecho bien, no el problema en todo el Flexbox que hice en este envoltorio exterior ya no lo necesita. Puedo dejarla ahí. Dejémoslo ahí y te lo mostraré cuando lo apaguemos, no hace nada. Entonces voy a agarrar una etiqueta div. Voy a hacer click aquí. Voy a ir al Comando D e intentaré escribir div alrededor de mi micrófono y voy, bien, voy a tirarlo todo. Suerte entrar ahí. Y luego entraremos. Y ahí fuimos. Ahora sólo lo he hecho por éste. Voy a tener que repetirlo para todos estos otros. Y lo hubiera hecho desde el principio, pero no quería confundirlo demasiado. Así que vamos a confundirnos ahora porque esto va a ser raro. Porque, bueno, solo intentaré que te pesen juntos. Entonces este de aquí, voy a dar un nombre. Voy a llamar a este mi bacalao bajo Rapa ahí cuando esté bien. Y me gustaría darle un poco de relleno, mantener pulsado, Shift, un efecto de sonido drone. Bien, y ahí vamos. Entonces eso dejó de funcionar. Bien, todavía tiene esa clase aplicada. Todavía consiguió auto por la parte superior allá. Bien, pero no está haciendo su trabajo. Bueno, un poco lo es. En realidad vamos a repetir esto en todos ellos para que podamos, te mostrará la rareza más fácil. Así que voy a copiar y pegar este div en todos ellos. Voy a hacer que Jason simplemente pase y me acelere. Bien. Entonces, cuando baje el envoltorio de cartas, voy a moverlo y cambiar el rumbo. Entonces vamos a exceso de velocidad. Bien, entonces el primer paso, no se está pegando al fondo. Bien. ¿Cómo lo hicimos? Así es. Agarramos el envoltorio exterior, que se está poniendo un poco y vamos a ordenarlo. Miremos, luzcamos más guapos. Así que mi cuadrícula cortó miniaturas dentro de esas tarjetas, miniaturas es simplemente trabajar en el tronco más bajo. Bien. Y este de aquí, mi bacalao menor rápido tiene que ser hijo de películas ya. Bien. Eso fue solo de esa cosa original que hicimos. Vamos a deshacernos de eso porque no lo necesitamos porque claramente no funciona. Entonces el envoltorio exterior, volvamos a bloquear. Vayamos a ese pequeño envoltorio alrededor de ese trozo inferior, ¿de acuerdo? Y solo di que ahora eres el padre de familia. Y hay que estar vertical. Y recuerda, es un poco genial, como yo asumí que volvería a caer a la izquierda. Pero recuerda que tiene top auto. Y recuerda que está alineado a la derecha. Pero desierto recuerda que se llama teleobjetivo. Dice que sí. Pero esa no parece estar de acuerdo. Tampoco esa. Esa parece que sí, pero es solo la caja más grande. Eso es lo que lo hace aún más grande. Entonces se agarró la miniatura del bacalao, todo el asunto. Vamos a agarrar mi talla. Yo puedo ir Teníamos altura mínima. Vamos a subir a 600. Notarás que ni siquiera trabaja. Entonces, lo que está pasando es este envoltorio de aquí. Dijimos este pequeño envoltorio. Bien. Ahí está la espalda baja de Cadoret. Puedes ver si miras las dimensiones, lo está haciendo a la perfección. Mira este de aquí. Bien, se le ordena hasta el fondo de la misma, pero simplemente no se está haciendo más grande. ¿Puedes ver eso? Está abajo en el fondo de éste, pero no lo es, no tiene idea lo que hacen estas cosas externas. ¿Cómo conseguimos que lo reconozca? Nosotros no. Esto aquí no va a hacer la estatura mínima porque esto sólo puede ver a su padre Rapa. Entonces no tiene sentido hacérselo al abuelo o al muy alto. Entonces mi mínimo de 600 píxeles, voy a borrar sosteniendo Alt u opción. Y va a ser esto, el rapero el que me va a dar mi estatura mínima. Voy a hacerlo en el padre de ellos. Así que vamos a escribir en 500 píxeles. Eso es demasiado para esto, pero funciona. Bien. Voy a sostener Shift y usar mi flecha hacia abajo para conseguirlo así puedo, sí, esa va a ser mi talla. Ahora todo esto puede ser un poco confuso. Supongo que lo que no quiero hacer es solo tener ejercicios, pero todo va bien porque eso también fue un poco rascador de cabeza para mí. Yo estaba como, por qué la rodilla en la parte inferior. Y no fue hasta que tipo de mover el ratón alrededor y vi la pequeña línea azul, a diferencia de que vas, no está haciendo lo que le dije. Bien. Está en el fondo de la caja. puse en sus padres, pero no tiene idea más arriba de la cadena, Qué está pasando. Solo puedes reconocer lo que hay en su tipo de padre como un paso arriba, que ahora es igual de bajo un gato. Así que acabamos de cambiar la altura mínima del envoltorio exterior al interior. Resolvemos el problema. Ahora, en realidad voy a dejar el estilismo. Lo haremos juntos en un video futuro porque creo que ya es suficiente, hecho mucho. Entonces lo pienso ahora es una vez que lo hemos construido, puedo agarrar mi bacalao, miniatura, copiar y pegar por espacio, espacio, espacio, espacio, espacio, espacio. Y podemos tener muchos de estos tipos y simplemente cambiar las imágenes. Bien, lo más importante para recordar es que este hijo de mis padres Flexbox necesita el margen en la parte superior para ser auto y hemos descubierto la caja, el padre en el que está necesita ser lo suficientemente grande entonces puedes empujar hacia abajo hasta el fondo. Bien, adelante al siguiente video. Hay amarga. Hazte más fácil. Se vuelve un poco más fácil. Ahora se vuelve un poquito más difícil, luego se vuelve realmente fácil. Una vez que entiendas la estructura, las cosas pueden tener un poco de éxito. Entonces suceden todas las cosas divertidas y fáciles reales. Te lo prometo. Bien, gracias. Video. 52. Posición absoluta y relativa explicada en Webflow: Hola a todos. Mira lo que tenemos. Tenemos un botón en la esquina superior sobre nuestra imagen. Es exagerado. Esta cosa superpuesta. Es métrica o es posicionamiento absoluto. Mira, muévalo. Es fácil, fácil ish. Déjame saltar y mostrarte cómo hacerlo. Justo primero arriba, voy a agregar un botón, así que dolorido , arrástralo adentro. Voy a ponerlo entre esos títulos solo porque quiero expresar algo del posicionamiento lo que hace, y va a ser útil para eso. Entonces le voy a dar un plus. Voy a esto esto extendiéndose demasiado. Esto es sólo porque es hijo de un Flexbox. Si no has configurado un Flexbox, no tienes que hacer esto, pero yo lo puse a la izquierda y ahora necesito moverlo hacia arriba. En realidad lo que voy a hacer es hacer dos versiones del mismo. Uno usando absoluto, N1, usando relativo. Así que le voy a dar nombres. Este va a ser mi botón. Bien, ya existen, va a ser mi botón más dos de ellos. Pero botón más uno. Y voy a copiarlo y pegarlo por aquí. Consígalo. Agarré todo el asunto y lo copié y pegé. Simplemente copia. Se pega en la misma posición. Ahora, voy a darle a esto una clase diferente. Probablemente ya lo has hecho. Si vas, sólo voy a cambiarle el nombre número dos. Bien. No lo has renombrado. Cambiaste el nombre de todas las clases al número dos. Mira este primero ahora es el número dos. Entonces lo que hay que hacer es deshacer eso y decir realmente vamos a duplicar la clase. O puede eliminar la clase y volver a editar hasta usted. Bien, entonces tenemos dos separados. A éste se le llama uno. Entonces vayamos a este botón en particular. Puedes usar cualquier elemento, texto, una etiqueta div. Se puede posicionar cualquier cosa. Veamos la posición. Va a cerrar todo esto abajo. Posición abierta. El valor predeterminado es estático. ¿Bien? Vamos a ver a pariente. Bien, y luego vamos a hacer clic en mantener y arrastrar algunos de estos. Reloj. Mira, se mueve. Ahora bueno, subiendo y estoy dando clic y arrastrando hacia la derecha. Un poco arrastrando, pasando. Aquí vamos. Lo tenemos arriba en la esquina, subimos como negativo 250 y a través de 256, 265, vamos cerebro. Excelente. Pero ahí dejó un gran agujero. Entonces eso es lo que hace pariente si necesitas dejar su conjunto, son geniales. Nunca lo hago. Lo que quiero hacer es decir que vas a ser absoluto. El primo a pariente. Pero mira lo que pasa por aquí cuando lo vuelvo a absoluto. Mira, cierra un poco la brecha. Y eso es lo que quiero. Quiero subir un poco ahora, por aquí un poco. Aquí vamos. Y tú eres como, Genial. Pero vamos a usar absoluto para todo. Y va a funcionar como si estuviera funcionando totalmente ahora, te encuentras con algún pequeño problema. Entonces déjame explicarte lo que podría pasar. Es que por el momento, veamos este primer botón, este de aquí. Es relativo a sí mismo. Sabe dónde solía estar en el mundo. Por lo que puede llegar hasta 50 y cruzar a 65. Éste sin embargo, éste porque los huecos la cerraban básicamente en la matriz. No sabe dónde solía estar. Entonces lo que hace es que dice que soy relativo al en este caso, el cuerpo, lo que es, en realidad es relativo al siguiente padre. Bien, entonces por el momento, el próximo padre para este tipo es mi envoltorio de cartas inferior. El padre de este es la miniatura cortada. Hay un padre de esto también desea mi grilla Hay mucha apariencia pasando. Lo que hace es que este botón dice, voy a buscar al próximo padre que se siente a pariente. Bien. Ya lo hicimos a un lado. Pero en el momento en que no tengo nada ninguno de estos padres está puesto en pariente, así que va todo el camino de regreso hasta el cuerpo. Y funciona ish. ¿Bien? El problema con ello sin embargo, es, lo es, ¿puedes ver estos números gigantes? ¿Bien? Es como 700.800. Bien. Es porque es relativo al cuerpo. El cuerpo empieza por aquí, así que es una cruz 800.844 y abajo 724. Bien. Y eso está bien. Siempre y cuando no cambies la posición. Digamos que hago esto mucho más pequeño. Vamos a dimensionar mi estatura mínima. Voy a sostener Shift, golpear mi flecha hacia abajo. Tengo mi botón aquí abajo. Bien. Bueno, no. Se está moviendo. Ese tipo era pariente consigo mismo porque esa posición se movió. Se movió. Este tipo. Es pariente de la esquina superior izquierda del cuerpo y sigue haciendo exactamente lo que les dijimos. Bien. Todavía está 800.700 abajo. No importa lo que esté pasando a su alrededor. Bien. Caja tonta. Bien. Entonces lo que podemos hacer es mover un poco lo que fue eso. Y tenía mucho deshacer, deshacer, deshacer, deshacer, deshacer. Aquí vamos. Bien, así que todo lo que tenemos que hacer es sentar a uno de sus padres a algo relativo que se va a mover junto con ellos, que es esta cosa o la miniatura de la tarjeta va a avanzar totalmente. Pero usemos esta envoltura inferior de bacalao. Vamos a sentarlo a pariente y se va a romper. Está bien. Se le ha ido el botón botón. Bien, entonces eso es pariente irrelevante. Mi botón solo puede hacer clic sobre ellos por aquí. Sigue ahí. Él está aquí abajo. Todavía está fijado en 700 por 800. Bien, así que todavía se acuerda de eso. Pero ahora es relativo a esta cosa que mordió ahí. Así que él va cruzando y bajando como tú hiciste en el cuerpo para hacerte la idea. A veces podrías estar fuera de la pantalla. Podría ser como totalmente, ¿Dónde está? Podría estar totalmente como allá. Nunca más lo volverás a ver. El truco es sólo para despejar estos ir claro. Recuerde mantener la opción o Alt, haga clic, haga clic. Se remonta a donde empezaste. Y ahora podemos arrastrarlos a través. Y es pariente de ese padre, que en nuestro caso está muy cerca final se moverá hacia arriba y hacia abajo. Ir a esto que es tangente a 100. Y mira, se le ocurrió porque es pariente de esto, no del cuerpo. Entonces el truco con absoluto es que va a funcionar por un rato hasta que cambies algo y luego no lo hace. Entonces si eso pasa, simplemente te olvidaste decir que eres pariente de algo, algún tipo de padres, algunos, tal vez tengas que envolverlo en una etiqueta div que no haga otra cosa. Entonces sé relativo, bien, así que agarra al padre, hazlos relativos, no hagas otra cosa. Entonces ahora es relativo a mi envoltorio de catálogo. Eso tiene sentido. Una última cosa que podría atraparte, no es por el momento, veces es que falte el botón aquí cuando te posicionas absolutas y los mueves por ahí. Desaparece. Se va, simplemente desaparece. Todos lo fingen en este momento. Él hace esto. A él le gusta, puedo dar click sobre ellos aquí en mi navegador o es que toma botón. Pero no puedo verlo. ¿Dónde está? ¿Está en blanco? Porque en realidad justo detrás de esta imagen y es algo llamado el índice z. Entonces ahí está mi botón por defecto. Bien, si lo aclaro, está bien. Pero a veces podrías estar usando proyecto o plantilla de otra persona y el amor se pierda con el índice z que han dicho imagen aquí va a ser una posición de pariente y yo voy a ser el z-index de uno. ¿Por qué lo hice relativo y absoluto? Porque quiero que guarden este espacio porque si voy absoluto, va un poco complicado y despeja del espacio y salta relativo para volver a tu lugar, sostén tu lugar. Y todo. Han dicho el índice Z a uno. Así puedo ir a mi botón, decir botón. Ahora ustedes van a ser dos, yo gano. Y entonces la imagen podría ir, espera estos tres, ¿de acuerdo? Y puedes batallarlo. A veces si consigues uno de otro, algún diseñador inteligente podría ir o desarrollarse, Oh Dios mío, sólo voy a convertir este 2999999. Y luego giras todo el tiempo yendo golpeando, ¿dónde está? ¿Dónde está golpeando mi botón? Y vas a tres. Podrías estar ahí para siempre. Bien, entonces tienes que ser más inteligente y poner 99999999. Eso se pone complicado. Tratando de saltar a lo alto, quédate en la adolescencia. Porque la próxima persona pobre podría estar tratando de escribir tantos nueves. Eso no hace todas esas cosas, pero te das la idea siempre y cuando el número Z sea mayor. Bien, este de aquí, solo voy a despejar siempre y cuando sea más alto, está bien. Eso es cierto para cualquier cosa. Si encuentras alguna otra parte de tu proyecto con algo deslizándose por debajo, algo así es el índice. Es la altura, solo necesita ser al menos una más alta que la persona. Se está deslizando por debajo. Bien, ¿cómo fue eso? Hay uno complicado. Posicionamiento. Absoluto estaba en mi contorno y luego estaba como si estuviera demasiado caliente. Salgamos de sus ángeles, luego metamos adentro y retrocedamos. Es como, siento que ahora que estamos en parte de este curso que siento que nos estamos manejando. Y probablemente llegues al final de este curso y te vayas. Nos ha enseñado cada uno de estos excepto el puesto. ¿Por qué no hizo esto? Porque es complicado y está destinado a ser Essentials. Es el curso esencial más largo que han hecho. Pero bueno, el diseño web es interesante y hay mucho que entender. Entonces vas posición absoluta, no tan duro o tu cerebro se derritió. Una de esas dos cosas sucedió. Bien, eso es. Te veré en el siguiente video. 53. posición de flujo web pegajosa del pie de la barra de navegación pegajosa no funciona: Hola ustedes, ustedes respaldan este video que vamos a ver, vea este nav. Sí, es un descaro para el nav muy minimalista. Pero lo bueno de esto es que se pega a la parte superior y las cosas desplazan por debajo de ella y se puede ver hacen lo mismo aquí por este metraje en la parte inferior, está pegada a la parte inferior. Es relativamente fácil de hacer. Utiliza la opción Sticky en posición si estás aquí porque lo has hecho y simplemente no funciona. Lo que hay que hacer es sentar el número superior a cero. Y vas a ser una manera. Pero para la gente que nunca lo había hecho antes, vamos a sumergirnos. Bien, ya lo estamos cubriendo. Voy a menú no se ve muy bien, pero tenemos una barra de navegación a lo largo la parte superior de un botón ideal en ella. Así que imagina una hermosa navegación que quieras apegarte a la cima. Lo hago en esta parte del curso a pesar el nombre no está completamente terminado, porque cuando la sección de maquetación del curso, así que quiero mantenerlo todo junto. Tan pegajoso es raro, es fácil y es complicado. ¿Bien? Entonces tengo lo que quiera que me quede en la cima, voy a la posición. Aquí está esta opción, dice pegajoso y luego vas a previsualizar y no funciona. Lo único que hay que hacer es decir, pegajoso necesita, necesita una altura. En este caso, quería pegarme a escribir en la parte superior, así que voy a golpear cero, presionar Enter. Ahora, Comando Mayús P, Control Shift P en una PC. Mira eso. Ahí está atascado. Nos atrapará. Cosa que podríamos hacer. Si vas a hacer un NAB pegajoso, no tienes que hacer una nota adhesiva de es que hay navegación tiene un color de fondo de blanco. Podría bajar un poco la opacidad para que podamos hacer algo de pico debajo de ella. Para que echemos un vistazo ahora es incluso funciona en modo display. Y puedes ver aquí, el diseñador, no tienes que previsualizar. Podrías decidir cómo haces esto. ¿Bien? ¿Me gusta? Probablemente tenga que ser más oscuro. Solo quiero insinuar lo que hay debajo de él. Bien, no quiero cubrir realmente todo el índice z IO. Voy a fingir que hice esto a propósito. ¿Por qué está eso por encima? ¿Por qué está todo el resto por debajo de él? ¿Recuerdas el índice z? Entonces voy a decir que esta navegación va a ser puesta a un z-index de voy a usar 1,000. ¿Bien? Me da, en esta página, otro también. Me da diez o nueve son las opciones. Se puede poner un z negativo. Conocer las opciones. Para apilar. Podrías hacer tu navegación como regla en tu propia cabeza, 100, entonces tienes 100 bits de apilamiento. Pero ya sabes 100 es donde va tu nav. Ahora está arriba. ¿Entiende? Bien, Lo mismo es cierto. Si quieres Footer, Footer, probablemente no quieras ser pegajoso. A lo mejor es como una llamada a la acción como especie de notificación similar. Entonces tal vez sean algo que quieras hacer. Agreguemos una sección abajo en la parte inferior. No puedo entrar ahí. Entra ahí. ¿Cómo consigues el lugar correcto? Voy a llamar a esta sección pie de página. Y puedes hacer lo mismo. Voy a agregar un color de fondo solo para que sea obvio. Y yo voy a hacer lo mismo. Vamos a ponerla demasiado pegajosa para no la parte superior ni la inferior para ponerla a cero. Bien, y eso debería funcionar. Y va a funcionar aquí dentro. Mira que está un poco atascado ahí. Depende de ti si lo encuentras útil o no. La gente no lo hace muy a menudo, pero a la gente le gusta preguntarme cómo hacerlo. Y así ahí vas. Aunque la única cosa al respecto, esta sección de aquí, y lo que voy a ir, Quién se acuerda? No tiene una altura. Eso es un realmente necesita un tamaño de un mínimo. Tiene una altura mínima. Hagamos 50 píxeles. Podría ser solo un poco de texto ahí para explicar que hay una venta o algo más. Haga clic aquí. Bien, eso es, navegación pegajosa, pies de página pegajosos. Solo recuerda poner la K superior a cero o algún tipo de número para la navegación y luego algo para la parte inferior para nuestro pie de página. Y es posible que tengas que meterse con índice z si las cosas van por debajo o puedes revisar las mías porque mi no puedo desplazarme lo suficientemente alto como para que esto vaya por debajo. Echemos un vistazo. A lo mejor este no puede hacerlo. Ellos tampoco. Bien, ya es suficiente. Te veré en el siguiente video. 54. Proyecto de clase 05 - página de inicio de la cartera: Es tiempo de proyecto de clase y probablemente el proyecto de clase más importante que hemos hecho hasta ahora, probablemente lo haremos en todo el curso. Lo que quiero que hagas es que uses todas las habilidades que hemos aprendido hasta ahora en este curso. Los tengo todos listados aquí como solo una referencia de las cosas que deberías estar buscando hacer y aplicarlos para llegar de donde estamos ahora. O si no has empezado desde cero, crea una nueva página. Y quiero llegar a esta etapa donde tienes una página de inicio que tenga toda tu cartera y tenga diferentes puntos de interrupción. Entonces voy a conseguir que también hagas diseño responsive. Ahora, usa todo el tuyo, tu nombre, tus propios colores, tu propia fuente, todas tus imágenes. Si quieres como que sigas mi estructura. He agregado una carpeta que es calculadora en dos los archivos de ejercicio bajo cartera, hay uno llamado diseño terminado. He puesto solo capturas de pantalla de la estructura para que sepas lo que hay que ir en ella. Bien. También he incluido todos los diferentes puntos de quiebre. Tengo el Figma en archivo XD si quieres abrirlos y echar un vistazo a ti, o simplemente mira sus capturas de pantalla. Entonces parece largo y es como que lo es, supongo que si aún no has hecho nada. Pero mi consejo es, voy a hacer un video de solución continuación y hacerlo todo yo mismo para que veas como llegué a mi punto. Pero mi consejo es hacerlo primero tú mismo, obtener esos problemas, tratar de calcular la cantidad que ese tipo de aprendizaje es probablemente el mejor aprendizaje que vas a hacer en todo esto yo mostrando tú qué hacer es bueno, pero no consigue que esas cosas se hundan y sepan que van a ser problemas. Solo hay, tu nuevo va a ser algunas partes complicadas. La parte más complicada es un tramposo o como mi trampa en esta navegación. Entonces en esta navegación en la parte superior aquí. Bien, quiero que me empujen hacia este lado, esto para empujar este lado. Y ya hemos hecho cosas similares a esto antes. Hicimos que el padre se flexione. Ahora lo hemos empujado hasta los bordes. El único problema con esta estructura si me has estado siguiendo ahora es que tenemos un contenedor. Podrías aplicar flex a este contenedor y hacerlos empujar hacia afuera. Pero este contenedor, el que nos da el flujo de trabajo, en realidad tiene algo de estilo aplicado y puede causar problemas y lo hace en este caso. Entonces, aunque tengas un contenedor, es mejor ponerlo dentro de ese contenedor. Pon un, solo un, solo un div viejo llano como este de aquí. Y a partir de eso. Usa eso como tu envoltorio o no, el contenedor porque ya tiene algún estilo aplicado. Así que sólo hay que poner otro envoltorio dentro de él. Y estos, mi logo de texto y mi botón en el interior. Es lo único que podría atraparte. Entonces hay un pequeño tramposo, pero todo lo demás debería ser, deberías tener las habilidades o al menos que hemos cubierto en el curso para ver si puedes resolverlo. Adelante, hazlo. He enumerado los diferentes temas y los elementos que deberían estar en la navegación. Debe haber un logotipo y un botón. La caja del héroe debe tener un héroe golpeando un botón y una imagen. Si quieres saber qué pasa en qué zona. El reto, un pequeño reto secreto que tengo para ti es que la imagen está en círculo. ¿Cómo lo haces? Quiero que veas si puedes averiguarlo por tu cuenta. Hay dos partes para ello. Ahí están las esquinas redondeadas, pero también, encontrarás que he usado imágenes cuadradas. Puedes hacer trampa y hacer que tus imágenes cuadren dos. Pero si tienes tu propia imagen y como rectangular, encontrarás un problema. Y es un examen de prueba de libro abierto, proyecto de investigación. Te voy a dar una pista cuando estés buscando soluciones en línea para ello. Si algo llamado ajuste a objetos, probablemente harás que la abuela le diga que le dije hola. Si no puedes hacer que eso suceda, no te preocupes, lo cubrimos más adelante en el curso cuando hacemos imágenes nivel dos. Bien, solo quería ver si puedes imaginarte algo, figura eso en tus propios entregables de pequeño desafío. Toma una captura de pantalla de los cuatro puntos de interrupción diferentes, escritorio, tablet y los dos móviles, y luego compártelo, compártelo en la parte de asignaciones y también en redes sociales. Me encantaría ver lo que obtienes en los comentarios. Déjame saber el tipo de cosas en las que te quedaste atascado y simplemente no pudiste encontrar una solución. Porque sería interesante ver lo que otras personas tienen ahí para decir. También tuve ese problema, pero lo arreglé de esta manera. O podría haber mil personas que no tenían idea de cómo solucionarlo en este momento en Webflow. Y me va a interesar ver, a lo mejor necesito regresar y agregar algo en la clase. Pero si tienes algo que fue duro y tal vez no lo arreglaste, ponlo ahí también. Ser interesante saber dónde están todos los temas novatos. Bien, eso es. Ve a hacer una cartera. Y como dije, hay un video de solución a continuación, pero no veas eso hasta que hayas hecho el tuyo propio. Podrías dejar algunos pedacitos porque no los puedes arreglar. Los haremos juntos en el siguiente video. Pero sí, ve a disfrutar, resolver los problemas. Te veré en el siguiente video. ¿Cuánto tiempo tardó esto? Probablemente un par de horas. Va a ser una larga. E incluso podría llevarte un par de días dependiendo de tu habilidad. Bien. Así que solo para que lo sepas, no es un trabajo rápido y no lo estás haciendo mal si toma un par de vocales, ¿bien? Adiós. 55. Proyecto de clase 05 - página de inicio de la cartera - Parte 1: Entonces, ¿cómo te fue? ¿Cómo hiciste tu versión? Te voy a mostrar ahora cómo hice el mío. Vamos a pasar de, voy a pasar de esto a esta versión más completa. Bien, va a funcionar a través de diferentes dispositivos. Y voy a trabajar a través de algunos de los temas que me dieron, cómo los resuelvo. Y sería interesante, definitivamente haz el tuyo primero para que puedas entrar aquí y decir como, oh, como que me lo hizo diferente, pero llegué al mismo punto o me quedé atascado ahí y simplemente me lo salté . Yo quería que Haldane lo hiciera. Bien. Entonces para eso es este video, mostrándote mi solución al, al proyecto de clase. Vamos a saltar. ¿Verdad? Empecemos. Bueno, de hecho, en realidad he empezado, en realidad ya hice 25 min de este video. Y adivina qué? Estoy tapando mi micrófono. Y así es por eso que está desde la hostilidad porque tengo que volver a hacer esto, enchufar el micrófono y la próxima vez que me digas te oigo. Bien, así que volvamos a hacer esto. Vamos a empezar por la parte superior, bien, así que fuera de este trozo superior de aquí para la navegación, ¿de acuerdo? Y aquí vamos a conseguir este tipo de feo nav en la parte superior. ¿Qué tenemos? Y entonces tengo un botón. Vamos a agregar un trozo de texto para el nombre, bien, si tienes un logo, tíralo y puedes hacer un logo en un programa diferente. Ilustrador. Tengo un curso para eso. Pero sí, acabo de conseguir lo que se necesitan. A, voy a ir a Bloque de Texto. Textblock va aquí no un texto de párrafo porque no es texto de párrafo y no es un encabezado. Entonces Facebook es algo genérico. No, arrástralo arriba de mi botón. Voy a escribir mi nombre. Daniel Scott. Folio, punto completo. Necesito cualquiera de los dos diseños, ¿verdad? Así que voy a hacerlo. Ahora. Es posible que te hayas topado con este problema primero, el primero, y ya te ha gustado tirar tu computadora portátil por la ventana. Y es que se puede hacer este contenedor. Este es uno de esos contenedores. Le hemos dado una clase, pero es un contenedor. Puedes hacer este Flexbox, pero solo causa problemas. Entonces es mejor tener un div envoltorio alrededor de él. ¿Cómo es que le preguntas a este contenedor, estas cosas aquí en realidad solo etiquetas div ese flujo de trabajo de agregado un montón de estilo a ese estilo puede a veces, porque no lo creaste y lo estas cosas aquí en realidad solo etiquetas div ese flujo de trabajo de agregado un montón de estilo a ese estilo puede a veces, porque no lo creaste y lo haces no sé lo que está pasando. Puede hacer cosas a cosas como películas. Sólo voy a poner en un diblock de bicicleta. Poner mi botón en él, poner mis garrapatas en él, obtener el orden de la manera correcta alrededor. Y entonces esto sí bloqueó, que voy a llamar div, nav. Voy a hacerle películas. Y voy a decir, vaya a los bordes. Ahí vamos. El de altura en el medio. Nos hemos topado con este problema un par de veces, es que el div no sabe lo alto que es. Cerdos, no le hemos dado altura. La altura viene de este nav, que tenía sentido antes. Bien, entonces no es la sombra de caja. De hecho voy a mantener la sombra de la caja. De todas formas. Viene de esta sección nav, ¿cómo lo sé? Puedo verlo un poco aquí bajo tamaño, altura mínima se establece en 68. Si mantengo presionada la tecla de comando y la hago clic, dice que viene de, así que no es de aquí, no de la caja de donde viene de la sección ahora. Entonces necesito ir a la Sección F y decir No eres cero porque eso es diferente a limpiarlo. Despejarla es diferente a cero. En ese caso, probablemente hubiera funcionado bien, pero solo hazte el hábito de despejarlos, pero Opción o Alt haciendo clic en ellos . Y ahora voy a agregarlo a este div nav. Y hay una U, una altura mínima de 68. Y funciona un poco. Vamos a la maquetación. Y por defecto se estira. Quiero estar centrado. Y los bordes. Aquí vamos. Bonito. Bien, lo siguiente que quiero hacer es darle estilo a esto. Bien, voy a llamar a este texto único. Y a esto se le va a llamar logo. Y lo voy a hacer se necesita logo, voy a comprobarlo. Va a ser arenas públicas. Dice que son 400, pero ahí es una especie de mezcla. Sé que son las cosas pesadas y son 20 pixeles. Entonces hagámoslo. Entonces tú, mi amigo vas a tener 20. Vas a ser audaz. Y creo que hay un poco de negativo que está especiando. Sólo voy a mirarlo. Se ve bien. Bien, esta parte aquí, quiero, ¿quién recuerda cómo cambio esto? Porque si agrego una clase combo aquí, bien, entonces este va a ser mi, quiero que sea el color de secundaria. No lo hace todo. ¿Quién entró? Esto fue hace un tiempo. Bien. Si lo recuerdas, obtienes un punto de bonificación. Lo seleccionas y lo envolves en esta etiqueta span. En lugar de hacer un poquito, solo ese poquito. Bien. Y voy a decir, en realidad, sólo tengo suerte que me acordé. Yo hice ticks colores secundarios para aquí abajo. Recuerda que lo hice una clase global que estamos usando clases, feliz dado, ¿de acuerdo? Y lo que no quiero hacer es hacer. Esta garrapata, garrapatas colores secundarios, el menor peso, porque va a hacerlo a esto también. Eso no es lo que quiero. Bien, entonces quiero crear una clase combo. ¿Lo hago una clase global? ¿Lo volveré a usar en otro lugar? Probablemente no. Tal vez. De lo que estoy hablando es de mover su global. Puedo usarlo varias veces. Si lo hago una clase combo, texto o irregular, probablemente la use en otro lugar. Entonces me voy a ir ¿Terminamos? Eso es un texto span? Entonces voy a convertirlo en uno global. Entonces lo que voy a hacer es agarrar una etiqueta div. Podrías aplicar esto a una etiqueta div. Sólo voy a editar a un bloque de texto, solo uno aleatorio. Bien, vas a tener txt rigueur. Y es un poco decir que te obligan a ser regular, a las arreglas, a deshacerte de él. Ahora, puedo agregar un par de clases. Agregaré texto regular Siguiente, y también agregaré texto secundario. Es genial. No lo sé. Me siento diseñador web muy exitoso cuando empiezo a tener clases y llego a reutilizar, mírame reutilizando clases. Entonces veamos eso. Sí. Entonces el botón uno va a ser interesante porque lo que este botón, este botón se reutiliza. No voy a hacer sólo un botón para todos. Voy a intentar construirlos usando clases combo. ¿Bien? Porque tengo uno grande, tengo uno pequeño y luego está aquí abajo encontrándose con uno. Este es en realidad un poco más pequeño que este más grande. Entonces lo que tengo que hacer es que voy a crear un tipo de clase como nivel base, como la más baja que hace mayor parte del trabajo como esquinas redondeadas. Y tal vez le haga el color también. Hace que todas las garrapatas sean mayúsculas porque puedes ver que todas son mayúsculas y todas estas, ¿de acuerdo? Y compré, necesito hacerlo a la más genérica. Este solo se acostumbra, el grande, y se usa una vez en una página. Este pequeño se acostumbra en la parte superior aquí. No hay ningún otro lugar en mi diseño. Este se acostumbra varias veces, y es más probable que use este una y otra vez. Así que en realidad voy a darle estilo a este. Y no voy a darle estilo aquí abajo porque está haciendo algunas cosas raras en el código aquí. Entonces, si me deshago de esto, techo, se vuelve un poco elástica. No quiero agregar posicionamiento infantil, perdón, películas infantiles y hacer esto porque sería parte del estilo. Y no es realmente lo que quiero porque es algo bastante único. Entonces voy a darle estilo a éste. ¿Bien? A éste le han aplicado un par de cosas. Ni siquiera me gusta esa sombra de caja, así que me estoy deshaciendo de ella. Entonces botón hace algunas cosas. ¿Qué hace? Recuerde Opción o clic Alt. Sólo hace fondo. Ese es su único trabajo. Entonces voy a seguir usando esta. Bien, entonces él hace eso. ¿Qué más quería hacer? Quiero que sea mayúscula. ¿Bien? Quiero que sea audaz para mis botones porque eso es lo que está aquí. Bien, quiero un poco más de relleno arriba y abajo. Ahora se trata de acolchado superior e inferior. Lo que realmente quieres hacer es copiar esto perfectamente, bien, porque entrena el acolchado y tipo de conseguir que se calcule precioso. El problema es, es que muchas de estas cosas vienen con cosas preexistentes como márgenes. Como si mirara a Hera One mirándola, ¿Dónde está mi héroe oculto? Tiene algunas cosas ya en él. Tiene un margen de 20 en la parte superior y diez en la parte inferior que viene de este golpeador. Quien hizo que alguna persona hace mucho tiempo atrás cuando se decidió H 1s en Internet van a tener este tipo de relleno predeterminado. Bien, entonces cuando intentas medir las cosas, debes tener en cuenta algunas de las tallas predeterminadas. Entonces hay un trozo de tiempo. En realidad vamos como esto se ve un poco, eso se ve lo suficientemente cerca. Bien, así que voy a acercarme lo suficiente. Entonces quiero algún botón va a tener algo de relleno. A ver, estoy viendo esta. Se ve un poco más. En realidad, el texto del botón es probablemente lo que tengo que hacer a continuación. Entonces esto es 14. Creo que esto es probablemente 16. Mis botones van a tener un valor por defecto, todos los 14, luego empezar a hacer el relleno. Y creo que podría estar cerca. Si estuviera haciendo esto, tendría esto en otra pantalla para poder verlo. Pero eso no se ve en la pantalla. Entonces tenemos que hacer este baile incómodo. Puedes presionar Comando 1.2, bien, Para qué pestañas hay, bien, vamos a controlar 1.2 en una PC. Entonces eso está bien, creo que los acolchados o justo en la parte superior e inferior, se debe a los bordes aquí y las esquinas redondeadas. Voy a hacer las esquinas redondeadas por esta interesante. Esta es la que antes le senté esa pequeña tarea . Cómo redondearlos va a funcionar tanto para botones como para imágenes. Así que encuentra la frontera. Bien, y sube el redondeo. Me puedes ver, puedo conseguir el mío hasta el final. Perfecto. Pero digamos que hago esta altura de este botón. Así que lo he hecho 20 pixeles. Eso es todo a lo que puedes arrastrarlo en Webflow. Pero digamos que hago más grande la altura de la misma. Entonces digo que el tamaño es una altura mínima de es de 100 pixeles. ¿Ves que 20 no lo corta? Yo quería estar perfectamente redondeado si ese es el objetivo aquí, gente, lo que se puede hacer es que se pueda decir en realidad este radio fronterizo es de 200. Se puede ir más allá de donde tiene que estar. Puedes hacer este 2000, 20,000 XD y solo te pondrá súper práctico. Bien, así que no lo perfecto y ponte como todo lo que es perfecto. Porque si se hace más grande, terminarás con como pequeños trozos de corte, como uno exagerado. A lo mejor no tan exagerado, pero se puede ver aquí puedo acercarlo , acercándose, más cerca. Bien, solo hazlo en vez de 61, hazlo 100. Entonces siempre va a ser perfectamente redondo. Y eso va a funcionar para que esa imagen , aunque lo haremos juntos. Y quiero el radio, poniéndolo en 100. Voy a deshacerme de esa estatura mínima, ¿verdad? Tu opción de altura mínima, voy a dar clic en ir. Se ve bastante bien. Me está gustando. Creo que necesitas más acolchado alrededor del exterior. Entonces hagámoslo. Arrastrarlo de la manera equivocada primero, volví por el otro lado, un tiempo razonable entonces, bien, así que tengo mi botón genérico. Entonces aquí abajo podemos decir que lo eres, me voy a deshacer de la tarjeta de botón, de tu clase. Vas a empezar como botón, botón genérico. Y luego agregamos esa clase llamada tarjeta de botón. Bien, eso hizo que todo lo inundara a la derecha. Y en esta instancia en particular o que el conteo, recuerda que solo tienes que ir al niño flicks y dices alinear al lugar correcto. Muchas gracias. Bien, entonces tenemos un botón. Hagamos uno pequeño y uno grande. Así que empieza con el grande. Entonces ahora vamos a tener una clase combo. No tiene sentido que esto sea una clase global porque solo va a aplicar dos botones alguna vez. Voy a tirar hacia arriba botón L-O-G. Puedes escribirlo el grande completo si quieres. Bien, y este necesita más relleno. ambos lados, mantén presionada la tecla Opción o la tecla Alt mientras arrastras un poco más. Y el texto que conozco es porque ya hice esto. 16 están recordando algo de ello. Pero no es tu culpa. Aunque te estoy culpando. Entonces ese es mi botón más grande. ¿Bien? Sí. Bien. Veamos este de aquí. Tiene que ser pequeño botón y deshacerse de la caja de sombra. Voy a entrar. Y voy a decir el festival. El texto es, creo que fue recuerdo que era topografía, digamos esta noche. Bien. Y el relleno va a venir muy abajo. Y esto va a venir. Aquí vamos. Yo soy feliz. Una cosa que encontrarás es que ver las garrapatas aquí, es del tamaño correcto, pero simplemente no se ve igual aquí dentro. Hay diseño web es divertido como fuentes, sobre todo se dan a la computadora y al software para renderizar. No son lo mismo en todas las computadoras. Así que básicamente tu computadora es diferente a mi computadora. Chrome es diferente de Firefox. Todos renderizan la fuente de manera ligeramente diferente. Así que no pases demasiado tiempo tratando de conseguir que sea exactamente perfecto entre aquí y aquí. Debido a que podrías encontrar cuando se carga en Firefox o en un navegador diferente, va a verse un poco diferente. La fuente se renderizó Por la cosa tratando de mostrarla a la computadora y el bit de software. Por lo que el texto no se ve igual en Photoshop que en Illustrator, como lo hace en Figma o XD o diferentes navegadores. Así que acércate, pero haz algunas pruebas al final. No te pongas como pixel-perfect ahora y cepilla y descubre lo que está mal. Y acérquelo al final. Lo consigues cerca de donde estás en él para estar, haces algunas pruebas y ves dónde está bien, tal vez Figma dice que necesita ser extra audaz. Pero he decidido que voy a pasar y en realidad hacer todo 700 porque los navegadores parecen en general renderizarlos un poco más pequeños. Más como lo que tenías en Figma. En la maleza, Dan? Sí. Sí. Vuelve a la pista. Entonces tenemos esto esto y esto. Necesito un poco de relleno aquí. Así que voy a hacer, voy a hacer un par de cosas. No estoy contento con la altura de la línea de esto, ¿ o viene de? Voy a mantener presionada mi llave de control mono en una PC, viene de todos los 1s. Todos los 1s tienen algunos se pusieron demasiado apretados ahí. Y también me voy a deshacer o estoy de vuelta. ¿A dónde fuiste? Desaparecí. Ese micrófono sigue funcionando. No sabría ser panal. De todas formas. Estaba funcionando bien. Y ahí van a entrar en pánico. Y así porque ya era el momento en que me di cuenta de que no estaba funcionando la última vez. Entonces lo que voy a hacer es que me voy a deshacer de este héroe de la calefacción tiene algunos ¿dónde está? Topografía. Toma sombras. Adiós. Toma fotos. A mí me gusta y quiero un poco de relleno aquí. Esto es interesante. ¿Cómo separo esto? Porque esta cosa está en una grilla. Bien. No está en una está en el Flexbox, ¿no? Es un David Bach. Y podrías agregar algún margen. Yo agregaría algo de margen al botón por separado del botón Lodge, llamaría a este. Yo agregaría una clase llamada a una clase global llamada margin top. Y yo lo haría grande o pequeño, sea el tamaño que quieras. Y eso funcionaría totalmente y es posible que lo hayas hecho . ¿Qué he hecho? Aquí vamos y compramos porque esto tiene flicks aplicados a este tipo de bloque div rápido que tenemos aquí, que he llamado diblock, lo cual no es genial. Y voy a decir que lo eres, ¿qué van a hacer? Está bien. Y los hijos de la cuadrícula, sin diseño. Entonces es hijo de la grilla, pero también es el padre de este Flexbox. Flexbox tiene cosas geniales como las filas van a usar mi flecha hacia arriba. Oh, mira eso. Tal vez sostenga Shift y arriba para obtener este espaciado que desee. Bien. No, no voy a hacer eso. Voy a disminuir la altura de la línea. Solo pasa a entrar. Bien, lo siguiente que va a hacer es esa imagen. Así que la imagen aquí es que te va a dar un capricho. Vamos a traer las imágenes. Tengo unos cuantos que puedes usar ya arrastrado los míos porque ya he hecho esto. Así que entra en tus archivos de ejercicios. Pones tu propia cara ahí para tu cartera. O tal vez una persona genérica de Unsplash o la puso, tal vez algo de tu trabajo en ellos, tal vez llegas tarde al último trabajo, o puedes usar una de las máscaras. Entonces puedes usar uno de estos. Voy a arrastrar en éste. Bien. Se fue en el lugar equivocado. Entonces voy a conseguir que esté tras este diblock. Se moverá a este siguiente elemento de la cuadrícula porque solo hay dos cosas en esta cuadrícula, pesar de que aquí hay muchas cosas, todas están envueltas en esta etiqueta div que había escondidas ahí dentro. Este tipo segundo, genial. Y lo genial de grid es que puedes hacerle cosas a los niños, bien, entonces esta grilla aquí, en cualquier lugar dentro de ella, no se hace dentro de aquí. Eso es como el espaciado general y el diseño y las cosas. Pero solo selecciona selecciona cualquier cosa dentro de aquí y di grid child, ¿te alinearías en el centro por mí? Y hagamos las esquinas redondeadas. Es exactamente lo mismo que el botón. Sólo hacer frente. Entonces bajamos aquí y vamos fronteras. Usted es, sólo se puede obtener hasta 20. Pero sabemos que podemos ponerla hasta 200 o 1,000. Solo revisa un poco para ver si tiene bordes aplanados. Y si eres un poco paranoico, solo baja a 100,100.2, corto 5,202, 50, sin cambios. 250-200. Solo déjalo a las 02:50 entonces no sé por qué encontrar como algo lo suficientemente grande pero no demasiado grande. Pero hasta 999 sería Mehta. Bien. Tan redondeado. También tiene que ser un poco más pequeño porque no lo es, ya sabes, definitivamente podemos mover la brecha hacia arriba. Eso es bastante fácil de hacer o, o terminar. Se pueden tomar imágenes, lo hicimos antes en el curso. Simplemente puedes arrastrarlos, obtener el tipo de no ese. Ese. Bien. La flecha ahí, es como que oye, vamos, voy a hacerla más pequeña. Pero esto, cualquier cosa conflictiva dentro de esta celda de cuadrícula. Y puedo decir en realidad la parte superior aquí, el niño de la grilla puede ser sancionado de esa manera ahí también. Y ahí vamos. Se ve lo suficientemente bien. Bien, echemos un vistazo. Voy a deshacerme de esto. No quiero que lo golpee ahí antes. ¿Y qué más podemos hacer? Sin embargo, lo que podría hacer es mi instinto en ese momento era tan pie de página de sección. No lo necesito. Nunca voy a usar ese pie de página de sección clásica CSS, o podría hacerlo, pero está haciendo cosas raras. Entonces mi, como ve mi cerebro de diseño web Ve a deshacerte de él ahora, mantenlo limpio. Para que pueda obtener mi administrador de estilo escriba en pie de página. Y puedes ir tú y luego, Bien, y lo haré más adelante porque lo estaré agregando y hará cosas raras y me va a asustar. Lo conozco bien. Bien, así que ahora estamos en este trozo. Lo que tenemos que hacer, las cosas que tenemos que abotonar ahí arriba, que es como que ya solo necesitamos estilo y solo pedacitos. Hagamos esos pedacitos. Y lo voy a hacer, me voy a deshacer de todos estos excepto de uno. Ese es el que tiene el botón que ya funciona de un video anterior cuando hicimos posicionamiento absoluto. Bien. Regresa a esa. no lo hiciste si tuviste problemas con esa porque voy a reutilizar esto por el momento. Te voy a agarrar. Y quiero llevarme al padre, lo cual es un poco complicado porque hay todas estas cosas en el camino. No puedo llegar a la miniatura de bacalao, puedo hacer click en ella por aquí. Entonces hay dos formas en las que puedes hacer clic en él y decir, cortarlas ahora, eliminar o hacer clic en esta. Y puedo usar mi flecha hacia arriba y eso agarra al padre. Recuerda que esa parte del flujo de trabajo. Si hago clic en esto y uso las flechas izquierda y derecha, va a ir a la izquierda. La derecha representa a los hermanos ahí dentro, lo cual es un poco genial. Pero principal uso clic dentro de aquí, golpeo flecha arriba, va a agarrar el padre, que es mi envoltorio inferior. Se vuelve a subir. Se va a agarrar a su padre, que es mi miniatura de bacalao. Y voy a ir a borrar, eliminar, borrar. Agregué plomo a esos. Voy a hacer uno, repetirlo y luego ir a cambiarlo. De lo contrario, van a tener que seguir sumando clases y esas cosas. Entonces vamos a empezar con ésta. Vamos a stylus el momento y no tiene clase para ello. Entonces voy a llamar a este texto, y voy a llamar a este tema. Te darás cuenta que pongo el like el nombre más genérico primero y luego la parte más descriptiva segundo solo significa más adelante cuando escribes texto, me parece que esto es algo más fácil de ver. En lugar de logo toma texto regular. Ese soy solo yo. Entonces es tema texto, voy a decir, ¿qué vamos a hacer? Necesito averiguar la talla. Es 12 porque el 12, yo puedo hacer eso. Entonces el texto del tema va a ser topografía 12. Está obteniendo todos sus tamaños de fuente desde el comando o control, haga clic desde el cuerpo o las páginas. Ya lo he hecho. Y creo que eso es todo lo que necesito para hacerlas. Veamos este de aquí. Ahora. Esta es una interesante porque el espaciado aquí es bastante pequeño. Y este de aquí por defecto, le he hecho nada a estas cosas. Simplemente lo agrupé en la página. No hay clases aplicadas en unos espaciamientos ya bastante grandes. Es bueno para el modo de rayos X. Bien, y ve al modo de rayos X. ¿De dónde viene? cursor por encima de esto, puedes ver que hay un gran trozo aplicado a mi H2 y solo viene de eso de internet. Bien. ¿Hablamos de eso por aquí? El H uno también lo hace. No le pedí que tuviera este espaciado. Si hago clic en esto, tiene algún default de 20.10. Si mando haga clic en eso, dice que todo H2 viene con eso en ítem, pero no lo hacen. Alguna persona cuando está inventando internet por primera vez o al menos HTML, decidió que los calentamientos van a tener un poco, un poco de margen en la parte superior e inferior. Y lo que estoy decidiendo ahora mismo, probablemente para mi futura molestia, es que sólo voy a despejar los márgenes. Bien. Voy a decir en realidad pegando dos, voy a salir y modo rayos X. Bien. Voy a decir que estás pegando a los dos en realidad solo van a ser puestos a cero en la parte superior y a cero en la parte inferior. ¿Bien? Y quiero editar no a ti. HTML histórico crear un chico irá. Entonces voy a editar si lo necesito en este momento, creo que no lo necesito. Bien. Otras cosas que quiero hacer con mi genérico H2, voy a hacer que sea un tamaño de fuente más pequeño porque lo que es esta guerra de ellos puede ser el tamaño de fuente de 23. Bien, probablemente sólo voy a hacer 24. Tipo común de tamaño de fuente. Creó H2 porque hice clic fuera y luego hice clic de nuevo. Entonces lo que voy a hacer es deshacerlo. Y esta cosa de aquí, voy a asegurarme de que lo estoy haciendo a etiquetas H2, todas ellas. Bien, y esto va a ser 24. Bonito. Voy a asegurarme de que todo esté en mayúscula porque esa es una especie de regla decidida en este diseño. Y cualquier otra cosa que quiera hacer. Necesito algún acolchado. No necesito ningún relleno. Si iba a agregar relleno, probablemente lo agregaría al tema de ticks. Pongo algo de margen hecho la parte inferior de la misma. Porque esto, el momento es algo bastante puro. No hay estilos aplicados y es un poco perfecto. No quiero empezar a agregar relleno ahora porque quién sabe si va a ser útil más adelante. Pero esa cosa ahí, solo se acostumbra como tema de texto para esta tarjeta en particular es solo trabajo en la vida. Entonces puede ser bastante, puedes agregarle todo tipo de cosas raras. Este tipo lo mantendrá agradable y ordenado. 56. Proyecto de clase 05 - página de inicio de la cartera - Parte 2: Bien, la altura es demasiado alta. Vamos a los botones ya hechos. Entonces lo que haremos es averiguar de dónde viene la altura. Bien. Entonces, ¿de dónde están las caminatas mínimas que vienen de este bacalao menor rep acabo de hacer clic en él llamado el correcto? Excelente. Bien. Y voy a bajar la altura mínima a, no estoy segura. Lo que me gustaría hacer es en realidad tener esta línea de dos. Quiero que haya suficiente espacio para dos líneas. ¿Bien? Entonces voy a darle estilo, ya sabes, basar mi altura mínima alrededor de eso a la altura de la línea, sosteniendo Shift para usar mi flecha hacia abajo, obviamente demasiado baja, en algún lugar de ahí. Y porque es altura mínima, significa que si voy y agrego ed más, puedes ver que la empuja hacia abajo. Bien. Porque es la altura mínima, no la altura máxima. Permitirá que crezca si es necesario. Sobreescribe. Cualquier otra cosa que tengamos que hacer, necesitas un estilo ese botón. Hagamos ese botón ahí. Entonces tu botón de llamada más dos. Y recordaremos antes teníamos dos botones, añadimos botón más dos y botón más 11. No son más que ejemplos. Este de aquí agregó relativo, ese agregó absoluto. Así que ya no necesito eso. Así que voy a estar ordenada otra vez. Voy a renombrarle este llamado Button Plus, porque sólo tengo uno de ellos. Y voy a ir a mis estilos y decir botón más uno. Ya no te necesito. Un lugar como nuestro ordenado IM te voy a dar estilo, creo que originalmente iba a ser negro. Ya no me gusta eso. Así que voy a hacer de este color secundario donde Button Plus, sí, pero soy Plus puede llevar todos estos estilos. En realidad. Él no hace nada. Es esa ciencia un poco cercana a mi color y a veces me confundo. Pero lo que voy a hacer es que voy a comprobar, si ya tengo color, color fondo, o tenemos colores de texto secundarios, eso no funciona porque lleva dentro de él. Entonces color, gradiente de fondo. Ahora lo que quiero, bien. Así que no tengo esa, así que voy a hacerla de clase global porque probablemente me reutilizarían ese color de fondo, fondo coloreado secundario. Entonces, hagámoslo. Así que voy a agarrar mi llave, arrastrar en un bloque div. Sólo entré ahí. Realmente no me importa, porque voy a hacer esta cosa llamada color. Estoy usando la ortografía americana, aunque soy de Nueva Zelanda, vivo en Irlanda. Usamos el uso en todas partes. Pero sorprendente cuánta gente me va a escribir para decir que he escrito mal el color. Deletreé muchas cosas mal, pero lo acabo de entender. Ahí vamos. Bien, entonces color BG para fondo y éste va a ir degradado. Vamos a hacer secundaria. Y voy a decir los antecedentes, voy a totalizarlos todos los fondos cerrados. Tienes mis dulces muestras. Y eso es lo que va a hacer ese tipo. Lo que voy a hacer ahora es que voy a duplicarlo porque mientras esté aquí, voy a hacer una secundaria. Lo siento, secundaria. Otra llamada primaria. Y éste va a ser así de excelente. Entonces te tengo y puedo poner fondo primario final o puedo quitarlo y decir fondos de color, secundario, vas. Entonces él solo estaba ahí para crear mis pequeñas clases Globales. Si sabes, una mejor manera de hacerlo, probablemente lo hagas. Si lo haces, avísame en los comentarios. De todas formas. Entonces tengo Button Plus voy a usar color secundario. La razón es, no es aplicarlo a solo clase botón es si necesito cambiarlo más adelante porque es solo la relación de contraste no es buena. Necesito ajustarlo. Me despierto a la mañana siguiente. Simplemente no me gusta. Si solo cambio esa clase, el botón cambiará, junto con eso cambiará todo lo demás que lo haya usado. Al menos los fondos de color secundarios de aplicados. Lo mismo con la redondez de los botones que hicimos aquí arriba. Y lo que vamos a hacer es decir, voy a, quiero hacerlo al botón plus, porque no quiero agregarlo a esa clase ahí. Entonces botón plus va a tener fronteras. Levántalo y solo ponlo hasta 50. Entonces es completamente redondo. No es completamente redondo. ¿Puedes ver? Es una especie de óvalo. ¿Cómo lo hago redondo? Le voy a dar una talla. Y el mío va a ser, qué tan grandes hice estos 3D, de cuatro píxeles de ancho. Entonces voy a decir que eres una talla de 34. Siento que me voy a dar problemas aquí. Sí. Se necesita el co ¿cómo lo conseguimos en el medio? Ese fue muy buen punto. ¿Cómo voy a obtener entrada? Y esto es un rasguño en la cabeza y el tiempo. Así que aquí hay un poco de garrapatas. Tiene algunos estilos que vienen. Si selecciono esto, tiene algunos estilos. Podría convertirlo en un gráfico y traerlo. Si no estuvieras aquí, probablemente haría eso y me iría a Figma, haría y la dibujaría y solo traería como imagen y la movería hacia arriba. Bien. Pero tú estás aquí. Entonces, ¿cómo voy a hacer esto? Voy a hacer más grande el festival de topografía porque solo estoy usando el plus. Y luego dentro de aquí quiero moverlo. ¿Utilizo la posición? Muévelo a través. Yo sí. Intento jugar con el relleno. A ver si viene algún patrón o puedo hacerlo. Mi problema ahora sin embargo es que lo estoy haciendo a fondo secundario. Y yo quien guardó el deshacer? Deshacer una carga de veces midiendo el peso de mi teclado porque estaba jugando con el tamaño cuando estaba conectado a esa clase combo. Entonces deshecho, voy a hacer, en realidad solo me voy a quitar esto por el momento, acaso accidentalmente vuelvo de nuevo. Estoy en botón además te voy a hacer una talla de 34. ¿Por qué no usé tallas mínimas? Porque no hay expansibilidad que yo quiera. No quiero que se expanda por si necesita que no se le permita darle un ancho fijo. Y esto va a tener un tamaño de fuente de lo que obtuve también. Eso va a hacer. Y voy a usar el padding y el margen del que viene, viene de hold Shift, hold Command. tiempo de donde lo está sacando. Ignorar eso. Entonces te voy a dar un poquito de esta manera. Bastante perfectamente en el medio. Suba uno más. Cinco. Estamos contentos con ello. Estoy contento con ello. Bien. Y vamos a ir a secundaria de color de fondo. Aquí vamos. No es cuando el tipo correcto de posición. Entonces volveremos a mi botón más encontraremos el posicionamiento y nos vamos. Solo un poco arrastre que la última vez no estaba muy emocionada sobre dónde terminó. Pero ahora estoy emocionada. Yo lo estoy arrastrando hacia arriba y hacia abajo o de izquierda y derecha, mirándolo y ahí vamos. Bien. Eso es algo así. Y mi necesito jugar con mi rumbo a esto. También necesito algo de espacio en la parte inferior, poco pegada al fondo y me está volviendo loco. Entonces necesito un poco de espacio en la parte inferior después. Bien, entonces lo que voy a hacer es averiguar dónde viene ese espaciado . Bien, ancho del contenedor, así que ten un tamaño de look. Entonces tal vez las miniaturas de la sección tiene espaciado ahí está ahí. Entonces tengo 64 en la parte superior. Y lo que hice ahí fue cómo decido como qué es lo que está controlando esto. Se puede obtener un modo de rayos X. Bien, entonces podrías ir al modo de rayos X e ir ¿quién, dónde, de dónde viene esto? Ni siquiera te muestra. Bien. Entonces eso no funcionó. Entonces, si eso no funciona o lo que hago la mayoría de las veces que no, van al modo de rayos X es que solo trabajo de nuevo a través. Sé que eso está un poco dentro de las cosas. Vuelvo a través de los padres. Ese tipo no tiene espaciado en la parte superior. Este tipo, la rejilla no tiene espaciado. Miniaturas de sección. Ahí está ahí. Tiene 64. Estoy contento con el 64. Y yo también quiero 64 en la parte inferior. ¿Qué hice? Tenía 12.3. Bien. Recuerda que ese es el atajo para pasar por todos estos diferentes tamaños bien. O las distintas vistas. Eso fue un excelente bien. Lo que estaba destinado a hacer es simplemente escribir uno estaba en 64 y golpear Enter. Ahora porque estoy espaciando en la parte inferior. Rayo. En realidad quiero que sea más grande. 164. Así fue como consiguió algo de respiro. Ahora voy a agarrar esta flecha hacia arriba para agarrar al padre, que es la miniatura COD, copiarla, pegarla, pegar, pegar, pegar, pegar, pegar. Tan satisfactorio cuando finalmente llegas a un punto, estás como, puedo, ya sabes, has hecho todo ese trabajo duro y solo puedes pisar y repetir. Bien, entonces ahora voy a aumentar el relleno aquí. Entonces quiero agarrar la cuadrícula Flecha arriba hasta que vea el ícono de la cuadrícula y hacerlo más grande. ¿Y lo hago incluso que lo haga incluso aquí? Yo lo hice. ¿Qué fue? Entonces voy a ir a hacer click sobre esto. Mantenga presionada la tecla Opción. Dice 32, Pero va a salir al aire. Lo que cuelga sobre el borde ahí. Y es un grupo grande y viejo. Empate. No funciona. Agarra un rectángulo. Digamos que tienes un ancho de 50 píxeles. Muchas gracias. Y así quiero, ¿dónde está? ¿Mi diseño? Escópialo. Gap va a ser de 50 por 50. Aquí vamos. Bien, eso es todo. Ahora voy a repasar y cambiar el texto y las imágenes aquí. Lo haré en modo de avance rápido. Voy a hacer una pausa si hay algo interesante que me parezca. Dudo que la haya. Cuando estás haciendo tus propias, obviamente, tienes tus propias imágenes o puedes usar las que están en los archivos de ejercicio. Los míos ya están aquí. Ellos son. Así que sí, voy a ir al modo rápido y pausarlo. En todo caso. Asombroso sucede cada vez que hay. Guau, guau. Bien, vamos a parar. Haz primero el espaciado. ¿Por qué? Porque ¿por qué está ahí? Bien. Es porque vamos a echar un vistazo ¿sabes cómo pensaría? Porque sí, la pausa. Piensa un poco en lo que pudo haber pasado para llegar a una o dos ideas y luego deshacer pausa, listo, vuelve atrás. Bien, Entonces este botón de aquí está obteniendo su posicionamiento de este su padre relativo al padre Rapa. Recuerdas que lo hicimos. Entonces botón se plantea más abajo debajo posicionamiento en un botón más. Entonces no esta. Lo está sacando del botón plus, no de la clase combo. Se está posicionando y está diciendo estos absolutos relativos a ese envoltorio llamado card lower wrapper, que es el que está justo alrededor del exterior. Y dijimos ser literalmente esto por esto. Bien, y ahora hemos cambiado eso. Sigue siendo exactamente esa medida correcta, pero ahora cuelga sobre los bordes. Entonces ahora lo que vamos a hacer es que te vamos a decir o de esta manera. Y en realidad lo que podría hacer es hacerlo desde ese lado en lugar de salir de, veamos si esto funciona. Esta es mi teoría de todos modos, en lugar de salir este lado y arriba. Porque si eso se hace más pequeño, sigue siendo. Pero si salgo de este lado derecho, siempre va a ser solo un poquito. Vamos a probarlo. ¿Eso tiene sentido? No lo hace. Voy a deshacerme de eso y deshacerme de eso, voy a dejar el de arriba porque así es. Pero voy a usar este lado. Voy a decir que tú eres de ese lado. Estoy usando esa esquina como referencia. Bien. Entonces la parte superior y el lado derecho del padre, estoy usando eso. Entonces voy a tener que encontrarme, tienes que hacer especie de barajar, barajar, barajar. Espero ahora que cuando lo cambie , esto vaya a funcionar. Totalmente va a trabajar. Vamos, trabajo. Rejillas. Vas a agarrar eso. Y cuando lo mueva, lo hace hace la acera y voy a tener que hacer el fondo. Voy a hacer el fondo. Está haciendo el lado derecho. Podría tener que hacerlo a otro buen punto. Lo estamos haciendo a relativo a esto. Pero a pesar de que la estamos pegando sobre esta imagen. Entonces hagamos otra cosa que pueda facilitarnos esto. ¿Tiene el tamaño correcto, 50 pixeles? Echemos un vistazo. Otra forma de hacerlo. metí aquí solo porque fue bueno mostrarte aquí y la trasladamos aquí arriba. Sería mejor que este botón viviera dentro de donde sea que estas imágenes puedas ver esta tarjeta está separada. Quiero que esté en el mismo plano que imagen porque eso es a lo que es relativo. Quiero que sean relativos a esta imagen, nota a esta cosa por la parte inferior que sigue distorsionando y cambiando por el ancho elevado. Mientras que esta imagen de aquí que se agarró el botón. Si estás pasando el rato con su imagen aquí, me gustaría que fueras relativo a eso. Bien. Y se ha escapado de sus padres y sus padres eran parientes y eso es lo que le hizo trabajar. Ya no necesito eso . Volvamos a que en realidad voy a quitar eso. Entonces el padre de este tipo ahora es esta miniatura de bacalao. Bien. Entonces hagamos que su padre sea pariente. Eso está bien. Este botón más. Y ve ahí al botón más y di Eres ceros, cero. Vamos a hacerlo. Usamos el lateral, usamos el fondo. ¿Será mejor esto? Vamos a probarlo. Pasemos a estos diferentes estilos. Vagón. Vamos. Vamos a intentarlo de nuevo con la cosa. Está mucho mejor. Bien. Se pega en la parte superior derecha. Entonces fue una especie de trabajo en progreso y estoy agradecida de que eso funcionó. Y parecía lo suficientemente conciso como para conseguir lo que les hicimos. Originalmente estaba dentro de esto, así que estaba tratando de ser relativo a esto y eso está bien. Si los querías en la esquina superior derecha de esto. Eso no es lo que queríamos. Queremos que estén pasando el rato con su imagen. Entonces es mejor estar en este tipo de grupo, un hermano de lo que quieres que siga. Bien, así que voy a querer que terminen con esta imagen. El problema era que teníamos relativo. Necesita ver algo. Su padre necesita ser pariente y estuvo bien cuando estaba dentro de ahí porque hicimos ese envoltorio relativo. Pero ahora tenemos que hacer que este sea relativo, lo cual hicimos. ¿Explotaste Brian? Un poco podría haberlo hecho. Esto es realmente útil, un muy duro, o supongo que para mostrarte que las cosas son un poco complicadas y es como resolver problemas. Me encanta la resolución de problemas. A mí me encantaba por igual, lo cual es una buena idea. Y podrías pasar media hora tratando de arreglarlo y conseguir un nuevo diseñador web. Eso me parece emocionante. Pero sí entramos en la maleza y U2 irá a las malas hierbas tratando de arreglar algo. O respiro hondo. Voy a hacer una pausa por un segundo. Bien, se detuvieron. Si lo encontraste realmente complicado, simplemente no pongas cosas encima de las imágenes, al menos aún no en tu carrera de diseño web. Simplemente no los diseñes en Figma o Photoshop o Illustrator para que las cosas se superpongan así. Simplemente manténgalos separados porque pueden ser complicados. Y lo siguiente que vamos a hacer es la capacidad de respuesta. Lo estamos haciendo caso omiso hasta el momento. Entonces echemos un vistazo a lo que parece una tableta. Aplasta tus dedos. No hay demasiado trabajo. Oye, no está tan mal. Empecemos por la parte superior. Bien, echemos un vistazo a todos ellos. Necesitas trabajar en el siguiente. que saltaste al móvil y luego vas a arreglar la tableta porque tal vez caen en cascada como esta, consigue que este arregle todo debajo de ella. Y si cambio este, afecta a estos. Entonces necesitas trabajar en el siguiente punto de interrupción. Para mí. Cualquier acolchado. Entonces, ¿dónde voy a agregar el relleno probablemente a los padres? Voy a hacer click dentro, usar mi flecha hacia arriba un par de veces. Él es mi padre porque se está poniendo desordenado por aquí. Es como ponerse un poco complicado de ver. Entonces div, nav, sí, no se han disparado. Vamos a tener algún espaciado de relleno o margen. En este caso, no importa porque los colores que vienen del su padre desde el ancho del contenedor. Pero si no lo hacía, eso venía de él, tendríamos que usar relleno. Voy a usar mi tecla de opción, tecla alt en una PC, arrástrala adentro. Perfecto, este de aquí. ¿Puedo salirme con la suya? Probablemente no. Lo que podría tener que hacer en este de aquí es ir a mi parrilla y decir en realidad voy a apretarlo. Esta grilla de aquí probablemente va a necesitar algún margen. De este lado. Realmente no lo necesita por aquí porque las exenciones fiscales, tal vez quieras ponerlo en ambos lados solo para que en caso de que tengas una diferente golpeándome en el escritorio. Hay, recuerden, vamos a eso si quieren cambiar estos. Entonces no hay relleno por aquí, bien, pero aquí abajo se puede ver subir el margen. Aquí no hay ninguno. Bien. Fue raro. Se podía ver 22 Ellos lo hicieron. ¿Lo ves? Saltar a través de puntos de bicicleta tiene algunas peculiares como esa, pero un poco hizo clic, volvió a hacer clic en la parrilla y se fue. Pero es aquí. Hay un margen. Y estoy un poco contenta con todo. Ahí se está apretando un poco. No estoy listo para disminuir el tamaño de la fuente por el momento porque me gustan bastante los frenos para diseñar en esa tercera línea de aquí abajo. Estos tipos. Sí. Probablemente podamos jugar con él y ponerle tres ahí. Y yo solo voy a llegar a bajar a dos por dos y disminuir ese H2 probablemente la grilla va a estar ahora en la parte superior aquí y un diseño, va a ser. Y se puede ver que ya no es azul. Es porque lo está obteniendo desde el escritorio para echarle un vistazo rápido. Se está poniendo, guau, en realidad grid para elegir un estilo del que viene, pero es de la versión de escritorio. Pastel ver pequeños iconos bastante importantes. De ahí viene. Así que en realidad voy a hacer solo dos por dos. Ahora. Eso vamos a hacer. ¿Qué es lo que quiero? Quiero un poco o disminuir el acolchado y poner un poco más en el exterior. Así que voy a decir estilo de cuadrícula que he llamado cuadrícula a mis miniaturas de cuadrícula. Y voy a decir que tienen algún margen de cualquiera de los lados sostienen el Alt o la Opción. Encargarse de estos atajos. Y eso es 33. Yo podría hacer el contenedor. Donde lo hace pienso las miniaturas de la sección. Para eso digo lo suficientemente bueno como para igualar esos. ¿Estoy contento con esos ahora? Yo soy. Necesito cambiar las imágenes. Lo sé, y estoy bastante contento con eso. ¿Necesita empujar ? Ignorarlo. Aquí hay uno. Éste de aquí. Odio bien el paisaje. ¿Quién mira un sitio web? Paisaje fino. Podrías hacerlo, pero tenemos que abordarlo al menos ya lo que probablemente voy a hacer es hacer que esta grilla vaya. Deshazte de mi 0.5 y hazlo uno por uno. Bien, entonces tengo esta y esta opción de grilla aquí. Lo que quiero hacer es Echemos un vistazo a este de aquí. Por lo que golpear héroe estaba alineado a la derecha en el, en todos los demás. Pero esta de aquí, en realidad voy a hacer tipografía. A se lo mandan a éste, así que va a estar bien, ¿verdad? Alineado a la derecha. Y entonces éste va a estar centrado. Este tipo de aquí, ¿qué le hace ir a la derecha? ¿Te acuerdas? Bien. Estaba haciendo el juicio de flujo, lo estaba obligando a ir al no hacerlo en absoluto. Es el padre del padre. Padre está diciendo que no es lo que quiero. Es gracioso cuando tienes grid es el padre y luego dentro de la grilla, tienes Flexbox. Un poco los confundió como demasiado. Bien. Así que aquí he dicho que todos dentro de ellos van a la derecha, pero en realidad todos los que están dentro de él serán vistos hasta ahora. Bonito. Y tenemos alguna altura mínima en alguna parte. No puedo recordar de dónde lo conseguimos. Lo que te da todo el relleno dentro de esto es que el diblock. Mira. Veamos el tamaño del espaciado. Hay una altura mínima proveniente del clic de comando o control del dibloque, que es lo que he llamado a esta cosa terriblemente nombrada. ¿Y cómo lo llamamos? Div aquí? Ya tengo un div, Hera. Ojalá que no. Vamos a decir anular esto para que sea. Yo uso esa opción, mantengo presionado Option o Alt en una PC y simplemente arrastre hacia la izquierda y hacia la derecha. Sobre todo cuando no estás seguro, solo te gusto, no sabes qué escribir. Este de aquí va a ser mucho más pequeño en esta opción. ¿Se ve bien redondo? Se puede girar el propio perno. Se puede decir que la imagen dos es el estilo que tengo aplicado a esta cosa de aquí. Dale un poco de nombre, héroe de la imagen. Y voy a decir que obtienes tal vez el radio de esquina de cero. Creo que se ve mejor en. Pero si quisieras dejarlo fuera, podrías redondear bien. De heroína y va a ser cuadrado. Pero en realidad voy a volver a la ronda. Necesita alguna altura mínima. Voy aún más pequeño. Opción de arrastre. Esta cosa de aquí tiene una brecha de cuadrícula. Voy a cerrar un poco solo por este punto de ruptura y listo. Pero lo que realmente quiero hacer es para div Hero, quiero agregar un poco de relleno al fondo. Entonces, ¿dónde edito? Puedo editar a esta sección miniaturas. Podría agregarle un poco de relleno superior, perdón, margen superior. O podría averiguar el héroe de la imagen. Bien, porque esto es bastante único. Sólo se está utilizando en esta imagen. Yo se lo podría hacer a éste o al otro. Totalmente bien. Se interesante ver lo que hiciste o no. Simplemente gracioso como como no hay hacer ninguno de los dos. Bien. Ahuesale mi teléfono. Bien. Estoy contento con el dos por dos. Bajemos al móvil. Y quiero cambiar esto arriba aquí. Esta es una importante. Tiene una cosa llamada div nav. Tiene flex aplicado a él y tiene horizontal. Vamos a ir verticales. Y vamos. Esta es una especie de interesante, como ver esa voltereta. Probablemente hubiera sido útil si usamos Flexbox para esto y volteamos a esos dos, tal vez la imagen estaría mejor en la parte superior. Pero la grilla no la tiene. Yo no lo creo. Entonces. Voy a ir vertical. Y no quiero usar esto, empujándolo a los bordes. Quiero que sea justo en medio del aire, pero puedo aplicar el hueco para filas y columnas en este caso es filas. Voy a mantener presionada mi tecla Opción en una Mac, tecla 0 en una PC. Amplía eso un poco. Bien, yo sería suficiente. Bien, todo lo demás aquí, ¿es correcto ser de ese tamaño Probablemente sea demasiado grande, grande, grande, probablemente demasiado grande. Entonces mi héroe pegador en el celular, va a la tomografía. Voy a mantener presionada mi tecla de opción y arrastrarla hacia abajo. A mí me gusta así. En cuanto a la altura voy a bajar de ella. Texto de botón. Puede ser masivo. El todo lo demás. Vamos a meternos en la imagen porque es raro en general, pero se ve aún más raro en los teléfonos móviles. Entonces voy a decir imagen de héroe. cerrará esta grilla? Esa es una buena pregunta. Así que vayamos a nuestra exhibición ninguno. Y lo hizo. Bonito. Bien, esto, pero aquí no encaja. Así que voy a agarrar la parrilla de mis padres. Y voy a decir que estás puesto la grilla. Sé que es la grilla porque ahí tiene este pequeño icono. ¿Ves que esa es la cuadrícula y quiero que el espaciado esté ¿Dónde está? ¿Qué tipo de ver? Estamos en la grilla, una grilla. Por eso voy a decir que va a ser uno por uno. Y lo que podría hacer es jugar con el ancho. Son completamente los que intentaremos y llenaremos el espacio. Es Dios. Entonces algo lo está empujando desde los siglos. Echemos un pequeño vistazo. Vamos a salir de esta cuadrícula miniaturas, ¿lo estás haciendo? Y tamaño, espaciado. Mantenga pulsada Comando clic. Sí, es grilla, las miniaturas todavía se lo están dando. Pero viene del pequeño icono en cuclillas. Mira eso. Él es el de la tableta. Él viene de esto. Entonces voy a anularlo y ponerlo a simple mirada a cero. Ambos lados. ¿Cómo me veo? Comando Shift P, Control Shift P en una PC. ¿Eso me gusta? Siento que necesita algo de acolchado en el exterior. Comando Mayús P para apagarlo, o Control Shift P. Y creo que probablemente voy a volver a mi cuadrícula, espaciado de miniaturas. Probablemente voy a poner un poco en ambos lados manteniendo pulsada la tecla Alt u Opción. Tal vez vaya y la grilla misma. Entonces, ¿y si escojo 16? Voy a agarrar la grilla misma y arrastrarla a 16. Así que coincide con Command Shift P. Echa un vistazo a un par de teléfonos, como diferentes tamaños de un teléfono. Sí. ¿Alguna otra cosa que cambiarías? Los necesitamos porque botón se lo lleva. Toma de botón que tiene sentido, ¿verdad? Entonces, ¿cómo los llamamos? Esta es hacer una pregunta y esa se llama profundidad llamada Hacer una pregunta. Entonces, lo que podría hacer es volver al escritorio porque quiero cambiar esto hasta el final. Voy a salir del modo de vista previa porque está atascado ahí. Y éste es frío. Simplemente entonces me hicieron una pregunta. Haz una pregunta. Y este de aquí también es hacer una pregunta. Pero en el móvil número 1234, eso tenía un poco de sentido por aquí. Pero cuando está en la versión del teléfono móvil, no tiene sentido. Es solo apagarlo ahí. Entonces vayamos a la posición y a la oposición y a la exhibición. Mientras que la pantalla, el diseño, la exhibición apagada. Eso es beta. Este botón, este botón tal vez sea un poco descomunal. Esto marca aquí abajo. Estos botones, probablemente quiero hacerlos ir tarjeta de botón. Cualquier otra cosa que quisiera todavía quiero pasar por todas estas cosas. Entonces voy a decir alineación. Quiero que seas el centro. ¿Quiero que estos estén centrados? Voy a tener que mirar esto un poco, pero creo que hemos hecho todo el trabajo duro. Probablemente voy a ir a tomar un descanso, volver, mirarlo. Pollo en mi celular. Entonces iría a publicarlo. Y luego ve y revisa la URL en mi teléfono o mi tablet para que se vea realmente bien. Pero creo que estamos ahí para este video de todos modos. Ella está sola de todos modos. ¿Cómo lo encontraste? ¿Cuánto tiempo? ¿Esto es? Cuanto tiempo me tomó. Tuve que hacer una pausa ahí en el medio que recorté en la edición. Pero este es relativamente el tiempo que me tomó. ¿Cuánto tiempo tardaste hoy en llevarte a Alice? ¿Te tomó 10 min? Probablemente no. Pero avíseme, sea interesante saber. Y también sería interesante saber lo que hiciste de manera diferente. Bien. Dime el largo camino loco de que tienes algo que trabajar y luego descubrí que hay una mejor manera. O podrías haberme visto hacer un tiempo loco cuando estás como, ¿por qué acabas de hacer eso? Probablemente sea correcto. Y probablemente seas mejor haciéndolo a tu manera. Y no hay papeles adecuados ni, ni endurecer formas rápidas de hacer todo. Se puede llegar a una gran cantidad de soluciones utilizando diferentes métodos. Así que avísame y a otras personas a través de los comentarios tú mismo solo para ver que estabas como, Oh si, Entonces lo hice de esa manera. Yo lo hice de esa manera. Pero miren a Jane o Dave lo hicieron de esta otra manera y tiene más sentido que los dos. Echa un vistazo en los comentarios. Deja tus comentarios. Mi camino no es el mejor camino. Yo soy. Razonablemente, soy un diseñador web bastante seguro, pero también estoy muy emocionado de hacer edición de video y diseño gráfico y esas cosas. Entonces habrá gente que ojalá tú, te pongas mucho mejor que yo realmente rápido. La ola va a cambiar. Habrá mejores formas de hacer las cosas. Entonces sí, no estoy seguro a dónde voy con esto. Sólo estamos divagando porque como el final, ese fin, te veré en el siguiente video. 57. Cómo usar Px Rem & Em's en Webflow: Hola a todos. En este video vamos a ver por qué no deberíamos estar realmente usando píxeles para fuentes y deberíamos estar usando anillos, veremos los extremos también, pero los anillos como el que queremos. ¿Por qué los vamos a usar? ¿Cómo hacemos que funcionen? De eso trata este video. Para empezar a entender esto, agreguemos dos párrafos. Entonces vamos a agregar un párrafo justo ahí. Y vamos a hacer dos de ellos por ser arreglados. Voy a agregar dos estilos diferentes va a ser mi experimento de texto, uno, copiar. Y voy a tener otro aquí abajo. Y frío toma un Spearman dos, voy a doblar estos en un segundo. Así que hemos estado sentados ahora fuentes a un tamaño de topografía de 16 píxeles. Solo tecleemos 16 para forzarlo ahí. Bien, aquí, por aquí, vamos a decir, vamos a usar rems. Las habitaciones es mejor de lo que pretende decir, ya sabes, cubriremos las dos pero usaremos RAM. Bien, Guau, eso es grande. Así que vamos a escribir en una habitación. ¿Por qué las llantas son tan grandes? El borde es uno de los tamaños predeterminados. Por lo que el tamaño predeterminado para la mayoría de los navegadores es 16. Entonces, si escribes 16 rines, es decir 16 veces 16, obtienes fuente gigante. Pero si solo necesitas un tronco de 16, solo necesitas un Rim. ¿Cómo lo harías si necesitaras habitaciones, qué tamaño sería? ¿Puedes hacer los cálculos? Yo hice 32. 32. Oye, entonces terminas con ese tipo de escalado si quieres 1.5 habitaciones, ¿qué tamaño es ese? 20 a? El editor habría recortado eso para parecer muy rápido, pero me llevaron un poco de tiempo. Entonces haces ese cálculo. ¿Por qué nos molestamos? Es porque hay gente por ahí que necesita actualizar su navegador para que todas las fuentes sean más grandes. Bien, déjame mostrarte un ejemplo. Voy a cargar, voy a publicar esto. Y voy a cargar en un navegador, te los comiste. Bien, así que lo tengo en Internet. También voy a comprobarlo en Chrome y voy a ir a mis preferencias y saltaré con un tamaño de fuente. Bien, en Chrome, cambian todo el tiempo, pero yo estoy en apariencia y se puede ver el tamaño de la fuente. El valor por defecto para esto es medio. Y lo que voy a hacer es Alt arrastrarlo para que pueda ver ambos de estos. Tú los escribes. ¿Bien? Así puedo verlas a las dos. Si ahora tú, alguien tiene problemas de accesibilidad, tiene discapacidad visual. Puede que ahora solo sean viejos, tengan sus lentes puestos. O simplemente como gigante toma fuentes como el teléfono de mi papá y lo agarra cada vez. Es para gustar el tamaño supermasivo. Bien. Así que él o cualquiera podría ir y cambiarlo a grande. Bien. ¿Ves lo que está pasando aquí a la izquierda? Puedes ver este se sienta un Rin aumentado. Este no lo hizo, tampoco eso. Porque los sentamos a pixeles. píxeles no quieren cambiar. Ellos, se quedarán 16 para siempre. Mientras que la persona que necesita más accesibilidad, bien, esa es la palabra que estamos usando, k porque así es como la llama Google. Está buscando tu sitio web para ver. Es este sitio bueno, útil para todo tipo de personas, personas que necesitan fuentes grandes. Y no es un gran drama para nosotros estar sentando cosas a llantas en lugar de píxeles. No es particularmente difícil, pero sí significa que las personas que necesitan hacerlo pueden aumentar el tamaño de la fuente. Ahora, independientemente de si usas rems o píxeles, si haces eso, la mayoría de la gente en el mundo no usa eso sentado ahí, solo ve, a mí me gustaría acercarme. Sé cómo hacerlo en mi Mac. Es Command Plus para acercarlo. Bien. Probablemente sea Control plus en una PC, alejar el zoom. No importa si se trata de píxeles de habitaciones, esta barra blanca. Google le gustaría ver que se usan las llantas. No es una cosa enorme. Si no lo haces, puedes pegarte a los píxeles en este momento. Si eres nuevo y te gusta demasiado la piel, eventualmente te mudarás a unas llantas porque es solo una cosita pequeña. Tenían una pequeña marca en contra de tu sitio web. Pero cuando vas por la dominación de los motores de búsqueda, quieres todas estas pequeñas marcas, una garrapata al lado del nombre de tu sitio web, así que se clasifican mejor. Puedes fingir esto dentro de un flujo de trabajo. Te voy a mostrar aquí arriba. Cuando voy a éste, tenía ticks zoom preview. Está por defecto a 16, pero si lo muevo hasta 32, ¿ puede ver que todos estos se mueven hacia arriba? Chrome simplemente lo llama medio. El valor por defecto medio para la mayoría de las cosas es 16. Bien, entonces aquí solo dicen, si lo restablezco, el valor predeterminado es 16, pero si lo hago pequeño o grande, lo previsualizará aquí si quieres ver cómo se descompone y cambia, no lo compruebes porque a veces tienes un título que tiene que estar en dos líneas como esta. Y es grande y es accesible porque es descomunal, es muy grueso, muy buen contraste. Y podrías decidir dejarlo como píxeles, porque si se expande y contrae solo rompe la diapositiva y eso es peor que tener una fuente. A lo mejor es eso. Tan descomunal como podría ser. Bien, así que compruébalo. Bien, entonces, ¿cómo los pasamos y actualizamos todos? No tenemos que hacerlo, pero vamos a tener como un truco fácil de hacer. Digamos que necesito que esto sea. Y di este de aquí. Sé que son 50. ¿Cómo hago que tenga las llantas adecuadas? Solo ve a dividir por 16, que es el predeterminado y luego escribe REM, y ojalá haga los cálculos. Ahí vas. Ya ves que no cambió. Se calcula que 15 oh, perdón, 50/16 y llantas es 3.125. Bien. Podrías decidir que son tres porque eso es una especie de, no me gustan los decimales que se ocupan de fuentes. Bien. Bien, entonces divídalo por 16 y cuál es el tamaño de fuente que quieres que sea. Te conseguimos el tamaño de la llanta. Pero solo debes saber que si alguien va y cambia el valor predeterminado, se meterá con tu diseño. Eso está bien. La otra cosa que podrías hacer es que podrías hacer lo mismo con tu altura, tu altura de línea. Si guardo esto como pixeles, echemos un vistazo. Cuando me hago más grande, se pega a los píxeles porque los píxeles no van a cambiar. Pero las llantas se ven. ¿Puedes ver que necesita subir proporcionalmente al tamaño de la fuente? Entonces voy a volver a las tres. Y por aquí también puedes usar habitaciones. Entonces voy a hacer, ¿qué es 52? ¿Por qué no puedo darle click ahí? Porque viene de todos los rubros. Debería ir a cambiar mis rubros petroleros. No debería estar haciendo esto solo por aquí. Entonces debería ir a todos los rubros y debería estar haciéndolo aquí dentro. Dan malo. Bien, así que voy a decir, voy a hacer una u dividida por 16 RAM, golpear a Nico. Y éste está tachado porque eso es seleccionado lo está anulando. Entonces voy a mandar clic en él para deshacerme de él. Voy a volver a mi batazo. Y ahora vas a ser 50/16 REM. Para agregar un poco de complicación extra. Pero estamos haciendo que nuestro sitio sea más accesible tanto para los usuarios. Y debido a que el buscador de Google quiere que lo haga, queremos posicionarnos bien. Mi consejo es solo usarlo para cosas de fuentes. No lo use para espaciado. Se puede. El problema es, es que si decides usar mis márgenes, como hacen algunas personas, veo a mucha gente usando su espaciado. Donde si tengo, déjame encontrar algún rumbo a alguna parte. Hagamos la altura mínima, bien, podrían ir altura mínima en esta es una talla. Encuéntralo ancho contenedor, div nab. Ahí está, altura mínima. Puedes usar anillos aquí. El problema es, es que va a subir y bajar cuando la gente cambie su configuración dentro del navegador, y eso no es lo que queremos. Puedes hacerlo totalmente lo hace, y hace que tu sitio sea más flexible, pero las mayores terminan rompiendo cargas. Y no es una de las cosas con las que Google cuenta con la accesibilidad. Ahora, esa es mi opinión. Google nunca le dice a nadie exactamente lo que hace. Pero sí, llantas, muy buenas para fuentes y cosas relacionadas con fuentes. A continuación, discutamos objetivos. Tú, Maxine está metido en ti. Es él, rim. Digo ems y rems. Bien. Así que hemos hecho rampas fáciles. Solo usa esos. No uses el Ames. Esa es la respuesta corta. La respuesta larga es como, estarías como, ¿por qué? Te diré por qué. En un tipo razonablemente complicado de que son simplemente complicados. Yo solo los uso todo el tiempo y me ocupo de la astucia hasta que me enteré de llantas. Entonces tengo este div blocky, voy a moverlo ahí arriba. Voy a poner un poco de etiquetas de párrafo de texto para llegar ahí. Voy a ser súper elegante y me voy, bien, voy a tener mi clase elegante y voy a usar Ames. Y sé que 16 no es lo que quiero porque eso es 16 veces el valor predeterminado. Los chicos quieren uno de ellos, uno de los por defecto, que es 16. Entonces funciona igual que llantas en ese caso. El problema con ello es que mira a su padre para comprobar que el valor predeterminado está bien, mientras que un objetivo raíz, bien, por eso es RAM. la raíz m la busca no le importa lo que el padre le esté diciendo que haga. Sólo dice, voy a buscar el navegador. Y el navegador dice que tengo 16 años, soy uno de esos. Mientras que dice el AME, voy a mirar a cualquiera por encima de mí, a cualquier padre. Voy a usar eso. Entonces, si te decidiste por este bloque, voy a crear una clase para ello. Este va a ser mi div de fantasía, div aquí. Voy a hacer la topografía, todo dentro de ella. Ya lo hemos hecho antes, ¿verdad? Hemos dicho que todo sea público en una etiqueta corporal. Dijimos que todo sea blanco, para que no tengamos que repetirnos. Entonces en este caso, digamos que alguien decidió, voy a hacer tres ME. ¿Por qué cambió eso? Está configurado en uno. Lo puedo ver. Hay una imagen debe ser 16. No, no. Está mirando a su padre que dice, yo soy tres M's, sé uno de ellos. Entonces te vas, él está haciendo lo que dijo. Por eso usamos la raíz. La raíz se remonta al principio y solo mira el navegador y dice: ¿Cuál es tu valor predeterminado? Yo seré eso. O es este tipo va, que hace el padre voy a ser múltiplos de eso. Entonces, si dije que quería ser tres objetivos para este texto de párrafo, ¿qué va a pasar? Va a ser tres objetivos de los padres por tres equipos dentro de, bien, así que por eso no usamos nombres. Entonces puedes alguna de las veces solo serán 16. Algunas veces terminarás con múltiplos, que no queremos. Entonces voy a deshacer hasta que vaya. ¿Algo más que quiera discutir? No, eso es todo. Por qué lo llamaron objetivos es de topografía más antigua y predigital. Y básicamente se quedaron, si tuvieras una puntería, sería una de las tallas de la M. Así es como tomarían el tamaño de las fuentes. Distintas letras son diferentes. No usarían el tamaño del ojo porque es demasiado estrecho con una M mayúscula especialmente sería un muy buen tipo de es como una caja, ¿verdad? Entonces ellos usan eso. Miran cada fuente y van, bien, todos los mayúsculas terminan juntos. Y eso es lo que vamos a usar es como la línea base para esta fuente y vamos a llamar al EMS porque es justo pero se convirtió en el m's. De todas formas. Ese es mi entendimiento de ello. Sí, eso es. Usa anillos. No uses n's. Fuentes, no use píxeles, use rems para espaciado, use píxeles, claro como barro. Bien, te veré en el siguiente video. 58. Cómo usar la altura de la ventana de visualización VH en Webflow: Hola a todos. En este video vamos a mirar la altura, y vamos a ver este número aquí, altura de la ventana VH, bien, este está establecido en 80. Significa que en esta publicada, esta gran caja gris aquí sólo va a ser 80% de la ventana gráfica. La forma en que se puede ver. Ves que cambia dependiendo del tamaño de la ventana gráfica. Y en este caso, el 80 por ciento. Es como porcentajes, pero se basa en la altura del puerto de visión. Así que vamos a averiguarlo. Bien, ventana gráfica. Vamos a hacer altura de ventana gráfica, pero ¿qué significa la altura de la ventana gráfica? Estoy previsualizando esto en un navegador. Este es mi puerto de vista desde esta esquina superior tippy aquí, todo el camino hasta aquí. Todas estas medidas. Tu computadora podría ser más pequeña, podrías estar en esta. Entonces el ancho de tu ventana gráfica va a ser aproximadamente la mitad del tamaño que el mío. Entonces eso es algo a considerar. Depende de quién lo esté viendo y en qué dispositivo lo estén viendo. Lo mismo con esto. Si hago altura de ventana gráfica y estoy mirando una computadora como esta, no lo sé. A partir de los noventa, pequeñito pequeñito, va a usar de ahí para allá como sus medidas. Si digo B 100 altura de la ventana gráfica, va a ser así de grande. En mi máquina. Es así de grande. Es posible que uno de esos se unan a la envoltura de Norma una vez que el ancho de su ventana gráfica va a ser épicamente largo. Entonces es un poco complicado. Es, definitivamente es mucho más consistente con la altura. Vamos a hacerlo. Entonces, por el momento, algo está manteniendo esto abierto. Por qué lo hace div hero, es, tiene una altura mínima. Me voy a deshacer de él. Alt Opción clic. Lo que voy a hacer es que no voy a usar altura mínima porque esta es una especie de variable de todos modos, así que no necesito usar min-max. Entonces solo voy a decir que la altura es, digamos 100 vh. Bueno puedes, de este desplegable de aquí, 100 vh es el 100% de mi ventana gráfica. Quiero que este héroe div esté al 100% de mi altura de ventana gráfica, lo cual es bueno. Echemos un vistazo. Vamos a previsualizarlo. Entonces, Comando Mayús P. Ahora, mira, es todo el asunto excepto lo que es solo mirar hacia abajo aquí. Vamos a cerrar eso. Echa un vistazo hacia abajo. Ahí hay más. Pensé que decía al 100%. Lo está haciendo, no es una, no está tratando de llenar el elevador espacial. Lo que hace es que se vea tu altura completa. Y luego decir Es esta caja es de 100, es ese tamaño. Por lo que es de arriba aquí a la parte superior de la parte inferior. Es tomar esa medida y aplicarla con este cuadro gris más claro arranca. Por eso continúa un poquito. ¿Eso tiene sentido? Tipo de agarra esa medida y luego la aplica. Bien, vamos a echar un vistazo, vamos a hacer como decir 50 altura de la ventana gráfica. Mira el completo desde arriba hasta el fondo, lo divide por dos y luego las gemas esa medida aquí adentro. Para que puedas decidir si esto va a funcionar para ti. Es muy agradable en algunos sitios donde hay diferentes secciones. Tienes dicho navegación y cae hasta ellos. Puedes usar la altura completa del navegador. Bueno, la altura de la ventana gráfica. Muchas veces lo que me gusta hacer es tenerlo para que todavía se pueda ver. Estoy pinchando aquí sosteniendo turno. Entonces, si voy al 80 por ciento, estas cosas siguen alcanzando un pico un poco como por encima del pliegue. Es solo asomarse cuando alguien entra en mi sitio y no usa la navegación, no creen que no haya nada más en esta diapositiva es solo un tipo grande y un traje de oruga. Lo es, pueden ver estas cosas recogiendo y esa es una manera de forzarlo a recoger. Mientras que antes, cuando hacíamos min-altura, esperando, esperamos que la gente pueda ver. Por eso la mantuve bastante pequeña. Entonces, deshagámonos de eso. Vamos a un min-altura de no puedo recordar. Entonces sí recoge. Pero, ¿qué pasa con la de otra persona? Voy a previsualizar comando Shift P. Control Shift P. Si alguien tiene un monitor así de grande, no va a funcionar. Se van a ir, es sólo el tipo del traje de oruga. Mientras que si lo hicimos con la altura de la ventana gráfica, volvamos. Lo haces bien. Hagámoslo otra vez. Te garantizamos, haces el 80 por ciento de la altura de la ventana gráfica. No importa en qué dispositivo estén mirando. Siempre va a ser del 80%. ¿Puedes ver? Estaba en ella tampoco puede. Bueno, Visualmente se vuelve demasiado pequeño. Está calculando la altura de la ventana gráfica y luego haciéndola el 80% de eso. Entonces es bastante genial, genial para la altura. Ahora para que esto funcione realmente bien, si acabas de saltar a este video, es que he configurado a este héroe div para que sea un layout de flexbox porque me permitió hacer esto. Si en realidad lo apago, me permitió ir. Tú Flexbox, eres vertical y quiero que te alinees en el medio. ¿Bien? Tan rápido div a su alrededor. Haz eso si quieres estar en la mitad de su altura de ventana gráfica, este niño de aquí, puedes ir por allá. Oh, hombre, lo rompí totalmente todo. Tú en la maquetación de esa manera. Regresa. Esa es la altura de la ventana gráfica. Lo único a considerar es cuando lo estás previsualizando, aquí es un poco complicado, porque cuando estás previsualizando en estos, usando estas opciones, especialmente el teléfono móvil, puedes ver que es haciendo un porcentaje de la ventana gráfica y ser así es raro. Pero los teléfonos de nadie tanto tiempo, o al menos no por el momento. Entonces es difícil ir aquí en Webflow. ¿Qué tan alto va a parecer eso? ¿Ves que está usando la ventana gráfica ahora teléfono, mi teléfono probablemente se trata de ese tipo de relación, verdad? altura a peso, altura a cintura, altura a ancho. Bien, la forma de sortear eso y previsualizarlo es que publicas tu sitio, lo publicas y luego lo abres en otro navegador. Will en realidad, hagámoslo de esa manera ahí. Bien, entonces esta es mi ventana gráfica. Sólo puedo arrastrar mi monitoreo, lo que mi, lo siento, mi navegador y no me entiende. Puedo fingir. Pero quiero ver ese móvil y no me lo está mostrando. Entonces qué puedes hacer en Chrome al menos, y estoy bastante seguro de que todos ellos lo resuelven. Si estás usando algo que no sea Google Chrome, puedes hacer clic derecho en él y decir, inspeccionemos este sitio web. Esto es bastante genial. Y tú, lo que estás buscando es este botón de aquí. Creo que el tuyo podría estar en el lado derecho o en el lado izquierdo, pero estás buscando este ícono. Haga clic en él. Y se puede decir, me gustaría mostrarme esto en un iPhone pixel cinco, ¿de acuerdo? Lo bueno de esto es mirar esto. En realidad está cortando de abajo hacia arriba. Entonces así es como se verá en mi teléfono. Si tuviera uno nuevo, tengo un pixel viejo. Pero, ¿cómo va a quedar en el iPhone SE? Va a verse diferente, un teléfono grande, diferente proporción. Pero al menos el miembro de la ventana gráfica está coincidiendo con lo que va a parecer en ese teléfono. Mientras que aquí es súper larga y elástica. Chicken y Webflow podrían ir y hacer cosas aquí donde puedas especie de momento, puedes calcular el ancho, pero no puedes hacer la altura. Chick se siente como algo que podría agregar, bien, de nuevo a este ancho de ventana gráfica. Nunca uso. Se puede hacer. Podrías tener un buen caso de uso para ello. Y te voy a mostrar algo al azar porque no se me ocurre un buen uso. Y voy a agarrar mis miniaturas de cuadrícula. Y voy a decir Tus miniaturas de cuadrícula van a ser de un ancho de, digamos 50%, 50 de ancho de ventana gráfica, VW. O puedes dejarla caer aquí y solo miraba mi ventana gráfica. Todo el asunto dividido por la mitad y dijo, bien, esa es esa medida y la voy a aplicar a aquí. Fíjate que no está en el medio. No es como un 50 por ciento desde el borde o ir al borde de la pantalla y pararla diciendo, ¿cuál es el ancho? Bien, sé cuál es ese número. Tenerlo y aplicarlo a esta caja y va a la n. Por eso está un poco por encima del 50%. Lo entiendes. Bien, eso es VH y un poquito de VW. En el siguiente video. 59. Cómo dar un estilo al componente de barra en Webflow: Hola a todos. En este video vamos a ver a este tipo, la barra de navegación. Es un componente prefabricado k. Y miramos antes en el curso, y los dejamos un poco porque nos fuimos y construimos este realmente simple pero solo tiene un botón. Un botón no es divertido. Vamos a tener múltiples botones. Y debido a que estamos usando este componente prefabricado, cuando nos ponemos manos a, digamos vista de teléfono móvil, Es un menú de hamburguesas y mira, se desliza hacia afuera. Tipo de. Este video va a ser divertido porque va a hacer algo que va a empatar en todo ese conocimiento que hemos aprendido en el curso hasta ahora. Toma todas las partes buenas de las cosas prefabricadas como esta barra de navegación aquí que son componentes prefabricados pero también podrás personalizarla, conseguir que haga lo que queremos, flexiona nuestras increíbles habilidades de Webflow. Tú estás listo, yo estoy listo. Hagamos esto. Entonces primero, solo tengo un sitio en blanco para mantenerlo separado de lo que hemos hecho. Porque lo que hicimos antes es que nuestra navegación estuvo bien. Acabamos de tener un botón. Entonces cuando bajamos al móvil, estuvo bien. Nosotros solo usamos ese botón. Bien. O lo suficientemente pequeño como para ir a un lado aquí. Pero un sitio web de un botón no es particularmente divertido. Así que hagamos un sitio web de múltiples botones. Entonces vamos a agregar a este sitio en blanco el componente Navbar, arrástralo. Tiene algo genial, tiene algunas cosas. Tiene esta envoltura exterior, un poco como una sección. Tiene un contenedor que lo mantiene en el ancho correcto. Tiene un espacio para un logo. Tiene un envoltorio alrededor de un montón de botones diferentes. los llamaban enlaces de navegación Aquí los llamaban enlaces de navegación, bien, en vez de botones. Y luego hay un botón de menú que realmente podemos ver porque está apagado y solo se aplica. Tu su móvil ahí está Hola. Por eso nos gustan estos componentes porque han hecho mucho de esto encendiendo, apagando, haciendo funcionar toda la alineación. Y más aún es vamos a hacer clic en, si haces clic en el pequeño icono de inicio aquí para navbar. Y ya sea la opción Configuración aquí o el piñón de ajuste por aquí. Estas cosas, esto no es diseño web como esto no es cosa de código que estamos tratando de averiguar. Qué es el posicionamiento absoluto. Esto es cosas que Webflow ha hecho para facilitar cosas como la navegación. Lo que han dicho en realidad es cuando bajas al móvil y yo lo previsualizo y hago clic en él, hace un desplegable. ¿Y si quieres venir de lado, en lugar de reconstruir todo el asunto? Se puede decir navegación. Ven de la derecha. Vas a vista previa, viene con un clic derecho en cualquier lugar. Se va. Algunas otras cosas divertidas. Bien. Digamos que tampoco importa lo que vea la orina. Puedo ir a mi configuración y decir, quiero agregar otro botón. Puedo hacer clic en Agregar enlace y agregar otro. voy a llamar a esto mi tienda. Sólo porque lo que vamos a llamar a esto mi tienda. Bien. Lo hace fácil. Sé que significa, ya sabes, ahora solo puedo agarrar ese elemento de enlace, ir a copiar y pegar, eso es exactamente lo mismo, pero el flujo de trabajo lo ha hecho aún más fácil. Ahora sin habilidades realmente geniales, sabemos que hay un div rápido envuelto alrededor de estos tipos manteniéndolos todos juntos. Y otra cosa genial que han incorporado en esto para nosotros es vamos a previsualizar el comando Shift P. Control Shift P es cuando me baje. Puedes ver aquí, voy a añadir mi logo en un segundo. Bien, cuando llegue hasta aquí, se convierte en el menú de hamburguesas, que es un poco temprano. Bien, hay mucho espacio para todas estas cosas. Sólo tengo cuatro botones. Entonces lo que puedes hacer es que puedes decir configuración de la barra de navegación solo Vamos. Quiero que el icono del menú se encienda para flujo turbulento. Ahora, vamos a encenderlo para teléfono horizontal y abajo, o simplemente móvil, dependiendo de cuántos botones tengas. Bien, así que ahora cuando lo previsualizo, me pongo a tablet. Ahí se queda. Pero cuando me pongo al móvil del paisaje, se activa. Genial, Gracias, flujo de trabajo. Hay otras cosas con las que puedes jugar con K, jugar con la flexibilización. No te metas con la flexibilización. Hay todos. El default fue bueno. Expo fue solo hacer uno mientras estás aquí. ¿Listos? Bien. Aquí vamos. ¿Qué más? El cronometraje? Si quisiera tomar 2 s, ¿cuánto tiempo debería ser tan grande? ¿Cuántos milisegundos te acuerdas? ¿Lo tienes bien? 2000. Bien. Y eso va a llevar demasiado tiempo. Vamos a darle un adelanto. Bien, agrega tu propio efecto de sonido. Entonces veamos entrar ahí y romperlo, arreglarlo. Y digamos que queremos cambiar el menú más grande, alguien. Esto es algo interesante para esta configuración en particular aquí, este componente, si quiero esto y quiero darle estilo, puede bajar a uno de estos, así que en realidad aparece. Y luego puedo dar click en él. Y se trata como una fuente. Curiosamente, los iconos se tratan como una fuente. Puedo decir que eres de un color diferente. Bien, el color de mi marca, que siempre es algún tipo de verde. Va a ser más oscuro por aquí. Wa contraste ganando oro. Volvamos a las tapas de escritorio. Vamos un poco. Todo esto es bastante rápido y rápido, un poco rápido y quiero volver a verlo. Pero voy a ir un poco más despacio ahora y tratar de llegar a cómo se veía en mi último proyecto. Bien, ¿dónde estaba? ¿Aquí? Es aquí luciendo algo así con este tipo de botones. Voy a hacer una versión rápida de la misma porque quiero mostrarles ahora cómo podemos flexionar nuestras habilidades. Para que se vea así, pero no voy a pasar demasiado tiempo. Entonces primero, tengo esta cosa de la marca, que es genial. Puedo lanzar un logo. Entonces tengo uno de antes. Ahí está ahí. Está en tus archivos de ejercicios. Puedes poner cualquier logotipo que quieras. Bien, usamos esto antes para nuestros patrocinadores, para nuestro primer sitio web de flujo web que está ahí. Ahora, ¿cómo lo consigo en el centro? Podrías hacer flex. Puedes empezar a flexionar o simplemente podrías decir que en realidad logo tiene algún acolchado. No hay nada malo en eso. No hay nada que puedas flexionar y conseguir que los niños estén centrados. O simplemente podrías hacer esto porque esto en particular, este nav nunca va a hacerse más grande o más pequeño. No quiero que lo haga. Creo que es lo suficientemente grande. No va a expandirse y contraerse. Bien, vamos a darle estilo a estos botones. Entonces lo que voy a hacer es agregar una clase llamada button nav. ¿Y qué voy a hacer? Empecemos por el color de fondo. Voy a escoger un color al azar, tal vez ese verde oscuro. No puedo recordar de qué se trata. Ellos lo hacen. Las garrapatas van a ser la topografía va a ser blanca. Voy a escoger una fuente para todos mis botones. Ahora siempre hago click out y luego empiezo a hacer cosas y qué etiqueta mi estilo. Ahora, tengo el cuerpo seleccionado y sé que eso es lo que estaba a punto de empezar a hacer. Estuche de nuevo en el botón. Y vas a ser una fuente, Droid Sans, no va a hacerlo más pequeño. Y quiero jugar con el espaciado. Ahora voy un poco rápido porque estamos usando habilidades que ya sabemos que voy a hacer esto más pequeño. sostener la tecla Opción en una Mac, tecla alt en una PC y arrastrando hacia arriba, podemos conseguirlo. Yo entiendo ¿por qué hacer con esto? Ese es un punto interesante. Se puede ver que con el 20 2020 confirmar, bien. Eso es parte del trato con el uso de algunos de los componentes, aunque no hay forma de que pueda hacer clic en esto no lo es. Normalmente puedo hacer clic en él y te dirá de dónde está sacando sus estilos. Es esconder a esos una esposa lejos de nosotros. Es predecir esta cosa de romperlo, diciendo, te he hecho un componente de navegación o componente Navbar. Y hay muchas cosas que no voy a mostrarte, así que no puedes romperla. Ahí. Cosas increíbles que nos gustan. Quiero entrar ahí. Quiero cambiarlo. Bueno, voy a tener que anularlo. Puedo anularlo, lo cual es genial. Sé que con esta barra de navegación, hay cosas que van de fondo con carrozas y todo tipo de cosas de buen posicionamiento absoluto. Pero no lo puedes encontrar en Webflow, la salida al final. Pero solo manteniéndolo agradable y sencillo para nosotros. Y quiero ponerle esquinas redondeadas. Tú. Quiere empujar hacia abajo desde la parte superior. De nuevo, podría usar Flexbox, pero en realidad sólo voy a decir todos los botones. Contar con un alto directivo. Aquí vamos. Es editar para todos ellos. Vamos a usar nuestros atajos especiales Comando o Control Retorno, y luego tecleemos NAV, va a bajar un par de mi teclado. Ahora necesito ir al siguiente botón. Podría ir aquí y darle click. Pero recuerda que hay un atajo como va. ¿Recuerdas cómo eliges hermanos que arriba, abajo, izquierda o derecha? Uno de ellos les pegó a todos a la derecha, y a la izquierda. Te di otra vez Comando Regreso. Puedo decir que nav bajó un par, vaya al siguiente. Se siente bien cuando lanzas algunos atajos juntos. Su nombre también, probablemente va a necesitar algo de espaciado. Bien. Voy a ir margen a la izquierda. Se puede ir. Bonito. A la altura de esto estaba en realidad, resulta que el botón era lo que lo mantenía abierto. Entonces lo que voy a decir es navbar, tienes una altura mínima, todos listos pixeles abajo, abajo. Al hacer clic ahí, estoy sosteniendo Shift y usando mis flechas arriba y abajo. Nosotros vamos, Eso va a hacer. No es muy bonito. Así que lo hemos estilizado, usamos algunas de nuestras clases. Podrías haber usado una clase combo, y ahora se va a romper. Vamos a previsualizar. Bien, y voy a llegar a este punto de vista y Dios mío, así puedo irme. Oh, estás como, Si, vamos a ellos y bueno. Bien. En el escritorio. Bien. Ish y eso de aquí, no quiero hacer eso y no llegué a esos. ¿Cómo los cambias? Porque, ya sabes, y sé que sólo puedo ir a este punto de vista y cambiarlo y lo va a cambiar de esta hacia abajo. Estás como, Bueno, ¿por qué no lo veo yo? Haga clic en la barra de navegación y haga clic en el COG o vaya a su configuración. Y se puede decir, espectáculo. Esta cosa de aquí. Me confundió un rato, es como, ¿qué hace cuando eres de escritorio? No. Oh, en realidad, vamos aquí. Y cuando estás en el escritorio, hace algunas cosas raras. ¿Bien? Lo que está haciendo es que solo te está mostrando aquí. No lo está encendiendo para siempre, solo mientras estás en la vista previa. Y ahora puedo darle estilo porque si voy a previsualizar el sitio, se va. Es justo ahí mientras se puede trabajar en ello. Entonces es un poco solo que son temporalmente. Entonces lo muestro, pero se apagará. Así que ahora puedo decir en realidad cuando estoy en este, voy a botones de Nav voy a hacer algunas otras cosas. Va a, va a quedar del mismo color. Voy a anular el relleno. En primer lugar, va a ir con las esquinas redondeadas. Adiós, cero. El relleno sabio, voy a configurarlo así que es agradable y grande y se puede hacer clic en un dispositivo móvil, la fuente va a tener que hacerse más grande. Va a estar centrado, no tiene que ser ninguna de estas cosas, justo lo que he decidido. Bien. 13 en la parte superior y 13 en la parte inferior. Bien. Y es feo. Y está bien, creo que está bien diseñar cosas de algoritmos si sabes, está bien. Pero supongo que el punto era, es mostrarte cómo hacerlo, y lo genial que es este componente de navegación. Porque podemos decir en realidad navbar, lo vamos a esconder. Y si quieres darle estilo, muéstralo temporalmente mientras pueda estilizarlo, me voy a deshacer de una última cosa antes de previsualizarla. Yo quería poner el margen a cero. Ahí hay un poco de margen sobresaliendo por el lado. Parece estar haciendo eso. Y ahora voy a previsualizarlo. Y se apaga y vuelve, parece restablecerlo. Ahora, ahí está mi hermoso menú. Bien, fue un poco torbellino. Me sentí como. Pero supongo que te está mostrando especie de camino de regreso al principio donde nosotros, ¿por qué no simplemente arrastramos todo a la página y construimos los componentes de esa aplicación? Es porque cuando llegamos a las cosas donde necesitamos saber qué son las clases y qué son todos estos ajustes aquí en mi estilo, me refiero a usar hace y cómo anularlos. Y lo que significa azul y amarillo significa rho se vuelve un poco más natural. Podemos comenzar a usar plantillas y otros componentes preconstruidos y ser el jefe de ellos. Haz que hagan lo que queremos. Bien, eso es diseñar el componente Navbar preconstruido en Webflow. 60. Agregar y conectar páginas en Webflow: Hola a todos. En este video vamos a ver este panel de Páginas. Bien, tenemos una página de inicio. Te voy a mostrar cómo crear nuevas páginas. Carpetas, crea páginas que sean borradores para que en realidad no se publiquen mientras estás trabajando en ellas. Discutiremos las páginas de utilidad, las conectaremos con un poco de navegación. No va a ser súper elegante. Bien, ahí está nuestra página Contáctenos volver a la página principal. Y dos están bellamente diseñados página de la cartera. Bien, vamos a hacer. Bien, para crear una página, hay una pestaña Páginas, o puedes hacer clic aquí arriba. Depende de ti. Ambos abren lo mismo. Toda la tecla P se activa y desactiva. Y ya nos han dado una página, una página estática, que será importante más adelante cuando empecemos a hacer páginas cmos dinámicas. Por el momento necesitamos otra página estática que solo significa que no hace mucho. No se extrae de una base de datos. Y si aún no sabes a lo que me refiero, cubriremos más adelante. Entonces necesito otra página. Tengo la costumbre de hacer clic primero en este botón , no en una carpeta. Quiero una nueva página. Entonces haz clic en esa, dale nuestra página y el nombre Contáctenos es un nombre muy común para la página de contacto. La babosa aquí es, supongo, razonablemente importante. Puedes ver que va a ser nuestro dominio slash contáctanos. Vamos, van a ser lo que va a aparecer en los navegadores de las personas, cubrirán algunas de estas configuraciones de SEO más adelante y la protección con contraseña más adelante también. Pero por el momento, vamos a darle un nombre. Vamos a hacer clic en Crear. Y que mi amigo es una página completamente nueva, no hace mucho y deja ir y alternar entre nuestra página de inicio ahora. Y me pondré en contacto con nosotros página. Si voy a mi página de inicio y hago una vista previa de este sitio, no tenemos forma de llegar allí. Bien, no hay absolutamente ninguna manera de que tengamos que salir del modo de vista previa y más allá de nuestra página de inicio y hacer que uno de estos botones al menos se pueda hacer clic. Entonces hagámoslo. Hagamos este gran gigante de aquí. Cuando se le hace clic porque es un botón, tiene aquí este pequeño y agradable diente que dice Ajustes de enlace. Puedes hacer clic en ese o con él seleccionado, ir a este diente sentado por aquí. Hay más en esta opción. Sin embargo, no importa cuál uses. Echemos un vistazo a éste. Es agradable y ordenado, por lo que por defecto es esta URL. Este es nuestro enlace a otro sitio. Si quieres entrar dentro de esta página, quieres dar click sobre nosotros. El siguiente se llama página. ¿Cuál página? Handily, ya está aquí es nuestra página Contáctenos. Bien, vamos a darle un adelanto ahora. Entonces Comando Mayús P o Control Shift P uno es página puede hacer una pregunta y voy a la página grande en blanco vieja. Ahí vamos. Conéctelo. Entonces voy a volver a nuestra página principal. Voy a hacer lo mismo por este tipo. También se conecta hacia fuera. Así que ve a la página vas a la página Contáctenos. El problema es que una vez que llego a esa página de Contáctenos, no hay vuelta a casa. Entonces lo que vamos a hacer es que vamos a mover esta navegación para que esté en ambas páginas. Lo haremos a la manera cavernícola, y luego un poco te voy a mostrar cómo hacer símbolos. Entonces manera cavernícola es, vamos a dar clic toda esta sección llamada nav. Vamos a copiarlo. Es cambiar a mi página de contacto y presionar Pegar. Se va a decir que hay que seleccionar un elemento. Simplemente no sabe a dónde ir. Así que simplemente haces clic en el cuerpo, luego presionas pegar, y va a funcionar. Volvamos a nuestra página de inicio. Vamos a previsualizarlo. Vamos aquí. Tengo algunas cosas. Este botón, si se conecta consigo mismo. Bien. Va voy a la página de Contáctenos, pero no tenemos camino a casa. Podríamos agregar un botón de Inicio y mucha gente va a hacer eso. Lo que vamos a hacer es volver a conectar el logo. Y ese es un tipo interesante de pruebas de usuario. Cade, mira a tu audiencia para ver, sé que muchos sitios web ya no tienen botón de inicio, pero algunos de ellos sí. Dependerá de tu audiencia, si necesitan ser realmente explícitos, como cómo navegar por este sitio, o si son muy conocedores y saben que haces clic en el logotipo para volver a la página principal. Eso es para que hagas tu mejor suposición para empezar y luego hacer algunas pruebas con tus usuarios para ver si se pueden hacer y no atascarse. Así que volvamos a la vista previa. Volvamos a nuestra página de inicio. En realidad, vayamos a nuestra página Contáctenos. Porque lo que queremos hacer es que quiero que se haga clic en este logo. Si es solo un logo viejo plano, como un JPEG o un PNG o un SVG. En realidad, vamos a hacer eso en un cíclico porque ahí tenemos ticks. Hagamos esto primero. Tienes un par de opciones. Haremos una opción en este momento. Sólo voy a seleccionarlo todo y voy a envolverlo y moverlo. Hicimos hipervínculos mucho antes en el curso. Se va a insertar un enlace. El problema es que va a ir por ahí. Es de colores azules, necesito darle estilo. Ignoremos eso por el momento. Tengo el subrayado. Lo que quiero hacer es ir a la página y quiero volver a casa. Bien, y vamos a darle una vista previa ahora para que podamos simplemente previsualizar esta página ahora. Entonces Comando Mayús P, Control Shift P. Pero solo mira ese atajo. Está atascado ahí, aunque dentro de él. Para que pueda volver a la página principal. Puedo ir a mi página de Hacer una Pregunta o mi página de Contáctenos y volver otra vez. Bien, si es una imagen, vamos a fingir que es un logo de imagen como este, hombres guapos. Con una imagen. Tenemos que envolverlo en algo llamado bloque de enlace. Y en realidad, hagámoslo juntos en el siguiente video, lo haré especial porque hay algunas cosas que discutir. Tenemos algo de navegación básica. Podría ser más fácil solo ir a copiar y pegar. Y agrega otro botón de inicio. Tendría que envolver a estos tipos y un poco div para que se peguen a ese lado. Pero ahí tienes. Vamos a entrar en estas páginas son más que más. Entonces este de aquí, crea una nueva carpeta. ¿Para qué sirve? Es cuando quieres agruparte. Como, sé que voy a tener muchas páginas de cartera, bien, así que tengo seis para empezar. Planeo tener 50 o 100. Bien, entonces lo que haces es ponerlos en una carpeta para que no sean solo como esta enorme pila de aquí. Como cualquier tipo de gestión de archivos. A éste se le va a llamar mi cartera, folio de puerto. Y todo lo que es, ¿puedes ver que es un poco como un pequeño ícono de carpeta? Ahora puedo hacerla página que es mi diseño web para un club de kayak de ciervos. Este es el proyecto que quiero mostrar mi portafolio. Quiero que vaya dentro de la carpeta padre de cartera. Entonces, antes de ir más lejos, yo también, cuando hago clic en Crear, en realidad está listo. Si hago clic en Crear y voy a publicar en, digamos que estoy publicando la página de inicio, publicará este lado también, esta página también, aunque no la haya terminado. Entonces, si eres si tienes un sitio en vivo, gente lo está usando en este momento. Yo sólo estoy publicando cualquier cosa porque nadie está comprobando esto. Es, ya sabes, no se ha clasificado bien, probablemente no se ha clasificado en absoluto. Pero tienes un sitio que está funcionando. Probablemente quieras ir a Guardar como borrador. Bien. Y como he hecho una página igual que antes. Bien. Entonces la diferencia es, ¿ puedes ver ahí una, está en una carpeta, y B, tiene ese pequeño ícono ahí? Significa que estoy trabajando en esto, pero cuando golpee Publicar, no va a salir hasta que esté en esa página. Y voy a este pequeño diente aquí y digo, ahora estás escenario para Publish, bien, solo significa la próxima vez, no ahora no está publicado. Solo significa que la próxima vez está escenificada, lista para funcionar. Y la próxima vez que golpee Publicar. Bien, va a salir a Internet y otras personas pueden verlo. Pero el momento, obviamente esa es una mala idea porque no hay nada en ella. A lo mejor volver a ser un draft. Bien, voy a hacer lo mismo y conseguir mi tecla P agarre la página de inicio, agarrar este nav, copiarlo. Voy a conseguir mi pico, ir a mi borrador, hacer clic en el cuerpo primero, golpear Paste. Y tengo una página de portafolio. No hay nada en él. Vamos a diseñar estas páginas a medida que avanzamos. Pero dada la estructura que va, de nuevo, voy a saltar de nuevo al dolorido, al pico, de vuelta a casa. Voy a conseguir este botón cuando se haga clic para ir a, sé que ese es el tipo de proyecto equivocado, pero oiga **, cuando va a ir a esta página de borrador aquí, que es mi proyecto de diseño web. Ahora, cuando lo previsualizo, salta a esa página. Bien, todas las cosas páginas. Antes de seguir adelante, es esto hablando de estos dos aquí. Contraseña. Para tu cuenta gratuita. No se le permite usar la predicción de contraseña. Tienes que actualizar tu sitio para obtener el momento en esta cuenta gratuita que estoy usando para esta en particular. Sí, no podemos hacerlo, pero esta página de protección con contraseña es en realidad déjame mostrarte. Puedo decir esta página aquí. En realidad esta página aquí. Ve al diente que puedo proteger con contraseña. Bien. Puedo encenderlo eso si quieres ir a esta página, tal vez sea solo para miembros, algún tipo de datos sensibles. Puedo encender eso. Pero debido a que es la cuenta gratuita que necesitaba para ser dueño del plan del sitio primero. Entonces, ¿qué hace esta página? Esto es solo el aspecto y la sensación de la misma. Si no te gusta, vas, podemos jugar con él. Puedo añadir un estilo a esto. Bien, entonces así es como se ve cuando alguien viene a esta página, podrías cambiar esto por una imagen diferente. Puedes cambiar el texto, bien, es que solo te da un lugar para darle estilo. Voy a dejar el mío como es lo mismo con las cuatro cuatro páginas. Una página de cuatro o cuatro es lo que sucede si alguien, si hace clic en un enlace de tu sitio y no va a ninguna parte, el navegador irá a buscar un, para una página completa y se lo mostrará. Y aquí es donde podrías ir y cambiar de nuevo el estilo. Puede que tengas más información útil, tal vez tengas un enlace a la página de inicio. Mucha gente lo instalará para que las páginas completas sean un poco divertidas y divertidas. Pero nuevamente, esta opción que solo estamos viendo, podemos darle estilo. Bien, página de inicio. Sabemos lo que es eso. He hecho una página de contacto. Tenemos una carpeta para que podamos apilar. Podríamos terminar con diez o 20 o 30 páginas aquí para nuestro portafolio. Y estas son solo páginas de utilidad que podemos diseñar más adelante en el curso. Vamos a crear páginas perfectas y vamos a crear páginas de comercio electrónico demasiado elegantes para tu proyecto. Vaya y cree una página de Contáctenos y una carpeta de cartera. Y una de tus páginas no importa lo que sea porque vamos a empezar a cargarla con cosas diferentes. Eso estaba destinado a ser el final. Estoy de vuelta del futuro porque olvidé decirte algo. Digamos que quieres duplicar una página porque vas a necesitar muchas páginas de portafolio, lo que me di cuenta más adelante en el curso. Y no te mostré debajo de páginas cómo ir a Portafolio. Ve al pequeño diente en la parte superior, no en la carpeta, lo siento, en la propia página que quieres duplicar. Entonces ve al diente, luego ese de ahí, duplica la página. Se puede hacer una segunda. Bien, entonces vamos a hacer una segunda página de cartera llamada segunda página de cartera porque no puedo pensar en nada en este momento. Entiendes la idea. Bien, eso es duplicar páginas también. Y eso va a terminar este video, todo tipo de cosas de páginas todas abarrotadas aquí, además de un poco de bonificación. Lo llamaremos bono, sólo algo que olvidé. Bien, siguiente video. 62. Crea un símbolo y se anualiza en Webflow: Hola a todos. En este video vamos a ver símbolos e instancias, símbolos como esta pequeña pestaña aquí podemos, vamos a crear una navegación. Simplemente lo agregamos a nuestra página. Y lo genial de ello es que un, es un bonito bloque reutilizables. Pero si entro en él y borro cosas, va a salir de todas las páginas que tengo, el aspecto de instancia, se ha ido de esa página para agregar cosas, copiar y pegar. Ahora, vuelve a la página principal. Todos ellos siguen. El líder irá un poco más allá y creará estas cartas por la parte inferior que todas están conectadas, pero podemos hacerlas únicas sentando anulaciones en tus símbolos. Es súper hábil en genial para cosas en tu proyecto de diseño web que puedes tener muchas cosas como en vivo como esta tarjeta aquí. Puede que tengas cientos de ellos, podrían ser listados de productos, miles de ellos, todos controlados por un símbolo. Bien, déjame mostrarte cómo hacer uno, bien, para hacer un símbolo. Y voy a trabajar en mi página de Contáctenos, página principal porque esa es la que más tiempo dediqué en nuestro problema en este momento, ¿verdad? Hay si copio y pego este y otro botón, olvida que está en el medio. Y si voy a mi página de inicio, no se actualizan. Entonces eso es lo que voy a hacer. Voy a ir a mi página de contacto. Déjame deshacerme de ese tipo. Voy a decir toda esta sección de navegación. Te voy a convertir. Déjame ir a mi panel de símbolos. El segundo abajo, voy a crear un nuevo símbolo. Voy a darle un nombre. Crea el símbolo. Y eso es todo. Hemos hecho un símbolo. En realidad estamos dentro del símbolo ahora mismo. Podemos volver a salir de ella. Bien, esto es ahora lo que se llama la instancia del símbolo. Ahora vamos a mi página principal. ¿Bien? Y este trozo en la parte superior aquí llamado nervio de sección nav es inútil. Bien, voy a borrarlo. Y lo que quiero hacer es agarrar mi símbolo y arrastrar una instancia del mismo solo significa que este es el tipo principal que los controla a todos. Y puedo arrastrar copias de ellas, ponerlas en el lugar correcto, puedo usar esto. También es verde. Y lo genial de esto es ahora si entro y edito mi símbolo, ¿de acuerdo? Y yo te digo, hay dos de ustedes. Vuelve a aparecer en nuestra página Contáctenos. Eventualmente. Ahí vamos. Entonces controla todas las instancias de ese símbolo. Ese lenguaje es bastante importante. Aquí puedes ver que pequeños íconos importantes, el verde es importante. Entonces ya sabes, estás viendo símbolos. A lo mejor estás viendo el documento de otra persona o una plantilla que has comprado o clonado, robado, encontrado en la calle. Fresco. Pongámoslo en nuestra última página. De hecho, tenemos los dos de estos. Otra vez. Te fuiste símbolo. Arrastre un anuncio. Aquí vamos. Y tengo una página más hacer, lo cual no voy a hacer ahora, que probablemente volverá y me perseguirá más adelante cuando estés editando, ensamblando, todo lo demás tipo de gris y estés ajustando cada cosa única. Pero hay momentos en los que, echemos un vistazo a nuestra página de inicio. Al igual que estas cosas aquí son razonablemente buenas candidatas para un símbolo. Bien, sólo hay seis en la página principal. ¿ Iría a hacerlo? Probablemente lo haría el 50% del tiempo. Bien. Pero si esto era un artículo en una tienda, exhibición del precio y detalles del producto, entonces sí, porque podrías terminar con cientos o miles de ellos. Seis de ellos, no un gran drama para actualizarlos a los seis hasta que sea me parece que es la maldición. Estoy como que no, no hace falta que sea un símbolo. Y eso instantáneamente hace el universo invente una razón por la que necesito mil de ellos. Pero digamos que sí quiero que este sea nuestro símbolo porque quiero reutilizarlo, pero todos son bastante únicos. Caso no quiero que sean todos iguales como mi navegación. Entonces, ¿cómo hacemos eso? En primer lugar, seleccionas todo. Así que voy a hacer clic dentro, usar mi flecha hacia arriba para agarrar toda la tarjeta. En realidad, ¿ cuál debemos hacer? Voy a hacer esta. Bien. Voy a agarrar toda la miniatura de la tarjeta que he hecho. Ve a mis símbolos. Déjame ir a crear un nuevo símbolo. De hecho, puede hacer clic derecho, si hace clic derecho en este nombre en la parte superior aquí, y puede convertirlo en un símbolo, creará un símbolo. Le voy a dar un nombre. Esta va a ser mi tarjeta. Es tarjeta de cola, miniatura. Ahora. Bien, y esto funciona un poco. Voy a copiarlo, pegarlo, pegarlo. No, no lo estoy. Una de mis miniaturas cortadas conflictivas. Copiarlo, pegarlo, pegarlo. ¿Por qué no funcionaba eso? Es porque yo estaba dentro de aquí y en realidad no estaba copiando todo el asunto. Creo que acabo de tener eso seleccionado. Entonces voy a salir con mi edición, el símbolo real. Bien, ahora he seleccionado la instancia del símbolo. Y lo que quiero es 123456. Bien, y este de aquí, lo siento. ¿Funcionará eso? Te vamos a encerrar. Adiós. Bien. Así que tengo todos estos y es un poco bueno porque significa que puedo pasar y decir en realidad, increíble, voy a quitar eso por ahí. Aquí. Vete tú. Fácil para mis mil de estos en la página, pero quiero que estas cosas sean únicas junto con el texto también. ¿Cómo hago eso? Entonces lo primero es que necesitas encontrar tu símbolo. Es lo verde. Ahí está ahí, entra dentro de él para editarlo, haz doble clic en él funciona para seleccionar lo que quieres cambiar. Así tiene que ser único en cada uno de ellos. Y vas a tu configuración aquí. Entonces no los estilos van a Configuración cog. Y puedes ver aquí, estás buscando estas cosas, las cosas moradas. En este caso, voy a decir Estás vinculado a un campo K, y voy a crear ese campo. Voy a llamarlo mi Thumbnail golpeando, crear y enlazar. ¿Qué ha pasado en morado? Eso es lo que ha pasado. ¿Qué más ha pasado? Eso ha salido de esto. Así que no dentro del si quieres editar todo, vas dentro de él. Si solo quisieras ahora, como cambiar pedacitos de estas instancias, cualquiera de estas ahora, porque todas son instancias de ese símbolo. Si hago clic en este y voy a la configuración, ya verás, ¿puedes ver las anulaciones instantáneas que? Esa es esa cosa que acabo de hacer. Eso no estaba ahí. Hace un segundo, lo llamamos thumbnail hit y puedo reemplazar las garrapatas aquí dentro. Y esta fue, no puedo recordar. Se trata de un proyecto de diseño web coloreado. Bien, Ahora voy a instancias son únicas, pero si voy y cambio algo, puedo entrar dentro de cualquiera de estas no importa cuál sea. Pero físicamente puedo incluso pasar por un movimiento y todos ellos cambian. Gua, los símbolos son impresionantes. Hagamos lo mismo para esta imagen aquí. Voy a seleccionar en esta imagen y lo mismo buscando el punto morado donde sea que esté, bien, solo mantén un ojo hacia fuera para ello. Entonces eso es algo que se puede editar. Vamos a crear un nuevo campo. A esta se le va a llamar tal vez imagen imagen, pero solo imagen. Salid de mi edición mi símbolo de vuelta a la instancia. Y recuerden, esta primera está bien. El segundo ahora bajo configuración tiene dos cosas anuladas para la imagen. Además, la miniatura golpeando dos cosas que te puedo dar, y esa es esta. Hagamos una cosa más que podríamos hacer. Quiero cambiar este botón para que no todos vayan al mismo lugar porque en este momento yo cambio uno, todos van a cambiar. Entonces quiero decirlo, el símbolo entra dentro de él. Te das cuenta de que volver al original borra un poco las anulaciones. Ahora este botón de aquí, lo mismo. Yo hago clic en él y voy a decir que añades el texto. ¿Necesita cambiar? A lo mejor lo hace. El mío no es porque creo que solo estoy usando la palabra vista, pero el enlace definitivamente sí. Bien, entonces voy a decir un nuevo campo y lo llamo a esto, mi enlace de botón está bien. Haga clic en Crear. Y eso es todo. Ahora vuelve a salir. Hay que acostumbrarse a que me guste lo que va dentro de él para cambiar las cosas, todas ellas, y luego salir y ser señas al modo viejo diseñador regular para cambiar la instancia de la misma. Entonces en este caso puedo hacer clic en él, solo todo, bien, y tengo un montón de cosas. Puedo cambiar la imagen, la miniatura golpeando y ahora el enlace del botón. Y lo que voy a decir es página y ésta va a mi página de cartera, símbolos. Así que vigila las cosas que son moradas, vigila las cosas verdes para otras personas, símbolos que podrías estar obteniendo el proyecto de otra persona y tiene un montón de símbolos ahí dentro. Puedes desvincular símbolos que digan que hay un momento en el que quieras, como, Vamos donde estamos en la página principal. Entonces va a ir dentro de nuestro símbolo. Bien, voy a cambiar este botón para decir casa. Los clientes regresan y dijeron Necesitamos el botón de inicio. Nadie sabe cómo hacer clic en esto. O estás probando regresó y dijo: Sí, nadie sabe cómo llegar a casa o al menos la mitad de los usuarios no lo hacen. Bien, entonces tengo esa parte. Y eso es genial porque en estas otras páginas, tiene sentido tener el botón de inicio y vas y vuelves a casa. Todas estas otras páginas. Muy útil para la de una página. Yo no la pegué en esta. Yo hice casas CC importantes en todas estas otras páginas. Pero el cliente regresa y dice, ¿por qué hay un botón de inicio en la página de inicio? Y te gusta, es solo porque es un símbolo y todas las páginas y me gusta, deshazte de él y sé como, Bien, entonces lo que vamos a hacer es que lo vamos a separar. Entonces vamos a hacer clic derecho en él. Y hay una opción que dice desvincular instancia, el verde se ha ido. Ahora es algo que puedo decir eliminar y no está afectando a nada más. Puedo volver a estas otras páginas como mi contacto con nosotros. Sigue ahí, sigue en cada otra página. Tengo esta instancia. El único problema es que yo como diseñador ahora necesito recordar que cuando hago cambios en la navegación, necesito hacerlo a la, al símbolo real. Y si hago cambios, Digamos que cambio el color de esto, necesito volver atrás y actualizar la página de inicio también porque está separada de todo lo demás. Pero es una compensación suficientemente buena porque esto aparece en mis mil páginas. Sólo hay una página de inicio con la que puedo vivir. Lo único complicado ahora con símbolos es que si quiero ir a cambiar mi texto, ¿de acuerdo? Un poco haces doble clic en él. Haga clic en él. Como, ¿cómo cambio el texto? Porque hemos hecho esto. ¿Cómo los llamamos anulación? Podemos simplemente cambiarlo aquí. Tenemos que salir y tenemos que seleccionarlo aquí. Y lo cambiamos aquí a partir de ahora, lo cual está bien siempre y cuando sepas dónde está. Pero eso puede ser un poco complicado porque te pierdes. Podrías abrir el proyecto de otra persona y estar haciendo doble clic en las cosas y yendo, ¿por qué está cambiando? ¿Qué está pasando? Ahora, ya sabes, son trozos morados en estos bits verdes. Los bits verdes controlan todo. Los bits morados son anulaciones y lo harás en la configuración de aquí. Impresionante. Bien, ¿qué más tenemos eso? ¿Es correcto? Ese fue el final falso. Dije que simplemente ignoraría eso y lo arreglaría. Esto solo lo arregla. Probablemente ya sabes cómo voy a entrar en mi edición, mi símbolo, bien, eso está bien. Yo voy a hacer eso por ellos. Estos, ¿qué lo hace ir en el centro? ¿Recuerdas que recuerdas nuestro div nav lo que lo envuelve todo está configurado para flexionar? Y aquí tenemos esta opción, que funcionó muy bien cuando solo hay dos cosas, ¿de acuerdo? Pero ahora realmente no puedo hacer que funcione por lo que quiero hacer. Entonces, ¿cómo lo hacemos? Todavía voy a haber empujado todo el camino a izquierda y derecha. Bien. Así que recuerda que funcionó muy bien para dos cosas. Entonces, si pongo estas dos cosas en un rapero, volverá a ser solo dos cosas, el envoltorio más este logo de aquí. Vamos a tratar de hacer eso. Una llave, todo el salvaje mecha dentro de mi navegación. Todo lo demás está atenuado. Y eso lo puse ahí. Tengo una uni y te metí ahí. Ahora funciona fácil. ¿Necesito ponerle un nombre a esto? Probablemente podría, pero no voy a hacer ¿ necesita una clase? No por el momento. ¿Necesitamos espacio? Sí, lo hacemos. ¿Cómo lo vamos a hacer? Déjame pensarlo. Tengo un botón botón pequeño. ¿Tengo un margen izquierdo? Yo no. ¿Tengo derecho de margen? ¿Cómo no tenemos ninguno de estos? Voy a hacer un margen, ¿verdad? ¿Dónde lo voy a hacer? Voy a hacerlo a una etiqueta div que no tiene clases aplicadas a ella. Su único trabajo es margen izquierdo. Y voy a hacer que sea la conjetura pequeña, ojalá vaya a tener razón, porque van a ser mis 16. Tan genial, este, va a ser margen a la izquierda, bien, y va a ser 16. Y espero que ahora nos deshagamos de esto. Voy a poder aplicarlo porque es global, porque como que lo hizo por sí solo. Margen izquierdo pequeño, Ron, uno, que uno necesita levantar y levantar pequeño. Eso va a hacer. Ahí vamos. Ahora podemos ir a verte en el siguiente video. 63. Cómo hacer un formulario de contacto en Webflow: Hola a todos. En este video vamos a estar haciendo esta forma. Tiene campos con nombre, correos electrónicos, hay menús desplegables, estas marcas de verificación, y te voy a mostrar cómo enviarlo y qué pasa con él después. O al menos, ahí tienes. Termina en mi correo electrónico. Bien, son súper fáciles de hacer. Déjame mostrarte cómo armar uno. Bien, agreguemos un formulario. Entonces me voy a deshacer de eso. Eso es familiar. Voy a agregar un contenedor para que entren y voy a agregar una sección para que entre en. No tienes que tener esto. De lo contrario sólo va a aparecer hacia la izquierda. Esta va a ser mi sección y esta será contacto. Y voy a añadir un poco de margen a la parte superior que quede atascada en la parte superior. Y todo lo que hacemos es ir a Agregar y luego bajamos dos formularios. Aquí hay una sección entera. ¿Lo puedes ver? Bien. Y estos son todos componentes individuales de una forma. Este es un gran bulto en conjunto, y ese es probablemente un buen lugar para detenerse. Voy a tirarlo dentro de mi sección y ya está. Ya estás listo para ir. Vamos a darle un adelanto. Puedo escribir aquí. Se puede ver que lo está llenando antes. Mi información borrosa, nombre, correo electrónico, información más borrosa, y golpeé Enviar. Ahora dice por favor rellena este campo que se requiere. Así que déjame llenar eso. Bien, entonces tenemos algunas formas todavía bastante funcionan. Tienes que publicar tu sitio para que esto funcione. Yo puedo hacer eso. Bien, ha salido de aquí. Voy a ir a publicar, dominio publicado. Ahora. Podemos previsualizar el modo, pero va a funcionar si salimos a las versiones en vivo, dio un vistazo. Bien, ahora presioné enviar y formas de hombre mágico estaban pintando un botón, tratando de hacerlas en mi curso de diseño web. Si has hecho mis elementos esenciales web, un poco de eso es complicado, alguien tiene que manejarlo, y eso es lo que hace Webflow. Entonces, ¿qué pasa ahora? ¿A dónde va? Echemos un vistazo. Así que de vuelta en Webflow, hay un par de lugares donde puedes encontrarlo. Uno está bajo la configuración del proyecto para este sitio web en particular. Bien. Hay ajustes del proyecto. Entonces esta es la cartera de Dan. Hemos estado en algunos de estos. Bien. Es este de aquí forma mucha información aquí. Importante aquí es donde esta dirección de correo electrónico va a la mente entrar en mi dirección de correo electrónico borrosa. Pero justo en la parte inferior, al final de esta página, puedes ver ahí está mi envío de formulario o aquí puedo leerlo desde aquí. Puedo descargar un CSV de alguna manera o ¿está ahí? Lo es. El gran botón negro. También aunque. Déjame revisar mi correo electrónico. Bien, entonces estoy en mi dirección de correo electrónico y ahí está. Recibí un envío de formulario de Jason. Desde el formulario este es el nombre del formulario de este sitio web caso que gestionas más de uno. También notarás que hay una parte de mi sitio gratuito. Solo me sale uno de 50 para este mes. Bien. Y es como que a principios de mes, a fin de mes, se reiniciará, pero tendremos que actualizar a otro plan si quieres que sea más alto. Muy chulo. Si no sabías eso puede ser realmente complicado si tienes que configurar tu propio servidor de correo o al menos servidor de reenvío, puede ser complicado. Vamos a hacer un poco más. Voy a saltar de nuevo a diseñador. Podría volver a mi tablero y luego ir a diseñar una mirada directamente desde aquí. Ir a mi página de contacto. Vamos a agregarle algunas partes más diferentes. Así que ve al ED, baja a los diferentes formularios y todo lo que necesitas hacer es asegurarte de arrastrarlo dentro de este Form Wrapper. ¿Ves que son una especie de ********? Te voy a mostrar en un segundo. Bien, entonces esto es todo. No necesito otro de estos. Lo que quiero es que quiero otro campo. Entonces voy a arrastrarlo ahí dentro. Y éste va a ser para como un número de teléfono. Entonces lo que quiero hacer es darle una etiqueta también. Hay una especie de dos partes. Ahí está esta etiqueta de campo, ves el nombre ahí, y luego está el campo de texto real. Así que he editado otro TextField. Agreguemos otro. Es cerrar estos abajo. Voy a ir a, así que no tuvimos que seguir desplazándonos hacia abajo para ver este video. Por lo menos. No quiero que la etiqueta vaya justo por encima de ella. Y esta etiqueta va a decir, notarás que esta tiene algún texto de marcador de posición, pero esta tampoco solo apaga eso. Puedes entrar aquí y decir correo electrónico de marcador de posición. Aquí vamos. Este de aquí necesita un mejor texto de marcador de posición porque solo dice texto de muestra. Quizás quieras insinuar tal vez como un número internacional. Bien. No sé si ese es un número. Podría ser un número de móvil en Irlanda, como si tuviera demasiados dígitos y te haces la idea. La otra cosa que debes recordar cuando estás agregando estas cosas, especialmente estos campos, te va a enviar un correo electrónico para mirar el correo electrónico. Puedes ver aquí decía: ¿Dónde está? Dice nombre igual a Jason Bourne. correo electrónico es igual a esto porque agregamos esto nosotros mismos, no se ha agregado, es esto llamado campo. Entonces voy a tener un correo electrónico que va a pasar y dice que el campo es igual al número de teléfono. Entonces voy a decir teléfono. Cuando reciba mi correo electrónico, va a ser un poco más fácil de entender para mí como destinatario. El usuario del sitio nunca verá esta pequeña opción aquí. El otro es, ¿se requiere? Bien, puedes activar y desactivar eso por defecto. Este correo electrónico ha sido activado por flujo de trabajo. Puedes apagarlo si no te importa. ¿Sabes cuál obtienes? Echemos un vistazo a tal vez uno o dos más. Voy a ir a Ed, ir a mis formularios, toma área es bastante útil. Voy a arrastrar esto aquí. Se trata de bloques de textos. Entonces toma campo es sólo una línea. Ahora se necesita área se puede considerar, arrástrala hacia abajo. Toma área, puede tener múltiples líneas en ella. Entonces esta va a, voy a agregar una etiqueta de campo también. Entonces si te acuestas abucheo aquí está ahí, y esta va a ser mi pregunta. Más información. ¿Bien? Voy a decir en vez de garrapatas de muestra, voy a decir algo ahí dentro. No quiero que vuelva a grabar eso. Vamos a previsualizar. Alguien de aquí puede comenzar a escribir y puede presionar devolverlo al punto db final, mientras que este es solo un texto de morera de una sola línea. Bien, hagamos uno más juntos. Entonces veamos agregar un formulario. Veamos la casilla de verificación. Voy a hacer dos más. Dos más. Entonces las casillas de verificación suelen ser nos están dando permiso. Podríamos tenerlo automáticamente. Comenzar comprobado. Siempre está el truco. Tienes que socavar k. Vamos a agregar, ah, desplegable, seleccionar la opción aquí, arrastrarla hacia adentro. Bien, va a ir aquí y vamos a decir que esta va a ser llamada. Recuerda que el nombre en realidad no me va a llegar a través como creador de la forma. El usuario no lo verá. Pero este es mi, quizá mi método preferido. Y aquí tenemos estos campos. Si los dejo todos en blanco, echemos un vistazo a la vista previa. Bien, tienes primera, segunda y tercera opción. Desactiva la vista previa. Vamos a cambiarlo. No se puede desactivar la vista previa. Alguna razón, ahí vamos. ¿Y qué quiero? Voy a tener seleccionar uno es interesante porque es como el predeterminado. ¿Bien? Es el que aparece ahí. Voy a dejar eso como uno selecto. Y en realidad voy a llamarlo otra cosa en vez de seleccionar uno, voy a decir que este va a ser el método de contacto preferido. Lo que podría hacer es usar eso como etiqueta también. Bien, mis opciones van a ser la primera opción. Va a ser divertido. El valor aquí, tú, probablemente solo tiene que ser divertido. Vamos a echar un vistazo al otro lado porque va a decir, me prefería si eso es igual al teléfono, igual al valor del teléfono, lo cual es genial. Bien, hagamos el último. Este de aquí es que pueden elegir es puede ser correo electrónico. Bien. Y sólo va a volver como correo electrónico. ¿Algo más? Quiero quitar el último porque no lo necesito no se requiere. Vamos a darle un método de contacto de vista previa. Aquí vamos, teléfono o correo electrónico. Probablemente necesite un título como el resto de ellos porque ese tipo de cosas es difícil de saber. Parece que estamos haciendo algo con el correo electrónico ahí. Poner en la etiqueta. Recuerda que estas etiquetas no hacen nada. No les gustan los bloques de texto que la gente pueda leer. Entonces vas, es un título terrible. Tan grande, pero vamos a darle a todo unas pruebas. Voy a tener que publicar el dominio seleccionado. Podría abrirla otra vez, pero ya está abierta por aquí. Entonces, lo que tenemos que hacer es que necesitamos restablecer esta página para obtener toda la información extra. Voy a llenarlo. Bien. Normalmente no sé Jason Bourne no quiere tu newsletter y quiero que me contacten por correo electrónico. Enviar, por favor rellene este campo. Yo hice esto requerido. Bien, ahora lo vamos a hacer. Bien, veamos qué pasa en el lado del correo electrónico. Bien, entonces tenemos todos nuestros campos. Nombre es igual a Jason, correo electrónico , número de teléfono, campo, mira, olvidé nombrarlo. Aquí es donde hay que ir y verificar eso. Bien. Entonces esto debería ser ¿qué decimos? Más información? Casilla de verificación es falsa. Otro nombre de cama, estoy fingiendo que estoy haciendo esto. Estoy fingiendo que estoy haciendo esto a propósito, método preferido vía correo electrónico. Ese es un lado amargo de ello. Entonces tenemos dos, tenemos estos dos. Echemos un vistazo aquí atrás. Echemos un vistazo a éste. La casilla de verificación es ¿Qué fue? Casilla de verificación falsa. Entonces hay dos cosas. No casilla de verificación, va a ser newsletter, newsletter, suscripción. Recuerda que el usuario no ve esto. Esto es justo lo que viene a través de tu correo electrónico. Y no creo que puedas cambiar falso. O va a decir verdadero o falso. Bastante seguro que podemos cambiar eso. Quizá puedas llegar a algún lugar que no tenga, pero va a ser mejor. Se va a decir suscripción al boletín, verdadero o falso. Bien. Eso todavía no es sí o no, Pero tiene sentido. Este de aquí, ¿puedes ver este de aquí solo dice, dónde está el método preferido? Tenga en cuenta porque este de aquí que tiene el problema, solo lo llamamos campo. Voy a decir más información. Ahí vamos. Y eso aclarará esos dos problemas. Bien, eso es todo para agregar una forma se ve un poco aburrido. Así que vamos a pasar por el siguiente video y darle estilo. Pero mientras sigas agregando estos elementos dentro del Bloque de Formulario, bien, se pasarán a Webflow. ¿Quién? Webflow lo enviará por correo electrónico, o puede ingresar a él a través la configuración del proyecto y bajo formularios. Pero si lo hace agradable y fácil flujo de trabajo, Bien, En el siguiente video. 64. Cómo crear un formulario en Webflow: Hola. En este video vamos a ver tomando esta aburrida espuma. Ese Webflow nos da dos, convirtiéndola en una forma ligeramente menos aburrida. Vamos a darle estilo a estos campos. Mira, hay un forro negro en el exterior, sin línea negra, elegante. Se divide en estas diferentes columnas. Algunos de ellos se esparcen por ellos, algunos de ellos no. Extra elegante. Oh, mira nuestro elegante botón. Nos hemos deshecho de las etiquetas. Tenemos algo de texto de marcador de posición en el medio. Te voy a mostrar cómo conseguir que esta cuadrícula aquí se descomponga de manera diferente en diferentes dispositivos para que se apile muy bien en diferentes tamaños de dispositivo. Y te voy a mostrar cómo encontrar este mensaje que aparece cuando alguien ha terminado de enviarte un correo electrónico, la notificación de Éxito, y tenía un estilo que lo hará rosa. Bien, vamos a saltar. Vamos a darle estilo a la forma. Bien, lo primero es, es que quiero, Digamos que quiero darle estilo a todos estos campos, cada uno de ellos. Entonces necesitan que se les aplique la misma clase. En el momento en que no hay clase aplicada a ellos. Así podría darle una clase. Podría decir que este es mi título de campo puede ir y estilo. Un truco con Webflow es que hemos aprendido por error, es que si olvido darle un nombre de clase, solo le dará un nombre de clase por su cuenta. A menudo usará lo que sea que esté aquí. Y en realidad esto es bastante práctico. Entonces, si no le doy un nombre de clase, necesita uno. Si digo en realidad necesito que sea el font-weight de lo normal. ¿Puedes ver que dice todo automáticamente hacerte un nombre de clase, etiqueta de campo de corte?. Y en realidad para mí, ese es un buen camino de regreso al inicio del curso. Eso no fue útil porque realmente no sabíamos que lo que estamos haciendo en estas clases se va a hacer, pero ahora usándolo a mi poder. Así que ahora puedo hacer etiqueta de campo. Excelente aplicado a todos ellos utilizará un atajo Comando o Control Retorno. He estado campo flecha abajo. Aquí vamos. Recuerda que los hermanos pueden usar izquierda y derecha aunque estén arriba y abajo y arriba va para el padre. Entonces cuando estoy aquí, solo puedo usar mi flecha derecha, bajar a U así. Me gusta hacer ese tipo de cosas. Como ninguna mano en el ratón. Mira amigo. Bien, genial. Entonces voy a aplicarlo a todos ellos. Y en realidad lo que voy a hacer es que voy a decir, no quiero que ninguno de ustedes sienta mesas que no hagan nada por el formulario que no sea ayudar a describir lo que hay debajo. Pero puedo hacer eso mucho en este texto de marcador de posición. Entonces nombre, tal vez vaya si quieres darle estilo a lo que le entra, puedes volver a ver lo mismo. Quiero que esta cosa llamada campo de texto, que es diferente de antes, era nombre de campo. Nuevamente, no le voy a dar nombre porque sólo va a ir, voy a usar esto para el nombre de la clase, que es perfecto. Y digamos que quiero que las cosas en las que escribe el usuario sean de ese color rosa intenso. Vista previa de ella. Bien, y ahora si empiezo a escribir, Aquí vamos, Es hot bank. ¿Puedes darle estilo a los campos reales en sí para que quieras? Porque mi cartera aquí es líneas oscuras alrededor del exterior. Si hago clic en este campo de texto, ya tengo una clase aplicada para ello, lo cual es genial. Bien, y sólo voy a bajar al mando. Voy a opción haga clic en el Chevron Alt haga clic en los bordes de una PC. En el momento en que hay un estilo, es solo que se nos ocultan. Pero podemos decir, quiero agregar otro estilo encima. Y quiero que sea, sólo voy a mostrarte que puede hacerlo grande y grueso. No es lo que quiero. Pero podrías decidir que esto es lo que quieres hacer. Esquinas redondeadas. Esquinas redondeadas. ¿Por qué no les está haciendo a todos ellos? Déjame hacer algo menos feo de aspecto. Voy a usar mi gris. Oh, sí. No muy diferente. ¿Por qué es ciego todos ellos? Es porque a pesar de que estos se llaman campo ticks, no tiene la clase toma campo, campo aplicado. ¿Cómo se llama? Etiqueta de campo, campo de marcas de nota. Así que el campo de texto Flecha abajo, Comando o Control en el campo de texto. Bien, hagamos el último. Bien, Y es, se vierte sobre mi rosa fuerte que en realidad no quería. Lo siento, ayudando. Lo vas a despejar. Bien, ¿Cómo nos detenemos botón, botón. Empieza como cualquiera. Ya tengo uno que hicimos antes Member button. Ahí vamos. Y debido a que estamos súper geniales antes fuimos, recuerda que hicimos botón grande o quitar botones pequeños. Mira S, diseño web, construcción de cosas desde el principio del curso donde nos lleva para siempre. Pero más tarde, ninjas de construcción de sitios web con todas nuestras clases geniales, o al menos esas clases combinadas. Y van a clases globales porque recuerden, queremos hacer color secundario. Tan bueno, llevaba el botón. Eso está bien. ¿Qué sucede cuando lo envías? Ya lo vimos antes. Cuando realmente lo envías, había como, Oye, gracias por enviarlo cuando llegas a eso. Entonces necesitas hacer clic en cualquiera de estos dos, ya sea el Bloque de Formulario o el formulario que está dentro de él. Realmente no importa. Bien. Y ir a tu configuración es una opción aquí dentro que dice el estado de esta forma, normal. Entonces diseñamos todo esto. El éxito es lo que aparece una vez que alguien lo ha hecho y ahora solo vas y stylus, podrías decidir en realidad voy a usar mi color secundario. No, hago esto tantas veces. Esta es la identificación. No usamos esto mucho más que cuando hacemos camino atrás en el curso, estos ID los usamos para hacer navegación, donde saltamos a secciones desde botones. Y agrega nuestra clase de color. Y vamos a usar los antecedentes de primaria. Este de aquí va a ser el estilo tick. Yo no tengo uno. Se me ocurre uno que hemos hecho toma color secundario, siempre va a ser bueno. Aquí vamos. Entonces puedes resolver esto nuevamente en el formulario en configuraciones y también puedes hacer la era. Bien, instaló esto pero abajo abajo. Pongámoslo todo en una grilla porque de momento, quiero esto, esta es mi maqueta de Figma donde las tengo lado a lado. ¿Cómo lo hacemos? Vamos a usar una grilla porque las cuadrículas son buenas, son fáciles de usar y hay k bastante regimentadas Así que voy a ir grid. Sólo voy a asegurarme de que mi formulario en alguna parte de todos modos. Bien. Siempre y cuando esté dentro de la forma y el bloque de forma, bien, funcionará porque básicamente el agarre formal, cualquier cosa que esté dentro de esta espuma, pega cualquier cosa ahí dentro. Intentará enviarlo como opción de formulario. Entonces meto mi grilla aquí. Y esto en este momento tengo qué, dos por dos, lo cual está bien. Entonces voy a agarrar el nombre uno. Bien. ¿Puedes agarrar el correo electrónico uno? Voy a agarrar mi teléfono número uno. Y eso va a funcionar aquí para mi quinta. Va a abarcar ambos y eso es dejar que los abarquen a ambos. Simplemente no está en la grilla. Seguirá funcionando. Las cuadrículas sólo bajan hasta aquí, a la forma no le importa. Pero digamos que lo haces aquí. Así que vamos a poner éste ahí. Y éste también después de este tipo. Y él termina aquí y tú estás como, Oh, ¿ puedo hacer que se crucen dentro de esta grilla? Esta es una buena explicación como bonus cred aquí como parte de formularios, hay un truco secreto con las cuadrículas. Si haces clic en la cosa dentro de la cuadrícula, no importa lo que sea, en realidad puedes arrastrarla para gastarla a la opción de cuadrícula. Nos va a causar un poco de dolor cuando bajemos al móvil, pero podemos arreglarlo. Lo siguiente es esto un nosotros es un buen punto. Si me metí en mi teléfono porque estoy diseñando, algo salió mal y voy a ajustes y diseño mi orina normal instalé esta olla. Por suerte, no todo vuelve al mismo diseño. ¿Bien? Por lo que aquí hay newsletter. Esta es una etiqueta, pero a diferencia de las etiquetas de campo, esta cosa tiene que venir. Se puede ver el campo, este campo de casilla de verificación, es una unidad. Si borras una parte de ella, asusta el tipo de entrelazado. Y podría simplemente dejarlo así. No tiene nada de malo. Pero si lo quieres dentro de esto también, dentro de la grilla, no estoy seguro de por qué lo estoy dando a la grilla. No es necesario. Bien. Ahora es parte de la grilla. Aquí vamos. Consígalo dentro de la rejilla. Ahí vamos. Y sólo voy a dejar el botón fuera de él. De lo contrario, voy a tener que ponerlos en, algo así como meterlos. Y entonces voy a tener que coger a este tipo y conseguir que se esparzan y los empujan hacia abajo. Y entonces este tipo se está extendiendo demasiado. Entonces puedo entrar en alguna selección dentro de esta opción de cuadrícula. Vuelva a mi configuración de cuadrícula donde un niño dejó de hacer cosas elásticas y vaya a un lado. ¿Y si queremos que este empuje hacia su propia celda? Estos dos tenían sentido, eso tenía sentido en su propia línea, pero este es un poco pesado aquí. Entonces lo que puedo hacer es simplemente lanzar un marcador de posición. Entonces agarro una etiqueta div. Así que voy a rebajar todos estos otra vez. topografía dejará la costura está cerrada porque no estamos haciendo esa. Mantenga los formularios abiertos. Bien. Entonces solo lo pones en una etiqueta div. ¿Dónde está ahí? No hace otra cosa que mantenerlo abierto y ahora está un poco drogado y tú estás como, oh, la capa no funciona. ¿Recuerdas lo que hace cuando los adelantamos? Bien, él solo va, se derrumba. Acaba de abrirse para que podamos hacer click en Webflow. Entonces este de aquí, este no necesita un marcador porque este tipo quiere atravesar dos de sus celdas de formulario para que no puedas caber ahí. Así que simplemente nos descompone al siguiente. Bien, estamos trabajando, estamos haciendo cosas. Lo que podría hacer por mi sección de contacto, podría darle estilo a esta sección de contacto y decir en realidad el espaciado que voy a poner en ambos lados. Mantenga presionada la tecla Opción o Alt. Aquí vamos. Bonito. Mis opciones de cuadrícula. Quiero ser un poco más grande. Bien, Aparte de ese extraño tema de espaciado que ha llegado. Bien, veamos la vista móvil y básicamente estamos volviendo a hacer cuadrículas. Ahora nada que ver con los formularios. Pero bien podríamos hacerlo porque se ve bien, no funciona en este , sino demasiado pequeño. Entonces estamos trabajando en nuestra grilla. Entonces da click en la grilla, entra aquí. Y te voy a mostrar esto porque este tipo, está haciendo cosas graciosas porque está abarcando dos de mis columnas. Entonces si le digo a mi diseño para mi cuadrícula, y digo en realidad solo ser una columna. ¿Por qué no eres una columna? Es un poco tratando de hacerlo, pero a este tipo está peleando. Entonces lo que haces es que puedes hacer clic en Hecho, salir de él e irte, realidad solo haces uno en este punto de interrupción en particular. Bien. Ahora puedo volver a mi grilla. Rejilla. ¿Por qué eso no funciona? Yo tengo uno. Todos ustedes ahí. Agrega otro. Seguir adelante. ¿Qué se extiende a través? No lo sé. Tú esperas ahí. Alguien más está gastando a través. Ya lo he resuelto. Vamos, cerebro. Fueron estos tipos malos, pero yo también lo hice antes. Yo hice que el boletín abarcara a través de un par de ellos. Van de alto éxito. Bien. Y esta cosa de aquí, que era un buen lugaretero , R6, aquí abajo ahora en una colina aplaude, derecho. Echemos un vistazo. Entonces ya está hecho en el móvil, Vamos a previsualizarlo. Se está derrumbando, pero se va un poquito ahí. ¿Cómo nos deshacemos de eso? Podemos decir esto, Toby es su tableta, está ahí porque es un buen marcador de posición. Que cuando bajemos al teléfono horizontal horizontal, bien, puedo decir que muestre a este tipo, Ninguno. Oh, tenemos el diseño. Ahora vamos a tener un adelanto. Bien, ojalá ahora algunas de estas cosas que hicimos antes que sabemos que ha pasado mucho tiempo haciendo propiedades de visualización y todo tipo de bloques en línea. Una vez que llegas a estas cosas ahora, que son bastante fáciles de volcar pero más difíciles adaptar si no tienes algunas de esas habilidades fundamentales, me siento exitosa. Espero que tú también. Bien, lo último que quiero hacer es agregar mi bateo. Puedes saltarte ahora solo voy a tirar el bateo. Puedes andar por ahí si quieres, y yo lo pondré en mi escritorio. Comience siempre en el escritorio. Y voy a agarrar mi lo que era no era uno que estaba haciendo todo eso. Yo creo. ¿Voy a hacer trampa y simplemente agarrarlo de la página principal? Probablemente. Oh, tiene mucho estilo, ¿no? ¿Lo hago de todos modos? Intentemos conectarnos. Consígalo en el lugar correcto para poner la sección en la que quería entrar y darle a Paste. Después va al lado equivocado, consíguelo en la parte superior. Y no quiero usar este estilo, así que voy a decir, deshazte de esa clase. ¿Y qué queríamos decir? Hazle una pregunta a Dan. Pregunte. Entonces Dan. Quiero esa etiqueta span porque no es difícil de aplicar, pero la va a pegar en ella. Simplemente hazlo el largo camino. Bien. Entonces Dan, pregunta, ¿y cómo la gastamos? Recuerdas, ahí va. Y por qué dijimos Nosotros dijimos texto, color secundario. Vamos pregunta estándar que queríamos esta q minúscula y queremos algo de margen inferior, que no tenemos. No creo que el margen esté en B, pero imagínese fondo. Entonces lo que voy a hacer es tirarlo a un bloque div. Y voy a decir Eres NB. Estoy adivinando que probablemente necesite mi médium porque mi médium sé que son esos tal vez sea 81624. Así que extra pequeño, pequeño, mediano. Eso tiene sentido. Entonces esto va a ser fondo de margen mediático. Este va a ser mi 24. A ver si éste funciona. No hay nada aplicado a ello. tener un crédito creado mi clase global aquí porque no hay otras clases aplicadas a ella, pero ya lo hemos hecho. Fondo medio. Sí. Bien. Ese es mi estilo de mi forma. ¿Algo más? No, eso es. Te veré en el siguiente video. 65. Tipos de imágenes en Webflow SVG vs PNG vs JPG: Hola, amigo mío. Vamos a discutir cuando jpegs una buena manera en PNG es una buena, algo buena. Y vamos a ver cuándo SVG son increíbles en Webflow. Si ya conoces las diferencias, tal vez quieras echarle un vistazo. Nosotros cubrimos algunas cosas interesantes de exportar desde cosas como Photoshop y Adobe Illustrator. Y hablamos de qué tamaño deberían entrar. Pero si sabes todo eso, puedes saltarlo. No voy a enojarme, pero para el resto de nosotros, vamos a saltar. Bien, comencemos con Jpeg. Estoy en Photoshop. No necesitas Photoshop. Sólo voy a mostrártelo. Así que los jpegs son perfectos para algo como esto donde hay mucho detalle y no hay transparencia. Pueden llegar a ser muy pequeños y verse muy bien. Pueden llegar a un tamaño de archivo muy pequeño y verse muy bien. ¿Cuándo vamos a usar PNGs? Si quieres seguir adelante en los archivos de ejercicio de tu cartera. Hay uno llamado SVG, PNG JPEG. Tengo un par de ejemplos aquí. Entonces voy a abrir eso en Photoshop. Y así por sí mismo debería seguir siendo un BOD jpeg. Si digo magia, renombrar, quitar fondo. A. Si no lo has hecho antes, normalmente realmente actualiza tus habilidades de Photoshop. Ven y únete a mí para mi curso básico y avanzado de Photoshop , bardos de venta cruzada, independientemente, tiene fondo transparente. Ahora voy a recortar esto. Bien, Regreso. Y ahora lo estoy exportando. Tiene que ser un PNG porque necesito verlo. Necesito la novedad transparente de ello. Y una clavija J no te permitirá hacerlo cuando estés exportando desde algo como Photoshop, estar usando este. Este es el mejor. Exportar como archivo Exportar ya que ya no use Guardar para Web, ¿de acuerdo? Porque esto tiene mejor exportación como los grandes. Entonces JP ¿Se puede ver que ninguna transparencia es muy pequeña? Bueno, mis imágenes, masivas. Dewpoint tres, probablemente todavía no sea bueno para Web, pero es ir a PNG. Bien, y busca la transparencia. Vas transparencia. La compensación es el tamaño de archivo masivo. Entonces jpegs, si puedes salirte con la tuya, los PNGs son geniales si necesitas transparencia. Y si estás viniendo de algo como Photoshop y exportando cosas, puedes en esta etapa aquí, decidió que esto es demasiado grande. Yo voy a hacer, vamos a necesitarlo a 4 mil. Podrías decidir que solo lo necesitaba, tal vez 1,200 y obtener un tamaño de archivo más razonable, incluso eso es bastante grande. El límite para traer a Webflow ver esos 4 mb en este momento, eso podría cambiar de opinión si tienes esas imágenes gigantes, tienes que hacer alguna edición antes de traerlas a Flujo web. Nuevamente, mismo tamaño, 1,200, pero como JPEG, k va de un punto a bien, abajo 2.3 kb, bueno, 0.3 mb. Bien, entonces una fracción del tamaño, se verá genial, pero sin transparencia. Entonces JPEG para imágenes detalladas que no necesitan transparencia, PNGs para cosas que hacen. También cuando estás exportando desde algo como Photoshop. Entonces no necesitamos transparencia. Simplemente lo guardamos a un tamaño pequeño, aseguramos de que sea al menos el doble del tamaño que lo necesitas. La mayoría de los dispositivos como navegadores ahora y teléfonos necesitarán el doble de resolución. Lo llaman como PPP alto o creo que Apple lo llama Retina K. Así que si sé que necesito que tenga unos 800 pixeles de ancho, realmente debería exportar esto como 1,600. Necesita toda esa resolución extra para verse bien en esas pantallas extra elegantes. Puedes hacerlo elegante aquí en Photoshop. Entonces puedo dejarlo en 200 y decir, o 800 y decir, me gustaría una talla que sea ambas. A lo mejor, a lo mejor ni siquiera necesito puedes agregar más de uno, ¿verdad? puede decir que quiero que sea de talla única, tal vez quiera que uno sea en realidad el doble del tamaño también. Se pueden exportar las dos, pero no necesitamos la talla única. Y cuando lo exporte ahora, en realidad serán mil 600. Bien, los JPEG, los PNGs, los PNGs se vuelven turbios cuando nos metemos en cosas como logotipos. Entonces saltemos a Illustrator. Esto es Adobe Illustrator. Si no lo has usado o quieres ir un poco más allá. Conozco a un tipo que tiene un curso básico y un curso avanzado, solo digo, pero independientemente, es una muy buena manera de mostrarte la comparación de PNG y SVG. Porque lo que hemos aprendido de Webflow es que no hace las cosas, no se puede diseñar un logotipo en Webflow, podría probar un div tags, va a ser complicado. Entonces necesitas hacer en algo como Illustrator o InDesign, o Photoshop o Figma o XD, algo así. Bien. Y cuando lo haces, tienes que elegir un tamaño de archivo. Y cuando lo haces, tienes que elegir un tipo de archivo. Así que el ilustrador tiene algo genial bajo Ventana, Exportación de activos. Asegúrate de que esté agrupado. Puedes tirarlo aquí, darle un nombre. Si has intentado exportar algo de Illustrator y tratando de hacer el lienzo del mismo tamaño. Esta cosa es un salvavidas. Va a ser mi logo para tesis. Y abajo por aquí, como Photoshop, podemos decir en realidad, ¿quiero que sea un JPEG? Echemos un vistazo a J peg. Bien. Echemos un vistazo a P&G Recuerda que Dan dijo que necesita ser el doble del tamaño que yo necesito que sea por esos DPI altos y esas pantallas de retina, se ven bien en eso. Y echemos un vistazo al último, SVG. Bien. ¿Y notaste que todo eso desapareció? ¿Por qué puedo hacer dos veces cocinas? Buen gráfico vectorial escalable antiguo. Eso es lo que es SVG, significa que se puede escalar a cualquier tamaño. Entonces si tienes algo como esto, Victor, las formas simples necesitan transparencia, solo ve SVG, PNG funcionará, pero SVG puede ser tan grande o tan pequeño como quieras. Así que tengo los tres de esos. Vamos a exportar. voy a poner en esta carpeta de nuestro portafolio. Para que puedas ir a echar un vistazo también. Echemos un vistazo. Así que se hizo estas dos carpetas, las dos semanas, ¿de acuerdo? Y va a ser interesante. El jpeg es bastante grande y no tiene transparencia. Este PNG es mucho más pequeño, lo cual es genial, y tiene un fondo transparente, significa que puedo tenerlo encima de las cosas. Te voy a mostrar en un segundo. Tienes que confiar en mí una transparencia, pero el tamaño del archivo es más pequeño, lo cual es increíble. Pero ¿qué pasa con SVG? Comparemos estos con que el SVG es aún más pequeño nuevamente, y vamos a llevarlo a Webflow. Bien, voy a traer a estos dos. Voy a hacer mi página de fondo amigo aquí. Voy a tener todo temp. Siempre que estoy haciendo Delete Me también. Hago estas pequeñas clases Delete Me porque sé que más tarde las acabo de usar para como tal vez un tutorial, tal vez destruir a alguien, tal vez solo un gusto algo. Voy a decir que el fondo va a ser un color. Voy a tirar esas dos imágenes. Entonces tengo a estos dos. Echemos un vistazo a P&G. Bien. Viene bien. Aunque viene un poco borroso. No te preocupes, voy a copiar y pegar es si lo hago de la mitad del tamaño, ¿ves que se convierte en esta preciosa nitidez? Va a ser difícil ver otro video. ¿Lo puedes ver? Bien. Dependiendo de la calidad del video que te llegue. Entonces viene en este gran tamaño, lo escalas al menos a la mitad para que quede cristalino en este monitor en el que estoy grabando es para monitor de k DPI alto. La mayoría de las cosas son en estos días, por lo que necesita verse bien. Entonces PNGs aunque, ¿qué pasa con SVG? Bien, así que vamos a traer esa. Y esta es mi versión SVG. Mira, míralo. Viene en cristalina. Mira lo grande que es y el tamaño del archivo con montones más pequeños, más pequeño el tamaño del archivo. Mira lo grande que se pone, porque es un vector y pueden llegar a ser tan grandes como te gustaría ser grande como una montaña y seguirá teniendo unos bordes nítidos y agradables. Así que jpegs para imágenes que no necesitan transparencia, a menudo serán más pequeñas y serán muy buena calidad como Alfred de vuelta. Ahora ese tipo, ese tipo, si necesitas una imagen detallada que necesita transparencia, PNG es el camino a seguir porque un SVG no puede hacer esto. No puede funcionar todos estos pequeños píxeles. Necesita geometría muy simple. Todas estas cosas. Necesita tipo de líneas y anclas, y eso es lo que realmente brilla. Entonces, si estás en esta situación, nodo PNG dice que sí a SVG porque como debería ser una pegatina para parachoques. Y solo rápido también en Figma y en XD, si estás exportando algo como este tipo, recuerda aquí abajo donde estamos exportando estos, asegúrate de que sea a a x k porque quieres ese tamaño doble , bien, eso es mirar los diferentes formatos de archivo y qué tamaño necesitas para traerlos para Webflow para que se vean bonitos y nítidos. Bien, En el siguiente video. 66. ¿Cuáles son las imágenes de Hi-DPI e receptivas en Webflow: Hola a todos. Hablemos de lo que es esta cosa de alto DPI. ¿Qué hace eso lo que hace esta imagen responsive? ¿Qué está haciendo eso? ¿Por qué Dan tiene tres tamaños diferentes aquí? Estoy muy entusiasmado con este porque si has hecho algún tipo de otro diseño web, esto solía ser algo muy complicado, imágenes receptivas, pero Webflow lo hace todo por nosotros. Tan bueno. Déjame mostrarte la bondad. Bien, comencemos con una cosa de DPI alto. Bien, entonces voy a arrastrar en este PNG que tenía antes. Recuerda que lo trajimos y resolvimos que si lo copio y pego y lo hago, hemos hablado de que sea la mitad del tamaño. El tamaño va a quedar genial. Un poco borroso. La mitad del tamaño se ve bien. ¿Bien? Lo que puedes hacer es que puedes saltarte el bote de arrastre y decir hazlo alto DPI, solo son cortes del tamaño y la mitad solía ser 701. Ahora es el 351. Lo suficientemente cerca. Bien. Mira esto. Si lo arrastro, se apaga. Se puede arrastrar más grande. No es alto DPI, pero mira esto. Simplemente se encenderá automáticamente cuando llegue al tamaño correcto, ¿ pueden ver DPI altos? Vas solo a un poco como un indicador visual que es la mitad del tamaño que necesita ser. Se ve un poco genial en esas pantallas de retina. Y hay monitores de alto DPI. Bien, así que esa es esa parte. Veamos las imágenes responsivas. Si eres de tierra de diseño web o tierra de desarrollo o de tu ingeniero de software, podrías estar pensando, ¿qué hace con las imágenes? ¿Bien? ¿Simplemente, si traigo a imagen gigante, lo escala hacia abajo a que tengo que hacerlo? Lo genial de Webflow es que hace todo por ti. Entonces lo que voy a hacer es conseguir que traigas. No tienes que hacerlo, pero si quieres jugar solo bajo esto bajo portafolio, SVG es este llamado ejemplo responsivo uno. Tráelo. Y lo que voy a hacer es que lo voy a poner dentro de un div, necesita ir dentro de un contenedor, no puedo dejarlo tirado por ahí, de lo contrario no funciona. Bien, y voy a ir a esto, y voy a decir, Tú entra, eres enorme. Y si tienes un DPI alto, sigue siendo masivo. Incluso la mitad del tamaño llena la pantalla. Bien, olvidemos el DPI alto, pero tengo esta versión muy, muy grande. Bien, voy a dejarlo ahí. Voy a copiarlos y pegarlos. Entonces tengo dos de ellos. Es difícil de ver, pero tengo dos versiones. Este top de aquí. Incluso debería hacer el que está debajo. Haga clic en él e intente encontrar el engrane. Voy a hacerlo muy pequeño. Voy a decir que son 100 pixeles. Hay versión conjunta. Tengo esta pequeña versión, copia y pega. Tengo lo voy a arrastrar para ir a la versión más grande. Copia y pega de nuevo. Gran aversión. Ser colocado de nuevo, visión más grande. Bien, así que todos estos tamaños diferentes, lo genial de Webflow es que creo que es durante la publicación porque no se puede previsualizar y hacer que esto funcione. En realidad tienes que publicar el sitio. A ver si funciona. Bien, en amu, tengo esta versión grande. Entonces, vamos a salvar esta. Solo estoy haciendo clic con el botón derecho en mi navegador. Voy a guardarlo aquí. Voy a guardarlos en. Para que puedas echar un vistazo a esta versión descomunal que era de 3 mb. Ahí está esta versión, guardar como, voy a guardar esa también. Guardar como clic derecho, guardar también. Me pasó a echar un vistazo Webflow. Decía la versión gigante grande. ¿O lo podemos ver? Ahí vamos. Todavía es de 3 mb. No lo toqué, únete a nosotros nada porque no le dimos ningún tamaño solo diría entrar ahí. Entonces es el tamaño grande, pero luego la versión más pequeña. Bien. Bueno, ¿dónde está? Sí. Este dice, yo soy el reducido. Bien, hay una versión de 1,600 píxeles, hay una 1081, hay una 500. Y en realidad estos dos últimos, creo que 500 es el más pequeño, lo logrará. Así que en realidad acaba de conseguir dos de esos. Esos son estos dos. Bien, entonces es bastante inteligente. No tienes que hacer nada, solo, solo sube tu versión grande siempre y cuando sea menor a 4 mb. Y Webflow no sólo lo hará bajar latas de tamaño físico, utilizan alguna compresión de imagen también utilizan alguna compresión de imagen para hacerlo más pequeño. Y es bastante bueno, bastante inteligente. Y como podrías ir e intentar hacerlos más pequeños nuevo antes de traerlos a Webflow, haz algunos experimentos. Estoy encontrando que la compresión que usan se ve bien. El tamaño del archivo es súper pequeño, dejándolo al flujo de trabajo. Si estás pensando, ¿qué carajo fue todo eso? Lo que hay que saber es que no tienes que saber nada. Solo trae imágenes siempre y cuando no sea mayor a 4 mb. Y el flujo de ancho los cortará al tamaño correcto en lugar de intentar cargar esto. De lo contrario va a intentar cargar este archivo de tres megabytes y comprimirlo al tamaño. Así que está desperdiciando un montón de, no necesita 3 mb de datos. Y la calidad solo significa que esta versión, si has hecho mi curso web essentials, vamos a llegar más al código. Solo llevamos un montón de tiempo tratando de averiguar cómo cambiar imágenes o diferentes puntos de interrupción. Y porque esa es la otra cosa también, es si está renderizando esto en la vista de escritorio, pero se va a renderizar, se enfría en un teléfono móvil, podría ser mucho más pequeño. Así que solo busca el de 500 píxeles uno, no este únete a casi uno, que podrías tener agradable y grande en el escritorio, pero pequeño en el flujo de la cabina del teléfono móvil solo inyecta un poco el derecho código al dispositivo puede llamar a la imagen de tamaño correcto. Se necesita súper práctico. Un pequeño bono por llegar hasta el final está en Webflow, poco relacionado con las imágenes en el panel de activos. Aquí puedes estar un poco abarrotado. ¿Qué es esto? En realidad puedes solo este de aquí, expandirlo, puedes obtener heno bonito y grande y puedes decidir en realidad solo hazlos un poco más pequeños, hazlos pequeñitos con la lista, muéstrame las imágenes que tengo los documentos no tienen ningún documento o archivo. Volver a activos enteros. Puedes buscar, mostrarme todo lo que es uno de esos disparos que odiaríamos y tú vas estos arrastrándolos aquí. Puedes ordenarlos. Puedes decir muéstrame el más viejo primero que entró. Muéstrame luego en orden alfa numérico, y luego selecciónelos todos. Eliminarlos por todas partes. Emocionante. Entonces vamos a recuperar eso en su aguinaldo para la gente que llegó hasta el final. Bien, eso es. En el siguiente video. 67. Cómo recortar imágenes en Webflow usando el ajuste de objetos: Hola ahí. En este video, voy a tomar nuestra imagen rectangular y obligarla a que sea de cierto tamaño, rectángulo superior. Y luego lo voy a meter dentro de un círculo. Probablemente debería haber hecho esto antes. De todas formas. Déjame mostrarte cómo recortar imágenes en Webflow. Lo primero que voy a decir es que si tienes la capacidad de recortar cosas, decir algo como Photoshop, hazlo porque si estás recortando mucho, solo significa que hay, el tamaño del archivo es alto. No necesita serlo, pero hay muchos casos de uso que recortarlo aquí, Webflow. Voy a deshacerme de ese tipo y voy a traer una imagen rectangular. Voy a usar esa que usamos antes. Si la tuya está pegada como yo, yo soy como, ¿Dónde se ha ido mi imagen? Voy a ir claro eso. Bien, y voy a volver a la grilla porque me gusta. Y voy a traer este de aquí, claramente rectangular. Necesito que sea cuadrado. ¿Qué hago? Lo siguiente es que esto tiene que estar en una clase, pero puedo controlarlo con k Así que voy a llamar a este mi héroe de imagen. No voy a usar esa porque ya tipo de ir hacia atrás y deshacer y usar eso. Ya lo estoy usando para lo de las esquinas redondeadas. Entonces voy a llamar a esta imagen. Aquí hay dos, muy astutos. Y le voy a dar una talla y una anchura. Entonces yo diría tamaño, estás haciendo mínimos y máximos. Vamos a decir que en realidad eres como algo que cabe aquí. Te voy a decir a las 200 por 200. ¿Bien? Y lo aplasta, con lo que no podemos convivir. Entonces lo que decimos es esta opción aquí, se llama sit. Entonces decimos objeto no lo está llenando, que es tratar de llenar la altura y el ancho, solo cubrirlo. Se recorta de la parte superior e inferior si hago esto bastante ancho. Así que voy a mantener oprimido mi tecla Opción en una Mac, tecla alt en una PC y la arrastro de esta manera o la anchura del camino entonces dices que estoy haciendo una más amplia ¿ Ves que va a tratar de cubrir todo, pero está perdiendo mucho de la parte superior y de la parte inferior. Entonces depende de lo que tengas que hacer. Recuerda que estos bajan por el fondo aquí antes convertirlos en símbolos. Deberíamos haber hecho este día de cama. Pero ahora ya sabes, he querido ser perfectamente cuadrada. De nuevo, voy a ir 200 en dos. Eso es 2,200 por 200. Y ahora puedo agregar mi borde, hacerlo redondo un poco y simplemente hacerlo como 200. Entonces va todo el camino porque está dentro de la cuadrícula. Es un gran niño. Puedo decir que lo mandaste y luego así sinterizaste. Bonito. vamos a tener que ajustarlo para los diferentes tamaños. Eso funciona bien. Eso funciona. Quiero que sea más grande. No quiero moverlo por ahí. Entonces puedes pasar y decir realmente en este tamaño, es manana, 500 por 500. Bien. Y ahí se ven las esquinas redondeadas a cientos, no lo suficiente. Vamos. 300. Neo se pone un poco ridículo donde solo lo apagamos. Pero la idea, puedes ajustarla siempre y cuando tengan una clase alrededor de ella. Se puede ajustar para los diferentes puntos de interrupción. Y el truco es simplemente sentarlo por solo sentar el ajuste a cubrir. Puedes obligarlo a que sea de cualquier tamaño que quieras. Bien, eso es. Te veré en el siguiente video. 68. ¿Qué es la carga perezosa en Webflow: Hola a todos. vamos a ver esta opción. ¿Qué significa la carga perezosa? Qué es lo que va a ser IGA, todo se revelará. Bien, así que la carga perezosa está activada por defecto en Webflow, bien encontré una imagen, he hecho clic en el engrane y dice aquí, carga. Por último, lo contrario es cargar ansiosamente, nombres muy chulos, tanto de otras partes de diseño web o hace, no sé, display block o inline block o class ID div zero, nombres terribles, lazy e IGA. Tiene sentido. Bien, todo lo que solo significa es eso, y he hecho esta versión muy larga de la misma. Es muy difícil de hacer, solo tengo que describirlo. Básicamente lo que pasa es cuando se carga el sitio web, se cargará éste porque lo puedo ver. Cargará las tapas tippy de estas donde cargará todas estas imágenes, estas tres aquí, porque las puedo ver. No va a estar cargando ninguno de estos otros porque no puede verlo. No está en la ventana gráfica. Tan perezoso solo significa que voy a cargar los que puedo ver, pero no voy a hacer los otros porque soy perezoso. ¿Por qué es eso bueno? Solo significa que la página se carga muy rápido. Entonces Google va todo mira esta página, mira las facetas cargando cuando la persona llega allí y mientras el desplazamiento, entonces puede ser apresurado para tratar de ponerse al día y cargar las imágenes. Eso puede ser como, puedes obligarlo a decir en realidad estas imágenes aquí abajo, no quiero en mi símbolo, todavía puedo ver el COG. Y puedo decir en realidad quiero que estos a todos estén ansiosos. Puedes pasar y hacerlo por esto, para todos ellos, siempre y cuando lo hagas a la clase. Bien. Igualmente le van a gustar estas cosas. No sé por qué lo harías, puedes configurarlo por defecto. Entonces puedes decir en realidad solo deja que el navegador decida. Y creo que en Google Chrome, el valor predeterminado es la carga perezosa. No sé de los otros navegadores, pero ahí tienes. Es sólo una cosa interesante. Sé que le vas a preguntar a este tipo de aquí no va a cargar perezoso porque se le ve primero, va a, va a cargar enseguida, pero todos sus amigos en el fondo, vamos a esperar hasta que estén bien y de verdad imágenes perezosas que solo funcionan en imágenes también. Tengo texto de carga perezoso. Bien, eso es. Lleguemos fácilmente al siguiente video, dendrítico, peligro de cama. 69. Cómo cambiar favicon en el flujo web: Hola a todos. Este video, vamos a ver a estos pequeños en la parte superior aquí. Hay un favicon. Vamos a actualizar el nuestro a este raro como Little did emoji guy. Sólo porque déjame mostrarte dónde hacerlo y cuáles son las reglas. Vamos, bien, para encontrar el favicon para un proyecto, tienes que ir a la configuración del proyecto. Entonces estoy en mi cartera y es solo en esta primera pestaña general. Probablemente lo hayas visto. por eso has buscado en Google ¿qué hace el favicon? Es este icono de aquí arriba. ¿Puedes ver el favicon para Figma? Es ese chiquito, pequeño f por ello flota que w quieres hacer el tuyo. El tema es que no lo hará por ti. Necesitas subir algo que sea exactamente de 32 píxeles por 32 píxeles. Tiene que ser cualquiera de estos pequeños. No puede ser un SVG, aunque eso es de buena calidad. Probablemente va a ser un PNG porque quizás quieras transparencia. Este de aquí no necesita transparencia porque es un cuadrado sólido. Es un poco de rectángulo pasando, pero es un cuadrado sólido. Entonces hay muchos creadores de iconos de favicon en línea. Yo uso Photoshop y todo lo que hice fue ir archivo nuevo y hacer un 32 por 32 pixeles. Asegúrate de que sea RGB. Haga clic en Crear. Y luego simplemente copié y pegué algunos gráficos que estaba trabajando para otra cosa. Bien. Estaba trabajando en algunas cosas costosas de todos modos. Así que sí, metelo ahí. Es pequeñito. Es apesta. La calidad es terrible, pero Ernie tiene que ser bastante pequeña. Bien, entonces cuando lo exportas en un, en al menos Photoshop, puedes exportarlo como PNG, así obtienes esa transparencia, bien, y la exportas. Entonces no puede ser 32, no puede ser 31 por 30 a la cuenta B, 33 por tres, lo muy estricto. Así que una vez que lo tienes, puedes subirlo. Tengo un par tengo esos dos en tus archivos de ejercicios si los quieres. Voy a subir en mi portafolio en los archivos de ejercicio, este favicon, voy a renombrarlo como uno en un segundo. Pero hay que querer elegir uno, haga clic en Abrir y espere esto. Una vez ya actualizado, ni siquiera necesitó presionar Guardar cambios. Ahora bien, ¿cómo vas y lo ves en el diseñador? No lo vas a ver ver. Seguirá siendo Webflow. En vista previa. Todavía no se mostrará. Entonces necesitas publicar el sitio. Voy a ir a publicarlo. Voy a verlo y prepararme. Porque el nuevo favicon, obviamente esquelético, hizo emoji, probablemente no apropiado para mi portafolio. Pero oye, eliges lo que quieras. La igualdad es terrible. Usa puedes usar colores. Lo único que sí sucede con favicon, así que si lo estás actualizando carga caso a veces el navegador se aganta al favicon y no lo cambia. Entonces a veces si vas y lo actualizas aquí en flujo de trabajo, se actualizará. Pero a veces el navegador necesita ser, hay que limpiar la jaula, estar en modo privado, algo porque a veces se sostiene demasiado tiempo a ese favicon y no se actualiza. A pesar de que lo hayas actualizado. Simplemente almacena aversión y no se la muestra y no va a buscar el nuevo icono muy a menudo porque quien actualiza el favicon muy a menudo le muestran a un diseñador y lo haces todo el tiempo tratando de conseguir un pixel perfecto ahí dentro. Bien, contras de plumas en Webflow. 70. Pies de página se adhieren a la parte inferior en Webflow: Hola a todos. Este es mi pie de página. Estuvo bien en otras páginas, pero en esta página porque es muy corta, sigue pegándose a la parte superior. Quiero que te quedes al fondo en la intermediada Deborah. Bien, en realidad lo hemos hecho antes. Simplemente reutilizando una habilidad familiar. Déjame mostrarte cómo hacerlo. En primer lugar, no es lo mismo que el bateo que hicimos. Lo hicimos pegajoso con esa posición. Bien. Eso le funcionó el pie. Es ligeramente diferente y hecho lo hemos hecho antes. Lo hicimos aquí. Bien, recuerda este doble clic para ir dentro de mi símbolo se le ocurrió de esta manera de empujar hacia abajo en todos estos diferentes tamaños. Bien. Hicimos el padre Flexbox y nosotros hicimos al niño. Teníamos un margen en la parte superior del orden. Lo que vamos a hacer otra vez, pero de nuevo, es que el padre va a ser la etiqueta del cuerpo y el pie de página va a empujar desde arriba usando orden. Hagámoslo. Voy a ir a, no tiene sentido hacerlo en esta página porque va a ser forzado al fondo. Es muy útil ver esto en acción cuando estás la página de Portafolio. Como si agrego un pie de página aquí, tú pie de página. Está pegado a la cima porque no es un contenido a en la página. Podríamos simplemente tener ya corta página. Entonces voy a poner un poco de estilismo súper básico. Entonces lo vamos a poner en algo que se llama sección, y lo voy a poner en el pie de página de la sección. Pero en realidad no lo hago eso es de ya grabé esto una vez y ha salido mal. Te voy a mostrar cómo eliminar uno que ya no necesitas. Bien, así que he ido a mis estilos. Lo he encontrado buscándolo y voy a doblarlo. Bien, olvidé contarte algo en el primer tema de este video, así que lo estoy haciendo de nuevo. Es de vuelta a donde estábamos. Voy a crear una clase para esta llamada sección. Y sólo voy a añadir dos cosas. Voy a Opción o Alt, da clic en los galones para cerrarlo. Voy a decir fondo es esa pizarra. Y le voy a dar una talla de altura mínima de tal vez 100. Genial, ¿Cómo lo pegamos al fondo? Lo primero es que tiene que ser porque estamos haciendo el cuerpo. Ese va a ser el padre. Bien. Este es el niño. No puedo tener esto escondido dentro de ninguna de estas otras etiquetas div. No puedo ponerlo dentro de una sección dentro de un contenedor necesita estar en paralelo con el cuerpo para que esto funcione. Bien, entonces cuando digo en paralelo, tiene que ser como un paso adentro. El padre es el niño que deambula por el cuerpo necesita ser cambiado. Ahora, quiero que esto suceda en todas las páginas. Entonces no quiero hacerlo solo a este cuerpo uno porque si entro y lo cambio para que vigile aquí arriba, si lo cambio, él va, Oye, crea una clase llamada cuerpo dos. Y entonces vas a tener que ir a cada página y aplicarla. Entonces lo que quiero hacer es estar de vuelta aquí y decir Buddy, haz clic aquí. Quiero que todas las páginas de los viejos amigos vayan a Flexbox hecho. Se quiere decir que la dirección es vertical, luego vuelve a como era. Ahora, puedo decir que tú, mi amigo, mi hijo de mi flex, eso es raro. Podemos ir a Espaciado y podemos decir que la parte superior es automática. Nosotros lo hicimos. Eso es más o menos. Voy a pasar por ahora y darle estilo a mi foto. Puedes pasar el rato y revisarme construyendo un pie de página, ser arreglado al principio ahí. No es particularmente elegante. Se le puede despedir. De lo contrario, anda por ahí. Voy a convertirlo en un símbolo y ponerlo en todas las páginas. Bien, entonces lo que quiero dolorido, no quiero ponerlo en un contenedor, un Keegan, y quiero poner en un enlace de texto. Sólo voy a hacer una simple. Voy a envolver este enlace de texto en un editor de texto. Bien, se necesita, ¿qué tiene sentido eso? Sí, sé que la topografía va a ser blanca. Voy a conseguir que se vincule en alguna parte. Bien, pero primero voy a cambiar el texto. Bien, entonces tengo algo de texto. No me voy a preocupar por centrarlo todavía. Estamos agregando el enlace. En realidad, sí quiero hacer, estoy a punto de peinarlo. Así podría empujar la pintura hacia abajo. Puedo jugar con los márgenes. En realidad, te voy a mostrar otra manera porque la manera fácil, bueno, nuestra manera es agarrar el contenedor. Dije, no hagas el contenedor de Flexbox. ¿Funcionará? Vamos a tener un cheque que centraste y ¿lo enviará de esa manera? qué vas, por eso no hacemos eso. Bien. Así que voy a poner en punto muerto y poner eso dentro de él. Bien, entonces aquí está mi texto y bloque sumativo. No está dentro de mi contenedor. Aquí vamos. No, no lo es. Aquí vamos. Ahora puedo decir que diblock, bien, se va a llamar div. Div. Tantos pies de página. Y voy a decir que eres flexible. Vas a estar centrado y vas a estar centrado ahí. Oh, todavía no está funcionando. Oh, ya sé por qué. ¿Sabes por qué? Pausa. ¿Pensar por qué? ¿Por qué lo puedo ver ahí? Se puede ver correr por mis ojos. No hay altura. La altura viene de la sección. Un ***** del contenedor se habría convertido muy bien si le hubiera dado la altura. Así que voy a decir, voy a deshacerme de esta. Por lo que esta tiene una altura mínima de 100. Voy a borrarlo manteniendo pulsada la tecla Opción o la tecla Alt en una PC. Y te lo voy a dar. Vas a tener la altura mínima. Ahora es en el prado o en un baile súper increíble empresa de diseño web sabe un poco lo que está haciendo un poco. Es demasiado grande. Están flecha abajo. Aquí vamos. Bien. Voy a convertirlo en, voy a convertirlo en un símbolo. Hagámoslo. Puedes hacer clic derecho en él y convertirlo en un símbolo donde puedes ir al panel Símbolos y decir Crear símbolo. Este va a ser mi pie de página. Ya tenemos uno de estos. Yo no. Mira mis símbolos, no. Bien, solo hay una instancia en esta página. Pongámoslo en todas las páginas. Entonces voy a copiarlo. Vayamos a las páginas. Tiene una página de inicio y desplácese hacia abajo hasta la parte inferior. Vayamos a mis símbolos. Ajustador. Puede ser complicado de agregar. Hecho el fondo. Bonito. Pero claro, porque es un símbolo, puedo entrar en él y cambiarlo y decir en realidad, no somos TY como Australia. Estamos limitados como Nueva Zelanda o.co. No sé qué es eso, pero significa que se actualizará en las otras páginas como esta. Aquí está allí.co, la empresa. Y vamos a repasar y agregarlo a todas las demás páginas. Te ahorraré eso porque lo has visto. Bien, así es como conseguir que tu pie de página sea pegajoso. Pegarlo al fondo. En realidad usas el flexbox y usas al niño para que te ordenen en la parte superior es raro pero cierto. Bien, pasemos al siguiente video. 71. Cómo crear una animación de carga de página en Webflow: Hola a todos. En este video vamos a hacer alguna animación de carga de página. Podemos hacer que este texto aparezca cuando se cargue la página. Bien, entonces carga la página que aparece. Vamos a cubrir este panel de interacciones. Veremos la flexibilización. Y vamos a construir nuestra primera animación personalizada, no usando algunos de los presets. Bien, vamos a ponernos en marcha. Bien, entonces para esta siguiente sección haciendo indirección y animaciones, he creado un sitio completamente nuevo solo para mantenerlo separado de nuestro portafolio y el sitio web del club que hemos hecho. Sólo para mantenerlo sí, para mantenerlo claro y poder ver lo que estamos haciendo sin mil clases. Pero claro que puede funcionar en esos. Entonces lo que he hecho aquí es que he editado fondo. He agregado un nav solo porque contenedor animado y la sección Harris, que es solo la estructura regular para el sitio. Creo que ya me arrepiento del gradiente. Es bastante el, bastante el efecto en los ojos. Entonces hay un logo. Entonces para empezar, es bastante útil, poner porque en realidad no queremos darle mucho estilo a la sección y luego meter ese diblock ahí dentro. Y no hace nada excepto que va a aceptar las cosas que vamos a animar. Puedes animar cualquier cosa, una Imagen, botón, listas. Voy a traer solo bloques de texto, como una especie de comienzo ahí. Esta va a estar fría. Baile. Y luego tendré otro, un par de cartera basada para 30. Muy bien, voy a estilizar estos muy rápido. Estoy creando mis propias clases. Entonces eso es bastante importante. Entonces en realidad no animas el elemento, eliminas la clase que le aplicas. Así que justo lo que quieras animar y vas a agregar una clase a. Y notarás que pongo dos text-box separados no es difícil animarlos o si están todos en el mismo cuadro de texto porque quería que estos se animaran por separado. Entonces te van a llamar texto entonces tal vez usar mayúsculas solo para que quede más claro y así puedas ver lo que estoy haciendo. El panel de animación es un poco, un poco complicado. Bueno, no lo es, pero lo es, se necesita, y esta va a ser una cartera grande. Bien, entonces tengo estas dos, así que voy a animar estas dos clases. ¿Cómo lo hago? En realidad, voy a estilizar estos muy rápido. Tú esperas ahí. Bien, así les peiné. No tienes que animar ambos de estos hacia arriba. Puedes animarlos de cualquier manera de empezar, ¿has seleccionado tu clase para ampliarla? Vamos a ir al pequeño relámpago aquí. Y este va a ser un disparador de página en peso. Anteriormente en el curso hicimos Ellen y disparadores y vamos a hacer montones. Terminarás haciendo con muchos más elementos desencadenantes. Estamos haciendo un disparador de página solo para mostrarte lo que hace y es apropiado aquí queremos cuando se carga la página porque mira esto. Si voy al disparador de página, hay un disparador realmente genial. Esto es cuando se carga la página. Tan sano. Tienes que leer esto un poco. Tengo una lectura a través de él porque lo es, me parece complicado. Y si encuentro un complicado, vas a encontrarlo complicado. Son muy explícitos sobre lo que hay que hacer y es bastante bueno si lo lees. Cuando la página se carga, seleccione una acción, no tenemos ninguna acción. Vamos a comenzar nuestra propia primera acción personalizada antes de que usáramos unos preestablecidos. Entonces iniciamos una acción, iniciamos una animación para que una nueva, pero aún así no tenemos una realmente vaya a un poco creada una. Ahora tenemos que añadir a este tiempo la animación. Vamos a decir añadir dos aquí. Y esta cosa de p le va a dar nombre. Vamos a llamar a este de aquí una animación de texto. Y vamos a agregarle algunas cosas con tu clase. Ahora, debido a que podrías haber llegado a este punto sin tener nada seleccionado, debes asegurarte ahora de que te levanten la clase. Porque lo que hace es que voy a hacer un movimiento. Puedes hacer cualquiera de estos. Yo haría un movimiento. ¿Puedes verlo traído a través del nombre de la clase texto Dan Capital dan lo compró a través de. Y siempre que estés haciendo animaciones, vigila a estos tipos. Son bastante útiles. Bien, dice que esta acción de movimiento no tiene valor. Bien, entonces hazlo. Entonces lo que voy a decir es que me gustaría moverlo y se puede ver que aparece muy abajo aquí. Ignorar el momento por el momento. Vamos a ver esta acción aquí. Veamos los ajustes aquí abajo y se puede ver un poco X, Y y Z. no me importará ir un poco abajo de todo el mío bastante lejos. Así que voy a acortarlo a leyes que parecen que son un poco como salir del suelo. Pero independientemente, hit play, es la forma equivocada. Entonces eso pasa mucho. Entonces lo que estás diciendo es a cero K aquí, quiero que esté aquí abajo. En realidad, quiero que este sea el estado inicial. No quiero ir ahí. Quiero que empiece aquí. Entonces este es el estado inicial. El problema ahora es que no tiene otro estado. Bien, entonces hay que decir en realidad vamos a agregar otra acción todavía con un seleccionado. Es gracioso como si realmente pudieras animar 1 millón de cosas diferentes aquí. Al hacer clic en esto solo se asegura de que lo que quieres animar, ¿de acuerdo? Quiero agregarle una acción. Quiero hacer otra jugada. Bien, ¿y qué dice este movimiento? Vuelve a 0 y lo vuelve a poner a cero. Se puede ver que dice cero. Ahí está. Por qué dice cero. De hecho tuviste un sake ir a cero por favor. Así que mira este primero, ¿de acuerdo? Esta está establecida en, la inicial está establecida en, estoy configurando en 234. Entonces este otro se pone a cero. Entonces vamos a buscar su plato. Oye, estamos animando. Ignora esta cosa. Esto me parece muy complicado. Y en realidad está pasando a lo largo de 5 s. ¿Cómo sé que esa es la duración ahí? Entonces este top de aquí pierde todo ese tiempo porque dije ser el estado inicial, así que no hace nada. El segundo aunque, tiene mucha información. El ambos mueve que tanto para texto en. Éste dice, Oh, quiero que la duración sea de 5 s. Yo asumiría que esto sería a las 5 s. No sé por qué no lo es. Entonces ni siquiera miro estas son proteínas, no existen. Pueden cambiarlo. Eso cambió esta interfaz de usuario aquí en esta, esta opción aquí, se carga para intentar mejorarla. Bien, entonces está un poco subiendo. Antes de hacer la segunda, veamos algunas cosas. Recuerda esta primera opción aquí, el estado inicial no tiene muchas opciones. El segundo que hace los enfermos es, cuanto tiempo va a tomar esta toma 1 s, Vamos a golpear Play. Tarda más que no. Sin embargo, el mejor es esta cosa de aquí. flexibilización, la flexibilización tiene que ver con el momento es bastante lineal, ¿verdad? Bueno, es lineal, simplemente se va aburriendo. Animación Powerpoint. Bueno, quiero, es probablemente el más bonito primero es la facilidad de entrada y salida. Va a ir lento al principio, lento al final, que se siente como la vida real, pero la gravedad, la fricción, no sé, algo le está pasando a ella va rápido en el medio, ralentizó el principio y el final . Todo mucho más agradable. Hay algunos muy agradables. Dependerá. Mentes subiendo desde abajo. El tuyo podría estar bajando de arriba. Así que veamos a menudo no use la facilidad de entrada y facilidad de salida. Usaré In-N-Out juntos. Bien, alguien que sea los dos. Entonces si voy a decir facilidad adentro hacia afuera, en realidad saltó a rebotar, rebotar trabajo de esta manera. Ver rebote no funciona porque viene, venía del rebote superior con así trabajo. Pero porque viene de abajo, puede que te guste, pero es, es un poco raro, ¿verdad? Es el texto antigravedad. Entonces dependerá de qué manera lo estés haciendo. Entonces lo que quiero hacer es que me gustaría que este se vea bastante bien. Así que recuerda, todos estos que entran y salen pueden ser bastante buenos. En una caja de salida. Un juego bastante agradable. Puedes ver que se va, poco va por el lado opuesto antes de que vaya por el camino del Ford. Se llama anticipación. Un poco va hacia atrás y luego hacia arriba. Es un poco agradable. Y la duración juega un papel importante en esto. Y la forma en que se ve que se ve un poco tonta. Y este 2 s parece demasiado largo. Así que hay mucho jugando con él. Pero digamos eso, digamos 2 s, pero lo está haciendo por uno de estos otros. A veces puede, nos perfeccionamos para 2 s porque hay mucho más pasando. Vamos elástico. Ves 2 s en realidad es bastante agradable para elástico. ¿Bien? Entonces primero, muchas opciones. Segundo mes de duración en flexibilización, tener una jugada alrededor con los diferentes. Rebote pasado es bastante genial. Tiene esa. Ese es el que viene del suelo. Es un poco, un poco arriba y saltando. Pero las duraciones demasiado largas, así que voy a dejarla ahí. Es algo genial. Bien, así que dejémoslo ahí por el momento. Vamos a golpear Guardar si has salido de ella. Bien, digamos que has salido de eso y quieres volver a entrar en ello, ¿de acuerdo? No haces nada, no tienes que hacer clic en nada porque es una animación de página o disparadores de página. Entonces vas a escuchar todos los disparadores de tu página. Una parte de la página, no parte de ningún tipo de elementos. No es necesario que haga clic en él primero. Entonces puedo decir que tú eres esta gran cosa vieja. Bien, aquí es donde empezamos, pero agregamos una animación. Bien, agregamos uno propio. Lo llamamos texto héroe. Lo nombramos como que en esta parte. Para volver a entrar en ello. Recuerda, entra en carga de página, y aquí es donde la magia sucede aquí. previsualiza aquí. Puedo ir a éste y puedo decir, ¿se lo hago al primero? Bien, no pasa mucho por aquí. El segundo aunque, puedo decir en realidad, me gustaría, ya no me gusta el pase de rebote. Creo que me gusta el elástico . Eso tiene que ser más largo. Bien, otra vez, voy a salvarla. Simplemente puedes previsualizarlo aquí o simplemente ir a tu modo de vista previa. Se previsualizará. Lo siguiente que quiero hacer antes de empezar a animar el segundo es que me gustó bastante cuando llegó, como saltar del suelo en lugar de verlo aquí abajo. En realidad, primero hagamos una Pasadena porque antes de cortarla, y porque esa es útil para ver en acción, voy a ir a aquí y va dentro de ella, y no lo haces por separado, todos entran aquí. Entonces vamos a animar texto y otra vez, pero a jugar con la opacidad. Y básicamente está repitiendo esto. Y va a traer algunas cosas interesantes. Entonces voy a golpear Plus, bien, quiero que este sea opacidad. Quiero la opacidad. Recuerda que aparece justo abajo por la parte inferior aquí. El movimiento fue pares de ellos es cero. Pero quiero que sea el estado inicial. Se va a iniciar la opacidad completamente transparente a cero. Genial, hit play. No va a pasar nada porque no lo podemos ver. Lo está haciendo. Simplemente no lo podemos ver. Entonces necesitamos un segundo de estos, voy a ti, quiero otro, opacidad. Y quiero esta opacidad. Un gran truco con esto es mirar, ve 100 como el tamaño y probablemente funcionará. Bien, funciona un poco. Lo mejor es asegurarse de que eres realmente explícito. Díselo, quiero que sean 100. Bien. Y qué tan lejos quiero que esté después de medio segundo. Y mira lo que va a hacer. Que voy a hacer Opacidad primero y luego hacer mi jugada que tal vez quieras eso. Bien, no lo sé. Lo que termina pasando es que puedes ver aquí dice, Entonces, ¿qué estamos haciendo? Entonces hace primero la opacidad y luego se mueve a ésta. Entonces si hacemos clic en este último, el movimiento k, se le está diciendo, Bien, dijo, Este tipo va a comenzar después de la sección anterior, la sección anterior como esta. Entonces va a comenzar después de ella. No quiero eso. Quiero moverme para que suceda con el apartado anterior. Vamos, Hay mucha lectura en Webflow para que lo rodee de alguna manera. Aquí vamos. Están haciendo las dos cosas al mismo tiempo. Se puede ver un poco también aquí adentro, ¿ puede ver que estos tienen un pequeño forro en el exterior? Estos se agrupan al principio. Estos están agrupados, mientras que si lo deshago, bien, ¿puedes ver que hay separados? Son como que hay una especie de línea entre ellos para decir hacer este, luego ese. Bien, entonces vamos a entrar en cuál movimiento. Y quiero decir que en realidad empieces con eso, ¿verdad? Los míos un poco raros. Es por el tipo de que aún se desvanece aquí abajo. Es porque ¿sabes por qué? ¿No está esperando? En realidad es solo pasar mucho tiempo haciendo la animación. Entonces la animación de movimiento tiene esta llamada elástica. Yo sólo voy a deshacerme de esa. Bajar hacia abajo. Y ojalá, Aquí vamos. Se está desvaneciendo a medida que avanza. Incluso entonces todavía no lo es. Qué podemos hacer con las capacidades. Podemos decir que esto se retrasó un poco. Bien, vamos a retrasarlo medio segundo para que en realidad empiece a hacer lo suyo medio segundo en esa pequeña animación. Puede que tengas que jugar con los retrasos. Eso podría ser suficiente. Voy a deshacerme del mío. ¿Cómo los borras? Vas por aquí y dices que estás en el arma pasiva, sabes lo que eran. Asesinado, uno se fue también porque voy a conseguir que salte del suelo. Guárdalo. ¿Cómo consigo que salte del suelo? Así que vamos a volver a los estilos. No tiene nada que ver con las interacciones, es todo que ver con su contenedor. Entonces hay un diblock envuelto alrededor del exterior. Ahí está ahí. Quiero decir, incluso dándole un nombre, llamemos a esta animación de héroe div. Todo lo que tenemos que hacer es que vamos a ver este llamado desbordamiento. ¿Bien? El momento, cualquier cosa que esté fuera de este div como visible o se pueda decir es cualquier cosa fuera del div es invisible. Ahí está un poco cortada los bordes. Porque yo era la fuente. Creo que tengo una altura de línea muy grande. Entonces lo que voy a hacer en realidad es hacerlo un poco más grande, ya sabes, un poco de relleno para que pueda ver la parte inferior. Aquí vamos. ¿Bien? Bien, ahora vamos a jugar a la animación. Voy a ir a Comando Mayús P para ir a Vista Previa. ¿Ya ves que salta del suelo? Se puede ver que saltó también en la parte superior, que tal vez no sea lo que quiero. Así que voy a añadir un poco de relleno a la parte superior de la misma también. Entonces tu acolchado, acolchado ahí. Mira, cuelga en todo el tiempo. Bien, hagamos el segundo. Así que de nuevo, no tengo que tener nada seleccionado. Puedo ir a éste y puedo decir, Aquí está mi carga de página. Es hacer esto. Héroe se lleva animación, bien, abrigo, da clic en él. Tengo texto en hacer solo para moverme. Ahora voy a dar click en esta llamada toma cartera. Yo voy a hacer lo mismo. Voy a agregarle un movimiento. Yo lo quiero quiero esto donde está para estar como estado inicial porque ahí es donde quiero que terminen. Hacer frente. Otra vez, ahí está este chiquitín, mantén un ojo hacia fuera para ellos. No tienes otro valor. Entonces lo está convirtiendo en un valor. Digamos que quiero mudanza para cartera de ticks. Y quiero que haga algo. De nuevo, tiene otro que dice: Oye, ni siquiera has cambiado los valores, como okey-dokey. Yo puedo hacer eso. Quiero iniciarlo fuera de pantalla, que está fuera de ese div con conjuntos de desbordamiento sobre eso significa que salta y va a tener el trabajo hecho mal. Bien. Entonces comienza sus corazones de la manera equivocada, ¿verdad? Bien. Lo hice mal. Sin embargo, tienen problemas con esto, ¿lo sé? Vamos a deshacerlo y hacerlo y hacerlo. ¿Puedes ver el Deshacer? Por el momento si deshago porque estaba arrastrando esto va a ver todas mis deshacer o entrar en esa diapositiva. Ojalá los agruparan. Eso podría ser cierto en el futuro. Flujo de trabajo si estás viendo, creo que deshacer debería ser como todos los porque acabo de deslizarme así de largo. Entonces contaba cada como pequeño número como Deshacer. Bien, entonces este primero de aquí no es el estado inicial. El estado inicial va a estar abajo. Y entonces este va a ser configurado para escribir explícitamente en cero. Ahora voy a golpear play. Este de aquí es el estado inicial. Ahí vamos. Se puede ver que están agrupados ahora es el estado inicial y va a tener trabajo. ¿Quién recuerda por qué va uno y luego el otro? Puede que te guste como ese trabajo hecho. Como dije, es la razón por la que está ahí porque recuerden, estos no lo están haciendo al mismo tiempo. Eso depende totalmente de ti si quieres que eso suceda, uno que suba y el otro que suba. Lo que voy a hacer es combinarlos, ¿de acuerdo? Y puedes hacer un par de maneras. Puedo decir éste de aquí. No esperes a este tipo. Quiero que vayas con él. Bien, quiero que empieces con la sección anterior y se juntaron un poco. ¿Ves esa pequeña banda alrededor de ellos? Voy a deshacer eso. Deshazlo otra vez. De hecho, puedes simplemente arrastrarlo ahí. No lo hiciste. Ahí vas. Amigas. Y la otra cosa cuando están ahí, porque esta es su cartera de den y cartera entonces mi TOC es como moverlas para ponerlas en el orden correcto. ¿Ves que es un poco complicado? En realidad puedes reordenarlos, no hace nada porque están en esa misma pequeña banda. reordenaría. Si los arrastras cuando se separaron, uno pasaría antes que el otro. Bien. ¿Cuál es la diferencia entre los dos? ¿Por qué uno está feliz y lleno de vida y el otro? El otro es un poco Palpatine, lo siento, PowerPoint, eres increíble, pero te uso como tu terrible animación. Mientras que Webflow, puedes ir aquí y decir, voy a usar el mismo. Voy a usar densidad in-out y anunciar. Bueno. Podríamos salirnos con la suya solo por aquí, pero como somos nuevos, ponlo adentro y afuera atrás. Y lo único otra cosa es que y es uno que va rápido. El cronometraje, puedes ver que uno toma 1 s, este se lleva medio segundo. Hagamos que ambos sean iguales y veamos, ahora solo hay mucho jugando como, ¿qué opinas? ¿Es un poco genial? Porque Dan tiene que moverse mucho más rápido, más lejos. Se mueve a una velocidad diferente. Bien, eso es un poco genial. Entonces, aunque tal vez, podría conseguir Dan tenga un poco de retraso. Dan se retrasa. Aquí vamos. Demasiado tiempo. Bien. Si estamos haciendo segundos, entonces 0.25, cuarto de segundo. Sí, aunque el truco con eso, es que lo estoy retrasando tanto, lo que significa que la generación total es en realidad bastante pequeña. que dice si me permiten obtener 0.99495 o enloqueciendo. Lo siento, computadora. Mira. ¿Ves el retraso? Oh no, sigue tomando 1 s, Dulles me. Vamos. Y el 0.25 ya lo hizo. Tener un punto de retardo 9.5 también. Porque como que quiero que salga con él. Bien, es un poco agradable. Ahora acabamos de hacer dos movimientos. Recuerden que teníamos que enviar mensajes de texto y opacidades. Puedes tener tantas. Podrías estar haciendo 14 cosas diferentes para llevarte a Stan y luego se fue a cartera. Establecer el estado inicial es bastante importante. Y luego para el segundo para asegurarse de que en realidad eres bastante explícito sobre lo que es, aunque sea un poco, ¿lo ves? Se desvaneció y dice que es cero. No siempre asumirá que va a decir, bueno, no has dicho nada y es sólo un lugaretero. En realidad se dice que quería ir a cero, que era su base de origen original. Puedes reordenarlos, asegúrate de nombrarlos. Bien, no te llamarán nueva Animación, va a nombrarla. Recuerda nombrar tus clases porque no lo es si arrastras una imagen y empiezas a tratar de hacerla. Y tiene que ser una clase aplicada a esa imagen o golpeando lo que sea. Y aunque no tiene mucho sentido ahora, y cuando estamos haciendo disparadores de página, lo hacemos al elemento real en sí que estamos animando. Mientras que el, pero lo hicimos antes y después se lo hacemos al padre de familia. ¿Podemos agregar la animación al div padre, que tendrá más sentido en el siguiente video? Lo único que hay que recordar. Patés desencadena a la cosa. Y cuando hacemos más disparadores de elementos, se lo haces al padre. Bien, guárdala. Vamos a tener un pequeño adelanto. Bien, eso es, animación de carga de página en Webflow. 72. La imagen se desvanece y consigue más grande al enrollar en Webflow: Hola a todos. En este video vamos a conseguir que estas pequeñas tarjetas se hagan más grandes y se desvanezcan cuando las vuelvas. ¿Bien? Sí, déjame mostrarte cómo hacer eso y Webflow. Bien, para empezar, realidad vamos a usar esa tarjeta que construimos anteriormente en el símbolo del curso. Actualmente, lo que quiero hacer es que acabo crear una nueva página en mi sitio web, simplemente vaya llamada animación, mientras que la prueba de animación, solo para mantenerla separada de todo lo demás, voy a agregar una grilla para que mis tarjetas tengan un lugar adonde ir. Va a ser tres columnas, una fila. Y voy a agarrar ese símbolo. Bien, genial. Es miniatura de bacalao, va a entrar aquí. Y porque tampoco quiero mezclarlo con como nosotros, ¿tiene que ser un símbolo? No, sólo vamos a ir y decir clic derecho y decir desvincular instancia. Entonces ya no está conectado a ese símbolo, no tiene que ser, sino que puede serlo. Bien. Lo que vamos a hacer también es que quiero todo el COD. Tengo una tarjeta de código div, miniatura, lo envuelve todo, todo se esconde ahí dentro. Fresco. Entonces, lo que vamos a hacer con él seleccionado, vamos a ir a nuestras interacciones de relámpago y vamos a hacer un gatillo. Último video que hicimos página. Esto de aquí tiene que ver con un elemento. que interactuar con él o el elemento tiene que hacer algo. Ahora caso, nuestro elemento va a tener un mouse hover. ¿Bien? Vamos a decir en hover, la acción va a ser, y hemos jugado con un montón de estos, pero no es que haya una pareja aquí que sería así que acércate. Vista previa. Es un poco lo que quiero. No es lo que quiero. No hay prefabricados reales que yo quiera. Así que vamos a crear una animación personalizada. Bien, genial, eso no ha hecho nada como antes. Vamos a decir, bien, agreguemos uno. Esta animación la vamos a llamar a esta chica, ¿qué COD? Crecer. Y pulsa Enter y como antes, ten lo que quieras animar. Y voy a decir más, me gustaría que este escalara. Este es un poco raro. realidad no me raro. Antes tal vez estamos moviendo ese texto podemos comenzar a continuación y lo movimos hacia arriba. Entonces empezó en un lugar donde no estaba ya. Entonces tuvimos que hacer ese estado inicial. Este está empezando exactamente donde yo lo quiero. No tengo que tener un estado inicial. Entonces lo que termina pasando es todo lo que tengo que hacer es la escala de miniaturas de bacalao. Durante una cierta cantidad de tiempo. Voy a hacerlo una cierta cantidad de tamaño-sabio hasta usted. Voy a ir aquí un punto para Es un poco grande probablemente, pero nunca he estado en el espectáculo aquí. Entonces no hay vista inicial solo para tener la segunda vista, puedes ir a jugarla. Es un poco más sencillo si ya está, si está ahí sentado donde necesita estar, no es necesario tener un estado inicial para cambiarlo y luego hacer que vuelva por el segundo. Éste, ya está donde tiene que estar. Así que sólo voy a cambiarlo para que sea un poco más grande. Mis x e y están enlazadas, así que va a ser 1.2 para cada una. Y eso es básicamente todo. Ojalá, vamos a guardarlo. Vamos a darle un adelanto. Y voy a flotar sobre una mitad de obras. Bien, entonces se hizo más grande. Y el truco es, es ver esto. Otra vez. Si hago clic fuera, haga clic en mi contenedor. Tengo este disparador, elemento disparador y dice en Hover, hacer crecer este bacalao, luego en hover, no hace nada. Es olvidable. Esto es solo ordenarlo al flotar alrededor. Necesito hacer lo mismo. Voy a decir, inicio y animación. Yo no quiero que haga crecer COD porque solo lo harán dos veces. Ni siquiera estoy seguro de lo que pasó ahí. Agreguemos otra animación llamada tarjeta y crezcamos. Muy listo, Dan. Y voy a decir con la cosa que quiero hacerlo también. Voy a agregar plus y me gustaría escalarlo para volver a uno. Empezó a la una. Algunos de ellos son cero. Es confuso. Bien. Este comenzó de una vez. Quiero volver a uno y solo puedo dejarlo así. Tenía que decir en realidad, número uno. Y eso es todo. No tengo que sentarme el estado inicial poco decir volver a uno por favor, en vuelco, guárdalo, vamos a previsualizarlo. Colocar el cursor. Colocar el cursor. A pesar de que es genial. Es un poco lento. Entonces se ve una mirada al momento de eso, pero eso es lo básico de ello. Bien. Hagamos un par de ellos. Vamos a ver la miniatura de la tarjeta, copiar, pegar, pegar, y vamos a previsualizar esta. Y éste hace uno. Bien, así que vamos a hacer esto, hacer que se vea bonito y ese tipo de oscuridad para ello. Entonces estoy trabajando en esta primera de aquí. Bien. Y veamos la flexibilización para el crecimiento de DQO. Entonces cuando esté flotando, voy a hacer esta llamada Cargo. Bien, tengo este seleccionado y me gustaría que la duración fuera más rápida. Probablemente no. Yo sólo quiero que la flexibilización sea diferente. Facilidad de entrada y salida o algunas de estas. Voy a usar quad, solo la forma del ys. Tienen nombres raros. Nombres. Vamos a darle un adelanto. Bien. Sí, aquí es donde Dan pasa demasiado tiempo yendo a jugar. Voy a acelerar esto. Ve un poco así. Fui con in-out, atrapado. Y el momento estuvo bien. Necesito hacer lo mismo para el desgrupo de COD. Bien. Yo voy a hacer lo mismo. Ahora el truco es cuando se está desvaneciendo, aunque yo haga lo mismo, ¿qué fue? Bien y guárdala. Y jugarlo. Vamos a guardarlo y previsualizarlo. Entonces hago click aquí comando Shift P, Control Shift P. Encontrarás que lleva demasiado tiempo, lo cual te da una idea por ello, como que sale bastante bonito, pero luego tarda demasiado en volver. Es ser mi experiencia como animador a largo plazo. Bien. Promedio a largo plazo. Y ahí está que el, si hago clic en la tarjeta y me meto en mi mouse sobre lo similar, sea lo que sea esto. El como el, la primera instancia, cuando va hacia atrás y mis costos para hover hacia fuera. Bien, hazlo como la mitad del tiempo. Si toma 1 s aparecer, me parece que si tarda medio segundo en aparecer, creo que alrededor de un cuarto de segundo es generalmente una buena regla para como debe volver el grifo. Pero la mitad del tiempo que lleva llegar allí se siente un poco agradable volver. Eso ha sido de todos modos. Esa es esa parte. Hagamos como otra parte de una animación. A diferencia del último video, solo tenemos que tener cuidado, pero aquí dentro, tenemos que agregar más cosas. Así que vamos a entrar en eso donde está editando su estado inicial. Bien, me gustaría que fuera un poco más oscuro o transparente o algo así. Así que voy a golpear plus, y hay un montón de cosas que puedes hacer. Hay algunos más ocultos debajo del filtro. Filtro tiene este de aquí, abajo abajo aquí quiero hacer algo con filtro. Y se puede tomar un desenfoque. El contraste de brillo es un montón de cosas aquí. Tengan una jugada con ellos. Bien, lo que voy a hacer, arrugar vaca podría ser genial. Y eso lo veo mucho. Voy a usar solo el brillo. Y el brillo se pesa 200 por ciento es el doble de brillante, cien es regular, y puedes ir soplar 100 y hacerte más oscuro. Lo que quiero, probablemente voy a ir más oscuro de lo que quiero solo para asegurarme de que sea muy visible en este video tutorial hasta el 50%. Ahí es donde quería empezar. Porque si lo toco, lo está haciendo en el otro extremo, el lado equivocado, se está volviendo más oscuro a medida que sale. Entonces lo que quiero hacer es decir en realidad, este es mi estado inicial. Este es uno de esos momentos en los que en un recorrido por ellos escala solo necesitaba uno porque el estado inicial ya estaba ahí. Es el tamaño correcto. Este no lo es, el tamaño inicial necesita ser más oscuro, y ahora puedo crear otro, crear un filtro. Te voy a enseñar un pequeño truco. Podría recorrer el largo camino que hicimos en el último video. Rellenar para ir, encontrarlo, ir a editar, agregar el brillo y volver a ponerlo a 100. Bien, y eso funciona. Pero lo que quiero hacer para mostrarte un pequeño truco es este de aquí. Puedes hacer clic derecho en él y simplemente duplicarlo. El correcto, no filtro de escala. Vamos a duplicarlo. Ya está descontrolado que ya no soy el estado inicial. Ese es el estado inicial. ¿No hay ajustes? Este no está marcado y tengo un montón de ajustes. Y lo que voy a hacer es conseguir el brillo vaya de ahí, respaldo a 100, que es solo estándar. Nada aplicado realmente. Guárdalo. Vamos a previsualizarlo. Van a ser problemas. Entonces se ven bien. Oh, no funciona. Si se desvanece, tardó una eternidad, tiene dos cosas mal. Vamos por lo del tamaño. Reloj. Lo que está pasando. ¿Por qué lleva tanto tiempo? ¿Alguna idea? Todo, ten una pequeña pausa aquí, pensaré, ¿por qué tarda una eternidad en cargarse? Vamos a restablecerlo y darle un poco de sabor. Esos oscuros, entonces eso es todo. Se está desvaneciendo y luego haciéndose más grande, tenemos que arreglarlo. Entonces haces clic en el padre externo, dices crecer bacalao. Los puedes ver. Hay un pequeño hueco en el medio. Yo quería hacer estas cosas al mismo tiempo, conseguir el mismo grupo Chicos vamos, ahí, vamos. Ahora ve a Vista previa. Todos miren eso. Esa es la mitad de nuestro problema. Hagamos esta otra. ¿Por qué? ¿No va a volver al color oscuro? Puede que te guste así. Podría ser el genial, Ese podría ser el gran efecto de diseño que te guste. Pero digamos que sí quiero que vuelva. ¿Qué hacemos? Ya lo tienes. Entonces mi desgrupo tiene que hacerlo también porque en este momento superamos tenemos estos bits extra. Bien, tiene la báscula y el filtro, pero mi desconocido crece o cualquiera tiene la escala. Voy a hacer lo mismo aquí desde donde sea que esté ahora, que es 100% de brillo. Me gustaría hacer otra para filtro. Abajo por el fondo aquí. mí me gustaría que fuera brillo. ¿Y quién recuerda lo oscuro que lo hice? No puedo recordar. Fue alrededor del 50%, ¿verdad? Debería ir a comprobarlo. Voy a hacerlo, vamos a todos porque era que es un poco comenzó la vida a los 100. Bien. De mi vuelco o de mi crecimiento. Y ahora estoy diciendo Volver al 50. Serán increíbles. Después de tanto tiempo. En cuanto al tiempo, tendrá que probarlo. Sé que dice sobre core. Siempre digo alrededor de la cuarta parte del tiempo. Eso es generalmente para el movimiento en escala, a veces con capacidad y brillo. No es ya que es un poco más de tipo de verificarlo. Vamos a guardarlo. Echemos un vistazo. Hubba. Hubba. Sí. Creo, creo que está bien. Aunque es bastante genial. A mí me encanta. Bien, entonces ya podría haber sido un símbolo. puedo convertirlo en un símbolo Ahora puedo convertirlo en un símbolo haciendo clic derecho en él y diciendo, bueno, hagámoslo aquí. Podríamos ir a crear un nuevo símbolo a partir de él y darle un nombre para reutilizarlo. Pero ya tengo esa de antes y no quiero confundirla. Y también en realidad otra cosa que quiero mostrarte es conseguir que los padres seleccionen, entrar en ello. Y voy a decir, vamos a entrar en ello si encuentras problemas graciosos, bien. A menudo puede ser éste, quien hace esto afectar disparador de indirección está trabajando para R1, funcionando perfectamente. Quien lo desencadena, k, sea cual sea el disparador de acción, que es el wrapper en el exterior se ha ido a estas cosas le va a aplicar. Puede que encuentres que en realidad solo quieres que lo haga a los elementos seleccionados. No todos ellos. ¿Bien? A veces la clase funciona. Quiero que esto aplique a todas las clases. Bien, así que vamos a, hagamos eso. Esta no va a ser una etapa en la que esto funcione para ti. Pero por el momento, miren un poco. Si me cierro por encima de él, ¿puedes ver que todos lo están haciendo?, al menos el crecimiento en k le pasa a todas las clases. No lo quiero en este caso, puede que haya una posibilidad nosotros, ustedes sí. Entonces si hay un punto cero que nos gusta, hombre, no es hacer lo que quiero. Tengan una jugada con estos a través de estos tres. Justo el que tengo seleccionado y no aplica. Ese efecto no juega a ninguno de los otros ni se aplica a todos ellos al mismo tiempo. O éste de aquí con él lo desencadena. Haz estas cosas. De todas formas. Bien, eso es. Esa es nuestra imagen que se desvanece y se hace más grande en el rollover en Webflow con Dan. Bien, eso es todo. Te veré en el siguiente video. 73. Movimiento de imagen de desplazamiento de fondo en Webflow: Hola a todos. En este video, vamos a hacer esto como cosas de desplazamiento de paralaje. Estoy desplazándome hacia arriba y hacia abajo y mira, parece que tiene un poco de sumergir los frontales fuera de foco. Te voy a enseñar cómo hacer esto. Se llama paralaje. Va a ser divertido porque está un poco ligado, no solo las habilidades de animación que hemos aprendido en los últimos videos, sino también algunas de las otras habilidades que hemos aprendido a lo largo del curso. Vamos a ver el posicionamiento y desbordamiento y el índice Z y otras cosas. Todo ese conocimiento previo nos va a permitir hacer esto con relativa facilidad. Bien, vamos a saltar. Déjame mostrarte cómo hacerlo. Bien, primero, he hecho una nueva página solo para mantener todo separado. He agregado un nav porque siento que una página necesita un EV. Y son también ayuda nos da algún tipo de contexto de donde estamos desplazándonos en la página. Entonces para que esto funcione, vamos a agregar nuestra sección, bien, voy a dar esta sección sobre nombre. Voy a llamarlo nubes de sección. Voy a darle una altura. No le voy a dar una altura. Puede dejarlo como está. Está en un contenedor. Y entonces mientras podríamos hacerlo al contenedor, es mejor poner un div dentro de él y agregar toda nuestra animación a eso. Consigamos nuestro div un nombre para que podamos encontrarlo fácilmente de nuevo, nubes div clínicas. Bien, agreguemos nuestros diferentes elementos en su panel de activos. De hecho ya he importado el mío, pero encontrarás en tus archivos de ejercicio de cartera, hay uno llamado Cloud front and back. Trae a ambos, y luego trae a los dos. Bien. Entonces hay otro tipo ahí, él está ahí. Entonces hay SVG, lo cual es algo bueno. Bueno, es genial. El comentario realmente de gran tamaño aunque. Por defecto, las imágenes, ¿puedes ver al 100% el ancho en el que pueden estar? Porque en SVG puede ser de cualquier tamaño o le gusta simplemente masivo. Entonces va a desplazarse. Arrástralo hacia abajo a un tamaño apropiado. ¿Qué tan grande es apropiado? Yo solo, hice de esto un Illustrator, encontré algo de estilo de nubes, luego las exporté como SVG para ustedes chicos, para que puedan usar cualquier cosa. Lo siguiente que necesito es ese poco de texto. Podría haberlo exportado aquí. Bien, lo hice, pero entonces pensé que en realidad es mejor tener texto editable. Puedes cambiarlo y no es como arreglado para siempre. Entonces agreguemos eso. Entonces voy a ir a tu bloque de texto, te tenía de alguna manera. Y voy a ir y darle estilo. Voy a acelerar esto porque hemos labrado cargas de textos y le damos una clase y en realidad estoy antes de que te vayas. Entonces va a estar mi texto, las nubes, y voy a ir a darle estilo. Espera ahí. Bien, entonces, ¿qué hacemos ahora? Y tenemos dos, esto tiene que ser sobre eso. No funciona. ¿Cómo consigo eso encima de eso? Porque eso es lo que quiero, bien. Quiero que esto esté encima. ¿Cómo lo hacemos? ¿Recuerdas que ya lo has hecho antes? Paula's, obtienes una estancia de oro si puedes recordar al menos el término número par, ni siquiera tienes que saber dónde está, bien, si lo recordaste, es esta persona aquí necesita haber posicionado, establecido en absoluto, entonces consigo moverlo por ahí. Sin embargo, lo que voy a hacer es darle un nombre de clase o podemos hacerlo después. Si dices posición absoluta le da una imagen clásica. Voy a llamar a esta imagen nubes frente. Excelente. Bien, está posicionado absoluto para que pueda moverlos. ¿Qué es una cosa que necesito recordar Recuerdo que Dan dijo algo sobre cuando hicimos absoluto, había algo más para recordar. Si recuerdas el momento en que está usando el cuerpo. Bien, y eso está bien. Siempre y cuando no agregues nada por encima estas nubes, de lo contrario, grabará todas. Entonces lo que dices es el padre, que es mi caso, el div te nubla, le dije a relativo. Bien, ahora esta persona es relativa a esa envoltura. Esa referencia siempre va a venir, así que es agradable y útil. Ahora podemos simplemente perder el tiempo con esto para ponerlo en la posición correcta. Ahora bien, no pases demasiado tiempo aquí consiguiéndolo perfecto porque hay una prueba de repetición de pollito cuando estás haciendo esto y solo consígalos aproximadamente, necesitamos que estén en el tamaño más o menos correcto, hacer algo de experimentación y luego ajustar después. Él va a estar ahí. No voy a mover este. Podría, voy a tener un fondo, un término medio, y un primer plano. El término medio generalmente es no tocar. Así es como se convierte en un término medio. Entonces este de aquí, sin embargo, voy a hacer lo mismo en un nombre de clase, imagen, Cloud, Beck. Haga clic. Bien, y voy a decir que eres una posición de absoluta especie de Rix mi texto un poco. Bien, voy a bajarlo un poco. Mi texto también podría hacer absoluto, o simplemente podría agregarle un poco de relleno hasta que usted lo que quiera hacer. Um, es un poco, un poco como empujarlo hacia abajo desde arriba, iría. No importa en esta instancia, Qu, más o menos algo así. Bien, si tienes todo, todo el mundo tiene un className, que es una de las filas. Tiene que estar dentro de un contenedor que podamos usar porque en, porque en los anteriores añadimos la animación a cada uno de estos. Lo que vamos a hacer es agregarlo a los padres ahora, bien, así que vamos a ir a seleccionar el padre que se llama nubes def. Voy a decir en direcciones, quiero elemento gatillo. El que quiero es el que dice, mientras se desplaza en la vista, eso es bastante genial. Mientras te desplazas en la vista, por favor. ¿Puedes hacer algo por mí? Bien, aunque el problema con eso, no hay desplazamiento por el momento. Si tengo una vista previa, no puedo desplazarme por nada porque no hay, No es lo suficientemente largo. Entonces lo que vamos a hacer es fingirlo por el momento. Bien, te voy a mostrar cómo hacer que funcione cuando esté como aquí arriba. Pero por el momento, solo lo empujaré hacia abajo. Entonces tienen nubes y dicen que las nubes div van a tener un pedazo de margen. ¿Bien? Está fuera de la pantalla en la parte inferior y agrega un pedazo, no negativos y positivos para que pueda desplazarme más allá de esta cosa para que se vea genial. Cuando estés trabajando en tu propio sitio, tendrás más contenido para desplazarte más allá fingiendo en este momento con mitógenos gigantes desplazándose. Genial. Así que las nubes y las direcciones ya comenzaron a hacer cantar que decía mientras se desplazaba, o lo vamos a hacer en el pergamino, vamos a hacer una acción de seleccionar acción. No tenemos nada. Bien, entonces vamos a crear una animación personalizada. Ignora esto, pero por el momento los límites que vamos a mirar. Eso no está destinado a estar ahí. Ya he grabado este video unas tres veces, tratando de hacerlo sencillo. No es sencillo. Entonces esta es la simple. Va bastante bien. Me quedé atascado en tangentes para que se vea increíble. Él va a hacer que se vea, bien, bien. El principio a través. Tampoco tienes nada. Entonces vamos a decir, vamos a agregar uno. Voy a darle un nombre. Voy a llamar a éste Cloud scroll. Excelente. Y lo que va a pasar es que hay un 0% y un 100%. Lo que termina pasando es que la animación arrancará aquí cuando 0% significa justo cuando vea dónde estás justo antes de que salga en pantalla eso es aquí. Y cuando pasa de esta caja, las mandíbulas publican aquí. Bien, ahí es donde termina al 100%. Si no entiendes, hagámoslo. Bien, entonces significa que si tengo, si quiero que estas nubes se muevan, ok. Ahora nos vamos de todo el asunto. Decimos que quiero que esta nube de aquí tenga una acción. Va a ser todo movimiento al 0%, que es todo el camino hasta aquí. ¿Dónde está? mí me gustaría que estuviera abajo. Los que estén más cerca de ti deben comenzar abajo. Bien, voy a bajar el mío un poco. A qué distancia hoy la vas a probar. Va a haber abajo y luego al 100% abajo las manos ya me dieron una, quiero que esté arriba. Y si lo mueves bastante lejos, da el tipo correcto de chapuzón al frente. Probablemente se esté moviendo más rápido a través de la cámara. Bueno, si pueden liberar a Co, vamos a darle una prueba. Puedes previsualizarlo aquí. Así que da click sobre esto. Entonces cuando acaba de entrar en pantalla, es donde quiera que lo ponga está. Realmente no lo podemos ver. realmente no importa donde lo pongas al 0%, solo necesita estar abajo cerca de donde quieras que esté porque ni siquiera puede verlo. Pero eventualmente cuando pasa por el pergamino, puedo ver 35, 35, 31% del mismo. ¿Puedes ver que viene pasado? Ahora. Está funcionando, puedo ver que está bastante saltando. Es gracioso en mi rueda de desplazamiento. Bien, tengo un ratón. Yo uso una rueda de desplazamiento Logitech. Me encanta la mayor parte del tiempo, ¿verdad? Sin embargo, en esta instancia, hace estos saltos y se ve asqueroso. Aunque mi track pad en mi Mac, mira este St. he hecho otra cosa que mi trackpad. Se ve bien. Mira eso y mira mi rueda de desplazamiento. Baba, baba usa un poco saltado. Eso va a ser cierto cuando la gente también esté usando tu sitio. Entonces es un poco fastidio. A veces no se ve tan bonito en las computadoras de algunas personas, pero mi track pad, bonito. Entonces eso es algo así, ¿verdad? Vamos a hacer más. Pero básicamente lo tienes. Esto está más cerca, por lo que comienza hacia abajo y se mueve hacia arriba. Hagamos los antecedentes. Dejamos a este tipo porque es el término medio. Parece que está haciendo algo a pesar de que no está haciendo mucho. Éste porque va a estar más atrás, que actualmente no lo es. ¿Lo arreglamos primero? Sí, arreglemos eso primero. Esto está encima de esta imagen. ¿Quién recuerda cómo conseguí las cosas una encima de la otra? Recuerdas que hay un índice z. Entonces hagámoslo. Entonces esta imagen Cloud vuelve, asegúrate de que tiene que salir de esto, guardarla, volver a mis estilos. Bien, no tiene nada que ver con la animación. Voy a darle click a este tipo de aquí, imagen llamada Beck. Ya es absoluto, lo que me da acceso al índice z. Entonces voy a decir que tienes 11. Este de aquí se lleva a Cloud. No puedo ver este índice. Entonces voy a usar el pariente porque relativo solo significa que como que te da estas opciones. Pero él sostiene su espacio, ocupa su lugar en el código. Y voy a decir que quieres, que está por encima de esa. Este tipo de aquí, ya puede ver el índice Z porque los hicimos absolutos. Va a tener tres. Bien, ahí está mi capas. Ahora esta persona, ¿dónde vuelve la Nube? Vamos a conseguir que se anime. Entonces si lo tengo seleccionado y entro aquí, hay nada como es porque a lo mejor empieza el padre, él es el detonante. Él es un poco lo controla todo. Entonces cuando entres dentro de Cloud scroll. Bien, ahora podemos mirar las partes individuales ahora, esta persona o como mi nube de tics y esta de aquí, fue más fácil seleccionarlas por aquí en el navegador. Voy a agregarle, va a tener que moverlo 0% donde quiera que estén. Si quieres que se vean como si estuviera en el fondo, los inicias arriba y los mueves al fondo. Mientras que este tipo, empezaste más bajo y los moviste hacia arriba. Esto es lo contrario. Así que voy a decir que eres un poco más alto y simplemente no pasa por tanta emoción. Esto necesita moverse rápido y parece que está cerca. Esto necesita verse lento, cabe en la parte de atrás. Muchas pruebas. Entonces ahí está. Voy a añadir otro de estos en la parte de atrás. No me lo dio automáticamente. Entonces voy a decir plus en una mudanza porque tenía esa seleccionada, tiene Cloud de vuelta. Bien. Y voy a moverlo a mí bajando. Entonces ¿número dónde está, al frente o atrás en la parte superior? Está un poco más alto y necesitábamos el fondo. Está un poco más bajo. ¿ Esto va a funcionar? Vamos a darle una oportunidad. Vamos a activar la vista previa en vivo. A lo mejor no uses esa alfombrilla de ratón, rastreador de mouse. Están buscando, todos tienen diferente sincronización, paralaje hecho. Vamos a hacer algunas otras cosas solo para ordenarlo, pero puedes ir a la ciudad con nosotros con tu índice z. Podrías terminar con diez capas diferentes. Y aquí tendrás diez cosas diferentes. Y las cosas que están más atrás necesitan moverse más despacio y moverse de arriba hacia abajo. Y las cosas que están al frente necesitan moverse más rápido a todas las velocidades diferentes por velocidades amina, esta de aquí en la parte delantera comienza aquí y termina ahí arriba. Si quieres que algo esté más cerca de la pantalla y fosfato, solo tiene que terminar más arriba. Se movería más rápido en la z y x necesita ser mayor. ¿Cómo nos sentimos al respecto? Bien, No es previsualizar dos en vista previa al usar la rueda de desplazamiento y usar mi mano izquierda. Es bastante genial. Este es un modo de vista previa porque se deshace de las cajas. Oye, el paralaje es increíble. Mi problema. Te voy a mostrar algunos ejemplos de la India. Pero como sé, parece que todo el mundo acaba de descubrir esto y me encantan los sutiles como este. Hay algo moviéndose, pero los de paralaje donde está como, ni siquiera sé hacer clic en las cosas, un scroll alrededor y es muy confuso. La gente puede volverse un poco loca con el paralaje si se te permite, como cuando aprendes esfera de Lynn en Photoshop y solo pones destellos de lente en todo. Está bien. Puedes hacer que todo sea paralaje, pero debes saber que después de un tiempo, asegúrate de hacer algunas pruebas de usuario para asegurarte de que la gente realmente pueda operar. Tu sitio no es como si estuviera sucediendo Mi Dios. Todo es desplejo. Bien, hagamos un poco más. Yo sólo quiero algo así, no sé si estás conmigo y estás como, Eso parecía tener sentido y lo has practicado. Haz una pausa ahora, ve a practicarlo. El video algunas veces. Tarda un poco de tiempo. Quiero que seas feliz. Coloca los cinco. Coloca los cinco. Bien. Vamos más allá porque probablemente vas a tener algunas otras preguntas y algunas otras cosas que quiero mostrarte, pero quiero sentirme como una parada completa. Ya terminamos. Ahí estuvo bien funcionó. Veamos algunas otras cosas. Se pueden hacer algunas cosas chulas con físico tuvo que editarlo. Así que tienes que recordarte cuando estés aquí afuera, vas a ir a las nubes div. Se ve al pequeño, al pequeño relámpago para meterse en él, lo contrario no lo encontrará. Bien. Los disparadores de página son más fáciles de encontrar cuando estoy aquí. Estamos ignorando todo esto y esa es la parte que nombramos entrar dentro de ella. Y ahora estamos algo así como en la parte de la animación. Lo que podríamos hacer también para ayudar, ayudar con la profundidad es con lo que puedes jugar. Entonces, fuera de la animación, no estamos haciendo animación en este momento. Sólo vamos a decir camino de regreso aquí en mis estilos. En realidad soy esta nube frontal. Voy a fingir que hay un poco de profundidad de campo fuera de foco. Voy a decir que tienes un efecto de algunos filtros y uno de ellos de aquí es azul. Así puedo rechazarlo. El truco es que entiendes lo que estoy tratando de hacer. Estoy tratando de que me guste, que esté fuera de foco. Probablemente sea mejor cuando tienes algunos elementos más y luego correr tienes un par. Pero si, se ve un poco co entonces gatillo este esta bien. ¿Parece que tal vez sea de mala calidad? Quiero estar obviamente borrosa sin que sea como un desenfoque loco. Se puede jugar con estos dos. Dos es bueno para mí. Y solo significa que cuando hago una vista previa, se siente como que está un poco desenfocado. Algunos bits están enfocados. ¿Puedes ver que está un poco borroso por fuera? ¿Te gusta eso? Puedes mirar hacia arriba. Otras cosas que quiero mostrarte. Ahora no lo hacemos en este caso, pero es posible que desee establecer las nubes div para que se hagan, pero no en la animación. Y aquí podemos establecer el desbordamiento a oculto para que solo puedas ver cosas dentro de aquí. Se puede jugar con lo grande que es esto. Tal vez solo necesites sujetarlo porque digamos que las grandes nubes se enfrían, pero es, tienes una porción debajo aquí. Otra sección que no necesita ser afectada porque lo está cubriendo todo. Puedes encerrarlo en un límite como el mío. La rueda de desplazamiento realmente no funciona, pero mi trackpad sí. Es hermoso. ¿Cómo hacerlo más bonito? Suavizar, suavizar, creo que está activado por defecto. Ahora echemos un vistazo. Haga clic en el div padre. Vamos a agarrar la animación. Vamos a entrar aquí. Así que suavizar las cosas. Ahora está encendido 50% con él apagado, Vamos a encenderlo completamente. En realidad este mejor ejemplo probablemente. Y totalmente ons no probablemente lo que queremos, pero nos da un ejemplo. ¿Ves que todo está tan desacelerado? Mira esto. Si me desplazo pasado. ¿Ves si me desplazo realmente rápido? Realmente no pasa nada hasta lo que dice si me desplazo por aquí, se necesitan años para ponerme al día. Bien, ese es el alisado o cuando está encendido un poco, solo da un poco más de realismo, como si no fuera mecánico. Yo puedo ir. ¿Ves que poco a poco se pone al día? Donde si lo tengo en cero, simplemente va a ser muy mecánico y solo estaremos donde sea que esté mucho. Entonces no hay amortiguación. La amortiguación es la manera que quiero. Bien. Lo llaman alisado. ¿Qué es bueno? Cualquier cosa es buena. Tengo una jugada por alguna parte, algo así como en ese pedazo superior. El 70% superior ish se ve bastante bien. ¿Qué es un salto? Es porque nadie carga un sitio web a mitad de camino. Normalmente carga un sitio web aquí. Entonces es saltar para hacer el modo de vista previa. Y así es como se utilizan para llevar las nubes donde necesitan estar. ¿Eso tiene sentido? Nadie verá ese salto. Voy a deshacerme de mi otra cosa. Vamos a hacer lo último. ¿Cómo consigo que funcione cuando está todo el camino en la parte superior? Entonces hagámoslo ahora vamos a romperlo. Entonces vayamos a las nubes de def. Eliminemos el margen. Todavía necesitamos un margen en la parte inferior porque si no podemos desplazarnos, no podemos hacer que la animación scroll funcione y funciona un poco, ¿verdad? Puedes ver aquí, vamos a mis obras. Y lo que podrías hacer aquí es olvidar este siguiente bit y simplemente pasar y meterse con tu animación y simplemente jugar por aquí hasta que consigas que la parte delantera y trasera se muevan a los lugares correctos. O lo que puedes hacer es que te permitan hacer este de aquí, límites de animación. Para que puedas hacer clic en cualquiera de estos. Y lo que hace es decir , iniciar la animación, ceros terminan en las animaciones al 100%. Veamos rápidamente a qué se refieren con eso. Entonces eso es esto, aquello de hablar en este espacio versus este espacio, ¿qué hacemos? Entonces dice a ese cero por ciento, aplícalo cuando empieces a ingresar, lo cual no funciona porque funcionó antes porque empezamos a entrar, nos desplazamos hacia abajo. Ya está ahí, es completamente visible. Es completamente visible. Empiezo la animación cuando es completamente visible. Ahora esta me atrapó y tú estás como, Oh, voy a cambiar la envenenación para que se detenga cuando esté saliendo. Sepa, no vamos a parar cuando está saliendo porque va a salir de inmediato. Lo que va a estar 100% completo cuando empiece a salir. Lo siento, me confundió solo dejarla en esta. Se ve que dice invisible. Ese es mi no lo sé. No quiero llamarlo pero no lo leí. Se detuvo cuando es completamente visible, que es, y quiero que esté en la animación, llegar al punto del 100% cuando es completamente invisible. Invisible, lo que significa, echemos un vistazo. Totalmente invisible significa cuando está completamente fuera, vas, vamos a mi bonito pergamino. Aquí vamos. También lo tenemos en la parte superior ahí. Bien. Entonces la única otra cosa, no voy a meterme demasiado en ello, pero aquí dentro, se puede jugar con el offset. El desplazamiento solo significa como esta cosa aquí es en realidad completamente visible, pero ya es completamente visible por un poco. Como si hubiera un pedazo ya en la parte superior desaparecido. Lo mismo con cuando es completamente invisible. Bien, podrías decidir que querías terminar solo un poquito antes. Es completamente invisible. Y se puede ver ese desplazamiento en diferentes porcentajes. Tengan una jugada con eso. Se está poniendo bastante nerd, pero obtendrás la mayor parte de lo que necesitas sin nada de eso. Pero tal vez necesites jugar con el offset, solo arrastrarlo al presente St. 80% para ver cuáles son los resultados. Tienes una idea de cómo funciona o lo ignoras y simplemente juegas por aquí. Lo que termino haciendo es simplemente pasar más tiempo aquí jugando con los diferentes tiempos de donde realmente está, el frente. Ahora, cuando termine, ¿y si se ve como aquí? Y luego sólo tienes que ir y previsualizar cómo se ve aquí. Vista previa de lo que parece. Está por aquí. Vista previa. Eso es, me parece más útil. Otra vez si deshaces, bien, después de que hayas estado arrastrando esta cosa, si la arrastre de alguna manera contaba todos esos pequeños pasos como si hubiera como mil pequeños deshaces. Sólo voy a configurarlo, sólo voy a arrastrarlo de nuevo. Probablemente podamos recto. Bien, eso es. Eso es paralaje. Último pequeño adelanto. Usando mi barra de desplazamiento, usando mi trackpad. A mí también me gusta. Eso es lo fundamental. Tenemos diferentes capas, diferentes índices SI, y hemos jugado con Al. ¿Y qué hacemos? Hicimos un elemento trigger. Es mientras nos desplazamos entrevista y editamos nuestra animación. Ahora puedes con esas herramientas ir y aplicarlo a otras cosas. Entonces, para obtener buenos ejemplos de los de otras personas, flujo de trabajo tiene una cosa genial llamada Made in Webflow. Y puedes escribir paralaje. Parallax no puede deletrear de otra manera, sino paralaje, esa es la palabra que quieres. Y adelante y mira los ejemplos de otras personas. Bien, entonces echemos un vistazo a abrir algunos de estos. Aquí hay ejemplos increíbles, ¿de acuerdo? Y como que toman lo que hemos hecho además de agregar más más M0 más ocho más. Bien, ahora ojalá tengas algunas de las herramientas para poder seguir ese tipo de tutoriales. Hall, este es uno de ratón. A mí me encanta. Entonces miramos a otro. Éste de aquí. A mí me encanta este. Mira las nubes moviéndose. Y tiene paralaje. paralaje y las nubes móviles se duplican. Entonces porque este, oh, 3D y el paralaje también. Porque los caminos pueden ser nivelados. Hay super cool. Cuando haces esto con nosotros, Dan. El rumbo ya está hasta el momento y son estos ángeles. Creo que hemos hecho montones. De todas formas. Ahora deberías tener algunas de las habilidades para poder construir algunas de estas cosas siguiendo otros tutoriales. Ha sido divertido, sobre todo este que hemos empatado en cosas como desbordamiento. Hemos empatado en cosas como, recuerda que hicimos posicionar posición relativa, z-index absoluto es todo tipo de cosas geniales para hacer que este paralaje funcione. Bien, eso es, paralaje en Webflow sobre ver en el siguiente video. 74. ¿Es el flujo web bueno para SEO: Hola, estoy fuera de la grabadora de pantalla en la vida real. La vida real. En este video vamos a hablar, ¿Webflow es bueno para SEO? Y este video también, hablaremos sobre qué es el SEO más o menos qué en las páginas y de qué eres responsable como diseñador de flujo de trabajo? Esto es fuera de página. ¿Y quién es el responsable de eso? Sí, hagamos ambas cosas. Entonces es una buena para SEO. Estoy realmente sorprendida. Soy una persona ACO razonablemente competente, así que mi trabajo de tiempo completo, pero he construido un par de negocios alrededor. Sí. Básicamente sobre posicionarse muy bien en los motores de búsqueda. Bien, entonces sí, me sorprendió cuando entré por primera vez en Webflow y lo mucho que han desarrollado desde que lo empezaron en lo que puedes hacer como es la anomalía, esto solo algo básico. Pero es si tienes experiencia razonable y la optimización de motores de búsqueda, o quieres mejorar en ello y quieres asegurarte de que los flujos de trabajo sean capaces de ello. Es sorprendente la profundidad que te permiten hacer. Me sorprendió, así que sí, es bueno. Te mostraremos en los próximos videos, como algunas de las cosas básicas en la página, pero sí, no, eso de mí al menos estoy particularmente impresionado por las habilidades de SEO del flujo de trabajo. Primero, hablemos de SEO on-page y off-page. Seo, optimización de buscadores. Probablemente sepas lo que es solo, bueno, tu sitio web se posiciona en los motores de búsqueda. Necesitamos optimizar para eso. Bien, y hay un poco de dos partes en ello. Hay on-page y off-page. Como diseñador de sitios web que usa Webflow, usted es totalmente responsable que el SEO en la página puede y debe ser parte de su trabajo mientras está trabajando en su sitio. El off-page es algo que podrías hacer, pero a menudo depende del cliente. La diferencia está en las páginas, cosas que están en la página, vamos a ver cosas como Meta títulos, palabras clave, texto alternativa, cosas que son relativamente fáciles de hacer. Y luego las cosas fuera de la página son cosas como vincular a tu sitio. Te pregunté, creo que antes en el curso como, oye, si te gusta este curso, enlaza a mi curso Webflow, porque esos son complicados de conseguir, muy difíciles de conseguir, pero son realmente valiosos para nuestra cartera. Si alguien enlaza a él desde otro sitio, desde el blog de otra persona u otro sitio web de confianza que diga: Oye, este tipo es muy bueno en el diseño de UX. Ve a verlos y hay un enlace a ese sitio que es increíble, fuera de página. Entonces alguien más fuera de tu sitio web está vinculado contigo. Esa es una instancia de SEO fuera de la página. Hay mucho más, bien, y es un gran agujero de gusano, agujero negro, uno de los agujeros para explorar. Y esa debería ser una de las cosas que haces después de obtener tus habilidades de flujo de trabajo, obtuviste tu Galen en la página. K es explorar el SEO fuera de la página. Y sí, es como las mejores cosas que puedes hacer, pero es bastante, Sí, es súper valioso para hacer que un sitio funcione, pero potencialmente hay mucho que hacer. A mí me encanta. Voy a hacer todo un curso sobre SEO fuera de página. Lo hago todo el tiempo de mis cosas para clasificar pozos que lo encontraste? Sí. SEO on-page off-page que vamos a hacer en necesitas ir y hacer off-page es simplemente seguir adelante con él y te mostraré está y dónde tiene que hacer en todo el flujo de trabajo. 75. Descripción Meta title tags robots & sitemap explicado Webflow: Hola a todos. Este video vamos a cubrir algunos solo SEO de alto nivel para el sitio, bien, solo un par de cosas que debes hacer. Y también veremos las etiquetas de título de SEO y las Meta descripciones para tus páginas. Bien, comencemos con el SEO en todo el sitio. Así que vamos a ir a cada sitio web que pueda ir a configuración de su proyecto tiene como un tipo global de pestaña general de SEO del sitio web. Lo único que vamos a cubrir aquí es esta de aquí. Racionalmente importante. Básicamente, en el momento en que estamos en este miembro que en este tipo de sitio web de desarrollo, como un sitio web de puesta en escena antes de que obtenga su propio nombre de dominio. Lo que puede suceder es Google o Yahoo o Bing o cualquier otro motor de búsqueda que pueda venir y en realidad indexa el sitio y potencialmente clasificarlo. El problema de esto ahora, ¿sigue en pedacitos? No está listo para el prime time y no quiero que Google piense que este es el nombre de dominio. Entonces, cuando lancé la otra versión, va a ver dos versiones de la misma, y esta es la original. Entonces lo que puedes hacer en realidad es decir Desactivar. Y dicen flujos de trabajo, subdominios. Entonces Webflow nos da este sitio web, el dominio, nosotros, el subdominio de ese. Entonces solo puedes decir Google, no revises este bloqueador de sitios por favor. Y agrega un poco de cosas al sitio web para decir, No vengas aquí. Sin embargo, puede ser ignorado, por Google todavía podría llamarlo, pero no te van a agregar a rankings de los motores de búsqueda. Cuando consigas tu dominio completo. No importa. Puedes dejar esto encendido y dejarlo apagado. Simplemente no va a permitir que se busque este sitio de desarrollo un poco como . Para eso está esta cosa del robot. Se va a crear automáticamente un robots.txt y decir User-Agent, Google sí permite entrar en mi sitio. Puede, pero es solo útil porque no quieres clasificar, supongo, el sitio y luego competir con él cuando salga a su gran URL en el futuro, correré aquí, no iba a pasar por demasiado ello. Hagamos una más. Enciende esto, bien, solo genera un mapa del sitio para que quede claro en este momento, y tu sitio es bastante pequeño. Entonces, un motor de búsqueda como Google vendrá y podrá indexarlo bastante rápido por índice y media, como arrastrarse a través de él y comprobarlo y decidir qué hay en qué páginas, qué hay importante, de qué se trata. Bien, puedes facilitarlo generando un mapa del sitio. Estos se vuelven cada vez más importantes cuando el sitio se vuelve masivo, ¿de acuerdo? Y puedes asegurarte de que los buscadores sepan dónde está todo y cómo están todos interconectados. Pero por el momento, un mapa del sitio automático es perfecto. Además hay muchas listas de verificación en línea para decir, ¿mi sitio web es bueno? Y dirá que no tenías un mapa del sitio. Simplemente puedes pincharlo y decir, ahora lo hago. Bien, así que eso es una especie de general para la página. Vamos a entrar en cosas más específicas de la página. Así que vuelve a diseñador. Bien, entonces cada página tiene alguna Meta información que necesitas agregar para que pueda ser todo lo que puede ser cuando se está clasificando en motores de búsqueda como Google. Entonces tenemos que subir hasta aquí a nuestras páginas o a esta. Se puede ir a ambos. De todas formas. Lo vamos a hacer primero en la página principal y darle a este pequeño engranaje. Este nombre en la parte superior. No necesitas preocuparte por esto es solo como lo haces referencia dentro de Webflow. El importante es este de aquí, Configuración de SEO, hay etiquetas de título y Meta descripción. Estos son súper importantes porque si no los tienes en tu página, es poco probable que lo clasifices todo. Y una vez que los hayas llenado, no es como que va a ser como, absolutamente, vas a empezar a clasificar en el número uno, pero es una de esas cosas donde puedes clasificar el número 1000000th. Si no los metes, ¿qué hacen? Verás una especie de resultado de búsqueda aquí arriba. En realidad aparecen en los rankings de búsqueda de Google. Entonces echemos un vistazo. Digamos que estoy tratando hacerlo, estoy tratando de clasificar para esto. Esto es lo que la gente buscará en Google y esto es lo que quiero que aparezca. Entonces quiero que esto esté en mi página de inicio es mi conjunto más importante de palabras clave. Para mí es local y es lo que podría estar haciendo. Voy a añadir mi nombre. ¿Bien? Porque alguien podría estar buscando mi nombre también por mi cartera. Podría haberlo visto mientras sacaron mi cartera. Quiero que también suene mi nombre. ¿Puedes ver ahí? Eso es lo que nuestros compañeros. He hecho una búsqueda aquí en Google, bien, para diseño web limerick, Hay algunos mapas. Así que tal vez quiera ir y asegurarme de que mi oficina tenga un lugar específico. Asegúrate de que mi oficina esté realmente registrada en Google Business, bien, y ves aquí abajo todos estos resultados. Estas personas pueden ver una especie de diseño web, diseño web limerick, WebAssign limerick. Pero diseñe limerick, ¿ves lo importante que es esa etiqueta de título? Como este, diseño web Irlanda, ¿de acuerdo? Todas las empresas seguras y mejores en limerick. Entonces esa es la etiqueta de título que necesitas para ser única para cada página. Entonces, si paso a decir mi cartera para el club de kayak ADEA, lo llamaría el proyecto de diseño web de kayak ADEA en limerick. Entonces es único, pero también tiene mis palabras clave ahí dentro. Así que puede ser complicado si tienes cientos de páginas, pero es súper importante porque no tiene sentido tener esto en cada página. No va a hacer que tu sitio más limerick de diseño web, los motores de búsqueda simplemente no saben lo que hay en esa página o único. Así que podría tener páginas donde es UX, UI o diseño gráfico. Para que el sentido general sea que se trata de diseño. Y se trata de limerick. A lo mejor tengo un par de áreas diferentes. Estoy en el condado de Limerick, pero estoy en un pueblo diferente, tal vez en un pueblo. Bien. Entonces ese es el título. Ahí lo puedes ver. La descripción es igual de importante. Es este trozo abajo por aquí, se recorta para que solo puedas tener una cierta cantidad de personajes. No puedo recordar exactamente qué era. Te dice, hace la longitud 155-300, decide que no puedes decidir cuánto corta. Simplemente simplemente lo corta si es necesario. Así que aquí hay una descripción un poco más larga. Así que de nuevo, me parece, esto te puede resultar difícil cuando estás en el principio. Solo ve y echa un vistazo, escribe las palabras clave que tú, ya sabes, si es una industria de la que no eres parte y estás a cargo de esto. Salir, hacer una búsqueda, y luego ver lo que otras personas están haciendo. Bien, ¿Cómo puedes ver que hemos diseñado limerick también aparece en la descripción, así que asegúrate de que se repita en ella? Pero esto es más de la celda. Esto pone a la gente como en lo alto. Aquí es donde necesito estar. Y aquí es donde la gente confirma que ES exactamente lo que estoy buscando. Necesito un sitio web de comercio electrónico o un sitio web un poco de suerte. Así que ve y echa un vistazo, sobre todo si es una industria como, es más fácil para mí porque me gusta el diseño web. Pero si estaba haciendo un sitio web para quesería, solo va a ser complicado. Tienes que ir a buscar cosas de quesería y ayudar con las descripciones emitidas. Ahora, aunque, digamos que lo estaba haciendo para la quesería, salía a ellos y les decía: Bien, necesito descripciones de estas páginas principales. Podrían ser las cinco páginas de alto nivel, y necesito que las escriban. Dadas las palabras clave que necesito. Tienen que ser únicos o la longitud que necesito y consigo que lo escriban, tal vez les envíe un artículo de cómo escribir una buena meta descripción, o puedo escribirla porque esto es solo algunos clientes que nos gustan. Sólo voy a escribir esto el sitio web de papá. Voy a escribir eso yo mismo. Bien, entonces escríbalo, asegúrate de que haya buenas palabras clave ahí dentro. Aquí abajo. Los motores de búsqueda o este de aquí abajo, te puede gustar solo puedes usar la misma etiqueta de título de SEO y la descripción tiene ACO, esta materia de gráfico abierto es lo que aparece en cosas como Facebook y Twitter. ¿Los has visto? Y hay un enlace a un sitio web, lo va a sacar. Lo llaman Open Graph o es este tipo de Meta título y Meta descripción te hace único en cada página que haces. Si estás escribiendo entradas de blog, asegúrate de que sea un fragmento de él. Puede ser un fragmento de él. Eso está bien. Uno era único siempre y cuando se trata de tu etiqueta de título y tu metadescripción. Bien, voy a guardarlo y cerrar EBIT, bien, ese es Meta título y Meta descripción. Asegúrate de que vaya en cada página. 76. ¿Qué es el texto de Image Alt en el flujo web?: Hola a todos. En este video vamos a hablar de SEO para imágenes. Bien, se llama texto alternativo. Toma que puedes agregar para ayudar a describir la imagen. los motores de búsqueda les gusta. discutiremos el texto decorativo. Además, ¿puedes agregar texto alternativo a las imágenes de fondo? Ahora puedes, hay una especie de forma de evitarlo. Bien, hablemos de qué es, qué debes poner ahí, bien, texto alternativo, editas dos imágenes. ¿Por qué editas la imagen? Lo llaman alt porque es texto alternativo. Es lo que cargará, ¿qué se mostrará aquí? La imagen no se carga, bien, ese es el texto alternativo, entonces lo llamamos alt-text. Más importante aún, es para personas que no pueden ver la imagen. Tienen lectores de pantalla y les va a leer. Se puede leer esto muy fácil. Dice que va a decir golpear es, soy Daniel, diseñador desarrollador web y UX de servicio completo. Mejor aún, llegaremos hasta aquí e iremos en círculo. No va a saber lo que hay en ella. Bien, entonces lo que tenemos que hacer para ayudar a esas personas, y también para los motores de búsqueda, los buscadores quieren saber que un tu sitio es accesible para personas con discapacidad visual. Y también les da una pista de lo que trata el sitio. Si este es el único texto en la página que es ahora mismo. Bien, va bien, ¿qué más hay de esta página? Y si este es diseñador trabajando en lepto, bien, ayuda con el agujero para que el navegador sepa de qué se trata esta página. Entonces, para editarlo, lo seleccionas aquí en las imágenes, o puedes hacerlo en tu panel de activos. Se puede ver que hay la misma imagen. Puedo ir al COG y puedo agregar mi texto aquí, o puedo hacerlo por aquí. Una manera muy similar. puede decir usarlo del ácido o puedo agregar mi propio personalizado aquí. ¿Puedes simplemente escribirlo de buena manera para saber qué escribir? No solo pongas definitivamente algunas palabras clave aquí, como si no hubiera daño. Soy diseñadora. Eso es lo que yo. Soy diseñador que trabaja en laptop podría tener que decir usando disfraz. Vistiendo un disfraz. Sí. Ayudará a describirlo como la forma en que lo hago es el mejor método es cerrar los ojos y tratar describirlo a alguien descrito se puede ver. Cierra los ojos y luego trata describirlo en voz alta a ti mismo lo que es. Ahí está Daniel Scott trabajando y portátil. Yo lo estoy haciendo. Cierra los ojos. Está trabajando en una computadora portátil Mac vistiendo un disfraz de oruga con arcoíris. Eso es útil como texto alternativo porque ayuda a la gente a entender lo que sucede en el sitio. Puede hacer que te preguntes por qué. A lo mejor no es realmente apropiado usar ese disfraz. Eso podría ser totalmente correcto, pero lo hacemos porque ayuda a las personas con discapacidad visual. A Google le gusta ayudar a las personas con discapacidad visual y queremos posicionarnos bien. Así que solo asegúrate de que haya palabras clave. ¿No todo no está bien? Limerick, no escribas diseño web. A lo mejor se puede diseñar en una web diseñando en una computadora portátil. Sí, se pone un poco complicado cuando estás en tu imagen número 50, pero no te saltes ninguna imagen, pasa, agrega texto alternativo al centro comercial. Hay una vez donde vamos a echar un vistazo y no tienes que hacerlo si no aporta ningún valor al lector de pantalla. Echemos un pequeño vistazo. Tenemos gusto de animación. No está en esta. Tú justo ahí. Bien, esta imagen aquí hace esta imagen discutiendo qué es y qué hace. ¿Por qué es lo que parece? Nube borrosa naranja. ¿Eso va a sumar al valor del sitio o simplemente está ahí para la decoración? Las nubes, un poco de ion porque es una especie de nube y puedo explicarlo. Es muy fácil de explicar. Pero digamos que es solo un gráfico de gran estrella, solo un poco de swish o algo así. Lo que puedes hacer es decir, en realidad esto es simplemente decorativo, ¿de acuerdo? Simplemente significa que se puede ver tiene un valor informativo limitado. Simplemente significa que se puede saltarse. Simplemente describirse como una imagen decorativa sin tener que ir como si fuera una nube naranja, como la explicándole todo lo es a alguien a quien le pagan. No se va a agregar al sitio, ayuda a explicarlo. Y claramente las nubes y cómo puedo ayudar a que mi negocio de diseño web se posicione bien, diseño web basado en la nube, o tal vez lo haga, pero esa es la alternativa. Puedes escribirlo en una descripción adecuada ya sea en el activo o dejarlo caer, escribirlo en ti mismo realmente en la página, o simplemente marcarlo como decorativo. Y otra vez, pasar por y hacer en cada imagen que la hago mientras la estoy agregando. Porque de lo contrario, si esperas hasta el final, simplemente no lo haces. Una pregunta que me sale mucho se debe. No tengo dos imágenes de fondo. ¿Incluso se puede hacer una imagen de fondo? No se puede decir éste. En realidad es un elemento de fondo a donde esta? Um, no puedo recordar. ¿Era una sección de héroes? Fue fondo ahí está ahí. No es algo que puedas ir y agregar texto alternativo también, derribando la pantalla redefinida, simplemente se salta un poco sobre ella. Si te sientas y muchos de ellos como fondo, digamos por aquí, digamos que fuiste por esto. Agregamos esto como una imagen a propósito porque quiero que esto tenga un buen texto Alt. Voy a repasar y agregar un gran texto antiguo explicando de qué se trata porque quería que fuera parte de la estructura del sitio web. Quiero que la gente pueda leerlo a través de estos lectores de pantalla. Y quiero que Google vea, como todas estas imágenes o relacionadas con el diseño, este sitio web debe ser sobre diseño. Entonces si has establecido esto como un gráfico de fondo aquí porque facilita que esto se ponga por encima de la parte superior. Es complicado. Y al revés, si quieres algo que sea una imagen de fondo, pero quieres que sea leída por el lector de pantalla y por los buscadores, puedes hacer esta cosa donde realmente está una cosa y absolutamente posicionaste las cosas encima. Tienes que elegir lo importantes que son estas imágenes para los rankings de búsqueda. Muchos de ellos los tienes porque en este caso, lo he configurado como un símbolo para que pueda hacer el arduo trabajo de conseguir que esto sea exagerado y pueda recortarlo. Pero aprendemos a recortar imágenes porque quiero que esto se posicione y esté en el flujo del texto y no oculto como imagen de fondo. Bien, eso es texto alternativo para imágenes. 77. Palabras clave SEO en encabezados y URL en Webflow: Hola. En este video vamos a hablar de palabras clave en SEO. Te voy a mostrar a dónde necesitan ir y algunas herramientas sobre cómo elegir las buenas. Bien, vamos a saltar. Bien, entonces, ¿a dónde fueron? Es fácil en los encabezados, bien, necesitas buenas palabras clave ahí dentro. Pero en la página real, los navegadores y otros buenos lugares, en realidad solo el conocimiento de palabras clave es súper útil para ponerlo en tus textos antiguos, solo asegurándote de que estás usando las palabras correctas y encontrando otras palabras que podrías usar porque podrías cansarte del diseño web limerick, bien, Así que las páginas, y veamos lo que tenemos. Póngase en contacto con nosotros. Es complicado uno, No es mucho más que la página Contáctenos, pero estas otras páginas, puedo mirar unas buenas palabras clave. La primera es que tengo esta especie de subcarpeta llamada cartera. Portfolio es un buen nombre para ello. Recuerda, este va a ser el increíble sitio web.com de Dan slash portfolio slash. En este caso, hemos diseñado un día un portafolio de club de kayak podría estar bien. ¿Alguien va a estar buscando portafolio de diseño web? A lo mejor. Bien. Creo que me gusta la idea de la babosa K, porque esto es lo que pasa. Este es el nombre que tienen los usuarios de Webflow. Así que en realidad no importa. Esto es lo que saldrá a Internet y lo que Google utilizará para ayudar a entender tu sitio web. Entonces, ¿qué hay en esta carpeta? Voy a decir Diseño de sitios web. Esa va a ser la URL ahí. Y entonces va a tener cualesquiera otras páginas que sean después de eso. Entonces ese es un buen lugar para poner palabras clave. Es querer que diga que si esto se publica y la gente le está vinculando y voy a cambiarlo, va a romper los enlaces. Está bien en esta etapa porque nadie está enlazando al sitio. No me estoy vinculando a ello. De nadie más. Entonces es fácil de cambiar, guárdalo. Echemos un vistazo a los otros. Entonces echemos un vistazo a estas páginas aquí. En realidad, entremos en la página y vayamos al diente. Entonces nuevamente, esta es la babosa k, Entonces este es el nombre de la página dentro del flujo de trabajo. Esta cosa de aquí es donde pueden ir las buenas palabras clave. ¿Ves que está bajo diseño web? Y luego me estoy repitiendo, hemos diseñado, así que tal vez no debería hacer eso. Y eso, aunque de eso se trata el sitio, no es particularmente bueno. La gente no va a estar buscando kayaks de un día. No quiero clasificar por un día kayaks. No quiero que alguien que busque ir kayak venga a buscarme. Entonces eso probablemente sea demasiado largo. Pero algo así es mucho más útil para ayudar a describir lo que estoy haciendo aquí. No estoy haciendo un club para un ciervo kx, o al menos no soy un lugar para ir en kayak, pero definitivamente soy un lugar para pequeñas empresas y limerick para hacer el diseño web, probablemente necesito cortar un par de palabras que están ahí. Parece bastante largo, pero saber qué q es entrar aquí, también en la etiqueta del título y la descripción puede ser complicado. Entonces, ¿de qué obtienes la información de palabras clave? Te voy a mostrar lo que hago. Yo uso el servicio de pago. Es posible que puedas encontrar los gratuitos. Sé que sobre todo como este de aquí, SEM rush, se puede hacer un juicio de siete días. Entonces tal vez solo tengas un proyecto pequeño, solo usa la versión de prueba y luego sal de ella. Pero para el diseño web a largo plazo, vas a necesitar algo como esto. Aquí hay un enlace en la pantalla. Si quieres inscribirte en ACM rush, es el que amo. Es un enlace de afiliado, así que sí obtengo una comisión si te inscribes también pon el enlace en los proyectos de clase justo abajo ahí abajo. Para lo que es útil, entre otras cosas, es encontrar palabras clave. Entonces, cuando estoy escribiendo este curso, estamos bien para Webflow. Siempre estoy esperando en cuando estoy decidiendo cómo llamar el sitio web, estoy pensando que voy a llamarlo Webflow. Y digamos que tengo un video que quiero hacer sobre imágenes, sobre imágenes de fondo. Así que simplemente lo escribiré en algo como esto. Y tengo un pequeño vistazo. Y podría llamarlo imágenes de fondo. Pero puedes ver aquí imagen de fondo no lo sabe, eso es todo. Tiene vistas 3D, 30 búsquedas al mes, lo que no suena muy alto, pero es como para este tipo de flujo sanguíneo oscuro por sí mismo no es oscuro, pero si no es un auto seguros o algo por el estilo. Pero puedes ver aquí si nombro a esta cosa llamada Cómo agregar imagen de fondo al flujo sanguíneo, no hay del todo el doble de la cantidad de volumen de búsqueda. Entonces yo también lo llamo así. Si solo estoy buscando sugerencias sobre recordar nuestra quesería, puede comenzar a escribir palabras clave aquí y obtener ideas de lo que la gente está buscando porque no tiene sentido poniéndolo en algo que está mal, que la gente simplemente no está buscando. Podría ser la forma en que lo llamas. Yo llamo son sala de estar en el salón. Mi esposa e hijos no saben de lo que estoy hablando. El salón. Te refieres a la sala de estar como si. Entonces, si estoy haciendo renovaciones aquí en Irlanda, no voy a llamarlo el salón. Y también me dice cosas geniales como de esto es que es fácil clasificar de esta manera porque no hay mucha competencia por ahí, solo otras cosas súper útiles. Así que realmente disfruto algo como esto y realmente me ayuda cuando estoy haciendo páginas para obtener el idioma correcto y obtener las palabras clave adecuadas. Primero, ya que estoy haciendo muchos cursos de Adobe Photoshop es una de las cosas que hago. Hagamos Entrenamiento con Photoshop. Porque cuando empecé, así lo llamaba porque así era lo que hacía y eso es lo que puse en mis páginas. Estás como, Genial, Sacude. Bien, para el Photoshop Training, ciento 70 personas lo buscan. Fresco. Echemos un vistazo. Cuando por fin comparé cursos de Adobe Photoshop causará auge. La gente usa la palabra costo mucho más que entrenar. Pero si digo mi curso de InDesign y versus el entrenamiento de InDesign, básicamente son lo mismo. Algunos de ellos voltean. Algunos de ellos tienen más probabilidades utilizar la capacitación que los cursos. Cosas raras que puedes averiguar a través de herramientas como esta. Y es increíble cuando puedes ir a un cliente y comenzar entender estas cosas y ayudarles a crear las páginas adecuadas para su sitio también. Podrían faltar algunas páginas geniales que ayudan. Están muy bien buscados y deberían tener una página dedicada en este sitio para explicarlo. Bien, así que cuando estés trabajando en tu propio proyecto o clientes, hazte una idea de qué palabras clave podrías usar y asegúrate de que las estás usando en todo este sitio con tu texto alt, sus etiquetas de título o meta descripciones y en las babosas para esas URL en los encabezados. Y para que no estés reutilizando el mismo una y otra vez, usas variaciones de ellas. eso también sirve esto. Bien, amigos míos, esa es mi peroratoria sobre las palabras clave. Me encantaron las cosas. Bien, En el siguiente video. 78. ¿Puedes exportar el código self Webflow: Hola a todos. Este video lo discutiremos, ¿ puedes exportar código desde Webflow? Puedes totalmente, y es realmente utilizable. Exportará todos los archivos, el CSS, el JavaScript, todo. Necesitas hacer que esto funcione en tu propio host, o tal vez entregarlo a un desarrollador que pueda llevar tu sitio web un poco más lejos. Bien, vamos a saltar y echar un vistazo, bien, a x lo que el código es aquí arriba. Hay un pequeño código de exportación. Tengo mi sitio web abierto y el diseñador, puedo exportar el código, darle un segundo y podrás ver el HTML y CSS dependiendo de lo que necesites hacer, podrías simplemente copiar el HTML y CSS y JavaScript hacia fuera en su propio archivo. Bien, porque está todo ahí dentro. Sin embargo, lo único es que si no tienes una cuenta de espacio de trabajo actualizada, solo verás una parte de esta y no podrás exportarla. Te voy a mostrar dónde está eso en un segundo. Pero digamos que tenemos, estoy trabajando en el núcleo. Lo llaman el espacio de trabajo central. Entonces uno arriba de abajo, puedo preparar un zip, darle un enfermo descargarlo. Bien, tengo una carpeta. Voy a guardar la cremallera en ella. Aquí está el archivo zip y ahí está la carpeta. Y ya verás que es bastante bonito. Puedes ver todas nuestras páginas es mi página principal, que es la página de índice. Puedes ver mi página de contacto, la animación que hicimos páginas de error. Y se puede ver tal vez ese subdominio, mientras que esa carpeta que hicimos solía llamarse cartera, cambiamos en el último video para ser diseño web. Y ahí están esos dos. Notarás que los borradores también están aquí. Entonces algo a tener en cuenta. Ahora puedes copiar y pegar todo esto en tu propio servidor de hosting. ¿Por qué lo harías? Es más económico hacerlo en tu propio servidor de hosting. Sin embargo, los inconvenientes son, si entras y abres esto en un editor de texto, di VS Code o Sublime o Dreamweaver y comienzas a editarlo. No puedes volver a ponerlo en Webflow. Es una calle de un solo sentido. Pero si el cliente regresa y quiere un cambio, puedes volver aquí, hacer un cambio y luego exportarlo nuevamente y subirlo a tu servidor siempre y cuando sigas pagando por ese espacio cuentas que llaman uno, te lo mostraré en un segundo. Ahora para entrar en un poco más de detalle, el problema con este sitio en particular. Lo puedes ver aquí abajo cuando realmente se carga te va a dar una advertencia. Bien, en este caso, todo funcionaría aquí excepto el formulario en la página de contacto. Los formularios de flujo web son un poco difíciles de hacer en línea por su cuenta. Parecen simples, pero hay algunos cheques y Malfoy señalando que tiene que continuar. Por lo que puedes ver aquí, las exportaciones denotan incluir funcionalidad de forma nativa. Puedes usar el formulario si sabes configurarlo tú mismo. Las partes que te he dado, o podrías cambiarlo por algo. Hay otros servicios como tal vez MailChimp u otros servicios que puedes poner en la página. Podría haber una manera, la grande será si puedes verla aquí? Vamos a hacer CMS y comercio electrónico en las siguientes secciones de este curso. Pero no van a funcionar si exportan el código y los alojan ustedes mismos. Hay muchas comprobaciones y bases de datos y validaciones que tienen que suceder para que estas cosas funcionen. Entonces para sitio estético, formas perfectas, podemos sortear eso. Pero cuando empezamos a hacer cosas que son CMA espaciadas, como un blog con un cliente puede subirlo con un cliente o el cliente puede empezar a trabajar en él. O si quieres empezar a trabajar con el comercio electrónico, necesitas usar el hosting de Webflow, el código de exploit. Vamos a echar un vistazo rápido. Voy a saltar de nuevo a mi tablero. Entonces, para mí, tengo el espacio de trabajo central. Podrías estar en el Stata, que es el libre. Es posible que tengas que actualizar a este núcleo. Significa que si vas a pasar algún tipo de tiempo en Webflow, vas a necesitar este porque vas a necesitar tener más dos y sitios alojados en los que estás trabajando potencialmente más todo el resto de la misma. Y uno de ellos es exportar código. Otro buen uso para la opción de código de exportación es incluso si no vas a ser la persona que la aloja porque no sabes qué hace eso, cómo hacerlo. Podrías estar trabajando con un desarrollador que lo haga. Así que puedes diseñar gran parte del front-end, incluyendo low, el JavaScript, en realidad haciéndolo vivir Webflow, hazlo por ti. Esto sería algo totalmente apropiado para luego entregarlo a un desarrollador para agregar esa base de datos o funcionalidad de comercio electrónico. Te permite asumir mucho más del trabajo. Y si eres como yo, eres TOC sobre conseguir que todo se alinee y sea perfecto y no solo dejárselo a alguien más para que ojalá le haga el bien. Puedes hacer mucho de este trabajo de front-end para el proyecto y luego entregar esta carpeta a un desarrollador. encontrarás desarrolladores específicos de Webflow por ahí. Ahora, eso se ha convertido en una industria donde hay divs que ayudarán a las personas que son como yo a hacer esas cosas de front-end, pero realmente no sé cómo hacer las cosas y necesidades de la base de datos back-end soporte porque queremos tomar este diseño y hacer algo que tal vez con flow no podamos hacer justo antes de irnos. Simplemente es interesante si no has mirado, puedes ver aquí lo hicimos este div con la clase aplicada a él llamada textos logo. Es decir, ¿lo podemos ver? Como he mirado, esto no está en ninguna parte. Veamos éste. Tenemos un H1 llamado héroe. Ahí hay una etiqueta de span. Echemos un vistazo al código de exploit. Bien, vamos a echar un vistazo. Ahí está mi div para el nav y se puede ver abre sus cierra aquí. Bien, ¿y entonces dónde está mi héroe? Ahí está ahí. Esa es mi apertura y cierre de esa herencia que hice apertura cierre. Y dentro de ahí hay algo que se llama ¿Quién es mi calefacción? Ahí está. Ahí está mi H1. También tiene un montón de otras cosas aquí. Esto es editado por Webflow. Básicamente se anexan todo anexar. Eso es al principio. Alguna vez puedo recordar. Pusieron un fanon W Hi. Eso es algo que no has hecho, que ellos han agregado para que esta cosa funcione. Y ahí está mi clase que hice llamada golpeando aquí. Ahí está. Ahí está mi texto. Agregué esta pequeña clase span. Entonces es interesante. clase Span solo hace girar esa cosita llamada diseñador. Todavía está dentro del H1. ¿Puedes ver? Pero gira alrededor de diseñador y aplica esta clase llamada secundaria. Si conoces un poco de HTML y CSS, esto es fácil. Si eres nuevo en esto, es realmente interesante y para ver cómo se establece todo esto, y ojalá escribiera es ordenado. Html, es esto. Míralo todo tan hermoso. Lo mismo con el CSS. Verás que hay una mezcla de, mira este de aquí, esta casilla de verificación. Yo no escribí esa porque ese es un guión W gay, pero encontrarás muchas cosas que has escrito y editado. Bien. Echemos un vistazo. Ahí vas. Le peiné el párrafo e hice estas cosas. Yo estilo mi a, que en realidad son los enlaces antiguos. Yo hice esta cosa llamada sección héroe e hice visible el desbordamiento. No estoy seguro de lo que estaba haciendo ahí. Sección nav es mi sección. Bien. Para el nav y todo lo que hice fue hacer que sea un color de fondo de blanco, fff, echar un vistazo a través. Mira, ahí está mi botón y todo el código que uso para hacerlo tan increíble como es, para echar un vistazo también a la exportación. Simplemente es interesante. Entonces esa es la página de inicio para 4.4. Quiero solo páginas de error. Mira el CSS, se descompone muy bien. Ese es el que hice. Esto está normalizado, lo que solo ayuda a que funcione muy bien en diferentes navegadores. Y ese es el Webflow que nos escribieron cuando arrastramos en una navegación y simplemente funciona mágicamente. Es porque le han aplicado un montón de clases para que funcione y no tuvimos que fluir imágenes. Puedes ver todas las tallas grandes, pequeñas y medianas es nuestro precioso favicon. Javascript. Javascript es útil el front end y las direcciones cosas. Así que cualquiera de la pierna de navegación móvil, menú desplegable tipo cosas en ese tipo de interacción para los usuarios se hace con el JavaScript. Y esa es mi subcarpeta. Bien, eso es, eso es exportar código fuera del flujo de trabajo. 79. Para qué se leen enlaces en Webflow para: Hola a todos. Este video, vamos a ver este enlace compartido de solo lectura o compartir enlace de solo lectura. Incluso puedes crear esta copia. Parecía que la gente decía, necesito tu ayuda, ellos obtienen un enlace, es de solo lectura. Tienen una versión completa de Webflow para trabajar. Pueden revisar tu sitio web, código descarado, verificar lo que está pasando, darte algunos comentarios. Decirte lo que está mal. Totalmente raqueta. Muévelo, pero es de solo lectura. Entonces cuando cierren esto, no va a romper tu original. Por eso es el enlace compartido de solo lectura. Es súper agradable. Sí, déjame mostrarte cómo ponerlo en marcha y mostrarte un poco más de detalle al respecto. ¿Te acabo de mostrar todo en la intro? Creo que acabo de hacerlo. Hay un poquito más para hacer esto un poco más de lo que discutir, pero sí, ahí tienes. Eres bienvenido. Bien, entonces para obtener el enlace, subes hasta aquí. Así que proyecto compartido y hay dos num este año enlace de solo lectura. Vamos a copiarlo. Echemos un pequeño vistazo a lo que se hace. Voy a mandar esto a alguien más. Bien. Entonces les estoy fingiendo a alguien más. Yo soy Jane. Y Dan me ha enviado el enlace de solo lectura porque necesita algo de ayuda. Bien. Dice que está preguntando como, oye, mira esta imagen de aquí. No sé cómo se están aplicando las esquinas redondeadas. Necesito apagarlos. ¿Puedes ayudar a Jane? ¿Y Jane obtiene este enlace? Y puedes ver que en realidad estamos en Webflow, lo cual es genial. Jane no necesita haber iniciado sesión en Webflow ni tener una cuenta. Bien, Jane puede irse a casa. Echemos un vistazo. Lo puedo hacer en modo de vista previa apagado y mirar, es la versión de trabajo completa del flujo de trabajo. El solo lectura solo significa que si hago cambios aquí, no va a actualizar el original, lo cual es súper genial. Bien, puedo entrar aquí y decir, bien, echar un vistazo a lo que está pasando. Puedo cerrar todos estos y decir, ¿qué es azul? Es azul. Bien Dan, hay una clase llamada héroe de la imagen en la que estableces el radio en 200, ya sea restableces muertos o lo pones en 100. Bien, simplemente no hay forma de guardarlo, pero es una versión completamente funcional del flujo de trabajo para que la gente pueda ayudar. Puedes preguntar en grupos y foros, Webflow también tiene uno, bien , se llama discourse.workflow.com. Publica en los comentarios de este póster de video en cualquiera de los grupos Bring Your Own Laptop. Y aunque no puedo llegar a todos ellos yo mismo, tengo como cientos de miles de estudiantes ahora. Los foros que agrupa La gente llena de ego que están a la vez aprendiendo y que han pasado por el curso. Entonces al decir eso también, si ves una pregunta que piensas, probablemente podría resolverlo o sería divertido averiguarlo , echa un vistazo ahí, pide el enlace de solo lectura y echa un vistazo y ver si pueden ayudar a otras personas a ayudarse mutuamente. Bien, eso es. En realidad uno de los lugares a los que puedes llegar a él vía aquí arriba. También puedes obtenerlo desde tu tablero de instrumentos. Puedes entrar aquí y decir que cizalla no importa en qué dirección enciendo el enlace de solo lectura compartido, obtener ayuda, ayudar a otras personas. Es un mundo encantador. Bien, eso es. Te veré en el siguiente video. 80. Gestor de estilos y limpieza de clases: Hola a todos. En este video, te voy a mostrar cómo ordenar todas tus clases, todos los estilos que has hecho en este curso, bien, tengo 13 que simplemente no se han usado en ningún lado. Puedo deshacerme de todas ellas. Estamos en este gerente de estilo. Es útil para cuando estás terminando un sitio que está subiendo al dominio o lo estás enviando a un desarrollador. Y quieres asegurarte de que esté lo limpio y ordenado posible. Hablemos de ello un poco más fácilmente dándote los fundamentos de la misma. Pero hablemos de ello con un poco más de detalle. Bien, es limpiarlos. Es el Style Manager. Hemos estado aquí un poco. Bien, me va a mostrar todo lo que he hecho en este sitio o ese flujo de trabajo se hace en mi nombre porque olvidé nombrarlo. Y se puede ver como tengo 11 de ellos en vivo que no han sido utilizados en ninguna parte de la página web. Entonces voy a hacer click en limpiar. Y el único problema con esto, depende de cómo estés trabajando. Podrías estar creando estilos que podrías usar en el futuro. Recuerda como margin-izquierda, margin-margen derecho, margen inferior, arriba. Esto podría pasar y matar a todos esos y podrías usarlos más tarde para mí. Yo no lo he hecho. Tengo textos de este párrafo que no se han utilizado. Tengo esta clase combo llamada botón box-shadow que nunca se acostumbró. Todos los racimos de cosas. Así que ahora puedo voy a través de ellos. Aguanta. Tú amigo. Yo no usé amigo. Bueno, estas cosas que me han hecho muchas de estas como golpes y cuerpo simplemente no usé y ni siquiera las hice Webflow las hizo en mi nombre porque estaba cambiando algo. Entonces o le pegué a deshacer o decidí agarrar la etiqueta del título. Será, lo siento, la etiqueta HTML que tiene estos, probablemente se lo hice al cuerpo. Bien, y luego solo olvidé borrar la clase de que soy un cuerpo frío. Te vas todo tipo de basura. Lo limpió, y no hace otra cosa que estar más limpia. Y aquí, no va a empezar a intentar sugerir clases que no se han usado en ningún lado y durante esa fase de exportación, bien, digamos que estoy exportando esto para alojarlo en otro lugar. No hay un montón de clases ahí dentro que a los desarrolladores les guste rascarse la cabeza, decidir dónde se usa esto o empiezan a usarlo porque son como, Oh, tú lo escribiste, debe ser útil . Y no fue mientras estemos aquí también. El Style Manager es realmente bueno para buscar. Hemos mirado esto un poco. Por eso me gusta usar la palabra decir texto antes de empezar a describir lo que es. Porque me muestra todas las diferentes clases de textos que he hecho para mis clases de pintura. No muchos. Bien, es muy útil solo para poder buscarlos. La otra cosa es, es que podrías tener algo aquí que te guste, cuando escribí el uno o es que no lo sé. Voy a encontrar algo. Campo de garrapatas ese es un nombre terrible uno, ¿qué hice? Bueno, a lo mejor no es un nombre de error. Están pasando muchas cosas con ello. Que hice hots para que el formulario encuentre algo no mientras esperas la grilla tres, el carajo es esto. Así que echa un vistazo. ¿Dónde lo usé? Se puede ver que está en una página llamada pruebas de animación que se está utilizando. Así que echa un vistazo. Cuadrícula tres que entran aquí. Ella es volver a aquí, haga clic en esto, mientras que la cuadrícula tres, usted está aquí. Ahí está. Buenos tres. Y lo que es la grilla tres para cerrarla , no hace mucho. Se aplica. ¿Qué hace? Es conseguir que mi cuadrícula tenga tres columnas ancho y solo cero filas. Entonces, si voy y lo borro eliminado clase, va a volver un poco a la predeterminada. No es lo que quiero. Sí, Bien, Tres necesita quedarse, pero podría llamarlo página de prueba de animación de cuadrícula. Bien, entonces ahí tienes. El Style Manager, voy a deshacer antes de la limpieza. Oh, no puedo deshacer un atado a la página. Si cambio de página, se borran las deshaces. Bien. Así que voy a volver. Regresa. Bien, está hecho para siempre. Vamos a crear una clase y eliminarla. Entonces voy a crear una clase llamada ejes. Simplemente hazlo a div clase global llamada cosa. Bien, tengo que hacerlo. Yo estoy como, Oh si, va a ser genial. Va a ser ancho de 100. Bien, y eso es lo que va a hacer. Y luego luego estoy como, en realidad no necesito esa cosa. Entonces voy a ir borrada. Se puede entrar en los estilos y se debe hacer la parte inferior que no alfanumérico. Puedes ordenarlos de esa manera donde ella pudiera. Pero están en la lista de la cascada, la hoja de estilo en cascada. Lo último que hice, te das cuenta de que esta es la única que no tiene la pequeña línea ahí porque estas pequeñas líneas de aquí solo te muestran dónde se aplica y en qué otras páginas se aplica. Entonces este de aquí, no se aplica a nada porque lo borré. Así que sólo puedo ir aquí e ir a borrar. Mientras que te darás cuenta en la cuadrícula tres, dice hacer clic en esto. No puedo borrar, ¿esta marca? Mientras que este de aquí abajo dice, has estado bien, limpiado, bien, entonces es algo que debes hacer antes de terminar un sitio, enviarlo al cliente, subirlo a su host principal, ya sea Webflow o en tu propio dominio, o antes de entregárselo a un desarrollador. Bien, eso es, Ese es el Style Manager y limpiando estilos. 81. Utilizando tu propio nombre de dominio de sitio web personalizado en Webflow: Hola a todos. Este video, vamos a publicar algo a nuestro propio nombre de dominio. Es la parte más emocionante. Aquí está. Daniel Scott, web design.com. Es en vivo, la gente lo puede ver. Tiene una buena URL de 60 es mucho, la parte más emocionante de todo este proceso para mí. Como si fuera en vivo, la gente lo puede ver. Es increíble cuando es tu primera vez, cuando has creado un montón de sitios, sigue siendo bastante emocionante. Este video en particular, te mostraré cómo hacerlo automáticamente usando algo como GoDaddy o exactamente como usar GoDaddy. Y en el siguiente video, te mostraré cómo configurar manualmente tu dominio personalizado usando otra persona. Pero la versión automática dentro de Webflow es bastante resbaladiza. Bien, vamos a comprar un nombre de dominio y conectarlo a nuestro lado de flujo de trabajo. Primero, vas a publicar y dominio personalizado. Haga clic en el enlace que está debajo de él. Y va a pasar una de dos cosas . Si aún estás ejecutando una cuenta gratuita para tu sitio. Estos datos, vas a tener que actualizar al menos a lo básico porque ahí es cuando permiten dominios personalizados. De lo contrario estás atascado con éste. Puedes usar totalmente esa. Es solo que se ve un poco extraño, bien, así que una vez que lo hayas actualizado, se verá un poco más así. Te voy a mostrar, bien, lo mismo. Haga clic en el botón. Y te va a llevar a la configuración del proyecto, a la que puedes saltar si quieres. ¿Lo ves ahí? Está bajo Publishing. Estoy en mi cartera. Voy a agregar un dominio personalizado. Y es un poco dejadme ahora porque tengo ese plan de sitio. Ahora bien, si tienes un dominio existente parado ahí, posible que ya tengas tu dub, dub, dub dot Dan es awesome.com y tendrás que adelantarte un poco en el video para las personas que no tienen un nombre de dominio. Voy a pasar por eso primero antes de agregarlo aquí. Ahora, al comprar un nombre de dominio, hay algunas versiones automáticas a través del flujo de trabajo, y eso es totalmente genial. Gu no trabaja y mi país por alguna razón, igual que no. Entonces voy a usar GoDaddy. Ahora verás un enlace en la pantalla aquí que es mi enlace de afiliado con GoDaddy. Entonces, si te registras con ellos y usas mi enlace, me dan una cuota de buscador, ayudaron a apoyarme y a las cosas que hago. De lo contrario, puedes ir a GoDaddy directamente. No me ofenderé ni usaré Google. Podría funcionar en tu país, pero voy a hacer la ruta de GoDaddy. Ahora bien, qué metal lo comprarás si ya tienes una cuenta en otro lugar, puedes ir a comprarla desde ahí y luego saltar adelante en el video donde realmente agregamos el dominio existente, pero necesitamos comprarlo primero. Voy a ir a comprar el mío rápidamente. Lo haremos juntos porque es divertido elegir nombres de dominio. Bien, así que voy a ir papi y arriba aquí, me permite escoger y buscar un nombre de dominio. El sitio web cambia. Debería ser bastante fácil encontrar cómo elegir un nombre de dominio. Es posible que tengas que iniciar sesión o crear una cuenta y luego desanimarte porque alguien ya tiene el.com e ir papi pasará y te dará un montón de alternativas para los nombres de dominio es.co, ¿bien? Obviamente punto-coms el mejor. Los buenos a menudo se han ido. Entonces un diodo o co, podría ser un buen segundo mejor. Hay muchos generadores por ahí en términos de generadores de nombres de dominio, y podrían darte sugerencias sobre lo que podrías considerar naturalmente un buen padre, es bastante bueno en eso pasando diferentes tipos de extinciones aquí. Lo único de lo que hay que tener cuidado es que para el primer año, ve y revisa porque a veces estos son como punto tech podría ser genial para el primer año, pero luego puedes ver que cada dos años es de 70 dólares, lo que podría estar bien dependiendo de lo que quieras. Pero siempre hay algo así como, oh, lo obtienes por 0.01 dólares es siempre y cuando lo hagas por el primer año, para el registro de dos años. Solo ten en cuenta eso. Y hay un montón de cosas geniales. Pasará y te dará diferentes opciones en. Obviamente los promocionados de los que tienes que tener cuidado. No tienes que hacerlo, sino solo ten en cuenta que la gente está pagando para mostrarte esos. Bien, así que voy a ir a pagarlo en los datos de mi tarjeta de crédito. No voy a grabar eso. realidad volveré en un segundo, antes de que compres. Yo sólo quería pasar por un par de cosas. No importa con qué registrador vayas a ir para registrar tu nombre de dominio que intentará venderte otras cosas y quizás las quieras. Solo en mi experiencia a tu propia investigación, que toda esta protección completa y cosas para tu nombre de dominio no hace nada. Sigue siendo Nita. ¿Quién es? Aún necesitas entregar tus datos sobre lo que es fold. Podría quedar parcialmente oscurecido y todo esto como prevenir a los hackers. Para mí, siento que eso podría ser un poco de susto. Puede pasar y activar su propia autenticación de dos factores para asegurarse de que nadie pueda hacer ajustes. Pero no es tan caro si eres como, no lo sé. Sólo enciéndalo todo. Lo único que sí queremos hacer aquí es que no queremos dejar de facturar página web. Tenemos una especie de drama. Es gratis, realmente no ajusta nada. Y aquí abajo, ¿necesitas direcciones de correo electrónico a tu altura? Probablemente usaría algo como Google para manejar los correos electrónicos. Así que no usaría Go Daddy, puedes, pero Google tiene alojamiento profesional de correo electrónico web. El flujo web no lo hace. O simplemente podrías usar tu dirección actual de Yahoo de Hotmail o Gmail y simplemente no usar un correo electrónico profesional. Así que voy a ir, no, gracias. Y luego voy a ir a seguir cortando. Entonces voy a saltar a tener un tablero, bien, Así que tienes y compraste un nombre de dominio o uno vertical iría papi primero porque es rápido y fácil. Entonces te mostraré cómo configurarlo manualmente si estás usando otro proveedor de host de dominio. Entonces vamos a agregar nuestro dominio personalizado. Hemos comprado uno. Y ahora voy a escribir mi uno. Se va a agregar dominio. Va a hacerlo, mi caso reconoció que lo compré a través de GoDaddy, que lo hace súper fácil. K lo hará manualmente en el segundo. Bien, podría pedirte que inicies sesión en tu cuenta. Va a explicar lo que va a hacer. Voy a hacer clic en conectar. Conectando manualmente. En realidad no es solo hacer lo automático. Vamos a darle un segundo. Bien, eso aparece arriba. Ya lo vimos antes. Recuerde que activamos y deshabilitamos la indexación del sitio de puesta en escena. Bien, solo déjalo hacer lo suyo y estamos parcialmente ahí. Está conectado. Mi problema es que no he publicado el sitio. Y en realidad antes de irnos, necesitamos hacer un default. Entonces por el momento, realidad hay dos versiones de tu sitio web. Hay un ancho, dub, dub, dub, y uno sin nada ni siquiera hacen que uno sea el predeterminado, lo que va a hacer en realidad va a redirigir. Cuando alguien escribe solo esto, va a redirigir a éste. De lo contrario, terminamos un poco con dos sitios. Es raro, lo sé, pero solo haz que este sea el predeterminado con el dub, dub, dub. Y podemos ir a Publicar. Ahora podemos volver a nuestro diseñador y publicarlo, o podemos hacerlo desde aquí. Bien, volvamos al diseñador porque ahí es donde estamos más cómodos en este momento. Es lo que sabemos cosas. Bien. Estamos en un lugar cómodo, podría tener pantalones cómodos. Voy a ir a Publicar. Sólo hemos tenido esa opción a partir de ahora, bien, ahora tenemos esta. Podemos publicar los dos. ¿Estás listo? Yo uso ciudad. Vas a publicar tu primer sitio web. A lo mejor. Es un momento muy emocionante y probablemente no va a funcionar. ¿Por qué? Porque compré el nombre de dominio hace unos 5 min. A veces esos nombres de dominio pueden tardar un poco en ir y estar ahí. Bien, estamos listos para irnos. Compruébalo. A ver si funciona. 321. Es la Hey, enseguida. Eso nunca pasa normalmente cuando hago esto. Pueden tomar algunas horas para que la DNase se pueblen y todo tipo de cosas deben ser algo de magia pasando entre Webflow y go daddy, me encanta. Entonces esto ya está en vivo. Este es mi propio sitio web. Se siente más real, ¿no? ¿Ahora? Ve a revisar el sitio ahora mismo. Bien, Daniel Scott web design.com. Voy a añadir un poco de huevo de Pascua ahí para ti. Eres bienvenido. Bien, pero si no funciona, comunícate con Webflow, comunícate para ir papi, ambos son muy útiles para estas cosas funcionen porque quieren que tengas una gran experiencia por lo que estás pagando en Webflow y GoDaddy, se ven a favor de los contras ahí. Lo único que podrías hacer ahora es que vuelvas a aquí y podrías decir, como estos dos, ¿ necesito este más? Simplemente puedes seguir publicando directamente, realizar cambios directamente en el sitio web principal. Pero lo que podrías hacer es que realmente podrías hacer cambios y publicarlo el sitio web de puesta en escena para que los clientes los revisen, alguien más para que los revise antes de ir y salir. Bien. Voy a comprometerme a ponerlo también en el sitio principal. Bien, así que eso es como tu trabajo en progreso. Y esta es la última diapositiva. Eso es muy emocionante. Bien, esa es la forma súper automática de hacerlo. Compramos un nombre de dominio y básicamente dejamos que Webflow se conectara para ir papi, lo cual es súper útil. En el siguiente video, lo haremos forma manual. Vamos a hacer eso. 82. Conexión manual de tu propio nombre de dominio personalizado en Webflow: Hola a todos. En este video vamos a ver configurar un nombre de dominio que ya existe. Ese no es el automático que hicimos en el último video a través de dominios Go Daddy o Google, veremos un par de proveedores de hosting a los que tengo acceso, Bluehost y GoDaddy. Además te mostraré dónde puedes obtener documentación para todos los diferentes hosts que si estás usando uno de estos, deberías poder ir y encontrar dónde actualizar los registros DNS manualmente. Es saltar a la derecha para llegar al área correcta de configurar tu nombre de dominio, necesitas ir a donde hayas comprado tu nombre de dominio. Te voy a mostrar Go Daddy y Bluehost, básicamente lo que buscas donde sea que esté tu dominio, habrá algo que ver con DNS. Eso es lo que estás buscando, tus servidores de nombres de dominio, bien, aquí está en GoDaddy también. Habrá en diferentes lugares, pero terminarás en un lugar muy similar. Así que vamos a comprobarlo. A continuación, encuentra tu sitio y quieres ir a esta pestaña de publicación. Han renombrado como en la posibilidad de publicar o hospedar. Y vamos a agregar un dominio personalizado. Vamos a editar un dominio existente. Voy a configurar este de aquí con el plural y agregar el dominio. Y me va a dar algunas opciones. Esto también cambia. Bien, así que si no estás seguro, compra, Habrá un enlace en la página aquí algún lugar para ir y obtener ayuda directa de Webflow si lo han actualizado o tal vez sienten que esto no funciona, ve compruébalo y no tengas miedo de contactar con Webflow o tu DNS que te han comprado tu nombre de dominio y explicar lo que intentas hacer. Lo que estás tratando de hacer es actualizar a los registros, el registro a y abajo aquí, el registro CNAME. Y esto toma constancia aquí. Entonces esta primera de aquí tiene dos opciones. Solo usa el recomendado, no voy a entrar en demasiados detalles sobre las redirecciones y esas cosas, pero vamos a hacer ésta. Necesitamos agregar dos registros DNS K para esto un tipo y agregar que estás buscando eso. Déjame mostrarte cómo se ven en las dos compañías de nombres de dominio a las que tengo acceso, GoDaddy, es bastante simple. Estoy buscando el tipo que es a, y el nombre que está en el nombre del host es Ed, y es un registro a. Necesito borrar ambos de estos para realmente antes de hacer eso, tomar una captura de pantalla de cualquier cosa que vas a cambiar, pegar una captura de pantalla de todo en estas páginas para que si sale mal, no hacerlo bien. Al menos puedes restablecerlo de nuevo a donde estaba. Suprímase ambos. Si no puedes eliminarlos por cualquier motivo, o simplemente no hay acceso a él en tu empresa de hosting, ponte en contacto con ellos, pregúntales porque si los hay bloqueados, podría significar que estás pagando por otro servicio que requiere que nunca se cambien. Entonces tal vez tengas que desbloquearlo. Bien, así que estoy borrando ambos de los registros, nada más. Bien. Y yo soy Bluehost. Lo hacen un poco diferente. Si voy y actualizo este DNS y aquí he guardado todos los registros todos en su propio pequeño grupo. Entonces solo tengo uno en este caso, no tengas nada aquí. Ve y borra esa. Y vamos a sumar dos registros. Recuerda, captura de pantalla antes de ir y hacer cambios. Bien, entonces voy a entrar, eliminar estas acciones no se pueden deshacer. Acabo de copiar esto porque esta es una especie de demostración para esta clase. Voy a pegar eso en un segundo. Bien, Así que ya se ha ido, mi sitio web no va a funcionar por un poquito. Entonces voy a agregar mi registro. Y este caso, es un poco raro. El registro a, es asume que te refieres a un registro. Quizá tengas que ser un poco más explícito. Entonces asume que vas a hacer un código de error. Está alojado en. Y apunta a. Aquí es donde agarraste las cosas del flujo de trabajo. Entonces en este caso quiero esto. Si solo haces clic en él, en realidad lo copia al portapapeles, lo cual es genial. Bien, entonces escribe nombre, vamos a Bluehost. Escriba el registro. Ellos sí tienen diferentes formas de nombrarlo. Tendrá más sentido en un segundo. Voy a dejar la tabla TTL. Vamos a hacer clic en guardar el mío. Pareciera que no apareció en este de aquí. Mostrar todo o es, oye, ahí está abajo abajo. Entonces la forma en que estos anfitriones o funcionan, lo que les gusta hacer es meterse conmigo. Los mueven por todas partes en todos los anfitriones diferentes en diferentes lugares. Si te encuentras con problemas, puedes. Hay este sitio web aquí o página web aquí que Webflow ha hecho, está bien, y es una gran manera porque en realidad pasaron por un montón de dominios, o al menos proveedores de DNS, ¿qué haces ¿quieres llamarlos? Y te mostrarán cómo llegar a ella. Bien, y luego hice alguna documentación. Voy a agregar esto a los proyectos de clase. Habrá una opción de enlace que podrás saltar hasta el fondo y ahí está, ahí. Esto también podría cambiar. Así que ve a comprobarlo. Si es un error, avíseme y puedo actualizar este enlace. Sí, es un poco de andar por ahí tratando de que suceda. Mismo. Voy a añadir mi segundo disco. Bien. En este de aquí seguía siendo un at y voy a copiar esto de nuevo en Bluehost. Entonces es a cero puntos para ti y pulsa Guardar. Entonces esa es la mitad de eso hecho. En GoDaddy, es un poco más fácil. No voy a eliminar estos, pero digamos, vamos a fingir que tengo, si los agrego, Son un poco opciones, Más desplegable. Y esto va a ser en, y luego pegar los dos aquí y dejar el TTL a default. Entonces terminarás con esos para, tu anfitrión será diferente, ¿verdad? ¿Qué más tenemos que hacer? Bueno, usted sería capaz de hacer ahora es hacer clic en verificar el estado. Se irá y comprobará. Lo has hecho bien y regresaste. En ocasiones puede tomar algunas horas con los registros DNS para poblarse a través de Internet. Entonces dale una prueba a eso ahora, a ver si funciona. Voy a cerrar eso. Y el siguiente bit es el nombre C y las garrapatas recodifican, tipo de cosa similar. Entonces dependiendo de tu host, ve y busca y elimina lo que tengas buscando este, el nombre C con un dub, dub, dub ahí, borra este y vuelve a agregarlo. Bien, Bluehost los separa, ¿o es el nombre C? Entonces tengo este de aquí del que quiero deshacerme. Bien. Voy a ir a ti y quitarte. No tengo que preocuparme por los otros. Apenas este dub, dub, dub recodifica lo mismo que antes. Vamos a fingir que lo he borrado. Y voy a añadir un nuevo disco. Esto fue dub, dub, dub. Y apunta a, vamos a agarrar esta opción aquí, copiar con cara, y vamos a editar. No voy a hacerlo aquí porque quiero Rick esto más de lo que tengo. Y aquí están mis registros de tics. Entonces tengo uno que necesito borrar. Recuerda tomar capturas de pantalla de todo y copiar y pegar eso porque algunas de las cosas que no quieres estar escribiendo que no vamos a eliminarlo, pero quiero eliminar ese registro k y reemplazarlo por uno nuevo. Eso va a fluir me dice cómo se llama. Súper fácil. De nuevo, vas a verificar el estado y ojalá al final diga, Todos estamos bien. Y lo último que debes hacer es como hicimos en el último video, sí hace que uno de ellos esté por defecto. Y para nosotros, vamos a hacer el dub, dub, dub one default. Eso es importante aquí porque dijimos que usamos esta opción que dice que queremos nuestro dominio redirija todo a esto. El dub, dub, dub. Este de aquí es si no quieres eso, quieres que todo redirija al non dub, dub, dub, dub, dub, dub, dub, make default. Ahora bien, si ya tienes algo configurado en tu host o vas a subdominios, muchas otras cosas que te pueden gustar. Es algo complicado. Asegúrese de comunicarse con su proveedor de DNS dependiendo de la calidad de su servicio. Solo estoy un poco tomar una captura de pantalla de lo que estás tratando de hacer, solo explica que Webflow me pide que haga esto. Me puedes ayudar a que suceda porque está cerrada o no la puedo encontrar? Recuerde, Webflow tiene una muy buena conexión con los lados derechos de los documentos dentro de estos sitios para ir y resolverlo. Pero no tengas miedo de preguntar. Entonces eventualmente terminarás con un sitio web que funcione, Daniel. Esto. Eventualmente terminarás en un sitio web que funciona con tu propio nombre de dominio. Bien, un poco de anualidad. Este, configurando manualmente registros DNS para tu sitio web, diseño web hardcore. Bien, eso es. En el siguiente video. 83. Pruebas en tu teléfono móvil real: Hola ahí. En este video, te voy a mostrar un par de formas de probar en un dispositivo móvil. Vamos a probar y de una manera falsa. Y vamos a probar de una manera real de probar la manera falsa es simplemente hacerlo en el navegador es bastante fácil, bueno en un móvil. Y puedes arrastrarlo un poco y puedes ver los pequeños puntos de interrupción en la parte inferior. Ya hemos hablado de eso. Bien, esa es una manera. Otra buena manera es publicar realmente el sitio. Así que publica un dominio. Y luego en el navegador, especialmente Chrome, bien, si no tienes Chrome y eres diseñador web, probablemente lo instales porque es el navegador más popular y necesitas asegurarte de que funciona en ello. Este aunque, en Chrome, puedes ir a Inspeccionar y hay una opción aquí abajo abajo. ¿Puedes ver este pequeño icono aquí? A veces es por defecto a la derecha o a la izquierda. Creo que es por el fondo normalmente. Pero echemos un vistazo. Estás buscando ese icono y puedes hacer clic en él. Y se puede decir sensible. Quería en los diversos tamaños diferentes y comparar cinco K con el 12 Pro o lo que sea la última versión es. ¿Puedes tener una idea de ¿Puedes verlo escala hacia abajo para que puedas ver cómo se ve en ese tamaño completo? Ya ves que necesito un lío con mi botón. Entonces eso es una cosa. Otra buena forma de hacerlo es que solo me gusta publicarla todavía y solo verme un correo electrónico con eso y abrirme en el teléfono, mi teléfono en Chrome porque soy una persona de Google. Puede que veas si te funciona. Puedo hacer click sobre esto en Chrome y decir, puedo compartir en mis dispositivos y solo puedo abrirlo y lo envía a mi teléfono. Es un poco más rápido. Y luego solo ábrelo las manos en mi teléfono. Bien. Y eso lo veo. ¿Lo puedes ver? Y puedo interactuar con él. Lo bueno de esto es puedo ver que los botones se rompieron, pero me da la oportunidad de presionar todos los botones. ¿Son lo suficientemente grandes como para hacer clic, lo cual es una cosa. Google pondrá a prueba tu sitio para ver si realmente puedes físicamente, si obtienes botones pequeñitos. Entonces no me va a gustar. Entonces puedes ir a hacerle una prueba porque a veces se ve bien en pantalla y luego tu pierna se ve rara. Y persona. Eso es mío. N además es divertido. Es divertido ver tu sitio web en Internet, en tu teléfono. Simplemente voy a pegar eso en lo real, publicarlo primero y luego abrirlo en tu navegador. Es bastante fácil. Bien, probando en un teléfono real. Tu proyecto de flujo de trabajo. El siguiente video. 84. Proyecto de clase 06 - Portfolio Complete: Es tiempo de proyecto de clase para poner a prueba todo ese conocimiento que hemos aprendido en este último fragmento, puedes usar tus propias imágenes. Si estás construyendo tu propio libro es un buen lugar para comenzar, bien, usa tus propias imágenes. Estás en disparos a la cabeza, ese tipo de cosas. Si eso no es lo que quieres hacer, puedes encontrar imágenes de marcador de posición en algo como Unsplash o pixeles PEX ELS k, y podrías obtener daños por la cartera a partir de ahí. ¿Qué haces? Hay tres páginas terminar, la página principal, la página Contáctenos y una, al menos una página de portafolio. Bien, aquí está mi enlace a mi diseño aquí. Bien, vamos a tener algunas imágenes de marcador de posición en este momento, pero eso es lo que iba a hacer por la mía. Voy a ir a construirlo en un poco. Pero este de aquí, depende de usted. La forma en que quieres que se vea puede ser simple, puede ser un poco más avanzada. Puedes dedicarte algún tiempo a diseñarlo. Depende de ti. Es principalmente solo practicar y Webflow no tiene que ser lo mejor que puedas copiar lo que tengo, maquillaje, algo propio, ve a investigar algo por lo que otras personas han hecho, Inspírate. Bien, entonces esas son las tres páginas. Asegúrese de que también funcionen en el móvil. Bien. Todos los diferentes puntos de interrupción. Estos son los requisitos. Estas son las cosas que hemos cubierto desde la última ronda de proyectos, solo asegúrate de que tu tipografía vuelva atrás. Tal vez tengas que rehacerlo y asegurarte de que esté en llantas. Los botones necesitan funcionar en todas las páginas de contenido. El caso es solo la navegación funcionando. Símbolos. Debería haber un símbolo para el nav, probablemente para la tarjeta y el pie de página para practicar asegurándose de que puedes hacer un símbolo. Este debe ser un formulario en la página de contacto. Quiero que practiques recortar una imagen usando el ajuste a objetos. A lo mejor solo lo trajimos en imágenes prefabricadas, listas para usar. No vas a tener ese tipo de proporciones fáciles. Imágenes cuando estás recibiendo cosas de mí a Unsplash o cosas de orina. Entonces, cómo hacer ese recorte CSS, tal vez tengas que saltar de nuevo a ese video, hacernos tener un favicon. Todos miren a ese tipo. La foto debe ser pegajosa, significa que simplemente se empuja hacia abajo, al menos una animación de página de inicio. Puede ser súper simple, simplemente algo sutil no tiene que ser paralaje ni nada más. Puede ser, puede ser súper loco. Depende de usted cuando comparta el caso de animación, corte el enlace de puesta en escena, no el de solo lectura. El enlace de puesta en escena es este de aquí, el único camino. Vayamos al diseñador. Es este de aquí, el de arriba. Así que simplemente lo empuja hacia afuera, no tiene que ser un dominio personalizado y simplemente copiar y pegar eso, sino en la página de inicio para que podamos ver lo que estás haciendo, asegúrate de que haya un título medio y una descripción o al menos la página de inicio, y tengo que hacerlo por ellos. Asegúrate de que todos funcionen en el móvil. Podría ser un poco complicado con la animación. En el móvil más pequeño real. Se le permite simplemente desactivarlo para el móvil porque podría ser demasiado para el espacio de pantalla que tiene, pero puede ser propiedad de entregables de escritorio y tableta. Tome una captura de pantalla de las tres páginas tanto como pueda ver dentro del navegador y subirlas y también compartió el enlace de puesta en escena. Éste de aquí. Subirlos al sitio, compártelos en redes sociales, especialmente este enlace aquí, si estás dispuesto a compartirlo en los grupos, aunque sean solo las capturas de pantalla, me encanta ver lo que estás obteniendo con tu cartera. Pero una cosa a tener en cuenta es simplemente marcada ya sea que se trate su propio trabajo o de un sitio de biblioteca de valores. Sólo para detener cualquier confusión de la gente pensando, Oh hombre, eres un gran puedo contratarte y estás como, Sí, pero solo me robé todas esas cosas. Así que solo sé muy obvio para decir que esto es lo que estoy usando el trabajo de otra persona como marcador de posición para practicar mis habilidades de Webflow e incluso acreditar las imágenes si quieres. Y siempre es una buena idea acreditar las imágenes. Notarás un Unsplash cuando lo descargues, te da el nombre. Puedes decir, Gracias Carol, alguien por las imágenes o imágenes proporcionadas por y enumerar a las personas que has usado. Bien, es uno razonablemente grande, especialmente si aún no has completado esta sección superior. Tienes, solo quedan algunas cositas que hacer. Yo digo que vaya a diseñar, es muy fácil. Nuevamente, no se trata de lo bien que su cartera luzca para los colores. Usas fuentes, maquetación, esas otras cosas. Este curso se trata de tener confianza en Webflow que no tengas miedo si eres como, no soy el mejor diseñador, pero estoy aprendiendo flujo de trabajo. No voy a compartirlo. Compártelo explica que eres nuevo en el diseño, tal vez que estás aprendiendo las funciones de Webflow y nos encantaría recibir comentarios. Bien, ese es el proyecto de clase, nunca portafolio sexual, completo. Ve a hacerlo y luego podremos comenzar en otro proyecto. Bien, te veré ahí en un rato. En realidad, vas a pasar algún tiempo haciendo eso. Te veré dentro de un rato. Te voy a poner en marcha en el siguiente video. Ahora. 85. ¿Cuáles son la colección de CMS estática vs dinámica en Webflow: Oye, ¿de qué estamos discutiendo? Estamos discutiendo dos cosas. Qué es CMS y qué sitio estático versus dinámico. Hasta ahora, hemos estado haciendo sitios web estáticos, pesar de que hemos sido animación genial todavía considerada un sitio web estático. ¿Qué hace que sea un sitio web dinámico? En primer lugar, hablemos de un CMS porque ese es el ingrediente clave para que sea un sitio web dinámico. Cms, sistema de gestión de contenidos o base de datos. Es un montón de información que puedes introducir en tu sitio web y cargar y mostrar a la gente. No lo arrastras al copiar y pegarlo en estática. Estás haciendo todo el trabajo. Lo que puedes hacer es tener esta base de datos sin fisuras. Hola, llámalo colección. Y arrojas un montón de información ahí dentro. Y dices, pon toda la información en mi página, en mi página web como páginas y simplemente va y la pone todo ahí arriba. Bien. Ese es un sitio dinámico, digamos una entrada de blog, muy buen ejemplo de ello y lo que vamos a hacer en un poco. Bien, si alguien te dijera, Anna consiguió tres entradas de blog en mi página web, sigue con ella podría ser como, claro, no te preocupes. Construye el primero, duplícalo, y luego haz el siguiente copia pegado todo no lo conseguí luciendo que cuando es bueno y luego un genial, genial. Me encantan esos tres. ¿Puedes hacer 300 más como? Claro. Bien. ¿Y huiste? Un sitio dinámico. Lo que pasa es que se puede decir, sí, puedo hacer 300 ellos. Sin embargo, lo que voy a hacer por ti es que solo voy a darle estilo. Voy a construir una base de datos de colecciones, CMS, todo un poco lo mismo, cosas ligeramente diferentes, pero lo mismo en este contexto. Voy a construir eso para ti. Voy a darle estilo a una entrada de blog. El golpeo se ve así, el párrafo se ve así. Las imágenes entran aquí. ¿Bien? Todo se ve así. Dices, oye, cliente, haz tantos como quieras. Genial. Simplemente ingresan cosas en la base de datos y solo comienza a arrojar páginas. Eso es bueno, eso también es dinámico. Entonces otros buenos ejemplos de ello podrían ser que tengas una lista de personal, ¿de acuerdo? Y tienes un CSV del mismo de tu CRM o de lo que sea que venga, y tienes decenas de ellos, cientos de ellos, miles de ellos. Puedes darle estilo a uno. Compruébalos todos en y en el sitio web. Bien. Los carga a todos, ¿tiene deseos? Bien, podrían ser eventos que se avecinan que tengas una lista grande para base de datos, para colección, otro buen uso, recetas, menús, cualquier cosa que tengas mucho. Tenía un par de ejemplos más. No puedo recordarlos. Autores, clientes, miembros del equipo, listados, canciones, espectáculos, recetas. Esos son todos buenos casos de uso donde hay mucho de lo mismo. Entonces sí, eso es todo. Vamos a ir y comenzar a construir nuestro sitio dinámico requiere una colección CMS Slash. Bien, y luego voy a mostrarte cómo funciona todo y hacer uno, es divertido. Haremos, haremos algunos testimonios. Primero. Gay, se cargan en un sitio y luego comenzaremos a crear páginas con blog. Bien, vamos a saltar a afeitarnos esta mañana. Totalmente no lo hice. Como no te darías cuenta. Reproduciendo el video, como puedes decir el aviso, pero ¿adivina qué? Tú no eres mi mamá. Yo Dan 86. Creación de una colección de CMS en Webflow: Hola a todos. Este video, vamos a crear un nuevo sitio. Va a ser para todos los futuros blog k También vamos a crear nuestra primera colección CMS. Para eso estamos aquí. Vamos a crear una conexión a nuestra base de datos. Es lo que hace que nuestro sitio web sea dinámico. Y luego vamos a agregar manualmente solo un elemento a esa base de datos. En nuestro caso, va a ser un testimonio de Sarah Smith va a tener un testimonio, va a tener un disparo en la cabeza y algunos otros detalles, bien, para empezar a hacer una marca nuevo sitio. Bien, sólo uno en blanco. Ahora es un poco raro. Vamos a empezar a construir una colección en un segundo y podemos crear una en el sitio gratuito. Impresionante. Nada que ver con mi espacio de trabajo, pero este sitio en sí, puedes tener hasta 50 artículos en tu CMS, cual es algo útil para comenzar. El problema es, por el momento, es que puedes tener artículos CMS que podrían ser un alcano, 50 testimonios. Pero en cuanto subes al básico, vuelves a obtener cero, si necesitas un dominio personalizado, básicamente necesitas saltar a una de estas dos cuentas. Y aun así, 50 discos no es tanto, así que vamos a necesitar mucho potencialmente mucho más. Así que 2000 artículos EMS. Perfecto. Entonces actualizaré mi sitio y en el segundo no tenemos que hacerlo por el momento, solo veremos hasta dónde llegamos con el gratuito. Bien, así que veamos hacer esa colección. Así que vamos a crear una colección. Los llaman colecciones CMS piensa base de datos. Bien, esto me da un nombre bonito. Bien, entonces creas esta colección general. Puedes tener más colecciones en una sola cosa, podrías tener testimonios como colección. Es posible que tengas una colección de precios. Es posible que tengas una colección de productos con precios y fotos de productos. Puedes tener muchas colecciones en un sitio. Vamos a empezar con ésta. Esto va a ser testimonios. Bien, bueno, ignora el resto por el momento y mira nuestra información básica. Nos dan dos opciones. Por defecto, solo algo para la lista k. Así que le daremos un nombre, que es perfecto para nosotros. Vamos a tener el nombre de la persona que nos ha dado el testimonio e ignorar la babosa por el momento. Hablaremos de eso en próximo video cuando hagamos publicaciones de blog, echemos un vistazo a agregar campos. Vamos a agregar un campo personalizado. Y probablemente el más importante es un campo de texto plano. Esa es la etiqueta porque se va a llamar testimonial. Testimonial. Bien, entonces la etiqueta es que puedes ver una vista previa por aquí, mi editor, bien, la persona que va a estar subiendo estas cosas, podría ser un empleado, podría ser el cliente, podrías ser tú. Van a tener esta linda cosita interactiva para llenar y esas cosas. Ellos van a poder escribirlo. Bien. Escriba el nombre de la persona del testimonio sobre la que van a llenar en el campo testimonial. Puedes agregar ayuda con texto si quieres. Hay algo raro como este número sesgado. Te gusta, sabes que la persona que lo rellena como como como, tienes que explicar que el número SKU se encuentra a la izquierda para explicarlo un poco más. No necesito porque el amonio es bastante sencillo. ¿Qué entra ahí? El mío va a ser multilínea en este caso. Límites de caracteres. Probablemente. No sé lo que va a ser. Voy a escribir 500 y probarlo porque no quiero mi testimonio demasiado tiempo. ¿Se requiere? No. Bien. Bueno, probablemente lo sea. No para ser honestos. No tiene sentido. Quiero decir, testimonial. Eso no tiene un testimonio. qué más fuimos queremos ir a nombre de la otra persona, el testamento de lo escrito. Agreguemos esto. Solo echa un vistazo rápido, ¿verdad? tomas ricas explicarán en un poco, imagen, Genial, múltiples imágenes. Puedes tener esto, este va a ser genial porque haremos un tiro en la cabeza, dejaremos este en el sake, múltiples imágenes significa que va a haber mucho para elegir. Bien, bueno para una entrada de blog. Sube un montón de imágenes a una entrada de blog para que la persona pueda elegir entre ellas. ¿Va a ser un enlace de video, enlace, correo electrónico, número de teléfono, k, solo un número antiguo regular? Fecha y hora. Eso ya lo haremos. Hablaremos de que luego se encienda, y luego veremos las opciones. ¿Existe la opción de subir archivos? Ahora recuerda que esto no lo es, estás agregando un archivo ahora mismo. Esto les está dando la opción más adelante cuando están subiendo para adjuntar un archivo, un documento de Word, PDF, podría ser, yo diría que estamos haciendo algo para nuestra ganancia de tienda es enumerar el precio lo que es, y tal vez puedas descargar algunas especificaciones en él. No quiero esto sin ahorrar. Entonces sí quiero una imagen. Y esta imagen se va a enganchar. Bien. A lo mejor es el logotipo de una empresa. Si es ese testimonio, voy a agregar un par de cosas más como un recogedor de fechas. Voy a decir que esta es la fecha del testimonio. Me gustaron en mi sitio donde realmente se puede ver que son de hace cinco años aunque de este mes o el mes pasado. Bien. Así que no necesitas ayuda ni mensajes de texto. No necesitas un recogedor de tiempo. Y no hace falta que se requiera. Voy a hacer esa. Agreguemos uno más. Sólo un campo de texto sin formato. En realidad, no, no vinculamos. Bien, salga sin guardar, agreguemos nuestro enlace clicable. Entonces esto va a ser como Instagram, enlace de Instagram. puedan pegar eso ahí cuando lo están subiendo para que gente pueda salir a su negocio o lo que sea que sea. Principalmente porque solo quería incluir un enlace. Bien, entonces tenemos algunas cosas básicas. ¿Qué termina pasando? Vamos a crear la colección. Y ahora tenemos esto como cosas de marcador de posición. En realidad no tenemos ningún testimonio todavía. Acabamos de tener una forma de meterlos en el sitio web. Bien, si necesitas ir editarlo por aquí, bajo testimonios puedes ver estas son las cosas que voy a pedir. Así que vamos a cancelar eso. Tengo cero artículos en mi colección. Solo puedes ir a darme algunos artículos de muestra y solo pondría algunas cosas. Lo vamos a hacer paso a paso. ¿Qué hace el primero juntos? Y luego te voy a mostrar cómo traerlos con un CSV. Entonces tengo en tus archivos de ejercicio bajo Blog, hay uno testimonial. Bien. Y solo tengo algunas cosas básicas para ello. No hace falta que lo use. Estoy usando testimonios reales, pero he cambiado los nombres solo por privacidad. Por lo que Sarah Smith, un testimonio, se requiere debido a los asteriscos rojos pegando escuchar. Ella tiene un enganche para arriba. Bien. ¿Cuál es la señora? Bien. Vas, estos son solo marcadores de posición también. Están en tu blog. Verás disparos a la cabeza y tengo cuatro de ellos ahí dentro. Puedes usar ¿qué más quiero hacer? La fecha del testimonio, va a dar click sobre esto, escoge una fecha en el pasado y enlace de Instagram. No sé cuál es esta persona falsa. Voy a usar el mío. Ven, sígueme ahí. Bien, y voy a hacer clic en Crear. Ahí vamos. Entonces tengo una colección sin fisuras. Yo vería la base de datos de Miss y tiene un artículo en ella. Bien. De un testimonio de Sarah Smith. Bien, el tiempo suficiente para este video, entremos en el siguiente video y subiremos un CSV para llenarlo. Así que no sólo estamos haciendo uno a la vez. Bien, te veré ahí. 87. Agregar la lista de recopilación de CMS a través de CSV Webflow: Hola a todos. En este video, te voy a mostrar como traerlo en un CSV que se produce ya sea a partir de tu CMS, ya sea de tu propio CMS, tal vez un sistema de gestión de clientes, CMS, tal vez sea tu software de contabilidad que produce eso. Todo tu, tal vez tu software de gestión de productos o como nosotros aquí, solo lo vamos a hacer desde una hoja de Google. Voy a traerlo a Webflow y automáticamente lo voy a poner como elementos dentro de cómo las colecciones. Hagámoslo uno por uno, es factible, tedioso. Y habrá muchas situaciones en las que lo estés trayendo de una base de datos que ya existe. Podrías estar trabajando con algún CRM como un software de gestión de clientes o algún tipo de paquete de contabilidad o cosa de stock. Lo que buscas es poder importar un CSV, ¿bien? Entonces sabrás si sabes, si no lo haces, podrías estar haciéndolo de esta manera que lo he hecho es que acabo de crear una hoja de Google, gay, y tengo a mi cliente para llenarlos. Por mi cliente, quiero decir, yo solo lo hago manualmente de esta manera. Y aquí en Google Sheets fui Archivo y fui a descargar. Y estamos buscando estos valores separados por comas, CSV. Tengo uno para ti. Bien, puedes entrar en tus archivos de ejercicios. Hay uno llamado testimonios a ahora se pregunta es la primera fila. Básicamente lo que se pregunta es como, ¿deberíamos ignorar la primera fila? ¿Aquí? Primera fila, en realidad no tiene los nombres de las personas y ajusta el título. Entonces sí lo es. Y lo que hará es que intentará hacer coincidir lo que has escrito. Dijimos que levantamos su nombre. Eso es lo que el miembro Webflow llamó a ese primer campo, que rellenamos. Y a éste también se le llama nombre. Así que te puedes ahorrar algo de tiempo si estás produciendo la base de datos o el CSV, puedes usar el mismo nombre porque los testimonios son los mismos y lo asigna automáticamente a él. Entonces nombre es igual a nombre, testimonial equivale a testimonial. El software en realidad no agregó este hoy. Voy a importarlo y crear un nuevo campo. Y lo haremos también. Hagamos esto como una opción. Bien, nuevo campo llamado software ayuda Texas es en realidad software utilizado. A lo mejor eso tiene más sentido para el usuario. Y va a crear estas siguientes opciones entre las que podamos escoger. Es un pequeño menú desplegable, sin bonificación. Y aquí tenemos yo estaba haciendo esa fecha. No tengo ninguna fecha. Voy a tener que añadirlos manualmente. Esta fecha. Fecha, lo he llamado fecha y aquí se llama Fecha. ¿Por qué no coincidió? Y luego, bueno, si no es así, puedes ir a mapear a unos campos existentes que tengo llamados datos testimonial. Por eso Instagram. Yo no puse eso ahí. Le hice un mapa a un campo. Todas estas cosas me olvidé, agregué enlace de Instagram, las mencioné para arriba luego me hace la vida más fácil. No tenía tiro en la cabeza porque en realidad se puede obtener una base de datos para enlazar a dos imágenes y archivos. Y dependerá de dónde se encuentren si están en línea y lo hace más fácil. Bien, y puedes poner como caminos absolutos y aquí por un definido pero fuera del alcance de este, solo los vamos a subir, agregarlos nosotros mismos. Entonces vamos listos para importar nueve pueden ser 900, bien, es menos satisfactorio con sus únicos nueve. Bien, pero cuando hay 9 mil, mira eso. Bien. Esto es importante, no importante en este momento. Yo no, no planeo publicar estos como mencionaron sus propias páginas, estas son entradas de blog. Yo podría así que el escenario se vuelva a publicar, no se publiquen y me alegro de dejarlos así. Me gusta al principio, son un poco antes te mostré los testimonios. Eso es lo que voy a ser solo voy a ir a la página principal. No van a tener sus propias páginas separadas. Ahora por aquí podemos ver cosas como nombre y cosas que usamos. Faltan bits. Puedes ir hasta aquí porque es un pequeño bolígrafo y decir realmente muéstrame el testimonio en sí y muéstrame la fecha del testimonio. Pero no necesito un enlace de Instagram creado, modificado o publicado que podrías hacer. Depende de ti lo que quieras ver en esta lista, bien, así que recuerda estos mis elementos de la lista, esta es mi colección. Si quiero editar la colección, tengo que volver a aquí y dar click en el pequeño engrane. Ahí está ahí. Esto editará mi colección general. Si quiero entrar en la colección. Si quiero entrar en los elementos en editarlo, cancela eso y entro en estos individualmente. Puedo ir y ajustarlos. Y lo que haremos es elegir los cuatro primeros y añadir una imagen. Entonces en realidad Sarah Smith ya tiene uno. Así que vamos a hacer, vamos a elegir al azar porque esto va a ayudar más adelante voy a escoger esta persona tenía trabajos. Ese tipo, ese tipo no es como, es una foto de archivo de gráfico. Pienso en sí mismo. Creo que ese podría ser Joseph, pero es usado en las maquetas de todos. Es un gran lugareño. Eres guapo, hombre, Joseph. Echemos un vistazo. Sólo voy a elegir un par de diferentes. Yo en realidad, estoy esperando la subida. Guardar. Impresionante. Escojamos otro. Voy a acelerar a través de esto. Bien, don, están todos salvos. ¿Se puede decir que usé un generador de nombres aleatorios? Casi no son nombres. ¿Bien? Entonces así es como subir un CSV. Y en realidad lo que podríamos tener que ver con Syriza aquí que no estuvo antes. Entonces voy a tener que escoger y decir que esto es un testimonio de que ella estaba haciendo un curso, tal vez sea Sigma. Sálvala. Y en el siguiente video. 88. Agregar la lista de recopilación de CMS a la página web de Figma: Hola a todos. En este video vamos a tomar esta lista de testimonios de nuestra colección. Y lo vamos a poner en la página, y va a empezar a llenarlo automáticamente como un sitio web dinámico. Bien, vamos a saltar y te voy a mostrar cómo. Bien, así que tengo un sitio en blanco, así que solo un poco rápido de limpieza. Voy a agregar un contenedor dentro de ese contenedor va a ser en realidad no come nada. Siempre es agradable tener un diblock dentro del contenedor porque solo lo voy a empujar desde arriba. No estoy seguro de que no pueda soportarlo pegado a la cima. Bien, así que vamos a agregarlo. Está bajo nuestra ed. Puede que lo hayas encontrado. Ahí está ahí. Cms, en el momento solo hay un artículo en este pequeño grupo. Es la lista de colecciones. Sabemos cuál es la lista. Ya lo hemos visto antes. Bien, es esta parte Colección y esta es la lista de colecciones. Entonces vamos, vamos a editar. Esto es un poco complicado de sacar. Se siente como algo nuevo. Pero, ¿puedes ver el crossover aquí? Puedes cerrarlo todo. Entonces es solo una cosa gigante lo que se abre. Así que vamos a agregar nuestra lista de colecciones dentro de mi div. Aquí vamos. Realmente no hace nada hasta que lo conectas a una fuente porque puedes tener más de un CMS en nuestro sitio web, estamos haciendo testimonios. También podrían ser tus productos. Tal vez miembros del personal, movimientos de casos, tipo de testimonios y miren eso. Un poco a medias funciona, al menos está trayendo a través de los nombres. Pero no hay nada más que ver si lo previsualizo, ni un montón de nada. Son como cosas fantasmas. Te ayudarían a hacerte una idea de lo que son todas estas celdas diferentes. Y se ve mucho mejor cuando vayamos a este diseño diferente. Tiene tres columnas porque es la mitad de lo que queremos que se vea. Entonces comencemos a agregar bits. Entonces lo que voy a hacer es que ya podemos agregar cualquier cosa, cualquiera de estas opciones y conectarla a nuestra lista. Entonces agreguemos el testimonio. Esa es la más importante. Entonces pongamos en un bloque de texto. ¿Podría ser párrafo? Probablemente podría. Bien. Y se puede ver que va dentro de mi artículo de colección. Lo que quiero hacer es que en realidad incluso lo hice estallar aquí. Dice, me gustaría obtener el texto para este bloque de texto de testimonios. Lo sabe porque conectamos la lista a testimonial. Así que va, oye, ¿quieres recibir el mensaje de alguna parte? ¿De dónde te gustaría obtenerlo? Cuatro. Salgamos de esto y vamos a sacarlo directamente del testimonio. Son textos simples. Genial. Puedes entrar en mi logo de cuadro de texto plano que está bordeado a través. Es un poco difícil de leer, pero se puede ver que hay 12. ¿Cuántos hicimos? ¿Hacemos nueve o diez? No estoy seguro de cuántos hicimos, pero está abarrotado todo ahí dentro. No diseñemos el bloque de texto, sino diseñemos el artículo de la colección. Voy a darle un nombre de clase de amonio. Yo lo llamo testimonio o envoltorio. Sólo voy a agregar un montón de márgenes y relleno solo para poder empujarla. Y digamos que se imagina. En realidad voy a usar relleno que no rompa mis cajitas. Potable. Pagando ambos lados arriba y abajo. Sólo para poder separarlos. Bien. Así que hemos sacado de LC-MS, mírenos, construimos una base de datos llamada colección. Luego agregamos este envoltorio de lista dentro de la lista. Empezamos a agregar elementos y conectarlo a la lista. Agreguemos otro. Entonces vamos a ti qué más necesitamos el nombre de la persona. Es otro bloque de texto. Bien, viejo y aburrido libro de texto. Voy a conectar éste a la persona que tiene un nombre que le voy a dar un poco de estilo. Bien, esto va a ser testimonial. Copia ese código y úsalo cargas. Y este es el formato del nombre. Sólo voy a hacer un poco de estilismo básico. Estamos haciendo el modo rápido. Eso es todo lo que hice. Le pedí al editor que lo acelerara, pero estoy seguro que tú cuando me das 2 s. Sí, genial. Entonces el cuadro de texto podría comenzar. Voy a hacer todo el envoltorio de ticks, número de testimonio agregado o envoltorio a todo esto. Y voy a ir todas las fuentes aquí en realidad ahora podemos acelerarlo porque puedo hacer algunas cosas. Tu peso ahí. Bien, eso es todo lo que hice también. No hay aceleración. Sostiene la fuente para todo lo que hay dentro de ella. Bien, y tal vez este libro de texto, así que voy a llamar a este testimonio, y este va a llamarse texto. Voy a llamar a eso. Iba a añadir un poco de relleno en la parte inferior. Así que espaciándote. Bien, sigamos agregando cosas. Vamos, voy a agregar otro bloque de texto. ¿Bien? Y esto va a ser, en realidad lo es, va a ser un libro de texto, sí. Entonces va a haber un libro de texto de testimonios. ¿Qué va a ser? Va a ser el software que se utilice. A pesar de que era un desplegable en el lado de entrada donde podían escoger. En realidad, en realidad no viste ese dígito. Vamos a hacer eso. Está aquí dentro es texto. Echemos un vistazo a la colección real en sí. Porque recuerden que hicimos un desplegable. En realidad no lo miré tanto. Bien. Ahí está. Significa que cuando alguien está agregando, digamos que están agregando esto y se bajan a esto. Pero, ¿puedes ver? Tienen que agregar, llegan a elegir el nuestro en Figma o es photoshop y luego guardar y volver a mi documento ahora, puedes ver que ha cambiado de Photoshop a XD y ese es un muy buen ejemplo de uso de esa base de datos. Llego a cambiarlo ahí, mejor importar un CSV completamente nuevo. Pasará por y actualizará todos estos. Entonces no es algo que esté copiando y pegando. A lo mejor son los testimonios en solo tienes tres de ellos en la página principal. Y nunca los cambiaste. No necesitas un CMS. Así que mucho drama para que eso vaya. Es por este tipo de cosas repetitivas que pasan todo el tiempo. Al igual que para mis testimonios, me gusta actualizarlo cada semana de otros nuevos para diferentes bits de software. Entonces iré y estilizaré todos estos en un segundo. Veamos qué más podemos agregar. Porque ¿qué se pidió? Mi lista, recuerdo que había una imagen o deberíamos hacer la imagen ahora vamos a hacer la imagen, voy a editar, pero se va a romper porque sólo unos pocos de ellos tienen imágenes. Entonces agreguemos una imagen dentro de aquí. Bien, puedes ir a la cima. Claro. Puedo elegir una imagen o puedo decir que realmente la obtengo de los testimonios. Ya lo ves, córtalo para que me guste solo hay una cosa que es una imagen, genial. Y sólo un par de ellos, cielos, va a romper mi diseño. Voy a apagarlo por el momento porque te lo voy a mostrar en un segundo. Si solo quieres eliminar un elemento que hayas conectado, simplemente presiona Eliminar. Eso me recuerda un buen punto. Digamos que los dejo ahí dentro. Y digamos que no quiero el del medio, como si me fuera a deshacer de ellos. Podría ir a través de mi lista y decir solo ve y eliminarlos todos. O puedo ir a mi colección que es un poco como el general, Es el jefe cuenta dio todos estos artículos. Y puedo decir en realidad, vamos a deshacernos de eso. No quiero disparos a la cabeza solo me causan problemas. Voy a ir a aquí y voy a borrarlo. Dirá que no se puede porque se está utilizando en la página. ¿Dónde se está conectando? Bien. Me está diciendo que es propia la página de inicio. Hay una imagen. Vamos a verlo. Diciendo aquí está. No puedo eliminarlo de la base de datos porque se está utilizando. Así que muy bien. Gracias. Pero ahora podría ir y borrarlo. Y debido a que no se está utilizando en la página, me permitirá eliminar eso en la base de datos o lo llaman la colección. Buena nota al margen ahí. Bien, esas son las agallas principales de este video. Si quieres continuar, voy a estilizar estos y agregar algunos más, pero es lo mismo. Lo que sea que tengas en esa lista, puedes ir a comprobarlo. Tengo un bloque de enlaces. Entonces voy a agregar el bloque de enlaces. Voy a obtener la URL de mi enlace de Instagram. En realidad, creo que los bloques de enlace que no van a funcionar claramente no lo hace. Vamos. Lo que más podríamos hacer son dos cosas que podríamos hacer. Creo que los textos enlazan o podríamos agregar solo un libro de texto normal y agregar eso, el hipervínculo que hemos hecho antes. Pero agreguemos solo un enlace de texto. Está conectado. Consíguelo de Instagram. Ahora, ¿qué le pasa a Fromm? Dice que está recibiendo la URL de ahí para ponerla al final, pero no está recibiendo, también obtienes un texto de ahí. Bien, enlace de Instagram. Realmente no quiero ese texto. Bien, lo que quiero hacer es simplemente escribirlo ahí dentro y decir enlace de Instagram. Enlace de Instagram. Bien, y ve a instalar eso. excitación será única excepto que los he hecho todos iguales. Bien, entonces, ¿qué más quiero? ¿Qué más tenemos en esa lista? momento vamos a ignorar los disparos a la cabeza. No recuerdo lo que hay en mi lista para esperar ahí. Bien, y era la fecha. Entonces otro libro de texto. Bien, vas en cáñamo. Solo me dan las garrapatas de los testimonios y va a ser la fecha en la que tengas estos otros. Entonces tenemos la fecha de testimonio. Ahí están estos otros creados, publicados, un actualizado el. Estos se generan automáticamente para como cuando se creó la lista , cuando se publicó. Esto aún no ha sido publicado, así que habrá un tiempo asociado a ello y si se actualizó, no quiero ninguno de esos en este momento. Van a ser útiles más adelante, pero fecha de testimonio. Perfecto. Bien. Para que puedas andar por ahí si quieres. En realidad, ya lo he dicho, ¿no? Sólo voy a pasar y darle estilo. Entonces lo haré en modo Velocidad, modo velocidad real esta vez. Bien, eso no es muy sexy, pero lo hice, bien. Vamos a jugar un poco más con esta lista en el siguiente video. 89. Reorganizar lo que se muestra en la lista de recopilación de Webflow: Hola a todos. Este video, vamos a tomar esa lista y vamos a poder reorganizar la información mostrada. Podemos decidir solo mostrar los que son testimonios para el software photoshop, o solo mostrarme los que tienen imágenes, o solo mostrarme los tres primeros luego otros últimos testimonios. Consigamos nuestra lista para hacer nuestra oferta. Déjame mostrarte cómo. Hagamos algo de reorganización. Y por el momento me está mostrando demasiadas opciones. Yo quería tal vez sólo mostrar los primeros seis o tres. Entonces lo que podemos hacer es lo que termina pasando es la lista. Si me hacen clic en alguna parte de aquí, debería poder llegar a este diente y me muestra cosas sobre este en particular. Vamos a subir un nivel. Vamos con el padre y me da más cosas. Bien, y puedo volver atrás y decir que quiero que sean dos columnas son para k o tres, puedes limitar artículos. Yo diría que sólo quiero mostrar tres, por favor, o seis. Volvamos a las tres. Filtrar puede ser bueno porque por el momento solo me está mostrando un pedido k Así que digamos que estos son los testimonios una página en particular que dicen que es la página Figma con página de Photoshop. Lo que puedo hacer es que puedo decir en realidad, solo quiero mostrarte en esta lista. Me gustaría mostrar solo el nombre que iguale no el nombre que quiero. Va a ser fácil. El nombre que puedo empezar a escribir, puedo decir gente ese nombre es Pam. Y lo deletreé mal. Entonces no va a tener nombres. Lo que quiero hacer, probablemente sea más fácil ir sin nombre, pero a lo mejor quiero mostrar los que tienen el software usado que iguale Figma. Perfecto. Entonces sólo me va a mostrar esos resultados Figma. Entonces esto podría ser productos de presupuesto para tus etiquetas. Qué productos de presupuesto no solo muestra en esa página, o tal vez esté en una página para tu portafolio que te esté mostrando testimonios de Wix. Entonces solo te está mostrando testimonios de UX. Nico, ¿entiendes? Digamos que quiero porque esas imágenes, déjenme decir si agrego la imagen. Entonces por aquí voy a seguir adelante e irme Imagen. Bien, hay muchas otras páginas que no tienen imágenes, pero digamos en la página principal y particularmente, quiero que esto tenga disparos a la cabeza sea como, bueno, no todos tienen disparos a la cabeza. Qué puedes hacer, quitarlo, volver al envoltorio exterior y decir, muéstrame tres, pero no el uso del software. Quiero filtrar por las que tienen imágenes, disparos a la cabeza que nosotros, imágenes que dije y la gente que no quiere comprobar, ahí tienes. Necesito estilizar estos, los haré en el siguiente video. Eso es realmente bastante poderoso cómo puedes ordenar esa información. Nuevamente, recuerde, podría estar escribiendo esto uno por uno sin usar CMS. Pero puedes empezar a ver lo útil y potente que es cuando dejas de filtrar y ordenar. Bien, sudar también podría ser útil. Echemos un vistazo, digamos que voy a ordenar por nombre, pero voy a decir grande cuando se creó el testimonio, la fecha del testimonio. más antiguo a más nuevo. más nuevo a más antiguo. Bien. O podría estar ahí en lugar de la fecha de los testimonios, ¿solo se crearon los datos o cuándo se actualizaron? Sí. más nuevo a más antiguo. Guardar. Vas porque edito imágenes a estas que actualizaron esos elementos de la lista. Entonces llegaron a la cima. Lo último que aún no he mencionado, puedes desconectar eso. Se puede decir En realidad esta cosa de aquí, este pequeño diente, se puede decir en realidad no es testimonial, Está destinado a ser que está destinado a ser software utilizado. Puedes reasignarlos si quieres. Eso no es lo que quiero hacer. Pero olvidé mencionar antes, una de las cosas con el CMS y la lista es como, si muestra mi portafolio, tener una lista. Deberías hacerlo solo porque lo hace, hace una buena práctica, pero depende de cuánto lo vayas a actualizar. Como si eres una persona, ninguna persona cartera, actualizándolo cada semana, tal vez haces un 1s y lo dejas. Como muchos de nosotros ahí, tal vez un CMS es un poco de trabajo extra que no necesitas. Pero para tal vez una agencia más grande donde tienes muchos testimonios y hay muchos tipos diferentes de categorías para ese trabajo que has hecho. Tiene sentido tener un CMS. Recuerdo que ese era mi trabajo, una gran agencia cuando no teníamos trabajo sobre por dónde pasar y hacer piezas de cartera porque no teníamos nada más que hacer. Bien, y vamos a través, encontramos buenas imágenes, las hacemos parecer co, hacemos algunos reconocimientos. Alguien tendría que revisar mi redacción, mi ortografía y gramática, y subirlo al sitio. Cms sería perfecto para eso. Bien, entonces eso es reorganizar los datos de nuestras listas. Muy potente. Vamos a darle estilo en el siguiente video. 90. Estilizar nuestra lista de colección con rejilla y flexión en Webflow: Hola a todos. Vamos a llevar un poco a donde terminamos el último video y vamos a hacer un poco de estilo a nuestros testimonios. La principal novedad en esta es que he convertido esta lista en una cuadrícula, que no es la configuración natural y de visualización para estas listas de colección, hay columnas por defecto, pero muy a menudo Quiero convertirlos cuadrículas y te voy a mostrar cómo. Además vamos a hacer un poco de estilo. Obtenemos todo para alinear igual por las cabezas inferiores redondeadas, porque de alguna manera todas las personas con cabezas tienen que estar alrededor de círculos. Es como la regla de internet. Bien, vamos a saltar. Bien, vamos a detener lo que no has hecho antes. Y entonces mucho del otro estilo son solo cosas que hemos hecho. Nos recuperaremos porque es bueno recordarlo. El primero es que por el momento, una lista de colección viene por defecto en la pantalla llamada columnas. miramos un poco antes y dije: Simplemente no uses columnas. Vamos a usar grid. Las columnas son buenas, las mejores, no hay nada malo en ellas. Los encuentro complicados cuando tienes más que como que tenemos tres artículos cuando hay como otra fila y seis de ellos, solo pierdes mucho control. Es como dividirlo. Simplemente son otros problemas. Entonces podrías estar haciendo lo mismo y estás como, ¿cómo lo conviertes? Bueno, si voy a mi configuración de pantalla y vuelvo a través de esto, entonces ahí está mi wrapper, desplazarlo para bloquear. Voy a ir uno más alto. El espacio en la cuadra, ninguno de ellos son dos columnas? Como Wade, lo que termina pasando es que en realidad está controlado aquí en el panel de ajustes. Esta es la única vez que esto sucede. Bien, es con este elemento particular de lista de colecciones que hemos agregado. Se lo quitan un poco de esta página y lo ponen por aquí. Nosotros, ¿a quién lo haces tú también? Hay como dos. Estos son rapero en el exterior k para decir de qué lista viene. Ahí está esta Rapa padre, luego hay otro envoltorio, y luego está mi opción de lista real. Se lo voy a hacer a éste porque aunque no podamos ver los tres elementos, eso es lo que es. Hay uno y solo se repite algunas veces. Entonces el padre, quiero dividir a todos estos tipos en una grilla, bien, entonces tienes que ser una grilla y se va a romper. Y voy a hacer clic Listo. Te gusta lo que ha pasado aquí. Incluso puedes ver flujo de trabajo dice, Oye, si quieres usar esta cuadrícula, necesitas apagar las columnas e incluso puedes hacer clic en el botón o ir a aquí. Mismo, mismo, mismo lugar por aquí. E incluso aquí, hay una pequeña advertencia diciendo que tienes que apagar esto ya sea haciendo clic en ese botón hará clic en ese mismo, igual, vas y está funcionando. No parece que esté funcionando. Este que tiene esta imagen gigante está destrozando mi diseño, pero está funcionando. Echemos un vistazo. Agarró la lista, entra aquí, digamos solo filtro. Déjame mostrarte los disparos a la cabeza que te puse o no. Entonces me está mostrando a mis tres ese ácido. Voy a apagar el límite. Ahí vas. Esas son las fechas de vencimiento y de mi amigo. Bien. Voy a hacer lo contrario. Enséñame los que se sientan. Si desea cambiar una de estas cosas a una cuadrícula, haga clic en la lista padre, no en el padre del padre. Bien, cámbiala a grid y luego solo ve y apaga las columnas dentro de la configuración, lo cual es un lugar extraño. Bien, veamos primero hacer estas imágenes porque también va a ayudar con el diseño con una cuadrícula. Voy a cambiarlo a, he estado agregando mis columnas por aquí todo este curso. Puedes sumarlos aquí arriba. Nunca hago alguna razón, nada malo en ello. Bien. Voy a hacer un sí completo, subió. Bien, hagamos clic en Listo y arreglemos estas imágenes. Fue la tarea anterior. A lo mejor no lo entendiste, a lo mejor lo hiciste. Si lo hiciste, sabrás que necesito establecer el tamaño para ello. Digamos que quiero hacerlos 200 por 200. Eso es probablemente no me gusta esta columna completa es simplemente demasiado pequeña. Abuela, padre tú van a ser tres. Bien, está bien otra vez. Así que 200 por 200 sigue siendo probablemente demasiado grande. Ahora, no he agregado una clase para estos. Voy a llamar a esta imagen, renombrar. Estos van a ser 15150. Me gustaría tabular al otro lado y lo hará solo en tu teclado, era tabulador al siguiente. Y luego decimos ajuste, vamos a decir puede cubrir. Después en cava, puedes ir a estas opciones aquí y decidir dónde se estira desde el centro para un disparo en la cabeza. Obviamente no está funcionando para mí, así que probablemente voy a tener que ir por la cima cerca de ti. Eso es como el más consistente. La barbilla de todos. Nosotros haremos esa. Co y cualquier otra cosa que queramos hacer. Esto sumó las esquinas redondeadas. Entonces aquí abajo, esquinas redondeadas, solo digamos beat 200 es grande. Ahora quiero llevar todo a una línea. Y lo hice con esto antes, solo con un miembro de texto, acabo de hacer un estilo y corrí a la derecha Ally, SRE, right align. Y funciona para textos fácilmente. Pero a veces si hay muchas cosas con las que debes perderte, ¿cómo conseguimos que todo llegue al centro de la línea tal vez? Como lo harías, si lo adivinaras, agarraste el envoltorio y lo ponías en no Es un hijo de grid , eso lo sabemos, pero también puede ser el padre de las películas, lo cual no funciona porque es necesita ser vertical. Vertical debería ser el flujo de trabajo predeterminado de todos modos. Entonces vamos a decir, Oh, parece que sí, eso es un poco lo que quiero. Verás, está un poco anulado mi alineación derecha. Tengo que entrar aquí individualmente y decir, eres hijo del flexbox y puedes hacer tus propias reglas. Pero estoy feliz donde estaba. Primero que nada, muy importante. Está en cursivo, lo que significa que es palabra hablada. Pero siento que si tiene que ser como una fuente serif para servir espejo con una buena, bien , ¿Dónde voy a agregar mi relleno para hacer? Yo sólo quiero hacer todos los espaciamientos. Aquí es donde voy a golpear mi flecha hacia arriba para agarrar al padre. Voy a mirar mis piernas. Oye, quizá pueda hacerlo todo aquí con las filas. Disculpe. No. Definitivamente no puedo hacer eso porque hay dos separados. Entonces solo voy a decir que puedes hacer o bien la imagen puede tener un poco de fondo en ella, o los textos testimoniales pueden tener un poco de jamón encima encima. Entonces tú lo haces, yo lo estoy haciendo en este porque solo pienso que si va a haber momentos en los que tal vez no haya una imagen y no van a necesitar, no habría necesidad de algún relleno por encima de ella o margen. Entonces tu espaciado. Lo siguiente que quiero hacer es que veas que no están alineando por el fondo. ¿Bien? Aquellos que hacer, el dimensionamiento real de las palabras es muy cercano, como si estuvieran casi en las mismas líneas. ¿Este se rompe? Sí, esta se rompe en otra línea. Entonces lo que vamos a hacer es, quiero que todos los nombres estén en la misma fila. ¿Cómo hago eso? ¿Recuerdas que ya lo has hecho algunas veces? ¿Te acuerdas? Bien en sí. Voy a atraparte. No tengo que hacérselo a uno de ellos. Puede ser cualquiera de estos. Y voy a decir, ¿te acuerdas? Nosotros solo decimos que tienes un margen de error. Recuerda que el flujo ya está aplicado al envoltorio padre y luego al niño, solo dices ser auto la parte superior y nosotros lo empujaremos hacia abajo. Bonito. Bien, eso es. Cambiar su lista de colecciones a una cuadrícula. Solo tienes que apagar las columnas en la configuración, cual es extraño, pero todo lo demás lo hemos hecho y se ve mejor. Bien, eso es. Te veré en el siguiente video. 91. Proyecto de clase 07 - colección de cocina: Hola a todos. Tiene que ser el tiempo de Class Project. Este es fácil. Es bonito pequeño y compacto proyecto independiente. Entonces en este caso, hazte ya sea una nueva página o un nuevo sitio completo depende de ti. No va a ser utilizada más adelante en el curso. Entonces esto es un poco como un pequeño proyecto independiente. Y así te he dado algunos datos para esta colección de cocina. Proceso similar a los testimonios. Bien, solo te estoy dando nuevos datos para que uses para que puedas hacer los tuyos. Entonces hay un CSV. Está en los archivos de ejercicio bajo blog. A pesar de que no hemos hecho un blog, es la sección de blog en mis notas de todos modos. Bien. Y aquí hay uno que se llama Colección Cocina. Entonces hay un CSV que tiene el nombre del diseñador, su ubicación y su sitio web. Y hay una imagen correspondiente, C jj design studio. Aquí hay una imagen que va con ella también. Así podrás importar los datos CSV y luego agregar manualmente la imagen. Quiero que la imagen sea parte de la base de datos, no solo agregarla por separado como imagen, aunque no voy a poder decir. Así que vamos a echarle un vistazo. Entonces Ed y estiliza la colección. Genial. Ahí es donde están los archivos en todos los datos, en todas las imágenes a la lista. Y este de aquí quería ver si se puede hacer la URL, que es esta cosa de aquí, el perfil. ¿Puedes hacer que eso sea un botón en lugar de un enlace de texto? No te he enseñado cómo hacer eso, ver si puedes hacerlo realidad. Hay un par de maneras en las que puedo pensar en dos, si realmente te quedas atascado, los comentarios, haz una pregunta, contesta una pregunta. ¿Algo más? No. Una vez que hayas terminado, toma una captura de pantalla. Ahora, te he dado imágenes si quieres usar los datos CSV con los nombres y esas cosas, y luego ir a buscar otras imágenes de cocinas solo para que la tuya se vea un poco diferente. Tienes cocinas de mejor sabor. Ese puede ser yo, lo dudo mucho. Pero al menos si escogieras tus propias imágenes, todas se verían muy diferentes en lugar de que Todos son un poco iguales. Una vez que lo hayas hecho, toma una captura de pantalla cargada a las tareas y también compártela conmigo en las redes sociales. Quiero ver lo que haces. Comparte con otros si te encuentras algún problema y cómo lo arreglaste, compartir es cuidar. Bien, ve a hacer tu proyecto y una vez que hayas terminado, te veré en el siguiente video. 92. Permitiendo que tu cliente actualice el sitio web en el editor de Webflow: Hola, Este video, vamos a mirar al editor. He hablado mucho del editor, pero no lo hemos hecho. Llevamos mucho tiempo trabajando en el diseñador. El editor es la capacidad de conseguir que tu cliente o cliente, tu miembro del personal, tu mamá o tu papá para quien haya creado un sitio web. Les permite pasar y hacer cambios. Pueden pasar por el sitio, el sitio en vivo aquí, se puede ver que en realidad puedo pasar y hacer un cambio. Puedo elegir una nueva imagen, bien. Pueden publicar. El sitio se actualizará. Pueden verificar los formularios que podrían haber sido llenados en el sitio. Todo sin tener que volver a ti. Pueden realizar cambios y publicar desde el sitio web. También pueden comenzar a agregar cosas a nuestro CMS, agregar un nuevo testimonio. No hay problema. Mira, tenemos testimonios aquí abajo. Agrega un nuevo testimonio todo desde el sitio web sin tener que volver a ti o a través de Webflow, puedes hacerlo todo en el navegador. Súper elegante, me encanta. Probablemente sea una de mis características favoritas de Webflow. No tenemos que hacer nada, solo empezar a usarlo. Bien, hagámoslo. Empecemos a usarlo. El primero que haremos es solo un sitio web estático. Queremos que el cliente pueda entrar y cambiar los ticks, hacer botón toma cambios, cambiar las imágenes. Solo cosas que no tuvieron que volver a nosotros por ningún CMS involucrado. Las reglas son que necesita ser publicado ya sea en tu dominio de puesta en escena o voy a usar el principal. Bien, y entonces puedes ir por aquí y decir, ¿ o es proyecto compartido? Hemos mirado a Shear solo antes, eso es para compartirlo con otros diseñadores. Este de aquí es lo que necesitas para darle a las personas acceso al sitio web sin acudir a ti ni pasar por Webflow. Sin embargo, una cosa a tener en cuenta sobre esto es que necesitas un plan mínimo en este momento. ¿Es este c mismo S1? Bien, Entonces se te permiten tres editores invitados con este, puedes pasar un poco y ver las diferencias. Bien, entonces ya he actualizado el mío, creo que no puedo recordar lo que averiguaremos. Si hago clic en él, saltó a los miembros, bien, y voy a agregar un editor invitado. Puedes ir directamente a la configuración de tu proyecto y llegar a los miembros. Bien, voy a ir a editor invitado. El refrigerante se pone editor, nombre extraño. Me gusta llamarlo editor de cliente, editor de clientes, editor de miembro del personal, consigo conjeturas, poner una dirección de correo electrónico, decidir si pueden editar o editar y publicar. Lo que puede pasar es que puedes permitir que la gente edite y lo consiga ya y siendo borradores. Y entonces alguien más necesita ser el editor, crear contenido, pero no poder publicar esto. Para que pueda hacer ambas cosas, por favor. Gracias. Bien, voy a escribir una dirección de correo electrónico y presionar Enviar. Recibirán un correo electrónico y saltaremos a abrir el correo electrónico, bien, pueden hacer clic en el enlace que les envías por correo electrónico o después de un tiempo sabrán que solo puedes escribir el signo de interrogación y escriba editar en cualquier sitio de Webflow. Y en eso, y si conoces el nombre de usuario y contraseña abajo aquí abajo, pon eso y puedes comenzar a editar el sitio, y yo voy a poner el mío. Bien, una vez que hayas iniciado sesión, obtienes esta pequeña barra en la parte inferior. Y es genial. Puedes saltar a diferentes páginas de tu sitio y estar editando esas. Ellos pueden decidir, bien, necesitan pasar y decir, bien, No es preguntarle a Dan y cojín, tenemos más de un miembro del equipo. Somos nosotros. Una pregunta ahora. Bien, y por aquí, puedo darle a Publish, ¿de acuerdo? Porque me dieron la capacidad de editar y publicar y ver lo que pasa. Bien, entonces ese es el sitio en vivo actualizado y podemos volver al sitio en vivo, pero simplemente se deshace de nuestras habilidades de edición. Y eso ha cambiado para siempre en ese sitio web, también en Webflow. Lo cual esto, si entro como el diseñador, no tengo que gustar aceptado o tener una versión diferente de un ir a la página Contáctenos. Ya ves que es increíble. Se actualizaron en el sitio, entonces puedes actualizarlo aquí. Por eso es posible que tengas que tenerlo. Pueden editar pero tal vez no publicar por si acaso van a rentar el lugar ahora para hacer las cosas editables, bien, bueno tal vez sin editar dirá como dejar de cambiar el botón Enviar. Si lo seleccionas aquí y en tu opción de Configuración abajo, hay opción que dice que el botón no se puede cambiar por el botón Listo, cambiamos vidas para hacer clic en este texto aquí. Vamos a Ajustes y Ajustes los colaboradores pueden editar este elemento. No estoy seguro de por qué los botones no lo son. Ahí vas. Vamos a la página principal. Puedes editar imágenes, mira esto. Puedes decidir si lo hacen o no. Echemos un vistazo a lo que sucede con las imágenes en su sitio y formularios y algunas otras cosas. Entonces voy a saltar de nuevo al editor. Puedes hacerlo tú mismo como si estuviera fingiendo ser el cliente ahí. De hecho, puedes fingir ser el cliente tú mismo y simplemente ir al editor de este proyecto. Bien, entonces este es el diseñador que hemos estado en todo este curso. Ahora bien, este es el editor, y no necesito iniciar sesión porque ya estoy conectado. Para que pueda ir aquí, hacer clic en la imagen y simplemente elegir una diferente. Bien, hagamos clic en Abrir. Se va a subir. Tienes que hacer es recordar publicar. Es bastante agradable. Llego allá a la imagen. La otra cosa a mirar se hace aquí como formas. Tenemos un formulario y el sitio K, y el cliente puede pasar y verificar estos formularios ahora en aquí, exportar a CSV. Bien, si hay datos que no se muestran aquí o solo hay cosas que simplemente no quieres saber. Puedes decir apagar tal vez el correo electrónico y solo muéstrame porque podrías estar recopilando mucha información diferente. Pero significa que el cliente se mira un poco a sí mismo en esta página. Veamos cómo actualizar el CMS como antes. Asegúrese de que esté publicado. Puedes ir a invitarlos, entró pero invita a un editor invitado a la dirección de correo electrónico. Y entonces, bien, ahora estamos dentro y acabamos de conseguir este poco malo. Y la parte inferior, la diferente es que tenemos colecciones y colecciones de código de testimonios. Es posible que tengas muchas colecciones diferentes aquí, publicaciones de blog, testimonios, miembros del personal. Y puedes hacer clic en esto o dar click en esta pequeña pestaña aquí. Se puede ver el mismo tipo de lista, pero es blanca. Y se puede decir, puedo agregar un testimonio que va a llenar esto. Bien, agrega una imagen. Bien, Guerra, ¿cuáles son estas sabrosas? Hace poco que no usamos el kiwi . Y datos testimoniales seis al revés para mí. Entonces es el mes, ese es el día que haríamos el año. Enlace de Instagram. Bien, y el software que estamos usando es Adobe XD. Digamos, vamos a golpear crear o guardar como borrador. Bien. Se escenifica para su publicación. Publica. Sí, por favor. Vamos a ver el sitio aquí arriba. Bueno, está pensando en ello, mi publicación. Bueno, ha funcionado ya que sigue publicando, pero ahí tienes. Trabajó. Bien. Puede que no aparezca dependiendo las reglas que tengas para tu lista en este momento, primero tengo como el más nuevo, estoy bastante seguro, pero es un salvavidas poder darle al cliente que lo configuraste. No tienes que conseguir que ingresen un poco a la página y la cambien cada vez, solo consiguiendo que agreguen más, asegúrate de que sientan que todos los campos y puede aparecer en esta página. Podría estar apareciendo en otras 20 mil páginas porque las has conectado todas. Tienes esa lista en muchos lugares diferentes. Súper práctico, bien, eso es permitir tu cliente vaya y actualice el sitio web. Pueden usar el enlace que les envías todo el tiempo. Pero recuerde primero un signo de interrogación y luego escriba editar. Vamos a hacer estallar esto por la parte inferior donde pueden ingresar los detalles y comenzar a editar. Y te voy a estar jalando. Bien, te veré en el siguiente video. 93. Cómo crear blog usando páginas de recopilación de CMS en Webflow: Hola a todos. Vamos a tomar nuestra colección sin fisuras como hicimos antes, pero en realidad convertirla, en este caso, blog en páginas, páginas feas. Aún no los hemos diseñado. Eso lo haremos en un rato. Pero mira, en realidad no hice todas estas páginas. Fueron generados para mí por con flujo basado en esa lista. Pero el tendón, dos páginas, páginas feas, sin estilo. Es por esta vez en el curso fui yo y probablemente vas a empezar a sentirte como diseñadores web fuertes y seguros donde estamos produciendo muchas cosas con poco esfuerzo. Vamos a saltar y te voy a mostrar cómo si estás siguiendo a lo largo, he pateado mis testimonios que hicimos en el último, date cuenta que lo he escrito mal. Ese es mi testimonio. Uñas. Eso está en su propia página, así que estoy vuelta en la página de inicio fresco y listo para ir entre los que no existen. No tenían el corazón. Eliminarlos. Entonces, ¿cómo se crea la página? El comienzo comienza igual para ir y crear una colección. Entonces vamos a crear uno nuevo. Tenemos nuestros testimonios, todos uno. Vamos a escribir una entrada de blog. Ahora, hay plantillas. Mira esto, voy a hacer clic a través de algunos de ellos, en realidad la entrada del blog y simplemente se llenó previamente y las cosas abajo aquí, puedes ver un poco post amigo, post resumen, la imagen, la imagen en miniatura, solo cosas útiles para comenzar y darte algunas de las ideas de para qué podrías usar las colecciones también. Así que los miembros del equipo, ellos biotítulo laboral. Ya puedes ver, vamos a empezar con entradas de blog. Todo el mundo haga eso. Ves aquí abajo, ¿hay algo más que quieras agregar ahí? Todo bien. Bien, para esta, vamos a crear la colección. Entonces, ¿qué pasa? No tenemos datos. Bien, entonces en vez de darte algunos, voy a mostrar que puedes pasar y agregar datos de muestra. Es solo basura que Webflow, Ed, también es un poco yonky. Dirigido a publicaciones de blog. Porque si haces una receta, van a ser exactamente los mismos nombres. Va a tener una receta de historia histórica del diseño web. Y va a no tener contenido en ello. Entonces va a funcionar para esta, las publicaciones de blog porque son como títulos de publicaciones de blog. Echemos un vistazo. Nos han llenado el nombre la babosa, que es que tiene más sentido ahora justo antes de que esos testimonios no vivieran en su propia página, así que realmente no importaba cuál era la babosa. Ahora bien, ¿puedes ver mi sitio web bajo post slash el nombre de la publicación, que deberían ser buenas palabras clave? Bien, eso es algo a lo que alguien puede vincular. Se pone en algún texto básico del cuerpo. Se llama Rich Text, estas cosas. Y es editar una imagen, tanto la imagen principal como una imagen en miniatura. Y veremos esta opción destacada. Hay un color asociado con este elemento de la lista, que es un poco genial. Bien, entonces esos son mis elementos de la lista. ¿Qué pasa ahora? Voy a decir, bueno, eso no lo cambió hoy. De todas formas. Es cerrarlo. Estás como, Guau, ¿cómo creo todas las páginas antes de que fuéramos plus y simplemente arrastre el elemento de la lista encendido. Pero eso no es todo lo que vamos a hacer páginas con esas cosas. Bien, lo que pasa es el tipo ya hecho, lo cual es genial aquí arriba, no hay páginas. Así que las páginas estáticas tienen más sentido ahora, ¿verdad? Y estas son páginas para tus páginas dinámicas, verás Páginas de Miss Colección. Y ahí está. Ahí está mi caso de plantilla de publicaciones de blog. Si entramos aquí, tenemos una página en blanco. Oye, esta es la plantilla que todos esos elementos de la lista, todos los hombres conocen. Cuantos pedimos 510. De todos modos, tenemos muchas publicaciones de blog diferentes. Todo lo que tenemos que hacer es estilizar uno de ellos. Entonces hagamos algunas cosas básicas. Entonces estoy en la plantilla, bien, asegúrate de que estás en la plantilla. Voy a ir a mi, voy a usar un método ligeramente diferente. Voy a usar el Control E para PC o Comando E en una Mac. Y voy a decir, quiero un contenedor Comando T otra vez. Y voy a decir, quiero golpear. Entonces quiero Comando o Control E. Quiero una imagen. Comando y controlando E, y quiero un texto. Quiero, quiero un bloque de texto que va a tener la fecha en que se creó este blog. Entonces otro va a ser tics. Ahora tienes área de texto, que podrías pensar, Oh, puedes usarlo toma aquí porque eso es como de los formularios puede, pero es un área grande y agradable. Te dio agregar eso. Dice, no, esto es solo realiza, encuentra otra cosa. Se puede hacer. Texto. Vamos a mirar el texto enriquecido. Veremos tomas ricas en un video que viene muy pronto correctamente. Pero básicamente te permite tener un libro de texto y dentro de él tener encabezados y todo tipo de cosas que suceden. Ko es que se ¿Ya terminamos? No. Esos son solo marcadores de posición. Se ve que dice golpear con mi bateo. Era mi imagen. Entonces lo que hay que hacer, al igual que hicimos antes con la lista, los vinculamos a la base de datos. Nosotros te decimos, no tenemos que ponerlos dentro de un rapero como antes. ¿Sólo dices que te conectas a cuál? Conéctese a la entrada del blog, por favor. Lo sabe porque, porque estamos en la plantilla de entrada de blog, el representante ya está ahí. Bien, Y que hace de esto usar el nombre del blog. Lo conectó. Bien, y ahora básicamente conectará todos estos arriba. Pero lo que ha pasado ahora es que en realidad todas tus páginas han sido creadas, en realidad solo cinco o seis. Iré a la otra página, acorde, cinco bloques de diseño web. Mira eso. La página ha hecho. No está muy bien estilizado. Pero eso es todo. Has creado todas esas páginas enlazarán a ellas en un segundo desde la página principal, pero todas las páginas están hechas. Pasemos y conectemos algunas cosas arriba. Vamos a conectarte a las entradas del blog. Y quiero que lo consigas de mi imagen principal. Ve, bien, éste, él en realidad, quiero esto por debajo de esto, éste de aquí. Bien, este cuadro de texto en realidad va a ser de la, no hicimos esta fecha creada o publicada. Pero esos están ahí automáticamente porque sabe qué día lo publicaste. Yo puedo dar click en eso. El mío aún no está publicado porque no lo he publicado. Así que aún no lo sabe realmente. El mío terminó por lo que terminó. Eso estuvo raro. Está bien. Eso lleva bolsillos aquí por alguna razón. Durante sabía por qué no publicado el es solo hacer una pieza CreatedOn aquí abajo. Aparecería aquí abajo para su publicación en caso de haberse publicado. Entonces el momento se está quedando en blanco porque no se ha publicado, lo cual es un poco raro. Podemos vivir con eso. Ahora el texto enriquecido, quieres agarrar, el padre Rapa, no las cosas en el medio no son las cosas de aquí vas, el bloque de texto enriquecido. Y quiero adjuntar eso al cuerpo del poste, que es solo Loren ipsum en este momento. Y eso es todo. Tenemos todas nuestras páginas. Ustedes todas las imágenes diferentes, todos los encabezados diferentes, todos la misma fecha porque hay todos subidos al mismo tiempo. Ahí vas. Es bueno cuando estás trabajando en cualquier página en la que quieras trabajar, solo decides qué página es, y luego empiezas a trabajar en tus estilos. Pero probablemente quieras simplemente recorrerlos o ver qué pasa con un título realmente largo versus un título corto, una imagen grande, una imagen corta. Y en una Mac, mantén presionada la tecla Mayús y tecla Opción y usa tus flechas izquierda y derecha. imágenes tardan un tiempo en actualizarse. En una Mac, es Shift y Alt y usa tus flechas izquierda y derecha. Un poco solo pasa y di, sí, eso encaja. Este de aquí, se rompe en dos líneas. Voy a tener que lidiar con eso. Vas y lo estilizas, estilos a él. Bien, así que eso está haciendo que las páginas realmente buenas, realmente rápidas y fáciles. Por supuesto que puedes. Esto es algo que el editor puede hacer como lo hicimos antes. Pueden entrar, podrán encontrar la lista o la colección, lo siento, y revisar y agregar sus propios elementos de la lista. He hecho clic en el diente, clic en el diente, clic en la cosa real. Allí podrás agregar nuevas entradas de blog o puedes, desde el flujo de viento hasta ti. Lo vamos a estilizar un poco. Hagamos el siguiente trozo donde lo vincularemos desde la página principal. Esto fue un poco complicado de entender para mí, así que lo pondré en otro video para ti. 94. Vinculación a una página de colección de la página de inicio de Webflow: Oye, en este video tenemos páginas de entradas de blog. ¿Cómo enlazamos a ellos desde otras páginas? Mida si tuviéramos una página de inicio y queremos escuchar ¿eso conecta con ellos? Ahí vamos. Construimos una lista de colecciones y luego podemos dar click sobre estas cosas. Construimos una lista de colecciones para nuestros testimonios, pero no enlazó a ninguna parte. Acabamos de mostrar información. Puedes hacer exactamente lo mismo, pero en realidad enlazar al elemento de la lista tal como se muestra aquí, como nosotros en su propia página. Déjame mostrarte cómo. Bien, entonces tenemos nuestras páginas. ¿Cómo nos conectamos con ellos? Vamos a, lo haremos a nuestra página principal. Siempre voy ahí arriba. Puedes ir ahí. No importa. Página de inicio. Y solo vamos a agregar listas de colección como lo hicimos antes. poco lo rompió porque a veces solo quieres una lista de colección sí solo como sus testimonios y no necesitas páginas, y es un poco más fácil de entender en lugar de haciéndolas las dos al mismo tiempo. Pero sabemos lo que es este tipo. Te conocemos dentro de mi contenedor, mis artículos de colección. Voy a conectarlos a la colección. Entonces blogposts y ya puedes ver, recuerda que estos son solo marcadores de posición temporales. Se puede decir, ¿qué quiero aquí? Bueno, por el momento, estoy feliz de que se estiren porque voy a agregar un botón. Voy a dar click en Comando o Control E. Voy a teclear botón. ¿A dónde va a ir este botón? Ahora bien, este morado aparece esto para enlazar a sitios estáticos. Nada vinculado a la página de colección purple one. ¿Cuál en particular? Realmente no eliges de una lista. Solo dices, porque estamos actualizando todos estos, mira lo que pasa. Blog actual. Tenemos todas estas páginas en hace un segundo yo tenía el título de la misma, así que sabíamos lo que era. Recuerda, deshacer, deshacer antes de agregar el botón ahí dentro. Entonces sabe que la caja sabe lo que tiene que hacer. Y si le agregamos un botón y rehacer, rehacer, rehacer, Bien. El botón puede ir a la entrada del blog así que sabía lo que era y va a ir ahí. Se vuelve más fácil si solo dices que también obtengas el texto del nombre de la publicación del blog, y en realidad lo haces correctamente. Ahí vas. ¿Eso lo hace más claro? Este botón al hacer clic va a ir ahí. Bien, voy a añadir una pequeña imagen también, solo para que sea un poco más fácil para la página principal y saber a dónde vas. Entonces el envoltorio, tú hemos hecho esto antes que yo. Vamos por ellos. ¿Por qué no? Agreguemos una imagen a cualquiera de ellos. Bien, va a estar encima de mi botón para obtenerlo de las entradas del blog de lo que alimentó mi imagen en miniatura. Excelente. Y lo que voy a hacer es que voy a añadir un poco de texto. Voy a decir libro de texto. Entra ahí, por favor. Bien. Y ese va a enlazar con el título, nombre. Y ahí hay botón va a conseguir que el texto diga es texto de botón. Y éste va a decir ver más. Bien, podemos ir y darle estilo más. Bien, pero los tenemos todos ahí y estás como, guau, esta es la página principal. No quiero mostrarlos todos. ¿Cómo muestro solo algunos de ellos? ¿Recuerdas cómo lo filtro? Ya lo tienes. Se filtra tiene un filtro frío o se ordena k. vamos a hacer superficie. Así que de nuevo, escogiendo en mi lista de colecciones, voy a decir en realidad vamos a ordenarlos por el, no por el nombre, pero los datos fueron publicados o no publicados todavía. Entonces voy a dejar esa. Ese es probablemente el mejor, pero ninguno de ellos publicó, así que no va a hacer nada. Entonces voy a decir la fecha en la que se crearon del más nuevo al más antiguo y presionaré Guardar. Voy a decir, muéstrame los primeros cuatro D van. Esa podría ser una manera de que puedas tener tu página de inicio teniendo las últimas allí. Oye, puedo previsualizarlo y decir ir a esa página ahí. Excelente. Necesito un nav para volver a casa. Ya sabes cómo hacer eso. La otra cosa que podrías hacer es echemos un vistazo a los destacados porque podrían estar como en este momento, es muy lujurioso. que tener alfanuméricos del más antiguo al más nuevo, algo así. Mientras que dicen, solo quiero solo quiero elegir cuatro de ellos. Yo quiero elegirlos. No se llega a recoger el pedido. Eso es lo que el pequeño interruptor es muy útil. Así que echemos un vistazo a nuestra colección de listas. Echemos un vistazo a nuestros listados de publicaciones de blog. Y echemos un vistazo. Había una opción en la parte inferior de estos dichos destacados, estás como, ¿de dónde vino eso? K para agregar uno usted mismo, Vamos a editar a los testimonios. Este es un proyecto de antes en el curso, y no lo haces a la lista, lo haces a la colección. Digamos, quiero actualizar esta colección, bien, para incluir un campo llamado switch. La etiqueta para el switch va a ser, podrías agregar un interruptor para, no sé, Photoshop. Puedes activarlo y decir solo mostrar los que tienen el interruptor para Photoshop activado o nuevo o destacado. Lo que sea que quieras usar o creas que es útil para eso, para encenderlos, podrías haber descontado, no estoy seguro de por qué lo usas para. Las características funcionan muy bien en esta. Bien, ahora tengo este pequeño interruptor destacado. Y en realidad guardas tus cambios. Así colección. Ahora terminaste el mismo lugar con entradas de blog, puedes decir que está encendido en la parte inferior aquí. Tengo qué, cinco de ellos. Voy a convertir sólo la historia treonina. Voy a sólo por la historia y los cinco blogs de diseño web en. Así que voy a acelerar a través de esto y sólo diez de esos en. Bien, así que solo tengo historia y cinco diseños web encendidos. Voy a cerrar esto y van a mi página principal y voy a hacer un filtro aquí. Así que aquí está mi lista de colecciones. Voy a decir que me gustaría ordenarlo. En realidad, no quiero ordenarlo. Quiero mostrar el filtro. Bien, voy a hacer clic en Filtrar. Lo que Bi es mi pequeño interruptor destacado, y solo quería incluir interruptores encendidos. Si no está encendido, no puedes estar en la página de inicio y vas puedes pasar y decir el nombre de esto, que debería decir homepage. No tengo funciones funciona. Fresco. Bien, tenemos que darle más estilo, pero esa es la manera conectar algo como la página de inicio a todas las publicaciones de tu blog CMS en tu elemento de lista, podrías tener las diferentes categorías, bien, como desplegable, puede ser salud y belleza, tu educación o cualquiera que sean las categorías que tengas para tu sitio. Y en esta sea cual sea la página en la que estés, di que es la página de salud y belleza. Puedes decir filtros encendidos solo para los que están, puedes agregar más de uno que sean destacados. Y además, no tengo esta opción aquí sino que están puestos a la salud y la belleza. Destacado en salud y belleza, y luego ordenar por lo que sea más nuevo, súper poderoso. Bien, digamos que quieres hacerlo manualmente. Hagámoslo en otro video separado. A continuación, te veré ahí. 95. Vincular manualmente a una página de colección en Webflow: Hola ahí. Este video, vamos a hacer que un botón vaya a donde queramos. Entonces va a saltar a una página de colección porque guardamos ir ahí. Es un poco hacky, pero a veces solo necesitas un botón para ir cuando necesitas que sea. Crear listas de colecciones es increíble. Todos se hacen dinámicamente súper geniales, pero a veces el botón cavernícola desaparece. Quiero mostrarte cómo conectarlos manualmente. Vamos a entrar desde la página principal. Tengo esta lista que vamos a ignorar. Esta lista de colección iba a hacerlo desde un simple botón en una lista. Bien, sólo vamos a decir que aquí hay un botón. ¿Cómo lo sacamos fuera de la lista? Voy a agarrar la lista y simplemente apagarla. Así que vamos a terminar mostrar ninguno. Y este botón aquí, puedo ir dentro mi contenedor en la parte superior allá, Varios. Esto no existe, finge que no existe. Entonces botón, ¿cómo lo conectamos? Pero lo que realmente quiero hacer es ir aquí e ir a las páginas y luego ir a conectarme a la página. No es así como funciona esto. Ojalá lo fuera. Y si conoces de manera sin construir primero una lista de colecciones, lo cual es bueno, a veces solo quieres que te guste el enlace a ella, solo enlaza a esa página. Lo que puedes hacer es simplemente usar la URL hacky forma de hacerlo. Te voy a mostrar a lo que me refiero. Vamos a entrar en la lista. Entérate de las publicaciones de blog. Entra en esto, digamos que tengo un enlace a la historia del diseño web. Esta babosa de aquí, bien, nombre terrible. La URL para ello es esta. Está en la página web. Entonces el sitio web de Dan design.com slash blog slash, la historia del diseño web, el tuyo podría decir publicaciones aquí. Cambié el mío a blog en algún momento mientras no estabas viendo. Pero este trozo de aquí, bien, puedo agarrar todo esto incluyendo ese error de barra hacia adelante, copiarlo. Bien, no quiero esto porque eso va a cambiar. Entonces puedo volver a salir de aquí. Bien, volvamos a mi página principal y solo di enlace a ahí. No entró. Bien, Eso no fue y fosforiló. Haga clic en el Copiar y luego salga. Ahora voy a pegarlo y voy a borrar esto. Eso es codificarlo demasiado duro, pero si dejas la barra hacia adelante y dejas todo lo demás ahí, funcionará. Bien, solo funcionará con el Sitio Publicado, no en la vista previa. Entonces eso es, perfecto. Bien, y voy a publicar mi sitio. Recuerda, la publicación lleva mucho más tiempo cuando hay una base de datos con la que lidiar. Bien, vamos a revisar el sitio. Y ahora tengo un botón solitario. Y cuando hace clic, va a, irá a cualquier sitio web y es eso más toda esta basura. Bien, y va a ir directo hasta allí. ¿Cuál podría ser el gran problema aquí? Así es. Si vamos y cambiamos el nombre de esto, ¿de acuerdo? O esto, podrías haber pasado y cambiarlo. Va a causar problema. Necesitas actualizarte, todo configurar lo que se llama una redirección. Déjame darte una, por ejemplo, puedo entrar aquí ahora y va a colección e ir a publicaciones de blog. Y siete formas es que queremos hacer clic para pensarlo así. Sí, quiero cambiar esto de post a blog o blog a post. Bien. Lo hago en el diente de colección CMS real aquí. Y digo en realidad, no quiero que esto sea otra cosa. Quería volver a publicar. Y lo que verás aquí, dice, Oye, necesitas configurar redireccionamientos, haz clic en eso, sigue la cosa. Está un poco fuera del alcance de este curso. O simplemente guárdala y asegúrate de que cuando vuelvas a tu página de inicio, ve boton pequeño, ahora te llaman post que yo guardo eso. Eso es lo único de lo que hay que tener cuidado. Codificarlo un poco hacky. Entonces, la única manera en la que se me ocurre manualmente solo conectándome a una página, hay veces que quieres hacerlo. De lo contrario, construya una lista, tal vez tenga un interruptor que lo encienda para decir destacado o para decir alguna manera de simplemente activarlo para que luego pueda configurar filtros y simplemente mostrar el botón en particular, botón más hacky diciendo que la mayoría de las veces queremos una lista, volvamos a encender la pantalla así. Así que funciona muy bien. Estoy envejeciendo difícil. Hacia el final de este curso, voy a querer un botón cavernícola para ir a donde quiera. No me des estas cosas elegantes, increíbles, increíbles que me ahorran mucho tiempo. Dame las cosas que se romperán todo el tiempo con URL completas, con URL codificadas. En fin, eso es, ¿ vincular manualmente a una página de colección? Avísame si conoces una mejor manera de hacerlo. Probablemente haya uno y simplemente no lo sé todavía. 96. ¿Cómo agrega mi cliente una entrada de blog en la colección de CMS en Webflow: Hola a todos. En este video te voy a mostrar cómo tu cliente agrega una página a tu sitio web. En este caso es una entrada de blog. Básicamente, vaya al editor, haga clic en este botón. Sí, no hay mucho más que esto, pero bueno, hay otras cosas que quiero mostrarte. Bueno, en realidad, te voy a mostrar todos los pasos si acaso te pierdes un poco en lo contrario, eso es todo. igual que el testimonio que hicimos antes, excepto que es una página entera. Magnífico. Bien, lo primero es, es que todo necesita ser publicado. Así que asegúrate de que esté publicado. Necesitas asegurarte de que lo has compartido con ellos, bien, invita a editores invitados. Pueden hacer clic en esto, pueden hacer clic en el enlace que obtuvieron de usted o recordar, pueden hacer signo de interrogación en él y pueden entrar ahí. Bien, para que puedan entrar y editar las páginas que existen. Pueden pasar y decir que en realidad esto necesita ser cambiado. Bien, se trata de diseño gráfico. Hit publicar cambios. Va a ir a editar el disco. Pero ahora lo que quiero hacer es añadir mi propia entrada de blog. Yo soy el cliente. Estoy como, quiero agregar mi propia entrada de blog, por favor. Voy a ir a entradas de blog o puedes recorrer el camino largo, colecciones, entradas de blog. O puedes usar esa pequeña pestaña ahí y mira, aquí hay una opción. Dice agregar nuevo, como sea que hayamos llamado. Ahora dice agregar nueva entrada de blog. Lo mismo con testimonial. Testimonial, fácil peasy. Llegamos a rellenar los campos y un segundo. Bien, bueno viejo ipsum.com. ¿Alguien usa esa? Bien, solo un poco de texto marcador de posición y escenificado listo, configurado, publicar, bien , y como antes, como cualquier testimonio, va a aparecer, pero ahora en realidad va a ser una página una vez que la imagen cargas. En realidad no me puse una miniatura y los chillos. Bien, pero nunca envejece. Han creado una entrada de blog o es una nueva página de producto y nos sirves nueva receta, sea lo que sea que estés agregando a tu sitio. Tenemos que subir ahí. Y de vuelta aquí en mi diseñador, voy a ver que el cliente ha entrado porque mi blog publica seis artículos. Son las nueve. Sí, sé que lo es. Hola, buena ondícula de enseñanza. Ahí está. Todo está siendo agregado. Diversión. Bien, eso es. Así es como tu cliente, Ed es una publicación de blog o cualquier página que quieras agregar a tu colección en tu sitio web por. 97. Cómo usar elementos de texto enriquecidos en Webflow: Hola a todos. Rich toma elementos. hemos mirado un poco. Han surgido aquí y allá. ¿Qué son? ¿Cómo les agregas cosas? Oh, mira, puedes agregar cosas, puedes cambiar cosas. Puedes agregar imágenes, videos, todo tipo de bondad a un bloque de texto enriquecido. Tú y yo y el chico guapo, todos vamos a aprender a agregarlos, a ellos, a ajustarlos, pero no a estilizarlos. pondremos estilo en el siguiente video. Bien, comencemos a hacer algo de texto enriquecido, bien, elemento de texto enriquecido. Tenemos uno o que toma bloque, bien, ya tenemos uno. Recuerda que teníamos uno que solo se puso automáticamente en nuestras entradas de blog. Entramos ahí y ahí está. Acaba de ser arrojado. Diferente a tal vez el que agregamos aquí donde simplemente lo pegan en esto, si solo lo pego, termina siendo texto de párrafo y nada más. Entonces echemos un vistazo a hacer uno por sí solo, solo en la página de inicio, no conectado a la base de datos, el momento, solo mire por sí solo. Entonces la, una llave, tengo que ser una especie de hogar para ello aquí. Y voy a añadir aquí este bloque de texto enriquecido. Bien, entonces tenemos un bloque de texto enriquecido. Puedes pincharlo como lo hiciste antes y decir, Qué es esto una clase es para ello. Pero digamos que quiero agregarle cosas porque de momento tiene algunas cosas genéricas ahí dentro. Vamos a agregar cosas. Todo lo que necesitas hacer, haz doble clic en cualquier elemento o arriba donde quieras que esté y ¿regresa? Bien, y si empiezas a escribir, asume que estás escribiendo texto de párrafo, aunque atado para saber justo como texto de párrafo, ¿cómo puedo, digamos que quiero poner en golpear aquí abajo, regresar y estoy va a decir que esto es un bateo mixto. La opción de golpeo. Lo que haces es resaltarlo y te dará las opciones que están permitidas en el cuadro de texto enriquecido. No hay una gran cantidad que puedas hacer, pero básicamente cualquier cosa que necesites para un artículo o una entrada de blog, pedazo de texto, tienes tus encabezados, obviamente, reuniones. Bien, tienes vamos a echar un vistazo. Podemos hacerlo audaz, podemos hacerlo cursiva, subíndice, superíndice. Una cosa es, es que cuando es un golpeo, ¿Cómo puedo hacer que vuelva a ser un párrafo? No hay opción de párrafo similar. Sólo tienes que hacer clic en la calefacción otra vez, puedes ver es un hit tres porque es azul. Bien. Da click en él y vuelve al valor por defecto, que es el párrafo. Solo vamos a ser importantes cuando empecemos a peinarlo en el siguiente video. O las cosas interesantes aquí, Hipervínculos en las comillas de bloque de hipervínculo, puede que no. Voy a seleccionar esto, convertirlo en un blockquote. Blockquote es, es click off. Es un trozo de texto con sangría destinado a ser utilizado como cita. Por eso es un blockquote. Blockquote porque está destinado a ser un gran bloque de cosas. Está destinado a ser como cuando estás citando a alguien, solo puedes poner entre comillas. Pero cuando sea un trozo agrandado, usarás esta sangría. Entonces está fuera del flujo de texto y está destinado a ser interpretado como una cita que hace referencia a otra cosa. Y muchas veces usarán esta pequeña línea. Entonces así es como hacen un blockquote. Qué más conseguimos seleccionados todos los enlaces blockquote. Eso es todo. Echemos un vistazo a algunos de los bits probablemente más poderosos. Entonces digamos que quiero agregar una imagen, voy a presionar Return. Y tal vez lo hayas hecho, yo lo ignoré antes. Si empiezas a escribir, solo obtienes un párrafo. Pero si le pegas retorno y solo espera un poco, mira, ¿qué es lo que hace esta cosa? Voy a darle un rápido vistazo a eso. Tiene algunas cosas geniales. Hagamos las cosas aburridas en realidad, lista de viñetas, necesito naranja, necesito púrpura. Bien, es una lista de viñetas y vuelve de nuevo. Hagamos algo más emocionante. Hay una lista numerada de viñetas. Vamos a hacerlo. Una imagen, imágenes, bastante cool porque, vamos a agregar la imagen. Tiene algunas características extra. Puedes decidir si está centrada, si es grande como puede ser en este momento, si esta fuera una imagen más grande, iría hasta los bordes, pero no se está extendiendo más allá, si es grande como puede ser en este momento, si esta fuera una imagen más grande, iría hasta los bordes, pero no se está extendiendo más allá, 's 100 por ciento de tamaño. Alinear a la izquierda. Eso tiene sentido. Este es bastante genial. Agreguemos algo de texto. Voy a agarrar esto, en realidad voy a cultivar algo de Loren ipsum tú ahí mismo . ¿Todo el mundo usa esto? Generar Loren Ipsum fuera del sitio? Es el lado más aburrido de una conjetura ¿quién ha estado mirando los carretes de manguera? **** anuncios. Bien, vuelve a entrar aquí. Entonces tengo algunas garrapatas, voy a pegarlas debajo. Ponle sintonizar Rambo, solo pégalo tan pronto como el texto del párrafo. Lo que una imagen puede hacer es que puedas decir que, amigo mío, estás alineado a la izquierda. Se puede ver que el texto da la vuelta, alineado a la derecha. El texto se envuelve, lo cual es bastante genial. Imágenes que puedes escribir aquí que tengan un poco de pie de foto incorporado. ¿Bien? Las imágenes también. Esto es cosa de la pequeña llave de mono aquí. Sólo la llave hasta tú tienes cosas básicas. Tienes texto alt-text. ¿Lo obtienes de los activos que no sean el panel de Activos o escribes cosas personalizadas y las rellenas ahí afuera? cuanto al tamaño, podrías decidir que el tamaño es realmente alto DPI, que es la mitad del tamaño, por dos. No sé por qué eso es por dos, pero se puede ir de ancho completo es que va a tratar de ir de ancho completo lo más lejos que pueda. Personalizado, bien, puedes decidir qué tan grande va a ser. Para que puedas obtener un poco de detalle aquí con tu imagen. Y este enlace aquí es justo cuando se hace clic, vaya a una URL. En este caso, podría ir a Unsplash donde obtuve la imagen de las imágenes. ¿Y cuáles son las cosas geniales que hay aquí? Pongamos algo aquí. Soy bastante fácil de atravesar, supongo, video. Sólo tienes que copiar y pegar desde tu canal favorito de YouTube. Este es mi favorito. Y cualquier viejo y mi cochera. Cualquier clip antiguo de YouTube que puedas agarrar, compartir, Bien, y copiarlo. Bien, Vimeo también funciona. Y luego solo lo pegas aquí y tendrás un video de YouTube con muchas de las mismas características que la imagen. Hay muchas cosas que puedes hacer aquí. Pero lo más importante es lo mismo que una imagen, divertido. algo más ahí que deba mencionar? Puedes incrustar código ahí. No vamos a entrar en código y frijoles ahora mismo. Es un video de mi lista que viene en este de aquí, un poco rico, incrustado, rico contenido. Nunca uso esto. Puedes poner cosas como listas de SoundCloud y Spotify. Y tienes que Google como gran lista de incrustar contenido rico para Webflow. No lo uso muy a menudo, pero hay cosas que puedes poner ahí. Este de aquí lo haremos más tarde, pero eso es para cosas como tu calendario Li cosa, cosa de chimpancé macho. Pueden entrar ahí como código y código grande. Y si bien esto es bueno para nosotros como diseñador y diseñador parte de Webflow. Todavía son bienes realmente útiles, agregando contenido muy rápidamente en lugar arrastrar una imagen y hacer todo ese tipo de cosas. Está realmente construido para el editor, tu cliente, tu cliente, tu mamá, que estaba actualizando el sitio web porque lo mostramos antes, si entran en el editor, déjame cargarlo. Pero en caso de que te olvides, tienes que asegurarte de que el sitio web esté publicado. Y vas a la opción Compartir y te aseguras de invitarlos como editor invitado. Abrimos el sitio. Y si no tienen el enlace del correo electrónico, sólo pueden escribir un signo de interrogación en él. Y pueden pasar y comenzar editar el bloque de texto enriquecido exactamente de la misma manera. Tal vez tengas que darles un poco de demostración sobre cómo funciona. Bien, para que puedan entrar aquí y decir en realidad, voy a pasar y seleccionar Entrar. Bien, van a ir y simplemente comenzar a escribir para un párrafo o resaltarlo y convertirlo en un H2 o una cita de bloque, o regresar y comenzar a agregar una especie de rich media. Genial para artículos, genial para blogs. ¿Ya nos dirías cómo bajarlo de estilo? No podemos soportarlo. Habrá otro video. Hagámoslo a continuación. Todo el mundo quiere darle estilo primero. Tengo que averiguar lo que hace. ¿Bien? Bien, vamos a hacerlo. 98. Estilizar texto rico en un CMS de Webflow: Hola a todos. Es hora de darle estilo a nuestro bloque de texto enriquecido de manera diferente al sitio web normal. Ese es un encabezado, eso también es uno de bateo. ¿Por qué se ven diferentes? Porque está en un bloque de texto rico y te voy a mostrar cómo tejer estilos dentro ese mismo texto de párrafo, textos de párrafo. Se ven diferentes porque uno está dentro de un bloque de texto enriquecido. Déjame mostrarte cómo hacerlo. Bien, para darle estilo al bloque de texto enriquecido, puedes hacerlo con todo lo demás, o puedes hacerlo de manera única para el bloque de texto enriquecido dependiendo de lo que quieras. Si solo quieres que siga los estilos del resto del sitio web, no necesitas hacer nada. Digamos que esta es una de bateo. Voy a agregar un comparativo pegando uno aquí arriba y tal vez también agregar texto de párrafo. Y conseguimos que el tipo tiene un pedazo arriba de aquí. No está en el cuadro de texto enriquecido, bien, ahí está, ahí. Entonces lo que tengo que hacer es que no importa si estilizo este. Bueno, éste, bien, si hago clic en él y voy por aquí y digo que querías, todos los de toda esta página web. Y todos van a ser una fuente que nosotros vamos a ser Oswald. ¿Bien? Y digamos que todo el párrafo de todo el sitio web va a ser una especie de gris claro o hagamos un color realmente obvio. Bien. ¿Por qué eso no funcionó? Porque en realidad no hice clic en las clases antiguas. Entonces me quito la clase. Bien, todos los párrafos esta página web, voy a ser azul. Bonito. Entonces todos vienen a dar el paseo. Ahora bien, si eso es lo que quieres, eso es lo que haces. Si quieres que esto sea diferente. ¿Bien? Esto es bueno para el sitio web, pero esto para el blog o el artículo tiene que ser diferente. Lo que hay que hacer son dos cosas. Necesitas el bloque de texto enriquecido, el tipo de padre que da la vuelta en absoluto. Necesita su propia clase. No importa cómo se llame. Bien, vamos a llamar a nuestros textos ricos, pero puedes llamarlo como quieras. Y qué magia sucede cuando es el flujo, digamos los encabezamientos aquí. Si digo, sí te recuerda si te olvidas, pero ese es mi trabajo. Te lo estoy recordando. Si le doy la phi, diga todos los H 1s, porque podría aparecer un par de veces, bien, los ocho, pero esta cosa es nueva. Dice nist, el selector dentro de textos ricos. Esa es la clase que acabamos de hacer. Y tú estás como, Sí, hagámoslo. Bien. Simplemente significa que sólo va a afectar a H 1s. Todos ellos no importa cuántas veces los uses. Si están dentro de nuestro cuadro de texto enriquecido que tiene esa clase. Bien, entonces voy a ir aquí y decir en realidad quiero que sea quien también había sido, bien, lo cual es diferente para los artículos. Es una forma de separar el contenido, las elecciones de fuentes feas, bien, probablemente quiera la fuente Serif. Ahí vamos. Bien, entonces digamos el párrafo y lo mismo otra vez. Digamos en esto, quiero que esté cursada y me gustaría que no fuera azul porque me está matando. Así que mientras mi padre, bien, del cuadro de texto enriquecido tenga una clase aplicada. Ahora caso somos texto enriquecido. Se puede decir que se escuchan todos los párrafos. Me gustaría volver a ser lugar negro. Oh, bien. ¿Por qué eso funcionó aquí abajo y no apareció? Ese es un muy buen punto. Oh, yo no lo deshice. Yo hago clic en eso. No creo que lo haya hecho. Quizá eso es lo que no hice es echar un vistazo. Sí. ¿Me viste? Podría pasarte a ti. Lo dejaré en caso de que sí se asegure cuando digas que quiero que todo H4 esté bien para ser, quería estar anidado dentro de texto enriquecido. Sólo el H4 está aquí y mira hay un par de ellos, Hay otro H4. Entonces voy a elegir un color bonito, muy obvio, terrible. Ahí vamos. Ahora, he dicho un par de veces que necesita tener el envoltorio en el exterior. Entonces eso nos va a llevar no a ningún problema, pero es algo para recordar. Porque si voy a otra página, digamos que voy a, tengo una página que ya la tiene , pero plantilla de blogposts. Bien. Ahí está mi rico libro de texto. Estás como, ¿por qué es azul? Lo hicimos negro. Entonces tienen que hacer es no. Así es. Solo agrega ese texto enriquecido. Texto enriquecido. Y eso va a decir, Oh, mira las broches a la atención. Esto es, bien, ahora soy negro y mi bateo. ¿Bien? Tú no eres éste. Realmente quiero darle click aquí. Quizás te hayas preguntado es probablemente como, ¿cómo no puedo cambiarlo aquí? Bien, no fuiste tu editor. Dentro de aquí. Puedes cambiar a editor y empezar a hacerlo, o volver al CMS y volver a las publicaciones del blog. Y no puedo recordar cuál estaba mirando. Esta es una de ellas. No, esa no. Veamos éste. Aquí es donde se pueden hacer todos los cambios, si se quiere, el diseñador, a menudo trabajaría aquí. El cliente suele trabajar en el editor. Ahora puedes pasar y decir en realidad esto debería ser un H1. Ahora voy a guardarlo e ir a buscar la historia del diseño web. Vamos a cerrarlo. Y debería ser ese historial de fuentes serif. No es éste. Historia de su nombre. Sano. ¿Eso tiene sentido? Se asegura de que haya una clase alrededor del envoltorio para el bloque de texto enriquecido. Y luego asegúrate de hacer clic en la opción de anidamiento que aparece en la parte superior ahí. Bien, estoy de vuelta. Estaba cenando y estaba como, ¿ sabes qué? Debería habérselas dicho. Estoy de vuelta, vuelve a decirte lo que debería haberte dicho. Tiene que ver con la cascada o especificidad. Así que hemos separado estos estilos para el bloque de texto enriquecido. Este párrafo aquí era diferente porque está anidado dentro del libro de texto enriquecido, diferente de éste. Algo así en las Cascades sigue funcionando porque este es un párrafo, lo lleva a mirar todos los párrafos. Se fija a Arial, este fin. Y este de aquí, no he cambiado. Todavía son todos los párrafos, textos ricos, pero no he visto nada más que Arial. Entonces va a seguir este ejemplo a menos que lo cambie aquí. lo que me refiero, entonces párrafo texto aquí o párrafos. Y porque aquí no lo cambié, esto debería ir impactando. Bien. Porque aquí no cambié nada. Se va a ir mamá, no sé qué hacer. Sólo voy a por defecto al padre k, El que sube el río, la cascada, y usar eso como mi base. Pero si aquí soy un poco más específico, entro y digo, mira, tú el impacto fue la cama. ¿Quién se acuerda de la cosa? IdB Qdy. Estás en su identificación, dq dy, debe saber esto de cómo hacer off de memoria. Aquí vamos. Comic Sans, toma ese impacto porque esto es más específico. Es ignorar lo que ha pasado aquí arriba. Entonces aún tienes que considerarlo. Al igual que necesito cambiar el tamaño de fuente aquí a calentar a golpear uno aquí versus golpear uno aquí versus golpear uno aquí. Yo soy como, No, ambos son iguales. Si quisiera ser ambos un poco más grandes, en realidad solo voy a usar este tipo de padres para que todos se hagan más grandes. Y estoy contento con eso ahí también. Así que sólo voy a dejar la cascada fresca. Así que volví para enseñarte a usar el impacto y Comic Sans. Eres bienvenido. 99. Proyecto de clase 08 - Blog CMS: Hola, es hora de proyecto de clase. Vamos a construir un blog sin fisuras. Nada demasiado grande o elegante. Sólo algo simple como solo va a ser una página de inicio y diseñar una de las páginas de plantilla, ¿de acuerdo? Y se trata de aprender ese CMS. Entonces quiero que crees tu propia colección y solo necesitas tres de estos artículos en tu colección. ¿Dónde lo vas a conseguir? Quiero que reinterpretes un blog existente. No te importa de dónde lo sacas. Si te doy el contenido, todo termina pareciendo igual. Y si usamos las cosas que vienen del flujo de trabajo, todo se ve muy Loren ipsum. Sólo sal. Si tienes un blog que te gustaría o sales y solo busques blogs. Estos son algunos de los blogs que miro en la revisión creativa, el flujo de trabajo uno por el que podrías pasar y usar esto. Adobe tiene uno increíble. Regate. Lo llaman historias triples. Y lo que estás buscando hacer son dos partes. Vamos a tener una página de inicio como lo hicimos con es algo así. Bien. Han decidido hacer su lista de colecciones así. Y cuando haces clic en él, entras en la página del blog. Entonces no quiero que pases y escojas tres de ¿cuáles son estos sitios? Ahí está el título que puedes agarrar, está el breve resumen, la fecha que puedes maquillar, y ahí está la miniatura de la imagen. Así que solo agarra tres de ellos y no necesitas toda la página. Simplemente hazlo por encima de las cosas del pliegue. Y no estoy buscando como cada cosa que hicimos. Tan solo pasa por imagen, título. Asegúrate de quedarte con el autor, bien, y luego agarrar una parte de esto no tiene por qué ser todo. Ya ves, oye, mira, ¿qué es eso? ¿Sabes cómo se llama? Es un caso blockquote y diferentes rubros. Simplemente trae algo de eso hasta ti. Puedes tratar de averiguar cómo hacer drop cap así. Bien, solo agarramos un poco del texto y luego vamos a editar a tu entrada de blog. Así que elige tres de ellos. Echemos un vistazo. Rediseñar el blog existente, colección de blogs en la página principal. Solo toma una siesta rápida, no tiene que ir a ningún lado. Solo estamos un poco juntando todo. Dale estilo tanto como puedas. Si vas a pasar media hora en esto, a dedicarte media hora a esto. Si vas a pasar medio día en este giro, medio día en esto. Está totalmente bien. Aquí no hay bien o mal. Uno tiene diferente tiempo disponible, tiene un nav, tiene una sección de héroe, y en las tarjetas de resumen. Bien, esa es esa lista de colecciones que hemos hecho un par de veces en la página de inicio fue mi página de testimonios. Eso es este ese resumen de colección donde puedes pinchar e ir a leer el artículo grande. Ella es mejor. Hay abajo en la parte inferior aquí que en tu página de inicio estilo un poco de la mía. Y deberían enlazar a esas páginas. Entonces tres páginas reales. Solo ten en claro que es una reinterpretación de la de otra persona cuando la estás publicando y no es tu trabajo. Y solo incluye un enlace al autor y un enlace al artículo original. Solo póntelo ahí diciendo que este es el artículo original, dale estilo y hazlo parte de él. Oh, estoy de vuelta. Bien. Es al día siguiente y pensé, ya sabes, lo que también deberían hacer es solo encender el índice de discapacitados k Está en la configuración de tu proyecto publicando ECO. Recuerda este de aquí, aquí, aquí. Bien, solo para decirle a Google, oye, no te molestes en indexar esto porque es un duplicado. Estos no son los droides que estás buscando. Bien. Pasa para no intentar clasificarte para estas cosas porque no es nuestra. Llevar a cabo. Mientras estés ahí. Solo asegúrate de explorar la interfaz del editor solo para que cuando estés tratando con clientes, sepas cómo se siente su lado e intentes hacer lo que ellos harán. Y podría darte la oportunidad de hacer ejercicio como, oh, necesito hacer esto en el lado del diseñador para asegurar que x suceda en la edición a un lado, realmente solo dos páginas y una página de inicio de colección, una página de blog plantilla que escupe tres páginas para ti porque es increíble, porque son los entregables de CMS toma una captura de pantalla de tu página de inicio y tu diseño de página de blog. Entonces esto debería ser un total de cuatro homepage y tus tres diseños de página de blog y subirlos aquí, también compártelos en redes sociales. Se interesante ver lo que eras y hacer un poco de antes y después para tomar una captura de pantalla de lo que lo sacamos, lo que terminaste haciendo con TI. Problemas con los que te encuentras ayuda que podrías necesitar para llegar a la comunidad, especialmente a los grupos aquí para recibir consejos, compartir. Todos ellos, uno de ellos, ninguno de ellos. Depende de ti si quieres compartir en redes sociales. Bien, ese es el proyecto de clase para un blog sin fisuras. Ve a hacerlo. Diviértete, haz una perfecta, haznos orgullosos. Te veré en el siguiente video. 100. Código HTML incrustado de Calendly, Twitter y Castos: Hola a todos. Vamos a ver los códigos de inserción HTML. Es una forma de agarrar funcionalidad, contenido, interactividad de otros sitios web. Veremos Calendly, ruedas y Twitter, los que utilizo. Pero básicamente solo copias y pegas código y terminas con cosas geniales en tu sitio web. Puedes ver podcasts, solo juega en el sitio web, alguien más lo aloja y lo entrega. Puedes reservar tiempo y un horario a Calendly y puedes leer todos mis tweets y luego actualizarlos dinámicamente. Y los servicios que brinda Twitter, solo copiamos y pegamos el código. Es una manera súper fácil de agregar funcionalidad como real a tu sitio web que tal vez no creaste. Has tomado prestado de otras personas, haciéndote quedar bien. Bien, vamos a hacer que nos veamos bien, bien, para poner en marcha cualquiera de esos, empezamos con, estoy de vuelta en mi cartera porque mi otro sitio se estaba poniendo bastante desordenado. Así que acabo de hacer una pequeña sección para ello abajo de aquí abajo. Voy a presionar un botón y bajar a buscar debajo de componentes, este de aquí llamó y puja. Esto recibirá el código. Aquí es donde tiene que ir el código. Vamos a buscar el código. Voy a usar solo algunas de las cosas que uso ahora esto no es ilimitado, pero como hay miles de sitios que permiten que sus servicios sean incrustados en tu sitio. Te voy a mostrar como este de aquí. Podcasts. Yo uso el ciclo nos costó. Ellos albergan mis podcasts y no queremos ponerlos en, digamos, un sitio web, no en un podcast. Lo que puedo hacer es que en realidad puedo decir este de aquí, quiero vincularlo y mirar eso. Esto es solo como un código de inserción fácil. Eso es lo que estás buscando, ese es el término el sitio web embed HTML embed y bid embed code. Esas son sus rodillas. Ese es el idioma que estás buscando. Y solo regresas aquí y lo pegas y presionas Guardar. Y ahí está, sólo una pieza así. Bien, voy a previsualizar mi sitio y vas, bien, jugar en mi sitio web y códigos grandes son geniales para agregarte un poco de dinamismo o tal vez un sitio web potencialmente estático usando el de otras personas servicios, golpeando tipo de volumen a su sitio. No estoy seguro de que esté diciendo ahí, pero hay chulos. Se ven geniales en tu sitio. Bien, entonces hagamos otra. Bueno, una cosa que notarás es que eso ocupó todo el contenedor. Entonces digamos que esto contiene en el que lo tengo, probablemente lo voy a meter en una etiqueta div y si lo cambio. Entonces vamos a llamar a este div Locke se va a llamar div podcast. Te voy a poner ahí, ¿de acuerdo? Y este podcast div, voy a encogerme. Se le pone un poco de relleno en el costado. Oh, puedes ver que incluso cambia o sabe que es código responsivo. Entonces sabe cuando se hace más pequeño, sólo va a usar ese lado. Para que puedas controlar el tamaño de estas cosas para algunas de ellas simplemente jugando con el contenedor. Hagamos otra. Entonces digamos para ese mismo podcast, lo que hago es cuando estoy entrevistando a alguien, uso Calendly, es solo una app de programación y no quiero que te registres a todos estos, pero tendrás algunos de estos en tu vida. Y puedes agregarlos a tu sitio porque construir nuestro sistema de programación dentro de Webflow tú mismo, Guau, Ella sería complicada. Esto realmente se conecta a mi Google Calendar, lo cual es increíble. Es bastante increíble. Ahora. Todos van a estar en diferentes lugares, estos códigos de incrustación. Entonces este de aquí, voy a hacer clic en compartir y es el ED al sitio web. Ahí está. Inline en cama. Bien, así que solo busca en Google el servicio que estás usando, Mailchimp, Eventbrite, HubSpot. Entonces cada mono, sea lo que sea que estés usando, busca el código embed k. Y luego a menudo puedes simplemente agarrarlo. Y éste de aquí, mira, solo cópielo. Este de aquí tiene un aspecto un poco extra. Se pueden cambiar los colores de la misma. Si te fuiste a la cuenta gratuita, yo soy barato. Cayenne estaba usando el libre. Bien, entonces voy a copiarlo, copiar el código, volver a Webflow. Voy a poner en, voy a ponerlo sólo otro código incrustado. No los mezclas. Bien. Los tienes en unos separados. Se puede poner otro debajo. Bien. Oh, me lo perdí. Mira. Digamos que no está en el contenedor. Voy a pegarlo. Excelente. Guardar y Cerrar. Golpe. Ahora, gran cosa mira, bueno ellos querían apareció. Cuando éste aparece, algunos de ellos lo hacen, algunos de ellos no. Depende. Éste es lo que se llama un iframe. El código está envuelto en este iframe, que es como un pequeño navegador que carga este de aquí, seguirá funcionando incluso cerca. Yo solo quiero trabajar, pero hay que publicarlo. Incluso se puede ver. Mira, necesito que me publiquen puño. Entonces voy a decir publicar, Aquí está mi portafolio y echar un vistazo al fondo. Ahí vamos. Ahí está mi aplicación Sweet donde la gente puede reservar horarios conmigo. Bien, todo es interactivo. Es hacer cosas. En realidad pueden reservarlo. De hecho, puedo reservarlo porque no tengo horarios en julio usando el poder del servicio de otra persona Calendly, que podrías estar pagando usando la opción gratuita para k. el poder del servicio de otra persona Calendly, que podrías estar pagando usando la opción gratuita para k. quiero mostrarte aunque es algunos de ellos, no todos ellos. Tendrías que solo esta de aquí. ¿Ves que tiene una altura? Bien, puedo ver el código. Entonces, ¿qué pasa si voy a cambiarlo? Se puede cambiar totalmente. Entonces tu código en tu sitio, bien, porque puedo ver este lado, realmente no puedo hacer. Puedo cambiar los colores aquí porque hay algo que está pasando, porque eso es algo que está sucediendo en el sitio de Calendly. Aunque probablemente podría hacerlo de todos modos. Entonces sí, hay cosas que puedes hacer aquí y solo ve y cambia. El caso es que, si vas y lo cambias, necesitas guardar y cerrar y volver a publicar. Para que esto esté en el sitio en vivo, hagamos uno más. Voy a poner en el feed de Twitter. Todos son ligeramente diferentes, así que esto es mío. Ve a seguirme si no lo has hecho. Bien. A Dan le encanta Adobe. Voy a copiar esto y en realidad voy a hacerlo, sí. Entonces Twitter lo hace de esta manera. Tienen la dulce opción publish.twitter.com. Puedes ir aquí y puedes decir, ¿qué quieres de ellos en la cama? Yo estoy como, Oh, quiero invadir. Puedes incrustar un tweet en particular. Digamos que quieres que sea parte de algo a lo que estás haciendo referencia en un artículo. Puedes incrustar solo un tweet, puedes copiar y pegar la URL para ello. Bien, voy a hacer perfil, pero puedes crear tal vez una lista o puedes seguir un identificador de alguien a quien podríamos estar siguiendo. No sé cuál podría ser mi cartera , proyectos de diseño UX. Voy a pegar mi nombre e ir así e incrustar la línea de tiempo o simplemente unos pines de botón en lo que quieras echar un vistazo a este. Y a menos que quieras hacer otra cosa, solo cópiala. Te dejaré pasar y divertirte con como personalizar las opciones para las cosas que estás haciendo por mí por el momento, solo voy a lanzarlo. Entonces, qué increíble incrustar códigos o pegar. Te darás cuenta de que tengo envoltura de línea puesta. De lo contrario simplemente, sigue ahí. Es solo que, tienes que desplazarte esta manera y está un poco escondido por ahí. Un poco como romperlo para ver con lo que estoy haciendo no cambia nada, solo ve el código en múltiples líneas. Entonces nuevamente, es uno de esos que necesitan ser publicados. Y refresco mi sitio, desplácese hacia abajo. Bueno, probablemente necesito contenerlo incontenido, así que solo se está expandiendo para siempre. Puedes ver todos mis últimos tweets. Bien, hay formas de hacerlo para Instagram y Facebook. Estaba trabajando con un cliente que dirige como un estudio de Pilates. Ella usa un poco de software para ayudar a su horario programado y para que los clientes reserven y paguen un código incrustado. Así que solo tenían un sitio web y solo podrías lanzarlo. Entonces la gente podría hacer pagos a través de la pequeña parte del código incrustado. Ahora no es solo el diseñador el que podemos agregarlos, bien, además de un código de inserción fino. De hecho, puedes hacerlo dentro del cuadro de texto enriquecido de forma nativa. Bien, recuerda que hicimos este cuadro de texto enriquecido para que podamos tener el contenido del cliente o cliente ed. Entonces vamos a verlo. Este rico libro de texto como el cliente puede. Yo, voy a cambiar al editor para que puedan entrar ahí, puedan empezar a agregar texto. Y cuando golpeé regreso, ¿recuerdas este pequeño plus? Se parecen un poco al código de inserción. Es el código de inserción por el que pueden pasar. Y me vuelvo a agarrar esto, copiar, pegar, guardar y cerrar, publicar. Puedes ver aquí que no va a aparecer mientras estén en el editor, pero los visitantes del sitio web en realidad volverán a golpear Publicar. Bien, volver al sitio en vivo. Oh Dios mío, mira eso. Mi podcast, Sarah Parkinson que fue entrevistada en esto, quedará horrorizada por el diseño. Ella está rodeada de, cualquier manera incrustar códigos. Hagamos uno más, en realidad uno viejo porque quiero mostrarte una última cosa del estilo. cubrimos un poco, pero echemos un vistazo. Entonces Calendly ofrece algunas opciones realmente geniales donde puedes usar esta , texto emergente, si lo copio, continúo, agarra eso, cópialo y vuelvo a saltar. Aquí abajo. A lo mejor en vez de ese botón, en realidad lo voy a poner debajo. Bien, para que puedas verlo incrustar código debajo de esta cosa de aquí. Y voy a pegar esto. Y echemos un pequeño vistazo. Así que eso es un poco grande y feo. Echemos un vistazo a lo que realmente sucede. Así que salta a publicar sitio. Usted ve aquí tiempo programado conmigo. Haremos clic en esto. Pop up. ¿Qué tan genial es? Bien, la razón por la que quería mostrarte eso es porque es increíble. Pero también como ¿cómo lo estilizo? Lo que sucede no es en todos los casos, pero este bit particular de código incrustado realmente tomará el estilo de cualquier tipo de envoltorio padre. Vamos a ponerle una etiqueta div a su alrededor y darle estilo. Entonces diblock ahí. Se puede entrar. El bloque if va a llamarse kel y Lee. Y voy a decir que todo dentro de esto va a ser público Sans. Hagamos algo obvio. Tenemos que cambiar. Podemos cambiar muchas cosas al respecto, pero solo guardemos y publiquemos y saltemos al sitio terminado. Ahí vamos. Se ha tomado el estilo de la etiqueta div. Vuelve a aparecer. Bonito. Bien, así que eso es un poco torbellino para los códigos incrustados. Simplemente hay tantos por ahí, no vamos a cubrirlos todos, pero probablemente haya algo ahí afuera que ya estés usando. Podría ser un CMS, podría ser un C RM, podría ser algún otro acrónimo que no conozco o servicio que tendrá un código embed que puedes agregar a tu sitio web. Porque a veces estás como, Oh, ¿ podemos hacer esto en Webflow? Estás como, en realidad, vamos a comprobar no hay otro servicio por ahí que lo haga muy fácilmente y podemos simplemente copiar y pegar el código embed, ¿verdad? Eso es, incrustar código sobre. 101. Creación de una tienda de comercio electrónico en Webflow: Hola a todos. En este video y en los videos anteriores, vamos a construir algo de comercio electrónico, bien, vamos a construir esto. Va a tener productos, poder tener diferentes tipos de productos. Tenemos edición al estilo carrito, al estilo carrito, al checkout. Es muy emocionante. Empecemos. Antes de que empecemos a hacer algo, el propósito de este video de la serie aquí es darte una visión general de las tiendas de comercio electrónico en Webflow, no vamos a entrar en muchos detalles, te daremos todo lo necesario para hacer algo, pero todos los pequeños detalles reales. Va a estar fuera del alcance de este curso, pero ya verás, te pondrás en marcha bastante bien. La otra cosa que quiero mencionar es que lo cerca que está el comercio electrónico a lo que ya hemos hecho como nuestro blog CMS. Esas colecciones son las que hicimos antes porque va a ayudar a informar lo que hacemos para el comercio electrónico. Y podrás ver esa conexión entre los dos, haciendo que esta parte sea bastante fácil en relación con, supongo comenzando con el comercio electrónico. Entonces primero, hagamos un nuevo sitio. Así que siguiendo a lo largo, haciendo nuevo sitio, no mires a todos los míos. Hay muchos borradores y esas cosas. Lo culpo al curso haciendo terminar teniendo que hacer muchas cosas solo para que sea agradable y suave para ustedes mientras están viendo. No me juzgues. Voy a hacer algo llamado tienda T. Bien, haz lo mismo, y hagamos un sitio. Entonces lo grande de transformarse de ser un sitio regular que hemos hecho anteriormente, ya sea estático o dinámico es este botón. Haga clic en esto. Y va a decir, voy a hacer dos cosas para ti a las colecciones. Sabemos lo que es una colección, así que productos y categorías. Hagamos esto. Lo único es, es que cuando estás creando un sitio de comercio electrónico, tienes que cambiar tu plan de sitio. Hasta ahora hemos estado lidiando con startup va a ponerse bastante, podrías hacer prácticamente todo este video con el de inicio. Simplemente no podrás tomar pagos hasta que cambies a uno de estos planes de comercio electrónico. Recuerda, Stata es estático, estático, dinámico, gran sitio dinámico, y luego el comercio electrónico es con estas estadísticas. Bien, te atraparé. Esta página cambiará de estilo. Ellos lo van a exponer. Cambiarán cuáles son las reglas para los diferentes precios. Los precios van a cambiar. Pero solo debes saber que tendrás que cambiar a uno de comercio electrónico. Tenemos los detalles correctos. Bien, así que vamos a echar un vistazo a lo que ha pasado. Ahora, esta gran guía de configuración aquí abre que En realidad es muy útil. Voy a cubrir esto yo mismo. Quiero decir ustedes juntos, pero definitivamente pasan por ello. Y lo grande es, es que bajo E comas ahora hay productos y categorías. Los productos son mis productos van, agreguemos algunos, solo voy a agregar algunas cosas de muestra. Simplemente vamos a hacer uno torbellino en este video porque siento que es bueno verlo todo y luego trabajar individualmente en lugar de tratar de ajustar. Repasa cada video y al final va, Ah, eso es todo va de la mano. Entonces este video va a ser un poco rápido. Bien, lo desglosaremos más adelante. Así que tenemos un montón de productos. ¿Qué más lo tengo debajo de la pestaña de páginas? Mira eso. Tienes algunas cosas nuevas. Una plantilla que te gusta, oye, no teníamos una plantilla antes, pero no se llamaba e-commerce. Recuerda, ahora blog. Ese tipo. Teníamos páginas de colección CMS cuando hicimos nuestro CMS y teníamos nuestra plantilla de blog. Entonces es el mismo jamón, pero esto es correo electrónico, páginas de comercio electrónico. Todavía hay una plantilla y al igual que antes, bien, si necesitas agregar cosas, esta es nuestra plantilla de producto. Así que diseñamos uno para muchos productos. Por el momento sólo tenemos cinco . Pero déjame simplemente agregar rápidamente un contenedor, agregar un bloque de texto que toma bloque va a obtener el nombre del nombre de nuestro producto. Vas, eso probablemente debería ser, estar pegando. ¿Bien? Bien, agreguemos una imagen y la imagen si la conectamos a nuestros productos, cualquier campo de imagen. Aquí vamos, va a traer a través de una imagen gigante, trae a través del precio, la descripción. Dije que está trayendo a través del precio porque eso lo convertirá en un producto adecuado en la parte superior ahí. Eso está bien, y voy a llevar a través del precio. Bien, así que diseñamos nuestras plantillas como antes y nuestra colección, que ahora está oculta bajo la pestaña de comercio electrónico. Y mira ese golpe, todavía puedes hacer colecciones, pero como que se han separado. Bien. Funcionan de la misma manera. Pero están bajo el comercio electrónico y debajo de aquí y nuestros productos, podemos seguir agregando cosas aquí donde un cliente puede a través del editor y seguiremos agregándolas a la tienda. También se agregan algunas otras páginas, una página de pago, mira eso. Recién hecho. Podemos darle estilo o podemos dejarlo. Pero eso está listo para funcionar. No es la página de confirmación del pedido. Sí. Muchas gracias. Otras cosas que se le agrega. Volvamos a mi plantilla de producto es cosas nuevas en este panel de anuncios, elementos de Canadá. Entonces hemos visto todos estos, nos estamos acostumbrando bastante a ellos. Fue este comercio electrónico que antes no estaba ahí. Eso sucede cuando pulsas ese botón y lo conviertes en una tienda de comercio electrónico, obtienes que estas cosas estaban ocultas antes. Podemos sumar Agregar al carrito. Voy a agregar esto ahí, en algún lugar arriba, abajo por favor. Imagen gigante. Se ve que se ven, tiene el precio, puedo agregarlo al carrito. Pero flow hace que sea bastante fácil hacer una tienda de comercio electrónico, pero también te da todo el control por donde podamos pasar y agregar todas las clases a estos botones. Salam, cómo queremos con nuestro dulce nuevo med, habilidades de estilismo que hemos aprendido a través de este curso, agregando clases, clases globales, convertir clases. Entonces, antes de irnos, va a haber algunas cosas que no vamos a cubrir. Vaya a la guía de configuración aquí. Puedes trabajar a través de algunos de ellos por tu cuenta. Al igual que definitivamente haremos una dirección comercial solo porque podemos evitar que lleguemos demasiado lejos. Como revisar tu configuración de moneda y qué tipo de envío vas a hacer en tu texto para tu país está fuera del alcance de este curso. Es diferente para todos. Hemos enchufado hacen que sea fácil. Cosas que cubriremos agregando un producto o diseño están almacenando tarjeta hará todo esto. Veremos los correos electrónicos, veremos cómo alojarlo. Cosas un poco geniales, bien, eso es bastante torbellino. Descripción general Ed productos y luego dos páginas los conectan a un carrito y una pasarela de pago, gana dinero, ¿cómo puede ser? Lo que voy a hacer es en realidad voy a eliminar estos productos. Bien, así que voy a ir a seleccionar todos y voy a eliminar, y voy a eliminar mis cosas en la página para solo para que volvamos a base de operaciones para que podamos empezar de nuevo por contenedor. Estamos listos para irnos. Pasemos por ahora y veamos esos pasos individuales. Individualmente y vea dónde podrían estar los bloqueos y cómo Webflow maneja el comercio electrónico. 102. Cómo agregar productos a tu tienda en Webflow: Hola. En este video, vamos a agregar productos a nuestro sitio de comercio electrónico. Vamos a añadir uno manualmente. Vamos a pasar por algunos otros ajustes ahí dentro. Después importaremos la muñeca vía CSV solo para acelerar las cosas, te mostraré cómo tu cliente puede agregarlas a través del editor también. Y acabaremos con montones de productos y nada en la página que haremos, veremos agregarlos a la página en el siguiente video. Vamos a agregar algunos productos. Bien, entonces agreguemos un producto. Vamos a ir a nuestro panel de comercio electrónico. Bien, tenemos productos. Sube aquí y crea un nuevo producto. Bien. Y tienes tipo de producto. ¿Es físico, servicio digital o avanzado? Básicamente las diferencias son que todos comienzan el mismo físico. Tu nombre Scott, la babosa, la descripción de la URL, de qué categoría podría formar parte, cualquier imagen asociada a ella y facturación, cuánto cuesta. Pero entonces tienes cosas como sesgos y tienes costos de envío, altura, peso, ese tipo de cosas. ¿Bien? Pero mientras que digital, se deshace de muchas de esas cosas de fondo y dice que es solo, ahí está el nombre del archivo y esta es la URL. Entonces esto podría ser por algo como, Oye, descarga los planes para esto. Aquí tienes un e-book y puedes tener tu enlace al archivo, tal vez Dropbox o algo así. Bien, así que aquí también, puedes ir al servicio, que básicamente corta todo eso porque no necesitas entregar nada como un producto digital o enviar un producto físico. Pero terminarás haciendo por un servicio, es que terminarás personalizando la página de agradecimiento un poco diferente para decir, oye, bienvenido, y te has apuntado nuestra clase o cosa de fitness. Y nos vemos el martes en la clase. Más que ver con el me gusta gracias correo electrónico. Se puede ver aquí. Te da algunos ejemplos como consultas también. Vamos. El último es un combo. Hace producto, simplemente los agrega todos al fondo. Puedes hacer ¿ tiene descargas? Sí. ¿Tiene envío? Puedes hacer un poco de ambas. Entonces, lo que vamos a hacer, así que hacemos física. Voy a cambiar el tipo. Ahora. Tengo algo de texto en los archivos de ejercicios. Hay uno nuevo llamado archivos de ejercicio. Hay una llamada tienda, abre producto uno. Podrías simplemente teclearlo también. Té verde jazmín. Y voy a agarrar el Loren ipsum para la descripción. Haremos categorías más adelante. Pero piensas que las categorías podrían ser descafeinado, podría ser una categoría que la gente podría buscar por mis diferentes dientes. Bueno, tal vez regiones, tal vez una categoría de las diferentes regiones productoras de té. No sé mucho sobre el té. Ni siquiera sé si hay un té verde Jazmín. De todas formas, medios, va a ser la imagen, así que podríamos arrastrarla dentro o debajo de la tienda. Ahí está este llamado T, trae eso. Facturación. Bien. Voy a ser mi precio va a ser de 13, 95 textos. Se puede trabajar en cuáles son sus textos. Tendrás que decidir qué es eso en tu región. Y el sesgo de la unidad de mantenimiento de existencias es generalmente solo algo usado por las tiendas para un identificador único para que puedan realizar un seguimiento fácilmente en lugar de llamarlo Té verde Jazmín, pueden tener diferentes versiones de la misma de diferentes proveedores y tiene un buen código. Inventario. A lo mejor sólo tienes diez de estos, tal vez vendiendo estampados o playeras. Es, es una manera de que puedas mostrar la cantidad y cuando se acabe, puedes detenerla. Envío como esperar, bien, necesitas ordenar tus cuevas de envío, pasar por cuánto te va a costar el envío y haces cálculos con el peso, el final, las dimensiones físicas reales. No lo haremos por esta opción. Vamos a hacer clic en Crear. Aquí, amigo mío, tenemos un producto exactamente igual antes donde teníamos nuestras entradas de blog, excepto que este tiene precios y envío. Para ahorrar algo de tiempo, me gustaría que pasaras por una importación, un CSV. Bien. Tengo uno en tus archivos de ejercicios porque si solo estás haciendo tus propias impresiones y serigrafías y las estoy vendiendo por internet. Podrías ponerlos uno por uno. Eso está totalmente bien si estás trabajando con, puedes recordar las siglas para ello, pero algún tipo de control de stock. Puedes traer, puedes exportar un CSV y traerlo. Y voy a hablar de CSVs y un poco porque hay poco más desafiantes que decir, nuestro post de blog, CSV, nota testimonios. Eso es lo que hemos traído, pero lo haremos en un video. Tengo uno listo para irme. Bien, vamos a hacer clic en Importar. Puede tomar un poco de tiempo dependiendo del tamaño de sus bases de datos. Bueno, el CSV es. Ahí vamos. tenemos adelante, bien, así que hemos agregado productos a través del diseñador. Su cliente o cliente puede ir a través del editor. Antes de que puedan hacer eso, necesitamos publicar nuestro sitio web. No hemos hecho nada de eso. Bien, así que voy a cerrar eso. Y ahora ibas a compartirlo con tu editor invitado y el editor lo abriría. ¿Hemos hecho esto bien? Todavía no tengo nada en nuestro sitio. Pero mira, pueden ir al comercio electrónico, bien, y pueden empezar a mirar sus productos. Y al igual que nosotros, pueden agregar un nombre de producto, pero obtienen la versión blanca, nosotros obtenemos la versión dark moody y Webflow. Pero básicamente es lo mismo. Pero lo que podrías notar es que no hay nada en nuestro sitio web. Vamos a eso siguiente. 103. Agregar tu producto de comercio electrónico a una página en Webflow: Hola a ti. Vamos a tomar nuestros productos que actualmente están atrapados dentro de nuestra pestaña de comercio electrónico y agregarlos a su propia página. Vamos a añadir un carrito. Vamos a poder elegir diferentes tamaños para nuestro producto, agregarlos al gato. Hay una ventana emergente de bacalao. Este es un video genial donde llegamos a hacer bastante. En realidad, no hacemos mucho. tiraríamos, hace mucho. Eso es aún mejor, ¿verdad? Recuerda aunque estamos diseñando una plantilla, no las páginas reales en sí, así que están debajo de mis páginas. Pero solo diseñamos esta plantilla de productos. Y sacará todos los listados de nuestros productos de comercio electrónico. Tenemos cuatro de ellos ahí y los sacará a todos y creará esas páginas para nosotros. ¿Adivina qué? Es exactamente como hicimos la publicación del blog cuando hicimos nuestro CMS antes. Entonces solo hay un resumen realmente, veamos el, así que estamos viendo la plantilla. Vamos a construir una página muy rápida. Entonces hagámoslo rápido. Entonces vamos a ir al Comando E o al Control E en una PC. Lo voy a meter en un contenedor. Comando E. Voy a poner en un bloque div. Ese bloque div va a ser solo un falso nav como marcador de posición, recuerda Command o Control Return para agregar una clase a ese diblock. Y esto se va a llamar div nav. Probablemente debería llamarlo sección. Eso está bien, Comando E. Agreguemos una sección debajo de esta, y este va a ser mi producto. Creo que se ha ido dentro de mi contenedor. Nombre, esta sección, voy a llamarlo sección producto. Echemos un vistazo. Terminaste dentro de eso. Pongámoslo debajo y comencemos a agregar nuestras piezas. Un poco insinuamos esto antes. Bien, así que sólo vamos a decidir qué va primero. Lo que voy a hacer es que voy a poner una imagen. Bien, voy a empezar con mi imagen. Empezamos a usar los atajos. Vamos a continuar. Entonces Comando o Control E o una imagen, vamos a conectarlo a. Solo lo sabe porque estamos dentro de nuestra plantilla de producto y la va a obtener de mis imágenes en cuanto al tamaño del campo. Sólo voy a hacer 500 en escritorio porque es demasiado grande. Producto de sección. Vamos Comando o Control E y vamos a meterlo, vamos a ponerlo en una calefacción. Esta calefacción va a estar golpeando una orilla. Vamos a obtenerlo por el nombre de mi producto. Ahora recuerda, puedes decidir cuál estás viendo realmente si quieres, oh, eso está mal, Ese es mi producto feo. Veamos Mongolia todo el tiempo, t, a lo largo de t. Estos no coinciden con solo agarrar t imágenes de Internet, encontrar T nombres. Puede que ni siquiera sean nombres T. Pero de todos modos, veamos agregar el libro de texto. Éste lo va a conseguir para la descripción. Como antes, podemos estar agregando nuestras clases a esto y estilizarlo lo estilizará un poco más tarde cuando sepamos como darle estilo a las cosas. Ahora estamos viendo más la funcionalidad de e-comm. Ahora vamos a agregar nuestro botón Agregar al carrito. Bien, entonces aquí abajo, hay un grupo, ¿de acuerdo? Estos dos tienen el mismo aspecto. Esto es como tu corte general para la página o sitio web. Bien. Se pueden tener diez cosas en él. Esta es la forma de meter cosas ahí dentro. Botón Agregar al carrito. Voy a poner éste debajo. No lo entendí. Haga clic en mantener, arrástralo hacia la derecha. Ahora está en por qué tenemos un tamaño que era algunos de los datos importamos del CSV. No te preocupes, vamos a ver eso. Estoy haciendo algo llamado varianza y un poquito, pero el mío es demasiado ancho, así que voy a hacer un ancho mínimo de 200, que no va a funcionar. Sólo vamos a hacer un ancho de 200 Atrapados. Y estos botones Agregar al carrito tienen algunos poderes especiales. Entonces, si hacen algo ligeramente diferente a lo que estás acostumbrado, repasaremos estos próximos videos y mostraremos algunos de ellos. No sabía que no podías hacer un ancho mínimo sobre él hasta justo entonces normalmente es un contenedor envoltorio y dándole su ancho. Pero bueno, hay algunos poderes especiales y algunas cosas extrañas que pasan con los costos porque están tratando de hacer mucho con estas cosas, tirando de datos, pero eso es lo suficientemente bueno por el momento. Vamos a probar esta cosa. Entonces, cuando degustas el comercio electrónico, a veces puedes probar cosas bajo el modo de vista previa. Puedes pasar y decir, yo estoy Ahí vamos. Tantos tamaños diferentes. A veces, sin embargo, necesitas ir y publicar el sitio, lo contrario, no funciona. Te lo dirá. Y si te encuentras con problemas antes de irte y tratar de encontrar una solución. Podría ser que más que cualquier otra cosa que hayamos hecho, comercio electrónico necesita ser publicado y probado en tu dominio de puesta en escena. Entonces echemos un vistazo. Para que podamos hacer click en esto, podemos faltar con una cantidad. Y para cortar sin embargo, va a decir que no tuviste un corte en esta página. Tenemos que agregar al carrito, pero no hay gato en esta página. Bien, entonces tenemos que agregar realmente el corte. Tenemos que agregar que cualquier página que quieras vender cosas de él también lo hagas en la plantilla aquí. Perfecto. ¿Dónde está? Es esta otra opción aquí. Entonces agregar el auto es como decidir qué vas a hacer, qué vas a comprar. Tiene que ir a algún lado. Va a éste. Y éste de aquí, voy a añadir a mi navegación. Ese es el botón de mi carrito. Necesito que esté a la derecha por el momento solo porque ahí es donde el gato siente que debería ir. Si estás jugando y tienes como decir la navegación desde aquí o desde la plantilla de otra persona, el componente, navbar. Veremos eso un poco más adelante. Esto y cosas raras que pasan con eso necesitan combatirlo. Pero de nuevo, cubriremos las cosas de visión general antes de entrar en algunos de los aspectos más importantes, bien, Ahora debería funcionar vista previa. Quiero dos de mis versiones de cien gramos y voy a decir etiqueta. Mira eso. Tenemos un gato. Todo está hecho por nosotros y se ve un poco bien. Poner a cero, pero eso es cosas que podemos arreglar. Oh, dulce pop up. Todo bien. Bueno, echa un vistazo a algunas de nuestras otras páginas. Ese es el que ponemos y no tiene ese desplegable. Todo bien. Amigo mío, has agregado productos y nosotros los hemos agregado a nuestra página web. Lo siguiente que necesitamos es hacer una gran lista de todos nuestros productos y ponerla en nuestra página de inicio. Eso sin embargo, lo haremos en el siguiente video. 104. Agregar una lista de tus productos a la página de inicio: Bien, así que hemos creado todas nuestras páginas. Lo que queremos hacer es vincularlos desde la página principal y crear una lista como, así así podemos ver todos nuestros productos en una sola página. Hagámoslo, bien, porque no pude hackear mi nav siendo tan aburrido, lo hice menos aburrido. Agregué un poco de textos aquí e hice el color de fondo que está seleccionado. Voy a copiarlo porque necesitamos agregarlo a nuestra página de inicio. En el momento en que aún estamos en nuestros testimonios, debería convertirlo en un símbolo. Años. Sí, tienes toda la razón. Voy a ir a borrarlo y un poquito porque nosotros, voy a mostrarte algo y un poquito. Sé lo que viene, así que es mejor no ser un símbolo. Voy a agregar contenedor. Mi navegación puede entrar. Voy a poner una sección aquí por ahora. Voy a meterlo. Va a ser mi sección para nuestros productos. ¿Necesito nombrarlo? Probablemente no. producto sexual ya existe. Lo hice en el último video. ¿No lo hice? ¿Lista? Ahí vamos. Bien. Para agregar todos nuestros productos a la página lo hemos hecho antes. Sólo tienes que ir a aquí y estás como, cómo lo hacemos antes de mover los testimonios y recordar las entradas del blog en la página principal. ¿Cómo conseguimos todos esos, esa gran lista vieja? Así es. Usa el mismo. Lista Cms. Ve, me veremos como lista de colección. No es diferente. Bien. Dices que tenías ahí. Recuerdo esto. ¿ De dónde viene? Va a venir de mis productos de comercio electrónico. Mira eso. Ahí están los cuatro. Entonces voy a pegar el mío para arriba de esa manera y previsualizar y no pasa nada . ¿ Qué más tenemos que hacer? Necesitamos agregar los diferentes elementos en los que realmente queremos que aparezcan aquí, como hicimos con la página de plantilla del producto, pero también lo hemos hecho antes. Vamos a agregar una imagen. Da click dentro de aquí, tal vez solo agrégalo a uno de ellos. Comando E, imagen. Lo obtengo de los productos y sólo hay una imagen para obtener de. Eso lo conseguimos. Necesito jugar con el tamaño porque acabo de sacar cosas al azar de internet. Pero sabemos recortar imágenes, no lo vamos a hacer ahora mismo. Pero como queremos agregar, agreguemos el nombre del producto. Entonces esto es exactamente lo mismo que hicimos antes en la página de plantilla, puedo conseguirlo en el lugar correcto. Lo siento, voy a recibir este texto. Voy a poner el nombre de esto. Probablemente debería estar pegando, tal vez golpeando cuatro o algo así. Está bien. Se necesita cubo es por el momento. Nuevamente, no vamos a darle estilo. Sólo vamos a agregar un poco más de cuadro de texto. Vamos a sobre los precios aquí. Bueno, podríamos simplemente ir, podríamos simplemente agregar un botón y decir, bien, cuando se hace clic en esto, obtenerlo del producto, en realidad obtener la URL, sí, conéctate a, recuerda esta página, URL, en realidad queremos tomar dos páginas y tal vez haya dos. Ahora hay uno morado porque lo va a obtener de una página de colección. Pero ahora casos la página de comercio electrónico, ¿cuál? Producto actual del que va a sacarlo, sea cual sea ese nombre rápido. ¿Puedes ver el nombre rápido? Y ya se han ido, puede ver que viene de ese botón se va a vincular a la canela dulce. Ese va a vincularse a esto. Mongolia va a enlazar a este botón aquí. Bien, vamos a cambiar esta para ver más. Hagamos un pequeño adelanto. Echemos un pequeño vistazo. Vamos a la manzanilla orgánica, té de hierbas. Vuelves a la página principal y no funciona. Principalmente volver a la página principal. Retrocedamos por el largo camino. Página de inicio, obras neuronales. Tal vez decidas no hacer esto. Sólo voy a apagarlo por el momento. Entonces no voy a mostrar ninguno porque quiero volver a encenderlo. Y digamos que queremos poder comprar desde esta página. Podemos ir a nuestro nuevo elemento handy ed. Vamos a utilizar la opción Agregar al carrito. Y recuerda, tenemos que tener el carrito en la página. Por eso copié y pegué al otro lado. Si no lo tienes, asegúrate de que el gato siga ahí también. Voy a meterlo. puede ver que tiene que ir a algún lugar especial. Y eso aparece cuando me enteré por primera vez que fue como, Whoa, ¿cómo puede no ir en la página de inicio? Solo necesita entrar en la parte correcta de estos elementos de la lista. Si empiezas a peinarlo con dividendos, yo divs, solo ten cuidado de donde aterriza aquí. Bien, así que voy a ir, tuviste que cortar y solo asegúrate de que veas al rojo no le gusta. No son leídos. Bueno, demasiado alto. Excelente. Leer cama. Oh, no va bien. Bien, justo debajo de esto. Bien. Tenemos todos nuestros productos listados en la página de inicio. ¿Qué más puedes hacer? Las listas de colección? A lo mejor lo hicimos antes. Si hacemos clic en él, podemos ir a ajustes y podemos filtrarlo. Bien, entonces aquí es donde llego a decidir. A lo mejor quiero, quiero tres, pero ya se está mostrando antes, ¿cómo lo reduzco a tres? Así es. Limita los artículos solo a tres. Por favor. Vuelva a hacer clic en él y hago clic en la lista. Ahora, podemos ordenarlo también. A lo mejor buscamos por orden aleatoria guardar, podemos filtrar. Bien, entonces agreguemos un filtro, el nombre es igual. Ahora aquí dentro, bien, hay algunas otras cosas. Lo que podríamos hacer es movernos con ese interruptor que agregamos antes. Entonces podríamos decidir entrar en nuestra colección, que en este caso se trata de una colección de comercio electrónico. Entonces está aquí, tengo productos. Y veamos agregar una opción que diga, ¿me aparece uno de estos pequeños interruptores de palanca? Y lo único es que no se lo hacemos a los propios productos reales. Lo hacemos al producto camino de regreso aquí. ¿Bien? Entonces decimos el dentado, no el artículo real. Y queremos agregar un campo para estos chicos. Y vamos a decir, agreguemos un nuevo campo. Va a ser un interruptor. Y este interruptor va a ser etiquetado artículos rebajados o artículos destacados. Y voy a guardarlo, guardar la colección. Y aquí ahora puedo pasar y decir en realidad, quién tiene una venta en este sí. Y no te olvides de guardar los cambios. Y tal vez té de jazmín, lo mejor este de aquí tiene una rebaja también. Guárdalo. Ahora puedo volver a mi página de inicio usando nuestras dulces habilidades de antes. Podemos decir, en realidad ya no sé cómo hacer esto. Página principal, puedo dar click en la lista de colecciones del navegador. Puedo decir en realidad solo muéstrame el filtro que tiene o es que tiene un interruptor de venta encendido a solo esos para parecer genio? Bueno, es, estoy contento conmigo mismo. Espero que también seas feliz contigo mismo. Estamos aprendiendo nuevas cosas de comercio electrónico, pero aprovechando algunos de los primeros conocimientos, haciendo todo esto más fácil, probablemente solo necesitamos dos. Ahora, aquí vamos. Eso es agregar listas a nuestra página de inicio o cualquier página que lleguemos a reutilizar esa lista de colección CMS, Bien, En el siguiente video. 105. Configuración de pago en Webflow: Bienvenida de nuevo. Tenemos nuestros productos en nuestras páginas. Tenemos un carrito es solo algunos otros pasos antes de que podamos comenzar a tomar pagos o al menos tomar pedidos para nuestro t. déjame mostrarte cuáles son. La mejor manera va a ser en realidad solo publicar el sitio e ir y verificar hasta el momento que podamos conseguir. Entonces voy a revisar el sitio web publicado, no el de prueba. Bien. Y voy a decir Agregar al carrito y va a decir, no puedes, necesitas elegir uno de estos. Okey-dokey consiguió una tarjeta, agregarla a ella, o a quién vamos a llegar allí. Vamos a seguir haciendo el check out y check out como discapacitados. ¿Qué significa eso? Déjame mostrarte que vayas y habilites el sitio. No te va a dejar enseguida. Te va a decir, vamos a nuestro, En realidad es ir a la configuración de nuestro proyecto. Bien, y vamos a ir al comercio electrónico y va a decir, Oye, antes de que puedas ir más lejos, tienes que decirnos tus cosas básicas. Bien. Es principalmente su dirección comercial. Yo. Estoy trabajando en Euros, que no puedes escribir. Bien. Entonces E por euros. Voy a poner mi nombre comercial y dirección. Miras hacia otro lado. Bien, esa es mi dirección borrosa. Continuar. Bien, así que ahora tenemos algunas características adicionales por aquí. Y el que queremos, casi podemos hacerlo es recordar que necesitamos habilitar nuestra tienda. Así que vamos y vamos general. Vayamos a la caja y vamos a pagar aceitoso. Quién llegó a actualizar nuestro hosting. Ya hemos hablado de esto antes. Voy a ir a hacer el mío ahora. Aún puedes hacer mucho de este curso o la diversidad de estos videos sin actualizar el anfitrión. Pero voy a hacer el mío para poder ir más allá justo atrás de la actualización y ahora recoger mi página de inicio, mis colecciones desaparecidas. ¿O lo es? Lo primero que siempre intento es restablecer la página, recargar pieza. No se encontraron artículos. Esto no es bueno. Tú comiste, entonces yo iré a entenderlo y te haré saber lo que pasó. Ya lo descubrí. Bien. Eran mis productos en mi e-commerce bajo productos, todos siguen siendo borradores, así que bueno, consiguieron borradores cambiados, fueron publicados. Bien. Entonces lo que puedo hacer es que puedo ir individualmente y decir No eres un borrador de Estados Unidos escenificado para publicar o ir directo hacia arriba, publicarlo. La diferencia entre estos dos es esto lo pondrá en escena la próxima vez que llegue a todo el sitio web que se está publicando, irá a lo largo para el paseo. Si hubiera publicado ahora, solo saldrá directo ahora mismo y no esperará a que publique todo el sitio. Pero los voy a hacer todos juntos. Voy a decir seleccionarlos a todos. Gracias. Por aquí voy a decir etapa de publicación completa. Sí, por favor. Bueno, supongo que eso fue todo. Bueno. En realidad no lo comprobé. Sí. Están listos para irse. Hemos actualizado nuestro hosting, tenemos un corte en nuestra página. Hemos agregado nuestra dirección comercial. Vamos a encenderlo en YouTube. Tu checkout va a estar habilitado. Va a ser habilitado. Es necesario agregar un proveedor de pagos. Así que vamos a hacer clic en eso. Puedes ir aquí o allá, dar clic en ese botón. Necesitas conectar uno de estos dos. Ahora, no quiero conectar mi 12 aquí porque mi negocio no está realmente conectado a esta tienda T. No quiero que las transacciones entren en él en este momento, pero eso es todo lo que escuchamos como tu pasarela de pago y podrás encender tu botón. Bien, en lugar de tomar pagos listos para funcionar. Ahora con estos pagos, no voy a cubrir cómo sentarme Stripe y PayPal. Stripe es un procesamiento de tarjetas de crédito súper común. También puedes usar PayPal. Puedes usar ambos. Habrá limitaciones. Bien. Entonces, cuando lo estés configurando, solo verifica cuáles son antes de ir a los asentamientos del cliente potencialmente porque habrá lo que realmente quieres hacer es que quieras que tu cliente establezca el Stripe y PayPal, no tú porque ellos son los responsables de los impuestos y el pago de las tasas. Además, ambos requerirán alguna identificación. Así que como cuando configuro mi Stripe y PayPal, quieren saber tus datos en uno de tus pasaportes o tus vestidos. Ponen cosas, agregarás una cuenta bancaria y ellos verificarán esa cuenta bancaria. Trabajarán razonablemente rápido. Pero habrá algunas limitaciones con cuentas nuevas sobre cuánto puedes procesar y cuánto puedes transferir, ese tipo de cosas. Pero sí, eso es todo. Agregar proveedor de pago, dejar de hacer, dejó de construir T store empire. Bien, eso es todo para este video. Pasemos al siguiente. 106. ¿Qué sucede después de una compra en una tienda de Webflow: Entonces alguien ha hecho un pedido en tu sitio web. ¿Cómo se le notifica? ¿Qué pasa después? Bueno, pasan dos cosas. Sale un correo electrónico y luego hay pedidos que puedes ir a revisar. Veamos primero los correos electrónicos. Si vas a este pequeño engrane aquí, hay una opción que dice correo electrónico. Puedes agregar branding a ese correo electrónico. Y en la parte inferior aquí están los diferentes correos electrónicos que puedes ver y cambiar. Ir pedido confirmado. Bien. Y puedes ver aquí aquí hay una plantilla de prueba de la misma. Tengo uno de mis productos que tiene un nombre equivocado. Necesito ir y arreglar. Pero esto es lo que tú, o si es tu tienda o tu cliente recibe el que recibe el correo electrónico, puedes probarlo abajo abajo aquí hay un correo electrónico de prueba. Puedes enviártelo a ti mismo. Se puede ver que es parcialmente personalizable. Y hay todo tipo de etapas diferentes en ese proceso de correo electrónico de cuándo se recibe, cuándo se envía, ¿quién recibe el correo electrónico? Bien. Eso se define aquí bajo general. No, no lo es. Está bajo el comercio electrónico. General. Demasiados generales. Y puedes ver aquí que es una dirección de correo electrónico borrosa. Entonces irá, para que tú y el cliente reciban correos electrónicos. Pero sería útil tener un lugar central bajo el comercio electrónico bajo órdenes que los enumeraran a todos. Y ahí está yo no tenía ningún pedido por el momento, pero ahí es donde puedes ir a verlos en el diseñador te dio dueño de una tienda. Podrías hacerlo a través del diseñador. Pero si eres el cliente, podrías estar mirándolo por el editor. Recuerde, esta es la opinión que su cliente, cliente, miembro del personal ve y bajo órdenes será la lista de todos los pedidos. Bien, así que eso es lo pasa después de que alguien haga una compra. apaga el correo electrónico, editó esta lista de pedidos. 107. Personalización de la configuración de carrito en Webflow: Hola a todos. En este video, vamos a ver este botón del carrito y el elemento add to cart que agregamos anteriormente y te mostraremos todos los secretos incorporados en él. Y te voy a mostrar cómo meterte dentro de ellos para que puedas estilizarlos. Quedémonos primero con este carrito. Es especial. ¿Por qué es especial? Porque se pone su propio pequeño icono por aquí en el navegador. Y dentro de aquí, hay un par de cosas. Ahí está el botón de corte. Digamos que queremos darle estilo. Acabamos de empezar como si hubiéramos hecho otra cosa. Decimos corte de botón. Nosotros decimos que vas a tener todas las esquinas redondeadas y tal vez persiana, agradable o no agradable, pero entiendes la idea. Puedes darle estilo a esa cosa con bastante facilidad. Pero, ¿cómo encuentro en estilo ese pop up que viste al principio? Esa es esta cosa de aquí. Esa es la envoltura cortada. Y estás como, guau, normalmente y haces clic en algo, ¿puedes ver que lo resalta? Este no resalta nada, así que está todo ahí. Bien. Todas esas cosas están ahí dentro las que puedes ir y hacer eso. ¿Cómo lo haces mostrar? Básicamente haga clic en el carrito y vamos a buscar en la configuración. Así que vamos a ver el pequeño diente aquí, no los estilos, el diente, y viene con algunas cosas especiales. Aquí está el material de corte espacial. Así que abre el carro, Eso es lo primero. Y por defecto está en un modal, modal emergente. Si acabas de tener un estilete, ya puedes ir y decir Tu libro de texto, vamos a agregar un estilo. Así que volvamos a S para estilos, producto de texto. Y voy a escoger una fuente y el tamaño. Y voy a escoger un peso. Mi caso, va a ser sin unidades y ese va a ser uno de lo que sea que sea. A lo mejor un poco más. Sólo va a ser 1.3 de esos 20 pixeles. Sí, deberíamos estar usando habitaciones, cama abajo. Vamos rápido. Sí. Bien. Para que podamos meternos en él para darle estilo. También tiene algunas otras opciones. Así que de nuevo, volvamos a nuestros ajustes. Se puede ver el tipo de tarjeta. Podemos hacer uno que aparezca por la izquierda, uno que aparezca hacia la derecha, o uno que realmente se salga del carrito. Déjame hacer una demostración de esa. Así que vamos abrirlo y dar clic en él. ¿Ves esa? Bien, lo que más hace es tenerlo seleccionado en los ajustes. Ábrela. Ahora bien, estos tienen algunos ajustes básicos. Estos tres primeros, se puede ver que es todo lo mismo. Este último tiene algunos otros como puedes alinearlo de izquierda o derecha al botón dependiendo de dónde esté, cómo abrirlo. ¿Tienes que hacer clic en él o simplemente puedes cursor por encima de él cuando salga? Se puede jugar con la flexibilización y esta opción aquí, todos tienen eso dice, ¿se abre cuando un producto es Edit? Hacer algunas degustaciones de usuarios. Sé que en muchos sitios que a veces simplemente soy como dejar abrirme y tratar de agregarle cosas. Y sigue abriéndose cuando vas a encontrar ese botón de continuar comprando a un poco probando para ver qué funciona para ti y tu clientela. Y aquí abajo, se previsualizará cuántos son un netlist. En realidad no es hacerlo, es solo previsualizar cuántos. Solo tengo cuatro míos, así que solo se muestra antes. Podrías encenderlo solo para ver cómo se ve. Mucho más que el título de su producto, poner aquí un gran hit ticks podría no ser tan útil cuando nos perdimos. Entonces la otra cosa mientras estamos aquí es que va a haber momentos en los que, ¿cómo se ve cuando está vacío? Bien, puedes pasar por aquí y cambiar el texto. Bien, también puedes ir y agregarle una clase y darle estilo. Lo mismo con ERA. Ya has hecho el fondo aquí. Esto no está ahí por defecto, ¿lo ves? Se puede ir y estilo que el color de la fuente. Bien, apaguemos la tarjeta. Ahora el botón Agregar al carrito aquí abajo también es un poco especial, tratando de encontrarlo. Vamos a cerrar todo eso. Y encontremos el add to cart que saqué del panel de elementos. Entonces esta persona de aquí, esta de aquí tiene lo mismo en escenarios. Tienes algunas cosas. ¿Quieres que la cantidad aparezca ahí? A lo mejor no. mejor nunca nadie escoge más de uno. Como si solo hubiera algunos que no puedo pensar en uno en este momento, pero ¿quieres tres masajes de espalda? ¿Tú no? Sólo el uno. Bien. Entonces puede que no tenga sentido que no esté seguro de si eso es, probablemente podrías pensar casos de uso de postores para eso. Bien. Agregar al carrito. ¿Quieres mostrarte que no solo son directos a comprar ahora, mejor solo estás vendiendo una cosa? No hay como cortar para agregar. Sólo quiero ir directo a gustar Sí, esto es lo único que nadie compra más que una de tus cosas. A lo mejor es Agregar al carrito y saber a estas alturas, a diferencia del carrito, puedes ir y diseñar el K agotado y las opciones de error. Es como obligarlos a aparecer para que puedas ir a instalarlos. Otra página te preguntarás estilo ruta al auto, que es algo así como en cualquier página en la que lo pongas. Lo mismo con el add to cart. Hay debajo de las páginas. Lo miramos hace un rato. Ahí están estas páginas de pago. Simplemente entra en ellos, instálalos como quieras. Ahora con estas páginas de pago y el carrito y todo, sigue siguiendo ese caso en cascada CSS. Cualquier estilo en realidad antes de eso, el formulario de pago, esa es la única cosa es si no tienes nada seleccionado y aquí se vuelve un poco confuso como bien, ¿cómo lo hago? ¿Hay algo que pueda hacer? Si haces clic en el formulario real en sí por defecto, es un poco clic en otra cosa Soy Buddy es clic en el formulario de pago, poco como el carrito y el agregar al carrito que hicimos por aquí. Y bajo ajustes puedes hacer cosas como que no hay una gran cantidad, así que puedes hacer algo de ello. Gran parte está controlada por Webflow para asegurarse de que todo funcione. Bien, entonces no hay, no hay razón para el envío. Entonces, un poco, lo apaga. Ocultemos la dirección de facturación. Y como antes puedes darle estilo a cómo se ve el mensaje de error junto con solo la página normal. Ahora volvamos a mi estilo despotricar sobre esto tomando aún parte de la cascada. Bien, para que podamos darle estilo a este de aquí y conseguir que este vea genial con estilos individuales, eso está bien. Pero digamos por el momento todo sigue usando ARIO. Entonces lo que voy a hacer es volver a mi cuerpo, pesar de que estoy en esta página de pago y debo estilos, voy a entrar aquí. Voy a decir que todas las etiquetas corporales van a ser algo que puedas ver. Se puede ver el cambio más. Así que haz tus cambios de alto nivel cuando estés diseñando el resto del sitio. Y entonces puedes entrar y hacer pequeños cambios aquí. Bien, eso es personalizar tu carrito. Estás Agregar al carrito y poder darle estilo a todos ellos, incluida esta página de pago. Bien, eso es. Te veré en el siguiente video. 108. Cómo agregar variantes en el producto de comercio electrónico Webflow: Tenemos que hablar de variables. Las variables son estas cosas. Hay un pequeño desplegable. Quiero té de jazmín, los 13€, pero ¿cuál es el 250? Oh, puedo ahorrar grandes dólares y es un precio diferente. Entonces nuestras variables es el tamaño del producto. El tuyo puede ser el tamaño de la ropa, pequeño, mediano, grande, puede ser de diferentes colores, puede ser combinaciones de colores y tallas. Las variables de frío. Déjame mostrarte dónde están en Webflow. Bien, entonces recordarás que en realidad ya tenemos alguna varianza. Vinieron del CSV que te di. Bien, entonces lo que voy a hacer es ir y hacer clic en el Voy a ir, encenderlos a todos para que podamos verlos. Entonces voy a apagar el límite que podamos ver a esa persona. Bien, El viejo té verde Jazmín no tiene ninguna varianza. Para obtener la varianza, vamos al producto que es una E comas consiguió un producto. Y veamos esa de Jasmine. Este es el que agregamos manualmente, bien, y luego abajo abajo ahí debajo de Opciones, extrañamente, debería ser covarianza. Entonces agreguemos un conjunto de opciones. Esto podría ser color, tallas de peso, sabores, sea lo que sea, voy a estar haciendo el tamaño. Vamos a probarlo con tamaño o peso igual al tamaño. Y vamos a tener cuántas opciones voy a tener. Voy a poder venderlo en 100 g y te golpean Enter o tab K y 150 g también. Lo siento, América, no sé qué es eso. Son gramos. Eso va a hacer parece apropiado. Entonces echemos un vistazo a vamos a golpear Hecho. Lo habías hecho primero, de lo contrario, no puedes llegar a este siguiente bit, o al menos al que lo cambies. ¿De dónde vienen estos? Estás como, yo no hice estos. Al agregar estas opciones. Dice, bien, tienes estos, ya sabes, tienes algo y hay dos versiones de ellos. Si los sigo sumando aquí arriba, si tengo como una versión KG y le pegué enter y lo había hecho. Verás abajo abajo aquí tenemos una opción KG. Voy a doblarlo y conseguimos esto, por favor. No hagas eso. Ahí. ¿Existe la opción de deshacer? No creo que la haya. O deshacer. Deshacer, deshacer, deshacer. Oh hombre. Sabes, Ross, creo que estoy haciendo creo que estoy deshaciendo, pero no aquí porque esto sigue abierto. Se deshace aquí afuera. Estos están en borradores que realmente hicieron ese trabajo. Uid, voy a arreglar un segundo. No vayas a ningún lado. Gracias por no irse. Así que estoy de vuelta. Acabo de volver a pegarlo todo. Y estábamos sí. Bien. Entonces tenemos estos n Recuerda cuando agregué uno, ¿cómo me deshice de él? Accidentalmente lo hice y no leyeron la notificación porque sé lo que estoy haciendo. Lo que haces es que no está por aquí o allá, o allá, está aquí arriba. Dices, puedes, eliminas esta opción. Entonces eso es lo que quería agregar esa opción de un kilo. La otra cosa que necesito cambiar es el cambio de tamaño, pero el precio va a cambiar aquí. Entonces voy a entrar y voy a decir, vamos a lo que estaba escrito en tus notas. Si quieres un precio maquillado. Entonces escribe lo que quieras. Comparar a precio es bastante interesante. Echemos un pequeño vistazo. Vamos a cambiar eso. Entonces el Compara a precio como este de aquí. Es esa luz, es su precio el que tiene una línea a través de él, como normalmente antes de la venta es este precio, pero puedes conseguirlo por este precio. Yo he calculado, eso es lo que costaría si lo compraras en los lotes de cien gramos. Así que estás ahorrando un montón de 14 dólares. Ahí es donde mis negocios de té no toman lo suficiente. Bien. Entonces las tapas entran y la cierran. Bien. Precio mis cantidades, tengo diez de eso y sólo una de esas. Vamos a guardarlo y asegurarnos de que esté publicado. Porque está escenificada, necesito ir a publicarla. Ahora no estoy seguro si ya te he mostrado esto porque tuve que volver a filmar un poco. Así que siempre voy cerca de esa, cierro esa. Pero en realidad puedes ir y cerrar éste y todos colapsan. Bien, voy a publicar el sitio. ¿Puedo revisar mi sitio como si pudiera hacerlo aquí? Bien. En modo de vista previa. Bien. Pero, ¿eso habría sido publicado? Funciona. Tengo mi desplegable. Tenemos una variable sobre el precio no cambia, lo que me molesta. Entonces en el sitio principal real que refresco que no puedo recordar. No lo refresqué para ver las actualizaciones y ahora debería tener 100 gramos. Oh, mira, cambia. Cosas tan simples. Bien, entonces esa es una variable. Puedes volverte loco con variables. Puedes tener diferentes colores y diferentes tamaños. No me pondría demasiado en el meollo, pero puedes tener todo tipo de combinaciones diferentes y diferentes prácticas. También puedes cambiar la imagen. Hagámoslo juntos. Así que volvamos a entrar aquí. Volvamos a entrar en mi producto. Y para ese tamaño diferente, guardado como un color diferente. Eso tiene sentido, ¿verdad? Tienes color diferente. Si vendes calzoncillos en estos verdes y rojos y azules, cambiarías la imagen por los diferentes colores. Aquí dentro. Tengo diferentes blancos, así que solo hice una pequeña imagen para nosotros. Bien, entonces estoy en el 200 gram uno y se puede ver que esta es la imagen variable. Voy a reemplazarlo. Tengo uno en tus notas en tus archivos de ejercicios. Apenas llegó a 50 g ahorra dólares, pesar de que aquí son euros. Y vamos a cerrarlo. La imagen ha funcionado. Fresco. Es una imagen muy grande para lo que la estoy usando. Publiquemos. Se pone directo a publicar desde aquí. Una vez que se publica, una vez que también puedes publicarlo directamente desde allí, la primera vez que necesitas publicar todo el sitio. Ahora bien, si actualizo el sitio, deberíamos poder cambiar las imágenes, cambiar el precio, y ellos cambian eso. Bien, así es como agregar una variable, busca las opciones en tu producto y no lo borres, o al menos no hagas clic en el calor no puedes deshacer esto, léelo primero n. Bien, eso es todo. Al siguiente video. 109. Agregar categorías para productos Colección CMS con filtros: Hola. En esta vamos a sumar categorías. En mi caso van a ser regiones donde se puede obtener t de la India y China. Y voy a agregar mis productos a esas categorías para que podamos filtrar por ellos y buscar por ellos, agruparlos juntos. Podrías estar haciéndolo para ropa de hombre, ropa de mujer, ropa de niños, esas podrían ser buenas categorías. Presupuesto, prima podrían ser categorías demasiado buenas. Hogar donde el hardware. Vas a tener que pensar en tus propias categorías. Una vez que hayamos creado una categoría, lo cual es bastante fácil, realidad vamos a ir luego y en nuestras páginas de productos, poder decir, muéstrame toda la T que está relacionada con esta T por su gerente de categoría y esto es ropa de hombre. No quieres a tus hijos, tenemos cosas para aparecer aquí. Quieres aunque categoría relacionada de productos. Bien, vamos a saltar. Hagamos algunas categorías. Categorías, no tienes que tenerlas, pero es una buena manera de separar tus productos. En mi caso, voy a separar los productos en regiones en las que puedes comprar el té, India o Sri Lanka o Japón donde quieras sacar tus dientes, puedes como que escojas esa categoría. Pero para ti puede ser que haya un medio y una sección de mujeres y niños podría ser una prima y una opción de presupuesto. Conocerás tu industria y qué tipo de categorías se pueden agrupar. Para que lo puedas hacer de dos maneras. Puedes ir a lo mismo que aquí e ir a categorías. O puedes hacerlo a través de los productos. Hagamos categorías desde la pestaña categorías. Tiene una nueva categoría. Mi primera categoría va a ser, digamos China. Bien, voy a crear esa. En realidad de Mindanao. En realidad puedes empezar a agregarlos. Digamos que el mongol puede ser de China. Vayamos de Kevin Mile. Bien, y voy a agregar té negro dulce de canela también. Bien, voy a ahorrar, Esa es una forma de agregar categorías. También lo puedes hacer por el producto. Digamos té de jazmín aquí, puedes ver categorías. Se puede escoger de uno existente que ya hicimos. O por aquí, puedes agregar, básicamente es la misma interfaz, bien, Esta va a ser India. Y verás tu URL. También los romperá en como pequeñas subcarpetas. Y puedes ver que es, me da la opción de agregar estos otros al mismo tiempo. Yo sólo voy a crear esa. Puede ser para más de una categoría. Entonces podrías decidir que esta es de la India y China. Es complicado de hacer. Pero echemos un vistazo a estos otros. Asegúrate de guardar los cambios. Mongolia va a ser de la India. Lo siento, no pensé que esto pasara por todo el camino. Y asegúrate de guardar los cambios. Dan, lee el texto emergente y el último está bien, así que ese tiene uno, ese se ha ido. Ese se ha ido. Sólo estoy buscando aquí. Y ese va, la mayoría de ellos son Vamos a poner la mayoría de ellos de la India. Guardar. Qué puedes hacer con él ahora, vamos a cerrarlo. Podrías, en tu página de inicio, algún filtrado, te puedes ver, bueno, ya lo hemos hecho antes. O es restablecer la página, volveremos aquí. Echemos un vistazo a nuestros productos. Están todos listos para irse. Algo anda mal, está de vuelta. De todos modos no hice nada, ignora eso. Entonces digamos, vamos a entrar aquí, vamos a agarrar nuestra lista de colecciones y ya podemos empezar a filtrar. Podemos decir realmente en esta página aquí, y tenemos, en realidad pasemos a ofs limitados. Solo tenemos cuatro, pero digamos que solo quiero mostrar a los de esta página que la categoría que contiene China solo debería tener dos. Este, creo que uno de ellos tiene dos aplicados. India y China, también se pone muy útil cuando estás en una página. Entonces digamos eso. Vayamos a nuestra plantilla de producto. Sí. Entonces estamos viendo al mongol. No puedo recordar quién se postuló para ver perdido mi camino. Eso es bueno. Jazmín TK. Y lo que podemos hacer es agregar esa misma lista. Entonces voy a acelerar esto. Bien, solo agregó un contenedor y luego edita la lista que hemos usado antes. Y voy a conectarlo a las categorías, pero voy a conectarlo a los productos. Porque lo que quiero hacer es agregar estos. Voy a hacer dos por dos. Voy a acelerar de nuevo y agregar algunas características. Bien, y solo los estoy conectando con el nombre de los productos. Además de un trono, un modo de velocidad de imagen. Bien, entonces en esta página ahora y quiero algo así como si estás en esto y estás en una categoría, entonces estás en la moda masculina. Quiero ver otra moda masculina, no moda infantil potencialmente. El problema es que puedo volver a ver el mismo. Echemos un vistazo. Repasemos mi lista. Y echemos un vistazo a los filtros. Y digamos antes que nada, sólo quiero mostrar las categorías que contienen. Esa es una fácil. ¿Ves este pequeño relámpago? Se podría decir, como que recuerdo cuál tiene que decir alguna categoría de esta categoría actual. Sabe en qué categoría se encuentra. Ahora bien, ¿por qué siguen mostrando todos? Creo que el té de jazmín está en ambas categorías que está lleno. Por lo que está mostrando todos los listados que están en esta categoría es y porque en ambos, todos ellos. Echemos un vistazo. Dame un poco enturbiado. Así que el té verde está tanto en China como en la India. Entonces quiere decir que los está mostrando a todos. Entonces echemos un vistazo. ¿Quién es esta la única India? Pongamos este solo a China. Sólo para que tú también a China. Entonces cambia y a, a la India. Así que hazlo un poco más fácil. Usted guarda los cambios. Y tienes tanto a la India. Bonito. Bien, ojalá mágicamente cuando volvamos, sólo va a mostrar dos cosas. Ahí vamos. Pero si voy a uno de los otros, Mongolia, tú vas, muestra al par mongol. Pero lo que notarás es que está mostrando éste dos veces, que no es lo que quiero filtrarlo un poco más. Voy a dar click en la lista ahora. Apenas estamos empezando a ir por el agujero del gusano de como la increíble amplitud que tiene el flujo de trabajo cuando se trata de este comercio electrónico, estos cursos esenciales como si, se apodera de todo. No voy a entrar en demasiados detalles, pero supongo que esto es genial porque te da una sensación de como la idea de muchos. Bien, entonces voy a agregar un filtro que no es el nombre, el producto. Uno complicado de recordar, como el producto es el producto actual. No, quiero no es el producto actual. Entonces quiero mostrarte esta lista. Quiere filtrar los productos que no son el producto actual. Yo puedo hacer eso y deshacerme de este otro que dice Compartir a las categorías. Para que pueda mostrarme los que no son este producto. ¿Eso tiene sentido? Tipo de. Es éste de aquí. Nombre de Ed. Hay algunas cosas por las que pasar, pero he usado este producto uno aquí, bien, y dije No este producto. Súper genial, súper potente. Volver a mi lista. Tres, por favor. Encantadora. Bien, eso es todo para categorías en Webflow. 110. Importar un CSV al comercio electrónico de productos de Webflow: Hola a todos. Hablemos CSVs, hojas de cálculo, documentos excel. Oh, qué diversión tengo en la tienda ver en este video cuando se trata de productos. Entonces los productos de comercio electrónico, ponerlos uno por uno está bien para algunos trabajos y otros trabajos. Obviamente no es práctico, sobre todo si estás vendiendo muchas cosas. Probablemente ya tengas algún tipo de software que administre tu inventario, bien, y lo que necesitas hacer es exportar un CSV. No fue solo importarlo fácilmente. Como recordar cuando hicimos nuestras colecciones, podríamos simplemente como agarrar el viejo CSV y simplemente se portaría un poco y diría que este pertenece ahí, este pertenece aquí. Es un poco más complicados. Ahora no es el más experto en esto, así que podrías encontrar mejores formas de hacerlo. Yo solo sé que cuando lo estaba haciendo, tuve problemas cuando estaba como, sabes qué, probablemente deberían estar metidos en esos problemas y mis soluciones. La mejor manera de hacerlo es cuando lo haces voy a importar un CSV, el producto puedes verlo dice asegurar que tus productos se importen correctamente usando nuestra plantilla CSV en línea. Entonces solo descarga eso. Esa es la mejor manera porque verás que todos los títulos te dan un poco una especie de plantilla. Tal vez tengas que reorganizar tu información. Es posible que necesites ayuda de como una persona de tabla pivote de hoja de cálculo maestra. Tengo un curso sobre Excel, que podría no ser adecuado para ti, pero de todas formas, así plantilla CSV descarga eso y eso es lo que hice. Te muestro la plantilla que tengo. He abierto el mío en números, que es la versión para Mac de Adobe Excel. Básicamente necesitas seguir estos títulos junto con top aquí. Bien, así que solo asegúrate de que esos coincidan y se importará bien aunque los dejes en blanco. Ahora con este de aquí, voy a mostrarles algo importante. Entonces estos dos nombres tienen que ser este. Oh, en realidad vamos a describir esto para que veas que tengo dos de lo mismo. ¿Por qué son dos de lo mismo? Porque en realidad las variantes a menudo en el control de stock tienen, entonces ese es mi ¿dónde está? Tengo mis 100 g y mis 200 g. Bien. ¿Cuál estamos haciendo? Estamos haciendo manzanilla. Bien, entonces en realidad hay dos productos diferentes, aunque tengan el mismo nombre, los diferentes tamaños significan que tienen Diferente, digamos números sesgados, similares pero diferentes. Entonces terminas teniendo dos partes aquí. Estaba pasando años tratando de averiguar cómo ponerlos a ambos en la misma línea. En realidad son solo dos líneas separadas. Bien, Lo otro interesante fue, obviamente puedes decidir si, recuerda que miramos la descarga digital versus producto. Puedes decidir a dónde va, dónde se pone como producto. Esta es la descripción de mi producto justo actualmente Loren Ipsum, no tenía categorías para esta etapa. Puedes ponerlos aquí. Acabamos de escribir manualmente e imágenes. Las imágenes pueden ser divertidas como al principio del curso, acabamos de importarlas y te darás cuenta que en esta que llegó automáticamente. Entonces, ¿cómo sucedió eso? Necesitas la ruta raíz o la URL completa de la imagen. Ahora las páginas en pero la imagen real en sí. Te voy a mostrar cómo lo hice. Tengo el mío de Unsplash y te voy a mostrar, bien, digamos que quieres que esta imagen sea parte de ella, ¿de acuerdo? Bien, este me gusta. Entonces haces clic en él. ¿Bien? Tú, lo que me gusta hacer es hacer clic derecho él y hay una opción que dice copiar dirección de imagen. Ahora en PC va a ser algo similar. Básicamente, no quieres copiar la página, pero quieres copiar la URL para esto, puede que tengas que buscar en Google cómo hacerlo dependiendo de tu navegador y yo la he copiado. Y básicamente todo lo que es es ver esto cuando lo pego, es la URL completa. Es un poco desordenado, bien, para esa imagen, y debería cargarse solo sin todas las cosas que contiene. Si estás tratando con un producto en tu quizás tu propia base de datos, podría haber una manera de llegar a él. Tendrás que consultar con quien ejecute la base de datos si hay un enlace que fluiría puede llegar a, si estás en la misma red, podría funcionar. De todas formas. Así es como funciona de esta manera. Puede que tengas que simplemente poner tus productos en una unidad pública para que puedas agarrarlos. Y aquí adentro, ¿dónde está? Sí, sólo los pegué. Cualquier otra cosa para pasar por diferentes precios, diferentes números sesgados. ¿Requiere envío? ¿Cierto? Podrías tener tu virión realzado de blanco ahí dentro. Ahí están las opciones de dimensionamiento de descargas digitales y eso es todo. Se puede tener más de uno. Solo tengo opciones de tallado. Lo grande es mirarlo ya que se ven todos iguales. A lo mejor soy solo yo, pero opción uno, opción dos, opción uno, opción dos valores o estos juntos. Estos son juntos. Entonces podría ser que estas sean las tallas y luego los colores correspondientes con los que vas a terminar bastantes. Pero si has tratado con números de SKU y cosas de productos antes, sabes que en realidad hay cada unidad tiene su propio número de sesgo y hay mucho. Ojalá puedas conseguir tu software de inventario para platicar con Webflow, echa un vistazo a cómo se llama y ver si alguien más ha hecho algo. A lo mejor hay una integración, a lo mejor hay plug-in para ello. Y si es un rompedor, ponte en contacto con Webflow y mira si tienen una solución que otras personas podrían haber tenido. Realmente quieren dar la bienvenida al comercio electrónico a este sitio. Buen negocio para ellos. Y el diseñador slash CMS slash e-commerce lado es realmente bueno para nosotros. Entonces ojalá puedas hacerlo realidad. Pero de todos modos, solo quería avisarles sobre lo que he hecho con esos CMS y por qué lo trabajaron y por qué funciona el de la plantilla y por qué funciona el CSV en los archivos de ejercicio funcionan. Pero tal vez quieras no es descargar el preexistente y usarlo como guía. Bien, eso es. Csv, bondad sobre menos hojas de cálculo, por favor. 111. Flota y por qué el botón de carrito no va a ir en la Nav en Webflow: Hola a todos. Este video, vamos a poner el botón del carrito en la navegación y estás como, Eso no parece tan duro. No lo es, pero lo es, hay algunos ingredientes secretos dentro de un algodón es algún ingrediente secreto dentro de un nav que hacen que ambos no quieran jugar juntos. Además quiero presentarles algo llamado flotador. Y en general, más para mirar algunas de estas cosas como Soluciones de Fondos que se encuentran, no cosas que están rotas, nunca se pueden arreglar. Mi video de psicología de diseño web esté en uno con los problemas. Bien, así que antes miramos editar el carrito. Podemos simplemente vomitarlo en nuestro realmente llano ahora que hicimos y dije No lo pongas en el nav, eso es de los componentes. Averigüemos por qué ahora, quiero mostrarte un par de cosas sobre algunos de los componentes prefabricados, algunas ideas sobre eso, y mostrarte que muchas cosas aquí y Webflow es realmente fácil. Sólo tienes que ponerlo en marcha. Y luego hay un par de cosas que requieren un poco de resolución de problemas y no es que seas malo en, es solo parte del proceso. No todo el tiempo encontrándote vas a Xin en la resolución de problemas. Bien, entonces vamos a agregar ese componente. Así que vamos a ir y, y los elementos o componentes son cosas prefabricadas es la barra de navegación, nos gusta esto. ¿Recuerdas por qué nos gustó? Porque hecho eso es, es porque cuando me pongo al móvil, cambia estos también, que tiene algunos poderes secretos. Esos poderes secretos de aquí, porque abajo. Entonces la barra de nav tiene un ícono especial. Tiene un contenedor en él, tiene marca. Tiene algo que se llama el menú de navegación, que es esta cosa de aquí. Y luego tiene este botón de menú, que no podemos ver. Esa es la parte secreta. Es algo que está configurado para mostrar. Ninguno. Está ahí o está bloqueando ahí está. Bien. Pero sólo se enciende cuando está en el móvil. Y ese es parte del problema cuando llega a China papilla, que el gato también tiene palacio secreto y dijo: Mira, vamos a usar el auto, no el add to cart. Ese es este que tiene toda la cantidad y tamaño del botón de corte es como podrías totalizar. Entonces vamos a editar y va a ir primero que nada, oye, no estás siendo el menú. Y yo estaba como, ¿qué puedes estar en el menú? Parece un gran lugar para ti. ¿De lo que te das cuenta es que puedes ver donde está escrito? Dice corte no es capaz de colocarlo en el menú de navegación. Esa es en realidad la clase. Puede que no todo el Nav, solo esa clase en particular. Así lo puedo poner por aquí. Las habilidades secretas para el carro es que tiene todas estas cosas en él. Así que échale un pequeño vistazo. Entonces cat tiene el botón de copiar, que es lo que podemos ver, pero también el envoltorio de gato, que no podemos ver. Eso es lo que aparece cuando haces clic en él. Ese es el div que ahí aparece. Entonces, tratar de romper esos dos juntos significaría que si pongo el corte aquí, significa que desaparecería. Ese menú desaparecerá cuando llegue al móvil. Y también a tu carrito y a Webflow le gusta tratar de asegurarse de que criaturas simples como yo no terminen haciendo tonterías como esa. Funcionaría. No hay nada malo con el código. Hay carro dentro de eso, pero se apagaría para un móvil. Entonces lo que han hecho es que han hecho que Webflow haga algunas cosas, Cody antinatural, cosas que decir. No puedes estar en el menú de navegación porque él nunca Sí, léelo, puede entrar totalmente ahí, pero solo están diciendo, bueno, nadie quiere eso nunca. Entonces vamos a hacer que no suceda en el lugar de trabajo. Entonces sabiendo que la empresa en la misma posición, genial. Simplemente haz esto. Yo sólo puedo empujarlo por encima. Ahora bien, la otra cosa con la que nos vamos a encontrar es que estas barras de navegación construidas un poco diferentes al tipo de mejores prácticas de esta clase. Hemos estado usando como a menudo usando flex para conseguir que las cosas hagan su trabajo. Bien, y eso funciona totalmente, pero estamos usando el componente de otra persona y el componente anterior de Webflow. No hay nada malo en la forma en que lo construyen. Acaban de construir de una manera diferente. Entonces la forma en que lo han hecho en este en particular es que te he dicho al menú de navegación usando algo que hemos hecho, posición y relativo y absoluto. Una cosa que no hemos cubierto, bien, nos estamos adelantando razonablemente aquí es que han hecho esta cosa llamada flotación. Te encontrarás con algunos elementos que tienen esto. En lugar de usar flex para conseguir que empuje hacia los bordes o la rejilla, han usado float y está flotado a la izquierda y flotado a la derecha. Ahí vamos. Entonces puedo decir, quiero que flotes a la derecha y luego quiero que veas esto. El botón de corte no me deja ajustar el flotador. Bueno, dice flotación no se puede ajustar. Lo bloqueó para esta cosa en particular para que funcione. Entonces ahí tienes. Son muchos, así que no vas. Y Rick, esta parte de ella, terminará flotando hacia un lado. Puedes hacerlo a todo el carrito, pero no al botón. Extrañamente, las cosas que hemos decidido son lo mejor para nosotros. Y por aquí puedo poner esto a flotar. Aquí vamos. Supongo que me gustaría hacer estos videos porque a veces puedo hacer cursos que parecen todos muy lógicos. Sólo haz eso. Y luego te vas al mundo real y estás como, supongo que lo que quiero que hagas es abrazar a esos diseñadores web. Trickly Webflow lo hace más fácil, pero van a ser desafíos y todo es parte de ello. Y si bien es como súper frustrante cuando no está funcionando, pero cuando lo consigues, estás como, Oh, espera a un genio. Supongo que esa es la comida para llevar y flotar. Echa un vistazo a la inundación. Lo otro raro es que no tengo idea de por qué. Echemos un pequeño vistazo. Es marca ahí está ahí. Hay un menú Agregar que está por ahí, cargado en el botón de navegación derecho. Sé que ese es el menú de hamburguesas ocultas es el gato. ¿Por qué el auto delante de esto? No puedo trabajarlo. Todo lo que sé es que si hago esto, funciona. Eso es todo lo que importa. Bien, échale un vistazo. Habrá muchos desarrolladores viendo este video y mucho mejor en código que yo. Tener una mirada inspeccionada. Yo sé en los comentarios por qué lo sé. Lo acabo de atribuir a los misterios del auto. Están pasando cosas que son increíbles. Ellos y tal vez se me escapó. Pero quiero decir, realmente deberías ser, debería ser al revés y la pequeña lista aquí. Lo otro chulo es que digamos que quiero bajar al móvil y echemos un vistazo. Probablemente como si tuviera sentido que el auto estuviera ahí en el menú para estar ahí. Pero cuando estás abajo en el móvil, se siente raro, parece que deberían alternarse y podemos hacer esto. Por suerte, lo que Webflow ha hecho es que separaron el menú. El menú es el que puedo ver en esta página aquí. Ese es éste. En la versión móvil. Ahí está el botón, pero mira lo que puedo meterme en el medio. Nosotros Allá vamos. Fresco. Así que hice ese trabajo al revés. Quiero que la tarjeta en el botón esté por encima de todas ellas. Aquí vamos. No tiene mucho sentido, pero puedo tener el carrito de este lado porque están separados los menús ahí y un gato ahí. Podemos pegar escoger el menú ahí, menú de la hamburguesa nav ahí. Podemos pegar el algodón por el medio para que podamos hacer algunas cosas geniales y cambiarlo para llevar esto atrapado en el móvil un poco más lejos en este momento, escritorio encuentra grande, puede ver todo hecho en el móvil. Se está poniendo apretada. Bien, entonces lo que podemos hacer es que el botón del carrito se puede ajustar dependiendo del punto de interrupción de visualización. Entonces, lo que podemos decir es que hay el carrito general, el botón del carrito, y en realidad tienen diferentes configuraciones aquí. Así que vamos a cortar. Podemos hacer cosas como la forma en que sale. Podemos abrir el carrito, pero el botón del carrito que puedes ver tiene sus propios ajustes. Y aún podemos arriba en el carro. Pero aquí tiene la opción de decir la cantidad. Puedo apagarlo. ¿Corro para deshacerme de la palabra gato? Yo sí. Se va a dar click aquí. Y voy a decir que tienes una pantalla de ninguno todavía ahí en el escritorio, no ahí en el móvil. Podemos hacer que sea una linda ronda la cosa, darle los antecedentes hasta ti. También podrías ir y echar un vistazo a la forma en que otras personas han lidiado con estos problemas K, porque no vas a ser el primero. Vamos. Y como, estoy en driblar, me parece esto bueno para las interfaces web y UI dribled en particular, acabo de escribir en el carrito de compras y yo era como scroll, scroll, scroll, y mira eso. Este sitio web aquí lo trata al tener el corte en su propia línea. Porque obtuvo mucha información. Tienen una gran barra de búsqueda. Han decidido tomar este tipo de archivo de encabezado nav de dos pisos. Aquí hay otro. Lo fue, y no lo fue. Este no tiene Carrito. Ser interesante ver cómo está funcionando esa. Es solo una visual, así que sería bueno verificar realmente una aplicación real. Había uno más. Éste de aquí. Puedes ver lo que hicieron es que ocupan esta parte superior derecha, y el menú se mueve por aquí. La marca se ha ido a saber que se puede pegar aquí en medio en esta versión. Entonces podrías hacer algunos swapping alrededor. Mi consejo sin embargo, hazlo simple y solo tenlo en su propia línea, entonces tendrías que preocuparte por eso ahora. Bien, eso es. Prometí que arreglaríamos ese Top Nav y aprendimos sobre float y miramos diseño web es divertido problema solucionable justo después de que es frustrante problema solucionable. Bien, siguiente video. 112. Trabajar junto con Dan construyendo la tienda de té completa en Webflow Parte 1: Hola a todos. Vamos a dar un paseo conmigo, junto con Dan. Hemos estado viendo muchos de estos temas aquí ahora de forma aislada, como hacer estos videos, mirar una cosa en particular, bien, y se están alejando de eso. Entonces lo que vamos a hacer ahora en este video es que en realidad voy a construir esto en realidad, vamos a mostrarlo en la pantalla. Bien, entonces esto es todo. Esta es la maqueta en Adobe XD. He usado XD porque hemos usado Figma. Y supongo que me preguntan mucho, como ¿cuál debo usar? Y yo solo, estoy feliz de usar cualquiera de los dos. Así que vamos a construir una versión de escritorio, pero también una versión móvil porque no hemos hecho tanto Mobile en este curso. Y para este cliente en particular, falso ciego. Y el, va a ser usado mayormente en el móvil, pero solo hay que mostrarte los pasos como tenemos que ir primero al escritorio, flujo de trabajo y luego a construir el móvil. Sí, y solo te llevaré a través de mi proceso. Entonces porque esto es menos un tutorial o más de un paseo a lo largo, voy a despotricar un poco de renta. Voy a tratar de narrar mi propia vida, lo cual es complicado. Y va a ser una larga. Entonces, ¿cuánto tiempo? No tengo idea. Voy a adivinar una hora y 32 min. ¿Puedes poner los cFos del tiempo de todos modos, Nicholas? 45 min, 2 h, 3 h. y va a ser lo que va a ser. Y si, te va a mostrar los pedacitos donde me quedo atascado y como lo arreglo. Creo que es útil verlo, pero no tienes que ver esto. Te doy permiso para saltarte. No voy a cubrir nada nuevo. Simplemente reutiliza las cosas que hemos aprendido en el curso y el título juntos. Podría ser útil, recuerda también que esta es la mejor manera. La mejor manera, dadas las habilidades que hemos aprendido en el curso. En mi opinión, podrían ser una mejor manera de hacer algo que está totalmente bien. Déjalo en los comentarios si sabes como, Oh, ¿por qué no lo hizo así? Y ustedes viendo esto tienen una lectura de los comentarios también. Podría ser como, oh, así es como lo hicimos porque estoy obligado a quedar atascado en algún lugar del camino. Sí. Bien, vamos a meternos en ello. Nos vemos ahí dentro. Bien, comencemos la mañana que tengo mi café. Nos dices la mañana. Tuve que mirar ese video que acabo de grabar y esa es mi cara matutina un poco. Aún no desperté. Bien, entonces vamos a empezar con esta es la maqueta de XD. Como dije en la intro, voy a tener que hacer primero escritorio y luego trabajar a través del móvil. Y te voy a mostrar mi proceso para eso. Y no hay manera en el momento en que sé que puedes cambiar a ser móvil primero en Webflow sin hacer algunos súper hacks o ¿verdad? Navegación, voy a comenzar con la navegación normal como en el componente. Voy a hacer esto va a hacer mi oferta porque me encanta el cambio más fácil a la navegación móvil. Bien, comencemos, empecemos por colorearlo. Y voy a ir a menudo si la etiqueta se ve bien, bien, navbar es una gran clase. Sólo voy a dejarlo y voy a dejarlo flotar, generar el nombre de la clase. Agarré mis colores de XD. Te dejaré una copia del archivo XD si quieres echarle un vistazo, si conoces a XD, pero no te preocupes si no tienes habilidades de XD o Figma, solo puedes estar construyendo en Webflow. Bien, entonces la clase, voy a hacer bajar esto. Voy a decir algunos otros atajos al principio aquí, solo como último recordatorio. Y entonces no voy a hacerlo a lo largo del curso porque una hora o lo que sea de atajos ambos se volverán locos. Bien, Entonces Opción Alt, da click, cuando vaya a 12 y baje, te borre. Ese va a ser ese color. Voy a usarlo como un color global. Voy a usar ese Scott T. Y esta va a ser mi primaria. Ahora, dependiendo de si estás trabajando para un diseñador o si eres el diseñador. Verás en este , en realidad tengo un básico hablando aquí, así que algunos nombres. Bien, entonces esta de aquí es la primaria tres. Bien, entonces solo voy a mantener ese nombre en todo momento, bien, y solo refiérase a eso porque puedo reutilizarlo. Bien, vamos a conseguir un logo. Así que aquí y subirlo. Tengo algunos archivos que tengo para el conjunto de los exportados de XD. Así que paso rápido y voy y lo encuentro. Bien, y lo selecciono. Y luego golpeé Comando D o Control E en una PC. O puedes hacer clic con el botón derecho aquí en tu panel Capas y decir Exportar Seleccionado. Y acabo de elegir SVG porque es escalable. ¿Bien? Tengo algunos jpegs que voy a usar. Mi hijo los atravesó y agarró esos y en realidad terminan con dos logotipos, PNG y SVG. Voy a usar el SVG. Por favor, venga en el tamaño correcto, lo cual es bueno. Ahora, me gusta hacer el texto alt, los que conozco como los meto, de lo contrario nunca vuelvo y lo hago. Entonces no lo voy a hacer sobre el objeto, lo voy a hacer en el panel de Activos. Bien, entonces aquí voy a decir que este es el logotipo de Scott T. Ireland. Me puedo ayudar tres y palabras clave, y estoy seguro de que hay algunas Scott t alrededor. No lo he comprobado. Todo bien. Entonces eso debería obtener el texto alt. El texto alt vendrá del activo. Excelente. Ahora bien, esta navegación se está construyendo con cosas como float y no grid o flicks. Así que hay diferentes maneras como en lugar de tratar de conseguir cuadrículas, genial, puedes quedar atascado en el edificio de barras intermedias y debo yo mismo, definitivamente había construido en cuadrícula, pero no lo hice, así que sólo voy a ser barato. Usa la clase que va a venir de tal vez marca. Bien, y voy a decir solo mostrando la parte superior por favor. Y lo suficientemente bueno. Bien. En realidad, no es lo suficientemente bueno. Vamos a agarrarlo. Abajo. Ahí vamos. Entonces, por el momento, creo que los botones están sosteniendo el tamaño de esto. Si te deshaces de estos, la cosa colapsa. Como si no se derrumbara. Británicos muestra los botones que le están manteniendo el tamaño. O tal vez el menú de navegación, que es bueno para mí. Y me voy a deshacer de uno de ellos. Voy a renombrar got browse home and browse t. honestidad. Y voy a darle estilo a estos botones en realidad, en vez de vender los botones, voy a poner en mi body tag porque los botones usan esta fuente llamada inter. Bien, y uso enter como mi texto de párrafo aquí. Entonces Enter y tengo este llamado Mac tick nómada. Entonces voy al caso de Google Fonts. Voy a ir a instalarlos para el curso. Ajustes del proyecto. Voy a ir a fuentes en IFA, a, y voy a encontrarla. Bien, uso regular y audaz en mi diseño. Lo sé porque lo comprobé. Puedes ir a revisar tus diseños. Bien. Y no quiero otro llamado MA. Hay una métrica termina solamente, hay una negrita. Creo que sólo quiero lo audaz. Bien, entonces esos son los m2. Voy a saltar de nuevo con el diseñador y voy a poner mi etiqueta corporal. Etiqueta corporal. Voy a decir todo, todo en este sitio web va a ser una fuente de esa entrada. Bien, y mi tamaño de fuente predeterminado está buscando el 116 más genérico. Estos, Él también tiene 16. Lo perfecto para la altura de la línea. Y en realidad deberíamos usar rems divididos por 16 REM cope. Entonces una habitación. Ahí vas. Bien, y este de aquí, voy a usar el como nada como esto tiene solo significa que normalmente va a ser uno de lo que sea que sea, eso son 20 pixeles. Hacer ese uno en este guión solo significa que va a ser uno de lo que sea que sea que sea. Entonces mi altura va a ser una habitación. A veces es 1.11, 0.20, 0.9. Es como un porcentaje de lo que sea que sea. Entonces voy a empezar con uno y sólo ver cómo vamos. Se puede ver que está funcionando aquí arriba. Y voy a dejar el color por defecto como creo que el color por defecto en. Echemos un vistazo. En Webflow es como un gris apagado, gris apagado, solo un gris más claro, gris pizarra. Voy a hacerlo negro sólido porque eso es lo que dice el diseño y hago lo que dice el diseñador. Bien, y eso es lo suficientemente bueno por ahora. Y echemos un vistazo a estos botones. Entonces estos son enlaces de navegación en el menú de navegación. Lo que voy a hacer es que voy a crear, no voy a crear una clase de botón porque el botón, el botón genérico es esta cosa de aquí, estas de aquí, tan únicas como en la mañana usas solo ahí. No los uso en ningún otro lugar del diseño que puedo ver. Entonces lo que voy a hacer es dejar botón porque es un muy buen nombre para una clase. Y voy a llamar a éste un poco más específico. Y estos tipos no comparten básicamente nada que tanto mayúsculas, supongo. Y voy a tener dos clases, ya lo he decidido. Bien, entonces este va a estar separado de lo que voy a crear más tarde llamado botón. Bien, entonces va a haber nav, button, nav, la cosa, la cosa, y la cosa que es un poco más específica. Bien, y voy a decir que eres blanco. Excelente. Ahora voy a decir Todos ustedes son capitales. Porque la mitad de los hombres capitales y es algo así, es bueno porque dicen que el cliente va a estar trabajando en el sitio. Significa que no pueden poner en minúsculas y fallar con mi diseño. Entonces cuando vaya a agregarlo aquí, vamos a usar el Comando Enter o Control Enter. Voy a teclear botón. Una, significa que la obliga a estar en mayúscula. Bien, otras cosas, está claro cuál es bueno. Aquí hay mucho más espacio. Entonces lo que me gusta hacer es espaciar estos como M. Si haces clic en algo y mantienes presionada la tecla Opción en una Mac, tecla alt en una PC, y pasas el cursor sobre algo, ves que es un 67. Entonces la mitad de eso es 30 o 33, 33. Así que voy a asegurarme de que este relleno de 33 botones de navegación tenga un espaciado de 20. Voy a hacer 33 en ambos lados. Y yo solo lo estoy vigilando, como aquí en XD o un poco como comando uno llega al 100% y los pongo un poco a la mitad de la línea. No es perfecto, pero puedes ver si me alterno entre los dos, puedo ir un poco me acerco a él. Y si estás pensando, cómo me dijo entre eso en una Mac, mantienes presionada la tecla Comando y tocas una PC, es diferente. Creo que es la pestaña de control o Control Shift. Prueba algunos de ellos. Puede que tengas que buscar en Google como alternar entre abiertamente aplicaciones en una PC o Mac, es Command Tab. Eso hago mucho entre XD y a veces nos confundimos. ¿Cuál entonces? Bien, así que agreguemos este carrito. Ahora. Hicimos esto antes donde tuvimos algunos problemas, pero ya sabemos cómo solucionarlos, lo primero es, es si voy a agregar. No está ahí. Por qué no estás ahí puedo ver CMS, pero aquí es normalmente donde están las cosas del comercio electrónico. Eso es correcto. Necesitamos convertir esto en un sitio de comercio electrónico. Me va a dar dos colecciones. Hagámoslo. Ahora de nuevo, esto es solo un gratis, puedes llegar bastante lejos con el comercio electrónico sin tener que pagarlo, configurarlo para pagar, pero podemos prepararlo para el cliente de antemano. Voy a cerrar la decepción porque quería que hiciera es encender estas cosas. Hola, y para cortar. Vamos a llevarte ahí arriba. El miembro puede entrar aquí, pero puede ir por aquí. No puedo entrar ahí. Oh, ¿por qué cuando entres? Oh, lo entiendo todo el tiempo. Creo que cada vez que lo agarro. Agarré el botón agregar al carrito en lugar del botón Carrito. En el botón del carrito, se ve muy similar. Bien, las cosas raras del diseño. Vamos a darle estilo. Vamos a bajarlo realmente en su lugar primero. Entonces, como que nos arreglamos antes de eso. Si agarré este botón de carrito o puedo recordar, vamos a posición. Podemos flotarlo. Entonces no puedes hacerlo al botón, pero creo que puedes hacerlo al carrito. Tú puedes, nosotros podemos flotarlo. Por lo que no hemos hecho mucho fluido en este curso, pero esta navegación se ha construido con flotadores. Entonces vamos a tener que usar lo que han hecho. Así que voy a flotar a la derecha. Voy a conseguirlo del otro lado lo hago. Lo que en este caso significa delante del menú. Malezas. Hola **. Así que vamos a darle estilo ahora, y vamos a conseguirlo un par de cosas ahora, en mi cosa aquí, No hay número. Yo podría regresar. Los clientes dicen, ¿quieres el número del carrito? Simplemente tal vez no lo hayan pensado. Pero digamos que la cantidad cortada necesita ser apagada. Puedes ocultarlo porque es una opción. Pero creo que con el carrito, en realidad puedes simplemente, es una de las opciones bajo ajustes. Así que tengo el gato seleccionado y me escondo cuando el carrito está vacío y solo aparece cuando se está usando o derechos. Y echemos un vistazo a conseguir el carrito. Ahora, podría estilizarlo para que esto sea mayúscula K. Así que aquí está mayúscula y no está aquí. En realidad solo apágalo. Bien, sólo voy a escribir carta porque nadie va a cambiar esto. No voy a hacerlo editable para el cliente. Se puede escribir en mayúsculas. ¿Algo más? Voy a tener que jugar con esta altura y el color. Entonces tenemos que agregar otro color. Entonces hagámoslo primero. Entonces uso mi iPhone en el teclado, uso mi cuentagotas. Bien, Rick, mi diseño. Pero ese es el código. No están ahí. Bien. Entonces quiero decirte botón para tarjeta. Bien. No voy a añadir el nombre del estilo porque aquí hay un nombre Goodstein llamado Botón de corte. Y cuando lo cree, bien, voy a decir fondo. Va a ser tecleándolo aquí. Puedo ver que creó la clase basada en el tipo de lo que el flotador de ancho de pie pensó que iba a ser. Lo cual en realidad es bastante útil aquí. Y voy a editar para ser una clase global. Y esta va a ser mi secundaria S T. Y ésta también fue la tercera. Haga clic en Crear. Ahora necesito jugar con el acolchado. Voy a hacer lo mismo que antes. Hagamos espaciado. Y eran 33. Mantenga pulsada la tecla opción, tecla alt en una Mac para obtener ambos lados 33, la parte superior e inferior, solo voy a igualar lo que hay en su línea. Bonito. Bien, todo está un poco alineado y luego solo necesitas llegar a un poquito. Bien, mirando. Bien, vamos ahora a ver lo mal que va vía móvil. Pero tiendo a hacer es simplemente hacer un trozo como una sección y luego ir a comprobar si una bola lunar en lugar de hacer todo el asunto y después tener que volver atrás y hacerlo. Bien. ¿Entonces los dedos de tableta cruzaron a todos Sí. No creo que piense que hay suficiente espacio para que en realidad no necesite cambiarse al móvil en la tableta. Bien, entonces voy a mantener los botones abiertos. Entonces lo que haces es hacer clic en E y F, y hay algunas opciones bajo configuración para decir esta de aquí. Mantenga el ícono de Menú, como habilitarlo en el paisaje del teléfono para mí. Debería estar ahí por tableta y nada aquí en, debería estar aquí así. Perfecto. La única cosa es que cuando baje hasta aquí, voy a comprobar que no estén rotas en estas. Sé para este cliente en particular que hay un cliente ficticio, pero el móvil primero es el importante para este es que hay un par de cosas aquí abajo. Se ve bien, se ve bien, pero eso debería ser blanco y esto necesita hacerse más pequeño. Bien, entonces para hacerlo aquí abajo, tengo que hacerlo donde quiera para hacer el menú de hamburguesas. Tengo que hacerlo primero. Siempre que aparece no puedo hacerlo en retrato y paisaje porque va a flotar hacia abajo. Recuerda, si esto de aquí, los íconos son divertidos y algunos íconos son listas como imágenes, y los estilizas antes de que entren. Pero este icono en particular, puedes comenzar con el color de la fuente, que es impresionante. Bien, entonces los íconos no son caninos, lo voy a llamar menú Icon burger. Porque en mi final con más de un icono. Y puedes iniciarlo con la fuente. Así topografía y escoge blanco. Lo que también voy a hacer es deshacerme de la palabra carrito en este nivel. Bien, entonces solo voy a decir Carrito Agregar es finito. Tablet caliente aunque, voy a decir que eres un diseño de pantalla ninguno. Y ojalá ahora en el móvil, haya uno. Estoy usando el uno-dos-tres a lo largo la parte superior de mi teclado, 121234. Bien, es como si jugara con el espaciado. Nuevamente, tengo que jugar con él a las tres, que es mi panorama móvil, solo tiene que ser un poco más pequeño. Entonces este de aquí es un general. Es que no me dice que es talla real 0, 18 a cada lado. Bien. Entonces voy a ver si puedo hacer eso en el momento en que sea 2032. Entonces en esta, así que solo voy a hacer 18 de cada lado. Sí. Pero esta cosa que está un poco apagada al borde es un poco de relleno en ese lado. Así que estoy un poco deshacerme de él. Y no es lo mismo. Este de aquí se ve bien. Son solo que todo es un poco diferente, al igual que los íconos son alturas diferentes. Y así a veces solo hay un poco de ojo para ir. En realidad, vamos a aumentar esto para que se vea cuadrado. Y tiene que ser un poquito más alto. 123.4 para el que realmente me preocupa más. Bien, así que la navegación, casi terminada. Vamos a hacer clic aquí y nos vamos, tú abres, muéstralo por favor. Y altura. Sí, vamos a hacer eso. Entonces lo que voy a hacer es que voy a decir que vas a ser un diseño, no lo tienes en él. Entonces hay que tomar algunas decisiones ejecutivas. Va a ser verde, iba a ser marrón. Otro color, botón de navegación. Sigue siendo el mismo botón de navegación, lo cual es interesante como el nervio de botón está aquí. Pero cuando llega a esta opción, se rediseña un poco y se le aplica otro estilo. Y tengo que hacerlo a la versión horizontal porque ahí es cuando aparece por primera vez. Bien, Así que muestras y vas a estar en esta versión, color de fondo de esa. Bien, ¿a lo mejor qué hacemos? Te hacemos del mismo color. Color. Color. Excelente. A lo mejor simplemente se queda así. Cuando cae. Bien, comanda Shift P, Control Shift P y dale un click. Ahora estoy reacio ahora dos, y lo dejo ahí porque quiero ir a comprobarlo en mi celular. Porque revisándolo en la pantalla. Sí. Es un derecho en tu escritorio aquí así, pero es mejor verificar en tu teléfono móvil. Entonces voy a publicarlo. Ábrelo en un navegador. Ahora recuerda, esto podría no ser cierto para todos. Podrías simplemente escribir esto en tu teléfono. Me gusta usar esta opción e ir a enviar a mis dispositivos. Y puedo conectarme a mi teléfono de Google. Y simplemente aparece aquí. Es bastante dulce. Se ve bien. Los botones se ven lo suficientemente grandes. Tendremos que verificarlo con Google para ver si Google está bien con el tamaño del botón, ¿de acuerdo? Bien, accesibilidad de pollos. Pero se ve bien. Sin embargo, una cosa en el teléfono es ¿puedes ver esa pequeña línea? Y eso es todo. Bien, así que voy a ir, solo tienes que hacerlo un poco tapado. Bien, muy bien. En el móvil. Pasemos al siguiente trozo. Entonces, vamos a echar un vistazo a ¿qué es? Aquí hay caja de héroe. Mirando la hora también. Esto va a ser mucho más largo de lo que pensaba, ¿no? Ya sabes que no me lo dices. Bien, entremos nuestra sección y trabajemos primero en esta imagen de fondo. Bien, así que voy a ir a ti, agreguemos nuestro contenedor para todo, básicamente todo el resto de los sitios en un contenedor en todas estas páginas. Entonces, ¿qué tipo de hacer eso? Sólo revisa. ¿Hay algo que se salga del contenedor? Entonces puedo hacer eso dando click aquí, Comando o Control E. Voy a ir sección, comando o melodía o Control Devuelve esto la última vez que prometo que Janice va a ser mi sección aquí. En realidad estoy quería contenerlo y sección i y u pueden entrar. Voy a poner una altura mínima solo para aguantar demasiado grande, solo para que tenga algo que mirar para mi imagen de fondo. Bien, echemos un vistazo. Entonces la imagen de fondo, si miro aquí, es, soy reacio a sacar esto porque en realidad es una imagen más grande. Y quiero un poco extra para los diferentes tamaños porque sabes que cuando cambiemos el tamaño de esto, se pondrá caliente, más y más pequeño dependiendo del ancho del navegador. Entonces, aunque probablemente sea, probablemente iría a golpearlo un poco la parte superior e inferior porque hay bastantes píxeles adicionales que probablemente no voy a necesitar. Y eso va a ser un archivo de gran tamaño. Pero por el momento, voy a ver, sólo a ver cómo va esto. Así que la imagen de fondo es lo que quiero hacer. Entonces sección aquí he seleccionado esto arriba, fondo más imagen excusa. Ese. Voy a conseguir que cubra. Y probablemente voy a ir desde el centro en lugar de la parte superior izquierda. Un poco coincide con lo que hice en él. Lo siguiente es poner esto por encima. No puedo recordar en la parte anterior del curso, ¿agregué, como, hay dos formas de hacerlo? Puedes hacer click a través de todos los botones. Puedes agregar un segundo bloque de color sobre la parte superior o puedes agregar el efecto. Hay un filtro llamado sombra, perdón, brillo, y puedes bajar el brillo. Sólo voy a agregar dos imágenes de fondo. Pero en realidad esto va a ser una superposición de fondo. Y puedes ver la diferencia es que este es algo así como un tinte verdoso. Estas cosas te atraparán si no eres el diseñador. Lo sé porque lo hice que no es negro o el tono de negocio superior para ello. Te voy a agarrar y voy a ver la opacidad. Ya ves que es el 80 por ciento. Eso es lo que voy a hacer. Voy a ir hacia ti y decirte, eres el color de eso. Y vas a ser el 80 por ciento de eso y eso debería coincidir bastante bien. Mira, vamos a ver. Sí, increíble. Bien. Necesito empujarlo un poco hacia abajo desde arriba. Entonces lo voy a hacer para ver. Lo voy a hacer a la sección o el contenedor pasa en el contenedor. Están ahí dentro. Y soy móvil. Sucede un poco. Sí. Parece repetirse lo suficiente como para que lo haga en el contenedor. Entonces en realidad, no, voy a hacerlo a la no soy esto lo voy a hacer a la sección de aquí. No, ventana al contenedor. Un contenedor va a tener contenedor. No voy a hacer todos los contenedores porque me pongo voy a usar contenedor algunas otras veces. Habrá un acolchado en la parte superior. De hecho sé que queremos, pienso una mejor idea que vamos a hacer es hacer una clase global. Bien, entonces vamos a decir, solo voy a lanzar una etiqueta div y voy a crear una clase de margen global. Va a haber margen, arriba, recuerda que tengo exceso, Sam y Sam. Bien, hay mediano, grande, extra grande. Ahora a menudo cuando estoy haciendo un trabajo, tengo que escribirlos frente a mí. Lo que he decidido sobre el exceso son ocho píxeles, es m, el pequeño es 16, luego se pone 24, 30 a 40. Puedo no sé por qué no me van a meter en la cabeza. Entonces los escribo en una nota Post-It donde frente a mí justo aquí. Bien. Así que tengo esto por ahí de un viejo trabajo, publica la nota y voy a adivinar que necesito voy a adivinar que estoy en XD. Y usa esto, voy a mantener presionada la tecla Opción y dice 20. Así que voy a tratar de mantenerme consistente, como el diseñador me escucha escoger hermanamiento porque se veía bien. Voy a escoger 24 para que sea consistente con mis fuentes y mi espaciado. Entonces voy a usar 24, que es mi medio. Entonces en XD, perdón, en Webflow aquí voy a decir que eres un margen en la parte superior. Vas a ser medio. Y el espaciado va a ser un margen en la parte superior de ese 24. Espero que el diseñador no se dé cuenta de que no es 2024. Eliminar contenedor U, va a tener una clase de vacío. ¿Bien? Así que imagina duro y el medio significa que puedo reutilizar ese top mediano probablemente tendría que crearlo. Podrías estar en algún momento. Ahora vamos, voy a hacer el exceso y pequeño y mediano, grande. Me parece que cada vez que los haga como voy a hacer esto correctamente, los voy a meter a todos. Entonces sólo usaré dos. Y los trabajos donde necesito eso, no lo hago. Voy a usar cada uno de ellos. Hágalos individualmente. Es como la ley de Murphy. Bien, así que vamos a tocarles. Tienen que echarle un vistazo. Entonces necesito romper esto en dos partes. Hay algunas formas en las que podría hacerlo. Puede usar columnas, podría usar flex. Voy a usar grid porque donde es increíble. Podría convertir el héroe de sección una cuadrícula por aquí o en la cuadrícula de diseño. Y eso es totalmente trabajo. A mí me gusta simplemente tenerlo por separado. Yo por mi propia cordura. Hace que sea fácil encontrar la cuadrícula y hacer clic en ella, lugar de tratar de averiguar qué padre tiene un gran aplicado a ella. Y ahí solo estoy yo. Bien, entonces necesito dos columnas, una fila, dos columnas, una fila. Y el espacio con el que voy a mear, pero tratando de averiguar algo, probablemente va a estar en algún lugar entre saltos, pero en realidad puedes escribir como, digamos que eso es demasiado mucho y 0.25 no es suficiente. Sólo se puede decir, no quiero ser de 0.35. Sólo quería decir Es como, sí, son fracciones. Pero no todos tienen que igualar a uno, solo va todo voy a llenar el vacío. Esto solo está llenando el resto. Bien, entonces 0.35 se ve bien. Vamos a lanzar las imágenes. Y nuevamente, con esta imagen, podría exportar esto de XD ya recortado, eso funcionaría totalmente. Prefiero meterlo y luego cortarlo, ponerle un borde alrededor que sea circular. O reutilizar. Esta imagen significa que solo tiene la carga y el sitio web una vez. También me da un poco más de flexibilidad. No hay real como no tienes que hacerlo, solo puedes traer la imagen ya recortada. Bien, entonces voy a ir a arrastrar la imagen. Y si arrastras la imagen a ella solo asume que pones la etiqueta de imagen en el elemento image. Voy a poner en mi texto alt aquí. Voy a decir, vas a ser lindo erizo acurrucado en un tazón. Sepa, usted va a ser. Elaboración de té de jazmín en una taza de vidrio. Creo que eso me gusta, lo hace. Y voy a hacer que sea ¿de qué tamaño es? Es de 175 por 175 imágenes. No quiero que esto responda, así que no voy a usar la altura mínima. No va a hacerse más grande porque no voy a poner más continente. Entonces 12.5175, Todo está distorsionado hasta que conseguí cobertura en forma. Agreguemos un borde. Frontera de Brasil. Siempre elige como un número bajo. No estoy seguro de por qué soy tacaño con los píxeles. Ya no te cuesta poner mil mil y no estoy seguro de por qué. Bien, eso es algo así. El espaciado necesita ser resuelto. Pero lo genial de la cuadrícula, que se puede hacer clic fácilmente, se puede decir, los quiero a todos en el centro. En el centro, bien. ¿Te das cuenta como es la grilla? Bueno, no está haciendo el arriba y abajo. Es porque la rejilla se detiene ahí. ¿Ves la línea azul? El padre es más grande, pero el padre no pasa sus medidas a la cuadrícula que está dentro de él. Hace lo que quiere. Entonces lo voy a hacer es ir a la sección héroe, encontrar el tamaño, deshacerme de él manteniendo pulsada la opción o clic Alt. Y voy a ir a grilla. Se puede tener la altura mínima de 300. Entonces grid sabe lo alto que es. Entonces sabe que puede alinearse en el centro. No está muy lejos. Vamos a meter todo y luego me voy a perder con espaciado. Entonces vamos a conseguir esto, esta y esta hermosa T. Va a ser mi bateo, va a ser mi bateo. Yo sólo tengo una mirada redonda que puede estar pegando a uno. Eso es un poco tener que estar pegando a uno en esta página, lo cual es un problema. Y soy inconsistente con mi golpeo de que probablemente sea un mal diseño. Bien. Pero me gusta, Esa es una genial. Y voy a usar este más tipo de información golpeando uno, probablemente más a menudo ese sitio. Ahora mi sitio es muy pequeño, son sólo tres páginas. Tu sitio va a ser mucho más grande. Y sé que este va a ser el genérico más utilizable. Entonces lo que voy a hacer es que voy a peinar a todos los H unos para que sean más así porque sé que el blanco sobre el negro solo va a usar esto una vez en la página del héroe. Voy a usar que cargue más. Entonces, lo que termino haciendo es solo pensar en un ir oculto. Te voy a decir primero y luego hacer una excepción especial pequeña clase combo para que sea blanca. Voy a poner mi golpeo al derraparlo. Voy a sacarlo aquí abajo. Golpear bien. Y voy a decir que eres un H1. Ya es la fuente correcta. cuanto al tamaño. Echemos un vistazo. Vas a ser 51. Aleatorio. El diseñador se pone con lo que el diseñador quiere. ¿Bien? Voy a decir todas las H, que te olvidarás de hacer cargas, bien, no tienes que volver atrás y decir que quiero que sea 51, no quiero que sean rampas, así que vamos a ir 16/16 RAM. Y como antes, es fácil solo ir un guión y va a ser uno. La altura de la línea va a ser de 3.187 marines. Bien, ¿y va a ser el color de mis tres primarias y cualquier otra cosa que tenga? La altura de la línea está bastante cerca. Bien. Echaremos de menos lo mismo. Y no están pasando otras cosas. No es mayúscula. Entonces creo que ya es suficiente. Entonces ese es mi buen genérico, como stock H1. Bien, entonces te voy a usar ahora por aquí, pero esta va a tener una clase aplicada a ella llamada ticks white. Porque también puedo reutilizar algunas veces. Vas a ser blanco. 113. Trabajar junto con Dan construyendo la tienda de té completa en Webflow Parte 2: Y es todo lo que van a hacer los blancos a la clase. Bien, el siguiente es este de aquí. Y de nuevo, estoy mirando a mi alrededor para ver si se está reutilizando. Es un poco mi H2. Es mi bateo dos en muchas páginas. Entonces otra vez, ese es el más utilizable, como lo estoy usando, están ahí en la página de pago. Entonces ese es mi defecto, H1, H2. Y luego voy a agregar las garrapatas blancas para ello aquí arriba porque es un poco más único por aquí. Lo mismo. Voy a decir que vas a ser H2 y vas a ser esa fuente, un médico. cuanto a tamaño. Mira, eres 434-34-3403, audaz. Bien. Tú 43. 43 también? Buen diseñador Dan. Bien. Entonces voy a decir que eres que eres el audaz y eres 43 slash 16 rim, y vas a tener una altura de línea de un guión. Y tú eres esta fuente, bien, este color aquí. ¿Qué hace este? ¿Qué pasa por aquí en mis estilos? ¿O ni siquiera está ahí? Esa es una pregunta ese diseñador, porque ya hemos usado esa. A lo mejor es que este no se ve bien. Es el gris más cálido. Entonces este se llama San Gris 700 gy. Es difícil llamarlos 12345. Puedes, es a menudo, puedes usar este mismo estilo de fuente. Recuerda, eso fue un poco audaz y eso es ligero. Eso es un poco común usarlo para colores también. Bien, entonces vas a ser el color de oh, bien, necesito que piense ¿qué hice? Lo otro que hay que hacer es volver a verificar eso porque me di cuenta de éste. ¿Ves que el código es hash 575 y este de aquí tiene hash uno a. tienes que ir a hablar con el diseñador como, oye, bueno, cuál quieres? Voy a elegir este porque soy el diseñador que hizo esto. Voy a escoger esa fecha. Así que volvamos a Webflow. Y voy a decir golpear dos o dañar al equivocado propósito para tratar de mostrarte lo que no debes hacer. Así que recuerda, necesitábamos todo H2O. Probablemente estés apuntando a un ir ya que lo estás haciendo mal, lo estás haciendo mal. Entonces agreguemos un color rápido porque lo tengo en mi portapapeles. Bien. Perfecto. Ahora voy a ir a agarrar el nombre. No puedo recordar lo que era. De vuelta a ti. Y vas a ser cuando alternas entre los dos, un poco lo pierde. Esa es mi excusa de todos modos. Entonces voy a editar como una clase global. Voy a darle un nombre. Voy a darle a Create a la derecha, ahí está. Tiene el color correcto. Ahora. H dos para todos ellos va a ser médico y va a ser 43/16 habitación. 16 habitaciones. Y va a ser un guión. Bien, entonces está ahí. Voy a sumarlo. Se va a romper el cuello. Sabemos que si sumé aquí porque es una grilla donde va a hacer la grilla, va a ir, Oye, tengo algo nuevo, tiene que ir en su caja nueva. Entonces lo que voy a hacer es que me voy a agarrar aquí, voy a ir aditiva. Ese div blocks va a estar en este. La calefacción va a estar dentro de esa y golpeando. Es complicado de hacer en la página, Hagámoslo por aquí. Entonces las garrapatas blancas van a estar dentro de él. Y luego dentro de él. Aquí vamos. Abrigos, sí bloquearon es una unidad para que no se desprenda a otra celda. Y esta calefacción a, voy a agregar una clase llamada texto reutilizando clases. Bonito. Está a las, Primero que nada llevémoslos alineados a la izquierda. Entonces vamos a entrar en el, quiero agarrar al niño de la grilla, que es esta cosa llamada diblock aquí. Y voy a conseguir que haga lo que quiera. Las apariencias sean centro. Pero este tipo se deja alineado y es un poco mágico. No le aplicó una clase. Para hacerlo, asumes que generará una clase porque hace por muchas cosas. Pero lo más grande, ligeramente diferente, bien, en realidad no se aplica al elemento en sí, es a la grilla. Bien, agreguemos nuestro botón. Bien, tú abotonas k, tú. De nuevo, el botón es como aquí arriba. Este es el botón más reutilizable. Entonces este va a ser otro botón único y voy a hacer de este mi genérico. Entonces esto solo se va a llamar botón héroe, algo así. Tú, bien, voy a vincularlo a nada por el momento. Eso me recuerda. Hay mucho como, vaya, ¿hice eso? La marca necesita vincularse a. Y donde esta mi nav desplegable Ajustes, ajustes de enlace, voy a decir ir a la página de eso. Antes de que me olvide. Entonces este botón de aquí va a tener un className, todo botón aquí. Botón aquí va a hacer algunas cosas. Va a tener antecedentes de ninguno. Ninguno. Va a tener una topografía de todos los demás. Se va a decir Browse t. va a tener mucho más relleno. Bien, Entonces, ¿qué tan grande es? Haga clic en esa opción de mantener presionada. Entonces se puede ver que no es igual cúbico entonces alrededor de 27 por 16. Hagámoslo. Necesita espaciado de mantener presionada la tecla Alt u Opción 27, tenga en cuenta la capa incorrecta, que 16 en la parte superior. 16.27. ¿Bien? Bien, tamaño. Vamos a agregar un borde alrededor de la frontera exterior de qué? Aquí hay un trazo de dos. No necesitas un radio, necesitas un ancho de dos, y necesitas ser Blanco. Alternar, asegúrate de que haya 100% alternado, alternado, alternado. Eso es audaz. Eso no es audaz. Este botón, héroe, va a tener tipografía. Vas a ser audaz. El tamaño de la fuente es 16. Mi defecto es 16, que es una llanta. Ahora estamos cocinando. Bien, así que agreguemos algunos textos y hagamos el espaciado correcto. Tan hermosa T a tu puerta. Por defecto, el espaciado como si fuera raro, como los H tienen algo de espaciado. Como lo que está creando todo ese espacio ahí dentro. Y voy a usar la opción X-Ray, puedo usar el atajo a partir de ahora. Bien, entonces mi caso, es Comando Mayús X será Control Shift X. Es muy útil para pasar y decir, yo soy, el H1 tiene un trozo en la parte superior y un trozo de margen en la parte inferior. Bien. Lo mismo con el H2. Ahí hay un pedazo. Lo que me gusta hacer es simplemente deshacerme de él desde el principio de un trabajo, ¿de acuerdo? Y sólo para decir que todos los H tienen cero, se puede poner en, no se puede restablecerlo. Tienes que anularlo porque por defecto son 20 por diez. Entonces hay que escribir 00. Lo mismo con este. Vas a ser todos h dos van a ser cero. Por euro. Vamos. Prefiero simplemente tener eso y no tener nada y editarme. Entonces, ¿cómo vamos a espaciar esto? Puedes o agregar relleno al fondo de este o lo haré yo. Y en lugar de crear un costo específicamente para éste, voy a crear un par más global como clases de margen y podría reutilizar k. Y ¿cuánto de brecha no hay? Es un poco complicado con esta fuente porque puedes ver que tiene como algunos como la versión mayúscula de esta. Puedes ver que es como si ni siquiera fuera el hielo en como, como si la tapa estuviera muy alta sobre ella. Es una fuente rara. Bien, entonces mi espaciado va a moverlo un poco extraño en este caso, pero vamos solo por ejemplo, rectángulo. A veces es como agarrar un rectángulo para ir tanto. Y yo estoy mirando por aquí. Entonces la altura es de 14. Y mirando mi pequeña lista, 16 probablemente esté más cerca de ella. Voy a hacer tanto el 8.16 pixel para el fondo. Y entonces puedo decidir, porque se puede ver ahí a pesar de que los dos a cero, los dos de diferentes tamaños el uno del otro. Porque esta está permitiendo algo de espacio para los descendientes. Cuando digo decente es como, ¿ves que cuelga por el fondo? Así que en realidad está muy cerca, pero la fuente es un poco más alta. Entonces hay así, solo, solo suerte de que este de aquí no tenga descendentes. Bien, señalaríamos al margen mi nombre, Daniel Walter Scott, no tiene descendentes, lo que facilita dar vueltas en una línea. Hecho de ancho. Así que ahora voy a agregar una clase div y voy a decir tú margin-bottom y voy a hacer exceso, exceso. Ahora para mí, uno de mis grandes problemas es ahora que voy y lo hago. Observe que se fue. Tienes que golpear Enter, el margen inferior x existe. Golpea Enter, y este va a ser extra pequeño, va a ser ocho. ¿Bien? Ahora voy a ir a quitarlo. Sigue ahí, pero margin-bottom, pequeño. Y voy a hacer algo. Deberías pasar por y hacer el resto de ellos tampoco. Entonces vas a ser margen inferior. Probablemente solo quisiéramos ser pequeños. Y éste probablemente va a ser el más grande. Margin-fondo, pequeño. Yo hago mi pequeño ¿cómo lo llamé? Sí. Está lo suficientemente cerca. Realmente no quiero hacer es un poquito diferente, de nuevo, porque el cliente podría volver y decir, estamos usando o no usando hermosa, estamos usando Beautiful. Bien, y luego voy a tener que meterme otra vez con el espaciado. El momento. respira hondo y simplemente déjalo así. Echemos un vistazo. Y si alguna vez consigues un diseño para mí, probablemente va a tener rectángulos por todas partes porque me he olvidado de quitarlos. ¿Alguien más hizo eso? Usa los rectángulos como herramienta de espaciado. Bien, eso está todo bien. ¿Cómo tiene que ser esto realmente? Tiene que ser tres para tres, solo lo adiviné 300. Entonces veamos la sección de héroes. En realidad. No, es la grilla la que está dando la altura. Puedes estar ahí. Bien, hagamos esto, ¿de acuerdo? Esto, porque este no es un lugar raro. ¿Cómo metemos las cosas en lugares raros? ¿Te acuerdas? Ya lo tienes. Vamos a poner algunos que no puedo recordar posición o es un eco mi posición cerebral absoluta. Eso es un buen, uh, ¿a dónde va a ir? Realmente no importa, pero voy a tener cuidado donde lo ponga porque quiero que haga referencia. Si la pongo aquí y la muevo en el móvil, cuando me mueva y baraje estas cosas, va a terminar en el lugar equivocado. Así que quiero un poco como que básicamente tiene que sentarse por encima de esto. Ese es su objetivo en cambio por encima esto y para moverme por el lugar, lo voy a poner justo encima de esto, para que estemos justo debajo de esto en el orden de apilamiento aquí para que donde sea que esté, donde se mueve a ese tipo vendrá con ellos. Eso tiene sentido. Entonces otra vez, imagen, voy a ir a mis bienes. Voy a arrastrarlo en dos debajo de mi, que está por encima de los herejes. Y voy a hacerlo, ¿esto es decorativo, o esto es algo interesante? Creo que podría ser algo así como que no es abstracto, es algo específico. Entonces vamos a ir a la hoja de té. El gráfico de la hoja, o la ilustración de la hoja de té puede ser NF1, como si fuera un poco decorativo, pero ayudó a describir la página. Sí, bien, entonces tú, amigo mío, vas a tener una clase llamada imagen, imagen fría. Y voy a decir que la posición es absoluta. Recuerda cada vez que algo tiene absoluto, el caso de los ratones padres esta cosa llamada dibloque necesita establecerse en relativo en problemas con eso, se le da un dibloque clásico. Voy a usar mucho el bloque. Entonces voy a llamar a este div, hero wrap up. Bien, y aplicar relativo a ellos. Podría dejarla encenderse si lo uso porque familiares no va a hacer mucho a un montón de etiquetas div. Yo soy, solo reutilizo y lo llamo. ¿Cómo se llamaba? Dibloque. Oye, puedo cambiarle el nombre después. Vas a estar en relación con tus padres, ¿bien? Voy a decir que lo eres. Puedes hacer clic en estos para ver qué va a hacer. Mi llevarte a donde necesitas estar. ¿Puedes ver que está rebotando dentro del padre? Bien. Lo que voy a jugarlos a todos. Bien. Y en realidad sólo voy a ir. Les dijiste que hicieran mi oferta. Un poco más. Bien, me gusta. Bien, así que lo siguiente es, voy a, voy a ese espaciamiento ahí. Recuerden, podemos ir a la grilla. En realidad es bastante bueno. Como si no pudiéramos ir a la parrilla y simplemente abrirla un poquito. Puedo ir a medirlo porque ¿puedes ver la imagen aquí? Si lo medo de aquí a aquí, en realidad puedo escribir eso aquí. Entonces hay un poco de simplemente mirarlo para decírselo a cualquiera. Lo suficientemente bueno para mí. Sé que está destinado a ser un poco más alto. Podemos simplemente correr eso por mucho tiempo. Probablemente lo haré. Bien, ahora, veamos lo mal que va en el móvil. Hay un poco cruzando los dedos de las manos y los pies para ver si todo se desmorona. Bien, 234. Bien, entonces lo que voy a hacer, voy a aquí simplemente empujar eso sobre la cruz. Entonces esa es una solución fácil. Te puedo decir en tablet, voy a ser solo de un tamaño diferente. Ya están hechos. Lo suficientemente bueno. Este de aquí, paisaje móvil. Oh, mi mal. Podría hacer que la imagen sea más pequeña. Bien, así que en ti, vas a ser un sostén Mayús flecha hacia abajo 150 parece buena. Y cuando llegas a esta talla, tienes que darle como si no ningún celular es exactamente el tamaño. Hay que darle un poco de flagelo para ver como qué va a pasar y se descompone bien. Y tú mal. Bien, así que voy a hacer es que sólo voy a echar un vistazo. Mi diseño en realidad, mi diseño, es bastante diferente. ¿Puedes ver que la imagen desaparece y es un poco de altura completa? Entonces lo que voy a hacer es apagar la imagen. Bien. Entonces solo lo llamas imagen ocupada. No es un buen nombre para él porque no quiero hacer si todas las imágenes, quiero imagen héroe. Y te darás cuenta si los estilizas aquí, él será el Simón oral ellos. Es un héroe imaginado, un héroe de imagen, un héroe de imagen. Bien, si la dejara como imagen, cada vez que edite otra imagen, seguirías el dimensionamiento y todo tipo de cosas. Te voy a decir diseño de ninguno Qu, raro. Bien, entonces estás empujando hacia un lado, la grilla está haciendo un par de cosas. ¿Qué está haciendo? Está un poco pegado a esto están bien. Porque lo despejé, es saltar al siguiente, bien, dejando este espacio por aquí. Pero en realidad en esto Es genial tener dos columnas aquí, pero no aquí en el móvil. Así que voy a decir es que en realidad sólo va a ser una columna. Y quiero que sea la fricción total y me gustaría que estuviera centrada. El caso es que si lo es, dice centrado, ¿por qué no está siendo centrado? Sé por qué. ¿Sabes por qué está todo alineado a la izquierda? Es porque el resumen dice estar centrado, bien, pero lo que hay dentro de ese envoltorio está haciendo algo diferente. Entonces lo que voy a decir es DEA div aquí un rapero, te voy a hacer flexionar porque flexores increíbles. Y voy a ir vertical y voy a decir que todos ustedes estén en el centro. Y creo que la brecha es buena. Apenas el tamaño de la fuente va a tener que hacerse más pequeño. Fin. ¿De dónde viene eso? La grilla? Rejilla Ahí están los bordes. Mientras se queda con este tipo. ¿Por qué se pone un poco de relleno en ese lado? No lo puedo ver ahí. Vamos a ir al modo El Súper rayos X, al modo Super Rayos X, al modo Rayos X. Destrozando todas las llaves. ¿Qué es lo que lo mantiene ahí? Esa es mi apertura. Bien, espera, ellos lo resolverán para sacarlo. Al hacer clic todo no estaba seguro cómo era eso, qué estaba mal. Y yo sólo me abrí camino hacia arriba. Yo soy como, Esto parece el más culpable. Y un poco cierro esto y miro hacia aquí y voy MBA, azul, azul, azul, y reviso todas estas cosas y lo que hace ahí dentro. Bueno, está haciendo como si estuviera aquí, como yo, lo pongo y obviamente eso lo hace. Un poco de eso. Me di cuenta de que no hay nada malo en eso la parrilla y lo miré y fui aquí y solo estaba mirando un aviso de que el niño de la grilla, así que este tipo de aquí es en realidad quiere hacer con ellos. ¿Puedes ver que está alineado a la izquierda y ese espacio sólo viene porque está alineado a la izquierda? Y si esto fuera un k más pequeño, todo eso sería aún más pequeño. Bien. Entonces, ¿eso tiene sentido? Acaba de dejar alineado ese caso infantil. Voy a decir que nieta. Voy a estar centrado ahí. ¿Quién lo descubrió? La otra cosa que quiero hacer es que tiene que ser a pantalla completa. ¿Alguien recuerda la medición por como hacerla a pantalla completa? Si no lo haces, lo fue, voy a hacer la grilla porque en el momento en que la altura de la grilla está siendo apenas una altura mínima. Bien, entonces estamos siendo grid es un tamaño de altura mínima de 343. Lo que voy a decir no es eso, voy a decir que la altura es la altura vertical. Entonces voy a decir que es como 90% de la altura vertical, la altura de la ventana gráfica. Ese es el que quiero. Y hace algo que nos gustaría. He hecho 90 porque sé que tengo algún trozo de la torre, solo adivina 90, pero no se ve muy bien aquí en tu navegador. Así que ve a probar en tu teléfono. Esa es la manera perfecta, o puedes fingir con solo hacer esto más pequeño. Bien. Lo estoy consiguiendo del mismo tamaño. Bien. Sí. Bien. Puedo vivir con eso. Entonces puedes al menos un diseño aquí, pero también solo asegúrate de estar probando en tu teléfono, envíalo, echa un vistazo. Voy a hacer eso por un segundo porque tengo que hacer un par de cosas para esto. En primer lugar, quieres que tal vez solo se rompa en dos líneas, como si. Entonces no quiero que la fuente sea más pequeña. Quiero intentar que se rompa. Así que aquí texto blanco. No tengo Clase a la que pueda atacar, lo cual no sirve. Voy a tener que darle una clase de probablemente algo. ¿Así puedo encogerme o puedo encoger toda la caja? Puedo este div aquí, un rapero, puedo hacer más pequeño porque tiene una clase. Simplemente no me gusta agregar clases a todo. Quiero intentar ser lo mínimo posible. Pero este de aquí combustibles como yo podría decir tienes un ancho mínimo de algo, puedes ser un ancho mínimo de esto. Solo pon 300 y mira como va. Lo siento, ancho máximo es lo que quiero. Puedes tener en este dispositivo aquí, ancho máximo de 300 pixeles. Más pequeños. Ahora se rompe en dos líneas. Y ahora queda alineado, lo cual es un poco raro antes de que se expandiera automáticamente. Entonces simplemente siempre estuvo en el centro porque le dije a la caja que estuviera en el centro. Ahora que le estamos dando un ancho físico, está irrumpiendo en esta línea y nunca le dijimos que fuera el centro. Y solo un poco pareciendo que fue enviado a, eso no tiene sentido entonces ¿creo una clase global? Este es texto centrado o tal vez solo tenga que envolver este en una clase. Entonces lo que voy a hacer es que voy a deshacerme de este ancho máximo aquí. Y voy a tener que ceder y decir, tienes otra clase combo llamada text Hera. Hera ya se pone desordenada. Entonces este de aquí va a tener mi ancho máximo de, no puedo recordar lo que puse, pero eso no es lo suficientemente pequeño. Manteniendo Turno y poniendo abajo. Eso es min-width otra vez, Dan, max-width, demasiado pequeño. Pero también va a ser topografía de Santa. Bien, así que ahora puedo usar mi arriba y abajo, es solo para ver algo así. Y otra vez, voy a ir a ver si eso está funcionando. Y Adrian efectos de sonido. Aquí abajo también, esto necesita barajarse un poco. Entonces voy a decir que hojeas este. La posición es un poco más de 11234 y está funcionando un poco. Necesito deshacerme del espaciado en la parte superior ahí. ¿A qué lo agregué? Lo agregué para contar. Recuerden, lo agregué al contenedor, lo niego aquí. Quiero apagarlo. Cuando vamos a hacer aquí, voy a ponerla a cero. Aquí vamos. 1234. Bien, de nuevo, voy a probar en mi teléfono para asegurarme de que funcione en la parte inferior ahí. Bien, asegúrate de que se alinee. Bien, eso va a estar dentro. Eso es para la caja del héroe. Creo que no hay nada más ahí dentro. Bien, pasemos con estos tipos. Esto va a ser mucho más largo de lo que pensaba. Bien, así que voy a poner este trozo en el fondo de aquí. Y lo que voy a hacer es hacer una sección para estos, y voy a tener un color de fondo para ello. Excelente, Hagámoslo. Entonces volvamos a éste. Y agreguemos una sección puede estar dentro de mi contenedor, arrástrela en, sección B, sección producto. Y va a estar dentro de esto. Lo conseguimos, bien, esto va a estar usando a mi colega aquí. Vas a estar bien, y vas a ser el fondo de la esta edición va a ser t gris 300. Bien. ¿Y qué más tenemos? Pongamos a estos tipos en caso de que necesitemos necesitamos una lista. Bien, entonces mis productos no tengo todavía. Entonces mis productos, voy a importar productos. Sí. tengo del último. Estamos como mirándolo. Entonces mis productos todos toma un minuto para que estos chicos se carguen dependiendo de lo grande que sea tu mente de racimos. No mucho tiempo Qu, Así que conseguí mis productos. Agreguemos la lista de productos. Así que voy a cerrarlo aquí y agregar la lista de colecciones, ¿de acuerdo? Y voy a decir, voy a conectarlo con el producto va a hacer que sea de tres a través. Probablemente va a cambiarlo para ser realmente va a cambiarlo a una grilla. Eso lo hago muy a menudo. K en lugar de cambiarlo nuevo a ese tipo de elástica. ¿Bien? Y luego dices En realidad mi amigo, ahora eres grid. ¿Bien? Y verás que esta lista de colecciones no está contenta. Están todos atascado ahí. Creo que he agregado las rejillas al envoltorio equivocado. Entonces necesito agregarlo a la lista. Entonces vamos a deshacer eso. Entonces esta lista de colecciones va a ser una grilla que tiene más sentido. Ahora vamos a saltar a estos, ¿de acuerdo? Y vas a estar tres columnas y una fila. Agreguemos algunas cosas. Agrega nuestra imagen. Aquí dentro. Vamos a agregar una imagen. La imagen no se puede agregar dentro de la colección. Haga clic dentro de él primero y luego edite. Vamos conectados al campo de imagen principal. Excelente. Voy a agregar una audiencia. Va a ser mi calefacción a precio. Voy a decir, Oh, vamos a conectarlo en él. Asegúrate de conectarlo al producto de nombre básico o diseñador de problemas, diseña la versión pequeña. Voy a tener que ajustar eso porque estamos mucho más largos. No tienen las cargas. Bien, pongamos en OWL, solo una imagen, lo siento, un bloque de texto, o conectemos eso a L. Precio, precio, precio. Excelente. Y lo que puedes hacer en realidad es simplemente escribir después eso está conectado a eso. En realidad estoy, quiero este trozo después por cada cien gramos. Entonces voy a hacer ¿ qué voy a hacer? ¿En realidad? Sí, eso es lo que voy a hacer. Así que bloque de texto en este momento. Bien, voy a llamarlo toma precio. Voy a ponerlo en fila. Bien. Porque de lo contrario está a una cuadra, ¿verdad? Porque se le llama bloque de texto. ocupar toda la línea. Entonces si hago otra persona, otra persona, otra cosa toma toma bloqueo. Notarás que quiere estar debajo de él, ¿de acuerdo? Y éste va a ser un corte de cien gramos. ¿Bien? Entonces le puedes decir a este tipo, toma precio, estarías en la fila. Esta persona todavía quiere ser una cuadra. Entonces voy a llamar a este texto. Y no pude tomar el precio también porque él hace lo mismo sería en bloque en línea. Necesito algunos ¿me queda margen? Todavía no lo sé. Así que margen-izquierda x s, no acariciar. Va a ser, vas a ser ocho extra pequeños. Y vas a tener margen izquierdo, extra pequeño. Ahí vamos. El siguiente, pero un pedazo de texto aunque es este. Así que vamos a ir, te metes ahí otro bloque de texto. En realidad es párrafo ahora, ¿verdad? Como siento que eso es ahora califica como párrafo porque va a tener inflamación. Entonces no voy a poner textos, voy a poner en grafo conectado al campo de párrafo. ¿Bien? Ahora bien, el cliente no me ha dado como una opción de resumen. Bien, entonces lo que voy a hacer es tener que volver a ellos y agregar una opción de resumen. Así que toma un poco de texto. Digamos que tiene que ser tres líneas porque eso es justo para lo que tenemos espacio o resuelve cuál es tu carácter mínimo mezclado. Sólo voy a usar esto mucho. Bien, voy a entrar en el producto y decir producto. Se necesita un nuevo campo, no en el producto real en sí, sino en la situación global del producto. Voy a decir que necesitas un nuevo campo y aparece un poco en la parte inferior, lo cual es raro. Vas a tener un nuevo campo de ticks de carril. Va a ser multilínea cuando lo estén poniendo ahí y la etiqueta va a ser resumida. ¿Bien? Y vamos a tener como una cantidad mínima, mínima de personajes. Aún no sé qué es eso. Bien, voy a tener que jugar en probarlo, pero tenemos que volver al cliente también y llegar a ellos como parte del proceso, ver si podemos obtener un resumen en marcha. Alguien va a tener que lograrlo. Entonces eso es que dicen la colección. Voy a entrar en ellos ahora y decir, ¿dónde está mi resumen? ¿Pegar? Guardar debe ser al menos, gritos. En realidad acelerará cambiando eso. Bien, así que lo cambié de mínimo a máximo. Entonces ahora deberíamos poder ahorrar. Bien, así que va a trabajar a mi manera a través de estos y poner en algún marcador de posición que se ve vagamente diferente. Bien, entonces ahora puedo volver a entrar y decir en realidad notarás que estás conectado al campo de resumen. Resumen mejor. Bien, ¿qué más necesitamos? Necesitamos nuestro botón, bien, y agreguemos un botón. Recuerdas que esta es ligeramente diferente. Tienes el morado. Esto es sólo cuando lo has convertido ya sea en un CMS o en un sitio de comercio electrónico, solo podrías poner uno para decir, elegir el producto actual. Sabe qué caja no es. Sabe que es este dulce té negro de canela. Va a ir ahí. 114. Trabajar junto con Dan construyendo la tienda de té completa en Webflow Parte 3: Bien, está todo ahí dentro. Necesito darle estilo ahora. Entonces hagamos eso en un envolverlo todo en un div. Podría usar el artículo de colección. No sé exactamente lo que hace el artículo de colección. Probablemente tiene algunos poderes especiales. Sólo voy a volcar una etiqueta div ahí y simplemente tirar todo dentro de ella. Simplemente arrastrándolo todo a la derecha. Déjeme ir. Entonces puedo decir diblock por ti. Haz un par de cosas. Vamos a tener algo de espaciado. Voy a decir la lista de cobranza. En realidad toda la sección va a tener algún relleno de voy a hacer margen puede usar 24-bit. Voy a ir a ver en realidad lo que hizo el diseñador. Mantenga pulsada la Teoría de las opciones. El diseñador de camas 32 va a estar en. Entonces vamos a usar 32 porque eso está lo suficientemente cerca la lista de sección de producción va a tener margen en todas ellas. Mantenga pulsado uno, mantenga pulsado , cambie en 32. Y voy a asegurarme de que la grilla, que se aplicó a la lista de colecciones, va a tener 32 también, caso de que se meta dentro de la grilla. Y va a ser 32, 32, aunque no tengamos filas. Vamos a meterlo ahí dentro. Bien, así que ese es el tipo de espaciado ordenado. Agreguemos un fondo blanco. Lo quiero a todo el asunto, o fondo blanco al fondo, pero porque hay una sombra paralela. Entonces esto se va a ensuciar. Otro papel en el dibloque, excelente, no desordenado. Color de fondo, blanco. Agreguemos una sombra paralizante. Lo que voy a hacer es agregar una sombra global para que pueda usarla en otras cosas. Entonces voy a agregar un bloque div. Voy a llamar a éste. Llámalo sombra porque voy a tener una sombra tecnológica probablemente no voy a cogollos audazmente. Ahí vas. Así que agrégale. Puedes tener efectos de box-shadow. Y vamos a echar un vistazo a lo que tenemos aquí. Entonces este tiene una sombra del 036, 16%. No voy a quitar ni la mitad de eso. Así que recto abajo por tres diferentes aquí en Webflow, tienen este dial. No tenían coordenadas x e y. Entonces 1AD es recto arriba y abajo, distancia perfecta. Va a ser de tres pixeles. Bien, ese es el por qué. Y el azul era tres casa recordando todo esto, oye, el color era 16. Genio. Eso nunca pasa. Bien, entonces esa es mi sombra y luego aplicarla para ver si en realidad se ve igual. Entonces hay diblock aquí va a tener sombra. A la sombra. Se ve bastante bien cuando creo. Es bastante igual porque es el mismo código. Seguro que te lo estás preguntando. No estoy seguro de que esperemos hizo mi oh, bien. ¿Lo notaste? No lo noté. Entonces ahora es como una vez que han pasado de color oscuro es porque me puse relleno, no hice nada me puse un margen o relleno. Entonces esta envoltura alrededor del exterior tiene los dos pero su margen, margen empuja alejándose del exterior y acariciando empuja desde el interior hacia el medio. Entonces eso es lo que quiero. Voy a despejar todos estos. Voy a hacerlas. ¿Cómo cambiaría? Bien, voy a ser 32 beta. Bien, ¿cómo voy a hacer el acolchado en el interior? Puedo hacer relleno porque la imagen como en esta como otras drogas. Entonces porque necesito que la sombra paralela esté en el exterior de la imagen, pero si le agrego relleno, va a terminar rompiéndola ¿verdad? Si tengo este diblock y le agrego padding, va a funcionar, pero va a empujar la imagen. Y tal vez solo lo haga porque es fácil. Y ojalá el diseñador no se dé cuenta. Se va a dar cuenta de otro tipo, guapo, pero se dará cuenta de cosas así. Entonces diblock, voy a necesitar otro div dentro para envolver todo esto. Okey-dokey. Vamos bloque aditivo. Ahí. Se puede entrar. Y luego vas al otro lado, al otro lado. Cuando cruzas. Y luego diblock, voy a agregar una clase sobre él. Entonces si lo creo ahora va a crear una clase global. Voy a hacer imaginar todo ¿qué necesito que sea? Aproximadamente alrededor de 21. Entonces voy a usar mi gemelo T4 va a sostener. Tienes que comprobarlo. Entonces voy a ir diblock marginal y este va a quedar para hacer probablemente prueba. Imagina todo humo. En realidad estoy haciendo padding o margin no importa en este caso, no lo hace. Voy a hacer padding o porque tengo más probabilidades de reutilizar un padding todo. Bien, y voy a hacer que esto no sea negativo y no haga margen. Sostén Shift y puedo mirarlo. No tengo que adivinar. Tratando de conseguirlo a los 16. Eso es complicado. Creo que eso es mejor que 22 o 24. Sólo me voy a quedar sin espacio. La nota 24 es más agradable. 24 es mi medio, no pequeño. Entonces vas a ser medio. Bien, así que estamos llegando, estamos llegando, estamos llegando allí. Voy a tener que agregar una clase combo a esto para decir golpear a la lista de texto. Voy a llamarlo lista de productos en realidad va a tener que ser más pequeña. La tipografía estaba usando mi flecha hacia abajo hasta que los obtuve. Estoy feliz de que las vértebras vayan en dos líneas, pero simplemente no se puede romper en tres. Ahora ve a través de mi base de datos y solo comprueba cuál es el nombre más largo. Y entonces podría tener que reducir lo que pueden escribir en el cuidado de la base al menos en mi lista de productos, porque no puede ser demasiado largo. Va a destrozar mi sitio web. Bien, y este de aquí, voy a decir que necesitas un fondo de margen. ¿Qué tengo? ¿Puedes empezar a ver qué tan útil se vuelve ahora? Porque estás como, Oh si, ya puedo agregar esa. Yo lo he planteado. Margin-bottom parece estúpido y podrías robar no así. Tal vez prefieras simplemente darle estilo a todo con su propio estilo. Eso es totalmente genial. Bien, vamos a darle a estos tipos un bloque de altura mínima. Por qué no el tamaño, la altura mínima, la altura y la altura. Y quiero que el botón esté en la parte inferior. ¿Quién recuerda cómo hacer eso? Todos estos son todos saben. Y a veces me pongo como, digo quiero que para tener la altura mínima o no, te pierdes ganado es que vamos, estatura mínima va a ser demasiado. Flecha desplazada hacia abajo. Eso probablemente sea lo suficientemente bueno. Cuanto más vamos a tener que revisar todas las diferentes en cuanto a cuántas, cuántas líneas es esto para ver hasta qué punto empuja el botón hacia abajo. Entonces, ¿cómo consigo el botón al fondo? Ya sabes, div me etiqueta. Flex, flex se vuelve loco. Vertical. Agarra este de abajo y di que eres, ten una clase. No lo hace. Quiero una clase de botón en él, un poco de clase de botón en él primero, y luego conseguir que presione hacia arriba tengo otra clase, así que ignora empujarlo hasta el fondo sin embargo, deberíamos ir flex. En realidad ahora podemos hacerlo porque no necesita una clase, ¿se mueve niño? Echemos un vistazo. Xd necesita ser de orden superior de margen. Es una clase. Entonces lo que voy a hacer es que voy a quitar eso porque quiero darle estilo al botón primero. Mira. El estilizarlo ahí. Sí, hagámoslo. Voy a echar un pequeño vistazo. Usted lo sostiene es de 14, 44 por 44. Bien. Entonces tú, amigo mío, vas a ser un botón que no voy a aplicarle eso. Digamos que tenía dos Flexbox fuera del padre solo para poder darle estilo al botón por su cuenta. Voy a usarlo todo tipo de lugares. Botón, amigo, voy a grabar botón. Si tienes alguna clase aplicada a él, él no. Así que sólo me llevo el azul. No hay. Entonces vamos a ir a Espaciamiento. ¿Qué fue? No puedo recordar 44. Quiero decir 44. Podemos verificar en un segundo qué e4 y mantener presionada la tecla Opción 44. Y luego algo 14. 14. A veces, mantener presionada la tecla Opción no funciona. Voy como que le pegó dos veces. ¿Seguro por qué? 44? Eso son los botones van a ser llamados. Voy a decir que te va a salvar. Va a ser parejo. Y voy a usar botones va a tener un color de fondo de mis esquinas redondeadas en esta. Redondear las esquinas de 44.4 hay cuatro. Bonito. Bien, así que eso es bueno. Hay una sombra en él. Así que un poco reutilizo esa sombra. Manera extraña. ¿Dónde estoy? ¿Dejarlo ahí abajo? Lo hice, lo hice. ¡Vaya! Sombra a sombra en el botón. Bien, así que ahora vamos a conseguir que se pegue al fondo. Las alturas de verano aún probablemente no sean suficientes. Entonces la altura mínima para que P una almohadilla. Oh, tienes razón. Bien. Así que quiero, no quiero darle estilo a eso. Así que voy a ir a recordar PA, PA, mid y quitar esa clase. Voy a, voy a quitar esa cláusula porque no quiero darle estilo a eso. Quiero agregar una clase a este desbloqueo. Esto va a ser div, list, product, list, lower gray naming. ¿Bien? Y va a tener una altura mínima de 350. Demasiado. Mantenga pulsadas las teclas Mayús, mi flecha hacia abajo, y solo consíguela para que sea lo suficientemente grande como para que todas tengan la misma altura, en realidad. ¿Por qué ese tipo es un poco más pequeño? Siempre la imagen. Nada que ver con eso. Y tú vas, pensé que tal vez ni siquiera necesitamos una estatura mínima. Pensé que esto era más corto porque no lo estaba empujando lo suficiente. Es la imagen. ¿Ves? Simplemente me da la casualidad de que tengo imágenes que son un poco más cortas. Agreguemos nuestro PA a esto. Entonces voy a conseguir una PA que está pendiente de todo. Y voy a hacer que el botón se pegue al fondo. Así que vamos a hacer más grande la altura para que podamos ver lo que estamos haciendo. Vuelve a ti y luego escóndete eso más alto. Grande por el amor de las cosas obvias. Y ahora este tipo puede ser padre de familia. Gracias, no lo es. Entonces su padre de esa etiqueta div, tienes que asegurarte de que volvamos a la que no quiero seguir agregando flex a esta PA de agregar todo porque ese no es un muy buen caso de uso. Y quiero que esté en esto, y quiero que seas vertical, perfecto. Y yo quiero este de aquí también. Yo voy a hacer esta. ¿Importa si empiezas éste o éste? Quiero la altura de este botón aquí. primer lugar, en realidad quiero que sean películas de, solo puedes alinear a la izquierda. ¿Eso es lo que he hecho aquí? Ahora lo he vinculado a la derecha. Ahora estoy estilizando divs shadow. Voy a necesitar una clase especial de botones para esto. Voy a deshacerme de eso. Voy a llamar a este tiene una clase de botón de especial que va a ser lista de productos de botón. Un poco más específico y te van a quedar y vas a tener un margen superior de orden pega a la parte inferior. Bonito. Había mucho trabajo para eso y no quiero que se pegue a la izquierda. Quiero que vaya por ese camino. Y ahora estas imágenes, así que digamos que esto echa un vistazo a lo que tenemos aquí. Así que simplemente copiaremos ese diseño. Aquí está bastante delgado. Yo voy a ir, vas a tener una altura de 123. Bien, entonces esta imagen de cuadro aquí va a tener una clase de imagen especial habría conseguido héroe, hoja de té. Va a haber lista de productos de imagen. Y va a ser una altura de esto. ancho puede ser del 100%, por lo que llena lo que sea. Y voy a hacer un ajuste de color. Ahora, hay por lo menos la misma altura. En realidad, todavía no. Aún así la altura mínima no es suficiente de esta. ¿Puedes ver solo un poquito apagado? Entonces voy a decir que la altura mínima de este tipo va a ser solo una más. Pareja. Bien, toma precio. Eso lo perdió. Así que no estoy seguro cuando perdió su oh, mira eso. Porque hice flexionar la cosa. Ya no va a hacer bloque inline porque es un niño. ¿Puedo hacer que le dé la vuelta a la izquierda? Una lata pero este tipo hace lo mismo. Tengo que volver a ti. Flexiona, algo así como empujándolos a su propio nivel. Podría tener que ponerlos en una etiqueta div. Esa es probablemente la solución más fácil en este momento. Si se te ocurre una mejor manera, hazme saber el momento y la mejor manera de hacerlo. Porque esto podría ser más baratoso. Podría saborear. La clase va a ser audaz, audaz, audaz. Bien, llegar ahí, vamos a comprobarlo ahora en el móvil. Todo el mundo, cruzas los dedos por los míos. Entonces probablemente no lo haré. Bien. Voy a tener que volver a aumentar la altura mínima. Así que en realidad sólo voy a cambiar esto hacia abajo. Vamos a agarrar la grilla de la mordaza. Es la grilla child real grid misma va a ser, ¿puedo ver que mía vuelve mejor y realmente puede arrastrarla? Y te voy a decir en este caso, voy a ser solo de dos en dos. Deshazte de uno. Bien, voy a terminar teniendo más, lo mejor en la página de inicio y resolvamos el filtrarme más tarde. Vamos a conseguir una escalera. Sólo trabaja en una cosa a la vez, Dan. Te ves bien. Y móvil. Es un poco apretada. Así que recuerda que se va a quedar más así. Entonces probablemente se va a quedar más así. Todavía tienes que desplazarte hacia abajo. Entonces aquí puedes ir. Artículo de colección tú, y vas a ser dos por eso. Bien. Bonito. Eso va a ser bueno. De nuevo, tiene las pruebas en mi teléfono, pero no me puedes ver en mi teléfono, así que no es muy emocionante. Yo sólo voy a ir eso es bueno por ahora. Eso es bueno por ahora. Bien. Entonces mi página de inicio hecho, probablemente no. Mira tú contra ti. Eso al 100%, al 100%. Uno de aquí probablemente le puso una altura para que mantenga todo alineado. Pero supongo que no quiero meterme demasiado en la maleza. Quiero que este video se quede, voy a ordenar resumir las cosas al final. Entonces creo que estoy feliz. Eso es lo suficientemente bueno para la página principal. Pasemos a nuestra página siguiente. ¿Sigues conmigo? ¿Aún estás despierta, Becky? Estoy despierto. Entonces hagamos esto ojalá. Sí, tenemos algunas cosas aquí para empezar a construir esto. Entonces vamos a la página dos. Entonces esta va a ser una lista de productos de búho y va a ser una página de producto. Así que aún no estamos tratando con la plantilla. ¿Qué va a crear otra página? Y vamos. Ibas a decir que esta va a ser lista de productos de productos, producto, producto o producto Examinar archivos. Eso va a estar bien. Debería rellenar mi meta título y descripción ahora mismo. No entrar en nada en esta página. Volvamos a la página principal. Agarremos mi barra de navegación y la convertiremos en un símbolo. Buena idea, nav. Volver a la instancia, volver a esta otra página. Y vamos a añadir la canción. Siguiente. Lo que me gustaría hacer es duplicar esto. Así puedo ver dos páginas a la vez. Puedes editar y ambos, no te dejarán. Uno de ellos somos de solo lectura como puedes ver esto no es nada aquí. Puedo saltar por las páginas, lo cual es genial, pero no puedo editar en la segunda versión. Tan a menudo lo que hago es simplemente moverlo aquí como referencia para que pueda estar un poco en esta página y ver lo que he hecho en esta página. Porque de lo contrario terminas teniendo que recargarlo cada vez. Y cada vez que recargas una página, tus deshaces desaparecen, lo cual es un dolor en el trasero. Entonces tú ¿Qué tenemos? Deseo que te muestre cómo navegarlo aunque no pudieras editarlo. Simplemente no ahí. Bien, entonces necesitamos un contenedor. No creo que hayamos visto ese contenedor. Y agregamos un poco de cosas en la parte superior. Entonces, ¿qué agregamos a la cima? Agregamos y en ella estaba medio top y era esa. Bien. Agreguemos una caja blanca. ¿Agrego una caja en la parte superior? Sólo hay blanco o agrego una caja que es todo blanco y lo hago Buxton, el fondo ahí es gris. Muy buena pregunta. Estoy tratando de pensar cuál es la mejor. Sólo voy a hacer una sección superior. Siento que podría reutilizar este que realmente quiero hacer es mover eso hacia abajo. Entonces sí, hagamos esta cosa, podemos reutilizarla. Entonces esta va a ser sección, sección y va a llamarse Sección. Bromeando. Porque siento que voy a usar eso unas cuantas veces diferentes. No, sí. Siento que voy a traer mi sección golpeando. No va a tener color en él. Toda mi página web tiene un color, ¿no? Entonces hagámoslo. El cuerpo necesita ser de este color. Mis 100. Así que volvamos aquí. Voy a ir al cuerpo o a las etiquetas del cuerpo. Y voy a decir fondo es de este color. Yo llamo a esto va a ser editar y esto va a ser AST gris, el gris. Gris. De todas formas. No voy a preguntar. Entonces va a ser el color de fondo. Y significa que esta sección aquí tiene que ser blanca. ¿Le falta mi página de inicio? Sepa, así es como lo quería yo. Éste de aquí, sección, antecedentes. Va a ser blanco y blanco. Color global. Podría ser solo, no lo sé. No siento que alguna vez haya necesidad de negro completo para blanco. Son fáciles de llegar y es poco probable que los cambies. Improbable, probablemente porque el diff, pero vamos a entrar aquí. Vamos No golpees al comando R. Eso está justo al lado del comando D. Si no lo hiciste antes, Control E para agregar cosas, y ese es el botón de reinicio. Restablece todo el navegador es molesto. Bien, pegando a uno, listo para rodar, necesito algo mezquino. Y aquí, usando 32 sección hero, voy a agregar encabezado. Tengo un medio y el medio es 24. Entonces hagamos otro para relleno. Relleno en negrita, y este va a ser grande. Lg, solo escribe grande. Simplemente es común en muchos otros frameworks usar LG, SM excesos o ese tipo de acrónimos. Así que rellenando todo el camino, sostén, desplaza los dos. Bien. Ahí vas. Entonces esta sección, no la audiencia, en realidad, no importaría, va a ser pd. Voy a usar algas. Ellos son lo que yo lo llamo. Ni siquiera lo hice. ¿ Lo hice todo el tiempo? Voy a deshacer hasta que vuelva. ¿Qué creé la clase div con ella encendida, me ves que no me dirijo a todo el tiempo PD. Tan molesto para mí entrar. Entrar. Ahora sí sostienen Shift. Ahora se debe hacer. Bonito. Bien, sección flecha arriba para agarrar el almuerzo TED de padres. Creo que estoy usando un color de fuente diferente. Estoy usando creo que el segundo ahí dentro. Voy a tener que volver a las calefacciones. No creo que ni llegue al segundo color. Ese de ahí. Para ser realmente. tienen que ser una fuente de teoría primaria. No he hecho un diente primario es lo que quiero. Así que voy a hacer esa. Hagámoslo un costo global y llamémoslo como T prime Mary, tengo un tres y un atún. Excelente. Bien, encuentra tu cosa hermosa. Pongamos en esa región, esta cosa de aquí, ¿ debería ser una sección? Puede ser fácilmente una sección, sección de región, que debería ser una etiqueta div, o no es realmente lo suficientemente grande como para ser una sección. Realmente no lo sé. Sólo voy a hacer que sea sección div para como, oh, bueno. Haz algo, luego sección. La sección no se puede anidar una dentro de la otra. No lo quiero dentro el uno del otro. Se va a dar click en la clase de sección de cuerpo llamada sección. Sección. Esta va a ser una región. Va a estar dentro de mi contenedor. ¿Bien? Y va a ser una altura de lo que realmente voy a hacer es que voy a hacer que el texto lo abra. mí me gusta hacer eso a veces entonces no me hace falta que guste tratar de conseguir eso en medio de ello. Lo que puedo hacer es decir que sea un poco más alto y más bajo que este texto. Entonces voy a agregar un bloque de texto está golpeando. Puede ser 123. Está mirando todas las páginas. No tengo muchas otras páginas, así que puede ser un tres va a estar aquí dentro. Golpear. Va a ser tres estilo, todos los tres para ser planeta solo usando esto aquí. Entonces vas a ser audaz. Poner el texto en. Bien, ¿Cuál es el tamaño 16 debería ser el negrita predeterminado. Terminaste como blanco y terneros. Bien. Creo que tres van a ser 16. Voy a quitar el, quitarlo por ahora. Cero-cero. Podemos agregar algunos tal vez no a la región de la sección de calefacción. En realidad, no necesitamos esta sección en absoluto. Mira esto. Puedo poner pegando a tres y vamos a hacer eso porque probablemente dejaría la sección ahí dentro, pero quiero mostrarles que este bateo tres se acostumbra para un propósito, todo este bloque. Entonces se va a quedar cuadra que va hasta el borde. Va a tener un color de fondo del color de fondo en ese. Se va a tener topografía de ésta va a tener algún rumbo espaciado de 32 dimensiones. Todo lo demás. Estoy un poco contenta con eso. Entonces gorras, uso muchos gatos en esto. Sobusamos gorras. Sí, está renderizando la fuente de manera ligeramente diferente. El bulbo alimenta más atrevido aquí, pero bueno, es lo que es. Se renderizará en todo tipo de navegadores diferentes, ligeramente diferentes blancos. Entonces, en términos de la altura, podría simplemente agregar un poquito de relleno a la parte superior e inferior. Y llama a eso bueno. Bien, entonces otra sección, y va a ser este trozo, ¿de acuerdo? Entonces esta va a ser mi sección de lista. Tú divirtiéndote. Me refiero a la diversión. Me gusta hacer cosas como cuando no va tan mal como me gusta que ustedes vean. Asumí que iría mucho con así que va a tener el color de fondo. No tengo ningún color de fondo. Simplemente llamemos a esta sección. Sección. Y esto va a ser una lista de productos, bien, va a ser producto. Y voy a navegar por la página. Así es como lo estoy llamando de todos modos, productos en la página Navegar. Y esto va a tener un color de fondo. Apagado. Es el 300. Lo es. Se agrega el relleno todo para grandes. Eso lo agregué al cuerpo. Bien. Voy a ir en dirección. Y tomemos mi lista. Puedes copiar y pegar listas. No puedo hacerlo de esta manera porque puedo agarrarlo todo. Bien. ¿Qué puedo usar mi flecha hacia arriba? Este envoltorio? ¿Puedo hacerlo de esta manera? Yo no lo creo. Eliminaron el sitio de unión. Puedo vivir con eso. ¿Puedo atarlo de nuevo? Entonces vas a estar conectado para volver a ser los productos. Se deshizo de mi no, eso no funcionó. Así que voy a intentarlo de nuevo. Voy a deshacer en lugar de eliminar porque me traen otra basura junto con ella. A ver. Esto. Estoy bastante seguro de que esto funciona. Puedo agarrarlo todo aquí. Volver a aquí, volver a mi navegación de productos. ¿Quién va a ir? Entonces voy a usar la misma lista. Estas son algunas clases. Tengo que tener cuidado no hundirme ahí. Entonces hay que cambiar algunas de estas clases. Vas a decidir si te va a ahorrar tiempo copiándolo y pegándolo, porque vamos a tener que editarlo para que se vea así, ¿verdad? Entonces tal vez en realidad no es tan elegante también, tan inteligente como creo. Echemos un vistazo. Tú, vamos. En primer lugar, cambiar la grilla. En realidad cambia la cuadrícula. Quiero decir que la grilla va a ser agarrada la lista y la lista porque mi grilla Por eso me gusta mantener la grilla. Oh, lo haces fuerte ahí te escondes. Va a ser uno por orden. Bien, y entonces aquí voy a agarrar el bloque div y el diblock. Siento que si voy a cambiar esto, va a ser muy difícil recordar lo que está pasando del otro lado. Así que sólo voy a tener que reconstruirlo. Podemos reconstruirlos. No soy lo suficientemente inteligente como para hacer que todo lo que hago por aquí también funcione en la página de inicio. Por lo que es bastante fácil solo para el bloque aditivo. Para que pueda darle estilo a las cosas. Agrega una imagen, imagen. Voy a añadir broma. Voy a añadir texto. Agregar otro. Estoy tratando de recordar lo que hay en el otro, ya sabes, lo que hay en la lista. Se necesita el bloque K. Así que digamos que tenemos imagen golpeando libro de texto, libro texto. Ahora que lleva caminar en un botón. Antes de ir a instalarlos, podemos hacer eso. Y agreguemos un botón. Cue desde el botón de acceso directo. Esto va a ir a la página que es producto actual. Tú otra vez, el enlace a la imagen principal. Vas a ser ante todo y H2. Y se puede obtener por el nombre del producto. Lo vas a estar obteniendo del precio del producto. Precio, precio precio. 115. Trabajar junto con Dan construyendo la tienda de té completa en Webflow Parte 4: Bien, vas a ser solo el libro de texto que dice que pones 100 g. Vas a ser la descripción. Esta va a ser la descripción completa o aún un resumen de la hoja de resumen, los pines, derecha. Porque no tanto tiempo. ¿Qué vamos a ser? Resumen depende junto con descripciones resumidas donde sí. Derecha. Pero no quiero limitar a quien esté escribiendo esto al resumen, quédate dentro de esa pequeña lista. Es mejor solo usar el verano para que suceda. Así que vamos a agarrar a todo el padre y hacerlos flicks porque, ya sabes, como por defecto, siempre vamos verticales. Este en realidad es bastante útil para esta manera porque quiero muchas cosas en el medio. Entonces vas a ser muy pequeña. Entonces eres exactamente lo grande que eres, no cuadrado. Vaya, esto es fingir que era cuadrado. Entonces te voy a quedar imagen en esta página. Entonces tu imagen, ¿ qué más tengo? Tengo lista de productos. Va a haber navegación de productos. Y vas a ser un tamaño de ancho por ti. Y voy a decir llenar de kebab. Sí, excelente. Echemos un vistazo. Entonces les pegas oral dentro de otro libro. En realidad, quiero una grilla y aquí, Donna, podría usar Flex, poner otra aquí y flexionarla. Entonces solo hacemos eso para mostrarte rejillas más fáciles porque flex solo tiene alineación superior e inferior, que va a funcionar ahora, ¿simplemente sigue adelante con el flex tu flexionado ahí dentro? Voy a ir ahí. Voy a hacer otra etiqueta div aquí. Div. Vamos a entrar. Me encantaría poder seleccionar más de un turno, haga clic en todos estos. No estoy seguro de por qué ni siquiera podemos meterlo en ti una vez que obtienes el primero y luego es más probable que el resto de ellos entren. Por el momento. Parece la forma en que hacen que esto funcione. Así que parecen estar trabajando en ello en Webflow y parece mejorar y mejorar manera bastante natural sin embargo, es un desbloqueo aquí, también vas a ser películas. Para que puedas flexionar un flex horizontal. Este es vertical. Es forro. De esta manera. Justificando este centro. Quiero huecos y filas. Este puede obtener algunas filas. Entonces el padre aquí es la brecha, las filas. Pongamos 32. Eso no funcionó. Eres y debes brecha no te va a conseguir. Tienes que hacerlo bien. Este de aquí, el padre del error, va a ser filas de demasiadas. Usa mi flecha hacia abajo hasta donde llegamos. Entonces eres del tipo correcto. Necesitas que te quedes ahí arriba. Y es poner estos en un div también. Porque recuerda flex no dejará que el B en línea bloquee. Así que en realidad solo quería que fuéramos grid porque grid, déjame hacer eso. Refleja. Bien, entonces lo que voy a hacer es flexionar. Ahora estás bloque tiene ruidoso. También hay que ser audaz. Como No, tú, por el momento. puede tener, se necesitan alrededor de tres, puede estar en margen-izquierda. Sólo más. A mí me gustó todo el relleno aunque venía con Flexbox. ¿Qué hacer? Estás justo ahí. Bien. Me gusta demasiado de las películas para ser. Voy a poner en, voy a poner en una etiqueta div. Voy a envolverlo. Siento que esta podría no ser la mejor manera si vuelves a mirar, qué hace que probablemente debería pensar. Entonces. Vas a ir dentro de ti y de ti. Entonces lo vuelvo a mover en la página principal. Yo fui capaz de hacer eso, cierto. Llamé a precios de textos. Vas a grabar etiquetas de precio. Y vas a ser tics price. Pero audaz. Ambos todavía no están flotando esta cosa aquí. Oh, eso no lo es. Toma proceso, toma p, eliminar clase, texto. Precio. Vamos y de alguna manera creamos una P de textos clásicos, porque no se usa en ningún lado. Soy capaz de borrarlo. Y aquí vamos. Bien, la gente entraría ahí y los medios, lo siento, un margen a la izquierda o a la derecha. Y de nuevo, me encantaba el flujo, así que como que trabajé en torno a él. Hay mucho compromiso. Va en filas. Voy a incrementar esto. Este tipo de aquí va a ser mi botón genérico. Entonces no quería agregar el margin auto al botón genérico porque lo voy a usar tantas veces. Bien. Entonces va a grabar. Lo que hago es que sé que me voy a olvidar poner gorras aunque el diseño lo diga un poco. Así que voy a decir botón en realidad va a obligar a que todo se guarde para que no tenga que preocuparme por ello. Tú eso no va a ir ahí arriba. Yo podría haber simplemente puesto, podría poner esto ahí también. Pero me he dado cuenta de que el diseñador tiene. Y podría hacer que esto tome precio y lo haga, bueno, podría conseguir que se bloquee en línea, pero solo va a causar muchos problemas porque algunos de estos préstamos son muy largos y no va estar mucho antes de que lo empuje fuera del borde, sobre todo cuando me pongo abajo a estos. Bien, entonces, sí. Bien. Todo ese bloque no tiene nombre. Se llama div bloque dos. Este va a ser mi div no se estaba mostrando, en realidad solo renombrarlo. Bien. Normalmente me gusta ver a los otros que lo han nombrado me da una idea, pero como lo estoy renombrando, no aparecen. Te voy a decir que hago navegación de productos en vivo, elemento de lista. No le cambié el nombre en absoluto. Hay algo raro. Todo bien. ¿Qué puedo cambiarlo? No lo sé. Div. Si me quito la clase, la va a romper. Si agrego otro, creo que todo lo que hice fue crear esa, hacerla flexible. Y agregué algunos se equivocan ahí, pero estamos de vuelta. Bien, se ve un poco así. Necesito, aunque necesito, fondo blanco. Este representante va a tener un fondo de color blanco. Y voy a añadir una clase combo de sombra. Bien. Ahora estamos llegando. Bien. Yo soy feliz, tú eres feliz. Estoy feliz de que lleguemos ahí. Siento que no hicimos cosas. ¿Puedes ver como nos tomó mucho más rápido hacer esta página que la primera? No hay tanto en ello, pero estamos reutilizando clases. Eso es lo que es realmente genial. Me siento como un diseñador web fuerte y poderoso. Cuando sólo voy a box-shadow, padding left ahi ya he hecho ahora consistente. ¿Cómo lo sientes? A lo mejor sólo yo. Lo sientes. Todo bien. Echemos un vistazo a la última página. Qué estamos hasta aquí, hasta éste. Hagamos esta. Bien, así que vamos a trabajar en la página de plantillas porque esto va a ser, muchos de ellos van a quedar así. Entonces nos vamos a ir Y vamos a repasar dos L. Ahí está. Voy a plantilla de productos. Bien, vamos a usar nuestro nav y vamos a lanzar un marcador de edición. Tenía tantos marcadores. Lunes, nos vamos a ir, vamos a meterlo en un contenedor. Vamos a agregar este contenedor, margen superior Md. Echemos un vistazo a mi diseño. Hay un gran poco de relleno en este. Este va a ser un fondo blanco. Realmente no se puede reutilizar ese blanco que tuvimos del último porque fui bastante específico al respecto. Así que vamos a crear una sección aquí. Vayamos a la sección que debería llamar solo a la clase global llamada remolacha color bg blanco. Así que puedo usarlo una y otra vez, pero ya casi estamos al final. Así que sólo voy a colorear la sección, producto con bata blanca, esta sección aquí también, va a estar encabezando todo a mediados. Bonito. Vamos a agregar búho. En realidad no tenemos que agregar un elemento de lista ahora solo agregamos cualquier cosa porque estamos en la plantilla y llegamos a ir a tirar una imagen, imagen junio. Bien, vamos a conectarlo a la nota que está conectada a la imagen principal. Ahora tienes que asegurarte de que el producto está llegando como cuando estás diseñando, ¿de acuerdo? Hay que tener en cuenta que las imágenes tal vez no encajen a través. Así que podrías terminar teniendo que ajustar tu diseño solo porque la imagen no es lo suficientemente grande. Esta es, y va a ser una altura de, altura, altura, altura de tres a tres. Me he olvidado totalmente de la versión móvil M&A Me sentí muy fácil de la última página, haremos las dos juntas al final porque ya estamos iniciados. Bien. No voy a hacer el ancho aumentado aquí, bien, voy a sumar a una clase Y. En esa sentada ahí, no se puede hacer como porcentajes. Se pueden editar los píxeles. Así que quiero agregar una clase llamada imagen producto PRO cut product. ¿Bien? Y vamos a decir que eres una estatura tuya. Excelente ancho del 100%, encajar ahí y rellenar, cubrir y medio o superior y hay que pasar por algunos de ellos y mantener presionada la opción No. Pulsa todas las teclas y mira si puedes alternar a través de las diferentes páginas. Como las pestañas. Cuál es, Dan. Bien. Es Shift Option en una PC, estoy seguro que es un shift y alt, flechas izquierda y derecha. Puedes ver solo estoy hablando a través mis imágenes a través de un solo podrías hacer click aquí. Sólo tengo tres. Pero es una buena manera de pasar y simplemente verificar como imágenes, ¿todas se ven mejor a mitad, que probablemente saben que uno no es tan bueno, sino que en lugar de entrar aquí y decir, Bien, quiero que esté forma de desbordamiento para que sea la parte superior o la inferior. Entonces hagamos eso y solo usemos mis flechas ahora. La parte superior o la inferior. No estoy segura. Creo que la parte superior. Bien, así que ya tenemos eso. Voy a sacar esto por encima. Ahora. Podría haber puesto eso como fondo, y esa es una forma de hacerlo como lo hicimos en la página principal. Quiero ser una imagen real porque me gustaría que estuviera teniendo alt-text k Así que por el momento, no creo que tengamos. Lo que puedes hacer es configurar un campo de texto alt en tus productos. No tengo eso. Bien, podrías agregar estos campos personalizados de resumen. Ahora volvería y agregaría otro campo personalizado para textos alt y tendría el cliente, o tal vez ya tengan algún descriptivo que podamos usar, bien, y le pongo un recuento límite, un recuento de caracteres. Aunque el momento, voy a fingir que lo he hecho y seguir adelante. Entonces quiero poner quiero poner esto dentro de él. Pongámoslo primero por debajo. Golpear. Bien, y esto puede ser un acierto. Va a estar pegando a uno y no sé nada igual, pero necesito que esto sea no tienes no te saltes al hit tres en una página necesitas al menos un encabezado. Uno le dice al navegador que así es lo más importante en esta página. Entonces voy a tener que simplemente darle estilo pegando a uno bastante extensamente para esta página. Este va a ser mi bateo para la página del producto. Bien. Y va a ser, no agregas fuente. Va a ser esa. Bien. Va a ser un tamaño de donde vayamos. ¿Qué odias? ¿Hombres? Yo hago eso todo el tiempo. Nada 48 sobre. Mi cerebro lo hace. Los mezcla. Lo divides por seis. Llanta Dean. Y va a ser uno es genial. Va a tener que ser blanco, lo cual no podemos ver. Y lo que voy a hacer es poner eso, podrías ponerlo dentro de un div y darle estilo. Voy a hacer lo que hice por esa calefacción sin región. Voy a hacer que la clase real haga un par de cosas. mí me gustaría que no fueran bloqueadores. Block tiene todo el camino hasta el borde, lo cual es genial para esa otra cosa. En realidad solo puse el fondo y el puño. Entonces cuando estamos hablando de porque por defecto va a hacer eso si lo cambias a desbordamiento, no, Chrome quiero que venga el diseño del cerebro al bloque en línea. Un poco acaba de llegar al borde aquí. Entonces puedo ir a agarrar algunos acolchados de su lote ahí. Asegúrate de conectarlo para que lo esté agarrando del nombre del producto y tipo de mirarlo. No es muy parejo de todos modos, así que no confío en que el diodo Zener esté haciendo. Bien, vamos. necesario que los haga Es necesario que los haga incoloros y yo lo haré negro, pero la transparencia es cualquier 2%. Entonces aquí voy a teclear alfa es 82. Bien, y ahora necesito moverlo hacia arriba. Entonces voy a hacer que la sección sea relativa. Probablemente va a estar bien viendo esto. Todavía podría querer envolverlo en un div. Sólo voy a esperar lo mejor y decir que vas a estar bien. Entonces vas a la posición. Absoluto. Interesante, ¿eh? Se empujó hasta el borde porque no puede ir a ningún lado. Es porque esta cosa está manteniendo abierto el espacio. Pero si hago que todo esto sea relativo y luego agarro esto o ¿iba a funcionar? Eso es bueno. Por eso se apila un poco. Es solo porque no puede caber ahí afuera y simplemente aplasta lo más pequeño que puede. Eso se ve bien, pero opción shift izquierda y derecha, o shift Alt, es un cheque que es correcto. Y PC, puede que tengas que empezar a mantener pulsadas las teclas. Todos encajan a nivel local. Bien, Este de aquí es parte de la Agregar al Carrito. Voy a entrar ahí. Quería estar dentro de la caja blanca así que vas a meterte dentro del producto. Excelente. Qu, ¿qué hacemos? No quiero el botón Comprar ahora. Probablemente tendré que hablar de eso con el cliente. Como, ¿queremos el botón Comprar ahora? ¿Eso es apropiado? Tal vez haga alguna degustación de usuario probablemente y tenga ambas. ver si hay una especie de caso de uso para ellos. Este tipo no va a ser marca. Va a ser botón. Gorras. Botón destinado a ser audaz. Creo que los botones pretendían ser audaces. No puedes seleccionarlo de la manera que tú, oh, es completamente diferente. Fuente. Z, nada. Bien. Tengo mis botones en realidad semi negrita y es de cuando me faltaba con fuentes. Antes, cuando estaba diseñando mal, tengo que ir a Diseño y decir, qué pasa. Entonces voy a ir y simplemente dejarlo como es Coca-Cola. ¿Qué más quiero hacer? Quiero darle estilo a la forma un poco, así que quiero empujar eso dentro y fuera. No puedo tener que envolverlos en un div o agregar una clase a esta cosa. Podría porque probablemente lo voy a volver a hacer por otra cosa. Entonces voy a decir que solo tienes la clase de campo R field de tamaño de campo va a ser mediano. Y se pone medio, voy a darle, ¿esto va a funcionar un mínimo o máximo? ¿Ancho máximo? Aquí nos vamos ¿cuánto? 300 pixeles. Obsérvelo. Bien, no quiero estos en los campos de etiquetas. voy a necesitar para esta , pero no esta. Lo ves aquí. Dice Seleccionar tamaño y puedo decir elegir, pero no puedo cambiar el tamaño de la palabra que viene de la base de datos del producto. Entonces hay que entrar y cambiar la forma en que se trae en el CSV porque realmente, está sacando de eso. Bien, ¿y qué más? ¿Tenemos que jugar con? Algún espaciado, necesitamos hacer Agregar al carrito y al carrito, hay botones mucho más grandes en esta página. Es más alto y ancho. Entonces voy a decir que vas a ser botón pero vas a ser botón grande. ¿Bien? Y vas a tener más todo todo. Tú de esa manera. Debería ir a revisar, pero no voy a hacerlo. Necesitas tu propia clase. Vas a ser cantidad de texto. ¿Bien? Y vas a ser el color correcto. Fallaste la relación de contraste. Todos van a ser esa columna AAA. Y necesito algunas otras cosas, así que ya tengo eso. Lo que también necesito tener en cuenta el Agregar al carrito. Entonces por encima de eso si golpeo Comando o Control E arriba de ahí, debería apretar. En el libro de texto, esa va a ser la descripción completa, que no es tan larga. ¿Bien? Bien, es eso, supongamos esto n nada y estoy buscando si es inflex flexbox porque entonces puedo agregar filas y puedo jugar con el espaciado, la probabilidad de que todas sean iguales. Se puede ver que es mucho más amplio y esta es la misma que ésta. Es qué, ¿qué estoy usando? ¿Por qué estoy usando uno tan pequeño? Mi medio de pintura es en realidad de solo 24 h y quería rellenar todo para que fuera grande. Vamos a quitar esa. Rúbrica. Grande. Ahí vamos. Ahora puedo entrar aquí y decir Sección producto usted con este vertical. Puedo agregar filas de 3d2. Y eso está totalmente desordenado porque eres relativo a esa. Ese golpe refrescar solo para ver si el absoluto vuelve atrás, si se actualiza el código real. Sí. Aún ganga. Entonces voy a ir pegando a uno. Tienes espaciado o posición. ¿Dónde se posiciona? Nosotros vamos vamos. No sé por qué se movió eso. Creo que porque estaba jugando con Flex. Sí. A lo mejor el flujo me va a dar problemas. Así que échale un vistazo. Es que no puedo deshacer porque lo refresqué. Bien. Así que en realidad voy a ir No se flexionó esta caja porque podría causar problemas. E iba a añadir mi relleno. Echemos un pequeño vistazo. Entonces mismo problema. Es porque es desde arriba. Y la izquierda. Bien. Entonces esa es esa parte en la parte de arriba ahí. Oh, sus padres pasaron de pariente a bloquear anuncios y. entonces está buscando cuerpo porque estaba jugando con que se flexionara y puede que no se vuelva a construir p-block, no quiero que sea yo quería ser bloqueado, pero quiero que siga con un pariente. Bien. ¿Para que este tipo sepa dónde está y por eso te mudaste arriba? Nosotros lo hicimos. Bien. Ha cambiado los números porque cambiamos quién es relativo a quién debería ser relativo a la sección producto. Eso porque estaba jugando con cosas, él incumplió con el cuerpo. Entonces Eric, está haciendo lo que le dicen. Yo sólo le digo que haga cosas raras. Esa es la única cosa con el código. Nunca se rompe. Eres tú, está haciendo exactamente lo que le has dicho que haga o se le está diciendo que haga, va a averiguar qué es eso. Por eso estuvo mal. Atajo 123, vaya, hay que cambiar los tamaños, pero bien, ¿qué más tenemos en cuanto a productos de control? Porque ya tengo una clase aplicada a ello, vas a conseguir margen inferior de 32 porque un poco no es suficiente, pero tú también en el lugar equivocado. Por encima de eso. ¿Puede ir dentro de la tarjeta? Rey vaya así que ahí está el carbono ED no puede entrar ahí. Bien. ¿Puedo entrar ahí? Se necesita bloque. Puede entrar. Tipo de ir allí. ¿Se puede ir? ¿No puedes ir ahí? Eso lo sabíamos. Es totalmente, ¿pueden notarme? Así que ahí abajo. Vas a tener acolchado superior e inferior. Este tiene una clase en ello. Así que también puedo usarlo a escondidas. Debería estar comiendo como Python, padding top, padding bottom. Ya tengo estas clases ahí dentro. Bien, este de aquí, ¿ya tengo fondo de margen? Yo sí. Ambos tienen razón. La cantidad puede ser que puedan asistir. Ahí vas. ¿Tenemos un margen superior en éste? Margen superior? Nosotros lo hacemos. Bien. Me está gustando. Ya no necesitas el margen en la parte inferior. Bien. Ahora, sí, voy a ir a tomar una taza de té. Esperas ahí y vamos a empezar a hacer las versiones móviles mucho más de una hora luego j12 342-34-1234. Bien. Entonces dos necesitan trabajo. Probablemente solo del tamaño de la fuente. Tiene una clase. Voy a usar mi flecha hacia abajo. Este es el más largo de todos ellos cuando en realidad estás en el tamaño estaba tratando usar esto como después de mi atajo que es Shift Option izquierda y derecha o shift Alt, estoy buscando el registro más largo de Dios como éste de aquí. Entonces me van a dar un pequeño para esto. El resto de ella. Bien, este de aquí. De nuevo, probablemente voy a dejarlo rompiendo en dos porque la fuente va a ser demasiado pequeña. Así que sólo voy a decir, espero poder meterse con la posición de la misma. Oye, ¿dónde está mi posición? No me falta con estas otras posiciones. Y en cuanto a ancho, ¿por qué está todo el camino por ahí? 100%, solo voy a los hombres en todo tiene un ancho mínimo, ¿no? cuanto al tamaño, no bloquea en línea. ¿Por qué? Tengo un poco de mirada, es bueno. Modo de rayos X solo voy a hacer no estoy seguro de lo que se está manteniendo abierto. Debería entrar ahí porque esto nos lleva en la otra línea. Hay algo que le da un mínimo, mínimo ancho. Aunque no lo es. No lo eres. Lo que puedes hacer es simplemente usar tu flecha hacia arriba para ver la palabra clic dentro de ella. Usa tu flecha hacia arriba para ver es que el próximo auto y echando un vistazo ahora que ahí. Gracias, chicos. No estoy segura. Regresa a ti. Sí. Porque no puedo pensar en lo que salió mal. Ese es uno, sí. Sí. Este probablemente va a tener que hacer algunas cosas. Qué voy a hacer en esta, ¿qué hizo el diseñador? ¿Mirar? Solo usa el pequeño fragmento de texto. Bien, así que comencemos con un poco de texto y tu diagrama de tamaño de fuente hacia abajo. ¿Eso realmente se quedó ahí afuera, Hannah? Ese problema resuelto. Realmente no lo está resolviendo, ¿aunque es el más largo aún legible? Lo que hago por éste en realidad viene por aquí. ¿Eso se va a quedar ahí? Lo es. ¿Puedo agregar algún margen de ese lado? Siento que esto es hacer trampa. Hacer trampa. ¿Funcionará, sin embargo, es la clave? No. Sí, Esto no parece una buena solución. En la fuente aquí va a ser más pequeña. Voy a llamar a dos líneas, ¿de acuerdo? Probablemente ahí. Y voy a tener que meterme con Vamos a bajar esto a los 16 y Para corresponder con eso, agregué eso oh, eso es posicionamiento. Quiero el rumbo en él. Así que el acolchado en cuanto al tamaño. Vamos a bajarlo hasta aquí, a k, aquí, k, el posicionamiento necesita subir un poco, simplemente dando clic ahí y usando mis teclas de flecha, 1234. Y también este tamaño probablemente sea un poco raro por aquí. Entonces la altura de la misma y esta es que vas a ser altura-sabio de eso ahora, que falta con mi posición. Aunque puedo arreglarlo. El turno de retención sube y latas. Todo bien. Lo último que voy a hacer es que voy a crear un relleno pequeño para éste. Así que haz clic aquí abajo, lanza un div. Div va a ser llamado padding. Y esta va a ser, tenemos una mediana, voy a hacer una más pequeña aquí. Pequeño y va a ser mantener Shift y mantener turno y hacer 16 todo alrededor. Excelente. Se fue. En este. No es como un icono para agregar clases y quitárselas dependiendo de tus puntos de quiebre, tienes que rehacer la canción. Tengo que decir que va a ser pesado y el contenedor aquí tiene este margen la sección superior tiene relleno grande, que es este phi solo agrega relleno, acolchado pequeño sobre él. Se anula, lo hace totalmente. Pero aquí, también tengo relleno pequeño. Encontrarás, encontrarás, encontrarás. Ahí vas. Para que se vea Sección héroe, sección productos consiguió relleno grande, partida pequeña aplicada a ella. Pero en realidad no entra en vigor hasta aquí. Asumí que iría todo el camino arriba y todo el camino hacia abajo porque se aplica la clase. Pero no es porque lo apliqué aquí. Estos, tengo relleno, almuerzo, tú sigues, es algo. Bien, vamos a conseguir que este coincida. En realidad, podrías usar ese tipo de estilo ahora. Bien, es decir, eso, echemos un vistazo a la, salgamos de esta ahora veamos la otra página que no hicimos para estas. Entonces, comenzando por los dos primeros, bien, no está funcionando. Bien, es un dos va a ser en realidad, vamos a bajar a buscar la grilla. Arriba. Ahí está ahí estoy buscando estaba un poco haciendo clic en el medio y estas flechas de fregona hasta que veo ese ícono de cuadrícula. Ahí está. Voy a decir que solo estás hecho uno por uno. 123 o se está poniendo apretada. ¿Cómo voy a combatir eso? casualidad hice que ese DID va a ser vertical y va a estar centrado? Es esto. También lo es. Eso son las flicks. Eso fue un golpe de suerte ahí mismo. Y éste de aquí, voy a aplicar que hemos aprendido que podemos hacer padding. A ver si esto funciona. Pintar pequeño todo el camino a su alrededor. No aplicaba. ¿Por qué no deshacer? Hacer acolchado grande en caso de que le pase algo malo. Es algo malo con el acolchado pequeño. ¿Qué tiene de malo el acolchado pequeño? Vamos a averiguarlo. Así que sólo voy a ir a una clase aditiva o al azar de alguna manera. Voy a agregar puesto de PD. En realidad no hace nada tan pequeño va a ser 16. Que va a por qué eso es sí. Tener si no está funcionando. Y estoy contento con esa. Y voy a móvil en realidad, vamos a ver si se aplicó aquí arriba también. Tu envoltorio de lista de colección. Podemos deshabilitar clases, codificar. Cómo lo haces aquí y Webflow. Lo que vamos a hacer es simplemente subir aquí a la de arriba. Rumbo grande, voy a poner a cero, lo pondré en cero todo el camino alrededor algunos anulando esa clase. Entonces vas a ser cero. Y entonces tú estás aquí por esa. De vuelta aquí, el gasto más grande va a ser 32 en este. Y entonces debería seguir a éste también. Todavía no lo he hecho. Bien. Entonces tú tienes relleno grande. No lo hemos desactivado para estos otros. Simplemente lo anulamos por estos superiores y luego lo volvimos a encender para Danio. Y esta de aquí, se ve bien, pero la sección real va a tener PDE pequeña. Ahí vamos. Asegurémonos de que soy Rick, estos otros siguen siendo PD grandes, grandes y pequeños. Vamos a revisar algo. Bien, batear a dos en este no tiene clase. Quiero centrarlo escribe en el texto. ¿Se lo puedo hacer a toda la cuadra? ¿Puedo ir? Oh, pero ¿le va a hacer a éste también? Así que échale un vistazo. Porque eso se ve bien. Lo oculto se ve un poco raro aquí. Yo digo que todo dentro este div va a estar alineado al centro. ¿Refleja éste? Éste, bonito. Sólo se aplica desde la cabeza hacia abajo. Bien. ¿Quiero o probablemente queremos perder con eso para que coincida con el pequeño abajo a 16. Uno, click off 1234, tiene que haber algo más de espaciado, pero ya he tenido suficiente. ¿Tienes suficiente? Ya he tenido suficiente. Todo bien. Eso va a ser más pequeño. Va a necesitar una clase. Después de todo. Editemos aquí. Llamemos a este encabezado uno, uno en la página del producto. Tenga en cuenta que esta es la página de navegación. Lo va a llamar golpeando uno. Y te voy a ver aquí. Esto siempre es lo último. Esto va a ser lo último. Así que el tamaño de la fuente baja. No se puede romper en dos líneas. Y puedes estar en dos líneas, pero puedes estar centrado y vas a tener una altura de 1.1 líneas. Muy bien, señoras y señores, publiquemos esta cosa. Hay algo malo en ello. Vamos a ignorarlo. Usted pensaría oh, por favor, oh, por favor. Oh, por favor. Sin navegación. Por favor, sostenga. Bien, tiene t. Hagamos la navegación. Vamos a entrar en la navegación. Este de aquí va a ir dentro del símbolo porque los quiero a todos. No quiero que vayas a una URL externa a la página fría. Vas a ir a la página de navegación. Así que vas a ir a una página llamada navegación de productos. Abrir en esta pestaña. Muchas gracias. El algodón sabe a dónde va. Publica de nuevo. Esto no va a ser así, vamos a publicar algunas veces. Todo bien. Vamos a comprobarlo. Estamos en la página correcta donde refrescar, deshazte de uno de ellos. Navega a quien no tenemos el LinkedIn va a hacer eso, ¿algo más? Así que estamos en la versión grande más bien la página principal, la página principal está rota. Excelente. Se pone al lado pequeño. Está funcionando mejor. Así que las páginas de inicio se rompieron. ¿Por qué se rompió la página principal? Se ve bien. Y le echó un vistazo a MI Rowan a éste. Vamos a la página principal. Oh, hicimos algo mal. K, la clase que estamos usando. Echemos un vistazo a la grilla. No ponerla en una grilla. Yo lo hice. Entonces está en una grilla. Una grilla. ¿Cómo se volvió así? Deberían ser tres. No lo sé. Si edito esta llamada lista de colecciones. Porque lista de colección como siendo el mismo nombre se está utilizando aquí así como en otra página. Todas las demás páginas. Navegar por productos. Sí. Entonces este está usando el mismo. Entonces, ¿podemos eliminar la clase que creo que podemos escribir porque nosotros, sí, llamemos a esta lista de colección en la página Navegar? Y vamos a decir u y ahora uno por auto. Hecho. Entonces dejaremos ese solo en la página principal. Estás trabajando. Volvamos a publicar. De hecho solo lo presento aquí antes de que vayamos demasiado lejos y publicando. Así que vamos a ir a trabajar a ráfagas, vamos a entrar en uno de estos tipos. Y está funcionando tanto en la página. Me doy cuenta de lo contrario estaríamos aquí por 1 millón de años. Creo que esa cosa es la única o el bit 0. Creo que eso no está mal, no está mal. Voy a tener que ir a probar eso en mi móvil también. Arreglemos eso y te voy a mostrar una forma de probar en tu móvil, en tu escritorio, solo deberías enviarlo a tu teléfono, pero no puedes verlo. Así que arreglemos eso. Entonces tu así que hay esta opción que tienes aquí para la página actual actual en la que estamos tiene un estilo de azul. Es un poco como uno predeterminado que viene del HTML de la vieja escuela. Así que voy a decir que la corriente del botón de navegación en realidad va a ser de color blanco también. Vista previa de ti. Eso no va azul. No se pone azul. Vaya azul. Como si pudiéramos estar ahí. Vamos a previsualizar esa cosa en el móvil y luego lo llamaremos un día. Y es un día. Empezó esta cosa por la mañana y es la tarde y me detengo para almorzar ahí dentro. ¿Puedes decir cuándo probablemente mi estado de ánimo cambió en algún momento cuando me enojo y después cuando he comido mucha comida? Bien, así que vamos a publicarlo. Actualiza este y lo que puedes hacer en Chrome, Medio Oriente, no estoy seguro en otros navegadores, puedes hacer clic derecho y decir inspeccionar. Y he hecho el fondo aquí, puedes decir, muéstrame en este ícono aquí. El tuyo podría estar en otro lugar de la página. Creo que está ahí. A lo mejor el derecho por defecto, se puede decir, muéstrame en un pixel cinco, se puede ver que mi altura de ventana gráfica no es del todo correcta en esa. Podríamos simplemente poner el 100% y así lo llena completamente, o tal vez incluso más pequeño para que puedas saber que puedes desplazarte. A veces puede ser útil también que solo tengas como el 80 por ciento. Pero hecho, ya terminaste. Ya terminé. Colocar los cinco, llegar al final. Ganas un premio. Ambos ganamos premios. Los dos llegamos aquí. Espero que hayas aprendido algo. Sentí que era una parte importante del final del curso amarrarlo todo y ver cómo se conectan las diferentes partes. Y ojalá también hayas visto que existe la forma correcta de hacer las cosas. Y luego está el, solo está funcionando y está bien y artistas que están en diferentes navegadores, y le hará mucho empuje al diseñador. Entonces hay un montón de cosas que sobre todo con la longitud del nombre, es importante ver. Sobre todo si el diseñador, sé ahora cuando lo estoy diseñando, que debería estar buscando títulos más largos. Así que es genial cuando estás diseñando y desarrollando el sitio. Sí, eso es. Gracias por venir en el paseo. Espero que lo hayas disfrutado y te veré en otro video muy pronto. Adiós. 116. Proyecto de clase 08 - comercio electrónico: Oye, es la hora de la tarea, no la tarea. Es divertida, práctica aplicación de tus conocimientos. Lo que voy a hacer es conseguir que hagas lo mismo que hice en el largo video previo a esta construcción de una tienda de comercio electrónico, solo tienes que hacer un paciente. Tengo que hacer las tres. Depende de ti si tienes tiempo dual tres, pero el mínimo es solo una de las páginas. Elija la página de inicio, la página de navegación del producto o el precio de listado del producto. ¿A qué me refiero siquiera? Echemos un vistazo al sitio real. Recuerdo que hay 12 y luego la página del producto real, solo haz una de ellas. Quiero que te acostumbres a agregar el corte y cualquier página que tengas la completa o es un boleto en ella? Bien. Así que toma eso y póngalo en la página de Navegar si eso es lo que vas a hacer, o la página de inicio o dos o tres páginas, tardará un poco, aproximadamente una hora, según Dan. Entonces sí, es un trabajo razonablemente grande. Y no es otra vez, puntos de estilo, bien, No se trata de lo hermosa que es, de lo genial que es, de cómo es la interfaz de usuario. Se trata de vivir la funcionalidad y practicar el flujo de trabajo. Ese es el tipo de lugar donde al menos una de las páginas, las tres, si estás listo para ello, usa tu propio producto o compañía. Bien. Así que simplemente cambió como simplemente no hagas Scott T solo puedes ponerlo en un poco de textos refrescándose a tu propio nombre. Si hiciste el curso Figma o XD, es un buen momento para volver a ese diseño y sacar cosas de eso. Si no lo has hecho, no te preocupes, solo inventa una marca. Elige algunos colores, elige un producto, toma algunas imágenes de Unsplash, o tal vez tengas algunas de tus propias cosas. Bien. Tengo tres productos. No tienes que traerlos con un CSV, solo cargarlos. K, quiero que tengas el botón del carrito y el botón Agregar al carrito. Es un poco la gran práctica aquí es averiguar cómo conseguir que esa cosa haga lo que quieras y simplemente practicar conseguir el Agregar al carrito funcione un poco ahí. Entonces necesitas al menos una variable, que es como te mostré ahí, los diferentes pesos tú como podrían ser diferentes colores, diferentes tamaños dependiendo de lo que estés haciendo. Entonces tres productos con al menos una variante de puntos de interrupción. Así que asegurándose de que funcione en todos estos. Quiero que personalicen el carrito. Ahora tengo que hacer mucho ya que una vez podrías ser capaz gustar un poco de la misma manera dos veces. Quiero que puedas entrar aquí y realmente cambiar el estilo en él. Bien, así que mira si puedes averiguar cómo entrar ahí y hacerlo. Así que elige al menos una página, pero tres productos en tu sección de productos de tu sitio de comercio electrónico. Puede quedarse como el sitio gratuito, hacer que funcione en todos los puntos de interrupción en un carrito y el botón del carrito y ver si puede personalizar ese algodón significa usted también. Así que toma una captura de pantalla de tu página y de todos los diferentes puntos de quiebre, bien, mi app carga o puedes terminar subiendo bastantes de ellos. Si haces las tres páginas y todo tipo de puntos de ruptura de caída, puedes saltarte el paisaje móvil. Se nota que no me gusta ese punto de quiebre fue que no estaba ahí. Pero estoy seguro de que hay mucha gente que desplaza sitios web verticalmente, horizontalmente. Tomemos también una captura de pantalla del carrito y subamos eso. Y me encantaría verla, sobre todo si la envías en redes sociales. Si haces algo como tu propio proyecto, si terminas haciendo solo Scott T, Bien, Intentando el tuyo porque sería emocionante y puedes usarlo para tu portafolio. Bien, ese es tu proyecto de clase. Disfruta, disfruta el proceso, disfruta quedarte atascado. Porque cuando al final lo descubres, todo eso es un buen aprendiz. Bien, eso es. Te veré en el siguiente video. 117. ¿Qué después de tu curso de Webflow Essentials: Tú lo lograste. Sabía que lo hacías. No todos lo hacen. Tan bien hecho. Va a alta fibra nosotros lo hicimos. Hecho no es fácil llegar hasta aquí. Y yo solo quería decir, Buena Anya, porque no todos, todos los demás son como ver la televisión y tú estás aquí haciendo Webflow todo el camino. Tan bien hecho y enhorabuena. Y lo que vamos a hacer ahora es simplemente hablar de qué hacer después de esto, como mis sugerencias. Quizás quieras que Nick mire algunos otros cursos. Déjame explicarlas. ¿Podría decirnos perder mi tren de pensamiento ahí? Hablemos de los diferentes cursos que podrías hacer después de esto. Porque cuando el flujo nos lleva a un punto, he hablado un par de veces a lo largo del curso, como si no lo has hecho ya, Figma o XD es un poco como un buen lugar para estar antes Webflow haciendo el diseño allí. Entonces tengo cursos para ambos. Ve a ver mi Figma o XD Essentials. También. Otra cosa realmente útil que debes saber cuando estás usando Webflow es el código. Nos metimos un poco en partes y aprendemos un poco sobre clases y carrozas y todo tipo de otras cosas. Hay algunos HTML y CSS fundamentales que sería súper útil conocer. Aunque no quieras codificarlo. Simplemente ayuda tanto con el flujo de trabajo. Entonces ella consiguió, tengo algo se llama el curso Web Design Essentials. Utiliza VS Code como el, como la cosa. Entonces es, es bastante cody. Es solo código, pero tengo un vistazo a la intro y algunas otras cosas es que siento que la he desglosado relativamente bien ahí dentro. Así que ve a comprobarlo. Además, Malcolm, no el desarrollador, trae tu laptop, tiene un curso realmente genial sobre viento de cola y avalancha, que es una especie de CSS. Si no vas a bajar especialmente un poco más de la ruta del código puedes hacer tus propias cosas y los vientos de cola son realmente buenos marcos CSS y lo mismo que Avalanche es genial para JavaScript, así que échales un vistazo también. Otros cursos tengo lóbulos, Photoshop. Hay un básico y avanzado para Photoshop Illustrator InDesign después fijar Premiere Pro InDesign, digo eso. Entonces esos son algunos cursos con los que podrías continuar. Además, si disfrutaste del curso, asegúrate de decírselo a tus amigos, familiares y compañeros. Y también si tienes la habilidad y la facilidad, me encantaría un backlink al curso de flujo de trabajo, el increíble curso Webflow de Dan. Haga clic aquí para encontrar algo así. Esas cosas son súper valiosas para mí y para mi negocio más de lo que la mayoría de la gente sabe. Si puedes, eso sería genial. También un gran agradecimiento al traer a su equipo portátil. Yo solo soy la cara guapa aquí en el frente. Y mucho trabajo pasa detrás de escena con mis editores, Jason Hummels y Taylor Coleman. Muchas gracias. Y también un gran agradecimiento a Stephen Butler y su equipo de asistentes docentes que nos ayudan con todo el equipo de Q&A Thanks. Además, en este punto, a veces personas que son nuevas, si ya eres diseñador web, eres diseñador web, ¿de acuerdo? O desarrollador o ingeniero. Y solo estás aprendiendo el flujo de trabajo como una herramienta extra. Algunos de ustedes, sin embargo, serán un poco más aprensivos. Un poco de síndrome impostor como diseñador web del MIT. Ahora es totalmente o te doy permiso para escribir diseñador web junto a tu nombre. Está utilizando Webflow y increíble herramienta popular para crear sitios web interactivos y accesibles. Así que sal ahí fuera, siéntete orgulloso y llámate diseñador web. Aunque te doy permiso para todos. Bien hecho. Llegamos a las n's. Enhorabuena nuevamente. Vete. B3. No lo sé. No sé cómo hacerlo en estos cursos. Sí, voy a saludar y nos vamos a desvanecer a negro. ¿Estás listo? Te saludas para sentir que nos hemos llegado a conocer. veremos, te veré en otro curso. Bien. Adiós. B más o acreditar el final de estos videos.