Figma a Webflow para principiantes: sitio web de cartera de creación desde cero

1. Introducción: ¿Alguna vez has querido desarrollar un sitio web moderno sin conocer código? Entonces esta clase es para ti. Hola, mi nombre es Tim see, desarrollador de Webflow en Victor flow Agency, que es socio profesional en Webflow. Voy a compartir mis experiencias sobre cómo estamos construyendo un sitio web aquí, te haré saber el proceso práctico de construcción de sitios te haré saber el web que es a partir del desarrollo de flujo de trabajo de diseño figma. Workflow es una poderosa herramienta que nos llevó a construir sitios web visualmente sin código. Esto va a cualquiera que quiera construir sitios web. Incluso puedes ser un principiante o puedes ser un diseñador, o tal vez quieras convertirte en un diseñador web de tiempo completo para ti, Webflow es la respuesta. Esta clase es totalmente desde cero. Todos y cada uno de los pasos en la construcción un sitio web se muestran completamente. Pasaremos por los elementos de flujo, estilismo, y mucho más. Aquí he explicado sobre el modelo de caja de comentarios en cada lección. Para una mejor comprensión de cómo nos estamos construyendo para ser un principiante, obtienes un proceso de aprendizaje fácil. Tengo explicable el CMS sobre la creación la página de listado de entradas de blog y un solo pitch de entrada de blog, siendo Desarrollador de desbordamiento e ilustrador, pensé en desarrollar y sitio web de portafolio, que tiene todos los elementos necesarios necesarios para el dibujo. Notado. Una vez que hayamos terminado el proceso de desarrollo, haremos nuestro sitio web, que es responsive al escritorio. Tableta. Móvil también lo es, comprobaremos con consejos y trucos para finalizar el proyecto Webflow a la perfección. Al igual que mejores ajustes de SEO, mejoras de rendimiento para obtener resultados verdes en el faro de Google Chrome. Por último, lo que estamos construyendo es gratis para que puedas clonar y personalizarlo para que cambie según tus necesidades. En esta clase, obtendrá los recursos o archivo Figma y página web de cartera clonal. Toma esta clase, uno de los íconos gratuitos únicos o Figma y Webflow. Entonces, si estás listo para convertirte en un Alepo sin código y para construir un sitio web permanente. Empecemos. 2. Diseño de Figma Convertiremos: En esta lección, analizaremos el diseño de figma que vamos a convertirlo en desbordamiento. Puedes conseguirlo con mi diseño en la sección de resultados. Y puedes importar este archivo en tu Figma. Vamos a entrar en la lección. Entonces este es nuestro diseño de figma para la plantilla de sitio web de nuestro artista. En el lado izquierdo, podemos ver el montón de capas que hemos utilizado. Ahora llegando al diseño. Al principio, tenemos cabecera. Dentro del encabezado hay un logotipo y las propiedades con respecto a él pueden estar bien. Otro diseño, que está en el lado izquierdo, tenemos un uso de este logotipo como imagen. Podemos establecer el tipo de archivo en la exportación. Puede ser PNG, JPEG, SVG y PDF. Entonces, al elegir el tipo de archivo en la exportación, este archivo en particular se exportará en nuestro archivo local y se podrá usar en desbordamiento. Ahora, bajo la vista previa, podemos ver la vista previa de esta imagen. A continuación, hay un menú. El menú está en formato de texto. Cuando vamos a la inspección en el lado izquierdo, podemos ver las propiedades respecto al texto del menú. En las propiedades podemos encontrar la anchura y altura, la topografía que se utiliza, es decir, estilo de peso foráneo, altura de línea. Incluso podemos ver las propiedades CSS. En la cabecera. Tenemos un botón de registro para marcar la casilla. Hemos utilizado un texto. Al hacer clic en el registro. Nuevamente, podemos encontrar las propiedades del texto. A continuación, tenemos un número de contacto junto con el icono y un número de teléfono. En la cabecera, tenemos un logo, Meno, que es un formato adicto, e inscríbase, y un número de contacto con el icono y un número de teléfono. Entonces se acabó el encabezado. A continuación, tenemos pancarta, esa es la sección de héroes. Dentro de la pancarta, tenemos dos partes. Uno es para los contenidos y el segundo es para sostener la imagen que viene a través del contenido. Pero tenemos subtítulos, murió Dose, un ícono de correo y una identificación de correo. Y vamos a comprobar botón. Llegando a la segunda parte, tenemos un complemento de imagen a eso. Hay un fondo tanto para el contenido como para una imagen. Ahora ya hemos visto la pancarta. A continuación, veamos el servicio. En los servicios, tenemos título y subtítulo. Este diseño se utilizará en todas las secciones del flujo de trabajo. Entonces al hacer clic en cada cosa, podemos encontrar las propiedades respecto a la misma. En el inspector. Debajo del rubro, tenemos estos artículos, cajas, Cada una de las cajas, un MOD adulto. En el flujo de trabajo, veremos cómo descargar este tipo de diseño. Uno de los servicios tiene sombra de fondo. Incluso veremos cómo hacer esto en nuestra sonda. Ahora llegando al servicio individual, en la parte superior tenemos icono y como siempre título y debajo él hay una descripción al respecto. Y en la parte inferior hay un botón de aprender más. El mismo diseño que se aplica a otros dos. Entonces visas. Detrás de estos tres elementos de servicios, hay una imagen de fondo. Hemos analizado los servicios. A continuación, pasemos al proyecto. Aquí hemos usado un título y un subtítulo que está en la parte superior. El mismo diseño que en los servicios. Esa es una caja que contiene todo el título y el contenido. Con la columna de fondo. Debajo del encabezamiento. Utilizamos cuatro partes, cada una con bloque separado. Dentro de cada bloque tenemos un título, descripción e imagen. Junto con el fondo. seguirá el mismo patrón para otros tres bloques. Esa es la misma brecha que hacemos cada uno de los bloques. El siguiente es el taller. El taller hay dos partes. Uno es más contenido y otro es para la imagen. Llegando a la primera parte, esa es la parte de contenido. Tenemos un título y un subtítulo, como en las dos capas anteriores, junto con una descripción al respecto. Y debajo de él, tenemos un código QR para el que está el código QR para pagar el monto por parte de los visitantes. Cerca del código QR, tenemos icono junto con la descripción sobre el uso de este código QR. Y debajo del todo, tenemos un botón. Para reservar mi tiempo. Y en la segunda parte, tenemos imágenes junto con el fondo. El siguiente es sobre mí. Esto sobre mí tiene la otra imagen a la izquierda y debajo de ella, están íconos de las redes sociales. Junto a ella. Una pequeña descripción sobre el autor junto con esto en mi enlace de trabajo. Y a los perdidos, hay un video junto con el botón Reproducir. A continuación, tenemos capa de licencia OT. En esta capa de licencia impar, tenemos dos columnas, es decir las dos partes. La primera columna es para sostener la imagen. La segunda columna es para el contenido. En la segunda columna, tiene una opción de tabulación para licenciamiento de arte y una comisión clic en este primer paso, el contenido relacionado con el mismo se mostrará al hacer clic en la segunda mitad, es decir, se mostrará la conducta relacionada con la comisión. Veremos cómo hacer que este flujo sanguíneo sea suficiente. Volviendo al diseño para ambas pestañas, el diseño del contenido será el mismo, pero solo cambia el contenido. Para el contenido de las pestañas. Tiene un título en la parte superior y una descripción al respecto. Y debajo de ella, hay una de dos partes. Una es mantener un porcentaje. Y en la segunda parte como pequeña descripción, hemos visto la capa de licencia OT. A continuación se presenta una capa testimonial. Esta capa testimonial tiene dos columnas. Una es para el título y los subtítulos, y la segunda columna es para los testimonios. seguirá el mismo diseño para cada uno de los testimonios. Veamos el diseño individual de este testimonio. En la parte superior, hemos utilizado las comillas y un comando dado por los visitantes o la pérdida. Tenemos la imagen del visitante junto a ella con el nombre junto con la renuncia. Y en esquina final, tenemos una calificación dada por el visitante. seguirá el mismo diseño para otros, una hoja con cambios en el color de fondo. Y hay una imagen de fondo. Este testimonio anterior. Ahora, veamos sobre la capa de precios. Este precio usa la caja junto con el color de fondo dentro de ella. Ese es el título y el subtítulo, o el perro, como hemos usado en las capas anteriores. Debajo de esto, hay dos columnas. Uno es para el libre y otro es para la sonda. Al llegar a la primera columna para sostener el rumbo, hemos utilizado el bloque en un extremo. Hay un rubro en otro n. Esa es la mención de los ricos. Debajo de este título, tenemos un montón de listas respecto a la libre circulación, junto con el encabezado en la parte superior, en una esquina, a otra esquina, hay un emoji y debajo de él, que es una lista de la versión gratuita. Al final, tenemos un botón para acceder a la versión gratuita. Dentro de este listado, hemos destacado algunos de los bosques. El mismo diseño se sigue en la segunda columna con los cambios en los precios. El precio de una capa tiene la imagen de fondo dos, hemos visto por encima de la capa de precios. Veamos sobre el blog. El blog tiene ese título y el subtítulo en la parte superior y debajo de la sección de título, es decir, cuatro bytes. seguirá el mismo diseño en cada una de las partes. Digamos el diseño de las partes individuales en su interior. Hemos utilizado los dos bloques. El primero es sostener la imagen y el segundo es para el contenido que viene al contenido que es un encabezado en la parte superior, debajo del encabezado, es decir una fecha de publicación y nombre de autor y un blog extra, junto con el enlace del modo de lectura. El mismo diseño que sigue para tres. Después del bloque, tenemos preguntas frecuentes. Utiliza la caja con la imagen de fondo, y además tiene las dos columnas. El primero es sostener el título y el subtítulo del mismo. Y en la segunda, hay un montón de lista desplegable. Aquí tenemos una pregunta modal del USDA junto con el icono de flecha. Al expandir esta lista desplegable, la flecha debe estar hacia arriba y también el contenido respecto a esta pregunta debe ser menor que el tamaño de la pregunta, junto con los cambios de color, el siguiente está suscrito. Tiene dos bloques, la unidad para el título y el subtítulo en la parte superior. El segundo es para la entrada para obtener la dirección de correo electrónico junto con el botón a la derecha. Todo el asunto de esta entrada y un botón tiene el color de fondo. Lo siguiente es el contacto. Y el contacto, es decir una columna de dos, la lista una para los contenidos y la segunda columna es para los campos de entrada que llegan a la primera columna. Y el perro, eso es un subtítulo y el título, junto con espacios innecesarios en todos los primeros sitios pertenecían al título y al subtítulo. No tenemos datos principales, junto con el correo, identificación, teléfono, junto con el número de teléfono, y también con esa dirección llegando a la segunda columna. Eso es un espaciamiento innecesario en todos los sitios frutales. Y también tiene los campos de entrada de nombre, correo electrónico, empresa, teléfono y mensaje, junto con el botón de enviar mensaje en la parte inferior. Ahora hemos llegado a la última parte, es decir comida para conocerla como foto, esa es una línea en la parte superior de la misma. Entonces ahora dentro de ella tenemos una cabecera en la parte superior, debajo de ella. Tenemos un logo. Debajo de estos dos, tenemos un montón de enlaces de redes sociales, es decir, para Facebook, Instagram, Twitter y YouTube. Cada uno de los enlaces de redes sociales va acompañado de un logotipo relacionado. Y qué tipo de redes sociales esta, junto con el enlace, el mismo diseño de la siguiente manera para otros tres en cada uno de los enlaces de redes sociales que no es apropiado. Sí. Y también hay un color de fondo para la caja que contiene todos tus enlaces de redes sociales. En la parte inferior, eso es un menú enlaces o la izquierda. Y en la esquina derecha, tenemos un texto de copyright. Entonces este es el diseño del Figma que vamos a convertirlo en un flujo de trabajo. Para poder desarrollar este diseño en un Webflow, necesitamos conocer los conceptos básicos del Webflow. Entonces, en la siguiente lección, veremos acerca de los conceptos básicos del Webflow que es necesario. Vamos a verte en la siguiente lección. 3. Conceptos básicos del flujo web: Webflow es un cmos, que es un sistema de gestión de contenidos. Es un sistema que permite administrar el contenido. Pero no es sólo esto, sino que es uno de los mejores por el diseñador. Y esta es una manera de manipular visualmente el HTML y CSS en la página. Estaremos trabajando mucho con el diseñador en esta clase. Hasta el momento, la interfaz de usuario, podemos dividirla en cuatro secciones. Esas cuatro secciones son la barra de herramientas izquierda, el lienzo, los paneles a la derecha y una barra de herramientas superior. Entonces ahora comencemos con la barra de herramientas izquierda. Cuando abran el flujo de trabajo, encontraremos la barra de herramientas izquierda en el lado izquierdo. Así que desde la barra de herramientas izquierda, podemos acceder a la mayoría de las secciones importantes. Tenemos un menú aquí en la parte superior que nos permite cambiar al dashboard o a la configuración del proyecto o al editor. Después tenemos el panel add, que nos permite agregar elementos y los componentes en nuestra página. Al principio, tenemos el diseño, las secciones, el grado contenedor en columnas. Si necesitamos alguna ayuda, simplemente haga clic en el signo de interrogación, que está aquí. Entonces obtenemos una pequeña descripción sobre. A continuación tenemos un básico aquí. Tenemos el perro, lista, lista, ítem, enlace, blog y botón. A continuación se encuentra el tipo de Rafi. Aquí tenemos encabezado, párrafo, texto, enlace, bloque de texto, blog, bueno y Rich Text. A continuación, tenemos un CMS aquí, tenemos lista de recolección. Veremos de esto más adelante. A continuación están los medios de comunicación. Aquí tenemos una imagen, HACEMOS un YouTube, y todas las animaciones. A continuación, uh, tenemos formularios. Aquí. Tenemos desde blob, mano de obra, entrada, archivo, carga, área de texto, checkbox, botón de radio, select, recapture, botón de formulario. Estos son todos el elemento principal. Por lo tanto para las indicaciones. Y también tenemos competencia en componentes zeta o tenemos un nuevo video de fondo envuelto. Soy Bud Light, Número de caja, búsqueda, slider, grifos, Mapas, Facebook y Twitter. Entonces estas son todas las cosas disponibles en el panel de elementos. A continuación, tenemos un layout. En el diseño, podemos usar cualquiera de los diseños preconstruidos que vienen con Webflow. Entonces, al pasar el mouse sobre los diseños preconstruidos, pudimos ver la pequeña descripción sobre esos diseños. Si ejecutamos esta barra de tictac ahora, podemos usar el sticky now. Si necesitamos la sección de héroe, ese es el contenido del encabezado de la imagen, cuerpo y un botón prominente de llamada a la acción en sí. Podemos usar este privilegio fatal. Añádele en él. Tenemos aquí superposición de Sección de Código, contenido principal, sección de características, sección de galería, llamado a la acción, formulario de suscripción formulario de contacto en comida o en el banner publicitario, o lo hemos visto con los elementos y los diseños. Entonces tenemos acceso a los símbolos. Aquí, pudimos ver el, una pequeña descripción de todos los símbolos. Los símbolos te permiten reutilizar contenido en tu diseño. Agrega un símbolo, haz clic con el botón derecho en un elemento en Lienzo y seleccionas Crear símbolo. Y además tiene una pauta a punto de crear un atajo desvinculado. Solo usa Control Shift ocho. Entonces aquí tenemos una descripción sobre los símbolos y la salud respecto a los símbolos. Para crear un nuevo símbolo, basta con hacer clic en este botón más. Y si el símbolo ha sido creado, podemos ver aquí una lista de todos los símbolos existentes. A continuación, tenemos Navigator. Esto nos permite navegar por los contenidos de una página web. Entonces aquí tenemos el cuerpo en el panel izquierdo y seleccionando cuerpo todas las páginas. Entonces, al seleccionar este cuerpo, todas las páginas etiquetan y configurando el estilo en esta pestaña caerán en cascada todas en todo el proyecto. La página siguiente. Al hacer clic en este icono, tendremos acceso a todas las páginas de un documento de Word y podremos cambiar fácilmente entre ellas. Entonces aquí tenemos páginas estáticas dentro, tenemos casa. A continuación están las páginas de utilidad dentro de ella. Tenemos contraseña para no por error. Y tercero, como páginas de colección CMS. mostrarán todas las páginas de colecciones CMO. Aquí. Tenemos unas páginas de comercio electrónico. Si queremos crear nuevas páginas, basta con hacer clic en este icono. Al hacer clic en esta Crear nueva página, obtenemos nu settings. Con la ayuda de ello. Podemos dar los detalles respecto a nuestras páginas y crear la nueva playa. Y luego tenemos acceso a más de colecciones CMS. Para crear una nueva colección, basta con hacer clic en este icono. En la parte superior, tenemos una colección de plantillas. Entonces desde aquí podemos elegir qué tipo de colección necesitamos. Entonces aquí tenemos entradas de blog, autores, categorías, proyectos, clientes, miembros del equipo, enumerando a victorias, a elementos de menú, canciones, espectáculos, recetas. Estas son todas las plantillas disponibles aquí. A continuación, tenemos una configuración de colección. Aquí podemos dar el nombre de la colección. Y a continuación tenemos URL de colección. El próximo año tenemos colección cae aparte de los campos existentes, o podemos agregar los nuevos campos. En los campos personalizados. Podemos elegir qué tipo de campo es. Aquí tenemos días a ciegas, rico toma imagen, multi imagen. Desvinculamos, enlazamos, correo electrónico , teléfono, número, fecha u hora, cambio, color, archivo de opción, aunque tenemos la opción de eliminar la colección. A continuación, tenemos colección de comercio electrónico. Cuando convertimos nuestro sitio web en tienda, esta opción puede ser utilizada. A continuación, tenemos el acceso a los bienes. Para agregar un archivo en los activos, simplemente podemos soltar los archivos aquí. Para agregar los archivos dentro de los activos, podemos usar el ícono de carga en la nube en este panel de activos. Y finalmente, tenemos algún acceso a la configuración. Aquí tenemos búsqueda y copias de seguridad. Eso es todo lo que pudimos para respaldar nuestro proyecto. Y luego podemos crear una nueva copia de seguridad haciendo clic en esta nueva opción de copia de seguridad. En la barra de herramientas izquierda en la parte inferior, tenemos auditorías. Este panel de auditoría funde problemas comunes relacionados con la accesibilidad. Para que podamos arrestar a nombre antes de entrar en vivo con nuestro sitio. Algunos de los problemas comunes son que faltan etiquetas alt, anodino, el contenido del enlace, guión bajo. Miramos a la auditoría, tenemos multa rápida. Entonces con la ayuda de esta multa rápida, podemos agregar elementos al lienzo. Debajo de la multa rápida, tenemos videos tutoriales. Si tenemos alguna duda al respecto, podemos acceder a los tutoriales usando así que estoy dando click en esta semana obtener página editorial. Y por último, hemos ayudado en ello. Tenemos atajos de teclado. A partir de ella. Podemos encontrar la gran cantidad de atajos de teclado para reducir nuestra carga de trabajo. Junto con él, tenemos vista previa de CSS y levantarlo, caminar por. Así que hemos completado todo en la barra de herramientas de la izquierda. A continuación, voy a dejar ver sobre el lienzo. Esta es la sección más grande en la interfaz de usuario. Es esto justo aquí. Podemos ver un avance de nuestro proyecto. Para ser más detalle, permítanme seleccionar con el cuerpo con la ayuda de agregar panel. Estoy agregando una sección sobre cómo agregar esta sección en el lienzo. O podríamos ver que se ha creado la sección. Ahora sobre esta elección de sección, permítame agregar un contenedor para que el contenedor se cree dentro de esta sección. Ahora en el Lienzo, ese contenedor ha sido creado dentro de esta sección. Ahora voy a dejar pasar a los paneles de la derecha. En lugar de nuestra oferta como panel lateral derecho, también podemos llamarlo como inspector porque inhalamos, o podemos inspeccionar las diversas propiedades del seleccionar un elemento. Aquí, hemos seleccionado la sección. Aquí se mostrarán todas las propiedades relacionadas con él. Al llegar al personal, tenemos unos controles para la disposición del elemento. Debajo de ella. Tenemos el desplazamiento del radio. A continuación, tenemos espaciado en espaciado fin de semana y darles valores de oxígeno son nuestros y también el valor de relleno del elemento en particular. A continuación, tenemos el control para el tamaño. En su interior, fin de semana, uh, dar el valor de ancho, valor de altura. Incluso un fin de semana, establece la anchura mínima, altura mínima, la anchura máxima, la altura máxima. El desbordamiento. Tenemos la opción de ocultar scroll, y nosotros, cuando tenemos la opción de encajar, siguiente, uh, tenemos posición donde un DDA mente y la posición del elemento en la página. En lugar de posición, tenemos estática, relativa, absoluta, fija y pegajosa. Y también tenemos la opción de flotar y claro. Pasando al siguiente, eso es tipográfico. Aquí podemos establecer el tipo de fuente de los textos particulares. Y le podemos decir el peso, una talla, altura, color. Entonces podemos decir la alineación de la misma. Y además tiene un estilo más para el texto. Y llegando a las más opciones de tipo. Tiene espaciado entre letras, texto, columnas de intención, y un fin de semana y elija la opción en mayúscula. Y además tiene opciones de ruptura. Incluso un fin de semana dijo que las sombras de texto. A continuación, tenemos antecedentes. Para establecer la imagen de fondo, use la opción más en la imagen y el degradado. Aquí un fin de semana elige qué tipo de fondo necesitamos agregar. Y también podemos establecer el tamaño de fondo que es cubierta personalizada y contener incluso una posición de fin de semana la imagen de fondo par o podemos establecer los azulejos de imagen de fondo. La imagen de fondo puede ser fija o no fija. Llegando al tipo de fondo, podemos establecer el tipo como gradiente lineal y gradiente radial. Por último, tenemos nuestro DBA y otro fondo, o tenemos colores. Y también hay un recorte con el fondo de subasta a fondo de guante de bateo a fondo de Canton Club a texto. A continuación, tenemos fronteras. Podemos establecer la frontera para que esté a la vuelta de la esquina. Para eso, tenemos la opción radio. Al dar el valor de píxel. La esquina redondeada se puede crear cuando podemos decir el borde en un sitio en particular. También está este alicatado para las fronteras. El grosor de los bordes se puede proporcionar usando esto con el color se le puede dar a los bordes. Después de la guerra es que tenemos ética. La ética es que tenemos unos modos de mezcla. Incluso un fin de semana, establecer la opacidad. Incluso un fin de semana y dijo este alicatado para el esquema. Podemos darle sombra a la caja aquí, o tenemos los dos tipos que hay para el exterior y el interior. Incluso un fin de semana, puse el ángulo de la sombra de caja y la deshago. Contamos con distancia, Blair, talla y color. A continuación, tenemos deber y realmente transformamos. Esto se utiliza para manipular la apariencia y las posiciones de un elemento sin afectar a los elementos circundantes. Para traer la apariencia 3D, tenemos la opción de mover, escalar, rotar y escalar. El siguiente son las transiciones. Esta transición ayudó a crear una animación suave entre los diferentes estados de un elemento. Podemos establecer el tipo de transición necesaria para un elemento. Aquí están todos los tipos de transiciones. Tenemos unas transiciones comunes. Transición de fondo. A continuación se presentan las transiciones de tamaño, bordes, topografía, coeficiente, margen, relleno, flex. Y también tenemos transiciones avanzadas. puede personalizar un tipo de duración y flexibilización para crear una transición única. A continuación, tenemos la dosis completa. Dosis completa nos da un zarcillo sobre el cual se harán efectos que pueden aplicarse a cualquier elemento. Las opciones del filtro son, que es un filtro suave y tenemos ajustes de color y efectos de color. Por último, tenemos, porque podemos personalizar nuestra Gaza usando esta opción. Entonces ahora tenemos algunas opciones adicionales. Después haciendo clic en el icono de Configuración, podemos establecer ids a varios elementos. Y también tenemos atributos personalizados. A continuación de aquí. También tenemos acceso a este gestor infantil. Y esto nos mostrará todas las clases que se están utilizando en el proyecto. Y luego finalmente, este es el panel de interacciones. Aquí es donde podemos crear animaciones en Webflow. Dentro de esta instrucción, tenemos dos disparadores. Uno es el elemento disparador. Dentro del elemento trigger tenemos click del mouse, mouse, mouse move. Nuestros elementos, desplácese hacia la vista mientras se desplaza hacia adentro. Y por último, nos estamos moviendo a la barra de herramientas superior donde puedes encontrar aquí en la parte superior. En la parte superior, tenemos el icono para exportar nuestro código HTML, CSS o JavaScript. Entonces tenemos la opción de compartir nuestro proyecto. Al final, tenemos Publish. Por lo que al elegir el dominio, podemos publicar en el dominio seleccionado. Y también tenemos opciones avanzadas. Tenemos las opciones para deshacer y rehacer. Y tenemos controles para el lado de respuestas del diseño web. Podemos cambiar entre varios puntos de interrupción haciendo clic en cada uno para previsualizar nuestro sitio web en diferentes tamaños de pantalla. Y al usar esta opción, también podemos agregar grandes puntos de interrupción que los puntos de puja base. En esta lección, aprenderemos que Webflow es un CMS. Bien, entonces ahora que tenemos toda la información sobre lo básico, en la siguiente lección, veremos cómo configurar nuestro sitio web. 4. Proyecto de clase: Con el fin de estar familiarizado con Webflow, publicar único para clonar el sitio web. Reemplace las imágenes, personalice los colores y el contenido. Creas tu propio sitio web de portafolio, lo cual es súper fácil. Una vez que te familiarices con él, encuentra el archivo Figma de la sección de recursos importado a tu cuenta de Figma y empieza a crear el sitio web como lo que estamos haciendo en esta clase. También puede modificar el diseño de acuerdo a su deseo. Después de terminar todo esto, asegúrate de enviar tus proyectos para que pueda analizar los trabajos de tu proyecto. 5. Comencemos: En esta lección, vamos a configurar un sitio web que es necesario para nuestro proyecto. A ver cómo se hace eso. abrir el flujo de trabajo, obtenemos esta pantalla, basta con hacer clic en el nuevo proyecto. Ahora, vamos a conseguir una pantalla como esta. Para crear un proyecto fresco. Elige la opción de lado en blanco ahora seleccionada, ahora dale el nombre del sitio ya que ya he creado un proyecto. Entonces lo estoy cerrando. Ahora puedes ver el proyecto que he creado en este green. Ahora estoy abriendo el proyecto web de este artista y así nos lleva al diseñador. Ahora obtenemos el lienzo en blanco. Ahora vamos a importar las fuentes y te está esperando nuestro proyecto para poder hacerlo y seleccionando el símbolo de hamburguesa aquí, podemos encontrar proyectos configurando desde aquí elige fuentes. Ahora voy a seleccionar la fuente Poppins y la espera de este popping fuentes o 300, regular 500600700800. Y ahora estoy sumando este punto. Ahora otra vez, estoy agregando en otro teléfono con un nombre. Y ahora agreguemos esa fuente. Ahora el mío publicándolo en el dominio seleccionado. Ahora volvamos al diseñador. Ahora conseguimos la pantalla. Voy al navegador y estoy seleccionando el cuerpo. Entonces se selecciona el cuerpo debajo del selector. Estoy eligiendo la etiqueta HTML, body, All Pages y otra tipografía. Estoy eligiendo la fuente como Poppins y el tamaño entre los píxeles. Estoy dando el color en valor hexadecimal. Y que la altura sea 1.4 guión. Este estilo tipográfico tal como se aplica al cuerpo, pestaña Todas las páginas. Entonces ahora lo estoy publicando en el dominio seleccionado. Entonces en esta lección, terminamos sobre cómo crear un sitio web, y también hemos agregado una fuente que se requiere. Entonces en la siguiente lección, vamos a comenzar con la navegación de encabezado. Vamos a verte en la siguiente lección. 6. Sección de encabezado: parte 1: En esta lección, vamos a ver sobre la sección de encabezado de nuestro sitio web. Ahora necesitamos saber sobre la planeación del modelo de caja. La planeación del modelo de caja es para comprender la estructura del encabezado y también la forma en que manejan los logotipos utilizados para la estructura de este encabezado. Ahora tenemos esa área total de cabecera. Y dentro de ella, esa será de dos secciones. Esa es una sección izquierda para un logo y Minow. Y la sección correcta para botón y el número de teléfono. Este es el Desierto que vamos a implementar para nuestro sitio web. Sigamos adelante. Antes de entrar en la lección. Veamos un modelo de caja común de Buda, que se aplicará para todas las secciones dentro del cuerpo. Necesitamos agregar una sección y debemos proporcionar el nombre de clase apropiado para esta sección. A continuación se muestra el espaciado para esta sección. Es decir, necesitamos darle el valor de relleno superior e inferior para ello. Después de crear una sección dentro de ella, necesitamos agregar un contenedor y se debe dar el nombre de clase para este contenedor. Ahora podemos agregar el elemento dentro del contenedor el cual es apropiado para la sección necesaria. Compruebe si el tablero está seleccionado en el navegador. Ahora estoy agregando esta sección. Ahora estoy dando el nombre de la clase como encabezado. Agarra. Ese nombre de clase debería ser comprensible. Siempre sé consciente de eso. Ahora bajo el envoltorio de cabecera, estoy agregando un contenedor. Usted el tamaño que es ancho máximo como 15, 20 píxeles. Por lo que este valor de tamaño particular se almacenará en la clase contenedor. Así que siempre que esté usando la clase contenedor, este tamaño será aplicable a ese elemento. Dentro del contenedor. Voy a añadir un logo y un mínimo. Para hacer eso, voy por debajo del Componente y dentro de él, eso es un codo. Entonces selecciona esto ahora, pero al seleccionar el ahora comprado, los menús predeterminados se agregarán dentro del contenedor. En el navegador, pudimos ver el contenedor dentro de él, es decir una barra de navegación. Y nuevamente dentro de él, ese es un contenedor que sostiene marca ahora medio y botón de menú. Mientras que el logotipo de la marca, el propósito del botón de menú es ver el sitio en el móvil, mientras que se mostrará como un símbolo de hamburguesa en el móvil. Estoy seleccionando el contenedor que es menor de una hora. Por otro lado, estoy eligiendo la clase de contenedor existente. Por lo que ese tamaño, que se aplica en el contenedor, se aplicará al contenedor navbar. Para al principio, voy a añadir un logo. Entonces estoy eligiendo la marca. Entonces dentro de ella, necesito agregar una imagen que sea para un logo. En lugar de ir al Add Element una y otra vez, estoy usando el atajo para la multa rápida que se controla más E para Windows y Command plus E para Mac OS. Entonces obtendrás la multa cualquier cosa pop up. Ahora puedes buscar una imagen. Después de seleccionar la imagen, tendrás un pop-up que podrás elegir la imagen necesaria, es decir para el logotipo. He colocado el logo para mi sección de cabecera. Para que pudieras ver la imagen debajo de la marca en el navegador debajo del contenedor para crear un área de encabezado total, estoy agregando un diblock usando el quick fine. Estoy arrastrando el desarrollo a la cima. Y estoy nombrando la clase como encabezado ancho completo. Debajo del encabezado, ancho completo, tenemos dos secciones, es decir, una sección de labio de cabecera y una sección derecha de encabezado. Así que estoy creando un desarrollado mediante el uso de una multa rápida. Y estoy dando el nombre de la clase como encabezado Sección Izquierda. En la sección de encabezado, tenemos un logotipo y un mínimo. En la sección del labio del encabezado, estoy arrastrando el logo ahora amino, un botón amino. Necesitamos un encabezado, sección derecha. Entonces, al seleccionar el ancho completo del encabezado, estoy creando un dibloque usando un QuickFind. Por lo que la sección de encabezado será el hijo de la cabecera de ancho completo. Crear el nombre de la clase como encabezado, sección derecha. Ahora vamos a hacer la alineación para el ancho completo del mango seleccionando el ancho completo del encabezado en el lado derecho, debajo de la capa, usted la visualización como escamas y la alineación para el centro y justificar como distribuir el espacio de manera uniforme de principio a fin. Ahora para los pececillos, necesitamos establecer la tipografía. Estoy eligiendo la fuente como Poppins y el peso como 500, tamaño mediano S, 18 pixeles. Ahora para el color, estoy dando el valor de color del diseño de figma para ese color y creando una muestra. Si creo una muestra. Para que ese color en particular pueda ser usado siempre que lo necesite. Todos estos valores tipográficos almacenarán bajo la clase de enlace nav. Entonces, si utilizo esta clase de enlace de nav para los otros menús existentes, estos valores se aplicarán a esos menús. Hacer. Entonces pudimos ver claramente cómo se usa la clase basada en el diseño figma. Tenemos un total de 5 min. Entonces estoy duplicando los dos minutos extra. Ahora estoy renombrando los menús como proyectos y precios. Necesito darle el espaciado para una mujer que está tan en seleccionar el cristal del enlace de nav debajo del espaciado, les estoy dando un relleno izquierdo como 30 píxeles. Para el relleno correcto, estoy dando los 30 píxeles. Ahora necesitamos el espaciado para todo el menú. Entonces estoy seleccionando el menú sustantivo debajo del espaciado y dando el valor de relleno como 60 píxeles. Para toda la barra de navegación. Por defecto, el color de fondo es genial. Pero en el diseño de figma, el color de fondo es el blanco. Entonces necesitamos cambiar el color de fondo para la red. Estoy seleccionando al vecino. Voy por debajo de la topografía en la sección de color, estoy eligiendo el trasplante. Entonces el color ha cambiado en la novela. Eso no es suficiente espaciado en la parte superior e inferior en la novela, estoy dando este espaciado para la red. Entonces bajo el espaciado, pudimos ver el pánico para el relleno superior e inferior, estoy dando el valor como 40 píxeles. En la siguiente lección, veremos una sección de encabezado modal que consiste en un botón de registro y un número de teléfono. Vamos a verte en la siguiente lección. 7. Sección de encabezado: parte 2: Ahora vamos a ver sobre la sección de cabeza derecha. Anteriormente hemos visto con la sección de cabecera la cual puede destruir un logo y aminos. Ahora en la sección correcta, tendremos un botón de registro y unos datos de contacto. Usaremos el dev o dividiremos el botón de registro de los datos de contacto. Nuevamente, en los datos de contacto, tendremos una sección de dos, es decir para el icono de Gall y otra es para el número de teléfono. El navegador, estoy seleccionando la sección de encabezado con la ayuda de quick fine, estoy buscando el botón. El botón se agrega en la sección de encabezado. Estoy cambiando el nombre de este botón como Registrarse. Ahora necesito dar la topografía para el botón de registro. Estoy configurando la fuente como Poppins, peso como 500 de tamaño mediano con 18 píxeles. Y le estoy dando la altura de línea como guión 1.3. El guión se utiliza para excluir las unidades Asper en el diseño figma, estoy dando el valor de color en la tipográfica. Ahora para el fondo de este botón, pasando por debajo del fondo, estoy eligiendo el color blanco ahora para los bordes y pasando por debajo de la sección de borde en esta pestaña, estoy eligiendo este sólido con un píxel el color se toma de la gran Madison ya que hay un color negro. A continuación el radio, es decir, la esquina redondeada del botón. Estoy dando el valor como 12 píxeles para dar el espaciado para el botón y dando el valor de relleno. Para la parte superior e inferior tiene 15 píxeles. Y para el relleno izquierdo y derecho, el valor es de 20 píxeles. Ahora me estoy moviendo a la sección seleccionada con el fin seleccionar el nombre de la clase y seleccionar la clase de botón. Ahora estoy renombrando el botón de arriba. Si no cambié el nombre de clase de este botón, entonces el estilo que he dado también se verá afectado para otros botones. Por eso estoy cambiando el nombre de la clase. Ahora podíamos ver el botón de encabezado y la sección de encabezado. Ahora necesitamos agregar unos datos de contacto, decidir el registro eligiendo una sección de encabezado con la ayuda de QuickFind, agregando el bloque. Y le estoy dando a la clase nombre S cabeza ese contacto. Dentro de la cabeza que contactan rep. Tenemos las dos secciones que es para icono de teléfono y otra es para número de teléfono. Estoy agregando un desarrollado con la ayuda de QuickFind. Después de agregar el dar el nombre de la clase como icono de contacto, envuelva. Debajo del mostrador, puedo envolver. Vamos a agregar el ícono del teléfono. Entonces estoy buscando la imagen. El pop-up aparecerá a partir de él. Estoy eligiendo la imagen y luego colocando el ícono del teléfono en el desierto. Hemos agregado el ícono del teléfono. Entonces el tamaño es muy pequeño, por lo que necesitamos cambiar el tamaño de este. Entonces bajo el tamaño, estoy dando los 50 pixeles para el ancho y 50 pixeles para el alto. Ahora para el color de fondo para este ícono de teléfono, le estoy dando el valor de color del diseño figma. Ahora, tenemos que llevar este icono al centro. Entonces me estoy moviendo a la capa debajo de Display. Estoy eligiendo flujo, y me estoy alineando con el centro y justificándolo. Entonces el ícono llega al centro. A continuación, esta alicatando el borde, voy a otro borde y dando el valor como 15 pixeles. Hemos agregado el icono, pero necesitamos un número de teléfono para ser agregado. Como sabemos, el ícono del teléfono es otro contacto. Con la ayuda de QuickFind. Estoy agregando texto al enlace. En el enlace sentado. Elige el icono del teléfono. Ahora cámbiale el nombre con un número de teléfono. Ahora, elija ninguno de este mosaico para este enlace de texto. Ahora para el nombre de la clase para este texto de ordenamiento y cambio de nombre, tiene el teléfono de cabecera, Nick. Nadie se mueve a la topografía, estoy configurando la fuente como Poppins y peso SY, tamaño mediano con 18 píxeles, la altura de línea como 1.3 guión, y los valores de color tomados del diseño figma. Aquí, el número de teléfono debe estar al lado del ícono del teléfono. Dentro de la cabecera de contacto web. Tenemos el ícono del teléfono y también tu número de teléfono. Entonces estoy seleccionando el representante de contacto de cabecera, y me estoy moviendo al Leo en la pantalla. Estoy eligiendo S flex y lo estoy alineando al centro. El espaciado en el enlace del teléfono de cabecera no es suficiente. Entonces estoy seleccionando el caricias de encabezado y para el Padded, estoy dando el valor como 20 píxeles y además la sección derecha del encabezado no está alineada según el diseño. Estoy seleccionando la sección derecha del encabezado. Otro diseño en la pantalla, estoy eligiendo flex y estoy alineando al centro. Necesitamos el espaciado entre el botón y los datos de contacto. Entonces estoy seleccionando el wrap de contacto de cabecera. Entonces bajo el espaciado, estoy dando el relleno izquierdo a 30 píxeles. Ahora estoy seleccionando el proyecto publicado. Al seleccionar el publicado para seleccionar un dominio, puede ver un diseño en nuestro sitio web. Así que siempre que necesites ver tu diseño en un sitio web, simplemente haz clic en el botón Publicar que se cierne sobre cada menú. pasó nada más. Y además eso no es suficiente espaciado en la parte superior. Así que voy a regresar. Todos los elementos están en la novela. Entonces estoy seleccionando la barra de navegación debajo de la sección de espaciado. Permite que el relleno para la parte superior e inferior sea de 40 píxeles. Vamos a publicarlo. Ahora podemos ver el espaciado suficiente para nuestro nivel. Ahora necesitamos hacer el efecto de transición en los menús. Ahora estoy seleccionando esta clase ahora vinculada. Ahora bien, ¿qué son los cambios que estoy haciendo en esta clase? Se verá afectado a los elementos que están usando esta clase. Ahora, tengo que hacer lo que la transición debería tener lugar. Entonces, en el estado normal, eso no lo es. Me estoy moviendo a la transición. Estoy seleccionando el tipo como color de fuente. Ahora, al regresar, estoy cambiando el estado a exagerar. En hospedado, el color debería cambiar. Entonces bajo la tipografía, estoy cambiando el color. Y he dado el valor de color desde el diseño figma. Ahora estoy creando la muestra como color secundario. Ahora, que el estado, nosotros Nan otra vez. Ahora todos los menús obtendrán estas propiedades porque todos los menús están usando este vidrio de enlace de navegación. Ahora tenemos que darle el efecto de transición al enlace telefónico. Entonces estoy seleccionando esto. Entonces bajo la transición, estoy eligiendo la marea ha caído de color bajo la topografía. Después de terminar el no estatal, me mudo al estado flotante. Entonces mientras estoy flotando, deja que el color cambie a nuestro color primario, luego elija el no estado. Ahora lo estoy publicando. Veamos cómo funciona nuestra transición. Mientras se cierne sobre los menús. Invoca muy perfectamente. Incluso el enlace telefónico funciona perfecto. Pero no hicimos ningún efecto de transición a nuestro botón de registro. Entonces hagámoslo también. Ahora estoy seleccionando el botón de encabezado en el no estado. Hagamos la transición para el botón de registro, estaremos haciendo la transición del árbol en total. Vamos a verlo uno por uno. Voy a la transición. Estoy eligiendo el tipo como color de fuente. Y nuevamente, voy a hacer la transición y elegir el tipo como color de fondo. La transición final es la acuarela. Todo esto es el esfuerzo de transición. Vamos a una jugada en el botón de registro. Ahora necesitamos especificar qué efecto que va a ocurrir al pasar el cursor sobre el botón. Entonces estoy eligiendo el estado de flotación bajo la topografía, estoy eligiendo el color al blanco. Le damos tres efectos de transición. Entonces para la segunda transición, ese es el fondo, estoy eligiendo el color de fondo como negro. Y la tercera transición es el color del borde. Entonces estoy eligiendo el color del borde como color secundario. Otra vez. Vamos a publicarlo para ver cómo funciona. Ahora podíamos ver con qué fluidez está sucediendo la transición para los peces pequeños y el botón de registro debajo de las caricias, todo está funcionando muy bien. En la siguiente lección, veremos sobre la sección héroe, que consta de dos columnas. La primera columna es para el contenido y la segunda columna es para la imagen. Pero en la siguiente lección, estaremos desarrollando el contenido del primer codón. Veamos cómo vamos a hacer esto. 8. Sección de bandera - Parte 1: En esta lección, vamos a ver sobre la sección héroe, que está debajo de la sección de encabezado. Para esta sección de héroe, nuevamente, vamos a utilizar el plan de modelo de caja. Entonces ahora para el plan, tendremos un área total de héroes dentro de él. Estaremos teniendo una sección a la sección I izquierda y una sección de paseo. En la sección de la izquierda, tendremos bloques div para cada contenido. Eso es para el botón de subtítulo, título, correo electrónico, ID y seguimiento. En la sección derecha, tendremos una imagen. Entonces esto es lo que la planeación vamos a ejecutar. Entonces, pasemos a desarrollarnos. Antes de entrar en la lección. Veamos sobre el modelo de caja común, que se aplicará para todas las secciones dentro del cuerpo. Necesitamos agregar una sección y debemos proporcionar el nombre de clase apropiado para esta sección. A continuación se muestra el espaciado para esta sección. Es decir, necesitamos darle el valor de relleno superior e inferior para ello. Después de crear una sección dentro de ella, necesitamos agregar un contenedor y se debe dar el nombre de clase para este contenedor. Ahora podemos agregar el elemento dentro del contenedor, que es apropiado para la sección necesaria. Ahora, haga clic en el cuerpo debajo de él. Vamos a agregar una sección usando la multa rápida. Estoy dando el nombre de la clase como sección de representante de héroe. Debajo de la sección de representante de héroes, estoy agregando un contenedor. Entonces para este contenedor, calificar una clase como contenedor, que ya existe. Entonces estoy usando la clase existente debajo del contenedor. Voy a añadir un blob div. Ahora estoy dando el nombre de la clase como héroe Alia contenido. Este el bloque contendrá todo el contenido del héroe. Ahora en digamos el contenido del área de héroe, voy a agregar una grilla que juega como una sección de dos para contenido e imagen. Por defecto, la cuadrícula tendrá dos columnas y dos filas. Así que ahora voy a eliminar una fila de la cuadrícula de edición, que está bajo diseño. Entonces ahora vamos a estar teniendo sólo dos columnas con una fila. primera columna será el área para el contenido, y la segunda columna será el área para la imagen. Ahora estoy cambiando el nombre de la clase como cuadrícula de área de héroe. Ahora otra vez, debajo de la cuadrícula Editar, estoy ajustando el tamaño de la primera columna dentro de cada columna, necesitamos agregar un aspecto div. Por lo que será el lugar para sostener la imagen de contenido. Ahora a los bloques están ADA en la cuadrícula del área de héroes. Ahora estoy dando el nombre de clase para la primera sección desarrollada como levantamientos de héroes. Para el segundo bloque como sección héroe. Ahora voy a dar el contenido para la sección de héroes en vivo. Entonces estoy seleccionando la sección de héroe en vivo debajo de ella. Estoy buscando rumbo, que será para el título. He elegido el tipo de rumbo como seto uno, Asper en el diseño de figma, se me da el título a él. Veamos la topografía para el título, para el teléfono, estoy eligiendo Poppins y para la altura como extra negrita 800 y el tamaño como 70 píxeles. Estoy ajustando la altura de la línea hasta que consiga que requiera altura. Ahora estoy renombrando la clase como título de área de héroe. Ahora estoy eligiendo el color tipográfico como color secundario. En la sección de la izquierda, necesito agregar un subtítulo. Entonces estoy agregando otro encabezado, el encabezado tipo B, H2. Estoy dando este contenido de subtítulo como tanto en el diseño figma. Ahora vamos a asignar el tipo de gráfico V4 sobre subtítulo. Estoy eligiendo el tipo de fuente como marea baja y el peso como 400, tamaño normal como 40 pixeles y la altura ser 1.3 guiones. He cambiado el tipo de color gráfico como color primario. Necesito mantener el subtítulo sobre el título, así que lo estoy arrastrando sobre el título del área de héroe. Ahora necesito cambiar el nombre de la clase. Que el nombre de la clase sea héroe, subtítulo de área. Para el subtítulo Bajo más opciones de tipo en la tipografía, estoy eligiendo minúsculas para el espaciado entre letras. Yo nos estoy dando 0.0 a m. Ajustemos el espaciado para el título. Entonces estoy dando el margen como cero, por lo que estará más cerca del subtítulo. En la sección izquierda, hemos terminado un subtítulo en el título. A continuación, necesitamos agregar una identificación de correo electrónico Así que debajo de la sección hero left, estoy agregando otro diblock. Para esto, estoy dando el nombre de la clase como héroe puede envolver, este diblock cubrirá el ícono del correo del barco, y soy una dama para sostener el espacio para el ícono de correo, necesito agregar otro desarrollo. Bajo el envoltorio masculino héroe. Estoy agregando y otro diblock. Para eso. Estoy dando el nombre de la clase mientras escribía el gráfico de iconos de correo. Ahora agreguemos el ícono debajo del icono de hero mail grab, estoy agregando una imagen aquí. Podemos incluir el ícono de correo. Ajustemos el tamaño para este icono. Estoy dando el ancho como 50 píxeles y el alto como 50 píxeles. Hagamos la alineación para ello. Entonces, debajo del diseño, elija el flex de visualización y luego alinee el centro y justifíquelo. Deja que el color de fondo para ello sea el color blanco. Y para las fronteras, vamos a Gilda 15 píxeles como radio. Ahora necesitamos agregar un ID de correo electrónico. Entonces estoy seleccionando correo de héroe, que contiene tanto el ícono como soy una dama. Entonces, bajo envoltura principal de héroe, estoy buscando un enlace de texto. Se crea el siguiente enlace. Y después de eso, estoy agregando y puede encenderse. Asignemos la topografía para el ID de correo. Estoy dando el teléfono como Poppins, peso como 500, mediano y tamaño como 18 pixel, la altura de línea como 1.3 guiones. Estoy eligiendo el color para este tipo de Ralphie como color secundario. No estoy eligiendo ninguno en el estilismo. Otra tipografía para evitar el hipervínculo. Ahora estoy cambiando el nombre de este vidrio de enlace como hero may link, necesitamos traer esta identificación hecha además del ícono principal. Entonces estoy seleccionando todo el envoltorio masculino héroe. Entonces bajo el layout, estoy eligiendo flex en la pantalla y lo estoy alineando al centro. Necesitamos el espaciado para el ID de correo. Entonces estoy seleccionando el enlace principal del héroe. Estoy ajustando el relleno izquierdo diez pixeles. Por lo que hará el espaciado necesario entre el icono y la dama principal para agregar un botón en la sección izquierda, estoy seleccionando la sección hero live. Entonces debajo de ella, estoy buscando el botón. Se agrega el botón. Ahora vamos a asignar la tipografía para este botón, la fuente como Poppins, wait, es phi handle medium, y el tamaño es de 18 pixel. Escojamos el color como blanco. Tenemos que dar el color de fondo para el botón. Estoy seleccionando el color de fondo como color secundario. Ahora para el espaciado para el botón, estoy dando el valor de relleno para la parte superior e inferior como 15 píxeles. Para la izquierda y la derecha como 40 píxeles. Me he olvidado de dar el valor de altura de línea. Entonces ahora estoy dando el valor como guión 1.3. A continuación, le estoy dando el valor del borde, es decir, 20 píxeles. Tenemos que darle a las acuarelas do. Entonces, estoy seleccionando el color del borde como color secundario. El relleno para el botón no parece estar bien. Entonces voy a cambiar el valor de relleno. Deje que el valor de relleno superior sea de 25 píxeles. Lo mismo se aplica para la parte inferior y para el acolchado izquierdo en el acolchado derecho. Y que el valor para el relleno izquierdo y derecho sea de 60 píxeles. Y vamos a dar el espaciado entre letras como 0.0 EM debajo de la tipografía para este botón. Ahora cambiemos el nombre de este botón. El contenido del correo y los botones parecen estar muy cerca, por lo que necesitamos crear una brecha entre estos dos. Entonces para hacer eso, necesito crear un espacio de margen para el representante masculino. Estoy eligiendo la envoltura masculina héroe y dando el valor del margen como 20 píxeles para la parte inferior. Este espaciado no parece estar bien. Así que de nuevo, estoy cambiando el valor a 40 píxeles. Ahora estoy cambiando ese valor de margen superior como 40 píxeles. Ahora el espaciamiento entre estos dos parece muy fino. En la siguiente lección, veremos sobre la sección derecha, que consiste en una imagen y también vamos a agregar una imagen de fondo para toda la sección. Agregue a eso, vamos a agregar un efecto de transición para el botón. Veamos cómo vamos a hacer esto. 9. Sección de bandera - Parte 2: Hemos visto una sección izquierda de Buda. Ahora vamos a ver sobre la sección correcta. En la sección derecha vamos a agregar una imagen que es anamórfica Madison, empecemos a duplicar. He seleccionado un héroe, sección derecha en el fondo. Estoy eligiendo contenido y el tamaño. Y también que el azulejo sea ninguno. Ahora estoy eligiendo la imagen para este fondo. Que nuestra posición esté en el centro. Como hemos visto en el diseño, necesitamos agregar en otra imagen. Entonces estoy eligiendo una imagen bajo la sección héroe derecha. Si utilizo la imagen directamente, que se usa en el diseño figma, el tamaño será alto. Con el fin de comprimir el tamaño. Estoy usando tiny png.com. De ella, estoy obteniendo la imagen comprimida. Por lo que ahora se puede ver el tamaño se ha reducido. Si habilito la opción imagen en Hetchy DPI, esa imagen clara se puede ver en la pantalla retina. También. Necesitamos agregar el color de fondo para esta sección de héroe. Entonces estoy eligiendo la cuadrícula del área de héroes. Ahora bajo el fondo. He dado el valor de color desde el diseño figma. En el diseño hemos incluido la esquina redondeada. Entonces me voy a mudar a la frontera. Estoy dando el radio S 40 pixel. El espacio de relleno no es suficiente en la parte superior de esta cuadrícula de área de héroe. Entonces estoy dando el valor de relleno como 40 píxeles en la parte superior. Necesitamos alinear este contenido con el centro. Entonces estoy eligiendo alineado en el centro. Eso no es espacio de relleno para el contenido de la sección hero live. Entonces estoy eligiendo la sección héroe izquierda. Entonces para el valor de relleno izquierdo, nos estoy dando 140 pixeles. Eso es un poco más espaciado entre el título y el contenido del correo. Entonces estoy eligiendo el wrap hero male y dando el valor del margen como 20 pixeles. Vamos a previsualizar el sitio. En la vista previa, pude verlo como un tema de espaciado de diapositivas para el título y el subtítulo. Así que vamos a rectificarlo de nuevo al desarrollo. Ahora estoy seleccionando el título del área de héroe. Déjame cambiar el producto de altura de línea, estoy dando 1.2 guión. Entonces ahora permítanme cambiar el espaciado para el subtítulo al valor del margen superior. Que el valor sea cero. Ahora necesitamos agregar el efecto de transición al ID de correo. Entonces estoy seleccionando hero may link. Ahora en el no estado, me estoy moviendo a la transición. Estoy eligiendo el tipo para el tipo que estoy eligiendo como color de fuente. Entonces mientras estoy flotando, el color de la fuente debería cambiar. Después de terminar esto. Ahora estoy eligiendo a todo el estado. En la cosecha j, el color debe cambiar. Voy a la topografía en la sección de color. Estoy eligiendo S color primario. Hemos terminado el envío. El siguiente es el botón. Hagámoslo al final. Bajo la transición en el tipo estoy eligiendo el color de fondo, vamos a darle la transición tumoral para este botón. Entonces nuevamente, voy a hacer la transición para el tipo que estoy eligiendo en el color del borde. De nuevo bajo la transición para el momento, estoy eligiendo el color de fuente. Ahora estoy cambiando el estado como HOH. Ahora bajo la tipografía, estoy eligiendo el color como color secundario. Ahora para el fondo, estoy eligiendo el color como blanco. Vamos a previsualizar esto. En la vista previa, todo el anillo está funcionando muy bien para el enlace y también para el botón. He añadido la transición para la frontera, pero eso no es necesario para la frontera. Sólo quédatelo. Ahora, agreguemos el espaciado en la parte superior de esta sección de héroes. Entonces para esto, déjame darle el valor de relleno superior como 30 píxeles para que puedas ver el espaciado en la parte superior. Bien, ahora déjame previsualizar esto. Entonces en esta vista previa, puedo ver el espacio entre la sección de encabezado y también la sección de héroe. Déjame darle el valor de relleno en la parte inferior como 40 píxeles para esta sección de héroe dos. En la siguiente lección, veremos sobre la sección soviética, que consiste en títulos en la parte superior y tres elementos de servicio en la parte inferior. 10. Sección de servicios: parte 1: En esta lección, vamos a ver sobre la sección de servicios para un sitio web. Antes de continuar, veamos sobre la planeación para la sección de servicio. Al principio, estaremos teniendo una dos secciones como principal. La sección más alta es para el título y el subtítulo. El segundo apartado es para el área para la celebración de los servicios que vamos a prestar en su página web. En la segunda sección, estaremos teniendo tres servicios, mientras que con tres bloques, ese modelo de contenido será similar entre sí. En el primer desarrollo, estaremos teniendo un espacio para icono y debajo de él en ítem. Y nuevamente una debajo de ella, una descripción sobre esos servicios. Y nuevamente debajo de él un botón para conocer más. Es un lugar para que otros bloques div. Entonces esta es la planeación que vamos a implementar en nuestro sitio web. Pasemos a crearlo. Antes de entrar en la lección. Veamos sobre el modelo de caja común, que se aplicará para todas las secciones dentro del cuerpo. Necesitamos agregar una sección y debemos proporcionar el nombre de clase apropiado para esta sección. A continuación se muestra el espaciado para esta sección. Es decir, necesitamos darle el valor de relleno superior e inferior para ello. Después de nivelar la sección dentro de ella, necesitamos agregar un contenedor. Se debe dar el nombre de clase para este contenedor. Ahora podemos agregar el elemento dentro del contenedor, que es apropiado para la sección necesaria debajo del cuerpo. Vamos a crear una sección usando un hallazgo rápido. Ahora estoy dando el nombre de clase como sección de sibilancias, el valor de relleno superior e inferior para el píxel Sección 100. Ahora seleccionando la sección Servicios, vamos a crear un contenedor bajo la sección Servicios para dar la clase para este contenedor, seleccionemos el contenedor de clase existente. Dentro del contenedor. Vamos a crear un bloque div para sostener los títulos. Vamos a dar el nombre de clase para este dibloque como sección titulada wrap. Bajo la sección titulada Brad, estoy buscando un rubro. Así que vamos a crearlo con el tipo de encabezado como cobertura tres. Ahora estoy renombrando ese rubro como servicios. Entonces bajo la tipografía, estoy buscando una cola baja y dejar que el ancho sea 400 normal. Ahora llegando al tamaño, vamos a cambiarlo como 40 pixeles para la altura como 1.3 guión. Estoy seleccionando el color de fuente como color primario, y vamos a darle el espaciado entre letras para ello como 0.02 EM. Ahora necesito cambiar el nombre de la clase para este rubro porque no debería afectar a los otros rubros. Entonces estoy cambiando el nombre este encabezado clase nombre S sección subtítulo. A continuación, tenemos que dar el título. Entonces estoy seleccionando esta sección title rep. Entonces debajo de ella, estoy buscando otro rubro. Ahora estoy eligiendo el tipo de rumbo como H2. Ahora estoy dando el nombre del título como en el diseño. Entonces bajo la tipografía, estoy buscando los Poppins para la fuente, escriba. Siguiente para el peso, estoy eligiendo 800 extra bold. Ahora estoy dando el tamaño como 50 pixeles y una altura como un guión de un punto dos. Ahora llegando al color para este título, estoy buscando el color de fuente. Lo estoy dando como color secundario, como ya lo hemos comentado, necesitamos cambiar el nombre de la clase para este rubro. Estoy dando el nombre de la clase como título de sección. Hemos terminado la parte del título. Y a continuación, tenemos que concentrarnos en el contenido de los servicios y otros contenedores. Nuevamente, estoy creando un diblock que estará bajo el título. Ahora estoy dando el nombre de clase para este dibloque como envoltura de contenido. Por lo que sostendrá el contenido de cada servicio dentro de ese blog div. Ahora hemos creado el espacio para la celebración de los servicios. Así que voy a crear una grilla que está bajo el contenido del servicio envuelto. Por defecto, constará de dos columnas y dos filas. Aquí necesitamos unas tres columnas porque estamos utilizando los tres servicios. Entonces estoy borrando una fila y estoy agregando en otra columna. Ahora estamos cambiando el nombre de clase para esta grilla porque no afectará a las otras cuadrículas. Entonces ahora estoy cambiando el nombre de la clase como. Entonces dice grilla. Tenemos mayor cuadrícula dentro que cada columna, necesitamos agregar un blog para contener el contenido. Y además, una cosa que debemos entender es que el contenido diseñado para los servicios es similar entre sí. Entonces me voy a concentrar en el primer artículo de servicio. Si desarrollamos claramente el primero es el artículo de servicio, entonces se puede duplicar por dos veces para los otros dos. Entonces visados. Entonces bajo la grilla de servicio, estoy buscando un diblock. Ahora, estoy cambiando el nombre de ese dibloque S. Así que con item bajo el ítem de servicio, estoy creando un div que contiene el icono. Ahora estoy dando el nombre de la clase para este diblock S icon grad. Entonces esto sostiene el ícono de manera efectiva. Ahora hemos creado el espacio para sostener el icono. Ahora estoy buscando una imagen. Ahora he elegido una imagen para el icono. Que el ancho y alto para este Eigen sean de un píxel. Para la correcta alineación para el icono, estoy eligiendo el flujo en la pantalla y alinearlo al centro y justificándolo al centro. Al igual que en el diseño, necesitamos darle el color de fondo para el icono. Entonces estoy seleccionando la imagen y el degradado en el fondo. Y estoy seleccionando la cubierta como tamaño y posicionándola al centro. Ahora estoy eligiendo la imagen del activo. Tenemos que darle una esquina redondeada para este icono, voy por debajo de las fronteras. Ahora. Estoy dando el radio como 30 pixeles. Hemos terminado la parte del icono. A continuación, necesitamos agregar un título para ello. Entonces estoy seleccionando el artículo de servicio debajo de él. Estoy buscando un rubro. Ahora le estoy dando el título por ello. Pasando al tipo de Roffey para este rubro. Deja que el teléfono nos Poppins por el peso. Estoy eligiendo como medio 500. Demos el tamaño como 30 píxeles y la altura como guión 1.3. Para el color de fuente, estoy eligiendo el color secundario de la muestra. Cambiemos el nombre del encabezado como decíamos. Como el título no está alineado correctamente. Entonces necesito alinearlo al centro en nuestro establecido que estoy seleccionando el elemento de servicio bajo la tipografía. Lo estoy alineando al centro. Hemos creado un icono. A continuación hay una descripción debajo del ítem de servicio, estoy buscando un párrafo. Ahora, estoy eligiendo la etiqueta HTML de párrafo antiguo para este elemento de párrafo. Pasemos a la tipografía para esta gráfica inferior, otro tipo de gráfica V, estoy eligiendo la fuente como Poppins para el peso como 400 normal, y dejar que el tamaño entre los píxeles. Ahora voy a elegir el color para esta fuente. Entonces como en el diseño, estoy dando el color en el valor hexadecimal. Ahora estoy creando como gouache para poder usarlo una y otra vez. Ahora estoy dando el valor de altura como guión 1.3. Ahora, vamos a verlo en modo de vista previa. No hemos agregado un botón para ello, así que vamos a agregarlo. Haga clic en el elemento de servicio. Entonces debajo de ella, estoy buscando el botón. Ahora me estoy moviendo a la tipografía para este botón, estoy seleccionando la fuente como Poppins, peso como manejador de archivo Mediano. Y le estoy dando el tamaño como 18 pixel y la altura como 1.1 guión para el color de fuente para este botón, estoy eligiendo color secundario de esta cuña. Pasemos al fondo para este botón. Estoy eligiendo el color como férula de subvenciones. Para las esquinas redondeadas, me estoy moviendo a los bordes. Estoy dando el valor de radio S 15 pixel. Deja que el estilo para el Burdeos sea una línea sólida. Y para el color estoy eligiendo el segundo color grande. Permítanme darle el valor de relleno como píxel válido al principio. Entonces no parece tan bueno. Entonces ahora estoy dando el, otro valor que es como 15 pixeles. Ahora para el relleno izquierdo y derecho, estoy dando el valor S Duan De pixel. Siento cambiar la altura de la fuente. Entonces bajo la gráfica dipolo, dentro de la altura, estoy cambiando como guión 1.3. Entonces siento que ahora es bueno. Lo malo para la izquierda y la derecha no parece estar bien. Así que de nuevo, estoy seleccionando el valor de relleno para la izquierda y la derecha. Estoy dando el valor como 30 pixeles. Ahora, estoy renombrando este vidrio como botón transparente. Ahora dentro del elemento de servicio, el icono debería estar en el centro. Entonces estoy seleccionando esta imagen. Ahora bajo el espaciado, estoy seleccionando el botón central Elemento. Si selecciona ese botón, los márgenes izquierdo y derecho se establecerán en auto. Para obtener este espaciado suficiente en todo el elemento del programa de estudios, estoy dando el valor de relleno para la parte superior e inferior como 55 píxeles. Para el relleno izquierdo y derecho, estoy dando el valor como 50 píxeles. Así que ahora obtenemos el espacio suficiente para todo el artículo de servicio. Necesito dar el borde para el artículo de servicio como en el diseño. Entonces bajo el borde, le estoy dando el estilo como sólido para el color. Estoy usando el valor hexadecimal como en el diseño. Para ganar la esquina redondeada, estoy dando el radio como 40 píxeles. Por el espaciado suficiente entre el título y el contenido. Estoy eligiendo el envoltorio de contenido de servicio al elegir el representante de contenido de servicio, necesito dar el valor de relleno. Entonces estoy dando el valor de relleno para la parte superior como 60 píxeles para obtener el espaciado entre el icono y el título, estoy cambiando el valor de margen para el icono. Así que estoy seleccionando esta envoltura de iconos siempre. Estoy dando el valor de margen, es decir, un valor de margen inferior como 30 píxeles para el espaciado entre el título y el párrafo. Estoy eligiendo su título de servicio. Ahora, estoy cambiando el valor del margen. Ese es el valor del margen inferior como 15 píxeles. Entonces obtenemos un pequeño espaciado entre el título y un párrafo. Ahora necesito darle un poco de ajuste en la altura del teléfono para el párrafo. Entonces estoy seleccionando el párrafo anterior a eso. Permítanme seleccionar esa etiqueta para este párrafo como todos los párrafos. Ahora, bajo la altura, estoy ajustando como guion phi de un punto. Ahora para el espaciado entre el párrafo y el botón y seleccionando el botón. Ahora estoy creando otra clase que es botón de servicio. Así que el estilo al que nos hemos sometido se almacenará en las dos clases. Eso es un botón de trasplante y este botón siempre. Ahora estoy dando el valor del margen superior como 20 píxeles. Por lo que este valor se almacenará en un botón Transparente y también en un botón de servicio. Siempre que esté usando la clase de botón de servicio para el, otro botón, este estilo será aplicable a eso. Ahora, vamos a verlo en el modo de vista previa a eso, lo estoy publicando. Así que ahora puedo verlo. Entonces ahora todo está bien. Ahora estoy duplicando dos veces para los otros dos servicios. Por lo que al duplicar el ítem soviético se colocará en las columnas correspondientes en la cuadrícula. Necesitamos la brecha entre la, cada una de las columnas debajo de la cuadrícula Editar. Estoy dando el valor como 30 píxeles para esa brecha. Así que ahora podríamos ver esa necesidad de espaciamiento entre las columnas de cada una. En la siguiente lección, haremos el estilo necesario que se necesita para los artículos de servicio de la sección de servicio. Vamos a verte en la siguiente lección. 11. Sección de servicios: parte 2: Ahora vamos a hacer el estilo que es necesario para nuestra sección de servicio. Según el diseño, hemos completado los títulos y el subtítulo, pero también hemos completado la estructura básica del artículo de servicio. Ahora, tenemos que hacer el estilo Asper InDesign. Pasemos a desarrollarlo. Hemos completado el primer artículo de servicio. A continuación, tenemos que concentrarnos en el segundo elemento de servicio. Entonces en el segundo elemento de la lista, necesito cambiar el color de fondo en el icono. Entonces estoy seleccionando ese ícono en particular. Y me estoy moviendo al fondo. Ahora, tengo que elegir la imagen de fondo. Entonces estoy eligiendo la imagen de fondo. Ahora se podía ver cambiando la imagen de fondo, está afectando también a los otros dos elementos de servicio. Déjame hacerlo una vez más. Nuevamente, estoy eligiendo la imagen de fondo. Ahora también se podría ver que está afectando a los otros dos artículos de servicio. Además, la razón principal detrás es que estamos usando el mismo nombre de clase para los, los tres artículos de servicio. Todo el estilo que hemos hecho se almacena en este servicio icon wrap glass. Entonces, los elementos que están usando el icono de servicio envuelven vidrio, el estilo será aplicable a esos elementos. Entonces esta es la razón detrás de esto. Para evitar esto, necesitamos dar otro nombre de clase junto con este icono de servicio wrap glass. Por lo que tanto el estilo será aplicable a este elemento en particular. Por qué estamos usando las dos clases es el estilo existente y también el nuevo estilo será aplicable a este elemento. Entonces, junto con el envoltorio de icono de servicio, estoy creando un elemento de clase dos. Ahora voy al fondo. Ahora estoy eligiendo la imagen de fondo. Se puede ver que la imagen de fondo ha cambiado en este segundo elemento de servicio. Ahora, necesitamos cambiar la imagen del icono. Estoy usando el Reemplazar imagen. Ahora he sustituido la imagen. No hemos creado ninguna clase para esta imagen en particular, por lo que no afectará a los demás iconos. Ahora me mudo al tercer elemento de servicio con el vidrio envolvente de icono de servicio existente, estoy creando otra clase con un nombre, elemento de servicio tres. Ahora bajo la imagen de fondo estoy eligiendo y otra imagen de fondo. Ahora, reemplacemos la imagen del icono. Haber reemplazado la imagen. Vamos a tomarlo en modo de vista previa mediante el uso de Publish para que podamos ver cómo se ve. Ya hice la cosechada como hicimos en las lecciones anteriores. Ahora, necesitamos reorganizar la posición de los artículos de servicio como en el diseño. Entonces estoy seleccionando el segundo elemento de servicio con la clase de elemento de servicio existente. Estoy creando otra clase con un segundo elemento del servicio de nombres. Ahora necesito cambiar la posición de este segundo ítem de servicio. Entonces me estoy moviendo al puesto que estoy seleccionando como relacionado. Si usamos el posicionamiento relativo, ese elemento en particular puede superponerse los otros elementos sin afectar su posición. En el diseño. Hemos visto que cada uno de los artículos de servicio son poco platicar entre sí. Entonces estoy usando el empujador S relacionado. Por defecto, el posicionamiento será en R2. Para superponer el elemento entre sí, estoy usando el valor como -100 en la parte superior. Permítanme hacer el mismo proceso para el tercer ítem. Ahora, estoy seleccionando el tercer elemento de servicio con la clase de elemento de servicio existente. Estoy creando otra clase con un nombre. Así que también pusimos de pie artículo para esto. Estoy cambiando la posición como una relación con el tercer elemento de servicio es poco en la parte superior luego el segundo elemento, así que estoy dando el valor como -200 en la parte superior. Déjame publicarla para ver la vista previa. Está bien. Ahora necesitamos agregar los antecedentes para todo este artículo de servicio. Entonces estoy seleccionando ese contenido leído, es decir, el envoltorio de contenido de la semana, que contiene estos tres elementos. Ahora me estoy moviendo al fondo, y ahora estoy eligiendo la imagen. He elegido la imagen del activo. Ahora estoy seleccionando la posición al centro. Déjenme darle la talla como contenida. Por lo que estará contenido dentro de ese dibloque. Ahora podríamos ver el, todos los antecedentes del elemento de servicio en particular son transparentes, por lo que necesitamos construir un color de fondo para los elementos de servicio. Entonces ahora estoy seleccionando el primer ítem de servicio, y me estoy moviendo al segundo plano. Ahora estoy eligiendo el color ya que el color de fondo se verá afectado a los demás elementos de servicio porque usa la misma clase de artículo de servicio. Vamos a publicarlo para verlo como una vista previa. Ahora, ha salido ya que estamos en el diseño. Pero al pasar el cursor sobre el artículo de servicio, no tiene ningún sentido. Por lo que tenemos que dar parte del efecto de transición a los artículos de servicio. Vamos a hacerlo. Ahora. Estoy seleccionando el artículo de servicio. Ahora, voy a elegir este estado como Howard. Ahora en estado de vuelo, tenemos que darle a este alicatado. Entonces mientras y rondando sobre él, voy a dar el efecto de sombra detrás de él. Entonces voy a los efectos. En los efectos, estoy eligiendo las sombras de caja. En la sombra de caja, estoy ajustando el ángulo para ello, y estoy ajustando el efecto de desenfocar a seis píxeles. Ahora necesito ajustar la opacidad del color. Voy al color y estoy ajustando la opacidad para ello. Hemos hecho los efectos de transición mientras estamos en el vuelo. Pero antes de eso, necesitamos seleccionar qué transición se lleva a cabo. Pero para poder establecer eso, necesitamos fijar la transición, pero no está funcionando porque todavía estamos en el estado hover. Ahora necesitamos cambiar el estado a ninguno. Ahora me estoy moviendo a la transición y necesito seleccionar su tipo. Esa es la sombra de caja. Ahora estoy ajustando la duración que es un requisito para esta transición. Y bajo flexibilización, me estoy ajustando en consecuencia. Vamos a publicarlo para verlo en una vista previa. Irlanda whoring. Está funcionando perfectamente. Ya tengo un renombrado los títulos de estos ítem de servicio 2.3. Por lo que hemos completado la sección de servicio con éxito. En la siguiente lección, estaremos viendo sobre la sección de galería en ella. Estaremos desarrollando el título en la parte superior. Y uno del elemento de la galería, que está dentro de la cuadrícula. Vamos a verte en la siguiente lección. 12. Sección de galería - Parte 1: En esta lección, vamos a ver sobre la sección de galería, que está debajo de la sección de servicio. En la sección de galería, contaremos con los últimos trabajos que hemos realizado. Veamos la planificación del diseño para esta sección de galería. Primero, tendremos una sección que contiene toda esta sección de galería. En su interior. Estaremos teniendo un tres cajas. El primer dibloque es mantener el título de esta sección de galería. Los dos siguientes contendrán los últimos trabajos que hemos realizado. Utilizaremos el modelo de cuadrícula para estos últimos trabajos. El primero, tendremos un gran modelo con las dos columnas. Lo mismo aplica para el segundo para, dentro de la, cada columna, vamos a estar usando que han bloque. Dentro de cada div. Estaremos usando la imagen y el contenido para ello. Este es el diseño que vamos a implementar. Empecemos a desarrollarlo. Antes. Escucha, veamos sobre el modelo de caja común, que se aplicará para todas las secciones dentro del cuerpo. Necesitamos agregar una sección y debemos proporcionar el nombre de clase apropiado para esta sección. A continuación se muestra el espaciado para esta sección. Es decir, necesitamos darle el valor de relleno superior e inferior para ello. Después de crear una sección dentro de ella, necesitamos agregar un contenedor y se debe dar el nombre de clase para este contenedor. Ahora podemos agregar el elemento dentro del contenedor, que es apropiado para la sección necesaria. Al principio, debajo del cuerpo, vamos a crear una sección. Vamos a darle un nombre de clase para esta sección como sección de galería. Ahora, bajo el espaciado, permítame darle el valor de relleno para la parte superior e inferior como 100 píxeles. Ahora dentro de esta sección, vamos a crear un contenedor. El contenedor estoy dando el nombre de la clase como contenedor de clase existente. Vamos a desarrollar el bote del título para esta sección de galería. Aquí. Voy a usar la parte del título de la sección de servicio. Entonces me mudo a la sección de servicio y seleccionando la sección titulada wrap. Y lo estoy duplicando. Y estoy arrastrando esa sección titulada wrap a esta sección de galería. Es decir, estar dentro del contenedor, necesitamos crear el, otro nombre de clase junto con la sección titulada frotar vidrio. Estoy creando una clase llamada como centro. Ahora me estoy moviendo a una sección tipográfica. Ahora me estoy alineando al centro. Por lo que el contenido llegará al centro. Ahora estoy cambiando el nombre de los títulos y subtítulos. Hasbro en nuestro diseño. No necesitamos hacer el estilo en la topografía porque ya estamos usando la clase existente, que está en esta sección OB. Ahora debajo del contenedor, estoy calificando y diblock. Contiene el contenido de la galería. Ahora voy a dar el nombre de la clase como envoltura de contenido de galería. Ahora he ajustado el valor de relleno para esta envoltura de contenido de galería. Ahora dentro de la envoltura de contenido de galería, voy a crear una grilla. La grilla ha sido mayor. Déjame borrar una fila. Entonces ahora vamos a estar teniendo dos columnas. Entonces vamos a ajustar el tamaño de esta cuadrícula de acuerdo con el diseño. Necesitamos renombrar el nombre de la clase para esta cuadrícula. Déjame renombrar este nombre de clase como galería primera cuadrícula porque vamos a usar las dos cuadrículas. Entonces nombro a esta grilla como galería primera grilla. Ahora dentro de la primera columna, necesitamos crear un blog div. Y yo dando el nombre de la clase como elemento de galería dentro del desarrollo, vamos a dar el contenido para ello. Entonces ahora al seleccionar el elemento de la galería, estoy buscando el encabezado y lo estoy creando. Ahora le estoy dando el tipo de rumbo como seto tres. Y ahora estoy renombrando este rubro como dibujo digital. Ahora es el momento de cambiar es la tipografía. Voy a la topografía bajo la forma. Estoy eligiendo como títeres y elijo el peso como 700, negrita. Establezca el tamaño como 30 píxeles y la altura como 1.3 guión. Tenemos que cambiar el color de la fuente. Entonces estoy eligiendo el color como color secundario de la muestra. Voy a la opción tipo centro comercial. Bajo el espaciado entre letras, estoy dando el valor como 0.02 EM. Tenemos que cambiar el nombre de la clase para esto. Entonces estoy renombrando esta clase como título de Galería. Nosotros le hemos dado el título, y tenemos que darle un título a este. Entonces estoy seleccionando el elemento de la galería debajo de él. Estoy creando y encabezando. Deje que este encabezamiento tipo B, h4. Ahora estoy cambiando el nombre este contenido de encabezado como ilustración de marca. Pasemos a la topografía. Establece la fuente como Poppins y la espera S 600, semi negrita. Establezca el tamaño como 20 píxeles y el guión de altura 1.3. Ahora para el color de fuente, estoy eligiendo el color secundario de la muestra. Déjenme darle espaciado entre letras para ello como 0.01 EM. Tenemos que dar el color de fondo para este elemento de la galería con una selección de elemento de la galería. Y yendo al fondo. Y estoy seleccionando la imagen y el degradado. En esto, estoy seleccionando como cubierta otra talla. A continuación, estoy posicionando esta imagen al centro. Ahora voy a elegir la imagen del activo. Ahora necesitamos ajustar el tamaño de este elemento de la galería. Entonces voy por debajo del espaciado. Vamos a dar un valor de relleno. En la parte superior a 90 píxeles. A la izquierda, le estoy dando el valor como 60 píxeles. Y en el Lienzo podemos ver necesitamos un tamaño mucho más. Nuevamente, estoy cambiando el valor de relleno inferior, hacer 90 píxeles, hacerlo como una esquina redondeada. Voy a los bordes y dando el radio a 40 pixeles. Aún así necesitamos un tamaño más para el artículo de la galería. Entonces voy a dar el valor de altura. Para hacer eso, voy a otro tamaño en la altura mínima, estoy dando el valor como dos píxeles finales. Volviendo a este ítem de galería, es decir, más espaciado en la parte superior de este título de galería. Necesitamos reducirlo con la selección de un elemento de galería en sí. Estoy enseñando un valor de relleno en la parte superior a 60 píxeles. Pero de nuevo, siento que necesito cambiar el valor porque necesita un poco más de espaciado. Entonces estoy cambiando el valor a 70 píxeles para estar en el mismo valor para la parte superior e inferior, estoy cambiando el valor inferior a 70 píxeles. En la imagen de fondo, podemos ver la parte de la cabeza. Entonces voy al fondo. Y con la selección de la Imagen que elije, estoy seleccionando la posición al centro superior. Ahora voy a previsualizar esto. Al igual que en el modo de vista previa. Se ve bien. En la siguiente lección, estaremos trabajando en los siguientes dos elementos de la Galería en la sección de galería. Veamos, en la siguiente lección. 14. Sección de galería - Parte 3: Yo casi hemos completado todo en la sección de galería junto con el título y los elementos de galería 123, sólo queda la última parte. Vamos a completar el desarrollo para eso también. Ahora voy a la galería primera grilla. Estoy eligiendo el primer elemento de la galería y lo estoy duplicando. Ahora estoy arrastrando el elemento de la galería a la segunda cuadrícula y hago la segunda columna. Ahora tenemos que elemento de galería, segunda cuadrícula. Necesitamos crear una nueva clase para este elemento de la galería junto con la clase existente. Ahora estoy dando el nombre de la clase como galería para la imagen de fondo para el cuarto elemento de la galería debe ser cambiado. Entonces voy al fondo y estoy eligiendo la imagen del activo como en el diseño. Ahora necesitamos concentrarnos en el contenido de este elemento de la galería. Entonces estoy creando un dibloque debajo del elemento de la galería. Estoy dando el nombre de la clase como Gallery title align. Ahora estoy arrastrando el título de la galería y el título de la categoría de galería al título de la galería align. Ahora con título o línea de Galería seleccionada. Voy a la disposición y estoy eligiendo flujo en la pantalla, y me estoy alineando al centro. Justificar. Estoy eligiendo espacio entre donde se distribuirán los artículos de borde a borde. Como pudimos ver, el título de la categoría no está alineado correctamente. Entonces estoy eligiendo el título de la categoría galería. Tenemos que dar el espaciado en la parte superior del título de la categoría. Así que junto con la categoría galería titulada class y creación de una otra clase con un espacio de nombre punto. Y estoy ajustando el valor de relleno superior para ello. Y vamos a finalizar con los 15 píxeles el espaciado correcto para el elemento cuatro de la galería no es suficiente. Y estoy dando el valor de relleno correcto a 60 píxeles, y estoy cambiando el nombre del contenido también en el diseño. Nuevamente, la alineación no es correcta para la marca, así que la estoy seleccionando. Y nuevamente estoy ajustando el valor de relleno superior a 20 píxeles. Para obtener el espaciado uniforme, estoy seleccionando el título de la galería, alinear y dando el valor de relleno inferior como diez píxeles. Vamos a publicarlo para verlo en una prima. O aquí podríamos notar que no hemos dado el color de fondo para esta sección de galería. Entonces estoy seleccionando la sección de galería y voy al fondo. Ahora, estoy dando el valor hexadecimal como en el diseño. Ahora lo estoy publicando. Podríamos notar que el espaciado en la parte superior no es una visión. Entonces voy a volver a obtener el espaciado entre la sección de servicio y la sección de galería. Estoy seleccionando la sección de servicio y estoy dando el valor de relleno inferior a 140 píxeles. Por lo que ahora hemos completado la sección de galería, como en el diseño. En la siguiente lección, estaremos viendo sobre la sección del taller. Consiste en dos columnas en él. Estaremos desarrollando el contenido de la primera columna en la siguiente lección. Nos vemos en la siguiente lección. 15. Sección de talleres - Parte 1: En esta lección, estaremos viendo sobre la sección del taller. Entonces ahora veamos sobre la planeación de la misma. Al principio, estaremos creando una sección y luego se creará la cuadrícula con las dos columnas. Cada columna contendrá los bloques div. El contenido de esta sección del taller estará en el bloque d de la primera columna. En la segunda columna, estaremos colocando la imagen ahora volviendo a la primera columna, consiste en el subtítulo y un título, y debajo de él, ese será un párrafo. Crearemos el bloque do debajo del párrafo que contiene el código QR y la imagen del icono y el contenido del código QR. Y finalmente, estaremos teniendo una carga para poder reservar nuestro horario de taller. Ahora de nuevo, la idea clara sobre el diseño. Entonces empecemos a desarrollarlo. Antes de entrar en la lección. Veamos sobre el modelo de caja común, que se aplicará para todas las secciones dentro del cuerpo. Necesitamos agregar una sección y debemos proporcionar el nombre de clase apropiado para esta sección. A continuación se muestra el espaciado para esta sección. Es decir, necesitamos darle el valor de relleno superior e inferior para ello. Después de crear una sección dentro de ella, necesitamos agregar un contenedor. Se debe dar el nombre de clase para este contenedor. Ahora podemos agregar el elemento dentro del contenedor, que es apropiado para la sección necesaria. Ahora dentro del cuerpo y creando una sección, tenemos que dar el nombre de clase para esta sección. Entonces estoy dando el nombre de la clase como sección de taller. Ajustemos el valor de relleno para esta sección como 100 píxeles en la parte superior y 100 píxeles en la parte inferior. Aquí usaremos la sección titulada representante de la sección de servicio a nuestra sección de taller. Porque un barco este título rudo tienen el mismo diseño. Antes de hacer eso, vamos a crear un contenedor debajo de la sección del taller. Entonces para esto, seleccionemos el contenedor de clase existente. Estoy seleccionando la sección titulada wrap de la sección de cirugía. Y ahora lo estoy duplicando. Arrastremos la sección de ID duplicada titulada wrap a la sección del taller que está debajo del contenedor. Ahora necesitamos cambiar el nombre del contenido del título como en nuestro diseño. Ahora estoy creando el párrafo debajo de la sección duplicada titulada wrapper. Nosotros hemos hecho lo básico para el título y un párrafo. Y ya sabemos que el diseño tiene un modelo de cuadrícula. Entonces estoy creando una grilla debajo del contenedor. Ahora. Estoy borrando una fila. Ahora estoy ajustando el tamaño de la primera columna a 0.9. Ya sabemos que necesitamos renombrar la grilla. Entonces estoy renombrando la grilla como grilla de taller. Dentro de la rejilla, tenemos dos columnas. Dentro de cada columna, necesitamos crear un log div. Entonces estoy creando un dibloque debajo de la cuadrícula del taller. Ahora estoy dando el nombre de clase para este dibloque como envoltura de contenido del taller. Esta es la zona para sostener todo el contenido de esta sección del taller. Sabemos que el contenido debe estar en la primera columna de la cuadrícula. Así que estoy arrastrando esta sección titulada grab dentro de la envoltura de contenido del taller. Ahora estoy creando un diblock debajo del grab de contenido del taller que está en la primera columna para contener el contenido del código QR. Ahora estoy dando el nombre de clase para esto como perchero transparente. Hemos calificado el envoltorio del código QR. Entonces necesitamos agregar la imagen del código QR. Bajo envoltura de código QR, estoy creando una imagen donde ya he colocado un código QR. Se puede ver que más adelante, hemos colocado el código QR dentro del código QR un representante. Y al lado, necesitamos agregar otra imagen. Entonces estoy creando un diblock y estoy dando el nombre de la clase como autor de cita rap. Al tratarse de una envoltura, necesitamos agregarle una imagen. Entonces estoy buscando una imagen y la he creado. Así que escojamos la imagen del activo. La imagen se ha colocado aquí, necesitamos hacer la imagen como una imagen redondeada. Entonces me voy por debajo de las fronteras. Ahora, tengo que dar un valor de píxel para el radio como cien. Ahora en el lienzo, se puede ver que ha sido redondeado. espaciado por toda la imagen está completamente ocupado ya que necesitamos dar el espaciado en toda la imagen. Entonces en lugar de seleccionar la imagen, estoy seleccionando código o el rep para dar el ancho y alto debajo del tamaño. Ahora estoy dando el valor para el ancho como 60 pixeles y el alto como 60 pixeles. Como pudimos ver que no está totalmente alineado. Entonces voy a la capa y estoy seleccionando el flexbox y dejo que se alinee al centro y justifique al centro. Ahora se ha alineado correctamente. Tenemos que hacer el estilo sobre la imagen como en nuestro diseño. Entonces bajo las fronteras, estoy eligiendo el estilo como discontinuo. Le estoy dando el color como endeavor figma design. Estoy dando el valor en hexadecimal. Y estoy ajustando el valor de ancho como dos píxeles. Con el fin de ser redondeado círculo discontinuo. Estoy dando el radio como 100%. Hemos terminado el código QR y una imagen de autor. A continuación, necesitamos agregar el contenido del código de escaneo. Entonces dentro del wrap del código QR, estoy agregando un párrafo. Ahora. He dado el contenido como en el diseño. A continuación para la tipografía, estoy cambiando el tipo de fuente como Poppins y el peso como 500 de tamaño medio como 16 píxeles. Ahora necesitamos renombrar el nombre de la clase. Entonces estoy dando el nombre como contenido de cabra de escaneo. Ahora he cambiado el color de fuente a color secundario, para cambiar el color del nombre y seleccionando el nombre. Y han cambiado la opción como rap con span. Entonces ahora bajo el color de fuente, estoy dando el valor hexadecimal, como en nuestro diseño. Ahora estoy renombrando el nombre de la clase por textos malos ***, scan, o el nombre. Ahora en la topografía bajo la opción Más, nos estoy dando capitalizar. Ahora para la alineación de todo este contenido, ese es el contenido del código QR y la selección de envoltura de código QR. Bajo el layout, estoy eligiendo un flex en la pantalla y alinearlo al centro. Y ahora estoy llorando por espacio entre en la justificación, pero no es como se esperaba. Entonces estoy eligiendo inicio, por lo que los artículos quedarán alineados. El espaciado no es suficiente entre el código QR y la imagen. Estoy seleccionando código o el rap. Ahora bajo el espaciado, estoy ajustando el valor del margen de la izquierda a 15 píxeles. Para el espaciado en el contenido del código, estoy seleccionando el contenido del código de escaneo. Bajo el espaciado, estoy ajustando el valor del margen izquierdo a 15 píxeles. Nuevamente, tenemos el color de fondo para este gráfico de código QR. Entonces estoy seleccionando tu código, agarra el fondo. Vamos a elegir el color, como en nuestro diseño de figma para obtener el espaciado dentro de un wrap de código QR, estoy dando el valor de padding o inferior como 15 pixel. Necesitamos una esquina redondeada para esto. Entonces bajo las fronteras, estoy dando el valor como 20 píxeles para el radio. La imagen del autor y el contenido del código no están alineados correctamente. Entonces estoy seleccionando este contenido de recubrimiento de lata y estoy dando el valor de modelado de mortero a cero para que se alinee correctamente. Podríamos notar que llega al centro. Según el diseño, esta zona no está totalmente ocupada. Para establecer eso, estoy seleccionando el envoltorio de contenido del taller dentro de él, voy a crear un bloque div. Ahora voy a colocar ese código QR envuelto dentro de ese diblock. Tenemos que dar el nombre de clase para este dibloque. Entonces estoy seleccionando el dibloque y le doy un nombre de clase como área de código QR. Ahora, bajo el diseño, estoy eligiendo el bloque en línea de la pantalla. El ancho y alto serán determinados por el contenido en su interior. Entonces ahora podíamos ver que obtenemos la estructura como en nuestro diseño, para obtener el espaciado o el derecho del wrap del código QR. Estoy dando el valor de relleno debajo del espaciado como 40 píxeles. Hagamos la comprobación en la vista previa. En la película anterior, pudimos ver que todo está a la perfección. Sólo el botón recuerda. Vamos a desarrollarlo. Estaremos agregando el botón dentro de la primera columna. Entonces estoy seleccionando el contenido del taller envuelto dentro de él. Estoy calificando un golpe de muerte, y estoy dando el nombre de la clase para esto como envoltura de botón Q para mantener presionado el botón. Eso dentro de la gota, estoy creando un botón. Ahora tenemos que dar el nombre de clase para este botón. Entonces en el selector, estoy eligiendo el nombre de la clase como botón ya que ya existe. Así que al deshacer clic en el botón de nombre de clase existente, el estilo que hemos hecho anteriormente se aplicará a este botón. Podrías notar los cambios que se han hecho en este lienzo. Ahora estoy cambiando el nombre de este botón para reservar mi tiempo. Entonces por ahora hemos completado lo básico que se necesita para el representante de contenido del taller. Entonces, en la siguiente lección, estaremos viendo acerca de la mejora a este envoltorio de contenido desarrollo que se debe hacer en la segunda columna, dos. 16. Sección de talleres - Parte 2: Casi hemos completado las cosas necesarias que se necesitan en este contenido del taller. Ese es el título del subtítulo, la descripción, el buen contenido de cura y el botón. El un día recuerda algo del realce que hay que hacer en el estilismo. Y también necesitamos concentrarnos en la segunda columna de esta grilla. Empecemos a desarrollarlo. Tenemos que dar el espaciado igual para el subtítulo del título, y la descripción. Entonces estoy seleccionando este título de sección y estoy dando el valor de margen a diez píxeles. Como hemos copiado esta gráfica de título de esta sección OB. Los cambios que aquí se hayan hecho se verán afectados en esa sección de servicio dos. Ahora hemos completado la parte de mareas. A continuación, estoy seleccionando este párrafo y estoy dando el nombre de la clase S sección titulada contenido. Ahora necesitamos un espaciado en la parte superior de esta área de contenido. Entonces estoy seleccionando esto y dando el valor de relleno o la parte superior como diez píxeles. Y ahora para el espaciado dentro del área del código QR, voy al espaciado y luego dando el valor de relleno superior como 25 y el valor de relleno inferior como 40 píxeles. Ahora obtenemos el espaciado necesario o inferior. Vamos a publicarlo para verlo en el modo de vista previa. En el modo de vista previa, podríamos ver que cada espaciado está correctamente alineado como en el diseño. Entonces ahora vamos a subir en la segunda columna. Bajo la grilla del taller, estoy creando un desarrollador. Y ahora estoy dando el nombre de clase para este dibloque como taller de imagen rap, ya que hemos creado el espaciado para esta imagen. Entonces necesitamos crear una imagen y el elemento imagen es mayor. Ahora estoy dando clic en el Elegir imagen y estoy seleccionando la imagen del activo. Tenemos que darle el color de fondo para esta imagen. Entonces estoy seleccionando la imagen del taller, un rap, e yendo al fondo. Y estoy seleccionando la imagen y el degradado dentro de ella. Estoy seleccionando la cubierta para el tamaño y la estoy posicionando al centro. Entonces ahora vamos a elegir la imagen del activo. En el diseño, tenemos las esquinas redondeadas. Entonces voy a los bordes y dando el valor del radio como un 20 pixel. Tenemos que alinearlo. Entonces bajo la tipografía, estoy haciendo clic en alinear al centro. Para que pudieras ver que está alineado al centro. Ahora estoy seleccionando la rejilla del taller, como hemos visto en el diseño. La segunda columna es mayor que la primera columna, y además no hay suficiente brecha entre estas dos columnas. Entonces estoy seleccionando esta grilla y voy a la cuadrícula Editar. Entonces al seleccionar la primera columna, estoy dando el tamaño como 0.7. Y también déjame dar el valor de gap entre estas dos columnas como 60 pixeles. El contenido del taller, es decir, el contenido de la primera columna está de manera en la parte superior. Entonces necesitamos omega al mismo perro. Entonces, al seleccionar la alineación central debajo de la capa, podrías ver que el contenido llega al centro. Vamos a publicarlo para ver cómo funciona. Así pudimos ver que todo está perfectamente desarrollado. En la siguiente lección, estaremos desarrollando esta sección, diríamos que es sobre el autor. 17. Sección sobre mí: la primera parte: En esta lección, vamos a ver una sección de barco Acerca de mí. Esta sección sobre el autor que se puede ver el autor de otros y los vínculos sociales de ellos por ahí y algunos de los detalles sobre el otro. Y también se pueden ver las obras del autor. Entonces este es el propósito que vamos a hacer esto sobre mi sección. Entonces viniendo a la planeación del modelo de caja, estaremos creando una sección para ello. Y en su interior eso va a ser un dibloque. Y mediante el uso de la grilla, tendremos tres columnas. La primera columna tendrá el octeto están ahí y los enlaces de redes sociales. En la segunda columna, tendremos una breve descripción sobre el autor y también habrá un enlace para ver las obras del autor. Y en la tercera columna, tendremos algún video. Entonces esta es la planeación que vamos a implementar. Empecemos a desarrollarlo. Antes de entrar en la lección. Veamos sobre el modelo de caja común, que se aplicará para todas las secciones dentro del cuerpo. Necesitamos agregar una sección y debemos proporcionar el nombre de clase apropiado para esta sección. A continuación se muestra el espaciado para esta sección. Es decir, necesitamos darle el valor de relleno superior e inferior para ello. Después de crear una sección dentro de ella, necesitamos agregar un contenedor. Se debe dar el nombre de clase para este contenedor. Ahora podemos agregar el elemento dentro del contenedor el cual es apropiado para que se elija la sección necesaria con un cuerpo. Ahora voy a crear una sección después de calificar esta sección, el nombre de la clase para ello será C, mi sección de trabajo. El valor de relleno para esta sección será cien píxeles en la parte superior y 100 píxeles en la parte inferior. Hemos creado una sección. Después menores de ocho, estaremos creando contenedor. Ahora el nombre de clase para este contenedor será el contenedor de clase existente. Debajo del contenedor, estaré creando un dibloque para que el dibloque contenga todo el contenido que vamos a desarrollar. Vamos a darle un nombre de clase para este dibloque como ver mi envoltura de trabajo. Hemos creado el espacio para contener este contenido. Ahora, vamos a crear una grilla. En el diseño ya hemos visto que son tres columnas. Entonces estoy borrando una fila y agregando una nueva columna. Necesitamos renombrar el nombre de la clase para esta cuadrícula. Estoy renombrando el nombre de la clase como mi cuadrícula de trabajo. Entonces ahora vamos a crear el contenido de la peor columna para eso bajo la grilla Mi Mundo, estoy creando el blog. Deje que la fecha de clase para este dibloque sea autor intro rep. Por lo que el contenido de introducción de la ATO se envolverá dentro del representante de intro del autor. Hemos creado el espacio para todo el orden en curso. Como podemos ver, hay un espacio para sostener la imagen del autor. Entonces necesitamos crear un desarrollo separado para sostener esa imagen. Así que bajo el autor intro monótonas y creando un div. Y le estoy dando el nombre de la clase como autor de otra envoltura dentro de ella, se colocará la imagen. Tenemos que colocar la imagen. Entonces estoy seleccionando al autor de otro envuelto dentro de él, estoy buscando una imagen. Ahora con la ayuda de elegir Imagen, estoy eligiendo una imagen del activo, por lo que la imagen se ha colocado con éxito. Ahora tenemos que dar el tamaño correcto para el envoltorio exterior del autor que contiene la imagen. Entonces estoy seleccionando al autor de otro wrap, y le estoy dando el ancho como 253 pixeles y el alto como 253 pixel. Por lo que será en tamaño Esquire. Tenemos que darle el color de fondo como en nuestro diseño. Entonces voy al fondo, estoy dando el valor hexadecimal como el número figma diseño el fondo de la imagen que es el autor son el rap debe estar en un círculo. Entonces bajo la frontera, estoy dando el valor como 100 por ciento en el radio. Para que se haya creado el círculo. Con el fin de hacer la alineación adecuada para la imagen. Estoy seleccionando flex de la pantalla. Lo estoy alineando al centro y lo estoy justificando al centro. Pero en el Canvas podríamos notar que la imagen se superpone. Eso tan bueno. Así que tenemos que ajustar eso. Pero para establecer eso, estoy pasando al tamaño bajo el desbordamiento. Estoy seleccionando a Hayden. Ahora, se puede ver en el Lienzo que la superposición está oculta, que la imagen es ligeramente un pájaro. Para bajarlo debajo de esa capa, estoy seleccionando el, alineándolo a la parte inferior. Hemos completado la otra imagen. Y a continuación a continuación se encuentra una liga de redes sociales. Para crear eso, estoy seleccionando el envoltorio de introducción del autor debajo de él, estoy creando un bloque div. Por lo que este desarrollado creará el espacio para contener todos los enlaces de redes sociales. Demos el nombre de la clase como autor, representante social. Necesitamos crear los enlaces. Entonces con la ayuda de QuickFind, estoy buscando el enlace. Después de crear el bloque de enlace, necesitamos agregar qué tipo de imagen de redes sociales se incluirá dentro del bloque de enlaces. Entonces con la ayuda de quick fine. Estoy buscando una imagen. Ahora bajo el activo, estoy usando el logo de Facebook. Necesitamos crear el espaciado todo este logo de Facebook. Bajo el espaciado, estoy dando el valor de relleno a diez píxeles o menos. Siento que el espaciado a la izquierda y a la derecha no es suficiente. Entonces estoy dando el valor como 15 pixeles. Ahora, renombremos el nombre de la clase para este enlace como enlace social de autor. El mismo diseño es aplicable a los otros dos enlaces de redes sociales. Entonces estoy duplicando este enlace social de autor dos veces. Ahora estoy reemplazando la imagen ***** y la tercera imagen con Instagram. A fin de que el contenido de la primera columna esté en el centro. Estoy justificando que este contenido se centre. Incluso si hacemos del todo el contenido para que quede alineado en el centro. Pero los enlaces de redes sociales no se alinean centrados. Entonces estoy seleccionando Auto social rap, que contiene todos los enlaces de redes sociales. Ahora bajo la topografía, debajo de la elaine, estoy seleccionando centro S. Ahora se podría ver en el Lienzo todos los enlaces de redes sociales está alineado al centro. El espaciamiento entre la imagen del autor y el enlace de las redes sociales no es suficiente. Entonces, al seleccionar al autor aliento social, le estoy dando el valor de relleno, es decir, el valor de relleno superior como 20 píxeles. Hemos terminado el contenido de la primera columna. Vamos a saltar a la segunda columna. Para hacerlo bajo la cuadrícula de Mi Mundo, estoy creando un nuevo blob. Vamos a darle un nombre de clase para este dibloque como autor bio wrap. Eso es lo mismo para el contenido en el autor bio rep es el mismo que en la sección anterior. Me mudo a la sección de taller y estoy seleccionando la sección titulada rep. Ahora estoy duplicando esa sección titulada wrap y la estoy arrastrando al autor bio wrap. Aquí se duplica el mismo contenido. Ahora necesitamos dar el contenido de acuerdo a nuestro diseño. Aparte de estos condensan, necesitamos agregar un enlace con una selección de sección titulada rep. Estoy creando un enlace. Estoy renombrando ese vínculo como semi trabajo. Así que deshaciendo clic en ese enlace, podemos ver las obras del autor. Hemos creado este enlace como nuevo, por lo que necesitamos cambiar la tipografía para ello. Ahora cambiemos el nombre de este enlace como enlace de trabajo. Ahora necesitamos crear un dibloque que contendrá este enlace. Dentro del autor bio wrap. Estoy creando un nuevo bloque. Arrastremos el dibloque, enlace El trabajo. Ahora, coloca ese enlace de trabajo dentro de ese bloque. Ahora tenemos que darle un nombre de clase para este perro div. Vamos a dar el nombre como envoltura enlazada a pie. Entonces Wanli al colocar algunos de los elementos dentro del dibloque, podríamos crear el espaciado. Es decir, el espaciado innecesario que necesitábamos. Entonces ahora, para hacer que el espaciado entre el párrafo y el enlace con wool cling wrap sea un selector, le estoy dando el valor de relleno para ello a la parte superior como 20 píxeles. Entonces hemos terminado el contenido de las dos columnas. Vamos a verlo en modo de vista previa. Por lo que estoy haciendo clic publicado. Pero mientras se cierne sobre el enlace, no hace nada de la transición. Entonces tenemos que hacer la transición a ese vínculo. Vamos a retroceder. Ahora estamos seleccionando el mundo jugando. Tenga en cuenta que no estamos seleccionando la envoltura transparente mundial, solo seleccionando el enlace. Ahora en el no estado, por defecto, el estado estará en él. Ahora me estoy moviendo a la transición bajo el tipo que estoy seleccionando s, forma color. Cambiemos el estado a la OMS. Como hemos seleccionado la transición es un color de fuente. Entonces otro tipo de biografía, le estoy dando el color de la fuente al color primario de la muestra. Ahora, tomemos si funciona. Ahora en la vista previa, pudimos ver que el enlace está funcionando a la perfección. Hemos completado el contenido de las dos columnas. En la siguiente lección, seremos ver depilar el contenido de la tercera columna. Sigamos adelante. 18. Sección sobre mí: la parte 2: Hasta ahora hemos completado los contenidos de la primera columna y la segunda columna de la cuadrícula. Ahora en esta lección estaremos viendo sobre la tercera columna, que es el contenido del video. Y también veremos sobre cómo darle estilo a la tercera columna. Y además no le hemos dado un color de fondo a toda la sección, y además no la hemos estilizado. Entonces esto es todo lo que vamos a ver en esta lección. Vamos a sumergirnos en él antes de concentrarnos en la tercera columna, vamos a crear el bloque div debajo de la cuadrícula Mi trabajo. Ahora para el nombre de la clase a este log div, me estoy dando trabajo video rap. Necesitamos crear el enlace para el video. Bajo el video rap de Trabajo. Estoy creando un blog de enlaces. Donde hace link block nos redirigirá al video. Empecemos con el enlace ficticio. Ahora, dentro del bloque de enlace, necesitamos agregar una imagen. Entonces elegiremos Imagen. Estoy seleccionando una imagen del activo. Tenemos que dar el tamaño apropiado para esta imagen. Entonces estoy seleccionando este enlace blog. Entonces otro tamaño, estoy dando el ancho como 75 pixeles y el alto como 75 pixeles. Ahora hagámoslo como flex desde la pantalla. Alinea esta imagen al centro y justifícala al cento. En el diseño, hemos visto una imagen de fondo para este bloque de enlaces. Entonces me estoy moviendo al fondo y estoy eligiendo un escritorio lo que como debería ser en un círculo. Entonces bajo el más amplio, estoy dando el valor del radio como 100% cada uno. No he renombrado el nombre de la clase para este bloque de enlaces. Entonces estoy cambiando el nombre de este bloque de enlaces como bloque de enlace de video. Ahora necesitamos darle una imagen de fondo. Entonces estoy seleccionando el video de trabajo, rap. Con eso un selector, me estoy moviendo al fondo, otra imagen y degradado. Estoy eligiendo la portada de talla S haciendo clic en Elegir imagen, estoy seleccionando una imagen del activo. Y coloquemos esta imagen al centro. Necesitamos crear un diálogo para poner este bloque de enlaces de video dentro de él. Ahora necesitamos dar el nombre de clase para este desarrollo. Entonces estoy dando el nombre de la clase S video. Voy a envolver este propósito desarrollado es sólo para alinear este enlace de video. Ahora con la selección de video alineado, agarra. Otra capa. Estoy seleccionando el flex de la pantalla y alinearlo al centro y justificándolo al centro. Para que el video vinculado llegue al centro, estoy dando el valor de relleno para este video alineado grab. Demos el valor de relleno como 120 píxeles en la parte superior y 120 píxeles en la parte inferior. Ahora necesitamos hacer la imagen a esquina redondeada. Entonces estoy seleccionando la envoltura de video debajo del borde. Estoy dando el valor a 40 píxeles para el radio. No hemos usado el color de fondo para todo este contenido. Entonces estoy seleccionando este agarre de trabajo EMA. Entonces al seleccionar eso, me estoy moviendo al fondo bajo el color, estoy dando el valor hexadecimal. Ahora estoy dando el valor de relleno en la parte superior a 140 píxeles en la parte inferior, a 140 píxeles a la izquierda y derecha, le estoy dando el valor como espaciado de cien píxeles y la izquierda y la derecha parece una un poco grande. Entonces estoy cambiando el valor a 80 píxeles. Nuevamente, el fondo tiene la esquina redondeada. Entonces con la selección de ver mi trabajo wrap, me estoy moviendo a los bordes y dando el radio como 40 pixel. Entonces el contenido de la primera columna parece estar tan cerca de la segunda columna. Entonces estoy seleccionando la primera columna, esa es la autora en grow wrap. Y voy a justificar y elegir a la izquierda. Todo el contenido de las tres columnas tiene un mismo espaciado, pero en el diseño, no le gusta eso. Así que vamos a rediseñar estos contenidos. Ahora, estoy eligiendo toda la grilla, esa es mi grilla mundial debajo de ella. Estoy eligiendo editar cuadrícula. Debajo de la cuadrícula Editar. Cambiemos el tamaño de la primera columna. Ahora estoy redimensionando la segunda columna dos. Ahora hemos realizado el ajuste como en nuestro diseño figma. Publiquemos esto para verlo en modo de vista previa. En el modo de vista previa, pudimos ver todos los enlaces de redes sociales. No hace ninguna de las transiciones. Y además el enlace de video no hace ninguna transición. Entonces tenemos que dar la transición a todo esto. Volvamos con una selección de bloque de enlace de video. También en el no estado, me estoy moviendo a la transición y estoy seleccionando el tipo a color de fondo. Ahora, cambiemos el estado a cómo estamos dando la transición al color de fondo. Entonces bajo el fondo y en el color, estoy eligiendo como color secundario de la muestra. Vamos a verlo en el modo de vista previa. Para ver cómo funciona la transición. El mismo proceso se aplicará para los enlaces de redes sociales. Siga los mismos pasos para los enlaces de redes sociales a, para el efecto de transición. En la siguiente lección, veremos sobre la sección de pestaña de licencias con dos toques. Y también veremos cómo hacer que las pestañas sean factibles. Veamos en la siguiente lección. 19. Sección de pestañas con licencias: parte 1: En esta lección, vamos a desarrollar la sección de licencias para nuestro sitio web. Antes de eso, veamos sobre la planeación. Como hemos visto en las lecciones anteriores. Usaremos una sección y dentro de ella habrá un contenedor. Nuevamente, dentro del contenedor, estaremos usando un bloque do para contener todo el contenido. Y dentro de ese div, usaremos el modelo griego, que consiste en las dos columnas, mientras que la primera columna será más pequeña que la segunda columna. En la primera columna estaremos colocando una imagen. Y en la segunda columna, tendremos el contenido de las licencias. Y en la parte superior tendremos la pestaña que está con dos pestañas. Uno es para licenciamiento de arte y otro es para Comisión. Y debajo de las pestañas, tendremos el contenido de licencias con un título. Y algo del párrafo. Y debajo del párrafo, tendremos las dos partes. Ese es uno para la pose Alfa y h. y el segundo es el contenido sobre ese alfa. Entonces esta es la planeación que vamos a desarrollar. Pasemos a desarrollarlo. Antes de entrar en la lección. Veamos sobre el modelo de caja común, que se aplicará para todas las secciones dentro del cuerpo. Necesitamos agregar una sección y debemos proporcionar el nombre de clase apropiado para esta sección. A continuación se muestra el espaciado para esta sección. Es decir, necesitamos darle el valor de relleno superior e inferior para ello. Después de la sección de calificación dentro de ella, necesitamos agregar un contenedor y se debe dar el nombre de la clase para este contenedor. Ahora podemos agregar el elemento dentro del contenedor, que es apropiado para la sección necesaria. Ahora, con la selección de cuerpo, vamos a crear una sección. Estoy dando el nombre de clase para esta sección como sección de pestaña de licencias. Dentro de la sección, vamos a crear cóndilo ahora. Como hicimos en las lecciones anteriores, nuevamente voy a darle el contenedor de clase existente a este. No hemos dado un valor de relleno para esta sección. Entonces estoy seleccionando la sección de pestaña de licencias y dando el relleno superior y el valor de relleno inferior como 100 píxeles. Ahora bajo el contenedor, vamos a crear un dibloque. Demos el nombre de clase para este dibloque como representante de pestaña de licencias, pero todo el contenido de su licencia se envolverá dentro de esta pestaña de licencias. Vamos a crear una grilla bajo el tap rap licenciado, como hemos visto en el diseño, como ya sabemos, que solo tiene las dos columnas y una fila. Entonces estoy borrando una fila. Y también la primera columna es más pequeña que la segunda columna. Entonces ahora estoy ajustando el tamaño de la primera columna. Como necesitamos renombrar el nombre de la clase para esta cuadrícula ya que no debería afectar a la otra cuadrícula, lo que hemos hecho en las lecciones anteriores. Así que cambiemos el nombre de esta grilla S de licencias grid. Hemos creado la cuadrícula, pero dentro de cada columna, necesitamos agregar el dibloque para contener el contenido de la misma. Así que vamos a crear un div, mira debajo la grilla de licencias donde colocaremos el bloque D digamos la primera columna. Vamos a darle un nombre de clase para este bloque de def como ajuste de imagen de licencia. Ahora dentro de esta envoltura, buscando una imagen usando una multa rápida. Y escojamos la imagen del activo. Volvamos a crear un div para poner la imagen dentro de ese desarrollo. Ahora estoy arrastrando el dibloque sobre la imagen y colocando la imagen dentro de ese bloque. Demos el nombre como imagen de licencia, ya que la imagen tiene una esquina redondeada. Entonces al seleccionar la imagen, voy al borde y dado el valor del radio como 40 píxeles. Ahora renombro el nombre de la clase para esta imagen como una imagen de licencia. Pero la clase ya existe. Ahora voy a cambiar el nombre para esta imagen. Entonces vamos a darle como una imagen fronteriza de licencia. Hemos terminado la primera columna, ahora necesitamos concentrarnos en la segunda columna. Entonces estoy eligiendo la grilla de licencias dentro de ella. Necesitamos crear un duplicado. Demos el nombre de la clase como representante de contenido con licencia. Lo hemos visto en el diseño. En la parte superior, tiene dos pestañas. Entonces vamos a agregar una pestaña usando la multa rápida, estoy buscando pestaña. Ahora la pestaña se ha creado con tres pestañas, pero en el diseño solo tenemos las dos pestañas. Así que tenemos que eliminar agregar pestaña. Ahora vaya al navegador, simplemente haga clic en las pestañas. Tendremos dos cosas. Ese es el menú de pestañas y toca el contenido. El menú de pestañas es para cuáles son los menús que vamos a ofrecer. Ese contenido es para al hacer clic en el primer paso, el contenido relacionado se mostrará debajo del mismo. Hacemos clic en la segunda pestaña. El contenido relacionado se mostrará debajo de él. Si ampliamos el menú de pestañas, tendremos dos enlaces que estableciendo uno y haciendo incursiones. Nuevamente, expandiendo ese incursionamiento, tendremos el bloque de texto. Eso es para renombrar esa pestaña. Ahora voy a darle estilo a la pestaña vinculada. Entonces estoy seleccionando el dabbling y voy al tipo de Roffey. Estoy seleccionando la fuente como Poppins, el peso como 500, tamaño mediano con 18 pixeles y el alto ancho, 1.3 guión. Cambiemos el color de la fuente. Cambiemos el nombre de la clase por este dabbling, S, dabbling. Ahora necesitamos cambiar el color de fondo para esta pestaña. Entonces voy por debajo del fondo, estoy eligiendo el color al blanco. Ajustemos el valor de relleno superior e inferior para este viaje a 20 píxeles. En el valor de relleno izquierdo y derecho, verdaderos 40 píxeles. Hagamos la esquina redondeada para esta pestaña. Entonces voy a otra frontera y dando el radio valor S, 20 pixeles. Y vamos a darle el estilo para este borde como sólido y luego darle el color del borde en valor hexadecimal, hemos terminado la pestaña. Hacer, Pasemos al tap uno. El nombre de clase para el paso uno será la duplicación, esa es la clase existente. Entonces el estilo que hemos hecho en el nombre de clase dabbling se aplicará a esta pestaña uno también en el selector, podrías poder ver que es una nueva clase actual. La razón detrás de esa clase actual es que estamos usando la pestaña. Por lo que una de las pestañas estará activa. Entonces, a estas alturas, la taberna está activa. Entonces, por defecto, estamos teniendo esa clase actual en un green. Entonces podríamos entender que estamos trabajando en esta pestaña activa. En resumen, si ves esa clase actual, entonces podrías entender que pestaña en particular es la pestaña activa. Entonces necesitamos establecer cómo deben verse los datos cuando están activos. Con dabbling y clases actuales seleccionadas. Estoy pasando a la topografía y estoy seleccionando el color de fuente. Estoy eligiendo el color de la fuente al blanco. Ahora cambiemos el color de fondo para este paso. Entonces voy al fondo y le estoy dando el color a la bobina secundaria de la muestra para que podamos ver cuando está activa que ese color va a ser así. Necesitamos el espaciado entre estas dos etiquetas. Entonces con la selección de tap do, estoy dando el valor del margen derecho a 20 píxeles. El valor que hemos dado se almacenará en la clase dabbling, la tabulación uno, también usando esta clase dabbling. Por lo que el valor se aplicará a esa tabulación uno también. Entonces es crear un espacio. El valor de margen se aplicará a esa pestaña. Y también por eso se está creando un espacio entre el Taiwán y el tap. Cambiemos el nombre de este menú de pestañas. Para la ficha uno, nos estoy dando licencia de arte para el tatuaje. Nos estoy dando comisión por calificar la pestaña que el contenido de la pestaña se creará automáticamente debajo la sección de pestaña en el contenido de la pestaña, tendremos ese toque y para las pestañas correspondientes. Entonces déjame mostrarte. Ahora estoy dando clic en la pestaña y la pestaña uno en el lado derecho, voy a decir cosas aquí dentro. Se puede ver que es un botón de radio, es decir pestaña activa. Si hago clic en esa pestaña uno, la pestaña uno se activará con la pestaña correspondiente, y ese es el contenido de la pestaña. Si hago clic en la pestaña como pestaña activa, entonces se habilitarán los dos primeros y se habilitará el botón de tabulación correspondiente. Es así como vamos a desarrollar el contenido de esta pestaña. En la siguiente lección, estaremos viendo sobre el contenido de las licencias, de hecho la deuda. Sigamos adelante. 20. Sección de pestañas con licencias: parte 2: En la sección de licencias, hemos completado la primera columna y también la sección de tabulación, junto con la transición. Ahora vamos a ver sobre el, el contenido para esta ficha en particular. Es decir, si hago clic en este grifo de licencia de arte, ese contenido de ese se mostrará debajo de él. Si hago clic en el toque de comisión, el contenido particular se mostrará debajo de él. Entonces veamos cómo vamos a hacer eso. Vamos a seguir adelante. Vamos a desarrollar el contenido de esta pestaña en el navegador que podrías ver debajo del contenido de la pestaña, tenemos que tocar pan. Eso es para el tabulador uno. Tab a la pestaña en el contenido de la pestaña está tan cerca uno del otro, así que necesitamos crear un espaciado entre ellos. Entonces estoy seleccionando el contenido de la pestaña. Voy por debajo del espaciado y estoy dando el valor del margen superior como 20 píxeles. Ahora, la selección de tap pan, es decir para Tab uno, voy a hacerla como esquina redondeada. Voy a las fronteras. Estoy configurando el valor del radio en 40 píxeles. Tú el espaciado para este sordo, me estoy moviendo al espaciado y luego dando el valor superior e inferior. Eso es para relleno S, 90 píxeles y para la izquierda y derecha como 70 píxeles. Cambiemos el color del borde por ello. Entonces voy a otra frontera y dando el color en un valor hexadecimal. Entonces ahora comencemos a crear el contenido dentro de él. Debajo de la banda de tap. Para el de arriba, estoy buscando el rubro. En su interior. Se creará el encabezado y cambiemos el tipo de encabezamiento 2, H2 y un renombrado de ese contenido de encabezado, enumerando la tipografía para ello. Entonces bajo la tipografía, estoy configurando el tipo de fuente como títeres. Espera, S 800, extra negrita y tamaño como 50 pixeles. Y con la altura como guión 1.3. Tenemos que cambiar el color de la fuente. Hazlo bajo el color, estoy seleccionando color secundario. Ahora estoy seleccionando la opción más tipo bajo el capitalizar. Estoy seleccionando la segunda opción. Ahora cambiemos el nombre del nombre de la clase de encabezado como ese título de contenido. Ahora necesitamos agregar una descripción al respecto. Entonces, debajo de la sartén del grifo, estoy buscando el párrafo. Se creará el párrafo. Ahora debajo del párrafo, necesitamos agregar ofertas en R para crear un bloque que está debajo del párrafo, estoy seleccionando la banda superior. Entonces ahora estoy buscando diblock. Por lo que se creará el bloque do. Entonces cambiemos el nombre de la clase para este dibloque como va Alpha y h bar AB. Por lo que el porcentaje de oferta y el contenido relacionado con ella se almacenarán dentro de esta rata. Ahora en vez de eso ofrecen porcentaje de RAB, vamos a estar teniendo que hacer bloques. Eso es por el porcentaje para el contenido que se relaciona con eso. Entonces, al principio, vamos a crear el primer perro div. Será bajo la oferta por ciento H Rap. Demos el nombre de la clase para este dibloque como envoltura de oferta. Ahora dentro de esto, podemos dar el valor porcentual para poder establecer eso. Busquemos el encabezado debajo de este envoltorio de oferta. Ahora el rumbo es mayor. Cambiemos el tipo de rumbo como H3. Ahora estoy cambiando el contenido de este encabezado al 80 por ciento h. Cambiemos la tipografía por ello. Entonces voy por debajo de la topografía y configurando la fuente como Poppins y peso igual que nuestro cien perno y tamaños 50 pixel e híbrido 1.3 guión. Ahora, cambiemos el color de la fuente a color primario. En la sección de color, necesitamos cambiar el nombre de la clase para este encabezado. Entonces estoy dando el Renombrar y lo estoy cambiando como planteando el valor h. No necesitamos ninguno de los valores de margen para este valor porcentual. Entonces estoy poniendo el valor del margen a cero. Tenemos que hacer ese valor porcentual para estar dentro de la caja. Como ya sabemos ese valor de personaje está dentro que van a atracar. Ese es el envoltorio de oferta para que podamos establecer el tamaño para poder obtener esa caja. Para eso, estoy seleccionando esa oferta wrap y dando este valor de tamaño como 170 pixeles para el ancho y 150 pixeles para el alto. Ahora estoy seleccionando el flujo en la pantalla y luego lo estoy alineando al centro y justificándolo al centro para que podamos ver que el valor porcentual viene al centro. Ahora, se debe cambiar el color de fondo. Para eso, voy al fondo y estoy configurando el color en valor hexadecimal como en nuestro diseño, para hacerlo como esquina redondeada, voy a otro borde y dando el valor para el radio como 30 píxeles. Hemos terminado el representante de oferta. Ahora dentro de esa oferta de envoltura porcentual, necesitamos agregar el contenido relacionado con eso dentro de ella. Vamos a crear un blog div para que se cree el bloque. Vamos a darle un nombre de clase para eso como capturador de contenido de oferta. Hemos hecho el envoltorio dentro de él. Necesitamos crear el contenido para eso con una selección de contenido de oferta envuelto dentro de él, estoy seleccionando encabezado. Demos el tipo de encabezado a la cobertura tres, y cambiemos el contenido del título, ese es el contenido del encabezado. Ahora para la topografía de este título, estoy eligiendo la fuente como Poppins y el peso como medio 500. Demos el tamaño como 25 píxeles y con la altura como guión 1.2. Ahora necesitamos cambiar el color de la fuente a otro color. Estoy eligiendo color secundario. No hemos cambiado el nombre de la clase para este rubro. Entonces estoy eligiendo el encabezado y estoy renombrando el nombre de la clase para el título como subtítulo de oferta. Hemos agregado el subtítulo y debajo ocho necesitamos agregar una descripción para eso. Así que estoy seleccionando ofrecer envoltura de contenido, que contiene todos los contenidos. En su interior. Tenemos que crear un párrafo. Ahora hemos creado el párrafo para el contenido. El contenido no está alineado como en nuestro diseño, por lo que necesitamos hacer la alineación correcta. Para eso. Estoy seleccionando las cuatro poses y cada respiración al seleccionar esta envoltura porcentual de oferta. Bajo el layout, estoy seleccionando flex y lo estoy alineando con el remitente. Ambos porcentajes de oferta en el contenido de la oferta están cerca uno del otro. Tenemos que hacer el espaciamiento entre estos dos. Voy a crear el espaciado en la preparación de contenido de la oferta. Para el relleno izquierdo, estoy dando el valor S, 40 pixel. Entonces ahora hemos hecho que el espaciado para esa fase del título del contenido de la pestaña no sea bueno. Entonces estoy seleccionando el título del contenido de la pestaña debajo del espaciado, estoy dando el valor de margen para la parte superior e inferior a cero. Como el espaciamiento entre el párrafo y porcentaje de oferta rap no es para nada suficiente. Entonces estoy seleccionando oferta porcentaje RAB y dando el valor de relleno superior a 20 píxeles. Entonces ahora obtenemos el espaciado para que eso haga que el subtítulo de la oferta esté en la cima. Estoy dando el valor del margen superior a cero. Ahora estoy haciendo que el valor del margen inferior sea cero. Siento que el subtítulo y la descripción están tan cerca el uno del otro. Entonces le estoy dando el valor del margen inferior a cinco píxeles. Para conseguir un pequeño espaciado los estamos haciendo. Vamos a publicarlo para verlo en una modalidad peruana. Entonces en el modo de vista previa, todo para la sección de licencias está bien. Hemos construido el contenido para el primer paso, es decir, la licencia de arte. Ahora tenemos que pasar a la segunda pestaña. Tenemos el mismo diseño para la segunda pestaña. Hazlo bajo el contenido de la pestaña, estoy seleccionando la banda de tabulación para la parte superior dentro de ella. Pudimos ver cuáles son las cosas que hemos desarrollado. Al principio, estoy duplicando el título del contenido de la pestaña. Y lo estoy arrastrando a la cacerola del grifo, eso es para tabulador. Y luego dupliquemos el párrafo. Y vamos a arrastrar eso al grifo fue por la pestaña para anexar esta oferta porcentaje frotación. Y nuevamente, duplicando eso y arrastrándolo al grifo. Y para la pestaña a cada contenido de la pestaña, uno se duplica a la pestaña para ahora voy a ir a decir cosas bajo la configuración de tap. Estoy seleccionando tabulación para, es decir, la pestaña activa. El contenido del primer paso es una ventaja duplicada en el segundo paso, pero no el estilo. Para aplicar el estilo de un contenido al grifo al contenido, necesitamos dar el mismo nombre de clase. Pero en el Navigator pudimos ver que tiene a diversos temas. Así que estoy seleccionando el tap pan para el top y estoy cambiando el nombre de ese nombre de clase para volver a tocar. Ahora estoy seleccionando el tap pan para la tab2 y estoy dando el nombre de la clase como la clase existente, es decir tap pan. Así que al dar la clase existente, se puede ver todo el estilo se aplica a la pestaña al contenido. Ahora estoy cambiando el título de este contenido y luego estoy cambiando el valor porcentual del mismo. Ahora, vamos a publicarlo para verlo en modo de vista previa. Ahora, veamos si la pestaña está funcionando correctamente o no. Entonces estoy haciendo clic en el E-step, el contenido relacionado con la pestaña está cambiando respectivamente. Primero, ¿necesitamos cambiar parte del espaciado para esta sección de licencias? Ahora estoy seleccionando el título del contenido de la pestaña y dando el valor del margen inferior a diez píxeles para dar el hueco entre la primera columna y la segunda columna. Voy a pasar a la cuadrícula de licencias para seleccionar toda la cuadrícula. Ahora bajo la cuadrícula ADA, estoy ajustando la brecha a 35 píxeles. Ahora con la selección de la propia grilla de licencias, alineémosla con el centro. Vamos a publicarlo para ver cómo funciona. En el modo de vista previa, pudimos ver todo lo de la sección de licencias es Dan Asper en nuestro diseño. En la siguiente lección, veremos sobre la sección testimonial, que consta de dos columnas. La primera columna es para los títulos, y la segunda columna es para mostrar el, todos los comentarios dados por los visitantes. Veamos cómo marcar en la siguiente lección. 21. Sección de testimonios: parte 1: En esta lección, vamos a ver sobre la sección testimonial. Ahora, veamos sobre la planeación de esta sección testimonial. Al principio, estaremos calificando sección y dentro de ella habrá un contenedor. Y aquí nuevamente, estaremos usando un modelo de cuadrícula. Esta cuadrícula tendrá dos columnas. La primera columna tendrá un título para el comando. En la segunda columna tendremos el contenido del testimonio tanto como hayamos necesitado para todo. Eso es incluso para el subtítulo y un título, estaremos usando un dibloque separado llegando al contenido para la imagen y para el párrafo. Aquí también, estaremos usando un dibloque separado para que todo se pueda organizar muy bien. Ahora tenemos la idea de la planeación. Empecemos a desarrollarlo. Ahora debajo del cuerpo, voy a crear una sección. Y vamos a dar el nombre de clase para esta sección como sección testimonial. Bajo el espaciado, estoy dando el valor de relleno para la parte superior e inferior como 100 píxeles. Ya sabemos que vamos a agregar un contenedor. Otra sección, voy a dar el nombre de clase para este contenedor como contenedor de nombre de clase existente con una selección de contenedor, vamos a agregar una cuadrícula. Android. Como ya sabemos, solo necesitamos las dos columnas, así que estoy borrando una fila y vamos a ajustar el hueco entre estas dos columnas a 60 píxeles. Deja que el nombre de la clase para esta gran grilla testimonial grande. Hemos creado una grilla. Entonces, concentrémonos en la primera columna para comenzar a duplicar la primera columna. Ahora necesito agregar el bloque do. Ahora el nombre de la clase para este div será la envoltura del título testimonial. Lo hemos visto en el diseño. La primera columna tendrá el título, el estilo del contenido del título. Es lo mismo que en la sección anterior. Entonces me mudo a la sección de taller y estoy seleccionando la sección titulada wrap, y estoy duplicando esa parte. Ahora vamos a arrastrarlo al rap de título testimonial ya que será el título para nuestra sección testimonial. Como necesitamos cambiar el nombre de este título como en nuestro diseño con una selección de este título de sección, voy por debajo de la tipografía, estoy seleccionando la opción de más tipo bajo el capitalizar. Estoy seleccionando la segunda opción. Ahora, hagamos un salto de línea, como en nuestro diseño. Ahora hemos completado la primera columna de esta grilla. Pasemos a la segunda columna. Para eso, estoy seleccionando esa grilla testimonial debajo de ella. Estoy buscando un bloque do. Ahora estoy dando el nombre de clase para este dibloque como envoltura de contenido testimonial. El contenido de esta sección testimonial será como un comando. Y debajo de ella, esa será una imagen, un nombre del autor y el destino, y junto con la calificación. Así que ahora vamos a crear una comilla en la parte superior. Y debajo de él, habrá algún comando. Empecemos a hacerlo. Ahora bajo el envoltorio de contenido testimonial, estoy creando un blog. Vamos a darle un nombre de clase para este ítem testimonial diblock S. Ahora dentro de él estaremos agregando una imagen. Elija la imagen del activo. Tenemos que agregar el comando. Entonces bajo el ítem testimonial, estoy agregando un párrafo. Ahora bajo la tipografía. Estoy haciendo este alicatado, hazlo Alec. Ahora estoy dando el color de fuente para este contenido en valor hexadecimal como diseño innovador. Estoy haciendo el nombre de la clase para este párrafo como contenido testimonial. Ahora estoy ajustando la altura de este contenido a 1.6 guión para agregar una imagen externa y el nombre del autor. Estoy creando un div, que está debajo del ítem testimonial. Estoy dando el nombre de clase para este dibloque como cliente testimonial RAB. Hemos hecho el envoltorio que contiene la imagen, el nombre del autor y la calificación. Pero para que se agregue la imagen, necesitamos crear un Duplo para colocar la imagen. Vamos a crear un bloque do bajo el representante del cliente testimonial. Entonces dentro de este testimonio y cliente, estaremos agregando una imagen. Busquemos una imagen para que te agregue a alguna de las caídas técnicas. No se registra la siguiente parte. Así que al final de este contenido, pero tengo un re-grabado esta elección Imagen parte de nuevo en debido a la adición de este clip en el medio, podría ver el contenido tilings cambiar. Entonces, por favor ignórelo. Solo concéntrate solo en elegir la imagen. Entonces ahora estoy eligiendo la imagen del ácido. Para hacer que la imagen sea redondeada. Voy a los bordes y le estoy dando el valor del radio 200. El nombre de la clase para esta imagen como avatar del cliente. Entonces esta es la parte que nos hemos perdido. Volvamos a la normalidad para la continuación del desarrollo. Dentro de la glicina testimonial, necesitamos agregar el contenido del cliente. Tenemos la imagen del cliente y el detalle del cliente. Entonces, para el detalle del cliente, he creado un blog y llamado el bloque do como detalle del cliente envuelto dentro de él para dar el nombre de ese cliente que estoy usando encabezado. El encabezado es un renombrado al nombre del autor para cambiar la tipografía. Escogiendo la fuente como Poppins, el peso como varios cientos de tazón. Y el tamaño será de 20 píxeles y dejar que la altura sea 1.2 guión. Estoy eligiendo el color de fuente al color secundario de la muestra. Ahora estoy dando el nombre de clase para este rubro ya que Klein necesita dar la renuncia de este ciego, estoy agregando un rubro debajo de la rampa detallada del cliente. Deje que el rumbo escriba B H Phi. Ahora estoy dando la designación de renuncia. Para hacer el estilo para este rubro, voy a otra tipografía. Estoy cambiando la fuente a Poppins way a 600 semi negrita y el tamaño a 18 pixel con un guión de altura 1.2. Para darle el color de fuente para esto, estoy dando el valor hexadecimal de nuestro diseño de figma, el peso para este encabezado parece ser muy audaz. Entonces necesito cambiar el peso de la misma. Cambiemos el peso a medio. Ahora estoy renombrando el nombre de la clase para este rubro como trabajo de cliente. Hacer que el nombre del cliente esté más cerca de la imagen. Estoy seleccionando el nombre del cliente y estoy dando el valor del margen a cero en la parte superior y cero en la parte inferior. El nombre del cliente y la designación de renuncia para estar más cerca. Entonces estoy seleccionando este trabajo de cliente, el valor del margen inferior se ajusta a cero, y el valor del margen superior se ajusta a cinco píxeles. En la próxima lección, estaremos desarrollando el resto del diseño. Sigamos adelante. 22. Sección de testimonios: parte 2: Hemos concluido el desarrollo de la primera columna. Y también en la segunda columna, hemos hecho el a contenido básico, que no es necesario. En esta lección, veremos sobre la mayor cantidad de estilismo que hay que hacer en el contenido de la segunda columna. Empecemos a desarrollarlo. Tenemos una disminución en el nombre de cada cliente y la designación. Entonces necesitamos agregar la calificación del cliente. Entonces bajo la línea de testimonios, estoy agregando un bloque do. Ahora estoy dando el nombre de clase para el diblock como envoltura de calificación de Klein. Ahora estoy agregando una imagen del ácido. Ahora dentro de la apropiación de calificación de clientes, estoy agregando un encabezado. Deje que el rumbo tipo B setee seis. Estoy cambiando el contenido del encabezado al valor de calificación. Para cambiar la tipografía para este valor de calificación, voy por debajo de la tipográfica, eligiendo el tipo de fuente como Poppins, peso con mango phi medio y el tamaño con 18 píxeles, luego la altura será 1.2 valor de calificación que para estar cerca de su corazón imagen, estoy ajustando el valor de margen de la misma. Estoy cambiando el valor superior en el valor inferior a cero. Cambiemos el nombre de la clase para este encabezado como valor de calificación. Para hacer el valor de calificación al lado de la imagen del corazón, estoy eligiendo la toma de calificación del cliente. Estoy seleccionando el oxígeno como escamas para obtener el espaciado entre la imagen y el valor. Con la selección del valor de calificación, estoy dando el relleno como diez píxeles o la izquierda para hacer que los detalles del cliente estén en una sola fila. Estoy seleccionando plan testimonial. Entonces escojamos flex en la pantalla. Vamos a alinearlo al centro. Y bajo la justificación, estoy eligiendo el espacio de opción entre el ítem se distribuirá manera uniforme para hacer que la imagen del cliente y el nombre del cliente y el destino estén más cerca de cada otro, voy a crear un diblock y poner esta imagen de Kline y el detalle del cliente dentro de los bloques div para que pueda hacer el ajuste de acuerdo a nuestro diseño. Ahora estoy seleccionando cliente testimonial debajo de él, estoy creando un diblock. Ahora estoy arrastrando el dibloque en la parte superior. Ahora estoy colocando la imagen del cliente rap y detalle de Klein wrap dentro de este blog div. Ahora voy a dar el nombre de clase para este dibloque como detalle Klein. Con los detalles del cliente seleccionados. Estoy usando flex para la pantalla debajo del diseño y alineándolo a la misma dosis. Para obtener el espaciado entre la imagen y el detalle, necesitamos dar el valor de relleno para la izquierda del wrap de detalle del cliente. Entonces con la selección de Klein detail wrap para el valor de relleno izquierdo, nos estoy dando Duan De pixel. El espaciado completo de los elementos testimoniales no es suficiente. Entonces con la selección del ítem testimonial, estoy dando el valor de relleno como 70 pixel en todos los lados para dar el color de fondo para este ítem testimonial, voy al fondo dando el valor hexadecimal en el color como involucrando mi diseño. Para obtener la esquina redondeada, voy por debajo de los bordes y dando el valor del radio como 40 píxeles. El espaciado para el contenido testimonial en la parte superior e inferior. Voy por debajo del espaciado y ajustando el valor de relleno en los 30 píxeles superiores. Para el valor de relleno inferior como 30 píxeles. Pero necesitamos un mayor espaciado en la parte superior. Así que de nuevo, voy a cambiar el valor de relleno a 40 píxeles para que el contenido sea más grande, voy por debajo de la topografía y estoy cambiando el tamaño a 28 píxeles, la altura sea 1.4 guión. Tomemos si todo está funcionando bien o no. Para hacer eso, voy a publicarlo para que todo quede bien. Vamos a agregar más comentarios justo debajo de él. Por lo que tenemos que dar el espaciamiento adecuado entre el inicio con una selección de ítem testimonial. Estoy dando el valor del margen inferior a 60 píxeles. En la siguiente lección, estaremos viendo sobre los más comandos aparte del primero. Y además estaremos haciendo el estilismo para cada uno de los comandos, junto con el diseño del baño. Vamos a saltar dentro de él. 23. Sección de testimonios: parte 3: A partir de ahora, hemos terminado el título y el subtítulo de la sección testimonial en la primera columna y hemos desarrollado con el diseño de comandos en el segundo codón. Y además, estaremos desarrollando el diseño del comando, ya que en el primer comando está la pérdida. Esa será una imagen de fondo. A ver cómo se hace eso. Como ya sabemos, sigue el mismo diseño para los próximos artículos. Entonces estoy seleccionando el ítem testimonial y duplicarlo por dos veces. Ahora he seleccionado el segundo ítem testimonial junto con la clase de ítem testimonial existente, estoy agregando otra clase con el ítem name para diferenciar entre su primer y segundo, necesito cambiar el color de fondo de la misma. Entonces voy a otro fondo. Estoy cambiando el color. El color del contenido debe concordar con el color de fondo. He seleccionado el contenido testimonial junto con el nombre de clase de contenido testimonial existente, estoy creando otro nombre de clase, cliente a contenido. Ahora estoy cambiando el color de este contenido. Tiene como en nuestro diseño de figma, la imagen para el segundo ítem testimonial tiene que ser cambiada. Entonces estoy seleccionando esta imagen de cliente y estoy reemplazando la imagen. Y luego para cambiar la designación de este Kline, estoy seleccionando este trabajo de reclamo junto con esta clase existente. Vamos a crear una nueva clase con el nombre cliente para trabajar. Estoy cambiando el color como como el color del contenido. A continuación, he cambiado el nombre del cliente a ahora la designación de este cliente también cambio hacer diseño. Ahora, veamos sobre el ítem testimonial. Junto con el elemento testimonial de nombre de clase existente, estoy agregando una nueva clase. Tema tres. Cambiemos el color de fondo para este tercer testimonio. Tema dos. Como ya sabemos, el contenido de este testimonio debe cambiarse según la imagen de fondo. Entonces estoy seleccionando el contenido testimonial y estoy creando un nuevo nombre de clase junto con el existente como contenido Klein tres. Ahora bajo la topografía, color uniforme en el valor hexadecimal como suficiente de ella. Madison. Ahora estoy seleccionando el trabajo de ascenso junto con el ya existente. Estoy creando una otra clase con un nombre Klein tres trabajo. Ahora estoy dando el color como como el color del contenido. Ahora tengo que reemplazar la imagen, así que estoy seleccionando el cliente mh. Lo estoy reemplazando por el de diseño. Cambiemos el nombre de esta línea y también designación de este cliente hacer. Publiquemos esto para ver cómo se ve. Ahora al desplazarse por la ventana que desaparezca la sección de título, necesitamos hacer que la sección de título quede peinada en la ventana. Volvamos a desarrollar esa. Para seleccionar la sección de título. Voy bajo el representante del título testimonial, y estoy seleccionando la sección titulada rub, junto con la sección de nombre de clase existente titulada wrap. Estoy agregando una nueva clase con el nombre sticky title. Ahora voy por debajo de la contaminación en vez de estática, estoy eligiendo pegajosa. Entonces mientras se desplaza por el sitio web, este título, pero nos quedaremos pegados a la ventana. Y ahora estoy cambiando el valor a cero para los tres lados. Ahora me estoy moviendo a la capa y eligiendo el bloque inline de la pantalla. Por lo que la altura y el ancho se ajustarán de acuerdo al contenido en su interior. Entonces ahora un desplazamiento, podemos ver esta sección de comentarios es pegarse al Canvas. Vamos a publicarlo para comprobar si está funcionando o no. En el modo de vista previa, pudimos ver esto funcionando ya que pensamos que el espaciado superior para este título no es suficiente como parecía. Está muy cerca de la barra de búsqueda. Entonces necesitamos crear el espacio en la parte superior. Ahora estoy seleccionando la envoltura del título testimonial. Ahora bajo el espaciado, estoy dando el valor del margen superior, hacer 20 pixeles. Hagamos el poco espaciado para este contenido. Y estoy dando el valor de margen, es decir un valor de margen superior a 20 píxeles para hacer que la sección de título se pegue a la ventana con el espaciado adecuado. En la parte superior, estoy seleccionando la sección titulada wrap. Voy a entrar en la posición. Ahora para el valor de la posición superior, nos estoy dando 40 píxeles. Publiquemos esto para ver cómo se ve. Entonces mientras estoy desplazando esto, podríamos ver que esta pipa del título se pega a la ventana con el espaciado apropiado en la parte superior. Hemos hecho todo lo necesario para la sección testimonial. Agreguemos un fondo para ello y dando el tamaño a cubrir. Y hagamos la cohesión al centro. No necesitamos ningún azulejo, así que estoy seleccionando ninguno. Entonces ahora vamos a elegir la imagen de fondo para ello. Entonces hemos agregado la imagen de fondo, vamos a publicarla para verla en el modo de vista previa. En el modo anterior, pudimos ver la imagen de fondo y el comando de los clientes, y la nota adhesiva y exedra, es todo se ve bien. Por lo que hemos terminado la sección testimonial con éxito. En la siguiente lección, estaremos viendo sobre la sección de precios de este sitio web. A ver sobre eso. 24. Sección de precios - Parte 1: En esta lección, vamos a ver la sección de precios. Ahora en el diseño, pudimos ver que tenemos un título en la parte superior, es decir el subtítulo y un título. Y justo debajo del título, estaremos usando un modelo de cuadrícula, que consta de dos columnas ya que los diseños de embarcaciones son similares entre sí. Entonces déjame explicarte la propia primera columna. En esta sección de precios, tenemos la versión gratuita y la versión pro y los precios. En la primera columna, la esquina superior izquierda tenemos el título. Lo mismo aplica para la versión pro dos. Y justo debajo de este título, vamos a tener otro diblock con los títulos y la lista de ítems y un botón. Como pudimos ver que esta lista de ítem do blog se superpone a su dibloque padre. En esta lección y en las próximas lecciones, estaremos viendo cómo vamos a desarrollar este diseño. Empecemos a desarrollarlo. Antes de entrar en la lección. Veamos sobre el modelo de caja común, que se aplicará para todas las secciones dentro del cuerpo. Necesitamos agregar una sección y debemos proporcionar el nombre de clase apropiado para esta sección. A continuación se muestra el espaciado para esta sección. Es decir, necesitamos darle el valor de relleno superior e inferior para ello. Después de la sección de calificación dentro de ella, necesitamos agregar un contenedor y se debe dar el nombre de la clase para este contenedor. Ahora podemos agregar el elemento dentro del contenedor, que es apropiado para la sección necesaria. Ahora estoy calificando sección debajo del cuerpo y estoy dando el nombre de la clase como sección de precios. Y llegando al espaciado, estoy dando el valor de relleno en la parte superior e inferior como 100 píxeles. Y ahora la sección de selección de precios, vamos a agregar un contenedor. Vamos a darle el contenedor de clase existente. En el diseño hemos visto que es un título en la parte superior, como en la sección de galería, tenemos un título que es similar a nuestro diseño. Entonces en el navegador, estoy seleccionando la sección titulada rep. Ahora lo estoy duplicando y lo estoy arrastrando debajo de la sección de precios, que también está debajo del contenedor. Todo el estilo se heredará a la sección de precios. Una cosa de líder que tenemos que hacer es cambiar el título y el subtítulo. Ahora dentro del contenedor, vamos a crear un dibloque. Escribirlo sostiene la cuadrícula. Después de crear un dibloque. Vamos a darle el nombre de la clase para ello. Bajo el representante de precios, vamos a agregar una grilla. Solo necesitamos las dos columnas. Estoy borrando una fila. Cambiemos el nombre de la clase para esta cuadrícula como cuadrícula de precios. Al principio, vamos a desarrollar la primera columna. Entonces, bajo la grilla de precios, estamos creando un nuevo bloque. Deje que el nombre de la clase sea el artículo de precios. De una manera dentro del artículo de precios, estaremos agregando un título y una lista de artículos y los botones. Así que hemos creado el espaciado para ello con un nombre de artículo de precios. Entonces, bajo el ítem de precios, estamos creando un dibloque. Y dado el nombre de la clase como título de precios. Tenemos un gran espacio para sostener el título, el precio. Ahora necesitamos agregar un título bajo el representante de título de precios, y se crea otro bloque d. Entonces voy a dar el nombre de la clase como título de precios. Para dar el título bajo el título de precios, estamos agregando un encabezado. Demos el tipo de encabezado como H2. Ahora estoy cambiando este rubro como en nuestro diseño. Ahora tenemos que dar los precios. Entonces bajo el título de precios, estoy calificando y otro diblock, estoy dando el nombre de la clase como envoltura de precios. Ahora con la selección de envoltorio de precios debajo de él, vamos a crear un encabezado. Ahora he elegido el tipo de rumbo como lo hacen los setos. He dado el valor de precios que tiene en nuestro diseño, cambiemos esa epigrafía por este precio. Veamos el nombre de la clase del encabezado como precio. Otra marea. Hemos creado un párrafo, perdón por no mostrarlo. Ahora voy a renombrar esa clase de párrafo como duración del precio. Ahora estoy dando click en este encabezamiento. Ahora vamos a cambiar el nombre de la clase por esto. Que sea como precio fechado para hacer el título en la esquina izquierda y el precio en la esquina derecha. Vamos a venderlo precios representante de marea. Ahora, bajo el diseño, vamos a elegir flex de la pantalla. Ahora estoy eligiendo espacio entre en lo justificado, en el Lienzo. Podemos ver que está alineado correctamente. Ahora estoy llegando al precio Tidal para hacer el título del precio y el párrafo justo debajo de él para estar cerca el uno del otro. Voy por debajo del espaciado y estoy dando el valor para el margen inferior como cero. Entonces ahora hemos terminado el título de precios. Justo debajo de él, necesitamos agregar una lista con la selección de ítem ascendente. Vamos a crear un dibloque. Ahora estoy dando el nombre de la clase como envoltura de lista de precios, y dentro de ella, necesitamos agregar el título del listado. Entonces para eso, necesitamos crear otro dibloque. Eso será como un wrap con la selección de wrap de lista de precios, vamos a crear un diblock. Entonces ahora cambiemos el nombre de la clase como representante de título de listado. Para dar el contenido del título, necesitamos agregar el encabezado. Ahora estoy eligiendo el tipo de rumbo para cubrir tres. Ahora he dado un título para esta lista, y luego voy a saltar sobre la topografía. Tenemos que cambiar el nombre de la clase para este encabezado. Deje que el nombre de la clase que enumeremos título. Dentro del título del listado, tenemos el contenido. Y también uno de los emoji. Estoy eligiendo una envoltura de brida de listado. Entonces dentro de este RAB, vamos a agregar la imagen, entonces la selección de la misma, estoy buscando una imagen. Estoy agregando una imagen de elemento. He elegido la imagen del ácido para hacer el título del listado alineado en una fila. Estoy seleccionando la representante del título del listado y seleccionando flex en la pantalla. Ahora estoy eligiendo alineación de centro y luego espacio entre otro justificado. Sabemos que necesitamos un espacio de margen dentro del título del anuncio envuelto. Entonces estoy seleccionando el título de la lista. Le estoy dando ese valor de margen superior e inferior a un píxel cero. En el diseño, tenemos una línea bajo el título del listado. Entonces con la selección de provocar envoltura de mareas, voy por debajo de los bordes y estoy eligiendo el borde en la parte inferior. Que este niño sea sólido. Y estoy dando el valor hexadecimal en el color del diseño figma. Como la línea está tan cerca del título del listado. Con la selección de rep de título de listado, estoy dando el valor de relleno inferior a 15 píxeles y también el valor de margen, es decir, el valor del margen inferior a 15 píxeles. El desarrollo restante continuará en la siguiente lección. 25. Sección de precios - Parte 2: En esta lección, vamos a estar cubriendo el desarrollo adicional en la primera columna de una jornada laboral. A partir de ahora, hemos creado un título para este precio en la parte superior, y justo debajo de él, hemos creado una cuadrícula con dos columnas. Al igual que en la primera columna, hemos creado do block para contener el contenido de la primera columna. Y también en la cima, nos hemos desarrollado con la marea ascendente. Y también debajo de él, hemos desarrollado el título del listado junto con el MOG. En esta lección, agregaremos una lista de artículos necesarios para esta sección de precios y también un botón a la misma. Pasemos a desarrollar estos. Ahora necesitamos agregar un listado de artículos. Entonces, para crear eso, necesitamos agregar un dibloque que contenga los elementos de la lista. Entonces, bajo la envoltura de la lista de precios, estoy creando un div y le estoy dando el nombre de la clase como lista de precios. Con la selección de lista de precios, estoy buscando una lista. Por lo que la lista se agrega debajo de ella. Ahora en el lienzo, se podría ver que el elemento de la lista se agrega con una configuración de lista emergente. Por defecto, el tipo se selecciona como orden. No necesitamos balas. Entonces estoy seleccionando el estilo S, sin balas. Ahora vamos a agregar la lista de ítems dentro de esta lista. Ahora estoy seleccionando la primera lista, y ahora estoy dando el contenido del elemento de la lista como en el diseño. Se debe cambiar la tipografía de este elemento de la lista. Para dar la marca de garrapata en la esquina izquierda de este ítem de la lista. Voy por debajo de los fondos. Estoy eligiendo Imagen y gradiente. Que el azulejo no sea ninguno. Vamos a elegir el tamaño a contener. Ahora he elegido la imagen del activo que tiene estigma. Me voy Y en la posición y estoy eligiendo la esquina media izquierda, obtiene el espaciado entre la marca de garrapata y el ítem de la lista. Voy por debajo del espaciado. Estoy dando el valor como 40 píxeles en el relleno izquierdo para cambiar el color de fuente para este elemento de la lista, voy a otro tipo de gráfico V. Ahora le estoy dando el color en el valor hexadecimal a obtener el espacio de margen para este elemento con una selección del primer elemento de la lista, estoy dando el valor de margen superior a diez píxeles. En el valor inferior a diez píxeles. En el Navegador, podríamos ver por defecto los dos elementos de la lista que se agrega. Pero ya hemos diseñado el primer elemento de la lista. Entonces estoy borrando el elemento de la lista de tareas pendientes existente. Ahora estoy duplicando esto por precio. Ahora voy al fondo. Ahora estoy eligiendo el tamaño para personalizar aquí que es más espaciado entre la marca de selección y el contenido del elemento de la lista. Entonces necesito cambiar el valor de relleno con la selección del mismo. Voy al espaciado y le estoy dando el valor a 20 pixeles. Pero está tan cerca el uno del otro. Deje que el valor beta D pixel. Ahora, ahora estoy seleccionando la primera palabra del segundo elemento de la lista y luego cambiando IT S span. Voy a entrar en la tipografía. Estoy seleccionando el peso como 700, color negrita sea el color primario. Estoy cambiando el nombre de la clase para esta disband de texto a punto culminante de precios. Ahora voy al Navegante. Otra vez. Estoy duplicando este artículo de lista por precio. En el Lienzo, he cambiado. O el contenido de este ítem de la lista. Si concentramos el estilo en el elemento de la lista, este estilo se aplicará a los otros elementos de la lista. Cambiemos el valor de espaciado para este elemento de la lista. Entonces estoy seleccionando el primer elemento de la lista. Ahora voy por debajo del espaciado. Estoy dando el valor de margen como 30 píxeles. Estoy eligiendo el segundo ítem de la lista. Ahora estoy haciendo el valor de margen que es aproximadamente un valor de margen a 30 píxeles. Por lo que estos valores se aplicarán para los otros elementos de la lista. Hacer. Ahora voy al ítem de la lista de fallas. Estoy eligiendo la ilustración más nueve. Lo estoy cambiando como texto a span. Ahora estoy dando el nombre de la clase para este texto Japón como destacó el precio. Hemos terminado el ítem de lista y mini cosa. Tenemos que añadir un botón. Antes de agregar un botón, necesitamos agregar un bloque, que estará bajo el representante de la lista de precios. Ahora estoy dando el nombre de la clase para este envoltorio de botón de precios diblock S. Entonces estoy seleccionando este botón de precios. Ahora estoy buscando un botón. Por lo que este elemento se creará bajo esto. Ahora estoy dando el nombre de clase para este botón como botón de marca marcas, que es el botón de clase existente. Por lo que se aplicará el estilo del botón de trasplante a este botón. Ahora estoy agregando el botón de precios de otra clase junto con el botón de trasplante de clase a existente. En el diseño, hemos visto que este botón está ocupado todo el ancho. Voy a otra talla. Estoy dando el ancho al 100%. Para que el contenido de este botón esté en el centro. Voy por debajo de la topografía y alineándola con el centro. Ahora he cambiado el contenido de este botón a S. Es gratis. Ahora cambiemos el color de esta frontera. Entonces voy por debajo de los bordes y cambiando los colores con el valor hexadecimal. En la siguiente lección, veremos sobre el desarrollo Además y el estilo que se necesita para la sección de precios. Vamos a seguir adelante. 26. Sección de precios - Parte 3: En esta lección, vamos a terminar esta sección de precios con estilo del contenido de la primera columna y el contenido de la segunda columna. Y también vamos a ver cómo hacer que la lista de ítems se superpongan. Empecemos a desarrollar esto. En el diseño que ya hemos visto, hay un color de fondo para el artículo de precios. Entonces en el navegador, estoy seleccionando el ítem de precios, el bloque, y voy al fondo. Ahora he dado el valor de color en hexadecimal en el Canvas, podríamos ver que todo el contenido se alinea a la izquierda. Tenemos que hacer el espaciado en todos los lados. Entonces voy a otro espaciado. Ahora le estoy dando el valor o el perro de la encuadernación como vacío, pero no parece tan bueno. Entonces estoy cambiando a 60 píxeles y dejo que el valor inferior sea de 60 píxeles. Ahora estoy dando el valor de relleno izquierdo a 70 píxeles. Parecía un lugar para la prohibición correcta. Hacer. A continuación para hacer las esquinas redondeadas, voy a otra frontera. Ahora le estoy dando el valor del radio a 40 píxeles. Ahora necesitamos darle el color para esta lista de precios. Entonces estoy seleccionando esta lista de precios, agarra otro fondo. Estoy eligiendo el color como luz blanca. Nuevamente, use el valor del radio como 40 píxeles y otras órdenes. Como pudimos ver claramente, el espaciado no es apropiado. Entonces me voy al espaciado. Ahora estoy dando el valor en el relleno superior e inferior como pixel xy. Y para la izquierda y la derecha 50 pixeles. Para obtener el espaciado entre el título de precios y la lista de precios. Estoy seleccionando el envoltorio de la lista de precios. Si doy el valor de margen en la parte superior, entonces podremos ajustar el espaciado. Entonces estoy dando el valor del margen superior como 40 píxeles. Ahora estoy seleccionando este botón para obtener el espaciado entre los elementos de la lista y el botón. Demos el valor de relleno para este ajuste de botón a 40 píxeles en la parte superior. Vamos a publicarlo para ver cómo se ve. Podríamos notar el espaciado para este artículo de precios y el contenido del título no es suficiente. Voy a hacer el navegador, estoy seleccionando el agarre de precios. Eso es todo. Vamos a dar el valor de relleno en la parte superior a 60 píxeles. En el ítem de precios. Siento que hay un poco más de espacio en la parte superior. Con la selección del artículo de precios, estoy dando el valor de relleno en la parte superior a 40 píxeles. De nuevo, voy a ajustar el valor de margen para la envoltura de la lista de precios. Ahora he dado el valor como 50 pixeles en la parte superior. Volvamos a esto, el valor de margen para el ítem de la lista. Ahora estoy dando el valor o el margen superior como 35 píxeles y el valor del margen inferior como eso si pixel. Hemos hecho el desarrollo necesario que se necesita para la sección de precios en la primera columna. El mismo diseño es seguimiento para la segunda columna. Entonces voy a duplicar este artículo de precios por una vez. Por lo que este artículo duplicado se colocará automáticamente dentro esa segunda columna para ganar el hueco entre la primera columna y la segunda columna, eligiendo la cuadrícula de precios. Ahora, debajo de la cuadrícula Editar, Vamos a dar el valor de la brecha a 50 píxeles. Ahora necesito cambiar ese contenido en la segunda columna, como en nuestro diseño. Cuando llego a la lista de precios, tenemos dos artículos más de la lista. Entonces en el navegador con la selección de ítem de lista, lo estoy duplicando por dos veces. Y también necesitamos cambiar el emoji en la segunda columna, como en el diseño. Entonces estoy seleccionando la imagen. Ahora voy a sustituir la imagen del activo. Publiquemos esto para ver cómo se ve. Hemos hecho todo lo necesario durante el cual se necesita para la sección de precios. Lo siguiente que tenemos que hacer el estilismo de acuerdo a nuestro diseño. Al igual que en el diseño, hemos visto que el elemento de la lista se superpone a su padre. Pero si toda la porción del dibloque es estática, este diseño no se le puede implementar. Por lo que el padre do blog debe estar interrelacionado. Así que voy a elegir la sección de precios y estoy estableciendo su posición para relacionarse con el elemento primario inmediato de esta lista de precios es el artículo de precios. Entonces necesitamos establecer la posición como relacionada. Ahora, vayamos al envoltorio de la lista de precios. Ahora fijemos su posición S absoluta. En el Canvas pudimos ver esta lista de precios. El rap es un libre de ajustar su posición y además será uno li dentro de este artículo de precios. La razón principal para cambiar la posición a absoluta y relativa es que no afectará a la posición de otros elementos ni a sus propiedades. Como podemos ajustar libremente la posición de acuerdo a nuestras necesidades. Y también este artículo de precios ocupado con espacio de acuerdo al contenido que se encuentra dentro de él. Para omega su tamaño de acuerdo a nuestro diseño, voy por debajo del tamaño y fijando la altura mínima a 600. Así que ahora puedes verlo ajustar su tamaño sin afectar la posición del artículo del listado. Para hacer que la lista de precios se envuelva al centro debajo de la posición, voy a ajustar desde Otto. Ahora estoy fijando la contaminación izquierda 8% cada una y la posición correcta a 8% H. Así que según el valor que ha ajustado al centro, la altura de estos artículos de precios parece ser un poco pequeña. Entonces bajo el tamaño, les voy a dar altura mínima a 700 pixeles. Para resaltar esta lista de precios desde el fondo, necesitamos establecer la sombra, esa es la sombra de caja a ella. Así que voy por debajo de la sombra de caja ya que necesitamos una sombra de caja fuera de este listado. Entonces por defecto, se ha dicho al exterior, sólo estamos ajustando el ángulo de la sombra. Y el efecto borroso, que requiero otro color. Estoy ajustando la opacidad de la misma hasta que no me sentí satisfecha. Así que de nuevo, estoy dando clic en las sombras de la caja, estoy ajustando el ángulo de desenfoque. Delight se siente satisfecho. Ahora voy a publicarlo para verlo en modo de vista previa. Así que hemos hecho de todo, como en nuestro diseño. Para el botón, hemos utilizado la clase existente. Entonces el estilismo que le hemos dado a esa clase se heredará aquí. Hacer. Por eso se puede ver ese efecto de transición de este botón. Por fin, hemos completado la sección de precios y diariamente en la siguiente lección, estaremos viendo sobre la sección de blog. Vamos a verte en la siguiente lección. 27. Sección de blogs: parte 1: En esta lección, vamos a desarrollar la sección de blog. Solo lo necesito para nuestro sitio web. Veamos sobre la planeación. Al principio, crearemos una sección y luego un contenedor debajo de las drogas, que están todas en la ciudad. Al principio, tendremos el título que consiste en un div. Y dentro de él, ese será un título y un subtítulo. Y nuevamente, justo debajo del título, tendremos un div dentro de él. Usaremos la lista de recolección. Es decir, estaremos usando el CMS. El estilo que vamos a hacer en un artículo se verá afectado en los otros artículos. Además, no lo vamos a editar por separado. Simplemente vamos a obtener el contenido del CMS, eso es sistema de gestión de contenidos. Por lo que todos los datos relacionados con el blog serán extraídos de los cmos. Por eso estamos usando la lista de recolección. Entonces volvamos al diseño. Se podía ver en cada ítem, tiene una imagen en la esquina izquierda. Y en la esquina derecha tenemos un título del blog. Y debajo de ella hay una fecha en la que publican esos blogs, aunque ese es un extracto de este bloque. Y nuevamente, lo necesitamos. Esa será una lectura motoring para redirigir al blog. El mismo diseño, un lugar para los artículos restantes de la colección. Entonces ahora obtienes algunas de las ideas sobre cómo vamos a desarrollarnos. Veamos cómo vamos a hacer esto. Antes de entrar en la lección. Veamos sobre el modelo de caja común, que se aplicará para todas las secciones dentro del cuerpo. Necesitamos agregar una sección y debemos proporcionar el nombre de clase apropiado para esta sección. A continuación se muestra el espaciado para esta sección. Es decir, necesitamos darle el valor de relleno superior e inferior para ello. Después de crear una sección dentro de ella, necesitamos agregar un contenedor y se debe dar el nombre de clase para este contenedor. Ahora podemos agregar el elemento dentro del contenedor, que es apropiado para la sección necesaria. Al principio, debajo del cuerpo, vamos a crear una sección. Vamos a darle un nombre de clase para esta sección S sección del blog. Ahora cree el contenedor menor ocho y seleccione el nombre de clase existente para él. Tenemos que añadir el título para esta sección de blog. También hemos creado los títulos en las secciones anteriores, he ido a la sección de servicio y lo duplico, la sección titulada wrap. Y han arrastrado esa sección titulada wrap debajo del contenedor en la sección de blog. Así que ahora podrías cambiar el contenido de este título como nuestra rodilla. Al principio no nos hemos dado espaciamientos para la sección. Ahora estoy seleccionando esta sección de blog. Estoy dando el valor de relleno como 100. En la parte superior e inferior. Estoy seleccionando el contenedor debajo de él. Vamos a crear un dibloque. Vamos a dar el nombre de la clase para este do bloque S, envoltura de contenido de blog. Un li dentro de esta envoltura de contenido de bloque, vamos a agregar una lista de colecciones. Estoy seleccionando el CMS, es decir, el sistema de gestión de contenidos. Aquí, estoy seleccionando la nueva colección, que está en la esquina superior derecha. Ahora en la ventana, puedes ver las plantillas de colección, la configuración de la colección, los campos de recopilación. Entonces, por defecto, tenemos las plantillas aquí. Vamos a crear un bloque. Entonces estoy seleccionando como entrada de blog. Al hacer clic en la entrada del blog, se crearán automáticamente los campos relacionados con ella. Justo debajo de los campos de recolección. Se podría ver en el nombre de la colección, la entrada del blog es mayor y en la URL de la colección, se crea la publicación. Por defecto, tendremos la información básica como nombre y dormimos debajo de ella. O habrá un campo personalizado donde podamos personalizar nuestros campos. No necesito este largometraje, así que estoy seleccionando las sesiones y lo estoy borrando. Y además no necesito estos campos de color, así que estoy seleccionando la configuración y la estoy borrando. Aparte de los campos existentes, necesito otro campo. Al seleccionar el campo agregar. Pudimos ver la abundancia de tipos de campo. Aquí. Necesito agregar el nombre del autor. Entonces, para poder almacenar los nombres de los autores, estoy eligiendo texto plano. Ahora puedes ver la etiqueta. Esa etiqueta se actuará como nombre de campo. Sin embargo, vamos a darle el nombre de la etiqueta como extraño. Necesitamos el texto de ayuda. Esa es una descripción sobre el uso de este texto de ayuda. Es decir, esto ayudó x aparecerá debajo la etiqueta para guiar a los colaboradores para que estén en detalle. Este texto de ayuda es para saber cuál es el propósito de esta etiqueta. Ahora voy a ingresar el texto de ayuda, ingresa el autor de este post. A continuación, hay un tipo de campo de texto de él. Podemos elegir si es una sola línea o una línea múltiple. Salvemos este campo. Después del auto. Necesito el campo de fecha y hora para guardar los datos publicados del bloque. Entonces, al hacer clic en Agregar campo, voy a seleccionar el tipo de campo como fecha y hora. Demos el nombre de la etiqueta como fecha de publicación. En el texto de ayuda estoy escribiendo como seleccionar los datos publicados del post. Salvemos este campo. Ahora hemos realizado todo el campo necesario para nuestra colección. Todos los datos relacionados con esta entrada de blog se almacenarán en sus campos correspondientes. Ahora vamos a hacer clic en la colección Crear. Por lo que se creará la colección de publicaciones de blog. Ahora queremos seleccionar cuántos artículos de muestra necesitamos. A partir de ahora, estoy seleccionando cinco ítems. Después de seleccionar eso, se crearán los elementos de muestra phi de la entrada del blog. Ahora bien, estos son todos los elementos de muestra de Phi de la entrada del blog. Al igual que en el diseño, solo necesitamos los cuatro elementos. No necesitamos uno de los artículos. Entonces estoy seleccionando el último ítem y lo estoy borrando. Entonces ahora hagamos la edición de todo el post. Ahora estoy seleccionando la primera pose. Aquí podrás ver el nombre de la información básica y dormiste. En el campo personalizado. Estamos teniendo todos los campos que hemos creado antes. Por defecto, tendremos un contenido ficticio en cada uno de los campos. Tenemos que cambiar todas estas cosas de acuerdo a nuestro contenido. Vamos a avanzar en la información básica bajo el nombre. Te lo estoy dando como desarrollar tu habilidad de dibujo. En este laboratorio. Estoy dando como en el campo de nombre. Ahora nos llega el mensaje de advertencia ya que al cambiar la URL se romperán los enlaces externos a este ítem playa en la losa. No deberíamos tener un eslabón roto. Para eso. En cada una de las terminaciones de palabras, necesitamos agregar un guión. Entonces agreguemos un guión entre las dos palabras. Ahora llegando a los campos personalizados, llevemos el cuerpo del post a nuestro contenido. Lo mismo para el resumen del post. A continuación, voy al autor. Demos el nombre del autor de esta entrada de blog. Vamos a guardar esto. Por lo que todos estos datos serán almacenados en sus respectivos campos. Tenemos que hacer lo mismo en los tres ítems restantes. Por lo que ahora hemos hecho que todos los datos sean almacenados en sus respectivos campos y otras colecciones de publicaciones de blog. Al acceder a esa colección de publicaciones de blog, los datos del MIT se pueden volver a intentar en nuestro Canvas. Veamos cómo vamos a hacer esto en la siguiente lección. 28. Sección de blogs: parte 2: Como hasta ahora, hemos creado la sección de título necesaria para nuestras publicaciones de blog. Y también hemos visto sobre el CMS, es decir el sistema de gestión de contenidos, mientras que es como una base de datos que tiene los campos con los datos que se necesitan para nuestra entrada de blog. Estaremos utilizando en los términos de recolección. Entonces, una hoja de esta colección, vamos a reintentar todas las entradas del blog, un dato de ella a nuestro Canvas. Entonces en esta lección, veamos cómo vamos a recuperar todos los datos de la colección de publicaciones de blog a nuestro Canvas. Cómo vamos a darle estilo a nuestra grilla de blogposts. Ahora con la selección de contenido de blog, wrap, vamos a crear una lista de colección. Ahora se muestra el pop. Aquí. Tenemos que elegir la fuente. Hemos creado una colección de publicaciones de blog. Por lo que la fuente de la lista de colecciones es de la entrada del blog. Ahora tenemos que seleccionar la capa que se necesita para nosotros de acuerdo con el diseño. Tenemos las dos columnas, así que estoy seleccionando la capa con dos columnas. La lista de colecciones se crea en el lienzo. Así que aquí podemos volver a intentar los datos necesarios para nuestras publicaciones de blog. En el navegador, estoy eligiendo contenido de blog. En su interior habrá un envoltorio de listas de colección. De nuevo dentro de ella, esa lista de recogimiento. Y nuevamente dentro de él ese es un artículo de colección ya que ese es el artículo de cada uno individual. Ahora, dentro de este elemento de colección, voy a agregar un bloque div ya que estamos usando la colección. Si haces algunos de los cambios en uno de los artículos, también será un factor en todos los demás artículos. Así que he agregado diblock dentro de este artículo de colección. Así que todos los registros se crean en todos los demás elementos de la colección. Cambiemos ese nombre de clase diblock como representante de imagen de blog. Ahora vamos a agregar una imagen. Si agrego una imagen en este envoltorio de imágenes de blog, automáticamente, las imágenes se crearán en los otros tres elementos de la colección. Si utilizo la opción, obtengo la imagen de la colección de publicaciones de blog, las imágenes que están todas almacenadas en esta colección se volverán a intentar y se mostrarán en su respectivo elemento inmediato. Como hemos seleccionado la colección de publicaciones de blog de ella, necesitamos seleccionar el campo. Al tratarse de una imagen en el campo hemos acostumbrado a la imagen que es una imagen principal y una imagen en miniatura. Hola, Necesitamos una imagen en miniatura. Entonces estoy seleccionando la imagen en miniatura del campo. Las imágenes se almacenan en un orden bajo los campos de imagen en miniatura. Entonces al acceder a esto, todas las imágenes en miniatura se leen Drive y se almacenan en su respectivo elemento de colección. Hemos agregado la imagen. A continuación, necesitamos crear un espacio para contener el contenido del bloque. Ahora estoy seleccionando el artículo de colección. Dentro del artículo de colección, voy a crear un diblock. Vamos a dar el nombre de clase para esta área de contenido del blog diblock S. Tenemos que añadir el título para la entrada del blog. Bajo el área de contenido del blog, estoy agregando un encabezado y vamos a elegir el tipo de encabezado como H2. Como estamos usando la lista de colecciones que necesitamos para elegir el nombre del campo de la colección. Ahora bajo la elección GetText from blog post, estoy eligiendo el nombre del campo, nombre, para que el encabezado de las publicaciones del blog sea recuperado y colocado aquí. A continuación, tenemos que dar el nombre del autor y los datos publicados del post. Entonces, bajo el área de contenido del blog, nuevamente estoy creando un nuevo bloque que contiene la fecha de publicación y el nombre del autor. Vamos a darle un nombre de clase para este blog diblock S, envoltura metálica. Con la selección del bloque Metal Wrap, agreguemos un bloque de texto, habilitemos el GetText de las entradas del blog y seleccionemos el nombre del campo, fecha de publicación. Por lo que el editor, la fecha de los posts se mostrará aquí. Aparte de la fecha de publicación, necesitamos un autor del post. Así que de nuevo, bajo el meta wrap del blog, estoy agregando un bloque de texto. Ahora vamos a elegir el campo como auto. Por lo que el nombre del autor y la fecha de publicación se agregarán en todos los demás elementos de la colección. Ahora bajo el área de contenido del blog, voy a agregar un párrafo. Ahora, usemos el campo como resumen de post. Como resumen de la publicación se mostrará en todos los demás elementos de la colección. Como hemos agregado solo el resumen del post. Para poder leer más sobre el post, necesitamos agregar un enlace leer más. Bajo el área de contenido del blog. Estoy agregando un enlace de texto. Ahora en el pop-up, estoy eligiendo página de colección. Y luego debajo de la lista desplegable de la página, estoy eligiendo la entrada de blog actual. Por lo que si hacemos clic en este enlace, se mostrará el contenido relacionado con esta entrada de blog actual. Cambiemos el enlace de texto al modo de lectura. Ahora vamos a agregar todo el elemento del blog dentro de un dibloque en particular. Entonces bajo el ítem de colección, estoy creando y diblock. Y estoy arrastrando el diblock sobre EPO, la imagen del blog, el rap y el área de contenido del blog. Ahora coloquemos la imagen del blog, rap y el área de contenido del blog dentro de este bloque div recién creado, Vamos a dar el nombre de clase para este elemento de blog diblock S. Dentro de este artículo del blog, estaremos teniendo una imagen y el contenido, como pudimos ver en el Canvas. En cada uno de los artículos de colección. Las imágenes están en la parte superior y los títulos, la fecha, el autor, y el resumen del post o abajo entre sí. Pero necesitamos que la imagen esté en la izquierda y que todos los títulos y el contenido estén en la derecha. Con el fin de establecer que estoy eligiendo elemento de blog. Otra capa, estoy seleccionando el flex y alineándolo al centro. Ahora cambiemos el tipo biografía del contenido del blog. Ahora estoy eligiendo el encabezado del primer elemento de contenido y pasando por debajo de la tipografía, estoy eligiendo la fuente como Poppins. A continuación, el peso será 500 medio y la altura es de 1.2 guión. Ahora, vamos a elegir el color de fuente como color secundario de la muestra, ya que necesitamos dar el nombre de clase para este encabezado. Entonces con la selección de este rubro, estoy dando el nombre de la clase como título de blog. A continuación, estoy seleccionando la envoltura de metal de bloque en que hay dos libros de texto. Ahora, estoy seleccionando el primer bloque de texto ya que contiene la fecha de publicación de este blog. Enseñemos la topografía de la misma hacer por la fuente que estoy eligiendo como Poppins y el peso será 500 mediano ya que una talla para esta fecha no debería ser grande. Entonces estoy dando el tamaño como 16 pixeles y la altura como 1.2 guión como fecha y auto será en un color sutil. Permite que el color de la fuente sea el color del contenido. A partir de esta muestra, necesitamos dar el nombre de clase para este bloque de texto. Así que estoy cambiando el nombre de esta clase como valor de logaritmo metálico. El estilo para este bloque de texto de autor será el mismo que el editor, el bloque de texto de fecha ya que le hemos dado el nombre de clase para ese S blog metta valor. Entonces ahora vamos a dar el mismo nombre de clase para este bloque de texto. Entonces ahora todo el estilo que hemos hecho en esta clase se aplicará a este nombre de autor. Además, necesitamos hacer la fecha y el nombre del autor solo para estar uno al lado del otro. Entonces estoy seleccionando el blog metal wrap. Estoy eligiendo flex en la pantalla y alinearla al centro. Tenemos que hacer la separación entre la fecha y el nombre del autor. Entonces dentro del blog Mehta, estoy creando otro bloque de texto. Y estoy usando una línea como separador entre estos dos. Ahora estoy dando el nombre de clase para este bloque de texto como separador de metales en bloque. Para cambiar la topografía de la misma, voy a otra tipografía para crear un espacio del separador. Voy al espaciado y luego dando el valor de relleno de la izquierda y la derecha como diez píxeles. Necesitamos un poco de espacio entre el contenido del blog en la envoltura metálica del blog. Entonces con la selección de blog metal wrap, estoy dando el valor de relleno inferior S, diez pixeles. Nuevamente, necesitamos hacer la separación entre este blog Metal Wrap y Roll área de contenido. Entonces con la selección de envoltura metálica de blog, voy por debajo de las fronteras y estoy eligiendo el borde en la parte inferior. Estoy cambiando el color para este separador. Ahora llegando al área de contenido del blog, que es el párrafo, y ajustando la altura del mismo bajo la topografía que lo finalizan con 1.3 guión. A continuación, estoy eligiendo el enlace. Ahora bajo la tipografía, vamos a dar la fuente como Poppins y esperar con 500 medianos y el tamaño con 18 píxeles. Vamos a darle el color como color secundario de la muestra y el ancho de la altura, 1.2 guión como aquí estamos usando el enlace ya que no parece tan bueno verlo. Entonces bajo el estilo que estoy eligiendo, ninguno. Cambiemos la clase para este enlace como blog, leer más en, leer más enlace. Mientras se cierne, necesitamos hacer la transición. Entonces en el propio no-estado, voy a la transición y estoy eligiendo el tipo de transición como color de fuente. Ahora cambiemos el estado para acarrear. Tenemos que cambiar el color de la fuente. Entonces voy a otra tipografía, y estoy eligiendo el color de fuente como color primario de esta muestra. Ahora, vamos a elegir el estado a ninguno otra vez. Por lo que ahora hemos hecho el efecto de transición para este enlace. Hemos agregado el título de imagen de muestra del blog, efectivamente, contenido auto y muestra y un modelado rojo a partir de ahora, en la próxima lección, vamos a terminar toda la sección del blog. Veamos cómo vamos a hacer esto en la siguiente lección. 29. Sección de blogs: parte 3: Esta es la última parte de esta sección de blog. A partir de ahora, hemos completado la imagen de muestra necesaria para este bloque, y hemos agregado el título o el nombre y la fecha como contenido pequeño. Y voy a enlazar y todo lo que hemos hecho en la lección anterior en el diseño. Y estaremos haciendo el ajuste para el espaciado que se necesita para este diseño de bloque. Veamos cómo vamos a hacer todo esto. En esta lección, vamos a cambiar el color de fondo para cada uno de estos elementos del blog. Veamos cómo vamos a hacer todo esto en esta lección. Ahora, vamos a cambiar la imagen de fondo de este artículo del blog. Entonces bajo el elemento de colección con una selección de elemento de blog, voy por debajo de los fondos. Cambiemos el color de transparente al color en nuestro diseño. Para hacer la esquina redondeada en los cuatro lados debajo de los bordes, estoy dando el valor del radio como 32 píxeles. El contenido y la imagen de este artículo del blog están muy cerca de sus lados. Entonces necesitamos hacer el espaciado en los cuatro lados. Ahora voy por debajo del espaciado. Vamos a darle un valor de relleno para todos los sitios como 40 píxeles. Ahora para dar el espaciado entre la imagen y el contenido, tenemos que elegir el área de contenido de implica. Entonces estoy eligiendo el área de contenido del blog. Para el valor de relleno izquierdo. Lo estoy dando como 40 píxeles para obtener el espaciado para estos datos publicados, no el nombre. Yo elijo. Envoltura metálica de bloque. Estoy dando el valor de relleno son los 210 píxeles superiores y el valor de relleno inferior como 20 píxeles. Y nuevamente, le estoy dando el valor del margen inferior a 20 píxeles. Entonces ahora obtenemos el espaciado considerable entre el contenido y la fecha. No hemos cambiado el nombre de la clase para este párrafo. Así que vamos a cambiarle el nombre del bloque S producto extra, espaciado considerable entre el párrafo y el enlace. Vamos a dar el valor de relleno para la parte inferior como diez píxeles. Ahora necesitamos cambiar lo inmediato del bloque que tiene en su diseño. Aquí, estoy usando el pequeño sitio png.com para obtener la imagen de tamaño comprimido. Vamos a subir la imagen que tenemos ahora. Ahora he seleccionado toda la imagen que es para la imagen principal y una imagen en miniatura. La imagen que tiene mayor tamaño se reduce considerablemente debido a su tamaño más pequeño. Ahora estoy descargando cada una de las imágenes para cambiar las imágenes del bloque. Ahora voy a la colección CMS debajo de la entrada del blog, estoy seleccionando el primer bloque. Debajo de ella. Pudimos ver la imagen principal y la imagen en miniatura. Debajo de la imagen en miniatura, la estoy borrando. Dejemos caer la imagen que hemos descargado. Ahora. Lo mismo que voy a hacer en la imagen principal como eso. Estoy borrando la imagen existente ya que la estoy reemplazando por una imagen grande como la imagen en miniatura. Ahora estoy siguiendo los mismos pasos que he llevado a cabo en la primera entrada del blog. A los tres restantes post de blog. En el Canvas, pudimos ver que se ha cambiado toda la imagen de las entradas del blog. Éxito dispuesto a hacer la esquina redondeada en cada una de las imágenes. Estoy seleccionando la imagen debajo del borde. Estoy dando el valor como 25 pixel. No hemos visto el nombre de la clase para esta imagen. Entonces estoy dando el nombre de la clase como imagen de listado de blog. Cada uno de los elementos del blog se está tocando y además está muy cerca el uno del otro. Para hacer el espaciado entre cada una de ellas. Estoy eligiendo artículo de colección, que es otra lista de recolección. Vamos por debajo del espaciado. Ahora para el valor de relleno, estoy dando 15 píxeles a la izquierda y a la derecha. Y vamos a dar el valor de relleno inferior como 30 píxeles. Ahora estoy cambiando el nombre de clase de elemento de colección como elemento de colección de blog para obtener el espaciado para el área de contenido en la parte superior. Elegir contenido de blog, rap ya que tiene todo dentro de él. Entonces el espaciado será aplicable a todas las demás cosas dentro de ella. Vayamos al espaciado. Estoy dando el valor de relleno o la parte superior como 60 píxeles para hacer que la imagen use el ancho del cien por ciento del tamaño. Estoy seleccionando la imagen del blog rap, pero sostiene la imagen por debajo del tamaño. Estoy dando el valor como 100 porcentaje bajo el ancho. Y volvamos a hacer el blog listado tamaño de ancho de imagen al 100 por ciento. Publiquemos esto para verlo en modo premium. Hemos desarrollado la sección de bloques, como en nuestro diseño. Incluso la transición del modo de lectura está funcionando perfectamente. Por fin, hemos completado con éxito la sección de bloque. En la siguiente lección, veremos sobre la sección de preguntas frecuentes y también la lista desplegable. En la lista desplegable se estará haciendo la animación. Veamos cómo vamos a hacer esto. 30. Sección de preguntas frecuentes: parte 1: En esta lección, vamos a ver sobre la sección de preguntas frecuentes. Antes de eso, veamos sobre el modelo de caja que plying. Como es habitual, crearemos una sección y luego un contenedor. Y dentro de él estaremos usando un modelo de cuadrícula, que sólo puede mostrar dos columnas. Dentro del bloque d de la primera columna, usaremos un blog To Do, para sostener un encabezado y subtítulo y llegando al bloque d de la segunda columna, usaremos una lista desplegable. Cubriremos la animación que es necesaria para la lista desplegable. Al hacer clic en la flecha, debe girar mientras se abre el contenido dentro de ella. Y también debería rotar hacia atrás y cerrando esta lista. Y la próxima lección de la sección de preguntas frecuentes, cubriremos la animación necesaria para esta lista desplegable. En esta lección, cubriremos solo la estructura básica necesaria para la lista desplegable. Permite más. Antes de entrar en la lección, veamos sobre el modelo de caja común, que se aplicará para todas las secciones dentro del cuerpo. Necesitamos agregar una sección y debemos proporcionar el nombre de clase apropiado para esta sección. A continuación se muestra el espaciado para esta sección. Es decir, necesitamos darle el valor de relleno superior e inferior para ello. Después de crear una sección dentro de ella, necesitamos agregar un contenedor y se debe dar el nombre de clase para este contenedor. Ahora podemos agregar el elemento dentro del contenedor, que es apropiado para la sección necesaria con una selección de cuerpo y creando una sección. Cambiémoslo a la sección de preguntas frecuentes. Ahora, dentro de esta sección de preguntas frecuentes, estoy creando un contenedor. Vamos a usar el contenedor de nombre de clase existente. Ahora, con la selección de este contenedor, estoy creando un bloque do, Class Name produce tilde log S FAQ content read. Así que esto contendrá todo el contenido y necesitaría más sección de preguntas frecuentes, como ya comentamos anteriormente, vamos a crear una cuadrícula bajo el envoltorio de contenido de preguntas frecuentes. En la cuadrícula de edición, estoy borrando flecha. Ahora lo estoy renombrando como grilla de preguntas frecuentes. Necesitamos el espaciado de las rejillas. Entonces estoy seleccionando la sección de preguntas frecuentes y estoy dando el valor de relleno en la parte superior e inferior 200 píxeles. Volviendo a la cuadrícula de preguntas frecuentes, hemos visto que la cuarta columna es más pequeña que la segunda columna. Entonces estoy ajustando el tamaño de la columna a 0.5. Ahora necesitamos crear un diálogo para cada una de las columnas. Así que la selección de FAQ grid y gradiente. Ahí vamos. Por lo que automáticamente va a pasar a la cuarta columna. Ahora estoy enseñando el nombre de la clase para este diblock como representante de título de sección de preguntas frecuentes, como es hacer mirar es sostener los títulos. Ahora he copiado la sección titulada rep de la sección de bloque porque aquí al mismo estilo sigue. Ahora estoy creando otra área de contenido de producto diblock que es para contener una lista desplegable. Ahora le estoy dando el nombre de clase para ello como área de contenido de preguntas frecuentes. Estoy presumiendo del título de la sección de preguntas frecuentes. Para ser el segundo blog dev, lo estoy arrastrando nuevamente debajo de los títulos de la sección FAQ. En la segunda columna, hemos calificado el bloque sería FAQ área de contenido. Dentro del bloque de acero, vamos a agregar una lista desplegable. Entonces con la selección del área de contenido de preguntas frecuentes, estoy buscando agarrado para que el desplegable haya sido creado dentro de ella. Nadie expandiendo esto un desplegable. Por defecto, tenemos todo lo que se necesita para la lista desplegable. Tenemos un DOE desplegable y una lista desplegable. Así que ahora voy a volver a la grub hacia abajo para ocupar el espaciado completo de este elemento padre. Y yendo por debajo del tamaño, y estoy dando el ancho al 100%, así que ocupa el ancho completo. Ahora cambiemos el nombre de la clase, un producto, este desplegable como elemento de acordeón. Ahora estoy seleccionando el perro desplegable. Queremos el contenido dentro la lista desplegable y el perro lo hará, para llenar el espacio. Y haciendo que esta área ingresada sea clicable. Necesitamos cambiar la configuración de la pantalla a Flexbox. Vamos a cambiar el nombre de este perro desplegable hará acordeón doble. Una cosa a tener en cuenta a medida que construimos, estamos preparando nuestro desplegable para colapsar. Queremos que nuestra interacción colapse detrás de la palanca para ocultar la respuesta. Ya que necesitamos eso, agreguemos aquí la altura que luego usaremos para ocultar esa respuesta. Entonces estoy dando aquí como un pixel. Ahora estoy alineando el contenido al centro. Como ya sabemos este toggle, mantendremos nuestras preguntas. Entonces pongamos una pregunta y digamos, necesito cambiar la tipografía para esta pregunta. Estoy cambiando la fuente a Poppins. Espere a 500 tamaño mediano con 30 píxeles y un guión alto ancho 1.2. Estoy cambiando el color a color secundario. Ahora cambiemos la clase por este bloque de texto. Hacer pregunta acordeón. A continuación, dando la bienvenida a la lista desplegable. No podemos ver el contenido dentro del desplegable. Entonces estoy eligiendo el elemento acordeón y voy a ajustes y elijo show under domain. Entonces el contenido predeterminado de esta lista desplegable fuera de ella. Pero claro, eso no es lo que queremos. Pero esto sucede porque el valor predeterminado para la lista desplegable se establece en posición absoluta. Esto es genial cuando se usa una barra de navegación, como crear un menú desplegable. Pero no necesitamos eso. Y así queremos que nuestra respuesta ocupe espacio y no se elimine del flujo de documentos. Entonces vamos a hacer algunos cambios aquí en nuestra posición. Cambiémoslo a estático. Y segundo, tenemos que asegurarnos que la configuración de visualización esté en bloque. Ahora cambiemos el color de fondo de la misma a blanco. El ego, el artículo del acordeón. Vamos a configurar esto para desbordarse oculto. Y ese es un punto importante aquí porque vamos a querer ocultar contenido que se derrama fuera de esta área. Entonces lo que hemos hecho todas las cosas innecesarias que se necesitan para la sección de preguntas frecuentes y para la lista desplegable. En la siguiente lección, cubriremos la animación que se va a hacer para la lista desplegable. 31. Sección de preguntas frecuentes: parte 2: En la lección anterior, hemos completado los ajustes básicos, ni para la sección de preguntas frecuentes, junto con el menú desplegable. En esta lección, estaremos cubriendo la animación. Hay que hacer para la lista desplegable. Es decir, rotar la flecha mientras se abre el contenido, y volver a girar la flecha de nuevo al cerrarla. Y también añadiremos el contenido dentro de una lista aleatoria. Veamos cómo vamos a hacer esto. Vamos a hacer algo funcional con una infracción. La clave aquí es el ítem de acuerdo. Asegúrese de que el elemento de acordeón sea un selector en el navegador para hacerlo en rigor a nuestro panel de interacción. Ya que estamos usando y robados en elemento, podemos seleccionar un disparador específico hazlo, caído, se abre aquí. Estaremos haciendo dos cosas diferentes, menú o curvas, y el ítem de acuerdo espera y menú más cercano a colapsar nuestro final. Vamos a crear la primera animación cuando se abra un menú. Y voy a llamarlo S Según abierto. Y como sabemos, queremos animar ese rigor. Y eso es lo que queremos para asegurarnos de que actualmente esté seleccionado en el navegador. Ese es el artículo del acordeón. Entonces entraremos y agregaremos una acción para establecer el tamaño. A medida que bajaremos y estableceremos el alto cuidado a 80 píxeles. Esto significa que estamos colapsando el contenido del mismo tamaño que en el toggle. Ya sabemos que el tamaño doble es de 80 pixeles. Y como configuramos el desbordamiento oculto, la respuesta no se mostrará inicialmente. Y por eso lo configuramos para desbordarse oculto. Hablando inicialmente, fijemos esta propina como estado inicial para que inicialmente esté cerrada. Así que ahora para personalizar realmente nuestro acordeón, hagamos girar el icono desplegable, la flecha aquí, cuando esté abierto. Ahora con icono seleccionado, estoy dando el nombre como icono de acuerdo. Ahora vuelvo a seleccionar el elemento del acordeón. Voy a la interacción. Al llegar al menú se abre. Y ahora asegúrate de que hemos seleccionado el icono de acuerdo. Y agreguemos una rotación con esta acción inicial. Y estableceremos la rotación inicial del eje z. Lo haremos girar de aquí a cero grados. Aquí es donde comenzará. Los cambios que hemos hecho deberían afectar a la clase. Así que asegúrate de tener un seleccionado la clase y el efecto y también elegir la opción en el vaso como niños Wanli con esta clase. Es decir, queremos que gire el icono, sólo cuatro iconos que están dentro de él. Ahora en el navegador, voy a dejar seleccionar el ítem de acuerdo. Y agreguemos una acción como animación de tamaño. Eso es para abrir el acordeón tamaño en la altura que como auto. El motivo para dar el ATO es el elemento expand, uh, basado en el contenido dentro de él. Ahora volvamos por el efecto colapso. Ahora bajo el grupo amino versus vamos a dar la acción y comenzar una animación. Ahora estoy dando el nombre como guantes de acordeón y seleccionando los sitios de acción. Entonces ahora según ítem como selector, estoy dando la altura como pixel AD. Por lo que tomará el tamaño de la altura del acorde con, se selecciona el icono de acuerdo. Voy a dejar seleccionar la rotación. Otra vez. Estoy dando el valor del eje z a cero. Por lo que hemos hecho el acorde abierto y de acuerdo cerrado. Y ahora llegando a la lista desplegable, estoy agregando en párrafo que es el contenido dentro de la lista desplegable. Ahora eliminemos todos los enlaces de las listas desplegables. Para mostrar el párrafo. Estoy seleccionando el ítem de acuerdo y la configuración que estoy eligiendo mostrar el contenido de la lista desplegable se mostrará aquí. Ahora estoy cambiando el contenido de este párrafo. Ahora he seleccionado el doble acordeón. Para reducir el espaciado a la izquierda, estoy cambiando el valor de relleno o la izquierda a cero. Estoy copiando la misma lista desplegable dos veces. Ahora vamos a previsualizar esto. Al expandir la H de la lista desplegable. Eso es un desajuste y el espaciado. Entonces necesitamos corregirlo. Volviendo ahora a un error que hemos hecho es que hicimos espaciando a un Discman mientras al abrir en el estado cerrado, necesitamos dar el espaciado y despedido. Así que de nuevo, en el elemento de acordeón con una selección de alternar acordeón, y vamos a cambiar el valor de relleno a cero. Entonces incluso en estado cerrado, se ha entendido el espaciamiento y este hombre. Y ahora vamos a previsualizar esto. Ahora está funcionando perfectamente. Entonces en esta lección, hemos completado la animación requerida que necesitaba para la lista desplegable. En la siguiente lección, lograremos todo lo que necesitaba para la sección de preguntas frecuentes. 32. Sección de preguntas frecuentes: parte 3: Esta lección será la parte final de la sección de preguntas frecuentes. Tenemos en medio de una estructura innecesaria necesaria para la sección de preguntas frecuentes y también la animación para la lista desplegable. En esta lección, completaremos todo lo que sea necesario para la sección de preguntas frecuentes. Esa es la imagen de fondo de la misma. Y algunos de los ajustes necesarios para ello. Veamos cómo vamos a hacer esto. Necesitamos cambiar la ecuación de estas listas desplegables. Entonces estoy cambiando las preguntas. Y también necesitamos un otro acorde artículos. Así que de nuevo, lo estoy duplicando como o no tenemos un espaciado de cuadrícula en la parte superior e inferior. Entonces, con la selección de envoltura de contenido de preguntas frecuentes, estoy dando el valor de relleno en la parte superior e inferior de 200 píxeles. Y para la izquierda y la derecha, lo estoy dando como pixel AD. Ahora, todo lo que necesitamos para darle una imagen de fondo. Entonces con la selección de envoltura de contenido FAQ, voy a salir a los fondos y estoy cambiando el color a nuestro requerimiento. Vamos al radio del borde antes del píxel. Ahora, me voy a imaginar gradiente. Agreguemos una imagen de fondo en las opciones. Selecciona el color del tamaño, haz la posición para estar en el centro. Ahora voy a elegir la imagen requerida. Ahora podemos ver en el párrafo que es un color de fondo, necesitamos cambiarlo. Incluso con la selección del párrafo, podríamos ver que el color de fondo es transparente, por lo que debe ser otra cosa. Entonces en el navegador, estoy seleccionando la lista desplegable. En ella. Podemos ver que hay algo de color en el fondo. Y ahora voy a hacer que sea transparente. Ahora vamos a previsualizarlo. En la vista previa, podemos expandir y contraer fácilmente la lista desplegable con tintas. Y también tenemos que cambiar la flecha de abajo. Entonces con la selección de icono de grabación y otra topografía, estoy cambiando el color a nuestro entorno. Ahora. De nuevo, lo estoy previsualizando. Para ver si se ha cambiado. Tenemos que hacer este ligero ajuste entre las dos columnas. Entonces, en la cuadrícula de preguntas frecuentes, debajo de la cuadrícula Editar, estoy cambiando el tamaño de columna a 0.6. Y vamos a darle al hueco de columna hacer 60. Así que en el modo de vista previa, podemos ver el espaciado entre las dos columnas. Por lo que hemos completado toda la sección de preguntas frecuentes, pero en la siguiente lección, vamos a ver sobre la sección de newsletter. Veamos en eso. 33. Sección de boletines: En esta lección, vamos a ver cómo crear una suscripción desde donde daremos el ID de correo electrónico para poder suscribirnos para que podamos obtener el boletín a nuestro principal. Ahora llegando a la planeación, en la parte superior, tendremos un título y subtítulo con el nombre newsletter y suscribirnos a nuestro boletín. Y muchos lo hicieron. Utilizaremos el formulario de suscripción donde tiene un formulario de entrada para obtener el ID de correo. Y del lado derecho, tendremos un botón para suscribirnos. Cada una de las cosas usará este diblock vertical. Vamos a sumergirnos en la lección sobre cómo desarrollar este diseño. Antes de entrar en la lección, veamos sobre el modelo de caja común, que se aplicará para todas las secciones dentro del cuerpo. Necesitamos agregar una sección y debemos proporcionar el nombre de clase apropiado para esta sección. A continuación se muestra el espaciado para esta sección. Es decir, necesitamos darle el valor de relleno superior e inferior para ello. Después de crear una sección dentro de ella, necesitamos agregar un contenedor y se debe dar el nombre de clase para este contenedor. Ahora podemos agregar el elemento dentro del contenedor, que es apropiado para la sección necesaria. Otro cuerpo con una multa rápida, estoy buscando formulario de suscripción. Al ampliar el formulario de suscripción, pudimos ver un contenedor donde se denominó contenedor centrado. Al igual que en el diseño que hemos visto, hay un título y un subtítulo. Vamos a usar el estilo de sección de título, que ya hemos hecho en la sección anterior. Como estoy copiando este título de sección de la sección de precios, y lo estoy usando en el formulario de suscripción. Así que aquí también se usa el mismo estilo. Ahora, cambiemos el título y un subtítulo para el formulario de suscripción. Hemos terminado esta sección de título llegando al formulario de suscripción donde tiene un contenedor central. Estoy eligiendo eso al expandir ese contenedor central, podríamos ver los elementos que se utilizan en el formulario de suscripción. Dentro de esta, tenemos un rubro, pero de acuerdo a nuestro diseño, con no tiene ninguno de los rubros. Entonces lo estoy borrando. Siguiente. Por defecto, hay un párrafo. Nuevamente, no necesitamos ninguno de los párrafos como en el diseño. Así que nuevamente estoy borrando esto dentro de los copos de formulario de suscripción. Hay otro desarrollado con el nombre subscribe form input wrapper, donde este wrapper es para contener el correo electrónico y el campo de texto de entrada. Y nuevamente al expandir esto, hay una etiqueta de campo y una entrada de formulario de suscripción. Al igual que en el diseño, no tenemos ninguna de las etiquetas. Entonces estoy saliendo con esta etiqueta de campo. Ahora, sólo tenemos el campo de texto de entrada y un botón. Ahora estoy seleccionando el botón Enviar para dar el nombre de clase para este botón, estoy eligiendo el botón de nombre de clase existente. En el Lienzo. Podríamos ver el estilo que se almacenan en esta clase de botón se hereda a este botón. A continuación, tenemos que concentrarnos en la entrada del formulario. Entonces con la selección de la entrada de formulario de suscripción, voy a otra frontera en el diseño, tenemos una línea en la celda inferior. Estoy seleccionando el borde en la parte inferior. Estoy dando el color, como en nuestro diseño, solo necesitamos línea en la parte inferior, pero no otras tres. Entonces estoy eligiendo otras tres botellas. Estoy eligiendo el estilo a ninguno. Para obtener el espaciado con la selección de entrada de formulario de suscripción. Voy a otro espaciado y estoy dando el valor del margen derecho como 20 píxeles para ganar el ancho completo. Para esta entrada de formulario, necesitamos seleccionar el envoltorio, que es el envoltorio de entrada de formulario de suscripción. Y otra talla le estoy dando la anchura 200 persona. Por lo que el ancho se ocupará a las cien personas. Hemos realizado el ajuste de tamaño a la anchura. Ahora estoy seleccionando la entrada del formulario de suscripción. Y voy a esta configuración de campo de texto de entrada. Y pudimos ver un campo de texto con el nombre del lugar titular. ¿Qué son esos? Navega por nuestro sitio web. Necesitamos especificar cuál es el propósito de este campo de texto. Para ello, estamos utilizando este portacuchillas. Dentro de este portaplaza, estoy escribiendo como ingresa tu correo electrónico. En el Lienzo. Ese contenido, que hemos escrito en el escenario es un replicado aquí. Y ahora todo lo que necesitamos para dar el tipo de gráfico o este texto marcador de posición. Estoy eligiendo esta vez a cursiva. Hicimos este ordenamiento en mosqueado al texto del marcador de posición. Entonces tenemos que establecer el estado. Ahora voy al selector y estoy eligiendo el estado para colocar titular. El propósito de elegir este marcador de posición es que nos permite diseñar las garrapatas del marcador de posición por separado del tipo al texto. El texto del título heredará ese estilo tipográfico del estado predeterminado. Ahora, hemos seleccionado el estado del marcador de posición, ya que ya hemos hecho el tipo de gráfica G para este marcador de posición. Ahora, vamos a llegar a la novena. ¿Obtuviste el espaciamiento entre el título y una forma? Estoy eligiendo el mismo contenedor de tonos y estoy dando el valor de relleno en la parte superior a 20 píxeles ya que este registro de formularios está ocupando mucho espacio. Entonces necesito ajustar el ancho de este registro de formulario a 600 píxeles. Por lo que el ancho se reduce considerablemente. Tenemos que establecer el color de fondo de la misma con la selección de color que estoy dando tiene un valor hexadecimal. Y para hacer la esquina redondeada, estoy dando el valor del radio debajo los bordes como 20 píxeles. Que los campos de texto y los botones estén tan cerca en su h, necesitamos dar el espaciado en todo él cita la selección de fórmula. Estoy dando el valor de relleno en la parte superior e inferior como 30 píxeles y un valor de relleno izquierdo y derecho como 40 píxeles. El color de este campo de texto no es apropiado como diseñador. Entonces estoy seleccionando esta entrada de formulario de suscripción. Voy a otro fondo y estoy eligiendo el color a transparente. Ahora, hagamos que la altura de este formulario ingrese a la altura del botón debajo del tamaño. Vamos a darle un valor de altura como píxel. Para volver a ganar el espaciado hacemos la sección de título y la forma. Estoy eligiendo el contenedor central y para el valor de relleno en la parte superior, estoy cambiando el valor S, 25 pixeles. Cambiemos el nombre de esta clase de derecho de formulario como bloque de formulario de suscripción. Ahora voy a publicarlo en suite en modo de vista previa. En el modo de vista previa, pude ver que nos hemos desarrollado, como en nuestro diseño y todo está funcionando muy a la perfección. Hemos desarrollado el formulario de suscripción para suscribirnos y recibir el boletín. En la siguiente lección, veremos cómo crear ese formulario de contacto. 34. Sección de formulario de contacto: parte 1: En esta lección, estaremos viendo sobre la sección de formulario de contacto. Antes de entrar en eso, veamos la planeación para ello. Esa será una cuadrícula con las dos columnas. En la cuarta columna, tenemos un título y un subtítulo que especifica sobre el uso de esta sección. Y debajo de este título, tendremos un conjunto de datos de contacto conmigo para una dirección. Y llegando a la segunda columna, tenemos un conjunto de campos de entrada con nombre, correo electrónico, empresa para MSH. Y con todo este detalle, podemos contactar con el artista. Entonces ahora tenemos la idea sobre la sección de formulario de contacto. Veamos cómo vamos a desarrollar este diseño. Sigamos adelante. Antes de entrar en la lección. Veamos sobre el modelo de caja común, que se aplicará para todas las secciones dentro del cuerpo. Necesitamos agregar una sección y debemos proporcionar el nombre de clase apropiado para esta sección. A continuación se muestra el espaciado para esta sección. Es decir, necesitamos darle el valor de relleno superior e inferior para ello. Después de crear una sección dentro de ella, necesitamos agregar un contenedor y se debe dar el nombre de clase para este contenedor. Ahora podemos agregar el elemento dentro del contenedor el cual es apropiado para la sección necesaria. Al principio, estoy creando una sección. Vamos a darle un nombre de clase para la sección como sección de formulario de contacto. Y dentro de la sección, estamos creando un contenedor. Estoy dando el nombre de clase para este contenedor como contenedor en sí mismo, como el vidrio existente. Ahora dentro del contenedor, estamos creando un blog. Vamos a dar el nombre de la clase para este dibloque S, formulario de contacto representante. Al igual que en el diseño, tenemos un modelo de cuadrícula. Entonces dentro de este representante, estamos creando una grilla. Y estoy dedicando uno de los caminos. Estoy dando el valor para la brecha como 50 píxeles. En el diseño ya hemos visto la primera columna es más pequeña que la segunda columna. Entonces necesito ajustar la cuadrícula con la selección de editar cuadrícula y ajustar la columna. Ahora necesitamos cambiar el nombre de la clase para esta cuadrícula. Vamos a darle un nombre de clase como cuadrícula de formulario de contacto. Con la selección de la grilla telefónica de contacto, voy a agregar un div, que se creará en la primera columna. Vamos a darle un nombre de clase para este dibloque S Formulario de contacto detalle representante. Ahora estoy creando otro div, que se creará en la segunda columna. Vamos a darle un nombre de clase para este formulario de contacto diblock S, rep. Como este div es crear un formulario con los ajustes de entrada. No hemos ajustado el espaciado para la sección. Entonces estoy seleccionando la sección del formulario de contacto y dado el valor de relleno en la parte superior e inferior, s 100 en la primera columna. Al principio, tenemos el bote de título con un subtítulo y el título, ya que hemos hecho una sección de muchos títulos. Entonces aquí vamos a copiar el título del formulario de suscripción. Y estoy duplicando n y arrastrando este título de sección al detalle del formulario de contacto wrap. Esta sección del título es mayor aquí. Pudimos ver en el selector hemos utilizado una subclase llamada center. Porque en lo anterior, ese es un formulario de suscripción, tenemos un uso este título puesto en el centro. Hemos usado y otro nombre de clase, centro. Pero aquí lo designamos. Eliminemos esta clase central. Por lo que este contenido del título se sangrará a la izquierda. Ahora tomemos el contenido de dos subtipos y el título, como en nuestro diseño. Ayudamos a terminar el título y luego necesitamos dar un detalle de contacto. Entonces con la selección de contacto a partir de detalle rat y creando un div el cual será mayor. Y al título. Vamos a darle un nombre de clase para el bloque de acero como elemento de detalle de contacto. Hemos hecho el espaciado para contener los datos de contacto. Y dentro de este detalle del ítem de contacto, vamos a crear un encabezado. Escojamos el rumbo tipo S, H tres. Estoy cambiando el contenido del encabezado a mayo. Y ahora necesitamos cambiar la tipográfica para este rubro. Ahora estoy cambiando el nombre de la clase para este encabezado como título detallado. Hemos creado un encabezado y luego todo lo que necesitamos un enlace que lleve a la celda de ID de correo dentro un elemento de detalle de contacto y creando un enlace. Entonces cambiemos el enlace de texto a la dama principal. llegar a la tipografía para este enlace, estoy eligiendo la fuente como Poppins, peso con 400 normales y un tamaño con el pixel que el color de fuente para ello sea color de contenido de la muestra. Y la altura será de 1.2 guión. O no necesitamos este hipervínculo. Entonces voy a esta charla y eligiendo el ninguno. Como hemos utilizado el enlace, solo podemos mantenerlo así. Tenemos que dar la transición para este enlace. Bajo los Efectos, estoy eligiendo transición y también quiero elegir qué tipo de transición debería ser. He seleccionado el color de fuente tipo S. Tenemos que darle la transición de color de fuente a este enlace may. Ahora en el sector, necesito seleccionar el estado que es todo el estado. Entonces, mientras se cierne, necesitamos cambiar el color de la fuente. Ahora voy a otra tipografía y estoy eligiendo el color al color primario de este reloj. Mientras estoy rondando sobre el enlace, el color cambiará. Ahora, veamos en este gen a ninguno. Ahora necesito cambiar el nombre de la clase para este enlace. El nombre de la clase será enlace de contacto. Necesitamos dar el espaciado en la parte inferior de este artículo de contacto al por menor para obtener el espaciado necesario para los próximos datos de contacto. Entonces estoy seleccionando el elemento de detalle de contacto y estoy dando el valor de relleno en la parte inferior, S, 20 píxeles. Se seguirá el mismo diseño para el próximo contactado con él sobre la selección de esta conducta, ya sea ítem en sí, lo estoy duplicando. Cambiemos este encabezado para formar los textos vinculados al número de teléfono. Ahora, nuevamente, estoy duplicando este ítem de detalle de contacto y cambiando el encabezado a dirección. Aquí estamos usando la dirección así que no necesitamos el enlace de texto. Entonces estoy borrando esto. Bajo este ítem de detalle de contacto, estamos creando un bloque de texto. El siguiente bloque es mayor aquí, y estoy dando el contenido de la dirección como en su diseño. Ahora necesitamos cambiar la tipografía para este bloque de texto. Ahora voy a cambiar el bloque de texto nombre de clase, S, dirección, detalle. Hemos terminado los datos de contacto que es necesario en la primera columna. En la siguiente lección, veremos sobre la creación del formulario de contacto en la segunda columna. Veamos cómo vamos a hacer esto. 35. Sección de formulario de contacto: parte 2: Hemos terminado los datos de contacto en la primera columna de la cuadrícula. En la segunda columna, vamos a crear un formulario de contacto, campos junto con el nombre, correo electrónico, empresa, mensaje telefónico, y con el botón. En esta lección, veremos cómo desarrollar este formulario de contacto, como en nuestro diseño, vamos a sumergirnos en él. Ya hemos creado este formulario de contacto campos envueltos con la selección de ocho. Estoy buscando un bloque de formulario. Ahora, este registro de formularios se crea dentro este formulario de contacto los campos ajustan por defecto en este formulario lag, tenemos la plantilla de nombre, dirección de correo electrónico junto con el botón de enviar. O expandiendo esta envoltura de campos de formulario de contacto, podríamos encontrar este bloque de formulario. Nuevamente al expandirlo, podríamos encontrar un formulario el bloque, un mensaje de éxito y un mensaje de error. Esta es la plantilla predeterminada para este bloque de formulario. Ahora estoy llegando al formulario y lo estoy expandiendo aquí. Podríamos encontrar una etiqueta de campo y un campo de texto. Y junto con el botón de enviar, ahora hemos visto cuáles son todas las cosas que hay aquí dentro del formulario. Voy a crear un dibloque donde contiene ese campo de texto. Ahora estoy arrastrando el dibloque en la parte superior. Ahora estoy colocando la etiqueta de campo y el campo de texto dentro de este blog recién creado. Vamos a darle un nombre de clase para este envoltorio de entrada de formulario div log S. Ahora estoy expandiendo este envoltorio de entrada de formulario. Aquí. Estoy eligiendo ese campo de texto. Vamos a darle un nombre de clase para este campo de texto como campo de entrada en el diseño, no tenemos la etiqueta. Entonces estoy borrando esta etiqueta de campo. seguirá el mismo estilo para todos los demás textos de relleno. Así que estoy duplicando el envoltorio de entrada de formulario hasta que lo necesité. Entonces los cambios que estamos haciendo dentro este campo de entrada se verán afectados en todos los demás campos de entrada. Ahora estoy eligiendo el primer envoltorio de entrada de formulario, y estoy seleccionando este campo de entrada. Ahora voy por debajo de las fronteras. Necesitamos una línea de fondo. Entonces estoy eligiendo la línea de fondo y estoy eligiendo el estilo como sólido. Estoy dando el color como en nuestro diseño. Entonces en el lienzo, se podría ver que el estilo se aplica en todos los demás campos de entrada. En realidad, no necesitamos una caja. Por lo que necesitamos seleccionar todos los demás bordes excepto la parte inferior. Necesito elegir el estilo a ninguno. Entonces al principio estoy seleccionando el borde correcto y elijo el estilo a ninguno. Lo mismo se aplica para otros modelos. Ahora la línea de fondo se crea en el lienzo. Ahora necesitamos darle un marcador para estos campos de entrada. Con la selección de entrada será, voy a la configuración debajo de la configuración del campo de texto, estoy dando el marcador de posición como nombre. Vamos a burlarnos de la tipografía para este marcador de posición. Bajo la tipografía, estoy eligiendo la fuente como Poppins leather wait before normal and size with 20 pixels and the height is 1.2 hyphen. Ahora vamos a darle el color de fuente para este color de contenido S de esta cuña. aplicará el mismo proceso para todos los demás campos de texto. Necesito hacer que todas las tomas de marcador de posición pretendan a la izquierda. Entonces en el espaciado, estoy dando el valor de relleno izquierdo a cero. El espaciado entre estos textos de relleno no es suficiente. Así que estoy seleccionando todo este ajuste de entrada de formulario, y estoy dando el valor de margen en la parte inferior como 40 píxeles. Ahora estoy seleccionando el botón de enviar. Ahora en el selector, voy a dar el nombre de clase para el botón de enviar como el botón de clase existente. El estilo, que se almacena en este botón de nombre de clase se heredará al botón enviar. En el diseño, no tenemos un ancho completo offline para que cada uno de los textos falle. Entonces necesitamos que sea más corto a la mitad. Entonces estoy seleccionando esta entrada de formulario junto con la clase existente. Estoy creando una nueva clase con el nombre medio ancho. Ahora bajo el tamaño, estoy dando el valor de ancho como 50 por ciento. La línea se acorta a su 50 por ciento. Ahora estoy seleccionando el segundo envoltorio de entrada de formulario y estoy usando el nombre de clase existente para esto para que el estilo se aplique a este formulario de entrada grep. El mismo proceso se aplicará para esta empresa y un teléfono. Necesitamos un ancho completo de línea para este mensaje, así que no lo voy a cambiar. Necesitamos hacer que este campo de entrada resida uno al lado del otro debajo del formulario y creando un dibloque. Estoy arrastrando el dibloque en la parte superior. Ahora estoy dando el nombre de clase para esto como envoltura de campos de entrada. Ahora estoy arrastrando el primero para formar el envoltorio de entrada dentro este campo de entrada rep. podríamos hacer los cambios como deseáramos. Ahora la selección de campos de entrada se envuelven bajo el diseño. Estoy eligiendo flex debajo de la Pantalla. El mismo proceso se aplicará para otros dos campos de texto. Ahora bajo el formulario y creando un perro, perro y arrastrándolo por debajo los campos de entrada rep. Ahora en el selector, estoy dando el nombre de clase para este dibloque como los campos de entrada de clase existentes rep. Ahora vamos a arrastrar los siguientes dos campos, es decir, compañía y un teléfono dentro de él. Necesitamos hacer el espaciado a la izquierda para todos los campos de entrada. Estoy seleccionando este envoltorio de entrada de formulario debajo del espaciado. Estoy dando el valor de margen para la izquierda como 40 píxeles. Por lo que los cambios que aquí estamos hechos se verán afectados también en todos los demás campos. Ahora el botón no está alineado correctamente, así que estoy seleccionando el botón Enviar. Si hago alguno de los cambios en esta clase de botón, se verá afectada a los demás botones. Entonces estoy calificando y otro nombre de clase, botón de formulario. Ahora estoy dando el valor del margen izquierdo para este botón como 40 píxeles. Ahora está alineado correctamente. Tendremos muchas palabras para este mensaje. Por lo que este libro de texto en particular no es suficiente. Entonces bajo este envoltorio de entrada de formulario, estoy creando un área de texto de elemento. Ahora estoy dando el texto del marcador de posición como mensaje. Nosotros hemos creado el área de texto, así que no necesita que este mensaje tome cuando estoy borrando esto. Ahora vamos a darle un nombre de clase para esta área de texto como campo de entrada de nombre de clase existente. Por lo que el estilo se aplicará a esta área de texto. Como necesitamos un poco más de altura para esta área de mensajes, estoy creando otro nombre de clase junto con el campo de entrada como área de texto. Permítanme dar el valor de altura como 110 píxeles. Pero necesito un poco más de altura, así que estoy cambiando el valor 240 pixeles. Ya lo hemos hecho. Pero en todo el relleno de entrada, el texto del marcador de posición está tan cerca de la línea. Para eso, necesitamos hacer un espaciado entre la línea y el texto marcador de posición. Entonces estoy seleccionando este campo de entrada, estoy dando el valor de relleno o el píxel S 15 inferior, pero necesito un poco más de espaciado. Así que de nuevo, estoy cambiando el valor a 20 píxeles. Entonces en esta lección, hemos completado el formulario de contacto junto con un estilo innecesario a todos los campos. En la siguiente lección, veremos cómo crear un color de fondo para este detalle de formulario de contacto y un campo de formulario de contacto junto con la alineación para estos dos, como en el diseño. Y por último, veremos sobre el mensaje de éxito, un mensaje de error para este formulario, vamos a sumergirnos en él. 36. Sección de formulario de contacto: parte 3: En las dos lecciones anteriores, hemos completado los datos del formulario de contacto y un formulario de contacto campos. En esta lección, vamos a completar todo el desarrollo como en nuestro diseño, junto con el color de fondo y alineación, mensaje de error y un mensaje de éxito. Veamos cómo vamos a hacer esto. del formulario de contacto y los campos del formulario de contacto no se alinean centrados. Entonces estoy seleccionando esta cuadrícula de formulario de contacto, otra capa, estoy seleccionando la línea central. Tenemos que dar el color de fondo para este detalle del formulario de contacto. Así que voy por debajo del fondo y estoy eligiendo el color como intervalo de diseño figma. Para hacer las esquinas redondeadas, estoy dando el valor como 40 píxeles para el radio debajo de los bordes. Entonces con la selección de este formulario de contacto llenar, voy a otro fondo y estoy dando el mismo color que en el Formulario de Contacto D hizo. Y vamos a darle un valor de radio como 40 píxeles debajo de los bordes, todos los campos de entrada tienen un color de fondo en blanco, pero necesitamos hacer el color como en el fondo. Entonces con la selección de este campo de entrada, voy por debajo del fondo, bajo el color, estoy eligiendo trasplante S. Entonces ahora el campo de entrada, color de fondo será trasplantado. Y también toma el color del fondo. El espaciamiento para este formulario de contacto detalle rap no es suficiente con la selección de deuda. Voy a otro espaciado y estoy dando el valor de padding o desktop como 90 pixel. Lo mismo aplica para el fondo. Estoy dando el valor de relleno para la izquierda y la derecha como 80 píxeles. Demos los mismos valores de relleno para el campo de formulario de contacto. Pero aún así el espaciado para el formulario de contacto campos rap no es lo mismo que la envoltura de detalle del formulario de contacto. Estoy seleccionando la cuadrícula, esa es la cuadrícula del formulario de contacto. Otra capa que estoy eligiendo estirar en la alineada. Pudimos ver en el formulario de contacto detalle envolver el espaciado y la parte superior es más. Entonces estoy cambiando el valor de relleno superior como 70 píxeles. Para obtener el espaciado entre cada uno de los campos de entrada, estoy seleccionando el envoltorio de entrada de formulario dar los cambios a esta clase. Ese valor se heredará a todos los demás campos de entrada. Ahora, con la selección del envoltorio de entrada de formulario, estoy dando el valor de margen en la parte inferior como 60 píxeles en cada uno de los elementos de detalle de contacto, el espaciado se ve más. Entonces con la selección de este elemento de detalle de contacto, estoy haciendo el valor de relleno inferior a diez píxeles, espaciándolo reducido a todos los demás elementos de detalle. Publiquemos esto para ver cómo funciona. La transición para el botón de envío está funcionando a la perfección, y la transición para el macho y el teléfono también funciona la cuadrícula. Ahora volvamos. Bajo el Bloque de Formulario. Tenemos otro log div con el mensaje de éxito del nombre. Al enviar correctamente el formulario, necesitamos recibir un mensaje de éxito. Y deja que el diseño que haga. He seleccionado el mensaje de éxito, el registro. Ahora voy a descender y debajo del Bloque Form sentado. Ahora necesito hacer el estado al éxito. Ahora voy a volver a este alicatado con su elección del mismo. Déjame cambiar la tipografía para este contenido. Estoy eligiendo el teléfono como Poppins. El color con un color secundario de la muestra. Deje que el tamaño entre el píxel. Ahora para cambiar el color de fondo, estoy haciendo otros fondos y estoy eligiendo el color como color primario de este reloj. El negro no, parece bueno. Entonces estoy cambiando el color de la fuente a blanco. Hemos terminado el mensaje de éxito. Pasemos al mensaje de error en el navegador. Estoy seleccionando el mensaje de error. Y bajo el escenario, estoy poniendo el escenario al error. Entonces, si hay algún error al enviar el formulario, recibiremos el mensaje de error. Hagamos este alicatado para este mensaje de error. Ahora, vamos a dar el tipo de fuente para este contenido como Poppins y un tamaño con 20 píxeles. Para obtener el, todo nuestro espaciado para este mensaje de error, estoy dando el valor de relleno en la parte superior e inferior como 20 píxeles. Y al valor de relleno izquierdo, lo estoy dando como 20 píxeles para ganar el espaciado entre el botón enviar y el mensaje de error, necesito darle un valor de margen. Entonces vamos a darle un valor de margen en la parte superior como 20 píxeles. Ahora estoy dando el color de fuente para este mensaje de error al color secundario de la muestra. Hacer la alineación correcta para este mensaje de error, como en el botón Enviar y los campos de entrada. Con una selección de mensaje de error, estoy dando el valor del margen a la izquierda como 40 píxeles. Ya hemos terminado la alineación, pero para el campo de entrada, no especificamos el tipo de ese ajuste de entrada. Entonces hagámoslo también. Para la entrada de nombre, tenemos el tipo como plano. Saltemos al correo electrónico. Le estoy dando el tipo al correo electrónico. Y también en la configuración del formulario, estoy dando el nombre para emitir en la configuración del campo de texto. Nuevamente, estoy dando el nombre como correo electrónico. Ahora para que la empresa falle. Demos el plano tipo S, el nombre para la configuración del formulario y el texto pulsante. Lo estoy dando como compañía. Ahora para el teléfono, Phil, estoy dando el nombre como teléfono en configuración del formulario y también la configuración del campo de texto. Y vamos a darle el teléfono tipo S. Ahora estoy seleccionando el campo de mensaje y estoy dando el nombre en el formulario configurando S mensaje. Hemos utilizado el área de texto. Entonces aquí no tenemos ninguno de ese tipo. Ahora voy a publicar esto. Así que ahora hemos desarrollado todo como en nuestro diseño y además se ve genial. En la siguiente lección, estaremos viendo sobre la sección de pie de página. 37. Sección de pies de página: parte 1: En esta lección, estaremos viendo una disección de comida de boda. Antes de eso, veamos el encabezado de planeación de cabeza, un nombre de autor que estará en el centro. Lo necesitamos. Estaremos creando un dibloque para sostener todas las redes sociales. Para cada una de las redes sociales, estaremos creando un dibloque separado. Otra vez dentro de ella. Eso es un dibloque para sostener logo. Y otro desarrollo para el nombre de las redes sociales y el enlace a la misma. Se seguirá el mismo procedimiento para el resto. Así es como vamos a hacer. Veamos cómo vamos a desarrollar esto. Antes de entrar en la lección. Veamos sobre el modelo de caja común, que se aplicará para todas las secciones dentro del cuerpo. Necesitamos agregar una sección y debemos proporcionar el nombre de clase apropiado para esta sección. A continuación se muestra el espaciado para esta sección. Es decir, necesitamos darle el valor de relleno superior e inferior para ello. Después de crear una sección dentro de ella, necesitamos agregar un contenedor y se debe dar el nombre de clase para este contenedor. Ahora podemos agregar el elemento dentro del contenedor, que es apropiado para la sección necesaria. Ahora, debajo del cuerpo, con la ayuda de la sección de grado de vino rápido, necesitamos dar el nombre de clase para esta sección. Dejar darle como sección de dosis de alimento. Ahora necesitamos crear un contenedor. Ahora estoy asignando el contenedor de clase existente. Este contenedor. Ahora dentro de este contenedor, estoy creando el blog. Deje que el nombre de la clase para el bloque de acero B Photo Grab. Para saber eso como foto, necesitamos agregar una línea en la parte superior. Entonces con la selección de comida o rap, voy a los bordes y estoy seleccionando el borde superior, y estoy eligiendo este azulejo como sólido, luego le estoy dando el color en un valor hexadecimal, como en nuestro diseño figma. No hemos especificado el espaciado para esta sección. Entonces estoy seleccionando esta sección de fotos y dando el valor de relleno en la parte superior e inferior como 100 píxeles para que podamos ver el espaciado en la parte superior e inferior. Ahora volviendo al agarre de carpetas, agreguemos el encabezado. Deje que el rumbo tipo B, H2. Tenemos que hacer que este rumbo sea el centro. Entonces bajo la tipografía, estoy eligiendo la alineación central. Estoy cambiando el contenido de este encabezado para mantenerme conectado, para cambiar la topografía del mismo. Voy a otra tipografía. Estoy eligiendo la fuente como Poppins. Peso con 500, tamaño mediano con 30 píxeles y la altura ancho, 1.5 guión. Necesitamos cambiar el color de la fuente. Entonces voy a otro color que estoy eligiendo como color secundario. Vamos a poner en mayúscula todas las letras. Necesitamos renombrar el nombre de la clase para este encabezado, que el nombre de la clase sea photo connect title. Necesitamos este rubro. Necesitamos agregar el nombre del autor. Entonces estoy creando una imagen. Al hacer clic en Elegir imagen. Estoy seleccionando el nombre del autor del activo para que sea como centro. Estoy eligiendo alineación central y otro tipo de grafeno. Hemos completado la sección de rumbo junto con el pedido. Y luego necesitamos crear todos los elementos de las redes sociales. Justo debajo de esto. Creamos un envoltorio de pie de página para este encabezado. Bajo este contenedor, estamos creando una ley div con el nombre photo social rep. Otra vez, dentro de ella. Estamos creando un otro diblock footer social items. Para cada uno de los ítems sociales, necesitamos crear un dibloque. Entonces bajo los alimentos o artículos sociales, estamos creando un dibloque con el nombre Elementos sociales. Dentro de cada elemento social, tenemos un ícono que es un logotipo y un nombre de elemento social. Y junto con ese vínculo. Entonces, al principio, vamos a crear un look div para sostener el ícono y otro elemento social. He dado el nombre de la clase para este o el blog como icono social. Envoltura. Dentro de esta agarradera de iconos. Estoy creando una imagen. Ahora estoy eligiendo la imagen del ácido, eso es un ícono de Facebook. Ahora necesitamos establecer el tamaño poder acotar a este logotipo. Entonces estoy seleccionando este ícono social y voy por debajo del tamaño. Estoy dando el ancho como 60 pixel y alto con 60 pixeles. Para dar el color de fondo. Estoy dando el color y hexadecimal como en el diseño de figma, necesitamos hacerlo como alrededor. Entonces, bajo las fronteras, estoy dando el valor del radio como 100 píxeles. Tenemos que colocar este logo en el centro. Estoy eligiendo un flex como display debajo del layout y alinearlo al centro y justificándolo al centro. Hemos terminado el wrap de iconos sociales. Ahora dentro del ítem social, necesitamos darle el nombre del ítem social con una selección de ítem social y crear otro diblock. Vamos a darle un nombre de clase para este dibloque S Social Text Wrap dentro de este representante, vamos a crear un encabezado que sea para el nombre de las redes sociales y dejemos el encabezado tipo B tenga tres. Ahora he cambiado el contenido del encabezado a Facebook. Ahora bajo la tipografía, estoy eligiendo fuente como Poppins. Peso como 500, tamaño mediano con fuente de 18 píxeles, color con color secundario de la muestra y alto ancho 1.3 guión. Hemos agregado el nombre de las redes sociales. Ahora necesitamos agregar un enlace. Bajo el Envoltura de Texto Social. Estoy agregando un enlace de texto. Ahora. Estoy cambiando este enlace de texto. Estoy llegando a la tipografía para este enlace de texto. Demos el tipo de fuente como Poppins, peso como manejador de archivo Medio, los sitios con 16 píxeles y la altura con un guión. Vamos a darle un color en un valor hexadecimal como intervalo figma design, no necesitamos ninguno de los hipervínculos. Entonces estoy eligiendo el estilo a ninguno, al espaciado de radio en la parte superior de estos textos de redes sociales, estoy eligiendo este encabezado. Estoy dando el valor de margen a cero píxel, que está en la parte superior. Y ahora necesitamos renombrar el nombre de la clase de encabezado como título social. De nuevo, voy a reducir el espaciado, el fondo. Entonces con la selección del título social bajo el espaciado, estoy dando el valor como cero en el margen inferior, necesitamos hacer el logo y el título social, es decir estar uno al lado del otro. Ya sabemos que estos dos ítems están dentro del ítem social. Entonces estoy seleccionando el ítem social, hago blog, y estoy eligiendo un flexbox. Lo estoy alineando al centro para crear un espaciado entre el icono y el texto. Estoy seleccionando la toma de texto social. Estoy dando el valor de relleno, que está a la izquierda, como 20 píxeles, para crear un espaciado de diapositivas entre el Facebook y el enlace. Estoy seleccionando el título social. Estoy haciendo el valor de margen en la parte inferior como pixel phi. Parece que el espaciamiento entre el icono social y un texto social es más. Entonces estoy seleccionando este ajuste de texto social y estoy dando el valor de relleno, que está a la izquierda a 15 píxeles. Pero siento que el espaciamiento entre estos Facebook y desvincular parece más. Entonces. Nuevamente, estoy cambiando el valor del margen a cero. Otra vez. seguirá el mismo diseño para recordar elemento social. Con la selección de ítem social, lo estoy duplicando. Hacer que todo el ítem social esté uno al lado del otro con la selección de comida o ítem social donde contenga todo el ítem social. Ahora estoy eligiendo el flex bajo el layout. Lo estoy alineando al centro. Necesitamos crear el espaciamiento entre cada uno de los ítems sociales. Entonces estoy seleccionando el ítem social y estoy dando el valor de margen que está a la derecha a 60 píxeles. Necesitamos artículos sociales. Y otra vez, lo estoy duplicando. Hasta ahora hemos terminado la comida que mareaba con el nombre del autor en todos los demás elementos de las redes sociales. En la siguiente lección, estaremos completando una sección completa de pie de página, como en el diseño web. 38. Sección de pies de página: parte 2: En esta lección, completaremos la comida o mala, como en nuestro diseño. Es decir, cambiando los elementos sociales y los íconos y también los enlaces. Así que terminemos con esto. Al principio, he seleccionado los elementos sociales fotográficos. Como ha ocupado todo el ancho, necesito hacer el fijo de la misma con la selección del ítem asociado de alimentos. Bajo el tamaño, estoy dando el valor de ancho S mil cien pixeles. Y para llegar al centro, bajo el espaciado, estoy eligiendo centro y además lo estoy justificando al centro. Ahora necesitamos establecer el color de fondo para los elementos sociales. Entonces bajo los fondos, estoy dando el valor de color en hexadecimal. Tenemos que hacer las cuatro esquinas como más redondas. Entonces bajo las fronteras, estoy dando el valor de radio S, 20 píxeles. Ahora vamos a dar el espaciado en la parte superior e inferior de los alimentos o artículos sociales. Así que voy por debajo del espaciado y estoy dando el valor de relleno en la parte superior como 40 píxeles. Nuevamente, estoy dando el valor de relleno en la parte inferior S, 40 píxeles. Hemos realizado la configuración básica necesaria para el representante social de fotografía. Ahora necesitamos cambiar los textos de iconos y enlaces para cada uno de los ítems sociales. Para el segundo ítem social, voy a cambiarlo como representante de drogas. Para ello, necesito cambiar el fondo y un icono, un texto, y también un enlace. Entonces al principio, estoy seleccionando el wrap de iconos sociales. Este rap icono social ha sido utilizado para todos los ítems sociales. Entonces, si hago alguno de los cambios, afectará a los demás. Entonces junto con la clase de rap de iconos sociales, voy a crear un Instagram de vidrio cualquiera. Entonces ahora podemos darle un color de fondo. Ahora voy a entrar en segundo plano y estoy dando el color que es adecuado para el Instagram. Hemos hecho el color de fondo para el Instagram. Ahora necesitamos cambiar el icono que está dentro de él. Entonces estoy seleccionando esta imagen que está debajo del icono social drag, y voy a reemplazar la imagen que es el Instagram. Ahora cambiemos el título social como el Instagram. Ahora, estoy eligiendo el enlace para cada uno de los ítems sociales. Necesitamos un enlace separado. Antes de eso, cambiemos el nombre de la clase a social. Junto con la clase ligada social existente. Voy a agregar otra clase ya que vamos a usar un enlace separado para cada uno de los ítems sociales. Vamos nueva clase llamada B Instagram. Ahora estoy cambiando el color del mismo que es adecuado para el Instagram. Ahora estoy pasando al tercer ítem social, es decir para el Twitter. Ahora necesitamos cambiar el color para el wrap de iconos sociales. Entonces, junto con la clase existente, estoy agregando una clase baja con un twiddle de nombre. Ahora estoy cambiando el color de fondo, que es adecuado para esa ventana. Ahora cambiemos la imagen del icono para el Twitter. Cambiemos el título social para esta S a Edo. Ahora he seleccionado el complemento de enlace social al enlace social. Estoy agregando en otra clase, viuda, y estoy cambiando el color de la misma. Ahora he seleccionado el ítem social completo que es para la u du. Ahora la selección de envoltorio de iconos sociales, estoy agregando una nueva clase junto con la clase existente. Y bajo el fondo, estoy cambiando el color. Ahora, reemplacemos la imagen existente. ¿Haces imagen? Ahora estoy cambiando el texto del título social a YouTube. Ahora estoy seleccionando el enlace social. Junto con el enlace social existente estoy agregando y la clase de YouTube. Otro color y cambiando el color que es adecuado para el año. ¿Necesitamos crear el espaciado y la parte inferior de este contenido, ya sea la selección del contenido del pie estoy dando el valor de relleno inferior a diez píxeles. Necesitamos el espaciado entre este wrap de pie de página y un footer social items. Entonces voy a cambiar el valor del margen en la parte superior a 40 píxeles. Entonces tenemos el considerable espaciamiento entre estos dos. Ahora siento que hay mucho espacio dentro de estos representantes fotográficos. Así que de nuevo, estoy reiniciando esto. Ahora he seleccionado la sección de pie de página. Ahora vamos a deducir poco la parte superior de este valor de relleno. Entonces estoy enseñando el valor de píxel a 60 píxeles. Ahora lo estoy publicando para ver cómo se ve. Esta ruta de carpeta se ve muy bien. Hemos completado todo el pie arriba, pero en la siguiente lección vamos a ver sobre la sección de derechos de autor. Pasemos a la siguiente lección. 39. Sección de pies de página: parte 3: En esta lección, estaremos viendo sobre la sección de derechos de autor. Veamos sobre la planeación de esta sección de derechos de autor. Ahora, estaremos usando una sección que consiste en dos bloques a cada lado, y luego bloquean en el lado izquierdo. Habrá un enlace para proyectos en casa sobre precios y contacto. Y dentro de la obra div en el lado derecho, ese será un contenido copyright. Así es como vamos a hacer esto. Veamos cómo vamos a desarrollar esto. Ahora, vamos a agregar un dibloque y otro contenedor. Vamos a dar el nombre de la clase para este bloque do como sección de copyright. Dentro de la sección de copyright, vamos a agregar otro diblock para mantener los menús. Vamos a crear el bloque d. Y estoy dando el nombre de la clase como envoltorio de menú de copyright. Necesitamos otro diblock para el contenido de copyright. Así que de nuevo, bajo la sección de copyright y creando un diblock, y estoy dando el nombre de la clase para esto desarrollado como envoltura de contenido de copyright. Volviendo al envoltorio del menú de copyright, necesitamos agregar los enlaces. El enlace se creará dentro del menú copyright rep. Cambiemos la tipografía para este enlace de texto. No necesitamos ningún hipervínculo, así que estoy eligiendo ninguno para el estilo. Vamos a darle un nombre de clase para este enlace de texto como enlace dominó de comida. Totalmente, estamos teniendo pelea x lnx. Entonces estoy duplicando este enlace de menú de carpeta por cuatro veces. Necesitamos agregar el espaciado entre estos enlaces de textos. Entonces estoy seleccionando esta línea de dominó de pie y luego dando el valor moderno a la derecha como 40 píxeles. Cambiemos el cada uno de los enlaces de texto como home. Proyectos sobre precios y contacto. Por ahora hemos terminado los derechos de autor Minnow. Vamos a saltar al contenido de copyright dentro de este envoltorio de contenido de copyright, estoy agregando un párrafo. Cambiemos el contenido del párrafo como contenido de copyright en nuestro diseño. Ahora, necesitamos alinear el menú de copyright y el contenido de copyright en una línea. Entonces estoy seleccionando la n disección, esa es la sección de copyright. Ahora vamos a elegir un flujo en la pantalla debajo del diseño. Estoy alineando y hago la misma masa para que los menús estén en la esquina izquierda y el contenido de copyright esté en la esquina derecha. Estoy eligiendo espacio entre otro justificado. No cambiamos el nombre de la clase para este párrafo. Entonces estoy seleccionando este párrafo y luego dando el nombre de la clase como copyright. Los textos de derechos de autor no se alinean perfectamente centrados como en el menú. Entonces voy por debajo del espaciado y estoy cambiando el valor moderno en la parte inferior a cero. Ahora, tanto los menús como el texto de copyright se alinean centrados para obtener el espaciado entre el representante social de pie de página y una sección de derechos de autor. Y estoy seleccionando la sección de copyright ahora, y estoy dando el valor de margen son los 240 píxeles superiores. La parte con patas estará al final del alcista. Entonces no necesitamos tanto espaciamiento al final. Entonces estoy seleccionando esta sección de pie de página y estoy dando el valor de relleno o el píxel inferior de 40. Publiquemos esto para ver cómo se ve. El espaciado y la parte superior de la sección corporativa no es suficiente. Entonces con la selección de sección corporativa y dando el valor de margen en la parte superior a 90 píxeles. Ahora, hemos completado la sección de fotos con un título de carpeta con el nombre, comida o rap social y una sección de copyright. En la siguiente lección, veremos sobre el ajuste de espaciado que es necesario para cada una de estas secciones. 40. Ajustes espaciales: En esta lección, vamos a hacer una afinación fina para el espaciado en cada una de las secciones como diseño de figma de intervalo. Veamos en esta lección cómo vamos a hacer el ajuste de espaciado. Al principio, he elegido esta sección, el valor de relleno para la parte superior e inferior para esta sección, he dado como 100 en la parte superior y 140 en la parte inferior. Ahora siento que necesito darle un poco de espacio en la parte superior y la inferior para el valor de relleno superior, lo estoy cambiando como 110. Ahora estoy llegando al espaciado del fondo. Nuevamente, necesito un espaciado más. Entonces estoy cambiando el valor de relleno inferior de 140 píxeles a 160 píxeles. He terminado la sección de servicio. Ahora estoy eligiendo la sección de galería. De nuevo para el valor de relleno superior. Lo estoy cambiando como 110. Ahora estoy llegando al fondo de esta sección. Podríamos notar visiblemente que el espaciado no es suficiente. Parece que está tan cerca del final de esta sección. Ahora estoy cambiando el valor de relleno inferior por ello. Deje que el valor sea de 140 píxeles. Parece bien en la parte superior. Pero para el fondo, siento que necesita un mayor espaciado. Entonces estoy cambiando el valor a 160 píxeles. Ahora vengo a la sección de taller para conseguirles más espaciado. En la parte superior, dentro de la sección de taller, voy al valor de bateo y estoy cambiando el valor como un píxel en la parte superior. Ahora estoy llegando al fondo como me siento, necesito reducir el espaciado. Entonces estoy cambiando el valor a 80 píxeles. De nuevo, siento que necesito reducir el espaciado. Entonces estoy cambiando el valor a 60 píxeles. Hemos terminado la sección de taller. Ahora voy a pasar a la sección de pestaña de licencias. En esta sección, siento que necesito reducir el espaciado en la parte superior. Entonces estoy cambiando el valor a 80 píxeles. El espaciado para la parte inferior para esta sección de pestaña de licencias parece estar bien. Entonces me voy así. Y ahora estoy llegando a la sección testimonial. El espaciado y la tina parece un poco alto. Entonces estoy cambiando el valor a dos píxeles. Ahora, un examen llegando a la sección de precios, aumentemos el espaciado en la parte superior. Entonces estoy dando un valor de relleno para esto como 110 píxeles. Al llegar al fondo, necesitamos esta gran cantidad de espaciamiento, así que me voy como está. Después de esto, estoy eligiendo esta sección de blog para aumentar el espaciado en la parte superior, nuevamente, le estoy dando al valor de relleno 210 píxeles en la parte inferior de esta sección de blog, que no necesita esto gran parte del espaciamiento. Entonces estoy reduciendo el espaciado a dos píxeles, que está en la parte inferior. Ahora estoy llegando a la sección de preguntas frecuentes. Déjame cambiar el valor de relleno en la parte superior a 80 píxeles. En comparación con el diseño de figma, no necesitamos tanto espaciado en la parte inferior. Entonces estoy cambiando el valor de relleno en la parte inferior a 20 píxeles. Pero de nuevo, siento que no necesito nada del espaciado y el fondo, así que estoy cambiando el valor a cero. Ahora llegando al formulario de suscripción, permítanme aumentar el valor de relleno en la parte superior a 120 píxeles. Y para reducir el espaciado del fondo, estoy cambiando el valor a 60 píxeles. Pero de nuevo, siento que necesito reducir el espaciado, así que estoy cambiando el valor a 40 píxeles. A continuación, estoy seleccionando la sección del formulario de contacto. El espaciado en la parte superior para esto parece estar bien. Entonces voy al fondo de la misma. Ahora estoy cambiando el valor 210 pixel. Pero de nuevo, siento que necesito aumentar el espaciado. Entonces estoy cambiando el valor 220 pixeles. A continuación, estoy seleccionando esta sección de fotos. Aquí. Siento que necesito aumentar el valor de relleno. Entonces estoy cambiando el valor a 80 píxeles, pero siento que los 70 píxeles parecen estar bien. Entonces lo estoy cambiando. Vamos a publicarlo para ver cómo se ve. Analicemos todo el espaciado comenzando desde el hogar. La sección Servicios se ve bien como la sección galería, sección taller, licenciamiento, pestaña, sección testimonial, sección precios, sección blog. Todo parece estar bien como en nuestro diseño. 41. Página de correo único: parte 1: Hemos hecho el listado de blogs en nuestra sección de historias de blog. En esta lección, vamos a crear una sola entrada de blog al hacer clic en esta lista individual de blogs. Veamos cómo vamos a duplicar esto como una, vamos a crear una página de entrada de blog. Entonces estoy eligiendo el panel de páginas debajo de él. Podrías encontrar una página estática, una página colección CMS, eliminar la página y los ingresos del discurso. Vamos a utilizar una página de colección CMS. Aquí dentro. Ya tenemos aves las plantillas de publicaciones de blog. Entonces estoy seleccionando esta plantilla de publicación de blog. Usamos las páginas de colección porque vamos a impulsar el contenido del blog de esta colección EMS. Ahora se ha creado la página. En el navegador. Podrías ver toda la sección que hemos creado hasta ahora. Desde este navegador, vamos a utilizar la sección de cabecera y la disección de alimentos. Como ya sabíamos que vamos a crear una sola página de entrada de blog. Dentro de la página de entrada del blog, necesitamos agregar una sección de encabezado y contenido principal del blog y una sección de pie de página. La sección de encabezado que vamos a usar aquí es de nuestro doble-up el proyecto ya que podríamos copiar la sección de encabezado y colocarla en la página. Pero si hacemos alguno de los cambios dentro del foso, no afectará el contenido principal. Y también si realizamos algún cambio en el contenido principal, no afectará el pH. Entonces, lo que vamos a hacer ahora, necesitamos usar el símbolo. El símbolo se utiliza para convertir cualquier elemento y sus elementos hijos en un componente reutilizable. Para que ese símbolo pueda ser utilizado en cualquier parte de nuestro proyecto. Es decir, los elementos particulares con todo el estilo se pueden utilizar en cualquier parte del proyecto. Así que vamos a mayor símbolo. Ahora. Se selecciona el elemento que se necesita. Ahora, ese es el representante de cabecera. Ahora elige los símbolos. Estoy dando nombre de símbolo de pato como área de cabecera. Ahora en digamos el símbolo del área de encabezado o tenemos los elementos de envoltura de encabezado. Ahora, uh, necesitamos una sección de fotos dentro de nuestra página de entrada de blog. Entonces estoy seleccionando la sección de pie de página del elemento con el selector de elementos. Voy a armar y crear un símbolo con un área de pie de página de nombre. Ahora vuelvo a la instancia en la página debajo de la página de la colección CMS. Estoy seleccionando la plantilla de publicaciones de blog. Entonces la página que hemos creado, como se muestra en el Lienzo en el navegador, se pudo ver cuerpo de un litro. Como ya hemos comentado anteriormente, vamos a desarrollar esta página con la sección de encabezado y contenido principal y una sección de pie de página. Al principio, estaremos teniendo una sección de cabecera. Entonces voy al símbolo y estoy seleccionando el área de encabezado. En esta página, se crea el área de encabezado. Necesitamos esta sección de encabezado. Vamos a crear un elemento de sección. Demos el nombre de la clase para esta sección como sección de detalles del blog. En su interior, vamos a crear un contenedor y usar el recipiente de vidrio existente. Bajo el contenedor, vamos a crear un duplicado y nombre que el bloque de registro S detalle envolver. Necesitamos crear una imagen bajo este bloque detalle rap. Como ya sabemos, hemos utilizado la página de colección CMS. Entonces en la configuración de la imagen, podrías ver la casilla de verificación con un nombre y obtener una imagen de la colección de publicaciones de blog. Simplemente selecciona eso y agrégalo. Podrías encontrar el campo selecto. En el campo de selección, elige una imagen principal para que la imagen sea reintentada desde la entrada del blog de la colección. Hazlo como alineado al centro. Hemos agregado la imagen principal. Lo necesitamos, necesitamos agregar el título de esa entrada de blog. Entonces dentro del detalle de la cuadra, Brad, estoy buscando un encabezado. Ahora, al no poder obtener textos de la entrada del blog debajo de él, seleccione el campo S nombre. El título de la entrada del blog se mostrará aquí de nuestra colección de publicaciones de blog. Cambiemos la fuente como Poppins. Y tamaños de 40 píxeles. Tenemos que dar el nombre de la clase para este rubro. Entonces estoy enseñando el nombre de la clase para este encabezado, encabezado detalle del blog S. Ahora necesitamos este encabezamiento de esta entrada de blog. Necesitamos agregar la fecha y el autor de esta entrada de blog. Entonces para eso, otro detalle de blog wrap, estoy agregando en otro blog tipo para mantener la fecha y el nombre del autor. Vamos a darle un nombre de clase para este diblock S block detalle metal bajo el blog needle meta. Agreguemos un bloque de texto. Habilita que obtenga textos de la entrada del blog. Bajo el campo de selección. Estoy seleccionando el campo de fecha de publicación. Por lo que ahora los datos se han agregado bajo el título de la entrada del blog. Demos la fuente como Poppins, peso como 500, tamaño mediano como 18 píxeles y ocultemos con guión 1.2. Y estoy eligiendo el color de fuente como color de contenido de la muestra. Necesitamos cambiar el nombre de la clase para este siguiente bloque como detalle del blog. Lo hizo. Necesitamos agregar el otro nombre para esta entrada de blog, otro detalle de blog, Mehta, estoy agregando otro bloque de texto para habilitar la obtención de texto de las publicaciones del blog. Ahora estoy seleccionando el campo como extraño que el nombre del autor haya sido recuperado de la colección. Ahora estoy cambiando la fuente como Poppins. Espera como quinientos, tamaño mediano como 18 píxeles y alto ancho 1.2 guión. Cambiemos el color al color del contenido. Tenemos que hacer la fecha de publicación y un autor nombrado para estar uno al lado del otro. Entonces estoy seleccionando todo el detalle del blog, Mehta. Y estoy eligiendo el flujo en la pantalla. Para que estos dos estén en el centro, lo estoy justificando al centro. Estoy renombrando el nombre de la clase como orden de detalle del blog. Para crear el espaciado entre la fecha de publicación y el nombre del autor. Estoy seleccionando la fecha de detalle del blog y estoy dando el valor de relleno para la izquierda y la derecha como diez píxeles. Vamos a aplicar el mismo valor para el blog detalle autor dos. Ahora vuelvo a la sección de detalles del blog. Y necesitamos proporcionar el espaciado y el fondo. Entonces estoy dando el valor de relleno en la parte inferior como 100 píxeles. Como hemos calificado la sección de encabezado y la imagen principal en el título, fecha de publicación y el nombre de un autor. Ahora todo lo que necesitamos para agregar todo el contenido del bloque y el wrap detallado del bloque que vamos a agregar en el bloque. Eso es para sostener el contenido de esta entrada de blog. Vamos a darle un nombre de clase para este contenido de detalle de bloque S dibloque. Estoy agregando un elemento Rich Text. Ahora habilita obtener textos de publicaciones de blog. Y estoy seleccionando el cuerpo del poste de campo. Así que todo el contenido que hemos guardado en la colección será reprobado y mostrado en el lienzo. Ahora necesitamos crear el espaciado apropiado para el contenido de este post. Entonces estoy seleccionando este contenido de detalle de blog y estoy dando el valor de relleno S 60 pixel. Tiene mucho espaciado en la parte superior. Así que de nuevo, estoy cambiando el valor a 40 píxeles. Siento que necesito agregar el espaciado de relleno para el encabezado. Entonces estoy seleccionando el encabezado de detalle del blog y estoy dando el valor de relleno S, 20 píxeles en la parte superior, diez píxeles en la parte inferior. Hemos completado el contenido del bloque. Ahora, necesitamos agregar el área de pie de página. Entonces estoy seleccionando el cuerpo. Voy a volver a los símbolos y estoy seleccionando el área de comida. Por lo que ahora la comida esa zona se agrega en la parte inferior. Vamos a publicarlo para ver cómo se ve. Estoy recargando la página. La cabeza esa zona, el contenido principal y el área de pie de página, todo está perfectamente colocado. En la siguiente lección, finalizaremos nuestra sección de blog. 42. Página de correo único: parte 2: En esta lección, finalizaremos toda la sección del bloque. Entonces en digamos, la sección de bloque, tenemos la lista de blogs al hacer clic en la imagen, el encabezado, debería redirigirnos a la única entrada del blog. Entonces voy al navegante. Y debajo de la sección de blog, estoy seleccionando la imagen del blog aliento. Y estoy creando un bloque de enlaces de elementos ya que necesitamos redirigirlo a la única entrada del blog. Entonces estoy calificando este bloque de enlaces y estoy colocando la imagen dentro del bloque de enlaces. Entonces, si colocamos la imagen dentro del blog de enlace, donde sea que hagamos clic sobre la imagen, nos redirigirá a la única entrada del blog. Con la selección de link blog, voy por debajo de la configuración. En la configuración del enlace, estoy seleccionando página porque hacer clic en la imagen y el encabezado, debería redirigir a la página de entrada del blog. Estoy seleccionando la página y otro elija una página de colección. Estoy seleccionando la entrada actual del blog. De la página actual de la colección de publicaciones de blog. la entrada de blog apropiada, es decir, mostrará la entrada de blog apropiada, es decir, una sola entrada de blog. Hemos creado un blog de enlace a la imagen. Ahora, todo lo que necesitamos para sentarnos para el encabezado debajo del área de contenido del blog. Estoy agregando un blog de enlace. Arrastremos el bloque de enlaces sobre el título del blog y coloquemos el título del blog dentro de ese blog de enlace. Entonces dondequiera que hagamos clic sobre el título, debería redirigir a la única entrada del blog. Ahora con la selección de bloque enlazado, tenemos que ir a la configuración. Bajo la configuración del enlace, estoy eligiendo la página, debajo de la página de colección, estoy seleccionando la entrada del blog actual. Ahora necesitamos cambiar el estilo del encabezado que está dentro de un blog de enlace. Ahora con la selección del blog de enlaces, voy a entrar en la topografía y estoy eligiendo ninguno para el estilo para evitar el hipervínculo y para el color de fuente, estoy eligiendo el color secundario de esta cuña. Vamos a cambiar el nombre de la clase para el bloque de enlace como bloques de enlace único. Tenemos que establecer la transición para el rumbo del bloque. Entonces voy a otra ética y estoy eligiendo la transición ya que debería tener lugar una transición para el color de la fuente. Entonces estoy eligiendo el color de la fuente. Ahora necesitamos cambiar este estado. Estoy seleccionando el estado como Hobo. Como ya he configurado, el color de la fuente debería cambiar en el estado hover. Voy a otro tipo de grafía, y estoy eligiendo el color como color primario. Publiquemos esto para ver cómo funciona. Vamos a recargarlo. Estoy rondando sobre el título. La transición está funcionando perfectamente. Ahora he hecho clic en él. Así que al deshacer clic nos lleva a otra página. En la nueva página, pudimos ver el único post del blog. Tomemos un escenario. En el campo de recolección. Si una imagen en miniatura, la fecha de publicación, el autor no está disponible. Por lo que a falta del valor en el campo, todo el estilo de la lista de bloques se verá afectado. Para evitar eso, necesitamos establecer la visibilidad condicional. Veamos cómo hacer eso. Ahora, estoy seleccionando el blog metal value. Ahora voy por debajo del escenario. Debajo de ella, se puede ver la visibilidad condicional debajo de ella. Agreguemos una condición. En el pop-up. Se puede ver que el elemento es visible. Una licencia cuando la condición que vamos a aplicar es cierta. Al principio, tengo que elegir el campo. Aquí. Es una fecha de publicación. Entonces estoy seleccionando el campo como fecha de publicación y luego configuro la condición S se establece, por lo que el elemento es visible. One Lee fue publicado conjunto de datos dentro del campo. Hagámoslo de nuevo por el nombre del autor. Para eso, de nuevo, estoy eligiendo blog de valor medio. Y voy bajo la visibilidad condicional y estoy agregando la condición. Ahora necesito elegir el campo. Entonces estoy eligiendo el campo como auto, y estoy eligiendo la condición S está establecida. Entonces el elemento es visible cuando Lee, cuando el orden se establece dentro del campo. Hagamos lo mismo con el separador. Eso es meta separador de blog. Estoy eligiendo el campo como ADA, y estoy configurando la condición S está establecida. Ahora estoy eligiendo el bloque excepto agreguemos la condición para eso también. Escojamos el campo como resumen de publicación y dejemos que se establezca la condición b. Este elemento uno solo es visible cuando el resumen del post se establece dentro del campo. Volvamos a hacer la visibilidad condicional para esa imagen de bloque. Para eso, estoy eligiendo envoltura de imagen de blog permite que el nombre del campo sea imagen en miniatura. Y se establece la condición b. En lo que va de la lección, hemos hecho un blog de enlace a la imagen en miniatura y al título del blog. Y también hemos hecho la visibilidad condicional para la fecha de publicación o el blog excepción de la imagen en miniatura de bloque. Entonces en la siguiente lección, estaremos viendo acerca de cómo hacer el desplazamiento suave al hacer clic en los enlaces del menú. 43. Menú de una página: desplazamiento suave: En esta lección, vamos a ver cómo hacer el desplazamiento suave al hacer clic en los enlaces del menú. Es decir, vamos a asignar la sección a cada una de ellas y resoluciones. Veamos cómo vamos a hacer esto. En el inicio del desarrollo. Empezamos con la navegación de cabecera en él. Hemos utilizado el ahora Vo, que consiste en enlaces de navegación. Entonces al hacer clic en ese enlace, deberá redirigir a la sección asignada. Al principio, vamos a trabajar en el link home now. Estoy dando click en este enlace de inicio. Debería llevarnos a esta sección de halo. Veamos cómo asignar esta sección de héroe a esta casa ahora, vinculada. Primero, necesitamos asignar un ID a este elemento en R para establecer el ID, voy por debajo de la configuración y dando el nombre de ID como home. Ahora tenemos asignado el nombre de ID para este elemento. Ahora, vayamos a la casa nivelando otra configuración de enlace. Estoy dando la URL como hash home. Hemos especificado la URL a este enlace de inicio ahora. Al marcar este enlace de inicio, buscará la cosa dentro la URL como hemos especificado como HOH. Entonces buscará un elemento que tenga este ID, y nos llevará a ese elemento. Hemos completado el enlace de inicio. Vamos a saltar a los proyectos por poco al hacer clic en este enlace de proyecto ahora. Debería saltar a la sección de galería. Entonces estoy seleccionando esta sección de galería y estoy asignando el ID para este elemento como proyectos. Ahora volvamos al link de navegación de proyectos. Ahora, bajo la configuración del enlace, necesitamos especificar la URL ya que hemos creado el id como proyectos. Entonces estoy dando ese nombre dentro de la URL como proyectos hash. click en estos proyectos , nos llevará a la sección de galería. Vamos a publicarlo para ver cómo funciona. Vamos a hacer clic en el proyecto. Mariln's, nos lleva a la sección de galería, llegando a la casa ahora. Tiene el color del azul, pero necesitamos cambiar este color. Siempre en una carga del sitio web. Será en una página de inicio. Por lo que ese enlace de inicio siempre estará en negro a continuación. Entonces necesitamos cambiar el color a negro. Entonces estoy seleccionando el enlace home. Hagamos el estilismo por ello. Entonces bajo la tipografía, estoy eligiendo color secundario de despacho. Hemos completado los dos primeros enlaces, home y proyectos. Veamos el enlace acerca de. Entonces al hacer clic en este enlace, debería llevarnos a ver mi sección de trabajo. Entonces vamos a darle el nombre de ID a este elemento. Ahora, voy a otra configuración y estoy dando el IDS sobre como hemos dado el nombre ID para este elemento. Ahora estoy volviendo a lo de la naftalina. Ahora dentro de esta configuración de enlace, necesitamos dar la URL como hemos dado el nombre de ID, como aproximadamente, ese nombre debe especificarse aquí. Ahora estoy dando el hash URLS sobre. Ahora saltemos al enlace de precios ahora. Entonces estoy haciendo clic en este enlace, debería llevarnos a la sección de precios. Entonces estoy seleccionando este elemento y luego dando el ID name S pricing. Ahora vamos a darle una URL a este enlace de precios ahora. Estoy dando los precios de hash URLS. Ahora voy al enlace de contacto ahora y estoy dando la URL como contacto hash. Al deshacer clic en este contacto, deberá llevarnos a la sección del formulario de contacto sobre la selección de este elemento. Voy a dar la identificación como contacto. Vamos a publicarlo para ver cómo funcionan los enlaces. Ahora estoy cargando esta página al hacer clic en el proyecto. Nos lleva a la sección de galería sobre tictac en este Ebert. Nos lleva a la sección de trabajo de CMA clic en el precio. Ahora lean nos lleva a la sección de precios. Ahora necesitamos concentrarnos en los enlaces que se encuentra en la sección de fotos. Como sabemos, esos son todos los enlaces. Se aplicará el mismo proceso para este enlace. ¿He seleccionado este enlace de inicio? Y voy a otro enlace sentado y dando a las URLS hash home lo mismo que estoy haciendo para los proyectos sobre precios y contacto. Ahora estoy dando clic en el enlace Inicio, que se encuentra en la sección de pie de página. Nos lleva a la casa. Estoy dando click en el enlace. Nos lleva a la sección correspondiente. Entonces el, todos los enlazadores están funcionando muy bien. Ahora voy a pasar a la sección de blog. Dentro de cada bloque, tenemos una sección de encabezado y la sección de pie de página. Veamos si los enlaces dentro este bloque están funcionando o no. Ahora estamos dentro de la mancha separada. Concéntrate en la dirección URL. Ahora. Ahora estoy dando click en los enlaces del proyecto, pero no funciona. Porque en la dirección URL, podrías notar que no hay una diagonal entre el nombre del blog, el ID del elemento. Entonces necesitamos hacer los cambios en la URL y luego los enlaces nav sentados. Ahora voy a volver a la lona. Ahora estoy seleccionando este proyecto ahora vincular otra configuración de nivelación. Estoy dando la URL como proyectos de slash ash. Por lo tanto, necesitamos agregar una diagonal en el marco en la URL para cada enlace de navegación. Vamos a comprobar si funciona o no. Estoy recargando la página y estoy dando click en este blog. Ahora estoy dando click en estos proyectos ya que ahora nos lleva a la sección de galería. Ahora estoy haciendo clic en el acerca de es que nos está llevando perfectamente a la sección necesaria como pudo ver en la dirección URL. Está perfectamente bien. En la siguiente lección, vamos a guardar nuestro ícono de archivo y un ícono de clip web. 44. Iconos de sitios y WebClip: En esta lección, vamos a ver cómo configurar el Fab Icon, un ícono para un sitio web. Antes de entrar en la lección, veamos cuál es el fairway ido y el icono del clip web. Y una tela como un pequeño icono que celdas como marca para nuestro sitio web. Su propósito principal es ayudar a los visitantes a localizar nuestra página más fácilmente cuando tienen múltiples pestañas abiertas. En Webflow, estaremos usando 32 por 32 píxeles para esta calle desaparecida. Ahora veamos sobre la web Clip Icon. Flip se asemeja a un ícono de aplicación. Pero en lugar de lanzar una aplicación, un agarre web lleva a un usuario directamente a su sitio web. Utilizaremos a la imagen de 56 por 256 píxeles para configurar un icono de volteo. Necesito un archivo con extensión donde P que estoy usando el Cloud convert.com. Con el fin de convertir el archivo JPEG. Al principio, necesito seleccionar lo necesario. Tengo el archivo JPEG con el nombre, sabe clip web. Entonces estoy seleccionando eso ya que es un archivo JPEG. Necesito convertir este archivo a página web. Antes de convertir esto, necesito establecer el ancho y alto para esta imagen. Entonces bajo la configuración y dando el ancho y alto como 256 ya que esta es la resolución que se necesita para nuestro icono de globo web. Ahora nuestro archivo JPEG se convierte en archivo de página web. Descarguemos eso. Estoy guardando ese archivo como guión de clip web más extraño. Volvamos a nuestro proyecto. Haga clic en el proyecto sentado bajo la configuración general, podría ver íconos. Subamos primero el Fab Icon. El icono del archivo debe tener la resolución de 32 píxeles por 32 píxeles, ya que ya tengo ese archivo con esta resolución. Así que estoy seleccionando ese archivo en la descripción se podría ver el archivo PNG o JPEG es suficiente para el icono fab. Ahora se sube el icono de la calle. Ahora vamos a subir la web Clip Icon. Para esta web Clip Icon, necesitamos subir el archivo de página web ya que ya hemos convertido el archivo. Seleccionemos ese archivo. Hemos subido el clip web tanto fairway con Anna. Publiquemos esto para ver si se sube el fairway Kahn. Estoy recargando el sitio. Entonces sí, podríamos ver el ícono fab aquí. En la siguiente lección, estaremos viendo sobre cómo hacer que nuestro sitio sea receptivo a la tableta, móvil y escritorio. 45. Conceptos básicos para Webflow: En esta lección, vamos a ver cómo hacer que nuestro sitio web respondiera a la entrada de escritorio, tableta , móvil en paisaje y , móvil en paisaje y móvil aquí mismo en la parte superior del lienzo, podrías ver las ventanas. Es decir, los puntos de interrupción. El escritorio con una estrella es un punto de ruptura base. A partir de ahora, hemos completado el desarrollo en este punto de ruptura base. Así que todos los elementos que hemos utilizado en este punto de interrupción base se pasarán a los puntos de interrupción de lloyd. Así que no necesitamos recrear este elemento una y otra vez. Porque es un punto de interrupción más bajo. Un día lo que pasa es que necesitamos ajustar todos los elementos de acuerdo a sus puntos de interrupción. E1, un fin de semana, y hacer los puntos de interrupción más altos que el punto de interrupción base. Para crear el punto de interrupción más alto, haga clic en los tres puntos de la marioneta. Pudimos ver el punto de ruptura más grande con un valor esos en píxeles AD, mil por 40 píxeles y mil 920 píxeles. Aquí, estoy eligiendo esos y 920 pixeles. Ahora nos llega el mensaje emergente. Para crear. Los puntos de interrupción no lo son. Así que haga clic en el Crear para que se cree el punto de interrupción más alto. Ahora, podríamos ver la diferencia entre la punto de interrupción más alta y la vista de punto de interrupción base. Este punto de interrupción más alto se utilizará si tenemos un escritorio más grande que el punto de interrupción base. Ahora estoy volviendo al punto de interrupción base y estoy dando clic en la cuadrícula del área de encabezado. En la maquetación, se podían ver los dos colores. Ese es uno con el naranja y otro con el azul. El color naranja indica que el estilo de los elementos seleccionados se hereda de una etiqueta o una clase base. Si el indicador de estilo es azul, significa que este elemento styles proviene de la clase actual. Es decir, si hacemos alguno de los cambios a este elemento, entonces el indicador se volverá azul. Déjame explicarte con detalle qué otro ejemplo. Ahora he seleccionado la sección de servicio. Bajo el espaciado, se puede ver el indicador azul. Eso significa que hemos hecho los cambios en esta clase de sección y también en este punto de interrupción base. Ahora voy al punto de interrupción más alto que hemos creado ahora en la sección de encuesta de este punto de interrupción más alto, bajo el espaciado, podríamos ver que el indicador de color es naranja. Ahora bien, debido a que este valor se hereda del punto de interrupción base, si hacemos los cambios aquí, entonces el valor cambiará a azul. Uno solo si hacemos los cambios en el punto de interrupción base, se verá afectado en el punto de interrupción más alto y también al punto de interrupción más bajo. Pero si haces alguno de los cambios en el punto de interrupción más alto, no afectará al punto de interrupción base. Así que siempre ten cuidado con eso. A partir de ahora, hemos visto sobre el punto de interrupción base y el punto de interrupción más bajo, y también hemos creado el punto de interrupción más alto. En la siguiente lección, veremos cómo hacer que nuestro sitio web responda a la tableta. 46. Respuesta a Tablet View: parte 1: En esta lección, estaremos viendo cómo hacer que nuestro sitio sea receptivo a la tableta. Es decir, estaremos diseñando todo nuestro sitio web en función de la vista de la tableta. Veamos cómo vamos a hacer esto. Al principio, estoy comprobando el, todos los elementos que hemos desarrollado en el punto de interrupción más alto. Así que todo lo que hemos creado está perfectamente alineado y perfectamente ahora, pasemos al punto de ruptura base. Otra vez. En el punto de interrupción base, desmarcando el, todos los elementos. Ahora pasemos a la vista de tableta. Entonces en esta vista de tableta, todo el elemento no está alineado correctamente ya los valores que hemos creado en el punto de interrupción base se heredan a la tableta. Entonces necesitamos ajustar los valores de acuerdo a la tableta. Siempre mantén una cosa en tu mente. Si haces alguno de los cambios en la tablet, afectará el paisaje móvil y el puerto móvil, ¿verdad? Pero no afectará también al punto de ruptura base. Si haces alguno de los cambios en el móvil, no afectará a la tableta y al punto de interrupción base. Así que mantén estas cosas en tu mente. Empecemos a hacer este alicatado y la vista de tableta. En el área de cabecera, estoy eligiendo el contenedor que está debajo del representante de cabecera. Aquí pudimos ver que los contenidos están tan cerca del borde de esta vista de tableta. Al principio, estoy cambiando el tamaño máximo de ancho de este contenedor como 100 por ciento para que tome el 100 por ciento de un ancho. Ahora voy al espaciado de la misma, y le estoy dando el valor de relleno a la izquierda como 30 píxeles. Ahora en el lienzo, podría ver que los demás elementos también se ven afectados porque en toda la sección, estamos usando el contenedor con el mismo nombre de clase, contenedor. Entonces, si hacemos alguno de los cambios a este contenedor, también está afectando a todos los demás elementos que están usando el contenedor de nombre de clase. Bien, volviendo al estilo, ahora tenemos que darle el espaciado y el derecho. Entonces estoy dando el valor de relleno o el derecho como 30 píxeles. Ayudamos a crear el espaciado. Ahora bajo la barra de navegación, estoy eligiendo un contenedor. No necesitamos tanto espaciado en su cada n. Ahora, necesito cambiar el valor. Pero tenga en cuenta que aquí también, estamos usando el contenedor de nombre de clase existente. Si realiza alguno de los cambios aquí, afectará a los demás elementos que están usando este contenedor className. Para evitar eso, estoy creando otro nombre de clase como relleno mínimo de encabezado. Ahora cambiemos el valor de relleno a cero a la izquierda y cero a la derecha. Ahora bien, no afecta a los otros elementos que están usando la clase contenedor. Hemos terminado el área de cabecera. Ahora voy a pasar a la sección de envoltura de héroes. En la sección de héroes, he elegido la cuadrícula del área del héroe. Entonces aquí, si usamos las columnas, los elementos en su interior parecen ser tan pequeños. Para evitar eso, necesito eliminar una de las columnas. Entonces el contenido de la misma se verá como uno por uno. Para ello, voy por debajo la cuadrícula Editar y estoy borrando una de las columnas. Ahora, ajustemos el tamaño de la columna a uno para que tome el ancho de pantalla completo. Ahora estoy seleccionando la sección de héroe en vivo. Ahora bien, se puede ver que hay mucho espaciado a la izquierda. Entonces bajo el espaciado, estoy dando el valor de relleno o la izquierda como cero. Para que el contenido esté en el centro, lo estoy justificando al centro. Y además no necesitamos tanto de gran tamaño para el título del área de héroes. Con una selección de título de área de héroe, estoy cambiando el tamaño a 50 píxeles, pero se ve tan pequeño. Entonces nuevamente, estoy cambiando el valor a 55 píxeles. El contenido de la sección de héroes y la imagen se ven muy cerca el uno del otro. Necesitamos crear un espaciado entre estos dos. Entonces estoy seleccionando esta sección de elevación de héroes. Entonces en el espaciado, estoy dando el valor del margen en esa parte inferior como 40 píxeles. Ahora, siento que el contenido de la sección de héroe en el lado izquierdo con algo del espaciado. Con la selección de héroe sección izquierda. Estoy eligiendo la izquierda en el testificado. Y luego voy al espaciado y estoy dando el valor de relleno a la izquierda como 40 píxeles. Por lo que hemos terminado el área de cabecera y la sección hero rep. Pasemos a la sección B. En la sección Servicios, necesitamos hacer los ajustes por el contenido de los soviéticos. Aquí, hagamos que el contenido de la grilla de servicio S con los dos primeros contenidos estén uno al lado del otro, y el último contenido esté por debajo de los dos primeros contenidos. Para eso, estoy eligiendo esto siempre como grilla. Voy por debajo de la cuadrícula Editar. Como ya hemos dicho, necesitamos un líder para seguir estando en la cima. Entonces estoy borrando una de las columnas. La tercera columna vendrá bajo los dos primeros contenidos. Ahora podíamos ver que el segundo contenido es poco app que el primer contenido. Necesitamos hacer una alineación correcta con el primer y segundo contenido. Estoy eligiendo el segundo y voy por debajo de la posición ya que se nos da el valor para ello como un -100 o el top. Déjame cambiar el valor a cero. Ahora volviendo al tercer contenido, voy a la posición y vuelvo a cambiar el valor de la posición como cero. Por lo que hemos omitido la grilla de servicios ordenadamente. Ahora estoy saltando al título de la sección. Aquí. Voy a cambiar el tamaño de este título. Seamos 45 píxeles saltando al subtítulo de sección, eso es un servicios, estoy cambiando el tamaño a 30 píxeles. Por lo que ahora hemos completado la sección Servicios de estilismo. Ahora saltemos a la sección de galería. En la sección de galería, no pudimos ver el contenido que está dentro de la cuadrícula. Entonces hagamos el, cada uno de sus contenidos uno por debajo de los otros cuatro que al principio estoy seleccionando la galería para recta. Ahora, estoy seleccionando la cuadrícula de edición y borrando una de las columnas para que el contenido tome su ancho completo, permítanme ajustar el tamaño de la columna a un solo esfuerzo. Hemos completado la primera grilla. Ahora vamos a seleccionar la segunda cuadrícula de la galería. Con una selección de cuadrícula de edición. Estoy borrando una de las columnas. Ahora vuelvo a la sección de Servicios. En la parte superior de esta sección, pudimos ver que es mucho espaciado. El espaciado, estoy cambiando el valor de relleno o la parte superior como 80 píxeles, la parte inferior como cien píxeles. Ahora voy a volver a la sección de galería. Incluso aquí, tenemos mucho espaciado en la parte superior. Entonces déjame cambiar el valor de relleno o el perro como 80 píxeles y para la parte inferior como 100 píxeles. Ahora vamos a la sección de taller. Hay mucho espaciado en la parte superior, así que estoy cambiando el valor de relleno 200 píxeles ahora para hacer el contenido y uno debajo del otro, estoy seleccionando esta cuadrícula de taller y estoy borrando uno de la columna. Y cambiemos el tamaño de la columna a uno FOR para crear el espaciado entre el contenido del taller y la imagen del taller. Estoy seleccionando esta envoltura de imagen de taller. Voy por debajo del espaciado y estoy dando el valor del margen en la parte superior como 40 píxeles. Hemos terminado la sección de taller. Vamos al trabajo del CMI que es el modo medio. También he seleccionado la envoltura de trabajo de CMA aquí. Voy a hacer que cada contenido esté por debajo de dos. Y luego para eso, estoy seleccionando su grilla. Voy a la cuadrícula Editar ya que tiene tres columnas. Entonces estoy borrando dos columnas para tomar el ancho completo. Estoy ajustando el tamaño de la columna a una. Esta sección tiene mucho espaciado en la parte superior e inferior. Entonces estoy seleccionando un ajuste de palabras CMA y estoy cambiando el valor de relleno de la misma para los 200 píxeles superior e inferior. Ahora necesitamos crear un poco de espacio entre el autor en dibujar una biografía del autor. Para eso, estoy seleccionando otro representante bio. Y me voy al espaciado. Estoy dando el valor de margen a 20 píxeles en la parte superior y 40 píxeles en la parte inferior. Para reducir el espaciado. Y al final de esta sección, estoy seleccionando, vea mi sección de trabajo, esa es la disección final. Voy al espaciado y déjame cambiar el valor de relleno en la parte inferior como 60 píxeles. Nuevamente, cambiemos el valor de relleno en la parte superior a 80 píxeles. Hemos terminado esta sección. Pasemos a la sección de la pestaña de licencias. En la sección de pestaña de licencias también, hemos utilizado el modelo de cuadrícula. Aquí también. Vamos a hacer que cada uno de los contenidos esté abajo el uno al otro. Para eso, con una selección de grilla de licencias, voy por debajo de la cuadrícula Editar y estoy borrando on de la columna. Y vamos a darle el valor de la columna a uno para crear el espaciado entre la imagen y el contenido. Estoy seleccionando el ajuste de contenido de licencia, y le estoy dando el valor de margen en la parte superior para ello como 60 píxeles. Podríamos ver, necesitamos editar el espaciado para el contenido de la pestaña. Para ello. Estoy seleccionando la pestaña mala y voy al espaciado. Ajustemos un valor de relleno para ello. En la parte superior, lo estoy dando como 70 pixeles. Para los dos últimos, estoy dando el valor como 70 píxeles. Así que ahora podríamos ver todo el espaciado es parejo. Pero siento que el espaciado a la izquierda y a la derecha se reducirá. Entonces estoy dando el valor de relleno para la izquierda y la derecha como 50 píxeles cada uno. Ahora estoy eligiendo el título del contenido de la pestaña. Voy por debajo del tamaño para reducir el valor de tamaño. Déjame darle el valor de tamaño como 40 píxeles. Ahora estoy eligiendo el párrafo de la misma. Y en el selector, estoy eligiendo todos los párrafos y estoy cambiando el valor de tamaño a 18 píxeles. Tenemos una sección de pestaña de licencia terminada. Ahora paso a la sección testimonial. En esta sección dos, estamos usando el modelo de cuadrícula. En esto, necesitamos hacer que cada contenido esté por debajo de un antídoto. Para eso, estoy eligiendo la cuadrícula testimonial con la selección de cuadrícula de edición y borrando una de las columnas ya que tiene mucho espaciado y la parte superior. Entonces estoy seleccionando la sección testimonial. Estoy cambiando el valor de relleno en la parte superior a 60 píxeles. igual que dentro del ítem testimonial, tiene mucho espaciado. Con la selección de ítem testimonial. Estoy cambiando el valor de relleno a la izquierda, 250 píxeles. Y por el derecho a, estoy dando el valor como 50 pixeles. Ahora de nuevo, estoy cambiando el valor de relleno para los 250 píxeles superior e inferior para que el contenido dentro del elemento testimonial se distribuya uniformemente. El contenido testimonial parece estar horneado. Con una selección de contenido testimonial. Estoy cambiando el tamaño de la topografía a 25 píxeles. Ahora, deshaciendo los cambios al primer ítem testimonial, será heredado a otros ítems testimoniales. Ahora bien, para reducir el espaciado y el fondo para esta sección testimonial, estoy seleccionando esta sección testimonial. Estoy cambiando el valor inferior para el relleno como 80. Ahora saltemos a la sección de precios. Al igual que en la sección de precios en la parte superior, el espaciado es más. Así que estoy tomando el valor de relleno en la parte superior como sección de precios de 80 píxeles. Hemos utilizado un modelo de cuadrícula. Entonces estoy seleccionando esta cuadrícula de precios. Debajo de la cuadrícula Editar. Estoy borrando uno de la columna. Como necesitamos ajustar el envoltorio de la lista de precios. Así que estoy seleccionando esta envoltura de lista de precios y estoy cambiando la posición de absoluta a relativa. ha entendido el contenido de la lista de precios. Ahora podíamos ver que hay mucho espaciamiento y lo vivido. Entonces nuevamente, en la posición, estoy cambiando el valor a 0% a la izquierda. Lo mismo estoy haciendo bien? Ahora necesitamos ajustar el tamaño del título del precio. Estoy cambiando el tamaño a 45 píxeles. Nuevamente, cambiemos el tamaño por el precio a 60 píxeles. Para crear el espaciado entre estos artículos de precios. Estoy seleccionando la tarifa de precios. Voy a la grilla Editar. Y estoy dando el valor para el hueco de filas a 50 píxeles. En la sección de precios, hay mucho espaciado en la parte inferior. Entonces con la selección de la sección de precios, estoy cambiando el valor de relleno en la parte inferior como 140 píxeles. Hemos terminado la sección de precios. En la siguiente lección, estaremos completando la sección restante. Solo lo necesitamos para el punto de quiebre de la tableta. 47. Respuesta a Tablet View: parte 2: En esta lección, estaremos terminando todo el estilo necesario para el punto de interrupción de la tableta en la sección de bloques, hagamos el estilo para el elemento del blog. Como aquí, hemos utilizado la lista de recolección de datos. Por lo que al hacer los cambios en uno de los elementos del blog, automáticamente afectará a los otros elementos a que no es necesario hijo individualmente. Así que ahora estoy seleccionando este elemento del blog. Ahora voy a hacer el estilismo por ello. Por defecto, la dirección de este diseño es horizontal. Hagámoslo vertical. Ahora estoy seleccionando el área de contenido del blog ya que hay más espacio o la izquierda. Ahora bajo el espaciado, estoy dando el valor de píxel cero para el relleno izquierdo aquí podríamos notar que uno de los elementos del blog está empujado hacia abajo. Por lo que tenemos que hacer que el elemento de blog más antiguo para que se alinee correctamente con el título del blog se selecciona. Voy a reducir el tamaño ya que se ve mucho más grande. Cambiemos el tamaño a él a 28 píxeles. Pudimos ver en el Lienzo todos los elementos del blog están alineados. Ahora tenemos que hacer el estilo para la fecha de publicación y el nombre del pedido. Entonces estoy seleccionando la envoltura de metal de bloque. Y déjame darte la dirección de la disposición a macho vertical, La alineada a una izquierda, alineada como aquí, no necesitamos un separador. Entonces estoy configurando el separador de metal del blog y estoy eligiendo ninguno debajo de la pantalla para que todos los elementos queden ocultos. Para crear el espaciado entre la fecha de publicación y el nombre del autor, estoy seleccionando este valor de metal de blog. Voy a hacer el valor de relleno en la parte inferior, S, N pixeles. Ahora vamos a reducir el espaciado entre la envoltura metálica del blog y el extra del blog. Entonces estoy seleccionando este blog envoltura metálica. Y voy a cambiar el valor del margen en la parte inferior como diez píxeles. Y déjame cambiar el valor de relleno en el píxel inferior. Ahora vamos a deducir el espaciado en la parte inferior de la sección de bloque. Para hacer eso, estoy reduciendo el valor de relleno inferior a 40 píxeles. Hemos completado la sección de bloque. Pasemos a la sección de preguntas frecuentes. En la sección de preguntas frecuentes, hemos utilizado el modelo de cuadrícula. Dentro de la cuadrícula, tenemos un título de sección y un área de contenido. Tenemos que hacer que el área de contenido esté en la parte inferior del título. Entonces para eso, estoy eligiendo una cuadrícula de preguntas frecuentes y estoy borrando una de las columnas. Y cambiemos el tamaño a uno. Eso es mucho espaciado en general de esta sección de preguntas frecuentes. Entonces necesito reducir el espaciado. Entonces, con la selección de envoltura de contenido de preguntas frecuentes, estoy reduciendo el valor de relleno izquierdo a 40 píxeles. Despliega la derecha a 40 píxeles. Y cambiemos el valor de relleno en la parte superior e inferior, 260 píxeles. Ahora, vamos a cambiar el tamaño de este artículos de acuerdo. Pero la selección de acordeón pregunta, ya estoy usando el tamaño de la misma a 28 píxeles. Hemos utilizado el mismo nombre de clase para los artículos restantes. Entonces es automáticamente, me olvido de todos los demás artículos. Hemos completado la sección de preguntas frecuentes. Pasemos al formulario de suscripción. En la subgráfica a partir de eso hay mucho espaciado en la parte superior. Entonces voy a reducir el valor de relleno o el torque JHU AT pixel. El contenido dentro del formulario de suscripción parece ser bueno, así que me voy como está. Saltemos a la sección del formulario de contacto para reducir el espaciado en la parte superior. Permítanme cambiar el valor de relleno en la parte superior de 280 píxeles para que el contenido dentro de la cuadrícula esté en una columna. Estoy seleccionando la cuadrícula del formulario de contacto debajo de la cuadrícula Editar, estoy borrando una de las columnas. Y cambiemos el tamaño a uno para ocupar el ancho completo. Ahora estoy seleccionando el Formulario de contacto D Delbruck para reducir el espaciado en la parte superior e inferior. Déjame cambiar el valor de relleno y los 250 píxeles superiores. Y para el valor inferior como 70 píxeles. Ahora necesitamos reducir los tamaños de correo, teléfono y dirección. Entonces estoy seleccionando el detalle marea, yendo otra tipografía. Cambiemos el tamaño a 28 píxeles. Ahora, vamos a hacer el estilo para el formulario de contacto campos rep, con la selección de formulario de contacto campos wrap, voy a ajustar el espaciado o inferior dentro del rep. Ahora estoy cambiando el valor de relleno o la izquierda a 40 píxeles. Ahora estoy cambiando el valor de relleno en la parte superior e inferior a 60 píxeles. Como hay mucho espaciado entre la sección del formulario de contacto y el área del pie de página. Entonces con la selección de contacto de la sección, permítanme cambiar el valor de relleno en la parte inferior a 80 píxeles. Entre el formulario de contacto, un detalle y un formulario de contacto llenar. El espaciado es menor. Con una selección de formulario de contacto de la cuadrícula. Voy a la cuadrícula Editar y voy cambiar el hueco de filas a 30 píxeles. Para el hueco de columna, estoy cambiando a 16 píxeles. Ahora veamos la sección de pie de página. Dentro de la sección de pie de página, tenemos una fruta o artículos sociales. Como parte del ítem social va más allá del límite con la selección de alimentos o artículos sociales. Voy por debajo de la talla y le estoy dando el ancho al 100%. Para que el contenido dentro de los elementos sociales ocupe todo el ancho del punto de ruptura de la tableta. Ahora vamos a hacer que todos los ítems sociales estén en orden vertical. Para eso, con la selección de alimento asociado, estoy cambiando la dirección a una vertical. Ahora necesitamos crear el espaciamiento entre cada uno de los ítems sociales. Entonces estoy seleccionando el diblock con el nombre Elemento social. Bajo el espaciado, estoy dando el valor para el margen en la parte inferior como 20 píxeles. Dentro de la sección de pie de página, tenemos la sección de copyright. Entonces, seleccionemos esa sección de derechos de autor ya que el contenido dentro de la sección de derechos de autor está en posición horizontal. Ahora, tenemos que hacerlo como una vertical. Entonces con la selección de la sección de copyright, estoy cambiando la dirección dos verticales para crear el espaciado entre el contenedor de menú y el contenido. Estoy seleccionando el envoltorio del menú copyright. Voy por debajo del espaciado. Estoy dando el valor del margen mater a 20 píxeles. En lo alto de la restricción alimentaria, hay mucho espacio. Entonces le estoy dando el valor de relleno o el torque a 50 píxeles. Tomemos si cada sección está alineada correctamente. Ahora vamos a hacer el estilo para el botón central ahí dentro ahora, pero para el botón de menú, voy a hacer los bordes. Entonces me voy por debajo de las fronteras. Al elegir este azulejo, haga línea sólida. Y cambiemos el color del borde a color primario de esta muestra. Ahora vamos a crear el espaciado entre el nombre y el botón Menú. Bajo el espaciado, permítame darle el valor del margen o la izquierda a 20 píxeles. Ahora estoy seleccionando la configuración del botón de menú para mostrar los Menús más antiguos dentro del botón de menú, permítanme habilitar show debajo del menú. Por lo que todos los elementos del menú se mostrarán en el lienzo. Ahora necesitamos cambiar el color de fondo para este ahora amino. Entonces con la selección de ahora Minow, y estoy eligiendo el color al blanco. Eso es mucho espaciado a la izquierda para el nominal. Entonces estoy cambiando el valor de relleno o la izquierda a cero. Ahora, necesitamos cambiar el color de fondo para el botón de menú en el estado abierto. Entonces ahora voy por debajo de los fondos y estoy cambiando el color al color primario de la muestra. Ahora necesitamos ocultar el contenido dentro del botón de menú con una selección de mínimo Dann voy por debajo la configuración y habilitando la opción Ocultar. Entonces, en esta lección, hemos completado cada estilo que se necesita para el punto de ruptura de la tableta. En la siguiente lección, estaremos haciendo el estilo para el punto de interrupción del paisaje telefónico. 48. Vista de paisaje móvil: En esta lección, haremos una página web respondida al teléfono móvil, que está en paisaje. Hagámoslo. Primero. Hagamos el estilo en el área de cabecera. En el área de encabezado, vamos a hacer la marca y el botón en el lado izquierdo, el botón de menú, y el número de teléfono en el lado derecho. Veamos cómo vamos a hacer esta parte. Primero, estoy seleccionando luego hacia afuera. Y hay mucho espaciado en la parte superior. Entonces estoy elevando el valor de relleno en la parte superior a 20 píxeles. Y nuevamente, estoy cambiando el valor de relleno en la parte inferior a 20 píxeles. Necesitamos crear el espaciado entre el nuevo botón de menú y el botón y el número de teléfono. Entonces estoy seleccionando la sección de encabezado Izquierda. Estoy dando el valor de margen en la parte inferior a diez píxeles para hacer la marca o la izquierda y el botón Menú. A la derecha, estoy eligiendo el encabezado ancho completo. Voy a otra capa. Estoy eligiendo la alineación elástica para que los artículos se estiren a lo largo del ancho del contenedor. Ahora necesitamos hacer el botón de registro a la izquierda y el número de teléfono a la derecha. Entonces estoy seleccionando la sección de encabezado y voy a la disposición y eligiendo espacio entre under justifique que los elementos dentro de ella se distribuyan uniformemente de borde a borde. Entonces ahora hemos hecho el estilo a la parte de cabecera. Ahora concentrémonos en la sección de envoltura de héroe. Aquí, necesitamos reducir el tamaño del título y el subtítulo. Entonces estoy eligiendo el título del área de héroe. Estoy ajustando el tamaño al perdido. Estoy finalizando con 40 píxeles. Seleccionemos el subtítulo del área del héroe y redujamos el tamaño a 30 píxeles. Estoy llegando al botón. Tiene mucho espacio por todas partes. Entonces estoy seleccionando el botón y voy al espaciado. Estoy cambiando el valor de relleno en la parte superior e inferior a 20 píxeles. Para la izquierda y la derecha, estoy cambiando el valor a 40 píxeles. Ahora conseguimos el estilo deseado. completa la sección de representante de héroes. Vamos a saltar a esta sección OB aquí el tamaño del título debe ser reutilizado. Entonces estoy seleccionando el título de la sección y estoy ajustando el tamaño hasta que obtengamos el tamaño deseado. Ahora estoy seleccionando el subtítulo de la sección y estoy ajustando el tamaño del mismo. En el punto de ruptura del paisaje móvil, vamos a hacer que el elemento de servicio se vea uno por uno para que esté seleccionando la cuadrícula soviética bajo el Editar. Estoy borrando una de las columnas y estoy dando el hueco de filas a 30 píxeles para que hayamos hecho el, cada elemento de servicio para ser amado uno por uno, tiene dentro del elemento de servicio hay mucho espaciado o menor . Entonces cambiemos el valor de relleno o el lift a 40 píxeles. Y lo mismo aplicaba para el derecho. Demos el mismo valor de relleno para la parte superior e inferior que 40 píxeles. Con el fin de reducir el espaciado entre el icono y el título del servicio. Estoy seleccionando el wrap de icono de servicio y les estoy dando valor de Audion en la parte inferior a 20 píxeles y llegando al título del servicio, cambió el valor de margen en la parte inferior a diez píxeles. Y además, vamos a ajustar el tamaño de la misma. Hagamos el estilo para el párrafo en el selector. Estoy eligiendo las viejas etiquetas de párrafo. Estoy cambiando el tamaño de la misma a 17 píxeles. Ahora vamos a hacer el estilismo para la sección de galería. En su interior, tenemos un artículo de galería. Dentro del elemento de la galería, el título se superpone la imagen y además no es visible. Entonces aquí vamos a eliminar la imagen de fondo y vamos a hacer el estilo para el contenido que está dentro de ella. Aquí, he seleccionado el elemento de galería en el selector, pudimos ver que hay dos clases como elemento de galería y galería para. Si hacemos alguno de los cambios, se aplicará para un segundo artículo de galería de un litro. Ahora voy por debajo de los fondos en la imagen y el degradado. Estoy eligiendo Ocultar. En lugar del color del trasplante. Estoy dando el color en hexadecimal. Ahora he seleccionado la galería titulada wrapper. En su interior hay mucho espaciado en la parte inferior. Entonces, bajo el espaciado, estoy burlándose del valor de relleno inferior a 40 píxeles. Entonces ahora tenemos un espaciado considerable. Ahora necesitamos reducir la altura de este elemento de galería. Bajo este tamaño. Les estoy dando una altura mínima a 400 píxeles con el fin de reducir el espaciado general dentro del elemento de la galería. Veamos los valores de relleno. En la parte superior, estoy cambiando como 50. A la izquierda, me llevo el asfalto. Y en la parte inferior lo estoy cambiando como 50 pixeles. Pero de nuevo, hay mucho espaciado. Entonces ahora voy a cambiar el valor mínimo de altura. Vamos a hacer el mismo estilo para el otro elemento de la galería. Aquí, estoy seleccionando el tercer elemento de la galería y estoy dando el valor mínimo de altura, hacer 300 píxeles. Ahora vamos a ocultar la imagen de fondo. Entonces debajo de los fondos y debajo de la imagen y el degradado, estoy eligiendo la altura para la imagen de fondo, y vamos a darle un color de fondo. Ahora estoy seleccionando el cuarto elemento de la galería. Para ello, voy a ocultar la imagen de fondo. Y nuevamente, hagamos que el valor mínimo de altura sea de 300 píxeles. Vamos a darle un color de fondo para ello. El contenido dentro del elemento de la galería de fotos está en posición horizontal. Tenemos que hacerlo como vertical. Entonces estoy seleccionando la galería alineación de mareas y voy por debajo de la maquetación. Estoy cambiando la dirección a vertical. Vamos a alinearlo a la izquierda. Hemos terminado el estilo de los tres artículos de la Galería. Pasemos al primer elemento de la galería. Aquí vamos a ocultar la imagen de fondo. Y estableceremos la altura mínima en 300 píxeles. Y también vamos a darle un color de fondo para ello. Ahora vamos a ajustar el espaciado general en el primer elemento de la galería. Espaciado, estoy cambiando el valor de relleno superior a 50 píxeles. Lo mismo para el fondo. Para la izquierda, lo estoy cambiando a 40 pixeles. Por lo que ahora hemos completado la sección de galería. Pasemos a la sección de taller. En la sección de taller, ese es el espaciado en la parte superior. Así que permítanme reducir el valor de relleno en la parte superior al píxel AD en el contenido dentro de la sección del taller parece estar bien. Vamos a saltar a la sección de trabajo de CMA. Esa es la sección Acerca de mí. En esta sección, voy a reducir el espaciado en la parte superior. Cambiemos el valor de relleno en la parte superior 280 píxeles. Y nuevamente, voy a reducir el espaciado y la mortem para reducir el espaciado a la izquierda. Déjame cambiar el valor a 60. Ahora voy a pasar a la sección de pestaña de licencias. En su interior. Estoy eligiendo el tap bend del contenido de la pestaña. Y vamos a reducir el valor general de relleno para la turbina. Aquí necesitamos reducir el tamaño del título del contenido de la pestaña. Déjame darle el valor del tamaño a 35 pixeles. Ahora he seleccionado aunque para envoltura persona-días, esta dirección de rap está en horizontal. Pero aquí necesitamos hacer que el contenido esté en una vertical. Entonces, bajo el diseño, estoy eligiendo la dirección S sobre la ética, y vamos a alinearla a la izquierda. Ahora necesitamos hacer que el contenido de la oferta arrastre para estar en la izquierda. Entonces digamos que el valor de relleno la izquierda a cero para hacer que el espaciado entre el valor de la oferta y el contenido de la oferta se ajuste, estoy dando el valor de margen en la parte superior. Haga 20 píxeles para esta oferta de contenido rep. Ahora he pasado a la sección testimonial. Redujamos el valor de relleno superior a 40 píxeles. Pasando ahora al ítem testimonial, en cuanto a la vista del paisaje móvil, designamos este gran ítem testimonial. Entonces necesitamos reducir el espaciado por todas partes. Para eso, estoy reduciendo el valor de relleno a la izquierda 230 píxeles. Estoy dando el espaciado o inferior a 30 pixeles. Llegando al contenido testimonial, necesitamos reducir el espaciado y el dedo del pie. Y también necesitamos reducir el tamaño de fuente para esto. Entonces bajo la tipografía, le estoy dando el valor de tamaño a hacer el pixel. Como esto es en la vista móvil, necesitamos hacer este testimonio inclinado a estar en una escalera vertical. Entonces estoy haciendo la dirección como vertical y estoy alineando a la izquierda. Y también necesitamos un espacio entre la envoltura de detalle del cliente y una envoltura de cliente en espera. Entonces con la selección del cliente escribiendo rap y dando el valor de relleno en la parte superior a diez píxeles. Ahora volviendo al contenido testimonial, necesitamos reducir el espaciado en el modelo. Entonces estoy dando el valor de relleno y la parte inferior a diez píxeles. Podrías notar que hay mucho espaciamiento entre los elementos testimoniales. Entonces estoy cambiando el valor del margen de agua, hacer 40 pixel. No necesitamos lograr cada ítem testimonial porque hemos usado el mismo nombre de clase para cada uno de los mecheros de testimonio. Hemos terminado la sección testimonial. Ahora voy a pasar a la sección de precios. Dentro de la sección de precios, estoy seleccionando la marea de precios y necesito reducir el tamaño de la misma. Entonces estoy dando el valor como 30 píxeles. Lo mismo se aplicará por precio. Estoy cambiando el tamaño a 40 pixeles. A continuación, llegando al artículo de precios que es todo el bloque de bucle, necesitamos reducir el espaciado a la izquierda y a la derecha. Estoy haciendo el valor de relleno a la izquierda y derecha como 50 píxeles. Lo mismo tenemos que hacer en la parte superior e inferior. Entonces estoy cambiando el valor de relleno a 30 píxeles en la parte superior y en la parte inferior también, necesitamos reducir el espaciado. Entonces estoy dando el valor como 50 pixel. Ahora llegando a la lista de precios RAB, cambiemos el valor de margen o el D2, 20 píxeles. Ahora voy a reducir el valor de relleno Oliver, para el representante de la lista de precios. El ajuste del botón de precios está lejos en la parte inferior, por lo que necesitamos reducir el espaciado en la parte superior. Entonces estoy enseñando el valor de relleno o el perro a 20 píxeles. Para cada uno de los elementos de la lista, estoy reduciendo el tamaño todavía 18 píxeles. Veamos en el valor de margen para este elemento de la lista de arriba a abajo a 20 píxeles. Hemos realizado los cambios para el artículo de precios. Se heredará automáticamente al siguiente artículo de precios porque usa el mismo nombre de clase. Ahora estoy pasando a la sección de blog. Otra sección de blog, he seleccionado el título del blog. El tamaño de este título de blog parece ser un poco pequeño, así que tiendo a aumentar su tamaño a 30 píxeles. Aumentemos el espaciado que estamos haciendo el blog metal wrap y el blog extra. Entonces con la selección del blog Mehta, estoy dando el valor moderno en la parte inferior a 20 píxeles. Los cambios que hayamos hecho se heredarán automáticamente a los otros elementos del blog. Ahora he llegado a la sección de preguntas frecuentes aquí. Voy a reducir el valor de relleno en la parte superior para la sección 240 pixel y llegando al contenido FAQ RAB, vamos a cambiar el valor de relleno. Aquí he hecho el mismo valor o nivel. Y al principio, la sección titulada tamaño parece estar bien. Vamos a saltar al doble acordeón. Tenemos que reducir el tamaño de esta pregunta que está dentro. Por lo que he seleccionado según pregunta. Voy a entrar en la topografía y estoy reduciendo el tamaño a 20 píxeles, automáticamente afectará a las otras preguntas. ¿Hemos realizado los cambios en la sección de preguntas frecuentes? Ahora he llegado al formulario de suscripción. La forma está muy cerca del borde. Tenemos que hacer el estilo adecuado para este formulario. Al principio, estoy creando un espaciado entre el formulario de suscripción, una sección de preguntas frecuentes. Entonces estoy dando el valor de margen en la parte superior a 40 píxeles. Ahora he seleccionado el formulario de suscripción copos. Tenemos que hacer el contenido que está dentro un subscribe from flex para estar en artículo. Entonces con la selección de copos de formulario de suscripción, estoy eligiendo la dirección para ir vertical y vamos a alinearla a la izquierda para crear un espaciado entre el campo de entrada y un botón de suscripción y seleccionar el envoltorio de entrada del formulario de subíndice. Y estoy dando el valor de margen en la parte inferior a 20 píxeles. El subyacente de este campo de entrada está muy cerca del borde. Tenemos que hacer los cambios. Para hacer eso con una selección de bloque de formulario de suscripción, voy al tamaño debajo de él. Estoy cambiando el ancho al 100% al hacerlo como 100%, el contenido dentro de él estará dentro del ancho del 100%. Esta sección es palabra L. Pasemos a la sección, sección de formulario de contacto. Para ello, estoy cambiando el valor de relleno o el perro a 40 píxeles. Y ahora he elegido el detalle del formulario de contacto. Rob, estoy cambiando el valor de relleno, 60 píxeles para la izquierda y la derecha. Y para la plática, estoy cambiando el valor a 40 píxeles. Necesitamos reducir el tamaño de la dirección telefónica de correo. Así que he seleccionado el título detallado y estoy cambiando el tamaño bajo la tipográfica a 25 píxeles. Ahora necesitamos cambiar el tamaño del correo electrónico, identificación, número de teléfono y dirección, que son todo lo que necesitamos ese título de detalle. Entonces he seleccionado el enlace de contacto y voy a otra tipografía y estoy cambiando el valor para ayudar en pixel. Tenemos que hacerles todo el campo de entrada para que estén en un orden vertical. He seleccionado el ajuste del campo de entrada, y estoy eligiendo la dirección vertical. Entonces todos los campos de entrada llegan a la dirección vertical. Con el fin de reducir el espaciado. A la izquierda, he seleccionado el envoltorio de entrada de formulario, y estoy haciendo que el valor del margen a la izquierda sea cero. Tenemos que hacer lo mismo para el envoltorio de entrada de formulario, es decir, para el mensaje. Entonces le estoy dando más devaluación a la izquierda a cero. Otra vez. Es, de nuevo, hacer que este botón de administración esté en la izquierda. Entonces estoy cambiando ese valor de margen de la izquierda a cero. Entonces ahora hemos hecho que nuestro sitio receptivo al panorama móvil. En la siguiente lección, vamos a estar haciendo esto brillando en el código móvil, bien. 49. Respuesta a la vista de retratos móviles: En esta lección, vamos a estar estilizando para el puerto móvil ¿verdad? Punto de interrupción. Al principio, estoy empezando desde el área de encabezado, es decir, el entero envoltorio de encabezado. Necesito hacer el botón de registro y el número de teléfono para estar en artículos. Entonces estoy seleccionando la sección de encabezado y estoy eligiendo la dirección vertical. Demos el espaciado para el botón de encabezado, para la parte superior y la inferior. Con una selección de botón de encabezado, estoy haciendo el valor moderno en la parte superior a diez píxeles. Nuevamente, estoy dando el valor como diez píxeles para el fondo. En el área de cabecera, podríamos notar que es un espaciado que es un poco más espaciado a la izquierda y a la derecha. Necesitamos reducir un poco en la selección del contenedor debajo del wrap de encabezado, estoy cambiando el valor de padding para la izquierda y la derecha. El valor batió 20 píxeles. Hemos utilizado la misma clase de contenedor en todos los siguientes contenedores, que se encuentran dentro de esta sección. Entonces, si hacemos alguno de los cambios a esta clase en particular, será automáticamente de una deuda con todos los demás contenedores. Ahora he seleccionado el wrap de contacto de cabecera con el fin hacer que este wrap de contacto de encabezado esté en el centro, haciendo que el valor de relleno a la izquierda sea cero. Hemos terminado la sección de cabecera. Ahora vengo a la sección de representante de héroes. En su interior tenemos héroe masculino grab. El malato está tan cerca del borde. Entonces necesitamos hacer el ícono y el ID de correo para estar en Artículo. He seleccionado esta envoltura principal de héroe. Hago la dirección como vertical debajo de las capas. Para alinearlo correctamente, lo estoy alineando a la izquierda para darle un espaciado de luz. Estar haciendo el ícono de correo en una identificación de correo con una selección de héroe puede vincular. Estoy dando el valor de relleno en la parte superior a cinco píxeles yendo al título del área de héroe, Redujamos el tamaño a 35 píxeles. Hemos terminado la sección de representante de héroes. Ahora he llegado a la sección de servicio. En ella. He seleccionado el título de la sección, y estoy cambiando el tamaño a 30 píxeles como el mismo. Estoy reduciendo el tamaño del subtítulo de la sección. Ahora he pasado al artículo soviético en él que es mucho espacio en todo el artículo de servicio. Bajo el espaciado, estoy reduciendo el tamaño del enlace o bajando el valor beta D pixel. Todo el elemento de servicios dentro la sección Servicios parece estar bien. Pasemos a la sección de galería. En la sección de galería, he seleccionado el primer elemento de galería dentro de él, o lo hemos reunido ocioso. Vamos a reducir el tamaño. Al mismo tiempo, reduciendo el tamaño para el título de categoría de galería. Ahora podríamos ver el contenido dentro del elemento de la galería no está alineado correctamente. Así que hagamos el valor de relleno a la izquierda al píxel como el mismo para el relleno derecho. Y también hay mucho espaciado y el fondo. Entonces voy a reducir el tamaño dándoles valor mínimo de altura. Deje que el valor sea de 250 píxeles. Ahora he seleccionado el segundo elemento de la galería en esta herramienta para alinearlo correctamente, estoy cambiando el valor de relleno y la izquierda al píxel. Redujamos la altura del elemento de la galería dándoles una altura mínima de 250 píxeles y otros sitios. Como hemos hecho antes, necesitamos cambiar el tamaño del título de la galería y el bloque de texto de la galería. Y necesitamos reducir el espaciado de la parte inferior de este párrafo. Entonces he seleccionado toda la fila del título de la galería, y estoy cambiando el valor de la misma a 20 píxeles, que está en la parte inferior. Repetimos el proceso para el elemento de la galería con un valor mínimo de altura a 50 píxeles. Hemos completado la sección de galería. Ahora he pasado a la sección de taller. En su interior, he seleccionado el código QR run. Tenemos que hacer el contenido que está dentro de este rap. ¿Sabemos qué diáconos, así que hemos seleccionado la dirección vertical, otra capa, y vamos a alinearla a la izquierda. Tenemos que dar el espaciado para la meta o la rep. Entonces con la selección de código o el rep, estoy dando el valor de margen en la parte superior e inferior a diez píxeles. Ahora he pasado a la escena, a mi sección de trabajo. En su interior, podríamos notar el contenido dentro de él y tan cerca de la h, no está centrado. Para ello, he seleccionado la CMA. Lo Grab, que el valor de píxel sea de 20 píxeles a la izquierda. Y ahora otra vez, vamos a darle el valor o el derecho a 20 píxeles. Ahora he llegado al video alineado, agárralo, parece que se estira demasiado. Entonces estoy cambiando el valor de relleno en la parte superior e inferior, 200 píxeles. Ahora siento que necesito hacer los cambios en el autor o el rap con la selección del mismo. Voy a otra talla y estoy dando el ancho y alto de la misma. Y que el valor sea de 200 píxeles cada uno. Pero siento que necesito cambiar el valor de ancho y alto. Entonces estoy cambiando el valor como 220 pixeles cada uno. Ahora he pasado al autor bio rep. Como siento que necesito reducir el espaciado en la parte superior. Entonces cambiemos el valor del margen en la parte superior a cero. Ahora voy a pasar a la sección de grifo de licencias. En su interior. Redujamos el tamaño del título del contenido de la pestaña. Ahora podríamos ver que el diseño se ajusta según nuestra necesidad. Y también hay un mayor espaciado para la izquierda y la derecha dentro de un panel de pestañas. Entonces he seleccionado la pestaña Ben, y estoy cambiando el valor de relleno a la izquierda y derecha a 20 píxeles. Ahora estoy cambiando el tamaño del subtítulo de la oferta ya que debería ser más pequeño que ese título del contenido de la pestaña. No hay espaciamiento entre la licencia de arte y la comisión. Eso es un grifos. Entonces necesitamos hacer el espaciado. Entonces estoy seleccionando el dabbling y estoy dando el valor de margen de los diez píxeles superiores, así se crea el espacio. Ahora de nuevo, estoy cambiando el tamaño del título del contenido de la pestaña. Con la finalización de la sección de grifo de licencias, voy a pasar a la sección testimonial. Ahora he seleccionado la sección testimonial. Redujamos el espaciado en la parte superior. Entonces estoy cambiando el valor de relleno en la parte superior a 20 píxeles. Ahora voy a reducir el tamaño para el título de la sección. Ahora se ve bien. Ahora estoy pasando a la ciegamente necesito hacer que el contenido dentro de esa línea los detalles sean ningún artículo. Entonces estoy eligiendo una vertical en la dirección, otra disposición. Para estar en la izquierda, lo estoy alineando al elevador. Al llegar al cliente detalle rap ya que no es directo a la imagen y a la lectura. Entonces con la selección de envoltura de detalle Klein, estoy cambiando el valor de relleno de la misma. Ahora vamos a reducir el tamaño del contenido testimonial. Y también estoy cambiando el valor de relleno en la parte superior. Ahora siento que necesito cambiar el tamaño del nombre del cliente y el trabajo del cliente. Entonces estoy cambiando la talla. Dentro de la sección de precios. Necesito hacer que el representante del título de precios no sea ningún artículo. Estoy eligiendo una vertical para la sección de datos. Y también el artículo de precios parece estar superpuesto al borde, por lo que necesitamos que se alinee correctamente. Estoy cambiando el relleno derecho e izquierdo mientras haces 20 pixeles. Después de esto, estoy seleccionando el representante de la lista de precios, ya que eso es mucho espaciado Oliver dentro del envoltorio de lista de precios. Entonces necesitamos cambiar el valor de relleno y dejar que el valor entre dos píxeles a la izquierda y derecha. Ahora siento que el contenido dentro representante del título del listado es ahora una calcomanía. Es decir, el MOG debería estar bajo el título. Y estoy eligiendo la vertical para la dirección. Entonces vamos a alinearlo a la izquierda. Y vamos a crear el espaciado entre estos dos. Entonces estoy dando el valor de margen en la parte inferior para el título de la lista. Ahora vamos a reducir el tamaño del elemento de la lista. Agregue a eso, necesitamos reducir el tamaño del botón. Al finalizar esta sección de precios, me estoy moviendo a la sección de blog. En lugar de sección de bloque, he seleccionado el elemento del blog. Dentro de este artículo del blog, necesitamos reducir el espaciado innecesario sobre él. Entonces estoy cambiando el valor del rodamiento a 20 píxeles. Para todo. Después de eso, estoy seleccionando el título del blog y estoy dando la altura como guión 1.2 y el tamaño a 28 píxeles. Ahora pasemos a la sección de preguntas frecuentes. Dentro de la sección de preguntas frecuentes, todo el contenido se superpone al borde. Así que al principio estoy seleccionando el envoltorio de contenido FAQ. Y ya estoy usando un valor de relleno a la izquierda a diez píxeles. Algo el contenido entra dentro de él. Ahora estoy cambiando el valor de relleno derecho a diez píxeles en la parte superior e inferior a 20 píxeles. Ya tengo reduce el tamaño de la pregunta acordeón con una selección de la pregunta de acuerdo en sí. Voy a otra opción más tipo. Con la selección de break. Estoy eligiendo normal. Nuevamente, estoy cambiando el tamaño de la misma a 16 píxeles. Ahora necesitamos ajustar el tamaño que está dentro de la lista desplegable. El contenido de la lista desplegable estará dentro del jardín doble. Entonces estoy seleccionando el timbre de acordeón y voy a la configuración del mismo. Debajo de él, podríamos encontrar el desplegable Configuración. Y yo estoy eligiendo el espectáculo. Ahora con la selección del párrafo, estoy cambiando el tamaño a 14 píxeles. Ahora voy a volver al escenario. Estoy eligiendo la opción Ocultar. El formulario de suscripción parece estar bien, así que me lo estoy saltando y estoy pasando al contrato de la Sección ocho, Redujamos el espaciado del mismo con la selección de un envoltorio de detalle de formulario de contacto. Estoy listo usando el valor de relleno a 20 píxeles. Cambiemos el tamaño del teléfono y la dirección masculina. Entonces con la selección de un título detallado, estoy dando el tamaño S 22 pixel. Ahora estoy eligiendo la extremidad de contacto, que será aplicable para el área de correo electrónico y el número de teléfono. Y estoy dando el tamaño S 16 pixel con una selección de campos de formulario de contacto trapo. Redujamos el espaciado cambiando el valor del relleno por todas partes. Y también necesitamos reducir el tamaño para los campos de entrada. Entonces estoy cambiando el valor de tamaño a 18 píxeles. Y llegando al espaciado entre el, cada uno de los rellenos de entrada, estoy eligiendo el envoltorio de entrada de formulario. Y estoy cambiando el valor del margen en la parte inferior a 40 píxeles. Aplausos. Estamos llegando al área de pie de página. En ella. Estoy eligiendo la sección de copyright. Los minutos de copyright se superponen a los bordes. Entonces estoy seleccionando la envoltura del menú corporativo, digamos la envoltura del menú de copyright y eligiendo el enlace de dominó de comida. Y estoy eligiendo el bloque S y otra pantalla. Entonces todo estará en una cuadra. Y con la selección de todo el envoltorio de menú copyright, estoy eligiendo centro en el alineado bajo la tipografía. fin de crear el espaciado entre cada uno de los enlaces del menú, estoy dando el valor de relleno son los 210 píxeles superiores. En la parte inferior hacen diez píxeles. Ahora estoy eligiendo los textos de copyright y estoy eligiendo centro en el alineado y otro tipográfico fin de reducir el espaciado entre la sección de copyright y el elemento social de pie de página. Con una selección de sección de copyright, estoy reduciendo el valor del margen en la parte superior a 20 píxeles. Y ahora vamos a reducir el tamaño del contenido del pie de página Tidal a 26 píxeles. Al tomar la sección de fotos, encontramos que se debe reducir el tamaño del detalle de la dirección. Entonces estoy cambiando el tamaño a 17 píxeles. Y también necesitamos reducir el espaciado en el fondo. Así que he seleccionado un ajuste de detalle de formulario de contacto, y estoy dando el valor de relleno inferior a 40 píxeles. Al llegar a la sección de blog, necesitamos reducir la altura de línea de la misma. Entonces estoy seleccionando el título del blog y le estoy dando el valor de altura a 1.1 guión. Y estoy cambiando el tamaño con 26 píxeles. Al volver a la sección testimonial, hay mucho espacio en la parte inferior. Entonces he seleccionado esta sección y luego cambié el valor de relleno inferior a 60 píxeles. Estoy desplazándome hacia atrás para comprobar si todo se ve bien o no. Entonces en esta lección, hemos hecho todo lo que se necesita para el código móvil, ¿verdad? En la siguiente lección, estaremos completando el, todo el estilo necesario, una aguja para el puerto móvil, ¿verdad? Y también haremos el estilo para la página de entrada única del blog. En cada uno de los puntos de interrupción. 50. Finalizar con respuestas a una página de correos única: En esta lección, vamos a completar el viejo estilo innecesario necesario para los puntos de interrupción de retratos móviles. Y además, completaremos el estilo necesario para la única página de entrada de blog. En cada uno de los puntos de interrupción. Veamos cómo vamos a hacer esto. Nuevamente, estoy empezando desde el primero en esta grilla de área de héroes. Siento que necesitamos reducir el radio fronterizo. Entonces voy por debajo de las fronteras y estoy listo usando el valor del radio a 20 píxeles. Hagamos lo mismo con el elemento de servicio para que se aplique para recordar más a estos elementos, Cambiemos el valor de radio para el elemento de galería 123.4. Dentro de la sección de taller, parece estar bien. Sigamos adelante. Ahora he seleccionado este correo electrónico o gráfico, y estoy cambiando el valor del radio. He seleccionado el video alineado rap, pero en el manager de Stein no hay valor de radio. Hemos dado el valor del radio en algunos otros desarrollados. Esta cosa está dentro de la fila de video de trabajo. Aquí le hemos dado el valor del radio, así que vamos a cambiarlo. A continuación, he seleccionado la imagen del modelo de licencia. Aquí hemos dado el valor del radio. Entonces vamos a cambiarlo en tap y estoy cambiando el valor del radio. Incluso para la oferta rap, necesito cambiar el valor del radio a 20 pixeles. Ahora estoy cambiando al ítem testimonial. A continuación en la sección de precios, he seleccionado los artículos de precios y estoy cambiando el valor del radio para hacer el píxel. Él incluso vamos a cambiar el valor del radio para el representante de la lista de precios, ¿verdad? Debe parecerse al radio del artículo de precios que llega al artículo del blog. Cambiemos el valor del radio aquí. Incluso para el envoltorio de contenido de preguntas frecuentes. Y lo siguiente es una envoltura de detalle de formulario de contacto. Y por último, para la envoltura de campos de formulario de contacto, hemos completado el estilo en el punto de interrupción correcto del puerto móvil. Ahora he llegado a la página de la colección. Hay para la única página de entrada de blog. Ya hemos diseñado el punto de ruptura base. Pasemos al punto de interrupción de la tableta. Aquí necesitamos reducir el tamaño para el encabezado de la aguja del blog. Aquí, estoy cambiando el valor de tamaño a 35 píxeles. Ahora he llegado al último punto de quiebre, ese es el producto móvil, ¿verdad? Punto de interrupción. Porque en todos los demás puntos de interrupción, el estilo parece estar bien. Entonces he llegado a lo último. Ahora he seleccionado el encabezado de detalle del blog porque necesitamos reducir el tamaño del mismo. Entonces estoy cambiando el tamaño a él a 30 píxeles. Ahora he seleccionado el detalle del bloque Meta porque es mantener tanto la fecha de publicación como nuestra tónica. Necesito hacer esto para estar en una vertical. Entonces he ido a la dirección y estoy seleccionando la vertical. Así que vamos a espaciar la cuadrícula entre estos dos. Entonces estoy seleccionando al autor del detalle del blog y estoy dando el valor de relleno en D2. Entonces pixel, como en el blog, necesita un encabezado. Siento que hay una altura de línea más. Entonces estoy enseñando la altura a 1.2 guión. Hagamos el espaciado en la parte superior para el rack Broglie Dell. Entonces estoy dando el valor de relleno del dock a 40 píxeles. Eso es más espaciado en la parte inferior para la sección de detalles del blog. Entonces estoy cambiando el valor a 60 píxeles. Entonces, en cada punto de interrupción, la única página de entrada de blog parece estar bien. Entonces, en la siguiente lección, estaremos finalizando nuestro sitio web corrigiendo el nombre de la clase. Resultados de auditoría de flujo de trabajo sitio web es EL, viendo el rendimiento del sitio web. Y finalmente, haremos viable el formulario de contacto. Veamos todo sobre esto en las próximas lecciones. 51. Corrigiendo nombres de clase y limpiando: En esta lección, vamos a curvar el nombre de la clase y también limpiaremos el nombre de clase no utilizado. Vamos a sumergirnos en la lección. En tu lado derecho, pudiste ver las tres gotas como estructura. Eso es menos gerente infantil. En su interior. Pudimos ver un montón de clases que hemos creado hasta ahora. Ahora estoy desplazando todas las clases para comprobar si hemos creado correctamente con la primera letra en gatos. Entonces he encontrado que esa sección de bloque se agarra en ella. Tenemos que hacer una W en brechas. Ahora estoy dando clic en el icono de llave, que corresponde a este nombre de clase. Aquí, podríamos cambiarle el nombre. Ahora estoy cambiando el W W2 mayúscula para que podamos ver que el nombre de la clase ha sido actualizado. Comprobemos las clases restantes si todo está bien. Ahora, voy a hacer la opción de limpieza para limpiar los no utilizados a clases o estilismo. Aquí encontré al que tenía este hijo en particular o un no asociado con ningún elemento de página. Entonces voy a quitar esto. Al siguiente, estoy eligiendo la interacción. Aquí, tenemos nuestro elemento, Rico y un go pastelero. Ahora estoy dando click en la limpieza para borrar los elementos no utilizados y la pastelería va. Pero aquí no tenemos ninguno de los disparadores y animación no utilizados. Tenemos a Garreta, el nombre de la clase, y también borramos el detalle no utilizado. En la siguiente lección, veamos los resultados de la auditoría del flujo de trabajo. 52. Resultados de la auditoría en flujo web: En esta lección, vamos a ver acerca de los resultados de auditoría en el Webflow. Podemos encontrar y solucionar problemas de accesibilidad en el panel de auditoría. En la esquina inferior izquierda, tenemos el panel Auditoría con la forma cuadrada. Al hacer clic en esto, podríamos encontrar el montón de resultados de auditoría. Este planeta de auditoría flexionará los problemas comunes relacionados con la accesibilidad para que podamos abordarlos antes de entrar en funcionamiento con nuestro sitio. Aquí tenemos unos errores críticos y errores moderados. Los errores críticos o el panel de auditoría, el cuadrado rojo, los errores moderados o el panel de auditoría con el triángulo amarillo. Entonces ahora voy a ver los resultados de auditoría de nuestro sitio. En estas auditorías, tenemos 29 errores críticos, es decir con el cuadrado rojo y para moderar errores con los triángulos. Llegando al primero, obtenemos los resultados de auditoría con texto alt faltante para que tengamos que rectificar eso. Antes de eso, queremos saber qué es alt-text. Podemos tener el escenario, las personas, los ciegos que tienen baja visión o pueden tener una discapacidad visual. Utilizaremos la opción de lector de pantalla para conocer la función de nuestro contenido de imagen en el sitio web. Los lectores de pantalla renderizarán el texto y contenido de la imagen como discurso a esas personas. Falta texto alt significa que hemos incluido la imagen sin texto alt-text descriptivo. Si una imagen transmite información esencial que no está disponible en ningún otro lugar de la página, una persona que no pueda verla perderá esa información que necesitamos para darle los textos alt a cada una de las imágenes que hemos creado en este sitio. Ahora he seleccionado los textos alt faltantes que está en los 24 lugares. Si hacemos clic en la flecha, entonces nos llevará a donde necesitamos hacer los cambios. En la sección héroe, no hemos dado el texto alt para esta imagen. Entonces estoy dando click en esta imagen y estoy eligiendo la descripción personalizada bajo el texto alt-text. Y le estoy dando al alt-text S hero area women. De nuevo, vuelvo al panel de Auditoría y estoy eligiendo el siguiente error crítico. No hemos hecho el texto alt para este ícono de correo. Entonces estoy eligiendo el texto alt como descripción personalizada y estoy dando el texto alt-text como icono de correo héroe. A continuación, he seleccionado el, otro error. Nos ha llevado a esta sección OB en ella. No tengo una Gilda todas las tomas para cada uno de los iconos de servicio. Entonces he seleccionado el primer icono y estoy dando la S. del Ártico Así que con icono, estoy haciendo el mismo proceso para las otras dos imágenes. Hagamos el mismo proceso para todo el texto alt faltante. Entonces, finalmente, hemos completado todos los errores críticos. Pasemos a los errores moderados. Es decir, con el icono del triángulo amarillo. Los errores de este modelo muestran el error al omitir un nivel de encabezado. Veamos qué es lo que se saltó un nivel de rumbo. Tres niveles de encabezado significa nuestros elementos de rumbo, es decir H1, H2, H3, etc. No use la jerarquía de encabezado adecuada. Cual es el rubro más importante. A rumbo aterrizaría por debajo del H1. Y así sucesivamente. Entonces se rompe la jerarquía de encabezamientos. Si nos saltamos un nivel de rumbo que necesitamos rectificar esto se saltó un nivel de rumbo. Ahora he seleccionado el error. Es llevarnos a la sección de servicio. En esta sección subtítulo, necesitamos cambiar la etiqueta de encabezado. En el mensaje emergente. Muestra qué error ha sido bueno, vamos a leerlo. El nivel de rubro anterior es H1, por lo que el siguiente experto o nivel es H2. Entonces se espera que cambiemos el rumbo nivel dos, H2. Y además tendremos una opción para corregir este error. Podemos elegir la opción innecesaria que sea apropiada para nosotros. Ahora he seleccionado este oasis y voy a la Configuración y voy cambiar el tipo de rumbo a herramienta de cobertura. Ahora estoy seleccionando la siguiente era. Nos está llevando a la sección testimonial. En esto, está mostrando el nombre del cliente. Aquí. Nos está instruyendo para cambiar el rumbo nivel dos, cobertura tres. Entonces voy a cambiar el tipo de rumbo do historial. Ahora tenemos otra flecha en el trabajo del cliente. Nos está dirigiendo a cambiar el rumbo nivel dos, h4. Tenemos otro error que está en el valor de calificación, esperando que cambiemos el rubro nivel dos hedge phi. Entonces cambiemos el encabezado nivel dos hedge phi. Ahora ya hemos terminado todos los errores, así que obtenemos el mensaje como problemas conocidos granja. En la siguiente lección, veremos sobre la configuración de SEO de un sitio web. 53. Configuración de sitios web SEO: En esta lección, vamos a hacer la etiqueta de título y la meta descripción, que es lo esencial para la optimización de motores de búsqueda SEO. Entonces veamos cómo hacer eso. Etiquetas de título y Meta descripción para este sitio web. Viniendo a nuestro proyecto aquí, no tenemos una etiqueta de título. Tenemos que agregarle una etiqueta de título. Nuestras etiquetas de título y Meta descripción o en exhibición en los resultados de los motores de búsqueda. El proveedor de etiquetas de título y descripción toma una vista previa del contenido de nuestra página que necesitamos para agregarle una etiqueta de título. Veamos cómo agregar una etiqueta de título al sitio web. Para agregar eso, voy a la página decir cosas, y voy a pasar a la configuración de SEO. En él, podríamos encontrar un título que meta descripción en la etiqueta del título. Voy a darle un título. Lo he dado como artistas, Webflow, HTML, plantilla de sitio web. También tenemos que darles Meta descripción. La copia convincente de la meta descripción puede ayudar a generar más clics. Les he dado Meta descripción. Cortemos los errores y digamos que necesitamos. Ahora voy a publicarlo para ver cómo funciona. Ahora estoy cargando este lado para que ahora podamos ver la deuda del título. Ahora en la página sentada, estoy seleccionando esa plantilla de entrada de blog porque nos llevará a la otra página. Como esta es una página separada, necesitamos verificar si tiene etiquetas de título y Meta descripción. Entonces aquí podemos ver que no es una etiqueta de título. Voy a usar este encabezado de blog como esa etiqueta de título. Así que he seleccionado la plantilla de publicación de blog sentada bajo la configuración de SEO. Voy a la etiqueta del título. En el lado derecho. Podemos encontrar ese ajuste en el campo Agregar en el que estoy eligiendo nombre por dar el nombre del campo, recuperará el encabezado del blog desde el complemento de colección al campo. Estoy agregando es una plantilla de sitio web Webflow, HTML. Lo estoy guardando. Publiquemos esto. Estoy recargando esta página. Ahora puedo ver la deuda del título. Entonces en esta lección, hemos dado la etiqueta del título y la meta descripción para este sitio web. En la siguiente lección, vamos a ver cuál es el rendimiento del sitio web que hemos creado. 54. Rendimiento de sitio web: En esta lección, veamos cuál es el rendimiento de nuestro sitio web. Primero, necesitamos minificar CSS. Se reducirá el tamaño del archivo sin cambiar la forma en que el archivo CSS se ejecuta en la fila. Entonces, al rayar los datos innecesarios del código CSS, esta amonificación ayuda al navegador a descargar y procesar los archivos más rápido y aumentar el rendimiento de la página. Veamos cómo modificar el CSS. Yo publico. Estoy seleccionando la opción debajo de ella. Estoy eligiendo la opción avanzada aquí. Estoy habilitando minify CSS. Ahora publiquemos esto. Ahora estoy cargando la página. Vamos a desplazarnos sobre cómo vale todo. Entonces todo parece bueno. Incluso podríamos desplazarnos por la página sin problemas. Ahora para poder ver el rendimiento del lado en el navegador, he cargado nuestro sitio web. En el botón derecho del ratón. Obtenemos la opción inspeccionada. Tendremos el montón de opciones en él. Estoy eligiendo un faro. Ahora vamos a dar clic en el generar informe. En el reporte, tendremos el puntaje. Obtenemos la puntuación para la actuación junto con los detalles al respecto. Los detalles y la partitura para la accesibilidad. Lo mismo para las mejores prácticas y SEO. En la siguiente lección, veremos sobre el envío del formulario de contacto y proporcionando al macho para obtener una notificación sobre el envío del formulario de contacto. Y también veremos una frontera formas de datos de misión. 55. Formulario de contacto: obtener correos electrónicos adecuados: En esta lección, veremos sobre el envío del formulario de contacto y cómo configurar el correo electrónico para recibir una notificación sobre el envío del formulario de contacto. Para comenzar con eso, voy a la configuración del proyecto. Pasemos ahora al paso del formulario. Y esto nos dará todas las opciones relacionadas con lo que se hace con los datos que residen en una presentación exitosa. Ahora los datos de los personajes serán enviados por correo electrónico por defecto. La opción comienza con un nombre de empresa. Se envía el correo electrónico. ¿Qué nombre de la empresa desea que se muestre? A continuación, tenemos la dirección de correo electrónico o direcciones de correo electrónico. Quieres envíos igual debido a agregar más direcciones de correo electrónico. Simplemente use coma al final de la dirección de correo electrónico y agregue otra dirección de correo electrónico. A continuación la línea de asunto para ese correo electrónico, la repetición para abordar esta factura con la dirección de correo electrónico que se utiliza. Si recibe un formulario de correo electrónico del paciente y pulsa repetición, puede copiar las variables de nombre y correo electrónico a la derecha de este campo y pegarlas y yo responderé a la dirección. Y esto asegurará que las respuestas a este correo vayan directamente a la dirección de correo electrónico que se capte en el teléfono. Y por último, tenemos la plantilla de correo electrónico. Puedes dejar esto tal cual, o puedes escribir tu propio movimiento usando cualquiera de las variables a la derecha e incluso puedes poner HTML personalizado aquí. Entonces ahora vamos a enviar el formulario de contacto y veamos cómo funciona. Entonces en el nombre, lo estoy dando como un Webflow. Y vamos a dar el ID de correo electrónico como gmail.com. Para la empresa. Estoy tabpinando nuestro flujo de trabajo. Estoy dando algunos números al número de teléfono y estoy buceando algunos de los mensajes aquí. Vamos a presentarlo. Entonces ahora me sale el mensaje de éxito. Por lo que cuando se envíe el formulario, esos datos de envío se enumerarán a continuación. Y otras formas de datos de visión. Entonces ahora hemos visto lo que sucede cuando un usuario envía el formulario, por qué se almacenan los datos y cómo conseguir que se envíen notificaciones por correo. Así que hemos completado todo lo que se necesita para la plantilla del sitio web de nuestro artista. Como hemos desarrollado con la plantilla, necesitamos saber cómo cambiar el color del contenido y hacer algunas de las ediciones necesarias. Vamos a verlo en la siguiente lección. 56. Personalizar tu sitio web en función de tus necesidades: Hemos completado la plantilla del sitio web del artista. Es posible que los usuarios que utilicen nuestra plantilla deseen cambiar el color de este contenido y también cambiarán su contenido para que tengamos que verificar si esos son nuestros funcionando correctamente o no. Hagamos la comprobación de este contenido y cambio de color. Entonces ahora voy a comprobar el contenido que tiene el color naranja. Hemos utilizado este, el color primario para los enlaces de navegación y para el subtítulo del área de héroes para los servicios, para la galería. Comandos de valor porcentual, precios y algunas de las palabras en el elemento de la lista para el blog y boletín de soporte y contáctame. Entonces estos son todos, uh, usando los colores primarios. Ahora voy a otro tipo de gráfica, G. Estoy eligiendo el color. Hemos utilizado el color primario de la muestra. Ahora voy a cambiar el color que haya cambiado el color por el color primario. Así que ahora podríamos notar que el color ha sido cambiado. Para editar el contenido que tenemos. Y nuestra otra opción, es decir editar auto, podríamos acceder a este editor en la configuración del proyecto. Este editor, vamos a pedir actualizar el contenido de un anuncio en una sencilla interfaz, lo cual es ideal para clientes o compañeros de equipo que no necesitan la complejidad del diseñador. Entonces eso se utiliza principalmente para agregar o actualizar el contenido. Ahora estamos en el editor. Deseo cambiar el subtítulo que está permitido. Mi pasión como dibujo es mi pasión. Incluso estoy cambiando el título al arte digital, hacer más gradiente. Tomemos, si podemos cambiar la imagen, estoy haciendo doble clic sobre ella. Voy a elegir otra imagen para que la imagen haya sido actualizada. Ahora voy a publicarlo. Tenemos un alcance definitivo para esto aquí. Para hacer el tictac uno espore en una nueva pestaña, estoy cargando nuestra plantilla de sitio web para que podamos ver los cambios que hemos hecho. Si queremos hacer la edición más, basta con hacer clic en este Editar sitio. 57. ¡Conclusión, Gracias!: Enhorabuena por terminar el curso con éxito. Fue un largo viaje para los dos. Ahora, puedes construir sitios web increíbles. Espero que hayas disfrutado de esta clase y te lo agradecería. Si pudieras dejar una reseña de esta clase. Si tienes alguna duda, no olvides preguntarme en la sección de discusión. Tengo causas sobre la ilustración y el diseño gráfico. Si te interesa, puedes tomar esto va. No se aprovechó para ser tu instructor. Y te deseo todo lo mejor. Gracias.