Curso completo de Webflow: diseño en Figma, desarrollo y trabajo freelance

1. Introducción: Bienvenido a The Complete Webflow bootcamp. ¿ Alguna vez has querido construir sitios web modernos pero no sabías codificar? ¿ Quieres convertir tu diseño web en un sitio web totalmente receptivo sin código? Hola, soy [inaudible] y soy UI, diseñador UX. También doy clases de diseño de UI UX y desarrollo web en la Universidad de Economía y Ciencias Humanas de Varsovia. En este curso, te voy a mostrar cómo puedes convertir cualquier diseño en un sitio web totalmente funcional sin codificación. Sí, ¿lo oyó bien? Sin escribir una sola línea de código. Si no tienes experiencia previa en desarrollo, no te preocupes, porque este curso cubre todo lo que necesitas saber. En primer lugar, nos sumergimos en los conceptos básicos del diseño web y el desarrollo web, y luego nos adentraremos en Webflow. Webflow es una poderosa herramienta que te permite construir sitios web modernos completamente visualmente sin código. Ha sido utilizado por compañías famosas como Dell, Upwork, Zendesk, y muchas más. Pasaremos por los elementos de Webflows, el estilo, las animaciones, las interacciones, y mucho más. Una vez que aprendas los conceptos básicos de Webflow, comenzaremos a construir un sitio web completo para una agencia de diseño desde cero. Aprenderás a convertir tu diseño de Figma en un sitio web totalmente receptivo con animaciones e interacciones complejas que funcionan mejor en cualquier dispositivo sin importar si se trata de un móvil, tableta o computadora. A continuación, te compartiré algunos consejos y trucos avanzados para ayudarte a subir de nivel tus habilidades de diseño web y convertirte en un desarrollador web de clase mundial. En la última parte de este curso, te enseñaré a dirigir tu propio negocio de diseño web como freelancer. Aprenderás a conseguir a tu primer cliente, a valorar tu trabajo, a preparar unas grandes propuestas y mucho más. Este curso está dirigido a personas que son completamente nuevas en el mundo del desarrollo web. Si eres un principiante completo o un diseñador UX de UI que quiere construir sitios web increíbles sin código, este curso es para ti. Si estás listo para convertirte en desarrollador sin código y construir sitios web impresionantes en poco tiempo, te veré en clase. 2. Introducción a la Webflow: ¿ Qué es Webflow? Bueno, Webflow es una herramienta moderna y poderosa que te permite construir sitios web de diseño profesional y personalizado visualmente sin código. No me malinterpreten. No es otro constructor de sitios web basado en plantillas, como Wix y Squarespace, lo que limita tu creatividad en gran medida. De hecho, es una herramienta increíblemente poderosa que te permite codificar visualmente. Sí, me oyó bien. Con Webflow, en realidad podemos desarrollar sitios web personalizados visualmente. No viene con todas las limitaciones de esos sitios web basados en plantillas. Cuando se trata de desarrollo web, hay una amplia variedad de formas de desarrollar un sitio web. Podemos construir un sitio web escribiendo código personalizado, me refiero a HTML, CSS, y JavaScript, podemos usar plataformas basadas en plantillas como Wix, Squarespace, y WordPress, o podemos usar Webflow. Si no sabes en qué se diferencian entre sí, no te preocupes, déjame elaborar más sobre eso. La primera opción requiere saber codificar. Es necesario aprender HTML, CSS, y JavaScript para crear un sitio web. La segunda opción no requiere codificación, y te da algunas plantillas preconstruidas con las que trabajar. Esta opción es adecuada para cualquier persona que quiera construir rápidamente un sitio web sencillo, pero el trade-off es la limitación con la que viene. último, pero no menos importante, puedes usar Webflow para desarrollar realmente un sitio web desde cero sin escribir una sola línea de código, y lo más importante, sin ninguna limitación. Pero, ¿cómo es eso posible? Bueno, cuando estás usando Webflow, en realidad estás codificando un sitio web desde cero, pero visualmente. Es por eso que Webflow te permite construir sitios web profesionales y personalizados sin ninguna limitación. 3. Entorno de Webflow: Oye, en este video, vamos a hablar del entorno de Webflow. Te voy a mostrar cómo puedes registrarte y cómo puedes iniciar sesión, qué plan debes usar, y también cómo se ve toda la interfaz. Sin más preámbulos, empecemos. En primer lugar, para poder trabajar con Webflow, es necesario registrarse. Si pulsas el botón “Empezar” justo en la parte superior aquí, puedes iniciar sesión con tu cuenta de Gmail o puedes registrarte con tu correo electrónico. Depende totalmente de ti. Una vez que hayas iniciado sesión, serás redirigido al panel de control. Para poder utilizar Webflow, se pueden utilizar diferentes opciones. Puedes usar la cuenta gratuita o puedes usar uno de sus planes. ¿Cuál es la diferencia? Permítanme mostrarles qué plan necesitan para proceder con los puntajes. Básicamente, Webflow tiene planes de sitio y planes de cuenta. Nos vamos a sumergir en los detalles más adelante. Pero por ahora, es necesario saber que Webflow ofrece tres planes de cuenta diferentes. El arrancador, que es gratuito, lite, que es de $16 al mes, y Pro, que es de $35 al mes. Para las puntuaciones, necesitas usar un plan gratuito. El plan de inicio, puedes crear hasta dos proyectos. Hay algunas limitaciones, pero es perfecto para los fines educativos y con el fin de que te acostumbras a la herramienta y a la práctica. Posteriormente, cuando quieras crear proyectos para tus clientes, puedes actualizar al plan lite o al plan pro. Vamos a hablar de ello más tarde. Pero por ahora, solo regístrate y usa una cuenta gratuita. Una vez registrado, se le redirigirá a esta página. Este es el tablero. Puedes pulsar el botón “Nuevo Proyecto” y verás esta página. Hay algunas plantillas gratuitas que puedes usar y también hay algunas plantillas de pago. No obstante, para este curso, no vamos a utilizar ninguna de estas plantillas porque vamos a aprender a construir un sitio web desde cero. Siempre necesitamos crear un sitio en blanco. Basta con seleccionar esta opción, la primera. Aquí puede especificar el nombre de su proyecto. Por defecto, te da un nombre por defecto. No obstante, también puede especificar un nombre preciso para su proyecto. Vamos a llamarlo nuevo. Voy a golpear “Crear Proyecto”. Ahí vamos. Aquí está el diseñador. En realidad, podemos dividir toda la interfaz en diferentes partes principales. En el lado izquierdo, se puede ver que ahí está la barra de herramientas. Tenemos diferentes opciones. Entonces tenemos al navegante. En este momento, se selecciona el navegante. Tenemos la opción de agregar que incluye algunos elementos de los que hablaremos más adelante. Tenemos símbolos, tenemos de nuevo navegante, ya te mostré. Tenemos páginas, tenemos colecciones CMS, tenemos e-commerce, y finalmente tenemos activos. Por último, pero no menos importante, tenemos ajustes. En la parte superior, tenemos diferentes opciones. Estos son nuestros puntos de ruptura de los que vamos a hablar más adelante. Pero como puedes ver, tenemos escritorio, tenemos tablet, tenemos paisaje móvil, y tenemos retrato móvil. Esto determina básicamente la dimensión de nuestra pantalla. Del lado derecho aquí, se puede ver que tenemos diferentes opciones. Tenemos el botón de publicar, que es tan importante. Tenemos el botón de proyecto compartir, y tenemos un código de exportación. En el lado derecho, tenemos el panel de estilo. Tenemos otras configuraciones, tenemos el gestor de estilos, y tenemos la pestaña de interacciones. Vamos a hablar de cada una de estas pestañas específicamente en detalle más adelante. Pero por ahora, solo necesitas saber cómo es la interfaz. Justo en el medio, tenemos el lienzo. Aquí es básicamente donde diseñamos nuestro sitio web y construimos nuestro sitio web. Es un lienzo vacío. Como se puede ver, ya que seleccioné este elemento de cuerpo aquí, se puede ver que el panel de estilo tiene algunas propiedades ahora. Estas son las propiedades CSS que podemos modificar y utilizar para nuestros proyectos. Cada proyecto tiene una configuración de proyecto. Si te diriges a la esquina superior izquierda, puedes ver este logotipo W o Webflow. Si pasas el cursor sobre este logotipo, verás este botón del menú de hamburguesas. Si hago click en eso, tenemos tres opciones. Contamos con dashboard. Si hace clic en eso, se le redirigirá al tablero. Contamos con ajustes de proyecto y tenemos editor. Por ahora, no vamos a hablar de editor porque tenemos un video específico para eso. Pero ahora mismo, les voy a mostrar cómo se ve la configuración del proyecto. Si hago clic en eso, seremos redirigidos a la configuración del proyecto. Aquí tenemos diferentes opciones. Tenemos general, podemos especificar el nombre del proyecto. Aquí tenemos diferentes opciones de las que no vamos a hablar ahora. Contamos con hosting, tenemos editor, tenemos facturación, SEO, formularios, fondos, copias de seguridad, integraciones, y código personalizado. Una vez que empecemos a crear nuestros proyectos, te mostraré cómo puedes usar estas opciones una a una. Pero por ahora, solo necesitas saber que los ajustes del proyecto existen en realidad. Aquí hay algunas opciones a las que puedes acceder también. Si hago click en “Diseñador”, seremos redirigidos a la herramienta de diseñador, que es este entorno. Eso es todo por este video. Te veré en el próximo. 4. Introducción a los HTML y CSS: ¿ Qué pasa cuando abres una página web? Cuando visitas una página web, el navegador realmente renderiza el código escrito por el programador y te muestra el resultado. Por ejemplo, si vas a tu sitio web favorito e inspeccionas el código tú mismo, puedes ver cómo se construye ese sitio web. También puedes modificar el contenido de ese sitio web para divertirte un poco, pero localmente porque una vez que refrescas la página, todo tu arduo trabajo se ha ido. Se puede preguntar, ¿por qué estamos hablando de esto, no se supone que construimos sitios web sin codificar? Sí, como prometí, no vamos a escribir ni una sola línea de código. Pero como diseñador web y desarrollador web, es crucial que entiendas cómo se construye y estructura una página web. Cuando se trata de desarrollo web, existen dos componentes principales con los que viene cada página web, HTML y CSS. HTML significa HyperText Markup Language, y todo se trata del contenido de una página web. Básicamente le dice al navegador qué mostrar en la página; encabezados, imágenes, videos, botones, etc. trata de un sencillo código HTML, y como puedes ver, Se trata de un sencillo código HTML, y como puedes ver,incluye algunos elementos como título, cuerpo, h1, y p. Estos se llaman Etiquetas HTML. Es así como un navegador entiende lo que debe mostrar al usuario, pero esta página es aburrida. ¿No lo crees? Bueno, podemos darle estilo a cada una de estas etiquetas para que el contenido se vea más interesante. De vuelta en el día, siempre que queríamos darle estilo a nuestras páginas web, necesitábamos darle estilo a cada etiqueta una por una. Siempre que queríamos modificar nuestros estilos, ¿adivina qué? Teníamos que cambiar cada estilo en línea uno por uno. No es muy eficiente. Por eso usamos CSS. CSS es sinónimo de Hojas de Estilo en Cascada. Nos permite crear nuestros estilos una vez en un archivo separado y reutilizarlos una y otra vez en nuestro archivo HTML. Toma toda la información sobre color, posicionamiento, tamaño, alineación, topografía, y mucho más, y los pone en una hoja de estilo separada. Ahora, siempre que queremos hacer cambios, lo hacemos una vez y los cambios se aplican a todas esas etiquetas HTML de forma simultánea. Pero, ¿cómo funciona Webflow? ¿ Recuerdas cuando dije que vamos a codificar, pero visualmente, realmente quise decir eso? Déjame mostrarte cómo funciona. Aquí está el diseñador y no hay nada bajo Lienzo. Si vas a la sección Agregar, podemos encontrar algunos elementos. Estos son los elementos HTML exactos, o digamos etiquetas HTML de las que hablamos. Tenemos sección, blog div, encabezamiento, párrafo, y mucho más. Aquí en el navegante, tenemos los elementos del cuerpo. ¿ Te acuerdas de la etiqueta body en el archivo HTML? Esto define el contenido principal del archivo HTML. Cualquier archivo HTML tiene una etiqueta body, y es por eso que cuando creas una página en Webflow, siempre verás el elemento body allí por defecto. Podemos agregar otras etiquetas HTML dentro de la etiqueta body. Por ejemplo, si voy a la sección Agregar, puedo arrastrar y soltar un elemento de encabezado en mi Canvas. Mira lo que pasa. El encabezamiento está dentro del elemento corporal. En lugar de escribir un montón de códigos, simplemente arrastramos y soltamos código listo para la producción con el que podemos interactuar. ¿ Qué pasa con el estilo? Bueno, si selecciono este encabezado y me dirijo al panel de estilo del lado derecho, puedo modificar fácilmente las propiedades CSS de este elemento en particular así. Para demostrar que realmente estás codificando la página desde cero, puedo hacer clic en este botón de Vista previa de CSS en la parte inferior izquierda para previsualizar mi código CSS en vivo. Si cambio el color de este encabezado, se puede ver que aquí se ha agregado una nueva propiedad. Ahora espero que tengas una mejor comprensión de cómo funciona una página web y lo más importante, cómo funciona Webflow. 5. Introducción al modelo de caja: Aquí hay una página web sencilla que tiene algunos elementos HTML como encabezado, párrafo, una imagen. El modelo de marcas en realidad define cómo funciona el diseño en la web. Por ejemplo, aquí, cada uno de estos elementos HTML se trata como una caja. Es como un límite en cada uno de ellos. Todas estas cajas se pueden posicionar y alinear de acuerdo a las propiedades CSS que les damos. Pero, ¿por qué la web funciona así? ¿ No podemos simplemente crear una página web como una diapositiva de PowerPoint? Bueno, podemos, pero el problema es que cuando diseñas un snide, no responde y lo diseñas para una dimensión específica, pero no es el caso para una página web. A la hora de construir un sitio web, siempre queremos hacerla sensible para que pueda visualizarse perfectamente en cualquier dispositivo. No importa si es un MacBook, iMac, iPhone, tienes la idea. Usando el modelo de caja y CSS, podemos hacer páginas web receptivas. Otra cosa importante del modelo de caja es que podemos poner cajas dentro de otras cajas. De esta forma, podemos decidir si se apilan uno encima del otro o al lado del otro. También podemos alinearlos como quieras. Si quisiéramos modificar el espaciado, podemos usar márgenes y relleno. margen agrega espacio fuera de la caja, mientras que el relleno agrega espacio dentro de la caja. Echemos un vistazo a un ejemplo del mundo real. Aquí tenemos diferentes tarjetas y dentro tenemos diferentes elementos. De hecho, todas son consideradas como cajas, que están posicionadas ya sea una al lado de la otra o dentro de la otra. Podemos modificar las propiedades CSS de cada una de estas cajas para controlar el estilo y el diseño de cada elemento. Echemos un vistazo a algunos sitios web famosos. Como se puede ver, todos estos sitios web se construyen utilizando el modelo de caja. Si quieres convertirte en un diseñador y desarrollador web profesional, necesitas entender cómo funciona a fondo el modelo de caja. 6. Elementos de Webflow: Como recuerdas, hablamos de elementos HTML o digamos etiquetas HTML. En Webflow, los puedes encontrar en la sección Agregar. En el lado izquierdo, si haces click en este icono de “Plus”, puedes ir a la sección Agregar, y aquí tenemos dos pestañas diferentes, Elementos y Layouts. En realidad, la pestaña Layouts incluye algunos diseños preconstruidos. No vamos a trabajar con estos diseños preconstruidos en nuestros proyectos ya que vamos a crear nuestro propio layout, pero solo necesitas saber que existen. Si vas a la pestaña Elementos, sin embargo, puedes encontrar aquí todos los elementos HTML. Contamos con diferentes secciones como Diseño, Básico, Topografía, CMS, Medios, Foros, y Componentes. Vamos a hablar de cada uno de estos elementos específicamente en los próximos videos, pero por ahora, te voy a mostrar cómo puedes usar estos elementos, cómo puedes agregar estos elementos a tu Canvas. Bueno, para agregar un elemento a tu Canvas, simplemente puedes arrastrar y soltar ese elemento en particular aquí, así como así. Como puedes ver, ahora tenemos el elemento de sección. Podemos ver todos nuestros elementos justo en el navegador. Si quieres encontrar el navegador, puedes hacer click en este ícono. Si voy a la Agregar y trato de arrastrar y soltar otro elemento. Por ejemplo, un contenedor, ahí vamos, se puede ver que el contenedor se ha agregado justo debajo de la sección. Es necesario entender que en el diseño web y el desarrollo web, la jerarquía de nuestras capas importa. Por ejemplo, aquí, cuando tenemos una sección, como puedes ver, esta sección se coloca justo en la parte superior. Es por eso que al echar un vistazo al Lienzo, se puede ver que la sección se ha colocado encima del contenedor. Si quiero poner el contenedor encima de la sección, simplemente puedo arrastrarlo y soltarlo justo encima de la sección y ahí vamos. Se ha cambiado su lugar. Cada elemento tiene su icono específico justo al lado de su nombre. Por ejemplo aquí, como puedes ver, el contenedor tiene un icono único y una sección tiene su propio icono único. Es una muy buena manera de averiguar qué tipo de elemento estás usando. Como recuerdan, cuando hablamos del modelo de caja, mencioné que se pueden poner cajas dentro de otras cajas. Echemos un vistazo a un ejemplo. Si selecciono este contenedor, puedo arrastrarlo y soltarlo, y ponerlo dentro de la sección. Ahí vamos. Ahora bien, este contenedor está anidado dentro de esta sección, y como puedes ver, ha sido sangrada. Puedo agregar otro elemento, por ejemplo, un bloque Div dentro de mi contenedor aquí, allá vamos, y también ha sido anidado. El contenedor es ahora el padre de este elemento de bloque Div y el bloque Div es el hijo de este contenedor. El contenedor es hijo de sección y la sección es el padre del contenedor. Por lo que fácilmente puedo colapsar y expandir estos elementos. Si tienes múltiples secciones y múltiples elementos, así como así, y quieres colapsar todos al mismo tiempo, puedes hacer clic en este ícono justo en la parte superior, y si hago clic en él, una vez más, puedo ampliarlos todos. También puedes expandir el navegador haciendo clic en este icono, y puedes anclar el navegador así como así. En los próximos videos, vamos a sumergirnos en elementos de Webflow. Nos vemos entonces. 7. bloque de Div: ¿ Qué es un bloque Div? Bueno, un bloque Div es el cuadro más básico de una página web. Si vas a la sección de agregar, puedes ver que aquí tenemos diferentes secciones. Contamos con maquetación, básica, topografía, etcétera Ahora bajo la sección básica, tenemos diferentes elementos y el primero se llama Bloque Div. Si trato de arrastrarlo y dejarlo caer en mi lienzo, puedes ver que aquí se ha agregado el bloque Div a mi lienzo, y ocupa todo el ancho del lienzo. En realidad, un bloque Div se dimensiona en función del contenido interior. No obstante, aquí como se puede ver creó un límite, y parece que hay algunos por dentro. No obstante, si previsualizo eso, si solo hago clic en este ícono i, podemos ver que no hay nada aquí. En realidad es una caja vacía. Se trata de un cuadro dinámico porque cuando le agregues cada vez más elementos, su tamaño se cambiará en consecuencia. Vamos a intentarlo. Voy a seguir adelante y tratar de agregar un encabezamiento a este bloque Div. Igual que eso. Ahora, voy a seguir adelante y añadir un párrafo. Ahí vamos. Déjame seguir adelante y añadir un botón. Enfriar. Ahora, estos tres elementos están dentro de este bloque Div. Como puede ver, el tamaño del bloque Div se ha cambiado en consecuencia. Si elimino uno de estos elementos, se puede ver que el tamaño del bloque Div se ha cambiado de nuevo. Un bloque Div generalmente puede ser cualquier cosa. Podría ser una imagen, podría ser una línea. Pero la mayoría de las veces, utilizamos un bloque Div con el fin de alinear elementos y agrupar elementos juntos. Por ejemplo, aquí agrupamos estos dos elementos juntos. Siempre que queramos modificar, por ejemplo, el margen de estos bloques Div en particular, podemos simplemente dirigirnos a esta sección de pegar en el panel lateral aquí. Por ejemplo, puedo establecer el margen superior en 70. Ahí vamos. Ambos elementos se han movido porque están agrupados dentro de este bloque Div. A pesar de que un bloque Div ocupa todo el ancho del lienzo por defecto, también podemos darle un ancho y alto específicos. Si te diriges a la sección de tamaño del panel de estilo aquí, puedes especificar un ancho particular, por ejemplo, 400 píxeles. Ahí vamos. Podemos modificar la altura también. Podemos ajustarlo a 300 píxeles, y se ha modificado la altura del bloque Div. Ahora este bloque Div tiene un ancho y altura fijos. Dependiendo de nuestras necesidades, podemos dar a nuestros bloques Div ancho y altura específicos. Como mencioné antes, un bloque Div puede ser cualquier cosa, por ejemplo, una imagen. Déjame seguir adelante y arrastrar y soltar y otro bloque Div aquí justo debajo de este párrafo. Supongamos que queremos agregar una imagen aquí, por ejemplo, queremos hacer de este bloque Div una imagen. Podemos ir al panel de diapositivas, podemos desplazarnos hacia abajo. Si vamos a la sección de antecedentes. Aquí tenemos imagen y gradiente. Si hago clic en este botón más desde aquí, puedo dar click en Elegir imagen y puedo obtener acceso a todos mis activos. Por ejemplo, usemos esta imagen. Por ahora, no vamos a hablar de todos estos ajustes, pero déjame cambiar la posición a centro y color. Ahí vamos. Como puedes ver, tenemos este bloque Div, pero este bloque Div en realidad tiene un fondo de imagen. Si quiero hacerlo más grande, puedo establecer el tamaño, por ejemplo, la altura a píxeles. Por supuesto, vamos a hablar de todas estas propiedades. En realidad, estas son propiedades CSS en los próximos videos, pero por ahora solo necesitamos enfocarnos en los elementos de flujos web. Tenemos que entender cómo funcionan, y por qué los necesitamos para construir un sitio web profesional y moderno. 8. Sección: ¿ Qué es una Sección? En este video, vamos a hablar de Secciones. Si vas a la sección Agregar aquí, debajo del diseño, puedes ver que tenemos diferentes elementos. Contamos con Sección, Contenedor, Cuadrícula, y Columnas. Aquí, voy a seguir adelante y añadir una Sección a mi lienzo. Déjame arrastrar y soltar una Sección aquí, y allá vamos. Se ha agregado la Sección. Bueno, una Sección en realidad ocupa todo el ancho de la ventana del navegador, pero espera, ¿no es como un Bloque Div? Sí, en realidad actúa como un Bloque Div, sin embargo, con una diferencia. La única diferencia entre una Sección y un Bloque Div es en realidad el significado del contenido que pones dentro de estos elementos. Cuando usamos una Sección, el contenido interior debe estar conectado lógicamente. Por ejemplo, cuando diseñamos un sitio web, podemos tener diferentes secciones, la sección héroe, la sección cliente, la sección testimonial, y cada sección tiene algún contenido. Por ejemplo, un título, un subtítulo, un botón. Cuando agrupamos todos esos contenidos, los ponemos dentro de una Sección, por lo que los agrupamos usando una Sección no un Bloque Div. Para cualquier otra cosa, podemos usar un Bloque Div. Por ejemplo, cuando queremos alinear algunos elementos, cuando agrupamos algunos elementos para darles estilo. Esta es básicamente la principal diferencia entre un Bloque Div y una Sección. Cuando empecemos a diseñar nuestros proyectos, realmente entenderás cuál es la diferencia entre una Sección y un Bloque Div. Pero por ahora, permítanme decirles que utilizamos Secciones para estructurar nuestros sitios web. Básicamente para cualquier sitio web, para cualquier proyecto, lo que debes hacer es agregar una Sección justo después del elemento corporal. Aquí necesitamos agregar una Sección y podemos agregar nuestro contenido y nuestros Bloques Div dentro de esta Sección. Vamos a intentarlo. Voy a tomar este Bloque Div. Dado que este Bloque Div tiene una altura específica, permítanme configurarlo en auto. Voy a establecer la altura a auto. Entonces lo voy a arrastrar y soltar dentro de la Sección. Ahí vamos. A Sección se dimensiona en función del contenido interior. Para entenderlo mejor, voy a seleccionar esta Sección y voy a dirigirme hacia el panel lateral del lado derecho y dejarme modificar el color del fondo. Voy a ir a Fondo y por defecto, está configurado en transparente. Voy a ponerlo en otra cosa. Por ejemplo, esta morada. Ahora se puede ver que la altura de esta Sección está determinada por el contenido en su interior. Si selecciono este Bloque Div, esta imagen, y modifico su altura a 200 píxeles, se puede ver que también se ha modificado la altura de esta Sección. Siempre debes tener en cuenta que la altura de la Sección se determina con base en el contenido interior. Como mencioné antes, una Sección por defecto recoge todo el ancho del lienzo, o digamos la ventana del navegador. No obstante, podemos modificar eso. Podemos anular estas preferencias y estas propiedades. Si te diriges al tamaño aquí, déjame mostrarte, puedo establecer el ancho en 500 píxeles, por ejemplo, así como así. Puedes anular fácilmente todas estas propiedades. Hablaremos de estas propiedades más adelante, pero por ahora, solo necesitas saber que estructuramos nuestros sitios web siempre así. Después de la Sección, solemos poner un Contenedor y luego añadiremos nuestro contenido dentro de un Contenedor. Hablaremos sobre el Contenedor en el próximo video. 9. Recipiente: ¿ Qué es un contenedor? En este video, vamos a hablar de contenedores. Si voy a la sección Agregar como de costumbre, puedo dirigirme a la sección de diseño y desde aquí justo al lado de la sección, puedo encontrar contenedor. Como mencioné en el video anterior, cuando diseñamos un sitio web, tratamos de estructurar nuestro sitio web de una manera particular. En realidad, tratamos de mantener todo organizado. Por eso tenemos aquí todos estos elementos diferentes. Básicamente, las secciones y contenedores son solo bloques div con algunos estilos predefinidos. Por ejemplo, un contenedor tiene un ancho específico. Si trato de arrastrar y soltar un contenedor en mi lienzo, ahí vamos. Como puedes ver, es solo un div simple que tiene un ancho máximo. Tiene un ancho específico de 940 píxeles por defecto. Si quiero mantener todo organizado, puedo tomar este bloque div, voy a establecer el ancho para auto así como así. Como puedes ver este bloque div ya que el ancho y la altura están configurados en auto toma todo el ancho de la página. Si quiero mantener todo bien organizado en el centro, puedo seleccionar este div like y arrastrarlo y dejarlo caer en mi contenedor. Ahí vamos. Ahora todo se coloca dentro de este contenedor que tiene un ancho predeterminado. Por supuesto, puedes seguir adelante y modificar su ancho, si lo deseas. Por ejemplo, para pantallas más grandes, puede dirigirse a la propiedad size, a la sección size aquí y establecer el ancho máximo en 1100. Justo así. Depende totalmente de ti cómo quieres usarlos. Puedes decidir no usar un contenedor y solo usar un bloque div y establecer un ancho específico para eso. Eso está totalmente bien. Tan sólo hay que saber que estos son solo elementos preconstruidos con el fin de hacer nuestra vida mucho más fácil. Espero que ahora sepas la diferencia real entre una sección, contenedor, y un bloque div. Básicamente son todos iguales. Se trata de variaciones de un bloque div con estilos predefinidos. Como mencioné en el video anterior, cada vez que queremos diseñar un sitio web, cada vez que queremos construir un sitio web, primero utilizamos una sección, luego utilizamos un contenedor y dentro pondremos nuestros elementos. Esta es la mejor manera de organizar y estructurar un sitio web. Si necesitamos crear más secciones, simplemente podemos arrastrar y soltar más secciones aquí, o simplemente podemos copiar y pegar nuestras secciones así. 10. Cuadrilla: ¿ Qué es una grilla? En este video, vamos a hablar de cuadrículas CSS. Si te diriges a la sección Agregar bajo la categoría Diseño, puedes ver que tenemos un elemento de cuadrícula. En realidad es una cuadrícula CSS. No es una etiqueta HTML porque básicamente, podemos convertir cualquier bloque en una cuadrícula. Hablaremos de ello en los próximos videos pero por ahora, sigamos adelante y arrastremos y soltemos estos elementos de cuadrícula en nuestro lienzo. Ahí vamos. Aquí tengo una sección, y luego tengo un contenedor. Dentro de este contenedor, voy a soltar mi rejilla. Como se puede ver, una cuadrícula no es más que una guía. Las rejillas nos ayudan a organizar nuestro contenido de una manera dinámica. Cuando tenemos múltiples imágenes, por ejemplo, que queremos organizar dinámicamente, o incluso cuando tenemos algunos bloques Div que queremos organizar de forma dinámica y ordenada, podemos usar rejillas. Es necesario entender que una cuadrícula sirve de guía, por lo que es como un Marcador de posición para nuestro contenido. Como puedes ver ahora, estamos en el modo de edición. Aquí, por defecto tenemos dos columnas y dos filas, y si miras el lado derecho, puedes ver que aquí podemos modificar las preferencias de nuestra cuadrícula. Por ejemplo, podemos modificar la cantidad de canaleta, que es el espaciado entre filas y columnas. Por defecto, se establece en 16 por 16 píxeles. Puedes ajustarlo a la cantidad que quieras. También puedes modificarlo aquí manualmente así como así, y si quieres agregar más columnas y más filas a tu cuadrícula, simplemente puedes hacer clic en este botón Plus justo aquí para agregar más columnas, y si quieres agregar más filas, puedes hacer click en este botón Plus aquí. Alternativamente, puedes presionar este botón Plus justo en la configuración para agregar una nueva columna y para filas, puedes hacer clic en este botón Plus. Una vez que hayas creado tu cuadrícula, debes salir del modo Editar. Para ello puedes presionar Escape en tu teclado o puedes hacer clic en este botón azul Hecho en la parte inferior aquí. Como pueden ver, ya creé cuatro bloques Div simples, y cada uno de ellos incluye un encabezado, un párrafo, y un botón. Lo que vamos a hacer es arrastrar y soltar estos bloques Div en nuestra cuadrícula, pero primero, veamos cuántos bloques tenemos. Tenemos en realidad cuatro bloques Div diferentes, por lo tanto, voy a seleccionar aquí mis elementos de cuadrícula y luego voy a dar clic en este botón rojo o rosado. Ya que tenemos cuatro bloques Div diferentes, voy a quitar algunas de estas columnas y filas. Quitemos dos de estas columnas y dos de estas filas. Ahora tenemos una cuadrícula de dos por dos; tenemos dos columnas y dos filas. Eso es perfecto. Ahora, voy a ajustar el hueco o la canaleta, así que vamos a ponerlo en 20 tanto para columnas como para filas. Voy a dar clic en este botón Hecho, y eso es todo. Ahora lo que tenemos que hacer es seleccionar nuestro bloque Div, arrástrelo y soltarlo dentro de la cuadrícula, así como así. Algo a mencionar de las cuadrículas es que cuando añadas contenido a tu cuadrícula, el contenido tomará la siguiente celda disponible dentro de la cuadrícula. Como se puede ver, el primer bloque Div tomó la primera celda, y ahora si selecciono este bloque Div y lo arro y lo suelto dentro de la cuadrícula, podemos ver que tomó la siguiente celda disponible. Por supuesto, si modifico su orden en el navegante, se puede ver que su lugar cambia, así como así. Ahora hagamos lo mismo por los dos bloques Div restantes. Voy a seleccionarlos y arrastrarlos y soltarlos aquí. Ahí vamos. Hagamos lo mismo para el último bloque Div. Nuestros bloques Div están dentro de nuestra red. No obstante, si selecciono mi cuadrícula, y si voy al modo de edición, se puede ver que estas celdas son más grandes, y estos bloques Div no ocupan todo el ancho de cada celda. Eso es porque le di a estos bloques Div un ancho fijo. Entonces si selecciono contenido y modifico el ancho de 400 a Auto, mira qué pasa. Ahora ocupa todo el ancho de esa celda, y eso es exactamente lo que queremos. Si desea modificar la altura de su cuadrícula, puede seleccionar su cuadrícula y establecer la altura en, por ejemplo, 700 píxeles, así como así. O puedo ajustarlo a 500 píxeles. Permítanme quitar este apartado por un segundo. Una de las cosas más importantes de las rejillas es que por defecto son receptivas. Echemos un vistazo. Si presiono el botón Vista previa aquí e intento modificar la dimensión de mi pantalla, se puede ver que estos contenidos son dinámicos. Están respondiendo por defecto porque usamos una cuadrícula. Por eso las rejillas son tan poderosas en cuanto a capacidad de respuesta. Si voy al punto base de escritorio y quiero agregar algo de relleno, puedo seleccionar el Contenedor, y luego aquí puedo establecer algún relleno. Por supuesto hablaremos de todas estas propiedades más adelante, pero solo quiero mostrarles cómo funcionan las rejillas, en realidad, en términos de capacidad de respuesta. Ahí vamos. Pero ¿y si quiero modificar el diseño de esta cuadrícula? Eso es tan sencillo. Puedo seleccionar mi cuadrícula, puedo ir al modo Editar. Desde aquí, puedo modificar el número de filas y columnas. Supongamos que quiero apilar estos contenidos verticalmente. Solo necesito tener una columna. Voy a quitar esta columna, y voy a añadir dos filas más y golpear “Done” y ya está hecho. Como puedes ver, ahora tenemos cuatro filas diferentes que se colocan una encima de la otra y son dinámicas. Si trato de comprobar su capacidad de respuesta, se puede ver que siguen siendo dinámicos en todos los dispositivos. Pero ¿y si quieres hacer que uno de estos bloques Div tome más de una celda? Nosotros también lo podemos hacer. Añadamos una columna y eliminemos estas dos filas adicionales, así como así. Voy a quitar el Rumbo 4, este último bloque de Div. Supongamos que quieres tomar el Rumbo 3, este último bloque de Div, ¿ y querías tomar las dos últimas celdas? Para ello, puedes usar este mango justo en la esquina inferior. Si hago click izquierdo sobre eso y arro y suelto, ahí vamos, ahora fácilmente podría gastar el contenido para ocupar más celdas. La buena noticia es que sigue siendo dinámica y sigue respondiendo. Echemos un vistazo. En ocasiones, es posible que necesitemos colocar nuestro contenido de forma manual. Como recuerdan, mencioné que cuando agregas contenido a tu cuadrícula, ocupa la siguiente celda disponible por defecto. Pero ¿y si quiero colocarlos manualmente? Bueno, podemos hacer eso. Déjame deshacer la operación. ¿ Y si quiero colocar aquí este último bloque de Div en estas últimas celdas? Bueno, lo podemos hacer. En primer lugar necesitamos seleccionar este bloque Div, y si nos dirigimos a la configuración de Grid Child en el lado derecho, se puede ver que por defecto, su posición está configurada en auto. Si lo configuro en manual, ahora, solo puedo arrastrarlo y soltarlo aquí. Ahora podríamos posicionar fácilmente nuestro contenido de forma manual. Espero que ahora tengas una mejor comprensión de las rejillas. Vamos a trabajar con rejillas al lote cuando empecemos a crear nuestros proyectos. Entonces nos vemos. 11. Lista: Hay momentos en los que queremos enumerar algunos elementos en nuestro proyecto, no importa si tenemos una lista de imágenes o una lista de ítems, el Elemento List podría ser tan útil. Si vas a la sección Agregar bajo la categoría básica, puedes encontrar una lista. Si arrastro y suelto la lista en mi contenedor, puedes ver que por defecto tiene tres elementos de lista. Como puedes ver, aparece esta ventana de Configuración de lista. Tenemos dos tipos de listas. Tenemos la lista desordenada y la lista ordenada. La diferencia es ésta. Cuando se utiliza una lista desordenada, no hay número. Si lo pones a pedido, puedes ver que tenemos números. Déjame seleccionar esta lista y modificar el color de este texto a blanco para que puedas ver mejor. Perfecto. Si lo pongo a desordenado, se puede ver que sólo tenemos puntos de bala. En cuanto a estilo, no tenemos balas en absoluto y balas. Permítanme hacer doble clic en el primer elemento de la lista aquí para agregar algo. Escribamos elementos. Para la segunda, voy a escribir otra cosa, vamos a escribir diseño web. Para el último, voy a escribir desarrollo web. Genial. Ahora, tenemos tres ítems de lista diferentes y si quiero agregar más listas ítems, simplemente puedo copiarlo y pegarlo usando Comando C y Comando V o Control C y Control V. Alternativamente, puedes ir a la sección Agregar y debajo de la categoría Básica, se puede ver que tenemos un elemento separado para el Elemento de Lista. Puedes arrastrar y soltar un elemento de lista solo dentro de una lista, así como así. Pero ¿en realidad podemos enumerar algunas imágenes? Por supuesto que podemos. Déjame mostrarte. Puedo ir a los Activos y puedo arrastrar y soltar una imagen aquí. Ahí vamos. Voy a disminuir su ancho a, digamos 300 píxeles. No importa el tipo de elementos que tengas, siempre puedes enumerarlos. Si desea abrir la configuración de lista, puede seleccionar su elemento de lista en el navegador y puede hacer clic en este icono de “Configuración” justo al lado del nombre de la lista. Ahí vamos. Alternativamente, puedes seleccionar tus elementos de lista y puedes dirigirte a la Configuración de elementos justo al lado del panel de estilo aquí mismo, y tenemos la Configuración de lista. 12. Bloque de enlace: ¿ Qué es un bloque de enlace? Bueno, un bloque de enlace es un contenedor clicable. Cualquier contenido que pongas dentro de un bloque de enlaces se hará clicable. Es muy útil porque a veces podríamos necesitar redirigir a los usuarios a otra página u otra sección de nuestro sitio web, o incluso a otro sitio web. Podemos hacerlo mediante el uso de un bloque de enlace. Si vas a la sección Agregar debajo de la básica, puedes ver que tenemos este bloque de enlaces. Déjame arrastrar y soltar un bloque de enlace justo en este contenedor y como puedes ver es solo un bloque div sin embargo, se puede hacer clic. Este bloque de enlace tiene algunas configuraciones. De forma predeterminada, se puede ver la URL, aquí se puede especificar la URL a la que se desea redirigir al usuario. Por ejemplo, aquí puedo escribir google.com. Puedo ir a la página cuando creemos más páginas para nuestro sitio web, por ejemplo, Página de contacto, Página de registro, etc podemos elegir nuestra página aquí. Cuando creamos diferentes secciones en nuestro sitio web, podemos utilizar esta sección de página. Por ejemplo, cuando creamos un [inaudible], podemos tener algunos menús. Cuando el usuario hace clic en uno de esos menús, el usuario debe ser llevado a una sección específica de nuestra página de aprendizaje. Podemos elegir una sección aquí. Hablaremos de todas estas configuraciones más adelante cuando realmente empecemos a usarlas, puedes establecer una dirección de correo electrónico, el tema de ese correo electrónico, puedes establecer un número de teléfono y finalmente, incluso puedes elegir un archivo adjunto. Es necesario recordar que se puede usar un bloque de enlace para cualquier cosa. Puedes usarlo para tarjetas, puedes usarlo para elementos específicos, un ícono, cualquier cosa. Déjame seguir adelante y añadir un encabezamiento aquí dentro sólo para mostrarte cómo funciona. Como pueden ver, en cuanto agrego aquí el encabezado a este bloque de enlaces, su estilo ha sido cambiado porque ahora es un enlace. Puedo seguir adelante y anular manualmente estos ajustes. Por ejemplo, bajo la sección de tipografía del panel lateral, puedo establecer su declaración en ninguna. Déjame modificar su color a blanco, así como así. Si obtengo una vista previa de nuestro proyecto, ahora se puede ver que tan pronto como pase el cursor sobre este encabezado, el cursor se ha cambiado a un puntero. Ahora bien, si no puedes ver el puntero, probablemente sea por culpa de tu navegador. Puedes borrar la caché de tu navegador o probarla en otro navegador. Pero un bloque de enlace cambia automáticamente tu cursor a un puntero. Si hago clic en eso, no pasa nada porque no especificamos un enlace para eso. Si selecciono este bloque de enlaces y modifico la URL, por ejemplo, configurémoslo en google.com. Ahora bien, si previsualizo eso y si hago clic en él, me redirigirán a Google. En pocas palabras, un bloque de enlace es un bloque div clicable. Bueno, hay momentos en que queremos convertir nuestros bloques div en un bloque de enlace en lugar de crear un bloque de enlace desde cero. Por supuesto, podemos seguir adelante y arrastrar y soltar un bloque de enlace aquí y agregar un bloque div dentro y diseñar nuestras tarjetas y elementos. Pero a veces podríamos diseñar primero nuestra tarjeta o nuestros elementos, y luego podríamos necesitar convertirla en un bloque de enlace. ¿ Cómo podemos hacer eso? Si seleccionamos nuestro bloque div, por ejemplo, aquí, esta tarjeta, y si haces clic derecho en su nombre justo debajo de Canvas, tenemos muchas opciones. El segundo dice convertir a bloque de enlace. Si hago clic en él, ahí vamos. Ahora el estilo de estos elementos, los elementos secundarios se han cambiado porque ahora es un eslabón. Por supuesto, puedo seguir adelante y anular estos ajustes, pero no voy a hacer eso porque sólo quiero mostrarles cómo funciona el bloque de enlaces. Si previsualizo mi proyecto, ahora puedes ver que esta tarjeta se puede hacer clic así como así. No obstante, las otras cartas no son porque las otras tarjetas sean simplemente bloques div simples. 13. Botón: Casi todos los sitios web usan botones. Los botones son tan importantes cuando se trata de diseño web y desarrollo web, porque permiten a los usuarios tomar acciones. Generalmente se utilizan para nuestro llamado a la acción. Si vas a la sección Agregar, podemos ver que tenemos el botón debajo de la básica. En realidad, un botón no es más que un bloque de enlaces. Se trata de sólo unas marcas clicables con un bloque de texto en su interior. Si arrastro y suelto este botón en mi tarjeta, puedes ver que tiene algunos estilings por defecto, y puedo darle una URL al igual que un link como tenemos todas estas configuraciones que ya discutimos. Pero por ahora, sigamos adelante y previsualemos eso. Como se puede ver el cursor ha sido cambiado, porque de hecho es un bloque de enlace. Podemos modificar todas las propiedades de este elemento de botón. Por ejemplo, podemos modificar su color aquí en el panel de estilo. Si haces doble clic en eso, puedes modificar el texto. Escribamos inicio de sesión así, pero a veces es posible que necesitemos crear un botón personalizado. Por ejemplo, si desea agregar un icono a este botón, no podemos usar el elemento button. Necesitamos usar un bloque de enlace, y luego necesitamos agregar un bloque de texto dentro y también una imagen. Es así como puedes crear un botón personalizado, y hablaremos de ello más adelante. El elemento botón tiene diferentes estados. Hablaremos de estados a detalle, pero por ahora solo necesitas saber que cada botón tiene algunos estados. No tiene ninguno, desliza, se presiona, se enfoca, y se visita. Si te diriges a la sección Selector, aquí es donde especificamos nuestras clases CSS de las que hablaremos más adelante, y si haces click en esta flecha hacia abajo, podrás ver todos los estados de tu botón. Si voy al hover, puedo modificar el estilo de forma sencilla, así como así. Ahora si voy al estado none y previsualizo este botón, y paso el cursor por encima, se puede ver que el estado de hover tiene un estilo diferente. Cuando nos sumergamos en las propiedades de estilo y CSS, hablaremos de todos estos detalles. 14. tipografía: Cuando se trata de diseño web y desarrollo web, tipografía juega un papel importante. No me imagino diseñar un sitio web sin usar texto, ¿verdad? En este video, vamos a hablar de tipografía. Si te diriges a la sección Agregar bajo la categoría Tipografía, puedes ver que tenemos seis elementos diferentes. Tenemos encabezamiento, párrafo, enlace de texto, bloque de texto, cotización en bloque, y texto enriquecido. Vamos a sumergirnos en cada uno de ellos. Voy a empezar con rumbo. El encabezado es una etiqueta HTML. Se utiliza para crear títulos y subtítulos. Tenemos seis rubros diferentes, de H1 a H6. Una cosa importante de los encabezamientos es que los motores de búsqueda y los lectores de pantalla intentan entender el contenido de nuestro sitio web en función de los encabezados, por lo que debes asegurarte de usarlos correctamente. Ahora mismo, aquí tengo dos cartas diferentes, y justo en la parte superior tengo un rumbo. Como se puede ver, dice H1. Si hago clic en este “icono de configuración”, puedo elegir el tipo de encabezado. Como pueden ver, tenemos seis rubros diferentes. H1 es el más grande, y H6 es el más pequeño. H1 define el título o subtítulo más importante en tu página web, mientras que H6 define el título o subtítulo menos importante en tu página web. Debes asegurarte de usarlos sabiamente porque Google, por ejemplo, comprueba tus encabezados para analizar tu contenido y clasificar tu sitio web. Cuando empecemos a construir nuestro proyecto hablaremos mucho de encabezamientos, pero por ahora solo necesitas saber que tenemos seis rubros diferentes, y H1 es la más importante, y H6 es la menos importante. Algo a mencionar aquí es que nunca debes usar encabezados solo para hacer un texto más grande o audaz, eso está mal. Para ello, puedes usar propiedades CSS de las que hablaremos más adelante. Los encabezados tienen estilos predeterminados. Tienen tamaños de fuente predeterminados, pesos de fuente, etc. Pero puedes anular estos estilos predeterminados más adelante. Ahora pasemos a los siguientes elementos tipográficos, que es párrafo. Párrafo nos permite crear contenido multifrase. Como pueden ver aquí, tengo un párrafo y aquí hay múltiples líneas de texto. Puedo hacer doble clic para modificar fácilmente este párrafo, y si quiero darle estilo a una palabra específica o a varias palabras aquí puedo seleccionarla, así como así, y puedo usar el estilo en línea aquí. Por ejemplo, puedo ponerlo en negrita, puedo convertirlo en un enlace así, o simplemente puedo seleccionar mi párrafo y borrar el formato. Hablaremos de esta opción Envolver con spam más adelante, es más avanzado, así que lo vamos a dejar por ahora. Pasemos al siguiente elemento. Como puedes ver aquí tenemos un enlace de texto. Un enlace de texto es solo un texto en el que se puede hacer clic igual que un botón, puedes usarlo para un botón de texto. Déjame arrastrar y soltar un enlace de texto aquí, y lo voy a colocar justo al lado de este botón. Como se puede ver, esto es sólo un enlace. Cuenta con todas las características de un enlace como puedes ver, podemos especificar una URL. Podemos simplemente modificar todas estas preferencias aquí. De hecho, este botón Read More es un enlace de texto con algún relleno, por lo que si quieres crear un botón personalizado simplemente usas un enlace de texto y luego lo peinas. Pasemos al siguiente elemento, que es el bloque de texto. utiliza un bloque de texto para cualquier cosa que no sea un encabezado, párrafo, o un enlace de texto. Déjame seguir adelante y arrastrar y soltar este bloque de texto aquí, allá vamos. Como puedes ver, es solo un contenedor con un texto dentro. Puedes hacer doble clic sobre él para modificar el texto, darle estilo, e incluso puedes convertirlo en un enlace de texto así como así. Ahora el texto dentro es un elemento de enlace. Se utiliza para algo como una descripción o el descargo de responsabilidad de los derechos de autor. Hablaremos de los casos de uso de los bloques de texto más adelante. Pasemos al siguiente elemento, que es la cotización de bloque. Bloquear cotización, te permite crear una cotización. Déjame arrastrar y soltar esta cita de bloque aquí, y como puedes ver, es solo un bloque de texto con algunos estilos predefinidos. Si hago doble clic en eso, simplemente puedo modificar el texto. Esta es una cotización en bloque. Tiene esta frontera izquierda. por defecto obviamente puedes modificar todas las propiedades, hablaremos de eso. Si desea utilizar una cotización en su proyecto, puede utilizar los elementos de cotización de bloque, o alternativamente puede crearla manualmente. Pasemos al siguiente elemento que es texto enriquecido. El elemento de texto enriquecido es tan poderoso. ¿ Por qué? Porque reúne todo tipo de elementos juntos. Por ejemplo, aquí tenemos un texto rico. Este texto enriquecido puede utilizar muchos elementos diferentes como encabezados, párrafos, imágenes, videos, enlaces, lo que sea. ¿ Por qué necesitamos usarlos? Es útil porque es más fácil modificar los contenidos cuando tenemos un texto enriquecido. Si tan solo hago doble clic aquí, simplemente puedo modificar este párrafo. Simplemente puedo crear un nuevo párrafo si presiono “Enter” así como así, o simplemente puedo hacer clic en este botón “Plus” y subir una imagen, un video, un código personalizado, o incluso una lista. Déjame seguir adelante y subir una imagen aquí. Ahí vamos, nuestra imagen está lista. Puedo alinearlo a la izquierda. Es muy fácil personalizar todo dentro del texto enriquecido. Lo más importante es que cuando creas un sitio web para un cliente es muy práctico usar un texto enriquecido porque el cliente no es un desarrollador web ni un diseñador web. Él o ella necesita modificar el contenido fácilmente. Simplemente pueden dirigirse a este texto enriquecido y simplemente agregar imágenes, videos, modificar el contenido, darle estilo al encabezado, darle estilo al párrafo, etcétera. Hablaremos del editor más adelante, pero por ahora solo necesitas saber que el texto enriquecido puede agrupar todos los elementos: imágenes, videos, encabezamientos, párrafos, cualquier cosa. 15. Imagen: ¿ Te imaginas diseñar un sitio web sin imágenes? No puedo. En este video, vamos a hablar de imágenes. Voy a golpear a la sección Agregar, y desde la categoría de medios, voy a arrastrar este elemento de imagen y dejarlo caer justo dentro de mi contenedor en el navegador, así como así. Aquí hay un elemento de imagen, y tiene diferentes configuraciones. Podemos utilizar este elemento de imagen para subir formatos de archivo populares como PNG, JPG, SVG, etcétera. Bueno, las imágenes son nuestros activos. Por lo tanto, para poder utilizar una imagen en tu proyecto, primero, es necesario subirlas. La mejor práctica es simplemente subir todos tus activos en el panel Activos primero, cuando empieces a crear tu proyecto, y luego empezar a trabajar en el diseño y el contenido. De esta forma, podrás acceder fácilmente a tus activos cuando quieras. Alternativamente, puedes simplemente arrastrar y soltar un elemento de imagen, y desde aquí, puedes golpear este Elegir imagen y luego subir tu imagen aquí. Por ahora, voy a seleccionar esta imagen. Ahí vamos. Esta imagen tiene algunos ajustes. Como puedes ver, es demasiado grande. Voy a cambiarlo a éste, es mucho mejor. Como puedes ver, tiene el ancho y alto establecido en auto. Significa que Webflow determina el ancho y la altura aquí. También está la casilla HiDPI, y cuando se comprueba, el ancho de nuestra imagen se dividirá por dos para que se muestre perfectamente en las pantallas de retina. Por ejemplo, aquí, ya que el ancho de nuestra imagen es de 640 píxeles, cuando verifico eso, Webflow lo establece en 320 píxeles, esta manera podemos asegurarnos de que nuestra imagen se muestre de manera asombrosa en diferentes dispositivos. Es opcional usar HiDPI, pero la mayoría de las veces, si revisas eso, puedes asegurarte de que todo se vea genial en todo tipo de dispositivos. Puedes especificar el ancho y alto de tus imágenes aquí mismo o puedes peinarlo en el panel de estilo aquí debajo de la sección de tamaño. Hablaremos de estilo más adelante, pero por ahora, solo necesitas saber que es posible especificar la dimensión de tus imágenes aquí mismo en la configuración de la imagen. También puedes reemplazar tus imágenes si golpeas esta imagen de reemplazo, y desde el panel de activos, puedes elegir diferentes imágenes como esa. Algo importante de las imágenes es que puedes subir imágenes de hasta cuatro megabytes. Cualquier cosa más grande que eso, no se puede subir. ¿ Por qué? Porque no es práctico usar imágenes que son tan grandes ya que ralentizan la velocidad de carga de la página web. Por eso puedes subir imágenes de hasta cuatro megabytes. Aquí hay algunas opciones avanzadas, como todos los textos y carga. No los vamos a tocar ahora mismo porque se trata temas avanzados y hablaremos de ellos más adelante en este curso. También se puede utilizar un elemento de imagen para iconos. Dado que un icono es una imagen, básicamente, puedes simplemente ir a tus activos, y si subes un icono, simplemente puedes arrastrarlo y soltarlo aquí así o simplemente podrías arrastrar y soltar un elemento de imagen y luego elegir tu imagen de la configuración de imagen. Depende totalmente de ti. 16. Video: En ocasiones podríamos necesitar usar un video en nuestro proyecto. En este caso, podemos usar un elemento de video. Si vas a los medios desde aquí, puedes arrastrar y soltar un elemento de video en tu Canvas, lo voy a poner dentro de mi contenedor para mantener todo organizado. Este elemento de video funciona como un placeholder, puedes pegar un enlace de video desde cualquier fuente de terceros como Vimeo o YouTube, no importa. Por ahora, voy a pegar un enlace de YouTube, y en cuanto lo pegue, lo carga aquí, y simplemente puedo previsualizar mi proyecto. Puedo reproducir este video fácilmente, y como pueden ver tenemos todas las opciones del reproductor de video de YouTube, pero tenemos otro elemento también. Déjame quitar este elemento de video, luego voy a arrastrar y soltar este elemento de YouTube. ¿ Cuál es la diferencia? Bueno, con el elemento de video, puedes usar cualquier enlace desde cualquier plataforma, pero con el elemento YouTube, solo puedes usar un enlace de YouTube. ¿ Cuál es la principal diferencia aquí? Con el elemento YouTube, tenemos más opciones con las que trabajar. Tenemos diferentes configuraciones como start at, podemos silenciar el video por defecto, podemos habilitar la reproducción automática. Podemos modificar otros controles de jugador, tanto si queremos mostrar los controles del jugador como si no. También podemos modificar la configuración de privacidad también. Esta es básicamente la principal diferencia entre estos dos elementos. Al igual que cualquier otro elemento, puedes modificar todas las propiedades CSS de estos elementos de vídeo también. 17. Animación de lottie: ¿ Alguna vez te has preguntado cómo puedes usar una animación en tu proyecto? La respuesta es la animación de Lottie. Si te diriges a la sección Medios aquí en el panel add, puedes ver que hay un elemento llamado animación Lottie. Déjame arrastrar y soltar este elemento en mi contenedor. Bueno, Lottie es un tipo de archivo para animación. Es tan potente porque nos permite usar animaciones de alta calidad, y lo más importante, nos permite controlar diferentes propiedades de esa animación. Por ejemplo, podemos hacerlo interactivo, podemos hacerlo jugar en reversa, y otras cosas. Hablaremos de las animaciones de Lottie en detalle más adelante, pero por ahora, vamos a intentarlo. En el archivo Assets, tengo un archivo JSON, que es básicamente lo que necesitamos si queremos usar una animación Lottie, si solo hago clic en este botón Reemplazar Lottie Sequence, simplemente puedo elegir esta animación, y ahí vamos. Ahora tenemos la animación, pero déjame previsualizar eso. Si hago clic en esta Vista previa Animación, la animación se reproduce de cero a 100 por ciento. ¿ Qué tan guay es eso? Puedo comprobar la opción de bucle, vamos a previsualizarla. Ahí vamos. Juega una y otra vez. Puedo elegir la opción de juego en reversa, así como así. 18. Formularios: Si deseas construir un sitio web que tenga una página de contacto o incluso una sección de newsletter, seguro, necesitas usar Formularios. Bueno, un Formulario puede tener diferentes elementos como etiqueta, entradas, área de textos, casillas de verificación, botones de opción, botón de formulario, etc. Si te diriges a la sección Formularios en el panel de agregar, puedes ver que aquí tenemos diferentes elementos. Contamos con Form Block que agrupa diferentes elementos de forma como etiqueta, entradas, botón de formulario. Tenemos Label, que es sólo un simple bloque de texto. Tenemos entrada, es un campo de texto. Tenemos el área de texto para frases largas y contenidos largos. Contamos con casillas de verificación, contamos con botones de radio para selecciones. Contamos con el elemento select, si quieres dejar que el usuario seleccione entre diferentes opciones. Tenemos recaptura y tenemos el botón Formulario. También tenemos el elemento de carga de archivos aquí, pero solo está disponible cuando añades un plan de sitio a tu sitio web. Cuando queremos crear un formulario, primero, necesitamos un bloque de formulario. Como mencioné antes, reúne todos estos elementos de forma, los necesarios. Voy a arrastrarlo y dejarlo caer en mi contenedor en el Canvas. Ahí vamos. Como puedes ver este bloque de formulario ya tiene algunos elementos, como dos etiquetas, dos campos de texto, y un botón. No se pueden ver esas capas de texto por su color. Voy a seguir adelante y modificar el color y el estilo aquí. Ahora mismo es mejor. Cuando arrastras y sueltas un formulario en tu Canvas, aparece la configuración del formulario. Un bloque de formulario tiene diferentes propiedades, tiene diferentes estados y tiene un nombre de formulario. Aquí déjame mostrarte diferentes estados de un bloque de formulario. Cuando trabajamos con formas, tenemos los estados normales, un éxito, y error. ¿ Cuál es la diferencia entre ellos? El estado normal es el que estás mirando. Es sólo una forma normal. El estado de éxito, en realidad muestra un mensaje al usuario. Una vez que el formulario ha sido enviado con éxito, podemos personalizar fácilmente cada uno de estos estados. El estado de error muestra un error al usuario cuando algo sale mal. Por ahora, no se puede ver el texto porque ya cambiamos el estilo de estas capas de texto. Pero si selecciono este bloque de texto, puedo seguir adelante y modificar el color a negro, y ahora lo puedes ver mejor. Cuando desee diseñar diferentes estados de su formulario, debe asegurarse de seleccionar primero su bloque de formulario en el navegador, no los elementos del formulario. Primero selecciona tu bloque de formulario y luego puedes hacer doble clic [inaudible]. O simplemente puedes seleccionar tu bloque de formulario y hacer clic en este icono de configuración, así como así. Ahora hablemos de la formación. Bueno, es posible que necesites usar diferentes formularios en tu sitio web y es importante nombrarlos correctamente porque más adelante cuando recibamos envíos de formularios, podemos reconocer fácilmente qué información está asociada a qué formulario. Voy a nombrar este formulario demo. Voy a ir a la normalidad. Estos elementos tienen algún estilo por defecto que podemos anular. No vamos a hablar de estilo ahora, pero les voy a mostrar que este es un campo de texto. Un campo de texto también tiene algunas propiedades. Si selecciono el campo de texto, si hago doble clic en él, se puede ver que aparece la configuración de entrada. Cada campo de texto tiene diferentes configuraciones como nombre, marcador de posición, tipo de texto, y aquí tenemos las opciones requeridas y autofocus. Puede nombrar fácilmente estos campos de texto. Por ejemplo, si este campo de texto está asociado a esta etiqueta de nombre, simplemente podemos llamarlo nombre. Si va a ser apellido, simplemente podemos nombrarlo apellido aquí. Contamos con el tenedor del lugar también. Si quiero presentar un portador de lugar justo en el campo de texto, puedo escribirlo aquí. Escribamos introduce tu apellido. Igual que eso. Tenemos el tipo de texto también. Por defecto, está configurado en plano y significa que el texto podría ser cualquier cosa. Podríamos ponerlo en correo electrónico, podríamos ponerlo en contraseña, podemos ponerlo en teléfono o número. ¿ Por qué importa? Porque aquí para el campo de texto de correo electrónico, el Tipo de texto ya está configurado en correo electrónico. ¿ Por qué? Porque cuando el usuario intenta rellenar estos campos de texto y presionar el botón “Enviar”, entonces este Campo de Texto comprueba si hay una dirección de correo electrónico válida o no. Por ejemplo, si tenemos algo como test@, le dará al usuario un error. Debe haber una dirección de correo electrónico válida. No comprueba si esa dirección de correo electrónico existe o no porque no es posible, pero sólo comprueba el formato de esa dirección de correo electrónico. Sucede lo mismo con la contraseña, teléfono, o el número. Ahora hablemos de estas dos opciones. Contamos con la opción requerida. Si marco esta casilla de verificación, significa que el usuario tiene que rellenar estos campos de texto. Si desmarco eso, ese es un campo de texto opcional. Check Reviso el autofoco, significa que cada vez que se carga la página, este campo de texto es autofocus y el cursor ya está parpadeando. Voy a configurarlo como requerido, y voy a desmarcar el autofoco. Entonces vamos a seleccionar este botón “Enviar”. Si hago doble clic en eso, simplemente puedo modificar estas propiedades. Hay dos propiedades cuando se trata de botones de forma, botón y texto en espera. Puedo ponerlo a cualquier cosa como enviar por ejemplo, y luego el texto en espera. Este texto aparece cuando el usuario hace clic en este botón y él o ella está esperando el envío del formulario. Aquí déjame modificar eso para esperar un momento. No es el mejor texto en espera por cierto. Ahora, vamos a intentarlo. Para probar un formulario no puedes simplemente ir al modo de vista previa porque no funciona así. Necesitas publicar primero tu página web. No hablamos de la opción de publicación, pero es tan simple. En primer lugar, voy a dar clic en este botón Publicar en la esquina superior derecha. No necesitamos cambiar nada. Basta con dar click en Publicar para seleccionar los dominios. Igual que eso. Este es un dominio único creado por Webflow para nuestro proyecto. Entonces, una vez que este botón se vuelve verde, significa que se publica nuestra página web. Si hago clic en este botón, este pequeño ícono justo al lado de este enlace, puedo consultar mi página web. Déjame acercar. Aquí está nuestra forma. Déjame seguir adelante y comprobar el tipo de este campo de texto porque lo cambié a numerar erróneamente debería ser sencillo ya que es solo el apellido. Voy a publicar mi sitio web una vez más, y voy a refrescar esta página. Ahí vamos. Ahora bien, este es un campo de texto sin formato. Aquí, déjame escribir prueba. Para la dirección de correo electrónico voy a escribir test@. Esta no es una dirección de correo electrónico correcta, este no es un formato correcto para esa dirección de correo electrónico. Si presiono el botón “Enviar”, mira lo que pasa. Por favor ingrese una parte siguiente @. Esto es lo que sucede cuando eliges el correo electrónico, tipo de campo de texto. Entonces escribamos gmail.com. Ahora todo debería funcionar a la perfección. Voy a presionar el botón “Enviar”. Espera un momento, y obtendremos el mensaje de éxito. Por supuesto, el estilo no es bueno porque ya cambiamos el color, pero acabas de tener la idea. Si algo anda mal con la conexión a Internet, obtendremos el error. Déjame refrescar la página y solo voy a desconectar mi conexión a Internet por un segundo. Aquí, vamos a escribir Prueba 2 y voy a escribir otra dirección de correo electrónico, hello@gmail.com. Si presiono el botón “Enviar”, mira lo que pasa. Ups, algo salió mal mientras enviaba el formulario. Esta es la diferencia entre diferentes estados de una forma. Ahora veamos cómo podemos obtener acceso a los envíos de formularios. Bueno, tenemos que ir a la configuración del proyecto. Como te mostré antes. Si te diriges a este icono W en la esquina superior izquierda, y si pasas el cursor sobre él, verás este icono del menú de hamburguesas. Voy a dar click en eso, y voy a ir a Configuración del proyecto. Desde aquí voy a ir a la pestaña Formularios. Aquí tenemos diferentes configuraciones de un formulario. Podemos especificar el nombre del formulario aquí, podemos enviar los envíos del formulario a una dirección de correo electrónico específica, podemos escribir la línea de asunto, podemos especificar una dirección de correo electrónico para las respuestas, y también la plantilla de correo electrónico. Hablaremos de estas opciones más adelante. Pero por ahora solo necesitas saber que si te desplazas aquí abajo, puedes encontrar un dato de envío de formularios. Como podemos ver, enviamos un formulario. Dice apellido, Prueba, dirección de correo electrónico test@gmail.com Simplemente puede eliminar el envío. Puedes descargar todos los datos de envío usando este botón de descarga CSV como archivo CSV. Algo que hay que tener en cuenta es que existe un límite para recibir presentaciones. Si no agregas hosting a tu proyecto, puedes obtener hasta 50 presentaciones al mes. Nos sumergiremos en estos ajustes avanzados de formularios más adelante cuando empecemos a crear nuestros proyectos. Pero esto básicamente se trata de formas. Volvamos con el diseñador. Voy a presionar el botón “Diseñador”. Voy a seleccionar mi bloque de formularios así como así. Déjame echar un vistazo a otros elementos aquí. Aquí tenemos un área de texto de entrada de etiquetas. Simplemente podemos arrastrar y soltar cualquiera de estos elementos en nuestro bloque de formulario. Todos estos elementos tienen propiedades propias. Déjame seguir adelante y arrastrar y soltar una casilla de verificación aquí. Al igual que eso, tiene propiedades diferentes. Podemos arrastrar y soltar un elemento selecto aquí. Si quiero especificar las opciones de selección, puedo seleccionar este campo de selección e ir a la configuración de elementos. Desde aquí, se puede ver que tenemos las opciones. Tenemos selecto 1, primera opción, segunda opción, tercera opción. Simplemente podemos modificarlos, pero vamos a previsualizarlo. Ahí vamos. Así es como se ve. Se podría marcar y desmarcar la casilla de verificación. El área de texto podría ampliarse y todo funciona como se esperaba. 19. Barra Nav: La mayoría de los sitios web actualmente tienen una barra de navegación en la parte superior. Si echas un vistazo a algunos sitios web famosos, puedes ver que usan una barra de navegación con el fin de mostrarle algunas muchas opciones al usuario. Por ejemplo, aquí tenemos la barra de navegación que tiene algunos menús como MAC, iPad, iPhone, o aquí tenemos la barra de navegación que tiene productos, casos de uso, desarrolladores, etc, y también un botón. La mayoría de las barras de navegación tienen algunos elementos comunes, como un logotipo en el que se puede hacer clic. Se trata de un bloque Link. Tienen algunas opciones de menú. También suelen ser Bloques de enlace, y tienen un botón en el lado derecho. Podemos crear barra de navegación manualmente usando un bloque Div y un Bloques Link y otros elementos. Pero hay un elementos preconstruidos en Webflow. Si me desplazo aquí abajo debajo de los Componentes, está la barra de navegación. Si lo arrastro y lo suelto aquí en mi elemento corporal, como puedes ver, esta barra de navegación se ha agregado a mi Canvas y tiene algunos elementos. En el interior hay un contenedor, es sólo un bloque Div, ya hablamos de ello, y dentro hay algunos otros elementos. Se encuentra un Bloque Link en el que vamos a poner nuestro logo, y después tenemos los menús de navegación. Este es otro bloque Div que contiene todos estos enlaces. Por último, está el botón Menú. Pero aquí no podemos ver ningún botón de menú. Sólo espera un segundo. Un elemento navbar es dinámico y receptivo. Si pasamos del punto de ruptura del escritorio al punto de ruptura de la tableta, se puede ver qué sucede. Todos esos enlaces de menú están desaparecidos, y en su lugar, tenemos este botón de menú de hamburguesas. Esto está asociado a este botón de menú en el navegador, que no era visible en el punto de ruptura del escritorio. El navbar ya está respondiendo. Si previsualizo este proyecto, aparece este botón Menú y no hay logotipo porque aún no agregamos uno. Así es básicamente como funciona una barra de navegación. Podemos personalizar estos enlaces. Si hacemos doble clic en alguno de estos enlaces, podemos modificar el texto. También podemos seleccionar este elemento Nav Link, y si hago clic en este icono de Configuración, puedo modificar la URL. Podemos pedir esto para llevar al usuario a una página específica o a una sección específica de nuestro sitio web. Esto es sólo un bloque Link. Por lo tanto, tenemos todas las propiedades de un bloque Link. Un navbar es básicamente un bloque Div el cual ya está respondiendo y tiene algunos elementos preconstruidos que podemos usar. Si quieres crear una barra de navegación personalizada, eso está totalmente bien. Podemos hacer eso de manera sencilla. Pero la mayoría de las veces, usaremos el elemento navbar porque nos hace la vida mucho más fácil ya que ya es receptiva y todo está listo para nosotros. 20. Caja de luz: Si quieres que tus imágenes o tus videos se muestren en una vista de pantalla completa en cualquier dispositivo, puedes usar una caja de luz. Si te diriges a la sección de componentes en el panel add, puedes encontrar un componente lightbox. Voy a arrastrarlo y dejarlo caer en mi contenedor. Ahí vamos. Este es un enlace lightbox y para poder trabajar con eso, necesitamos una miniatura. Si hago doble clic en eso, puedo elegir la imagen dentro porque por defecto tiene una imagen, y de mis activos, voy a elegir esta imagen, y voy a disminuir el ancho y la altura a 300 píxeles y la altura va a ser de 400 píxeles, así como así. Este es un enlace de caja de luz. Analicemos y veamos qué pasa. Si hago clic en que no pasa nada porque para que funcione una caja de luz, necesitamos especificar un medio para eso. Tenemos que seguir adelante y seleccionar nuestro enlace lightbox. Entonces necesitamos dirigirnos a los ajustes de elementos justo al lado del panel lateral y desde aquí podemos encontrar ajustes de lightbox. Ahí está esta sección de medios. Podemos elegir una imagen o un video. Empecemos con una imagen. Voy a seleccionar una imagen, la misma imagen de mis activos, ahí vamos. Ahí está este epígrafe aquí. No vamos a añadir una leyenda por ahora porque les voy a mostrar la diferencia entre estas dos opciones. Voy a ahorrar y luego vamos a previsualizarlo. Ahí vamos, si hago clic en mi enlace lightbox, podemos previsualizar esta imagen en una vista de pantalla completa en cualquier dispositivo. Funciona perfectamente en móviles, tabletas o cualquier pantalla, así como así. Pero ¿y si quiero tener múltiples enlaces lightbox? Bueno, eso es muy sencillo. Simplemente puedo arrastrar y soltar más cajas de luz, o simplemente puedo copiar estos lightbox y pegarlo una y otra vez. Permítanme quitar este nuevo enlace lightbox. Voy a copiar este enlace lightbox, comando C o control C y comando V o control V, una vez más, para obtener tres enlaces de lightbox diferentes. Por defecto, no hay relleno entre ellos así que voy a seleccionar este enlace lightbox, el primero y voy a ir al espaciado y solo añadir algún relleno derecho como 10 pixels, y como puedes ver, de inmediato, se ha creado una clase. Todavía no hablamos de clases, pero por ahora, sólo necesitamos este nombre enlace lightbox. Posteriormente nos sumergiremos en clases. Voy a seleccionar el segundo lightbox y desde aquí voy a buscar una clase de link lightbox, así como así, y una vez que aplique esta clase al segundo enlace lightbox, estos elementos pueden usar todos los estilings que ya definí para esta clase en particular. Ahora voy a cambiar la miniatura de estos dos enlaces lightbox. Déjame hacer doble clic sobre él y reemplazar la imagen a ésta y para la tercera, voy a hacer lo mismo, ahí vamos. Nuestras miniaturas están listas. Ahora vamos a previsualizarlo. El primero se ve bien. El segundo muestra la misma imagen porque acabamos de copiarla y pegarla, la tercera la misma. Lo que necesitamos hacer es seleccionar nuestro segundo enlace lightbox, luego dirigirnos a la configuración de los elementos, y desde aquí, necesitamos quitar ese medio y agregar otra imagen que corresponda a esta miniatura. Enfriar. Voy a guardarlo para el tercero. Yo voy a hacer lo mismo. Voy a quitar este medio y elegir la imagen adecuada y guardar, ahora debería funcionar perfectamente. Vamos a intentarlo. Voy a dar click en la primera imagen, la segunda, y la tercera. Pero aquí como se puede ver no hay leyenda. ¿ Qué pasa si agrego una leyenda a nuestros medios? Vayamos a comprobarlo. Vamos a seleccionar el primer enlace lightbox, y desde aquí voy a dar clic en esta primera imagen, y vamos a añadir una leyenda. Esta es una bonita imagen, cool, guardar. Ahora veamos qué pasa si hago clic en él. Como se puede ver, se ha agregado una leyenda a la parte inferior de esta imagen. Eso es muy útil pero y si quiero conectar mis cajas de luz juntas, para que podamos hacer eso. Eso es muy sencillo. En primer lugar, tenemos que seleccionar este enlace de la caja de luz, el primero, y debajo de los medios hay una casilla de verificación que dice enlace con otras cajas de luz. Si reviso esto, aquí puedo especificar un nombre de grupo. Es muy importante porque si tienes múltiples cajas de luz en una página, así es como podemos conectarlas correctamente. Vamos a darle un nombre. Voy a escribir main, voy a copiarlo. Déjame seleccionar mi segundo enlace lightbox, voy a pegar ese nombre aquí. Para la tercera, voy a hacer lo mismo, y ahora nuestros enlaces lightbox están conectados. Vamos a intentarlo. Voy a dar click en este primer enlace y ahí vamos. Ahora tenemos esta interacción de deslizador. Puedo hacer click en este botón de flecha derecha y simplemente puedo moverme a través de estos ítems. Eso es muy útil. Por ejemplo, si querías crear un sitio web de comercio electrónico y necesitas mostrar diferentes imágenes de un producto en particular puedes usar un lightbox. Recapitulemos. Para poder trabajar con lightboxes, primero, debes arrastrar y soltar un enlace de lightbox en tu Canvas. En segundo lugar, debes elegir tu miniatura, que es esta imagen. En tercer lugar, que es tan importante, necesario agregar un medio para ese enlace de caja de luz en particular. Si desea conectar sus enlaces lightbox, debe comprobar este enlace con otras cajas de luz y especificar un nombre de grupo. Chicos, espero que hayan disfrutado de este video. Te veré en el próximo. 21. Slider: Si desea crear una galería de imágenes o una presentación de diapositivas para su sitio web, puede utilizar el componente deslizante. Desde aquí, puedes arrastrar un deslizador y dejarlo caer dentro de tu contenedor, o puedes ponerlo donde quieras. Voy a colocarlo dentro del contenedor, y ocupa todo el ancho de mi contenedor. Como puedes ver, este deslizador tiene múltiples elementos. Si lo expando, puede ver que aquí hay cuatro componentes principales: la máscara, que incluye nuestras diapositivas, el enlace de flecha izquierda, el enlace de flecha derecha, y el Slide Nav, que es este indicador en la parte inferior. Si hace clic en estos indicadores, puede moverse entre sus diapositivas, y si desea agregar más diapositivas, debe seleccionar su control deslizante e ir a la configuración del deslizador. Desde aquí, se puede obtener acceso a la configuración del control deslizante. Tenemos muchas opciones para modificar. Vamos a pasar por cada uno de ellos. Si quieres agregar más diapositivas, puedes presionar este botón Añadir diapositiva, así como así. Si quieres moverte a través de tus diapositivas, tienes diferentes formas. En primer lugar, puedes hacer clic en estos indicadores, en segundo lugar, puedes usar estas flechas aquí en la configuración del control deslizante, y en tercer lugar, si sabes exactamente a dónde quieres ir, puedes elegir tu diapositiva desde aquí por ejemplo, diapositiva 3 o una diapositiva 5. Permítanme quitar estas dos diapositivas por ahora. Aquí voy a explicar diferentes opciones. El deslizador tiene diferentes propiedades. Tiene la propiedad de animación, el método de flexibilización, y la duración, y también tienes algunos ajustes avanzados aquí. La animación permite controlar el tipo de transición que se produce. Puedes elegir slide, crossfade, fade out- in, fundir sobre y deslizarse sobre. Podrás revisarlos y ver cuál se adapta a tus necesidades. El método de flexibilización también está relacionado con la animación y con la transición. Ya que es un tema más avanzado, no vamos a hablar de ello ahora, sino más tarde, cuando empecemos a hablar de interacciones, hablaremos mucho del método de flexibilización. Entonces tenemos la duración. Esta es la duración de nuestra transición, y la unidad es de milisegundos. Aquí, si especifico 1,000, la animación ocurre precisamente en un segundo. Aquí, tenemos diferentes opciones también. Tenemos las diapositivas de repetición infinitas, tenemos deshabilitar gestos de deslizamiento. De forma predeterminada, el control deslizante tiene los gestos de deslizamiento cada vez que el usuario interactúa con él en tableta o teléfono. Puede desactivar esta opción si lo desea. Tienes la opción de reproducción automática de diapositivas. Tienes el pellejo en cada extremo. Lo que hace es esto. Si marco esta opción, oculta la flecha izquierda para la primera diapositiva y la flecha derecha para la última diapositiva. Vamos a intentarlo. Aquí, no tenemos la flecha izquierda. Entonces si voy a la tercera, aquí, no tenemos la flecha derecha. Puedes personalizar estas opciones como quieras. Después tenemos la diapositiva Nav. Todo esto se trata de estos indicadores. Puedo revisar alrededor o puedes desmarcar eso para conseguir estas casillas. Se puede comprobar etiquetas numéricas, se puede comprobar sombra, invertir colores, y también se puede especificar el espaciado en píxeles, como puedo especificar 10. Voy a desmarcarlos a todos y voy a revisarlo alrededor. Genial. Ahora, agreguemos contenido a nuestras diapositivas. Una diapositiva puede contener cualquier tipo de contenedor. Puedes agregarle algunos div espacios en blanco, puedes agregarle imágenes de fondo, puedes agregarle una imagen. Eso depende totalmente de ti. Pero por ahora, voy a seleccionar esta diapositiva 1, y voy a desplazarme hacia abajo en el panel de estilo. Desde el fondo, voy a golpear “Imagen y “Gradiente” y elegir “Imagen”. De mis activos, voy a elegir una de estas imágenes. Enfriar. Establezcamos la posición para centrar, y va a cubrir así como así, y no azulejemos. Para la siguiente, voy a hacer lo mismo. Déjame elegir mi imagen, así como esto. Permítanme cambiar la posición y el tamaño. último pero no menos importante, para la última diapositiva, voy a elegir otra imagen. Este, cambiemos la posición a centro, y el tamaño va a ser tapado y no azulejemos. Genial. Nuestro slider está listo. No obstante, voy a modificar su altura. Voy a seleccionar el deslizador, asegúrate de seleccionar tu elemento deslizante. Desde el tamaño, puedo especificar una altura específica, por ejemplo, 500 píxeles. Ahora se ve mucho mejor. Ahora bien, si hago clic en estos indicadores, puedo moverme entre estas imágenes. Ahora, voy a seleccionar el control deslizante, y luego vamos a la configuración de los elementos. A partir de aquí, voy a revisar diapositivas de reproducción automática. Aquí, puedo especificar el tiempo o el retraso. Por defecto, se establece en 4,000 milisegundos. Significa que la transición ocurre precisamente en cuatro segundos. Si lo previsualizo ahora, después de cuatro segundos, se produce la transición. Eso se puede modificar. Voy a ponerlo en 1,000. Ahí vamos. Es demasiado. A lo mejor puedo ponerlo en 2 mil. Ahora, es mejor. Como mencioné antes, una diapositiva puede contener cualquier cosa. Aquí, puedo agregar algunos otros elementos por ejemplo, un encabezado. Arrastremos y soltemos un encabezado dentro de esta diapositiva. Ahí vamos. Puedo darle un título, Diapositiva 1. Puedo modificar sus propiedades CSS, todo. Por cada diapositiva, puedo hacer lo mismo. Yo también puedo agregar un párrafo aquí. Muy bien, chicos. Eso es todo para los componentes del deslizador. Espero que lo hayan disfrutado, y los veré en el siguiente video. 22. Tablas: En ocasiones puede que necesitemos tener algún contenido con pestañas, algún contenido interactivo con pestañas. En ese caso, podemos utilizar el elemento tabs. Debajo de la sección de componentes, tenemos el elemento tabs. Uno de los casos de uso más comunes de pestañas es la sección de precios de diferentes sitios web. Aquí, como pueden ver, preparé dos bloques Div diferentes y por dentro, hay algunos otros bloques Div con algunos elementos. Lo que vamos a hacer es poner estos bloques de precios en pestañas. La fila superior es nuestro plan mensual y la fila inferior es nuestro plan anual. Vamos a necesitar dos pestañas diferentes. Pero primero, sigamos adelante y arrastremos y soltemos el elemento de pestañas en mi contenedor, así como así. Por defecto, como se puede ver, el elemento tabs tiene tres pestañas diferentes. Básicamente, el elemento tabs tiene diferentes componentes. El menú de pestañas, que son estas pestañas en la parte superior, y el contenido de las pestañas. Dentro del contenido de las pestañas, como puedes ver, es una máscara. Este icono indica que es una máscara. Dentro de estos contenidos de pestañas, tenemos tres diferentes panes. Contamos con Tabulador Panel, Tab 1, Tab 2, y Tab 3. El contenido de nuestra pestaña debe colocarse dentro del panel de pestañas. Siempre que queremos modificar el nombre de las pestañas, necesitamos trabajar con el menú de pestañas. Aquí, si solo hago doble clic en este texto, puedo modificar eso. Escribamos mensualmente y para el siguiente, voy a escribir anualmente. Este tercero no es necesario. Puedo presionar Eliminar o Retroceso en mi teclado para eliminar este enlace de pestaña. Así como así, ahora tengo dos pestañas diferentes, pero ¿qué pasa con el contenido? Bueno, primero, voy a seleccionar este bloque Div, esta marca de precios superiores. Voy a arrastrarlo y soltarlo dentro del primer panel de pestañas, asegurarme de que esté anidado correctamente. Echa un vistazo a tu navegador y asegúrate de que esto esté anidado dentro del Panel de pestañas 1, así como así. Ahora bien, esta caja de precios. Estas son cajas, son parte de Tabulador Panel 1. Vamos a hacer lo mismo para este plan inferior o anual. Voy a arrastrarlo y soltarlo. Voy a asegurarme de que esté anidado dentro de Tab Pane 2, así como eso, pero ahora es invisible. A partir de ahora, si quiero echar un vistazo al contenido de mis pestañas, necesito dar click en estos tableros de pestañas. Por ejemplo, voy a dar clic en Tab Panel 1. Este es nuestro plan mensual. Si hago clic en Tab Panel 2, este es nuestro plan anual. Por defecto, no hay margen superior, así que voy a seleccionar el contenido de pestañas, que básicamente es un envoltorio para nuestros panes. Entonces le voy a dar un margen superior, tal vez 30 píxeles. Veamos qué pasa ahora. Voy a previsualizarlo. Estamos en plan anual. Voy a dar click en mensualmente. Ahí vamos. ¿ Se puede ver esta transición? Así es básicamente como funcionan las pestañas. Por supuesto, puedes darle estilo a estas pestañas y hablaremos de estilizados más adelante. Pero por ahora, solo necesitas saber cómo funciona el elemento tabulador. Si quiero agregar más pestañas, puedo seleccionar mi elemento de pestañas en el navegador. Si me dirijo a la configuración de pestañas, puedo hacer clic en este botón Agregar, así como para agregar más pestañas. Como puedes ver, aquí se ha añadido la Tab 3. Puedo reorganizar mis pestañas así. Puedo establecer la pestaña inicial que ve el usuario. Por ejemplo, va a ser Tab 1. Voy a quitar la Tab 3 por ahora. Aquí puedes cambiar el nombre de las pestañas, pero solo en términos de organización. Si lo renombro aquí, nada cambia en la pestaña real, en el enlace real porque este es un texto y necesitas modificarlo en el lienzo. Pero si quieres organizarlos correctamente, simplemente puedes escribir uno por ejemplo, y para esto también, así como así, puedes modificar el método fácil. Por ahora, no sabes qué es, pero hablaremos de ello más adelante. Todo se trata de la animación. Aquí el fade-in se establece en 300 milisegundos y el desvanecerse se establece en 100 milisegundos. Es demasiado rápido. Para ver la diferencia real aquí, voy a poner a, el desvanecimiento va a ser 500 milisegundos y el desvanecimiento va a ser de 500 milisegundos también. Ahora vamos a previsualizarlo. El plan mensual ya está seleccionado. Voy a dar click en anualmente. Ahí vamos. Ahora es mucho más lento. Recapitulemos. El elemento tabs tiene dos componentes principales, menú de pestañas y contenido de pestañas. El menú de pestañas incluye todas estas pestañas. Estos enlaces de pestaña en la parte superior. El contenido de las pestañas incluye nuestros tableros de pestañas aquí. Siempre que queramos modificar el contenido de nuestras pestañas, solo debemos dirigirnos al contenido de las pestañas y seleccionar nuestro panel de pestañas. Si desea modificar la apariencia de nuestros enlaces de pestañas o incluso el nombre, el texto, siempre debemos ir al menú de pestañas y elegir nuestro enlace de pestañas. Eso es todo por este video. Espero que lo hayas disfrutado y te veré en el siguiente. 23. Redes sociales: Creo que los botones de redes sociales a tu sitio web pueden ayudar a conducir más tráfico a tus cuentas de redes sociales. Para ello, puedes usar los componentes de Facebook o Twitter. Voy a empezar con Facebook. Déjame arrastrarlo y dejarlo caer en mi contenedor. Como puedes ver, por defecto, hay un botón like. Ahí está el número como predeterminado, y este inscribirte para ver lo que les gusta frase a tus amigos. Aquí, puede especificar la URL de la cuenta de Facebook. Podría ser la cuenta de Facebook de los clientes o tu propia cuenta de Facebook si estás construyendo tu propia página web. Aquí se puede modificar el diseño de estándar, a caja, a botón. Eso depende totalmente de ti. Aquí se puede especificar el ancho y la altura, y también se puede modificar el idioma. Por ejemplo, puedo elegir alemán, puedo cambiarlo a español, así como eso. Pero por ahora, vamos a mantenerlo en inglés. Si previsualizo eso, si haces click en eso, serás llevado a Facebook. Pero como no especificamos ninguna cuenta aquí, sólo iremos a facebook.com. Pero si especificas una cuenta aquí, al usuario le puede gustar esa cuenta en particular. Pero ¿qué pasa con Twitter? Permítanme quitar este componente de Facebook. Voy a arrastrar y soltar componente, los componentes de Twitter aquí. Veamos qué tenemos aquí. Tenemos diferentes opciones, tipos de botones como Tweet o Seguir. Si quieres que el usuario tuitee algo, puedes elegir el Tweet, y aquí puedes especificar la URL del sitio web. Aquí puedes especificar un texto de tuit como, “Echa un vistazo”. Entonces puedes decidir si se debe mostrar o no la burbuja, así como así. Se puede modificar el diseño. Aquí tenemos el diseño horizontal. Puedes cambiarlo a vertical o el tamaño, puedes cambiarlo a grande. Voy a esconder la burbuja por ahora. Ahora vamos a previsualizar eso. Si lo previsualizo y hago click en esto, ahí vamos. Puedo ver esto Echa un vistazo webflow.com. Esta es la URL que podemos especificar cuando estamos modificando las preferencias de ese componente. Si voy a seguir, aquí, puedo especificar el nombre de usuario de las cuentas, sin el signo @, porque el signo @ ya está ahí. Puedo escribir mi nombre de usuario de cuentas e inmediatamente se mostrará aquí el número de seguidores de esa cuenta en particular. Voy a esconder la burbuja por ahora, y hagámosla más grande. Ahora veamos qué pasa. Si hago click en él, puedo decidir si quiero seguir esta página o no. Ya que esta es mi propia página, no voy a seguir eso. Retrocedamos. Todo esto se trata de componentes de redes sociales. Espero que lo hayas disfrutado, y te veré entonces. 24. Búsqueda: Si desea agregar la funcionalidad de búsqueda a su sitio web, puede utilizar el elemento de búsqueda, en realidad este componente de búsqueda aquí bajo la sección de componentes. Este es un componente muy potente porque no necesitas preocuparte por indexar tus páginas y preparar tus resultados de búsqueda. Lo que tienes que hacer es simplemente arrastrarlo y soltarlo en tu Canvas. Voy a ponerlo dentro de mi sección, como pueden ver aquí. Déjame añadir un contenedor aquí que lo podías ver fácilmente. Voy a ponerlo dentro de mi contenedor. Ahora, se ve mejor. También voy a modificar el color de la palabra de búsqueda a blanco. Ahora bien, es bastante visible. Esto es solo un campo de texto, y si hace doble clic en él, puede encontrar aquí esta propiedad de placeholder que puede modificar. También se puede activar o desactivar el autoenfoque. Eso depende totalmente de ti. Algo a mencionar es que cuando agregas un elemento de búsqueda a tu Canvas, se crea automáticamente una nueva página de utilidades para ti. Si vas a las páginas aquí, puedes ver que bajo las páginas de utilidad, tenemos estas nuevas páginas de resultados de búsqueda. Si hago click en eso, ahí vamos. Se puede ver que aquí tenemos algunos resultados de muestra. Déjame modificar el color de estos toma también al blanco y éste al blanco también. Enfriar. Esto es básicamente lo que ve el usuario. Se puede darle estilo fácilmente, pero hay que entender que no funciona para todos los sitios web y todos los planes. ¿ Por qué? Si vas a la configuración aquí y vas a buscar, puedes ver que dice, una vez que has configurado CMS o hosting empresarial, Webflow indexa automáticamente el contenido de tu sitio publicado para crear un índice de búsqueda actualizado. Sin el CMS o hosting empresarial, no se puede utilizar esta funcionalidad de búsqueda. Si quieres trabajar en un proyecto cliente y ellos necesitan esta funcionalidad de búsqueda, debes asegurarte de agregar ya sea el hosting CMS o el hosting empresarial a tu proyecto. Hablaremos de estos planes más adelante, pero por ahora solo necesitas saber que existe esta funcionalidad. Si necesitas una barra de búsqueda, puedes usar eso. 25. Símbolo: Como diseñadores y desarrolladores, siempre tratamos de no repetirnos. Queremos evitar copiar y pegar y rehacer todo una y otra vez y otra vez. Para ello, necesitamos aprender cómo podemos crear un elemento una vez y reutilizarlo varias veces a través de nuestro proyecto. ¿ Cómo podemos hacer eso? Bueno, podemos usar símbolos. Si voy a la sección Agregar y trato de arrastrar y soltar aquí una barra de navegación. Así como así, lo voy a colocar justo debajo de mi cuerpo. Aquí, tenemos una barra de navegación y supongamos que queremos convertirla en un símbolo. ¿ Cómo podemos hacer eso? Tenemos diferentes formas de hacerlo. En primer lugar, podemos ir a la página Símbolos aquí y después podemos presionar el botón Crear nuevo símbolo, y necesitamos nombrar nuestro símbolo. Voy a llamarlo Navbar luego Crear símbolo. Como puedes ver se vuelve verde, aquí aparece un límite verde. Significa que nuestro símbolo ha sido creado con éxito. Pero ahora estamos dentro del símbolo maestro. Puedes presionar Escape para salir del símbolo maestro o haces clic en este botón verde Volver a Instancia. Aquí tenemos un símbolo, ¿cómo podemos reutilizar eso? Bueno, sigamos adelante y creemos una nueva página. Voy a ir a Pages y desde aquí voy a dar click en Crear Nueva Página. Démosle un nombre. Voy a nombrarlo Contactar y Crear. Ahora tenemos un Lienzo vacío. Voy a ir a Símbolos desde aquí tenemos nuestra barra de navegación. Si lo arrastro y lo suelto aquí, allá vamos tenemos nuestra barra de navegación. Pero espera, ¿no podemos simplemente copiarlo y pegarlo en lugar de crear símbolos? Sí, podemos pero no es una manera eficiente. ¿ Por qué? Porque cuando copia y pega un elemento, si realiza algún cambio en uno de esos elementos que cambian es único de ese elemento en particular y no afecta a los elementos duplicados. Pero cuando usamos símbolos, déjame mostrarte cómo funciona. Supongamos que quiero cambiar este contacto, este contacto toma para contactarnos en su lugar. Para hacer eso, primero debes ir al símbolo maestro. Si haces doble clic en eso, como puedes ver ahora estamos dentro del símbolo maestro. Puedo hacer doble clic en este texto y voy a modificar eso para Contáctenos. Entonces voy a presionar el botón Back to Instance aquí. Ahora lo cambiamos aquí en nuestra página de contacto. Si vuelvo a mi página de inicio, se puede ver que el cambio se ha aplicado automáticamente también a esta instancia. Cuando trabajas con símbolos, realizas cambios una vez y los cambios se aplican automáticamente a todas las instancias de ese símbolo en particular. Es tan poderoso porque imagina que tienes 100 páginas diferentes en tu página web. Si solo quieres seguir adelante manualmente y modificar tu barra de navegación o cualquier otro elemento uno por uno, va a tomar tanto tiempo y créanme, es un proceso aburrido. Si puedes usar símbolos, asegúrate de usarlo. Normalmente es útil para crear barras de navegación, pies de página. Hablaremos de los casos de uso más adelante. Pero por ahora, te voy a mostrar cómo puedes usarlos y cómo puedes modificar el contenido, cómo puedes anular el contenido aquí. Hasta ahora hemos aprendido a crear un símbolo, a reutilizar un símbolo, a editar un símbolo. Ahora, vamos a hablar de anular. Cómo podemos anular el contenido de nuestros símbolos. Aquí, creé una tarjeta sencilla con algunos elementos, un encabezado, una imagen, un párrafo, y un botón. Voy a convertirlo en un símbolo. La otra forma de crear un símbolo es simplemente hacer clic derecho en tu elemento y desde aquí puedes elegir Crear Símbolo, así como así. Ahora podemos nombrarlo, digamos tarjeta. Nuestro símbolo de tarjeta está listo. Ahora lo que voy a hacer es copiarlo y pegarlo dos veces. Voy a golpear el Comando C o Control C y el Comando V o Control V dos veces. Estas dos nuevas tarjetas son instancias de nuestro símbolo de tarjeta. Si realizo algún cambio en la primera tarjeta, por ejemplo, si cambio el tamaño de esta imagen, los cambios se aplican inmediatamente a otras tarjetas también. Si modifico este rubro a H2, se puede ver que los cambios se aplican a todas las instancias. Pero, ¿cómo podemos anular el contenido de estas dos instancias? Ya que tenemos tres tarjetas diferentes y con seguridad no vamos a usar el mismo contenido para todas las tarjetas, necesitamos aprender cómo podemos anular el contenido. Para ello, primero necesitas crear algunos campos para tus símbolos. Voy a hacer doble clic en este símbolo para ir al símbolo maestro y podré editar cosas. Entonces voy a seleccionar el elemento para el que quiero crear un campo. Voy a empezar con esta imagen porque esta imagen debe ser reemplazable. Voy a seleccionar eso. Si voy a la Configuración de imagen aquí en la parte superior, puedo ver que aquí hay Ajustes de imagen y tengo este botón morado justo en la esquina superior izquierda. Si paso el cursor sobre eso, se puede ver que se convierte en un botón más. Voy a dar clic en él y luego voy a golpear “Nuevo campo”, así como eso. Como puedes ver dice, “Este nuevo campo se vinculará automáticamente a esta anulación de imagen”, y le voy a nombrar Imagen. Crea y vincula, dice que acabas de crear y vincular un campo de anulación. Ahora voy a seleccionar este rubro y a partir de aquí, voy a dar click en este Enlace a campo, Crear nuevo campo y llamémoslo Título. Crear y vincular. Genial. Yo voy a hacer lo mismo para el párrafo. Vamos a crear un nuevo campo. Aquí, voy a escribir descripción, Crear y Vincular y eso es todo. No voy a crear un campo para el fondo, pero si quieres puedes hacerlo también. ¿ Cómo funciona? En primer lugar, déjame salir del símbolo maestro. Voy a dar click en “Volver a Instancia”. Ahora si selecciono mi segunda tarjeta en el lado derecho, se puede ver que tenemos Anulación de Instancia. Tenemos la imagen, estos son los campos que acabamos de crear. Tenemos la imagen, el título, y la descripción. Cada campo tiene un contenido predeterminado. Voy a reemplazar esta imagen simplemente por esto. Voy a modificar el texto aquí a la Cédula 2, y podemos modificar el párrafo también así así. Entonces déjame elegir la tercera tarjeta y vamos a hacer lo mismo por esta. Este va a ser Tarjeta 3. Por esta voy a quitar la primera frase así como así. Así es básicamente como puedes anular el contenido de tus símbolos. lo último de lo que voy a hablar es de desvincular tus símbolos. ¿ Cómo se puede desvincular un símbolo? Hay momentos en los que quieres realizar algunos cambios y quieres que estos cambios se apliquen a elementos específicos. Para ello, primero, seleccione su símbolo, haga clic derecho en él. Desde aquí puedes encontrar Unlink Instance. Si haces clic en Editar símbolo principal, serás llevado al símbolo maestro y podrás editarlo. Pero si desvincula instancia, así como así, ahora es solo un div simple. Como se puede ver, ya no es un símbolo y se puede reconocer eso desde el navegador, porque aquí el icono de estos símbolos es de color verde. Pero esto es solo un simple bloque div. Ahora bien, si cambio una dimensión de esta imagen, este cambio es único a esta tarjeta en particular.. Chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veré en el siguiente. 26. Atajos importantes: Oye, en este video, vamos a hablar de los atajos de Webflow. Cuando trabajamos en un proyecto, puede que necesitemos usar algunos atajos para acelerar nuestro proceso de diseño, y en este video, voy a hablar de los más importantes porque hay muchos atajos diferentes que puedes usar, pero no vamos a hablar de todos ellos porque la mayoría de las veces no usaremos todos esos atajos. Si te diriges a la esquina inferior izquierda de Webflow aquí, puedes ver este signo de interrogación. Si haces click en él, aquí en el panel de ayuda, tenemos diferentes opciones. La segunda opción son los atajos de teclado. Voy a dar click en él, y ahí está. Como mencioné antes, puede que no los necesitemos todos, pero algunas de ellas son tan importantes de saber, como copiar y pegar, deshacer, rehacer, encontrar, etc. Siempre que quieras copiar algo, tú puede usar Command C o Control C, si está usando Windows. Si quieres cortar algo, puedes usar Command X o Control X, y si quieres pegar algo, puedes usar Command V o Control V. Básicamente, si eres usuario de Mac, necesitas usar Command. Si eres usuario de Windows, necesitas usar Control. Aquí por ejemplo, para duplicar, dice Opción más Drag. Por lo que si mantienes pulsada la tecla Opción en tu teclado y haces clic y arrastras, puedes duplicar un elemento. En ventanas en lugar de Opción, debe mantener presionada la tecla Alt en su teclado. Aquí como puedes ver, para deshacer, usamos Command Z o Control Z, y para rehacer, usamos Command Shift y Z. Los otros atajos importantes son las vistas de dispositivos. Aquí, como puedes ver, si quieres ir a otro punto de ruptura, por ejemplo, si quieres ir al punto de ruptura de la tableta, puedes pulsar el número 2 en tu teclado. Si quieres ir al retrato móvil, puedes golpear el número 4. Usar estos atajos es opcional, pero créanme, te va a hacer la vida mucho más fácil si los aprendes. El otro atajo importante que utilizamos casi todo el tiempo es Find. Hay una muy buena característica llamada Búsqueda rápida. Cuando quieras abrirlo, puedes presionar Comando E o Comando K, o Control E o Control K. Hablaremos de Quick Find más adelante, pero por ahora, solo necesitas saber cómo puedes usar estos atajos. Si quieres conocer más sobre estos atajos, puedes dirigirte al panel de ayuda y hacer clic en los atajos de teclado y solo echarles un vistazo, pero por ahora, estos son los atajos más importantes que debes conocer. Muy bien chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veré en el siguiente. 27. clases: Casi todos los sitios web modernos en la actualidad se crean usando clases. ¿ Por qué? Porque las clases nos permiten almacenar nuestra información de estilo y luego reutilizarlas una y otra vez para tantos elementos como queramos. Por eso las clases son tan poderosas y es casi imposible crear una página web moderna sin clases. Déjame mostrarte cómo funciona. Cuando añades un elemento a tu Canvas, por ejemplo, un bloque Div, así como este, puedes dirigirte al panel de estilo en el lado derecho y en la parte superior tenemos la sección “Selector”. Aquí es donde vamos a añadir una clase o digamos seleccionar una clase. Por defecto, nuestros elementos no tienen ninguna clase y si queremos modificar las propiedades CSS de nuestros elementos, necesitamos agregar una clase específica a eso. Si no lo hacemos, Webflow asigna automáticamente una clase a este elemento en particular. Veamos cómo funciona. En primer lugar, no voy a agregar ninguna clase aquí, solo quiero modificar el color del fondo, y ahí vamos. Tan pronto como cambié una de estas propiedades, esta clase de bloque Div se ha creado automáticamente. Si queremos renombrar nuestra clase, solo podemos hacer clic izquierdo sobre ella y simplemente renombrarla. Voy a llamarlo “Div”. Esto es básicamente cómo se puede crear una clase. El otro camino, que es mejor en mi opinión, es simplemente crear una clase una vez que hayas agregado tu elemento a tu Canvas. Entonces, en lugar de modificar las propiedades de tus elementos, primero agregarle una clase. De esta forma, puedes asegurarte de que tus clases estén organizadas porque más adelante vamos a reutilizar estas clases y nombrarlas adecuadamente es tan importante. Ahora voy a seleccionar este bloque Div y no hay clase aquí porque acabo de quitar eso. Déjame mostrarte cómo puedes quitar una clase. Voy a escribir “Div” para elegir esta clase que creé. Para eliminar una clase, solo puedes hacer clic en esta flecha hacia abajo y simplemente pulsar “Eliminar clase”. Alternativamente, puedes hacer clic en algún lugar aquí y como podemos ver, este cursor está parpadeando. Si presionas la tecla Eliminar o Retroceso del teclado, se eliminará esta clase. Ahora no tenemos ninguna clase aplicada a este elemento. Voy a dar click aquí y puedo empezar a crear una nueva clase. Tenemos que nombrar aquí a nuestra clase. Voy a escribir “New Div”, “Enter”, así como eso. Nuestra clase ha sido creada y aún no modificamos las propiedades de este elemento. Si me desplaza hacia abajo, se puede ver que hay algunas propiedades y se resaltan con estos color ámbar. Significa que estas propiedades en particular se heredan de otra clase. Si hago clic en eso, se puede ver que valor proviene de “Cuerpo (Todas las páginas).” Hablaremos de estas etiquetas más adelante, pero por ahora solo necesitas saber que este color ámbar significa que en realidad la propiedad y el estilo viene de otro lugar. Por supuesto que puedes anular eso, y una vez que anula eso, mira qué pasa, se pone azul. Significa que esta propiedad ahora viene de esta clase. Si hago clic en él, se puede ver que podemos restablecer esta propiedad y restablecer heredará el valor de Cuerpo (Todas las Páginas). Ahora sigamos adelante y modifiquemos el fondo. Voy a cambiarlo a blanco. ¿ Por qué necesitamos usar clases? Bueno, como mencioné antes, las clases almacenan información sobre nuestro estilo. Ahora que modificamos el color del fondo y también la fuente, podemos simplemente reutilizar esta clase. Cómo reutilizar una clase. Primero, déjame seguir adelante y agregar otro bloque Div aquí y lo voy a colocar justo al lado, y ahora en lugar de crear una nueva clase, solo puedo aplicar la nueva clase Div a este bloque Div en particular. Voy a escribir “Nuevo”. Lo puedo encontrar bajo las clases existentes aquí y allá vamos. Algo que debes recordar es que estamos haciendo cambios en el estilo, no estamos haciendo cambios en el elemento en sí. Por eso podemos aplicar una clase a cualquier elemento. Establecemos las propiedades para una clase específica y luego podemos aplicar a cualquier elemento. Ahora voy a seguir adelante y cambiar el color del fondo, y vamos a ver qué pasa. Ahí vamos. Como se puede ver, el cambio aplicado a ambos bloques Div porque ambos elementos están usando esta nueva clase Div. Pero ¿y si quiero tener una clase única para el segundo bloque Div? Para ello, podemos duplicar una clase. Podemos simplemente hacer clic en esta flecha hacia abajo y voy a golpear “Duplicate class”, y vamos a escribir “Second Div”, así como eso. Ahora bien, no hay conexión entre este bloque Div y este bloque Div porque acabamos de duplicar la clase y no hay relación entre estas dos clases. Entonces si decido modificar el color aquí, color del fondo, el cambio que hago aquí sólo se aplica a este elemento en particular. Pero, ¿cómo se puede cambiar el nombre de una clase? Para cambiar el nombre de una clase, simplemente puede hacer clic en ella y simplemente renombrarla. Voy a cambiarlo a “Demo”. Ahora nuestra clase ha sido renombrada. Permítanme mostrarles otro ejemplo. Voy a ir a la sección “Agregar”, y desde aquí voy a traer un botón a mi Canvas, así como así. Déjame ponerlo dentro de mi contenedor y voy a quitar estos bloques Div. Enfriar. Este botón no tiene clase. Voy a agregarle una clase. Voy a escribir “Botón primario”. Enfriar. Ahora este botón primario tiene algunos estilos predeterminados porque este es un elemento preconstruido, y voy a anular estos elementos. Voy a empezar con el espaciado. Aquí tenemos diferentes propiedades y puedo modificar el relleno. Voy a mantener presionada la tecla de opción en mi teclado o tecla Alt y solo hacer clic izquierdo y arrastrar para modificar el relleno desde ambos lados simultáneamente, así como así. Como se puede ver, se puso azul. Significa que estas propiedades vienen de esta clase, esta clase en particular. Ahora hagamos otro cambio a este botón. Voy a modificar su color a otra cosa. Ahora lo que voy a hacer es añadir otro botón aquí. Ahí vamos, y voy a aplicar la misma clase a este nuevo botón. Busquemos el botón primario. Todos los estilos se han aplicado a este nuevo botón también. ¿ Y si quiero crear variaciones para mi botón? Bueno, en este caso, podemos usar algo muy útil, una clase combo. Una clase combo es un tipo de clase que se basa en tu clase base. este momento, hemos creado la clase base y si quiero crear una clase combo, solo puedo hacer clic en algún lugar aquí y como puedes ver, dice “Nueva clase Combo”. ¿ Por qué? Porque ya tenemos la clase base y podemos crear una clase combo encima de esta clase base. Entonces escribamos “Luz”. Pero no pasó nada. Por supuesto que no pasó nada porque no cambiamos nada. Ahora que creamos esta clase combo, este elemento está heredando el estilo de dos clases diferentes. Primero hereda todas las propiedades de la clase Botón primario y luego hereda más propiedades de la clase Light. Entonces primero, todas las propiedades de la clase Botón primario se aplicarán a este botón y luego si modificamos algo aquí, ya que creamos una clase combo, anula esas propiedades desde el botón primario. Es tan poderoso. Supongamos que quiero crear aquí un botón de Luz. Voy a modificar el color a blanco y como pueden ver, se vuelve azul, y voy a modificar el color tipográfico aquí a negro, así como así. Permítanme explicar lo que pasó. Como pueden ver, el espaciado no cambió y aquí tenemos este color ámbar. Significa que estas propiedades vienen de nuestra clase de botón primario. No obstante, si nos dirigimos a la sección de fondo, se puede ver que tenemos estos color azul y significa que este color, esta propiedad en particular proviene de la clase combo de luz. Pero para entenderlo mejor, voy a seleccionar el botón principal. Como puedes ver, solo hay una clase aplicada, no tenemos ninguna clase combo, y voy a modificar el relleno de 30 a 40 así como así. Como puedes ver, el cambio que hice aquí se aplica automáticamente a este botón, aunque teníamos una clase combo. ¿ Por qué? Porque cuando creamos la clase combo, no tocamos la propiedad de espaciado, solo modificamos el color del fondo. Así funcionan las clases combinadas. Están construidos encima de nuestra clase base. Aparte de estas dos clases, la clase base y la clase combo, tenemos otro tipo de clase que se llama clase global. Déjame mostrarte cómo funciona. Voy a seguir adelante y arrastrar y soltar un bloque Div aquí en mi contenedor. Ahí vamos. Este es un bloque Div vacío. Voy a seguir adelante y asignarle una clase. Entonces voy a crear una nueva clase y llamémosla “Sombra”. Voy a ponerlo fuera de mi contenedor que se podría ver mejor. Está justo aquí en la cima, y le di esta clase Shadow. Ahora voy a ir a la sección “Efectos”, y desde aquí, voy a dar clic en este botón más para agregar algunas sombras a este bloque Div en particular. Como se puede ver, aquí se ha agregado la sombra. Voy a modificar las propiedades, la cantidad de desenfoque y el tamaño, y déjame modificar también la opacidad. Enfriar. Ahora tenemos una clase global. ¿Qué significa? Siempre que queremos aplicar algún estilo específico a muchos elementos de nuestra página web, podemos usar clases globales. Por ejemplo, supongamos que tenemos diferentes botones y tenemos diferentes imágenes. Déjame seguir adelante y arrastrar y soltar aquí una imagen que podrías ver mejor. Voy a disminuir su ancho a 300 píxeles. Enfriar. Supongamos que queremos tener una sombra de gota consistente para todos nuestros elementos. En este caso, voy a seleccionar aquí mi botón principal y voy a añadir nuestra clase global a él. Busquemos sombra. Como se puede ver, dice “Clases globales de combo”. Ahí vamos. Aquí se ha agregado la sombra. Ahora voy a seleccionar este botón primario y aquí voy a escribir “Sombra”. Ahí vamos. Se ha aplicado la sombra y hagamos lo mismo por esta imagen. Aquí no hay clase. Entonces primero le voy a dar una clase, Imagen, y luego voy a añadir la sombra, Clase Global a eso, así como eso. Como puedes ver, ahora estos tres elementos utilizan nuestra Clase Global de Sombra. Pero ¿y si quiero modificar las propiedades de esta Shadow Global Class? Puedo seleccionar este bloque Div. Se trata de un elemento temporal. Simplemente puedo eliminar eso y no pasa nada, pero si quiero modificar las propiedades de esta clase global, voy a necesitar seleccionar este bloque Div. Supongamos que quiero cambiar, digamos, tamaño cantidad aquí. Como se puede ver, los cambios se aplican a todos aquellos elementos que están utilizando nuestra clase global. Si estás familiarizado con diferentes software de diseño como Figma o Sketch, seguro que has usado estilos. En Figma, podemos crear estilos de color, estilos de tipografía. Este es exactamente el mismo concepto. Creamos nuestros estilos una vez y los aplicamos a múltiples elementos una y otra vez y otra vez, y de esta manera, cuando queremos hacer algunos cambios, podemos hacerlo una vez y los cambios se aplican inmediatamente a todos los elementos que están usando esa clase específica. Chicos, eso es todo por este video. Espero que lo hayas disfrutado y espero que ahora tengas una mejor comprensión de las clases. Usaremos clases casi todo el tiempo cuando trabajemos en nuestros proyectos. Así que asegúrate de entender correctamente el concepto de clases ya que las vamos a utilizar a través de nuestros proyectos. Te veré en el siguiente video. 28. Ajustes de visualización: Cualquier sitio web que visite hoy en día está usando una de las seis configuraciones de pantalla aquí. Si te diriges a la sección de diseño del lado derecho, puedes ver que tenemos seis ajustes de pantalla diferentes. En este video, vamos a hablar de cada una de estas configuraciones de pantalla, cuál es la diferencia entre ellas, cómo puedes usarlas y cuándo debes usar cada una de ellas. Es importante aprender muy, muy bien estos ajustes de pantalla porque si no lo haces, es muy difícil para ti crear diferentes diseños para tus proyectos. Asegúrate de prestar atención a los detalles porque a veces la diferencia es sutil. No obstante, en proyectos del mundo real , marca la diferencia. Sin más preámbulos, empecemos. En primer lugar, voy a seguir adelante y añadir un encabezamiento a este contenedor. Voy a seguir adelante y seleccionar este contenedor y quitar este relleno superior. No necesito eso. Ahora tenemos este rubro. Déjenme darle una clase. Voy a escribir H1. Entonces voy a seguir adelante y modificar su color para que lo pudieras ver mejor. Cualquier elemento como encabezado, párrafo, bloque div, botón, etc, use el ajuste de visualización de bloques por defecto. Aquí tenemos seis configuraciones de pantalla diferentes. Tenemos el bloque, tenemos el flex o flexbox, tenemos la rejilla, tenemos el inline-block, tenemos el inline, y finalmente no tenemos ninguno. Como se puede ver por defecto, tiene el ajuste de visualización de bloques. ¿Qué significa? Cuando el ajuste de visualización está configurado para bloquear, significa que su elemento ocupa todo el ancho de su padre. En este caso, los padres de este elemento es contenedor. Como puedes ver cuando selecciono este elemento H1, este límite ocupa todo el ancho de este contenedor. El ancho de este contenedor se establece en 1,100 píxeles. Por lo tanto, este elemento H1 ocupa aquí 1,100 píxeles también. Una cosa más importante es que si agrego más elementos aquí, ya que este encabezamiento está configurado para bloquear, si agrego más encabezamientos, así como así, se puede ver que toma la siguiente línea disponible. No se sentará justo al lado de este rubro. Es así como se comporta el elemento de bloque. Déjame darle la etiqueta H1, así como así. Si lo copio y lo pego varias veces, se puede ver que cada uno de estos elementos ocupa todo el ancho de su padre, que es en este caso el contenedor. Por eso no pueden sentarse uno al lado del otro. El siguiente ajuste de pantalla del que vamos a hablar se llama flex o flexbox. Es una de las configuraciones de pantalla más importantes con las que podemos trabajar para el desarrollo web. Déjame mostrarte cómo funciona. A diferencia del ajuste de visualización de bloques que se aplica al elemento en sí, el ajuste de visualización flex se aplica al padre de nuestros elementos. En este caso, es este contenedor. No seleccionamos nuestro elemento y cambiamos su configuración de visualización a flexbox. ¿ Por qué? Porque flexbox se utiliza para alinear diferentes elementos, ya sea horizontal o verticalmente. Déjame mostrarte cómo funciona. Supongamos que aquí tenemos múltiples encabezamientos. De esa manera, tenemos tres encabezados diferentes, y el ajuste de visualización de estos encabezados está configurado para bloquear. Ocupa todo el ancho de este contenedor. Entonces si selecciono este contenedor, como se puede ver de forma predeterminada, el ajuste de visualización se establece en bloque. Si lo cambio a flexbox, a ver qué pasa. Ahora, estos elementos están alineados uno al lado del otro, y aquí bajo el diseño, tengo diferentes propiedades con las que trabajar. Tengo dirección. Por defecto, se establece en horizontal. Puedo ponerlo en vertical para apilar verticalmente. Puedo alinear el elemento al centro, tanto horizontal como verticalmente. Puedo alinear estos elementos como quiera. Pero por ahora solo necesitas saber que siempre que queramos crear un diseño unidimensional, podemos usar flexbox. Pero ¿y si quiero crear un diseño bidimensional? En ese caso, necesitamos usar una cuadrícula. Tienes razón. Ya hablamos de grid. Si recuerdas, te dije que podemos convertir cualquier tipo de caja en una cuadrícula, y esto es exactamente lo que quise decir. Aquí si cambio la configuración de visualización de flexbox a grid, mira lo que pasa. Ahora, tenemos una cuadrícula de dos por dos. Ahora puedo modificar mi cuadrícula como quiera. Básicamente puedes convertir un bloque div en una cuadrícula, un contenedor en una cuadrícula, porque puedes cambiar fácilmente la configuración de visualización de esos elementos. Si tienes un contenedor y quieres convertirlo en una cuadrícula, simplemente puedes cambiar la configuración de visualización aquí y luego obtendrás una cuadrícula. Ahora hablemos del bloque en línea. Primero voy a volver a ajustarlo a la configuración de visualización de bloques. Si quiero que estos encabezamientos se sientan uno al lado del otro, puedo usar el bloque en línea. Pongámoslo a bloque en línea y ahí vamos. Como puedes ver ahora estos elementos se sientan uno al lado del otro y no ocupan todo el ancho de un padre, que es este contenedor. Es bueno para cuando se quiere crear algunas etiquetas que necesitan colocarse una al lado de la otra u otros casos de uso diferentes. Pero, ¿qué pasa con el inline? A éste se le llama bloque en línea. Tenemos el inline también. Si lo convierto en línea, veamos qué pasa. La principal diferencia entre el bloque en línea y en línea es que la línea en línea no respeta la propiedad de espaciado. No se pueden modificar las propiedades de espaciado aquí, pero se pueden modificar las propiedades de topografía o digamos la propiedad de fondos. Vamos a intentarlo. Ahora que nuestra configuración de visualización está configurada en línea, voy a cambiar el fondo aquí por otra cosa, así como eso, y no puedo modificar el relleno ni el margen. Pero, ¿por qué deberíamos usar alguna vez la configuración de visualización en línea cuando no podemos modificar el relleno o el margen? Bueno, déjame mostrarte un muy buen caso de uso para eso. Voy a quitar estos rubros. Voy a ir a la sección Agregar y desde aquí voy a arrastrar y soltar un párrafo en mi contenedor. Ahora, permítanme seguir adelante y cambiar el color de este párrafo. Pero primero déjame darle una etiqueta. Voy a llamarlo P por párrafo, y déjame cambiarlo a blanco. Por defecto, este párrafo está usando la configuración de visualización de bloques, y eso está totalmente bien. En primer lugar, permítanme modificar el ancho de este párrafo. Voy a ponerlo en 500 píxeles, así como así. Permítanme aumentar un poco el tamaño de la fuente. Enfriar. También la altura de la línea, voy a ponerla en 150 por ciento. Hablaremos de estas unidades más adelante. Pero por ahora, sólo quiero que se centren en este párrafo. momento, este párrafo tiene algo de estilo. Utiliza la clase P, y esta clase P tiene algo de estilo. ¿ Y si quiero darle estilo a una palabra específica aquí de manera diferente? Bueno, en ese caso, puedo seleccionar esa palabra en particular, por ejemplo, ésta, y luego desde aquí voy a dar clic en este icono de pincel, y dice, “Envolver con span”. Veamos qué hace. Si hago clic en eso, crea un lapso de texto y este lapso de texto por defecto está usando la configuración de visualización en línea. Podemos modificar el relleno o margen. Incluso si queremos cambiar las propiedades de tamaño aquí, no afecta a esta palabra. Déjame demostrártelo. Voy a escribir 500 aquí. Como puede ver, no pasa nada porque la configuración de visualización en línea no respeta las propiedades de tamaño o espaciado. Déjenme restablecer eso por ahora. Desde que creamos este lapso de texto, voy a seguir adelante y llamarlo resaltado. Ahí vamos. Lo que voy a hacer es cambiar el color de fondo de este lapso de texto en particular. Voy a dirigirme a la sección de fondos aquí, y déjame cambiar el color de fondo por otra cosa como ésta. Déjame que lo haga más ligero. Entonces voy a modificar la propiedad topográfica aquí. Igual que eso. Como puede ver, podríamos darle estilo a esta palabra en particular usando un lapso de texto, y este lapso de texto está usando la visualización en línea. Este es un muy buen caso de uso de la configuración de visualización en línea. Si tenemos múltiples párrafos en nuestro proyecto así, y sólo queremos resaltar otra palabra, simplemente podemos elegir esa palabra, envolverla con el lapso y desde aquí, voy a dar la misma clase que nosotros recién creado; resaltar. Ahí vamos. Si modifico las propiedades aquí, ya que es solo una clase, los cambios se aplican inmediatamente a todos los elementos que están usando estas clases en particular. Permítanme modificar eso. Ahí vamos. Ahora pasemos a la última configuración de visualización, que no es ninguna. Ninguno esconde en realidad los elementos. Déjame mostrarte cómo funciona. Voy a seguir adelante y quitar estos párrafos y aquí dentro de este contenedor, voy a añadir un bloque div. Al igual que esto, y este bloque div va a tener una clase. Voy a escribir tarjeta nueva, y luego voy a cambiar su color de fondo a blanco. Ahora voy a seguir adelante y agregar algunos elementos más a este bloque div en particular. Déjame empezar con añadir un encabezado, y luego voy a añadir un párrafo aquí, y finalmente voy a añadir un botón así. Entonces déjame seleccionar este nuevo bloque div de tarjeta y modificar su altura. Por defecto está configurado en auto. Voy a cambiarlo a 400 píxeles. Como mencioné antes, por defecto el encabezado y párrafo están usando la configuración de visualización de bloques. Pero, ¿y si quiero ocultar aquí un elemento? Bueno, vamos a ver qué pasa si hago clic en este ajuste no display, la última opción. Ahí vamos. Ahora está oculto. Si le doy la vuelta, así como así, se puede ver que ahora es visible. Pero usted puede decir: “¿No podemos simplemente disminuir la opacidad de este elemento?” Veamos cuál es la diferencia entre bajar la opacidad y establecer el ajuste de pantalla en ninguno. Voy a seleccionar este párrafo y de la sección de tipografía, voy a disminuir la opacidad de estos elementos usando este deslizador. Ahí vamos. No es visible. No obstante, sigue ahí. Como puedes ver, ocupa algo de espacio y si lo previsuo, puedes ver que hay algo ahí y puedo seleccionar este texto, pero no es visible. En este caso, es mejor usar una pantalla none. Algo a mencionar es que cuando usas la configuración display none aquí, el elemento todavía aparece en tu código. Simplemente desaparece en la página y de la interfaz. No ocupa ningún espacio, pero sigue ahí en nuestro código. Si quieres eliminar algo completamente de tu código, necesitas eliminar ese elemento. Para ello, solo puedes pulsar el botón Eliminar o Retroceso en tu teclado, o puedes hacer clic con el botón derecho en tu elemento y hacer clic en Eliminar. Muy bien chicos, eso es todo por este video. En el siguiente video, vamos a hablar de las marcas flex en detalle. Nos vemos entonces. 29. Flexbox: En el video anterior, hablamos de todos los ajustes de pantalla que puedes usar para tus diseños. En este video, vamos a sumergirnos en los detalles de usar Flexbox. Como mencioné antes, flexbox es muy útil para diseños unidimensionales. Te voy a mostrar algunos ejemplos útiles que realmente podrías entender cómo puedes usar diferentes características y diferentes propiedades de un flexbox. Aquí como puedes ver, creé algunas tarjetas simples. Si voy a este envoltorio, tengo tres tarjetas diferentes. Como puedes ver, cada tarjeta tiene una imagen, un encabezado, y un bloque de texto, nada de fantasía. Pero su alineación no es lo que quiero, en realidad quiero que se sientan uno al lado del otro. Para esto, lo que podemos hacer es usar un flexbox. Siempre que desee alinear algunos elementos, debe asegurarse de no establecer el ajuste de visualización de esos elementos en flexbox. Eso está mal. Déjame mostrarte lo que pasa. Si selecciono esta tarjeta, por ejemplo, la primera, y giro la configuración de visualización a flexbox, esto es lo que sucede, y no es nuestra intención. Necesitas asegurarte siempre de elegir al padre de esos elementos. En este caso, el padre de estas tarjetas es este envoltorio. Voy a seleccionar el envoltorio, que es el padre, y lo voy a convertir en un flexbox. Ahí vamos. Ahora estas cartas se sientan una al lado de la otra, y si quiero que se apillen verticalmente, puedo cambiar la dirección de horizontal a vertical, así como así. Por ahora lo voy a mantener horizontal, y hablemos de la alineación y de la justificación. Cuando vuelvo algo a un flexbox, puedo controlar la alineación de sus hijos. Ahora mismo, los hijos de este flexbox son estas tarjetas. De lo que voy a hacer, les voy a mostrar cómo funciona la alineación. Si cambio ahora la alineación, no se puede ver lo que está pasando. ¿ Por qué? Debido a que la altura de esta envoltura está configurada en auto. Déjame establecer una altura específica para este envoltorio, lo voy a establecer en 500 píxeles. Ahora como puedes ver, estas cartas se estiran, porque la opción Alinear está configurada para estirar. Pero, ¿y si quiero que estén alineados al centro, tanto horizontal como verticalmente? Se establece la justificación en centro, si cambio la opción Alinear a centrar también, esto es lo que sucede. Como se puede ver, esta primera carta es más pequeña. El motivo es que, si hago clic en esta tarjeta, se puede ver que la altura está ajustada a auto. Aquí en estas dos tarjetas, tenemos cuatro líneas de texto, y aquí sólo tenemos tres líneas de texto. Si solo sigo adelante y agrego algunas palabras ficticias aquí, se puede ver que vamos a conseguir la misma altura aquí ahora. Ahora hablemos de la alineación. Puedo alinearlo hacia arriba, hacia abajo, hacia el centro, puedo ponerlo para estirar. Puedo cambiar la justificación, a la izquierda, a la mitad, a la derecha, y estas dos justificaciones son tan importantes. Este dice Espacio entre, así que veamos qué pasa. Si hago clic en eso, distribuye un espaciado parejo entre estas tarjetas. No obstante, la primera carta se pegará al lado izquierdo del límite, que es este envoltorio. La tarjeta derecha se pegará al lado derecho de este límite. Pero si cambio la justificación a la última opción, Espacio alrededor, se puede ver que tenemos un espaciado parejo entre cartas, pero la primera y última cartas no están adjuntas a los bordes de este envoltorio. Esta es la principal diferencia entre ellos. La mayoría de las veces usamos Espacio entre, es mucho más seguro trabajar con esta opción, pero solo necesitas entender la diferencia entre estas opciones. Hasta el momento hemos estado trabajando con los elementos de los padres. Pero cuando volvemos el elemento padre a un flexbox, el propio hijo también tiene algunas propiedades. El niño de aquí es esta tarjeta. Voy a seleccionar una tarjeta, y del lado derecho podemos ver que tenemos el flex child, y aquí tenemos diferentes opciones. Contamos con Dimensionamiento, y luego tenemos Alineación y orden. Si hago click en esto, puedes ver vamos a conseguir algunas opciones también. Veamos qué va a pasar si cambio la opción de dimensionamiento. Tenemos tres opciones de dimensionamiento diferentes aquí. El primero dice Retirar si es necesario, y por defecto está configurado en esta opción. Significa que si vamos a otros puntos de ruptura, por ejemplo, dispositivos más pequeños como este, se encoge, ya que es necesario, ya que no tenemos tanto espacio. Pero echemos un vistazo a la siguiente opción que dice Crecer si es posible. Si hago clic en eso, como pueden ver, no hay espacio en el medio, y llena todo el espacio dentro de nuestro envoltorio, así que esta es la diferencia entre ellos. Entonces tenemos No encoger ni crecer. Ahora si voy al punto de ruptura de la tableta, se puede ver que no se encogen, y no es bueno en realidad en términos de capacidad de respuesta. También puedes usar la opción manual, pero nunca he usado eso, y es mejor evitarlo ya que te va a complicar mucho la vida. Voy a cambiarlo a encoger si es necesario. Ahora hablemos de alineación y orden. Aquí tenemos Align, y tenemos Orden. En ocasiones puede que necesitemos cambiar el orden de nuestras tarjetas. Por supuesto que podemos hacer eso dentro del navegador, así, pero también podemos hacerlo aquí usando las opciones flex child. Si selecciono esta tarjeta y agrego una clase combo. Por ejemplo, llamémoslo Summer, y quiero que siempre sea la última carta, puedo ponerla a durar, y ahí vamos. Su colocación ha sido cambiada. Puedo cambiarlo a primero, y puedo ponerlo a No cambiar. Nuevamente, puedo usar el pedido personalizado también, pero la mayoría de las veces usamos primero y último, así como así. Hablemos de la alineación. Supongamos que quiero alinear esta primera carta de manera diferente, puedo hacerlo. Puedo seleccionar esta tarjeta, ya que se ha agregado una clase combo a este niño. Puedo cambiar la alineación a arriba, centro, abajo, o de nuevo, estiramiento o línea base. Voy a ir con auto. El auto toma la alineación que establecemos al elemento padre aquí, Stretch. Pero a veces por algunas razones, es posible que necesitemos anular esas preferencias, aquellas propiedades que establecemos para el elemento padre. Ahora echemos un vistazo a otro ejemplo. Aquí en la parte inferior creé algunos bloques de enlace. Estos son algunos bloques de enlace simples, y he creado algunas etiquetas aquí, como pueden ver. Hay un envoltorio llamado Tags, y todas estas etiquetas están dentro de este envoltorio. Si selecciono esta etiqueta como envoltorio, y la convierto en flexbox, mira lo que pasa. Como se puede ver, nada está organizado y nuestras etiquetas se destruyen. ¿ Cómo podemos arreglar eso? Es muy sencillo. ¿ Se puede ver aquí esta opción Niños, que dice No envolver, por defecto? Si lo pongo en Wrap, envuelve a todos nuestros hijos. Estas etiquetas son los hijos del envoltorio de esta etiqueta, y ahora tengo acceso a esta opción de alineación anticipada. Aquí puedo configurarlo en Alinear filas: Inicio. Ahora el envoltorio de esta etiqueta envuelve a todos los niños dentro. Si sigo adelante y copio y pego estas etiquetas una y otra vez, se puede ver que están alineadas perfectamente como se esperaba. ¿ Se puede ver lo poderoso que es trabajar con flexbox? Echemos un vistazo a la orden una vez más. Aquí, si quiero que esta etiqueta de diseño UI/UX sea siempre nuestro último elemento, puedo darle una clase combo específica. Por ejemplo, voy a escribir UI/UX, y luego voy a cambiar el orden para que dure, así como así. Chicos, eso es todo por este video, espero que lo hayan disfrutado, veré en el siguiente. 30. En. desto de Flexbox: Ahora que has aprendido a trabajar con Flexbox, es hora de desafiar tus habilidades. Workflow ha creado un juego Flexbox muy cool para que practiques lo que aprendiste. Si vas a flexboxgame.com, puedes previsualizar este juego y realmente puedes jugar a este juego. Se pueden hacer algunos ejercicios. Existen 28 diferentes desafíos CSS Flexbox que puedes resolver con el fin de ver si realmente entiendes cómo funciona o no el Flexbox. Lo que quiero que hagas es seguir adelante y resolver estos retos uno por uno desde el nivel uno hasta el 28. A medida que mueves uno del nivel uno al nivel 28, se hace cada vez más difícil resolver estos retos, pero no te preocupes, estoy bastante seguro de que puedes resolverlos. Lo que importa es que intentes resolverlos. No importa cuánto tiempo se tarda en resolverlos. Lo que importa es intentarlo. En el siguiente video, vamos a resolver todos estos retos juntos. Nos vemos en el siguiente. 31. Solución de desafío: Oye, espero que hayas podido resolver todos los 28 retos de Flexbox. Pero si no pudieras, eso está bien porque juntos tú y yo, vamos a caminar por todos los 28 niveles y vamos a resolver cada uno de ellos. ¿ Estás listo? Empecemos. En primer lugar, empecemos con el Nivel 1. Veamos qué tenemos aquí. Dice mover el círculo verde en el contorno usando el ajuste Flex Layout. En primer lugar, necesitamos seleccionar al padre. Recuerda, siempre selecciona primero al padre. Dice seleccionar esta caja blanca y luego jugar con Flex-Layout en el panel derecho. Aquí lo único que tenemos que hacer es cambiar la justificación a la derecha. Eso es todo. El nivel 1 es fijo. Pasemos al siguiente, Nivel 2. Aquí tenemos dos círculos con dos posicionadores. Es sencillo también. Voy a seleccionar a un padre que es este patio de recreo y justificarlo al centro así como así. Pasemos al siguiente. Aquí tenemos uno, dos, tres círculos. Como puedo ver, necesitamos modificar la justificación al espacio alrededor así como así. Ahora pasemos al Nivel 4. Enfriar. Aquí lo único que tenemos que hacer es modificar el Alinear a fondo. ¿ Qué hay de aquí? Bueno, necesitamos cambiar tanto el Alinear Justificar aquí para alinear este círculo con el centro. Voy a cambiar el Alinear y el Justificar. resuelve el número 5. Pasemos al siguiente. Aquí, primero, lo voy a alinear con el centro, y luego voy a elegir Espacio Alrededor de éste. El siguiente aquí, sólo necesitamos cambiar la Dirección. Estos círculos deben apilarse verticalmente. Voy a cambiar la Dirección a vertical y está resuelto. Pasemos al número 8. Aquí, de nuevo, necesitamos cambiar la Dirección a Vertical. También, voy a cambiar el Justificar, y finalmente, voy a alinearlo a la derecha. Hecho. El siguiente. Aquí vamos a utilizar la opción inversa. No hablamos de ello antes, pero si echas un vistazo a la sección Dirección justo al lado de estas pestañas, tenemos este ícono. Hay dos flechas, y esta es la opción Invertir. Vamos a dar click en eso. Hecho. Pasemos al siguiente. Aquí primero voy a cambiar la Dirección a Vertical y luego voy a Alinearla al lado derecho y al fondo, pero tenemos un problema. Aquí tenemos el número 1, pero el número 1 debe colocarse aquí en la parte inferior. Por lo tanto, voy a seleccionar al niño, que es este círculo. Asegúrate de seleccionar al niño, y voy a modificar el pedido. Aquí voy a cambiar el orden para que dure. Para éste, el medio, voy a cambiar el orden a primero. Hecho. ¿Se puede ver lo fácil que es trabajar con Flexbox? ¿ Y éste qué? En primer lugar, hagamos vertical la dirección, después voy a cambiar la justificación al espacio entre, y finalmente, voy a modificar el orden. Voy a seleccionar primero el círculo, que es este niño, y cambiar el orden para que dure, y éste, el segundo debe ser el primero. Ahora veamos qué tenemos aquí. Como pueden ver aquí, tenemos uno, dos, tres, y los posicionadores son tres, dos, uno. Tenemos que revertir primero el diseño así. Voy a dar clic en este botón Invertir, y luego lo voy a alinear a la parte inferior, y finalmente, voy a usar Espacio entre. Hecho. Pasemos al siguiente. Veamos qué tenemos aquí. Como se puede ver, estos círculos se encogen, y esto no es lo que queremos. Entonces, ¿qué debemos hacer? ¿ Te acuerdas del ejemplo de etiqueta que te mostré antes? Cambiamos a los niños a envolver. Esto es exactamente lo que tenemos que hacer aquí. En primer lugar, seleccione el padre y cambie los hijos a Envolver, y listo. No necesitamos tocar nada más. Pasemos al Nivel 14. De nuevo aquí, solo necesitas cambiar los hijos a Wrap, y luego necesitamos modificar la alineación. Primero voy a Alinearlo aquí al centro, y luego voy a modificar el Justificar al centro. Pasemos al Nivel 15. De nuevo, necesitamos cambiar a los niños a Envolver, y luego voy a cambiar el Alinear aquí al espacio entre, y finalmente, voy a cambiar el Justificar a Espacio Entre. Ahora pasemos al siguiente. Aquí, de nuevo, necesitamos cambiar a los niños a Wrap. Veamos qué tenemos aquí. Justo en la parte superior, tenemos los comodines de posición verdes, luego los de color naranja, y por último, los de posición morados. Veamos qué pasa si cambio la dirección de Horizontal a Vertical. Ahí vamos. Ya casi estamos ahí. Ahora lo que voy a hacer es cambiar el Justificar a Centro, y también voy a cambiar el Alinear aquí a Centro. Pasemos al siguiente. Veamos qué tenemos aquí. Uno, dos, y cuatro, y cinco están colocados correctamente, lo único que tenemos que hacer es cambiar la alineación de estos círculos verdes. Voy a seleccionar este círculo y luego voy a cambiar la alineación a fondo hecho. Ahora estamos en el Nivel 18. Veamos qué tenemos aquí. Siempre podemos echar un vistazo a una pista aquí también. Dice el diseño inverso en el contenedor flex y cambiar la alineación en dos de los niños flex. En primer lugar, voy a seleccionar el contenedor que es este patio de recreo, y luego voy a revertirlo. Ahora vamos a seleccionar este círculo uno, alinearlo con el centro, este Círculo tres, alinearlo con la parte inferior, y finalmente, voy a volver a seleccionar el padre y cambiar el Justificar al espacio entre así como eso. Ahora pasemos al siguiente nivel, Nivel 19. En primer lugar aquí, voy a seleccionar este círculo y voy a cambiar el tamaño para crecer si es posible, y ya está hecho. Pasemos al Nivel 20. número uno se coloca correctamente, deben modificar los números tres y dos. Voy a seleccionar el número dos y cambiar el tamaño para crecer si es posible, y ya está hecho. Pasemos al siguiente, Nivel 21. Aquí echemos un vistazo a la pista. Dice que el círculo verde debe tener ancho 200 píxeles. Sí, así es. Voy a seleccionar el círculo uno, y voy a cambiar el ancho de 100 píxeles a 200 píxeles. Voy a seleccionar el círculo dos, y cambiar el tamaño para crecer si es posible. Vámonos al Nivel 22. Aquí, el número uno debe estar aquí en medio, y el número tres debe colocarse aquí. En primer lugar, voy a seleccionar el número tres, y voy a cambiar el orden a primero, y ya está hecho. Pasemos al siguiente reto. Veamos qué tenemos aquí. Este número dos debería ser el último hijo. Voy a cambiar el orden para que dure. número tres debe ser el primer hijo, así que voy a cambiar el orden a primero, y el resto está bien. Voy a pasar al siguiente, Nivel 24. Veamos qué tenemos aquí. En primer lugar, voy a seleccionar el patio de recreo, que es el padre aquí, y voy a cambiar a los niños de Don't Wrap a Wrap. no pasa nada. Eso está bien. Entonces este número tres debería ocupar aquí todo el ancho de este contenedor. Como pueden ver aquí, tenemos una pista. Dice, ¿adivina qué tienes que hacer si quieres flexionar child para que abarque todo el ancho de su contenedor principal? Tan solo establece su ancho al 100 por ciento, y esto es exactamente lo que vamos a hacer. Voy a seleccionar el número tres, y voy a cambiar el ancho al 100 por ciento. Entonces voy a cambiar el orden a primero. Ahora lo que necesito hacer es seleccionar al padre y cambiar la opción de línea aquí. Voy a cambiar las filas Alinear a Alinear, empezar, y ya está hecho. Pasemos al siguiente. No hay indicio esta vez, eso está bien. Veamos qué tenemos. En primer lugar, el segundo círculo debe colocarse aquí en lugar de este círculo verde, por lo tanto, voy a seleccionar esto y voy a cambiar su orden a primero. Entonces como puedes ver, número uno debería ocupar todo el ancho de este Marcador de posición verde. Por lo tanto, voy a cambiar su ancho al 100 por ciento, y como pueden ver, ya que no cambiamos a sus hijos a Wrap, todo está mal aquí. Voy a cambiar a los niños a Wrap. Estamos llegando ahí y veamos qué tenemos. En primer lugar, voy a seleccionar este círculo tres y cambiar el tamaño para crecer si es posible. El único que queda es el alineamiento. Entonces voy a seleccionar el padre y cambiar la alineación aquí por espacio entre. Está bien, hecho. Pasemos al siguiente. Pista, el ajuste Alinear en los niños flex individuales te ayudará. En primer lugar, este círculo uno debe ser el último ya que se va a colocar en la parte inferior. Voy a cambiar su orden para que dure. El orden es correcto ahora. Entonces voy a seleccionar el círculo uno y establecer su ancho al 100 por ciento. Por último, voy a seleccionar al padre y cambiarlo a Wrap. Voy a seleccionar el círculo uno, éste, y cambiar su alineación a fondo. Voy a seleccionar una vez más a los padres. Veamos cómo podemos alinear estos dos círculos. Si cambio la justificación a la derecha, número dos se colocará correctamente. Ahora, necesito cambiar la alineación de este círculo en particular, el número tres. Necesito seleccionarlo y cambiemos su alineación a fondo. nivel 26 también se hace. Pasemos uno al Nivel 27. Veamos qué tenemos aquí. El número dos debe ocupar todo el ancho de este Marcador de posición. Voy a seleccionar eso y voy a cambiar el ancho al 100 por ciento. Entonces, como saben, necesitamos seleccionar al padre y cambiarlo para envolver. Entonces seleccionemos el círculo dos, y hagámoslo primero. ¿ Qué más tenemos aquí? Si selecciono el círculo uno y cambio el tamaño para crecer si es posible, crecerá, pero el orden no es correcto. Lo que voy a hacer es seleccionar al padre y revertir la dirección así como así. Voy a seleccionar este círculo cinco y establecer el dimensionamiento para crecer si es posible. Por último, mientras está seleccionado, lo voy a alinear al fondo. Hecho. Por último pero no menos importante, Nivel 28, ahora combina todas las cosas que aprendiste hoy para resolver esto. Veamos cómo podemos resolver este. Interesante, ¿no? Veamos qué tenemos. Aquí, tenemos uno, cuatro, cinco. Voy a seleccionar al padre y revertir primero la dirección, así como así, ya que uno está aquí. Entonces voy a seleccionar el segundo círculo y hacerlo primero. Ya que invertimos eso, el orden no funciona como se esperaba. Entonces cuando elijo primero, significa durar ahora, y si elijo último significa primero. Pero por ahora, elegamos primero. Voy a seleccionar este círculo verde y hacer que dure. Entonces mientras está seleccionado, voy a establecer su ancho en 100 por ciento, y seleccionar el padre, y elegir Envolver. Voy a seleccionar este círculo verde y cambiar su alineación a fondo. Voy a seleccionar este círculo, este morado, y cambiar su orden para que dure. Seleccionemos uno de estos círculos anaranjados y alinéelos a la parte inferior. Por último, necesitamos seleccionar nuestro segundo círculo y cambiar su dimensionamiento para crecer si es posible. Ahí vamos. Hemos resuelto con éxito todos los 28 retos de CSS Flexbox. Déjame decirte algo si no pudieras resolver algunos de estos retos, está bien porque, en proyectos del mundo real, nunca usamos algunos de estos diseños. Pero es bueno que veas lo que es posible y cómo puedes utilizar el Flexbox. Eso es todo por este video. Espero que lo hayan disfrutado. Te veré en el próximo. 32. Flexbox vs Grid: Ahora que has aprendido sobre flexbox y grid, es hora de compararlos uno al lado del otro para ver cuál debes usar para qué propósito. Permítanme mencionar que a veces no hay manera correcta o incorrecta cuando se trata desarrollo web porque se puede lograr algo usando grid y se puede lograr lo mismo usando un flexbox. En ocasiones todo llega a nuestras preferencias y cómo queremos estructurar nuestro sitio web. Por lo tanto, les voy a mostrar algunos ejemplos para entender mejor la diferencia. En primer lugar, hay que saber que cuando tenemos diseños unidimensionales, probablemente sea mejor usar un flexbox, pero a veces si quieres hacer que nuestro diseño responda y hacer nuestra vida mucho más fácil, podemos hacer lo mismo usando una cuadrícula. Aquí tengo una tarjeta dentro de esta sección. Voy a seguir adelante y añadir un contenedor aquí. Voy a arrastrar y soltar un contenedor. Entonces déjame agregar el contenedor de clase a eso. Por último, voy a arrastrar y soltar esta tarjeta en mi contenedor. Agradable. Ahora voy a copiarlo y pegarlo tres veces. Déjame seleccionar mi sección ya que la convertí en flexbox, y ahora voy a seleccionar mi contenedor y voy a cambiar la configuración de visualización a flexbox. Aquí tenemos un flexbox horizontal. Como puedes ver, todo se ve muy bien. Puedo cambiar la justificación al espacio entre al espacio alrededor, izquierdo, medio, lo que quiera. Pero ahora estoy usando un diseño unidimensional. Si tengo dos contenedores como este, ahora tenemos un diseño bidimensional. Probablemente tenga más sentido usar una cuadrícula. Ahora vamos a revisar este diseño en diferentes puntos de ruptura. Voy a ir a Tablets y como puedes ver, se encoge. Agradable. No obstante, si quieres hacer que nuestro diseño sea más receptivo, tendría sentido usar también una cuadrícula, incluso para el diseño unidimensional. Depende totalmente de ti. Como mencioné antes, no hay manera correcta o incorrecta. En ocasiones solo necesitamos enfocarnos en nuestras preferencias y enfocarnos en el hecho de que de qué manera se adapte mejor a nuestras necesidades. Ahora déjame seguir adelante y arrastrar y soltar una cuadrícula aquí. Voy a ponerlo dentro de mi sección y dejarme arrastrar estas cartas dentro de esta cuadrícula. Por supuesto, podría convertir este contenedor en una cuadrícula, pero voy a hacer esto manualmente, así como esto. Voy a retirar el contenedor. Ahora tenemos esta cuadrícula, que está dentro de nuestra sección. Ups, voy a copiar y pegar esta tarjeta una vez más. Déjame seleccionar esta cuadrícula y voy a agregarle una clase. Yo lo voy a llamar Grid. Entonces, permítanme añadir algún margen de ambos lados. Enfriar. Al igual que un flexbox, también podemos controlar al niño de una cuadrícula. Aquí, si selecciono a este niño, esta tarjeta, puedo modificar la alineación, puedo cambiar la justificación aquí, puedo cambiar el orden, y así sucesivamente. Se trata de ti de decidir si necesitas usar una rejilla o flexbox. Asegúrate de trabajar con ambos y comprueba cuál tiene más sentido usar para tus necesidades. Muy bien chicos, eso es todo por este video, veré en el siguiente. 33. Espaciado: Aquí tengo una tarjeta, pero no se ve bien. ¿ Por qué? Por el espaciado. Aquí, el contenido no puede respirar, por lo tanto, necesito modificar el espaciado entre estos elementos. Como mencioné antes, cuando se trata de espaciado, tenemos dos componentes principales. Tenemos el margen y el relleno. El margen es el espacio fuera del elemento, y el relleno es el espacio dentro de un elemento. Echemos un vistazo. Aquí, voy a seleccionar mi tarjeta. Si quiero agregar algo de espacio de respiración para el bloque de texto aquí, voy a seleccionar eso, y puedo agregar relleno izquierdo y relleno derecho, así como eso. Alternativamente, lo que puedo hacer es seleccionar la tarjeta y agregar el relleno. No obstante, este relleno se aplica a todos los elementos dentro de esta tarjeta, a todos los niños de este bloque. Vamos a intentarlo. Así como así, y ahí vamos. Pero esto no es lo que quiero. Voy a deshacer el proceso, y voy a seleccionar el bloque de texto, y voy a agregar 20 píxeles y relleno izquierdo y derecho. No obstante, es muy tedioso y consume mucho tiempo agregar el relleno para cada lado uno por uno, por lo tanto, puedo mantener presionada la tecla Opción en macOS y la tecla Alt en Windows, y luego hacer clic y arrastrar para ajustar el relleno para lados opuestos. Justo así. Si quiero cambiar el relleno para todos los lados como arriba, abajo, izquierda y derecha, en lugar de la tecla Opción o Alt, necesito mantener presionada la tecla Mayús en mi teclado y luego hacer clic y arrastrar. Echa un vistazo. Eso ahorra mucho tiempo. Pero, ¿qué pasa con el margen? Déjame poner el relleno superior aquí en cero. Voy a seleccionar este rubro. Esta vez, en lugar de relleno, voy a cambiar el margen, el margen inferior. Como mencioné antes, el margen es el espacio fuera de un elemento. Por lo tanto, voy a aumentar eso en 10 píxeles y el margen superior en 10 píxeles también. Ahora se ve mucho mejor. Ahora esta tarjeta está dentro de un contenedor. Si lo llevo fuera de este contenedor por un segundo, se puede ver que toca los bordes. Si quiero alinearlo al centro de mi sección, déjame quitar este contenedor por un segundo. Si quiero centrarlo tanto horizontal como verticalmente, tengo algunas opciones. La primera opción es que pueda seguir adelante y establecer el margen manualmente, así como esto, lo cual no es una buena opción y no deberías probar eso nunca. El motivo es que, cuando configuras el margen manualmente, puede verse bien en un dispositivo. No obstante, si vas al punto de ruptura del iPad, puedes ver que no está centrado porque aún tiene un margen de 435 píxeles. Nunca debes hacer eso. Voy a restablecer este margen. Voy a dar click en eso. Demos click en Reset. Alternativamente, puede mantener presionada la tecla Opción o Alt y luego hacer clic en eso así. ¿ Cómo puedo alinearlo al centro? Tengo diferentes opciones. Siempre que tengas un elemento que tenga un ancho fijo como este, cuando aquí se define el ancho, como puedes ver aquí, el ancho es de 300 píxeles, puedes establecer el margen izquierdo y derecho en auto. Si hago clic en eso, puedo ajustar el margen izquierdo a auto y luego voy a ajustar el margen derecho a auto también. Ahí vamos. Ahora está centrado perfectamente. Vamos a intentarlo. Voy a comprobar si responde y si funciona correctamente. Voy a ir a Tablet, como pueden ver, sigue en medio. Eso es perfecto. Esta es una opción. Permítanme restablecer estos márgenes. Podrías hacer click en este botón aquí mismo. Ahora tanto los márgenes izquierdo como derecho están configurados en auto. No obstante, tenga en cuenta que de esta forma sólo funciona cuando se tiene un ancho definido. De no ser así, puedes usar de otra manera, y eso son las marcas de flex. Permítanme restablecer estos márgenes. Ahora, tengo esta tarjeta, y voy a seleccionar la sección y la configuración de visualización está configurada para bloquear. Voy a ponerlo en flex. Voy a alinearlo al centro y justificarlo al centro. Ahí vamos. Tenemos lo mismo, pero esta opción funciona aunque tu elemento no tenga un ancho definido. Ahora te voy a mostrar otro ejemplo. En primer lugar, voy a seleccionar esta tarjeta, y como pueden ver, su configuración de visualización está configurada en bloque. Voy a cambiarlo a flex por un segundo y todo está desorganizado porque la dirección está puesta en horizontal. Voy a cambiarlo a vertical, estamos bien otra vez. Ahora, voy a cambiar la alineación a centro. Déjame seleccionar la imagen ahora. Permítanme cambiar su ancho a 200 píxeles y es de altura a 200 píxeles también. En ocasiones, es posible que necesitemos mover esta imagen hacia arriba para tener una imagen superpuesta. Para ello, podemos usar el espacio negativo. Déjame mostrarte cómo funciona. Voy a seleccionar esta imagen, y aquí en el margen, voy a dar un margen negativo. Justo así. Ahí vamos. Usar márgenes negativos está totalmente bien. De hecho, muchos sitios web populares los usan. Muy bien, chicos, todo se trata de espaciar. Espero que lo hayan disfrutado. Te veré en el siguiente video. 34. Tamaño: En desarrollo web, existen unidades de diferentes tamaños que podemos utilizar. En este video, vamos a hablar de cada uno de ellos. Empecemos. En primer lugar, voy a seguir adelante y arrastrar y soltar una imagen en mi Canvas. Déjame dejarlo caer dentro de mi sección aquí. Para las imágenes, puedes especificar las dimensiones aquí mismo en la configuración de la imagen, pero no es una buena manera. ¿ Por qué? Déjame mostrarte. Aquí, voy a cambiar el ancho a 400 píxeles y la altura va a ser auto. Por ahora, se ve bien. Pero si voy al punto de ruptura del escritorio y si quiero hacer algunos cambios, específicamente para esta dimensión, los cambios se aplican también a la versión de escritorio. Déjame mostrarte. Voy a hacer doble clic en él, y voy a disminuir el ancho aquí a 300 píxeles. Si vuelvo al punto de ruptura del escritorio, ahí vamos, nuestra imagen se redimensiona y esto no es bueno cuando queremos diseñar páginas web receptivas. Por lo tanto, siempre es bueno usar clases con el fin de dimensionar tus imágenes. Debes evitar dimensionar tus imágenes aquí tanto como puedas. Voy a ponerlo en auto. Genial. Ahora, en el lado derecho, se puede ver que está en el panel lateral, tenemos la sección de tamaño. Como mencioné antes, estas son todas propiedades CSS y el tamaño también es una propiedad CSS. Contamos con diferentes unidades con las que trabajar. El más simple es el pixel. Las dimensiones de cualquier elemento por defecto se establecen en auto. Como se puede ver, dice auto. Auto determina las dimensiones de ese elemento con respecto al padre de ese elemento. En este caso, los padres de esta imagen es esta sección. Aquí el ancho y la altura están configurados en auto. Voy a seleccionar esta imagen y en lugar de auto le voy a dar un valor específico. Digamos que 350 píxeles. Para escribir la unidad, simplemente puedes escribir px, o simplemente podrías hacer click en este pequeño “PX” aquí y verás todas las unidades disponibles. Voy a seleccionar “PX”, déjame hacerlo más grande. Voy a ponerlo en 450 píxeles. Ahora esta imagen tiene un ancho específico. Podemos establecer una altura específica para eso también. Vamos a ponerlo en 350 píxeles, así como así. Pero, ¿qué pasa con otras unidades? Tenemos porcentaje. Yo voy a elegir eso. Bueno, el porcentaje es en realidad relativo al elemento padre también. Por ejemplo, si quiero que esta imagen ocupe 30 por ciento del espacio disponible aquí en esta sección, que es el elemento padre, puedo seleccionarla y puedo ajustarla al 30 por ciento. Tenga en cuenta que el porcentaje realmente toma parte del espacio disponible. Aquí para esta sección, ahora mismo tengo un relleno de 40 píxeles izquierdo y derecho. Por lo tanto, ocupa el 30 por ciento del espacio izquierdo aquí. Déjame seleccionar mi imagen. Simplemente puedo ponerlo en 50 por ciento o la cantidad que quiera. A la altura le pasa lo mismo. Si muevo esta imagen fuera de mi sección aquí, y el padre de esta imagen ahora es el cuerpo, lo que ocupa el 50 por ciento de la ventana del navegador. Vamos a comprobarlo. Si obtengo una vista previa de eso, como pueden ver, ocupa el 50 por ciento de la ventana de mi navegador. Si solo modifico la dimensión, se puede ver que aún ocupa el 50 por ciento de la dimensión. Es fácil, ¿no? Ahora pasemos a la siguiente unidad. La siguiente unidad es em. Vamos a hablar de ems y rems, aunque no son tan útiles. Empecemos con ems. En realidad, ems y rems son relativos al tamaño de fuente. Aquí el tamaño de fuente se establece en 14 píxeles. Un em es igual a 14 pixels. Si quiero establecer el ancho en 280 píxeles, solo puedo multiplicar esa cantidad por este tamaño de fuente. Digamos 20. Por lo que 20 ems equivale a 280 píxeles. Escribamos 20 ems. Ahí vamos. Si solo escribo 280 pixeles, para que veas que esto es lo mismo. Déjame demostrártelo. Ahí vamos. Nada cambia, porque 280 píxeles es igual a 20 ems. Déjame volver a escribir 20 ems. Ahora si trato de aumentar el tamaño de la fuente, este ancho cambia también en consecuencia. Voy a mantener presionada la tecla Opción en mi teclado o la tecla Alt si estás usando Windows y solo tienes que hacer clic y arrastrar. Ahí vamos. Voy a establecer el tamaño de fuente en 30. Un em ahora es igual a 30 píxeles. Por lo tanto, el ancho de esta imagen ahora es de 600 píxeles. veces puedes usar ems. Por ejemplo, si quieres diseñar una tarjeta y quieres que todos los elementos respeten el tamaño de fuente. Pero uno de los mejores casos de uso para usar ems es en botones. Voy a seguir adelante y arrastrar y soltar un botón aquí. Este botón, por defecto tiene una izquierda de 15 píxeles en el relleno derecho. Veamos qué pasa si cambio el tamaño de la fuente. En primer lugar, déjenme darle una clase a este botón. Voy a escribir Botón Nuevo. Si trato de aumentar el tamaño de la fuente, veamos qué pasa. ¿ Puedes ver eso? El relleno se mantiene igual. Podemos simplemente solucionar este problema. En primer lugar, voy a establecer el tamaño en 16 píxeles. Ahora aquí para el relleno, voy a usar ems, para el relleno superior, inferior, izquierdo, y derecho. Voy a seleccionar el relleno superior y aquí voy a escribir uno em para la parte inferior. Lo mismo, un em para la izquierda, uno em y para el derecho em. Ahora tenemos un botón totalmente responsive, porque estos relleno ahora son relativos a nuestro tamaño de fuente, por lo que respetan nuestro tamaño de fuente. Voy a seguir adelante y aumentar el tamaño de la fuente. Como se puede ver, la escala de relleno también. Este es uno de los casos de uso más populares. Pero ¿qué pasa con los rems? Déjame seleccionar esta imagen. Bueno, rems en realidad representa ems de raíz, y significa que no respeta el tamaño de topografía que fijamos aquí. Sólo comprueba el tamaño de fuente del navegador del usuario. De forma predeterminada, se establece en 16 píxeles a menos que el usuario cambie eso. Pero si pongo el ancho a 20 rem aquí, así como así, y trato de aumentar el tamaño de la fuente, no pasa nada porque rem no respeta el tamaño de la fuente aquí. Vamos a intentarlo. Ahí vamos. No pasa nada. No obstante, si voy a la configuración de mi navegador e intento aumentar el tamaño de la fuente, esta imagen será más grande. Estas son algunas unidades avanzadas que quizá no necesites usarlas, pero solo quiero que sepas que existen. Ahora hablemos de ch. Déjame seguir adelante y arrastrar y soltar aquí un párrafo que realmente podrías entender lo que significa el ch. Voy a arrastrarlo y soltarlo justo dentro de mi sección. Déjame modificar el color aquí al blanco. Enfriar. Como podemos ver, el ancho del texto aquí es tan largo, por lo tanto, es muy difícil leer este párrafo, y es una buena práctica limitar el número de caracteres de un párrafo. Entonces, ¿cómo podemos hacer eso? Podemos o bien establecer un ancho específico para eso. Podemos usar porcentaje o podemos usar CH. Voy a ponerlo a CH. Entonces, ¿qué es un CH? En realidad 10 CH equivale a 10 ceros de esa fuente en particular. ¿ A qué me refiero con eso? Déjame establecer este ancho a, digamos 50 CH. Significa que el ancho de este párrafo ahora se establece en 50 ceros de esta fuente en particular. Déjame mostrarte cómo funciona. Yo voy a escribir algo aquí. Déjame hacer este tamaño de fuente más grande, voy a ponerlo en 20. Escribamos “Hola”. Entonces voy a cambiar el ancho a 10 CH. Diez CH no significa 10 caracteres. Este es un error muy común que cometen la mayoría de los principiantes. Esto no se trata de personajes. Déjame demostrártelo. Aquí voy a escribirle hola. Nuevamente voy a escribirle hola. Una vez más, escribamos, hola, solo, él, aquí. Vamos a contarlo, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, y 12. Se trata de 12 personajes. Pero si golpeo “Enter” y trato de escribir ceros, deberíamos poder escribir precisamente 10 ceros, 1, 2, 3, 4,5, 6, 7, 8, 9 y 10, el siguiente cero va a la siguiente línea. Así funciona el CH. Si cambio la fuente aquí a otra cosa, se puede ver que el ancho también cambia. ¿Puedes ver eso? Está bien. Ahora pasemos a la siguiente unidad, que es VW y VH. VW es sinónimo de ancho de ventana gráfica y VH soportes de altura de ventana gráfica. Entonces, ¿qué significan? Bueno, voy a seleccionar esta imagen y voy a ajustar el ancho a 50 VW. ¿Qué significa? Viewport es en realidad del tamaño de nuestra ventana del navegador. Si utilizo una pantalla de 13 pulgadas, mi ventana gráfica es de 13 pulgadas. Si utilizo una pantalla más grande, mi ventana gráfica será más grande. De acuerdo, entonces si configuro el ancho a 50 VW, significa que esta imagen debería ocupar el 50 por ciento del ancho de la ventana gráfica. Vamos a intentarlo. Ahí vamos. Como se puede ver, ocupa el 50 por ciento del ancho de la ventana gráfica. Podemos hacer lo mismo por la altura. Puedo ajustar la altura a, digamos 50 VH. Vamos a intentarlo. Como podemos ver, ocupa el 50 por ciento de la altura de las ventanas de mi navegador, así como eso. Ahora hablemos de ancho mínimo y altura mínima. Estos son súper, súper poderosos. En ocasiones no necesitamos especificar explícitamente el tamaño específico para nuestros elementos. En cambio, podemos usar anchura mínima, altura mínima, y anchura máxima, y altura máxima. Déjame mostrarte cómo funciona. Voy a ir a otro ejemplo. Aquí tengo una tarjeta, ¿de acuerdo? Si selecciono eso, se puede ver que el ancho y la altura están configurados en auto. No obstante, no se ve bien. ¿ Por qué? Porque ocupa todo el ancho de la sección, su elemento padre. ¿ Cómo puedo arreglar eso? Bueno, en lugar de establecer un ancho específico para eso, voy a establecer un ancho mínimo y un ancho máximo para eso. Digamos que queremos que esta imagen tenga un ancho mínimo de 350 píxeles. Por lo tanto, voy a establecer el ancho mínimo en 350 píxeles. Nada cambia porque se trata de un ancho mínimo. Si quiero limitar el ancho máximo de esta imagen o de esta tarjeta, digamos que necesito modificar el ancho máximo. Aquí el ancho máximo va a ser de 400 píxeles. Ahí vamos. Ahora esta tarjeta es de 400 píxeles, pero no puede ser menor a 350 píxeles. Vamos a intentarlo. Si previsualizo eso, puedes ver que no puede ser más pequeño que los 350 pixeles, ¿de acuerdo? Porque fijamos un ancho mínimo para eso. Si lo hago más pequeño, por ejemplo, el ancho mínimo va a ser, digamos 250 píxeles. Ahora, puede ser más pequeño, acuerdo, así como así. Esto es ancho mínimo. Podemos usar la altura mínima también. Funciona exactamente igual. Podemos usar eso para nuestra sección de héroes. Por ejemplo, para nuestras secciones, podemos establecer la altura mínima a, digamos, 100VH y significa que ocupa al menos el 100 por ciento de la altura de la ventana gráfica y no se mete con nuestro contenido. Como mencioné, estas unidades están avanzadas y si no sabes cómo funcionan por completo, Eso está totalmente bien porque toma tiempo y práctica acostumbrarse por completo a estas unidades. Ahora pasemos al siguiente tema que es el desbordamiento. Aquí en nuestra tarjeta tengo un párrafo. Muy bien, voy a restablecer este ancho mínimo y altura mínima. Aquí voy a establecer un ancho específico, como 340 píxeles. El alto en lugar de auto, lo voy a ajustar a, digamos 400 píxeles. Ahora si trato de agregar más frases aquí, veamos qué pasa. Ahí vamos. Ahora tenemos el desbordamiento. Sucede a veces, y eso podemos arreglarlo. Para solucionar eso, necesitamos seleccionar el padre de este elemento. Los padres de este tapón de texto es esta tarjeta. Asegúrese de seleccionar al padre. Si te diriges al desbordamiento, aquí podemos ajustar el desbordamiento a oculto. Enmascara el contenido desbordante. Si previsualizo eso, se puede ver que no hay desbordamiento ocurriendo. Tenemos otras opciones también. Tenemos pergamino. Si selecciono eso, puedes ver que el usuario puede desplazarse por el contenido así como así, tenemos una opción más y esa es auto. Auto significa que el navegador primero comprueba si hay tanto contenido aquí que no cabe en esta tarjeta, mostrará el pergamino, pero si trato de eliminar algunas frases aquí así, no mostrará el scroll . Ahora tenemos que hablar de la última propiedad de la sección de tamaño, que está en forma. Déjame arrastrar y soltar aquí un Bloque Div. Ahí vamos. Voy a darle una clase, o llamémoslo, Demo. Para esta demo, voy a seguir adelante y arrastrar y soltar una imagen aquí. Supongamos que queremos que esta imagen cubra este bloque Div. En primer lugar, voy a seleccionar esta imagen. Voy a establecer el ancho y la altura al 100 por ciento. Significa que toma el 100 por ciento de su ancho de padre que es este bloque div demo y el 100 por ciento de su altura de padre, que es exactamente este bloque div demo. Entonces mientras se selecciona esta imagen, voy a cambiar el ajuste de relleno a tapa. Ahora veamos qué pasa. Si selecciono este bloque div demo, puedo darle un ancho y alto específico como 400 pixels. Se puede ver que la imagen cubre perfectamente este bloque div. Si modifico la altura, digamos a 500 píxeles, ahí vamos, cubre la imagen y no cambia la relación de aspecto de la imagen ya que configuramos el ajuste para cubrir. Si lo cambio a, digamos, llenarlo cambiará la relación de aspecto. Pero como está configurado para cubrirlo no cambia la relación de aspecto de nuestra imagen. Pero ¿y si no estás satisfecho con el posicionamiento de esta imagen? Bueno, hay una opción avanzada justo al lado de este ajuste. Si seleccionas tu imagen, puedes hacer click en este icono de tres puntos y luego podrás posicionar tu imagen como quieras. Muy bien chicos eso es todo para este video. Espero que lo hayan disfrutado. Si no entendiste algunas de esas unidades avanzadas, eso está totalmente bien. Siempre puedes llegar a mí y voy a tratar de simplificar todo para ti. Pero créanme, si empiezas a practicarlos en proyectos del mundo real , seguro, te acostumbrarás a ellos lo más rápido posible. Nos vemos entonces. 35. Posición: Oye. En este video, vamos a hablar de posicionamiento. Básicamente tenemos seis tipos diferentes de posicionamiento. Tenemos estática, tenemos relativa, tenemos absoluta, fija, pegajosa, y finalmente tenemos flotador. En este video, vamos a sumergirnos en cada uno de ellos y te voy a mostrar cómo se diferencian entre sí, y cómo puedes usarlos correctamente. ¿Estás listo? Empecemos. Voy a empezar con estática. Cualquier elemento por defecto tiene una posición estática. ¿ Qué significa eso? Significa que son parte del flujo de documentos, por lo que ocupan espacio en nuestra página y también aparecen en el orden en que se apilan. Por ejemplo, aquí tengo un encabezado, su posición está establecida en estática. Entonces tengo un párrafo, otra vez estático. Entonces tengo este envoltorio de imágenes, de nuevo, estático. Entonces tengo estas imágenes, estos bloques div, todos están configurados en estáticos. La mayoría de las veces usamos la posición estática, y cambiamos el posicionamiento usando los ajustes de pantalla de los que hablamos antes. Pero a veces, por algunas razones específicas, podríamos necesitar cambiar el posicionamiento. Veamos en qué se diferencian entre sí. Voy a seleccionar esta imagen, la tercera, este bloque div, y voy a cambiar su posición de estática a relativa. Veamos qué pasa. Nada. Pero no es cierto, porque ahora su posición es relativa a sí misma. Aquí, como se puede ver, dice relativo a, y luego indica que la posición de este bloque div es relativa a sí misma. ¿Qué significa? Cuando establecemos la posición de cualquier elemento en relativa, tenemos dos posiciones; la posición antigua y la nueva. La nueva posición de este elemento es relativa a la antigua posición de este elemento. Suena complicado y complejo a primera vista, pero créanme, es tan sencillo. Déjame mostrarte. Aquí, una vez que establezco esta posición en relativa, tengo acceso a estos ajustes de posicionamiento. Si trato de cambiar su posición así, ahora esta nueva posición es relativa a su posición anterior. Lo movimos 92 pixeles a la izquierda desde su posición original. Cuando establecemos la posición de un elemento en relativa, sigue siendo parte del flujo de documentos, por lo que aún ocupa espacio. Así es básicamente como funciona el posicionamiento relativo. Algo a mencionar es que cuando tenemos diferentes elementos que queremos poner encima el uno al otro, no podemos hacer eso usando estática. Déjame mostrarte a lo que me refiero. Si lo pongo en estática y si quiero que estas imágenes se superpongan entre sí, no puedo hacer eso. Por supuesto, puedo cambiar el relleno y el margen y les puedo dar algún margen y relleno negativos, sin embargo, esa no es una buena manera. ¿ Por qué? Porque cuando cambiamos el margen y el relleno, en realidad estamos cambiando la posición real de ese elemento y estamos cambiando el flujo del documento. Esto no es lo que queremos. Si queremos que estas imágenes se superpongan entre sí para un diseño específico, podemos establecer estos elementos en relativos. Si selecciono este bloque div, el último y pongo su posición en relativa, es relativa a sí mismo, y aquí tenemos una nueva propiedad que se llama z-index. El índice z nos permite controlar cómo deben apilarse nuestros elementos uno encima del otro. Si quiero que aparezca la segunda imagen encima de esta imagen, puedo seleccionarla, puedo configurarla en relativa, y en cuanto la establezca en relativa, puedo cambiar su índice z. Pongámoslo a uno, ahí vamos. Ahora esta imagen tiene un índice z mayor, por lo tanto, estará encima de nuestra imagen anterior. Si selecciono esta primera imagen y pongo su posición en relativa, puedo moverla al lado derecho así como así, y está detrás de nuestra imagen media. ¿ Por qué? Porque nuestra imagen media, la segunda imagen, tiene un índice z más alto. Si quiero que esta primera imagen esté encima de nuestra imagen media, puedo establecer un índice z más alto para eso. Por ejemplo, dos. Ahí vamos. Si quiero que un tercero esté encima de todas estas imágenes, puedo establecer su índice z en tres. Si lo muevo, se puede ver claramente que está encima de las otras dos imágenes. Así es básicamente como funciona el posicionamiento relativo. Creamos una nueva posición para nuestro elemento, que es relativa a su antigua posición y también podemos controlar el índice z. Ahora volvamos a poner la posición de estas imágenes a estática por un segundo. Hablemos de la otra opción de posicionamiento, que es absoluta. Si pongo un elemento en posición absoluta, veamos qué pasa. Como se puede ver, todo está desorganizado. Puedo obtener acceso a estas opciones de alineación, y si hago clic en eso, por ejemplo, arriba a la izquierda, se puede ver que se colocará en la parte superior izquierda, y aquí dice que es relativo al cuerpo. El posicionamiento absoluto funciona así. Siempre busca el primer elemento padre que tenga el posicionamiento de relativo. Aquí, tengo este envoltorio de imágenes y este envoltorio de imágenes tiene un posicionamiento estático. Por lo tanto, cuando cambio la posición de este bloque div, esta imagen a absoluta, es relativa al cuerpo. ¿ Y si quiero que esta imagen sea relativa a este envoltorio de imágenes? Bueno, es sencillo. Puedo seleccionar el envoltorio de imagen, y puedo cambiar su posición a relativa. Ahí vamos. Ahora esta imagen es relativa al límite de envoltura de imagen. Encuentra un elemento padre, que es este envoltorio de imagen que tiene un posicionamiento relativo. Necesitas entender y aprender muy bien estos conceptos porque cuando se trata de desarrollo web, estas opciones de posicionamiento realmente podrían ayudarte a crear algunos diseños impresionantes y algunas páginas web impresionantes. Ahora, puedo seleccionar este bloque div y puedo modificar su posición como quiera. Ahora es relativo a su padre, que tiene el posicionamiento relativo. ¿ Cuándo podemos usar el posicionamiento absoluto? Por ejemplo, supongamos que desea crear una ventana emergente, que es tan popular. Actualmente la mayoría de los sitios web utilizan un pop-up para dejar que el usuario se registre para algo. En ese caso, podemos usar la posición absoluta. Por supuesto hablaremos más adelante sobre la posición absoluta y diferentes casos de uso. Pero por ahora, solo necesitas entender cómo funciona. Al igual que el familiar, todavía podemos trabajar con el índice z aquí. Algo a mencionar sobre la posición absoluta, es que cuando se establece un elemento para posicionar absoluto, ya no forma parte del flujo de documentos. ¿ A qué me refiero con eso? Significa que no toma espacio. Si trato de moverlo, aquí no toma ningún espacio. No es como relativo. Esta es la principal diferencia entre posición absoluta y relativa. Es necesario tener eso en cuenta. No toma ningún espacio. Vamos a ponerlo en estática. Ahora, voy a hablar de la siguiente opción de posicionamiento que es fija. Permítanme mostrarles otro ejemplo. Voy a seguir adelante y arrastrar y soltar una barra de navegación aquí, y la voy a poner justo debajo de mi cuerpo, aquí mismo. Entonces démosle una clase. Voy a escribir Nav. Enfriar. También voy a modificar su altura. Establezcamos su altura en algo así como 200 píxeles. Es demasiado, tal vez 150 píxeles. Enfriar. Pongo su altura en 150 píxeles porque te voy a mostrar algo en un segundo. Analicemos nuestro proyecto por un segundo. Esta barra de navegación forma parte del flujo de documentos y ocupa espacio. Si me desplaza hacia abajo, se puede ver que todo funciona como se esperaba. Desaparece en cuanto desplácese hacia abajo. ¿ Y si quiero que se pegue a la parte superior mientras me desplaza? Bueno, podemos usar la opción fija. Si uso posición fija, veamos qué pasa. En primer lugar, todo se desorganizará porque cuando establezcamos algo para arreglarlo necesitamos especificar sus alineaciones. Tenemos que definir que debe fijarse en la parte superior, por ejemplo. Ahora está arreglado. No obstante, esto ya no forma parte del flujo de documentos. ¿ Cómo sé eso? Porque ahora se puede ver que este contenedor empujó un poco hacia arriba. ¿ Por qué? Porque ya no hay barra de navegación ocupando espacio. Si yo previsualizo eso, se puede ver que se pega a la parte superior, así como así. No obstante, tenemos este problema. Para arreglar eso, podemos usar otro posicionamiento. Pero antes de hacer eso, permítanme mostrarles otro ejemplo de posicionamiento fijo. Si selecciono esta imagen, este bloque div y configuro su posición en fija, puedo cambiar su alineación a la esquina inferior derecha y es relativa al cuerpo. En realidad, es relativo al puerto de vista. Ya no es relativo a sus padres. Es relativo a la ventana del navegador. Si previsualizo eso, puedes ver que está fijo a la esquina inferior derecha. Si me desplazo hacia abajo, todavía está arreglado ahí porque es relativo al puerto de vista, a la ventana del navegador. Si quiero cambiar la dimensión, déjame mostrarte cómo funciona. Justo así. Todavía está ahí. Déjame volver a poner su posición a estática y te voy a mostrar cómo podemos solucionar el problema con esta barra de navegación. Debido a que no queremos estropear nuestro flujo de documentos, podemos usar la opción pegajosa. Si selecciono esta barra de navegación y configuro su posición en pegajosa, podemos ver que sigue siendo parte del flujo de documentos porque este contenedor no empujó hacia arriba. No obstante, podemos precisar que debe pegarse a la parte superior. Si está configurado en auto, si todos estos bordes están configurados en auto, mira qué pasa, no funciona. El asunto con pegajoso es que necesitas definir a dónde debe atenerse este elemento. Voy a poner la parte superior aquí a cero. Significa que debe pegarse al borde superior de nuestro navegador. Algo a mencionar es que pegajoso también es relativo al puerto de vista. No es relativo a sus padres. Ahora si previsuo eso, ahí vamos. Está fijo a la parte superior y no está metiendo con nuestro flujo de documentos porque sigue siendo parte del flujo de documentos. Podemos utilizar esta posición para nuestra barra de navegación para el pie de página. Hemos estado hablando de ellos. Pero preparé otro ejemplo para ti, que es tan popular hoy en día. Aquí tengo una sección y dentro tengo un contenedor, que es un flex box. Dentro de este contenedor tengo dos bloques div diferentes. El contenido de bloque en el lado izquierdo, y este bloque div boletín en el lado derecho. Nada complicado. Voy a seleccionar este boletín div, y voy a cambiar su posición a pegajosa. Veamos qué pasa. En primer lugar, voy a seguir adelante y quitar esta barra de navegación. Ya no lo necesitamos. Ahora voy a previsualizar eso. Como puedes ver, no pasa nada. ¿ Por qué? Porque como recuerdas cuando trabajamos con posición pegajosa, necesitamos especificar a dónde debe atenerse. Aquí voy a poner la parte superior a cero y déjame mostrarte lo que pasa. Eso voy a previsualizar. Si me desplazo hacia abajo tan pronto como toca el borde superior de mi navegador, que es la parte superior del puerto de vista, puedes ver que empieza a pegarse así hasta que llega al final de su elemento padre, que es el contenedor. Déjame mostrarte una vez más. Ya que hemos establecido la posición superior en cero, una vez que toca el borde superior, comienza a pegarse hasta llegar al final de su elemento padre, que es en este caso el contenedor. Entonces se comporta con normalidad, como se puede ver. Ahora, incluso podemos agregar más espaciado aquí. Por ejemplo, voy a ponerlo en 100 y vamos a ver qué pasa. Ahora, cuando hay 100 píxeles en la parte superior, empieza a pegarse así. ¿ Qué tan guay es eso? Se puede ver este comportamiento en muchos sitios web como medio u otros sitios web de blogs diferentes. Ahora hablemos de otra opción, que es el último tipo de posicionamiento y se llama flotador. Bueno, hoy en día no usamos flotador y claro eso. No obstante, para algunos casos de uso, sigue siendo muy práctico y podemos usar float. Déjame mostrarte cómo funciona. En primer lugar, me gustaría mencionar que float and clear no funcionan con flex boxes y el hijo de un flex box. Aquí tengo un contenedor que no es una caja flex. El ajuste de visualización se establece en bloque. Dentro tengo un bloque div de imagen simple y luego tengo un párrafo. Si selecciono este bloque div imagen y un cambio su posición para flotar, por ejemplo, flotar a la izquierda, podemos ver que el contenido envuelve alrededor de esta imagen ahora. Si cambio el flotador a la derecha, se puede ver que ahora el contenido se está envolviendo desde el lado izquierdo, justo el lado opuesto. Pero, ¿qué está claro? Supongamos que tenemos esta imagen establecida para flotar a la izquierda. Voy a seleccionar este párrafo. Yo quería no envolver esta imagen específica. En este caso, puedo dejar claro a izquierda, derecha, o a ambos lados. La mayoría de las veces usamos ambos lados. Ya que nuestra imagen está aquí del lado izquierdo, ahora sólo funciona el lado izquierdo. Si lo pongo a la izquierda, se puede ver que ya no está envolviendo alrededor de él. Pero si lo pongo a la derecha, no funciona porque nuestro elemento aquí, que está configurado para flotar, no está del lado derecho. Si dejo claro ambos, puedes asegurarte de que se despejará. Muy bien chicos, eso es todo por este video. Hablamos de muchas cosas diferentes y espero que pudieras entender diferentes tipos de posicionamiento. Si tiene alguna pregunta, por favor házmelo saber. Asegúrate de practicar todas estas opciones de posicionamiento porque vamos a trabajar con ellas en proyectos del mundo real. Te veré en el siguiente video. 36. tipografía: Oye, en este video vamos a hablar la sección de tipografía de este panel lateral del lado derecho. Aquí, tengo algunos elementos de texto, tengo un encabezamiento, y también tengo un párrafo. Déjame seleccionar el encabezamiento, y aquí te voy a mostrar todas las propiedades del panel de tipografía. En primer lugar, tenemos la Font. Si lo abres, tienes algunas fuentes predeterminadas. Si desea agregar más fuentes, puede hacer clic en este Agregar fuentes en la parte superior, y se le llevará a la configuración del proyecto. Debajo de la pestaña Fuentes, puede agregar diferentes fuentes. Por ejemplo, si quieres trabajar con Fuentes de Google como Roboto u otras Fuentes de Google, solo puedes añadirlas aquí. Déjame buscar a Roboto por un segundo. Déjame ver si puedo encontrarlo. Ahí vamos. Aquí está Roboto, entonces puedes seleccionar variantes de esa fuente en particular. Estos son los pesos de tus fuentes, por ejemplo, regulares, 500 , 700, que es negro, y si quieres subir algunas fuentes personalizadas, puedes subirlas aquí desde tu computadora, y si quieres usar Adobe Fonts, simplemente puedes usar esta sección para conectar tu proyecto a Adobe Fonts mediante una API. Ahora hablemos del panel de tipografía. Voy a seleccionar este rubro. Aquí, hablamos de la fuente, después tenemos peso, tenemos pesos audaz, diferentes. Cada fuente tiene diferentes pesos. Entonces tenemos talla. Este es nuestro tamaño de fuente, y puedes usar diferentes unidades como la propiedad size aquí. Puede usar pixel, percent, ems, y rems, CH, ancho de la ventanilla y altura de la ventanilla gráfica. Por último, tenemos la altura de línea, que es tan importante cuando tenemos un párrafo. Aquí, si selecciono este párrafo, establecí la altura de línea en 150 por ciento, por lo que es 150 por ciento del tamaño de fuente. Si acabo de restablecer este ajuste, se puede ver que este párrafo no es tan legible. Por lo tanto, siempre es una buena práctica aumentar la altura de tu línea, sobre todo cuando estás trabajando con tamaños de fuente pequeños, así que voy a ajustarla al 150 por ciento. Ahí vamos. Aquí tenemos color. Puedes cambiar el color de tu fuente fácilmente a qué otro color quieras. Aquí está el deslizador de tonalidad, luego tenemos el deslizador de transparencia, esto controla la cantidad alfa de tu color si quieres, digamos, disminuir la opacidad, solo puedes usar este deslizador. Aquí tenemos el código de color hexadecimal. Simplemente puedes copiar y pegar el código de color hexadecimal desde cualquier software de diseño con el que trabajes, no importa si se trata de Figma, Sketch, Adobe XD, no importa. Después tenemos HSB, que significa matiz, saturación, y brillo. Aquí no vamos a hablar de estas especificaciones. Entonces tenemos el alfa o la opacidad. Si uso este deslizador y disminuyo la opacidad, se puede ver que cambia la cantidad alfa. Aquí tenemos la relación de contraste y en realidad nos permite saber si tenemos suficiente contraste entre el color de fondo y el color de primer plano. Como puedes ver, dice AAA, y significa que es muy legible. Pero si trato de usar unos colores más claros así, puedes ver primero tenemos AA, sigue bien, sigue siendo bueno. Pero si dice fallar, significa que tu texto puede no ser legible para algunas personas. Cambia según tu tamaño de fuente y diferentes factores, así que asegúrate siempre de que tu color pase la prueba de relación de contraste. Déjame deshacer el proceso. ¿ Qué tenemos aquí? Aquí es donde podemos crear nuestras muestras. Supongamos que tenemos este color y queremos crear un estilo de color o digamos una muestra de color. Si estás familiarizado con Figma, es posible que sepas que podemos crear estilos de colores, y esto funciona así. Aquí solo podemos hacer clic en este botón más y crea una nueva muestra. Puedo nombrarlo, por ejemplo, puedo decir neutral/luz, crear. Si selecciono algún otro elemento aquí y me dirijo a la sección de colores, se puede ver que la muestra está aquí. Como puedes ver hay esta pequeña flecha y significa que esta es una muestra global, y la puedo usar para cualquier elemento así. Aquí, si uso esta muestra de luz neutra para este párrafo, y la uso aquí también. Por ejemplo, permítanme cambiar eso. Si lo cambio aquí, si hago clic en este botón Pluma y trato de cambiar este color, se puede ver que los cambios se aplican de inmediato a todos los elementos que están usando esta muestra en particular, por lo que hay que asegurarse de mantén tus colores organizados. Vamos a deshacer el proceso. Pasemos a la siguiente propiedad, que es alinear. Es tan sencillo. Tenemos diferentes opciones de alineaciones, izquierda, centro, derecha, y justificar, al igual que Microsoft Word o cualquier software de diseño. Entonces tenemos la propiedad de estilo. Podemos cursiva así nuestro texto. Podemos usar algunas decoraciones aquí. Por ejemplo, podemos usar este tachado. Podemos usar subrayado o overline. Si desea crear algunos enlaces, por ejemplo, podemos usar este subrayado. Entonces tenemos este Más opciones de tipo, Por defecto, no es visible, pero si haces clic en eso, puedes obtener acceso a estas opciones avanzadas como espaciado entre letras, sangría de texto, columnas, y estas opciones de capitalizar y dirección. Vamos a pasar por cada uno de ellos. Usando este campo, podemos controlar el espaciado entre letras. Por ejemplo, si quiero aumentar el espaciado entre letras, aquí puedo establecer un espaciado de letras más alto. Voy a ponerlo en 20 ahora. Como se puede ver ahora, el espaciado entre letras es mucho mayor. Permítanme disminuir eso. En realidad, un buen caso de uso para usar el espaciado entre letras es cuando tenemos una palabra que está completamente en mayúsculas. Si selecciono esto, diseño de interiores, y si configuro la opción de capitalizar a todas las gorras así. En ocasiones si trabajo con tamaños de fuente pequeños, necesito aumentar el espaciado entre letras para mejorar la legibilidad y legibilidad de mis textos. En este caso, permítanme ponerlo en cinco. Ahora, se ve mucho mejor. Yo también puedo ponerlo a tres. Esto se utiliza básicamente para este propósito. Ahora, pasemos a la siguiente que es sangría de texto. Voy a seleccionar este párrafo y dejarme especificar una cantidad como 20 píxeles. Simplemente sangra el texto, igual que Microsoft Word. Entonces tenemos columnas. En realidad, nunca he usado eso y rara vez veo algún sitio web o cualquier diseñador use esta opción. Pero es bueno saber que existe. Si especifico tres aquí, toma nuestro texto y lo divide en tres columnas iguales. Si golpeo Enter, ahí vamos, ahora, tenemos tres columnas diferentes. Podemos simplemente modificar la brecha aquí, por ejemplo, el estilo. Podemos agregar algunos divisores. Como puedes ver, podemos modificar el grosor de ese divisor, así como así, y también podemos modificar el color de ese divisor. Pero para ser honesto, nunca he usado eso y dudo que debas usar eso también. Permítanme quitarle eso por ahora. Si desea restablecer alguna propiedad aquí, puede mantener presionada la tecla Opción o la tecla Alt en su teclado, y luego simplemente haga clic en eso una vez, así como así. Entonces tenemos las opciones de capitalizar. Tenemos todas las gorras, como les mostré antes. Tenemos capitalizar cada palabra, así como eso, o tenemos minúsculas. Voy a ponerlo a nada. Entonces tenemos dirección. Para la mayoría de los idiomas, usamos la dirección de izquierda a derecha, pero para algunos idiomas como el árabe, puedes usar la dirección de derecha a izquierda. Entonces tenemos ruptura, hay algunas opciones como esta. No es tan útil. No vamos a tocar todas estas opciones ya que la mayoría de las veces no usamos esta opción de ruptura. Entonces tenemos sombra de texto. Si hago clic en este botón más, puedo agregar sombra a mi texto, así como así. Te recomiendo encarecidamente evitar agregar sombras a tus textos porque disminuye la legibilidad de tu texto. Voy a quitar esto. Eso es todo sobre tipografía. Pero hay una cosa más que voy a mencionar aquí. Si sigo adelante y arro y suelto aquí un bloque div, le voy a dar una clase, escribamos tipografía. Aquí para este bloque div, puedo establecer algunas propiedades específicas que sus hijos pueden usar. Si cambio la fuente a otra cosa, usemos ésta por ejemplo, y aumento el tamaño de la fuente a, digamos, 40 píxeles, algo dramático, y además cambio el color a rojo, puedes ver que aquí no pasa nada porque no hay capa de texto dentro. No obstante, si sigo adelante y arro y suelto un rumbo aquí, ahí vamos. Ahora, este encabezado está obteniendo las propiedades de las propiedades predeterminadas que establecemos a su padre, que es este bloque div tipográfico. Por supuesto, podemos anular eso, por ejemplo, puedo darle una clase a este encabezado, como Título 1, como Título 1, y simplemente modificar el color a lo que queramos, y el tamaño de fuente, o cualquier otra propiedad aquí. Pero hay que entender que a veces mucho más sentido agregar las propiedades predeterminadas a los padres de nuestros elementos primero, y luego simplemente podemos arrastrar y soltar esos elementos y no necesitamos modificarlo todo desde cero. Por ejemplo, puedes seleccionar tu sección. Si tu sección va a tener algunas fuentes específicas, y digamos algunas propiedades de fuente específicas, solo puedes especificar esas propiedades para la sección. Entonces lo que pongas dentro de esta sección heredará de las propiedades que establezcas para esa sección. Yo, personalmente, cuando quiero iniciar un proyecto, selecciono mi cuerpo y configuro la fuente aquí una vez, y luego no necesito cambiar la fuente una y otra vez. Por supuesto, puedo anular estas propiedades, pero me va a ahorrar tanto tiempo si puedo establecer algunas propiedades por defecto. Muy bien, chicos, eso es todo por este video. Espero que lo hayan disfrutado. Te veré en el próximo. 37. Fondos: Oye. En este video, vamos a hablar de antecedentes. Si te diriges al panel de estilo justo debajo de la sección de tipografía, tenemos la sección de fondo. Es muy útil porque lo vamos a usar casi todo el tiempo. Aquí, como pueden ver, tengo dos secciones diferentes. Una sección vacía. Esto es para la siguiente parte de este video. Pero para la primera parte, vamos a trabajar con este apartado. En su interior tengo un contenedor, como de costumbre, y luego tengo el rubro y un párrafo. Supongamos que queremos agregar un fondo a nuestra sección. Voy a seleccionar mi sección. Yo puedo ir a los fondos. Puedo dar click en este botón más aquí. Ahora, puedo elegir imagen. Ya te mostré esta sección, pero en realidad no nos sumergimos en todos los detalles aquí. Ahora voy a elegir esta imagen de mis activos y ahí vamos. Por defecto, siempre está configurado en mosaico, como puedes ver aquí, tenemos la opción de mosaico. Simplemente podemos ponerlo a ninguno porque no queremos que se teje. Entonces tenemos las opciones de posición y todas estas opciones aquí. Empecemos con el tipo. Aquí, tenemos diferentes tipos. Tenemos imagen, tenemos gradiente lineal, tenemos gradiente radial, y tenemos la superposición de color. Hablemos primero de imagen. Aquí, puedo establecer el tamaño. Puedo establecer un tamaño personalizado si se selecciona la pestaña personalizada. Rara vez usamos este tamaño personalizado aquí porque usualmente dimensionamos nuestras imágenes usando la propiedad size en el panel de estilo. Entonces tenemos la portada, que es tan útil casi todo el tiempo que usamos esta opción, y tenemos el contienen. El contenedor realmente escala hacia abajo la imagen hasta que esté contenida en nuestra sección o nuestro contenedor o cualquier elemento en el que esté. Entonces puedo modificar la posición aquí para centrar. Voy a ponerlo para cubrir por ahora. Nuestra imagen de fondo se ve muy bien. También se puede establecer la posición izquierda y la superior en función del porcentaje. Como se puede ver, por defecto, se establece en 50 por ciento. Si lo configuro en la parte superior izquierda, se puede ver que izquierda y superior están configurados en cero. Si quiero modificarlos manualmente, puedo hacer eso también. Puedo ponerlo en 48 por ciento, por ejemplo, o tal vez digamos 35 por ciento. Aquí nada cambia porque nuestra imagen es demasiado grande en realidad, así que déjame modificar la parte superior también al 20 por ciento. Como se puede ver, se mueve hacia abajo. Voy a deshacer el proceso. Si queremos que nuestra imagen se teje, podemos usar la opción de mosaico. Podemos simplemente establecer un ancho constante. Déjame establecer un ancho personalizado que puedas ver cómo funciona. Voy a establecer el ancho en 100 píxeles, y como pueden ver, ya que la opción de mosaico ha sido seleccionada, nuestra imagen está en mosaico. Puedo configurarlo en mosaico horizontal, y también verticalmente azulejo. Voy a ponerlo para que no haga azulejo y pongámoslo a cubrir. Tenemos la opción fija aquí. De forma predeterminada, todas las imágenes están configuradas en no fijas. Vamos a hablar de la diferencia entre fijo y no fijo en unos segundos. Pero por ahora, pasemos a la siguiente característica de esta sección de imagen y gradientes. Como puedes ver, nuestras capas de texto no son legibles. ¿ Por qué? Porque aquí no tenemos suficiente contraste. ¿ Y si cambio su color a blanco? A ver si hace la diferencia. Por supuesto, marca la diferencia, pero aún así, como tenemos un tamaño de fuente pequeño, a veces podría ser difícil leer este texto. ¿ Cómo podemos arreglar eso? Bueno, una solución muy conocida es simplemente agregar una superposición. Si selecciono esta sección aquí y luego voy al fondo. Si hago clic en este botón más aquí, puedo establecer el tipo para superponerse así. Crea una superposición, una superposición oscura, y podemos simplemente controlar la opacidad de esta superposición desde aquí, así como así. Ahora es mucho más visible. Pero, ¿qué pasa con los gradientes lineales y radiales? Hablemos de ellos también. Voy a empezar con gradiente lineal. Bueno, como saben, un gradiente es una transición suave de un color a otro color. Por defecto, aquí tenemos dos paradas o puntos diferentes. Tenemos los puntos en blanco y negro. Voy a seleccionar este punto, y a partir de este color, voy a cambiar el color a otra cosa. Permítanme cambiarlo por, por ejemplo, esta naranja. El siguiente, voy a seleccionar el siguiente punto y lo voy a cambiar a este color. Entonces puedo modificar aquí el ángulo de este gradiente. Como pueden ver, simplemente puedo modificar el ángulo, el grado. Pero, ¿qué pasa con esta opción de repetición? Si reviso esta casilla de verificación, bueno, no pasa nada. Eso es porque, para que esta opción funcione, necesitamos algo de espacio aquí en el deslizador. Si solo tomo uno de estos puntos y lo muevo al lado izquierdo, se puede ver que ahora tenemos más espacio. Como puedes ver, se repite una y otra vez y otra vez, así como así. Yo también puedo cambiar el ángulo. Enfriar. Permítanme desmarcar esta opción de repetición. No vamos a necesitar eso. También podemos controlar la opacidad de estos colores, por ejemplo, para crear una superposición personalizada. Si modifico aquí la cantidad Alpha al 50 por ciento, como pueden ver, ahora tenemos una superposición de gradiente. Yo puedo hacer lo mismo por mi color naranja, 50 por ciento, ahí vamos. Se ve genial. Pero, ¿qué pasa con el gradiente radial? Si hago clic en eso y si configuro la opacidad al 100 por ciento, de nuevo, simplemente podrías ver la diferencia entre un gradiente lineal y un gradiente radial. Como pueden ver aquí, tenemos un punto focal. Podemos cambiar el tamaño aquí, por ejemplo, éste, puedo establecer a éste, puedo cambiar el tamaño fácilmente. También, puedo cambiar el punto focal, así, de qué dirección debe comenzar esta transición, así. Agradable. Si desea ocultar una de estas imágenes o gradientes, simplemente puede hacer clic en este icono de ojo o simplemente puede hacer clic en este botón quitar. Si quieres reordenar tus elementos aquí, simplemente puedes pasar el cursor sobre estas líneas verticales que está junto a esta miniatura diminuta, hacer clic y arrastrar, así como así. Permítanme quitar por ahora este gradiente radial. Pero a veces solo necesitamos tener un color de fondo sólido. Nosotros también podemos hacer eso. Siempre podemos seleccionar un elemento, no importa si es un bloque div, un encabezado, un párrafo. Cualquier caja puede tener un color de fondo. Por defecto, está configurado en transparente. Si lo selecciono, puedo ponerlo en blanco, por ejemplo, pero como aquí tenemos una imagen, no se puede ver eso. Puedo cambiar el color del fondo a negro, al color que quiera. También hay un buen truco aquí si quieres usar algunos colores famosos, como el blanco o el negro, simplemente puedes escribir su nombre aquí. Por ejemplo, aquí voy a escribir blanco. Ahí vamos. Tengo un fondo blanco. Si lo cambio a negro, funciona. Si lo cambio a rojo, funciona también. Pero la mayoría de las veces normalmente configuramos manualmente el color del fondo o copiamos y pegamos aquí el código de color hexadecimal. Ahora voy a hablar de recorte. Funciona como enmascarar en software de diseño. Supongamos que quiero agregar un gradiente a este rubro. ¿ Es posible? No, excepto que lo es. Si voy al color, puedo establecer un gradiente. No obstante, aquí hay un buen truco. Si voy a fondos aquí, puedo crear un gradiente aquí, y puedo cambiar el tipo a lineal. A partir de aquí, voy a cambiar el gradiente a, digamos este color. Déjame crear un gradiente fresco, bonito. Ahora voy a cambiar el ángulo. No obstante, como puede ver, esta casilla no llena este texto. No cubre su altura. Por lo tanto, necesito aumentar el tamaño de altura a otra cosa. Permítanme aumentarlo a 100 píxeles por ahora. Pero, ¿se ve bien? No es exactamente lo que queremos. Bueno, espera un segundo. Voy a ir a los Fondos, y de aquí voy a ir a Recorte, y por defecto, está establecido en Ninguno. Si cambio esto para recortar fondo a texto, ahí vamos. Ahora tenemos el gradiente recortado dentro de nuestro texto. ¿ Qué tan guay es eso? Este es exactamente el mismo método que usan los sitios web más populares para crear tal efecto. Por ejemplo, Apple también utiliza esta técnica. Simplemente puedo modificar los gradientes y los cambios se aplican a este texto en tiempo real. A ver si funciona. Sí, sí lo hace. Voy a cambiar el color del fondo de esta sección a negro que se podría ver mucho mejor el efecto. Ahora hablemos del otro largometraje. Como recuerdan, mencioné que aquí hay otra sección. Déjame cambiar el color del fondo a blanco. Aquí dentro de este contenedor, voy a arrastrar y soltar un bloque div, y para este bloque div, voy a crear una clase. Vamos a llamarlo solución de imagen. Entonces voy a fijar su ancho al 100 por ciento, que ocupe todo el ancho de su padre, que es el contenedor, y la altura va a ser del 50 por ciento así. Voy a ir a fondos, y desde aquí voy a añadir una imagen o gradiente. Voy a elegir una imagen aquí. Ahí vamos. Por último, voy a cambiar el tamaño a cubrir, y la posición a centro. Pongamos el azulejo en ninguno. Como recuerdan, les dije que vamos a hablar de la opción fija. Veamos por defecto, cómo funciona. Si obtengo una vista previa de esta página web, funciona así como se esperaba. Pero ¿y si quiero que se arregle este fondo, y aquí creamos un efecto de paralaje? En ese caso, puedo seleccionar esta imagen y solo puedo ir a la configuración de imagen aquí, y en lugar de establecer la opción fija para no arreglar, voy a elegir fija. Una vez más, puedo reposicionarlo como quiera, y luego vamos a previsualizar eso. Ahí vamos. ¿Se puede ver lo genial que es este efecto? Cuando configuramos la imagen para arreglarla, en realidad crea una nueva capa detrás de la ventana de nuestro navegador, y esa nueva capa es nuestra imagen de fondo la cual es fija, y simplemente podemos desplazarnos por nuestra página. Podemos hacer lo mismo con el texto también. Déjame demostrártelo. Déjame quitar esta imagen y voy a seleccionar este contenedor y añadir un encabezado aquí. Entonces voy a aumentar drásticamente el tamaño de la fuente. Aumentémoslo a 80 píxeles, o tal vez 120 píxeles que podrías ver el efecto con claridad. Entonces voy a aumentar la altura a 100 píxeles o tal vez incluso más, tal vez 140 píxeles. Voy a ir a imagen y gradiente, y vamos a añadir una imagen aquí. Yo voy a elegir, digamos éste, y vamos a volver a posicionar eso. No azulejar y cubrir. ¿Cómo puedo hacer eso? Bueno, primero, necesito establecer la imagen como fija, y luego tengo que ir a Clipping, y voy a cambiarla para recortar fondo a texto. A ver qué pasa. ¿Puedes ver eso? Ahora tenemos ese fondo fijo sentado detrás de nuestra capa de texto. Es muy guay. Podrás crear algunos efectos cool con esta técnica. Ahora voy a hablar de algo muy interesante. Por ahora aprendes que puedes agregar una imagen de fondo aquí. Si seleccionas tu sección, solo puedes agregar una imagen de fondo y todo se ve perfecto. Pero, ¿y si realmente quieres agregar un video a tus antecedentes? ¿ Es posible? Por supuesto, lo es. No obstante, no podemos hacerlo en segundo plano, necesitamos usar un componente que se llama video de fondo. Si voy a la sección Agregar y me desplazo hacia abajo, se puede ver que debajo de los componentes, tengo el componente Video de fondo. Déjame arrastrarlo y soltarlo y ponerlo justo encima de mi primera sección. Ahí vamos. Este es solo un elemento como cualquier otro elemento, y simplemente puedes modificar todo lo que quieras. Puedo darle una altura específica como 100 VH. Entonces puedo usar este botón Subir Video para subir un video. Déjame seguir adelante y subir rápidamente un video. Es necesario tener en cuenta que tu video debe ser inferior a 30 megabytes. Como puedes ver, no pasa nada. Eso se debe a que el componente de video de fondo solo funciona al previsualizar tu página web, no funciona en el diseñador. Voy a previsualizarlo, y ahí está. ¿ Se puede ver lo genial que es? Pero espera, ¿podemos agregar algún contenido encima de este fondo? Sí, podemos. Al igual que cualquier otro elemento, solo puedo seleccionar aquí mi contenedor, por ejemplo, y traerlo y ponerlo dentro de este video de fondo. Pero como puedes ver, no está centrado. Puedo seleccionar mi Video de fondo y puedo cambiar la configuración de pantalla de bloque a flex. Ahora, vamos a comprobarlo. ¿ Se puede ver lo fácil que es trabajar con estos componentes? Muy bien, chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veré en el siguiente video. 38. Bordes: En este video, vamos a hablar de fronteras. Si te desplazas aquí abajo en el lado derecho, puedes ver que tenemos la sección fronteriza justo debajo de los fondos. Utilizamos fronteras casi todo el tiempo. Tiene diferentes propiedades que podemos personalizar, y vamos a pasar por todas ellas. Empecemos. Primero lo primero, les voy a mostrar un ejemplo muy común. Voy a seleccionar este botón. Como puedes ver, este botón solo tiene un color de fondo. Pero ¿y si quiero hacerlo redondeado? Bueno, puedo dirigirme a la sección fronteriza y puedo modificar la propiedad radio aquí para que sea redondeada. Si aumento la cantidad del radio de esquina, ahí vamos. Tenemos este genial botón redondeado. Pero ¿y si quiero modificar la cantidad de radio de esquina de cada esquina de forma independiente? Bueno, eso también lo podemos hacer. Si hago clic en esta opción que dice “Esquinas individuales”, puedo controlar la cantidad de radio de esquina de cada esquina por separado. Algo a mencionar es que aún se pueden utilizar todas las unidades de las que hablamos antes, como pixel, percentage, EM, REM, CH, VW, y VH. Aquí, supongamos que sólo quiero hacer redondeado el radio de dos esquinas superiores. Por lo tanto, voy a establecer las esquinas inferiores, radio de esquina a cero. A ver qué pasa. Ahí vamos. Tenemos este botón de aspecto raro ahora. Déjame deshacer el proceso. Todo eso se trata de la cantidad de radio de esquina. Pero, ¿y si quieres crear un botón de contorno en lugar de un botón contenido? En este momento tenemos un botón contenido porque solo tiene un color de fondo. No tiene ninguna frontera. Si quiero hacer un botón de esquema, primero, puedo agregar una clase combo aquí porque uso esta clase de botón en otro lugar para este botón de registro y este botón de “Aprender más”, y no voy a cambiar las propiedades por defecto. Por lo tanto, voy a seguir adelante y darle una clase combo. Déjame escribir contáctanos. Igual que eso. Entonces si me dirijo al color, el color de este fondo, puedo escribir transparente, y nuestro botón desapareció, excepto que no lo hizo. Todavía está ahí, pero podemos ver eso. No es visible porque acabamos de establecer el color del fondo en transparente. Si hago clic en eso, se puede ver que la cantidad Alpha está fijada en cero. Por eso podemos ver nuestro elemento. Lo siguiente que voy a hacer es obviamente cambiar el color de mi texto aquí por otra cosa. Voy a cambiarlo a negro. Entonces necesito agregar algunas fronteras. Si te diriges a las fronteras, aquí tenemos la sección de bordes justo debajo del radio, podemos decidir si queremos crear bordes para todos los bordes o simplemente para bordes específicos. Si desea crear bordes para los cuatro bordes, debe seleccionar este medio, el que está en el centro. Entonces puedes seleccionar tu estilo, voy a seleccionar sólido. Tenemos nuestra frontera, pero voy a aumentar el ancho. Puedo seguir adelante y aumentarlo manualmente, por ejemplo, puedo establecer una cantidad aquí a tres, pero si solo quieres hacer un globo ocular y quieres experimentar con diferentes cantidades, puedes mantener presionada la tecla “Opción” de tu teclado o la tecla “Alt”, y luego puedes hacer clic y arrastrar para aumentar y disminuir el ancho aquí, así como así. Creo que cuatro píxeles lucen muy bien. Ahora podemos modificar el color de tu borde también al color que quieras, y puedes modificar el estilo de tus bordes así. Eso es tan sencillo. Pero vamos a ver qué pasa si sólo quiero agregar bordes a algunos bordes específicos. Voy a quitar el estilo y luego voy a seleccionar un borde específico aquí, por ejemplo, a la izquierda, y luego voy a poner el estilo a sólido. Ahí vamos. Algo a mencionar es que cuando tu elemento no tiene un ancho o alto específico, cuando añades algunos bordes a eso, se cambiará su tamaño. No obstante, cuando definas un ancho y alto específico para tu elemento, no importa si es un botón o un bloque Div o algo así, las dimensiones de tu elemento no cambiarán porque el borde se agregará desde el interior, no el afuera. Déjame mostrarte lo que quiero decir con eso. Voy a seguir adelante y seleccionar esta imagen, este bloque Div, y este bloque Div tiene un ancho específico, no una altura específica. Voy a seguir adelante y añadir algunas fronteras aquí. Voy a seleccionar el medio, el centro, ya que voy a sumar bordes a los cuatro bordes. Déjame seleccionar el estilo sólido. Entonces voy a aumentar el ancho. Igual que eso. Como puede ver, la dimensión real de este bloque Div no está cambiando. El motivo es que ya tengo un ancho específico definido. Pero, ¿qué pasa si me quito eso? A ver qué pasa. Voy a ponerlo en auto, y luego voy a mover esta imagen fuera de este envoltorio de imágenes por un segundo para mostrarte cómo funciona. Entonces déjame aumentar y disminuir el ancho. Como se puede ver ahora, la dimensión real está cambiando. ¿ Por qué? Porque no hay anchura y altura definidos. Si configuro aquí un ancho específico, por ejemplo, 350 píxeles, y ajuste el ancho, se puede ver que el borde se agrega dentro. Déjame deshacer el proceso. Supongamos que quieres crear un círculo perfecto. Por ejemplo, se quiere crear, digamos, una página de perfil circular. En ese caso, también puedes usar radio. Aquí está nuestra imagen. Para crear un círculo perfecto, debes dar algunos pasos. En primer lugar, debes seleccionar tu imagen la cual está dentro de tu bloque Div. Entonces debes asegurarte de que su ancho y alto estén fijados en 100 por ciento; ocupan todo el ancho y alto de su padre, que es este bloque Div de imagen. Si bien se selecciona la imagen, no el bloque Div, dirígete al ajuste y cámbiala de relleno a tapa. Ahora puedes seleccionar tu imagen Bloque Div e ir a los bordes, y a partir de aquí, voy a ajustar el radio al 50 por ciento. Pero no pasa nada porque necesitamos hacer dos cosas más. Déjame desplazarme hacia arriba. Como puedes ver, nuestro bloque Div tiene un ancho específico, pero para crear un círculo perfecto, nuestro ancho y nuestra altura deben ser los mismos. Voy a seguir adelante y establecer una altura específica para eso, que es igual a ancho. Voy a escribir 350 pixeles, genial. Lo último que tenemos que hacer es cambiar el desbordamiento. Voy a ir al desbordamiento y luego lo voy a cambiar de visible a oculto. Ahí vamos. Aquí está nuestro círculo perfecto. Pero, ¿por qué funciona así? ¿ Recuerdas cuando hablamos de desbordamiento, cuando creamos una tarjeta y dentro de esa tarjeta había un párrafo que se solapaba a la tarjeta? ¿ Te acuerdas de eso? Este es exactamente el mismo escenario. Cuando se establece en visible, nuestro círculo se ha creado desde que fijamos el radio en 50 por ciento, pero no podemos verlo porque esta imagen dentro de este bloque Div se está superponiendo nuestra forma. Por lo tanto, necesitamos establecer el desbordamiento en oculto para crear esta máscara. Lo último que voy a mencionar es que cuando trabajas con bordes, tienes control sobre propiedades de cada borde específicamente. Si desea seleccionar el borde izquierdo y cambiar el color, puede hacerlo. Puedes establecer otro color para el borde superior, eso depende totalmente de ti. No estás limitado de ninguna manera. Muy bien, chicos. Eso es todo por este video. Espero que lo hayan disfrutado. Te veré en el próximo. 39. Efectos: En este video, vamos a hablar de la sección de efectos. Si me desplazo aquí abajo en este panel de tiempo, podemos ver que en la parte inferior tenemos la sección de efectos. Aquí hay tantas opciones diferentes, y vamos a hablar de cada una de ellas. En primer lugar, voy a seguir adelante y seleccionar una de estas imágenes. Déjame seleccionar este bloque DIV, el bloque DIV de imagen, el primero, y ahora realmente puedo modificar diferentes opciones aquí. Permítanme empezar con la opacidad. El opacidad es tan simple porque simplemente nos deja tener transparencia. Si lo disminuyo mi elemento será transparente. Si lo incremento, se puede ver que no hay transparencia. Cuando tienes un elemento y tu elemento tiene algunos hijos, simplemente puedes seleccionar tu elemento padre, en este caso, es este bloque DIV de imagen, y simplemente ajustar la opacidad aquí. Entonces tenemos sombras de caja. Bueno, como puedes adivinar por su nombre, nos permite agregar algunas sombras a nuestros elementos de caja. Si presiono este botón plus, puedo agregar algunas sombras de caja a este elemento en particular, y aquí tenemos diferentes propiedades. Tenemos dos tipos diferentes de sombras, afuera y adentro. Bueno, si está ajustado a fuera, la sombra aparecerá fuera del límite de este elemento. Si solo modifico la distancia, se puede ver mejor, pero el tipo interior nos permite agregar sombras internas. Aquí puedo modificar el ángulo, así como así. Puedo controlar el grado, o digamos la dirección de mi sombra. Puedo modificar la distancia, qué tan cerca está esta sombra del elemento. Puedo modificar el blare, por lo que determina qué tan enfocada está la sombra. Puedo cambiar el tamaño. Determina cuánto se extiende, así, y el color en realidad nos permite controlar el color de nuestra sombra. Puedo ponerlo al color que quiera. La mayoría de las veces cuando usamos sombras, queremos asegurarnos de disminuir la opacidad para tener algunas sombras suaves. Justo así. Todo esto se trata de sombras. Algo que debes recordar es que en realidad puedes agregar múltiples sombras a tu elemento. Si hago clic en este botón más una vez más, ahí vamos, podría añadir otra sombra. Puedo añadir aún más sombras. Puedo moverlos por ahí y puedo esconderlos y mostrarlos, y puedo quitarlos simplemente. Ahora hablemos de transformaciones 2D y 3D. Bueno, a veces podríamos necesitar tener algunas interacciones simples, algunas transformaciones 2D y 3D, y en ese caso, necesitamos usar esta opción. También podemos usar las interacciones, que es más avanzada y hablaremos de ello más adelante en detalle. Pero por ahora, déjame mostrarte cómo funciona. Si bien mi elemento está seleccionado, puedo presionar este botón plus y tenemos diferentes tipos de transformación. Contamos con Mover, Escala, Rotar, y Skew. Déjame empezar con Move. Bueno, el tipo Move nos permite mover nuestros elementos y podemos controlar el eje x, y, y z así. Si cambio el tipo a Escala, puedo escalar este elemento así. Si lo cambio a Girar, puedo rotarlo así usando diferentes ejes, ahí vamos, y si lo pongo en Skew, veamos qué pasa. Dependiendo de nuestras necesidades, podemos o no usar cada uno de estos tipos pero es bueno saber que existen y las posibilidades son ilimitadas aquí. Ahora te voy a mostrar algo más. Déjame quitar esta transformaciones 2D y 3D. Simplemente voy a crear una nueva capa de transformación y la voy a mover. Pero ¿y si quiero mover mi elemento y escalarlo al mismo tiempo? Si voy a escala ahora y vuelvo, se puede ver que aquí todo se pierde. Todas las modificaciones que hice aquí se han ido. Eso se debe a que no podemos usar todos los tipos al mismo tiempo. Necesitamos realmente mover nuestros elementos y luego necesitamos crear otra capa, así como así. Ahora, puedo escalarlo también. Es necesario tener esto en cuenta al trabajar con transformaciones 2D y 3D. Entonces tenemos transiciones. Si hago clic en este botón más, se puede ver que tenemos diferentes tipos de transiciones y no vamos a hablar de transiciones ahora porque, primero, hay que aprender sobre estados, que es el tema de nuestro próximo lección. En la siguiente lección, tocaremos también las transiciones. Permítanme quitar transiciones. Ahora voy a hablar de filtros. Si bien este elemento está seleccionado, voy a añadir un filtro a este elemento, y aquí tenemos diferentes filtros. Tenemos borrón. Podemos hacer este elemento borroso, así como así. Contamos con filtros de ajuste de color como el brillo. Puedes controlar el brillo de tu elemento. Se puede modificar el contraste, el matiz. Tenemos saturación. Por ejemplo, puedes disminuir o aumentar la saturación de tu elemento. Tenemos escala de grises. Si queremos imágenes en blanco y negro o elementos en blanco y negro, podemos utilizar este filtro y otros efectos. Ahora pasemos a la última propiedad de la sección de efectos, que es cursor. Bueno, cada elemento por defecto tiene un cursor específico. Por ejemplo, cuando agrego un botón, déjame mostrarte, cuando voy adelante y agrego un botón aquí y obtengo una vista previa de que, si paso el cursor sobre, puedes ver que el cursor cambió a este puntero y se espera porque esto es clicable. Sucede lo mismo si agrego un bloque de enlace. Si solo sigo adelante y agrego un bloque de enlace aquí, por supuesto, necesito agregar algo dentro o dejarme simplemente cambiar su color, color de fondo a algo que se pudiera ver, y además necesito especificar el ancho y la altura porque de lo contrario, es invisible. Permítanme especificar el ancho, 50 píxeles, y la altura, 100 píxeles, y ahora vamos a comprobarlo. De nuevo, tenemos un puntero. Por ejemplo, el texto tiene su propio cursor. Estos cursores son los cursores por defecto de nuestro navegador. Pero a veces, para algunos fines específicos, podríamos necesitar anular estas propiedades. Por ejemplo, si quiero cambiar el cursor de este botón, puedo seleccionar eso, y aquí, si abro este menú desplegable, por defecto, está configurado en auto. La mayoría de las veces es mejor usar la opción auto porque esta manera el navegador determina qué cursor debe usar. No obstante, si quieres anular intencionalmente estas preferencias, podemos hacerlo. Por ejemplo, permítanme cambiarlo por otra cosa. Voy a elegir esta gráfica y vamos a ver si funciona. Sí, sí lo hace. Así funciona el cursor. La mayoría de las veces, no necesitamos cambiarlo a menos que tengamos que cambiarlo por una razón específica. Muy bien chicos, eso es todo por este video. Espero que lo hayan disfrutado. Te veré en el siguiente video. 40. Estados: Oye, en este video vamos a hablar de estados y transiciones. Bueno, empecemos con los estados. Cada elemento con el que trabajamos tiene algunos estados por defecto, como ninguno, hover, prensado, enfocado, etc. Dependiendo del tipo de elementos, nuestros estados podrían cambiar también así así que permítanme mostrarles un ejemplo. Si selecciono este elemento de botón y me dirijo a la sección selector, se puede ver que hay este icono de flecha abajo. Si hago click en eso, obtendremos acceso a nuestros estados. No tenemos ninguno, hover, prensado, enfocado, visitado. Si selecciono pasar el cursor, puedo seguir adelante y ajustar las propiedades del estado de desplazamiento por lo que cuando el usuario pase por encima de este elemento, las nuevas propiedades se aplicarán a este elemento. Déjame seguir adelante y modificar el color del fondo y lo voy a cambiar por algo más ligero. Ahora, para ver si funciona o no, primero, necesito volver a lo no estatal. Voy a ir a no-estatal y si me acerco, ahí vamos. Como pueden ver, en cuanto pase el cursor sobre este botón, su color cambia. Cuando cambio las propiedades de cualquiera de estos estados, aparece este indicador azul indicando que hay algunas propiedades que modificamos para este estado en particular. Pero ¿qué pasa con prensado? Bueno, ya que cambié las propiedades de hover, el estado prensado heredará de las propiedades de hover. Déjame demostrártelo. Si selecciono eso, ahí vamos. Tenemos nuestro azul claro ahora, sin embargo, también podemos modificar eso. Voy a seguir adelante y cambiar este color a algo más oscuro. Ahora si voy a ninguno, si previso eso, y ahora cuando pase el cursor sobre, conseguiré el azul claro y si presiono, se puede ver que vamos a conseguir el azul oscuro. Esto básicamente se trata de estados. Pero ahora les voy a mostrar otro ejemplo. Si me desplazo aquí abajo, tengo un campo de texto aquí. Para los campos de texto, tenemos un estado adicional. Si lo selecciono, y si voy a abrir mis estados, puedes ver que también tenemos este placeholder. Si voy a colocar holder, puedo personalizar la apariencia y el estilo de este texto de placeholder, ingrese su correo electrónico, porque en este momento no puedo modificar eso en el estado ninguno, pero si voy a placeholder, Simplemente puedo modificar su color, por ejemplo, al rojo o a cualquier otra cosa. Déjame restablecer eso por ahora y te voy a mostrar otro estado de este campo de texto. El campo de texto también tiene el estado enfocado, y este estado es muy útil para las entradas de texto. Déjame mostrarte cómo funciona. Si lo selecciono y si voy a, digamos sombras de caja, voy a añadir algunas sombras a este estado. Déjame cambiar el ángulo, y también la distancia, el desenfoque. Voy a aumentar el desenfoque y también voy a aumentar el tamaño y finalmente, disminuir la opacidad. Ahora, veamos qué pasa. Voy a previsualizarlo, no pasa nada. Pero tan pronto como haga clic aquí, se puede ver que aparece el estado de enfoque. Podemos usar estados para casi cualquier cosa, incluso para imágenes, para bloques div, como se puede ver aquí, tenemos estados diferentes. Son tan útiles para estas interacciones sutiles. Pero si paso el cursor sobre este botón, se puede ver que aquí no tenemos una transición suave. ¿ Cómo podemos arreglar eso? Bueno, necesitamos usar aquí la sección de transición, la de la que no hablamos en la lección anterior. Pero ahora, les voy a mostrar cómo funciona. Cuando modificamos las propiedades de diferentes estados o agregamos algunos efectos a nuestros elementos, podemos animar esos cambios usando transiciones. momento tenemos tres estados diferentes para este botón, ninguno, pase el cursor, y presionado. Siempre que queremos sumar la transición, tenemos que ir al estado ninguno, es muy importante de lo contrario no va a funcionar. Si bien estamos en lo no estatal, como pueden ver nada aparece aquí indicando que estamos en el estado ninguno. Voy a añadir una transición y aquí necesito especificar el tipo de transición. Cambié el color del fondo. Voy a seguir adelante y buscar color de fondo. Como puedes ver, podemos animar todas las propiedades, incluso margen, y relleno, topografía flex, bordes, cualquier cosa. Voy a seleccionar color de fondo y después tenemos la duración, por defecto se establece en 200 milisegundos y el método de flexibilización, así como eso, hablaremos del editor de flexibilización y métodos de flexibilización más adelante porque es avance por ahora . Posteriormente, nos sumergemos en ello por ahora no vamos a tocar eso. Veamos cómo funciona. Voy a previsualizarlo, y ahí vamos. Ahora tenemos esta transición suave. El transitorio se aplica a todos los estados. Si presiono, también tenemos una transición suave. Sigamos adelante y hagamos lo mismo por nuestra entrada de texto. Voy a seleccionar este campo de texto y voy a asegurarme de que estoy en el estado ninguno y luego sigamos adelante y sumamos las transiciones. A partir de aquí, voy a cambiar el tipo de opacidad a box-shadow. Ahí vamos. Voy a cambiar la duración esta vez para conseguir una transición más dramática. Digamos que lo voy a aumentar a 500 milisegundos o medio segundo. Vamos a previsualizar eso. Si hago click aquí, allá vamos. Ahora está enfocado y hay que entender que las transiciones funcionan en ambos sentidos, así que si hago clic en otro lugar para ir al estado ninguno, puede ver que también se animará. A ver. ¿Viste eso? Esto es básicamente como funcionan las transiciones y los estados. Si quieres agregar algunas interacciones simples a nuestros elementos como lo que acabo de mostrarte, siempre podemos usar transiciones y también podemos usar transformaciones 2D y 3D. Pero para interacciones más avanzadas, vamos a usar el panel de interacciones y hablaremos de ello más adelante. Pero antes de terminar este video, les voy a mostrar otro ejemplo. Voy a seleccionar esta imagen, esta imagen div bloque, y dejarme ir a otro estado. Voy a ir a pasar el rato y voy a añadir una transformación 2D y 3D y dejarme escalarla. Voy a escalarlo ligeramente, y luego voy a volver a ninguna, y finalmente, déjame agregarle una transición y voy a animar la transformación. Vamos a previsualizar eso. Ahí vamos. ¿ Viste eso? Pero como puedes ver, no funciona para otras imágenes. Eso es porque, para estos elementos, agregué una clase combo. Esta transición y todas estas interacciones solo funcionan para estos bloques Div en particular. Si quiero aplicar a todos estos bloques Div, lo que voy a hacer es eliminar estos clase combo. Ahora si voy a pasar el cursor, y agrego la transición de escala ya que ya la agregamos, sigue ahí así que voy a seguir adelante y modificar eso. Déjame ir a ninguno y voy a sumar las transiciones aquí para transformar. Por último, permítanme agregar de nuevo mi clase combo. Veamos si funciona o no y voy a pasar el rato sobre este elemento, funciona, este elemento, funciona en este elemento. Así funcionan los estados y las transiciones. Muy bien todos, espero que hayan disfrutado de este video. Te veré en el próximo. 41. Conceptos básicos de la hora de Breakpoint: Cuando queremos diseñar una página web de manera responsable, necesitamos usar puntos de ruptura. ¿ Qué es un punto de ruptura? Bueno, un punto de ruptura no es más que un tamaño específico que aplica algunos cambios de estilo al ancho de las pantallas específicas. Es necesario recordar que definimos nuestros cambios de estilo para diferentes tamaños de pantalla solo en función del ancho del navegador o del ancho del propio dispositivo, sin importar si se trata de un iPad, un iPhone o cualquier otro dispositivo. De forma predeterminada, Webflow tiene cuatro puntos de ruptura preestablecidos. Si echa un vistazo a la barra superior aquí, se puede ver que tenemos el escritorio, que es nuestro punto base, después tenemos la tableta, después tenemos el paisaje móvil, y finalmente retrato móvil. Un principio importante que debes aprender sobre los puntos de ruptura es este, los cambios que realizamos en nuestros estilos bajarán en cascada a dispositivos más pequeños y en cascada hasta dispositivos más grandes. Este es el principio principal de las páginas web receptivas. Si lo aprendes correctamente, puedes crear sitios web receptivos fácilmente. Empecemos con el punto de ruptura del escritorio. Si paso el cursor sobre este icono, obtendré la información de este punto de ruptura en particular, y esto se llama nuestro punto de ruptura base. El siguiente es tableta. Como puedes ver, obtendremos el rango de píxeles. Dice 991 pixels y abajo, entonces tenemos paisaje móvil. Dice 767 píxeles y abajo, y finalmente tenemos retrato móvil. Si quieres agregar puntos de corte más grandes a tu proyecto, puedes hacerlo. Si hace clic en este icono aquí mismo, puede comenzar a agregar puntos de rotura más grandes. No obstante, ten en cuenta que por el momento, una vez que agregues un gran punto de ruptura a tu proyecto, no puedes eliminar eso. Antes de agregar puntos de rotura más grandes, déjame mostrarte cómo funcionan los puntos de ruptura. Voy a empezar seleccionando este título. Este título se ve muy bien. El tamaño de la fuente se ve bien en el ancho de esta pantalla, pero ¿y si voy a tablet? En la tableta, también se ve genial. ¿ Y el paisaje móvil? Bueno, aquí se ve bien, pero puedo hacerlo más pequeño también. Si bien esto está seleccionado, voy a dirigirme a la sección de tipografía aquí en el panel de estilo, y puedo anular estas propiedades. Como puedes ver, todas estas propiedades tienen este color ámbar. Significa que el valor proviene de nuestro punto de ruptura base. En cuanto anule esto, verán que se pone azul. Permítanme modificar el tamaño de fuente a 40 píxeles. Ahí vamos, se pone azul. Ahora esta propiedad específica proviene de estos puntos de ruptura, y todos los cambios que hago en este punto de ruptura en particular bajarán en cascada al retrato móvil, pero no afecta a puntos de ruptura más grandes aquí. Déjame demostrártelo. Si voy a la parte móvil ahora mismo, se puede ver que el tamaño de la fuente está establecido en 40 píxeles y viene de nuestro paisaje móvil. No obstante, si voy a tablet, se puede ver que el tamaño de fuente sigue siendo de 60 píxeles. Es así como funcionan los puntos de ruptura, los cambios en cascada hacia abajo y hacia arriba. Si aprendes este simple principio, ya sabes diseñar páginas web receptivas. Algo importante de los puntos de corte es que solo funciona cuando modificamos los estilos en el panel de estilo. Si tratamos de modificar, por ejemplo, el orden de estos elementos en el navegador, afectará también a todos los demás puntos de ruptura. Déjame ir al retrato móvil, y voy a cambiar el orden de estos elementos en el navegador así. Ahora si voy al paisaje móvil, se ha cambiado el orden, a tablet el mismo, punto de ruptura de escritorio, el mismo. Es necesario tener en cuenta que cuando queremos modificar el orden de nuestros elementos, necesitamos hacerlo usando flexbox en el panel de estilo y todas las demás propiedades aquí. También puedes usar una cuadrícula, y puedes modificar los hijos de tu cuadrícula, puedes modificar el orden de tus hijos flexbox, como ya comentamos antes, pero puedes cambiar el orden de tus elementos en el navegador o en el lienzo aquí porque los cambios se aplican a todos los puntos de ruptura. Supongamos que quiero cambiar el color de este texto. Yo también puedo hacer eso. No obstante, si lo cambio aquí en el punto de ruptura base, se hará cascada hacia abajo y hacia arriba. Por lo tanto, afectará también a todos los demás puntos de rotura. Déjame desplazarme aquí abajo y voy a cambiar el color a otra cosa. Por ejemplo, algo más ligero. Veamos qué sucede en otros dispositivos. Ahí vamos. Los cambios se aplican a este punto de ruptura, a éste, y a éste. No obstante, si anulo el color de este texto aquí o en cualquier otro punto de ruptura, déjame mostrarte qué pasa si lo anulo aquí, por ejemplo, al rojo. Si voy al punto de ruptura del escritorio y trato de cambiar este color a negro, ya no afecta el punto de ruptura del retrato móvil. ¿ Por qué? Porque ya hemos anulado esa propiedad para ese punto de ruptura en particular. Ahí vamos. No cambió. Así es generalmente como funcionan los puntos de ruptura, a menos que haya una propiedad específica establecida en ese punto de ruptura en particular, los cambios siempre se descienden en cascada. Si elimino este estilo aquí, si mantengo pulsada la tecla Opción o la tecla Alt en mi teclado y hago clic aquí, haga clic en este texto de color, ahora el estilo viene del punto de ruptura del escritorio. Déjame ir al escritorio y te voy a mostrar otras cosas también. Déjame ir a la tablet, y como puedes ver, estas imágenes se ven muy bien, aunque tenemos un tamaño de pantalla estrecho. Pero ¿y si voy al paisaje móvil? Bueno, están demasiado encogidos, así que voy a cambiar eso. Podemos seleccionar nuestro envoltorio de imagen, que es el flexbox, y podemos modificar las propiedades de nuestro flexbox. En lugar de ajustar la dirección a horizontal, voy a cambiarla a vertical. Genial. Entonces los voy a alinear al centro. Por último, voy a seleccionar los hijos de esta imagen de envoltura, y aquí el ancho se establece en 31 por ciento porque proviene del punto de ruptura del escritorio. Voy a cambiar el ancho al 100 por ciento, y recordar cualquier cambio que haga a este punto de ruptura se hará en cascada hasta retrato móvil también. Ahora voy a añadir algún margen inferior a estas imágenes. Creo que tal vez 10 píxeles estarían bien. Veamos qué pasa si voy al retrato móvil. Ahí vamos. Ahora se ven geniales. Pero si voy a la tableta, está intacta. Si voy al escritorio, se puede ver que todavía tenemos la dirección horizontal. Si selecciono uno de estos hijos, el ancho se establece en 31 por ciento y no cambió. Usando puntos de ruptura, podemos crear cualquier tipo de páginas responsivas de manera fácil y conveniente. No obstante, hay algunos puntos que debo mencionar. Supongamos que quiero cambiar esta imagen en otro punto de ruptura. A ver qué pasa. Si selecciono esta imagen y si la cambio por otra cosa, por ejemplo, ésta, este cambio se aplica a todos los puntos de ruptura. Si voy al escritorio, ahí vamos. Así funcionan las imágenes. No estás cambiando el estilo. Si utilizo la imagen del fondo aquí en el panel de estilo, podríamos establecerla para cada punto de ruptura específico, pero con imágenes, no es posible. Es necesario tener eso en cuenta. Otro punto importante es que si modificas el texto en algún lugar incluso en retrato móvil, afectará a todos los demás puntos de rotura porque, nuevo, no estamos cambiando los estilos. Si acabo de quitar este diseño aquí, veamos qué pasa. Ahí vamos. Se ha retirado de todos los puntos de rotura. Por lo que hay que estar al tanto de estas limitaciones. Pero, ¿y si quieres quitar algunos elementos? Bueno, déjame mostrarte cómo funciona. Si decido eliminar este párrafo aquí, y lo selecciono, y presiono Eliminar o puedo hacer clic derecho en eso y simplemente eliminarlo, se eliminará del propio documento. Afectará a todos los demás puntos de ruptura así porque ya no existe en nuestro código. No obstante, déjame deshacer la operación, si decido eliminar estos elementos de este punto de ruptura en particular, puedo seleccionarlo. Aquí puedo dirigirme a los ajustes de pantalla, y puedo establecer el ajuste de pantalla en Ninguno. Ahora está oculto, y está oculto sólo en retrato móvil. ¿ Por qué? Porque aquí hemos modificado las propiedades CSS. Déjame ir al escritorio aquí. Se puede ver que sigue ahí. Voy a ir al paisaje tablet y móvil, sigue ahí. Este es un buen truco para ocultar elementos. No obstante, hay que tener en cuenta que aunque ocultó el elemento aquí, todavía está en su código, pero no es visible porque acabamos de establecer su configuración de visualización en ninguno, pero no significa que no exista. Si quiero restablecer alguna propiedad aquí, como mencioné antes, voy a mantener presionada la tecla Alt u Opción en mi teclado y voy a dar clic en eso. Alternativamente, puedes hacer clic en esta etiqueta azul y puedes presionar Reset así. Pero ¿qué pasa con los puntos de corte más grandes? Bueno, los puntos de rotura más grandes son opcionales. Por eso no aparecen en la parte superior aquí por defecto. Pero a veces tiene sentido agregar puntos de corte más grandes y especificar algunos, digamos, estilos específicos para esos puntos de ruptura. Te voy a mostrar cómo funciona. Voy a añadir este punto de ruptura de 1280 píxeles. Dice crear este punto de ruptura y arriba, no se puede quitar el punto de ruptura del proyecto una vez creado. Crea uno. Yo también voy a crear el siguiente punto de ruptura. Voy a crearlo, y finalmente el punto de ruptura de 1920 píxeles y Crear. Enfriar. Ahora tenemos los siete puntos de ruptura disponibles, y al igual que los dispositivos más pequeños, los cambios que realizamos al punto de ruptura base se harán en cascada hasta dispositivos más grandes. Si voy a este descanso y si decido modificar el ancho máximo de mi contenedor aquí, como pueden ver, el ancho máximo se establece en 1100. Si decido aumentarlo a, digamos, 1200, así, este cambio se aplica a todos los dispositivos más grandes, pero no cae en cascada. Déjame mostrarte si voy a este punto de ruptura de 1440 píxeles, puedes ver que el ancho máximo está establecido en 1200. Si voy al punto de ruptura de 1920 píxeles, ahí vamos. Nuevamente, 1200. Para este punto de ruptura, puedo modificar eso. Puedo anular esta propiedad, por ejemplo, a 1700, se ve mucho mejor ahora, sin embargo, este cambio no se aplica a puntos de ruptura más pequeños. Eso fue mucho por procesar. Recapitulemos. En primer lugar, es necesario comprender el principio principal de la capacidad de respuesta y los puntos de ruptura, también conocidos como consultas de medios, con el fin de hacer un diseño responsive. Este principio dice que los cambios que aplicamos a nuestro punto de ruptura base bajarán en cascada a dispositivos más pequeños y se pondrán en cascada hasta dispositivos más grandes. Esto es lo principal que necesitas aprender. Entonces debes entender que los puntos de ruptura solo responden a los cambios de estilo. Entonces lo que sea que cambies en el panel de estilo del lado derecho, respetará los puntos de rotura. Pero si cambias algo en el navegador o si cambias el orden de tus elementos en el navegador o en el lienzo, no afectará diferentes puntos de rotura. El otro punto fue que si reemplazas tus imágenes usando un elemento de imagen, afectará a todos los puntos de rotura, y por último pero no menos importante, cuando modifiques tus capas de texto, si cambias tu texto, lo también afectará todos tus puntos de rotura. Muy bien, chicos, todo eso se trata de puntos de ruptura y capacidad de respuesta. Por supuesto, hablaremos de la capacidad de respuesta a detalle una vez que empecemos a crear nuestros proyectos. Espero que hayas disfrutado de este video y te veré en el siguiente. 42. Cómo configurar tu proyecto: Hey, bienvenido de nuevo a otra sección de este curso. En esta sección, vamos a empezar a construir juntos nuestro proyecto de trabajo real. Estoy tan emocionado. En primer lugar, les voy a mostrar lo que vamos a construir, y después voy a explicar el proceso. Por último, vamos a montar nuestro proyecto en Webflow. Sin más preámbulos, empecemos. Este es el proyecto que vamos a construir en este apartado. En realidad es un sitio web para una agencia de diseño ficticio llamada Circle. Juntos, tú y yo vamos a construir este sitio web desde cero. No vamos a hablar del proceso de interfaz de usuario porque este no es el objetivo principal de este curso. El objetivo principal de este curso es enseñarte a convertir un diseño de interfaz de usuario en sitio web totalmente funcional. Por lo tanto, no vamos a diseñar este proyecto desde cero. Preparé el diseño y te voy a mostrar cómo puedes obtener acceso a este proyecto. En primer lugar, permítanme mostrarles cómo se ve el diseño. En este proyecto, vamos a construir tres páginas diferentes: La página de inicio, del proyecto, y la página de contacto con nosotros. Vamos a construir dos páginas estáticas y una página dinámica. Por supuesto, hablaremos de la diferencia entre páginas estáticas y páginas dinámicas. Pero por ahora, déjame mostrarte cómo se ve la página de inicio. Voy a desplazarme hacia abajo así como así. Como se puede ver, tenemos diferentes secciones. Contamos con sección testimonial, contamos con servicios, tenemos una sección de llamada a la acción, y finalmente, un pie de página. Voy a alejarme y te voy a mostrar otras páginas también. Aquí tenemos la página del proyecto. Como puedes ver, hay alguna información sobre los últimos proyectos que esta empresa ha realizado recientemente, y también la sección de otros proyectos, y nuevamente, el llamado a la acción. Por último, está esta página de contacto con nosotros que necesitaremos construir juntos. Estas son las páginas principales de este proyecto, una página de inicio o digamos la página de aterrizaje que muestra los proyectos recientes de esta empresa llamada Circle, esta empresa ficticia, digamos, y también muestra sus servicios. Por ejemplo, aquí tenemos diseño de interfaz de usuario, diseño experiencia de usuario, desarrollo de aplicaciones, y una llamada a la acción con un formulario. En primer lugar, vamos a construir este diseño dentro de Webflow, y luego vamos a hacerlo responsive y por último, vamos a trabajar con interacciones y animaciones con el fin de que el sitio web se vea mucho mejor y mejorar al usuario experiencia. Vas a aprender a crear interacciones avanzadas dentro de Webflow y también aprenderás a crear animación avanzada. Este es el punto principal que necesitaba mencionar. aquí, como pueden ver tenemos un sistema de diseño también. Aquí tenemos los estilos de color y los estilos de texto en el lado derecho. Ya los preparé. Te voy a mostrar cómo puedes obtener acceso a este proyecto ahora. El software que estoy usando se llama Figma. Puede que estés o no familiarizado con eso, pero si no lo estás, eso está totalmente bien porque no vamos a trabajar con Figma en este proyecto. Sólo necesitamos Figma para ver cómo se estructura este proyecto y tal vez sólo necesitamos revisar algunas propiedades como el tamaño de la fuente o los colores. Nada complicado. Si antes no has trabajado con Figma, no te preocupes, no enfrentarás ningún problema. En primer lugar, te voy a pedir que sigas adelante y crees una cuenta gratuita de Figma si no tienes ya ninguna. Si vas a figma.com, puedes hacer click en este botón de inscripción en la esquina superior derecha y aquí puedes ingresar tu dirección de correo electrónico y elegir una contraseña para tu cuenta, y golpear la creación de cuenta. Una vez que hayas iniciado sesión, verás este panel de control. Es posible que estés dentro de una pestaña reciente o de la pestaña de borrador, eso está totalmente bien. Lo que vas a hacer es subir el proyecto que preparé para ti. Si estás dentro de un borrador o reciente, puedes simplemente dirigirte a este nuevo botón del lado derecho y puedes hacer click en eso y puedes presionar el botón de importación. Te voy a mostrar aquí también. Estoy dentro de un equipo y voy a presionar este nuevo botón y voy a dar clic en importar, y luego puedo importar el proyecto desde mi computadora. Alternativamente, puedes simplemente arrastrar y soltar el archivo que preparé para ti aquí. En primer lugar, es necesario descargar el proyecto Figma que preparé para ti de la sección de recursos o de la conferencia de activos. Una vez que hayas descargado ese archivo zip, necesitas descomprimir eso y una vez descomprimir el archivo, obtendrás este archivo webflowproject.fig. La extensión es.fig y simplemente puedes arrastrarla y soltarla dentro del panel de control de tu Figma, así como así. Una vez importada, puedes hacer doble clic sobre ella y ya está hecho. Obtendrás acceso al proyecto con todos los detalles que necesites. Esto es básicamente lo que necesitas hacer dentro de Figma. Nada más. En primer lugar, crear una cuenta. Segundo, descarga el proyecto Figma que preparé para ti, y tercero, importa ese proyecto a tu cuenta de Figma. Eso es todo. Una vez que hayas hecho estos tres pasos, es hora de seguir adelante y configurar el proyecto en Webflow. Voy a ir al panel de mi Webflow. Aquí, voy a golpear este nuevo botón de proyecto, y luego voy a elegir este sitio en blanco seleccionar, y aquí, vamos a nombrarlo Círculo. Puedes ponerle el nombre que quieras, eso no importa y vamos a presionar el botón crear proyecto. Perfecto. Ahora estamos dentro del diseñador y tenemos un lienzo vacío. Para este proyecto, necesitamos trabajar con algunos activos. Si voy a mi proyecto Figma aquí, como pueden ver, tenemos diferentes imágenes, tenemos diferentes logotipos. Además, tenemos algunas imágenes para nuestros proyectos y estos emojis, y también algunos iconos. Necesitamos exportar estos activos y luego importarlos al proyecto de nuestro Webflow. Pero para ahorrarte tiempo, ya los exporté y preparé una carpeta de activos para ti. Se puede descargar de la sección de recursos o de la conferencia de activos. Posteriormente, hablaremos sobre cómo debes exportar tus imágenes, cómo debes optimizar tus imágenes para el desarrollo web. Pero por ahora, solo necesitas tener acceso a esos activos y necesitas aprender cómo puedes usar esos activos para construir un proyecto de trabajo real. No vamos a sumergirnos en detalles sobre la optimización de imágenes en esta etapa de este curso, pero más adelante hablaremos de eso. Vayamos a Webflow. Entonces si me dirijo a la sección de activos aquí, puedo dejar mis archivos aquí. Una vez que descargaste la carpeta de activos y descomprimiste eso, simplemente puedes arrastrar y soltar esos archivos aquí, déjame mostrarte cómo funciona. Dentro de la carpeta de activos, tienes diferentes carpetas como sección de héroes, logotipos, boletín informativo, sección de proyectos, sección de servicios, y sección testimonial. Vamos a abrir cada uno de ellos y vamos a importarlos uno por uno. Voy a empezar con la sección de héroes. Ahí vamos. Voy a seleccionarlos todos y arrastrarlos y soltarlos. Igual que eso. Voy a repetir el mismo proceso para todas esas carpetas. Voy a adelantar con celeridad este proceso para ahorrarles algo de tiempo. Ya está hecho. Todas nuestras imágenes e iconos se han subido con éxito. ¿ Qué más necesitamos hacer para montar nuestro proyecto? Bueno, en este proyecto vamos a utilizar fuentes específicas. Si voy a mi proyecto de Figma aquí, y si selecciono una de estas capas de texto, voy a hacer doble clic en este título, este título, y puedo mostrarte qué fuentes utilicé para eso. Se llama roboto. Esta es una fuente de Google y es gratuita de usar, y eso también lo vamos a necesitar. Como recuerdan, para poder trabajar con estas fuentes, necesitamos agregar la fuente dentro de la configuración de nuestro proyecto. Si voy a Webflow y si voy a la configuración del proyecto, puedo dirigirme a la pestaña de fuentes y aquí voy a elegir fuente de la lista. Voy a buscar roboto. Ahí vamos. Voy a elegir roboto. Aquí voy a elegir diferentes variantes de esta fuente, diferentes pesos para esta fuente. Se debe seleccionar regularmente. Voy a seleccionar 300, 500, y 700. No vamos a necesitar 900. Va a ser demasiado audaz. Estas son las fuentes necesarias que vamos a necesitar para estos proyectos. Posteriormente, si necesitamos más variantes, siempre podemos acudir a esta sección y solo añadir más variantes. Voy a presionar el botón de agregar fuentes y eso es todo. Voy a dirigirme a la diseñadora. Perfecto. Estamos listos para comenzar a construir nuestro proyecto porque nuestros activos son importados y nuestras fuentes se han sumado a este proyecto también. Muy bien, chicos, eso es todo por este video. Contamos con éxito con nuestro proyecto y vamos a empezar a construir nuestro proyecto en el siguiente video. Nos vemos entonces. 43. Barra de navegación: Oye, en este video, vamos a empezar a construir nuestra barra de navegación. Primero déjame dirigirme aquí a mi proyecto Figma. Como puedes ver justo en la parte superior, tenemos una barra de navegación que incluye un logotipo a la izquierda, luego tres menús diferentes, justo en el medio, y por último, un botón Contáctenos en el lado derecho. Debe colocarse justo en la parte superior. Como puedes ver, esta página de inicio tiene un color de fondo el cual no es blanco. Para este fondo, utilicé un color llamado luz neutra. Si voy a mis Estilos de Color, como pueden ver, tengo este color neutro y lo usé para mi fondo. Este es el mismo color que utilizamos para todas las páginas diferentes. Por lo tanto, todas nuestras páginas en nuestro proyecto deben tener el mismo color de fondo. Para que nuestras vidas sean mucho más fáciles, vamos a crear algunas muestra globales para nuestros colores con el fin de reutilizarlos una y otra vez y más adelante, si decides hacer algunos cambios, no necesitas seguir adelante y cambia manualmente el color de todos tus elementos uno por uno. Simplemente puedes hacer el cambio una vez y el cambio se aplicará a todos los elementos usando esa muestra global en particular. Ya hablamos de muestras globales. Ahora vamos a crear algunos para nuestro proyecto. Empecemos. En primer lugar, voy a dirigirme aquí a mi sistema de diseño. No voy a crear muestreos globales para todos estos colores porque algunos de estos colores no se utilizan en este proyecto. Acabo de crearlos para tener un buen esquema de color y más tarde, si necesitas agregar algunos colores a tu proyecto, o si es posible que necesites cambiar algunos colores, solo podrías tener algunos colores predefinidos aquí, pero no vamos para usar todos ellos. Si voy a Webflow y aquí, voy a seleccionar cuerpo, y luego, voy a ir al selector. Aquí, si solo hago clic una vez, se puede ver que vamos a obtener esta etiqueta HTML, que es rosa. Dice Cuerpo todas las páginas. Estas etiquetas HTML son tan útiles porque podemos definir algunos estilos predeterminados para diferentes etiquetas. Por ejemplo, en cuerpo o páginas, o todos los H1s, o todos los H3s para nuestros encabezamientos o para nuestros párrafos. Hablaremos de ellos más tarde. Pero por ahora, voy a seleccionar Cuerpo todas las páginas. Una vez que selecciono este cuerpo todas las páginas, puedo definir algún estilo predeterminado para la etiqueta body. Aquí voy a seguir adelante y cambiar el color, y voy a necesitar un código de color. Si voy a mi proyecto Figma aquí, como pueden ver, escribí el código de color aquí. Simplemente puedes hacer doble clic en él y luego puedes copiarlo y pegarlo Comando C o Control C. Entonces puedes dirigirte a tu Webflow, y aquí, solo puedes pegarlo comando V o Control V. Si golpeo Enter, allá vamos. El color ha sido cambiado. Pero como mencioné antes, voy a crear diferentes muestreos, diferentes muestreos globales para este proyecto. Voy a golpear este botón “Plus”, y aquí, voy a escribir Neutral/Luz. Entonces lo voy a crear. Enfriar. Ahora, voy a necesitar más colores. Sigamos adelante y creemos todas las muestreas aquí que vamos a necesitar para este proyecto. Voy a seguir adelante y copiar este código de color, el justo al lado de este Neutral/Luz. Voy a copiarlo y voy a crear una nueva muestra de que cambiamos el código de color por el nuevo, y lo voy a llamar Neutral/Medio, así como así. Entonces voy a crear la siguiente muestra. Vamos a Figma y voy a copiar este código de color oscuro. Déjame crear una muestra. Voy a cambiar el código de color y llamémoslo Neutral/Oscuro. Necesitamos tres colores más. Necesitamos nuestro color primario, que es este azul. Voy a copiar el código de color. Voy a crear una nueva muestra, pegarla aquí. Aquí, lo voy a llamar Primar/Default. Crear. Ahora, voy a seguir adelante y copiar este código de color para este color naranja. Voy a copiarlo y vamos a crear una nueva muestra, pegar el código de color aquí, y vamos a nombrarlo secundario. Golpea “Crear”. Por último, voy a seguir adelante y copiar este código de color, este color azul claro, y déjame crear una muestra. Yo lo voy a pegar aquí, y llamémoslo azul claro neutro. Genial. Nuestras muestras globales están listas, pero asegúrate de usar tu color Neutral/Luz para tu Cuerpo todas las páginas apilan. este momento, creamos estas muestreas dentro de la sección de Tipografía, por eso nuestros antecedentes no cambiaron. Eso está totalmente bien porque podemos usar estas muestreas en la sección de color Fondos también. Si me dirijo al color Fondos, puedo seleccionar este color y puedo cambiarlo a Neutral/Luz. Ahora, mi color de Fondos ha sido cambiado y también puedo restablecer este color de Tipografía. Puedo mantener presionada mi tecla Opción o tecla Alt en mi teclado y puedo hacer clic en ella. Ahí vamos. Se ha restablecido el color de la Tipografía y estamos bien para ir. Ahora que nuestro fondo está listo y nuestros colores también están listos, podemos empezar a crear nuestra barra de navegación. A ver qué tenemos aquí. Como puedes ver, creé diferentes secciones dentro de este proyecto. Déjame mostrarte cómo está estructurado. Justo en la parte superior tenemos navbar. Esta es una sección, y si la abro, dentro, tenemos un contenedor, y si lo abro por dentro, tenemos diferentes elementos. Tenemos los menús, tenemos el botón, y tenemos el logo. Eso es tan sencillo. Después tenemos la sección Héroe, la sección Cliente, y así sucesivamente. Todas estas secciones tienen un contenedor, como se puede ver, aquí tenemos el contenedor y en su interior, tenemos diferentes elementos. Dentro de esta sección, tenemos un contenedor y dentro, tenemos diferentes elementos. Vamos a estructurar nuestro proyecto dentro de Webflow de la misma manera. Ahora, vamos a empezar a crear nuestra barra de navegación. Para crear una barra de navegación, necesitamos dirigirnos a la sección Añadir elemento. Voy a desplazarme hacia abajo para encontrar un componente de barra de navegación. Voy a arrastrarlo y soltarlo aquí. Ahí vamos. Tenemos la mayoría de los elementos que vamos a necesitar para este proyecto, pero necesitamos algunos cambios para hacer. Aquí, dentro de esta barra de navegación, como puedes ver, tenemos un contenedor como en nuestro diseño. Aquí dentro de esta barra de navegación, tenemos un contenedor. Pero este contenedor por defecto, tiene un ancho máximo específico, y este no es el ancho máximo que vamos a utilizar en este proyecto. De forma predeterminada, el ancho máximo de este contenedor se establece en 940 píxeles. Pero para este proyecto, el ancho máximo de nuestro contenedor va a ser de 1,100 píxeles. ¿ Por qué? Porque si me dirijo a mi diseño aquí, y si, por ejemplo, selecciono estos proyectos recientes, dentro, si selecciono el contenedor del lado derecho en el Inspector, puede ver que el ancho es de 1,100 píxeles. Por eso necesitamos crear nuestro propio contenedor y es muy fácil. Solo necesitamos un bloque div con algunas propiedades de tamaño específicas. Muy bien, entonces primero, vamos a crear nuestro propio contenedor. Voy a ir a la sección add, voy a arrastrar y soltar un bloque div aquí dentro de esta barra de navegación y vamos a darle una clase. Voy a llamarlo contenedor. Vamos a usar esta clase para otros contenedores también. Aquí para el ancho máximo, lo voy a ajustar a 1100 píxeles y luego necesitamos centrar este contenedor. ¿ Recuerdas cómo pudimos hacer eso? Sí, tienes razón. Podemos hacer click en este pequeño ícono aquí y allá vamos, está centrado. Ahora acabamos de crear un contenedor que tiene un ancho máximo de 1100 píxeles y está centrado porque hicimos clic en este botón, y es los márgenes izquierdo y derecho están configurados en auto. Por eso está centrado. Ya discutimos eso. ¿ Qué más tenemos que hacer ahora? Porque ahora mismo, aquí tenemos dos contenedores. Si abro este contenedor principal, solo puedo arrastrar todos los elementos y dejarlos caer dentro nuestro nuevo contenedor porque ya no necesitamos este contenedor. Déjame empezar con este link de logo, link de marca y voy a arrastrarlo y asegurarme que lo sueltes dentro de tu nuevo contenedor, debe estar anidado dentro. Entonces voy a seleccionar el menú nav, voy a hacer lo mismo y finalmente este botón Menú, y pongámoslo aquí, cool. Ahora podemos seleccionar este contenedor, el contenedor principal, y retirarlo. Muy bien, nuestro contenedor está listo. Dado que este contenedor se va a utilizar para este navbar, le voy a dar una clase combo. ¿ Por qué? Porque más adelante vamos a usar este nombre de clase de contenedor también para otros contenedores. Aquí voy a crear una nueva clase combo y la voy a llamar navbar. Ahora vamos a establecer la configuración de visualización en flexbox en lugar de bloque, acuerdo, así como así. Aquí como se puede ver en el interior, tenemos diferentes elementos. Contamos con el bloque de link de la marca, tenemos este nav menu div block, y finalmente tenemos este botón de menú, que no es visible porque este botón de menú aparece cuando vamos a tablet, como se puede ver aquí, o móvil. Ya hablamos de eso. ¿ Qué tenemos que hacer ahora? En primer lugar, voy a seleccionar este contenedor y voy a cambiar algunas de sus propiedades aquí. Voy a empezar con una línea, voy a alinear con el centro, y además voy a cambiar la justificación por espacio entre. ¿ Por qué? Porque si vas a nuestro proyecto de diseño aquí, puedes ver que nuestro logo y nuestro botón están tocando los bordes de este contenedor. Entonces por eso necesito cambiar la justificación de este contenedor por espacio entre. Si recuerdas, cuando lo configuramos al espacio entre, nuestro primer elemento toca el lado izquierdo de este contenedor y nuestro último elemento toca el lado derecho de este contenedor. Eso es exactamente lo que queremos pero aquí necesitamos algo más, necesitamos un botón también. Vamos a crear uno. Voy a seguir adelante y arrastrar y soltar un botón, dentro de este contenedor. Ahí vamos, tenemos nuestro botón y su colocación se ve muy bien porque nuestro botón toca el lado derecho de nuestro contenedor. Ahora sigamos adelante y seleccionemos este bloque de enlace de marca y le voy a dar un nombre de clase. Aquí lo voy a llamar logo navbar. Así es, guión bajo barra de navegación, subrayado, voy a usar dos guiones bajos, y logo ahí vamos. Puedes nombrarlo como quieras, esta es la forma en que estructuro mis clases. Hablaré de nombres de clases más adelante, qué sistema puedes usar para tus proyectos pero no importa mientras sepas lo que estás haciendo y mientras tus nombres tengan sentido, puedes decidir cómo quieres nombrar tus elementos. Aquí tenemos logo de navbar, y luego voy a dirigirme a los fondos aquí y voy a añadir una imagen aquí. Escojamos imagen y de mis activos, voy a buscar círculo SVG, este es el logo genial, voy a seleccionar eso. ¿ Qué más necesito hacer? En primer lugar, lo voy a poner para que contenga, después voy a cambiar su posición a centro y finalmente, voy a cambiar la llanta para no hacer azulejo así, pero se ve demasiado grande, ¿no? Entonces voy a seguir adelante y cambiar su propiedad de tamaño. Vamos a establecer el ancho en 60 píxeles y la altura en 18 píxeles. Puedes ajustarlos como quieras pero en base a mi archivo de diseño aquí, si selecciono este logotipo, puedes ver que su ancho es de aproximadamente 60 píxeles y su altura está establecida en 18 píxeles. Enfriar, nuestro logo se ve genial. Ahora necesitamos crear nuestros menús de navegación. Por lo que aquí en nuestro archivo de diseño tenemos un hogar, proyectos, y servicios. El hogar, que es la página seleccionada o menú seleccionado, debe tener el color primario y los demás deben tener el color medio neutro, como se puede ver aquí. Sigamos adelante y creemos nuestros menús. Tenemos el hogar, tenemos sobre, voy a cambiar el sobre a proyectos y el contacto a servicios, cool. ¿ Qué más necesitamos hacer? Como puedes ver, estamos usando una fuente media aquí, un peso medio para estos menús, pero aquí, este aspecto ligero. Entonces voy a seleccionar uno de ellos, no importa cuál voy a empezar con casa, y le voy a dar una clase. ¿ Por qué? Porque vamos a reutilizar los estilos que vamos a establecer para este enlace de navegación en particular una y otra vez. Tiene sentido darle una clase aquí y voy a escribir nav subrayado, subrayado , enlace, así como así. Ahora voy a dirigirme a la sección de tipografía aquí, y voy a cambiar la fuente a Roboto, la que agregamos antes, y el peso se establece en 400 o normal. Voy a ponerlo 500 o medio y el tamaño de fuente va a ser de 17 píxeles como se puede ver aquí, tenemos 17 puntos. Vamos a ponerlo en 17. ¿ Y el color? Pongamos el color a medio neutro y ya casi terminamos. Ahora que aplicamos estos estilings a este primer enlace de navegación, podemos seleccionar nuestro segundo enlace y aquí vamos a utilizar la clase de enlace nav así como así para el tercero también, cool pero qué pasa con el color del primero debería ¿no usan ese color primario? Sí, debería. ¿Cómo podemos hacer eso? Es tan sencillo. Necesitamos crear una clase combo, mientras se selecciona este primer enlace, voy a crear una nueva clase combo y llamémosla actual. Significa que la página actual está seleccionada, está bien. Entonces voy a cambiar su color a primario, nuestros menús también están listos. Enfriar, pero ¿qué pasa con este botón? Bueno, necesitamos modificar este botón. Entonces voy a seleccionar este botón y le voy a dar una clase. Voy a nombrarlo botón primario genial entonces voy a empezar a cambiar sus propiedades. En primer lugar, voy a cambiar la tipografía aquí, la fuente a Roboto, y el peso va a ser 400 normal, eso está bien. ¿ Qué pasa con el tamaño? Van a ser 17 pixeles. Si vas al archivo de diseño aquí, si seleccionas esta fuente, puedes ver que dice 17, y puedo cambiar el camino de la fuente a media también. Pero vamos a ver cómo va. Entonces voy a cambiar su color de fondo a nuestro color primario y finalmente, déjame modificar el texto para contactarnos, cool. Pero, ¿qué pasa con el relleno? Porque aquí como pueden ver, tenemos más relleno alrededor de este texto, voy a seleccionar este Contáctenos toma aquí, y vamos a mantener presionada la tecla Opción o Alt en mi teclado y luego puedo ver el relleno. Nuestro relleno superior e inferior son de 15 píxeles, y nuestro relleno izquierdo y derecho se establece en 33 píxeles. Entonces sigamos adelante y seleccionemos este botón y luego aquí en esta sección de espaciado, vamos a cambiar el relleno, no el margen. Recuerda, el relleno es el espacio dentro nuestros elementos y el margen es el espacio fuera de nuestros elementos. Aquí voy a modificar el relleno superior e inferior a 15 píxeles, voy a mantener presionada la tecla Opción o la tecla Alt en mi teclado y modificar el relleno derecho e izquierdo a alrededor de 30 píxeles. Se ve bien, se ve genial. Pero, ¿qué pasa con el color de este fondo? Si selecciono esta barra de navegación, se puede ver que tenemos este color de fondo gris claro, que no es lo que queremos porque aquí tenemos un fondo transparente, mientras se selecciona esta barra de navegación voy a darle una clase y voy a escribir navbar así como así. Por último, si me dirijo al color de fondo aquí, voy a escribir transparente. Ahí vamos. Se ha ido el fondo, pero ¿qué pasa con el margen superior? Aquí como puedes ver, tenemos algún margen superior. Si selecciono mi contenedor y mantengo pulsada la tecla Opción o la tecla Alt en mi teclado, puedo ver el margen superior aquí, dice 70 píxeles. Adelante y sumamos algunos márgenes. Para ello, voy a seleccionar mi contenedor porque nuestro contenedor aquí tiene un margen superior de 70 píxeles. Entonces si me dirijo a la sección de espaciado, solo puedo agregar algún margen superior como este. Puedo establecerlo en 70 píxeles, así como así. Eso es todo, nuestra barra de navegación está lista. No vamos a hablar de respuesta ahora hablaremos de ello más adelante. Muy bien chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 44. Sección del héroe: Oye, en este video, vamos a empezar a crear juntos nuestra sección de héroes. Como puedes ver en este proyecto de Figma, nuestra sección de héroes tiene un contenedor, igual que todas las demás secciones, siempre tenemos una sección y dentro tendremos un contenedor. Esta es la mejor estructura que puedes tener para tus proyectos. Una sección, y luego un contenedor dentro, y luego puedes tener tu contenido. Dentro de este contenedor, tenemos otros dos marcos aquí, estos van a ser nuestros bloques Div, como puedes ver, aquí se ven como cajas. Aquí, dentro de este contenedor tendremos dos cajas, dos bloques Div. Uno va a contener nuestro contenido, el de la izquierda, y el segundo va a contener nuestras imágenes. Dentro del contenido, tendremos un encabezado, tendremos un bloque de texto, que es nuestra descripción, y luego dos botones diferentes. Un botón primario, al igual que el que creamos para nuestra barra de navegación, y luego este es un botón de texto, y finalmente para este contenedor derecho o digamos imagen bloque DIV, tendremos dos tarjetas diferentes, tarjetas 1, tarjeta 2 y finalmente la imagen de héroe, que es esta imagen principal. Se puede preguntar, ¿por qué no podemos exportar estos tres elementos diferentes como una sola imagen? Esa es una gran pregunta. Podríamos hacer eso, sería mucho más sencillo si yo hiciera eso. No obstante, cuando empecemos a trabajar con animaciones e interacciones, vamos a animar todos estos elementos juntos uno por uno. Si los exporto como una sola imagen, sería imposible. Por lo tanto, exporté estos elementos por separado, que podríamos tener más flexibilidad cuando se trata de interacciones y animaciones. Vamos a nuestro proyecto de flujos web, y lo primero que necesitamos crear es una sección. Voy a ir a la sección de agregar y dejarme arrastrar y soltar una sección aquí, y colocarla justo debajo de mi barra de navegación así como así. Voy a darle una clase llamada sección, y esta es la clase que vamos a utilizar para todas nuestras secciones. Por lo tanto, es muy importante especificar las propiedades que se van a utilizar globalmente para todas nuestras secciones. No vamos a modificar las propiedades de tamaño aquí, sin embargo, voy a cambiar el relleno de esta sección, el relleno izquierdo y derecho. ¿ Por qué? Porque todas nuestras secciones van a tener algún relleno izquierdo y derecho. Si mantengo pulsada la tecla Alt u Opción en mi teclado y solo tienes que hacer clic y arrastrar, puedo agregar un relleno de 30 píxeles izquierdo y derecho. Aquí no podemos ver nada que suceda, pero cuando vayamos a otros puntos de ruptura, este relleno que agregamos aquí evitará que el contenido salga fuera de la ventanilla. Este relleno es tan importante. Cuando empecemos a hablar de capacidad de respuesta, veremos el impacto del relleno que agregué aquí. Una cosa más que voy a mencionar aquí es que ahora mismo estoy trabajando con una pantalla grande. Por eso aquí dice 1600 píxeles y dice 100 por ciento. Si estás trabajando con un dispositivo más pequeño, como un portátil de 13 pulgadas o incluso portátiles más grandes, lo más probable es que no veas el lienzo exacto como veo aquí por los píxeles disponibles del tamaño de tu pantalla. No obstante, te voy a mostrar un truco muy bueno. Si estás trabajando, digamos con un dispositivo pequeño como un portátil de 13 pulgadas, solo puedes hacer clic aquí y luego puedes bajar tu proyecto para ver lo que veo aquí. Es solo para fines de previsualización, por lo que no afecta a tu proyecto principal ni al tamaño de tus elementos. No obstante, si quieres ver cómo se ve tu proyecto en dispositivos más grandes, puedes escalarlo hacia abajo. Por ejemplo, puede establecer la escala en 70 por ciento. ¿ Qué más necesitamos hacer? Bueno primero, voy a seguir adelante y añadir una clase combo a esta sección porque va a ser nuestra sección de héroes. Voy a escribir héroe, ahí vamos, y luego dentro de esta sección, voy a necesitar un contenedor. Si solo sigo adelante y arro y suelto aquí un Div negro y lo pongo dentro de esta sección, asegúrate de que esté anidado por dentro, puedo darle un contenedor de clase, y ahí vamos. Tenemos nuestro ancho máximo de 1100 píxeles que fijamos para el contenedor que usamos para nuestra barra de navegación. Una cosa importante que voy a mencionar aquí es que si quieres agregar los elementos mucho más rápido, simplemente puedes usar la tecla Command o los atajos de Control K en tu teclado, y aquí usando este QuickFind, puedes busca cualquier elemento que quieras. Digamos que voy a buscar un bloque Div. Yo puedo escribir Div, y ahí vamos. Si presiono “Enter”, este bloque Div se añadirá dentro de este contenedor. Permítanme quitarle eso. Yo también voy a quitar este contenedor, y voy a mostrarles una vez más cómo funciona. En primer lugar, voy a seleccionar mi sección porque dentro voy a añadir un contenedor. Entonces voy a golpear “Comando K” o “Control K”, y aquí vamos a escribir el bloque Div “Enter”. Este bloque Div se ha agregado a mi sección, y luego le voy a dar un contenedor de clase, y ya terminamos. Nuestro contenedor está listo, nuestra sección está lista sin embargo, no tenemos suficiente espacio entre nuestra barra de navegación y la sección. Vamos a nuestro archivo de diseño. Si selecciono esta sección de héroe y mantengo pulsada la tecla Opción o la tecla Alt en mi teclado, puedes ver que tenemos un margen superior de 100 píxeles establecido para esta sección de héroes. Voy a seleccionar esta sección, y como agregamos estas clase combo de héroes, cuando agrego algún margen a esto, no afectará las propiedades de nuestra sección, solo afectará las propiedades de estos combo de héroes clase. Voy a establecer el margen superior a 100 píxeles, y ahí vamos, se ha empujado hacia abajo. ¿ Qué necesitamos dentro de este contenedor? Bueno, este contenedor debería tener dos ya sea bloques Div. Entonces sigamos adelante y sumamos dos bloques Div. Voy a golpear “Command K” para usar el QuickFind, y voy a escribir Div, ahí vamos. Dentro hay un bloque Div y necesito un bloque Div más, así que voy a volver a seleccionar este contenedor y golpear “Comando K” o “Control K” y escribir Div. Ahora tengo dos bloques Div diferentes dentro de este contenedor. No obstante, como se puede ver, cada uno de estos bloques Div ocupa todo el ancho de su padre, que es este contenedor, y no es lo que queremos. Voy a seleccionar el contenedor y luego voy a cambiar su configuración de visualización a flexbox. ¿ Por qué? Echemos un vistazo a nuestro archivo de diseño. Aquí como puedes ver dentro de este contenedor, tenemos dos bloques Div, los hemos creado, pero están sentados uno al lado del otro, no encima el uno del otro. Si recuerdas, cuando tenemos un diseño unidimensional, podemos usar el flexbox para alinear nuestros bloques Div fácilmente. Eso es lo que voy a hacer. Necesito seleccionar el elemento padre, y voy a cambiar su configuración de visualización de bloque a flexbox. Ahora tenemos una dirección horizontal, buena, entonces la alineación se establece para estirar, y voy a cambiar la justificación a centro, pero se ven demasiado pequeñas. Eso está totalmente bien porque les vamos a dar algunas clases. Pero veamos qué hemos hecho aquí. Hemos seleccionado el contenedor y hemos cambiado su configuración de visualización a flexbox. No obstante, aquí hay un error. No agregamos una clase combo a esta clase principal, y eso está mal. ¿ Por qué? Porque más adelante, si quieres usar el mismo contenedor y no queremos usar un flexbox con estas propiedades, necesitamos anular estas propiedades usando una clase combo. Intencionalmente hice este error para mostrarte por qué es importante usar clases de combo. Ahora voy a deshacer la operación Command Z o Control Z una y otra vez, y aquí tenemos nuestro contenedor, y ahora antes de cambiar su configuración de visualización a flexbox, voy a darle una clase combo. Voy a escribir héroe. Entonces, voy a cambiar su configuración de visualización a picos de flexión y voy a cambiar su justificación a centro. Ahora, todo se ve genial. Voy a seleccionar el primer bloque div, y vamos a darle una clase. Voy a escribir Hero__Content, porque este bloque div va a contener nuestro contenido. Para la segunda, voy a seleccionar y vamos a darle una nueva clase. Voy a escribir Hero__Image. Al igual que lo que tenemos en nuestro proyecto Figma; tenemos contenido e imagen. Empecemos con el contenido. ¿ Qué necesitamos aquí? Necesitamos un título, un rubro. Entonces tenemos una descripción justo debajo de eso y dos botones; un botón contenedor y un botón de texto. Voy a empezar con el rubro. Déjame seguir adelante y arrastrar y soltar un encabezado aquí, así como así, asegúrate de que esté anidado por dentro. Para este rubro, voy a elegir H_1. Es muy importante. Para la sección de héroes, debes usar siempre el H_1. Es importante cuando se trata de optimización SEO, hablaremos de estos detalles más adelante. Pero por ahora, solo necesitas saber que para tu sección de héroes, siempre debes usar H_1 no H_2, o cualquier otro encabezado. Enfriar. Ahora, para este rubro, voy a dar una clase. Eso es correcto Hero__ Rumbo. Necesitamos modificar sus propiedades como las propiedades topográficas, el color, el tamaño de fuente, etc. ¿Notaste que por cada capa de texto, estamos repitiendo el mismo proceso? Estamos cambiando la fuente a Roboto. ¿ Podemos omitir este paso de alguna manera? Sí, podemos. ¿Te acuerdas cuando hablé de body all pages tag? Establecemos ahí el color del fondo. También podemos establecer ahí las propiedades topográficas por defecto, y luego podemos anularlas si necesitamos modificar algo. Ya que sé que para este proyecto, voy a usar sólo una fuente, Roboto, simplemente puedo seguir adelante y seleccionar mi elemento corporal aquí y luego voy a ir al selector y voy a elegir cuerpo todas las páginas. Si me dirijo a la topografía, se puede ver que la fuente está ajustada a Arial. Déjame seguir adelante y cambiarlo a Roboto. Tan pronto como lo cambie aquí se puede ver que fuente de este encabezamiento también se ha cambiado. ¿ Por qué? Porque los encabezamientos, párrafos y cuadro de texto por defecto buscan a los padres y a sus padres en este momento es el cuerpo. Heredan las propiedades que establezcamos para el cuerpo todas las páginas etiquetan a menos que las anulemos. No vamos a cambiar el tamaño de la fuente porque la mayoría de las veces necesitamos anular el tamaño de la fuente. Además, voy a cambiar su color a nuestro, digamos oscuro neutro, porque para la mayor parte de nuestro texto, necesitamos usar nuestro color oscuro neutro. Es bueno establecer el valor predeterminado de la tipografía aquí también. Ahora puedo dirigirme al bloque div de contenido héroe y ya no necesito cambiar las fuentes, puedo sobrescribirlas cuando quiera. Pero si hago clic en esta fuente aquí mismo, se puede ver que el valor viene de cuerpo todas las páginas, porque ahí establecemos algunas propiedades por defecto. Veamos qué tamaño de fuente necesitamos aquí. Voy a ir a mi proyecto Figma, voy a seleccionar este texto. Dice H_1 y aquí H_1 es de 60 puntos. Voy a ponerlo en 60 píxeles aquí, así como así. ¿ Y la altura de la línea? Normalmente lo pongo en 130 o 150 por ciento. Para este rubro, ya que tenemos un tamaño de fuente grande, voy a ponerlo en 130%, así como eso. Entonces voy a seguir adelante y copiar este texto de mi diseño. Si solo hace doble clic en estas capas, puede seleccionarlas y copiarla, péguela aquí. Ahí vamos. Pero como puedes ver, este blog div contenido héroe recoge demasiado espacio aquí. Si me dirijo a mi archivo de diseño y selecciono este grupo de contenido, se puede ver que el ancho está establecido en 530 píxeles. Por lo tanto, voy a seguir adelante y seleccionar este bloque div de contenido héroe, y voy a darle un ancho máximo. No debería ser más grande que 530 píxeles. Voy a ponerlo en 530 píxeles y ahí vamos. ¿ Qué más necesitamos? Justo bajo este rubro, vamos a necesitar una descripción, como pueden ver. Puedo arrastrar y soltar un párrafo o un bloque de texto. Voy a ir con un bloque de texto. Voy a arrastrarlo y soltarlo aquí. Este bloque de texto, como se puede ver, está usando la fuente Roboto predeterminada que configuramos para nuestro cuerpo todas las páginas tag. Se va a acelerar nuestro proceso de diseño. ¿ Y el tamaño? Voy a cambiar su tamaño a 20 píxeles. Si voy a mi archivo de diseño aquí, puedes ver que está usando body regular y body regular tiene 20 pixels. Voy a ponerlo en 20. Déjame seguir adelante y copiar y pegar este texto aquí. Enfriar. Pero como puedes ver, la altura de la línea no es suficiente. Voy a cambiar tu altura al 150 por ciento ya que el tamaño de la fuente no es tan grande y es demasiado largo. Si me dirijo a mi proyecto de diseño aquí y selecciono este texto, se puede ver que es un ancho está establecido en 435 píxeles. Necesito hacer lo mismo para este bloque de texto también. Voy a establecer un ancho máximo de 400 y 35 píxeles, y ahora se ve genial. Por último, voy a cambiar su color. Para este texto, utilicé medio neutro. Yo voy a usar lo mismo aquí. Voy a usar una de las muestras de aquí, medio neutro. Ahí vamos. Enfriar. ¿Qué más necesitamos? Necesitamos dos botones. Para poder organizar estos dos botones, necesitamos crear un bloque div y dentro de ese bloque div podemos poner nuestros botones. Déjame seguir adelante y seleccionar este bloque div contenido héroe, y voy a crear un nuevo bloque div Comando K o Control K y déjame escribir div. Ahí vamos. Aquí está nuestro bloque div y lo voy a nombrar hero__buttons. Enfriar. Dentro de esto, voy a seguir adelante y añadir dos botones. Un botón contenido o este botón primario y un botón de texto. Permítanme seleccionar este botón principal en la barra de navegación. Voy a golpear Comando C o Control C y voy a seleccionar estos botones de héroe div block y voy a golpear Comando V o Control V para pegarlo aquí. Ahí vamos. Tenemos aquí nuestro botón Contáctenos y dice botón primario. Enfriar. Voy a seguir adelante y cambiar este texto para ponerme en contacto. Déjame escribir ponerme en contacto. También voy a necesitar un botón de texto. Déjame seguir adelante y buscar enlace de texto. Voy a arrastrarlo y soltarlo aquí dentro del bloque div de botones de héroe, así como eso. Por defecto, ya que se trata de un enlace de texto, se puede ver que tiene algún estilo y decoración. Nosotros los vamos a anular y yo le voy a dar una clase. Escribamos héroe subrayado, subrayado, botón de texto. Ahí vamos. Déjame desplazarme aquí abajo. El tipo de letra se ve bien. El peso va a ser de 500 o mediano. El tamaño de la fuente va a ser de 17 píxeles. Si voy a mi archivo de diseño aquí, está usando el medio de titular y el medio de titular tiene un tamaño de fuente de 17 puntos. ¿ Y el color? El color va a ser neutro, medio, y una decoración por defecto está configurada para subrayar. Voy a ponerlo a nada. Por último, permítanme cambiar este texto para ver nuestro trabajo. Ahora tengo dos opciones. Puedo seleccionar este bloque de botones de héroe div y cambiar la configuración de visualización a Flexbox y simplemente alinearlo y agregar algún margen a este botón o simplemente puedo mantener la configuración de visualización de bloques y simplemente agregar algunos márgenes correctos a este Get en botón táctil. Ya que estos dos botones se van a colocar uno al lado del otro, no necesito un Flexbox. Solo puedo seleccionar este botón y agregar algunos márgenes. El lado izquierdo está casi listo. Lo único que queda es agregar algo de espaciado. Voy a seleccionar este rubro aquí. Voy a mantener presionada la tecla “Opción” o la tecla “Alt”. Si paso el cursor sobre esta descripción, puedes ver que tengo un margen inferior de 30 píxeles. Si selecciono esta descripción aquí, como pueden ver, tengo un margen inferior de 40 píxeles, y para este botón, tengo un margen derecho de 40 píxeles. Sigamos adelante y cambiemos sus márgenes. Voy a seleccionar este rubro. Si hago clic en eso, se puede ver que el valor proviene de todos los encabezamientos H_1. No hablamos de esta etiqueta, pero funciona como el body all pages tag. Voy a quitar el margen superior. Voy a ponerlo en cero, y voy a modificar el margen inferior a 30 píxeles. Ahora déjame seleccionar esta descripción. No cambiamos el nombre de la clase, así que voy a modificar el nombre de la clase aquí a la descripción del héroe. Héroe subrayado, descripción de subrayado. Ahora puedo agregar un relleno inferior de 40 píxeles, así como eso. Aquí, voy a seleccionar este botón, pero no puedo modificar su margen ahora mismo. ¿ Por qué? Porque en este momento estoy usando la clase de botón primario. Si agrego algún margen aquí , afectará el botón Contáctenos en la barra de navegación también. Déjame mostrarte. Si tan solo añado algunos márgenes correctos. Ahí vamos. ¿Puedes ver eso? No es lo que queremos. ¿ Qué debo hacer? Sí, tienes razón. Necesito una clase combo. Aquí, voy a añadir una clase combo, y voy a escribir héroe. Ahora puedo agregar un margen derecho de 40 píxeles sin afectar el botón Contáctenos. Ahora es el momento de trabajar en el segundo bloque div, que es el bloque div de imagen de héroe. Como pueden ver aquí, vamos a necesitar tres imágenes diferentes. Déjame seleccionar esta imagen de héroe y luego voy a añadir tres imágenes diferentes aquí. Déjame golpear Comando K y voy a buscar imagen, Enter. Voy a elegir la imagen y desde aquí voy a buscar imagen de héroe. Ahí vamos. Se ve bien. Ahora voy a necesitar dos imágenes más para mis tarjetas. Déjame seleccionar este bloque div imagen héroe. Voy a golpear Comando K, o Control K. Déjame escribir imagen. Genial, Está aquí. Voy a elegir Tarjeta 1. Déjame buscar Tarjeta 1. Ahí vamos. Está justo aquí. Es demasiado grande. Nosotros vamos a arreglar eso, y voy a necesitar una tarjeta más también. Déjame seleccionar esta imagen y le voy a dar una clase. Escribamos héroe subrayado, subrayado Tarjeta 1. Simplemente puedo reducirlo así como así o alternativamente, puedo hacer clic en este “Ajustes” aquí y voy a ajustar su ancho a 380 o 375 píxeles. Se ve bien. Pero ¿por qué esta caja se ve demasiado grande, pero el elemento no es tan grande? Es porque usé algunas sombras de gota para esta tarjeta y eso exporté. Por eso tenemos este gran límite. Ahora voy a seleccionar este bloque div imagen héroe, una vez más, golpear Command K o Control K y buscar imagen. Ahí vamos. Voy a elegir Tarjeta 2 de mis activos. Aquí está. Voy a darle otra clase. Escribamos héroe subrayado, subrayado Tarjeta 2. Ahora lo voy a bajar así como así. Vamos a darle un ancho específico de 375 píxeles. Increíble. Pero, ¿puedes ver cómo se colocan uno encima del otro? No es lo que queremos. ¿ Cómo podemos arreglar eso? Bueno, ¿recuerdas cuando hablamos diferentes opciones de posicionamiento como estáticas, relativas , absolutas, fijas, y pegajosas, te dije que si queremos crear algunos diseños modernos, los vamos a necesitar. Esto es exactamente lo que vamos a hacer. Vamos a cambiar la opción de posición para conseguir lo que queremos. Aquí como puedes ver, estas dos cartas están flotando. Por lo tanto, voy a poner su posición en absoluta. Pero como recuerdan, para establecer la posición en absoluta, primero, necesitamos establecer su posición de padre en relativa. El padre es este bloque div imagen héroe y voy a cambiar su posición a relativa. No pasa nada. Pero si selecciono este héroe Tarjeta 1 y cambio su posición a absoluta. Ahí vamos. Ahora es relativo al bloque div de imagen de héroe. Yo voy a hacer lo mismo por esta tarjeta. Voy a cambiar su posición a absoluta. Bonito. Ahora simplemente puedo controlar su posición aquí mismo. Empecemos con la Tarjeta 1. Voy a seleccionar Tarjeta 1, y debería colocarse por aquí. Voy a seleccionar arriba a la izquierda y luego voy a modificar el margen izquierdo así. Puedo ponerlo en menos 19 por ciento, y para la parte superior, lo voy a poner en, digamos, menos 2 por ciento. Se ve genial. ¿ Y éste qué? Voy a seleccionar héroe Tarjeta 2. Voy a cambiar su posición a abajo a la derecha, y luego déjame moverla hacia abajo así. Establezcamos la posición inferior menos 22 por ciento y puedo modificar aquí el margen derecho o izquierdo. No importa. Déjame mostrarte. Es justo así. Si uso el correcto, necesito valores negativos. Si uso el de la izquierda, necesitaré valores positivos como este. Prefiero usar el correcto. Voy a ponerlo justo por aquí. Se ve bien. Comparemos con nuestro diseño. Se ve bien. No obstante, este bloque div de contenido no está alineado con estos bloque div derecho, este bloque div de imagen. ¿ Cómo puedo arreglar eso? Bueno, puedo seleccionar este contenido de héroe y puedo darle algunos márgenes superiores. Déjame mostrarte cómo funciona. Justo así. Si lo muevo hacia abajo así, puedo establecer su margen superior en 114 píxeles. Se ve bien. Creo que ahora están perfectamente alineados. Muy bien chicos, eso es todo por este video, espero que lo hayan disfrutado. Si tiene alguna pregunta, por favor házmelo saber. Nos vemos en el siguiente. 45. Sección de clientes: Oye, en este video, vamos a empezar a crear esta sección de clientes. Como se puede ver en la sección de clientes, vamos a tener diferentes logotipos. En realidad, necesitamos colocar cinco logotipos diferentes. Por defecto, estos logotipos deben ser en blanco y negro, y cuando el usuario pasa por encima de ellos, deben volverse coloridos. ¿ Qué necesitamos para este apartado? Como puedes ver aquí, necesitamos otra sección, y dentro necesitamos tener un contenedor que incluya nuestros logotipos. Cada logotipo debe colocarse dentro de un bloque div. Empecemos. En primer lugar, voy a seguir adelante y crear una nueva sección. Voy a seleccionar cuerpo y voy a golpear Comando K o Control K y busquemos sección. Ahí vamos. Se ha agregado una nueva sección. Entonces como de costumbre, necesitamos agregar la clase de sección a esta sección. Déjame buscar sección. Genial, nuestra sección está lista. Ahora dentro de esta sección, necesitamos un contenedor. Si bien esta sección está seleccionada, voy a golpear Comando K o Control K, y voy a buscar el bloque div. Ahí vamos y le voy a dar la clase de contenedor, fantástico. Nuestro contenedor está listo, nuestra sección está lista también. Pero esta sección aún no tiene margen, así que voy a seguir adelante y comprobar que es margen aquí. Necesita tener un margen superior de 130 píxeles. Por lo tanto, aquí para esta sección, voy a añadir una clase combo llamada logos. Para nuestra sección de héroes, agregamos la clase combo de héroes. Para esta sección, voy a agregar logotipos, y luego voy a agregar 130 píxeles de margen superior. Ahí vamos. Ahora tenemos suficiente espacio para trabajar. Dentro de este contenedor, necesitamos tener diferentes bloques div. En realidad, necesitamos tener cinco bloques div diferentes. ¿ Cómo debemos alinear esos bloques div? Bueno, tenemos dos opciones para elegir. Opción 1, podemos convertir este contenedor en un flexbox. Opción 2, podemos convertirlo en una cuadrícula. Bueno, un flexbox es una buena opción, pero voy a ir con grid, aunque es un diseño unidimensional. ¿ Por qué voy a elegir grilla? Porque más adelante cuando se trata de capacidad de respuesta, cuando queremos hacer que nuestra página web sea receptiva, sería mucho más fácil trabajar con grid. Eso se lo demostraré en nuestras futuras lecciones. Pero por ahora, voy a seleccionar este contenedor y voy a añadir un nuevo bloque div dentro. No voy a convertir este contenedor en una cuadrícula, voy a agregar un nuevo bloque div dentro, así como así, y vamos a darle una clase. Voy a escribir Grid__Logos. Voy a convertir este bloque div a una grilla así como así. ¿ Cuántas filas y cuántas columnas necesitamos? Bueno, básicamente necesitamos sólo una fila y cinco columnas diferentes, como se puede ver aquí. Voy a quitar la segunda fila aquí, y voy a añadir tres columnas más para conseguir cinco columnas en total. Enfriar, nuestra grilla está lista. Ahora es el momento de añadir nuestros logotipos aquí. Como mencioné antes, cada logotipo debe colocarse dentro de un bloque div. Voy a seleccionar esta cuadrícula y voy a golpear Command K o Control K en mi teclado, y luego agreguemos un bloque div aquí. Ahora nuestro bloque div ocupa aquí la primera celda, y eso es exactamente lo que queremos. Voy a llamarlo Client__Logo. Enfriar. Por último, dentro de este bloque div, voy a añadir una imagen. Veamos el Comando K o Control K, y voy a buscar imagen. Ahí vamos, y elijamos los logotipos aquí. Por defecto, los logotipos son coloridos. Eso está totalmente bien porque después los vamos a hacer en blanco y negro, y hacerlos interactivos. Pero por ahora, voy a seleccionar aquí el logotipo de Airbnb. Enfriar. Entonces voy a seleccionar este bloque div y le voy a dar un ancho y altura específicos. Aquí, si selecciono este primer logotipo, si selecciono esta casilla aquí, se puede ver que el ancho es de 150 píxeles y la altura es de 96. Establezcamos su ancho en 150 píxeles y su altura en 96. Entonces voy a convertir este bloque div a un flexbox. Lo voy a alinear con el centro y lo voy a justificar al centro también. Eso es exactamente lo que estábamos buscando. ¿ Qué más necesitamos hacer? Nuestro primer logo está listo. Voy a copiar este bloque div, golpear Comando C o Control C, y luego golpear Comando V o Control V cuatro veces para obtener cinco logotipos diferentes. Entonces voy a seguir adelante y modificar la imagen de cada logo aquí. Voy a seleccionar este, voy a cambiarlo a Google. Voy a seguir adelante y seleccionar este, voy a cambiarlo a Microsoft. Voy a seleccionar el siguiente y déjame cambiarlo a FedEx. Por último, voy a seleccionar esta última imagen y cambiémosla a Amazon. Fantástico. Chicos, eso es todo por este video, espero que lo hayan disfrutado. Te veré en el siguiente video. 46. Sección de proyectos: En este video, vamos a crear juntos una sección de proyectos recientes. Como puedes ver, esta sección tiene un contenedor que contiene este encabezado y también esta sección inferior, la sección de proyecto. Esta sección de proyectos, o digamos Projects_Wrapper tiene tres proyectos diferentes, y cada proyecto tiene diferentes elementos, como una imagen en la parte superior, un título, un subtítulo, y finalmente, esto aprende más enlace, Voy a seguir adelante como de costumbre primero crear una sección. Déjame seleccionar mi cuerpo y presionar la tecla “Comando” o “Control” y buscar sección. Ahí vamos. Nuestra sección ha sido agregada. Entonces le voy a dar la clase de sección. Voy a escribir sección. Por último, le voy a dar una clase combo, que se va a llamar proyectos. Como se puede ver, ya que no hay nada dentro de esta sección, aquí no ocupa ningún espacio y es comprensible. Ahora, mientras esta sección está seleccionada, voy a presionar la tecla “Comando” o la tecla “Control”, y voy a buscar un bloque div. Ahora un bloque div está dentro de esta sección y le voy a dar la clase de contenedor. Ahí vamos. Ahora nuestro contenedor está listo también. Por último, voy a darle a esta sección algunos márgenes superiores. Déjame echar un vistazo a mi diseño aquí. Si selecciono esta sección de proyecto y si mantengo pulsada la tecla “Opción” o la tecla “Alt” en mi teclado, puedes ver que tiene un margen superior de 200 píxeles. Voy a seguir adelante y darle un margen superior de 200 píxeles aquí también. Ahí vamos. Ahora bien, ¿qué necesitamos? Dentro de este contenedor vamos a necesitar un rumbo y luego necesitamos el envoltorio de este proyecto. En primer lugar, permítanme buscar un encabezamiento. Voy a presionar la tecla “Comando” o la tecla “Control”, y voy a escribir encabezamiento. Asegúrate de seleccionar tu contenedor por qué estás buscando tus elementos. Debido a que estos elementos se anidarán dentro del elemento que está seleccionado actualmente. Voy a dar click en este rubro. Ahí vamos. Ahora bien, este rubro está dentro de mi contenedor. Por último, voy a cambiar H1 a H3. Esto no está bien porque básicamente debería ser H2 y lo explicaré más adelante. Pero voy a cometer intencionalmente este error porque más adelante cuando hablemos de accesibilidad, voy a mostrar por qué elegir el rubro correcto importa. Pero por ahora vamos a mantenerlo H3, y le voy a dar una clase. Voy a escribir proyectos__heading. Entonces voy a modificar algunas de sus propiedades topográficas. Voy a cambiar su tamaño de fuente de 24 píxeles a 40. Por último, permítanme copiar este texto y pegarlo por ahí. Proyectos recientes, nuestro rubro está listo. ¿ Qué más necesitamos ahora, justo bajo este rubro, vamos a tener el Projects_Wrapper. Voy a seleccionar este contenedor y voy a presionar “Tecla de comando o tecla “Control” y buscar un bloque div así. Voy a darle una clase, llamémoslo proyectos__wrapper, y ahora estos dos elementos se colocan dentro de este contenedor. No obstante, este contenedor tiene una configuración de visualización de bloques. Voy a convertirlo en flexbox, pero antes de hacer eso asegúrate de darle una clase combo. Es tan importante. ¿ Por qué? Porque como mencioné antes, no agregas una clase combo y cambias la configuración de visualización o cualquiera de estas propiedades aquí, estás haciendo los cambios globalmente. Si lo giro a flexbox, se puede ver que estos logotipos están mal. Si cambio la dirección a vertical, todo se ve mal y eso no es lo que queremos. Aquí voy a seleccionar el contenedor y le voy a dar una clase combo. Voy a escribir proyectos. Ahora, puedo cambiar la configuración de visualización a flexbox y voy a cambiar la dirección de horizontal a vertical. Cambiemos la justificación al espacio entre también. Ahora mismo cuando elijo que no pase nada, pero más adelante cuando agreguemos contenido, nuestro Projects_Wrapper, y además agrego algunos márgenes a este rubro veremos que la diferencia está bien. Voy a seleccionar estos Projects_Wrapper, y voy a darle un margen superior. Permítanme agregar 70 píxeles margen superior. Si le echo un vistazo a mi diseño aquí, también tengo 70 píxeles de margen superior. En el interior vamos a tener tres cartas diferentes. Por lo tanto, voy a necesitar un bloque div principal. Esa es nuestra tarjeta principal y dentro de eso vamos a necesitar dos bloques div más, uno para la imagen superior y el segundo para el contenido inferior. Empecemos con agregar el bloque div principal. selecciona Proyectos_Wrapper inalámbrico. Voy a presionar la tecla “Comando” o la tecla “Control”, y voy a buscar el bloque div. Ahora dentro hay un bloque div y le voy a dar una clase. Escribamos Project_Card, así como así y este Project_Card ocupa todo el ancho y la altura total de sus padres, que es este Projects_Wrapper. No es lo que queremos. Queríamos tener un ancho máximo y también una altura específica. Si voy a mi archivo de diseño aquí, y si selecciono este proyecto 1, por ejemplo, se puede ver que esta tarjeta tiene un ancho de 340 píxeles y una altura de 444 píxeles. Voy a establecer el ancho máximo a 340 píxeles y la altura a 444 píxeles. Así como así, nuestra Project_Card está lista. No lo vamos a duplicar ahora porque primero lo vamos a diseñar. Posteriormente, lo duplicaremos. ¿ Qué necesitamos aquí? Dentro de eso necesitaremos dos bloques div diferentes, como mencioné antes, uno para la imagen y el segundo para el contenido. Si bien está seleccionado, voy a presionar la tecla “Comando” o la tecla “Control”, y voy a buscar un bloque div. Nuestro primer bloque div está listo y le voy a dar una clase. Llamémoslo proyect__image, así como así. En el interior tendremos que añadir un elemento de imagen. Si bien esta imagen de proyecto, bloque div está seleccionada, voy a buscar aquí un componente de imagen. Déjame buscar una de estas imágenes. Número 1, de mis activos. Voy a seleccionar esta imagen en mi archivo de diseño y como pueden ver, la altura se establece en 240 píxeles. Por lo tanto, voy a seguir adelante, y aquí le voy a dar una clase primero. Escribamos proyecto__card_image, así como eso. Por último, voy a establecer su altura en 240 píxeles. Déjame modificar los pies del campo para cubrir de esta manera puedo asegurarme de que cubrirá perfectamente el bloque div imagen del proyecto. Además, le voy a dar un ancho 100 por ciento. Voy a fijar su ancho al 100 por ciento. De esta manera, tomará todo el ancho de su padre, que es esta imagen del proyecto y también la Project_Card. Ya está lista la primera parte. Ahora bien, mientras se selecciona este bloque div Project_Card voy a añadir otro bloque div aquí. Ahí vamos. Voy a darle una clase y llamémosle Project__Content. En primer lugar, voy a asegurarme de que este contenido del proyecto Bloque Div ocupe toda la altura disponible aquí. Como se puede ver, tenemos algo de espacio, pero este contenido del proyecto El bloque Div no está cubriendo todo este espacio. Por lo tanto, voy a seleccionar eso y si me dirijo a la sección lateral, puedo ajustar su altura al 100 por ciento, así como así. Pero hay un problema. Como puedes ver ahora, está fuera de nuestra tarjeta de proyecto. ¿ Por qué? Debido a que esta tarjeta de proyecto tiene una altura específica, y el ajuste de visualización está configurado para bloquear. Para solucionar este problema, voy a seleccionar esta tarjeta de proyecto y voy a cambiar su configuración de visualización de bloque a flex box, y va a ser vertical porque vamos a tener dos hijos diferentes dentro de eso debería apilarse uno encima del otro verticalmente. Ahora, todo se ve bien. Tenemos el contenido del proyecto, tenemos la imagen de la tarjeta del proyecto también. Si voy a mi archivo de Diseño, puedes ver que esta tarjeta tiene un fondo blanco, pero aquí no tenemos ningún fondo. Déjame seleccionar mi tarjeta de proyecto. Entonces si me dirijo al color, aquí voy a escribir blanco. Ahí vamos. Ahora tenemos el fondo blanco. Dentro de este contenido del proyecto, necesitaremos tener un título, un subtítulo, y otro Enlace Aprender más. ¿ Cómo podemos estructurar eso? Déjame ver. Si giro este contenido del proyecto a una caja flex y dentro pongo un bloque Div y un Bloque Link, fácilmente consigo lo que tengo aquí. ¿ Cómo? Cuando giro este contenido del proyecto a una caja flex, puedo cambiar su justificación fácilmente, entonces puedo lograr este mismo diseño exacto. Déjame mostrarte cómo funciona. momento, este contenido del proyecto tiene la configuración de visualización de bloques y no hay nada dentro. Si bien está seleccionado, voy a golpear el comando K o el control K y voy a añadir un bloque Div aquí, y voy a darle una clase. Sigamos adelante y creemos una clase. Voy a escribir project__text, y dentro de este bloque Div, voy a tener dos bloques de textos diferentes. Voy a golpear el comando K y voy a buscar bloque de texto. Ahí vamos. Este es el primero. Déjenme darle una clase. Voy a escribir project__title, y voy a modificar sus propiedades topográficas. El tipo de letra va a ser Roboto, el peso va a ser 500 o medio. El tamaño va a ser de 24 píxeles, así como así, la altura de la línea va a ser del 150 por ciento, y el color se ve bien. Ahora voy a seguir adelante y copiar y pegar este título. Déjame elegir eso, copiarlo, y pegarlo aquí, simplificarlo. Este es el nombre del proyecto. Se trata de proyectos ficticios, por cierto. Enfriar. Nuestro título está listo. Ahora voy a modificar su espaciado. Voy a darle algunos márgenes. Voy a mantener presionada la tecla de opción y la tecla Mayús en mi teclado, y vamos a añadir un margen igual a todos los lados. Voy a darle un margen de 30 píxeles. A lo mejor podría disminuir el margen inferior a 20 píxeles. Ahora, voy a copiar este comando de título C o control C, comando V o control V. Entonces voy a agregar mi descripción o subtítulo aquí. No obstante, asegúrate de duplicar primero tu clase. Es tan importante porque vamos a modificar sus propiedades. De lo contrario, cambiaremos también el título del proyecto. En primer lugar, haga clic en esta flecha pequeña, duplique esta clase, y cambie su nombre a la descripción del proyecto. Al igual que esta descripción. Lo primero que voy a hacer es quitar el margen superior, no lo necesito. Voy a mantener presionada la tecla de opción en mi teclado o tecla alt y hacer clic en ella, entonces voy a disminuir el margen inferior a 10 aquí. Aquí vamos. Ahora puedo seguir adelante y modificar las propiedades topográficas. Empecemos con el peso. Va a ser normal. El tamaño va a ser de 17 píxeles, y la altura se ve bien. No obstante, el color debe cambiarse a un color medio mutuo. Ahora simplemente puedo copiar este texto y pegarlo aquí. Ahí vamos. Ahora, voy a seleccionar este texto del proyecto y voy a cambiar su configuración de visualización a flex box y asegurarme de cambiar la dirección a vertical. Se ve mucho mejor ahora, y asegúrate de que esté justificado hasta la cima. Ahora mientras se selecciona el contenido del proyecto Bloque Div. Voy a presionar el comando K control de tecla K en mi teclado, y déjame buscar un enlace de texto. Vamos a crear un enlace de texto como lo que hicimos aquí para esta sección de héroes. En primer lugar, como de costumbre, le daremos una clase. Voy a escribir Botón Link, así como así. Entonces voy a modificar sus propiedades topográficas. El peso se ve genial. Voy a modificar su tamaño a 17 píxeles. Es color va a ser predeterminado primario y finalmente, la decoración se debe ajustar a ninguna y déjame modificar este texto para Aprender más. Conoce más. Permítanme darle algunos márgenes aquí. Voy a darle márgenes izquierdo, inferior y derecho. No obstante, dado que este enlace de texto está usando la configuración de visualización en línea, no puedo modificar el margen inferior. Por lo tanto, voy a cambiar su configuración de visualización a bloqueo. Entonces puedo darle un margen inferior izquierdo y derecho de 30 píxeles, así como así. Ahí vamos. Ahora, ¿qué más debemos hacer? Como se puede ver, no están perfectamente alineados. Voy a seleccionar el contenido del proyecto Bloque Div. Como puede ver, la configuración de visualización está configurada en bloque. Voy a cambiarlo a flex box, y voy a cambiar la dirección a vertical. Agradable. También voy a cambiar la justificación a espacio entre. Ahora se ve mucho mejor. Enfriar. Pero, ¿qué pasa con otras tarjetas? Bueno, ahora vamos a seleccionar esta tarjeta del proyecto y vamos a copiarla. Golpea el comando C y pégalo dos veces, golpea el comando V o controla V. Pero en este momento estas cartas se apilan uno encima del otro verticalmente. Esto no es lo que queremos. Queremos que se sientan uno al lado del otro horizontalmente. ¿ Cómo podemos arreglar eso? Bueno, podemos seleccionar nuestro envoltorio de proyectos y podemos cambiar su configuración de visualización de bloque a flex box, así como así. Entonces podemos cambiar la justificación por espacio entre. Ahí vamos. Tenemos lo que tenemos aquí. Ahora, voy a seguir adelante y modificar el contenido. Voy a seleccionar esta imagen y voy a ir a sustituir la imagen. Voy a elegir el segundo. Para la tercera, voy a repetir el mismo proceso. Voy a cambiarlo al número 3, y además voy a cambiar el nombre de estos proyectos y también su descripción. Déjenme ir rápido y modificar los títulos. Ahí vamos. Ahora voy a modificar la descripción aquí, y para el tercer proyecto aquí. casi terminamos, pero hay una cosa más que tenemos que hacer. Si le echo un vistazo a este archivo de diseño, podemos ver que el espaciado entre estas tarjetas es menor de lo que tenemos aquí. Como podemos ver, la brecha es mucho más grande aquí. ¿ Por qué es eso? Ya fijamos un ancho máximo para eso y una altura. Esa es la clave, establecemos el ancho máximo. Por lo tanto, necesitamos seleccionar la ficha del proyecto, una de ellas. No importa porque no agregamos ninguna clase combo aquí. Voy a seleccionar el primero, por ejemplo. Déjame seguir adelante y seleccionar la primera. Entonces en dimensionamiento, como se puede ver, dice encoger si es necesario. Voy a cambiarlo para crecer si es posible. Ahí vamos. Está arreglado. Ahora el espaciado aquí es igual a lo que tenemos aquí. Tenemos un espaciado igual entre ellos, y están creciendo cuando tienen suficiente espacio. Nuestra sección de proyectos recientes está lista. No obstante, te voy a mostrar otra forma de crear tal disposición usando rejillas. Porque si utilizas grid en lugar de un flex box, sería mucho más fácil hacer que tu diseño respondiera. Lo único que necesito hacer es seleccionar estos proyectos wrapper, y luego en lugar de flex box, lo voy a cambiar a grid. Ahora mismo tengo dos filas y dos columnas. Voy a quitar una de esas filas, y voy a añadir una columna más. Ahí vamos. Aquí, voy a modificar la brecha entre nuestras columnas a 40 píxeles y golpear “Done”. Eso es todo. Ahora en lugar de usar flex box, estamos usando una cuadrícula y tenemos exactamente el mismo diseño. No obstante, en términos de capacidad de respuesta, nos hará mucho más fácil la vida. Muy bien chicos, eso es todo por este video. Nuestra sección de proyectos recientes está lista también. Espero que lo hayan disfrutado, y los veré en el siguiente video. Nos vemos entonces. 47. Sección de Testimonial: En este video, vamos a empezar a crear esta sección testimonial juntos. Entonces veamos qué tenemos aquí. Como puede ver, esta sección debe tener un ancho menor en comparación con otras secciones. Aquí, nuestra sección de proyectos recientes tenía un ancho del 100 por ciento pero aquí esta sección debería tener un ancho de 1320 píxeles. Tenemos que tenerlo en cuenta. Veamos qué tenemos aquí. Esta sección debe tener un color neutro de fondo oscuro. También, como pueden ver, tenemos algunas órbitas. ¿ Cómo voy a estructurar eso? En primer lugar, voy a crear una sección con un ancho máximo de 1320 píxeles. Entonces, le voy a dar un color de fondo, este color oscuro neutro. Por último, voy a añadir una imagen de fondo para añadir estas órbitas. Una vez que nuestra sección esté lista, agregaremos un contenedor dentro, y dentro de ese contenedor, añadiremos estas capas de textos, este título, este subtítulo, o digamos descripción, y finalmente, el información aquí. Básicamente, este contenedor debe ser un flexbox con dirección vertical. Para esta sección, primero, vamos a crear un bloque div con la configuración de visualización flexbox. Entonces dentro, vamos a tener dos bloques div más, uno para esta imagen de perfil y otro para estas dos capas de texto. El bloque div derecho va a ser un flexbox con dirección vertical. último, pero no menos importante, vamos a colocar estos emojis justo alrededor este contenedor y vamos a poner su posición en absoluta. Por último, necesitamos cambiar la posición de este apartado a relativa. Está bien. Suena sencillo. Empecemos. Voy a ir a Webflow. Aquí, voy a seleccionar mi cuerpo. Voy a golpear el comando K o el control K en mi teclado, y busquemos la sección. Está bien. Se ha agregado el apartado. Voy a darle la clase de sección como de costumbre. Además, le voy a dar una clase combo. Llamémoslo testimonial. Ahí vamos. Como mencioné antes, esta sección debe tener un ancho máximo específico. También, una altura específica. Echémosle un vistazo. Su ancho máximo debe ser de 1320 píxeles y su altura debe ser de 622 píxeles. Adelante y especifiquemos esos valores. Voy a establecer su ancho máximo a 1320 y es altura a 622 píxeles. Ahí vamos. Nuestra sección está lista pero no está centrada. ¿ Cómo podemos abordar este tema? Tienes razón. Puedo dirigirme a la sección de espaciado y puedo dar click en este pequeño botón aquí. Ahora, los márgenes izquierdo y derecho están configurados en auto y significa que nuestra sección está centrada. Perfecto. Lo último que voy a hacer es agregar algunos márgenes superiores a esta sección. Vamos a revisar nuestro diseño por un segundo. Como puedo ver aquí, el margen superior debe ser de 200 píxeles. Voy a darle un margen superior de 200 píxeles. Ahí vamos. Ahora es el momento de darle a esta sección un color de fondo específico. Entonces voy a ir a la sección de fondo y usando este selector de color, voy a elegir oscuro neutro. Por último, voy a añadir una imagen a este fondo, así, y elegir la órbita de mis activos. Justo así. Pero no se ve bien. Eso se debe a que el tamaño se establece como personalizado. Voy a cambiarlo para contenerlo, y eso es lo que estamos buscando. No necesitamos modificar nada más. Nuestro antecedente está listo. Ahora dentro, vamos a crear un contenedor. Si bien esta sección está seleccionada, voy a golpear el comando K o el control K, y voy a buscar un bloque div así. Este bloque div se encuentra ahora dentro de esta sección. Voy a darle la clase de contenedor. Ahí vamos. Ahora, este contenedor tiene un ancho máximo de 1100 píxeles como todos los demás contenedores que creamos antes. Está bien. Enfriar. ¿Qué necesitamos para este contenedor? En primer lugar, este contenedor debe ocupar toda la altura de este apartado. Por lo tanto, le voy a dar una clase combo. Déjame escribir testimonial. Voy a fijar su altura al 100 por ciento. Ahí vamos. En el interior, voy a añadir un encabezamiento. Entonces mientras este contenedor está seleccionado, voy a golpear el comando K o el control K, y busquemos rumbo. Ahí vamos. Se ha agregado el rubro. Para esta sección, voy a elegir H3. Ahora, vamos a darle a este rubro una clase específica. Voy a escribir guión bajo testimonial, encabezamiento subrayado. Entonces, voy a modificar sus propiedades tipográficas. En primer lugar, déjame seguir adelante y modificar su color. Vamos a usar luz neutra, ésta. Además, voy a modificar su tamaño de fuente a 40 píxeles. Si me dirijo a mi archivo de diseño aquí, si selecciono esto, se puede ver que estoy usando H3, y H3 es de 40 puntos. Aquí, vamos a especificar 40 píxeles. No voy a tocar la altura de la línea. Entonces, déjame seguir adelante y copiar y pegar este texto en particular de mi archivo de diseño. Voy a copiarlo, comando C o control C y pegarlo aquí. Está bien. Genial. Ahora voy a necesitar un bloque de texto. Por lo que una vez más, selecciona el contenedor, pulsa el comando K o el control K y busca el bloque de texto. Ahí vamos. De nuevo, voy a dar una clase. Escribamos subrayado testimonial, texto subrayado. Por último, voy a cambiar su color a este secundario. Además, voy a modificar su tamaño a 24 píxeles y es altura de línea al 160 por ciento. También puedo modificar su peso. Echemos un vistazo al peso aquí. Sí, va a ser medio, así que lo voy a cambiar a medio. Entonces, voy a copiar y pegar ese texto aquí. Vamos a copiarlo y pegarlo aquí mismo. Nuestros textos también están listos. No obstante, tenemos un problema. Aquí, como pueden ver, este texto es demasiado largo pero cuando le doy un vistazo a mi archivo de diseño, se puede ver que tengo dos líneas de texto y el ancho está establecido en 596 píxeles, así que ya sabes lo que tenemos que hacer. Necesitamos cambiar su propiedad de tamaño. Si configuro un ancho máximo para esta capa de texto, se resolverá el problema. Voy a escribir 596 píxeles. Ahí vamos. Tenemos dos líneas de texto, y lo voy a alinear al centro. Agradable. Antes de empezar a crear la última sección aquí, la sección cliente, voy a seguir adelante y seleccionar este contenedor, y voy a cambiar su configuración de visualización de bloque a flexbox. Como se puede ver por defecto, su dirección está configurada en horizontal. Voy a cambiarlo a vertical. También, lo voy a alinear al centro y vamos a poner ahí modificado y lo justificado, pero no ahora. Entonces, ¿qué más necesitamos aquí? Como mencioné antes, para esa sección de clientes, necesitamos un bloque div. Entonces mientras este contenedor está seleccionado, voy a golpear el comando K o el control K, y busquemos el bloque div. Ahí vamos. Voy a darle una clase. Escribamos cliente. Este bloque div cliente debe tener dos bloques div más. Si bien está seleccionado, busquemos un bloque div. Ahora otro bloque div está dentro y voy a repetir el mismo proceso para agregar otro bloque div. Tenemos dos bloques div ahora pero están apilados uno encima del otro y no es lo que queremos. ¿ Por qué? Porque aquí, deberían colocarse uno al lado del otro. Por lo tanto, voy a seleccionar el padre, que es este bloque div cliente y voy a cambiar su configuración de visualización de bloque a flexbox. El sentido se establece en horizontal, eso es exactamente lo que necesitamos. Voy a seleccionar el bloque div izquierdo y le voy a dar una clase. Escribamos guión bajo del cliente, perfil de subrayado. Para el correcto, el siguiente bloque div, voy a dar una clase y voy a escribir guiones bajos de cliente, subrayado info. Nuestros bloques div están listos. Ahora, necesitamos agregar contenido aquí. En primer lugar, voy a seleccionar un bloque div perfil de cliente, y voy a dirigirme a la imagen de fondo. Añadamos una imagen aquí. Voy a elegir una imagen de los activos, la imagen de perfil. Ahí vamos. Pero necesitamos modificar sus preferencias. En primer lugar, voy a cambiar su tamaño para cubrir. Agradable. Entonces, lo voy a reubicar al centro y, también voy a poner el azulejo para no hacer azulejo. Por último, necesito hacerlo circular. ¿ Cómo podemos hacer eso? Bueno, es tan sencillo. Ya te mostré antes cómo podemos crear un círculo y aquí vamos a hacer lo mismo. En primer lugar, necesitamos establecer un ancho y una altura específicos. El ancho y la altura deben ser los mismos cuando queremos crear un círculo. Por lo tanto, voy a revisar este ancho y alto aquí. Es una imagen de 50 por 50 píxeles. Voy a darle unas dimensiones de 50 por 50 píxeles. Ahora, lo único que tenemos que hacer es dirigirnos a las fronteras y voy a cambiar el radio al 50 por ciento. Ahí está, tenemos nuestro círculo. ¿ Qué más debemos hacer? Ahora es el momento de agregar aquí el contenido de información del cliente. Para este bloque div, vamos a necesitar dos capas de texto. Como puede ver, tenemos un nombre y luego el nombre de la empresa o el nombre de la página web. Aquí, mientras se selecciona este bloque div info cliente, voy a golpear comando K o control K, y voy a buscar bloque de texto. Ahí vamos. Este es nuestro primer bloque de texto. Voy a darle una clase. Déjame escribir guiones bajos del cliente, información de subrayado, subrayado, nombre de subrayado, así como eso. Entonces, vamos a modificar algunas de sus propiedades. Pasemos a la sección de tipografía. A partir de aquí, voy a modificar su tamaño a 17 píxeles. Si le echo un vistazo a mi diseño aquí, su tamaño es de 17 puntos. Entonces, necesitamos modificar su color para el hover primario. No creamos una muestra global para estos colores de hover primarios pero eso está bien. Lo voy a hacer ahora mismo. Entonces déjame seguir adelante y obtener el código de color de aquí. Como puede ver, el código de color es A2D6F9. Yo lo voy a copiar. Entonces, voy a dirigirme a Webflow y desde el color tipográfico aquí, voy a crear una nueva muestra, y peguemos el código de color aquí. Voy a llamarlo hover de barra delantera primaria. Tenemos una nueva muestra global. Ahora, vamos a copiar y pegar aquí el nombre del cliente. Voy a copiarlo, y vamos a pegarlo aquí mismo. Se ve bien. Por último, necesitamos otra capa de texto. Voy a seleccionar el bloque div info del cliente, y usando el QuickFind, voy a buscar otro bloque de texto. Justo así. Démosle una clase. Voy a escribir subrayado cliente, información de subrayado, subrayado, subrayado empresa. Entonces voy a modificar sus propiedades topográficas. En primer lugar, empecemos con el tamaño de fuente. Su tamaño de fuente debe ser de 13 puntos si no me equivoco, déjame revisarlo. Estamos usando el estilo de texto de la leyenda dos. Aquí, el epígrafe dos es de 13 puntos, eso está bien. Aquí le voy a dar 13 píxeles, y por su color, vamos a usar una luz neutra. Agradable. Déjame seguir adelante y copiar y pegar el sitio web de la empresa, que es booking.com. Yo lo voy a pegar aquí mismo, y ya casi terminamos. Ahora lo único que tenemos que hacer es alinear nuestros elementos. Empecemos con el Client_Info. Si selecciono este bloque Client_Info Div y me dirijo a la sección de diseño, puede ver que el ajuste Display está establecido en bloque, y no es lo que quiero porque quiero cambiar un poco la alineación. Por lo tanto, lo voy a cambiar a flex box y voy a cambiar la dirección a vertical. Lo último que voy a hacer aquí es cambiar la justificación al espacio alrededor. Ahí vamos. Lo último que tenemos que hacer es agregar aquí algunos márgenes izquierdos. Déjame revisar mi archivo de diseño. Si selecciono este grupo y mantengo pulsada la tecla Alt u Opción en mi teclado, se puede ver que el margen izquierdo está establecido en 10 píxeles. Por lo tanto, mientras se selecciona este Client _Info Div Block, le voy a dar un margen izquierdo de 10 píxeles. Voy a seleccionar el contenedor, y voy a cambiar la justificación por espacio alrededor. Tenemos lo que tenemos aquí. Echemos un vistazo. Tenemos exactamente lo que tenemos en nuestro archivo de diseño. ¿ Y los Memojis? Como ya les dije antes dentro de esta sección, vamos a tener cuatro Memojis diferentes también. Voy a seleccionar esta sección, no el contenedor. Voy a seleccionar una sección, y luego voy a buscar un Bloque Div y este Bloque Div está ahora dentro de esta sección. Démosle una clase. Voy a escribir Memoji, y este Memoji debe tener un ancho y una altura específicos. Echemos un vistazo a nuestro archivo de diseño por un segundo. Si selecciono este Memoji, se puede ver que su ancho y alto se establecen en 150 píxeles. Voy a establecer su ancho a 150 y su altura a 150 píxeles también. Pero, ¿qué pasa con la imagen? ¿ Vamos a añadir aquí un elemento de imagen? No, vamos a usar la imagen de fondo, pero antes de agregar la imagen de fondo, voy a darle una clase combo. ¿ Por qué? Porque vamos a tener cuatro Memojis diferentes, y como vamos a cambiar la imagen de fondo aquí, es importante darle una clase combo a este Memoji Div Block. Para el primer Memoji le voy a dar la clase de combo uno así, entonces vamos a darle una imagen. Voy a elegir una imagen de mis activos, éste, y voy a cambiar su tamaño para contener y dejarme reposicionar eso al centro. Voy a poner el azulejo para que no empate. Está justo aquí, pero ¿cómo podemos colocarlo justo ahí? Como se puede ver ahora archivo de diseño. Se colocan justo al lado de las esquinas. Como mencioné antes, voy a seleccionar esta sección, y voy a cambiar su posición de estática a relativa. ¿ Por qué? Porque después voy a cambiar la posición de estos Memojis a absoluta, y de esa forma puedo reposicionarlos como quiera. Si selecciono este Memoji, y si cambio su posición a, digamos absoluto aquí, nada pasó todavía porque voy a cambiar su posición a la parte superior izquierda. Ahora, como se puede ver, ya que la posición de este Memoji es relativa a su sección, como se puede ver aquí. Simplemente puedo modificar su posición. Permítanme modificar la posición izquierda y superior. Voy a cambiarlo a, digamos 5 por ciento, y para la parte superior, voy a ponerlo en 10 por ciento. Ahora, voy a necesitar crear el próximo Memoji, para que puedas copiar y pegar este Memoji o puedes duplicarlo. Voy a hacer clic derecho en el nombre de este Memoji, y voy a dar click en Duplicar. Se ha duplicado, pero ahora están uno encima del otro. Si selecciono la capa duplicada, solo puedo reposicionarla, pero antes de hacerlo, voy a seguir adelante y duplicar esta clase combo, así como así. Entonces le voy a dar una nueva clase combo. Voy a escribir dos porque este es nuestro segundo Memoji. Ahora lo voy a volver a posicionar en la parte inferior izquierda, y puedo modificar su posición izquierda e inferior aquí al 5 por ciento, y aquí lo voy a fijar al 10 por ciento. Está bien, genial. Ahora es el momento de ir a la sección de fondo y modificar la imagen misma. Voy a seleccionar estos Memoji y ahora sólo necesitamos repetir el mismo proceso. Voy a duplicar este Memoji, así como eso. Voy a seleccionar el Bloque Div duplicado en el navegador, y voy a duplicar su clase combo. Cambiémoslo a tres y déjame reposicionarlo a la esquina superior derecha. También voy a cambiar su Memoji de la sección de antecedentes a ésta. Por último, voy a cambiar su posición a la derecha, voy a ponerla en 5 por ciento y la parte superior, voy a ponerla en 10. último, pero no menos importante, voy a duplicarlo una vez más. Seleccionemos la capa duplicada en el navegador y también duplicemos su clase combo, y voy a nombrarla cuatro, luego la voy a reubicar en la esquina inferior derecha. También voy a cambiar su imagen de los activos a este Memoji. Por último, permítanme modificar sus posiciones derecha e inferior a 5 por ciento y 10 por ciento respectivamente. Así como así, bien chicos. Nuestra sección testimonial también está lista. Puedes ver lo fácil que es convertir tu diseño de producto a sitios web funcionales. Lo único que importa es que entiendas las estructuras y las propiedades CSS siempre y cuando sigas las reglas, y tengas una estructura clara en tu mente, todo es fácil. Recapitulemos. Para este apartado. Creamos una sección. Le dimos una clase combo testimonial, y también le dimos un margen superior de 200 píxeles de acuerdo a nuestro archivo de diseño. Después hemos especificado un ancho máximo y también una altura específica para eso, y le dimos un color de fondo y una imagen de fondo. Justo después de eso creamos un contenedor, y le dimos las clases de contenedor y testimonial, y dentro hemos agregado un encabezado, un bloque de texto, y otro Bloque Div que incluye otros dos Bloque Div. Todos estos Bloque Div son cajas flex. Cambiamos su configuración de visualización a flex box con el fin de controlar su dirección, su alineación y su justificación. Una vez completada la sección de contenedores, empezamos a añadir aquí los Memojis. Para posicionarlos correctamente, fijamos la posición de las secciones en relativa y dijimos que la posición de los Memojis en absoluta. Muy bien chicos, eso es todo por este video. Espero que lo hayas disfrutado, y te veré en el siguiente. 48. Sección de servicios: Oye, en este video vamos a empezar a construir juntos la sección Servicios. Veamos cómo debemos estructurarlo. Como pueden ver aquí, tenemos otra sección. En primer lugar, necesitamos crear una sección y dentro necesitamos un contenedor igual que lo que hicimos aquí para la sección Proyectos Recientes, vamos a hacer lo mismo aquí también. Dentro de este contenedor, vamos a tener un rumbo para este título de Nuestros Servicios y luego vamos a tener el envoltorio de servicios. Va a ser una grilla o un flexbox. Nos vamos a ir con grilla. Dentro de este contenedor de servicios o digamos grilla de servicios, vamos a tener tres bloques div diferentes. Aquí tenemos tres cartas diferentes, y cada carta debe crearse usando un bloque div. Tomemos este por ejemplo. Este va a ser un bloque div, y dentro vamos a tener este icono, y vamos a crear este icono usando un bloque div y un bloque div dentro. Una vez creada nuestra sección superior, seguiremos adelante y crearemos la sección de contenido. Aquí necesitamos un título y una descripción, y por último, necesitamos este botón Aprender más. último, pero no menos importante, duplicaremos nuestro bloque div dos veces para conseguir tres tarjetas diferentes. Se ve simple, así que empecemos. En primer lugar, voy a seguir adelante y seleccionar aquí mi Cuerpo. Entonces voy a golpear al Comando K o Control K y buscar Sección. Ahí vamos. Aquí se ha agregado una nueva sección, y le voy a dar una clase, la clase de sección. Esta sección no va a tener un ancho o alto específico; sin embargo, le voy a dar un margen superior. Echemos un vistazo a nuestro archivo de diseño aquí. Como puedes ver, vamos a necesitar 200 píxeles de margen superior. Voy a seleccionar esta sección y voy a cambiar su margen superior a 200 píxeles. Ahí vamos. Pero no lo podemos ver ahora porque no hay nada dentro de nuestra sección. ¿ Cómo podemos arreglar eso? En primer lugar, voy a seleccionar esta sección y voy a golpear Command K o Control K y voy a añadir un bloque div, porque como saben, vamos a necesitar un contenedor. Como puedes ver ahora tenemos nuestro margen superior de 200 píxeles, y mientras este bloque div está seleccionado, voy a dar la clase de contenedor. Ahí vamos. Ahora tenemos el ancho máximo de 1,100 píxeles. Eso es exactamente lo que necesitamos. Para este contenedor, también voy a agregar una clase combo. Voy a escribir Servicios, y dentro de este contenedor, vamos a tener un encabezado y el envoltorio de servicios. Si bien este contenedor está seleccionado, presiona Comando K o Control K y busca rumbo. Se ha agregado este rubro, y aquí voy a elegir H3. Déjame seguir adelante y darle una clase. Ya que sus propiedades CSS deben ser exactamente las mismas que el encabezado Proyectos Recientes. Por ello, también voy a fijar el rumbo de Proyectos para este rubro. Voy a seleccionarlo y vamos a escribir Encabezado de Proyectos. Ahí vamos. Entonces voy a cambiar su texto a Nuestros Servicios. Déjame seguir adelante y copiarlo. Enfriar. Nuestro rumbo está listo. ¿ Qué más necesitamos? Necesitamos el envoltorio de servicios. Si bien este contenedor está seleccionado, voy a golpear Command K o Control K y busquemos el bloque div. Entonces este bloque div necesita una clase como de costumbre. Ya que vamos a cambiar la configuración de visualización a cuadrícula más adelante, voy a nombrarlo, Servicios subrayado guion de subrayado Grid. No es una grilla ahora, pero más tarde la cambiaremos a rejilla. Esta rejilla de servicios necesita tener algunos márgenes superiores. Déjame comprobarlo aquí. Si selecciono este envoltorio de servicios y mantengo pulsada la tecla Alt u Opción en mi teclado, puedes ver que vamos a necesitar 70 píxeles de margen superior. Voy a seleccionar esta cuadrícula de servicios y voy a agregarle algunos márgenes. Vamos a ponerlo en 70 píxeles. Enfriar. Ahora que se crea nuestro bloque div grid de servicios, necesitamos otro bloque div dentro para nuestra tarjeta de servicio. Por lo tanto, mientras se selecciona esta cuadrícula de servicio, busquemos un bloque div, y este bloque div va a tener una nueva clase. Démosle un nombre, Servicio de subrayado subrayado Tarjeta. Esta tarjeta va a tener un ancho máximo específico, pero no vamos a especificar una altura en particular para eso, vamos a establecer la altura a auto. Pero si selecciono este servicio una tarjeta aquí, podemos ver que el ancho está establecido en 340 píxeles. Por lo tanto, vamos a establecer el ancho máximo a 340 píxeles. Agradable. Esta tarjeta es blanca. ¿Qué debemos hacer? Sí, tienes razón. Tenemos que cambiar el color del fondo aquí. Voy a dirigirme a la sección de fondo y usando este selector de color, voy a cambiar su color a blanco. Enfriar. Pero parece demasiado pequeño. Sí, porque no fijamos una altura específica para eso, y eso está totalmente bien. Tan pronto como agreguemos más elementos a este bloque div, su altura crecerá, así que no te preocupes por ello. Una vez seleccionada esta tarjeta de servicio, le vamos a agregar algunos elementos. ¿ Qué necesitamos? Necesitamos dos bloques div. Necesitamos el bloque div icono de servicio y el bloque div contenido de servicio. Busquemos un bloque div. Nuevamente, voy a seleccionar tarjeta de servicio y buscar otro bloque div. Ahora tenemos dos bloques div que se colocan uno encima del otro. Yo les voy a dar una clase. Para el primer bloque div, para este bloque div superior, lo voy a nombrar, Servicio de subrayado guion bajo Icon. Para el bloque div inferior, lo voy a nombrar, Servicio de subrayado subrayado Contenido. El bloque div superior se va a utilizar para nuestro icono y el bloque div inferior va a contener nuestro contenido. Empecemos con el ícono. Voy a seleccionar el bloque div icono de servicio, y vamos a ir a nuestro archivo de diseño aquí. Si selecciono este icono, podemos ver que tenemos este círculo y su ancho y altura se establecen en 80 píxeles. Por lo tanto, voy a especificar el ancho y la altura aquí a 80 píxeles así. Entonces voy a modificar el color de su fondo. Aquí, necesitamos usar azul claro neutro. Sigamos adelante y modifiquemos el color del fondo a azul claro neutro, así como así. Entonces tenemos que hacerlo circular. Voy a cambiar el radio al 50 por ciento. Ahí vamos. Nuestro círculo está listo. Pero, ¿qué pasa con el icono? Bueno, para el ícono, tenemos dos opciones; primero, podemos seguir adelante y agregar una imagen aquí, segundo, podemos agregar otro bloque div dentro de este icono de servicio bloque div y poner nuestro icono ahí. La segunda opción es más flexible en cuanto a alineación, pero sigamos adelante y echemos un vistazo a la primera opción. Voy a agregar una imagen aquí usando la sección de imagen de fondo y voy a elegir este primer ícono. Entonces voy a cambiar su posición a centro, y voy a fijar el tiempo para la hora del amanecer. Ahí vamos. Nuestro ícono está listo. Ahora necesitamos mover uno al siguiente bloque div. Pero antes de hacer eso, vamos a dar a este icono de servicio div bloque algunos márgenes. Voy a desplazarme hacia arriba y voy a establecer su margen superior en 40 píxeles. Echemos un vistazo a nuestro archivo de diseño. Sí, el margen superior va a ser 40 píxeles y el margen izquierdo va a ser de 30 píxeles, así que voy a establecer su margen superior a 40, y es margen izquierdo a 30 píxeles. Pero mira, no pude obtener el margen superior de 40 píxeles. ¿Por qué es eso? Eso se debe a que el segundo bloque div, este bloque div de contenido de servicio está ocupando el espacio disponible aquí. Por lo tanto este icono de servicio no puede tener ese margen superior de 40 píxeles, ya que no le dimos una altura específica a esta tarjeta de servicio. Eso está totalmente bien. Ahora pasemos al contenido del servicio, y más adelante obtendremos ese margen superior. ¿ Qué necesitamos dentro de este contenido de servicio? Echemos un vistazo a nuestro archivo de diseño. Dentro de ese bloque div de contenido de servicio, vamos a tener otro bloque div para poner estas capas de textos, y luego vamos a necesitar un botón de enlace, un enlace de texto. Vamos a seguir adelante y crear un bloque div. Si bien se selecciona este contenido de servicio. Voy a golpear “Comando K” o “Control K” y buscar un bloque div. Ahí vamos. Dentro de este contenido de servicio, tenemos un nuevo bloque div. Este nuevo bloque div va a necesitar una clase, así que voy al Selector y vamos a añadir una nueva clase. Voy a escribir subrayado de servicio, texto subrayado, y dentro necesitamos dos bloques de texto diferentes. Si bien está seleccionado, vamos a golpear “Comando K” o “Control K” y buscar bloque de texto. Ahí vamos. Este es el primer bloque de texto, voy a necesitar otro también. Una vez más, voy a seleccionar “Contenido del servicio”, presionar “Comando K” o “Control K” y buscar bloque de texto. De acuerdo, tenemos dos bloques de texto aquí, pero no tienen clases. Entonces voy a seleccionar el primero y le voy a dar una clase. Puedo escribir título de subrayado de servicio. No obstante, como este título y la descripción va a tener el mismo estilo que tenemos aquí para esta tarjeta de proyecto, voy a dar la clase que creamos para este título. Para su descripción, debe ser descripción del proyecto. Vamos a seguir adelante y seleccionar el primer bloque de texto y vamos a escribir título del proyecto , está bien, ahí está y para el siguiente, voy a escribir proyecto y luego buscar descripción. Aquí está. Está bien. Enfriar. Ahora voy a seguir adelante y copiar este texto y pegarlo aquí y de la descripción también lo voy a copiar, vamos a pegarlo aquí mismo. Justo debajo de este texto de servicio, también vamos a necesitar un bloque de enlaces. No obstante, como pueden ver esta descripción del proyecto no está dentro de nuestro bloque div de texto de servicio, voy a arrastrarlo y voy a asegurarme de que esté anidado dentro del bloque div de servicio. Ahora voy a seleccionar el contenido del servicio y voy a buscar un enlace de texto. Ahí vamos. Tenemos nuestro enlace de texto y no necesitamos crear nuevas propiedades para eso porque tenemos nuestro botón de enlace aquí. Voy a elegir eso y le voy a dar la clase de botón de enlace. Ahí vamos. ¿ Se puede ver lo beneficioso que es usar las clases correctamente? Por último, voy a cambiar su texto para aprender más. Está bien genial. Ya casi terminamos. Ahora solo necesitamos cambiar algunas propiedades para hacer más grande nuestra tarjeta y modificar la alineación. En primer lugar, voy a seleccionar este bloque div contenido de servicio y como puede ver, la configuración de visualización está configurada en bloque. Voy a cambiarlo a flexbox y voy a cambiar la dirección a vertical, y voy a cambiar la justificación al espacio entre. Entonces voy a seleccionar el bloque div de tarjeta de servicio y voy a repetir lo mismo. Voy a cambiar la configuración de visualización a flexbox y voy a cambiar la dirección a vertical. Ahora tenemos nuestro margen superior. No obstante, para esta descripción, no tenemos ningún margen inferior. Por lo tanto, voy a seleccionar esta descripción del proyecto y le voy a dar algún margen inferior. Su margen inferior está establecido en 10 píxeles y le voy a dar un margen inferior de 40 píxeles. Modificemos eso. Ahora se ve mucho mejor. Como puedes ver, nuestra tarjeta se ve exactamente igual a la que tenemos aquí en nuestro archivo de diseño, y eso es exactamente lo que estábamos buscando. ¿ Qué debemos hacer ahora? Bueno, la parte dura está hecha ahora necesitamos seleccionar nuestra tarjeta de servicio, necesitamos duplicarla, así que voy a hacer clic aquí y voy a golpear “Duplicar” dos veces. Voy a repetir este proceso dos veces. Ahí vamos. Tenemos tres cartas diferentes. No obstante, se apilan uno encima del otro y tenemos dos opciones; ya sea podemos ir con un flexbox o con rejilla. Ya que voy a mantener nuestro diseño consistente, voy a ir con rejilla porque para esta sección también utilizamos una cuadrícula. Por lo tanto voy a seleccionar el servicio como bloque div grid y voy a cambiar su configuración de visualización a grid. Agradable. ¿Sabes lo que tenemos que hacer? Tenemos que quitar una de estas filas y necesitamos añadir una columna más aquí. Por último, voy a cambiar la brecha de 16 píxeles a 40 píxeles, así como así. Está bien, genial. Nuestras tarjetas están casi listas. Lo único que necesito hacer es modificar estos iconos y los contenidos. Déjame seguir adelante y modificar rápidamente este icono. Si selecciono este icono de servicio div block, puedo dirigirme a la sección de fondo y puedo elegir otra imagen. Pero algo sucede en cuanto cambié esta imagen. Dado que no agregué una clase combo a esta clase base, si cambio este icono, todos estos iconos se verán afectados. Déjame mostrarte a lo que me refiero. Ahí vamos. Esto no es lo que queremos. Por lo tanto, lo que voy a hacer, es ir adelante y agregar una clase combo a este icono de servicio bloque div. Voy a escribir 2, y para este, voy a escribir 3, y para el primero vamos a escribir 1. A pesar de que la primera no es necesaria, le voy a dar una clase combo que podría organizar mis elementos fácilmente. Está bien. Ahora puedo seleccionar este icono de servicio, y luego si cambio su icono, los otros iconos no se verán afectados. Entonces voy a elegir la segunda, linda, y para la tercera, voy a hacer lo mismo y elegamos ésta. Está bien. Nuestros iconos están listos, ahora voy a seguir adelante y cambiar el título y la descripción. Permítanme copiar y pegar rápidamente estos textos aquí. Muy bien chicos, eso es todo para este video, nuestra sección de servicios también está lista. Espero que lo hayas disfrutado y te veré en el siguiente. 49. Sección CTA: Oye, en este video vamos a crear esta sección de CTA. CTA stands que son Called To Action, y generalmente agarra la dirección de correo electrónico o nombre y dirección de correo electrónico del usuario para enviarle algunos archivos o digamos alguna noticia o cualquier información que el usuario esté buscando. Esta sección de llamada a la acción tiene un formulario. Como se puede ver, estos formularios tienen un campo de texto y también el botón de suscripción. Veamos cómo debemos estructurar eso. En primer lugar, tenemos una sección, necesito modificar su nombre a sección CTA, y esta sección, al igual que nuestra sección testimonial, tiene un ancho específico. No ocupa todo el ancho de nuestra ventana de ventana gráfica, por lo tanto, vamos a establecer un ancho específico para esos 13 y 20 píxeles, como se puede ver aquí. Requiere un color de fondo, así que vamos a usar el color secundario para el fondo aquí. Entonces una vez creada nuestra sección, necesitamos un contenedor como de costumbre, y finalmente, dentro de este contenedor, vamos a tener un encabezado, un bloque de texto, y también un bloque de formulario. Este bloque de formulario va a tener un contenedor de campo de texto y un botón. Nada complicado. Simplemente necesitamos apegarnos a las reglas y solo necesitamos usar flexbox para alinear estos elementos. ¿ Estás listo? Empecemos. En primer lugar, voy a seguir adelante y seleccionar aquí mi cuerpo, y luego voy a buscar sección así. Déjenme darle una clase. Yo le voy a dar la clase de sección aquí. También le voy a dar la clase combo, llamémoslo CTA. Como pueden ver, no podemos ver la sección porque no hay nada dentro de nuestra sección. En primer lugar, voy a seguir adelante y darle un ancho máximo de 1,320 píxeles y también una altura específica de 500 píxeles. Si le echo un vistazo a mi diseño, se puede ver que su altura es de 500 píxeles. Podría ponerlo a auto también, pero prefiero tener una altura específica aquí. Ahora necesitamos centrar nuestra sección. ¿ Cómo podemos hacer eso? Tienes razón. Puedo dirigirme a esta sección de espaciado y puedo hacer clic en este botón para centrar el elemento horizontalmente así como así. Lo siguiente que tenemos que hacer es cambiar el color del fondo. Si me dirijo a la sección de fondo y hago clic en este color aquí usando este selector de color, puedo usar una de mis muestras. Voy a usar la secundaria. Nuestra sección está lista. Ahora adentro, como de costumbre, vamos a necesitar un contenedor. Si bien esta sección está seleccionada, voy a presionar tecla de comando o tecla de control. Busquemos un bloque div. Este bloque div no tiene ninguna clase así que vamos a seguir adelante y darle la clase contenedor. Agradable. Nuestro contenedor está listo también. ¿ Qué necesitamos dentro de este contenedor? Vamos a necesitar un encabezado, un bloque de texto y un bloque de formulario. Primero voy a darle a este contenedor un CTA clase combo, y luego voy a presionar tecla Command o tecla Control y buscar rumbo. Cambiemos el tiempo de rumbo a h3, y también le voy a dar una clase. Aquí voy a escribir subrayado CTA, encabezado de subrayado, y vamos a modificar algunas de sus propiedades topográficas. El peso va a ser audaz. No obstante, el tamaño va a ser de 40 píxeles. El color va a ser neutro oscuro también. Ahora voy a seguir adelante y copiar este texto desde aquí y pegarlo ahí mismo. Nuestro rumbo está listo. Ahora necesitamos un bloque de texto. Seleccionemos nuestro contenedor usando el Búsqueda rápida. Voy a seguir adelante y buscar un bloque de texto, y le voy a dar una clase. Escribamos subrayado CTA, subrayado, subtítulo, y voy a modificar algunas de sus propiedades topográficas. Lo único que tenemos que hacer aquí es cambiar el tamaño aquí a 17 píxeles. No necesitamos tocar nada más. Genial. Ahora déjame seguir adelante y copiar este texto. Deja que te ayudemos. Justo así. Nuestras capas de texto están listas. Ahora necesitamos un bloque de formulario. Déjame seleccionar este contenedor. Puedes ir a la sección Agregar y simplemente arrastrar y soltar un bloque de formulario aquí, o bien está seleccionado contenedor inalámbrico, puedes presionar la tecla Command o la tecla Control para abrir el hallazgo rápido y buscar un bloque de formulario. Tenemos nuestro bloque de formularios. No obstante, tenemos dos campos de texto, tenemos dos etiquetas de campos de texto, y también tenemos un botón aquí. Pero para esta sección sólo necesitamos un campo de texto, no necesitamos ninguna etiqueta y necesitamos modificar un poco el botón. Sigamos adelante y seleccionemos la etiqueta de campo del navegador y eliminemos eso, pulsa la tecla Retroceso o Eliminar en tu teclado. Yo también voy a quitar el campo de texto. Ahora voy a quitar esta etiqueta de campo. No necesitamos ninguna etiqueta de campo. Ahora mismo tengo un campo de texto y un botón Enviar. En primer lugar, voy a seleccionar este bloque div de formulario, y como pueden ver, su configuración de visualización está configurada en bloque. Voy a cambiarlo por picos de vuelo, y ahora la dirección está puesta en horizontal, eso es exactamente lo que necesitamos. Tenemos el diseño que buscamos. No obstante, si echas un vistazo al archivo de diseño, puedes ver que tenemos este texto de marcador de posición y también este icono. Vamos a seguir adelante y modificar un poco nuestro campo de texto. Este campo de texto tiene un ancho y alto específicos. El ancho es de 393 píxeles y la altura es de 80 píxeles. Por lo tanto, voy a seleccionar este campo de texto y voy a cambiar su ancho a un 393 píxeles y su altura a 80 píxeles. Pero como puede ver, este campo de texto por defecto tiene algunos márgenes inferiores. Voy a seguir adelante y quitarle eso. Establezcamos el margen inferior en 0. Ahora este campo de texto está alineado con este botón. Pero ¿qué pasa con el texto de Marcador de Posición? Bueno, si recuerdas, si hago doble clic en este campo de texto aquí, puedo especificar el texto de marcador de posición. Déjame escribir, ingresa tu correo electrónico y el tipo de texto va a ser correo electrónico y se va a requerir. El nombre va a ser correo electrónico también. Pero, ¿cómo podemos agregar un icono aquí? Bueno, ya que estamos usando un elemento de campo de texto, no podemos simplemente seguir adelante y agregar un icono. Por lo tanto, necesitamos ser creativos y necesitamos usar lo que hemos aprendido hasta ahora para agregar un icono aquí. Lo que propongo es esto. En primer lugar, voy a seguir adelante y añadir algo más de relleno a la izquierda a este campo de texto. Voy a cambiar su relleno a 70 píxeles, y luego voy a modificar su color. Como se puede ver aquí, el color de esta capa de texto es neutro oscuro. ¿ Recuerdas cómo podemos modificar las propiedades CSS de este impuesto de los tenedores de lugares? Sí, tienes razón. Tenemos que seleccionar nuestro campo de texto, y luego si nos dirigimos al selector, podemos ir al estado de tenedor del lugar. A partir de aquí, sólo puedo ajustar el color. Como puedes ver, dice que el color del texto ya está configurado en oscuro neutro, pero no lo es. Es sólo un bicho molesto. Si solo hago clic en él y elijo este color una vez más, ahí vamos. Ahora el color se ha aplicado correctamente. El color está bien ahora, pero necesitamos un icono. Por lo tanto, voy a crear un bloque div, y voy a poner estos campo de texto y un nuevo bloque div dentro de eso para alinear todo perfectamente. En primer lugar, mientras se selecciona esta forma, voy a presionar Tecla de comando o Tecla de control, y busquemos un bloque div. Entonces le voy a dar una clase. Vamos a llamarlo CTA, subrayado, subrayado, Campo de texto, envoltura de guion bajo. Entonces voy a arrastrar este campo de texto y soltarlo dentro este CTA_ TextField_Wrapper que acabamos de crear y voy a mover este contenedor hacia arriba, solo reordenarlo en el navegador. Ahora bien, mientras se selecciona este nuevo bloque Div, esta envoltura, voy a seguir adelante y añadir un nuevo bloque Div para nuestro ícono. Entonces busquemos un bloque Div, genial, y este bloque Div está dentro de esta envoltura. Entonces déjame seleccionar este bloque Div y le voy a dar una clase. Voy a escribir TextField_ Icon, y este icono debe tener un ancho y alto específicos. Entonces si voy a mi archivo de diseño y selecciono este “Icono”, se puede ver que su ancho y alto se establecen en 30 píxeles. Entonces le voy a dar el ancho y la altura específicos. Voy a escribir 30 pixeles. Ahí vamos, y como saben, tenemos que dirigirnos a la sección de fondo y necesitamos añadir aquí nuestro icono. Entonces déjame buscar el icono del correo, está bien, bonito. Nuestro ícono está aquí. Todo se ve muy bien excepto su posición. Entonces, ¿cómo podemos posicionar este ícono aquí mismo? Bueno, ¿recuerdas cuando hablamos de la propiedad de posición aquí, voy a establecer la posición de este bloque Div en absoluta, así como así y luego voy a seleccionar a su padre, que es este CTA_TextField_Wrapper y estoy va a fijar su posición a relativa. ¿ De acuerdo? Ahora la posición de este icono de campo de texto Bloque Div es relativa a su padre. Como pueden ver aquí, tenemos CTA_TextField_Wrapper y solo puedo reposicionarlo en la parte superior izquierda. Por lo que sólo voy a aumentar la posición superior a alrededor del 30 por ciento. Sólo tenemos que hacer un globo ocular eso, y luego voy a modificar la posición de la izquierda a alrededor del ocho por ciento. Está bien, Bonito. Yo sólo puedo moverlo un poco hacia abajo. Puedo aumentar el margen superior a, digamos 32 por ciento. Muy bien, nuestro campo de texto está casi listo. Pero, ¿qué pasa con su color? Ahora mismo por defecto, su color de fondo es blanco, pero nuestro campo de texto no es blanco. Nuestro campo de texto está usando el color de luz neutro. Entonces voy a seleccionar este campo de texto y voy a modificar su color a luz neutra, y ahora podemos pasar a la siguiente parte que es botón. Va a ser tan sencillo porque ya creamos nuestro botón principal, si recuerdas, para la sección de héroes y para la de navegación. Entonces lo que voy a hacer es seleccionar este botón aquí mismo, y le voy a dar una clase, Botón primario. Ahí vamos. Tenemos nuestra ciencia, lo único que tenemos que hacer es ajustar un poco su relleno. De acuerdo, entonces primero le voy a dar una clase combo, esta manera puedo asegurarme de que los cambios que hago aquí no se apliquen a otros botones aquí y luego voy a ajustar su relleno. Entonces déjame desplazarme hacia arriba. Como puedes ver por defecto, tiene un relleno izquierdo y derecho de 30 píxeles. Echemos un vistazo a nuestro archivo de diseño. Si selecciono esta capa de texto “Suscribirse”, se puede ver que es el relleno izquierdo y derecho son aproximadamente 60 píxeles. Entonces le voy a dar un relleno de 60 pixeles izquierdo y derecho. Si mantengo pulsada la tecla Opción o la tecla Alt en mi teclado, solo puedo modificar el relleno izquierdo y derecho simultáneamente, así como así, el relleno superior e inferior se ve bien. Ahora necesito un poco de margen izquierdo también. Aquí voy a necesitar un margen izquierdo de 20 píxeles. Entonces mientras este botón está seleccionado, voy a dar un margen izquierdo de 20 píxeles. Muy bien, voy a seleccionar este “Formulario” y como pueden ver, este Formulario ocupa todo el ancho de su padre, que es este Bloque de Formulario. En primer lugar, voy a seleccionar este “Formulario” y voy a cambiar la justificación a centro y luego voy a seleccionar este “ Bloque de Formulario ” y voy a darle una clase, Formulario Bloque. Déjame cambiar su configuración de visualización a Flexbox y voy a cambiar la justificación a centro. Ahora voy a seleccionar mi “Contenedor”, como pueden ver, la configuración de visualización está configurada en bloque, voy a cambiarlo a Flexbox y dejarme cambiar la dirección a vertical. Voy a cambiar la justificación para centrar también pero como pueden ver, no ocupa toda la altura de este apartado. ¿ Por qué? Porque su altura está configurada en auto. Por lo tanto, su altura se determina en función de la altura de sus hijos. No ocupan tanto espacio en su interior. Entonces lo que voy a hacer es seleccionar este “Contenedor” y establecer su altura al 100 por ciento. Ahora ocupa toda la altura de esta sección, y luego voy a cambiar la alineación a centro también. Muy bien, ahora voy a seleccionar mi encabezado, y este rubro requiere algún margen inferior. Entonces déjame ir a mi archivo Design. Si selecciono este encabezado, puedo ver que necesito obtener 20 píxeles de margen inferior. Entonces mientras está seleccionado, voy a anular su margen inferior a 20 píxeles, y también voy a hacer lo mismo para este bloque de formulario. Si selecciono este Bloque de Formulario, se puede ver que no tengo ningún margen superior. Voy a ir a mi archivo de Diseño y voy a seleccionar este campo de texto. Se puede ver que necesito obtener un margen superior de 50 píxeles. Entonces le voy a dar 50 píxeles aquí. Está bien. Ahora déjame cambiar el texto de este botón de Enviar a Suscribirse, y ahí vamos. Nuestra sección CTA está lista también. Pero ahora me gustaría que prestara atención a los demás elementos dentro de este bloque de formulario, porque aparte de este campo de texto y botón, tenemos dos bloques Div más. Ya hablamos de ellos en nuestros videos anteriores, pero solo quiero mencionarlos una vez más por si los olvidaste. Entonces aquí tenemos un bloque Div Mensaje de Éxito que no es visible. El motivo es por defecto, su configuración de visualización está establecida en ninguno. Tenemos este Mensaje de Error también. Por defecto, su configuración de visualización está establecida en ninguno y no podemos modificar eso. ¿ Por qué? Porque una vez que el usuario golpee este botón Suscribirse, recibirá ya sea un mensaje de éxito o un mensaje de error. Si todo va bien, no hay problema de conexión a internet, él o ella verá el mensaje de éxito. De lo contrario, verán el mensaje de error. Pero ¿podemos simplemente cambiar el diseño de estos mensajes? Por supuesto que podemos. Bueno en ese caso, necesitamos seleccionar nuestro Bloque de Formulario entonces si hago clic en el icono de configuración aquí, se puede ver que dice Mostrar Estado. Normal, éxito, error. Si voy al éxito aquí, puedo empezar a modificar su apariencia. Si voy al error, también puedo cambiar su apariencia. Entonces, por ejemplo aquí, cuando voy al error, se puede ver que es alineación está mal. Entonces sigamos adelante y arreglemos eso. Si bien estamos en el estado de error, voy a seguir adelante y seleccionar este Bloque de Formulario. Este bloque de formulario contiene este bloque Form Div, el mensaje de éxito y el mensaje de error y su dirección de diseño, como puede ver, se establece en horizontal. Cuando estamos en el estado normal, no hace ninguna diferencia pero cuando estamos en el estado de error, hace una diferencia. Voy a cambiar la dirección a vertical, y ahora se ve mucho mejor. Entonces si solo voy al estado normal, se ve bien. Si voy al éxito, se ve genial, si voy al error, está bien. Por supuesto, puedes seguir adelante y modificar el contenido aquí, pero este no es nuestro objetivo ahora. Muy bien chicos, eso es todo por este video. Espero que lo hayan disfrutado. Te veré en el siguiente video. 50. Footer: En este video, vamos a crear este pie de página en la parte inferior de nuestra página de inicio. Este pie de página se va a colocar en todas las páginas de nuestro sitio web. Como puedes ver aquí en la página Proyecto, tenemos el pie de página también, en la página Contacto también. ¿ Cómo vamos a construir eso? Analicemos y veamos cómo está estructurado. Como pueden ver, tenemos un apartado que va a ocupar todo el ancho de nuestro informe. Como de costumbre, necesitamos crear una sección y luego dentro, vamos a necesitar un contenedor. Ahí vamos. Dentro de este contenedor, tendremos dos bloques div. Uno para el contenido del lado izquierdo que va a contener el logotipo y la dirección y otro para los enlaces del lado derecho. De hecho, para los enlaces, creo que sería mucho mejor crear una cuadrícula porque aquí tenemos un diseño bidimensional. Tendría mucho más sentido crear una cuadrícula para estos enlaces. Sin más preámbulos, empecemos. En primer lugar, voy a seleccionar mi cuerpo y voy a golpear Comando K o Control K. Busquemos sección. Entonces voy a dar a esta sección una clase como de costumbre. Agradable y no podemos ver nada porque no hay nada dentro. Entonces mientras se selecciona esta sección, busquemos un bloque div. Voy a agregar un bloque div dentro. Démosle la clase de contenedor porque va a ser nuestro contenedor. Agradable. Nuestra sección está lista, nuestro contenedor interior está listo y mientras este contenedor está seleccionado, voy a dar la clase combo de pie de página también. Ahí vamos. Como mencioné antes, para este pie de página, vamos a crear un bloque div en el lado izquierdo y una cuadrícula en el lado derecho. En total, vamos a crear dos esferas de bloques div. Si bien este contenedor está seleccionado, busquemos el bloque div. Voy a agregar otro bloque div así que asegúrate de que tu contenedor esté seleccionado. Después usando el Búsqueda rápida, puedes agregar un bloque div. Ahí vamos. Ahora tenemos dos bloques div. Voy a seleccionar el top y le voy a dar una clase. Escribamos Footer__Content. Voy a seleccionar el segundo y le voy a dar una clase. Escribamos Footer__Links. Enfriar. Entonces voy a seleccionar este contenedor y voy a cambiar la configuración de visualización de bloque a Flexbox, ¿por qué? Porque voy a alinear estos dos bloques div horizontalmente, no verticalmente. Por lo tanto, voy a cambiarlo a Flexbox. Ahí vamos. El sentido se establece en horizontal. Lo único que necesito hacer aquí es cambiar el justificante al espacio entre, así como así, porque queremos que estos bloques div toquen los bordes de este contenedor. Echemos un vistazo a nuestro archivo de diseño. Si selecciono este grupo aquí del lado izquierdo, se puede ver que este cuadro de contenido, este bloque div, va a tener un ancho específico de 260 píxeles. Lo que voy a hacer es seleccionar este contenido de pie de página de bloque div particular, y le voy a dar un ancho máximo de 260 píxeles. Entonces dentro, voy a añadir un bloque div más para nuestro logo y un bloque de texto para la dirección. Si bien está seleccionado, vamos a golpear Command K o Control K y buscar el bloque div. Voy a darle una clase a este bloque div. Escribamos Footer__Content__Logo. Entonces si me dirijo a la sección de fondo aquí, puedo agregar una imagen. De los activos, voy a elegir este logo de círculo y voy a cambiar el tamaño a contener. Permítanme reposicionar eso para centrar y no azulejemos. Déjame echar un vistazo a mi diseño. Si selecciono este logotipo, su ancho es de aproximadamente 100 píxeles y su altura es de 30 píxeles. Si bien se selecciona este bloque div logo de contenido de pie de página, voy a establecer un ancho específico, 100 píxeles, y su altura va a ser de 30 píxeles, pero ¿qué pasa con la dirección? Voy a seleccionar este bloque div de contenido de pie de página y voy a agregar un bloque de texto aquí así como así. Entonces voy a necesitar darle una clase. Vamos a llamarlo Footer__Content__Dirección. Sigamos adelante y modifiquemos algunas de sus propiedades tipografías. El peso se ve bien. Voy a cambiar el tamaño a 17 píxeles. Entonces voy a cambiar el color a medio neutro y la altura de la línea al 150 por ciento. Por último, voy a copiar esta dirección y vamos a pegarla aquí mismo. Veamos qué tenemos aquí. Si selecciono este contenido de pie de página, se puede ver que la configuración de visualización está configurada en bloque y ahora se ve bien. No obstante, más adelante cuando queramos hacer que nuestro sitio web respondiera, sería problemático porque, por ejemplo, en el retrato móvil o el paisaje móvil, podríamos necesitar cambiar aquí la alineación de estos dos elementos. Por lo tanto, ahora lo voy a cambiar a Flexbox y voy a cambiar la dirección a vertical. Voy a seleccionar este logo y tenemos que darle algún margen inferior. Permítanme seleccionar este logotipo aquí y su margen inferior va a ser de 30 píxeles. Por lo tanto, aquí le voy a dar un margen inferior de 30 píxeles. Agradable. Nuestro contenido de pie de página está listo. Ahora es el momento de pasar a la siguiente parte, que son los enlaces de pie de página. Si selecciono estos enlaces de pie de página y golpeo Comando K o Control, puedo buscar enlace de texto. Entonces puedo darle una clase. Escribamos Footer__Link y voy a modificar sus propiedades tipográficas. En primer lugar, permítanme aumentar su tamaño de fuente a 17 píxeles y su color va a ser medio neutro. Por último, voy a poner la declaración en ninguna. Este es básicamente nuestro estilo aquí. Entonces voy a seguir adelante y copiar este texto aquí. El primero va a ser equipo. Agradable. Ahora lo voy a duplicar cinco veces para conseguir seis enlaces diferentes. Solo puedo copiarlo, Comando C o Control C y pegarlo cinco veces usando Comando V o Control V, así como así. Tengo seis enlaces diferentes aquí. Ahora solo voy a seguir adelante y copiar y pegar estos nombres uno por uno. Nuestros seis enlaces están listos. Pero como la configuración de visualización de este enlace de pie de página está configurada para bloquear, puede ver que están sentados uno al lado del otro y esto no es lo que queremos. Como mencioné antes, lo vamos a cambiar a una grilla. Vamos a golpear la grilla. Vamos a tener tres columnas y dos filas. Por lo tanto, voy a añadir una columna más aquí. Agradable. Voy a pegarle a Done. Nuestra grilla está lista también. No obstante, como pueden ver, no tenemos ningún margen inferior. Ahora nuestro contenedor está tocando el borde inferior de nuestra pantalla. No es lo que queremos. Sigamos adelante y seleccionemos este contenedor aquí en nuestro archivo de diseño. Voy a revisar el margen inferior. Se establece en 100 píxeles. ¿Qué debemos hacer? Si sigo adelante y selecciono este contenedor e intento agregar algunos márgenes inferiores, no funciona. Por lo tanto, voy a seleccionar nuestra sección y en su lugar le voy a dar un relleno de fondo. Aquí, voy a establecer el relleno inferior en 100 píxeles. Ahí vamos. Tenemos lo que queríamos, pero mira lo que pasa. Como puedes ver, en cuanto agregué algún relleno a esta sección, también se ha cambiado el relleno de esta sección. ¿Por qué es eso? El motivo es que no agregamos una clase combo a esta sección. Como puedes ver, no tenemos ninguna clase combo y ese relleno inferior se ha agregado a todas las secciones. Todas las secciones tienen este relleno extra inferior y no es lo que queremos. ¿ Cómo podemos arreglar eso? Bueno, voy a golpear Command Z o Control Z para quitar este relleno, mientras esta sección está seleccionada, mientras nuestra sección de pie de página está seleccionada, le voy a dar una clase combo llamada pie de página. Ahora puedo agregar fácilmente ese relleno extra sin afectar a otras secciones. Voy a ponerlo en 100 pixeles. Ahí vamos. Ahora se ve increíble. Chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veré en el siguiente. 51. CMS y contenido dinámico: Oye, en este video vamos a hablar de CMS y Contenido Dinámico. Cuando se trata de desarrollo web, tenemos dos tipos de páginas web, tenemos páginas estáticas y dinámicas. ¿ Cuál es la diferencia entre las páginas estáticas y dinámicas? Bueno, estático significa fijo, y dinámico significa algo que es más funcional y cambia en función de la acción del usuario. Si recuerdas, ya te dije que vamos a crear dos páginas estáticas y una página dinámica para estos proyectos. Déjame decirte lo que significa. Aquí está nuestra página de inicio y creamos todos los elementos en Webflow. Pero esta es una página estática en este momento. ¿ Por qué? Porque el contenido de esta página no va a cambiar con frecuencia. Se va a arreglar la imagen. Estos logotipos se van a arreglar. Este testimonial se va a arreglar y demás, así que por eso es una página estática. Pero a veces es posible que necesites crear algunas páginas dinámicas. Bueno, permítanme darles un buen ejemplo. Supongamos que quieres crear un blog. Para un blog, por lo general tienes cientos o miles de entradas de blog diferentes. Por lo tanto, es necesario crear páginas dinámicas. Bueno, las páginas dinámicas tienen contenido dinámico, significa que podemos crear la página una vez, y luego simplemente podemos modificar los contenidos una y otra vez y otra vez, dependiendo de las acciones del usuario. Para un blog, podemos crear una página de entrada de blog una vez con un diseño específico y luego simplemente modificar el contenido una y otra vez y otra vez, por eso necesitamos usar un CMS. En este proyecto, vamos a crear una página dinámica para nuestros proyectos. Como puedes ver aquí en nuestra página de inicio, tenemos tres proyectos diferentes y dice proyectos recientes. Pero ¿y si esta agencia crea más proyectos en el futuro y quieren presentarlos aquí, deberían contactarte como desarrollador web o diseñador web y pedirte que modifiques el contenido? Bueno, la respuesta es no, porque esta no es una manera eficiente. En este caso, se puede crear una página dinámica, como se puede ver aquí, tenemos esta página de proyecto y en ella se muestran los detalles de cada proyecto. Tenemos el subtítulo, tenemos el título, tenemos la fecha de finalización. Tenemos alguna información sobre el proyecto, y luego tenemos esta sección de otros proyectos. Podría ser muy difícil crear algunas páginas estáticas si quieres cambiar los contenidos con frecuencia. ¿ Cuándo se debe utilizar una página estática y cuándo se debe utilizar una página dinámica? Bueno, si quieres crear solo una página de aterrizaje con alguna información o contenido, puedes ir con páginas estáticas porque son mucho más fáciles de crear y no consumen mucho tiempo. No obstante, si usted o su cliente quieren modificar el contenido con frecuencia, o digamos, agregar algún contenido nuevo al sitio web, es mejor crear páginas dinámicas. Aquí para este proyecto, vamos a crear una página dinámica. Como se puede ver aquí, la página del proyecto y estos proyectos se van a cambiar dinámicamente. Posteriormente si el cliente quiere agregar un proyecto más, el proyecto se agregará automáticamente a esta sección de proyectos recientes. No es necesario seguir adelante y crear manualmente una página de proyecto separada para eso, porque creamos una página de proyecto una vez y si el cliente agrega más contenido, el contenido de esta página se cambiará en consecuencia. ¿ Qué necesitamos para crear páginas dinámicas? Bueno, para crear páginas dinámicas, necesitamos contenido dinámico y necesitamos almacenar nuestro contenido en algún lugar. ¿ Cómo podemos hacer eso? Bueno, podemos usar Workflow, CMS. Déjame ir a Workflow, y si voy a la sección CMS aquí, podemos crear una colección CMS. Bueno, ¿qué significa CMS? CMS es sinónimo de Content Management System y te permite almacenar algún contenido, entonces tu sitio web puede hacer referencia a estos contenidos una y otra vez y otra vez. Una vez que realices algunos cambios en estos contenidos, todas las páginas dinámicas se actualizarán de inmediato. Es tan beneficioso usar las colecciones CMS si quieres actualizar el contenido con frecuencia. El primero que tenemos que hacer es crear una colección CMS. Para ello, hay que hacer click en este icono azul en la esquina superior derecha, ahí vamos. Aquí podemos crear una nueva colección. A primera vista, puede parecer complicado, pero no te preocupes, es muy sencillo. Justo en la parte superior, tenemos algunas plantillas de colección. Tenemos entradas de blog, autores , categorías, proyectos, clientes, etc. Pero vamos a crear una colección desde cero porque te voy a mostrar cómo puedes crear una colección paso a paso. Una colección nos permite crear una estructura para nuestro contenido. Si tenemos algunos proyectos, digamos aquí, cada proyecto tiene algún contenido. Tenemos una imagen, tenemos el nombre de este proyecto, tenemos el subtítulo. Entonces en la página del proyecto aquí, tenemos la fecha de finalización y aquí tenemos esta información. Estos van a ser nuestros campos de acopio. Cada colección tiene algunos campos, pero primero, necesitamos un nombre de colección. Llamémoslo proyectos porque aquí vamos a crear una conexión para nuestros proyectos. Webflow crea automáticamente esta URL de colección para nosotros. No hace falta que te preocupes por eso por ahora. Hablaremos de ello más tarde. Como se puede ver, dice Página del proyecto. Una vez que creas una colección, Webflow crea automáticamente una página separada para tu colección, una página para nuestro proyecto aquí. Vayamos a los campos de recolección, aquí es donde necesitamos agregar algunos campos. ¿ Qué necesitamos para nuestro proyecto? Bueno, obviamente cada proyecto tiene un nombre, y recuerda que cada campo tiene un tipo específico, como puedes ver aquí, dice texto sin formato, eso es porque tenemos un nombre. Entonces tenemos la babosa, esta es solo la URL que Webflow crea automáticamente para nosotros, por lo que no necesitamos cambiar eso. Entonces podemos agregar algunos campos personalizados, si hago clic en este Agregar Nuevo Campo aquí, aquí tenemos diferentes tipos, tenemos textos planos. En cuanto pase el cursor sobre estos tipos de campos, se puede ver en el lado derecho, obtenemos algo de información. Puedes seguir adelante y leerlos uno por uno si quieres conocer más sobre ellos. Pero déjame seguir adelante y rápidamente te los explique. Bueno, el texto sin formato es sólo un texto simple o contenido de texto básico. Entonces tenemos texto rico, bueno, el texto rico es para contenido de forma larga. Digamos que quieres tener un párrafo, luego un encabezado, luego un video, o una imagen, en ese caso, puedes usar un texto enriquecido. Entonces tenemos la imagen. Bueno, puedes usar eso para una imagen. Entonces tenemos multi-imagen, si tienes más imágenes, puedes usar esta multi-imagen. Después tenemos video link, link, email, número telefónico, fecha, switch, color, opción, archivo, y referencia y multi-referencia. Estas dos últimas opciones están avanzadas. No vamos a hablar de ellos ahora, pero por ahora, solo necesitamos seguir adelante y crear nuestros campos personalizados usando estos tipos simples. Aquí tenemos el nombre. ¿ Qué más necesitamos? Déjame seguir adelante y echa un vistazo a mi archivo de diseño aquí. Aquí tenemos una imagen, así que obviamente necesitamos una imagen. Sigamos adelante y elijamos Imagen. Entonces necesitamos una etiqueta. Voy a escribir Project Image. Podemos añadir un texto de Ayuda aquí o no. Si añadimos este texto de Ayuda más adelante, si un colaborador quiere modificar el contenido, él o ella sabrá de qué se trata este campo, pero no te preocupes ahora. Entonces podemos marcar esta casilla de verificación, dice que se requiere este campo. Eso voy a comprobar porque no podemos crear un proyecto sin una imagen de proyecto, así que lo voy a revisar, luego guardar campo, ahí vamos. Nuestra imagen del proyecto está lista. ¿ Cuál sería el siguiente campo? Déjame seguir adelante y comprobarlo. Aquí tenemos este subtítulo y va a ser nuestro tipo de proyecto. Si voy a la página del proyecto aquí, puedes ver que justo bajo el nombre del proyecto tenemos el tipo de proyecto, IU Design y App Development. Por lo tanto, aquí voy a seguir adelante y añadir un nuevo campo. Este nuevo campo va a ser opción porque voy a crear algunas opciones y más tarde cuando quiera crear algunos ítems de colección, puedo elegir entre esas opciones. Déjame mostrarte cómo funciona. Esta agencia de diseño cuenta con algunos servicios específicos. Por ejemplo, diseño de interfaz de usuario y desarrollo de aplicaciones, desarrollo web, diseño de experiencia de usuario. Ya sabemos de los servicios, por eso podemos crear algunas opciones por defecto, entonces cuando queremos crear algunos proyectos o digamos algunos ítems de colección, solo podemos elegir entre esas opciones. Déjame seguir adelante y elegir opción aquí. Entonces le voy a dar una etiqueta, vamos a escribir, Tipo de proyecto. Aquí, usando este botón verde, puedo agregar algunas opciones. Permítanme agregar algunas opciones aquí. Voy a escribir diseño de interfaz de usuario y desarrollo de aplicaciones, voy a presionar Enter para guardar. Entonces voy a crear otra opción. Escribamos desarrollo web. Voy a presionar Enter, voy a añadir otra opción. Escribamos Diseño de experiencia de usuario. Presiona “Enter”. El siguiente va a ser diseño de interfaz de usuario, y el siguiente va a ser solo desarrollo de aplicaciones. El último va a ser el diseño UX de la UI. Muy bien, nuestras opciones están listas. Este campo también es obligatorio porque no podemos crear un elemento de colección sin elegir el tipo de proyecto, por lo que se va a requerir. Voy a golpear “Save Field”. Necesitamos dos campos más. Necesitamos la fecha de finalización. Como puedes ver aquí en la página del proyecto, tenemos esta fecha de finalización. Déjame seguir adelante y crear un nuevo campo y esta vez voy a elegir fecha y hora. Voy a escribir fecha de finalización, y aquí tenemos dos casillas de verificación. El primero dice Incluir recolector de tiempo. Yo voy a comprobar eso. Como puedes ver, cuando creo estos campos en el lado derecho, puedo previsualizar mis campos personalizados. Aquí tengo imagen de proyecto, tengo tipo de proyecto, y tengo fecha de finalización y se va a requerir. Entonces voy a pegarle a “Guardar campo”. último pero no menos importante, voy a crear un campo para el detalle del proyecto aquí, para estos párrafos. Déjame seguir adelante y crear un nuevo campo. Esta vez voy a elegir un texto Rich. ¿ Por qué? Porque más adelante el cliente puede agregar fácilmente algunas imágenes o videos sin mi ayuda. Va a ser tan útil. Voy a elegir “Texto rico” y déjame llamarlo Detalles del proyecto. Aquí podemos especificar algún recuento mínimo de caracteres o máximo de caracteres. Es opcional. Voy a dejarlo. Voy a marcar esta casilla de verificación y golpear “Guardar campo”. Nuestros campos están listos. Tenemos el Nombre, tenemos el Slug. Estas son la información básica y luego tenemos algunos campos personalizados. Contamos con Imagen de proyecto, Tipo de proyecto, Fecha de finalización, Detalles del proyecto. Una vez que agregamos nuestros campos, del lado derecho podemos previsualizar nuestros campos. Aquí tenemos Nombre, Slug, estas son la información básica. Después tenemos Campos personalizados, Imagen de proyecto, Tipo de proyecto. Contamos con Fecha de Finalización y Detalles del Proyecto. Si todo se ve bien, puedes pulsar el botón “Crear colección” y ahí vamos. Hemos creado con éxito nuestra colección CMS y en el lado izquierdo puedes verlo dice Proyectos. Esta es nuestra colección CMS. Si hago clic en este Proyectos, del lado derecho, puedo crear algunos ítems de colección. Así funciona el CMS. Es así como podemos crear una estructura para nuestro contenido. Creamos algunas colecciones con algunos campos personalizados, luego creamos algunos elementos para esa colección en particular. Posteriormente, solo podemos usar estas colecciones y artículos en nuestro proyecto y diseño en torno a nuestros contenidos dinámicos, digamos. Aquí tenemos diferentes opciones. Podemos o bien agregar algunos artículos ficticios. Si hago clic en Agregar cinco ítems, Webflow crea algunos ítems aleatorios con contenido aleatorio para mí. Es una buena opción sobre todo si no tienes el contenido o el contenido aún no está listo. No obstante, ya que tenemos el contenido, voy a seguir adelante y golpear el botón “Nuevo Proyecto” aquí. ¿ Por qué dice nuevo proyecto? ¿ Cómo sabe que esto va a ser un proyecto? Porque nombramos a nuestra colección Proyectos y Webflow automáticamente usa ese nombre y lo hacen singular aquí, y dice Nuevo Proyecto. Si creo una nueva colección y la llamo miembros, aquí verán nuevo miembro. Voy a pegarle a “Nuevo Proyecto” y ahí vamos. Tenemos nuestros campos aquí. En primer lugar, necesitamos especificar el nombre. Voy a escribir Simplificar. Este es nuestro primer proyecto ficticio, y como puedes ver, esta babosa se ha creado automáticamente. Entonces aquí necesitamos subir nuestra imagen de proyecto. Si hago clic en él, puedo elegir la imagen desde mi computadora. Voy a elegir la primera imagen. Tienes estas imágenes en la carpeta del activo que has descargado antes. Ahora, voy a seleccionar el tipo de proyecto usando estas opciones. Como puedes ver, estas son las opciones que ya creamos. Voy a elegir “IU design & and App development”, y luego voy a necesitar una fecha de finalización. Aquí usando este recolector de fechas, simplemente puedo elegir mi fecha y hora. Déjame seguir adelante y elegir una fecha específica. Voy a elegir el 1 de junio y necesitas especificar la hora también, pero la voy a dejar ya que me va a dar una hora por defecto. No es importante, no vamos a demostrar eso. Pero si quieres mostrar esta vez, puedes especificarlo aquí también. Entonces aquí sólo voy a añadir un texto ficticio. Ya preparé algún texto. Yo sólo voy a seguir adelante y copiarlo y pegarlo. También puedes usar este texto aquí desde el archivo de diseño. Simplemente puedes copiarlo y pegarlo y aquí dice simplificarlo como bla, bla, bla. De esta manera puedo asegurarme de que estos párrafos estén relacionados con estos proyectos. Ahora, déjame presionar el botón “Crear”. Nuestro primero el artículo de colección está listo y dice puesta en escena para publicar. Todavía no está publicado porque no lo usábamos antes. Pero ahora voy a seguir adelante y crear cinco artículos de colección más. Voy a crear cinco proyectos más. Si tienes tantos proyectos diferentes para crear, también puedes usar la opción de importación. Si hago clic en este botón Importar aquí, puedo arrastrar y soltar un archivo CSV aquí y luego Webflow crea todos los elementos para mí automáticamente. Pero voy a seguir adelante y crear manualmente esos proyectos. Déjame seguir adelante y crear este nuevo proyecto. Voy a llamarlo Dashcoin. Para la imagen, déjame elegir la imagen de mi carpeta de sección Proyecto, la segunda, y luego el tipo de proyecto va a ser Desarrollo Web. Ahora voy a especificar la fecha de finalización a otra cosa. Déjame elegir el 17 de junio y aquí voy a añadir los detalles. Permítanme pegar aquí los textos anteriores y simplemente cambiar la primera palabra que podríamos reconocer que este detalle está relacionado con este proyecto. Voy a copiar este nombre de Dashcoin y lo voy a pegar aquí en lugar de simplificar. Déjame copiar este detalle del proyecto porque vamos a necesitar eso. Yo lo voy a crear y voy a repetir el mismo proceso cuatro veces más. Puedes saltarte esta parte o simplemente puedes seguir adelante y crear esos proyectos uno por uno conmigo. Nombremos el tercer proyecto Vectorify. Entonces voy a necesitar una imagen, la tercera imagen y el tipo de proyecto va a ser Diseño de experiencia de usuario. La fecha de finalización va a ser otra cosa, déjenme elegir el 23 de junio. Agradable. Voy a necesitar detalles del proyecto. Voy a pegar el detalle anterior del proyecto. Déjame cambiar la primera palabra aquí, así como así. Permítanme crear eso. Voy a seguir adelante y crear tres proyectos más. Este se va a llamar Orbit, y una imagen de proyecto va a ser la cuarta. El tipo de proyecto va a ser diseño de interfaz de usuario y una fecha de finalización. Déjame ponerlo a otra cosa, tal vez el primero de julio, y voy a necesitar detalles del proyecto, así que déjame pegarlo aquí y voy a cambiar la primera palabra a Orbit. Agradable. Yo voy a crear eso. Entonces voy a crear dos proyectos más. Se va a llamar Purificar. Déjenme elegir su imagen. Va a ser la quinta imagen. El tipo de proyecto va a ser diseño UX de UI y la fecha de finalización que voy a elegir el 5 de julio. Los detalles van a ser los mismos. Déjame cambiar la primera palabra a Purificar. Agradable, crea. último, pero no menos importante, voy a seguir adelante y crear el último proyecto, que se va a llamar CryptoPie. Déjame elegir la imagen del proyecto. Va a ser la última imagen. El tipo de proyecto va a ser Desarrollo de aplicaciones. La fecha de finalización va a ser digamos el 9 de julio y los detalles aquí, voy a modificar la primera palabra a Crypto Pie. Agradable. Nuestros artículos de colección están todos listos y podemos empezar a usarlos. ¿ Cómo podemos utilizar nuestra colección en nuestros artículos de colección? Bueno, podemos usar una lista de colecciones y la página de colección que el Webflow creó automáticamente para nosotros. Tan pronto como creamos esta colección, Webflow creó una página específica para nuestro proyecto. Si voy a las páginas aquí, se puede ver que tenemos una página estática que se llama Inicio. Entonces tenemos dos páginas de utilidad, estas se crean por defecto. Si te diriges a las páginas de colección CMS, puedes ver que Webflow creó la plantilla de este proyecto para nosotros. Si hago click en eso, no hay nada ahí y está bien porque no diseñamos eso. ¿ Qué debemos poner aquí? Bueno, necesitamos diseñar aquí nuestra página de proyecto. Dado que esta página del proyecto va a ser una página dinámica, necesitamos diseñarla aquí, dentro de la plantilla de este proyecto, y luego se va a cambiar el contenido de esta página para cada elemento de colección. Como puedes ver en la parte superior, tenemos esta opción de ítem, si hago clic en eso, puedes ver que tenemos todos nuestros ítems, pero este va a ser el tema de nuestra próxima lección. Por ahora, te voy a mostrar cómo puedes usar una lista de colecciones. Déjame ir a las páginas y voy a ir a la Página Principal. Si me desplazo aquí abajo, como mencioné antes, esta página es estática y estos contenidos también son estáticos, pero ahora es el momento de reemplazarlos por contenido dinámico. ¿ Cómo podemos hacer eso? Como mencioné antes, necesitamos una lista de recolección. Déjame abrir esta sección aquí en el navegador y luego tenemos este contenedor y dentro tenemos este Envoltorio de Proyectos y Encabezado de Proyectos. Voy a ir a la sección Agregar, y si me desplazo hacia abajo justo debajo de la sección CMS, tenemos esta lista de colecciones. Si lo arrastro y lo suelto dentro de esta sección justo aquí, podemos ver que vamos a obtener este contenedor de lista de colección, por defecto tiene tres elementos diferentes, y dice doble clic para conectarte a una colección. Ahora, necesitamos conectar este contenedor de lista de colecciones a la colección que acabamos de crear a la colección del proyecto. Si solo haces doble clic en él, aquí obtendrás acceso a esta configuración de lista de colecciones, y desde la fuente, puedes elegir proyectos. Ahí vamos. Tan pronto como conecté esta colección listas wrapper a mi colección, se puede ver que el número de artículos aquí aumentó y ahora tenemos el nombre de nuestros artículos, tenemos el nombre de nuestros proyectos aquí, CryptoPie, Purificar, Órbita, Vectorificar, Dashcoin, y Simplificar. Significa que todo funciona perfectamente. ¿ Qué debemos hacer ahora? Si abro este contenedor de lista de colección en el navegador, se puede ver que tenemos dos elementos diferentes. Tenemos la lista de cobranza, y tenemos el estado vacío. No necesitamos hablar ahora del estado vacío, lo que necesitamos es solo seguir adelante y abrir esta lista de colección y dentro tenemos este ítem de colección. Nuestras tarjetas aquí deben colocarse dentro de este artículo de colección, siempre su contenido debe colocarse dentro del elemento de colección, no de la lista de colección. El listado de colección es solo este envoltorio. ¿ Qué debemos hacer ahora? Bueno, es muy sencillo. Voy a seguir adelante y seleccionar la primera tarjeta, esta tarjeta de proyecto. Voy a arrastrarlo en el navegador y lo voy a soltar dentro del elemento de colección. Es muy importante. Preste atención a la jerarquía de sus elementos. Se debe anidar dentro del elemento de colección, así como así. Tan pronto como dejé caer este artículo dentro de esta lista de colección, se puede ver que aquí se han creado seis tarjetas de proyecto diferentes ni una. ¿ Por qué? Porque el contenedor de lista de colección sabe cuántos proyectos tenemos. ¿ Y estas tarjetas de proyecto? No los necesitamos. Voy a seleccionar esta tarjeta de proyecto, voy a golpear Retroceso o Eliminar para eliminarla, y voy a hacer lo mismo para esta. ¿ Y qué pasa con estos proyectos envoltura? este momento, estos proyectos se apilan uno encima del otro verticalmente. La buena noticia es que la lista de colección tiene también un ajuste de pantalla. Si sigo adelante y cambio la configuración de visualización de bloque a cuadrícula, obtendremos exactamente lo que necesitamos. Déjame seguir adelante y darle una clase primero, voy a escribir Lista de Colección. Ahí vamos y voy a cambiar la configuración de visualización a cuadrícula. Ahora tengo dos columnas y dos filas. Voy a quitar una de estas filas, y voy a añadir una columna más aquí. Agradable. Entonces voy a cambiar la brecha a 40 píxeles y voy a golpear Done. No se ve ahora mismo pero aguanta conmigo, te voy a mostrar cómo podemos arreglarlo. En primer lugar, el contenido de todas estas tarjetas es el mismo y tenemos que arreglarlo. ¿ Qué debemos hacer? Bueno, necesitamos conectar nuestros elementos como imagen, título, descripción del proyecto, y este enlace a los campos que creamos para nuestra colección. Es muy sencillo. Si solo hago clic en esta imagen aquí, y si hago clic en este icono de configuración aquí, dice se imagina de los proyectos. Si marco esta casilla de verificación y luego puedo seleccionar una imagen de proyecto de campo, automáticamente te presenta el campo apropiado. Desde que seleccioné una imagen aquí, no me muestra todos los campos, así que sólo tenemos un campo de imagen, Project Image, lo voy a seleccionar. Ahí vamos. Ahora las imágenes son diferentes. ¿ Y el título? Vamos a hacer lo mismo aquí. Voy a seleccionar el título. Voy a dar clic en el icono de configuración y dejarme revisar Obtener textos de proyectos, y desde el menú desplegable, voy a elegir Nombre así. Ahora tenemos CryptoPie, Purify, Órbitas, etc. Ahora déjame hacer lo mismo para la descripción del proyecto. Una vez que lo seleccione, voy a golpear el icono de configuración y voy a revisar Obtener textos de proyectos. Aquí voy a elegir tipo de proyecto, bonito. último, pero no menos importante, voy a seleccionar este botón de enlace, y voy a revisar Obtener URL de los proyectos, pero espera, no creamos ninguna URL para nuestros proyectos. Sí, tienes razón pero Webflow hizo eso automáticamente. ¿ Recuerdas cuando hablamos de babosa? Esa es exactamente la URL que estamos buscando. ¿ Qué debería pasar aquí? Cuando el usuario hace clic en este enlace, el usuario debe ser redirigido a esta página del proyecto CryptoPie. Por lo tanto aquí, voy a ir a la página de Colección, y desde aquí voy a elegir Proyecto Actual. Eso es lo que tenemos que hacer aquí. Podemos marcar esta casilla de verificación, abrir en una nueva pestaña. No voy a hacer eso y no hay nada más que tengamos que hacer. Ahora nuestras tarjetas están usando contenido dinámico y si realizamos cambios en nuestros ítems de colección CMS, los cambios se aplicarán a todas estas tarjetas de forma automática. Eso es increíble, pero aquí tenemos seis cartas diferentes. Podemos filtrar nuestros artículos. ¿ Cómo? Si selecciono mi contenedor de lista de colección y si voy a la configuración de elementos, justo al lado del panel de estilo, aquí tenemos diferentes opciones, tenemos filtros, orden de clasificación, límites de visualización. Vayamos a los límites de exhibición. Aquí voy a revisar artículos de límite. Entonces, aquí puedo especificar el número de artículos que voy a mostrar aquí. Escribamos tres. Ahora tenemos tres artículos, pero aquí tenemos CryptoPie, Purify, Orbitas, pero en nuestro diseño, tenemos Simplify, Dashcoin, Vectorify. Ahora, podemos usar la opción de orden de clasificación. Si hago clic en este botón más, puedo ordenar mis proyectos en función de la fecha de finalización, en función del nombre, en función de la fecha creada. Este es un campo que Webflow crea automáticamente para nosotros. Voy a elegir fecha de finalización y aquí puedo elegir de más antiguo a más nuevo y de más nuevo a más antiguo. Voy a pegarle a todas las listas a los más nuevos y pegaré Guardar. Ahí vamos. Ahora tenemos Simplify, Dashcoin, y Vectorify, así como así. Ahora se ordenan con base en su fecha de finalización. ¿ Qué más debemos hacer? Bueno, aquí esta envoltura de lista de colección está fuera de nuestro contenedor. Por eso está ocupando tanto espacio. Por lo tanto, voy a seguir adelante y simplemente arrastrarlo y dejarlo caer dentro nuestro contenedor y voy a quitar el envoltorio de proyectos que creamos antes así como así. Ahora bien, mientras se selecciona esta envoltura de lista de colección, voy a seguir adelante y darle una clase, vamos a escribir, Colección List Wrapper. Voy a añadir algunos márgenes superiores, vamos a darle un margen superior de 70 píxeles y estamos bien para ir. ¿ Se puede ver lo fácil que es utilizar un CMS y colecciones y listas de colecciones? A partir de ahora, estos contenidos son dinámicos y esta página web hace referencia a nuestro contenido dentro de nuestras colecciones y artículos de colección. Si voy a mi CMS, y si voy a, digamos Simplificar aquí, y decido modificar su nombre a otra cosa, escribamos Simplificar plus y lo guardo, ahora este cambio afecta a esta tarjeta aquí como bien. Necesito previsualizar eso aquí, allá vamos, tenemos nuestro nuevo título. Chicos, eso fue mucho para digerir, así que recapitulemos esta lección. En primer lugar, hablamos del CMS. CMS es donde puedes crear algunas colecciones y digamos crear algunas estructuras para tu contenido. Para crear una colección, es necesario crear algunos campos. Creamos algunos campos personalizados como imagen del proyecto, tipo de proyecto, fecha de finalización y detalles del proyecto. Después creamos algunos elementos del proyecto. Agregamos una lista de colecciones aquí y conectamos nuestro Wrapper de lista de colecciones a la colección de nuestro proyecto. Después arrastramos y soltamos nuestra tarjeta de proyecto dentro de este ítem de colección, y finalmente, seleccionamos todos nuestros elementos de una manera uno, la imagen, el título, la descripción, y el enlace y los conectamos con el campo apropiado aquí. Por ejemplo, para esta imagen, elegimos imagen del proyecto, para este título, elegimos el nombre del proyecto, como puedes ver. Por último, seleccionamos nuestra envoltura de listas de colección y fuimos a la configuración de elementos, partir de aquí, limitamos a tres el número de ítems que queríamos mostrar aquí. Además, utilizamos la opción de orden de clasificación para mostrar nuestro contenido en función la fecha de finalización y de más antiguo a más nuevo así como así. Chicos, eso es todo por este video. Espero que lo hayan disfrutado. En el siguiente video, comenzaremos a crear nuestra página de proyecto. Nos vemos entonces. 52. Página del proyecto: parte 1: Oye, en este video, vamos a empezar a crear nuestra página de proyecto juntos. Esta página, como mencioné antes, va a ser una página dinámica. Por ello, su contenido también va a ser dinámico. ¿ Cómo podemos trabajar con páginas dinámicas? De la misma manera que trabajamos con páginas estáticas, nada cambia. Aquí la única diferencia es que esta página va a ser una plantilla para nuestra página de proyecto y su contenido podría cambiarse de acuerdo a nuestros ítems de colecciones. En primer lugar, voy a ir a Webflow y aquí está nuestra página de inicio. Si voy a estas páginas aquí bajo las páginas de colección CMS, como puedes ver, la plantilla de este proyecto había sido creada por Webflow para nosotros. Voy a dar click en eso. ¿ Qué necesitamos para esta página? Como puedes ver, necesitamos la barra de navegación en la parte superior. En la parte inferior, necesitamos esta sección CTA y el pie de página. Ya creamos estas secciones. ¿ Deberíamos seguir adelante y copiarlos y pegarlos aquí? Podemos hacer eso, pero no es una buena manera. ¿ Recuerdas cuando hablamos de símbolos? Mencioné que podría ser muy beneficioso si pudieras crear un símbolo y reutilizar ese símbolo una y otra vez y más adelante si quieres hacer algunos cambios en tus símbolos, los haces una vez y afectará todas las instancias de ese símbolo en particular al instante. Esto es exactamente lo que vamos a hacer. Ahora vamos a seguir adelante y crear un símbolo para nuestra barra de navegación, para nuestra sección CTA y para nuestro pie de página. Déjame ir a Webflow. Antes de hacer eso, déjame mostrarte algo. Puedes ver el color del fondo es exactamente el mismo que el color de nuestro fondo aquí en nuestra página de inicio. ¿Por qué es eso? No cambiamos el color del fondo de esta plantilla de proyecto. ¿ Recuerdas cuando cambiamos el color del fondo del cuerpo, todas las páginas etiquetan en nuestra página de inicio? Por eso aquí también obtenemos el color del fondo. De hecho, si yo creativo y más páginas, todas esas páginas tendrán el mismo color de fondo y eso es exactamente lo que queremos. Por supuesto, podemos seguir adelante y anular eso si quieres, pero en este caso, está totalmente bien. Ahora, voy a ir a “Mi página de inicio” y desde aquí voy a seleccionar primero mi “Navbar”. ¿ Recuerdas cómo podríamos crear un símbolo? Sí, tienes razón. Teníamos dos opciones diferentes. Podríamos hacer clic derecho en él y presionar el botón “Crear Símbolo” aquí, o podríamos ir a los símbolos justo aquí y simplemente pulsar el botón “Crear nuevo Símbolo” justo aquí. Voy a apretar este botón y voy a llamarlo navbar. Ahí vamos. Nuestro símbolo está listo. Ahora estamos dentro del símbolo maestro. Voy a dar click en este “Volver a Instancia”. Déjame dirigirme a la sección CTA. Yo también voy a seleccionar esta sección. Yo voy a hacer lo mismo. Déjame crear un símbolo y lo voy a nombrar sección CTA. símbolo de nuestra sección CTA también está listo. Por último, voy a seleccionar mi pie de página y dejarme hacer lo mismo aquí. Voy a crear un símbolo y déjame ponerle nombre pie de página. Creamos con éxito tres símbolos diferentes, pero ahora es el momento de seguir adelante y reutilizarlos. Déjame ir a “Páginas” y voy a ir a “Plantilla de Proyectos” aquí, y luego voy a ir a la sección “Símbolo”. Desde aquí, simplemente puedo arrastrarlos y soltarlos en mi Canvas. También hay una alternativa. También puedes usar el “Búsqueda rápida para encontrar tus símbolos. Déjame mostrarte cómo. Si selecciono este cuerpo y si presiono la tecla “Comando” tecla “Control” en mi teclado, puedo buscar pie de página. Como puede ver aquí, encontró nuestro símbolo de pie de página. Si busco navbar, ahí vamos, símbolo navbar. Simplemente puedo dar click en eso y ahí está. Nuestra barra de navegación está aquí. ¿ Y otras secciones? Aquí vamos a hacer lo mismo. Esta vez te voy a mostrar cómo puedes arrastrarlos y soltarlos en tu lienzo. Voy a ir a la sección Símbolo. Desde aquí voy a arrastrar y soltar la sección CTA en mi Lienzo y poner cada uno justo debajo de la barra de navegación. Ahí vamos. Nuestra sección CTA también está lista. último pero no menos importante, déjame seguir adelante y arrastrar y soltar este pie de página. Voy a ponerlo justo debajo de mi sección CTA. Nuestra barra de navegación está lista, nuestra sección CTA está lista, y también el pie de página se ha agregado con éxito. La primera parte de esta página ha sido creada. Como puedes ver aquí, teníamos la barra de navegación, la sección CTA, y el pie de página. Ahora es el momento de seguir adelante y crear esta sección de proyectos, pero lo vamos a hacer en nuestra próxima lección. Chicos, eso es todo por este video. Espero que lo hayan disfrutado. Te veré en el próximo. 53. Página del proyecto: parte 2: En este video, vamos a seguir trabajando en nuestra página de proyecto. Ahora, es hora de seguir adelante y crear esta sección del proyecto. Analicemos esta sección y veamos cómo podemos estructurarla en Webflow. Aquí, necesitamos crear una sección, y dentro necesitamos crear un contenedor. Dentro de ese contenedor, necesitamos tener un encabezado, este tipo de proyecto, esta fecha de finalización, y la imagen del proyecto, y finalmente, los detalles. Como puedes ver aquí, imagen de este proyecto tiene algunas sombras de gota, pero no es una simple sombra de gota. Si hago zoom, se puede ver que esta sombra de gota tiene diferentes colores. No usé una simple sombra de gota oscura porque en el mundo real, no obtenemos sombras oscuras para imágenes y objetos coloridos. Por lo tanto, sería más realista tener los colores de nuestro objeto, o en este caso, nuestra imagen para nuestra sombra de gota también. ¿ Cómo hice eso? Fue tan sencillo. Acabo de duplicar esta imagen y puse esa capa duplicada detrás de nuestra imagen principal, y luego, le agregué este efecto de desenfoque de capa. Déjame mostrarte cómo se ve. Si solo disminuyo este desenfoque a cero, puede ver que esta es exactamente la misma imagen aquí, pero si aumento la cantidad de desenfoque, será borrosa y se verá como una sombra de gota. Por último, disminuyo la Opacidad de esta capa duplicada al 50 por ciento. Nosotros también vamos a utilizar la misma técnica en Webflow. Para estos párrafos, vamos a utilizar un texto rico porque queremos que nuestro cliente, queremos que la agencia de diseño, sea capaz de agregar algunos medios ricos como imágenes, videos, y modificar fácilmente los detalles de cada proyecto. Aquí tenemos este rubro y para crear esta sección, el tipo de proyecto y esta fecha de finalización, vamos a crear un bloque div, y los vamos a poner dentro de ese bloque div y finalmente, vamos a dar vuelta ese bloque div a un flex max, ¿por qué? Porque queremos que toquen los bordes de este límite. Se ve fácil, así que sigamos adelante y crearlo. En primer lugar, voy a seguir adelante y seleccionar mi cuerpo. Voy a golpear “Comando K” o “Control K”. Busquemos una sección. Esta sección se ha agregado aquí, justo debajo de mi pie de página. En el navegador, lo voy a arrastrar y soltarlo justo encima de la sección CTA, aquí mismo. Esta sección va a tener una clase. Como de costumbre, le voy a dar una clase de sección. Ahí vamos. Además, voy a dar una clase combo. Escribamos proyecto. Enfriar. Ahora bien, esta sección requiere de un contenedor. Si bien está seleccionado, voy a golpear “Comando K” o “Control K”. Busquemos un bloque div. Yo le voy a dar la clase de contenedor. Ahí vamos. Nuestro contenedor está listo también. ¿ Qué necesitamos dentro de este contenedor? Sí, tienes razón. Necesitamos un rumbo. Si bien este contenedor está seleccionado, vamos a golpear “Comando K” o “Control K” y buscar rumbo. Va a ser H1, y le voy a dar una clase. Escribamos título de la página del proyecto, Página __Título. Ahí vamos. No voy a cambiar este título porque más adelante, conectaremos todos estos elementos a nuestros campos de colecciones. Porque vamos a trabajar con contenido dinámico. ¿ Qué más necesitamos aquí? Justo debajo de este rubro, necesitamos crear este tipo de proyecto y también esta fecha de finalización. Pero analicemos esta sección, la fecha de finalización. Dado que la fecha de finalización debe ser dinámica, aquí, voy a crear dos bloques de textos diferentes: uno para esta terminada en sección, y el otro para la fecha misma. Posteriormente, cuando conectemos nuestros elementos a nuestros campos, simplemente conectaremos el bloque de texto correcto con el campo de fecha de finalización. Déjame seguir adelante y crear un bloque div. Voy a seleccionar este contenedor y voy a golpear “Comando K” o “Control K”. Busquemos un bloque div. Ahí vamos. Voy a darle una clase. Escribamos Project Type Wrapper, así como eso. En el interior, voy a colocar aquí un bloque de texto. Si bien está seleccionada, voy a buscar un bloque de texto. Ahí vamos. Este bloque de texto va a tener una clase también. Escribamos Project Page __Type, y voy a modificar sus propiedades topográficas. Voy a ir a mi archivo de diseño, voy a seleccionar este tipo de proyecto, y como pueden ver, estoy usando cuerpo medio. Cuerpo medio, su tamaño de fuente es de 24 puntos y también es medio. Por lo tanto aquí, voy a cambiar el tamaño a 24 píxeles. También, su peso va a ser de 500 o mediano. Su color va a ser medio neutro, así como así. No voy a modificar su texto. Enfriar, pero ¿qué pasa con la sección de fecha de finalización aquí mismo? Como mencioné, voy a crear un bloque div. Entonces, voy a seleccionar este envoltorio de tipo de proyecto, y luego voy a agregar un bloque div aquí dentro. Este div va a tener clase. Escribamos Proyecto __Finalización. Ahí vamos. Dentro de este bloque div vamos a colocar dos bloques de texto. Si bien está seleccionado, pulsa “Comando K” o “Control K” y busca bloque de texto. Este es nuestro primer bloque de texto, voy a simplemente copiarlo, “Comando C” o “Control C”, y pegarlo para obtener mi segundo bloque de texto. Ahora, cada uno de estos bloques de texto debe tener una clase. Voy a seleccionar el primero, y le voy a dar una clase. Escribamos Proyecto __Terminado, así como así. El segundo va a ser Proyecto __Date. Ahora, sigamos adelante y modifiquemos sus propiedades CSS. Voy a seleccionar el primero, este Proyecto Finalizado. Déjame seguir adelante y modificar su tamaño de fuente a 20 píxeles, y también su color a oscuro neutro. ¿ Y el segundo? El segundo, que es este proyecto 8, va a ser de 20 píxeles también, pero su color va a ser medio neutro. Agradable, pero no se ve bien, ¿por qué? Porque no volteamos este blog div de finalización de proyecto a un flex max. Entonces, voy a seleccionar este bloque div de finalización de proyecto en mi navegador, y luego voy a cambiar la configuración de visualización a flex max. Ahora, la dirección es horizontal y están sentados uno al lado del otro, es exactamente lo que quiero. Ahora, voy a seleccionar el primer texto y voy a cambiar sus tomas para completar el. Para ver cómo se verá, voy a cambiar también este texto. A pesar de que éste va a tener contenido dinámico. Pero sólo para ver cómo se verá, voy a escribir el 22 de junio de 2021. Agradable. Aquí, necesitamos algunos márgenes entre ellos. Voy a seleccionar esto completado en bloque de texto, y le voy a dar un margen derecho de cinco píxeles, así como así. Ahora, se ve mucho mejor. Pero como puedes ver, estos dos elementos, este tipo de página de proyecto y también este div blogs, están sentados uno encima del otro. Eso no es lo que queremos. Voy a seleccionar este Envoltorio Tipo de Proyecto y lo voy a convertir en una caja flex. El rumbo va a ser horizontal, sin embargo, voy a cambiar la justificación por espacio entre, ¿por qué? Porque queremos que toquen los bordes de este límite. Voy a ponerlo en el espacio entre. Agradable, nuestro diseño está casi listo. Déjame dirigirme a mi archivo de diseño. Si selecciono este tipo de proyecto y si mantengo pulsada la tecla “Alt” o la tecla “Opción” en mi teclado, puedo ver que tiene un margen superior de 20 píxeles. Si bien se selecciona este bloque div, este Project Type Wrapper, voy a darle un margen superior de 20 píxeles. Ahora se ve mucho mejor. Ahora, pasemos a la siguiente parte, que es esta imagen. Aquí, mientras este contenedor está seleccionado en el navegador, voy a seleccionar este contenedor. Voy a golpear “Comando K” o “Control K”. Vamos a crear un nuevo bloque div, porque vamos a crear un contenedor para nuestra imagen. Aquí, voy a escribir bloque div, y este bloque div va a tener una clase. Déjame escribir Proyecto __Image __Wrapper. En el interior, vamos a colocar una imagen. Si bien está seleccionado, voy a golpear “Comando K” o “Control K”. Busquemos aquí el elemento de imagen. Ahí vamos. Voy a darle una clase a esta imagen, así que vamos a crear una clase aquí. Voy a escribir Página del Proyecto __Image. Esta imagen debería ocupar todo el ancho de su padre, que es este nuevo bloque div que creamos, este envoltorio de imágenes. ¿ Qué debo hacer? Sí, tienes razón. Voy a seguir adelante y cambiar el ancho a 100. Ahí vamos. Ahora ocupa todo el ancho de su padre, pero su altura también se ha incrementado. ¿ Cómo puedo arreglar eso? Déjame ir a mi archivo de diseño. Si selecciono esta imagen aquí, si hago doble clic sobre ella, se puede ver que tiene una altura específica, 444 píxeles. Por lo tanto, voy a establecer la altura aquí en 444 píxeles. No obstante, como puedes ver nuestra imagen no ocupa ahora todo el ancho, no cubre esta zona. Por lo tanto, voy a seguir adelante y cambiar el ajuste de relleno a cobertura. Ahora, voy a hacer doble clic en él y vamos a elegir una imagen de los activos por ahora, voy a elegir la primera. Cubre todo el envoltorio. Nuestra imagen está lista, pero ¿qué pasa con la sombra de gota? Como mencioné antes, voy a duplicar esta imagen y la voy a poner detrás de esta imagen principal y luego le voy a agregar algunos filtros. Voy a hacer clic derecho en esta parte azul de aquí, y luego voy a elegir “Duplicar”. Como puedes ver ahora tenemos dos imágenes idénticas con la misma clase. Es muy importante modificar la clase de esta capa duplicada. ¿ Por qué? Porque queremos modificar sus propiedades CSS. Voy a seleccionar esta capa duplicada, y voy a seguir adelante y dar click en esta flecha pequeña y dejarme duplicar esta clase. Voy a renombrarlo a Project Page__Image__Effect. Ahí vamos. Ahora tiene una nueva clase y fácilmente podemos ir adelante y modificar sus propiedades CSS. ¿ Cómo podemos poner esta imagen detrás de nuestra imagen principal? Podemos seguir adelante y modificar su posición aquí. Si bien está seleccionada, voy a cambiar su posición de estática a absoluta. Como puedes ver, está en mal estado. No es lo que queremos. ¿ Por qué sucede? Eso se debe a que su nueva posición es relativa al cuerpo. Si recuerdas cuando trabajamos con posición absoluta, mencioné que siempre busca un elemento padre que tenga la posición relativa. Si sigo adelante y cambio la posición de esta envoltura de imagen del proyecto a relativa de estática, y luego selecciono esta imagen duplicada, simplemente puedo establecer su posición en la parte superior izquierda. Ahora esta imagen está encima de nuestra imagen principal. ¿ Cómo podemos ponerlo detrás de nuestra imagen principal? Podemos usar el índice z. Aquí voy a establecer el índice z en menos 1. De esta manera puedo asegurarme de que esta capa duplicada con esta clase de efecto de imagen de página de proyecto esté detrás mi imagen principal porque le di un índice z negativo. Ahora tenemos que seguir adelante y agregarle algunos efectos. Si me dirijo a la sección Efectos, puedo ir a Filtros. Si presiono este botón plus, puedo agregarle el filtro de desenfoque. Establezcamos el radio en alrededor de 40 píxeles. Igual que eso. Como puedes ver, tenemos nuestra sombra de gota. Además, voy a aumentar la intensidad de mis colores. Voy a añadir un filtro nuevo aquí. Adelante y sumamos el filtro de saturación, y voy a establecer su ascendió a 200 por ciento. Ahora como pueden ver, se ha incrementado la intensidad de mis colores. No obstante, esta sombra de gota es demasiado brillante y no se ve realista. Voy a seguir adelante y disminuir su opacidad al 40 por ciento. Ahí vamos. Ahora se ve mucho mejor, pero voy a hacer una cosa más. Si seleccionamos esta sombra de gota, simplemente puedo moverla un poco hacia abajo. Voy a añadir aquí las transformaciones 2D y 3D, y lo voy a mover un poco hacia abajo usando el eje y. Déjame moverlo hacia abajo en 14 píxeles, así como así. Ahora se ve mucho mejor. Nuestro envoltorio de imagen de proyecto también está listo. Ahora es el momento de seguir adelante y sumar nuestros ricos textos aquí justo debajo de esta imagen. Voy a seleccionar el contenedor y luego le voy a dar una clase combo y vamos a escribir Project, así como eso. Por último, voy a modificar su configuración de visualización porque quiero que todos estos elementos se apilen uno encima del otro verticalmente. Posteriormente cuando queremos hacer que nuestro diseño sea receptivo, sería tan beneficioso. Voy a cambiar su configuración de visualización a Flexbox y voy a cambiar la dirección a vertical. Ahora mientras este contenedor está seleccionado, voy a golpear Command K o Control K. Déjame añadir un texto rico aquí. Ahí vamos. Nuestro texto rico se ha agregado aquí, y le voy a dar una clase. Escribamos Proyecto__Detalle. Déjame dirigirme a mi archivo de diseño. Voy a seleccionar este párrafo y voy a revisar su margen superior. Como pueden ver, necesito un margen superior de 70 píxeles. Si bien está seleccionado aquí, voy a dar un margen superior de 70 píxeles. No vamos a modificar el contenido aquí por ahora. Ahora sigamos adelante y modifiquemos el espaciado entre estos elementos. Si voy a mi archivo de diseño y si selecciono este tipo de proyecto, se puede ver que su margen inferior está establecido en 80 píxeles. Aquí puedo dirigirme a mi proyecto, puedo seleccionar este envoltorio tipo de proyecto y le voy a dar un margen inferior de 80 píxeles. Todo está listo y podemos pasar al siguiente apartado. Déjame dirigirme a mi archivo de diseño. Justo debajo de eso, necesitamos tener esta sección de otros proyectos. Se ve exactamente igual a esta sección de proyecto reciente, así que creo que sería prudente simplemente copiarlo y pasarlo aquí. Déjame ir a Webflow. Voy a ir a mi página de inicio. Desde aquí voy a seleccionar esta sección, sección Proyectos recientes. Yo lo voy a copiar, golpear Comando C o Control C. Entonces voy a ir a Pages y voy a ir a la página de Plantillas de Proyectos, y déjame seleccionar el cuerpo y golpear Comando V o Control V. Así, esto se ha agregado justo debajo de mi pie de página, así que solo la voy a reposicionar dentro mi navegador y la voy a poner debajo de mi sección de proyecto. Primero lo primero, voy a seguir adelante y duplicar la clase combo de este proyecto, y lo voy a cambiar a Otros Proyectos para mantener todo organizado. Entonces voy a cambiar este nombre aquí de Proyectos Recientes a Otros Proyectos. Por último, voy a modificar su margen superior porque ahora mismo es demasiado, son 200. Si me dirijo a mi archivo de diseño, si lo selecciono, se puede ver que su margen superior está establecido en 70 píxeles. Voy a ponerlo a 70 aquí. Si selecciono esta sección, puedes ver que tenemos demasiado margen aquí en la parte superior. Voy a seleccionar esta sección y voy a anular su margen por defecto. Si hago clic en él, se puede ver que dice que el valor proviene de sección. Está bien. Pero como agregamos este nuevo proyecto de clase combo, simplemente podemos sobrescribirlo sin afectar a otras secciones. Voy a ponerlo en 70 píxeles. El diseño de nuestra página de proyecto está listo, y ahora es el momento de conectar todos nuestros elementos a nuestros campos de artículos de colecciones y colecciones. Pero lo vamos a hacer en nuestra próxima lección. Espero que hayas disfrutado de este video y te veré en el siguiente. 54. Página del proyecto: parte 3: Hey, bienvenido de nuevo. En este video, vamos a conectar todos nuestros elementos a los campos de nuestro CMS. ¿ Estás listo? Empecemos. En primer lugar, voy a seleccionar este rubro. En este epígrafe se debe mostrar el nombre del proyecto. Si hago clic en este icono de configuración, puedo marcar esta casilla de verificación, dice obtener textos de proyectos, esta es la colección que creamos antes. Entonces voy a seleccionar el campo, voy a seleccionar “Nombre (Texto sin formato)”, este es nuestro nombre de proyecto. Ahí vamos. Se ha cambiado para simplificar plus. Si recuerdas, lo modificamos. Pero ¿por qué simplemente es plus, por qué no otro proyecto? Eso es porque si te diriges a la barra superior aquí, puedes ver que tenemos este artículo, y dice simplificarlo más. Esta plantilla de proyectos tiene diferentes ítems, los ítems que creamos los proyectos. Si voy a CryptoPie, puedes ver que este título se cambia automáticamente. Si voy a Orbit, ahí vamos, así que esa es la belleza de usar Webflow CMS. Voy a ir a simplificar plus por ahora. Entonces voy a seleccionar el tipo de proyecto, déjame hacer clic en el icono de configuración, voy a marcar esta casilla de verificación, y déjame elegir el campo. Este va a ser Project Type, allá vamos, diseño de UI y desarrollo de aplicaciones. Entonces voy a seleccionar esta “Fecha del proyecto”, y voy a dar clic en estos ajustes. Déjame marcar esta casilla de verificación, y voy a elegir el campo correspondiente. Va a ser Fecha de Finalización, ahí vamos, se ha cambiado al 1 de junio de 2021. Aquí podemos modificar el formato también. Si quieres mostrarlo de manera diferente, por ejemplo, si quieres incluir también la hora, simplemente puedes modificar el formato. Tenemos muchos formatos diferentes aquí, así que eso depende totalmente de ti, pero a mí me queda bien. Ahora es el momento de seguir adelante y seleccionar nuestra imagen, “Imagen de la página del proyecto”, y voy a golpear este icono de configuración. Déjame revisar esto Obtener imágenes de Proyectos, y voy a elegir Project Image. Pero, ¿qué pasa con la sombra? Bueno, ya que duplicamos esta imagen para nuestra sombra de gota, solo necesitamos seleccionarla, y solo necesitamos conectarla a nuestro campo, igual que nuestra imagen principal. Voy a marcar esta casilla de verificación y voy a seleccionar la “Imagen del proyecto” del menú desplegable de campo, así como así. Ahora es el momento de seleccionar nuestro detalle de proyecto, este texto rico. Voy a seguir adelante y marcar esta casilla de verificación, y déjame seleccionar un campo, “Detalles del proyecto”, ahí vamos. Se ha cambiado al detalle de proyectos con el que está asociado. Nuestros elementos están conectados, y ahora puedo seguir adelante y comprobarlo. Si cambio el artículo aquí en la parte superior de simplificar plus a purificar, ahí vamos. Se ha cambiado el título, ha cambiado el tipo de proyecto, ha cambiado la fecha, la imagen, y el detalle del proyecto. Echa un vistazo a esto, la sombra de gota también cambia, porque también está usando un contenido dinámico. Voy a ir a otro artículo. Voy a ir a dashcoin, ahí vamos, se ve increíble, ¿no? casi terminamos, pero hay una cosa más que necesitamos cuidar, y esa es la otra sección del proyecto. Si voy a simplificar plus, y me desplaza hacia abajo, se puede ver que en otros proyectos veremos también el proyecto simplificado plus. No tiene sentido, porque debemos excluir el proyecto que el usuario está viendo actualmente. Deberíamos simplemente mostrar otros proyectos aquí. Si me dirijo a mi archivo de diseño aquí, como pueden ver, aquí tenemos simplificar. No tenemos el proyecto simplificado en los otros proyectos. ¿ Cómo podemos hacer eso? Bueno, eso es muy sencillo. Voy a seleccionar este “Wrapper de lista de colecciones”. Si me dirijo a la Configuración de Elementos, aquí tenemos esta opción de filtros. Voy a presionar este botón más, y aquí tenemos dos campos diferentes. Aquí tenemos Nombre, Proyecto, Imagen del Proyecto. Podemos simplemente agregar diferentes filtros, pero voy a elegir Project, y luego aquí tenemos otro menú drop que dice que es o no lo es. Entonces aquí dice proyecto actual. Este proyecto es el proyecto actual, significa que vamos a conseguir el proyecto que el usuario actualmente está viendo aquí también, pero esto no es lo que queremos. Voy a cambiar es a no es, y luego voy a pegarle a “Guardar”, y ahí vamos. Aquí se ha eliminado el proyecto de simplificación plus. Aquí como pueden ver, tenemos dashcoin. Si voy a la página del proyecto dashcoin, aquí no tenemos ningún proyecto dashcoin, y eso es exactamente lo que necesitábamos. Una cosa más que quiero mencionar aquí es que si voy a la página principal, y si me dirijo a los proyectos recientes, voy a seguir adelante y seleccionar este “Wrapper de Lista de Colección”. Bajo el Orden de clasificación, seleccionamos De más antiguo a más nuevo. No tiene sentido, ¿por qué? Porque aquí tenemos los proyectos recientes, por lo tanto, la fecha de finalización debe ordenarse de los más nuevos a los más antiguos. Pero, ¿por qué elegimos de más antiguo a más nuevo? Eso se debe a que cuando creamos estos proyectos, elegimos aleatoriamente las fechas de finalización del proyecto. Ya que quería obtener exactamente el mismo diseño que tengo aquí, Simplificar, Dashcoin, y Vectorify, cambié este orden de clasificación de más nuevo a más antiguo a más antiguo a más nuevo. Pero en el proyecto del mundo real, cuando tengas los proyectos recientes necesitas ordenarlo de los más nuevos a los más antiguos, por lo que siempre que la agencia o el cliente agreguen un nuevo proyecto a los ítems de colecciones, se agregará aquí, por lo que tener eso en cuenta. Ahora voy a seguir adelante, revisar todo, a ver si todo funciona a la perfección. Si previsualizo mi proyecto, aquí tengo diferentes proyectos, voy a dar click en este botón “Aprender más”, ahí vamos. Lo dirigiré a la página del proyecto, y dice simplificar plus, puedo desplazarme hacia abajo, tengo otros proyectos también. Puedo hacer click en “Dashcoin”, voy a ser redirigido a la página dashcoins, perfecto. Ahora voy a volver a la página de inicio y, probémoslo una vez más. Voy a seleccionar “Vectorify”, y todo se ve muy bien. Lo único que tenemos que hacer aquí es simplemente cambiar el color de este alcance de los textos mediáticos porque nos olvidamos de hacer eso. Si sigo adelante, y echa un vistazo a mi archivo de diseño, aquí podemos ver que no usa nuestro color oscuro. Voy a seguir adelante y seleccionar este “Detalle del proyecto”, y voy a cambiar su estilo. Déjame ir a la sección de tipografía, y voy a modificar su color a neutro, medio. Ahora se ve mucho mejor. Muy bien chicos, eso es todo por este video. Espero que lo hayan disfrutado. Te veré en el próximo. 55. Página de contacto: Oye, en este video vamos a crear la página Contáctanos juntos. Esta va a ser una página estática, por lo tanto no vamos a trabajar con nuestro CMS y ningún contenido dinámico. Solo necesitamos crear esta forma y eso es todo. Déjame seguir adelante y analizar todos los elementos de esta página. En la parte superior, necesitamos tener la barra de navegación, como de costumbre. Entonces necesitamos tener esta sección Contáctenos, y finalmente el pie de página. Para la barra de navegación y un pie de página, podemos utilizar nuestros símbolos, entonces necesitamos crear esta sección Contáctenos. En el interior necesitamos poner un contenedor, como de costumbre, y luego necesitamos tener un encabezado y un bloque de formulario. Este bloque de formulario va a tener diferentes campos de texto, como nombre completo, correo electrónico, teléfono. Aquí en lugar de usar un campo de texto, vamos a usar un área de texto. ¿ Por qué? Porque el mensaje del usuario podría ser largo y por lo tanto un campo de texto sería demasiado pequeño para recopilar ese tipo de datos. Por último, tendremos este gran botón de envío. Nada complicado. Empecemos. En primer lugar, voy a ir a Webflow, y voy a seguir adelante y crear una nueva página estática. Si voy a Pages, puedo presionar este botón Crear nueva página, y luego lo voy a llamar Contáctenos, y presionar el botón Crear, así como así. Ahora es el momento de agregar nuestra barra de navegación y nuestro pie de página aquí. Voy a ir a la sección de símbolos, y voy a arrastrar y soltar nuestra barra de navegación justo en la parte superior, luego dejarme arrastrar y soltar nuestro pie de página justo debajo de eso. medio vamos a crear una sección, así que voy a seleccionar mi cuerpo, y vamos a golpear Comando K o Control K. Déjame crear una sección. Entonces le voy a dar una clase, una clase de sección. Por último, voy a subirlo y ponerlo entre estos dos símbolos. En el interior, vamos a necesitar un contenedor. En primer lugar, voy a darle a esta sección una clase combo, y lo voy a llamar Contacto. Entonces mientras está seleccionado, veamos la tecla Comando o la tecla Control y busquemos un bloque div. Entonces le voy a dar a este bloque div la clase de contenedor, y estamos bien para ir. Dentro de este contenedor vamos a necesitar un rumbo. Si bien está seleccionado, usemos el hallazgo rápido y voy a escribir Encabezado, y va a ser H1. Entonces démosle una clase. Voy a escribir Contact__Rumbo. Por último necesitamos modificar algunas de sus propiedades tipográficas. Voy a empezar con su tamaño de fuente, son 38 pixeles. Voy a escribir 60 pixeles, porque usábamos 60 pixeles para nuestros encabezados H1 antes, entonces voy a cambiar su color a oscuro neutro. Permítanme modificar también su altura de línea. Voy a cambiarlo a cien y tal vez diez por ciento. Por último, vamos a darle algunos márgenes inferiores. Voy a ir a mi archivo de diseño, y si lo selecciono, puedo ver que tiene un margen inferior de 80 píxeles. En primer lugar, mientras está seleccionado, voy a eliminar su margen superior predeterminado. Voy a ponerlo en 0. Entonces voy a cambiar su margen inferior predeterminado a 80 píxeles. ¿ Qué más necesito? Justo debajo de eso, voy a necesitar un bloque de formulario. Voy a seleccionar este contenedor y voy a presionar Tecla de comando o Tecla de control. Busquemos un bloque de formulario. Ahí está, nuestro bloque de formularios está listo. Ahora dentro de este bloque de formulario, como de costumbre, tenemos dos campos de texto diferentes, y dos etiquetas, y un botón, y vamos a modificar eso. Voy a seguir adelante y eliminar uno de estos campos de texto y una de estas etiquetas hasta que consiga sólo un campo de texto y una etiqueta. Voy a empezar por crear el campo de texto nombre. Voy a ir a mi archivo de diseño. Aquí, si selecciono este nombre completo, se puede ver que está usando el color medio neutro, y está usando el estilo de texto regular del cuerpo, y su tamaño de fuente es de 20 píxeles o 20 puntos. Voy a dirigirme a Webflow y le voy a dar una clase. Así es, Contactos__Título. Entonces voy a modificar algunas de sus propiedades tipográficas. Empecemos con su peso. Va a ser normal, y su tamaño va a ser de 20 píxeles. Por último, el color va a ser medio neutro. Enfriar. Nuestra etiqueta está lista. Ahora voy a seguir adelante y copiar el texto aquí, nombre completo, con este asterisco, porque se va a requerir este campo. Ahí vamos, nuestra etiqueta está lista. Voy a seleccionarlo. Déjenme darle algunos márgenes de botón más. Si selecciono esta etiqueta aquí, y reviso el margen inferior, si mantengo pulsada la tecla Opción en mi teclado, o la tecla Alt, se puede ver que tiene un margen inferior de 10 píxeles, así que voy a aumentar su margen inferior aquí como bien a 10 píxeles. Pero, ¿qué pasa con el campo de texto? Voy a seleccionar este campo de texto, y te voy a dar la clase, porque voy a cambiar su estilo. Escribamos Contact__Forma__Campo de texto. Igual que eso. Entonces voy a cambiar su ancho al 100 por ciento, que siempre ocupa el 100 por ciento de su ancho de padre. También voy a cambiar su altura. Déjame seguir adelante y comprobar la altura que utilicé para este campo de texto. Como puedes ver su altura está establecida en 70 píxeles. Yo también voy a establecer su altura aquí en 70 píxeles. Entonces voy a seguir adelante y modificar el color de su fondo. Déjame ir a mi archivo de diseño. Aquí, como pueden ver, estoy usando este código de color con una opacidad del 10 por ciento. Voy a copiar estos código de color hexadecimal, es 6B708D. Entonces lo voy a pegar aquí en el campo de color de este fondo. Está demasiado oscuro. Por último voy a disminuir su opacidad, todo es cantidad fina, al 10 por ciento. Ahí está. Pero como se puede ver, tiene una frontera. Si lo selecciono, se puede ver que aquí no hay frontera. Eso se debe a que los campos de texto por defecto tienen bordes. ¿ Cómo podemos arreglar eso? Simplemente podemos cambiar el estilo de este borde aquí a sólido, y volverlo a Ninguno. Pero ¿qué pasa con el texto de Marcador de Lugar? Bueno, si recuerdas, si solo haces doble clic en tu campo de texto, aquí puedes ingresar tu texto de marca de posición. Voy a escribir Ingresa tu nombre completo. Ahí vamos. El tipo de texto va a ser sencillo porque es sólo el nombre y apellido, y se va a requerir. Voy a revisar esta casilla de verificación requerida. Enfriar. Pero, ¿qué pasa con el estilo del placeholder? Bueno, voy a ir al estado de placeholder, así como así, y voy a modificar su color. Veamos qué tenemos aquí. Si selecciono este texto, está usando medio neutro. Déjame seguir adelante y cambiar su color a medio neutro. Voy a aumentar su tamaño de fuente a 17 píxeles. Enfriar, nuestro campo de texto está listo. Ahora voy a seguir adelante y crear otros campos de texto, como correo electrónico y teléfono. Primero voy a seleccionar este bloque formado, y le voy a dar una clase. Escribamos Contact__Form__Wrapper, y luego mientras está seleccionado, voy a crear un nuevo bloque div. Vamos a golpear Command K o Control K. Voy a buscar un bloque div. Este bloque div va a contener este campo de texto y esta etiqueta. Voy a arrastrar esta etiqueta dentro de este bloque div, y voy a arrastrar este campo de texto dentro de este bloque div también. Asegúrese de que estén anidados dentro adecuadamente. Entonces voy a seleccionar este nuevo bloque div, y voy a darle una clase. Escribamos, Contact__TextField y lo voy a poner encima de mi botón Enviar. Nuestro primer campo de texto está listo. Enfriar. Ahora voy a seleccionar este bloque Contact__TextField div, y lo voy a duplicar dos veces, así como así. Entonces, voy a modificar la etiqueta de la segunda al correo electrónico. Como puedes ver aquí, tenemos correo electrónico y no es necesario, por lo que no necesitamos ese asterisco. El siguiente va a ser teléfono, y además, tenemos que cambiar el positor aquí. Voy a hacer doble clic en él y voy a cambiar el positor a otra cosa. Probémoslo, ingresa tu dirección de correo electrónico. Voy a cambiar el tipo de texto a correo electrónico y no se va a requerir. Aquí, cambiemos el nombre de esta entrada por correo electrónico. Vamos a hacer doble clic en este campo de texto y voy a cambiar el positor para ingresar tu número de teléfono y además voy a cambiar el tipo de texto de plano a teléfono, y no se va a requerir también. Cambiemos el nombre aquí por teléfono. Enfriar. Nuestros campos de texto están listos. Ahora, necesitamos un campo más y vamos a usar un área de texto para eso. Déjame seguir adelante y seleccionar uno de estos bloques div. Este Contact__TextField, lo voy a duplicar una vez más, ahí está. Aquí está la que acabo de duplicar. Voy a modificar la etiqueta a mensaje con un asterisco. No obstante, este campo de texto es demasiado pequeño para nuestro mensaje. Si le echo un vistazo al diseño, puedes ver aquí tenemos un área de texto no un campo de texto. Por lo tanto, voy a eliminar este campo de texto, presionar Retroceso o Eliminar en tu teclado, y voy a seleccionar este bloque Contact__TextField div que es el elemento padre aquí. Golpeemos al Comando K o al Control K y busquemos área de texto. Ahí está. Ya que voy a usar el mismo estilo que utilicé para otros campos de texto, solo voy a usar la misma clase que uso para estos campos de texto. Es Contact_form_TextField. Déjame darle la misma clase, Contact_Form_TextField. Déjame hacer doble clic en esta área de texto y voy a cambiar su nombre a mensaje, y el positor va a ser escribir tu mensaje aquí y algunos puntos, y se va a requerir. Ahora es el momento de modificar nuestro botón Enviar. Déjame volver a mi archivo de diseño. Como puedes ver, este botón Enviar va a tener el mismo estilo que usamos para nuestro botón Primaria, el Contáctenos, y también este botón Obtener en Touch. Su altura va a ser de 80 píxeles. Vamos a seguir adelante y seleccionar este botón. Voy a darle una clase. Va a ser botón Primaria, y luego, le voy a dar una clase combo. Escribamos contacto y el texto se ve muy bien. Ahora necesitamos modificar el diseño de este formulario. Aquí como puedes ver, este campo de texto Nombre completo ocupa todo el ancho de su padre, nuestro contenedor. Entonces aquí en la segunda línea, tenemos dos campos de texto y finalmente, este mensaje va a ocupar todo el ancho de su elemento padre. Este botón va a ocupar también todo el ancho de su contenedor. ¿ Cómo podemos crear este layout? Bueno, podemos hacer eso usando flexbox, pero sería mucho más fácil si pudiéramos crearlo usando una cuadrícula, porque más adelante, cuando queremos que nuestro sitio web sea receptivo, va a ser mucho más fácil modificar nuestra cuadrícula en lugar de una flexbox. Voy a seguir adelante y crear una envoltura aquí. Voy a seleccionar este bloque de formulario, y le voy a dar una clase. Escribamos Contact__Form. Lo que tenemos que hacer es simplemente seguir adelante y seleccionar este Contact_Form_Wrapper que creamos antes y después, voy a cambiar su configuración de visualización de bloque a cuadrícula. Ahí vamos. Para esta cuadrícula, voy a necesitar seis columnas y seis filas. Déjame seguir adelante y agregar cuatro columnas más usando este botón Plus y cuatro filas más. Además, voy a cambiar la brecha a 40 píxeles y aquí también, allá vamos. Pero no se ven bien, eso está totalmente bien. Voy a golpear “Done” y si selecciono este bloque div, y si paso el cursor sobre este pequeño círculo y hago clic y arrastre, puedo ocupar todas estas seis celdas, así como eso. Entonces voy a hacer lo mismo para el campo de texto de correo electrónico. Voy a seleccionarlo y voy a dar click en este círculo y sólo arrastrar para ocupar tres celdas. Hagamos lo mismo para el campo de texto telefónico. Se va a ocupar las siguientes tres celdas. El campo de texto del mensaje va a ocupar tantas celdas diferentes. En realidad, va a tomar hasta tres filas por completo. Entonces, voy a seleccionar este botón de Primaria y va a ocupar todas estas seis celdas. Por el momento, tan bueno. Déjame previsualizar mi proyecto. Como se puede ver, se ve bien. No obstante, este área de texto parece un simple campo de texto, no es lo que queremos. Adelante y arreglemos eso. Si selecciono esta área de texto, se puede ver que su altura está establecida en 70 píxeles. ¿ Por qué? Porque le dimos este Contact_form_TextField. Ahora, voy a seguir adelante y darle una clase de combo. Escribamos mensaje. Voy a anular esta cantidad de altura predeterminada a 200 píxeles. Ahora se ve mucho mejor, déjame previsualizar eso. Agradable. Pero, ¿qué pasa con nuestro botón? Voy a seleccionarlo y le voy a dar una altura específica. Van a ser 80 píxeles, así como así. Ahora, vamos a previsualizar nuestro proyecto. Se ve bonito. Como pueden ver, tan pronto como previsualizo mi proyecto, este botón se movió un poco hacia arriba. Eso se debe a que usamos este área de texto y está totalmente bien. No va a romper nuestro sitio web ya que este área de texto no llena toda la altura de su contenedor, que es este bloque Contact__TextField div, este botón se mueve un poco hacia arriba. Está bien. Ahora voy a seleccionar este rubro y lo voy a cambiar a Contáctenos. Ahora vamos a previsualizar nuestro proyecto. Aquí tenemos la barra de navegación, tenemos el Contáctenos, el formulario, el botón Enviar y el pie de página en la parte inferior. Todo se ve bien excepto una cosa, el relleno de este texto de Marcador de posición. Adelante y arreglemos eso rápidamente. Si voy a mi archivo de diseñador aquí, se puede ver que este texto, tiene más relleno. Tiene 22 pixels top y un relleno izquierdo de 20 pixel. De hecho, voy a cambiar el relleno de todos estos campos de texto porque si se echa un vistazo al diseño aquí, se puede ver que todos estos campos de texto tienen un relleno diferente. Como se puede ver, 22 píxeles arriba y 20 píxeles a la izquierda. ¿Qué debo hacer? En lugar de cambiar el relleno aquí para esta clase combo de mensajes, voy a seleccionar mi Contact_Form_TextField, este es nuestro campo principal de texto base, y voy a cambiar el relleno aquí y el cambio que hago aquí se aplicará también a este mensaje. Déjame seleccionar este campo de texto y voy a cambiar su relleno superior a 20 píxeles, es relleno inferior a 20 también, y es relleno izquierdo a 20. Ahora se ve mucho mejor, ¿no? Muy bien chicos, eso es todo por este video. Espero que lo hayas disfrutado, y te veré en el siguiente. 56. Introducción a la respuesta: Oye, ahora que construimos nuestro sitio web con éxito, es hora de hacer que nuestro sitio web sea receptivo. Ya hablamos de los fundamentos de los puntos de ruptura. Pero ahora es el momento de aplicar todas las cosas que antes has aprendido a nuestro proyecto. Cuando se trata de capacidad de respuesta, podemos elegir dos formas diferentes. Podemos seguir adelante y hacer que nuestro sitio web sensible sección por sección, o podríamos hacer que nuestro sitio web respondan puntos de ruptura por punto de ruptura. Ambos caminos son correctos. Eso es cuestión de preferencia. Eso depende de ti cuál debes elegir. Déjame mostrarte cómo funciona. Voy a empezar por la primera vía, que es sección por sección. Significa que necesito seguir adelante y hacer que esta barra de navegación responda en todos los puntos de ruptura. En tablet, paisaje móvil, y retrato móvil. No obstante, en la segunda vía, que es punto de ruptura por punto de ruptura, necesitamos ir al punto de ruptura de la tableta y necesitamos modificar todas las secciones aquí hasta que estemos satisfechos con el resultado de este punto de ruptura en particular y luego pasaremos al siguiente punto de ruptura. Esto es exactamente lo que vamos a hacer. En primer lugar, iremos al punto de ruptura de la tableta y modificaremos aquí todos los elementos. Después iremos al paisaje móvil y finalmente, iremos al retrato móvil. Pero eres libre de elegir entre esas formas. Muy bien, chicos. Eso es todo por este video y comenzaremos a hacer que nuestro sitio web respondiera en el siguiente video. Nos vemos ahí. 57. Tabla de respuesta: En este video, vamos a empezar a hacer que nuestro sitio web responda. Como mencioné antes, vamos a ir punto de ruptura por punto de ruptura en todas las páginas. Vamos a empezar con tablet. Ahora mismo en el escritorio, todo se ve bien, pero si voy al punto de ruptura de la tableta, todo está mal aquí. Pero no te preocupes, vamos a arreglar eso. Vamos a empezar con la barra de navegación. Como puedes ver aquí en la parte superior, esta barra de navegación tiene algunos problemas. El modo en que se alinean estos elementos está mal, porque en tablet ya no necesitamos obtener este botón Contáctenos. Tenemos que esconder eso. Además, este botón de menú de hamburguesas debe colocarse en el lado derecho. Aquí tenemos este margen adicional, este margen superior adicional. Adelante y arreglemos eso. En primer lugar, voy a hacer doble clic sobre él porque para cambiar este símbolo, necesitamos entrar en el símbolo maestro. Empecemos por ocultar este botón. Voy a seleccionarlo, y si recuerdas, cuando quieras ocultar un elemento, puedes dirigirte a la configuración Display de presentación, y puedes cambiar su configuración de visualización a ninguna. Ahí vamos. Está oculto ahora, pero aquí este logotipo está tocando el borde de nuestro puerto de vista, que no es exactamente lo que queremos. Voy a seleccionar este contenedor, el contenedor dentro de nuestra barra de navegación. Como se puede ver, el relleno se establece en 0. Voy a seguir adelante y mantener presionada la tecla de opción en mi teclado o tecla Alt y hacer clic y arrastrar y agregar 30 píxeles relleno izquierdo y derecho simultáneamente. Ahora se ve mucho mejor. Pero, ¿qué pasa con este margen superior? Como pueden ver aquí, tenemos 70 píxeles de margen superior, y lo voy a seleccionar, y luego lo voy a establecer en 0. Ahí vamos, porque en tablet no necesitamos ese margen adicional. Recuerda los cambios que hago aquí afectarán también a otros puntos de rotura. Posteriormente cuando pasemos al paisaje móvil y al retrato móvil, sería mucho más fácil cambiar el diseño para esos puntos de ruptura. Ya que estamos satisfechos con el resultado, podemos hacer clic en este botón Volver a Instancia, y podemos pasar a la siguiente sección, que es nuestra sección de héroes. Nuestra sección de héroes está completamente desorganizada aquí. ¿ Por qué? Porque si recuerdas, para este contenedor, ponemos la dirección de los picos de flujo a horizontal. Eso tenía sentido para el punto de ruptura del escritorio, pero para la tableta y los puntos de ruptura más pequeños, tendría mucho más sentido cambiar la dirección a vertical. Voy a seleccionar este contenedor aquí. Voy a modificar la dirección a vertical. Ya se ve mucho mejor ahora. Entonces voy a alinear todo al centro aquí. Enfriar. Ahora es el momento de seleccionar nuestro rumbo, y luego voy a cambiar su alineación topográfica de izquierda a centro. Voy a alinear todas estas lleva capas al centro. Voy a seleccionar este Hero_Description, y voy a hacer lo mismo aquí, pero su alineación no se ve bien. ¿ Por qué? Porque si selecciono este contenido héroe Bloque Div y me desplaza hacia arriba, puedo abrir esta alineación y ordenar aquí. Aquí puedo modificar las alineaciones del flex child. En este caso, este contenido héroe Bloque Div es el flex child de este contenedor, debido a que nuestro contenedor es un Flexbox, este contenido de héroe es su hijo. Voy a cambiar su alineación a centro. Entonces voy a cambiar el ancho máximo de este contenido de héroe. momento el ancho máximo de este contenido héroe Bloque Div está establecido en 530 píxeles. Eso está bien. No obstante, ya que cambiamos la dirección de nuestro Flexbox de horizontal a vertical, tendría mucho más sentido aumentar aquí el ancho máximo, ya que ahora estamos alineando todo verticalmente. Voy a cambiar el ancho máximo de 530 píxeles a 700 píxeles. Agradable. Entonces voy a seleccionar este Hero_Description, y voy a hacer lo mismo para estos bloques de texto también. Voy a aumentar su ancho máximo a 600 píxeles, pero no está alineado al centro. ¿ Cómo puedo arreglar eso? Bueno, simplemente puedo seleccionar este contenido héroe de la suerte y puedo cambiar su configuración de visualización a Flexbox, y luego puedo cambiar su dirección a vertical. Por último, alinear todo al centro, así como así. En lo que va tan bien. Ahora es el momento de ir a nuestro héroe botones Div block. Como puedes ver, nuestro botón de ponerse en contacto desapareció. ¿Por qué es eso? Eso se debe a que cuando cambiamos la configuración de visualización de nuestro botón en la barra de navegación, nos olvidamos de agregar una clase combo. Déjame mostrarte. Si voy a la barra de navegación y si selecciono estos botón principal, se puede ver que este botón sólo tiene una clase. Esta es la clase base de botón principal. Nuestro botón de ponerse en contacto aquí tiene también esta clase de botón primario. Déjame ir a este bloque Div. Ahí vamos. Si lo selecciono en el navegador, se puede ver que la clase base es botón primario, y aquí tenemos una clase combo. Por lo tanto, tengo dos formas de arreglar esto. Puedo anular la configuración de visualización aquí o puedo seguir adelante y agregar una clase combo al botón en nuestra barra de navegación. Creo que sería mucho más fácil anular el ajuste de pantalla a negro aquí. Ya que tenemos estos héroes clase combo. Voy a ponerlo a negro, y ahí está. Vuelve a aparecer. Pero estos botones deberían sentarse uno al lado del otro. No deberían apilarse uno encima del otro. Voy a seleccionar estos botones de héroe, bloque Div, y luego voy a cambiar su configuración de visualización a Flexbox y la dirección se establece en horizontal. Agradable. Nuestros botones se ven geniales también. Aquí como pueden ver, tenemos tantos márgenes superiores y eso no es lo que queremos. Si selecciono este contenido de héroe, puedes ver que por defecto tiene un margen superior de celda de pico 114. Este es el margen que establecemos en el punto de ruptura del escritorio. Voy a anular eso a 0 ahora, pero aún así tenemos tanto espacio vacío aquí. Voy a seleccionar mi sección. Aquí el margen superior se establece en 100 píxeles. Voy a cambiarlo a 50. Ahora todo se ve genial. Pero, ¿qué pasa con la sección de imágenes? Como se puede ver esta imagen, se ve tan grande. Adelante y arreglemos eso. Déjame seleccionar esta imagen de héroe, bloque Div, y voy a entrar y dejarme elegir esta imagen principal. Como puedes ver, no le dimos ninguna clase. Voy a seguir adelante y darle una clase. Ahora, escribamos Hero__ Image__Main. Puedo hacer doble clic en él. Como puede ver, el ancho se establece en auto. Voy a disminuirlo a algo alrededor de 500 y tal vez 60 o 70 píxeles. Aquí puedes probar diferentes números si no tienes un número específico y ver si se ve bien o no. Ahora se ve mucho mejor. Estas tarjetas también son demasiado grandes. Voy a seleccionar estas Tarjeta Héroe 1, y voy a reducirla un poco así como así. Aquí el ancho es de 328 píxeles. Para este, también lo voy a poner en 328. Pero como puedes ver aquí, no tenemos suficiente espacio entre nuestros botones y nuestras imágenes. Bueno, voy a seleccionar esta imagen de héroe, y le voy a dar algún margen superior. Permítanme aumentar el margen superior a alrededor de 40 píxeles. Nuestra sección de héroes se ve muy bien ahora. Ahora podemos pasar al siguiente apartado. Si selecciono esta cuadrícula, se puede ver que en tablet no tenemos tanto espacio. Por lo tanto, podemos quitar uno de estos logotipos cuando vamos a la tableta o puntos de ruptura más pequeños. ¿ Cómo podemos hacer eso? Eso es tan sencillo. Simplemente puedo seleccionar este bloque Amazon Div, el último logotipo. Voy a darle una clase combo porque vamos a cambiar su configuración de visualización a ninguno, y no vamos a afectar a otros logotipos. Escribamos aquí Amazon. Entonces voy a cambiar su configuración de visualización de flex a ninguno. Ahí vamos, desapareció, pero aquí tenemos tanto espacio. ¿ No sería mejor si pudiéramos tener dos líneas de logo en lugar de una línea? Yo creo que sí. Voy a editar esta cuadrícula. Si selecciono este logos de cuadrícula, y si hago clic en este botón rosa aquí, simplemente puedo agregar una fila más y puedo quitar algunas de estas columnas. Permítanme quitar estas columnas. Ahora tengo una cuadrícula de dos por dos. Voy a cambiar el hueco aquí para la columna a 40 píxeles. Déjame pegarle a “Done”. Se ven bien, pero no están centrados, como se puede ver aquí están alineados al lado izquierdo de sus celdas. ¿ Cómo podemos arreglar eso? Si bien esta Grid_Logos está seleccionada, puedo cambiar su alineación al centro y aquí, centro también. Ahora se ven increíbles. La sección de nuestro cliente también está lista. Ahora podemos pasar al siguiente apartado. Aquí tenemos la sección de proyectos recientes, y creo que no necesitamos modificar nada aquí. Permítanme cambiar la dimensión de esta pantalla para ver si necesitamos cambiar algo o no. Si agarro este mango aquí del lado derecho y arrastro en términos de fluidez, se ven bien. Pero aquí tenemos un problema. Como puedes ver, estos botón Aprender más, bajan un poco. Eso se debe a que esta descripción del proyecto tiene algunos márgenes inferiores. Voy a seleccionarlo, y voy a disminuir este margen de 40 a quizá 10. Ahora se ve mucho mejor. Ahí vamos. Ahora podemos ir a la otra sección, que es la sección testimonial. ¿ Qué debemos hacer aquí? Bueno primero, necesitamos disminuir su margen superior. Voy a seleccionar esta sección, y voy a disminuir su margen superior de 200 píxeles a 100 píxeles porque ahora es demasiado. Se ve mucho mejor, entonces voy a seleccionar este rubro testimonial. Voy a establecer el ancho máximo para que eso tenga un verdadero texto de línea aquí. Voy a escribir 400 pixeles. Ahí vamos. Entonces voy a modificar su alineación de texto aquí para centrar y déjame aumentar la altura de línea a 150. Cincuenta por ciento y lo siguiente que necesitamos arreglar aquí es el fondo de nuestra órbita. Como pueden ver, nuestra órbita se ha repetido. Voy a seleccionar mi sección y voy a dirigirme a los fondos aquí. Si hago clic en esta imagen de órbita, desde aquí se puede ver que la posición está configurada parte superior izquierda y la opción de mosaico está habilitada. Voy a poner el azulejo al azulejo del amanecer y luego lo voy a reposicionar al centro y finalmente, voy a cambiar su tamaño para cubrir en vez de contener, ahora se ve genial. Lo siguiente que voy a modificar aquí es el tamaño de estos Memojis. Si los selecciono aquí, se puede ver que su ancho y alto se establecen en 150 píxeles. Ya que tenemos menos espacio en una tableta, voy a seguir adelante y disminuirlo a 130 por 130 píxeles. Dado que estos Memojis tienen sus propias clases de combo, los cambios que hago a este primer Memoji no se aplican a otros Memojis aquí. Podemos o bien ir adelante y modificar el tamaño de cada memoji, o simplemente podría deshacer esta operación, es Comando Z o CTRL+Z. puedo eliminar estas clase combo. Se ha movido hacia abajo, eso está totalmente bien. Entonces puedo disminuir su ancho y altura a 130 por 130 píxeles y de nuevo, le voy a agregar su clase combo, uno allá vamos. Nuestra sección testimonial también se hace. Ahora pasemos a la sección Servicios. Creo que todo se ve bien aquí, pero hay un problema. Si solo disminuyo esta dimensión, se puede ver que este botón Aprender más se mueve hacia abajo y no está alineado con otros botones aprender más. Eso es un problema, entonces, ¿cómo podemos arreglarlo? Voy a seleccionar esta descripción del proyecto y voy a aumentar su margen inferior de 10 a, digamos, 50 píxeles. Entonces voy a seleccionar el bloque div contenido de servicio. Es el bloque div que contiene el texto de servicio y este botón, como podemos ver aquí. Voy a poner un máximo específico a eso. Ahora mismo está configurado para auto lo voy a ajustar al 100 por ciento, que ocupa toda la altura disponible de mi tarjeta, así como eso ahora está fijo. Déjame revisarlo una vez más, todo se ve perfecto ahora. Ahora pasemos al siguiente apartado, que es nuestro CTA. Como pueden ver, nuestro botón desapareció aquí de nuevo. Este es el mismo problema que tuvimos con este botón aquí, con este botón de obtención táctil por lo que necesitamos simplemente anular su configuración de pantalla para bloquear. Voy a hacer doble clic en esta sección de CTA y si voy al contenedor y busco mi botón dentro del formulario aquí, puedo seleccionarlo y lo puedo anular para bloquear. No hay nada más que tengamos que hacer, todo se ve muy bien. Pero, ¿qué pasa con el pie de página? Déjenme revisar. El pie de página se ve bien también. Lo único que voy a hacer es disminuir su margen superior porque aquí tenemos demasiado espacio. Voy a hacer doble clic en él. Aquí como puedes ver, tiene un margen superior de 200 píxeles. Puedo disminuirlo a 100 pixeles, ahora se ve mucho mejor. Yo voy a hacer lo mismo para la sección CTA. Si hago doble clic en él, se puede ver que su margen superior está establecido en 200, lo voy a establecer en 100 aquí para tener un espaciado consistente. ¿ Qué pasa con esto, nuestros servicios aquí? Lo mismo aquí también. obstante aquí no tengo ninguna clase combo, así que voy a agregar una clase combo aquí. Voy a escribir nuestros servicios y luego voy a disminuir su margen superior de 200 a 100 píxeles. Ahora se ve mucho mejor. Pero aquí como pueden ver, todavía tenemos el problema con este botón Aprender más. Aquí, si selecciono esta descripción del proyecto, se puede ver que es margen inferior está establecido en 50, es demasiado, así que lo voy a disminuir a 10 píxeles, y ahora el problema está resuelto. Lo último que voy a hacer aquí es seleccionar esta sección, esta sección de proyecto reciente, y voy a disminuir su margen superior de 200 a 100 píxeles. Ahora todo se ve genial. Adelante y revisemos todo. Nuestra barra Nav se ve bien, voy a comprobar su fluidez. Nuestra sección de héroes se ve bien, me voy a desplazar hacia abajo, nuestra sección de logotipos luce bien, los proyectos recientes, la sección testimonial, después tenemos nuestros servicios, la sección CTA, y nuestro pie de página. Todo se ve muy bien. Nuestra página de inicio está hecha, pero ¿qué pasa con otras páginas? Ahora es el momento de seguir adelante y hacer que nuestras otras páginas respondan también, como contactarnos y la página del proyecto. Déjame ir a las páginas. Desde aquí voy a ir a la página Contáctenos. Como puedes ver, todo listo se ve bien. ¿ Por qué es eso? Eso es porque aquí usamos una grilla. Cuando usas cuadrículas en lugar de flexboxes, responde de forma predeterminada. Como puedes ver, es fluido y todo se ve muy bien, por lo que no necesitamos cambiar el diseño por completo. Lo único que tenemos que hacer aquí es seleccionar nuestro botón y simplemente anular esa configuración de visualización de ninguno a bloque, así como así. Ahora puedes ver que se ve genial, bonito, si previsuo eso. Una cosa más que noté aquí es este margen superior. Tenemos tanto espacio aquí en la parte superior. Voy a seguir adelante y a arreglar eso rápidamente. Si selecciono esta sección, se puede ver que tiene un margen superior de 200 píxeles. Voy a disminuirlo a 100 pixeles y ahí vamos, nuestra página Contáctanos también responde. Ahora sigamos adelante y revisemos nuestra página del proyecto. Si voy a la página de colección CMS y si voy a la página del proyecto, aquí puedo comprobar si todo se ve bien o no. Permítanme disminuir la dimensión, hasta ahora tan buena. No necesitamos modificar la parte superior. ¿ Qué hay de aquí? Bueno, creo que podemos aumentar el tamaño de fuente de este texto de alcance, pero no sólo para la tableta, podemos aumentarlo para el escritorio también. Voy a ir al punto de ruptura del escritorio por un segundo y mientras está seleccionado, lo voy a aumentar a 20 píxeles. Entonces, voy a aumentar la altura de la línea al 150 por ciento. Se ve mucho mejor. Nos olvidamos de aumentarlo antes, y ahora está arreglado. Déjame ver si necesito cambiar algo más aquí, se ve bien. ¿ Y estas tarjetas de otros proyectos? Déjame ver, no, se ven geniales. ¿ Y la sección CTA? Se ve muy bien también, el pie de página se ve bien también. No necesito modificar nada más. Esa es la belleza de crear sitios web con Webflow, mayoría de las cosas responden por defecto, así que no necesitamos hacer tantos cambios diferentes. Muy bien chicos, eso es todo por el punto de ruptura de la tableta. Modificamos con éxito nuestra Página de Inicio, Contáctenos página y la página de Proyecto. Ahora es el momento de pasar al paisaje móvil. Esta es la tarea de nuestra siguiente lección. Nos vemos en el siguiente video. 58. Paisaje móvil: Oye, ahora es el momento de seguir adelante y trabajar en el punto de ruptura del paisaje móvil. ¿ Estás listo? Empecemos. Voy a ir al panorama móvil aquí, y vamos a ver si necesitamos hacer algunos cambios aquí. Este rubro se ve un poco grande para la dimensión del paisaje móvil. Por lo tanto, lo voy a seleccionar y voy a disminuir su tamaño de fuente de 60 píxeles a 40 píxeles. Yo voy a hacer lo mismo a esto aquí, descripción. Voy a seleccionarlo. Como puedes ver su tamaño está establecido en 20 píxeles, voy a establecerlo en 17 píxeles. No necesitamos modificar nuestros botones. Esta sección se ve bien también. No obstante, para el paisaje móvil y el retrato móvil, creo que tiene mucho más sentido ocultar estas dos tarjetas pequeñas, porque en las pantallas móviles no tenemos tanto espacio. Por lo tanto, no necesitamos hacer ruidoso nuestro diseño. Voy a seleccionar esta carta de héroe 1, y voy a seguir adelante y poner su configuración de pantalla en ninguno, aquí también para estas cartas de héroe 2. Ahí vamos, y están escondidos en el paisaje móvil y en el retrato móvil. Porque como recuerdas, los cambios que hacemos a nuestros puntos de ruptura bajarán en cascada. Pasemos a la siguiente sección. Nuestra sección de héroes se ve bien. Voy a desplazarme hacia abajo. ¿ Y la sección de clientes? Se ve bien también. No obstante, aquí tenemos tanto espacio, así que voy a seleccionar esta sección de clientes aquí, y luego voy a establecer su margen superior a cero en lugar de 130 píxeles, así como así. Ahora, se ve mucho mejor, porque cuando se trata de interacción móvil no queremos que el usuario se desplace tanto para poder consumir el contenido. Por lo tanto, si podemos, deberíamos disminuir los márgenes entre nuestras secciones. ¿ Qué pasa con la sección de proyectos recientes, aquí tenemos un problema. Como puedes ver, estas tarjetas están fuera de nuestra pantalla. Ahí vamos. ¿ Cómo podemos arreglar eso? Bueno, la mejor solución es simplemente seleccionar esta lista de colección. Si recuerdas, usamos la cuadrícula para eso. Voy a modificar la pantalla. Aquí tenemos una fila y tres columnas. Voy a hacer clic en este botón rosa, y voy a quitar dos columnas y añadir dos filas para apilar verticalmente. Déjame seguir adelante y quitar dos columnas aquí, y añadir dos filas. Ahí vamos, pero aquí tenemos un problema. Como puedes ver, esta tarjeta no ocupa todo el ancho de su padre. ¿ Cómo podemos arreglar eso? Si sigo adelante y selecciono aquí mi bloque div, este bloque div de autos de proyecto, puedes ver que establecemos un ancho máximo para eso. Voy a cambiar este ancho máximo de 340 píxeles a 100 por ciento para ocupar todo el ancho de su elemento padre. Ahí vamos. Ahora retoma todo el ancho de su celda en nuestra cuadrícula y el problema está resuelto. Ahora déjame comprobarlo. Ahí vamos. Todo se ve fluido, se ve increíble. ¿ Y la siguiente sección? Wow, aquí todo está desorganizado. Adelante y arreglemos eso. En primer lugar, voy a seleccionar este encabezado y voy a disminuir su tamaño de fuente de 40 píxeles a 30 píxeles. Además, voy a aumentar su ancho máximo de 400 píxeles a 500 píxeles, así como así. Entonces voy a seleccionar aquí nuestro contenedor. Si me desplaza hacia arriba, se puede ver que la justificación está configurada en espacio alrededor. Voy a cambiarlo a centro. Permítanme seleccionar este texto testimonial y disminuir su tamaño de fuente a 17 píxeles. Es demasiado grande para nuestra pantalla móvil, y le voy a dar algunos márgenes inferiores. Eso es a 30 píxeles de margen inferior aquí. Voy a seleccionar mi rumbo aquí, y voy a aumentar su margen inferior a 30 píxeles para tener un espaciado consistente para todos nuestros elementos. Ahora todo se ve bien. Como se puede ver en términos de fluidez, se ve bien, así que estamos bien para ir. Pasemos a la siguiente sección. Aquí tenemos el mismo problema que tuvimos para esta reciente sección de proyectos. La solución es la misma. Voy a seguir adelante y seleccionar esta grilla de servicios, y luego voy a cambiar esta grilla. Voy a quitar dos columnas. Entonces voy a sumar dos filas aquí. Entonces voy a seleccionar esta tarjeta de servicio y cambiar su ancho máximo de 340 píxeles a 100 por ciento, que ocupa todo el ancho de su elemento padre. Todo se ve bien excepto este ícono. Vamos a seleccionarlo. Como puedes ver, se trata de un niño flex, y si nos dirigimos al dimensionamiento aquí en el lado derecho, puedes ver que está configurado para encogerse si es necesario. Tenemos otras dos opciones. Tenemos crecer si es posible y tenemos no encoger ni crecer. Voy a ponerlo para que no se encoja ni crezca, anuncio allá vamos, se ve bien ahora. No obstante, como tiene una clase combo, el cambio solo se aplicó a este bloque div en particular. Voy a restablecer esta propiedad, mantenga pulsada la tecla “Opción” o la tecla “Alt” en su teclado y haga clic en ella. Entonces voy a quitar esta clase de combo uno. Ahora voy a cambiar el tamaño para no encogerme ni crecer. Por último, le voy a añadir la primera clase combo. Ahora, todo se ve bien. Déjame comprobarlo. Pero aquí tenemos otro problema. Como podemos ver, esta descripción del proyecto no tiene suficiente margen inferior. Si bien estamos en el punto de ruptura del paisaje móvil, voy a seleccionar esta descripción del proyecto y lo voy a aumentar de 10 píxeles a 40 píxeles. Ahora se ve mucho mejor. ¿ Puedes ver lo fácil que es hacer que tu sitio web sea receptivo? Solo necesitas modificar los estilos en diferentes puntos de rotura. Esta sección se ve bien también. ¿ Y la sección CTA? Esta sección requiere algunas modificaciones, así que sigamos adelante y hagamos algunos cambios. En primer lugar, voy a seleccionar este encabezado y voy a disminuir su tamaño de fuente de 40 píxeles a 30 píxeles. Este subtítulo se ve bien, y aquí nuestra forma tiene una dirección horizontal. Voy a cambiarlo a vertical, pero este botón no ocupa todo el ancho de su padre. Bueno, déjame seleccionar aquí este botón “Suscribirse”, y voy a ajustar su ancho al 100 por ciento. Voy a quitar este margen izquierdo aquí de 20 píxeles a cero. Agradable. También voy a establecer una altura específica a eso, así que déjame escribir 80 píxeles. Lo único que queda es agregar aquí algunos márgenes superiores. Voy a darle un margen superior de 20 píxeles, así como eso. Ahora déjame volver a mi interior. Aquí está. Se ve increíble. ¿No es así? Lo último que necesitamos cambiar aquí es nuestro pie de página. Como puedes ver, este diseño no se ve bien para nuestro paisaje móvil y retrato móvil definitivamente, entonces, ¿qué debemos hacer? Aquí tenemos una dirección horizontal. Voy a hacer doble clic en este pie de página, y voy a seleccionar mi contenedor, y luego voy a modificar la dirección de horizontal a vertical. También voy a cambiar la alineación a centro. Entonces voy a seleccionar este bloque div de contenido de pie y alinear todo al centro. También voy a seleccionar esta dirección y cambiar su alineación topográfica al centro. Por último, voy a seleccionar este bloque div de contenido de pie de página, y voy a agregar algunos márgenes inferiores aquí. Añadamos aquí un margen inferior de 30 píxeles. Se ve fantástico. Nuestra página de inicio se ve bien. Ahora sigamos adelante y modifiquemos otras páginas. Voy a ir a mi página de contacto con nosotros. Veamos cómo se ve aquí. Aquí tenemos un problema. En primer lugar, voy a seleccionar este rubro y voy a disminuir su tamaño de fuente de 60-40. Entonces, necesitamos modificar el diseño de nuestro formulario. Voy a seleccionar este envoltorio de formulario de contacto, la cuadrícula que creamos. Si hago clic en este botón rosa, se puede ver que tenemos seis columnas y seis filas. En mi opinión, no es una buena cuadrícula para estos paisajes móviles e incluso para retrato móvil. En lugar de tener estos dos campos de texto, el correo electrónico y los campos de texto del teléfono sentados uno al lado del otro. Voy a hacer que todos estos campos de texto se apilen uno encima del otro. Déjame seguir adelante y quitar tres columnas de aquí, así como así, y también voy a quitar una fila. Nada cambió. Así es, porque necesitamos seguir adelante y seleccionar manualmente nuestro bloque div, el primero. Como puedes ver este bloque div ocupa seis columnas. Eso no es lo que queremos. Voy a dar click en este pequeño círculo y arrastrarlo hacia el lado izquierdo hasta que ocupe tres celdas. Genial, voy a hacer lo mismo para este bloque div mensaje también. Este es nuestro último bloque div. Sigamos adelante y hagamos que ocupe sólo tres celdas. Se ve bien, pero ¿qué pasa con este botón? Yo lo voy a seleccionar y voy a hacer lo mismo aquí. Ahí está. Ahora nuestro diseño se ve mucho mejor. Vamos a previsualizarlo. Aquí está nuestra forma, se ve muy bien en términos de fluidez y capacidad de respuesta. ¿ Has notado que nuestro pie de página ha sido cambiado también en esta página? Ya que estamos usando símbolos, cuando hagamos que nuestros símbolos respondan en una página, cambiará también en otras páginas. Ahora pasemos a la página del proyecto. Voy a seguir adelante y déjame seleccionar esta plantilla de proyectos, cool. Veamos qué tenemos aquí. Como puedo ver, el encabezamiento se ve bien. El tipo de página del proyecto se ve bien. En primer lugar, voy a seleccionar este envoltorio tipo de proyecto y voy a cambiar su dirección a vertical, agradable. Entonces déjame seleccionar este bloque de texto tipo página del proyecto y vamos a agregarle algunos márgenes inferiores. Voy a agregar 10 píxeles aquí, se ve bien. ¿ Qué más necesitamos hacer aquí? Como se puede ver aquí, el margen superior de esta imagen es demasiado. Si selecciono este envoltorio tipo de proyecto, se puede ver que tiene un margen inferior de 80 píxeles. Voy a seguir adelante y disminuirlo a 40 pixeles. Ahora se ve mucho mejor. Voy a desplazarme hacia abajo. Aquí como puedes ver tenemos demasiado espacio también. Seleccionemos aquí estos textos ricos. Entonces voy a disminuir su margen superior de 70 píxeles a 20 píxeles. Además, voy a seguir adelante y disminuir su tamaño de fuente de 20 píxeles a 17 píxeles. Porque en este momento estamos en las pantallas móviles. Voy a desplazarme hacia abajo, voy a seleccionar estos otros proyectos encabezados, y voy a disminuir su tamaño de fuente a 30 píxeles. Aquí como pueden ver tenemos demasiado espacio. Déjame seleccionar mi colección esta envoltura, y voy a disminuir su margen superior de 70 píxeles a 30 píxeles. Voy a desplazarme hacia abajo. Todo se ve bien. Aquí todo se ve bien también. Ahora déjame comprobar la fluidez de mis elementos, bonito. Todo es receptivo. ¿ Qué tal aquí, genial. Creo que si selecciono este tipo de página de proyecto y agrego más márgenes de botón, sería mucho mejor. Voy a establecer el margen inferior en 20 píxeles. Ahora se ve mucho mejor. Aquí no tenemos espaciado consistente. Voy a seleccionar este envoltorio tipo de proyecto. Añadí un margen inferior de 40 píxeles aquí. Para estos texto enriquecido, agregué un margen superior de 20 píxeles. Voy a aumentar este margen superior a 40 píxeles para tener un espaciado consistente. Ahora se ve genial. Muy bien, chicos, eso es todo por este video. Modificamos con éxito las propiedades CSS de nuestros elementos en los puntos de ruptura del paisaje móvil y comprobamos la fluidez de todos nuestros elementos. Espero que hayas disfrutado de este video y te veré en el siguiente. 59. Retrato móvil: Hey, bienvenido de nuevo. En este video, vamos a seguir adelante y hacer que nuestro sitio web receptivo en el punto de ruptura del retrato móvil. Si estás listo, empecemos. Voy a ir al punto de ruptura del retrato móvil y veamos qué tenemos aquí. Voy a comprobar la fluidez. La mayoría de nuestros elementos se ven bien porque ya hicimos algunos cambios en el punto de ruptura del paisaje móvil. No necesitamos hacer tantos cambios aquí. Lo primero que noto aquí es el tamaño de fuente de este encabezamiento. Para el retrato móvil, se ve demasiado grande. Voy a seleccionarlo y voy a disminuir el tamaño de la fuente a 30 píxeles. El tamaño de fuente de esta descripción de héroe se ve bien. No voy a cambiar eso. ¿ Y estos botones? Se ven bien, pero vamos a ver si hago esta pantalla más pequeña, cómo se ven. Como pueden ver, se encogerán y eso no es lo que quiero. Voy a seleccionar este bloque, botones de héroe. Déjame desplazarme hacia arriba. El sentido de este flexbox es horizontal. Voy a cambiarlo a vertical. Entonces voy a seleccionar este botón de “Póngase en contacto” y déjame quitar su margen derecho. Voy a ponerlo a 0, bonito. Por último, voy a agregarle algunos márgenes inferiores. Establezcamos su margen inferior en 20 píxeles. Ahora si reviso la fluidez de mis elementos, se puede ver que ya no se encogen. Agradable, la imagen se ve bien. Ya retiramos esas tarjetas. Los logotipos también se ven bien. No obstante, ya que aquí tenemos menos espacio para trabajar. Creo que podemos seguir adelante y modificar el relleno izquierdo y derecho de nuestras secciones. ¿ Qué opinas? Creo que es una buena idea? Voy a seleccionar esta sección. Como se puede ver, el relleno izquierdo y derecho se establece en 30. Voy a disminuirlo a 20 pixeles. Pero como voy a aplicar este cambio a Todas las secciones, primero, voy a quitar la clase combo de héroes porque necesito hacer este cambio a mi clase base, esta clase de sección. voy a quitar esta clase de combo de héroes. Después voy a mantener presionada la tecla Opción o la tecla Alt en mi teclado y disminuir el relleno a 20 píxeles. De nuevo, le voy a añadir la clase combo de héroes. Agradable. Ahora, como se puede ver, se ha modificado el relleno izquierdo y derecho de todas las secciones. Si selecciono esta sección de clientes, ahí vamos, se ha cambiado el relleno. Si selecciono esta sección de proyectos recientes, ahí está, y ahora se ven mucho mejor. El apartado de proyectos recientes luce bien. Yo me voy a desplazar por aquí. Creo que necesitamos quitar algunos de estos emojis porque esta sección es demasiado ruidosa. ¿ Cómo puedo quitar estos emojis? No puedo simplemente golpear Retroceso o Eliminar porque en ese caso se eliminará de todos los puntos de rotura. Por lo tanto, voy a establecer su configuración de visualización en ninguno. Voy a seleccionar este y voy a hacer lo mismo. Entonces voy a seleccionar a estos dos emojis y vamos a cambiar su posición aquí. Vamos a ponerlo en la parte superior izquierda. Para este lo voy a poner arriba a la derecha. Vamos a moverlas un poco hacia abajo. A lo mejor podría cambiar un poco su posición superior. Voy a ponerlo al 5 por ciento para ambos. Se ve bonito. ¿ Y el tamaño de fuente aquí? El tamaño de la fuente se ve bien. En mi opinión. No necesitamos modificar eso, pero aquí tenemos demasiado espacio. A lo mejor puedo seleccionar esta sección y puedo disminuir su altura de 622 píxeles a tal vez 550 píxeles. Ahora se ve mucho mejor, en mi opinión. Lo último que voy a hacer es cambiar el tamaño de estos emojis. Voy a seleccionar este emoji y voy a disminuir su ancho y altura a 100 píxeles. Yo voy a hacer lo mismo aquí ya que tienen algunas clases de combo. Se ven mucho mejor ahora. Ahora que los hice más pequeños, voy a cambiar de posición otra vez. Déjame moverlo al lado izquierdo un 5 por ciento. Voy a mover este emoji al lado derecho en un 5 por ciento. Increíble. Déjame comprobar la fluidez de mis elementos. Agradable. Todo se ve receptivo y se ve muy bien. Pasemos al siguiente apartado, que son nuestros servicios. Estas tarjetas se ven geniales. No necesitamos hacer ningún cambio. Voy a ir a la siguiente sección, que es la sección CTA. Primero voy a seleccionar estos rubro CTA y lo voy a alinear con el centro en la sección de tipografía, probablemente pueda aumentar también la altura de línea al 150 por ciento. ¿ Qué pasa con esta forma? Bueno, puedo seleccionar este bloque de formulario y su ancho está establecido en auto. Puedo ajustarlo al 90 por ciento y voy a seleccionar este campo de texto dentro del rapero de campo de texto CTA, y voy a cambiar su ancho al 100 por ciento. Ahora se necesita un 100 por ciento de su padre sin nada más y no se necesita nada más. En realidad, se ve bastante bien. Pie de página se ve bien también. Nuestra página de inicio está lista. Vamos a comprobarlo una vez más. Si trato de hacer aún más pequeña esta dimensión, estarán fuera de nuestra ventanilla. Bueno, eso podemos arreglarlo. Podemos simplemente seleccionar estos logotipos de cuadrícula y luego modificar la cuadrícula. Podríamos simplemente agregar dos filas más y simplemente eliminar una de estas columnas. Igual que eso. Ahora ya no enfrentaremos este tema. Nuestra página de inicio se ve increíble. Ahora sigamos adelante y echemos un vistazo a otras páginas. Voy a ir a la página Contáctenos aquí todo se ve bien. Sólo voy a previsualizarlo y déjame ver si funciona bien en términos de fluidez, se ve muy bien. Eso se debe a que usamos grilla. Nuestro botón se ve bien también. ¿ Y nuestra página de proyecto? Déjame ir a la página del proyecto aquí y déjame comprobar si funciona perfectamente también. Todo se ve bien. Como puede ver, necesito aumentar la altura de línea de este tipo de página de proyecto. Voy a seleccionarlo y voy a aumentar la altura de línea al 150 por ciento. Ahora se ve mucho mejor. Comprobemos otros elementos. El tamaño de la fuente se ve bien. El apartado de otros proyectos también se ve bien. Voy a desplazarme hacia abajo la sección CTA se ve bien ya que es un símbolo. Pero aquí en la sección CTA tenemos un tema y ese es el relleno. El relleno aquí no es consistente. Para otras secciones utilizamos un relleno de 20 píxeles izquierdo y derecho. Pero para estos CTA, voy a seleccionar esta sección. Como puedes ver, tenemos el relleno de 20 píxeles izquierdo y derecho. Veamos cómo podemos arreglar eso. Si selecciono este bloque de formulario, ya establecimos el ancho en 90 por ciento. Creo que podemos ajustarlo al 100 por ciento para solucionar este problema. A ver si enfrentaremos algún tema en términos de fluidez. Voy a volver a mi incienso. Aquí voy a previsualizarlo. No, se ve bien. Igual que eso. Ahora se ve mucho mejor. Muy bien chicos ahora tenemos un sitio web totalmente receptivo. ¿ Viste lo fácil que es trabajar con puntos de ruptura y propiedades CSS? Si te apegas a las reglas y los conceptos básicos, todo es fácil. Voy a seguir adelante y revisar todas las páginas ahora. Voy a ir a la página de inicio. Voy a previsualizarlo. El escritorio se ve bien. Todo se ve muy bien aquí en todos los dispositivos. Permítanme pasar a otras secciones aquí, logotipos. Agradable. ¿Y los proyectos recientes? Se ve muy bien en todos los puntos de ruptura. ¿ Y qué pasa con el testimonio? Genial. Nuestros servicios, déjame comprobarlo. Ups, aquí tenemos un problema con los iconos. Déjame seguir adelante y arreglarlo. Voy a seleccionar este icono de servicio y voy a cambiar su tamaño para no encoger ni crecer. Voy a hacer lo mismo por todos ellos. Agradable, y vamos a comprobarlo una vez más. Enfriar. ¿Y la sección CTA? Se ve increíble y el pie de página se ve genial también. Ahora vamos a la página Contáctenos y la voy a previsualizar. La versión de escritorio se ve bien, la tableta se ve bien también. paisaje móvil se ve increíble y retrato móvil. Pero si vamos a la página del proyecto, Vamos a comprobarlo. Voy a previsualizarlo. Se ve bien aquí en el escritorio. Voy a ir a las tabletas. Ahí vamos. Voy a desplazarme hacia abajo todo se ve bien. Déjame ir al paisaje móvil. Todas las secciones se ven geniales y retratos móviles, bonitos. Algo que noté aquí es cuando estamos en el punto de ruptura del escritorio y cuando hago la pantalla más pequeña, así como así, se puede ver en algún momento estos botón Contáctenos toca los bordes de nuestros informes. No es lo que queremos, así que tenemos que arreglarlo. ¿ Cómo podemos arreglar eso? Bueno, déjame seguir adelante y ir a mi Navbar. Si selecciono esta barra de navegación en el navegador, se puede ver que no hay relleno. Si bien estoy bajo punto de ruptura de escritorio, voy a agregar un relleno de 30 píxeles a la izquierda y a la derecha aquí. Déjame mantener presionada la tecla Opción o la tecla Alt en mi teclado y agregar algo de relleno izquierdo y derecho a mi barra de navegación. Pero aquí tenemos otro problema, este contenedor tiene algo de relleno también. Voy a seguir adelante y quitar el relleno aquí de 30 píxeles a 0. También, el relleno correcto va a ser 0 también. Ahora veamos si funciona. Yo lo voy a hacer más pequeño. Ahí vamos. En el escritorio, se ve muy bien ahora porque tenemos estos acolchado adicional en el lado derecho e izquierdo. Pero ¿y si voy a la tableta? A ver qué pasa. Aquí tenemos este relleno adicional y necesitamos seguir adelante y modificarlo. Si bien estoy en el punto de ruptura de la tableta, voy a seleccionar la “Navbar”, y voy a restablecer este relleno de 30 píxeles izquierdo y derecho. Voy a ponerlo en 0. Aquí voy a ponerlo a 0 también. Agradable, y veamos qué pasa ahora. Ahí vamos. Se ve bien si voy a tablet, se ve bien si voy al paisaje móvil, todo está bien y retrato móvil. Muy bien chicos nuestro sitio web ahora es totalmente receptivo. Espero que lo hayas disfrutado y te veo en el siguiente video. 60. Animaciones e interacciones: parte 1: Cualquier sitio web moderno hoy en día utiliza animaciones e interacciones con el fin de mejorar la usabilidad y la experiencia del usuario, y eventualmente, puede mejorar la tasa de conversión. Echemos un vistazo a la página web de Apple como ejemplo, si me desplaza aquí abajo, se puede ver que estos elementos se desvanecen. Voy a desplazarme hacia abajo. Se puede ver que tenemos esta interacción, este bloque de texto está animado. Voy a desplazarme hacia abajo. Aquí cuando me desplaza, puede ver que estos textos bloquean escalas hacia abajo mientras me desplaza hacia abajo, y estos elementos, esta imagen y este bloque de texto se desvanecen. Estas son la animación que marcan la diferencia cuando se trata de desarrollo web, construir un sitio web receptivo es una cosa, pero hacer que se vea más interesante es otra cosa. Al agregar interacciones y animaciones a nuestro sitio web, podemos mejorar la experiencia del usuario y nuestros usuarios realmente disfrutan de interactuar con nuestro producto. Déjame mostrarte cómo funcionan las interacciones en Webflow. Cuando se trata de interacciones, tenemos dos componentes principales con los que trabajar, el gatillo y la animación. ¿ Qué es un gatillo? Bueno, un gatillo es algo que desencadena la animación. En palabras simples, cuando algo sucede, entonces debería suceder otra cosa. Por ejemplo, si se hace clic en un botón, debería crecer. Si el usuario pasa por encima de algo, otro objeto debería moverse. En general, tenemos dos tipos de desencadenantes. Tenemos el disparador de elementos y tenemos el disparador de página. Déjame mostrarte cómo funciona. Si me dirijo al panel de interacciones del lado derecho aquí, como pueden ver hay este icono de rayo, voy a hacer clic en eso. Aquí es donde podemos crear un gatillo. Como mencioné antes, tenemos el disparador de elementos y tenemos el disparador de página. Bueno, ¿cuál es la diferencia entre el disparador de elementos y el disparador de página? Utilizamos el disparador de elementos, cuando el gatillo es un elemento, por ejemplo, un botón, una imagen, un bloque de texto, un encabezado, cualquier cosa. Podemos seleccionar nuestro elemento y luego podemos crear este elemento disparador. Cuando el usuario interactúa con ese elemento, desencadena nuestra animación. Pero ¿qué pasa con el gatillo de página? Bueno, el disparador de página desencadena nuestra animación cuando se cambia el estado de nuestra página. Por ejemplo, si hago clic en este icono más, se puede ver que tenemos el ratón moviéndose en la ventanilla, mientras que las páginas se desplazan, carga de página, página se desplazan. En este caso, no necesitamos hacer clic en algo ni interactuar con ningún elemento. El gatillo es nuestra propia página, por lo que podemos especificar cuándo se carga completamente la página, luego reproducir esta animación en particular. Permítanme mostrarles aquí algunos ejemplos. Como se puede ver aquí, tengo algunos elementos simples. Tengo un círculo, aquí tengo un cuadrado. Voy a previsualizar esto y les voy a mostrar algunos ejemplos del disparador de elementos. Aquí, este círculo es nuestro gatillo. Ya creé una interacción para eso, y cuando hago clic en ella, algo debería pasar. Es necesario tener en cuenta que el gatillo no siempre debe animarse a sí mismo, por lo que si hago clic en este círculo, la animación no necesariamente debe aparecer en este objeto. Puedo establecer un gatillo en este objeto y puedo hacer que otros elementos se animen. En este caso, si hago clic en este círculo, este cuadrado debería moverse hacia el lado derecho. Déjame mostrarte. Ahí vamos. En este caso, el círculo es nuestro gatillo, y una vez que se activa, este cuadrado se mueve. Pero ¿y si quiero animar el gatillo en sí? Nosotros también podemos hacer eso. Por ejemplo, podemos establecer un disparador de elementos, y podemos decir, si el usuario pasa por encima de estos elementos, estos elementos deberían cambiar. Por ejemplo, debería crecer, debería moverse, debería desvanecerse, cualquier cosa que puedas imaginar, así que si me paso sobre estos círculo naranja, obtenemos esta animación de rebote. En este caso, el gatillo en sí es animado. Te voy a mostrar otro ejemplo. Si hago click en esta plaza del lado derecho, se animará también, así como así . Recapitulemos. Para entender cómo funcionan las animaciones, es necesario entender cómo funciona la interacción. En general, tenemos dos componentes principales. Tenemos el gatillo y la animación. Si nuestro gatillo se activa, entonces debería ocurrir la animación. Déjame mostrarte cómo creé estas animaciones. Voy a ir con mi diseñadora. Si voy a las interacciones, aquí como pueden ver, no tengo ningún disparador, así que voy a seguir adelante y seleccionar este círculo, y una vez que lo seleccione, se puede ver que el disparador de elementos que ya creamos está ahí . Te voy a quitar eso por un segundo porque te voy a mostrar cómo lo creé. Si hago clic en este ícono, puedo eliminar eso. Ahora no tengo ningún disparador de elementos. Ya que este círculo va a ser nuestro gatillo, lo voy a seleccionar, y luego voy a apretar este botón más aquí. Aquí, puedo elegir entre diferentes opciones. A ver qué tenemos. Tenemos mouse-click tap, tenemos mouse hover, tenemos mouse mover sobre el elemento, tenemos desplazamiento hacia la vista, y tenemos mientras desplazamos a la vista, tenemos otras opciones que no están disponibles ahora. Por ejemplo, Navbar abre sólo funciona para barras de navegación o desplegable abre sólo funciona para menús desplegables. Pero en este caso, vamos a usar el click del ratón. Cuando el usuario hace clic en el círculo, la animación debe reproducirse. Voy a elegir el tap mouse-click, ahí vamos, y aquí es donde podemos especificar nuestra acción. Dice en primer clic y en segundo clic, significa que puedo especificar una animación para el primer clic y luego especificar otra animación para el segundo clic. Para este ejemplo, sólo queremos una animación, así que voy a ir a en primer clic. Si abro este menú desplegable, puedo seleccionar una acción. Puedo crear una animación personalizada usando esta opción iniciar una animación o puedo usar efectos rápidos. Por ejemplo, fade, slide , flip, grow, grow big, etc Vamos a hablar de ello, pero por ahora, voy a mostrar cómo puedes crear una animación personalizada. Voy a dar click en Iniciar una animación y aquí está la animación que ya creamos. Puedo elegir esta animación o puedo crear una nueva animación. Voy a seguir adelante y quitarle esto por un segundo. Aquí no tenemos animaciones, y aquí voy a crear una nueva animación, y necesito nombrarlo. Escribamos Mover Square. ¿ Por qué lo nombré así? Porque este gatillo va a hacer que esta plaza se mueva. Voy a presionar Enter. Ahora, necesito crear algunas acciones. Aquí está nuestra línea de tiempo. Si hago clic en este botón más, puedo elegir entre diferentes opciones, mover, escalar, girar, sesgar, filtro de opacidad, color BG, color de borde, color de texto, etc. Estas son las propiedades que puedo animar. Pero primero, veamos cómo debemos animar nuestros elementos. Este círculo es nuestro gatillo, y hasta ahora creamos nuestro gatillo. Ahora queremos animar la plaza. Por lo tanto, una vez que estamos en la línea de tiempo, es necesario seleccionar el elemento que desea animar. En este caso, es nuestra plaza, así que la voy a seleccionar, y una vez seleccionada, voy a dar clic en este botón más. Ya que lo voy a mover, sólo quiero cambiar su ubicación. Voy a seleccionar Mover. Creamos un punto o digamos un fotograma clave. Aquí tengo una advertencia y dice que esta acción de movimiento no tiene un valor aplicado, eso está bien porque aquí no modificamos nada. En la línea de tiempo aquí, tenemos el tiempo, y tenemos el punto de partida y el punto final. Por ahora creamos el primer fotograma clave, ahora voy a ir al endpoint y voy a hacer clic para crear otro fotograma clave, va a ser Move. Tenemos esta advertencia también porque no cambiamos nada. Veamos qué queremos hacer, cuando el usuario hace clic en este círculo, este cuadrado debe moverse hacia el lado derecho. Por lo tanto, creamos aquí nuestro primer fotograma clave, y no necesitamos modificar su posición porque la animación debe comenzar desde aquí y luego debe moverse hacia el lado derecho, así que voy a seleccionar este segundo fotograma clave que nosotros creado, y luego si me desplaza aquí abajo, se puede ver que tengo esta opción Mover. Tenemos muchas propiedades aquí de las que vamos a hablar, pero ahora vamos a modificar las propiedades Move. Puedo cambiar el eje x, y, y z. Voy a cambiar el eje x, así que usemos este deslizador. Voy a moverlo por 100 pixeles, así es, a 100 pixeles, bonito. Ahora, voy a golpear Save y nuestra animación ha sido creada, como puedes ver, dice Move Square, y si quieres hacer algún cambio en tu animación, solo tienes que hacer click en ella y entrarás dentro de tu línea de tiempo. Puedes seleccionar estos fotogramas clave y puedes realizar los cambios que quieras. Pero por ahora, se ve bien. Déjame previsualizar eso, y ahora este círculo es nuestro gatillo, voy a dar click en él. Ahí vamos, esta plaza se ha movido. Esto es generalmente como funcionan la interacción y las animaciones en Webflow, simplemente puedes crear animaciones complejas visualmente sin escribir una sola línea de código, eso es tan poderoso. Te voy a mostrar otro ejemplo. Supongamos que este círculo va a ser el detonante, pero se va a animar a sí mismo. Te voy a mostrar cómo es posible. Si el usuario hace clic en él, se va a mover, por lo que se crea el disparador de elementos, como puedes ver , ya creamos eso, voy a dar clic en él, y dentro, no quiero usar este Move Animación cuadrada porque voy a animar este círculo en sí, así que voy a crear otra animación cronometrada aquí, y voy a escribir Move Circle. Entonces, vamos a crear una acción, y voy a elegir Mover. Voy a crear otro fotograma clave aquí, y elijamos Mover. Aquí, lo voy a mover otra vez al lado derecho. Déjame salvarlo. Aquí, asegúrate de elegir la animación Mover Círculo, no la Move Square. Puedo hacer click en Vista previa para previsualizar eso, y también puedo ir aquí, y si hago clic en él, ahora este círculo está animado, no el cuadrado. Es necesario entender la diferencia entre un gatillo y la animación. Siempre debes crear un gatillo y luego debes decidir qué elementos se deben animar. Recuerda, cuando creas un disparador, no estás limitado a animar solo un elemento, puedes animar varios elementos. Déjame mostrarte cómo funciona. Supongamos que cuando haga clic en este círculo, quiero que estas dos casillas se muevan. ¿ Cómo puedes hacer eso? Es tan sencillo. En primer lugar, voy a seguir adelante y crear un gatillo. El gatillo ya está creado. Voy a ir a la sección Animación, al primer clic, y aquí voy a elegir Mover Plaza porque vamos a mover esta plaza aquí. Si entro, aquí creé dos fotogramas clave. Pero para esta plaza, si sigo adelante y selecciono la Plaza 2 y creo otro fotograma clave aquí, y digo mover, entonces puedo moverlo al lado derecho también. Vamos a moverlo por 100 píxeles, así como así, y déjame guardarlo. Ahora si hago clic en este círculo, estos dos cuadrados deberían moverse simultáneamente. A ver qué pasa. Pero, ¿viste lo que pasó? En primer lugar, esta plaza se movió y luego la plaza se movió. ¿ Por qué? ¿No podemos simplemente moverlos al mismo tiempo? Podemos, si me dirijo a mi línea de tiempo, si selecciono esta animación Move Square aquí, como pueden ver, este elemento Square 2 tiene un fotograma clave separado. Si quiero que estos dos elementos se animen al mismo tiempo, necesito seleccionar este Cuadrado 2, y necesito arrastrarlo y agruparlo con mi primer cuadrado, así como así. Ahora la animación ocurre al mismo tiempo, voy a golpear Save, y vamos a ver qué pasa, ahí vamos. Son demasiado lentos. ¿ Puedo modificar su velocidad? Por supuesto, se puede. Vayamos a nuestra línea de tiempo. Aquí, si selecciono mis dos cuadrados, puedo mantener presionada la tecla Mayús de mi teclado y hacer clic en ellos uno por uno. Aquí en el momento, tengo diferentes opciones. Tengo la opción de retardo, tengo flexibilización, y tengo duración. Se establece la duración en medio segundo, lo voy a disminuir a 0.2, y si ahorro, ahora voy a previsualizar, ahora es mucho más rápido. Hasta ahora aprendiste cómo funcionan las interacciones y animaciones en Webflow. En el siguiente video, vamos a empezar a crear algunas animaciones para nuestro proyecto de círculo, y hablaremos del desencadenador de página y algunas animaciones avanzadas. Nos vemos en el siguiente video. 61. Animaciones e interacciones: parte 2: Hey, bienvenido de nuevo. En este video, vamos a empezar a crear algunas interacciones y animaciones para nuestro sitio web. ¿ Estás listo? Empecemos. Primero lo primero, vamos a pensar los tipos de animación que vamos a crear. ¿ Qué necesitamos aquí? Vamos a previsualizar este sitio web. Como se puede ver, todos estos elementos se cargan al mismo tiempo, y está bien, pero podemos hacerlo mejor. Lo que quiero hacer aquí es que quiero que todos estos elementos se desvanezcan uno por uno una vez que se cargue la página. En primer lugar, esta barra de navegación debería desvanecerse, luego este encabezado, luego la descripción, estos botones, la imagen principal, y estas tarjetas. También podemos mover ligeramente estos elementos para crear una animación más avanzada. Está bien. ¿Qué debemos hacer? Para esta animación, no necesitamos un disparador de elementos. Como mencioné en el video anterior, se requiere un disparador de elementos cuando necesitamos que el usuario interactúe con algo primero y luego se reproduzca la animación. Pero en este caso, no hay interacciones involucradas, por lo que cuando se carga la página, estos elementos deben ser animados. Voy a seguir adelante y crear un disparador de página. ¿ Cómo puedo hacer eso? Déjame ir a las interacciones aquí, y esta vez, en lugar de crear este disparador de elementos, voy a crear un disparador de página. Déjame hacer click en este botón “Plus”. ¿ Qué opción debemos usar? Ratón moviendo la ventanilla, Mientras la página se está desplazando, carga de página, página desplazada, necesitamos usar una carga de página y se puede leer qué interacción podemos lograr usando estos gatillo. Dice: “Anima cuando la página comience o termine de cargarse”. Eso es exactamente lo que queremos. Voy a dar click en “Carga de página”. Genial. Aquí tenemos dos secciones diferentes. Cuando la página comience a cargarse, cuando la página termine de cargarse, voy a usar cuando la página termine de cargarse. ¿ Por qué? Porque quiero que todo el contenido del sitio web se cargue antes de reproducir la animación, se deben cargar estas imágenes, y también estos textos, bloques, y botones. Voy a ir con cuando la página termine de cargarse y voy a crear una acción. Aquí voy a iniciar una animación. Va a ser una animación personalizada, y luego voy a dar clic en este botón “Plus”. Ahí vamos. Vamos a nombrar esta animación de héroe de animación porque está relacionada con la sección de héroes. Voy a presionar “Enter”. Agradable. Ahora, es hora de seguir adelante y crear nuestras acciones. ¿ Qué debemos lograr aquí? Como mencioné antes, quiero que todos estos elementos se desvanezcan. Algunos de ellos deben ser escalados, algunos de ellos también deben moverse, pero vamos uno por uno. Si quiero que se desvanezcan en primero, necesito poner su opacidad a cero. ¿ Por qué? Porque en este momento la opacidad está ajustada al 100 por ciento y no hay manera de que pueda lograr esa animación. Tengo dos opciones. O bien puedo seguir adelante y seleccionar todos estos elementos aquí. Por ejemplo, este encabezamiento, y puedo ir al panel de estilo, disminuyen la opacidad a cero por ciento aquí. O puedo hacer exactamente lo mismo aquí en la sección de interacción, voy a la carga de página. Voy a dar click en “Animación de héroe”. Aquí puedo crear una acción, por ejemplo, opacidad, y puedo convertir su opacidad a cero por ciento, pero empecemos con la barra de navegación. Voy a seleccionar esta barra de navegación y voy a crear una acción aquí, pero para crear una acción para un símbolo, primero, hay que hacer doble clic sobre ella. Ahora, esta barra de navegación se selecciona el símbolo maestro y puedo crear una acción. Entonces voy a elegir la opacidad, y volvamos su opacidad del 100 por ciento al cero por ciento. Agradable. Desapareció y es exactamente lo que queremos. Esto es lo que llamamos el estado inicial, y aquí si te diriges a la sección de tiempo, puedes ver que tenemos este interruptor que dice, “Establecer como estado inicial”. Si paso el cursor sobre este signo de interrogación, dice: “Establecer el estado inicial aplica estilos al elemento antes de la carga de la página. Es útil para ocultar elementos antes de animarlos a la vista”. Eso es exactamente lo que tenemos que hacer. Ya que puse su opacidad a cero por ciento y va a ser nuestro estado inicial, voy a habilitar este interruptor. ¿ Qué más debemos hacer? Voy a seleccionar todos estos elementos uno por uno, y voy a disminuir su opacidad a cero por ciento también. Seleccionemos este rubro y luego voy a ir a mi animación aquí una vez más, y voy a crear una nueva opacidad de acción. Establezcamos su opacidad en cero por ciento, y recuerden habilitar este switch así como así, establecer como estado inicial, y como pueden ver ahora, estos están agrupados porque este grupo superior sostiene todas las acciones nosotros la inicial estado el. Ahora, voy a seleccionar esta descripción. Yo voy a hacer lo mismo, opacidad, y voy a convertir su opacidad a cero por ciento, y voy a fijarla como el estado inicial. Yo voy a hacer lo mismo por estos botones. Uno por vía. Voy a seleccionar este botón primario y vamos a crear opacidad. Voy a disminuir su opacidad a cero por ciento. Va a ser un estado inicial. Hagámoslo por estos botones de textos también. Voy a seleccionar capacidad. Vamos a reducirlo a cero por ciento y va a ser el estado inicial. A continuación, seleccionemos esta imagen, y disminuyamos su opacidad a cero por ciento también. Va a ser el estado inicial. Por último, necesitamos seleccionar estas dos tarjetas y hacer lo mismo. Escojamos la opacidad, disminuyamos su opacidad, y finalmente habilitemos el estado inicial, y por último pero no menos importante, voy a seleccionar esta tarjeta y voy a hacer lo mismo aquí. Disminuya su opacidad y habilitemos el estado inicial, pero espere un segundo, ¿por qué desaparecieron todos estos elementos excepto nuestra barra de navegación? Bueno, eso se debe a que nuestra barra de navegación es un símbolo, en realidad, si ahora previsuo mi proyecto , se puede ver que desapareció, pero como es un símbolo, veremos. Esa es la razón, pero no te preocupes, funciona perfectamente. Creamos nuestros estados iniciales. Establecemos la opacidad de todos nuestros elementos en cero por ciento. Ahora, es el momento de crear el siguiente fotograma clave con el fin de desvanecerlos. Tenemos que aumentar la opacidad al 100 por ciento. Para ello, voy a seleccionar mi barra de navegación. Una vez más, haga doble clic en él, y voy a dar clic en esto y aquí para crear un nuevo fotograma clave, Vamos a elegir la opacidad, y esta vez su opacidad debe fijarse al 100 por ciento. Asegúrate de que esté fijado en 100 por ciento. No vamos a modificar la duración y la capa ahora, pero en unos minutos, los vamos a modificar. Por ahora, solo necesitamos volver todas tus opacidades al 100 por ciento. Ahora, voy a seleccionar mi rumbo aquí. Puedo elegirlo en el navegador, y luego vamos a mi animación y vamos a crear aquí un nuevo fotograma clave, opacidad, y voy a ajustar la opacidad al 100 por ciento. Yo voy a hacer lo mismo por todos nuestros elementos aquí. Eligamos la descripción. Voy a crear un nuevo fotograma clave, opacidad, y luego voy a ajustar la opacidad al 100 por ciento. Voy a elegir los botones uno por uno. Repitamos el mismo proceso y aumentemos la opacidad al 100 por ciento. No voy a adelantar rápidamente este proceso porque quiero que te acostumbres al proceso de creación de interacciones bien. Voy a seleccionar aquí el botón “Siguiente”. Vamos a crear un nuevo fotograma clave, opacidad, y voy a ajustar la opacidad al 100 por ciento. Ahora, vamos a seleccionar la imagen principal. Creemos un nuevo fotograma clave, opacidad, y volvamos su opacidad al 100 por ciento. Por último, vamos a seleccionar nuestras tarjetas una por una opacidad y establecer su opacidad al 100 por ciento, y por último pero no menos importante, necesitamos seleccionar nuestra última carta, crear aquí un nuevo fotograma clave, opacidad y fijó su opacidad en 100 por ciento. Agradable. Ahora, vamos a golpear “Guardar” y previsualizar nuestro proyecto. Ahí vamos. Todos estos elementos se desvanecen uno por uno. Permítanme previsualizar eso una vez más. Eso es exactamente lo que quería. Puedes ver lo fácil que es crear animaciones en Webflow sin codificar, eso es increíble. Pero espera, ¿no podemos ni siquiera hacerlo mejor agregando más animaciones a nuestros elementos? Sí, podemos. Esto es exactamente lo que vamos a hacer. Ahora esa es nuestra animación de desvanecimiento se crea con éxito. Voy a seguir adelante y añadir algunas otras acciones a estos elementos. Por ejemplo, voy a hacer que este rubro y esta descripción se mueva ligeramente hacia abajo. Además, voy a hacer que estas dos cartas se escalen un poco. Por último, voy a hacer que esta imagen de héroe se mueva también hacia arriba. Empecemos con este rubro. En primer lugar, voy a ir a mi animación. Voy a ir a Here Animation, y luego voy a seleccionar mi rumbo. Algo a mencionar aquí es que no quiero que este rubro se mueva hacia abajo desde su posición original, que está aquí. Yo quiero subirlo un poco y establecer el estado inicial para eso y volverlo a su posición original. Eso es lo que vamos a hacer. Voy a seleccionar este encabezado y voy a crear una acción Mover, se ha creado dentro del grupo estatal inicial, y eso es exactamente lo que quiero. Si lo crea en otro lugar, simplemente puede habilitar este interruptor configurado como estado inicial y se agrupará con otros elementos de estado inicial. Entonces lo voy a mover hacia arriba en 20 píxeles. Voy a escribir menos 20. Podemos ver eso, pero se movió ligeramente hacia arriba. Entonces voy a hacer lo mismo por la descripción del héroe. Déjame seleccionarlo. Voy a crear una nueva acción aquí, Mover y déjame moverla por 20 pixels menos 20. Ahora voy a seleccionar mi imagen principal, pero esta imagen no debe moverse de arriba a abajo. Debe moverse de abajo a arriba. Voy a crear la acción Mover. Pero esta vez voy a ajustar la y a 20 píxeles, no menos 20 para moverla hacia abajo. Recuerden estos son todos nuestros estados iniciales. Por último, como mencioné antes, voy a escalar mis tarjetas, esas dos pequeñas cartas ligeramente hacia arriba. Primero voy a seleccionar esta Tarjeta Héroe 1, y la voy a escalar como el estado inicial. Déjame crear una acción aquí. Voy a elegir Escala y voy a ajustar x a 0.8 y el eje y también se cambiará. Ya que estos están vinculados, entonces voy a seleccionar Hero Card 2, vamos a crear la misma escala de acción y voy a modificar su x a 0.8. Golpea “Enter”, pero ésta no se agrupa con otras acciones estatales iniciales. Puedo arrastrarlo y soltarlo dentro de este grupo o simplemente puedo habilitar los conjuntos de interruptores como estado inicial, y ahora está agrupado con otras acciones de estado iniciales aquí. Agradable. Ahora tenemos que seguir adelante y volverlos a su posición original. Pero cómo debemos hacer eso aquí tenemos muchos marcos clave. ¿ Deberíamos crear un fotograma clave aquí después del último fotograma clave? No. ¿Por qué? Porque si hacemos eso, primero, todos esos elementos se desvanecerán y luego se empezarán a mover y escalar. Eso no es lo que queremos. Queremos que se muevan y se desvanecen simultáneamente. Para las tarjetas, queremos que escalen y se desvanezcan al mismo tiempo. Voy a seguir adelante y seleccionar este rumbo de Héroe. Aquí voy a crear una nueva acción, y se va a mover. Creamos aquí un nuevo fotograma clave. Entonces voy a cambiar su y aquí a 0. De esta manera, lo volvemos a su posición original. Por último, voy a arrastrarlo y ponerlo encima del fotograma clave de opacidad. De esta forma, podemos agruparlos y la opacidad y mover acciones un cuidado al mismo tiempo, así como así, como puedes ver ahora están agrupados. Voy a hacer lo mismo por la descripción. Vamos a seleccionarlo. Voy a crear una nueva acción Move. Entonces voy a poner la y a 0. Permítanme agruparlos. Voy a arrastrarlo y soltarlo encima de eso. Hagamos lo mismo por el héroe principal. Voy a seleccionarlo y voy a crear una nueva acción. Muévete y voy a poner su y a 0. Agrupémoslo con el fotograma clave de opacidad. Por último, voy a seleccionar esta Tarjeta de Héroe 1. Voy a crear una nueva acción. Va a ser escala porque esta vez la vamos a escalar. Voy a poner la x e y a 1. Agrupémoslo con el fotograma clave de opacidad Tarjeta Héroe 1. Entonces voy a hacer lo mismo para la segunda tarjeta. Déjame crear esta acción de escala y voy a ajustar la x e y a 1. Agradable. Por último, agruparlos juntos, fue mucho. Ahora vamos a guardar nuestra animación. Voy a seguir adelante y previsualizar eso. ¿ Qué tan guay es eso? Permítanme previsualizarlo una vez más. Primero los nav se estaban desvaneciendo, después estos elementos, se mueven y escalan al mismo tiempo. Pero aquí tenemos un problema. Como puedes ver la duración de esta animación es demasiado. Vamos a necesitar seguir adelante y modificar la duración de estos fotogramas clave. En primer lugar, voy a ir a la animación Hero aquí. Voy a seleccionar esta opacidad. Voy a disminuir la duración de 1/2 un segundo a 0.3. Tenemos que repetir el mismo proceso para la acción de movimiento también. Voy a disminuirlo a 0.3. Entonces hagamos lo mismo por otros elementos. Voy a seguir adelante y seleccionar este Héroe Descripción Opacidad. Va a ser 0.3. Entonces voy a seleccionar el Mover. También va a ser 0.3. Hagamos lo mismo para este botón primario, 0.3. Aquí, 0.3, voy a adelantar rápidamente este proceso. Voy a seguir adelante y seleccionar todos estos elementos uno por uno y disminuir la duración a 0.3. Hecho. Ahora déjame guardar esta animación y vamos a previsualizarla una vez más. Enfriar. Como puedes ver, ahora es mucho más rápido. Vamos a previsualizarlo de nuevo. Hermosa. Espero que te guste, pero te voy a mostrar una cosa más. ¿ Te acuerdas cuando hablamos de animaciones e interacciones, te hablé del método de flexibilización. Dije que hablaremos de ello más tarde y esto es exactamente lo que vamos a hacer. Si voy a la sección de interacción y si elijo esta animación, voy a seleccionar, por ejemplo, una de estas acciones. Seleccionemos este movimiento de rumbo héroe. Si me dirijo al cronometraje, se puede ver que tenemos esta pestaña de flexibilización y tenemos preajustes o costumbres. ¿Por qué default? Todas las acciones tienen el método lineal de no flexibilización, y significa que la animación se reproduce de manera lineal. Pero si abro el menú drop, se puede ver que tenemos muchos métodos de flexibilización diferentes. Tenemos facilidad, flexibilización, facilidad de salida, facilidad de entrada a salida. ¿ Cuál es la diferencia entre ellos? Te voy a mostrar un sitio web muy cool creado por Mr Christopher Travers que ilustra la diferencia entre todos los métodos de flexibilización. Es muy guay. Se llama easing.webflow.io. Puedes seguir adelante y comprobarlo. La diferencia entre estos métodos de flexibilización suele ser la velocidad. Aquí cuando tenemos esta flexibilización, la animación comienza lentamente y termina más rápido. Por otro lado, si elegimos, relajarnos, la animación comienza rápidamente y luego se ralentiza. Aquí podrás comparar todas estas opciones y podrás ver cuál se adapta a tus necesidades. Volvamos a Webflow para que nuestras animaciones se vean mejor, voy a seguir adelante y poner todas estas animaciones para que se alienten. Adelante y hagámoslo uno por uno. Podemos cambiar los estados iniciales aquí y no necesitamos hacerlo. Como puedes ver, está desactivada porque no hay animaciones reproduciendo en los estados iniciales. Voy a seleccionar este Navbar Opacidad y voy a cambiar es método de flexibilización para facilitar. Yo lo voy a hacer por todos estos elementos. Déjame adelantar rápido este proceso para ahorrarte algo de tiempo, ya está hecho y ahora voy a guardar la animación y déjame seguir adelante y previsualizarla. Ahí vamos. Se ve mucho mejor. Chicos, espero que les haya gustado este video. Creamos con éxito algunas animaciones para nuestra sección de héroes. En el siguiente video, vamos a seguir creando algunas interacciones para otras secciones del sitio web. Nos vemos entonces. 62. Animaciones e interacciones: parte 3: Oye, en este video, vamos a seguir adelante y añadir animaciones a otras secciones de nuestra página web. Por ejemplo, como se puede ver aquí, estos logotipos son en blanco y negro y los vamos a hacer interactivos. Cuando el usuario pasa por encima de cada uno de estos logotipos, deben volverse coloridos. Aquí, por ejemplo, tenemos esta sombra de gota, cuando el usuario pasa por encima de esta tarjeta, debería aparecer esta sombra de gota y de lo contrario debería desaparecer. Pero, ¿qué pasa con la sección testimonial? Aquí cuando la sección entra en la ventanilla, queremos empezar a animar estos memojis y estos elementos medios uno por uno. Nosotros sólo queremos que se desvanecen. Déjame desplazarme hacia abajo. ¿ Qué pasa con esta sección? Bueno, ¿qué vamos a hacer por estas tarjetas? Para esta tarjeta, cuando el usuario pase por encima de ella, color de su fondo se va a cambiar a nuestro color primario, y luego se debe cambiar también el color de estas capas de texto. Adelante y empecemos a trabajar aquí en nuestra sección de clientes. Voy a ir a Webflow, y voy a ir a la sección de logotipos aquí. Nuestros logotipos son coloridos por defecto. ¿ Cómo podemos hacerlos en blanco y negro? ¿ Recuerdas cuando hablamos de los filtros? Eso es exactamente lo que vamos a usar. Voy a seleccionar esta imagen aquí. Déjame ir al panel Estilo. Como puedes ver, no agregamos ninguna clase a estos logotipos. Si bien esta imagen está seleccionada, voy a seguir adelante y agregarle una clase, vamos a escribir Logo. Ahora voy a añadir esta clase a cada uno de estos logotipos. Déjame seguir adelante y agregarles rápidamente esta clase. Igual que eso. Voy a agregarlo a todos los logotipos, déjame seleccionar este también, y lo voy a agregar aquí. Por último, voy a seleccionar el logotipo de Amazon y déjame añadirlo aquí. Perfecto. Ahora bien, mientras se selecciona uno de estos logotipos, voy a desplazarme hacia abajo y voy a ir a la sección Efectos. A partir de aquí, voy a seguir adelante y crear un filtro. Si hago clic en este botón más, por defecto, el filtro es desenfocado. No voy a usar un filtro de desenfoque. Voy a cambiar el filtro a escala de grises, y como pueden ver, la cantidad se establece en 100 por ciento. Eso está totalmente bien. Ahora bien, ¿qué debemos hacer? Si voy al estado hover aquí, puedo seleccionar este filtro en escala de grises y puedo disminuir esta cantidad a cero por ciento. Igual que eso. Ahora déjame ir al estado ninguno y vamos a previsualizarlo. Ahí vamos. Funciona perfectamente para todos los logotipos, pero aquí no tenemos una transición suave entre estos dos estados. adelante y agreguemos una transición, pero asegurémonos de que estás en el estado ninguno, no en el estado hover, lo contrario, no va a funcionar. Añade siempre tus transiciones al estado ninguno. Voy a agregar una transición aquí, voy a cambiar el tipo a Filtrar y el método de flexibilización va a ser facilidad. Eso está bien. El tiempo de duración va a ser de 200 milisegundos. Vamos a previsualizarlo una vez más. Ahora se ve mucho mejor, ¿no? ¿ Qué más debemos hacer? Bueno aquí, al previsualizar este proyecto, se puede ver que nuestra sección de encabezado está animada. Pero, ¿qué pasa con esta sección? Lo que quiero hacer es agregar un disparador de elementos al contenedor de estos logotipos, y una vez que se desplaza hacia la ventanilla, este contenedor debería desvanecerse. Déjame mostrarte a lo que me refiero. Voy a seleccionar un contenedor aquí y luego te voy a dar la clase combo. Escribamos logotipos. Ahora déjame ir a las interacciones, y desde aquí voy a añadir un disparador de elementos. Aquí, como pueden ver, tenemos desplazamiento a la vista. Eso es lo que necesitamos. Entonces dice, cuando se desplaza a la vista, cuando se desplaza fuera de la vista. Vamos a necesitar la primera opción, cuando se desplaza a la vista. Entonces voy a usar estos efecto rápido, Fade, así como eso, y aquí tenemos desvanecerse, desvanecerse. Podemos modificar el retraso o el desplazamiento, por lo que se va a desvanecer. Permítanme previsualizar eso. Ahí vamos. Es demasiado rápido, así que voy a añadir algo de retraso aquí. Añadamos un retraso de 400 milisegundos. Voy a previsualizarlo. Agradable. Permítanme previsualizar el proyecto. No podemos ver el efecto ahora porque estoy usando una pantalla grande y en cuanto esta página se carga, esta sección está dentro de mi ventanilla. Pero si uso una pantalla más pequeña, saldrá a la vista cuando empiece a desplazarme. Por ejemplo, si voy al punto de ruptura de la tableta aquí y acabo de previsualizar el proyecto una vez más, se puede ver que nuestra sección de encabezado, elementos, están animados. Voy a desplazarme hacia abajo. Tan pronto como esta sección se desplaza hacia la vista, se desvanece. Déjame mostrarte una vez más. Voy a desplazarme hacia abajo, ahí vamos. Se desvanece en. Eso es exactamente lo que necesitaba. Ten en cuenta que cuando agreguemos la animación al punto de ruptura del escritorio, la animación se añadirá a todos los puntos de ruptura. Si voy al retrato móvil y lo previsualizo, todo funciona como se esperaba. Genial. Ahora podemos pasar al siguiente apartado, y eso son proyectos recientes. Yo voy a hacer lo mismo aquí para este contenedor. Voy a seleccionar este contenedor y voy a agregar un disparador de elementos aquí, desplazarme a la vista, luego voy a agregar una acción aquí, fade-in, y un retraso de 400 milisegundos, así como así. Enfriar. Dado que estos contenedores tienen algunas clases de combo, la interacción se agregará a ese contenedor en particular. Pero si agrego la interacción al contenedor, a la clase base, se agregará a todos los elementos usando esta clase base de contenedor. Tengan eso en mente. Vamos a adelantarlo y previsualizarlo. Voy a desplazarme hacia abajo. Ahí vamos. Vamos a comprobarlo una vez más. Voy a desplazarme hacia abajo, se desvanece. Genial. Como mencioné, cuando el usuario se cierne sobre estas tarjetas, también debería aparecer una sombra de gota suave. ¿ Cómo podemos lograr esta interacción? Es tan sencillo, ya hablamos de ello. En primer lugar, voy a seguir adelante y seleccionar esta tarjeta de proyecto. Déjame ver, lo puedes encontrar fácilmente en el navegador, y luego voy a ir al estado de hover desde aquí. Por último, voy a seguir adelante y agregarle algunas sombras de caja. Ahora vamos a modificar las propiedades de esta sombra de caja. Voy a cambiar el ángulo a 180. Voy a cambiar el desenfoque a 50 píxeles y la distancia a 25 píxeles. Por último, voy a cambiar el color de negro a neutro, medio. Déjame disminuir la opacidad del 100 al 10 por ciento para conseguir esta sombra de gota suave. Se ve genial. Ahora volvamos a nuestro estado ninguno y vamos a previsualizarlo. Ahí vamos. Funciona perfectamente. ¿Puedes ver eso? Pero aquí no tenemos una transición suave. Déjame seguir adelante y añadir una transición. Asegúrate de que estás en el estado ninguno. Voy a desplazarme hacia abajo y mientras esta ficha de proyecto está seleccionada, voy a añadir una transición. El tipo va a ser box shadow y la duración va a ser de 200 milisegundos. No voy a cambiar el método de flexibilización. Vamos a previsualizarlo una vez más. Ahí vamos. Ahora se ve mucho mejor. Enfriar. Ahora podemos pasar a la siguiente sección, que es la sección testimonial. ¿ Qué debemos hacer aquí? Bueno, primero, voy a seleccionar esta sección y le voy a añadir un activador de elementos. Déjame ir a las interacciones, y desde aquí voy a añadir un disparador de elementos. Vamos a usar scroll in view porque queremos que los elementos se desvanecen una vez que esta sección se desplace hacia la vista. Por eso estamos usando scroll to view. Entonces voy a crear aquí una animación personalizada porque vamos a animar estos elementos uno por uno. Voy a usar iniciar una animación. Déjame golpear este botón plus para ir a nuestra línea de tiempo. Ahí vamos. Aquí, vamos a escribir Testimonial, puedes nombrarlo como quieras, Enter. Entonces voy a seleccionar uno de nuestros memojis y vamos a crear una acción aquí. Va a ser opacidad porque vamos a hacer que se desvanecen. Como de costumbre, primero, necesitamos crear el estado inicial. Por lo tanto, voy a disminuir la opacidad a cero por ciento y voy a fijarla como el estado inicial. Entonces voy a crear un nuevo fotograma clave aquí. Voy a usar la opacidad y dejarme aumentar la opacidad al 100 por ciento. Déjame tocar la animación. Agradable. Pero aquí hay un problema. Como se puede ver, esta animación sólo funciona para este primer memoji. ¿ Deberíamos seguir adelante y seleccionar estos memojis uno por uno? Por supuesto que no porque haya una alternativa a ella. Dado que aquí tenemos la clase base memoji, simplemente podemos dirigirnos a esta sección, que se llama clase, y luego podemos eliminar esta clase combo de uno aquí. Yo sólo quiero escribir Memoji. Voy a elegir mi memoji y asegurarme de que esta opción esté seleccionada, solo niños en esta clase. Voy a seleccionar el estado inicial, y ahora si lo toco, ahora la animación funciona para todos los memojis. ¿ Por qué? Porque ahora esta animación funciona para esta clase, la clase memoji con todos sus hijos. Eso es exactamente lo que queríamos, pero ¿qué pasa con otros elementos? Bueno, vamos a seguir adelante y seleccionarlos uno por uno, y vamos a animarlos. Empecemos con estos rubro. Voy a seleccionarlo, voy a crear una acción, opacidad, y voy a fijar su opacidad a cero por ciento. Vamos a ponerlo como el estado inicial. Se agrupará con nuestro estado inicial memoji, y aquí voy a crear un nuevo fotograma clave. Voy a elegir la opacidad. Volvamos su opacidad al 100 por ciento. Agradable. Ahora vamos a seguir adelante y seleccionar este texto testimonial. Vamos a crear una acción para ello, opacidad. Voy a fijar la opacidad a cero por ciento. Vamos a configurarlo como el estado inicial, y vamos a crear aquí un nuevo fotograma clave y elegir la opacidad y volverlo al 100 por ciento. Por último, voy a seleccionar estos bloque div cliente, crear una nueva acción, opacidad, volvamos su opacidad a cero por ciento, establecerlo como estado inicial, y crear un nuevo fotograma clave, opacidad, y voltearlo al 100 por ciento. Igual que eso. Ahora déjame guardar esta animación y voy a seguir adelante y previsualizarla. A ver qué vamos a conseguir. Voy a desplazarme hacia abajo y en cuanto la sección testimonial se desplaza hacia la ventanilla, reproduce la animación, pero estos memojis se desvanecieron tan rápido. Adelante y arreglemos eso. Voy a ir a la animación testimonial aquí del lado derecho, y voy a seleccionar esta opacidad memoji aquí, y voy a agregarle algún retraso. Añadamos un retraso de un segundo y vamos a previsualizarlo. Voy a guardarlo y vamos a ver si funciona correctamente o no. Voy a desplazarme hacia abajo, lindo. Pero un segundo se ve demasiado, así que lo voy a disminuir a tal vez medio segundo. Déjame seleccionar esta Opacidad Memoji y simplemente disminuir el retraso a 0.5 y guardarlo. Vamos a previsualizarlo una vez más. Voy a desplazarme hacia abajo, ahí vamos, fantástico. Vamos a comprobarlo en otros puntos de ruptura también. Voy a seguir adelante y previsualizarlo. Déjame desplazarme hacia abajo. Bastante bien. Se ve genial, ¿no? Ahora pasemos a la sección Servicios. Aquí, como mencioné antes, vamos a modificar el color del fondo, el color de estos bloques de textos, y también este botón de enlace. Entonces, ¿podemos simplemente seleccionar esta tarjeta de servicio e ir al estado de hover y modificar nuestro color de fondo, igual que lo que hicimos para esta reciente sección de proyectos? Desgraciadamente no. ¿ Por qué? El motivo es de estas tarjetas, acabamos de modificar una propiedad, así que fuimos al estado hover y agregamos la sombra de caída a esta tarjeta. No obstante, aquí, cuando el usuario pasa por encima de esta tarjeta, queremos modificar múltiples elementos. Por eso no es posible animar todos esos elementos aquí en los efectos. Por lo tanto, vamos a necesitar seguir adelante y crear una interacción en la sección Interacción. Entonces, ¿qué debemos hacer? En primer lugar, voy a seleccionar esta tarjeta de servicio. Asegúrate de que el bloque diff de la tarjeta de servicio esté seleccionado, como puedes ver dentro de nuestra cuadrícula de servicios, y luego voy a seguir adelante y crear un árbol de elementos aquí y esta vez voy a elegir el mouse hover, no clic del ratón, no desplazarse a la vista, el ratón pasa el ratón. Yo lo voy a seleccionar y aquí tenemos on hover, on hover fuera. Por lo tanto, aquí vamos a crear dos animaciones diferentes. ¿ Por qué? Porque primero, queremos animar todos estos elementos una vez que el usuario pase por encima de esta tarjeta, y luego queremos convertir todos esos elementos a sus colores originales cuando el usuario se desplaza. Entonces primero, sigamos adelante y creemos aquí una animación personalizada, en el hover, voy a crear una animación y llamémoslo de tarjeta hover. Ahí vamos. Entonces, ¿qué debemos hacer? ¿ Necesitamos crear un estado inicial? No, porque no necesitamos ningún estado inicial. El estado inicial es lo que tenemos aquí. Basta con cambiar el color del fondo y el color de estos elementos. Si bien esta tarjeta de servicio está seleccionada, voy a crear una acción, porque quiero modificar el color del fondo de este bloque de acero y aquí bajo el estilo, voy a elegir color BG, color de fondo. Ahí vamos y aquí puedo elegir un nuevo color de fondo para ello. Déjame elegir por defecto primario, bonito, y luego voy a modificar la flexibilización de lineal a flexibilización. Lo siguiente que necesitamos modificar es el color de este título del proyecto. Voy a seleccionarlo. Voy a crear una nueva acción, y esta vez va a ser color de texto. Déjame seguir adelante y cambiar el color de este texto a blanco, así como así, y luego voy a seleccionar esta descripción del proyecto y vamos a añadir una nueva acción aquí, color del texto y voy a elegir el blanco. Entonces voy a disminuir la opacidad del 100 por ciento al 60 por ciento así como así, para tener aquí una buena jerarquía visual. Por último, voy a seleccionar este botón de enlace y voy a crear una nueva acción, y va a volver a ser color de texto, pero esta vez va a ser nuestro color secundario, este naranja. Déjame tocar esta animación y ver si todo funciona a la perfección. Bueno hay un problema. Estas animaciones deben agruparse. Queremos que jueguen al mismo tiempo. Ahora mismo, juegan uno por uno, eso no es lo que queremos. Entonces voy a seleccionar este color de texto, y voy a arrastrarlo y soltarlo encima de nuestra primera acción, que es la tarjeta de servicio. Yo también voy a hacer lo mismo para estos dos elementos, solo arrástrelo y suéltelo y ahora están agrupados. Por lo que la animación ocurre al mismo tiempo. Déjame reproducirlo una vez más. Fantástico. Déjame guardar la animación y ver si funciona perfectamente. Yo lo voy a guardar. Voy a previsualizarlo, y voy a pasar el rato sobre él. Se ve genial. Pero, ¿funciona para todas las tarjetas? No, no lo hace. ¿Qué debemos hacer? ¿ Deberíamos seguir adelante y animar estas cartas una por una? Por supuesto que no, porque no es una manera eficiente. Ya que estamos usando clases, no necesitamos hacer eso. Entonces, ¿qué debemos hacer? Bueno, voy a seleccionar esta tarjeta hover, y como pueden ver aquí, si selecciono esta tarjeta de servicio, el primer fotograma clave aquí en la sección Afecta, dice gatillo de interacción, y dice: “Tú ahora sólo están afectando a los elementos desencadenantes”. Entonces voy a abrir estos menu drop y voy a cambiarlo a clase. Entonces voy a abrir este menú drop y lo voy a cambiar por solo niños con esta clase. Ahora déjame guardarlo y aquí, como puedes ver bajo la configuración de Trigger, tenemos dos opciones diferentes. Tenemos elementos, tenemos clase. Por defecto, se selecciona el elemento. Dice: “Activar sólo en el elemento seleccionado”. Esto no es lo que queremos. Queremos que esta animación funcione para todas estas tarjetas. Entonces lo voy a cambiar de elemento a clase y la clase va a ser tarjeta de servicio. Como puedes ver aquí, todas estas tarjetas tienen la misma clase, tarjeta de servicio. Ahora si la previsualizo, si paso el cursor sobre estas tarjetas, se puede ver que la animación funciona para todas ellas. Pero y si salgo fuera, no cambian. Eso se debe a que no creamos la animación hover hacia fuera. Entonces déjame seguir adelante y crear uno. ¿Qué debemos hacer? Bueno, aquí, como pueden ver, tenemos en hover fuera, vamos a crear una nueva acción, inicio y animación. Esta vez, en lugar de crear una nueva animación personalizada, te voy a mostrar una forma rápida de hacerlo. Ya que sólo queremos volver sus colores a sus colores originales, voy a seguir adelante y pasar el rato sobre estas tarjetas y aquí como pueden ver, tenemos dos iconos. Si hago clic en estos icono de punto, puedo duplicar esta animación y tengo tarjeta hover también. Entonces voy a renombrarlo. Voy a dar clic en este icono de punto y déjame renombrarlo a Tarjeta Hover Out. Ahora lo voy a seleccionar, dar clic en él, y aquí voy a seleccionar todos estos elementos, y voy a cambiar su color de nuevo a sus colores originales. Si bien se selecciona tarjeta de servicio, voy a seguir adelante y cambiar el color a blanco. Ahora voy a seleccionar el título del proyecto y voy a cambiar su color a oscuro neutro. Ahora voy a seleccionar la descripción del proyecto y voy a cambiar su color a medio neutro. Por último, voy a seleccionar este botón de enlace y voy a cambiar su color a predeterminado primario. Igual que eso. Voy a golpear “Guardar” y ahora si previsualizo mi proyecto y si paso el cursor sobre estas tarjetas, puedes ver que esta animación funciona en ambos sentidos. Igual que eso. ¿ Se puede ver lo fácil que es crear interacciones y animaciones en Webflow? Muy bien chicos. Eso es todo por este video. Espero que lo hayas disfrutado y te veré en el siguiente video. 63. Accesibilidad: Oye, en este video vamos a hablar de accesibilidad. Como diseñador web y desarrollador web, siempre necesitamos asegurarnos de que nuestro sitio web sea accesible para todos. No importa si alguien es ciego o tiene deficiencias visuales, él o ella debe poder utilizar nuestro sitio web de manera cómoda y sencilla. Pero, ¿cómo podemos hacer que nuestra página web sea más accesible? Bueno, en este video, vas a aprender algunos puntos importantes sobre accesibilidad, y aprenderás algunas técnicas para que tu diseño sea más accesible. ¿ Estás listo? Empecemos. Cuando diseñas tu sitio web, debes asegurarte de comprobar la relación de contraste de tus colores porque algunas personas tienen deficiencias visuales y es posible que no procesen los colores de la forma en que lo hacemos nosotros. Por lo tanto, es importante asegurarnos de que nuestros colores tengan suficiente contraste y que pasen la prueba de relación de contraste. Normalmente comprobamos la relación de contraste de nuestros colores cuando estamos diseñando la interfaz de usuario, pero como desarrollador web, vale la pena comprobar la relación de contraste de tus colores cuando se realiza el desarrollo de tu proyecto como bien. ¿ Cómo puedes hacer eso? Ya hablamos de ello, pero voy a mencionarlo una vez más rápidamente. Entonces aquí, si selecciono este texto, este encabezamiento, y si me dirijo a la sección de tipografía, voy a dar click en Color. Aquí tenemos la sección que dice Relación de contraste. Aquí hay un signo de interrogación. Si hago clic en él, puedes verlo dice relación de contraste impacta la accesibilidad de tu sitio. La relación de contraste suficiente depende de los colores de primer plano y fondo, tamaño de la fuente y el peso de la fuente. Eso es absolutamente cierto. Básicamente lo que nos interesa es el color de nuestro primer plano y el color de nuestro fondo. En este caso, el color de este texto es nuestro color de primer plano, y este color azul claro es nuestro color de fondo. Aquí como puedes ver, tenemos la calificación triple A, y significa que tenemos la relación de contraste más alta, lo cual es increíble. Por lo que siempre apuntan a la triple A, pero a veces se puede conseguir el doble A también. Eso también es aceptable. Permítanme mostrarles un ejemplo. Si trato de modificar este color, ahí vamos, ahora tengo el doble A. Todavía es legible, pero la relación de contraste no es tanto. Como se puede ver, es de cuatro a uno. Voy a deshacer el proceso, Command Z o Control Z. Cuando termines el desarrollo de tu proyecto, necesitas seguir adelante y revisar todos tus colores uno por uno y ver si pasas la prueba de relación de contraste. Si ves este triple A o doble A, significa que estás bien para ir. Necesitas seguir adelante y revisar tus colores uno por uno. Yo me voy a desplazar por aquí. Déjame seleccionar esto, Botón Aprender Más, y si me dirijo al color, puedes ver que también tengo triple A. ¿ Qué hay de aquí? Seguro es triple A. Ahí vamos, porque ya revisamos ese color. ¿ Qué pasa con esta descripción del proyecto? Se ve bien. Tenemos el doble A, sigue siendo aceptable. Básicamente necesitas seguir adelante y revisar todos tus elementos uno a uno. Aquí tenemos el triple A. ¿Qué pasa con éste? Tenemos triple A también. Esto es lo primero que debes comprobar en cuanto a accesibilidad. Ahora pasemos al siguiente punto. Voy a desplazarme hacia arriba. En casi todos los proyectos, usaremos imágenes. Podemos usar imágenes decorativas o algunas imágenes significativas. Por ejemplo, aquí en esta sección de proyecto reciente, se puede ver que tenemos la imagen del proyecto en estas tarjetas. Voy a desplazarme hacia abajo. Aquí tenemos algunos memojis decorativos. Estas son imágenes decorativas. Voy a desplazarme hacia abajo. Estos iconos también son decorativos. ¿ A qué me refiero con decorativo? Bueno, cuando algo no agrega valor a nuestro sitio web y no ayuda al buscador a entender la estructura de tu sitio web, significa que es decorativo. Yo me voy a desplazar por aquí. No tenemos otras imágenes. Si voy a la página Mis Proyectos aquí, esta imagen no es decorativa porque esta es una de las imágenes de nuestro proyecto. Pero, ¿cómo podemos hacer que los buscadores entiendan la estructura de nuestro sitio web y el significado detrás de nuestras imágenes? Bueno, podemos usar algo llamado Alt Text. Déjame ir a mi página de inicio, y aquí voy a seleccionar estas tarjetas. Si hago clic en el icono de Ajustes, como puedes ver aquí tenemos el Texto Alt. Alt es la forma corta de alternativa, por lo que es un texto alternativo. Para cada imagen, podemos especificar un texto alt, pero ¿por qué necesitamos hacer eso? Bueno, hay muchas razones diferentes para especificar un texto alt para tus imágenes. Número 1, los motores de búsqueda podrían entender fácilmente el significado detrás de tus imágenes, y por lo tanto, pueden clasificar tu sitio web más alto. De esta forma podrás mejorar tu SEO. El segundo motivo es que a veces nuestras imágenes pueden no estar cargadas por completo. En ese caso, el navegador mostrará el texto alt o texto alternativo al usuario. El último motivo es que el texto alt o el texto alternativo podrían ser útiles para las personas con deficiencias visuales que utilizan lectores de pantalla. Las personas con deficiencias visuales suelen utilizar lectores de pantalla para leer el contenido de una página web. Cuando nuestras imágenes no tienen ningún texto alt, el lector de pantalla simplemente lee su nombre. Por ejemplo, si voy a Mis activos, voy a desplazarme hacia abajo, dice Tarjeta 1. No es descriptivo, por lo que el usuario puede estar confundido. Si me desplazo aquí arriba, se puede ver que estas imágenes de proyectos no tienen nombres descriptivos. Aquí tenemos 1, 2, 3, 4, 5, 6. Deberíamos agregar texto alt a nuestras imágenes con el fin de ayudar a un usuario con deficiencias visuales a entender el significado que hay detrás de su imagen. Pero, ¿cómo podemos agregar texto alt a nuestras imágenes? Bueno, hay muchas maneras de hacer eso. La primera y más sencilla forma es ir a los Activos, y luego si pasas el cursor sobre una de tus imágenes, puedes hacer clic en el icono Configuración. Entonces aquí puedes escribir tu texto alt. Aquí tenemos una pista. Dice escribir una descripción de esta imagen. El texto alt es utilizado por los lectores de pantalla y/o si una imagen no se carga. Aquí tenemos dos pestañas diferentes. Tenemos descriptivo, tenemos decorativo. Cuando nuestra imagen es decorativa, simplemente podemos ponerla en decorativa así como así. Aquí dice, las imágenes decorativas no transmiten significado y no requieren texto alt. Eso es correcto. Por lo tanto, no necesitamos añadir texto alt a nuestras imágenes decorativas. Pero si nuestra imagen tiene un significado, necesitamos escribir una descripción para eso. Tenemos que seleccionar Descriptivo, y aquí necesitamos escribir algo. Esta imagen no es decorativa. Si voy a la sección Testimonial, esta es la imagen de nuestro cliente. Aquí simplemente podemos escribir la imagen de Kristine Watson. Hecho. A partir de ahora, siempre que utilices esta imagen en tu página web, tendrá este texto alt. Pero hay algo que hay que tener en cuenta. Cuando añades una imagen usando la sección de fondo, no tienen ningún texto alt. Entonces aquí, este ícono no tiene ningún texto alt. Pero si quieres usar este icono en algún otro lugar usando un elemento de imagen, como puedes ver aquí, puedes ir a tus activos y simplemente puedes hacer clic en el icono Ajustes y ajustar su texto alt a decorativo así como así. Yo también voy a hacer lo mismo para estos dos iconos. Decorativa y decorada. Por regla general nuestros iconos son siempre decorativos. Déjame desplazarme un poco hacia arriba. Pero, ¿qué pasa con estas imágenes que son dinámicas? Como recuerdan, esta imagen proviene de nuestro CMS. No viene de nuestros activos aquí cuando creamos nuestra colección dentro de nuestro CMS aquí. Cuando creamos nuestros artículos de colecciones, por ejemplo, Simplify+, subimos esta imagen desde nuestro equipo. Aquí podemos especificar cualquier texto alt. ¿Qué debemos hacer? Bueno, para solucionar este problema, simplemente puedes ir a tu colección de Proyectos aquí. Entonces si haces clic en este icono de Configuración, aquí puedes crear un nuevo campo personalizado. Voy a agregar un campo aquí, y va a ser texto plano, y la etiqueta va a ser ALT Text. Justo así. No se va a requerir, así que no voy a marcar esta casilla de verificación requerida. Voy a golpear “Save Field” y “Save Collection”. Ahora bien, si voy a este proyecto Simplify+. En primer lugar, déjame seguir adelante y cambiar su nombre a Simplificar. Si me desplaza hacia abajo, aquí tenemos este nuevo campo de texto alt. Simplemente podemos describir esta imagen. Por ahora, sólo voy a escribir algo como ejemplo. La imagen del proyecto Simplificar. No es el mejor texto alt por cierto. Yo lo voy a guardar. Ahora, déjame dirigirme a mi diseño aquí. Si selecciono esta imagen y si hago clic en el icono “Ajustes”, aquí, como recuerdan, conectamos este elemento a nuestra imagen de proyecto. Aquí simplemente puedo obtener el texto alt de mis colecciones. Si marco esta casilla de verificación, puedo elegir texto alt, texto plano, y ya está hecho. Ahora, cada una de estas imágenes tendrá su propio texto alt. Por supuesto, si ya estableces el texto alt para ellos. Podemos hacer lo mismo para la página de proyectos. Si voy a la plantilla del proyecto, voy a seleccionar esta imagen, y voy a dar clic en este icono de “Configuración”, voy a obtener el texto alt de Proyectos, y déjame elegir el campo Texto ALT así como eso. Eso es todo sobre el texto alt. Pero hay una cosa más sobre la accesibilidad, y esa es su jerarquía de encabezamientos. Como mencioné antes, nuestros encabezamientos deben tener una estructura clara. Si voy a mi página de inicio y si me dirijo a la sección de Héroes, puedo ver que este título tiene la etiqueta HTML H1. Si hago clic en el icono de Ajustes, puedes ver que tenemos H1 a H6. Pero, ¿cómo debes elegir tu tipo de encabezamiento? Bueno, déjame decirte una regla. H1 está reservado para las palabras más importantes de su página. Normalmente son las primeras palabras que el usuario ve en tu página. En este caso, es nuestro título de sección de Héroe. Recuerda que siempre debes usar el tipo de encabezado H1 una vez en cada página. No debes usarlo varias veces. Pero, ¿por qué importa? Debido a que los motores de búsqueda podrían entender fácilmente la estructura de su sitio web cuando establece los tipos de encabezamiento correctamente. Si recuerdas, cuando estábamos diseñando esta sección de proyecto reciente, dije que intencionalmente configuraron su tipo de rumbo a H3. No está bien. ¿Por qué? Porque no debes omitir un tipo de encabezado cuando estás diseñando una página web. Cuando usas H1, entonces los segundos textos más importantes de tu página web deberían tener la etiqueta H2. En este caso, lo puse a H3 para explicarte la diferencia aquí. Si me salto un tipo de encabezado, los motores de búsqueda como Google no pueden entender la estructura de su sitio web correctamente, y por lo tanto, no le darán un rango más alto a su sitio web. Voy a seguir adelante y a arreglar eso rápidamente. Pero antes de hacer eso, voy a mostrar una característica muy útil, la sección Auditoría. Si te diriges a la esquina inferior izquierda aquí puedes ver que tenemos diferentes opciones. Tenemos este botón de Ayuda, tenemos Video Tutoriales, tenemos QuickFind, y después tenemos la sección Auditoría. Si hago clic en él, aquí podemos encontrar las imágenes de texto Faltan alt y Nivel de encabezado omitido. Como se puede ver, dice, “Auditorías comprueban la página actual en busca de oportunidades para mejorar el rendimiento y la usabilidad de su sitio”. Yo lo voy a despedir. Aquí, si hago click en este texto Faltan alt (13), puedes ver que nos muestra todas las imágenes que no tienen texto alt. Incluso nos muestra la colección de proyectos aquí y todos los artículos dentro que no tienen texto alt. Ya especificamos el texto alt para este proyecto Simplificar, pero echa un vistazo, otros proyectos no tienen texto alt. Tenemos dos opciones aquí. Podemos o ignorar esto. Por ejemplo, si esta Tarjeta 1 no necesita un texto alt, simplemente podemos hacer clic en este icono de campana para ignorarlo, o si simplemente quieres seguir adelante y agregar un alt textos a nuestra imagen, solo podemos hacer click en este botón de flecha derecha. Dice: “Llévame al arreglo”. Si hago click en él, seremos llevados al lado de Activos, y aquí podemos especificar un texto alt descriptivo. Pero, ¿qué pasa con la otra sección? Como pueden ver aquí, tenemos este nivel de rumbo Omitido. Si lo abro, aquí dice: “Los encabezados ordenados ayudan a los visitantes a entender la estructura de la página y a mejorar la navegación de la página”. Dice: “Proyectos rumbo H3”. Algo anda mal con el rumbo de estos proyectos. Esto es exactamente lo que vamos a seguir adelante y arreglar. O puedo ignorarlo o puedo decir que me lleve al arreglo. Si hago clic en esta flecha derecha, puedo cambiar el tipo de encabezado del lado derecho aquí. Voy a cambiarlo a H2, y ahora tenemos una estructura correcta. Voy a desplazarme hacia abajo. Permítanme seleccionar este rubro también. También va a ser H2. Voy a ponerlo en H2. Agradable. Déjame desplazarme hacia abajo. Todo se ve bien. Ahora déjame ir a las auditorías. Ahí vamos. Esa advertencia se ha ido porque ahora nuestro sitio web tiene una estructura clara en cuanto a tipos de encabezamientos. Simplemente puedo ir a otras páginas, por ejemplo, Contáctenos. Aquí este título de “Contáctenos” es el título más importante de esta página. Por lo tanto, utilizamos el tipo de encabezamiento H1. Si voy a auditoría, dice: “No se encontraron problemas”. Eso es genial. Ahora, déjame ir a otra página en nuestra plantilla de proyectos. Aquí lo voy a auditar. Dice, “Nivel de rumbo omitido”, de nuevo, encabezamiento del proyecto. nombre de este proyecto tiene el tipo de encabezado H1. No tenemos ningún otro rumbo aquí excepto aquí va a ser H2, así que lo voy a cambiar a H2 así como así. Ahora si lo audito, ahí vamos, esa advertencia se ha ido. Muy bien chicos. Eso es todo acerca de la accesibilidad. Cuando construyas un sitio web, asegúrate de hacerlo accesible para todos. Es muy importante porque eso es lo que te hace un gran diseñador web y desarrollador web. Espero que hayan disfrutado de este video. Te veré en el próximo. 64. Ajustes de proyecto: Oye, en este video vamos a hablar de un escenario de proyecto. Ya hablamos de ello antes, pero en este video, te voy a mostrar algunas otras características del entorno del proyecto. Como recuerdas, para poder ir a la configuración del proyecto, debes dirigirte a la esquina superior izquierda y debes hacer clic en este icono de “W” aquí, y luego desde aquí puedes ir a la configuración de tu proyecto, y aquí tenemos diferentes opciones. Tenemos General, Hosting, Editor, etc. No nos vamos a sumergir en todos ellos porque, por ejemplo, tenemos un video dedicado sobre SEO y también planes de Hosting. Yo sólo te voy a guiar por las pestañas y campos más importantes aquí. En la ficha General, tenemos este nombre, este es nuestro nombre de proyecto. Como puedes ver aquí tenemos una pista, dice: “Este es el título del proyecto dentro de Webflow”. Entonces tenemos el subdominio. Este es un dominio de puesta en escena que Webflow nos proporciona. Es totalmente gratuito y puedes publicar tu página web en este dominio. Por el momento, este proyecto aún no está publicado. Puedes seguir adelante y modificar eso, y si ese es subdominio está disponible, puedes usar ese dominio. Aquí podemos seleccionar una carpeta y dice “Los proyectos se pueden mover dentro y fuera de carpetas aquí”. No necesitamos mover nuestro proyecto a ninguna carpeta. Entonces tenemos estos iconos. Aquí puedes subir un Favicon. A Favicon es este pequeño ícono que puedes ver en la pestaña de cada navegador. Debe ser un icono de 32 por 32 píxeles. Aquí puedes ver todos los formatos soportados, PNG, GIF, o JPG. También puedes subir un Webclip. Esto es solo un ícono que aparece cuando enlace de tu sitio web se guarda en una pantalla de inicio de iPhone. Estos son opcionales, pero asegúrate de subir el Favicon siempre para tu sitio web. Después tenemos la Localización. Aquí puedes elegir la zona horaria de esta lista. Entonces puedes especificar un código de idioma. Dice: “Establezca el código de idioma de su sitio para permitir que los navegadores, las aplicaciones de traducción y otras herramientas realicen tareas sensibles al idioma”. También es opcional. Se puede obtener acceso a la lista de códigos de idioma si se hace clic en este enlace, pero para inglés, se puede escribir EN, por ejemplo. Entonces tenemos Website Password. Algunas de estas opciones están bloqueadas para el plan gratuito. Si quieres usarlos, debes seguir adelante y actualizar tu cuenta o necesitas agregar un plan de hosting a tu proyecto. Hablaremos de los planes de cuentas y de hosting, pero por ahora, solo necesitas saber que algunas características solo están disponibles en planes Pro o para proyectos con plan de hosting. Por ejemplo, si quieres exhibir tu proyecto, necesitas tener un plan de pago. Una cosa más importante es el branding Webflow. Dice “Para esconderse a Webflow branding desde el sitio publicado agrega hosting o actualiza tu cuenta a Pro”. ¿ Cuál es el branding Webflow? Déjame ir con el diseñador por un segundo, y te voy a mostrar qué es exactamente. Si publicas tu sitio web, si haces click en este botón “Publicar”, este es nuestro dominio de puesta en escena que acabo de mostrarte. Si hace clic en “Publicar” para seleccionar un dominio, puede publicar su sitio web, y ahora está publicado, y si hago clic en este pequeño ícono, ahí vamos. Aquí está nuestro proyecto. Se puede ver que en la esquina inferior derecha se encuentra este distintivo “Hecho en Webflow”, y aparecerá en sus sitios web si está utilizando el dominio de puesta en escena gratuito y si su sitio web está publicado en este dominio. Si sigue adelante y agrega un plan de hosting a su proyecto, simplemente puede desactivarlo. Déjame volver a la configuración del proyecto, veamos si tenemos algo más. Aquí tenemos la visión general de nuestro proyecto, el tamaño total del activo, última publicación, última actualización, el número de páginas, envíos de formularios. Estas son nuestras estadísticas. Aquí tenemos la actividad del sitio, me voy a desplazar hacia arriba. Si vas a Hosting, puedes agregar un hosting a tu proyecto. Hablaremos de ello más tarde. Entonces tenemos al Editor. Aquí puedes agregar colaboradores a tus proyectos para que alguien más pueda editar el contenido de tu proyecto, pero solo está disponible si tienes el plan de sitio CMS o Business. Después tenemos Facturación. No vamos a hablar de ello ahora porque tenemos un video dedicado para eso. Entonces tenemos SEO, el mismo caso. Vamos a hablar de ello más tarde. Entonces tenemos Formularios. Pasamos por todos estos campos antes. Después tenemos Fuentes. Aquí puedes agregar tus fuentes personalizadas, ya hablamos de ello. Después tenemos Copias de seguridad. Esta tina es tan útil. Es necesario saber que Webflow copia de seguridad de su proyecto cuando presiona Command Shift S o Control Shift S en Windows. ¿ Por qué importa? Porque a veces podrías cambiar algo y quieres volver a la versión anterior de tu proyecto. En este caso, simplemente puedes dirigirte a las Copias de seguridad y puedes encontrar aquí la versión adecuada, por ejemplo, ésta dice hace dos días, copia de seguridad automática, tres páginas, 102 estilos, etc. También puedes previsualizar esta versión y luego puedes restaurarla. Pero ten en cuenta que si quieres restaurar algunas copias de seguridad antiguas, necesitas un plan de hosting o una cuenta de pago. Pero puedes restaurar fácilmente estas copias de seguridad recientes. Después tenemos Integraciones. En esta pestaña, en realidad puedes conectar tu proyecto con servicios de terceros. Por ejemplo, Google Analytics, Google Maps, Facebook Pixel, y también se puede generar un token API. Hablaremos de las Integraciones en un video separado, pero por ahora, solo necesitas saber que existe en la configuración del proyecto. Por último, contamos con Código Personalizado, que también está disponible para planes de pago. Usando esta sección, puedes agregar algún código personalizado a tu sitio web si es necesario. Pero la mayoría de las veces, para la mayoría de los sitios web, no es necesario agregar ningún código personalizado. Pero si necesitas ampliar las capacidades nativas de Webflow, simplemente puedes actualizar tu plan y aprovechar estas útiles funciones. ¿ Qué tenemos aquí en la barra de herramientas? Aquí tenemos algunos iconos. El primero es el icono Transferir. Si hago clic en eso, dice “A un usuario, A un equipo”. Usando este botón, puedes transferir tu proyecto a la cuenta de otro Webflow. Pero para hacer eso, de nuevo, necesitas actualizar tu plan a una cuenta pagada. También puedes transferir tu proyecto a un equipo si te diriges a esta pestaña, es una opción útil si quieres transferir el proyecto del cliente a su propia cuenta y no quieres hospedar su proyecto por cuenta propia. Hablaremos más adelante de los beneficios de esta opción. La siguiente opción aquí es Eliminar. Si quieres eliminar tu proyecto, simplemente tienes que introducir este código rojo aquí y luego eliminar tu proyecto para siempre. Recuerda, una vez que eliminas tu proyecto, se elimina permanentemente y no puedes revertir esta operación. Asegúrate de pensarlo dos veces antes de eliminar tu proyecto para siempre. Entonces tenemos la opción Duplicar. En ocasiones podría necesitar duplicar un proyecto por una razón específica, no importa si solo quieres archivar un proyecto o solo quieres hacer algunos cambios en la versión duplicada, simplemente puedes hacer clic en este botón “Duplicar”, y aquí simplemente puedes duplicar tu proyecto. Aquí la última opción es Anular publicación. Si haces clic en él, tu sitio web será inédito y necesitas volver a publicarlo. Aquí tenemos otras opciones también. Contamos con Compartir. En ocasiones es posible que necesites compartir tu proyecto con otros diseñadores o digamos que otros colaboradores o incluso el cliente. Si hace clic en este botón “Compartir”, aquí simplemente puede encender este interruptor, y luego Webflow genera un enlace de compartir único para su proyecto. Si solo copia este enlace y lo comparte con su cliente o con cualquier otra persona, él o ella puede obtener fácilmente acceso al proyecto, pero con acceso de lectura. ¿ Qué significa? Significa que pueden hacer algunos cambios en el sitio web, pero esos cambios no se guardarán, por eso se llama solo lectura. Puedes estar 100 por ciento seguro de que no pueden romper tu sitio web. Voy a apagarlo y luego tenemos al Diseñador. Si haces click en él, serás llevado al diseñador. Entonces tenemos a Editor. Dice: “Publica tu proyecto para acceder al Editor”. Hablaremos del editor en el siguiente video. Muy bien chicos, eso es todo para la configuración del proyecto. Hay muchas cosas de las que no hablamos, como la sección SEO o Editor, pero definitivamente vamos a sumergirnos en ellas. Yo te gustó este video y te veré en el siguiente. 65. Editor: Oye, en este video vamos a hablar del editor de flujos de trabajo. Pero antes de eso, vamos a seguir adelante y revisar nuestros enlaces porque vamos a publicar nuestra página web. Cuando estábamos construyendo este proyecto, creamos algunos enlaces, pero son enlaces vacíos. No hay URL, por lo que no creamos un destino para esos enlaces. Adelante y arreglemos eso rápidamente. Voy a empezar con la barra de navegación. Si hacemos clic en este enlace con el logotipo, no nos lleva a ninguna parte. Déjame mostrarte. Si lo previsualizo y si hago clic en él, no pasa nada. Eso se debe a que no hay destino para este enlace. Voy a hacer doble clic en esta barra de navegación, y voy a seleccionar este enlace con el logotipo de la barra de navegación. Entonces del lado derecho, se puede ver que tenemos la configuración de marca y aquí tenemos diferentes opciones. lo que nos interesa es el tipo y URL. ¿ Qué tipo de comportamiento estamos buscando? Queremos lograr esto. Cuando el usuario hace clic en este logotipo, debe llevar al usuario a la página de inicio. Voy a seleccionar tipo. Por defecto, se establece en URL externa. Voy a cambiarlo a página. Entonces desde esta página drop menu, hemos creado dos páginas estáticas home y contáctanos. Voy a elegir Homepage. Igual que eso. Entonces podemos especificar si debe abrirlo en la misma pestaña o en una pestaña nueva. Voy a ponerlo en esta pestaña. Ahora sigamos adelante y comprobarlo. Si hago clic en él, ahí vamos. Eso es exactamente lo que queremos. ¿ Qué pasa con otros enlaces aquí? Voy a hacer doble clic en él. Voy a seleccionar este enlace de inicio. Voy a cambiar el tipo a página y la página va a estar en casa. ¿ Y los proyectos y servicios y contáctanos? Déjame primero seleccionar este Contáctenos y luego voy a cambiar el tipo a página, y va a llevar al usuario a la página Contáctenos. Pero, ¿qué pasa con los proyectos y servicios? Bueno, como recuerdan, creamos la sección de proyectos y la sección de servicios en nuestra página de inicio. Por lo que cuando el usuario hace clic en este enlace de proyectos, el usuario debe ser llevado a esa sección en particular de nuestra página de inicio. ¿ Cómo es eso posible? Es muy sencillo. Primero, déjame volver a mi instancia y me voy a desplazar hacia abajo. Déjame ir a la sección de proyectos recientes y voy a seleccionar esta sección. Entonces si te diriges a la configuración del elemento en el lado derecho, aquí tenemos este campo, ID. Voy a especificar una identificación para esta sección en particular. Debe ser una identificación única. Recuerda eso. Voy a escribir, proyectos. Enfriar. Pero, ¿qué pasa con los servicios? Voy a desplazarme hacia abajo. Yo voy a hacer lo mismo para esta sección de servicios, y aquí voy a escribir servicios. Agradable. Ya casi estamos ahí. Voy a desplazarme hacia arriba y voy a hacer doble clic en mi barra de navegación. Si selecciono estos proyectos link, del lado derecho, si abro este tipo menú desplegable, tenemos diferentes opciones aparte de URL externa y página que usamos antes, tenemos teléfono, correo electrónico, sección y bien. Voy a elegir sección, y luego tenemos este nuevo menú desplegable de sección, y si lo abro aquí, tenemos diferentes secciones. Estos dos son para nuestras formas, voy a seleccionar proyectos. Esta es la sección que acabamos de crear. Ahora veamos qué pasa si vuelvo a mi instancia y si previsualizo este proyecto, voy a dar click en proyectos. Ahí vamos. Nos llevan a la sección de proyectos. Este comportamiento se puede encontrar en muchos sitios web diferentes en la actualidad. Adelante y hagamos lo mismo por los servicios. Permítanme seleccionar este tipo. Voy a elegir sección y dejarme seleccionar servicios. Ya terminamos, excepto que no lo estamos. Permítanme volver a la instancia. Voy a previsualizarlo. Voy a dar click en servicios. Ahí vamos. Se ve bien. No obstante, tenemos un problema. Si voy a otra página, por ejemplo, nuestra página Contáctanos, déjame mostrarte lo que pasa. Voy a previsualizarlo y si hago clic en proyectos, como pueden ver, no pasa nada porque aquí no tenemos la sección de proyectos. Sucede lo mismo si hago clic en estos servicios. ¿ Cómo podemos arreglar eso? Déjame mostrarte cómo. Voy a volver a mi página de inicio, y voy a hacer doble clic en esta barra de navegación y dejarme seleccionar el enlace de este proyecto. Aquí, el tipo se establece en sección y vas a devolverlo a URL externa. Aquí voy a quitar este signo de hashtag y simplemente podemos escribir un tick de atrás y una barra inclinada hacia adelante, y luego voy a añadir un signo de hashtag. Por último, necesitamos especificar nuestras secciones ID. Déjame escribir proyectos. Yo voy a hacer lo mismo por estos servicios. Permítanme seleccionar este enlace. Voy a cambiar su tipo a URL externa, y voy a escribir de nuevo tick forward slash, un signo de hashtag y servicios. De esta forma estamos usando un enlace de anclaje. Este avance significa ir a nuestra página de inicio y luego este hashtag servicios significa ir a esta sección en particular. Ahora sigamos adelante y veamos si funciona. Pero para poder comprobarlo, primero debes publicar tu sitio web porque no funciona si simplemente seguimos adelante y previsualizarlo. Yo lo voy a publicar. Voy a seleccionar este dominio de puesta en escena, y vamos a golpear esta publicación para seleccionar un dominios. Agradable. Entonces si lo abro aquí, puedo dar click en proyectos y me llevarán a esta sección. Si hago click en servicios, me llevarán a esta sección. Pero la parte genial es que si voy al Contáctanos, por ejemplo, y si hago click en proyectos, nos volveremos a llevar a nuestra página de inicio, derecho a esta sección de proyectos. Eso es tan útil. ¿No es así? Ahora sigamos adelante y seleccionemos este botón ponerse en contacto. Voy a dar clic en el icono de configuración, y luego aquí voy a ir a la sección de páginas. Déjame elegir Contáctenos. ¿ Y el trabajo de CR? Voy a seleccionarlo y voy a elegir sección aquí, sección página, y déjame elegir proyectos. Déjame desplazarme aquí abajo. Estos botones aprenden más tienen URLs dinámicas, por lo que no necesitamos modificarlas. ¿ Qué pasa con estos aprender más botones? No creamos una página para nuestros servicios porque se trata un proyecto ficticio y no necesitamos crear algunas páginas sencillas una y otra vez. Hasta ahora aprendiste a crear una página moderna con interacciones complejas. Si lo desea, puede seguir adelante y crear una página para estos servicios, pero no es necesario para este curso. Voy a desplazarme hacia abajo. Aquí tenemos diferentes enlaces también. No creamos ninguna página para ellos también. Está totalmente bien porque solo quería mostrarte cómo puedes crear un pie de página con diferentes enlaces. Siempre puedes seguir adelante y crear algunas otras páginas y establecer un destino para estos enlaces. Ahora pasemos a nuestro tema principal que es el editor. Cuando desarrollas un sitio web, tu cliente no sabe cómo trabajar con el diseñador de webflows y no deberían hacerlo. ¿ Por qué? Porque es demasiado complejo para ellos aprender todas las cosas que has aprendido en este curso, y es totalmente comprensible. Deberían contactarte siempre si quieren modificar algo, modificar los contenidos de su página web? Por supuesto que no. Se puede utilizar el editor. Si te diriges a esta parte superior de tu ícono en la esquina superior izquierda, y si haces clic en él, puedes encontrar al editor. Voy a dar click en él y vamos a ser llevados al editor. Aquí está el editor. Como puedes ver, tenemos esta barra de herramientas en la parte inferior, tenemos páginas, colecciones, ajustes. Después tenemos dos botones, volver a vivir sitio y publicar. ¿ Cómo pueden los clientes seguir adelante y modificar los contenidos aquí? Es tan sencillo. Supongamos que se quiere modificar el encabezado. Simplemente pueden pasar el mouse sobre este encabezado, pueden hacer clic en él y luego pueden empezar a modificarlo. Supongamos que quiero cambiar esta palabra impresionante con increíble, así como eso. Es tan sencillo. No necesitan acudir al diseñador y modificarlo todo. También pueden insertar un enlace aquí. Pueden envolverlo con span, todo tipo de cosas, pero no pueden modificar el diseño del sitio web. Es muy importante. Pueden cambiar tu configuración de pantalla, las propiedades CSS y ese tipo de cosas. Supongamos que quieren cambiar este botón ponerse en contacto. Pueden pasar el cursor sobre él, y si hacen clic en este icono de configuración aquí, pueden editar el texto. También pueden editar el enlace. Voy a dar click en Editar texto, y aquí lo voy a cambiar para que empecemos, por ejemplo. Igual que eso. Yo lo voy a deshacer. ¿ Qué pasa con las imágenes? Bueno, cambiar imágenes también es fácil. Pueden pasar el cursor sobre una imagen y si hacen clic en ella, pueden seleccionar una nueva imagen desde su computadora. Voy a desplazarme hacia abajo. Incluso pueden modificar el contenido de su lista de colecciones. Déjame hacer click en este botón “Aprender más” y ahora estamos en la página del proyecto. ¿ Te acuerdas cuando hablamos del texto rico, el que usamos aquí para los detalles? Cuando usamos un texto enriquecido, el cliente simplemente puede modificarlo aquí. Pueden editarlo, pueden formatearlo, pueden ponerlo en negrita, pueden agregar enlaces, incluso pueden agregar imágenes y videos a esta sección. ¿ Cómo? Si solo hago clic aquí, puedo dar click en este botón más, y ahí vamos. Puedo elegir una imagen, un video. Incluso puede incrustar un código. Solo está disponible para un sitio de pago o cuenta de pago. Pueden agregar una lista de viñetas, etc. Es por eso que usar un texto enriquecido es tan beneficioso cuando estás diseñando un sitio web para un cliente porque no necesitan saber cómo modificar los párrafos, los encabezados, etc. Incluso pueden agregar un dirigiéndose aquí si quieren. Pero, ¿qué pasa con el contenido dinámico? Voy a ir a la página de inicio. Aquí en esta barra de herramientas en la parte inferior, si hago clic en páginas, puedo ver todas las páginas. Puedo ver unas páginas estáticas, páginas del proyecto. Puedo modificar la configuración de estas páginas una por una, pero ¿y si quiero agregar aún más proyectos a mi sitio web? Es tan sencillo. Puedo dirigirme a las colecciones. Puedo ir a la colección de proyectos y todos mis proyectos están aquí. Simplemente puedo seleccionar una de ellas si quiero modificarlas. Aquí están todos los campos que creamos antes, como la imagen, el tipo de proyecto, la fecha de finalización, detalles del proyecto, incluso el texto todo. Si quiero crear un nuevo proyecto, puedo presionar este botón verde y puedo crear un proyecto y el cliente simplemente puede administrar su sitio web sin tu ayuda. Por supuesto, si quieren modificar el diseño o un do algunas modificaciones complejas, pueden llegar a ti. De lo contrario, simplemente pueden modificar contenido, agregar contenido nuevo sin ponerse en contacto contigo. Por último, una vez realizados los cambios, pueden presionar este botón de publicación para publicar todos los cambios. Como se puede ver aquí dice que dos son cambios inéditos. Si hago clic en él, puedes previsualizar los cambios que hiciste y puedes presionar “Publicar”. Publicar a los cambios, y ahora esos cambios están en vivo. Todo esto se trata del editor. Se trata de una herramienta muy útil para modificar el contenido y añadir nuevos contenidos, especialmente para tus clientes. Porque ahora eres un usuario profesional de webflow y no necesitas usar el editor, pero tu cliente no lo es. Por lo tanto, él o ella necesita utilizar el editor para agregar contenido o modificar contenido. Muy bien chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 66. Publica tu sitio web: Oye, ahora que nuestro sitio web está listo, es momento de publicar nuestro sitio web. Pero antes de eso, es posible que necesites conectar tu dominio personalizado a tu proyecto. Ya te mostré que si te diriges a esta sección de publicación aquí y si hago clic en este botón “Publicar”, puedes ver que webflow crea un dominio de puesta en escena para tu proyecto. Es totalmente gratuito y puedes seguir adelante y modificar esta URL en la configuración del proyecto. No obstante, si estás construyendo un proyecto para un cliente, no quieres usar el dominio de puesta en escena porque no parece profesional. Por lo tanto necesitas conectar el dominio personalizado a tu proyecto. ¿ Cómo puedes hacer eso? Bueno, simplemente puedes hacer clic en este botón aquí o puedes ir directamente a la configuración del proyecto e ir a la pestaña de hosting. Voy a dar clic en él y me llevarán a la pestaña de hosting de la configuración del proyecto. Aquí es donde podemos agregar un plan de sitio para nuestro proyecto. Todos los proyectos en tu plan de inicio vienen con puesta en escena gratuita, como puedes ver está indicado aquí y si quieres conectar el dominio personalizado a tu proyecto necesitas actualizar a un plan de sitio de pago. Por lo que necesitas agregar un plan de sitio aquí, puedes elegir entre diferentes opciones, como básico, CMS, negocio. Hablaremos de las diferencias más adelante pero el proceso se ve así. En primer lugar, seguirás adelante y agregarás un plan de hosting, un plan de sitio a tu proyecto, y luego la opción de dominio personalizado estará disponible. Si ya tienes un dominio puedes simplemente escribirlo aquí y entonces necesitas seguir adelante y actualizar tu DNS. No vamos a sumergirnos en los asuntos técnicos ahora porque conectar un dominio personalizado a tu proyecto depende de tu proveedor de DNS. Si compraste tu dominio desde el dominio de Google tu proveedor DNS es el dominio de Google, y cada proveedor tiene su propio proceso de configuración. Por lo tanto no es posible seguir adelante y explicar el proceso de conexión de dominio personalizado de todos los proveedores de dominios. Este proceso de configuración podría cambiar con frecuencia por lo que la mejor manera de aprender al respecto es simplemente dirigirse a esta sección de dominio personalizado y usted hace clic en esto, aprender a configurar hosting de dominio personalizado. Si haces click en él, te llevarán a otra página y aquí hay un muy buen video que puedes ver explicando cómo puedes conectar un dominio personalizado a tu proyecto. También puedes seguir adelante y leer este artículo porque Webflow actualiza estos artículos con frecuencia si deciden cambiar algo. Es un proceso sencillo. No obstante como el proceso se ve diferente para cada proveedor, no vamos a sumergirnos en los temas técnicos pero el proceso es tan fácil y no consume mucho tiempo. Una vez que hayas conectado tu dominio personalizado puedes seguir adelante y publicar tu sitio web en tu dominio personalizado. ¿ Cómo puedes hacer eso? Es tan sencillo. Simplemente puedes dirigirte a este botón “Publicar”, puedes hacer clic en él y luego aquí, aparte de este dominio de puesta en escena, puedes elegir tu dominio personalizado y pulsar “Publicar” a los dominios seleccionados. Recuerda, siempre puedes anular la publicación de tu sitio web también. También puedes acudir al diseñador y puedes hacer clic en este botón “Publicar” de la barra de herramientas y puedes elegir tu dominio personalizado aquí también y luego presionar el botón “Publicar”. En este momento se selecciona nuestro dominio de puesta en escena. Publicemos nuestro proyecto por un segundo, y ahora está publicado y puedes abrirlo si haces clic en este pequeño ícono. Siempre que realices cambios tu sitio web necesitas asegurarte de seguir adelante y publicarlo. De lo contrario ese cambio es privado y nadie puede ver eso. Asegúrate de publicar tu sitio web una vez que realices algunos cambios. Si quieres anular la publicación de tu sitio web simplemente puedes dar click en este botón Anular publicación y será inédito. Si quieres modificar esta URL de puesta en escena, como mencioné antes, puedes dirigirte a la configuración del proyecto y luego bajo la pestaña general aquí tienes subdominio y solo puedes modificar este subdominio. Déjame cambiarlo por otra cosa; circledesign. webflow.io, voy a guardar los cambios y luego lo voy a publicar ahora. momento nuestro sitio web está publicado en este dominio de puesta en escena y nadie más puede usar esta URL. Esta es una URL única para nuestro proyecto. Yo lo voy a abrir. Ahí vamos, se ha cambiado la URL. En los futuros videos hablaremos diferentes planes de hosting si debes hospedar en Webflow o no, así que si no sabes qué plan es adecuado para ti o tus clientes, no te preocupes, nos meteremos en ello. Muy bien chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veré en el siguiente. 67. Planas de Webflow: Ahora que nuestra página web está lista, es hora de hablar de los planes de Webflow. Webflow tiene diferentes planes. Cuenta con planes de cuenta y planes de sitio. En este video, vamos a hablar de diferentes planes. Vas a aprender cuál es la diferencia entre ellos, y puedes decidir qué plan se adapta a tus necesidades. Si estás listo, empecemos. Si vas a webflow.com/pricing, puedes abrir esta página, y aquí te dejamos toda la información que necesitas sobre diferentes planes. Si me desplazo hacia abajo, puedes ver que Webflow tiene dos tipos de planes: planes de sitio, y planes de cuenta. ¿ Cuál es la diferencia entre ellos? Bueno, siempre que quieras conectar tu dominio personalizado a tu proyecto, necesitas agregar un plan de sitio a tu proyecto. En este momento estamos usando el plan de puesta en escena. Todos los proyectos por defecto tienen el plan de puesta en escena. Pero si quieres obtener acceso a más características y conectar tu dominio personalizado a tu proyecto, necesitas agregar un plan de sitio. Este es básicamente un plan de hosting. Si hago clic en esta sección de “Plan de sitio”, me llevarán a esta sección. A ver qué tenemos. Como se puede ver, tenemos cuatro opciones diferentes. Contamos con básico, CMS, negocio, y emprendimiento. Empecemos con básico. Podemos ver el costo aquí. Es el costo mensual. Dice, mejor para un sitio sencillo que no necesita un CMS. Básicamente, este plan no es compatible con CMS. Si quieres publicar un sitio web que solo tenga páginas estáticas, este plan funciona mejor para ti. Puedes ver todas las características disponibles aquí, puedes crear hasta 100 páginas estáticas diferentes, puedes obtener hasta 25 mil visitas mensuales, obtendrás 100 envíos de formularios al mes, y otras características diferentes. Entonces tenemos CMS, lo cual es bueno para sitios web que necesitan tener páginas dinámicas y trabajar con CMS. Nuevamente, puedes crear hasta 100 páginas estáticas, puedes obtener hasta 100 mil visitas mensuales. Utilizando este plan, puedes crear hasta 2,000 artículos de colección. En nuestro proyecto, el ítem de colección es donde los proyectos que creamos para nuestros proyectos. Si recuerdas, creamos diferentes proyectos como simplificar, crypto pi, etc. Aquí están el número de formularios de presentaciones es mucho mayor. Puedes seguir adelante y leer toda esta información. No vamos a sumergirnos en ellos. No los voy a leer uno por uno. Pero debes entender que si quieres conectar un dominio personalizado a tu proyecto, necesitas agregar un plan de sitio a tu proyecto. Recuerda, los planes de sitio se sumarán a los proyectos, no a tu cuenta porque también tenemos planes de cuenta y vamos a hablar de ello en unos minutos. Pero lo siguiente que voy a mencionar aquí son los planes de comercio electrónico. Estos planes de sitios son buenos para sitios personales, blogs y sitios web de negocios. Si quieres crear un sitio web de comercio electrónico usando Webflow, necesitas agregar un plan de comercio electrónico a tu proyecto. Aquí Aquí tienen estándar, plus, y avanzado. Puedes seguir adelante y leer la información aquí y conocer más sobre diferentes plantas aquí. Voy a volver a los planos del sitio, y ahora voy a hablar de planes de cuentas. Cuando trabajas con Webflow, mayoría de las funciones son gratuitas de usar, pero hay características que también se pagan. Estas son algunas características adicionales que es posible que necesites usar para crear proyectos increíbles. Ahora voy a dar click en este “Planes de Cuenta”. Ahí vamos. Aquí tenemos planes individuales y planes de equipo. Si eres freelancer y trabajas solo, no necesitas conseguir un plan de equipo. Pero si quieres colaborar con otros desarrolladores y otros diseñadores, es posible que tengas que seguir adelante y conseguir un plan de equipo. Pero hablemos de planes individuales. Cuando creas una cuenta en Webflow por defecto, el plan de inicio se asignará a tu cuenta. Aquí como podemos ver, dice, todo lo que necesitas para empezar a construir con Webflow y es gratis para siempre. Se pueden crear hasta dos proyectos utilizando el plan de inicio. Si hago clic en esto, puedes ver que los proyectos están en sitios alojados que construyes en Webflow. Si crea dos proyectos y si agrega un plan de sitio a esos proyectos, aún puede crear dos proyectos más utilizando el plan de inicio. Aquí dice que puedes publicarlos en un subdominio webflow.io para compartirlos como prototipos o agregar un plan de sitio para ir a vivir en un dominio personalizado. Después tienes facturación de clientes. Hablaremos de esta opción más adelante. escena, dice libre. Si hago click en él, veremos la información aquí. Dice hasta dos páginas estáticas y 50 artículos CMS. Significa que puedes crear más de dos páginas estáticas y más de 50 elementos CMS. Recuerda, no puedes crear páginas más dinámicas, pero puedes crear más de dos páginas estáticas. En nuestro proyecto, sólo teníamos dos páginas estáticas: nuestra página de inicio, y nuestra página de contacto con nosotros. Déjame seguir adelante y mostrarte. Si voy a las “Páginas (P)”, aquí puedes ver bajo Páginas Estáticas tenemos Inicio y Contáctenos. Si trato de agregar una nueva página aquí, no me permite hacer eso. Déjame mostrarte. Dice que has creado todas las páginas permitidas por tu plan gratuito. Para agregar más, actualice su plan de sitio. Esta es la limitación cuando se trata de plan de inicio. No puedes transferir tu proyecto, no puedes exportar tu código también. Una de las grandes características de Webflow es que puedes exportar tu proyecto. Si hago clic en esta “Exportación de código”, dice, exporte archivos HTML y CSS limpios y semánticos para entregar a su equipo de desarrollo. A veces es posible que necesites hospedar tu proyecto en otro lugar. No usar el hosting de Webflow. En ese caso, puedes dirigirte a la barra de herramientas aquí, y justo en la parte superior, puedes ver esta opción Código de exportación. Usando el plan de inicio, no es posible exportar tu código. Como se puede ver, aquí se muestra la vista previa HTML. No es todo el código de tu página web. Si vas a CSS, puedes ver tu código también, JavaScript, y activos. Si tienes una cuenta pagada, simplemente puedes exportar tu proyecto y alojarlo en otro lugar o realizar las modificaciones que desees. Eso depende totalmente de ti. Esto es algo a considerar. Entonces no tienes ninguna transferencia de proyecto usando starter. Déjame mostrarte. Puedes transferir proyectos a equipos o a cualquier persona con una cuenta de webflow y no puedes usar el etiquetado blanco. Dice, agrega tu propio logotipo a los formularios de pago CMS y Client Billing y elimina el branding Webflow de formularios, correos electrónicos y sitios de puesta en escena. No tienes protección por contraseña del sitio también. Si quieres trabajar como freelancer y obtienes más y más proyectos como desarrollador web, probablemente puedas ir con un plan ligero que te permita tener 10 proyectos no alojados con hosting de puesta en escena mejorado y también transferencias de proyectos. Pero aún así no tienes la opción de etiquetado blanco. Si tienes muchos clientes y muchos proyectos en los que trabajar, puedes ir y conseguir una cuenta pro. Usando la cuenta, eres libre de usar todas estas características. Una cosa más que voy a mencionar sobre plan gratuito y planes de pago es que usando el plan gratuito, no se puede agregar código personalizado a su proyecto. Si voy al proyecto Circle, si solo me dirijo a “Páginas Estáticas” aquí, y si hago clic en el icono de configuración, voy a desplazarme hacia abajo, aquí en la parte inferior puedes ver que tenemos esta opción, Código Personalizado. No obstante, no está disponible. Si deseas agregar algún código personalizado avanzado a tu proyecto, simplemente puedes actualizar a un plan de pago, y entonces esta opción estará disponible. También puedes agregar un plan de hosting a tu proyecto y nuevamente, esta opción estará disponible. Si voy a la “Configuración del proyecto” y si voy a la pestaña “Código personalizado”, puedes ver que esta opción no está disponible aquí también. De nuevo, necesitamos un plan de sitio de pago o necesitamos actualizar nuestro plan de cuenta para agregar código personalizado a nuestro sitio web. Hablaremos de código personalizado en nuestras futuras lecciones. Pero por ahora, solo necesitas saber que usando el plan de estater libre, no puedes usar código personalizado, y está totalmente bien porque el plan de inicio es útil para las personas que están aprendiendo. Si solo quieres experimentar con diferentes opciones y aprender cómo funciona Webflow, este es el mejor plan que puedes usar. No hay periodo de prueba y no se requiere tarjeta de crédito. Pero si consigues clientes y trabajas en proyectos de pago, definitivamente puedes actualizar a planes de pago para poder usar esas opciones adicionales. Recapitulemos. Recuerda, cuando hablamos de planes en Webflow, tenemos dos tipos de planes: planes de sitio, y planes de cuenta. Si operas tus planes de cuenta, estarán disponibles nuevas funciones para todos tus proyectos dentro de tu cuenta. Pero si agrega un plan de sitio a un proyecto solo ese proyecto podrá usar estas características adicionales, y tenga en cuenta que si desea conectar un dominio personalizado a su proyecto, necesita agregar un plan de sitio a su proyecto. Pero, ¿cómo podemos agregar un plan de sitio a nuestro proyecto? Es tan sencillo. Si te diriges a la configuración del proyecto de tu proyecto, puedes ver que tenemos estas pestañas de hosting. Debajo de esta pestaña de hosting, tenemos diferentes planes de sitio. Aquí como puedes ver tenemos básico, CMS, negocio, y empresarial y puedes ver todas las opciones disponibles para cada plan. Simplemente puedes agregar uno de estos planes a tu cuenta. Asegúrate de comprobar aquí el tipo de facturación porque tienes las opciones de facturación anual o mensual. Muy bien chicos, eso es todo por este video. Espero que lo hayas disfrutado, y te veré en el siguiente. 68. Introducción a la SEO: Oye, ahora que el proceso de desarrollo ha terminado, es hora de hablar de SEO. Como desarrollador web, debes entender que tu trabajo no termina cuando finaliza el proceso de desarrollo. Una vez que desarrolle el sitio web, necesita optimizar su proyecto para ubicarse más alto en Google y otros motores de búsqueda pero ¿cómo puede hacerlo? Bueno, este es el tema de este video. ¿ Qué es SEO? SEO es sinónimo de optimización de motores de búsqueda. Permítanme mostrarles un ejemplo. Siempre que vayas a Google y busques algo, vamos a escribir apple, cuando el rango de este sitio web sea alto, aparecerá más alto en el buscador y en la primera página porque si tu sitio web no aparece en las tres primeras páginas, significa que tu sitio web no está optimizado y lo más probable es que los visitantes no puedan encontrar tu sitio web porque la mayoría de la gente no va a la cuarta o quinta página. Por lo que necesitamos optimizar nuestro sitio web con el fin de posicionarse más alto en los motores de búsqueda. Ya hablamos de algunos puntos antes, como la jerarquía de encabezamientos, pero vamos a hacer aún más cosas. Una vez que desarrolle su proyecto, primero, necesita seguir adelante y revisar su jerarquía de encabezados, como lo que hicimos antes, debe asegurarse de que no use más de un H1 en cada página y no se salte ninguna tipo de encabezado a través de tu página, entonces debes asegurarte de que tus imágenes tengan todo el texto. Por último, lo que puedes hacer es simplemente ir adelante al panel Páginas y si vas a la configuración de página aquí, puedes ver que aquí tenemos algunos ajustes. Justo en la parte superior, tenemos el nombre de la página. Esto es sólo para uso interno con el fin organizar aquí todas nuestras páginas pero para uso externo, necesitamos dirigirnos a la Configuración de SEO. Veamos qué tenemos aquí. Dice, especifica el título y la descripción de esta página. Podemos ver cómo se ven en las páginas de resultados de motores de búsqueda en la vista previa a continuación. Aquí lo que podemos hacer es ingresar una etiqueta de título y una meta descripción. Esto es básicamente lo que aparecerá en las páginas de resultados de búsqueda de Google y también en los resultados de otros motores de búsqueda. Aquí para el título, voy a escribir Circle, que es el nombre de esta agencia ficticia, una línea vertical, y luego puedo escribir los principales servicios que ofrece esta empresa. Escribamos agencia de diseño y desarrollo así. Pero, ¿qué pasa con la meta descripción? Bueno, aquí hay que explicar brevemente lo que hace esta empresa. Voy a escribir, ayudamos a las startups a dar vida a sus ideas diseñando interfaces impresionantes y experiencias de usuario así, puedes ver la vista previa del resultado de búsqueda y dice, esta vista previa utiliza los límites de caracteres típicos para Páginas de resultados de búsqueda de Google en el escritorio. Los motores de búsqueda sí experimentan con sus límites de carácter y pueden decidir mostrar contenido diferente. Eso es 100 por ciento correcto. Voy a desplazarme hacia abajo. Aquí tenemos Ajustes de Gráfica Abierta. La información que agregamos aquí aparece cuando nuestros usuarios comparten nuestro contenido en sus cuentas de redes sociales como Facebook, Twitter, LinkedIn, Pinterest, etcétera Si me desplaza aquí para Open Graph Title, voy a revisar este Mismo como SEO Title Tag checkbox. Para Open Graph Description, voy a marcar esta casilla de verificación también. Aquí tenemos Open Graph Image URL. Asegúrate de añadir aquí una URL de imagen. Por ejemplo, puedes ir a tus Activos. En primer lugar, déjame guardar esta página, y después voy a ir a Activos. Déjame elegir una de estas imágenes. Por ejemplo, voy a elegir este. Si hago clic en este icono de configuración, aquí puedo obtener el enlace de esta imagen. Si hago clic en él, puedo copiarlo. Entonces déjame ir a Pages, Home, y si lo pego justo aquí, allá vamos, esta imagen aparecerá cuando el usuario comparta nuestro contenido en sus cuentas de redes sociales la imagen, el título, y la descripción. En lo que va tan bien. Ahora déjame salvarlo. Ahora necesitamos seguir adelante y optimizar nuestras otras páginas como el Contáctenos. Si voy a la configuración de la página Contáctanos aquí, para la etiqueta de título, voy a escribir Contáctenos, una línea vertical, agencia Círculo. Para la meta descripción, déjame escribir, si quieres conseguir un código para tu proyecto, no dudes en ponerte en contacto con nosotros. Déjame comprobarlo. Si deseas obtener un código para tu proyecto, no dudes en ponerte en contacto con nosotros. Eso es genial. Voy a desplazarme hacia abajo. Aquí tenemos los Ajustes de Gráfica Abierta también y vamos a marcar sólo estas casillas de verificación para obtener el mismo título y descripción. Para la imagen, voy a pegar aquí el mismo enlace. Bonito, déjame salvarlo. Hecho. Ahora necesitamos ir a nuestra página de Plantilla de Proyectos. Si voy a la configuración, aquí tenemos de nuevo título, meta descripción, y todos esos campos con una sola excepción. Esta página es una página dinámica, por lo tanto su contenido cambia constantemente. ¿ Cómo podemos agregar el título y la meta descripción para cada proyecto? Bueno, es tan sencillo. Como se puede ver aquí, tenemos esta opción de campo, por lo tanto, podemos llenar estos campos de texto dinámicamente, con contenido dinámico. Eso es tan guay. Supongamos que primero aquí, queremos agregar el nombre del proyecto. Si hago clic en este Agregar Campo, puedo elegir el campo adecuado. Va a ser nombre. Ahí vamos. Aquí puedes obtener una vista previa de los resultados de búsqueda. Este es el nombre de nuestro proyecto, espacio, una línea vertical, espacio, entonces voy a añadir el tipo de proyecto. Voy a añadir un nuevo campo. Va a ser de tipo proyecto. Aquí tenemos diseño de UI y desarrollo de aplicaciones. Toda esta información viene de nuestro CMS y luego una línea vertical. Aquí voy a escribir agencia Circle pero ¿qué pasa con la meta descripción? Vamos a escribir, echa un vistazo al, y ahora voy a añadir un campo, tipo de proyecto, proyecto que hemos hecho para el, nombre del proyecto, empresa. Vamos a previsualizarlo. Consulta el proyecto de diseño de UI y desarrollo de aplicaciones que hemos hecho para la empresa Simplifique. Eso es genial, ¿no? Ya que estamos usando campos, si utilizo estas flechas, puedo previsualizar fácilmente los resultados de búsqueda de otros proyectos también. Vamos a comprobarlo. Voy a dar click en esta flecha derecha y como pueden ver, el contenido cambia aquí. Eso es muy bonito, ¿no? Voy a desplazarme hacia abajo y aquí para el Título Open Graph, voy a marcar estas casillas de verificación. Para la imagen, voy a elegir la imagen del proyecto de este menú drop y la imagen se cambiará dinámicamente también. Si el usuario comparte el enlace de este proyecto, Simplifique, la miniatura será esta imagen, pero para otros proyectos, la miniatura será diferente, así como así, y la imagen coincide con la contenido aquí. Está bien, genial. Ahora déjame salvarlo. ¿ Qué más podemos hacer en términos de optimización de motores de búsqueda? Bueno, hay muchas cosas que podemos hacer, y vamos a cubrir las más importantes en los próximos videos. Espero que hayas disfrutado de este video, y te veré en el siguiente. 69. Verificación del sitio y Google Analytics: Hey, bienvenido de nuevo. Hasta ahora aprendiste qué es el SEO y cómo podemos optimizar tus páginas web con el fin de posicionarte más alto en diferentes motores de búsqueda. Pero en esta lección, vamos a hablar de verificación del sitio y Google Analytics. Cuando se publica un nuevo sitio web, Google suele intentar indexarlo automáticamente, pero a veces tarda tanto en que Google siga adelante y revise nuestro sitio web, revise diferentes páginas y clasifique nuestro sitio web. Por lo tanto, podemos seguir adelante e introducir nuestra página web a Google de forma manual. ¿ Cómo podemos hacer eso? Para ello, necesitamos trabajar con dos plataformas diferentes. Si vas adelante y buscas Google Search Console, y aquí puedes encontrar Google Search Console. Voy a abrirla. Aquí está la plataforma. Dice que las herramientas y los informes de Search Console te ayudan a medir el tráfico y el rendimiento de búsqueda de tu sitio, solucionar problemas y hacer que tu sitio brille en los resultados de búsqueda de Google. Eso es exactamente lo que necesitamos. La otra plataforma con la que vamos a trabajar se llama Google Analytics. Pero primero vamos a seguir adelante y verificar nuestro sitio web usando Google Search Console. ¿ Cómo podemos hacer eso? Bueno, es tan sencillo. En primer lugar, asegúrate de seguir adelante y crear una cuenta gratuita. Entonces si voy a la configuración del proyecto, y si voy a la pestaña SEO aquí, puedo desplazarme hacia abajo. Aquí dice verificación del sitio de Google, y aquí hay un enlace. También puedes hacer clic en este enlace para ir a este sitio web. Eso depende totalmente de ti ya que ya estoy conectado, voy a dar click en él. Ahí vamos. Si ya verificaste algún sitio web antes, es posible que veas esta página, pero si no has verificado ningún sitio web antes, es posible que veas un diálogo. Si estás viendo un diálogo, no te preocupes, voy a seguir adelante y mostrarte qué hacer. Pero en caso de que ya hayas verificado algunos sitios web, debes dirigirte y dar click en este enlace y necesitas añadir una propiedad aquí. Simplemente agregue propiedad. Entonces aquí tenemos dos opciones. Tenemos dominio, tenemos prefijo URL. Voy a seleccionar la opción correcta aquí. Aquí es donde necesitas ritmo la URL de tu sitio web. Si voy a mi página web, puedo seguir adelante y publicar mi sitio web. Voy a publicar en los dominios seleccionados, y aquí está nuestro dominio. En tu caso, definitivamente es diferente porque esta URL es única para cada proyecto. Necesitas abrirlo. Aquí, es necesario copiar esta URL. Recuerda, copia esta URL por completo incluyendo Http o Https. Voy a copiarlo. Voy a seguir adelante y voy a ir a la Consola de Búsqueda de Google. Déjame seguir adelante y crear una propiedad y déjame pegarla aquí mismo. Golpea “Continuar”. Ahí vamos. Aquí hay muchas formas diferentes de verificar la titularidad de este sitio web. Pero déjame mostrarte la más simple. Voy a ir a la etiqueta HTML aquí. Aquí como puedes ver, tenemos esta etiqueta click en este “Botón Copiar” y pegarlo en un editor de texto. Ahí vamos. Permítanme aumentar el tamaño de la fuente. Una vez que pegues eso aquí, necesitas agarrar este código de contenido así como eso. Asegúrese de agarrar sólo el texto entre estas comillas. Voy a copiarlo. Entonces si voy a la configuración de mi proyecto, puedo pegarlo aquí. Este es nuestro ID de verificación del sitio de Google. Después pulsa “Guardar cambios”. Agradable, pero aquí está la parte importante. Una vez que guardes los cambios, debes seguir adelante y publicar tu sitio web una vez más, lo contrario no funcionará. No olvides este paso. Voy a publicar para seleccionar los dominios. Bonito. Ahora vamos a la Consola de Google, y aquí voy a presionar estos “Botón Verificar”. Ahí vamos. Propiedad verificada. Ahora puedo golpear “Done”, bonito, pero como tengo diferentes proyectos, necesito seguir adelante y elegir esta URL en particular aquí. Si solo tienes este proyecto, no necesitas preocuparte por ello. Aquí en esta barra de búsqueda, voy a seguir adelante y pegar la URL de nuestra página web, que es ésta. Voy a copiarlo, pegarlo aquí, entrar. Aquí dice URL no está en Google, pero eso está totalmente bien. Dice que esta página no está en el índice, pero no por un error. Eso está bien porque lleva algún tiempo trabajar. No obstante, podemos seguir adelante y dar click en este “Solicitar Indización”. Dice probar si URL en vivo se puede indexar, toma uno o dos minutos enviar solicitud. Ahí vamos, indexación solicitada. Voy a dar click en “Got It”. Pero, ¿cómo podemos asegurarnos de que todo salió bien? Bueno, podemos seguir adelante y dar click en esta “Test Live URL”. Como puedes ver, dice URL está disponible para Google. URL se puede indexar y también podemos hacer clic en esta” Ver Página Probada”. En el lado derecho podemos ver el código de nuestra página web. Podemos ir a captura de pantalla. Como puedes ver, hay una captura de pantalla de nuestra página web y más info. Perfecto. Ahora nuestro sitio web está verificado. El siguiente paso es crear una cuenta en Google Analytics. Si solo tienes que seguir adelante y buscar Google Analytics en Google, puedes crear una cuenta, es totalmente gratis usando tu cuenta de Gmail. Entonces, una vez que hayas iniciado sesión, verás algo como esto. ¿ Qué debes hacer aquí? Necesitas acudir al administrador aquí en la parte inferior de esta página. Aquí tenemos diferentes opciones, cuenta y propiedad. Es necesario crear una nueva propiedad. Aquí dice crear una propiedad de Google Analytics 4 para medir su nombre de propiedad de datos web y de aplicaciones. Voy a escribir agencia de diseño de círculos. Aquí reportando zona horaria, no importa por ahora, la moneda no importa. Puedes seguir adelante y modificarlos si lo deseas. Golpea “Siguiente”. Aquí es necesario elegir una industria. Voy a elegir computadora y electrónica. Tamaño de negocio: pequeño y solo puedes revisar algunas de estas cajas de forma, por nuestro ejemplo, no importan. Voy a dar click en el botón “Crear”. Perfecto. Ahora tenemos que elegir una plataforma, web, aplicación para Android y aplicación para iOS. Voy a ir con web porque este es nuestro sitio web. Aquí necesitamos pegar la URL de nuestro sitio web. Aquí tenemos los Https. Voy a seguir adelante y copiar sólo esta parte de la URL y pegarla aquí. El nombre de la corriente va a ser simplemente escribir algo como agencia de círculo y crear stream. Se ha creado. Lo que necesitamos aquí es esta medición ID. Si haces click en este “Botón Copiar”, puedes copiarlo. Si te diriges a la configuración del proyecto, puedes ir a la pestaña de integraciones, aquí tenemos el ID de seguimiento de Google Universal Analytics. Necesitas pegar el ID de medición que copiaste aquí. Bonito. Asegúrese de que este conmutador esté habilitado, use la etiqueta global del sitio y presione “Guardar cambios”. Bonito. Entonces recuerda publicar tu página web una vez más. Publicado con éxito. Ahora en realidad podemos medir el rendimiento de nuestro sitio web. Google Analytics te ayuda a entender el comportamiento de los usuarios, lo que les gusta, dónde están, cómo interactúan con tu sitio web, y mucho más. Es esencial que cualquier sitio web se integre con Google Analytics. Si voy a los reportes aquí, aquí puedo ver algunas estadísticas. Yo puedo ir al tiempo real. Ahí vamos. Puedo ir a diferentes secciones como demografía, por ejemplo, panorama demográfico. Por ahora, como no tenemos ningún espectador, no obtendremos ningún dato. Pero una vez que publicamos nuestra página web y llevamos tráfico hacia ella, puedes dirigirte a la sección de informes y verás todas las estadísticas y datos. Ahora voy a mencionar algo importante, cuando conectas un dominio personalizado a tu sitio web y lo publicas, necesitas dirigirte a la sección SEO aquí, y debes asegurarte de desactivar la indexación de subdominios Webflow. Es muy importante, si no lo deshabilita, Google y otros motores de búsqueda podrían clasificar tu sitio web más bajo porque hay una versión duplicada de tu sitio web publicada en un subdominio. Asegúrate siempre de desactivar la indexación de subdominios Webflow así como así, y guarda los cambios y publica tu sitio web. Es muy importante. Chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veré en el siguiente video. 70. Optimización de imagen y carga perezosa: Hey, bienvenido de nuevo. En este video vamos a hablar de optimización de imagen. Cuando quieras empezar a construir tu proyecto y Webflow, lo primero que debes hacer es preparar tus activos. Necesitas exportar tus activos desde tu software de diseño sin importar si se trata de Figma, Adobe XD, Sketch, o cualquier software que utilices, y luego necesitas importar tus activos a Webflow. En este video, te voy a mostrar cuál es la forma adecuada de exportar tus activos y cómo necesitas optimizarlos para mejorar la usabilidad de tu sitio web, y también con el fin de mejorar el ranking de tu sitio web en búsqueda motores. Si estás listo, empecemos. Voy a ir a mi archivo de diseño. Aquí está Figma. Aquí como puedes ver, tenemos diferentes imágenes que usamos en nuestro proyecto y ya las exportaste, pero te voy a mostrar cómo necesitas hacerlas correctamente. Supongamos que quiero exportar esta tarjeta. En primer lugar, lo voy a seleccionar y luego si me dirijo al Inspector del lado derecho, solo puedo ir a la sección de exportación y puedo dar clic en este botón más, y aquí, puedo especificar algunas preferencias. En primer lugar, voy a especificar el formato. Por defecto, se establece en PNG. Puedes elegir JPG, SVG, y PDF. Dependiendo del software que estés usando, estos formatos pueden cambiar. Pero la mayoría de software de diseño admiten PNG, JPG, PNG, y SVG. ¿ Cuál es la diferencia entre estos formatos? Bueno, empecemos con JPG o JPEG. JPEG es uno de los formatos más populares que puedes utilizar para tus imágenes. Tiene un muy buen nivel de compresión por lo tanto, tus tamaños de imagen serán más pequeños si usas JPEG. No obstante, el compromiso es que no obtienes fondo transparente cuando usas JPEG. En este caso, ya que aquí tenemos esquinas redondeadas y necesitamos conseguir fondos transparentes para estas tarjetas, no podemos usar JPEG. En cambio, necesitamos usar PNG. PNG es otro formato popular que puedes usar para tus imágenes y te permite exportar tus activos con fondos transparentes. Por lo tanto, podemos crear algunos gráficos de superposición y es tan útil. Pero, ¿qué pasa con SVG? Bueno, SVG es un formato de archivo vectorial. Si creas una forma simple, por ejemplo, si creas un círculo, déjame mostrarte, así como así, puedes exportarla usando el formato SVG. ¿ Cuál es la diferencia? Cuando utilices el formato SVG este archivo será escalable sin perder calidad porque es un archivo vectorial. Pero cuando exportemos una imagen, será un archivo ráster, y cuando la escalemos, perderá calidad. Siempre que sea posible exportar tus archivos usando SVG, asegúrate de hacerlo. No obstante, sólo es posible para los archivos vectoriales. Por ejemplo, cuando cree un logotipo y su logotipo sea un archivo vectorial, asegúrese de exportarlo utilizando SVG. Pero para estas imágenes, no es posible usar SVG porque estos no son archivos vectoriales, estos son archivos ráster. Voy a quitar este círculo. El formato SVG le proporciona tamaños de archivo pequeños, luego JPEG le proporciona el tamaño de archivo más pequeño, y finalmente PNG. Cuando no necesitas obtener fondos transparentes, simplemente puedes usar JPEG. Pero si necesitas fondos transparentes, necesitas ir con PNG. Pero, ¿por qué estamos hablando de ello? ¿ Realmente importa qué formato utilizamos? Sí, sí lo hace. ¿ Por qué? Debido a que el tamaño de tu archivo tiene una relación directa con la velocidad de carga de tu página, y cuando tengas una velocidad de carga de página baja, Google clasificará a tu sitio web más bajo. No es lo que queremos así que por eso necesitamos optimizar nuestros activos para poder cargar nuestras páginas más rápido y con el fin de mejorar la usabilidad de nuestro sitio web. Déjame mostrarte cómo necesitas exportar tus imágenes. Supongamos que quiere exportar esta tarjeta. En primer lugar, es necesario seleccionarlo. Después te dirigirás a la sección de exportación. Aquí especificarás PNG porque vas a necesitar fondos transparentes. Aquí podemos especificar si queremos que este elemento sea explotado a 1x, 2x, etc. ¿Qué significa? Cuando se establece en 1x, significa que obtendrás lo mencionado exactamente que tienes aquí. Como puede ver, su ancho se establece en 190 píxeles y su altura se establece en 216 píxeles. Está bien. No obstante, hoy en día, cada vez más personas están usando pantallas de retina, y esas pantallas muestran dos veces píxeles. En lugar de exportar nuestros activos a 1x, podemos ajustarlo a 2x y ahora cuando lo exportemos el ancho de nuestro archivo será de 380 píxeles y la altura será de 432 píxeles. Si un usuario tiene una pantalla ancha, no pierde calidad. El motivo por el que debes exportar a 2x. Pero si tu imagen ya es demasiado grande, no necesitas exportarla a 2x. Por ejemplo, si el ancho está establecido en 2000 píxeles, no es necesario exportarlo a 2x. Recuerda cuando usas un elemento de imagen en Webflow, Webflow crea automáticamente variaciones de tu imagen para diferentes tamaños de pantalla. Básicamente optimiza automáticamente tus imágenes. Pero, ¿qué pasa con otras imágenes? Supongamos que desea exportar esta imagen del proyecto. En primer lugar hay que seleccionarlo. De nuevo, puedes exportarlo a 2x o puedes cambiar el formato de imagen a JPEG ya que no necesitamos fondo transparente y así sucesivamente. Déjame exportarlo a 2x. Ahí vamos. Bueno, la mayoría del software diseñado no te permiten comprimir tus imágenes para que no sean buenas con la optimización de imagen. Déjame mostrarte a lo que me refiero. Voy a seguir adelante y abrir una de estas imágenes aquí en el archivo de activos. Por ejemplo, el primero. Si reviso su tamaño de archivo, se puede ver que son 600 kilobytes, pero podemos comprimirlo aún más con el fin de aumentar nuestra velocidad de carga de página. Pero, ¿cómo? Existen diferentes formas de utilizar Adobe Photoshop y puedes usar la opción Guardar para Web. No obstante, existe una mejor alternativa. Hay un sitio web llamado TinyPNG. Si vas a tinypng.com, simplemente puedes arrastrar y soltar tus imágenes con los formatos PNG o JPEG y comprime tus imágenes por ti sin perder calidad. Eso es asombroso. Déjame mostrarte cómo funciona. Voy a seguir adelante y dejar caer una de mis imágenes aquí. Por ejemplo, éste. Ahí vamos, ya está terminado. Como puede ver, el tamaño del archivo original era de 600 kilobytes y la versión comprimida es de 146 kilobytes. Es impresionante. Disminuimos su tamaño de archivo en 76 por ciento. Yo lo voy a descargar. Ahí vamos. Esta es nuestra nueva imagen. A pesar de que lo comprimimos, aún tiene una alta calidad. Siempre debes seguir adelante y comprimir tus imágenes antes de importarlas a Webflow. Eso es todo sobre la optimización de imágenes. Ahora voy a hablar de carga perezosa. Cuando estaba explicando diferentes características de Webflow, te dije que hablaremos de carga perezosa más adelante y eso es exactamente lo que voy a hacer ahora. Siempre que uses un elemento de imagen, si vas al panel Agregar y si arrastras y sueltas un elemento de imagen, déjame mostrarte lo que sucede. Aquí, tenemos diferentes configuraciones. Si recuerdas, tenemos el texto Alt y aquí tenemos las opciones Cargar. Desde 2020, todas las imágenes por defecto están configuradas en carga perezosa. Pero, ¿qué significa? Déjame eliminar este elemento de imagen. Voy a seleccionar esta imagen de héroe. Si hago clic en el icono “Ajustes”, también puedo ver la opción de carga. Si abro este menú drop, puedes ver que tenemos tres opciones diferentes; tenemos perezoso, ansioso, y auto. ¿A qué se refieren? Cuando está configurado para perezoso el navegador cargará esta imagen una vez que entre en la vista. Por ejemplo, si me desplazo aquí abajo, tenemos imágenes diferentes. Estas imágenes no se cargarán hasta que entren a la vista. Cuando nos desplazamos hacia abajo aquí, el navegador cargará estas imágenes. De esta forma podemos asegurarnos de que nuestra página web se cargue muy rápido y es muy buena para SEO. Pero también podemos anular este ajuste. Puedo seleccionar esta imagen, puedo ir a la configuración de imagen y desde aquí puedo configurarla cargas demasiado ansiosas con la página. Si selecciono esta opción cuando se cargue la página, esta imagen también se cargará. Por lo tanto, lleva más tiempo que el navegador cargue nuestra página web. También podemos configurarlo en auto, y se comportará en función de las preferencias de los navegadores. Mi sugerencia es que siempre debes ponerlo demasiado perezoso. Como mencioné antes, por defecto, todas tus imágenes están configuradas demasiado perezosas. Pero voy a mencionar una cosa más. Esta opción solo funciona para tus elementos de imagen. Si solo creas un bloque div y si usas la imagen de fondo, no funciona para eso. Es necesario tener eso en cuenta. Muy bien, chicos. Eso es todo por este video. Espero que lo hayas disfrutado y te veré en el siguiente. 71. Atributos personalizados: Oye, en este video vamos a hablar de atributos personalizados. ¿ Cuáles son los atributos personalizados? Bueno, de acuerdo con Webflow, se pueden utilizar atributos personalizados para definir características de los elementos HTML. ¿ Tiene sentido? Si no lo hace, déjame mostrarte cómo funciona. Para cada elemento HTML, podemos especificar algunos atributos personalizados para modificar sus comportamientos o agregar algunas características personalizadas. Por ejemplo aquí, si selecciono algún elemento HTML como encabezado, y si me dirijo a la configuración de elementos en el lado derecho, puedes ver aquí tenemos la sección de atributos personalizados. Usando este botón plus, puedes crear un atributo personalizado. Cualquier atributo tiene un nombre y un valor. A veces son bastante útiles, pero la mayoría de las veces no los necesitarás. Déjame mostrarte cómo funciona. Si obtengo una vista previa de mi proyecto y si paso el cursor sobre este botón Póngase en contacto, se puede ver que no aparece nada y está bien. Pero a veces quizá necesitemos obtener una información sobre herramientas que indique lo que realmente hace. Por ejemplo, cuando el usuario pasa por encima de este botón, la información sobre herramientas debe mostrar una palabra o una frase como haga clic conmigo o contactarnos cualquier cosa, esta manera, los motores de búsqueda también pueden entender lo que hace este botón o lo que hace un enlace. Déjame mostrarte cómo funciona. En primer lugar, voy a seleccionar este botón, y si me dirijo a la sección de atributos personalizados, puedo crear un nuevo atributo personalizado. Aquí por nombre, voy a escribir título y por el valor, voy a escribir Click me, Save, y terminamos. Ahora publiquemos nuestra página web, y la voy a abrir. Ahora si paso el cursor sobre este botón, debería ver una descripción de herramientas que diga, haga clic en mí. A ver qué pasa. Ahí vamos. ¿ Se puede ver ese diminuto tooltip? Eso es exactamente lo que estábamos buscando. Pero permítanme mostrarles otro ejemplo. Si voy a la página Contáctanos y aquí en el campo de texto de nombre completo, voy a escribir algo al azar así. Como se puede ver, comprueba la ortografía. ¿ Se puede ver esta línea roja bajo este extraño nombre? Mi navegador realmente está revisando la ortografía de este nombre. No es lo que queremos para el campo de texto completo, entonces, ¿cómo podemos desactivarlo? Podemos usar un atributo personalizado. Déjame dirigirme al panel de páginas. Si voy a la página Contáctenos aquí, puedo seleccionar este campo de texto, y si voy a los atributos personalizados del lado derecho, puedo crear un nuevo atributo. Aquí voy a escribir ortografía sin ningún espacio, y por el valor voy a escribir falso. ¿ Debe el navegador revisar la ortografía? No. Por eso ponemos el valor en falso y lo guardamos. Después publica tu sitio web. Voy a ir a la página Contáctanos, asegúrate de refrescar tu página. Ahora si escribo algo raro, mi navegador no revisa la ortografía. Ese es uno de los casos de uso más populares de atributos personalizados. De hecho, hay muchos atributos HTML diferentes que puedes usar, y puedes obtener la lista completa aquí. Si vas a W3Schools.com, puedes encontrar la referencia de atributos HTML. Aquí, hay una lista de todos los atributos, pero la mayoría de las veces no los usamos. Pero si lo deseas, puedes seguir adelante y echar un vistazo. Chicos, eso es todo por este video, espero que lo hayan disfrutado, y los veré en el siguiente. 72. ¿Cómo crear un poppop?: actualidad, cada vez más sitios web están usando pop-ups para pedir a los usuarios que hagan algo. Por ejemplo, registrarse para el boletín o ingresar sus direcciones de correo electrónico o enviar un formulario. En este video, te voy a mostrar cómo puedes crear un pop-up fácil y convenientemente. ¿ Estás listo? Empecemos. Para crear un pop-up, primero, es necesario entender la estructura de un pop-up. Un pop-up realmente interrumpe la interacción del usuario con su sitio web. En realidad bloquea el uso del sitio web hasta que el usuario realice algunas acciones, por ejemplo, llenando un formulario o enviando un formulario. ¿ Cómo podemos crear tal interacción? Bueno, primero, necesitamos un Bloque Div. Déjame presionar la tecla “Comando” o la tecla “Control”. Voy a escribir Bloque Div. Ahí vamos. Voy a poner este Bloque Div justo debajo de mi cuerpo. No importa dónde esté, pero para poder organizar todo correctamente, lo voy a poner en la parte superior de mi Navigator. Ahora déjame darle una clase. Voy a escribir envoltorio pop-up. Esta envoltura emergente debe ser arreglada sin importar si el usuario se desplaza por la página. Sigamos adelante y cambiemos su posición de estática a posición fija, así como así, y luego voy a poner su posición a plena. Como puede ver, ocupa todo el ancho y alto de nuestro informe. Aquí dice relativo al cuerpo. Entonces voy a desplazarme hacia abajo y dejarme darle un color de fondo. Voy a darle un color de fondo negro, y voy a disminuir su opacidad para crear este efecto de superposición. Voy a disminuirlo al 70 por ciento. Bonito. Como puedes ver, este envoltorio pop-up ahora está por encima de algunos de nuestros elementos, pero aún así hay algunos elementos que están por encima de este envoltorio pop-up, aunque se coloca encima de nuestro navegador. Si recuerdas, te dije que no importa dónde esté nuestro elemento en el Navigator, siempre podemos poner nuestros elementos encima de eso si modificamos el índice Z. Aquí voy a establecer el índice Z en 9999. De esta manera puedo asegurarme de que este envoltorio pop-up siempre estará encima de todos los elementos, así como así. Ahora, como puedes ver, todos los demás elementos están detrás de este envoltorio pop-up. Si me desplaza hacia abajo, se puede ver que está arreglado. Se hace la primera parte. Ahora dentro de esta envoltura, voy a crear un nuevo Bloque Div, y ese Bloque Div puede contener cualquier cosa. Puede contener un Bloque de Formulario o un texto, cualquier cosa que desee. Pero en este ejemplo, voy a crear un Bloque de Formulario. Si bien esta envoltura está seleccionada, voy a presionar la tecla “Comando” o la tecla “Control”. Busquemos un Bloque Div. Ahí vamos. Aquí le voy a dar una clase. Esta vez, voy a escribir pop-up__model. Aquí voy a especificar el ancho y la altura. Van a ser de 500 píxeles por 300 píxeles. Déjame seguir adelante y darle un color de fondo blanco. Ahora está posicionado en la esquina superior izquierda, pero queremos centrarlo. ¿ Cómo podemos hacer eso? Es tan sencillo. En primer lugar, tenemos que seleccionar nuestra envoltura emergente, y luego necesitamos simplemente cambiar la configuración de pantalla a las bicis flex. Como ustedes saben, necesitamos modificar la alineación a centro y la justificación a centrar también. En este modelo emergente, vamos a tener un Bloque de Formulario. Si bien está seleccionado, voy a presionar la tecla “Comando” o la tecla “Control”, y busquemos un Bloque de Formulario. Ahí vamos. Se ha agregado el Bloque de Formulario. Aquí voy a darle una clase a este Bloque de Formulario. Escribamos pop-up__form. Vamos a establecer el ancho al 100 por ciento, y voy a establecer el ancho máximo de 400 píxeles para eso, pero no está centrado. Voy a seleccionar este modal pop-up y voy a cambiar su configuración de visualización a flex max, y déjame cambiar la alineación a centro, así como así. Aquí está nuestra forma sencilla. No vamos a cambiar el estilo porque solo quiero mostrarte cómo puedes crear un pop-up. Una vez que aparezca la ventana emergente, el usuario debería poder cerrarla también. Vamos a necesitar un botón de cierre. Voy a seguir adelante y añadir un enlace de texto aquí dentro de nuestro envoltorio pop-up. Asegúrate de que esté anidado dentro de nuestra envoltura emergente. Ahí está. Voy a darle una clase. Vamos a escribir pop-up__close derecha. Voy a cambiar su color a blanco que pudiéramos ver eso, déjame modificar la declaración a ninguna. Aquí voy a escribir cerca, pero su posición es la lucha. Voy a colocarlo en la esquina superior derecha. Si bien está seleccionada, voy a cambiar su posición a absoluta, agradable, y luego déjame posicionarla hacia arriba a la derecha. Ahí está. Usando estas cantidades aquí, voy a fijar su posición correcta a tal vez 8 por ciento, su posición superior a 8 por ciento también. Nuestro pop-up está listo, pero ¿cómo podemos usarlo realmente? Ahora mismo si lo previsualizo, puedes ver que no puedo interactuar con el sitio web. Si hago clic en el botón “Cerrar”, no pasa nada porque no creamos ninguna interacción. Ahora es el momento de seguir adelante y crear nuestra interacción. Pero primero, voy a seleccionar este envoltorio emergente, y luego voy a cambiar su configuración de visualización de flex max a ninguno porque lo voy a ocultar por ahora. Ahora vamos a necesitar seguir adelante y crear la interacción, pero ¿qué tipo de gatillo debemos crear? Si voy a la interacción, como recuerdan, podemos crear el disparador de elementos o el disparador de página. Depende totalmente de ti. Se puede crear un disparador de elementos por ejemplo, si el usuario hace clic en un botón, esa ventana emergente debería aparecer o incluso se puede crear un desencadenador de página. Por ejemplo, cuando todo se carga después de tres o cuatro segundos, se debe mostrar esa ventana emergente. En primer lugar, voy a seguir adelante y crear un disparador de página. Ya creamos la carga de página y utilizamos esta animación de héroe. Podemos usar este o puedes usar otro disparador de página. Voy a usar la carga de página otra vez. Aquí cuando la página empieza a cargarse, genial , inicia una animación, y voy a crear una nueva animación. Llamémoslo pop-up abierto, bonito. Aquí necesitamos crear algunas acciones. En primer lugar, mientras se selecciona esta envoltura emergente, adelante y crea una acción. La primera acción va a ser la opacidad. Por defecto, su opacidad debe fijarse cero por ciento y vamos a habilitar el estado inicial así como así. Entonces voy a crear un nuevo fotograma clave y voy a elegir opacidad. Volvamos su opacidad al 100 por ciento y en el medio, voy a crear otra acción, pero esta vez voy a elegir Ocultar/Mostrar. Si recuerdas, configuramos su configuración de pantalla en ninguno, ahora necesitamos cambiarlo de nuevo a flex max así como así. Déjame descomponerlo por ti. En primer lugar, establecemos su opacidad en cero por ciento por defecto porque cuando la página se carga, no deberíamos verla y también está oculta para poder interactuar con la página. Cambiaremos su configuración de pantalla a flex max, por lo que ahora bloquea el uso de nuestros sitios web, y luego incrementaremos su opacidad al 100 por ciento. No obstante, hay un problema, si lo guardo y si lo previsualizo, puede ver que cuando se carga la página, también aparece el pop-up. Eso no es lo que quiero. Quiero que todos estos elementos se carguen primero y después de tres segundos, este pop-up debería aparecer. Permítanme seguir adelante y modificar el retraso aquí. Voy a seleccionar envoltura emergente Ocultar/Mostrar, y voy a aumentar el retraso a tres segundos, así como así. Déjame salvarlo. Ahora déjame previsualizarlo otra vez, todo se carga. Ahí vamos. En primer lugar, todo cargado y luego apareció este pop-up. Eso es exactamente lo que queríamos. Pero, ¿cómo podemos cerrar este pop-up? Es tan sencillo. Tenemos que seguir adelante y crear un nuevo gatillo. Si acabo de cerrar esta página de carga aquí, podemos seguir adelante y seleccionar nuestro enlace emergente de cierre que creamos, y luego podemos crear un elemento desencadenante esta vez. Voy a elegir click o tap del ratón. Al primer clic, voy a crear una animación personalizada, vamos a crear una nueva animación, y la voy a llamar pop-up close. ¿Qué debemos hacer aquí? Tenemos que hacer dos cosas. En primer lugar, necesitamos disminuir la opacidad de nuestro envoltorio emergente a cero por ciento, y luego necesitamos establecer su configuración de visualización en ninguno. ¿ Por qué deberíamos hacer eso? Porque si simplemente disminuimos la opacidad de un 100 por ciento a un 0 por ciento, la ocultaremos, pero sigue ahí. Sigue bloqueando el uso de nuestro sitio web. Necesitamos establecer su configuración de visualización en ninguno para que el usuario pueda interactuar con nuestro sitio web. Es muy importante. Asegúrate de no olvidar eso. Voy a seleccionar envoltura emergente. Voy a crear una nueva acción, opacidad, y cambiemos su opacidad a cero por ciento. Vamos a crear un nuevo fotograma clave, Ocultar/Mostrar, y voy a establecer su configuración de visualización en ninguno y guardar. Déjame seguir adelante y previsualizar eso. Ahí vamos. Todo carga, bonito. Este es nuestro pop-up. Puedo desplazarme hacia abajo, sigue ahí. Si hago click en cerrar, ahí vamos, está cerrado. Puedo volver a interactuar con mis elementos. Muy bien chicos, así es como se puede crear un pop-up dentro de Webflow. Espero que lo hayas disfrutado y te veo en el siguiente. 73. Código e integración personalizada: Hey, bienvenido de nuevo. En este video, vamos a hablar de código constante e integración de terceros. Sé que te dije que no vamos a codificar y eso es 100 por ciento cierto, pero a veces si quieres agregar algunas funcionalidades a tu proyecto que Webflow no ofrece, puedes integrar algunos servicios de terceros en su proyecto de Webflow simplemente copiando y pegando algún código. No necesitas saber escribir código, solo necesitas saber cómo usarlo. Como mencioné antes, la función de código personalizado solo está disponible para plan de pago, por lo que si estás usando el plan gratuito, desafortunadamente, no puedes usar eso. No obstante, quería mostrarte cómo funciona en caso de que quieras actualizar tu plan en el futuro. Si estás listo, empecemos. En primer lugar, aquí tenemos este lienzo vacío. Este es un proyecto nuevo y si quiero usar algún código personalizado, tengo diferentes opciones. Si quiero agregar el código constante a todo el proyecto, a todas las páginas a todo el sitio web, puedo dirigirme a la configuración del proyecto y puedo ir a la pestaña de código personalizado aquí y tengo código de cabeza y tengo código de pie de página. Pero si queremos agregar algún código personalizado a una página específica de mi proyecto, puedo hacerlo bien en el diseñador. Déjame mostrarte cómo. Aquí está nuestro lienzo vacío. Voy a ir al panel Agregar y me voy a desplazar hacia abajo. Aquí debajo de los componentes, se puede ver que tengo este Embed. No está disponible para plan gratuito, por lo tanto, si quieres usar eso, necesitas actualizar tu plan. Voy a arrastrarlo y soltarlo aquí. Ahí vamos. Ahora, tenemos este componente de inserción HTML, y aquí podemos pegar nuestro código personalizado. Funciona como cualquier otro elemento. Solo necesitas pegar aquí algún código personalizado y guardar y cerrar y asegurarte de publicar tu proyecto. Déjame mostrarte cómo funciona. Supongamos que desea crear una encuesta o un formulario que obtenga a los usuarios la información por un motivo específico. Se puede utilizar un servicio llamado Typeform. Es un servicio muy popular. Déjame mostrarte cómo funciona. Aquí está su página de aterrizaje. En realidad te permite crear algunas encuestas o formularios manera fácil y conveniente y puedes modificar el diseño de tu formulario, los ajustes, todo lo que puedas imaginar, y tiene un plan gratuito también, para que puedas usarla de forma gratuita. Primero necesitas seguir adelante e inscribirte, crear una cuenta gratuita, y luego simplemente puedes crear un formulario. No vamos a sumergirnos en los detalles porque es tan sencillo crear un Typeform, solo quiero mostrarte cómo puedes incrustar este formulario en tu proyecto. Aquí está la forma que creé antes. Déjame mostrarte. Si voy a mi panel de control, tengo estos RSVP, puedo dar click en él. Puedo modificar las preguntas, puedo modificar las opciones o respuestas aquí, y luego puedo publicarlo. Una vez publicado, puedo dirigirme a la pestaña de compartir en la parte superior y aquí puedo dirigirme al embed en una sección de página web. Puedes elegir la opción que quieras. Si necesitas un pop-over, puedes usar esta opción. Si necesitas la pestaña diapositiva, puedes usar esta opción. Voy a usar el estándar y aquí voy a conseguir el código así como así. Voy a copiar el código y si me dirijo a mi proyecto de Webflow y lo pego aquí, puede ver que el código está en una línea, por lo tanto si quieres comprobarlo, simplemente puedes desplazarte horizontalmente así. Ahora, voy a guardar y cerrar y asegurarme de publicar tu sitio web porque no funciona si solo tienes una vista previa de tu sitio web aquí, así que necesitas publicarlo, y luego necesitas abrirlo y vamos a ver qué tenemos. Ahí vamos. Aquí está nuestro Typeform incrustado aquí en nuestro proyecto. Si solo escribo Arash, y luego apellido. Aquí vamos a escribir test@ gmail.com y luego puedo elegir entre una de estas opciones. Escribamos UK, y luego voy a elegir una de estas opciones, por ejemplo, Figma, y presentarlo. Ahí vamos. Hecho. Su información fue enviada a la perfección. Si me dirijo al sitio web de Typeform aquí, si voy a la pestaña de resultados aquí mismo, puedo ver el formulario que acabamos de enviar. Si voy a las respuestas, aquí está. Simplemente puedo ver todas las respuestas aquí. Es un servicio muy útil que puedes integrar a tu proyecto de Webflow y puedes usarlo también para tus futuros proyectos de clientes. ¿ Puedes ver lo sencillo que es copiar y pegar algún código personalizado y mejorar la usabilidad de tu sitio web? Ahora, permítanme mostrarles otro ejemplo. Supongamos que tu cliente quiere que crees un sistema de reservas para él o ella. ¿ Cómo se puede hacer eso? Bueno, puedes usar otro servicio. En realidad hay muchos servicios por ahí que puedes usar. No obstante, les voy a mostrar un servicio muy popular llamado Calendly. Si solo tienes que seguir adelante y crear una cuenta en su sitio web, aquí está su página de destino. También lo puedes utilizar de forma gratuita. Yo sólo voy a seguir adelante y mostrarte cómo funciona. En primer lugar, solo necesitas crear un evento. Por defecto, tendrás este evento demo. También puedes seguir adelante y crear tus propios eventos o una reunión única aquí. Una vez creada tu reunión, debes hacer clic en este botón de compartir y luego tienes que ir a la pestaña Agregar al sitio web, y aquí voy a usar embed en línea. Al igual que eso, y continuar. Aquí vamos a obtener el código. Puedes modificar el diseño simplemente aquí. Simplemente puedes modificar los ajustes también. Entonces si solo copias el código y te diriges a tu proyecto de Webflow y lo pegas aquí, voy a eliminar el código personalizado anterior que agregamos, y lo voy a pegar aquí, guardar código, publicar, y estamos hechos. Déjame abrirla, aquí está. Nuestro sistema de reservas está listo para nosotros y nuestros usuarios simplemente pueden reservar una reunión con nosotros. Permítanme elegir una fecha, por ejemplo, ésta, luego la hora. Confirmar. Aquí solo voy a escribir Arash y test@gmail.com y finalmente, voy a escribir un mensaje. Estamos hablando de código personalizado. Entonces voy a programar el evento y ahí está, la conformación, está programada con Arash y aquí está la información. Si vas a Calendly y aquí bajo la pestaña de eventos programados, puedes encontrar aquí todos los próximos eventos así como esto. Si desea modificar o reprogramar evento, simplemente puede hacerlo. Simplemente puedes cancelar el evento también, aquí está el mensaje. Aquí hay toneladas de opciones que puedes usar. Muy bien, si quieres obtener una lista de todos los servicios que puedes integrar en tu proyecto de Webflow puedes dirigirte a esta URL universidad.webflow.com/ integraciones y luego aquí, hay un menos de todos los servicios que tú se puede integrar en tu proyecto de Webflow así. Tenemos Shopify, Zapier. Zapier es tan útil también. Si solo deseas conectar diferentes servicios e integrarlos con tu proyecto, puedes usar Zapier, definitivamente echa un vistazo a eso. También puedes utilizar otros servicios. Puedes presionar este siguiente botón para ver otros servicios. Hay muchos servicios diferentes que puedes usar y son tan prácticos. Por eso quería mostrarte cómo puedes usar código personalizado en tu proyecto, porque simplemente puedes copiar y pegar una línea de código y agregar fácilmente una funcionalidad avanzada a tu sitio web. El último ejemplo que quiero mostrarles es este. Hay un sitio web muy cool llamado CodePen, Codepen.io y si vas adelante y creas una cuenta gratuita aquí, solo puedes usar algunos efectos cool. Aquí hay muchos efectos diferentes que puedes usar y como puedes ver, para cada efecto, tendrás el código HTML en el lado izquierdo, el CSS aquí, justo en el medio, y el JavaScript. Entonces déjame mostrarte cómo puedes usar eso. Aquí está el efecto de hecho que elegí, como puedes ver es tan genial, pero ¿cómo puedo usar eso? Es tan sencillo. En primer lugar, necesitas agarrar el código HTML del lado izquierdo, lo voy a copiar y si me dirijo a mi código personalizado aquí, lo voy a pegar aquí mismo, voy a quitar el código constante anterior que nosotros pegado y lo voy a pegar aquí mismo, guardar y cerrar. El primer paso está hecho, pero aún no hemos terminado. ¿ Por qué? Debido a que este efecto requiere del CSS o estilo y también utiliza el JavaScript, necesitamos agregar el CSS y el script a nuestra página también. ¿ Cómo podemos hacer eso? Si vas a la configuración de tu página aquí, y si te desplazas hacia abajo, aquí tenemos la etiqueta de cabeza y cuerpo. Tenemos que pegar el código CSS aquí en la etiqueta de cabeza, y necesitamos pegar el código JavaScript aquí en la etiqueta de cuerpo. Entonces déjame seguir adelante y copiar el código CSS y lo voy a pegar aquí mismo, pero como puedes ver, Webflow no reconoce este código CSS. ¿ Por qué? Porque todo es blanco. En primer lugar, voy a eliminar estas líneas adicionales de código en la parte superior, no necesitamos eso. Necesitamos tener el cuerpo, y para que Webflow entienda que se trata de un código CSS, necesitamos usar la etiqueta de estilo. ¿ Por qué? Porque CSS es en realidad para estilizar. Entonces voy a crear esta etiqueta de título así como así y ahí vamos. Ahora, tenemos todos estos colores y significa que Webflow entiende que se trata de un código CSS. Pero una vez que creas la etiqueta de estilo, necesitas seguir adelante y cerrar eso, es tan simple. Solo necesitas escribir una barra inclinada hacia adelante y solo escribir estilo. Ahí vamos. Se hace la primera parte. Ahora, necesitamos seguir adelante y copiar nuestro código JavaScript. Ahora, voy a copiarlo. Déjame ir a Webflow y aquí justo en la etiqueta body, lo voy a pegar, pero de nuevo, Webflow no reconoce eso como código JavaScript porque todo es blanco. Entonces primero, voy a seguir adelante y eliminar estos comentarios en la parte superior. Como puedes ver, este es un comentario que no es un código, voy a eliminar eso y aquí necesitamos crear otra etiqueta. ¿Qué tipo de etiquetas? Dado que se trata de un código JavaScript, necesitamos crear una etiqueta de script. Entonces, vamos a escribir guión. Whoops, guión ahí vamos. Ahora, tenemos todos estos colores, voy a seguir adelante y cerrar esta etiqueta, un guión de barra hacia adelante, cool. Ahora, déjame guardarlo y si publico mi proyecto, y si lo abro ahí arriba lo está. Aquí está nuestro efecto cool, es increíble, ¿no? Pero, ¿cómo podemos cambiar estas palabras? Es tan sencillo. Necesitas dirigirte a la configuración de tu página aquí si me desplazo hacia abajo justo en el código JavaScript aquí tenemos este texto contras, y tenemos todas las palabras, y cada palabra está entre dos comillas. Simplemente puedes seguir adelante y modificarlo. Simplemente voy a modificar una de estas palabras, por ejemplo, ¿por qué es esto tan satisfactorio para el diseño? Yo lo voy a guardar y lo voy a publicar. Recuerda publicar tu página web siempre que estés usando código personalizado y déjame abrirla. ¿ Por qué esto es tan satisfactorio para el diseño? Ahí está. ¿Qué tan guay es eso? Está bien chicos ¿pueden ver lo sencillo que es usar código personalizado en Webflow? Espero que hayas disfrutado de este video y asegúrate de seguir adelante y echa un vistazo a la lista de integraciones de Webflow porque hay muchos servicios diferentes que puedes integrar en tus proyectos de Webflow solo copiando y pegando algunos personalizados código. Espero que hayas disfrutado de este video y te veo en el siguiente. 74. Animación de lottie: Oye, en este video te voy a mostrar cómo puedes usar las animaciones de Lottie en tus proyectos. Si abres nuestro proyecto de círculo que creamos juntos, puedes dirigirte a la página Contáctenos. Aquí, como recuerdan, nuestra forma tenía tres estados diferentes. Tenía el estado normal, el éxito y el error. Si tan solo selecciono este formulario de contacto en el navegador y voy al estado de éxito aquí, se puede ver que tenemos este sencillo mensaje con un fondo gris. Está bien, pero podemos hacer que se vea aún mejor agregando aquí una animación de Lottie. Por ejemplo, podemos agregar una animación de conformación aquí. ¿Cómo podemos hacer eso? En primer lugar, voy a seleccionar este bloque de mensajes de éxito aquí. Entonces voy a dirigirme a la imagen del fondo y la voy a hacer transparente porque no necesitamos obtener ningún color de fondo así. Voy a disminuir la opacidad a cero por ciento. Está bien, genial. Ahora voy a añadir un elemento Lottie a este bloque profundo. Si bien se selecciona este bloque profundo, voy a dirigirme al panel de agregar. A partir de aquí, voy a arrastrar y soltar esta animación Lottie y poner cada uno justo encima de mi bloque de texto. Ahí vamos. Aquí está nuestro elemento de animación Lottie, pero no tenemos ningún archivo de animación de Lottie. ¿ Dónde podemos conseguir uno? Bueno, puedes ir a una página web llamada lottiefiles.com y es la página oficial de Lottie. Aquí hay grandes recursos que puedes encontrar, pero lo que necesitamos es simplemente seguir adelante al menú Descubre. Desde aquí voy a ir a animaciones libres. Aquí puedes explorar muchas animaciones gratuitas diferentes creadas por diferentes colaboradores aquí. Como puedes ver si me desplazo hacia abajo, aquí hay muchas animaciones geniales, y simplemente puedes usarlas de forma gratuita. También puedes ir a otras páginas. Dependiendo de tus necesidades, puedes elegir entre ellas. ¿ Qué necesitamos en realidad? Estamos buscando una animación de confirmación. Usando esta barra de búsqueda en la parte superior, voy a buscar confirmación. Muy bien, golpea “Enter” y veamos qué obtenemos. Como puedes ver aquí, tenemos toneladas de diferentes opciones. Déjame ver. Voy a elegir este, el tercero, puedes elegir lo que quieras. Yo me voy a ir con éste. Ahora simplemente puedo hacer clic en este botón de “Descargar” y necesito descargar el archivo JSON de Lottie. Para descargar el archivo, es necesario crear una cuenta gratuita. Asegúrate de seguir adelante e inscribirte primero. Ahora voy a dirigirme a Webflow y voy a ir a activos, y voy a arrastrar y soltar mi archivo Lottie en mis activos. Ahí está. Entonces voy a seleccionar este elemento de animación Lottie, si hago doble clic en él, puedo reemplazar esta secuencia de Lottie. Voy a elegir este archivo JSON y puedo previsualizar esta animación. No obstante, es demasiado grande. Si bien está seleccionada, voy a seguir adelante y darle una clase, déjame escribir animación Lottie. Entonces te voy a dar el ancho máximo específico. Escribamos a 100 píxeles. Eso está bien, pero no está centrado. Voy a dar clic en este pequeño botón la sección de espaciado para establecer el margen izquierdo y derecho a auto. Entonces le voy a dar algún margen inferior. Añadamos aquí un margen inferior de 20 píxeles, creo que sería suficiente. Agradable, déjame previsualizarlo. Se ve bien. No obstante, necesitamos seguir adelante y publicar nuestro sitio web y en realidad probarlo en nuestro sitio web publicado. Voy a publicarlo y si lo abrí aquí arriba, voy a llenar este formulario. Escribamos Arash y aquí voy a escribir test@gmail.com. Entonces vamos a escribir un mensaje, hola y “Enviar” Vamos a ver esta imagen, pero la animación no se reproduce. ¿ Qué pasa? ¿Cómo podemos arreglar eso? Para solucionar este problema, necesitamos usar la sección de interacción Webflow. ¿ Por qué? Porque necesitamos crear un disparador de elementos para activar esta animación. Déjame dirigirme al panel de interacciones. A partir de aquí, voy a crear un disparador de elementos. Nuestro elemento va a ser nuestro botón de enviar, este botón primario. Por favor selecciónelo desde el navegador y crea un elemento disparador, clic con el ratón, toque. Entonces voy a crear una nueva acción aquí, va a ser una animación personalizada. Aquí voy a crear una nueva animación y vamos a escribir animación Lottie. ¿ Qué debemos hacer aquí? Ahora necesitamos seleccionar nuestro elemento de animación Lottie y luego necesitamos crear una acción. Aquí, como se puede ver bajo las integraciones ahora tenemos a Lottie. Voy a elegir a Lottie. Ahí vamos, si me desplazo aquí abajo bajo la sección Lottie, se puede ver que puedo controlar los marcos. Voy a ponerlo a cero por ciento porque este es nuestro punto de inicio. Entonces voy a crear una nueva acción Lottie y luego vamos a convertirla al 100 por ciento. Si lo previsualizo, se ve bien, pero juega tan rápido, así que voy a cambiar su duración a dos segundos. Déjame previsualizarlo. Es mucho más bonito, ¿no? Déjame ahorrar y ya terminamos. Ahora, voy a publicar aquí mi página web y luego voy a seguir adelante y refrescar esta página Contáctenos. Permítanme llenar de nuevo este formulario. Voy a escribir Arash y aquí vamos a escribir test@gmail.com y para el mensaje, vamos a escribir hola. Voy a presionar el botón “Enviar”. Ahí vamos. Nuestra animación Lottie juega a la perfección. Así es básicamente como puedes agregar animación personalizada a tu sitio web. Si quieres crear tu propia animación, y si estás familiarizado con el software, Adobe After Effects, puedes descargar fácilmente los plugins de Lottie y luego puedes crear tu animación en Adobe After Effects y exportar tu archivo Lottie JSON e importarlo en Webflow, es muy sencillo. De esta forma podrás crear algunas animaciones personalizadas para tu proyecto. También puedes pedir a un diseñador gráfico de movimiento que haga eso por ti. Eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente. 75. Convención de nombramiento: Oye, en este video vamos a hablar de convención de nomenclatura. Bueno, cuando construyes un sitio web, usas muchas clases CSS diferentes, igual que lo que hicimos en nuestro propio proyecto, el Proyecto de Agencia Circle. A medida que creas más y más clases, se hace cada vez más difícil mantener y organizar todas las clases, clases combinadas, clases globales, todo. En este video, te voy a presentar una convención de nomenclatura muy popular que puedes usar en tus proyectos, se llama BEM. BEM significa bloque, elemento, y modificador. ¿ Suena complicado? No te preocupes, te lo voy a descomponer. En primer lugar, voy a seguir adelante y crear un elemento. Voy a arrastrar y soltar este elemento de barra de navegación aquí. Este navbar no tiene clase alguna. Supongamos que aquí queremos crear una clase. ¿ Cómo debemos nombrarlo? Básicamente, depende totalmente de ti. Puedes usar tu propia convención de nomenclatura siempre y cuando puedas mantener tus clases organizadas y entiendas lo que estás haciendo, está totalmente bien. Pero si estás trabajando con un equipo de desarrolladores y diseñadores, sería mejor usar un sistema de convención de nomenclatura que todos los demás desarrolladores entiendan. ¿ Cómo funciona el sistema BEM? Bueno, como mencioné antes, significa bloque, elemento, y modificador. ¿ A qué se refiere el bloque? El bloque es nuestro elemento principal. Por ejemplo, aquí en este caso, este navbar es nuestro bloque. Por lo tanto, lo vamos a nombrar sólo navbar. Creamos nuestra clase base. Entonces si lo extiendo en el navegador, tenemos aquí un contenedor, y este contenedor se va a llamar contenedor porque este es otro bloque. Este es el bloque principal. Entonces dentro vamos a tener diferentes elementos como este link de marca, tenemos este menú de Nav y estos enlaces de Nav y también este botón de Menú el cual está oculto. Supongamos que queremos nombrar a este enlace de marca, ¿cómo podemos hacer eso? En primer lugar, necesitamos escribir nuestro nombre de bloque. ¿ Cuál es nuestro bloque principal? Es navbar. Escribimos barra de navegación, y luego usamos dos guiones bajos así, y luego necesitas escribir el nombre del elemento. Aquí va a ser logo, así como así. Ahora tenemos nuestro nombre de bloque y nuestro elemento aquí. Pero, ¿qué pasa con el modificador? Bueno, el modificador se refiere a nuestras clases combo. Por ejemplo, si solo sigo adelante y selecciono este enlace de navegación y solo le doy una clase, escribamos nav menu subrayado, subrayado nav link. Entonces aquí tenemos nuestro bloque y luego tenemos nuestro elemento, y este enlace tiene algunas propiedades. Pero supongamos que queremos sobrescribir estas propiedades usando una clase combo. Entonces, podemos seguir adelante y crear una clase combo. Esta clase combo va a ser nuestro modificador. Supongamos que queremos cambiar el color de estos Enlace Home, por ejemplo, a rojo. En este caso, puedo crear una nueva clase combo y puedes escribir algo como esto. Puedes escribir.is dash rojo, y luego puedes seguir adelante y modificar el color justo en la sección de tipografía a rojo. Aquí, esto.is dash rojo es nuestro modificador. Puedes nombrarlo como quieras, pero así funciona el sistema BEM. Si quiero crear un nuevo modificador, puedo eliminar esta clase y luego puedo escribir.is dash green, por ejemplo. Déjame seguir adelante y modificar este color a verde, algo así. Ahora simplemente puedo cambiar entre estos modificadores. Dice que es verde, es rojo. El punto de usar este sistema de convención de nomenclatura es que simplemente puedes entender lo que hace cada clase. Por ejemplo, aquí puedes entender de inmediato que es un modificador, es verde, es rojo. Se pueden crear diferentes modificadores como; es grande, es grande. Por ejemplo, si elijo el logotipo de la barra de navegación aquí, inmediatamente verá el nombre del bloque que es navbar, y luego el elemento, logo. Simplemente puedes organizar todos tus elementos dentro del navegador cuando uses esta convención de nomenclatura. Pero de nuevo, depende totalmente de ti cómo nombres tus clases. Siempre y cuando los mantengas organizados y comprensibles, eres libre de usar cualquier sistema de convención de nomenclatura que desees. Pero recuerda, puedes trabajar en un proyecto pequeño y puedes usar tu propio sistema de convención de nomenclatura y funciona perfectamente. No obstante, si aplicas la misma convención de nomenclatura a un proyecto a gran escala, puedes enfrentarte a dificultades porque si creas cientos de páginas diferentes y cientos de clases diferentes, sería un reto organizar y entender todas las clases combinadas y clases que crees. En ese caso, se puede utilizar la convención de nomenclatura BEM. Muy bien chicos, espero que les resulte útil este video. Te veré en el siguiente video. 76. Introducción al mundo de la Freelance: Construir un negocio de diseño web exitoso es una tarea desafiante que requiere una tremenda cantidad de energía y muchas habilidades. Hasta ahora, aprendiste a construir un sitio web moderno y totalmente receptivo con interacciones y animaciones complejas y estoy tan orgullosa de ti, pero todavía no sabes del lado empresarial del viaje de los freelancers. Entonces en los próximos videos, te voy a guiar por el proceso de freelancing como diseñador web y desarrollador web. Hablaremos de adquirir clientes, preparar propuestas, fijar precios a su trabajo, y mucho más. Por lo que si quieres saber cómo crear un negocio de diseño web exitoso para ti, asegúrate de revisar los próximos videos. 77. ¿Cómo llegar a los clientes?: No importa lo bueno que sea su diseño, si no puede vender sus servicios, me temo decir que tarde o temprano estará fuera de este negocio. Pero no vamos a dejar que eso suceda. Asumamos que no tienes experiencia previa en diseño web y desarrollo web y quieres empezar desde cero. ¿ Qué necesitas hacer para conseguir tu primer cliente? Esa es una pregunta sencilla. Pero la respuesta no es tan sencilla. ¿ Por qué? Porque hay un conjunto de cosas que debes hacer para conseguir tu primer cliente. Para conseguir al cliente, primero, debes entender cómo piensan los clientes, qué les importa y qué quieren lograr. Un cliente siempre necesita confiar en su primero antes de firmar el contrato con usted. ¿ Cómo se puede ganar la confianza del cliente? Bueno, tienes que demostrarles que eres capaz de hacer lo que estás ofreciendo. ¿ Cómo? Al presentar su portafolio. Pero espera, no tenías clientes. ¿ Qué debes mostrarles? La respuesta es, necesitas crear algunos proyectos de muestra. Para ello, puedes buscar algunos negocios locales a tu alrededor y ver si hay sitios web requieren algunas mejoras. Puedes rediseñar sus sitios web y construirlos en Webflow rápidamente. Recuerda, no debería ser perfecto. Entonces puedes ponerte en contacto con ellos y mostrarles lo que has hecho. Simplemente puedes decir: “Oye, soy diseñador web y pensé que tal vez tu sitio web necesita ser actualizado. Aquí está el antes y después de su sitio web, y con gusto le ofrecería mis servicios”. Esta es la forma más fácil de empezar y conseguir tu primer cliente. Adicionalmente, puedes publicar tus trabajos de muestra en redes sociales como LinkedIn, Instagram, Facebook, etc. De esta manera cada vez más clientes potenciales verán tu trabajo y pueden llegar a ti. También puedes publicar tus proyectos de muestra en Behance y Dribbble. Estas plataformas son un gran lugar para presumir de tus habilidades de diseño y desarrollo web. Lo siguiente que debes hacer es crear una cuenta en un mercado freelance. Hay muchos marketplaces que te ayudan a conseguir clientes convenientemente, como Fiverr, Freelancer, Upwork, etc. Te sugiero freelancer.com, pero puedes estar en cualquiera de ellos. Crea tu perfil y agrega tus obras de muestra al mismo. Al principio es más difícil conseguir clientes porque no conseguiste ninguna crítica, pero una vez que completas algunos proyectos y obtienes buenas críticas, se vuelve mucho más fácil adquirir nuevos clientes. Me gustaría que supieras que el freelance es todo sobre conexiones y relaciones. Si te ataste a diferentes clientes, pero no te dieron el proyecto, eso está bien. Es parte del proceso. Podrían llegar a ti después de un año más o menos y darte otro proyecto. Es tan importante crear grandes relaciones con todos porque ¿quién sabe? Pueden ser tus futuros clientes. 78. Envío una propuesta: Una vez que encuentres a tu potencial cliente, te pedirán que les envíes una propuesta y es una de las etapas más importantes del freelancing. Si lo haces bien, incrementarás drásticamente las posibilidades de conseguir el proyecto. Muchos principiantes luchan con esta etapa porque prefieren dedicar tiempo a diseñar y construir un proyecto en lugar de preparar una gran propuesta. Pero déjame recordarte algo. Si no puedes conseguir al cliente, no hay proyecto que hacer. Vale la pena centrarse más en esta etapa también. Ahora hablemos de la propuesta en sí. ¿ Cómo debe estructurarse? ¿ Qué información debe incluirse? Cuando se trata de preparar propuestas, no hay manera correcta o incorrecta. Puedes elegir entre diferentes estilos, diferentes diseños, etc. Así es como estructuro mis propuestas. Cada propuesta debe tener siete elementos principales. Número 1, introducción. Esta sección se escribe principalmente en base a las conversaciones previas que tuviste con el cliente. Puede incluir el nombre del cliente, el título del proyecto, el nombre de su punto de contrato, su nombre y título, y finalmente, la fecha de envío. Aquí un ejemplo de una buena introducción. Número 2, panorama general del problema. Una vez que te presentas al cliente, la siguiente sección importante que sigue es la visión general del problema. En este apartado, se debe definir claramente el problema y el cliente debe entender que existe un problema con el sitio web que tiene un impacto negativo en su negocio. El cliente también debe entender que tienes una profunda comprensión de sus problemas y puedes aclarar tus responsabilidades y el alcance del proyecto aquí. Recuerda, el objetivo principal de una propuesta de proyecto es hacer creer a tu cliente que puedes resolver sus problemas. Concéntrese siempre en las necesidades y cuestiones del cliente. Aquí hay un ejemplo de una visión general del problema. Número 3, resumen de la solución. Después de definir los problemas de la empresa mediante la realización de diferentes piezas de investigación, es momento de convencerlos de que puedes resolver sus problemas proporcionando una solución detallada. En este apartado, debes explicar cómo se pueden beneficiar al usar tus servicios para resolver sus problemas y lo más importante, una vez que vas a hacer para resolver sus problemas. Como puede ver aquí, tenemos una muy buena visión general de la solución. Número 4, entregables. Esta sección debe definir claramente lo que entregarás como parte del proyecto y lo más importante, lo que no entregarás. Podrás pensar que es extraño excluir lo que no entregamos, pero créanme, cuando trabajas con clientes inexpertos, a veces esperan que prepares el contenido, el logotipo, las imágenes, e incluso optimizar su sitio web para los motores de búsqueda. Es tu responsabilidad aclarar lo que es y no forma parte del alcance del proyecto. Número 5, panorama general del proceso. Después de definir los problemas, las soluciones y los entregables, debes explicar cómo se ve tu proceso. En esta sección se pueden delinear diferentes pasos de su proceso. Al igual que las reuniones iniciales, preparar los activos, diseñar una estructura alámbrica, etc. También puedes indicar cuánto tiempo dura cada paso y qué esperas del cliente durante este proceso. Número 6, el costo. Ahora es el momento de esbozar el costo de sus servicios. Si no conoces el presupuesto de tus clientes, asegúrate de preguntarles antes de preparar la propuesta. Porque de lo contrario, podrías pedir un precio muy alto o un precio exiguo. Recuerda, está totalmente bien preguntar al cliente sobre su presupuesto por adelantado, así que no tengas miedo de hacer eso. Si no sabes dar precio a tu trabajo, no te preocupes. En la siguiente lección, hablaremos de ello profundamente. Número 7, CTA o llamado a la acción. En este apartado, deberá solicitarle al cliente que proceda al siguiente paso, aceptando la propuesta y firmando el contrato. Si envías tu propuesta como archivo PDF o Word, puedes pedirles que te envíen un correo electrónico y te informen sobre su decisión. Realmente no recomiendo así. ¿ Por qué? Por muchas razones como los PDFs no son sensibles. Por lo tanto, si el cliente quiere leerlo en su teléfono, sería problemático. El segundo motivo es que los PDF no dejarán que el cliente acepte un proyecto y firme el contrato de inmediato. En cambio, puedes utilizar una herramienta de propuesta en línea que te permite diseñar y preparar la propuesta de manera profesional y conveniente. De esta forma, puedes enviar la propuesta como una página web que sea responsive, protegida por contraseña, y editable. Además, tu cliente simplemente puede hacer clic en el botón “Aceptar” y firmar inmediatamente el contrato. ¿ Cómo es esa conveniencia? Yo personalmente uso este sitio web para preparar esta propuesta de forma gratuita. Hay muchas herramientas como esta que puedes usar para este propósito. Todo eso se trata de la preparación de propuestas. Espero que te haya gustado este video y te veré ahí. 79. Fijar precio de tu trabajo: La fijación de precios juega un papel importante en cualquier negocio. Tú, como freelancer, debes saber valorar tu trabajo para tener éxito en este negocio. Muchos de ustedes esperan que les dé un número mágico ahora mismo. Pero no hay un número mágico cuando se trata de precios. No existe una fórmula estándar que te dé el punto de precio exacto que debes elegir para tus servicios. ¿ Cómo puedes decidir cuánto debes cobrar a tu cliente? Sobre todo cuando apenas estás empezando. Bueno, hay muchos factores que debes tomar en consideración a la hora de fijar precios. En primer lugar, hablemos de los modelos de precios. Generalmente hay tres modelos de precios entre los que puedes elegir. Tarifa por hora, tarifa plana, y tarifa recurrente. Empecemos con la tarifa por hora. Si cobras 60 dólares la hora y el proyecto tarda 60 horas, cobras $3,600. Este modelo es bastante sencillo porque el cliente puede entender fácilmente cuánto tiempo tarda cada paso. Pero hay un inconveniente en eso. Es necesario realizar un seguimiento de las horas que gasta en el proyecto porque a veces el cliente podría cambiar el alcance del proyecto, y puede tardar mucho más en entregarlo. Ahora hablemos de tarifa plana. Es una forma efectiva de cobrar a tu cliente. ¿ Por qué? Porque estableces las expectativas una vez, y cobras un precio fijo por ese proyecto. Supongamos que cobras $4,000 por un proyecto que te lleva 60 horas construir, es una tarifa de $66 por hora. Pero aquí está el punto, cuando elijas este modelo de precios debes tener en cuenta que aún necesitas cobrar un precio fijo sin importar el tiempo que tardes en completar el proyecto. Si te toma 80 horas en lugar de 60, es una tarifa de $50 por hora. Por otro lado, si logras completar el proyecto en 50 horas, es una tarifa de 80 dólares por hora. El último modelo de precios es la tasa recurrente. Funciona así, le cobraste a un cliente una cantidad fija por un periodo de tiempo, digamos 600 dólares mensuales durante 12 meses. Tiene algunas ventajas y desventajas. Cuando cobras mensualmente a los clientes, no necesitan pagar todo el precio por delante. Adicionalmente, puede proporcionarles un servicio de soporte recurrente. Pero aquí está la captura, cuando eliges cobrar a un cliente durante un largo periodo de tiempo, necesitas definir claramente lo que les vas a proporcionar porque de lo contrario, pueden esperar que hagas mucho trabajo ya que los estás cobrando una y otra vez . Si buscas una fuente de ingresos estable, sería una buena opción para ti. Pero personalmente no uso este modelo de ingresos porque hay tantas variables diferentes que son difíciles de manejar. Ahora hablemos del precio en sí. El precio que establezcas para tu trabajo depende del valor que proporciones. Recuerda, existe una correlación entre precio y valor, y siempre debes valorar tu trabajo en función del valor que brindes al negocio del cliente. Siempre hay un valor de mercado para todo, desde oro hasta bienes raíces hasta autos. Pero hay que entender que define su propio valor. Si calificas tu trabajo muy bajo, automáticamente disminuyes tu propio valor. Por otro lado, si calificas tu trabajo muy irrazonablemente alto, estarás fuera de este negocio porque difícilmente puedes encontrar a alguien que esté de acuerdo en tu valor. Pero de todos modos, esa es la decisión que debes tomar, y debes establecer tu propio valor. Por supuesto, cuando valoras tu trabajo muy alto, debes entregar un proyecto de primera clase también. En ocasiones un cliente se acerca a ti y te pide que hagas algo gratis, y dicen que puedes agregar este proyecto a tu cartera, y es bueno para tu futura carrera. Déjame decirte algo nunca, nunca hagas un proyecto gratis, porque tu trabajo tiene valor y nadie debe subvalorar tu trabajo. Incluso cuando acabas de empezar, no hagas proyectos gratuitos. Puedes empezar con un punto de precio más bajo, pero no totalmente gratis. Si acudes a diferentes sitios web freelance, puedes encontrar fácilmente el punto de precio promedio para los servicios que ofreces y fijar precios en consecuencia. También puedes ajustarlos en función de tu experiencia y del valor que aportes. Cuando fijas tus números se adhieren a ellos. Si un cliente dijo que encontré a alguien más que hace lo mismo por un precio más bajo podrías contestar cortésmente, lo entiendo, pero en base al valor que te brindo a ti y a tu negocio, creo que mi precio es razonable. Qué modelo de precios te sugiero que utilices? Yo personalmente prefiero el modelo de ingresos de tarifa plana. ¿ Por qué? Porque a medida que te vuelves cada vez más confiado y ganas experiencia en diseño web y desarrollo web, puedes completar los proyectos más rápido. Por lo tanto, sería más beneficioso para ti usar el modelo de ingresos de tarifa plana porque no cobras por hora y de esta manera, tu tarifa por hora aumentará a medida que logres completar proyectos más rápido. Recuerda, cuando completas un proyecto más rápido, no significa que debas infravalorar tu trabajo. El motivo por el que eres capaz de completar proyectos más rápido es el hecho de que tienes más experiencia y practicas más. Permítanme darles un ejemplo. Supongamos que un desarrollador web puede desarrollar un sitio web en 60 horas y su tarifa por hora es de $50. Nosotros lo llamamos desarrollador 1. Otro desarrollador puede desarrollar el mismo sitio web en 30 horas y él o ella cobra $100 por hora. Nosotros lo llamamos desarrollador 2. ¿ Cuál es más beneficioso para el cliente? Sí, tienes razón, desarrollador 2, porque él o ella cobra la misma cantidad de dinero que hace el desarrollador 1, pero entrega el proyecto mucho más rápido. El segundo desarrollador podría cobrar aún más como 200 dólares por hora y aún así ser beneficioso para los clientes porque él o ella entrega el proyecto más rápido que el primer desarrollador. Recuerda, puedes modificar tus puntos de precio cuando quieras. Por ejemplo, si has hecho algunos proyectos y sientes que no cobraste lo suficiente a los clientes, puedes aumentar tus precios para tus futuros proyectos, no hay límite en este sentido. Pero siempre realice un seguimiento de sus puntos de precios y de los cambios que realice para poder llegar al mejor precio para sus servicios en el futuro. Chicos eso se trata de modelos de ingresos y precios. Espero que lo hayan disfrutado. Te veré en el siguiente video. 80. Meeting a tu cliente: Muchos diseñadores y desarrolladores inexpertos piensan que nos reunimos con clientes porque quieren hacernos algunas preguntas sobre nosotros y cómo trabajamos, pero esto no es todo. El motivo por el que nos reunimos con clientes es para intercambiar información. Hacen preguntas y nosotros hacemos preguntas. Queremos entender verdaderamente cómo funciona su negocio para poder resolver el problema. Prepara siempre algunas preguntas antes de ir a una reunión. Estas preguntas pueden variar dependiendo del tipo de proyecto, pero el punto principal es sólo familiarizarse con su negocio. Algunos clientes pueden preguntarte sobre tu proceso y está totalmente bien. Podrás explicarles cómo es todo el proceso. Algunos de ellos pueden querer que desarrolles un sitio web de WordPress, tal vez porque escucharon que es bueno o simplemente están familiarizados con la interfaz de WordPress. Podrían suceder dos escenarios. En primer lugar, puedes pensar que de acuerdo a su presupuesto y también a sus necesidades, sería mejor para ellos tener un sitio web de WordPress y es tu responsabilidad guiarlos y decir, necesitas buscar un desarrollador de WordPress que te ayude construir este proyecto. También puedes presentarlos a alguien si conoces un buen desarrollador de WordPress porque no queremos conseguir un cliente a ningún costo. Queremos que sean felices una vez concluido el proyecto. El segundo escenario es que piensas que están equivocados y sería mucho mejor para ellos tener un sitio web constante de Webflow. En este caso, es necesario convencerlos por qué Webflow es más adecuado para sus necesidades. Se pueden mencionar las características que tiene Webflow y lo conveniente que es trabajar con el editor de Webflow y muchas otras cosas. En realidad deberías educar a tus clientes porque pueden que nunca hayan escuchado un Webflow antes y acaban de enterarse de WordPress. En el próximo video, hablaremos de vender Webflow a tus clientes. Nos vemos ahí. 81. Campo de la Webflow: Tienes una reunión con un cliente y quieres venderlos Webflow. ¿ Cómo hacer eso? En primer lugar, es necesario hacerles algunas preguntas para ver si Webflow es la mejor opción para ellos o no. Porque como mencioné antes, no está bien empujarlos a usar algo que no les es bueno sólo porque queremos conseguir el proyecto. ¿ Qué les debes preguntar? Podrás hacerles a las siguientes preguntas. ¿ Qué esperas de tu página web? ¿ Qué características debe tener? ¿ Necesitas un CMS? ¿ Qué pasa con la seguridad? ¿ Te importa? ¿ Con qué frecuencia necesitas actualizar el contenido de tu sitio web? ¿ Te importa la velocidad y la escalabilidad? Estas preguntas te ayudarán a entender verdaderamente sus necesidades y a enfocarte en las cosas que les importan. Por ejemplo, si les importa la velocidad, se puede hablar de eso. Puede hacerles saber que Webflow está impulsado por AWS, que significa Amazon Web Services, lo que hace que su sitio web se cargue muy rápido. De hecho, AWS es una de las opciones de alojamiento más seguras y rápidas disponibles, en las confían las grandes empresas. Si les importa CMS, puedes explicar lo fácil que es trabajar con Webflow CMS. ¿ Y la escalabilidad? Puedes decirles que no necesitan preocuparse por nada, no importa cuánto tráfico conduzcan a su sitio web, Webflow puede manejar eso fácilmente. Si ya trabajaron con WordPress, puedes preguntarles qué les gusta y no les gusta al respecto y simplemente enfocarse en eso. Ahora hablemos de las diferencias entre Webflow y WordPress. Son como Mac OS y Windows, cada uno tiene sus propias ventajas y desventajas. Necesitas elegir entre ellas en función de tus necesidades y preferencias. Workflow es una herramienta relativamente nueva, pero WordPress es bien conocida y muy antigua. Es por eso que la mayoría de los clientes pueden estar familiarizados con WordPress, pero no necesariamente significa que sea bueno para ellos usarlo. Webflow utiliza las últimas tecnologías para construir un sitio web limpio y moderno. Por otro lado, WordPress utiliza todas las tecnologías como PHP. Webflow no requiere ningún complemento para crear páginas web personalizadas, pero WordPress depende de muchos plugins diferentes para casi todo. Es por eso que Webflow genera un código mucho más limpio en comparación con WordPress. Las características de Webflow son pagadas y no es de código abierto, pero WordPress es totalmente gratis y solo necesitas pagar por hosting. Webflow te da completa libertad de diseño, mientras que WordPress está restringido por plantillas. Estas fueron las diferencias más importantes entre Webflow y WordPress. Ahora les voy a mostrar una forma muy cool de presentar Webflow a sus clientes. Webflow ha creado una forma innovadora de dejarnos convencer fácilmente a nuestros clientes y amigos para que utilicen Webflow. Si vas a Webflow.com/Pitch, puedes ingresar tu nombre y dirección de correo electrónico y empezar a crear una presentación personalizada. Aquí puedes escribir el nombre de tu cliente, subir una captura de pantalla de su sitio web actual, y luego puedes ir por las diapositivas y personalizar algunas de ellas. Por ejemplo, aquí, puedo elegir una opción del menú desplegable y la imagen se añadirá en consecuencia. También puedes desactivar las diapositivas opcionales así como así. Por último, puedes crear un mensaje para tu cliente y pulsar el botón Guardar y enviar. En unos minutos, recibirás tu enlace de presentaciones de disfraces a tu correo electrónico y podrás compartirlo con tu cliente. ¿ Qué tan guay es eso? Está bien, eso es todo por este video. Espero que lo hayas disfrutado y te veré en el siguiente video. 82. Hosting Webflow: Oye, en este video vamos a hablar de los planes de hosting de Webflow. A menudo me preguntan por qué el hosting Webflow es tan caro en comparación con otras opciones de hosting como Bluehost, HostGator, etc. Cuando construyes tu sitio web usando Webflow, no estás obligado a usar su hosting. Si tienes una cuenta de pago, simplemente puedes exportar tu proyecto y alojarlo en otro lugar, ya sea de forma gratuita o por un precio bajo. ¿ Por qué alguna vez usarías el hosting Webflow? Cuando exportas el proyecto y lo hospedas en otro lugar, ya no puedes usar la función CMS. Significa que tus páginas dinámicas no funcionarán. Digamos que el proyecto no tiene ninguna página dinámica y solo tiene algunas páginas estáticas informativas. Acoges tu proyecto en otro lugar y todo funciona bien. Después de un tiempo, el cliente quiere agregar algo o modificar algo en el sitio web, entonces deberían contratar a un desarrollador para ir y cambiar el código de tu sitio web, que es tan largo y frustrante. Deberían repetir este proceso una y otra vez. Cada vez que el desarrollador les puede cobrar algo entre $100 y $300 para realizar esos cambios. Si quieren cambiar el contenido de su página web al menos una vez al mes, deben pagar cualquier cosa entre $1,200 y $3,600 anuales. Ahora vamos a compararlo con el hosting Webflow. Para la mayoría de los clientes, el plan CMS funciona mejor y cuesta 16 dólares al mes, cobrados anualmente. Eso es $192 al año para un plan de hosting que viene con muchas características. En primer lugar, pueden editar su sitio web usando Webflow Editor y no tienen que confiar en nadie más. En segundo lugar, pueden utilizar todas las características de Webflow como CMS, Editor, Diseñador, etc. En tercer lugar, Webflow crea automáticamente copias de seguridad para ellos. Adicionalmente, Webflow hosting ofrece CDN, que significa red de entrega de contenido que asegura cargas de página más rápidas al entregar contenido desde los servidores más cercanos al usuario. También viene con un SSH gratuito que hace que su sitio web sea seguro, gana la confianza de Google, y eventualmente mejora su SEO. En mi opinión, el hosting Webflow lo vale totalmente en base al valor que proporciona. Muy bien chicos, eso es todo sobre el hosting de Webflow. Espero que te haya gustado este video y te veré en el siguiente. 83. ¿Cómo entregar el proyecto al cliente?: Oye, en este video, voy a estar hablando de la entrega de proyectos. Cuando llegue el momento de entregar el proyecto al cliente, puede elegir una de las siguientes opciones. Número 1, hospede el proyecto en tu cuenta de webflow y agrega el costo de hospedaje a tu factura. Número 2, crear una cuenta de flujo web para el cliente, transferir el proyecto a su cuenta y agregar un plan de hosting al proyecto. ¿ Cuál es la diferencia entre ellos? Cuál debe elegir y cuál escojo personalmente? Bueno, la primera opción funciona así. Agregas un plan de hosting al proyecto, y lo publicas, ya está. Excepto que tú no lo eres. Porque ahora cada vez que el cliente quiera modificar algo, deben llegar a ti y debes hacerlo ya sea de forma gratuita o como servicio de pago. Cuando elijas esta forma, puedes usar la opción de facturación de webflow. ¿ Qué es y cómo funciona? Supongamos que eliges el plan CMS y cuesta 192 dólares al año. Pero puedes cobrar más a tus clientes por hosting. Usando la opción de facturación, puedes establecer tu precio de hosting, y los problemas de webflow y facturar para ellos en tu nombre. Digamos que cobra $250 al año por hospedaje. Webflow recibe este dinero y te envía la suma de 58 dólares que cobraste. De esta forma, puedes ganar algo de dinero adicional. Ahora hablemos de la segunda opción. Es bastante sencillo. Transfiere el proyecto a la cuenta del cliente y agrega un plan de hosting al proyecto en su cuenta. De esta forma, pueden modificar fácilmente contenido de su sitio web y no deben confiar en usted ni en ningún otro diseñador. Pero ten en cuenta que una vez que transfieres el proyecto a su cuenta, no puedes obtener acceso al mismo en tu cuenta, por lo que puedes duplicarlo antes de transferir el proyecto para tu referencia. Yo personalmente prefiero la segunda vía porque primero, no diría que me gusta cobrar a un cliente por hosting, segundo, no quiero ser responsable del mantenimiento de su sitio web, y tercero, no necesito gestionar los pagos y facturación anual. Una vez que publiques el proyecto, es hora de la sesión de capacitación. Se puede tener una reunión de 30 minutos con el cliente y explicar cómo funciona webflow y cómo pueden usar el editor para modificar el contenido por sí mismos. Personalmente les pido que no hagan ningún cambio usando el diseñador porque pueden meterse con algo y romper todo el sitio web. Siempre pídeles que usen el editor en su lugar. Si quieren agregar algunos elementos de colección, también lo pueden hacer en el editor. Ya que debes repetir este paso para cada proyecto, te sugiero grabar un video de capacitación, explicarlo todo una vez, y enviarlo a todos tus clientes. Si tus clientes necesitan más ayuda, puedes configurar una reunión y echarles una mano. 84. ¿Qué hacer Next?: Hola a todos, bienvenidos al último video de este curso. Enhorabuena por terminar el curso con éxito. Fue un largo viaje para los dos y me gustaría que supieras que estoy tan orgullosa de ti que has llegado hasta aquí. Ahora eres oficialmente desarrollador web y vas a construir proyectos increíbles. Espero que hayas disfrutado de este curso y te agradecería que dejaras una revisión honesta del curso para que yo pudiera mejorarlo y mejorarlo para ti. Si deseas recibir notificaciones sobre las actualizaciones del curso y mis nuevos cursos, puedes seguirme en Skillshare si quieres aprender más sobre el diseño UI UX y subir de nivel tus habilidades de diseño. Tengo buenas noticias para ti. Tengo un canal de YouTube donde pongo toneladas de cosas gratis que te pueden resultar interesantes. Así que asegúrate de suscribirte a mi canal para no perderte mis próximos tutoriales. Si quieres aprender más sobre el diseño UI UX, puedes consultar mi curso de diseño UI UX en Skillshare. Fue un honor ser tu instructor y te deseo todo lo mejor. Nos vemos y adiós.