Cómo construir un sitio web de generación de leads con Webflow

1. Introducción a un sitio web personalizado: Como plataforma, Webflow es una gran alternativa a los gustos de WordPress tan rápido, potente, y mucho más fácil de usar. Las campanas web más tradicionales en las plataformas te permiten construir tu sitio web visualmente sin tener que preocuparte por los códigos. Y curso sin fin, te voy a estar mostrando paso a paso cómo puedes construir un sitio web de generación de leads. Somos empresa B2C. Entonces si eres dueño de un restaurante, un genuino y eres un negocio local que busca afilar tu presencia en línea, este curso definitivamente va a ayudar a las ediciones. Te estaré mostrando todo lo que necesitas saber sobre Webflow desde configurar tu funcionalidad principal, cosas adicionales que puedes hacer con la plataforma Webflow y mostrarte las mejores prácticas para cómo puedes automatizar la regeneración proceso. Entonces soy IC de superficie para ser un curso en servicio con ustedes. Y de verdad espero que ayude. Si tienes alguna pregunta ya que estás pasando por este curso, eres más que bienvenido a dejar un comentario a continuación, y me pondré en comunicación contigo lo antes posible. Y además de eso, me encantaría que pudieras compartir conmigo como proyecto lo que has construido como resultado de ver este curso. Entonces con eso dicho, entrémonos en ello. Estoy muy emocionado de empezar con esto. 2. El tipo de sitio web que vamos a construir: Está bien, Así que como mencioné en el video introductorio, y vamos a estar cinturando sitio web de generación elite para una empresa B2C. Entonces x eres dueño de un pequeño negocio, negocio local, ya sabes, si estás en un restaurante, un gimnasio, o una empresa así, este curso te va a ayudar a construir un sitio web, los métodos de generación temprana de edad. Entonces te voy a estar mostrando cómo configurar la web para plataforma detrás de mí y todo lo que necesitas saber al respecto. Te voy a estar hablando de marca. No tienes que desarrollar tus activos de marca y todas las diferentes herramientas que puedes utilizar. Y lo que es más importante, de verdad voy a meterme en la tontita de la web para plataforma. Porque tan difícil de usar si eres principiante y realmente queremos entrar en los detalles de eso para que entiendas completamente lo que estás haciendo porque definitivamente no es fácil al principio como tu primera vez que lo usas. Pero antes de que realmente nos metamos en el edificio, realidad estás configurando o Webflow corrió. En el siguiente video, voy a estar discutiendo las diferencias entre Webflow y WordPress porque FU realmente fuera al principio de la lección, nunca usas Webflow. Y tal vez tengas un sitio de WordPress en este momento, lo cual es comprensible. Es posible que tengas dudas sobre el uso de Webflow. Puede que tengas dudas sobre los turnos para conocer tu infraestructura online hasta aquí, pero te puedo asegurar que es peor. Y vamos a diseccionar algunas de las razones por las que web realmente será como una mejor alternativa en el próximo video. Entonces saltemos a eso. 3. WordPress vs Webflow: Muy bien, así que esta ha sido una página de desarrollo en el sitio web de flujos web desde hace bastante tiempo. Y básicamente la razón por la que por fluido hizo esto obviamente son un disruptor y el espacio de diseño del sitio web. Y solo para darte una idea aproximada de dónde están frente a qué precio al momento de hacer este video, qué tendencias representan aproximadamente el 34% de todos los sitios web en Internet, ¿verdad? Por lo que la mayoría de los sitios web que miras son probablemente bar hospedado han sido cinturón por qué vestido? Alternativamente, Webflow se encuentran actualmente como 0.4%. Por lo que aproximadamente 0.40% .5 de todos los sitios web en Internet o cinturón con Webflow ahora mismo. Entonces que como diluciones realmente sustanciales, quiero decir, sigo pensando que eso es bastante bueno considerando que esposa no habrá estado por ahí tanto tiempo, pero obviamente todavía tienen mucho camino por recorrer. Y uno de los grandes retos que tienen como adivinar usuarios para pasar de nuestro sitio web de WordPress a Webflow, ¿verdad? Saben que tienen un mal producto y saben que tienen más que ofrecer el Nolan más innovador. Simplemente son mejores en general. Pero el problema es que cuando la gente va adelante y ve mucho tiempo y dinero y demás, infraestructura en línea, digamos en WordPress y luego los que trabajan y pueden ser muy, muy desalentadores y bastante estresantes. Tan grado para cambiar a otra plataforma y poner todos tus huevos en esa canasta. Por lo que esta página ilustra un poco algunos de los puntos clave de por qué Web quién es el mejor en. Y sólo quiero correr rápidamente a través de ellos. Entonces podemos ver aquí, estos son obviamente tuits de personas que aman Webflow. Ahora vamos a incluir cualquier comentario negativo en la plataforma aquí en. Pero solo te dé una idea de lo que la gente está diciendo. Por lo que Webflow es loco bueno. Siento que ustedes son los primeros en construir la UX correcta se van a quedar en un piso de sorteo CSS. Intenta sin nada instalar actualizaciones automáticas y sin PHP en cuanto a qué prensa de terroristas si necesitas. Todos estos son ciertos. No necesito pasar por todos ellos. Pero si nos desplazamos hacia abajo y solo echamos un vistazo a algunos de estos puntos, otra vez, tenemos otro testimonio ahí y justo, vale, Así que aquí vamos. Este es probablemente uno de los puntos principales de por qué Webflow es un cambiador de juego. Para que puedas, están diciendo que puedes construir un mejor sitio web sin códigos. Y de esa manera hay una especie de la esencia de lo que se trata. No hay compañía de código, y el movimiento sin código básicamente incluye un montón de empresas que permite a la gente hacer cosas sin códigos que normalmente tendrías que usar código para hacer. Entonces, por ejemplo, construir un sitio web personalizado que normalmente utilizarías tiene que saber codificar para poder hacerlo. Y qué es Webflow. No tienes que saber codificar. Y al final de ello, obtuviste sitio web realmente de alta calidad que normalmente tendrías que saber codificar para lograr. De acuerdo, así que vamos a pasar de esto. Se puede construir visualmente con los códigos. Ya sabes, como estamos diciendo, es un Bowser visual, no está basado en temas, no está basado en códigos voluminosos, no está basado en plugins como lo que presiona. Puedes elaborar interacciones y animaciones con los clientes. Esto es otra cosa clave. Realmente no se puede hacer eso y qué presionar a menos que empieces a jugar y a hacer algunas cosas personalizadas. Para que puedas ponerte realmente, realmente granular con cómo quieres animar las cosas en tu sitio web y respuesta anti-B. Entonces si quieres que sean acciones demasiado repentinas por parte del usuario final. Y también puedes diseñar donde contenidos CMS. Entonces esto es otra cosa, Webflow, CMS es realmente, realmente poderoso, realmente poderoso como un absoluto cambiador de juego. Entonces, aunque como probablemente estés viendo esto, estás viendo como dueño de un negocio local, es posible que no seas un comercializador o desarrollador web ahora eso está bien. Pero si tuviera que enfatizar una cosa para usar como cambiador de juegos, sobre todo de lo que presionó a Webflow son en realidad mayoría de los constructores de sitios web a Webflow como la funcionalidad CMS. Al usar un CMS, si tuvieras que hacerlo tú mismo sería difícil Tressie. ¿ Y qué esposa que tiene aquí? Tienen un CMS donde si quieres tener páginas de barco de cierta cosa, así que estás haciendo SEO local, por ejemplo. Esa es una táctica donde tienes muchas páginas en lugar de tener que agregar cada página individual. Por lo que estás usando para apuntar a una ubicación específica y agregas una sola página, una plantilla y se aplica a todas ellas para que puedas tener control realmente bueno sobre todas tus páginas sin que sea esta pieza de trabajo realmente grande. Si bajamos de aquí. Estos son solo algunos estudios de caso sobre los tipos de sitios web que puedes arcos. Y luego entramos en lo del anfitrión. Entonces como vamos a hablar de, y uno de los videos que vienen. Webflow cuenta con campana de hosting nth de la plataforma. No tienes que ir a buscar un tercero proveedor para hosting. Y básicamente lo que te están diciendo es que están hospedando como a través de Amazon CloudFront. Y luego en conjunto con eso, también usan rápidamente. Ambos combinados proporcionan un servicio de hosting realmente, realmente fuerte que personalmente soy muy aficionado, creo que es realmente, muy bueno. Um, no he podido caer así, hasta ahora, y llevo cerca de un año con Webflow. Igual de bueno, Marx, y hay que pensar en ello mucho menos que lo que harías con otras plataformas. Y además de eso definitivamente es mucho más barato que algunos otros proveedores de hosting. Entonces eso es algo que hay que vigilar. Y a continuación tenemos el hecho es que en realidad nunca tendrás que hacer ninguna actualización manual a tu sitio. Y el sentido de que cuando estás usando WordPress, por lo general si obtienes plugins son si WordPress mismo se actualiza, tienes que iniciar realmente la actualización. ¿Qué es lo correcto para ti? ¿ No hacen las actualizaciones automáticamente y realmente no lo sientes, ni siquiera notarás que es una experiencia realmente fluida en ese sentido. Tienen seguridad y esposa tendrá seguridad a Bell. Y así a diferencia de WordPress, donde hay que pagar a un tercero proveedor por nuestra seguridad, lo que es maravilloso es Belsen. Y cuando dices que tienes que preocuparte por un diablos mucho menos de lo que harías si estuvieras haciendo esto en WordPress. Entonces otra vez, otra gran característica. Y ten en cuenta, pueden tener la apuesta SUS. Entonces si no sabes qué es SEO, está bien. Optimización de motores de búsqueda Seo, aquí es donde vamos a optimizar tu sitio web. Tan pequeños zapatos en Google. Tan bueno SEO es un montón de cosas que se juntan. No vamos a, ya sabes, no tenemos que meternos en demasiados detalles aquí, pero estas son algunas de las cosas que realmente contribuyen al buen SEO. Por lo que el hosting de alto rendimiento, como acabamos de hablar, eso realmente contribuye porque tiene un gran impacto en las velocidades. Y luego tenemos herramientas, ya sabes, es realmente fácil configurar redirecciones y cosas para mi flujo, mucho más fácil en WordPress, por ejemplo, como mencioné, el frío está realmente, realmente limpio. Eso significa que es mucho más fácil para los motores de búsqueda leer. Ese es un punto importante. De modo que eso resuma estos la mayoría de los puntos clave. Nos vamos a meter en todos ellos un poco más individualmente a medida que pasemos por este curso. Pero ojalá esto te dé una mejor idea de Webflow y y definitivamente es mucho más rápido que lo que presiona F5. En resumen, yo diría que el flujo de trabajo mejora sobre todo lo que WordPress ha fallado hasta ahora, m, porque sabemos en su mayor parte, WordPress es una plataforma de código abierto y cualquiera puede realmente hacer lo que quiera con ella. Pero el propósito de este video era solo abordar algunas de las preocupaciones que puede tener sobre el uso de Webflow. Y estoy seguro que se puede decir por cierto que estoy hablando de eso. Yo canto las oraciones de la compañía cualquier oportunidad que tenga sólo por lo buenas que son. Entonces sí, ¿Qué se dice eso? Pasemos al siguiente video y en realidad empecemos evaluar en Webflow y hagamos que este sitio web se construya para ti. 4. Crea tu cuenta de Webflow: De acuerdo, entonces lo primero que tienes que hacer es seguir adelante y crear cuentas en Webflow. Ahora, ya tengo una cuenta con otra dirección de correo electrónico, pero solo estoy configurando una ficticia solo para mostrarte el proceso por el que tienes que pasar al crear tu cuenta. Por lo que se detiene a tres. Y puedes continuar con tu dirección de correo electrónico o puedes decir, no, fue Google. Te recomiendo encarecidamente conectarte con tu cuenta de Google ya que solo un poco más fácil y te ahorrará un poco de tiempo. Entonces solo voy a usar esta dirección de correo electrónico y vamos a escuchar lo que queremos hacer es solo pulsar ese botón enviar correo electrónico y luego comprobarlo en libros. Y se puede ver que tenemos un correo electrónico de soporte completo web. Confirma tu dirección de correo electrónico. Está bien. Y eso es que literalmente hay llegar a ir. Y eso es así de sencillo cuando se trata de rastrear tu cuenta. Y realmente no hay tanto con lo que tengas que contender. Y puedes hacer algunas cosas a tu perfil público y puedes editar tu sentencia de cuenta. Y tenemos un par de pestañas aquí, como escaparate. Aquí es donde podrás descubrir diferentes trabajos de diferentes personas en la comunidad de Webflow. Y puedes echar un vistazo a diferentes diseñadores y ver qué están haciendo en los perfiles. Y tienes un montón más, pero ese es solo el proceso de apuntarte. Entonces con eso dicho, pasemos a seguir realmente adelante y rastreando nuestro primer proyecto. 5. Añade tu primer proyecto: De acuerdo, entonces lo que he hecho aquí es que cambié a mi cuenta de flujo web. Y aquí es donde vamos a construir proyectos. Entonces aquí es donde te estaré mostrando tiene construye tu proyecto. Y lo que voy a hacer es simplemente acercar un poco, sólo para que puedas ver un poco mejor. ¿ De acuerdo? Entonces lo que vas a hacer es en tu tablero de instrumentos, solo vas a presionar el botón Nuevo Proyecto. De acuerdo, Así que solo haz clic en eso y luego iremos a partir de ahí. Y luego Webflow te dará algunas opciones para plantillas y cosas como esas si realmente las necesitabas, pero probablemente ya hayas terminado. Te aconsejo encarecidamente que estés partiendo de un lienzo en blanco como lo tenemos aquí. Y probablemente deberías acostumbrarte a eso. Si estás trabajando con la ley Webflow, tú, tú, encontrarás que no vas a hacer mucho trabajo con plantillas, probablemente nunca más. De acuerdo, así que vamos a dar click en blanco. Sleight eso. Y está bien, entonces el tipo de sitio web que vamos a estar construyendo por si no he tocado eso ya. Y obviamente estamos construyendo un sitio web de generación de leads para una empresa B2C. Pero el tipo de sitio web, el trinquete va a estar construyendo hasta ahora un gimnasio. Está bien. Por lo que es un negocio local son bastante común tipo de cinturón de sitio web. Y todo lo que te voy a mostrar todos los fundamentos de generar leads a través de una página web que debes conocer. Entonces lo que voy a llamar un gimnasio como gema de Magnus, Air Share. Está bien. Y por si acaso te estás preguntando qué significan cualquiera de estas palabras o aparte de Jim, magnus solo significa gris y una asha es en realidad de donde vengo. Entonces por si no se les puede decir acento soy de Escocia y el kantiano de se llama aire tímido y estamos en la costa oeste de Escocia. Pero sin embargo realmente necesitas saber eso. Pero de todos modos, sigamos adelante y creemos nuestros proyectos. Y cuando hagamos eso se llevará y a Webflow. Y aquí es donde fluyen, así es como se ve. Es un verdadero lienzo en blanco por decir lo menos. Y tenemos mucho de que hablar aquí. Pero eso resume para ti solo crear en un proyecto y cómo es ese proceso. Y luego el siguiente video voy a estar descomponiendo los componentes centrales de la plataforma full wave. Y sólo para que entiendas por qué la tierra no es peso, todo lo es. Entonces sí, saltemos a eso. 6. Ajustar tus puntos de ruptura: Entonces lo primero de lo que quería hablar aquí son en realidad los puntos de ruptura porque es una parte bastante importante. El proceso de desarrollo web y esposa voló a realmente, muy bien. Entonces como puedes ver aquí arriba barra superior en el centro, estamos, ahora mismo estamos en eso se muestra con una estrella junto a eso. Entonces este es tu lugar de diseño central como la forma en que categorizaría cualquier cambio que hagas aquí y se aplicará a tu punto de ruptura de tablet, a tu punto de ruptura horizontal del teléfono hasta el punto de ruptura del teléfono. Y como puedes ver, Webflow ya está predefinido cuáles son cada uno de estos puntos de ruptura. Y definitivamente deberías simplemente no cambiar ninguno de estos, solo dejarlos como están porque a la derecha y puedes ver solo me desplaza hacia abajo, se hace más pequeño. Entonces, cuando somos escritorio de Edison por ejemplo, lo hacemos aquí. Recuerda que no ha sido tablet lo que estamos haciendo aquí. Recuerda a Edison o teléfono horizontalmente lo hacemos aquí. Y obviamente solo un dispositivo móvil normal, lo hacemos aquí. Ahora bien, aquí hay algunas opciones que debes considerar cuando estás construyendo un sitio. Y sólo te diré, hago apasionadamente como alguien que está haciendo esto todo el tiempo. Si haces clic en estos tres pequeños puntos aquí en los lados izquierdos, puedes ver que en realidad puedes agregar más puntos de rotura. Y si bien lo hago normalmente es sumarme todos estos puntos de rotura, ¿no? Entonces solo los vamos a agregar para estos proyectos y se puede ver por qué en realidad lo hago con ellos por si decides usarlos. Entonces tenemos nuestro punto de ruptura para 1280 Px, así que vamos a agregar eso. Y este es un punto importante cuando creas estos, no puedes deshacerte de ellos. Así que asegúrate de que si las estás creando, lo estás haciendo por las razones correctas. Entonces haz clic en Crear, y voy a seguir adelante y añadir estos otros dos. Está bien, perfecto. Por lo que ahora tenemos todos nuestros puntos de ruptura. Ahora sé que estás pensando, probablemente estás pensando, Vale, Todo desde este punto de ruptura y hasta este grande aquí se ve exactamente igual. ¿ Cómo se supone que voy a poder decir la diferencia entre alguno de estos? Entonces déjame explicarte rápidamente. Si hago clic en el ojito aquí en el lado izquierdo, si solo hago clic en eso, ahora puedo obtener una vista previa, ¿verdad? Y como pueden ver, el tamaño de este punto de ruptura gasta toda mi pantalla, ¿de acuerdo? Y hago todo mi diseño y en un iMac Pro, ¿no? Por lo que la mayoría de los sitios web miro en mi escritorio, pero en realidad todo este punto de ruptura. Y así cuando estás diseñando aquí, estás diseñando para personas que tienen esa pantalla más grande. Y a medida que bajamos, verás que a partir de ahí se hace más pequeño. Y se puede tomar menos funcionalidad de arrastre y se puede mover hacia arriba y hacia abajo. Puedes ponerlo donde quieras. Y luego en realidad gris si quieres asegurarte solo para asegurarte de que todo sea receptivo a través de todos tus puntos de ruptura. Pero sólo vamos a previsualizar el modo por un segundo. Si bien estamos en modos de diseño, podemos arrastrar aquí, ¿verdad? Mujeres en tablet, cosas así. Y la razón por la que me gusta bastante simplemente arrastrarlo en los modos de diseño m es porque el flujo del viento te mostrará como puedes ver entonces la esquina inferior derecha ahí te mostrará qué tamaño dice esto para ciertos dispositivos. Por lo que podemos ver aquí los 768 px como un iPad Pro, escribir como 9.7 pulgadas iPad Pro. Entonces eso es bastante útil saber. Vale, Así que si tienes un iPad Pro, si lo estás mirando en un iPad Pro y no puedes averiguar por qué no parece igualar. Y probablemente sea porque no lo estás mirando en el punto de ruptura de la tasa. Entonces sí, pero algo a tener en cuenta. Entonces esa es una de las primeras cosas que necesitamos para meternos en el camino y eso son los puntos de ruptura. Entonces sí, espero que encuentres eso de ayuda. A menos que pasemos al siguiente. 7. Las gestión de Webflow's: Entonces ahora que entendemos o puntos de ruptura y ya hemos establecido nuestros puntos de ruptura por digamos, lo siguiente de lo que quiero hablar cuando se trata de las diferentes características que salieron llenas tiene como esta columna luego el lado izquierdo. Entonces aquí es donde controlas diferentes partes de decir. Así que vamos a pasar rápidamente por ellos. Vamos primero a tabular aquí tenemos con un pequeño icono más. Aquí es donde encontrarás todos los diferentes elementos que puedes agregar a tu sitio y los diferentes elementos con los que puedes jugar. Y luego también tienes ella hizo capa para que puedas agregar, ya sabes, así que para una barra de navegación pegajosa, un calentador superponer una llamada a la acción encaja o contacto desde todo el lote. Y así estos son capa base para que puedas usar si no quieres construir algo desde cero y terminar la segunda pestaña, tenemos símbolos. Los símbolos son algo que no te verás en ningún otro sitio web diseño-construir. Por lo que son completamente nuevos e independientes. Especialmente cuando se trata de los constructores de diseño de sitios web. Por qué el símbolo básicamente te permite hacer si creo un elemento en alguna parte y veo en realidad una sección que creo como un APA o algo así. Puedo dar vuelta a mi barra de navegación y a armar. Y lo que ese símbolo me permitirá hacer así me permita agregar la misma pieza de contenido, por lo que múltiples páginas a mi decir. Y luego siempre que quiera hacer una edición a un símbolo, podré hacer esa edición directamente a todos los lugares donde aparece el símbolo. Y te daré un ejemplo activo de eso más adelante que podrás ver. Pero esto sólo te da una breve introducción a. Y luego si volvemos a bajar, tenemos un navegante. Entonces cuando agrego diferentes elementos a mi sitio web y no hice capas, estoy agregando, estoy agregando diferentes componentes que suenan uno al otro de diferentes maneras. Y lo que podría navegar me permite hacer es ver la forma en que esos elementos uno encima del otro. Entonces algo no está del todo listo y correcto, o si algo no se ve bien y no lo veo, justo cuando estoy mirando mis campanas o puedo ir a navegarlo y puedo ver cómo están las secciones. Puedo ver que todo está buscando mercancía y puedo ver los nombres de mis clases, que nos pondremos un poquito más tarde otra vez. Que otra vez vamos a llegar hasta un poco más tarde. Pero eso sólo te da una idea de cómo funciona la navegación. Y cuando estás construyendo una página grande, esto da rezar bastante rápido. Pero hace que sea realmente, realmente fácil encontrar lo que buscas muy rápido sin tener que pinchar, um, ya sabes, mucho lío en los barcos y encontrar lo que buscas , entonces hay un error. Tenemos la pestaña Páginas. Esto es realmente sencillo. Aquí es justo donde vas a crear tus páginas. Por lo que también tienes carpetas. Por lo que a medida que miras mantiene las cosas organizadas, las carpetas son una gran manera de segmentar tus páginas, y eso es todo lo que realmente necesitas saber sobre ellas. Hablaremos de los ajustes y páginas reales un poco menos así, pero ese es probablemente el lugar más importante para empezar. Entonces debajo de eso tenemos colecciones. Colecciones que mencioné comprar más, hablando de lo que Prensa versus Webflow. Um, pero no nos van a mencionar demasiado con las colecciones. No vamos a estar haciendo, no vamos a estar montando un blog ni nada por el estilo, sino colecciones o algo que definitivamente tocaré probablemente en otro curso, pero no tendrás que preocuparte ni por lo que estamos haciendo aquí. Y luego debajo de eso tenemos comercio electrónico. No, no vamos a estar tocando en el comercio electrónico, pero probablemente sea bueno solo tocar de todos modos. Entonces si activas el comercio electrónico, es un plan completamente diferente para el comercio electrónico. Pero esto básicamente si haces clic en E-commerce y sin embargo tienes un sitio de e-commerce y luego hay un montón de otras cosas que tiene que hacer y yo solo nos sacaré, pero no estamos haciendo eso aquí, así que no hay que preocuparte. Entonces, solo tachémoslo. Debajo de eso, tenemos el lugar donde añades todos tus MG, um, para que puedas manejar todas tus imágenes aquí puedes ver el tamaño del Webflow también te dirá si se siente un poco de daño. Entonces para hornear, y esto es simplemente genial para mantener todas tus imágenes y un lugar de fácil acceso. Y luego a continuación que tenemos ajustes, por lo que copias de seguridad y puedes buscar cosas adicionales. Y debajo de eso, como puedes ver abajo en la esquina inferior izquierda aquí, tienes esta marca de verificación o la característica. Y lo que esto te permitirá hacer es como estás diseñando en una página y puede que te sientas feliz con ella, ¿de acuerdo? Pero Webflow analiza y ve que podría haber problemas en la página que podrían perjudicar a tu SEO o que puedan tener. Entonces es el rendimiento o algo que pueda hacer que el sitio web no se vea bien, entonces las auditorías marcarán y en lugar de tener una marca de tic, solo tienes cuadrado con nada en él. Aquí. Puedes buscar diferentes cosas on by flow si necesitas ayuda con Aniston y abajo que tienes algunos tutoriales en video si necesitas alguna explicación más de lo que estoy hablando, y luego puedes conseguir ayuda si la necesitas. Pero eso explica todas estas pestañas y qué son y brevemente cómo se usan. Definitivamente los lugares en los que vamos a pasar más tiempo están en esta sección de anuncios. Vamos a estar hablando de que los símbolos son buenos. Estaremos usando navegates a través de una ley, estar hablando mucho de eso. Y las páginas estarán pasando un poco de tiempo de páginas y esas son las cuatro en las que debes enfocarte. Entonces en el siguiente video, voy a estar hablando esta columna de la derecha y de Watson aquí, que estoy seguro que estarán emocionados de escuchar. Entonces, vamos a saltar a eso. 8. Las características de diseño de Webflow: De acuerdo, entonces lo siguiente de lo que necesitamos hablar como flujos de trabajo diseñan características. Entonces, cuando realmente ponemos elementos en la página desde las pestañas de gestión y ¿qué les agregamos en realidad? ¿ Cómo los diseñamos? ¿Cómo hacemos que se vean como queremos que se vean? Así que hice algunos elementos realmente básicos aquí solo para tratar de llegar el punto a través. Y yo sólo voy a ir por cada una de estas pestañas del lado derecho y decirte lo que todos significan porque todos tenían propósitos diferentes, pero deberías poder reunir a la mayoría de ellos. Por lo que sección de MLA, esto básicamente determina cómo ven las cosas bien en donde este era el líder de ellos. Por lo general, utilizarás la pestaña Diseño si intentas agregar a lo sumo cosas dentro de algo. Y lo que quiero decir con eso es, si tomamos este ejemplo, tengo un blog dev, entonces tengo un encabezado, un párrafo y una perspicacia de botón. Si quiero hacer el párrafo de encabezado y el botón horizontalmente en contraposición a verticalmente, entonces haría clic en el blog dev que se puede ver ahí. Iré a la sección de laboratorio. Y si hago clic en este pequeño botón a la derecha, puede ver que todo se mueve horizontalmente. Y obviamente eso no se ve muy apetitoso, ¿verdad? Es decir, no está destinado a hacerlo. Esto es sólo para ilustrar cómo funciona. Y dentro de eso, puedo cambiar un montón de cosas diferentes. Puedo hacer click de distancia con estos botones. Puedo jugar con ellos hasta que esté contenta con cómo se ven. Puedo cambiar Vasco horizontal. Puedo hacer lo que me guste con estos, ¿verdad? Y eso es lo que usarías un vivir lejos. Puedes usarlo para cosas como encabezamientos si quieres. Pero yo aconsejaría solo usar eso si estás tratando de editar cosas y citar un punto muerto o en sección cyto. Pero de todos modos, esa es la sección de maquetación. Entonces si bajamos al espaciado, aquí es donde podemos ajustar el relleno y el margen. Entonces si tomo esta cabeza y puedes ver ya hice unas ediciones muy breves al encabezamiento, pero puedo cambiar el margen y puedo cambiar el relleno. Entonces solo para descomponer esto en caso de que no sepas cuáles son ninguno de estos. Márgenes de espacio, como se puede ver aquí. Se destaca en azul en el panel de honor aquí. Los márgenes de espacio que existe fuera del elemento que estamos viendo. Esos tonos azules representan el margen. Si paso el rato sobre el relleno, déjame solo ver hago shows. Sí, se puede ver el relleno existe n, digamos, el elemento que estamos viendo. Por lo que el relleno y el margen son solo una forma muy básica de ajustar el espaciado. Y no solo hay una cosa maravillosa, encontrarás que puedes agregar un margen de relleno y prácticamente cualquier construcción o inclusión de diseño de sitios web si lo estás construyendo desde cero. Entonces eso es algo a tener en cuenta. Déjame entonces a dimensionar si alguna vez necesitas ajustar manualmente el tamaño de algo. Y podemos hablar de esto un poco más tarde con más detalle. Puedes usar una tina de tamaño, por lo que tienes un montón de opciones diferentes. No necesitas saber que todas estas opciones son, pero tienes tus básicas que Px y tienes porcentaje de mojado. Entonces si estamos viendo este punto de ruptura, si queremos que el blanco al elemento que no tenemos mano sea sólo el 60 por ciento de todo lo que estamos viendo en este momento. Y luego podemos usarlos. Entonces tenemos un montón de diferentes aquí. No necesitas regarlo, pero estos son los únicos tres que realmente uso nuestro porcentaje px y luego este llamado View. Entonces ver, lo que significa que la sección en cuestión o el blog dev, y ajustaremos su tamaño en función del dispositivo que esté usando la persona para ver el sitio web. Entonces eso es algo a tener en cuenta y ver hey, es mucho lo mismo. Por lo que ese tamaño, pueden tener posesión y hechos absolutos relativos estáticos pegajosos. De verdad sólo vas a usar estos si estás haciendo animaciones bastante complejas o cuando estás construyendo tu barra de navegación y verás cómo usar estos láser sobre ellos. Tengo tipografía. Por lo que obviamente lejos tu texto, si quieres cambiar la fuente de la forma en que el tamaño, la altura, color, la alineación, el estilo, todo el lote que puedes hacer ahí. También puedes crear clases, lo que significa que no tienes que hacer mielitis a cada bloque de texto único que publiques, pero podemos hablar de eso más adelante también. Entonces aquí abajo tenemos antecedentes. De nuevo, si quieres cambiar el fondo de un bloque def, o quieres hacer una imagen, o estás tratando de hacer animaciones, Eso es todo lo que harías solo por eso. Y tenemos fronteras. Entonces si quieres alguna línea, rango de bloques, por lo que quieres cualquier línea, elementos Ranger puedes usar eso Es autoexplicativo, entonces tener efectos. Aquí no vamos a hacer mucho trabajo con efectos. En realidad sólo nos estamos centrando en la regeneración, la estructura del sitio. Y obviamente hay mucho que tenemos que cubrir aquí. Las animaciones serían un tema totalmente separado, pero no hay daño y jugar con ellas, experimentar con ellas y ver qué puedes hacer con ellas. Entonces esa es la pestaña Diseño. Entonces si volvemos a mirar hacia arriba arriba a la derecha aquí, podemos ver que tenemos pestaña Ajustes. Por lo que la NFA podría buscar la parte superior justo aquí podemos ver que tenemos pestaña Configuración. Y lo que encontrarás con esto como la pestaña Ajustes cambiará dependiendo de lo que estés viendo. Y debido a que tengo un rumbo, selecto escrituras, quizá quiera elegir si este rubro es H1, H2, H3 para 56 y así sucesivamente. Y si no sabes cuáles son, básicamente la estructura H1, H2, H3 ya que esa es la forma le cuentas a Google o le dices al buscador la estructura de tu página. Entonces por ejemplo, solo tienes un H1 por página y eso tiene un título de la página de la persona mirando a un H2 sería la segunda mitad de eso y te das la idea, así sucesivamente. Nuevamente, los instructores en jefe son más una cosa SEO. Realmente no necesitamos tocarles demasiado aquí, pero es importante que lo sepas, y no vas a tener que lo que sean los atributos personalizados y no vas a tener que sea más que la configuración de índice de búsqueda porque eso, todo lo que realmente no importa. Y luego tenemos Style Manager. De nuevo, no vas a tener que preocuparte demasiado por esto, pero, y los dos hacemos algo llamado limpieza al final donde f estaba alguna clase de la que sé que aún no hemos hablado. Y si hay clases, no las usas. Los limpiamos y nos deshacemos de los que están en activo. Y luego el panel solar. Si quieres interacciones, efectos e introducciones más complejas, si quieres construir algo más complejo, los combustibles, esos pueden tomar un poco más de tiempo. Volverías a usar panel de interacciones, eso es más avanzado y complejo y no nos van a tocar realmente nada de eso aquí. Pero no obstante, es importante que sepas lo que es. Entonces sí, pero realmente lo es. Entonces siento que eso es bastante una buena visión general de la plataforma Webflow en general. Hay un par de cosas que vamos a tener hacer laicos para que no haya tocado aquí y los ajustes más adelante. Pero en su mayor parte, debería estar bien para ir. Voy a entrar en más detalles en ciertos aspectos de amplia mencionada aquí. Pero en general, sí, creo que estamos bastante bien para ir. Así que sigamos adelante y preparemos nuestros activos de marca para este sitio web antes de que realmente empecemos a construir. De acuerdo, pasemos a la siguiente. 9. Elegir nuestra marca: Entonces ahora entendemos un poco más sobre la plataforma web es momento de dejar de hablar de activos de una marca. Entonces cuando comienzas a preparar deletreado el sitio, el dicho de que no haces cuando estás construyendo un sitio web por lo general no salta directamente al proceso de diseño. Esa no es la forma más eficiente de hacer las cosas. Y a menudo puedes encontrar que las cosas tardan más que la mitad que por ciertas cosas que no lo hiciste al principio del proceso. Entonces lo primero que siempre me gusta hacer es conseguir los colores de mi marca y alterar. Y el sitio web que solía hacer eso como un sitio web llamado asesinos y mata a su grande por generar paladares sosos. Es realmente fácil de usar y puedes, no voy a mentir. Puedes pasar mucho tiempo aquí el solo mirando diferentes colores. Entonces, empecemos con enero. Entonces a ver cómo vamos. De acuerdo, Entonces podemos ver aquí, esto es una dulzura y kilos. Y puedes jugar con esto. Puedes hacer lo que quieras con el tipo de esquema de color que voy a estar usando para este toallitas Ya sé que va a ser de un solo color. Entonces no quiero ningún color de acento, solo quiero un buen color y luego voy a usar una escala de grises para todas las demás cosas importantes. Entonces lo que voy a hacer un platillo a estos. Y luego voy a hacer de estos una escala de grises. Voy a uno para textos y luego uno para el contraste y el color. Y caso, estoy haciendo bloques diferentes o solo una cosa para estallar un poco más. Entonces voy a tener un color para mis textos, que será éste de aquí. Y luego voy a tener otro código que puedo usar contra el fondo blanco si quiero realmente, muchas cajas son inocentes, pero no quiero que esté tan oscuro que vaya a causar un contraste. Tan realmente minucioso y con el texto. Entonces sigamos adelante y escojamos el color para nuestros textos. Si vamos aquí y hacemos clic abajo hex y hacemos clic en pecker, justo entonces para probablemente tener aquí, piense probablemente, pero allá, creo que es probablemente un buen lugar para el texto. Está bien. Entonces podemos hacer eso y podemos encerrarlo. Y luego por aquí quiero un gris mucho más claro justo arriba del extremo superior de la báscula. Ahora probablemente no podrás decirlo aquí, pero este color no se usará mucho. Y es tan débil que ni siquiera lo notarás. Pero lo que hace es que me ayude a crear una diferenciación entre diferentes partes del sitio web y sin meterme demasiado en la cara del espectador. Y es algo que el espectador ni siquiera notará. Pero eso es cosa de un diseño, buen diseño como anomalía notada por la persona que lo mira como mal diseño y Moses. Entonces sé que nos vamos a quedar con esa. Y se puede ver que hay una diferencia muy leve entre el camino aquí arriba en la zona gris aquí. Entonces cerraremos esa. Y luego si cambio esto, y si usas la barra espaciadora, podrás cambiar el color como puedes ver eso. Entonces solo voy a seguir pasando por estos hasta encontrar el color con el que estoy contento. Entonces es una gema. Entonces queremos algo que probablemente sea bastante brillante, bastante eléctrico. Bueno ese es un color bastante interesante, pero probablemente un poco demasiado para un día. Y aquí, hmm, aunque interesante. Sí. No lo sé. En realidad creo que podría quedarme con eso por uno de aquí abajo. A lo mejor pasar el lado bueno, pero creo que podría trabajar con eso. En realidad, sí, ya sabes qué, vamos a quedarnos con nosotros. Creo que ilustra lo que estoy tratando de conseguir. Entonces iremos con este color. Entonces, vamos a encerrarlo. Y lo que vamos a hacer es simplemente guardarlo aquí. Y lo voy a guardar como este ejemplo de diseño. Eso está bien. Guarda eso. De acuerdo, innecesario si es así, esa es una de las cosas clave de las campanas y los activos de tu marca de la manera así que construiremos nuestra paleta de colores tan simple. Y sé que puede parecer muy simple, muy simplista, pero a veces cuando estás haciendo marcas y cosas de color, no quieres que estén demasiado pasando. No quieres que esto sea de color excesivo. Simplemente quieres algo sencillo y fácil de aplicar a la mayoría de las áreas del sitio. Entonces sigamos adelante con eso y a continuación vamos a pasar a picotear nuestra tipografía. 10. Agrega tus fuentes: Muy bien, entonces ahora que sabemos los colores que vamos a estar usando en una página web. Y lo siguiente que queremos ver como el tipo de fuentes. Entonces vamos a usar, que es otra parte realmente importante de cualquier sitio web que estés diseñando. Y no voy a mentir de la forma en que haces esto. Lo maravilloso es mucho más fácil y comparaciones de WordPress como es noche y día, siempre me parece súper, súper difícil conseguir fuentes personalizadas dentro de WordPress que cuando sólo el estándar que te dieron de alguien como yo, cuando hago esto todo el tiempo, me hace la vida diez veces más fácil. Entonces lo que tenemos que hacer es ir a las fuentes de Adobe. Ahí vamos. Y mantendremos abierta esa pestaña de asesinos para láser. Pero sólo voy a firmar rápidamente aquí. Está bien, eso es bueno ir. De lo que vamos a medir las fuentes de precio. Entonces sé diferente para ti, depende del tipo de sitio web que estés diseñando. Porque estoy diseñando el gimnasio. Vamos a querer algo limpio y es bastante audaz, no en tu cara, no excesivo, sino algo que sea limpio y moderno y le diga a la gente que es un gimnasio. Y entonces lo que voy a hacer es pasar por la limpieza. Puedes ver aquí, solo acercaré un poco solo para que puedas ver. Y esto nos da un montón de opciones diferentes. Entonces, ¿cuál? Yo voy a ir por? Uno de a va a ir muy lejos. Probemos el lujo, no uno y es así y tal vez geométrico. Ahora, vamos a limpiar. Y quiero san-serif, Ese es probablemente un buen lugar para parar. Y mira en estos. Entonces lo que encontrarás es, quiero decir, todas estas son solo variaciones de la doctrina de rancio, del mismo estilo de fuente, pero definitivamente de manera equivocada. Yo lo puedo garantizar. Entonces en realidad sólo mirando a aquellos que me llamó la atención en la primera página allá que creo que nos vendría bien este de aquí, Proxima Nova. Y ya he usado, quiero saber que psi es, pero creo que solo debemos seguir adelante y usar este mango, ese. Ya lo he usado antes. Sé que funciona, así que vamos a quedarnos con eso. Y ahora voy a hacer como crea proyectos. Y lo que vamos a hacer. Simplemente iba a llamarlo ejemplo de gimnasio Magnus. Está bien. A menos que haga clic en Crear. Y lo que hemos hecho ahí como lo hemos hecho, sí. Entonces lo que hemos hecho aquí es que tenemos casos a proyectos web y valoramos la fuente al proyecto web y el proyecto web con locos como lo que se va a hacer cumplir en Webflow por si no estuviera claro. Entonces vamos a dar click Hecho. Ahora, ya me he conectado a mi cuenta de Adobe Fonts, así que tendrás que hacer esto también. Pero lo que tenemos que hacer aquí es ir a Ajustes. Entonces si subes a la esquina superior izquierda, a la hamburguesa pequeña y luego vas a Configuración del proyecto. Por lo que realmente no hemos tocado mucho a Ajustes y vamos a estar definitivamente si aquí. Y como vamos como todas las cosas buenas aquí que hay que saber. Pero no vamos a entrar en laser tell. Estamos configurando para dominio y esas cosas. Pero lo que quieres hacer para las fuentes ya que va a la sección de fuentes. Y ya verás aquí, obviamente tienes acceso a fuentes de Google si quieres usar alguna de ellas. Simplemente prefiero tener la flexibilidad de las fuentes de Adobe y se puede obtener un poco acceso a fuentes que de otra manera no sería capaz de realmente. Si tienes alguna fuente personalizada que quieras agregar, puedes hacerlo aquí. Pero en realidad, si me aísla, lo que probablemente estéis haciendo es usar fuentes de Adobe. Entonces ya tengo mi cuenta, como pueden ver, y podemos ver ejemplo de Magnus Jin aquí abajo. Entonces voy a hacer clic en eso y voy a guardar los cambios. Y lo que eso hará es importar Proxima Nova. Y así nuestros proyectos. Y eso es todo. Es así de sencillo. Realmente es así de simple. lo único que no he tocado también, y es un token API de Adobe. Todo lo que tenemos que hacer es recolectar la API de Adobe Stock y están guardados token. Y lo que hacen las API, todo lo que hace es crear como una verificación entre las dos aplicaciones. Y pasa por alto un nivel de seguridad que les permite hablar entre sí. Entonces hemos escogido las fuentes y ahí lo siguiente que tenemos que hacer es mirar nuestro logo, ¿verdad? Entonces otra parte realmente importante fue un poco al que vamos a lucir. Entonces hablemos de eso a continuación y empecemos a diseñar un logotipo. 11. Diseñar tu logotipo: De acuerdo, entonces lo siguiente que hay que hacer antes de que realmente volvamos a Webflow y empecemos a rebotar como crear nuestro logo. Por lo que hay un par de buenos sitios web que puedes usar. Yo recomendaría sólo para darle un poco un par de ideas y el tipo de local que tal vez desee. El primero como lookup. Y he usado un vistazo a un par de veces, solo me da algunas buenas ideas y el tipo de logo y busco crear, y solo me da algunos bienes, n decir n al tipo de logo que pudiera querer. Entonces solo estoy login realmente rapido porque ya tengo una cuenta con ellos. Y lo que podemos hacer es que voy a generar más diseños de logotipos. Y porque ya estaba entonces aquí, Elea haciendo algún trabajo en, digamos, de la orden, pero son campanas. Ya hay un par de sugerencias para el gimnasio Magnus. Entonces, solo mantengamos eso como tal. Simplemente pasemos por estos y echemos un vistazo. De acuerdo, entonces obviamente hay un montón de sugerencias que nos han dado. Personalmente no estoy interesado en ninguno de ellos, pero lo que encontrarás con nosotros, como que tienes que escoger y elegir lo que buscas. Entonces si lo haces como un divertido y odias los colores son algunos de ellos te puede gustar el ícono comportarse el texto conoce algunos de ellos. Es posible que te guste el ícono y el texto se comporte con el color, así que solo un poco tienes que escoger y elegir. Y por qué haría es dejarme sólo ver si hay uno que realmente salte. Entonces sabemos que nuestro color va a ser rojo. Entonces busquemos formas que puedan funcionar. Ese parece interesado. Pasando mucho por aquí. Bastante como el peso uno. En realidad se adelantó y ya he inclinado un logo que nos vendría bien, pero sólo quiero ver si hay algo más aquí que salte del brazo. No sé cómo me siento al respecto. Y de todos modos, el punto aquí es que solo puedes seguir desplazándote por esto y puedes seguir buscando logotipos muy diferentes y puedes tomarte el tiempo que quieras. Es como que los refrigeradores para, tú, solo podrías sentarte aquí, hacer clic y cargar más todo el día mirando un montón de logotipos diferentes. Algunas de estas son interesantes, pero lo que podríamos hacer es que nos quedemos con el logo, el exterior. Siguieron adelante y crearon estos solo para mantenernos al ritmo. Sí, sólo las haré. Por lo que para diseñar tu logo, tienes un par de opciones. Puedes usar Adobe Creative Cloud o puedes usar Canvas. Si lo que buscas es crear rápidamente un logotipo. O si ya tienes un logotipo, tal vez, tal vez has usado Canva, tal vez no por recomendación Canva para la mayoría de la gente, solo si te están parando a usar esto fácil de usar, arrastra y suelta todo ese buen material. Entonces lo voy a hacer es sí, ese es el logo que busco aquí. Correcto. Por lo que ya me adelanté y loco el lado del rojo diferente. Entonces cambiémoslo a los rojos que busco usar. Vuelve aquí y hagamos eso bien, ganancias. De acuerdo, prueba feliz con eso en general la cosa. Sí, está bien. Podemos quedarnos con eso. No soy tan rápido que el hueso. Entonces lo que vamos a querer hacer es que yo quiero que eso sea un poco más grande. Entonces estamos consiguiendo el foo de bang por buck. Voy a recortar esta dinámica para que realmente no sea masiva demasiado sobre el tamaño y esas cosas. Y luego vamos a descargar. Por lo que iremos PNG trasplantará y fondos descargas. Y ahora que lo hemos hecho, volvamos al Webflow. Entonces aquí vamos. A menos que, sí, volvamos aquí. Volvamos con el diseñador. Y vamos a subir este logo. Y eso debería de esperar poner no es buena stat sitios comenzarán a diseñar lo mismo. Entonces vamos a MGs. Haga clic en subidas, menos aquí, abra eso. De acuerdo, y podemos ver nuestros logotipos en sus bolsillos. Entonces ahora que tenemos un logo, obviamente te llevas un poco más porque tienes que diseñar uno desde cero. Tienes que dedicar tiempo a conseguir algunas ideas. Logotipo es vertical importante. Así que asegúrate de gastar tu tiempo en ello. Asegúrate de estar realmente contento con él antes de ponerlo en tu sitio. Pero sí. Entonces lo siguiente que tenemos que hacer, y vamos a volver a una forma web detendrá campanas en eso ya que necesitamos construir una guía de estilo. Entonces ahora que tenemos colores, tenemos fondos, tenemos nuestro logotipo, y tenemos que construir una guía de estilo. Y una guía de estilo va a hacer tu vida mucho, mucho más fácil cuando realmente comienzas a construir en esta plataforma. Entonces vamos a saltar a eso en el siguiente video. 12. Diseñar tu guía de estilo: De acuerdo, entonces ahora que tenemos una marca de colores, tenemos nuestra tipografía o fondos y tenemos nuestro logo. Tiende a seguir adelante y construir una guía de estilo dentro de Webflow. Entonces si volvemos a saltar a Webflow y vamos a crear una página y vamos a llamar a una guía de estilo ahora, en caso de que te estés preguntando por qué quedarte todo conseguir Como y como, por qué, ¿por qué puedo simplemente seguir adelante cinturón el sitio ahora a1 wie das una factura para quedarse O portón. Este día va a ayudar con un par de cosas. En primer lugar, va a ayudar cuando estás aplicando diferentes temas, las diferentes partes de tu sitio. Y porque lo que vamos a hacer es que vamos a crear clases y voy a explicar exactamente qué datos son a medida que estamos pasando por el proceso. Pero lo otro te ayudará a hacer así. Si también estás creando contenido social, ya sabes, tal vez haces un mercado de salida a bolsa también. Si lo estás haciendo, si estás usando diferentes métodos de marketing donde aplica tu marca, la ganancia estable te va a ayudar a mantener tu marca consistente en todas las diferentes plataformas que la orina, pero sobre todo lo demás realmente va para ayudarte dentro de Webflow y ahorrarte mucho tiempo y energía. Entonces sigamos adelante y creemos una nueva página. Y lo vamos a llamar guías de estilo. Y eso es todo lo que tenemos que hacer. No necesitas hacer nada sobre SEO. No necesitas diagnosticarlos con Open Graph, pero hay una cosa que tienes que hacer. Entonces si te desplazas hacia abajo hasta la parte inferior de esta página, tienes códigos personalizados y tienes etiqueta de cabeza de la NSA y una etiqueta de cuerpo. Y necesitas un poco de códigos. Necesitas un poco de código. Para que esta página no sea indexada por Google debido al propósito de esto es ser utilizada internamente en su estudio. Del propósito de la misma no es que sea indexado por Google. Realmente no quieres que nadie lo vea. Por lo que esta página me acabo de levantar, no debería Google Search Console en sí. Y queremos usar una etiqueta sin índice. Y esto básicamente le dice a Google que esta página que estamos viendo no debe ser indexada por ellos. No queremos que se indexe. Entonces lo que vamos a hacer es que vamos a copiar este código aquí, copiarlo, y volver a Webflow. Y vamos a pegar la etiqueta de cabeza final, ¿de acuerdo? Y eso es todo. Por lo que esto detendrá Google crawl en esta página y yo solo buscaré en Google cualquier buscador. Se detendrá cualquier, cualquier buscador comprado crawl en esta página y nodo índice. Entonces cuando lo hayamos hecho, vamos a golpear Crear. Ahora tenemos nuestras guías de estilo. Entonces lo que vamos a estar haciendo con el portón trasero es que básicamente vamos a estar construyendo el tema de nuestra página web. Y solo para dar un poco de comparación aquí, ya sabes, estaremos hablando de WordPress bastante en onda para ti básicamente crear tu propio tema. No hay un Wordpress donde elijas uno. Puedes escoger plantillas para capas y el tipo de estructura que quieres que siga tu sitio. Pero cuando se trata de temas, fuentes, color, diseño, animación, cosas así. Tenemos que construir guía de estilo para que ese sea el caso. El modo en que me gusta describir los pisos web, es básicamente como un desarrollo sin código para gustarle esto es lo más cercano que llegarás a codificar sin tener que abrigos, ¿de acuerdo? Porque los fundamentos de esta plataforma se construye a partir de como cierre. Y eso es, esa es la verdad. Entonces la forma en que vamos a hacer esto también, sólo tenemos que seguir con lo que estoy haciendo. Aquí. Soy un aplico lo mismo que dependiente de qué fuentes y colores estés usando. Puede ser ligeramente diferente. Hagamos sólo una sección. Y luego vamos a tirar, sólo voy a tirar un contenedor aquí por ahora. Hablaré de mis trucos con contenedores láser. Y entonces lo primero que vamos a hacer es que vamos a, lo siento, los encabezados al ras, eso va a ser lo primario. Entonces, solo agreguemos estos aquí. Vamos a sumar seis de ellos. ¿ De acuerdo? Y luego debajo de cada uno, vamos a añadir un párrafo. ¿ De acuerdo? Entonces hablemos de uno que vamos a usar aquí va a ser nuestros encabezamientos H1. Por lo que este es el título que se utilizará en la parte superior de cada página. Y 40 H1 queremos hacer, en primer lugar una cosa. Por lo que ya está marcado ese. Pero antes de empezar a editar esto y hacer que se ponga fin a los errores y haciéndolo reflexivo de la marca que estamos tratando de lograr. Nosotros queremos dar una clase y queremos llamarla, yo la voy a llamar básica. Sí, eso va a servir. Lo vamos a llamar edad básica uno. Haga clic en Crear. Ahora lo que acabo de hacer es crear algo llamado clase. Y la mejor manera en que podría describir una clase como un conjunto de características de marca o temas de marca son características diseñadas más bien que estás aplicando a un particular decir en tu sitio web que es independiente de cualquier cosa que no tenga esa clase. Por lo que puedo aplicar esta clase a todo tipo de elementos diferentes, cualquier edición que haga aquí. Entonces H1 con esta clase, siempre y cuando aplique ese Teller, cuáles a lo largo de mi dicen, el mismo tema, se aplicarán los mismos principios de diseño. Y ese es un punto clave. Por lo que contamos con H1 básico. Y lo que voy a hacer aquí es esto, es esto bueno en el yo sé de que puedes usar eso ayudará con dimensionar tus encabezados. Por lo que dice Web, creo que éste es correcto. No era ése. Dame dos segundos. Realmente puedes usar cualquiera de estos. Es sólo preferencia personal, pero hay una en particular que me parece bastante útil. Y fue éste. No, creo que fue el justo debajo de eso. Esta es una. Sí. A mí me gusta bastante este cuando usaría. Está bien. Entonces lo que vas a hacer aquí, ya que vas a poner tu cuerpo texto tamaño de fuente, te recomiendo que te pegues el 18. Y el mínimo realmente para tu sitio web debe ser de 16 por siempre recomendar asíncrona porque es solo bueno para usabilidad y accesibilidad y asegurarte de que todos puedan leer lo que hay en tu sitio. Y luego cuando pongas el n y eso te va a decir cuáles deben ser todos los otros incisivos de cabeza a través de diferentes puntos de ruptura y basados en eso, en base a ese tamaño de párrafo. Entonces puedes ver aquí porque el tamaño de la fuente de mi cuerpo será de 18, básicamente está diciendo que mi H1 en escritorio debería ser 54. Debería dejar caer el 45 en la tableta y luego 36 en el móvil. Entonces volvamos y aplicemos algunos de estos a nuestro H1. Entonces el primero que tenemos es 54. Entonces voy a hacer del tamaño de esta lista. Tenemos que ir a la tipografía. Entonces colapsemos todas estas escuelas a la tipografía. Entonces podemos ver que es una China 38. Entonces hagamos ese FST para la EPOC. Hemos aumentado el tamaño de la misma. ¿Y por qué no escucharía? Sólo cambiémoslo a las fuentes, engendrado de fuentes que queremos. Y veamos el color. Entonces este era un color que queremos quizá bastante similar al que ya tiene aquí. Está bien. Apenas ligeramente diferente pero más o menos en la misma línea. Está bien. Entonces lo hemos hecho y ahora queremos asegurarnos de que se apliquen los tamaños de fuente adecuados. Son todos estos diferentes puntos de ruptura. Entonces a medida que subes la escala, medida que te acercas hacia el mendigo, un punto de ruptura, realmente no importa. El único realmente importa el tamaño de los Haden y todo el asunto se reduce a medida que vas a dispositivos más pequeños. Entonces lo que vamos a hacer aquí es que vamos a ir a la tableta. Nos vamos a llevar la tableta número 45. Y lo vamos a aplicar aquí. De acuerdo, nada de báscula ese hacia abajo. Y luego vamos a ir al móvil H1 36. Y vamos a aplicar 36 tanto al móvil horizontal. Yo sólo soy un Volvo normal querer auto bien, ganancias. Entonces eso es uno en voz baja, Es básicamente una escala del IB. Se puede ver que se mantiene consistente y nos mantenemos efectivos para a medida que vamos hasta aquí. ¿ Verdad? Por lo que ahora queremos pasar a H2. Entonces voy a llamar a este H básico dos. De acuerdo, entonces sólo queremos volver a pasar por ese mismo proceso. Entonces hagamos esta topografía, ustedes regresen a Proxima Nova. Vamos a asegurarnos de que usamos los colores correctos. Al igual que se mencionó antes. negritas e interminables van por aquí. Entonces para cobertura a escritorio, estamos mirando a Farsi one, Suecia, ¿verdad? A menos que sepas que las habilidades abajo. Entonces te vamos a forzar, prever 1, 36, luego 29, copia de seguridad, SAP otra vez, una etapa tres, volver a bajar a 0. No hay cosa que olvidé mencionar. Este, me olvidé de añadir una clase aquí. Y ese es un buen punto en realidad. Si no creas una clase antes de hacer trabajo de diseño en un elemento. El flujo de trabajo asignará automáticamente una clase, pero puede cambiar el nombre de la clase cualquier punto. Y así a éste sólo se le está asignando cabeza adentro. Entonces voy a cambiar eso y voy a llamar a eso un H3 básico. Y otra cosa a señalar, cuando haces, cuando haces una clase y lo llamas HCI básico es particularmente para títulos. No va a cambiar automáticamente evaluando aquí. Entonces, por ejemplo, no creo que esté encendido aquí lo que deba marcarse como H dos. Y éste de aquí debería marcarse como un H3. ¿De acuerdo? Entonces eso realmente te ayudará un poco. De acuerdo, de todos modos, pasemos a la H4. Tan básico h4. ¿ De acuerdo? Y ahora se puede ver el H4. Cuando entramos en 20, las cosas empiezan a ponerse bastante pequeñas. Y en realidad probablemente no vaya más allá de H4 y esta instancia, y no, no me imagino que usaremos más de una página para cuando estemos construidos en el sitio. Entonces vamos a quedarnos con eso. Hemos nombrado a la h4 básica. Queremos asegurarnos de que esté marcado como h4. De vuelta por aquí. A ver. Imagino que sí, todos se quedarán es de 20, sin importar si me caigo, vamos. Está bien, bien, bien. Entonces, solo usemos porque ya no los necesitamos. No creo que los necesitemos, pero nada que queramos hacer. Yo quisiera hacer aquí. Entonces lo que queremos hacer es editar el párrafo y te asesoraré qué hacer aquí, pero solo queremos nombrar a esta clase Párrafo Básico. Nuevamente, vamos a cambiar su ANOVA aproximado. Vamos a hacer la talla 18 como hablábamos. Está bien, genial. Como se puede ver ahí, porque hemos aumentado el tamaño del texto y esto, y este párrafo sin aumentar realmente la altura. Se ve un poco gracioso. Se ve sobre apretado y condensado. Cuando se trata de enviar el tamaño está lejos. Tus párrafos básicos. ¿ Por qué aconsejaría como aumentar el heno? Cámbialo a porcentaje. Y luego vas a estar mirando algún lugar entre el 125%, 165. Por lo general me gustaría ir por lo general alrededor de 145, que sí, puedo vivir con eso. Eso me parece bien. Sí. Yo puedo sumar a eso. Yo puedo vivir con eso. Eso se ve bien. Yo creo. Veamos cómo se ve a 16. 5 en realidad es para que puedas jugar un poco con lo habitual. Es decir, no quieres que se vea al espacio. Simplemente no se ve, ya sabes, simplemente no es fácil en el ojo. quiere simplemente mirar el espacio para que no se vea tendencias realmente, eso es lo que vamos a buscar. Entonces creo que eso es justo. Creo que eso es un bien que es un buen lugar para empezar. Solo trato de pensar que ella iría 17 o 16. A lo mejor para este sitio web, creo que podemos ir por un 16, en realidad, 16 px en términos de párrafo básico, Hey, creo que eso puede ser más apropiado. Entonces iremos a 1 65, y oye, talla 69. Sí, Como dije, quiero decir para la altura del polígrafo, realmente tienes que tomar como viene, a veces las fuentes se verán ligeramente diferentes si estás usando diferentes fuentes con ellas. Y ahí es donde realmente el tamaño y la justicia. Entonces una cosa puede, para ésta, ya que se pegará con 16. Y hemos definido nuestro párrafo básico. Vamos a copiar rápidamente este color sobre. Está bien, bien. Estoy bastante contento con eso. Creo que lo que haremos es que solo aplicaremos esta clase en todos estos Haden solo para que puedas hacerte una idea de cómo se ven con diferentes Haden. Y luego voy a marcar esto es rumbo uno, rumbo al rumbo tres, y luego cuatro. Está bien. Estoy bastante contento con eso. Yo creo. Sí, me siento bien por eso. Entonces lo que vamos a hacer ahora como eso, eso es el, eso es lo principal. Entonces como estaba hablando antes, eso significa que básicamente puedes tomar este H1 básico que puedes copiar y puedes aplicarlo a otros lugares del sitio. Y la guía de estilo seguirá siendo el núcleo de lo que tratan estas clases. Ahora tienes algo llamado clases de combo. Si alguna vez tienes que cambiar uno de estos en una página en particular porque el color no está bien o algo así. Y te enseñaré cómo hacer eso un poco, Lisa. Pero esto es lo principal. Pero esto es lo principal. Ahora. Ahora que tenemos el texto o la forma que fue uno de los componentes centrales. Una cosa que queremos hacer, um, como agregar botones, está bien, así que déjame volver aquí. Voy a jalar sobre un botón y queremos llegar a un diseño para 40 botón, ¿verdad? Queremos que un botón sea reflexivo de una marca. Nosotros también queremos para n. Entonces lo que voy a hacer aquí es que somos una especie de topografía en este punto y vamos a buscar en más de su tamaño, fondos, y fronteras. Entonces lo que quiero que diga mi botón, mayoría de los botones dirán Aprender más estándares. Y quiero que el texto obviamente sea Proxima Nova. Yo quiero que el fondo sea encantador, rojo que elegimos. Y mueve eso de nuevo. Entremos a los fondos. Está bien, Dulce. Está bien. Ahora como puedes ver, todavía se ve un poco. Yo soy como si fuera solo un botón básico, ¿verdad? Entonces pongamos el texto en negrita. Nosotros vamos a hacer las fronteras, pero curvas ahora podemos o bien, ya sea píldora que re n, por lo que se ve un poco más así o simplemente podemos tenerlo siempre tan ligeramente. Para mí, para esto, estoy pensando que vamos a quedarnos con el yo creo que podemos ir llenando. Pero debido a que lo hemos hecho, lo que tenemos que hacer es volver a la talla, sin talla. Por lo que tengo cualquier SQL a espaciado. Significa agregar un lub y más relleno a los bordes aquí. Estoy pensando que tal vez robo diga sí, creo que eso es un razonable saber naturalmente tal vez 21 cosa que encontrarás cuando estés pasando por esto es que estarás jugando un avión sobre mucho en él. Estamos tratando de averiguar qué es lo mejor. Entonces creo que eso es apropiado. Y otra cosa que vamos a querer hacer es que sólo queremos que no se pop un poco más, pero queremos suavizar esos bordes duros. Tenemos correr del tamaño de la misma. Um, creo que se ve bien. Podría probablemente podría usar eso y sentirme bien al respecto. Pero una cosa que me gustaría hacer como cuando vamos a Effects, tenemos una pastosa, agregamos una caja-sombra, ¿verdad? Entonces haga clic en plus en eso. No párrafo tan básico así, no, quiero, quiero en el botón. Está bien. Ahora lo que pasa con esto, cuando estás agregando sombras a granel y realmente no quieres que sean placas perceptibles de las que volvimos a hablar con, ya sabes, el buen diseño es el diseño como oocisto. Por eso suele decir, queremos, queremos asegurarnos de que nuestros usuarios no se van a sentir como, oh, eso se ve de cómo no se ve del todo bien. Entonces queremos tomar la distancia. Debería saber que podemos dejar una cosa creo que puedo irme. Puedes dejarlo en un desenfoque en el rubor para estar bastante alto. Pero queremos que el tamaño sea bastante pequeño. Está bien. No quieres usar esas narices y eso fue algún tipo de desenfoque ahí. Y no queremos chorrear negro, queremos tirarlo hacia abajo tal vez al mismo tono de gris que estamos usando en el texto. Está bien. Por lo que es posible que no puedas notar que realmente sabes que hiciste. Esos son muy, muy leve desenfoque alrededor de ese botón. Eso lo hace destacar un poco más, le da mucha más textura. Y, pero no tanto que se va a interponer en el camino de cualquiera que lo mire. Simplemente me voy a sentir incómodo en el ojo. Ese es el punto que yo haría. Entonces eso es un botón para que podamos copiar eso. Oh, lo último que tenemos que dar esa clase, así que vamos a llamar a ese botón básico, ¿verdad? Y podemos aplicar esa clase a cualquier otro botón que agreguemos. Así sitio también. Entonces, solo copiemos eso. En realidad, no, podemos duplicarlo y solo podemos ver cómo se ve eso y otras áreas. Y sé lo que estás pensando. ¿ Cuál es el grado? Sí. Es decir, dígale a su marca como lo que se desarrolla la marca Azure, puede usar esta página para seguir desarrollando diferentes aspectos de la misma. Entonces, por ejemplo, si quiero que agregues un color de acento aquí, quiero que hagas cosas diferentes y sí, tenía todos estos colores diferentes pasando y tal vez quería añadir otra diversión. Este es el lugar donde haría el trabajo para que eso sucediera. Ahora, ahora que tenemos el botón, tenemos el texto, estoy bastante alto, bastante contento con ellos. Vuelvo a hacer retoques el botón. Podría volver a ajustar el botón, pero aparte de eso, no creo que vaya a hacer mucho. Entonces ahora lo último que queremos hacer aquí es obviamente solo por facilidad de uso ID luego una sección aquí. No lo hice Webflow contenedor estándar, en realidad te voy a mostrar aquí, en realidad tiene cinturón la sección y el contenedor. Porque si estás usando estos puntos de corte más altos como hablamos, en realidad tienes un poco claro al respecto, así que todo juega bien. Déjame hablar de eso ahora. Entonces lo que quiero hacer cuando fui a un bloque sordo justo ahí, ahora, soy un poco de ingeniería inversa y eso es correcto. Cuando lo estás construyendo, solo eres una sección y luego pones un sitio de blog muerto y cosas que debí haber liderado con eso. Perdóname. Pero vamos a hacer eso. Voy a tirar de esto la cuadra. Por lo que voy a tirar de todos estos elementos entrar en el callejón sin salida. Por lo que todos deberían simplemente arrastrar y así, bastante tiempo, pero llegaremos allí. Está bien, nota y ahora solo quiero cambiar eso sí bloquea y no quiero deshacerme de ese contenedor. Ahora puedes ver que cuando tuve el punto muerto y como hablé de un like, no hay diferencia entre un interbloqueo en un contenedor y el contenedor es solo un blog dev. El Webflow se juega con un poco. Pero lo que es esta sección mientras quiero hacer es que hoy quiero darle a esto una clase. Yo quiero llamarlo sección básica. Sí. No se puede deletrear básico con claridad. Sección básica. Y en cuanto a maquetación, quiero ir a esa caja de la derecha, como ya hablábamos antes. Yo quiero que sea vesícula e I1. Sí, quiero eso ahí. No, no me gustará eso. Ya sabes, salí por ahí y eso es todo lo que queremos. De acuerdo, Así que mientras que la felicidad, esta sección, escalaremos independientemente del tamaño de los dispositivos que esté mirando un usuario. De lo que cambiaron ligeramente las cosas del punto muerto y voy a hablar de eso ahora. Entonces lo que vamos a hacer es ir a def block. Voy a llamar a este contenedor básico. Ahora lo que queremos hacer es querer dejar eso así. Entonces en cuanto a los casados, queremos establecer nuestros casados máximos al ancho de un punto de ruptura base. Por lo que queremos que un ancho máximo sea 11, 7, 8. Y queremos ser Déjame ver donde estamos al 99 para. Y entonces lo que vamos a hacer es fijar los pesos reales para ver ¿cuál es ese? Cientos. ¿De acuerdo? Y entonces lo que también queremos hacer es con relleno, nunca realmente quieres elementos no tenían el sitio de la página así. Entonces lo que quieres hacer es agregar relleno en cada uno, decir probablemente pedo, di sí, sí. Sí, sí, empecemos con FAR. Ya verás a medida que sigamos, siempre puedes volver y cambiar esto si si cambias de opinión, pero sí, estableceremos que estamos lejos de eso. Y luego a medida que avanzamos hacia arriba, está bien. Realmente no lo puedes ver ahora mismo. Pero esto esperemos que me dejen sólo ellos. Alejaré un poco y te mostraré aquí. Está bien. Correcto. Entonces, para que si puedes ver esto, lo que pasa es la sección, a medida que subo, al salir, la sección va en aumento. El apartado va en aumento de ancho. Pero la forma en que he establecido esta sección como para la a mantiene el contenedor básico centrado independientemente del tamaño de la sección As. Y porque hemos establecido estas restricciones en torno a la hifa ese contenedor puede salir y no se va a estirar demasiado a medida que la pantalla se agranda. Esto es algo común que verás en la mayoría de los sitios web porque no lo hacen. Porque lo que pasa es si has diseñado algo perfectamente en este punto de ruptura base 0. Y solo por las dimensiones base de un sitio web, si lo sacas, perderás todo ese gran diseño, todas las cosas geniales que has hecho con él. Por lo que es mejor solo mantener las cosas sensor para mantener todo en su lugar. Y por eso hacemos esto. Entonces estoy bastante contento con eso. Ese es el truco cuando se trata de contenedores. Por lo que ahora tenemos nuestra sección básica y tenemos un contenedor básico. Tenemos nuestros rubros básicos y tenemos un párrafo básico. Y estoy en general presi contento con cómo se ve si estoy siendo honesto. Está bien. Entonces podemos estar pensando, Bueno, no, tengo un poco de guía rancio y juego. Bueno, lo siguiente que tenemos que hacer es seguir adelante y crear nuestro encabezado bajo FIFO. Y a eso voy a pasar a continuación. Y lo que haremos es cuando algo salga, vamos a pensar que es apropiado y por eso suelo hacerlo. Normalmente empiezo con esto como mi mirada de estudio. Y luego cuando creo que algo más necesita guiar, está aquí, como por ejemplo, digamos un 10, no sé terminus de botón, ¿verdad? No hay esa. Se ve un poco diferente a eso encaja con un tipo de diseño diferente. Y volveré y diseñaré un botón diferente con una clase diferente. Y puedes hacer esto por todo tipo de cosas, ¿verdad? Sí, Entonces ahora vamos a pasar a diseñar el encabezado, que es una parte realmente importante. Y luego vamos a diseñar el Fisa. Y luego vamos a empezar a llenar los espacios en blanco y conseguir voy a decir que se ve bien. De acuerdo, entonces esa es una grande fuera del camino. Pasemos al siguiente. 13. Crear tu mapa del sitio: De acuerdo, entonces ahora que hemos construido puertas de estancia O, es hora de empezar realmente a construir las cabezas son un oficial de un sitio web. Pero antes de que hagamos eso, Hay una última cosa significa es un cinturón, un sitemap y páginas y Audra. Y a veces este paso en el proceso se puede omitir. Depende del tamaño de la página web que estés construyendo. Y por la luz incluir esto de todos modos, sólo porque sé que se puede construir en un sitio más grande era más páginas y F, Así que eso nece, tal vez algo que quieras considerar. Por lo que cada sitio web tendrá algo llamado mapa del sitio. Y un sitemap como el camino de Google incluso chatbots en la estructura de tu sitio y qué páginas son importantes. Ahora bien, los sitemaps no sólo son para eso sin embargo, hay todo tipo de ayuda que te hagas un seguimiento de lo que las páginas construirían en un más páginas son importantes para ti. Entonces, ¿por qué lo hago normalmente, normalmente solo nos uso para llamar a pegamento mouse, pero también puedes usar como nombre a Lucidchart. Sí, puedes usar Lucidchart. He usado Lucidchart y el pasado, y son realmente buenos si estás tratando de construir este tipo de cosas. Vamos sólo a tramitar visual, pero por eso es columna. Y eso es lo que estás haciendo cuando estás construyendo un mapa del sitio. Entonces las páginas que vamos a tener, si estamos un poco elaboradas estas como una jerarquía mientras que la página principal tendrá la página sobre. Y también tendremos mucha página de servicios tendrá una página de precios para diferentes paquetes. Y la última que tendremos como página de contacto. Entonces, solo pongamos eso en. Y ahora tenemos 15. Sí. Entonces eso es más o menos eso es del tamaño de uno. Tenemos página web de cinco páginas y puedo vivir con eso. Entonces lo que queremos hacer con esto, ahora que tenemos nuestro mapa del sitio, ya que puedes guardar esto, puedes descargarlo, hacer lo que quieras. Y tienes sitio web de mendigo, como dije, entonces probablemente quieras seguir sabiendo que en algún lugar o manteniendo el montón, ya sabes, un documento activo sobre gleam obsoleto tenemos aquí y solo agregarlo a cada vez, si las cosas están cambiando, mucha más claridad en el contenido de su sitio y lo más importante para usted. Entonces ahora que conocemos nuestras páginas, Volvamos a Webflow y una última cosa, wipe flow realmente generará sitio web sitemap para ti. Entonces el que Google leerá Whfore automáticamente generará eso para ti para que no te preocupes por tener que hacer otra cosa que no sea eso cuando se trata de tu mapa del sitio. Y esto es solo para ayudarte. Entonces, cuando hayamos hecho eso, volvamos a saltar. Entonces Webflow, y sólo vamos a crear rápidamente nuestras páginas. Entonces tenemos nuestra guía de estilo que no eran índice, y luego vamos a crear una nueva página. Entonces llamemos a este abouts. Nuevamente, notemos lo que tengo SUR, algo así por el momento, solo creemos estas páginas. Por lo que tenemos la página web. A continuación vamos a ir por servicios. Vamos a crear eso. Vamos a tener precios. Vamos a tener contactos. Y vamos a tener una página de contacto. De acuerdo, genial, Así que vamos a crearlos. Y sólo limpiemos a la banda Apolo. Asegúrate de que la guía de estilo no lo esté y el camino. Muy bien, genial, Así que ahora tenemos todas nuestras páginas y eso es todo. Entonces la razón, de nuevo, solo para enfatizar, la razón por la que querrás ahorrar. El motivo por el que querrás dibujar uno es si tienes un sitio web de mendigo, si tienes más páginas, por eso querrás una, porque querrás hacer un seguimiento de las cosas. Es posible que desee considerar la compra de CFS y páginas en carpetas. Entonces sí, si estás construyendo un sitio web más grande, entonces definitivamente recomiendo elaborar un mapa del sitio. Pero con eso dicho, vamos a agacharnos y a construir nuestra cabecera. 14. Construir tu navar: De acuerdo, entonces ahora que hemos seguido adelante y creado nuestras páginas, tenemos nuestro mapa del sitio y todas esas cosas. Y ahora queremos seguir adelante y crear la barra de navegación y la fisura. Y este video, sólo vamos a estar mirando a la cabeza de la barra de navegación. Y nos vamos a construir en eso. Y les voy a mostrar paso a paso cómo hacer eso. Realmente puedes hacer todas estas cosas en cualquier orden que quieras. Simplemente creo que es mejor para esos conseguir el navbar en las vísceras del camino. Y principalmente porque serán símbolos, habrá cosas que aparecen en cada página del sitio. Y es un buen trozo de cualquier diseño lo que estás haciendo fuera del camino cuando los tienes hecho a los dos, solo encuentro esa buena manera de romper el video de entrenamiento y funciona para mí. Por lo que puede funcionar para ti. Entonces necesito hacer esto. Lo que vamos a hacer es ir a ese signo más en la parte superior. Sólo me voy a poner por aquí. Y vamos a desplazarnos hacia abajo hasta el fondo. Y verás navbar. Y vamos a tirar de eso aquí arriba. De acuerdo, Así que recuerda cuando he estado hablando de contenedores y cómo son un poco divertidos. los que Webflow te da lo que este contenedor, estás restringido a este casados de contenedor. Y eso no queremos. Queremos poder utilizar el espacio del lado izquierdo y derecho. Y ahora para hacer eso, tenemos que hacer un mono sobre cama Otelo antes de empezar a hacer todo el diseño de cosas con eso, queremos poner nuestras estructuras en su lugar. Por lo que no tiene navbar. Tenemos el contenedor, como se puede ver en el navegador del lado izquierdo. Y luego decir que tenemos característica de marca y luego en realidad nos hemos ido Nav Menu era nuestros enlaces de navegación y citarlo. Y luego tenemos un botón de menú que aparecerá cuando estemos en dispositivos móviles. Pero lo que quiero hacer aquí es que quiero que este contenedor sea las telarañas de comida. Ahora, no quiero monearme con esto con este contenedor porque no me va a dejar, está restringido a pueblos nuevos de lo que puede hacer y no me va a dejar sentir que ese es el ancho completo. Entonces lo que quería hacer como boleto ese bloque, voy a arrastrar eso al contenedor. Y me pregunto si todas estas cosas y decir que diblock y vamos a nombrar renombrar y un segundo malicioso tirar todas ellas y voy a sacar eso. Y luego vamos a desechar el Container Insights. Está bien, y ahora mira eso. Tenemos un ancho completo y lo que vamos a hacer aquí es que vamos a llamar a este contenedor def block nav bar. Vale, genial, Así que hemos creado ese vidrio, que es sólo un tipo diferente de contenedor porque lo que no queremos como los ajustes y las estructuras que vamos a poner en bloque anidado serán diferentes a un básico contenedor por lo que no queremos mezclarlos. Entonces ahora que tenemos eso en su lugar, solo hagamos un par de cosas. Entonces mucho del trabajo que harás con la barra de navegación y la Fisa. Y la razón por la que puede tomar un poco a la vez es porque estás tratando de poner las estructuras en su lugar que le permitan ser sensible. Hablamos de ello la capacidad de respuesta y los puntos de ruptura. Queremos un sitio web para escalar adecuadamente. Y para que se escale adecuadamente, tenemos que poner algunas restricciones en ciertos puntos de cierre y de corte para que funcione correctamente. Porque para este punto de ruptura base, encontrarás que se aplica para una gama de dispositivos son pequeños y más grandes k y la barra de navegación se empujará Enter y se le sacará. Y queremos facilitar eso. Queremos que sea sensible independientemente del dispositivo en el que alguien lo esté mirando. Entonces lo que vamos a hacer, como tenemos aquí el navbar, tenemos el contenedor navbar. Y la sección Navbar. Nosotros queremos dejarlo como es así. ¿ De acuerdo? Y cuando hacemos clic en la barra de navegación, lo que queremos hacer es hacer clic en este botón aquí al lado derecho de nuestra pantalla. Queremos hacer clic en eso y luego todo esto se verá un poco funky, pero solo quédate conmigo y verás cómo resulta. Entonces en términos de dirección, queremos que sea vasco. Ok, y se puede ver que es, es un poco cambiar de nuevo a lo que estábamos mirando antes. Y queremos que se centre aquí. Ahora otra vez, esos n, El lo que sea. Y entonces queremos que esté completamente alineado aquí. Y esa es la razón por la que estamos haciendo esto es porque queremos que la barra de navegación se estire hasta donde, lo que va un display, como se puede ver que cuando nos movamos hacia arriba, pero queremos que nuestras barras de navegación se mantengan consistentes con el resto de la página web. Entonces para hacer eso, y nos sentamos en el mantenimiento, la barra de navegación censuró sin importar qué tan ponderados objetivos y una pantalla de escritorio. Y pero lo que necesitamos hacer saber que necesitamos que este contenedor sea el correcto ¿Qué es la altura? Entonces lo que vas a hacer es hacer clic en ese contenedor de caja y luego vas a ponerle, um, algunas condiciones en él. Entonces las condiciones que vamos a poner, vas a ir a talla y luego vas a ir a los hombres mínimo. Entonces vas a ir a Size. ¿Y luego qué? Vas a hacer clic en vw, lo que significa vista. ¿ Qué está bien? Ahora se puede ver que todo está expandido, pero vamos a poner eso en 100. Entonces ver como como hablamos, eso significa que independientemente del dispositivo que alguien lo esté mirando en él será el blanco de la pantalla. Pero queremos ponerle algunas restricciones a eso, ¿de acuerdo? Porque no queremos no queremos la vista lo que se está aplicando cuando llegamos a algunos de estos puntos de ruptura más altos. Entonces no sólo para redondear eso, tenemos que ponerle algunas restricciones. Entonces vamos a cumplir con los motos mínimos. Déjame ver aquí y es sólo que siempre es tan levemente. Sí. Está bien. Está bien. Entonces vamos a hacer el ancho mínimo 992. Y vamos a hacer el ancho máximo 12, 79 utilidades. Y entonces ahora vamos a subir estos puntos de ruptura. Se puede ver cómo la barra de navegación, y a medida que se expandió todo el camino de salida, se está quedando donde queremos que esté. Entonces volvamos a bajar. Entonces punto de ruptura base. En cuanto a heno de una barra de navegación con menos rapidez, solo consulta nuestra altura o cómo debes ser o un ACP x para esto. Entonces 60, estoy pensando que solo vamos a chocar eso hasta 70. Sí. A lo mejor es decir de inmediato Sí, tengo mucho prefiero el AC. Simplemente da un poco más de espacio, más espacio. Entonces ahora lo que tenemos aquí, tenemos, tenemos un poco picado que algunas de las estructuras de un Napa. Pero aquí podemos ver que una marca que somos local va a ser. Y entonces nuestra barra de navegación demasiado cerca de los bordes que queremos, queremos, sí queremos dejarnos ser un poco de espacio entre ellos. No queremos que recorra dos clústeres. Entonces en un contenedor, lo que queremos hacer es añadir algo de relleno. Y lo que te recomendaría agregar es de 40 px. Eso debería ser suficiente para lo que estamos haciendo aquí. Y solo puedo darle un poco de espacio. Nos da algo de espacio. Y lo que encontrarás es cuando diseñas un sitio web es el verdadero BC de un buen sitio web como en el espacio alrededor del texto y las imágenes. Realmente contribuye en gran medida a cómo la gente percibe un sitio web, pero no necesitamos meternos en todo eso aquí, pero espacios más importantes de lo que puedas pensar. Entonces ahora que tenemos eso en su lugar, queremos empezar a dar forma a estas longitudes. Ahora, sé que estás pensando que probablemente eres, bueno, no hemos tocado en tabletas ni dispositivos móviles. Vamos a entrar en eso en tan solo un segundo, pero centrémonos en conseguir que todos se vean bien en el escritorio. Entonces vamos a añadir una página. Estos irán a casa sobre los contactos y solo volvamos a revisar nuestras páginas. Necesitamos esperar que realmente vayamos a leer de la página de inicio en la barra de navegación. Hablaré de eso en un segundo. Pero vamos a tener sobre precios de servicios y conceptos, ¿de acuerdo? Entonces vamos a duplicar eso. Servicios Bot, duplicar ese precio. Y entonces tenemos contenidos. Está bien, genial. Y vamos a desechar el hogar. Eso y te diré por qué en tan solo un segundo, pero eso es lo que queremos. Está bien, genial. Entonces estamos un poco yendo o páginas y lugar. Lo siguiente que queremos hacer es agregar nuestro logotipo de marca. Ahora no sé si hago cambios alrededor de un poquito. Sólo tienes que quedarte conmigo. Ya veré cómo se ve esto. Pero déjame poner una imagen aquí. Y voy a elegir o logotipo, que es un poco vago, pero sólo quédate conmigo. Sí, Entonces por qué hice esto creo que puedo sacar esto y puede que me vaya con las pesas sin decir Magnus Jin. Simplemente puede que no. Simplemente no veo realmente ningún poppers para eso y también queremos mantenernos consistentes, claro. Entonces déjame sólo tomar eso por el momento. De acuerdo, y ahora voy a seguir adelante y editar este local. Por lo que no debería tomar, debería tomar dos segundos, no debería tomar mucho tiempo. De acuerdo, tenemos gimnasio Magnus aquí. Vamos a deshacernos de eso. Vamos a conseguir el sentido de re, descárguelo. Déjame pensar. Yo quiero este poco bajo pero más pequeño aún no quieres realmente tener un daño de gran tamaño. Y en realidad debería hablar con nosotros un poco más sobre el estándar AI. Cuando estás subiendo imágenes y cosas a tu página web, quieres que sea un peso en formato JPEG y cuándo puede ser. Y la razón cuando usas una imagen PNG, si quieres un fondo transparente, por lo general, por lo general ese es el único tine que usarás una imagen PNG si no lo requieres, usas JPEG porque es un tamaño de archivo más pequeño y no va a Hartley rendimiento de su sitio web. Entonces, ¿qué es esto? Obtenemos que PNG es fondos transparentes y lo vamos a descargar. Y yo, lo voy a hacer es venir rápidamente aquí. Tira esto hacia arriba y abre esto y edita rápidamente. Entonces todo lo que quiero es este absoluto, lo más cerca que pueda porque no queremos que arruine nada. Está bien. Eso me queda bien. Está bien, genial. Y ahora si volvemos al flujo de aire, voy a volver a mis imágenes y voy a subir eso. Genial. Entonces volvamos a pantalla completa otra vez y sigamos entrando ahí. Ahora de nuevo, sólo nos vamos a quedar un poco con nosotros y sólo ver oh, yo estoy mirando eso. Se ve un poco sangriento. Casi ahí, chicos, el hígado. Entonces doblaremos una vez más. Manténgalo una línea de tiempo 500 más. No hay fondo transparente y volver por aquí y mover adivinar, subir esto de nuevo. Está bien. Y lo que haremos es, no es jugarlos demasiado bien en cuanto a tamaño y proporciones y esas cosas. Entonces sólo eso conmigo. Estaré bien. Está bien. Entonces consiguió páginas en su lugar. Tenemos un poco ahí. Puede que no se vea demasiado bien ahora mismo, pero sólo quédate conmigo. Correcto. Ahora. Lo que queremos hacer a continuación ya que queremos empezar, nuevo, Eso se ve un poco mejor. Por cierto, lo que vas a hacer aquí, Let's brand link. Como puedes ver en el lado izquierdo, este va a ser el enlace a tu página de inicio. Encontrarás que la mayoría de la gente hará clic en el pequeño espera un sitio web y eso es llevarlos de vuelta a la página principal. Entonces vamos a vincular eso. Vas a ir a la configuración. Y solo vas a hacer clic en este botón de página aquí. Elija página, y haga clic en. De acuerdo, ahora eso es así de suave. En realidad es, esto es otra cosa que puedes hacer con el contenedor. Aquí es de donde creo que vienen algunos de los problemas. Volver a Diseño. Y sin embargo llamamos a eso un empresario Leo creo que apenas le falta cada vez tan ligeramente horizontal sentido de, ooh, ahí vamos. Eso es mejor. Y luego, ¿y qué? Sí, eso es todo. Está bien. Entonces queremos comer. Entonces déjame explicarle la mayor parte de lo que estaba pasando fue que la imagen se puso mendigo, Es el logo se hizo más grande. Y fue, estaba empujando hacia fuera las proporciones en la alineación central de los enlaces de navegación. Entonces lo que he hecho aquí es que acabo de regresar al contenedor navbar. Fui a maquetación y he cambiado un cambio. Es un entorno diferente y asegurar que sus sensores, todo lo que sea insights, el lote sordo que contenemos. Y entonces lo he justificado asegurándome de que todo vuelva tan blanco como pueda ir. Permitieron las restricciones que se pusieron en marcha. De acuerdo, así que ahora eso está hecho. Vamos a seguir adelante y rápidamente sólo enlazar estas páginas. Entonces tenemos la página Acerca, la página de servicios, la página de precios, y tenemos la página de contenido. Y vamos a hacer algo interesante con el botón de contacto, que te mostraré en tan solo un segundo, pero vamos a hacer click en contextos. Está bien, genial. Entonces ahora tenemos todo en su lugar. Apenas saber lo que quería oír. Yo quiero empezar a conseguir estos más. Y uno que esté más en la marca. Yo quiero que se vea un poco más rápido porque sé que no se ve muy bien, ¿verdad? Al igual que sólo parece un logo y un par de enlaces, ¿verdad? Eso no es muy bueno. Entonces la barra de navegación, queremos cambiar primero el fondo. Hagamos que nos diseñen un poco mejor. Entonces el fondo, queremos ser blancos. Y luego dentro de ese hueso en sí, quería que fuera algún tipo de sombra de caja solo para crear algún tipo de diferenciación entre la barra de navegación y los contenidos del sitio web. Entonces como volvimos a hablar, cuando pusimos estas sombras de caja en su lugar, realmente no queremos que sean que ninguna escuela, solo deberían fluir con la página web. Por lo que distancia podemos mantener suficiente de eso. Entonces lo voy a mantener en 0. Sí, desenfoque, sube esa matriz, tamaño, vamos a bajar eso, pero tal vez bajar la sangre también. Entonces mueva el realmente, creo que probablemente el punto dulce para mí. Sí, estoy contento con eso. Está bien. Yo estoy contento con eso. Está bien. Entonces eso no sabía que eso está hecho. Podemos ver la diferenciación entre el sitio web y una barra de aplicaciones, que es exactamente lo que queremos. Y ahora queremos cambiar estos enlaces de navegación y conseguir estos anormales. Entonces los hemos enlazado, pero queremos asegurarnos de que la clase sea adecuada y que tengan la fuente correcta y cosas así. Entonces vamos a corregir la clase. Sólo vamos a llamarlo enlace navbar. ¿ Verdad? Tomaremos esa clase. Yo lo voy a copiar. Entonces estos tres. Muy bien, genial. Entonces ahora lo que sucederá es que sigamos adelante y editamos uno de estos. Agregará todas ellas fotos. Entonces bajemos a la tipografía y la vamos a cambiar a Proxima Nova, como hablamos. Genial, Eso ya se ve mejor. Y no queremos 14. Queremos al menos 16 para la napa, probablemente por ahí. Está bien. Y eso me queda bien. Estoy sintiendo lo que sea que eso. Ahora queremos hacer algunas ediciones a este enlace de barra de navegación. Entonces quiero que el botón de contacto explote un poco más Principalmente porque esa es una de las páginas que priorizaríamos a la hora de construir el sitio porque queremos que la gente altere la página de contacto que queremos que se pongan en contacto con la empresa . Entonces voy a mucho menos botón y voy a hacer eso. Y lo voy a hacer haciendo que parezca más un botón. Entonces verás a qué me refiero en un segundo. Pero voy a añadir otra clase aquí porque no queremos que todos estos botones sean actitud. Entonces vamos a crear algo llamado clase combo. Y aquí es donde tienes una clase y luego tienes otra para que puedas editar la base de la clase que ya tienes. Entonces voy a nombrar a este CTA, llamarlo nav, nav link. Cta. De acuerdo, puedo vivir con eso. Vayamos a los fondos. Y no eso madura a la intemperie. Abre esto rápidamente. Entonces lo que quiero aquí, pongamos eso en el fondo de este enlace. Ahora puedes ver, quiero decir, se ve bien, está bien, pero es solo una caja con texto negro y el contraste no es muy bueno. Por lo que queremos limpiar un poco eso. Entonces queremos que se vea como los botones que locos no sabemos, quédate O portón. Entonces tenemos que cambiar un poco las fronteras. Tenemos que llevarlos hasta la marca 23 que domine o simplemente el relleno y decir que estoy aquí. Entonces queremos hacer eso creo que tal vez no del todo diez, probablemente afortunado. Y sé que estás pensando que todo bien, Eso no se ve bien es demasiado alto. Pero te mostraré cómo arreglarlo en tan solo un segundo. Entonces tenemos la longitud y queremos cambiar el texto a blanco. Y creo que podría hacer estos Bolds. Todavía no lo he decidido bastante. Sí, hagamos estos botones pernos. Entonces nav link, vamos a ir por negrita, algo que sería mucho mejor. Y si el color es en realidad de los enlaces, no cambiamos eso. Por lo que queremos hacerlos un poco así. Está bien. Entonces eso es lo que somos tan Brent. De acuerdo, y ahora la razón por la que puedes estar pensando, bueno, esencialmente el contenedor, así que eso no debería estar pasando con este botón. Pero la razón por la que está sucediendo es porque esta persona en realidad está en saids, el menú de navegación. Por lo que en realidad tenemos que hacer ediciones al menú de navegación para que eso sean sensores. Entonces tenemos que ir a exhibir. Tenemos que ir a V nada. Queremos horizontal y una vez centrado. Ahí vamos. El último que queremos, y queremos que se llene de, vale, ahora eso manda esos. Entonces ahora tenemos alguna diferenciación entre las páginas estándar y eso usaría solo con fines informativos. Y una de las páginas que utilizaríamos para la generación de plomo, lo cual es útil. Y ahora, una cosa que normalmente me gusta poner, y estoy bastante interesado en poner un bloque superior encima de la barra de navegación con otra información u otros enlaces que hago en algunos sitios suelen ser sobre mendigo, RFQ, particularmente para negocios locales. Si esperas que la gente te contacte por teléfono o correo electrónico, o eso es lo que quieres empujar por encima y más allá la página de contacto o cualquier otro método de generación. Siempre creo que es bueno poner y el correo electrónico de numeración ahí. Entonces por eso creo que lo haré aquí. Simplemente te mostraré qué hacer porque demuestra una de las otras buenas características sobre Webflow que realmente no hemos tocado todavía. Entonces quiero otro bloque div y quiero poner esto por encima del contenedor, así que todavía dentro de la barra de navegación. Y por qué también voy a tener que ver con el navbar se incrementa el odio a también, ¿no? Entonces ahora tengo este blog dev y quiero hacer este top, Top Nav, como lo llamaremos nudo superior. Simplemente lo llamaré top Navbar. Eso va a servir. Queremos hacer de nuevo la web para esto. Nosotros queremos, queremos que esto sea, queremos que esto, ¿qué nos gustaría que fuera esto? Queremos que esto sean cientos. Ahora queremos que sean cientos. Y queremos que la altura sea como 20 como estatua de Schnupp o Farsi, tal vez eso es un sí, yo diría que eso es justo. Y luego lo que voy a tener que hacer aquí, voy a tener que aumentar el tamaño de este contenedor. Probablemente. Altura del contenedor. Ac Sí. Nosotros queremos que lo vea. Sí, sí, ahí es donde lo queremos. De acuerdo, entonces ahora tenemos una barra de navegación superior. En realidad queremos poner otro blog y sitio de dev si estás bien. Entonces igual que lo que hicimos con el tan sí. Entonces al igual que lo que hicimos con el contenedor, queremos poner eso, vio eso. Y no se va a expandir demasiado. Es, todo va a mirar una proporción. Entonces voy a tomar esta lectura muy rápido. lo voy a decir como los antecedentes. ¿ De acuerdo? Y tenemos otro d-block aquí con el que necesitamos trabajar. Entonces hagamos un poco, algo de esto. Vamos a llamar a esto Top Nav. Y lleno, ¿verdad? Lo mismo otra vez, vamos a hacer, creo, creo, creo la estatua del odio. Entonces vamos a hacer eso más rápido. Y porque no hay contenidos en este problema y voy a hacer mucho. No, lo siento, ese es el lugar equivocado. Es por eso que en realidad está bien. Genial. Ahora queremos establecer algunas restricciones. View Es un centenar. Pero queremos restricciones de las que se habló antes. Por lo que 12 79. Por lo que mínimo sería de 1902 y el ancho máximo sería de 12 79. ¿ Verdad? Ahora un segundo, algo de información aquí arriba y ver cómo vamos. Como quiero un poco de texto y pongamos algo de texto aquí. Nada loco. Está bien. Entonces soy un nombre. No quiero otro para mi número telefónico. Ahora, se puede ver al otro apilándose verticalmente. Queremos que eso sea horizontal. Está bien, genial. Por lo que hemos cambiado las redes de alimentos horizontales. Entonces sí, Eso es impresionante. En realidad, creo que no lo haré en el IEP. Creo que me gustaría ahí. Sí. Y eso es lo que tenderemos a decir. No pueden decidir. Sí, en realidad me mantendré a la derecha. Podemos seguir a la derecha. Y queremos poner algo de relleno ahí también. Entonces vamos a hacer esos paquetes fossae y luego terminar aquí. ¿ Y el número aleatorio? Entonces me voy a Reino Unido, así que sólo voy a poner un número realmente aleatorio, así que más 44, 23456. Está bien, Eso puede ser uno y luego solo pondré contactos. Se trata de la cuestión de Magnus Magnus. No recuerdo el nombre del dominio de este sitio web, pero lo llamaré nueve es Jim.com. Realmente no importa. ¿De acuerdo? Y luego queremos dar estas pequeñas clases. Por lo que navbar, número móvil y dirección de correo electrónico. De acuerdo, así que pongamos estos de marca. Entonces vamos a poner a Proxima Nova Condensado simplemente normal. Y que sea audaz. E ipa, hazlo audaz. Y vamos a meter algo de relleno a su alrededor porque ahora mismo la dirección de correo electrónico, número de fascículos juntos. Entonces hagamos probablemente 10, creo, y luego 10 aquí. Sí. Y luego queremos hacerlo blanco. Por lo que su grilla. Sí. Y entonces aquí queremos poner, de nuevo, queremos hacer cosas muy similares. Entonces, ¿vamos a poner bien 10 ? Cosa ahí. Está bien. En audacia. Sí. Sí. Puede trabajar con eso. Se me ocurre eso. Eso es bueno. Está bien. Entonces la característica que te iba a mostrar cuando se trata de esta parte, ya que en realidad puedes establecer estos enlaces en el sitio web para que se abran ya sea, ya sabes, si estás mirando un sitio web en tu teléfono, puedes configurarlo para que se abre. El Parsons y el dialer están lejos de correo electrónico. Puedes configurarlo para que abra esta persona como Gmail o Yahoo o correo electrónico. Pero puedes configurarlo para que abra el Gmail de la persona para enviar un correo electrónico, ya sabes, cosas así. Entonces si el número que queremos pero y eso es lo que vamos a hacer. Entonces lo siguiente que tenemos que hacer, estoy haciendo esto un poco al revés pero solo quédate conmigo. Ya lo has hecho, vas a querer agregar, entonces. Vamos a ver, vas a querer agregar bloque de enlace. Vamos a sumar uno. ¿Vas a preguntar qué? Por lo que vas a querer agregar a los blogs de enlace aquí arriba. Es realmente fácil de hacerlo. Otro, hemos hecho ese bloque de enlace. Simplemente queremos poner un número y correo electrónico y decir el bloque de enlace. Súper fácil. Ahí vamos. Ahora podemos ver que esta es una linda, fea línea azul debajo de eso. Entonces queremos deshacernos de eso. Pasando aquí. Decoración. Y al igual que, Nope, no quiero eso. Y lo mismo aquí. Basta con hacer clic en Nope, Eso no nos gusta. Y de nuevo, realmente no necesitas cualquier clase para bloques de enlace, no es tan importante. Sería importante si estás tratando de dictar cómo se veían las cosas dentro del blog de enlace, pero no lo estamos, no necesitamos lo que sea eso. De acuerdo, entonces si el número de auto, queremos añadir un enlace. Al hacer clic en Configuración de enlaces CEO, tienes un teléfono móvil aquí. Voy a hacer clic en eso. Y entonces sólo voy a realmente sólo copiar y pegar este número realmente rápido. Copia y pega eso. Entonces vincula para pegar el número n. y si alguien hace clic en ese número, por lo que mirando el sitio web, automáticamente abrirá un problema de diálogo. Y ahora queremos hacer lo mismo para la dirección de correo electrónico. Entonces con eso, vamos a ir a la configuración y vamos a recibir correo electrónico ahora mismo. Por lo que el correo electrónico va a ser contactos, Magnus , Jim.com, y luego el tema va a ser solo digamos membresía y membresía del coro. Y está bien. Y sí. Entonces sí. Por lo que tenga en cuenta al respecto. De acuerdo, entonces ahora esto se ve Besso ray es noche y día a partir de qué? Por lo que era antes, pero sigo sintiendo que se ve un poco desnuda. Y ahora que lo estoy viendo, creo que es por el logo. Entonces voy a querer volver atrás y tal vez vaya a querer jugar con un poco más abajo. Pero vamos a ver si puedo conseguir que algo funcione ahí. Porque si bien esto se ve bien, no puedo decir que estoy completamente satisfecho con ello. Entonces puede que tenga que jugar un poco aquí y nos vemos. Yo puedo seguir. Entonces si volvemos a Canva, entonces si volvemos a Canva y tenemos un local aquí, probablemente quiero ir a creo que voy a volver a poner en lo que teníamos que comprar. Magnus, pon ahí atrás el nombre del gimnasio. Entonces estoy pensando que podemos hacer esto un poco más pequeño. Toma algunos textos en ello. Y sólo voy a poner a Magnus, Jen. Y no se levanta y hay algo no del todo bien conmigo. Creo que es porque no me gusta que esto sea horizontal. Entonces, ¿qué pasa si soy yo que, ya sabes, eso quizá podría funcionar? Realmente no importa. O sea, el punto aquí es solo para ilustrar que tienes que poner tu logo n. y tantas maneras diferentes puedes hacer esto, pero yo solo quería pop un poco más. Yo quiero que seamos sí, un poco más pasando. Entonces llévatelo mi gris ahí mismo y puedo hacer que eso vaya un poco más cerca. Sí, creo que eso es un poco mejor. Yo puedo agregar al magnus lo puede agregar aquí solo para darle más. ¿ Qué es sí, más parecido? Eso es más parecido. De acuerdo, y entonces sólo quiero cambiar esta fuente. Entonces vamos a ver si tenemos libros, ya sabes, Nova aquí dentro. No, no soy fan de eso. Entonces tal vez sólo tenga que atenerse al monstruo eso. Bueno, las encontrarás si sí usas Canva, estás restringido más qué fuentes puedes usar y qué fuentes no puedes usar. Así que solo ten eso en cuenta si optas por usar Canva. Pero creo que puedo vivir con esto. Hará por lo que estamos tratando de hacer aquí. Entonces tomemos eso y vamos a volver a poner en un sitio, en realidad en una cosa más, quería sólo esa altura de línea. Siempre tan levemente. Sí. Eso es mejor. Sí. Y entonces puedo bajar el tamaño de esto otra vez. Por mucho que no sé si podría buscar aquí un símbolo diferente. Tenemos los elementos. Sí, solo quiero algo que no esté tan impulsado horizontalmente. Entonces tal vez voy a ir por algo así no tiene que ser nada loco. Puede ser lo que quieras. Puedes estar donde quieras que esté. Ya sabes, puedes terminar adelante y crear tu logo en Illustrator o Photoshop o Y v Puedes hacer. El motivo por el que no lo hice es sólo porque ese es un curso totalmente separado. Es un video totalmente separado. Entonces solo puedo tomar déjame sólo tomar éste. Debería saber que quizá aún no ninguno de estos ninguno de estos es gris claro si estoy siendo honesto. Sí, creo que soy afortunado. Yo sólo voy a tener que atenerme a lo que tengo aquí. En realidad, tal vez me vendría bien este. Ahora que soy un defensor del culturismo o presumido de tus músculos, pero eso parece lo mejor. Apenas desde el punto de vista del diseño. Eso es bastante interesante. Sí, es bastante interesante. Sí. Correcto. De todos modos, aplanar. Podemos simplemente ir con nosotros desde que tiene que cambiar de nuevo, podemos, pero no es tan gran cosa en el gran esquema de las cosas. Por lo que sólo vamos a tomar rápidamente editar esto hacia abajo. Entonces creo que como cuando se trata de diseñar tu sitio y esas cosas, encontrarás justo las probabilidades en este momento. Está bien, ya sabes, como si tuviera que editar, estoy haciendo un montón de ediciones que se quejan con cosas diferentes. Y eso es lo que haces para ser honesto, cuando estás diseñando, digamos que pasas, pasas tiempo planeando porque estás tratando de encontrar la combinación correcta de lo que funciona y lo que no. Y realmente lo es. Tienes que ir con tu nivel de tripa, pero, y solo tienes que usar un poco de intuición, al menos en mi opinión de todos modos. Algunas personas tienen procesos diferentes hacen las cosas definitivamente por mí. Es sólo que más un caso de ver cielo entrar y jugar. Y por eso yo diría que tienes que entrar y jugar con él. Entonces déjame ver eso. Yo estoy contento con eso. Sí, ya sabes, puede que vuelva y juegue con la capa. Si lo hago, no voy a hacer en, en este video. Entonces dejémoslo como eso existe. Bien. Es sólo mi perfeccionismo entrando. Pero con todo eso, tenemos, sí. Estoy bastante contento con eso en general. Es decir, no hay muchas páginas en el sitio. No va a haber muchas páginas para tu estado, puede que tengas muchas páginas, pero me siento bien con nosotros al menos por el momento. Entonces estoy tratando de pensar, ¿hay algo más que necesitemos agregar aquí? Yo no lo creo. No lo creo. Entonces sí. Entonces lo que queríamos saber ya que queremos asegurarnos de que esto se vea bien en tabletas y dispositivos móviles. Entonces vamos a la tableta, ¿verdad? Por lo que se puede ver ahí por el, por las restricciones que ponemos en la barra de navegación y el punto de ruptura principal como las aplicó a todos ellos. Por lo que queremos cambiar eso en un, en un dispositivo tablet. Y déjame solo comprobar rápidamente para asegurarme de que esto se vea bien como sabrías, un pequeño problema ahí. Entonces obviamente aquí, no he configurado esto correctamente y puedo ver el tema de inmediato. Entonces se reduce a éste de aquí. Y creo que puedo más o menos a sí, porque queremos que se llenen blancos, pero eso es todo. Entonces no he editado el layout y por eso se está llenando todo el camino al otro lado izquierdo a medida que se escala hacia arriba, lo vamos a hacer sensores Vasco. Y eso debería resolver eso. CEO. Eso parece atado. De acuerdo, luego de vuelta al Médico. De acuerdo, así que sigamos bajando a la tableta. Y ahora lo que queremos hacer son estas restricciones en las capas de cambio. Entonces no necesitamos que sea así de blanco y realmente no queremos que sea así distribuidor. Nosotros sólo queremos que sea, queremos que escale, queremos que haga lo suyo, pero no necesitamos muchas de estas restricciones que inicialmente pusimos. Por lo que podemos fechar el mínimo. Cuál es el nombre to-para hacer eso también. Hacer el máximo fue ninguno. Pero todavía no jugar bien ahí. Eso también, está bien. Y ahora puedes ver que eso se ve un poco mejor, ¿verdad? Esa persona está en un solo lugar si una pastilla escucha y se mueve con ella. Y como puedes ver aquí en tablet, quizá estés pensando, Oh, ¿por qué está mostrando la barra de navegación cuando está en un dispositivo tablet y ve si estás en un iPad Pro. Por ejemplo, si ves un servidor web en tu iPad Pro y horizontal, puede parecer que está mostrando la versión de escritorio, escritorio del sitio web, pero de hecho, está mostrando la versión de tablet del mismo. Y lo está mostrando probablemente así. Porque si se siente que puedo conseguir me puedo poner lo suficientemente ancho como para mostrar todo el nav bar sin convertirlo en una hamburguesa, y entonces eso es lo que va a hacer. Entonces estoy contento con eso. lo único con lo que no estoy contento ya que no estoy seguro de cómo me siento por el espacio de foster px en dispositivo tablet, pero normalmente lo tiraba hacia abajo a mini-lote, me fui a dormir. En realidad me siento bien con esto en realidad se ve bien. Dejemos eso así. No estoy contento con eso. Entonces otra vez, vayamos hacia abajo a horizontal. Sí, tengo justo aquí es donde no estoy contento con ello. Aquí es donde quiero cambiar. Por lo que quiero hacer esto para mi contenedor navbar. En lugar de lejos voy a hacerlo 20. Y a ver cómo juega esto. No parece que sean turnos en mucha ola pongo las restricciones en con escucho voluntad eso es para verse pronto como juguemos bien. Y mientras lo he hecho es que lo he hecho. De acuerdo, entonces ahora que he agregado entonces veamos si puedo conseguir que esto juegue bien. Si bien uno es yo quería sólo probablemente se trata de ello, así que no tengo ningún problema. ¿ Cuándo está ahí este espacio blanco con proporciones? Pero cuando está aquí abajo, no me gusta que fuera demasiado espacio. Ahí. Tiene que ser mucho menos que eso. Entonces hagamos que ese 28, tal vez 10, diez, decenas sea un punto dulce. Y del otro lado queríamos hacer lo mismo que yo dejé diez, vale, así que ahora se puede ver que esa escala es un poco mejor, aún no completamente perfecta, pero es mucho mejor que lo que era. Entonces voy a dejar eso así y está saltando un poco, pero es sólo porque estoy sacando fue sabio como puede ir. Y eso está bien. De acuerdo, Entonces lo que vamos a hacer ahora es bajar al móvil. El verdadero cambiador de juego. Por lo que el móvil es un poco diferente. Por lo que hombres mínimo aquí quiero hacer para fomentar un no quiero que mi máximo sea 479. Está bien. Y para mí, quiero decir, mira, sólo veamos que estos dispositivos son bajos, pero la forma en que se ve ahora el sitio web estaría en un Nintendo entretener. Sí, sé que un dispositivo intangible probablemente no va a ser visto en un dispositivo intangible la mayor parte del tiempo. Tomamos el Apple iPhone SE, sí, probablemente. Por lo que queremos jugar un poco con esa carga aquí arriba porque en este momento el correo está en Filadelfia y ver. Entonces lo que podríamos necesitar hacer es simplemente tomar no el tamaño, pero tenemos que tomar, primer lugar quitarle este patrón. Y ahí vamos. Para mí, eso siempre es un problema si siento que me siento bien con eso. Sí, puedo vivir con eso. Y lo que podría hacer así como hacer una sentencia. Entonces si voy a mi bar alto y lleno tenemos la sensación de que quiero sí. Está bien. Entonces hice que ese centro vive tosyl en hielo pero ver sí. Entonces por qué pasan las cosas aquí, puedes verlo saltar. Creo que eso es porque está heredando este diseño del anterior punto de ruptura. Entonces está tratando de lo que sea que sea, en su mayor parte. Es decir, se va a ver cada vez que lo rastreemos aquí, casi siempre. Ok, Entonces Ahora para mí, todos esos, Vale, estoy bastante contento con eso. Y ahora quiero hacer lo que quiero editar la cabeza, el look manual en móvil y abrir con la hamburguesa. Por lo que los musicales evaluando para mí hacer click Abrir menú. Y se puede ver que no se ve muy bonita raya que no se ve muy bien. Entonces cuando esté abierto así, lo que vamos a hacer para que sea el fondo serán los blancos y el dinero saudita. Entonces sí, abierto, amable conmigo de esa manera. De acuerdo, Entonces eso se ve Eso está bien. Entonces vamos a abrir, abrir, cerrar. Yo sólo veo a todo el mundo. Así que asegúrate de que el elemento en sí como blancos, saudita, gris oscuro, gris oscuro, traerlo de vuelta por aquí. Entonces eso es un Alex Bessel abierto ahí. Y para estos elementos, queremos que el fondo sea blanco y igual que el otro. Entonces nav menu, vas a ir a los fondos y nosotros vamos a hacer eso blanco. Y ese es Bessel ahora mismo. Está bien, se ve mejor. Pero ahora lo que queremos hacer es establecer el botón de contacto y justo debajo de eso, justo al final del menú de navegación, queremos que esto sea sobre el espacio, y también queremos que esto sea una caja-sombra. Entonces vamos a añadir un poco de relleno a la parte inferior, digamos 20, se sumará 20. Y entonces lo que voy a hacer es añadir relleno a cada lado del menú de navegación. Por lo que no le gusta la cintura, siéntate ahora mismo. Está bien. Y luego lo que voy a hacer como voy a hacer los sensores, sí, voy a hacerlos sentidos. Y vamos a tener que volver a visitar En realidad, sí. Ahora puedes ver aquí que he hecho algunas ediciones y he hecho este tipo de algún anuncio es M y o es pasivo y eso es una especie de, ese es el levador. Pero porque puedes hacer esto para hacer el bien. Cuando llegue al celular, es cuando haré las ediciones a la barra de navegación. En realidad quieres hacerlos aquí arriba. Pero la mayoría de ellos de todos modos. Y lo que haré es cuando hagas las ediciones en tablet, el móvil horizontal y móvil y lo tuviste, los cambios que has hecho. Así que vamos rápido y juguemos con eso. Entonces fondos, blancos, ícono. Vamos a hacer gris. Menú de Nav. Blanco. Agrega 20 px y 20 metro. Eso más aún no lo han decidido. Y entonces mientras quiero hacer es quiero que también se envíen los textos. Entonces, veamos qué pasa. No menos de lo que voy a hacerlo. que vaya al menú de navegación, que sean centros así. Y luego este autobús y yo queremos que este botón cambie. Entonces los márgenes tal vez B quiera agregar probablemente a esto a medida que bajamos, sólo nos quedaremos conmigo. Está bien. Y luego menos de lo que lo haremos, Sólo queremos a granel sombra en la parte inferior aquí. Simplemente hazlo bien. Y una cosa que podríamos, y por qué creo que podría hacer aquí es cuando estamos haciendo los colores de los que hablamos usar como un software gris. Por lo que diferenciar entre blancos y ciertas áreas y el grosor sería un buen lugar para hacerlo. Bueno, esto vamos a experimentar con él y no ver nada ese. No. Como avenida. Piensa que eso podría. Sí, en realidad, ya sabes de qué se trata eso un poquito. Y se puede ver aquí como único sésil, pero estoy tratando de hacer una diferenciación entre la barra de navegación superior y luego el desplegable. Um, porque si todo se ve blanco, yo solo agrupa y simplemente se ve ciego y no, no se ve bien. Entonces creo que me quedaré con eso. Y vamos a igualar rápidamente a n Estos, Sí, Entonces, correcto, entonces lo que tenemos aquí, los márgenes camino por aquí atrás, 11 fosfato uno caen a mucho menos que eso, tal vez 60. Hazlo Farsi en realidad. De acuerdo, y se puede ver que el gris en realidad no ha sido herencia estos todo el camino hacia abajo. Entonces necesito cambiar eso. Por lo que necesito tomar nuestro precioso gris de aquí. Hemos hecho algún fondo móvil no sede. Y voy a poner eso ahí dentro. De acuerdo, así que rápidamente sólo veamos eso y veamos si se ve bien. Entonces tomamos todo el camino hacia arriba, así es como se ve en el escritorio. Todo eso fue así fuera. Tiramos todo el camino hacia abajo hasta el fondo. Y así es como se ve. Y tengo que decir que realmente lo siento todo bien por eso. Sí, hace el trabajo. Yo creo. Creo que hace el trabajo. Sí. Sí. Sigamos con eso. En realidad estoy pensando que creo que era una cosa que quiero cambiar. No demasiado interesado en los fondos aquí. Entonces si vuelvo a subir a tablet y lo que voy a hacer es realmente voy a revertir las cosas siempre tan ligeramente. Entonces si volvemos a mis colores y gris oscuro, en realidad quiero esto es, creo que esto va a ser un poco mejor, así que sólo quédate conmigo y puedes ver lo que estoy haciendo aquí. Y luego en el menú de navegación en sí, y voy allí. No quiero que los antecedentes sean así. Y pueden estar pensando ¿qué diablos estás haciendo? Eso no se ve bien. Está bien, pero quédate conmigo y verás que no entramos. Y luego voy a hacer que sí. Está bien. Ahora tal vez te estés pregun 15. Construir tu pie: Muy bien, entonces ahora que tenemos nuestro encabezado en su lugar, es hora de que creemos o Fisa. Sepan, no hay muchas páginas para nosotros realmente tenemos sobre el fisible. Entonces no va a ser un gran masivo para para que te veas en algunos otros sitios web. Pero ojalá haya algunas cosas que podamos hacer para que sea un poco más útil. Entonces al igual que hicimos con la barra de navegación, recomendaría comenzar con una de estas capas y fue en un lugar diferente, pero recomendaría empezar con lo que tenemos aquí, que es la Fisa. Entonces lo que vamos a hacer pop eso aquí. Y entonces sólo voy a tomar una sección entre el encabezado y el fisible, sólo para que quede claro qué es qué. Pero lo que queremos hacer esto ya que sólo queremos que realmente lo marque, eso es lo más importante, poco como la cabeza que queremos tomarla y simplemente hacerla nuestra. Porque realmente no hay mucho que pedimos agregar. Y aquí en general, algo que tengo en mente, creo que podemos hacer que quizá quieras considerar porque tienes menos páginas. Pero si consigues más páginas, acabo de decir el sol y ajustada para que se ajusten a los colores de tu marca. Y entonces realmente que deberías estar bien para ir. Entonces vamos a seguir adelante y ver que alguna vez te fuiste. Entonces en cuanto a color, no quiero que sea blanco y MOSFETS, esos suelen ser de un color más oscuro, así que vamos a volver a tomar nuestro gris oscuro, voy a volver. Y lo que vamos a hacer, esto se le llama facilita la física clásica. Entonces sólo lo dejaremos así. Y vamos a hacer que el color de fondo sea precioso gris. Ok. Ahora se puede ver todo el texto es obviamente eso no funciona. Entonces tenemos que cambiar los colores de estos. Entonces los vamos a cambiar a blancos o a un gris poco profundo. No obstante, esto es otra cosa que tal vez quieras considerar con tanta frecuencia en la Fisa, realmente no quieres que todo destaque. Como tal. Quieres que sea un poco, quieres que sea bastante suave y realmente no quieres en la cara de nadie, ¿verdad? Porque ya tienen la navegación superior para conseguir rentas y la mayoría de las páginas a las que queríamos llegar. Y no quieres que cada enlace se enfatice al puño o ya sabes, habrá ciertas cosas a las que quizá quieras llamar la atención si la gente llega tan lejos. Um, pero en general, en realidad no estás tratando de hacer tanto con él. Es sólo más a las longitudes, todas las diferentes partes de tu sitio web. Entonces lo que vamos a hacer aquí como simplemente cambiar rápidamente estos colores. Y así lo voy a hacer es el n veces es el blanco. No lo haría completamente blanco. Probablemente quieras estar ahí. Yo diría. Sí. Está bien. Entonces tomaremos eso y lo aplicaremos aquí. Y lo haremos aquí dentro. De acuerdo, Así que sabes qué longitudes. Y yo sólo voy a llamar al rumbo de esta empresa. Y luego nos vamos a ir abouts, sirve estos precios. Y tienen contactos. Y luego me voy a deshacer de estos dos. Ahora puede que estés pensando, ¿por qué, por qué, por qué, por qué, por qué no lo hizo eso? Bueno, hay una razón para ello. Vamos a encontrar otro punto muerto para probablemente lo correcto. Podríamos necesitar jugar un poco con estos. Sí, podemos poner eso ahí por ahora. Probablemente debería ser estos no. Sí, en realidad voy a hacer mis propias cosas aquí. Entonces lo que quiero hacer es que quiero columnas. Y en lugar de este tipo de escamas extrañas que bloquean que M flujos de trabajo y estatutos. Entonces voy a poner columnas aquí. Voy a añadir, y luego voy a añadir realmente un bloque en la parte superior. Y ya verás a dónde voy con nosotros en un segundo. Por lo que es arriba columnas de registro y se hacen en cuanto a columnas. Creo que vamos a un problema con tres. Está bien. Sí. Y saber cuando estoy mirando, sólo estoy tratando de pensar cuál es la mejor manera de hacerlo como pilus hasta el fondo aquí. Y luego decir bloque. Yo quiero hacer esto menos horizontal. Y también quiere que se espacie, pero no tanto. Sí, vamos allá. Y luego voy a tocar que las marcas van a hacer es que se deshaga de estos. Sí. Vamos a incluir un logotipo. Sólo quédate conmigo. ¿ Qué podemos hacer con este contenedor flex? Creo que podemos dejar ahí el contenedor de vuelos. ¿ Algún gran sentimiento hacia él? Sí, creo que podemos usar podemos usar esto. Y lo que vamos a probar. De acuerdo, entonces lo que vamos a hacer aquí como NFS, una parte en parte, esto es un poco de regeneración, ¿verdad? Y como digo, si no tienes muchas páginas, tu física realmente no sirve el mismo propósito de lo que normalmente haría si estuvieras diseñando un sitio más grande. Entonces para hacer uso de ese espacio, lo que a menudo se puede hacer es girar el color de relleno y así hago un llamado a la acción, razón por la cual normalmente lo haría en esta situación. En esta instancia, vamos a hacer un formulario de suscripción por correo electrónico y ofertas y cosas de las que podemos hablar un poco más tarde. Pero para los efectos de este M solo pit en los frameworks están seguros de que tienes un formulario de contacto de Mira cómo construirías uno con Webflow, y luego cómo puedes conectar este proveedor de email marketing final si eso es lo que que querías. Entonces, solo juguemos un poco con esto y veamos hasta dónde llegamos. Entonces me voy a ir aquí. Yo quiero este sentido vertical de ahí. ¿ De acuerdo? Entonces, en primer lugar, pongamos aquí una imagen. Y quiero la imagen de mi local, pero sin el nombre. Además deshazte de eso. Consigamos esta gran figura musculosa aquí. Y hay algún tipo de descarga los fondos transparentes. Entonces cuando volvamos aquí, voy a tener que recortar esto apenas siempre tan ligeramente. Paquetes de gota. Y luego volveremos aquí. De acuerdo, Y entonces vamos a volver aquí. Y deberíamos tener un promedio ahí mismo. Ahora mismo esto está empezando a llegar a algún lugar. Y eso es probablemente un tamaño justo para lo que quiero. De acuerdo, ahora tengo un logo para las páginas ahí dentro. Tenemos que vincular estos. Todavía no lo he hecho. Eso lo haremos un poco más tarde. Ahora, una vez que obtienes la vez que obtienes al capataz que vamos a usar m para correos electrónicos centrados en el cliente y esas cosas. Entonces vayamos aquí otra vez. Y veamos si aquí tenemos algún tipo de formularios. Por lo que consiguió formulario de contacto de chicos suscribe formulario. El que voy a todas las fotos en realidad el formulario de suscripción. Creo que esta es una de las más útiles. Entonces veamos si esto funciona. Si no, vamos a tener que construir uno desde cero. Entonces espesor dy, vale, así que esa es una sección entera. No queremos eso. Nosotros sólo queremos construir la finca de la nada. Entonces vamos a llenar un bloque de formulario al contenedor. ¿ De acuerdo? Ahora, lo que notan aquí es que les tengo una sensación de, pero en realidad quiero que sean de ancho completo. Y entonces lo que voy a hacer es que voy a aplicar relleno, bastante para tratar de hacerlo sólo un poco más de sensores. Está bien. Entonces terminé por desvío porque mucho como el tema que tenía, usualmente tendría con el encabezado y el contenedor no juega bien. Entonces vamos a hacer es sólo vamos a crear en hacer eso siempre es más fácil, siempre. Entonces este punto muerto ahí dentro, otro aquí dentro, lo siento, las clases en un segundo. Y vamos a conseguir un logo como antes. Vamos a conseguir el final aquí. Y luego vamos a conseguir nuestra granja. Entonces vamos a conseguir esa forma fingida, la que se mete. ¿ Verdad? Entonces esto es otra vez, alguien se iba a tomar un poco de claro con UGA. Y lo llamaremos a eso, lo llamaremos contenedor. Y luego tomos de cualquier relleno y cosas que queramos. Voy a poner eso. Sí. Entonces vamos a tener que hacerlo un poco claro por aquí, igual que hicimos con el encabezado. Entonces eso es golpe muerto aquí. Obviamente vamos a llamar a ese contenedor. Vamos a llamar a eso y sólo vamos a llamar a ese contenedor interno. No tienes que hacerlo así, pero es sólo la forma en que estoy eligiendo. Y queremos establecer, queremos agregar el mismo tipo de frase que hicimos cuando estábamos construyendo el encabezado. Por lo que queremos ver como para ser centésimas. Y el mínimo casados para ser 992. Y los de Maxwell serán 12 79 utilidades. Ahora si tiramos eso hacia arriba y nosotros sólo todo lo que tenemos que hacer siempre queda por hacer. Como sensor. Eferencia visceral, piense en la facilidad de Fisa sensible. Y ese será Besso. Está bien. Entonces se puede ver que eso está funcionando, pero sólo tenemos que cambiar un par de cosas corre. Entonces déjame sólo ver cómo juega esto. Sí, entonces lo que vamos a querer aquí dentro, vamos a querer algún patrón solo para romper las cosas, descargar eso. Y luego para la forma misma, quiero ir. Sí. Está bien. Entonces puedes hacer eso y puedes hacerlo vesículas para que sea webs completas, que definitivamente es lo que busco aquí. Necesito cambiar el color de éste de aquí arriba. Lo mismo aquí. Yo solo quiero asegurarme de que sea el mismo que hemos estado usando. Ok, y pongamos algo de relleno en el fondo de este contenedor sólo porque no parece estar muy bien sentado. Esa es una vasija grande, eso es un poco una vasija. Y ahora en realidad cuando lo estoy mirando, así como puedes ver, los campos están establecidos. Muy bonito, pero simplemente no se ve muy apetitoso con los grandes, enormes brechas entre, entre las líneas de entrada son más bien los campos de entrada. Entonces vamos a deshacernos de ellos ahí mismo. Y vamos a conseguir algún margen. Ellos lo son. Y lo que voy a hacer es que en realidad sólo vamos a poner el nombre de los campos de entrada de la información que estamos buscando y decirlo aquí. Y vamos a discutir aquí cuando se trata de campos y vamos a llegar un poco a los principios de la generación de plomo, Lisa. Pero no vas a querer tener el nombre del archivo. No vas a querer ser choca y un nombre de archivo y cualquier esencia, vas a querer estar recogiendo un nombre y apellido. Entonces vamos a duplicar uno de estos campos de entrada que en realidad podemos simplemente agregar otro al teléfono justo ahí. Y luego si hacemos doble clic en cada línea y podemos nombrarlos, ¿ verdad? Y queremos hacer esto. Queremos darles un nombre de pila, y queremos darles el nombre de la información que estamos buscando. Y entonces este titular del lugar sólo será nombre aquí, OB, apellido. Y por último, una cosa que me gustaría bastante hacer ya que quiero insertar columnas y decir la granja porque realmente no me gusta, realmente no me gusta cuando el FirstName y el LastName se ponen encima del otro así, porque es un uso bastante desorden del espacio aquí. Entonces lo que queremos hacer es uno, para el FirstName, columna uno, queremos poner el apellido y se llama dos. Y luego queremos deshacernos del relleno que viene con cada columna pase lo que pase. Entonces, sólo tomemos eso. Y podemos hacer internamente, podemos hacerlo cinco. Entonces eso es incluso con proporciones a través de los tableros. De acuerdo, entonces eso se ve un poco mejor para mí, pero sigo siendo la longitud de la misma sigue siendo un problema. Me llamó como demasiado blanco. Entonces quiero, quiero adaptar ese poquito. Entonces en lugar de 220, vamos a tener que ir por como dos investigadores de fosfatos a 60. No, no tanto. Entonces intentemos 300. Ahí es donde me gusta. Sí, me siento mucho más cómodo con eso. Y ahora queremos simplemente ordenar todo y asegurarnos de que representa una marca y algunos de nuestro conjunto de marcas. Entonces, por ejemplo, no queremos botón azul, queremos nuestro botón rojo. Y también quieren proporcionar un poco de información por encima del formulario para decirle a la gente a qué se están inscribiendo. Entonces, solo hagamos eso. Vamos a añadir un encabezamiento aquí. Y luego vamos a añadir un párrafo, luego también vivir en un segundo. Supongamos que sólo lo va a poner ahí por ahora. Y entonces vamos a querer jugar todavía, vamos a jugar con esto. Así que vamos a, vamos a seguir adelante. En realidad puedo poner un poco aquí abajo, puede crear columnas en la forma. Entonces una vez acabo de vender un ciudadano completo así que bolsa y hay demasiado espacio a ambos lados. Entonces, de todos modos, vamos a disculparnos, fue el teléfono sonrojado. Entonces en cuanto al botón, LSI, la clase, sólo lo llamaremos una lección de granja. Ahora, obviamente tenemos como unos botones redondeados y eso es lo que queremos continuar Oeste, pero no hay Solo por el botón, si hacemos el autobús y Randy, sin hacer renderizar el resto del campo extranjero, eso se verá genial. Entonces en realidad tenemos que hacer un poco más que eso. Entonces en realidad tenemos que poner, vamos a poner ese bloque aquí. Y vamos a poner todo a la vista de este bloque d. Y déjame solo asegurarme de que los bloques de espuma y así conseguiremos todo y diremos el punto muerto. Y sólo voy a nombrar a esta clase. Y encaja tonal. On, porque queremos esta fuente, Popolo, pero queremos que sea ligeramente te diferencia de todo lo demás de la página. Entonces, solo hagamos eso y vamos a cambiar el color de esta granja interna de Fisa. Vamos a agregar algunas cosas de patrones y hacer un par de cosas diferentes, pero sólo quédate conmigo por ahora. Entonces fondo, vamos a hacer un tipo de gris, pero no queremos que sea demasiado ligero. Simplemente queremos diferenciar muy sutil. Rob un poco ahí. Sí. Y lo que quiero hacer, quiero despojarme de esta almohadilla y siempre tan leve, tal vez sea como 20. Ahora, lo siento. Está bien. Y luego dentro de esta forma, ese bloque, quiero algún patrón. Por lo que tiraré en 2010 a diez en la parte superior. A lo mejor 20 en el fondo. Sí. 20 los dice. Sí, puedo vivir con eso. 20 de nuevo, obligándolos. hoy. Empezaremos con gemelos por ahora, ver cómo nos ponemos y este rumbo. Entonces lo que vamos a hacer es que vamos a usar un encabezado H2, pero vamos a crear una clase combo porque queremos que sea la cabeza y que sea blanca. Entonces voy a llamar a este H dos H2 básicos como de costumbre. Y entonces sólo voy a editar. Está lejos. Ese hermoso bosque o algo así. ¿ De acuerdo? Y eso me permitirá cambiar el color de una estrella sin estropear todo lo demás en el sitio. Yo voy a hacer lo mismo aquí. Profesor. Hazlo blanco. Ahora estamos llegando a algún lugar. Ahora, Batson un túnel para la granja. Queremos hacer las esquinas para esta ronda. Es porque queremos que esté en línea con el resto de nuestra finca, en el resto de lo que estamos construyendo. Y luego a medida que pasamos por nuestra granja aquí, la queremos, queremos que estos rincones redondeados nos mantengan en vigor, queremos que sea consistente en todo el sitio. Entonces lo que normalmente hago en esta instancia, instancia, quiero, no lo haré. Entonces, ¿por qué lo haría normalmente en esta instancia? Y no voy a hacer redondear todo cada esquina en toda la finca porque eso no es muy, lo habría puesto cuando hablamos cosas que la gente sabrá esto cuando estén mirando una página web. Eso es algo que notaremos que se necesita. Puede que no necesariamente les guste, de nuevo, la mayor parte de lo que estamos haciendo aquí queremos, es si tú, Brandi, también queremos encajar juntos, pero no necesariamente queremos que la gente lo note. Entonces en lugar de hacer eso, lo que vamos a hacer es que vamos a correr cada esquina aquí, igual que hicimos con la fusiforme interna. Y ya verás lo que hace esto. Y sí, así que hagamos eso. Entonces vamos a llamarnos, sólo vamos a decir Fisa, bosques de fondo. Y y se pueden ver fronteras aquí. Si hacemos click en la alternativa que nos permite sumar en cada esquina individualmente, voy a poner 20 pies era no, no 20. En realidad, tal vez 20. Déjame dejarlo ahí por ahora y ver cómo nos llevamos. En realidad. No, probablemente me gusten 15. Sí, creo que el 15 es probablemente el mejor. De acuerdo, empezaremos con 15. ¿Y entonces cómo llamamos a esto fusiforme? Apellido, vale. Y quiero tomar la esquina derecha de esa. Yo quiero que eso a 15. Por lo que probablemente puedas ver adónde voy con esto. No tenemos que saber que no tenemos que tocar la parte de la dirección de correo electrónico. Pero lo que queremos hacer es jugar con los botones que vamos a llamar a este oficial. En realidad sólo voy a llamar a este botón de formulario. Porque si alguna vez usamos otras granjas, queremos que siga este tipo de temas ahí. Entonces solo voy a ponerlo encaja entre paréntesis porque no sé si éste realmente te consigo reutilizar. Está bien. Correcto, así que hagamos esto de ellos. Entonces cambiemos la fuente a Proxima Nova. Hagámoslo en negrita. Tomemos nuestro bonito rojo. Pongámoslo así. Y luego cuando se trata de las esquinas, tenemos un 15 ahí. Está bien. Para que vean lo que he hecho aquí. He intentado mantener la fuente sintiéndose redondeada sin frijol. Excesiva, pero esa no tiene por qué ser la forma en que lo haces. Puedes quitar todas las esquinas por completo si quieres hacerlo de esta manera. Y mientras cena, seguiré adelante y te mostraré cómo se vería si redondeamos todas las esquinas, bien, solo para que sepas, ya sabes, lo que nos podría gustar moralmente que quién sabe. Entonces sigamos adelante y hagamos eso. Vamos a conocerlos a todos 15. ¿O deberíamos hacerlo 20? ¿ Deberíamos hacerlo 20? Sí, hagámoslo totalmente redondeado. Y así se vería completamente aleatorio. Entonces para algunas personas, cuando estás mirando esto, eso puede sentirse mejor porque has quitado toda la esquina. Entonces, en lugar de simplemente sentir los que siempre están cubiertos alrededor de la totalidad de la forma, posible que sientas que estás de nuevo, esposible que sientas que estás de nuevo,podría sentirse más fácil en el ojo cuando lo miras así. Pero realmente puedes hacer lo que quieras con el diseño de tu fuente. Realmente no importa. Siempre y cuando no se sienta incómodo en el yo o el diseño no se sienta apagado, entonces estarás bien. Y luego manda un texto que sólo voy a poner aquí bien, sólo pongamos dicho al correo electrónico. Él es menos. Únete. Únete a miles de clientes contentos. Actualizaciones periódicas sobre productos y servicios. En realidad, ¿sabes qué voy a hacer? Puedes obtener un 10 por ciento de descuento en tu rubor cuando te inscribas ahora. Está bien. Entonces eso se ve bien. Está bien. Es decir, no es ni aquí ni allá para mí, yo eso funcionaría. Podría publicar esto como sitio web. Estaría contento con cómo se ve esa forma en la parte inferior. No tengo ningún problema con él. Pero por qué tienes un problema con es el espacio y el tamaño del fisible. Para mí, esto es demasiado grande, es demasiado grande y hay demasiado espacio. Y los que como yo estaba mencionando antes, hay una línea fina cuando se trata del espacio. A veces, quiero decir que necesitas espacio, ¿verdad? El espacio crea BC a la hora de diseñar sitios web. Y esos son realmente, realmente importante. Pero hay una fina línea entre demasiado espacio y dejar algo de espacio ahora mismo, en mi opinión, tenemos demasiado espacio. Algunos diseñadores pueden desacuerdos, no vamos a tener demasiado, Así que tenemos que intentar hacer algo al respecto. Entonces lo que vamos a hacer es que vamos a tener columnas y al contenedor. Lo que vamos a hacer como cuadra y aquí, sé que eso puede parecer un poco gracioso, pero va a estar absolutamente bien. Entonces llegaremos a esa imagen con pop que ahí dentro. Hasta el momento, tenemos pop que ahí dentro y referimos el ancho completo. Lo que vamos a hacer es sólo extender ese derecho? Y debido a que el logo base real para esto es en realidad bastante, yo diría que es bastante interesante. Te gusta como no en tu cara realmente, al menos no encuentro que eso esté en mi cara. Creo que es bastante un poco loca. No lo siento en el espacio cuando lo miro. Pero no queremos que el yo no quiero formar tan cerca de la IgE, así que tenemos que hacer algún tipo de con eso. Entonces si vamos a columnas, necesitamos ese Farsi o jueves porque ya son diez X aplica o 30. El 30 aquí. Y eso no es línea. Entonces como primer pedido ahora, estoy diez veces más feliz con eso. Mucho, mucho más feliz con eso. Se siente mucho más que ln. Se siente sobre el tamaño correcto, tantas proporciones de Bessel, y no se ve de cerca. Para que pudiera seguir adelante y publicar eso y sentirme bien con ello. Lo último que queda por hacer aquí es solo conseguir estos links saucy hecho el fondo. Entonces sólo voy a cambiar rápidamente la fuente aquí. Parece hecho el botón. Y sí, estamos bastante bien para ir. Está bien. Por lo que tomó algún tiempo. Esos raros problemas con la granja donde no era el nombre y apellido se están cruzando unos sobre otros y no se alinearon adecuadamente. Habría tomado alongs de peso pasar por es solo un principal o cubo y esperas definitivamente casi definitivamente no tendrás ningún problema con eso y terminarías. Pero con eso dicho, vamos a reventar. Entonces ese es básicamente el congelador. Y lo último que tenemos que hacer es sólo enlace de estas longitudes fisionables. Por lo que tenemos la página de inicio con una página de bot, servicios, rastreo, y contactos. Está bien. Entonces esa soy yo. Estoy bastante contento con eso como fachada. Yo creo. Sí, puedo trabajar con eso me siento bastante bien aparte de eso. Entonces podemos ver como estamos escalando a los granjeros saltando un poco, así que necesitamos trabajar en eso. Entonces estas columnas son, las columnas no están bien sentadas, así que necesitamos trabajar en eso. Está bien, eso está bien. Eso son bonitos efectos. Entonces otra vez, al igual que el encabezado, tenemos que meternos a todos como cientos. Así que establece nuestro max 12, 79 y luego son hombres deben ser 922. Vamos a tirar hacia arriba. Tenemos que ir genial. Y la última escuela bajó la balanza y la CIA se fue. De acuerdo, entonces tenemos algo de trabajo aquí para allá. Entonces, ¿qué son las columnas? Lo que queremos hacer es que queremos apilar normalmente, hacer cuando lleguemos a la tableta. Por lo que se queda como una columna dual. Pero se puede ver retrato de tableta para paisaje y retrato. Y queremos simplemente cambiar eso a estático así. Entonces cuando volvamos aquí y queremos sumar a las restricciones que tenemos, solo hazlas todas también. Ninguno. Sí. Por lo que queremos verlo ahí. Um, y eso es un realmente no fue genial, ¿tengo que hacer eso? De lo único que estoy hecho esos no estoy seguro si quiero un logo apilado en la parte superior así. Entonces lo voy a hacer en realidad es simplemente voltear las rondas. Y lo voy a hacer subiendo a maquetar y dar click en ese botón a la derecha vertical. Y queremos, no, lo siento, no ése. Elemento incorrecto son columnas. En realidad queremos mirar su plano vertical. ¿ De acuerdo? Y por eso, podemos ver los logotipos en realidad sentarse un poco más arriba es para mí Probablemente esté demasiado cerca de la granja. Entonces queremos arreglar eso. Podemos hacer eso con vasco, sentido UBS. Y creo que va a mostrar porque tenemos algún patrón, Hay un culpable. De acuerdo, Así que tenemos algunas almohadillas y el relleno no deseado y 20 en los tiempos inferiores la parte superior. Está bien. Con eso. Entonces para telefonear para tener un problema aquí fueron las tabletas. No, ahí estamos bien. Y llegamos a la tableta. Entonces podemos ver que se ve un poco torpe porque estamos bajando a tablisar las cosas que ganamos, las cosas para ser consistentes. Por lo que tenemos que deshacernos de algunos de los elementos de relleno que decidimos agregar siempre en el escritorio. Para que para mí, creo que ahí estamos bien. Apenas rápidamente también has singled modo realmente. Entonces si alguna vez te atascas o si las cosas no funcionan tampoco yo no tenía correctamente, como aquí por ejemplo. Entonces puedes ver esas son muy, muy ligeras como brecha de cinco píxeles que me pregunto no tiro mi oficina echándome el ojo y haciéndome pensar que fue algún tipo de cobertura de código o cuando lo hay, pero no es deliberado y es sólo porque aquí hay una ligera discrepancia. Entonces lo que queremos hacer es salir de votos extra. Cuál es la columna que estamos mirando y deshacernos de esos cinco px para que no necesitemos así que no sé que están aquí. Genial Ahora me queda bien. Entonces sigamos adelante. Y así en el móvil, sólo estamos buscando lo mismo que lo que hemos estado haciendo. Podemos centrar esto por abajo. Ahí hay enlaces. Y vamos a pulir esto y hacer que esto se vea bien para que no necesitemos 201010 Zoom. Y luego en el exterior, queremos que sean 10 también. Ahora vamos a ondear a la ESA, el motor estaba, y dije, Vale, así que ahora tenemos una instalación escalable con un llamado a la acción ACE. Puedes usar si no tienes muchos enlaces en tu sitio porque quieres probar y hacer uso del espacio, ¿verdad? Si esta era una parte estándar de tu sitio web, quieres asegurarte de que estás aprovechando al máximo eso cuando estás construyendo tu sitio. Y déjame seguir con los métodos de generación de plomo. Hablaremos de cómo realmente vinculamos estos formularios en lo que hacemos ahí. Um, pero en su mayor parte, Eso es todo. Entonces eso acaba de hacer el faraón. Entonces volvamos a subir rápidamente y solo echa un vistazo y nos vemos. Entonces es un desastre. Lo único que creo este desorden. Sí, Así que los textos aquí no han sido cambiados a Proxima Nova. Sólo hagamos eso. ¿ Debo hacer que estos sean audaces? Entonces por eso no lo sé. Ahora los podemos dejar como normales, contentos con eso. Y ahora que lo hemos hecho, queremos hacer un símbolo, igual que hicimos con el encabezado. Entonces haga clic en la Fisa, haga clic derecho en la fachada. Ahí. Tres símbolo entonces todas las tapas. Simplemente vamos a crear visita y ganancias. Justo así. Eso se acaba de hacer. Entonces con eso dicho, lo siguiente a lo que vamos a pasar es en realidad empezar a llenar algunos de los contenidos del sitio. Y justo rápidamente antes de pasar a eso, lo que debes hacer es ver si tus páginas en una sección en y luego Azure Fisa. Está bien. Sección, oficial. Sección. Entonces sí, eso es todo. Entonces vamos a agrietarnos, correcto. Super fácil, super, super fácil. Entonces justo como dije, con la cabeza, ya que estás pasando por esto, si te atascas, quiero decir, había un punto ahí dentro cuando estaba pasando por el primero de los que realmente me he tropezado y uno de el justo Webflow a través en una bola curva a mí y va a hacer eso a veces, a veces serán problemas y no necesariamente conocerás la respuesta. Te puedo asegurar esos siempre una razón lógica es sin embargo muy realmente cualquier cosa que realmente puedas culpar. Webflow mucho desembocadura. Am usualmente es solo que has cometido un error en la forma en que has utilizado la plataforma y la forma en que configuras las cosas y solo provoca una ligera discrepancia y de lo que puedes esperar que suceda. Entonces sí, pasemos a conseguir el resto del barco del sitio. Nos estamos acercando, progresando. Sigamos adelante. 16. Construir tu página de inicio: De acuerdo, así que esa es la cabecera y la forma en que hemos construido la cabeza y la Fisa y ahora tiende a seguir adelante y dejar de cinturar páginas. Entonces la primera página, lo que solo vamos a reunir el camino es nuestra página de inicio. Y ahí es donde vamos a tocar algunas de ellas cosas de generación de plomo en el tipo salarial de estructura estas páginas y lo que deberías poder pensar. Y antes de que realmente empecemos con un par de cosas que quiero señalar. Es posible que estés en una situación en la que sientas que tienes mucho contenido, esa es tu página web. Y mi consejo en este punto es mantener las cosas cortas, dulces y concisas. Esos serían mis mejores consejos. Y la razón de eso, como gente, cuando tiene un sitio web, van ahí por la intención particular. Y por lo general van por una pieza de información realmente específica. Y quieres que sea lo más fácil posible para la fama esa información. Y quieres descomponer las cosas de tal manera que las cosas sean fáciles de escanear en lugar de fáciles de consumir, ¿verdad? Al igual que en el sentido de que no quieres una cantidad excesiva de textos que comenzaron en la ola o que alguien está buscando. Y es algo común que veo en muchos sitios web. Es sólo esto. Es simplemente demasiado contenido, solo, solo una cantidad abrumadora de contenido y simplemente satura el campo del diseño, el propósito del sitio web, y también la marca. Entonces eso es algo a tener en cuenta mientras estás pasando por esto. Mantén las cosas cortas y dulces también, diría yo. Pero también no te asustes ni te aguantes. Pusiste la información en el sitio que necesitas simplemente no exagerar. Entonces lo primero que tenemos que hacer para esta página también, en realidad para todas las páginas ya que necesitamos conseguir un montón de emojis y tú cualquier cosa sobre superar daños, podrías estar pensando en Chicago Stock o Adobe Stock. Ahí ambos paga el costo bastante porcentaje y chupan ahí mismo. No son los mejores. Utilizo Adobe Stock normalmente si estoy intentando descargar gráficos. Entonces ahí es donde obtengo la mayor parte de mis gráficos de algunos otros buenos sitios web por ahí. Pero el que realmente recomiendo se llama Unsplash. Esa es la que te recomiendo si tienes que usar imágenes de stock. Y ese es un buen punto tal que cuando se trata de imágenes, porque puede usar sus propias imágenes. Y si tienes tus propias imágenes, si tienes acceso o el presupuesto para contratar a un fotógrafo para tomar unas buenas fotos de tu marca o de tu negocio, tu empresa local, e invertir en ello. Al igual que la gente quiere saber de tus negocios, sobre todo si tienes locales físicos y quieren saber cómo se ve y decir que quieren saber lo suelto como yo digo que quieren conocer a la gente que dirige las marcas. Querían saber aquí sobre los empleados. No quieren ver caídas de acciones. Simplemente realmente una forma para que las marcas o los dueños de negocios se escondan detrás de la página web. Por lo que aconsejaría no hacer eso. Pero de todos modos, por menos de lo voy a estar usando fotos de stock obviamente porque no quiero Jim. Entonces, solo tecleemos en gimnasio. Y sí, un montón de imágenes que podemos elegir de aquí. Y una de las cosas que me gusta mucho de Unsplash, ya que todas estas energías vienen de trailers o fotógrafos independientes, ya sabes, aunque no han sido recogidas cereza por Adobe Stock o Shutterstock. Y es solo a la gente le gustan las alergias pequeñas y diciendo, oye, ya sabes, ustedes pueden usarlas gratis, sólo va a ser crédito. Entonces lo que vamos a hacer aquí es que sólo voy a recoger probablemente 10, 15, 20 energías. Simplemente seguiremos regresando aquí cuando, cuando tengamos que hacerlo. Um, solo voy a escoger no hace cosas realmente malas para ser honesto. Vamos a detenernos y a ver ¿qué hemos hecho? Esto, todas estas energías son utilizables. Entonces aquí tienes. Público cinco más. Por lo que los bordes son importantes, realmente marcan la diferencia, pero el sitio web en cuanto a diseño. Entonces quieres asegurarte de que las tienes bien. Esa es una buena. Yo puedo ir aquí. Y déjame ver si escribo unas palabras clave diferentes. Vamos a dejarnos y es otra cosa. Esos son buenos. Está bien. Creo que probablemente lo haré a partir de ahora para ser honesto. Entonces déjame volver y subiremos estas imágenes a la página web. Puedes, si necesitas entrar obviamente como Lightroom o donde estés aplicación de edición de fotos profunda esté. Pero para esto, no me voy a molestar, no siento la necesidad de hacerlo. Entonces sigamos adelante y subamos imágenes, que todas aparecerán aquí en tan solo un segundo. Ahí vamos. Está bien. Otra cosa que puedes hacer que no he hecho aquí sólo por el interés del tiempo. Pongamos el EMG a través del compresor. Solo estoy para asegurarme de que no sean demasiado grandes. Y la, y la, voy a obstruir tu sitio porque rendimiento va a ser algo realmente importante. Y si estás luchando con eso, estás como, oh, no sé qué tamaño es la energía debería ser o qué debería estar ahí para que Webflow realmente te lo diga. Entonces si vas a la configuración de una imagen y me dejas simplemente cambiar esto por esa vía. Se puede ver que dice aquí que la imagen es muy grande y no vamos a ser publicados en este sitio web realmente estamos tratando de hacer y algunas lecciones, así que no importa. Pero te lo diré, está bien. Y si es muy en gran medida lo que quiero decir, ese es un sitio web importante. No necesitas que sea así de vuelta. No quieres que sea tan grande. Tu sitio web simplemente sería lento, sería torpe, y mucho trabajo bueno que has hecho será redundante a grado. Entonces, de todos modos, tengo un montón de imágenes, así que vamos a seguir adelante y usarlas. Entonces vamos a pernos. Encabezado no tendrá un sí, vamos a sacarlo una parte superior de la sección de página, en caso de que lo llamemos. Entonces tenemos sección, vamos a poner una cuadra ahí dentro que va a ser un contenedor. Y lo que vamos a hacer, vamos a agregar otra ley div por si acaso tenemos hoy alguna otra dirección un poco loca. Y luego vamos a detenerlo y contenido y sitios. Entonces vamos a poner un rumbo. Pongamos unas fotografías x ahí dentro, y pongamos un botón ahí dentro. Y esto va a ser la parte superior de una página. Entonces lo que tenemos que hacer es conseguir nuestras clases y ADA. Entonces vamos a dar click en la sección. Y luego vamos a dar clic en Sección Básica, contenedor básico. Y luego tendremos página un botón de párrafo. Entonces lo que haremos es que esto se vea un poco más nítido. Y luego pasaremos a tener un tema de generación de plomo de chat y por qué la parte superior de esta página es tan importante. Entonces, sólo vamos a conseguir una imagen aquí. Lo siento, el resto más tarde. Vamos a volver aquí. Realmente no importa por qué imagen, yo soy, si soy honesto, puedo escoger lo que sea. En su lugar. Queríamos que esto un poco más oscuro para agradecer a Dios, yo había algo no del todo bien. Y luego vamos a crear una clase combo con nuestro contenedor porque queremos que sea bastante así si queríamos estar por encima de cierto tamaño. Entonces solo voy a Top Hat decir w en términos de la jugada sobre con esto y eso es lo que quieres hacer. Quieres jugar sobre ellos cuando llegues a este punto. Y no necesariamente vas a saber cuál es el mejor alto como un pensar, aproximadamente seis cientos a veces es un buen espectáculo. Hola. Sí, puede ir con eso. Y entonces sólo veamos este fondo porque eso no se ve muy bien. Sí. Está bien. Yo saldré con eso. Y luego queremos asegurarnos de todo y sitios que contengan un sentido. Entonces eso irá vasco. Son un AINE que es un callejón sin salida. Y vamos a hacer básicamente lo mismo. Y luego querrás hacer arcilla. Se desea crear clases de combo. Cuando comienzas a editar como el clima, el rumbo, un central o no, porque no quieres hacer un cambio en algún lugar de él. Entonece todo en toda tu página web menos lo último que quieras. Así que rasgos. Etapa central uno. En realidad, una cosa más es hacer, necesitamos hacer una clase para cambiarla a blanca. Por lo que usualmente solo pongo hacer blanco. Simplemente usaré bastante. Es decir, puedes etiquetar tus clases de la manera que quieras. A mí sólo me gusta usar más comandos que clasificaciones sólo porque es más fácil cuando estoy, voy por ello y ciertas clases que necesitan ser de micro blanco. Entonces lo haremos primero, ya que es lo mismo que el párrafo. ¿ Verdad? Entonces otra vez, soma, entonces sólo vamos a darle a esta etiqueta de botón. Ahora bien, ¿podemos cancelar las cosas de cada generación en un bloque de segundo paso? Lo que queremos hacer como justo el texto aquí es demasiado sabio y no lo queremos de esa manera. Es porque simplemente no se ve bien. Entonces vamos a tirar de eso en un poquito y a ver cómo nos fue. Sí. El laboratorio funciona para mí. Sí. Y así hay un par de cosas que puedes hacer aquí, y sólo vamos a añadir una sección aquí sólo para prepararnos para la siguiente que vamos a hacer. Se puede tener el, se puede tener una especie de granja aquí. Como si realmente dependiera de lo que trataras de hacer, ¿verdad? Y depende de lo que nos hubieras ofrecido. Pero un estándar en la página de inicio es solo tener un botón que enlaza a tu página de contacto. Se puede hacer mucho más que eso si de verdad dejas tus rasgos, yo diría ir un poco salvajes. Y puedes tener, puedes tener un formulario que permita a la gente insertar el nombre y el correo electrónico como el que construimos para la Fisa. O puedes tenerlo conectado a un formulario tipo. Puedes tenerlo conectado a cualquier cosa que quieras. Hay tanto potencial con lo que puedes hacer en mi página web personal desde medios BYU, y usualmente lo recomiendo a algunos de los clientes que trabajamos con este uso tipo de teléfono. Me gusta bastante el tipo 1 es realmente bueno como funcional y es bastante interactivo para los usuarios. Por lo que rápidamente solo te mostraré si tienes un contador. Y no creo que vayamos a pasar por esto, no una fuente tipo. Creo que eso sería algo para un video separado, pero no hay daño te ha mostrado la plataforma y justo lo que parece porque hay un método realmente bueno de generación de leads que funciona bastante bien para nosotros. Pero no hemos hecho mucho el mercado y recientemente, pero aquí tenemos un montón de formas diferentes. Y puedes crear cualquier forma que puedas pensar yo y j lo puedes enlazar a tu página web o puedes incrustarlo. Puedes hacer todo tipo de cosas grandiosas con él. Y lo que voy a hacer por éste ya que en realidad sólo voy a poner un campo de correo electrónico. Sí, y sólo vamos a pegar un campo de correo electrónico y así nos desharemos de este botón. Y lo que voy a hacer es en realidad qué formas quiero hacer esto. Un par de maneras diferentes. Podría volver a un par de maneras diferentes. Vamos a ver lo que obtenemos. De lo que necesitamos como bloque de formulario inicialmente. ¿ De acuerdo? Y puedes, como dije, puedes, puedes hacer lo que quieras. Aquí te dejamos algunos de lo que quiero decir, lo que podrías hacer como puedas, puedes enlazar aquí a tu página de contacto, por ejemplo. Y puedes vincular a tu contacto pegar un formulario tipo. Aquí puedes tomar información, luego obtienes personas cuyo nombre y dirección de correo electrónico es, lo cual es importante, sobre todo si quieres a clientes potenciales de enero. Entonces al igual que por ejemplo, podrías tener tanto una oferta aquí mismo. Está bien. Bueno, campanas en oferta y lo que podemos ver, ya he ido bastante. No sé si quiero cambiar esta imagen, no sé cómo me siento al respecto. A lo mejor. Yo sólo pensé que podríamos decir, bueno, no importa tanto en este punto. Sí. Pero creo que el punto que realmente estaba tratando de hacer aquí con la página de inicio es que este encabezado de tu sitio web, como en tu página de inicio por ejemplo, que es normalmente las repeticiones van a venir a través si estás siguiendo un modelo y rubro tradicionales. Y esta zona aquí. Necesita poder transmitir tu mensaje y decirle a una pasión por qué deben registrarse en tu sitio web. Realmente los métodos de generación, calle, o donde sea que te ofrezcan ya que necesitas justificar eso de inmediato, necesitas dejar claro que tiene que ser conciso y tiene que ser bastante directos. Entonces, ¿cuál es tu factor diferenciador clave como acompañar? Fue una cosa que te hace definitivamente fue lo que te hace Besso, por qué deberíamos decir no ahora mismo en esta finca que se construyeron en lugar de uno de los competidores. Estas son las cosas que tienes que pensar en ello cuando estás construyendo tu sitio porque mucha gente vota acaba de entrar y se doblarán enseguida si no pueden encontrar lo que estamos buscando, hay que darles una razón para quedarse y comprometer. Y quieres que sea lo más fácil posible para ellos hacer eso, que es lo que estamos tratando de construir aquí. Entonces, por ejemplo, tengo aquí un par de ideas de por qué creo que sería útil. Y creo que quiero tirar de esto por aquí. De acuerdo, una al azar ahí para que puedas ver ahí dentro. A menudo lo haré, voy por ello depende. Podemos imagenar tu trabajo, debes, pero a veces quieres desplazar el foco clave de la imagen a un sitio y tener tu granja al otro lado solo para que no estemos sentados uno encima del otro como estaban. Por lo que ahora mismo puedo ver el músculo del ojo en esta imagen. Intento insinuar esta idea de que te vas a poner fuerte. Ya sabes, que esto es ejercicio real, que esto es verdadera aptitud, que este es un trabajo importante que lo vas a estar haciendo en el gimnasio. Y entonces obviamente aquí con el texto, estoy tratando de decir Mira, inscríbete, esta es nuestra clase. Y casi estás sugiriendo que al apuntarte, esto es lo que podrías lucir, que no es directamente fue venido aquí abajo para hacer pero podrías hacer el argumento. Entonces juguemos esto y veamos cómo nos llevamos. Entonces ya no quiero que eso se centre y no quiero mi cabeza y estar centrada en 1 todo a la izquierda inclinada. Y luego vamos a construir nuestra granja aquí. Y luego vamos a construir una granja aquí. Y vamos a construir una oferta y esperemos que vean precisamente a qué me refiero. Entonces pensemos en una oferta. Bueno en realidad primero vamos a conseguir esta fórmula. Creo que eso es lo que tiene precedencia. Creo que último, creo que eso toma la delantera en cuanto a importancia. Así que vamos a crear una clase y digamos, digamos sólo cabecera. Y nuestros antecedentes. Voy a hacer una cosa, este bonito gris que estamos usando. Dijimos que vamos a usar el principio. Entonces, ¿a quién debería yo, no debería? Sí, yo, creo que esto podría funcionar. Vamos a ver cómo va. Yo quiero que sean curvas. ¿ No quieres botón de teléfono css que hemos empeorado antes? Sí. En especie de. Sí. Sí. Está bien. Podemos trabajar con eso. Y luego quiero deshacerme de estos campos igual que antes. Y entonces lo que vamos a hacer es contestar, voy a ser un apuro ellos. Y puedes tener tantos campos como quieras. Y aquí quieres asegurarte de que requirieron dos cuando se trata de los fondos. Y luego queremos hacer de estos campos que estamos viendo curvas. Y una cosa que quizá quieras considerar un poco de frontera ligera en estos, que no estoy seguro de cómo me siento. Vamos a ver cómo vamos. Sí, está bien. Sí, no queremos ni necesitamos realmente ninguna lambda en el selecto, solo esto ellos. Y esas cosas que podemos hacer para que sea como lo que vamos a hacer es cuando nos acerquemos al final de la audacia, una moto de Google a través de analizó algunas interacciones y te puedo mostrar cómo funciona eso. Pero por ahora sólo lo vamos a dejar algo así, sí, vamos a dejarlo así. Y vamos a asegurarnos de que estamos usando las fuentes adecuadas. Ok, y OK, así que ahora tenemos la fórmula. Vamos a poner ese es el sitio por 1 segundo. Y yo voy a poner sólo va a hacer vamos sólo por casas de huéspedes. Muy bien, entonces ahora que tenemos eso y algunos de los textos en la parte superior de la página cuando estamos haciendo esto, qué queremos como queremos probar. Y quiero decir, a menos que haya más marca y negocios WACC en algún trabajo de descubrimiento que tal vez tengas que hacer. Pero realmente quieres conseguir ese titular y debería ser tu oferta básica y resumir. Eso debería ser que estás aquí una línea o conoces tu, tu proposición clave que estás planteando. Entonces solo voy a, solo voy a poner a Shane voy a poner realmente se convierta en menos. Está bien. Ahora como pongo ese texto, quiero decir, lo que se puede ver aquí es esa pequeña línea, oye, no está del todo bien, así que tenemos que cambiar eso. Y lo que realmente vamos a hacer es que vamos a cambiar su guía de estilo de honor porque va tenemos clase combo. En realidad no quiero que nada de eso se estropee. Y como puedes ver aquí, porque agregué al fondo de ese contenedor con agregar una nueva clase se lo cambia para éste también. Por lo que queremos volver a cambiar esto. Entonces queremos cambiar este fondo de nuevo a nosotros, obviamente imagen que tenemos aquí. De acuerdo, así que eso está, está bien. Vamos sólo ahí está eso del y mucho menos contenedor. Vamos a poner. Ahora, sólo vamos a editar la altura de línea. Está bien. Entonces line-altura, moviéndose no del todo 145125. Sí. En realidad, tú no voy a volver a poner eso en contenedor básico. Sí. Y votando en esto, sólo vamos a tener que doblar esa imagen. Voy a volver aquí. Todavía se queda. Sí. Está bien. Ahora mismo se puede ver que ahora que hemos sumado a todo el n y ese zapato, ese cambio a 12 todavía, pero ganancias muertas. Ahora necesitamos aumentar el tamaño, la altura de este contenedor. Por lo que vamos a hacer siete cientos. Y aún. Contenta con eso, ¿verdad? Y aquí sólo vamos a poner un cartel hoy. Date de alta hoy para empezar. es En realidadesel gancho. Agradable de hecho, ¿sabes qué? Creo que en realidad estoy solo tomar menos noche de sexo porque siento que a menudo fui yo parcialmente de todos modos. Siempre siento que si siento que me estoy obligando a añadir más palabras, entonces probablemente no debería agregar más deseos porque esta recta aquí, probablemente haya suficiente sí. Vasopresina entrenada más inteligente con quería poner Wes Magnus. Sí. Sí, transgresores están suspendidos omegas. Y entonces lo que podemos hacer es en lugar de la estructura que vamos por, podemos tirar eso aquí y podemos poner porque una cosa tú también puedes hacer cuando tengas el nombre y el correo electrónico de una persona, puedes empezar a encajarlos y vender los embudos uno que muestra en 10 en sus parques son básicamente iguales. A ellos les interesa. Sin embargo, podría no estar comprando para ti de inmediato, pero no significa que no puedan. Y en tu página de contacto, igual que puedes enfocarte más en conducir a la gente a comprar realmente una membresía y esas cosas. Pero de todos modos, sigamos adelante. Y en realidad no nos fastidia demasiado con esta pieza de texto. Entonces sólo voy a pizarra aquí. Entonces esto está bien. Es decir, lo que estamos haciendo aquí, básicamente estamos diciendo fue definitivamente mejor. Este caballero fue visto salvarlos para unirse a nuestra comunidad. Y términos de eso, quiero decir, creo que si realmente estuviéramos haciendo esto correctamente, me vería obligado a responder, como tratar de empujar a la persona que realmente está comprando su membresía. Pero eso es más bien como un econ, poco de cosa y tiempos de dominación elite. No tengo un formulario en la página de inicio creo que es bastante buena manera de hacerlo. O al menos conectándose, o al menos teniendo un botón que conecte con un método formal de algún tipo de generación de leads. Entonces eso es algo en lo que pensar. Y luego mueva estas secciones aquí abajo, que normalmente solo guardo esto realmente, realmente simple. Al igual que no tienes tan complicada esta olla. Y depende de la persona a la que estás tratando de ayudar y trabajando menos, pero ¿por qué normalmente harías como conseguir tus clases y autofocus? Por lo que la sección básica. De acuerdo, tus columnas de Contenedor, no tienes que leer, realmente cambiarles el nombre. Entonces ahora que tienes eso en su lugar, vamos a conseguir d-block. Y en ambas columnas, Lo que vamos a hacer es que vamos a conseguir una imagen. No tiene por qué ser ése. Realmente no puede ser lo que quieras. En realidad no soy tan fomente que bien, uno vamos por sí, quiero decir, sí, eso puede funcionar. Y luego aquí, Epígrafe 1, no va a hacer aquí como añadir cantidades excesivas de textos. Es decir, no hay punto debería realmente no necesitas verme escribir un poco desprendido. Basta con entender la estructura por la que voy. Entonces déjenme limpiar esto rápidamente. Um, y sí. Y luego en el SAT queremos Px de 40. Y luego queremos asegurarnos de que la altura de cada una de estas secciones sea consistente. Entonces lo que queremos hacer es cualquier altura menos como media. Estamos mirando aquí. No voy a descargar la imagen. Voy a hacer el, voy a hacer una imagen de fondo por aquí porque eso realmente lo escalará correctamente. Escalará la imagen correctamente y la mantendré consistente cuando bajemos secciones y todas se mantendrán del mismo tamaño, que en última instancia es lo que estamos buscando aquí. Vayamos por esa. Y entonces lo que haré es que voy a cambiar el sitio del tamaño de eso. 500 sí, pero estamos buscando ganancias. Y vamos a hacer lo mismo con una cuadra de pasos. Y dentro de ese div, queremos que sea sensitivos Vasco. Sí. Está bien. Y aquí es donde queremos utilizar nuestro H2. Entonces como dije, solo usas uno en la parte superior de la página. No usar eso. Impresionante. Entonces er, lo siento, métete a las secciones inferiores. Ok. Ok, Así que ahora Nombremos rápidamente estos callejones sin salida. Entonces, ¿cómo lo llamaremos? Creo que lo que haremos sólo como lo llamaremos columna dual. Sí, sólo lo llamaremos no jugó bien. De acuerdo, entonces necesitamos agregar esa imagen contra la O. Y esto es lo que pasa. Si nos reunimos para llamarlos, vamos a crear otra clase llamada anuncios. El de la imagen. En realidad no quiero hacer de esa manera. Voy a ir y venir en eso. Ella puede hacer un par de maneras diferentes. Creo que en realidad podría hacer es simplemente agregar una cadena vacía y asegurarme de que cubra todoel todo fondo. Sí, lo siento. No obstante, por último, sólo hay que añadir rápidamente la imagen de nuevo. Si necesito agregar un paquete de segunda clase . Y ahora lo que vamos a hacer es que vamos a duplicar esa sección. Y vamos a voltear estas columnas no lo son. Está bien, así que nos ponemos agradables a lindas secciones jugosas ahí que podemos hablar del gimnasio y algunas de las características del mismo. Y entonces generalmente lo que hago, como quiero decir, esto es como un diseño muy directo en este sentido. Pero como, tan básico como se pone. Pero por qué normalmente lo haría es ir por delante. Y añadiría como, ¿cómo lo llamarías una declaración de misión son sólo algún tipo de pieza de texto empática que habla de lo que significa la marca del agua luchando por lo que su principal desorden. Así que vamos a almacenar rápidamente y algo así. Y entonces me gustaría que esto fuera sí, podemos hacerlo, tenemos, podemos hacerlo rojo en realidad, eso sería bastante interesante ver cómo va eso. ¿ Verdad? Adivinar algunos son lenta pero seguramente. ¿ Por qué podría hacer en realidad es que podría tomar la cabeza y excitar esto. Entonces solo estalló por ahí. Entonces si estás buscando construir una sección como esta, solo puedes seguir un poco junto con lo que estoy haciendo. A mí me gusta así. Y el final en realidad creo que podría volver a meterlo. De acuerdo, entonces esto es algo establecido señalar con el botón. Recuerda que hablamos, tal vez recuerdes una guía de estilo de escape de memo hecho. De lo que hablé. Conforme estamos pasando o si necesitamos agregar algo más para decir, vale, podemos, bueno, esta es una de esas cosas. Entonces si volvemos a nuestras guías de estilo, podemos duplicar uno de estos botones y luego agregar una clase de coma. Dice lección. Y básicamente podemos hacer esto blanco, vale, porque eso es lo que queremos. Y podemos hacer lo interno, podemos hacer ese gris que nos gusta. Y eso es todo. Entonces tomamos esa clase, regresamos a nuestra página de inicio. Nadie quiere hacer un sentido de nosotros. Hacer aquí es como si tuviera esta sección siendo Bastante te ruego como quieres algún buen relleno aquí? Probablemente quieras mucho más. Sí, algo así. Y luego quieres crear un poco bajo de una diferenciación. O 11 espacio más entre el relleno de botones de F. Kennedy. Adelante así. Eso es probablemente lo que tenemos. Y me acabo de dar cuenta de que no contaba para que eso fuera blanco, así que tenemos que llevárselo de nuevo a gris. Está bien. Entonces estoy sintiendo que me siento bien con esto. Creo que esos más trabajo por hacer en esto, lo hice detrás de bambalinas. Cientos, cientos zs probablemente alguna vez tuvieron. Y sin embargo esas cosas que se pueden agregar aquí, vale, hay un montón de maneras diferentes que puede ser ID entonces la mayoría de estas características, porque el enfoque de este sitio web es solo generación. Yo realmente no quiero, quiero decir, no quiero ponerme demasiado pesado en el lado del diseño de las cosas, pero tú llegas de donde vengo. Es decir, realmente quiero hacer aquí es construir secciones realmente básicas. Y básicamente es la m que puedes usar. Puede que no parezca mucho, pero es simplemente adivinar el punto. Y estamos usando un esquema de color fuerte fue un poco haciendo el trabajo por nosotros. Entonces esto es en realidad lo que voy a usar. Creo que necesito cambiar ¿necesitas cambiar esta imagen? Entonces aquí, aquí abajo rápido. Sí, está bien. Sí. Y entonces lo que también querrás hacer es que tenemos que ipx por encima de la cima, que hemos mantenido hasta ahora, pero queremos asegurarnos de que eso se mantenga también en estas áreas. Entonces aquí hay un lugar donde definitivamente está. Pero queremos asegurarnos de que eso es todo tipo de vuelo está aquí. Entonces, solo movamos el arriba y nos vemos. De acuerdo, así que no quiero hacer eso. Y crea. Entonces voy a llamar a este lado nope de ese de izquierda. Muy bien, así que en general esto se ve bastante bien. Pero todavía hay algunas cosas que tenemos que hacer antes de pasar a la siguiente página. Hay algunas cosas. No soy yo no estoy interesado en eso. Simplemente no pienso en lo mejor. Por lo que no me interesa la manera en que esta imagen transita a ésta sin embargo, esta sección. Entonces lo que quiero hacer aquí, quiero agregar una sección que, bueno, sólo hablar de algunas características clave y beneficios todo el gimnasio en sí. Entonces, solo tiremos otra sección y olvidemos ese ruido detrás de mí. Ese es mi Springer Spaniel. Haz cosa bonita. Entonces es o es otra sección ahí y podemos tener en un callejón sin salida. Y luego dentro de eso, vamos a agregar algunas columnas y columnas que son cuadrículas. Yo creo. En realidad esta es una buena oportunidad para mostrarte cómo usar las rejillas. Por lo que las rejillas son realmente, realmente buenas cuando obtienes diferentes tarjetas y mesas que querías agregar realmente lo que estamos haciendo aquí. Entonces entiendo que quizá no sepas realmente qué otra vez yo aquí, pero lo que queremos hacer es agregar las fichas aquí. Por lo que estas serán tres cartas separadas, y luego queremos quitar esta de abajo. Así que haga clic derecho y elimine fila. De acuerdo, así que ahora tenemos una fila de tres, vale, así que eso es lo que queremos. Y luego con cualquier fila quiero agregar pestillo, solo quiero agregar un bloque de eso. Y rápidamente quiere asegurarse de que estas son todas gotitas de clase. Por lo que sección básica, sección básica, contenedor básico. Y el administrador obtiene la clase de crédito si quieres, pero probablemente no sea esencial. Y entonces obviamente sí bloqueé dentro de ella y solo voy a llamar a ese set. Sólo voy a llamarlo títulos de servicio. Ya verás por qué en un segundo. Está bien. Está bien. Entonces para mí soy como, Sí, eso se ve bien. Yo puedo sí, podemos trabajar con nosotros. Y lo que podría hacer es, bueno, justo mientras estamos hablando de esto, no estoy seguro de que tan agudo ojo en estas imágenes y estas secciones. No estoy siguiendo tan lejos, dicen Px de sitios estacionarios de espacio. Por lo que podríamos querer echar un vistazo a ese binario. Sólo sigamos con esto. Entonces aquí tenemos los azulejos de servicio. Y entonces aquí voy a añadir un encabezado de imagen. Entonces voy a querer hacer párrafo. Y por último botón. Y esta también es una buena oportunidad para enviar personas a dos decimales en tu página web si lo deseas. Y entonces también normalmente hago como ustedes tienen estos aquí obviamente, pero usualmente agrego encabezamiento y gráfico de tarta por encima de él, solo para que la gente sepa lo que es. Y por lo general siempre incluyo un poco de etiquetas justo por encima de eso. Uno. Simplemente muévete aquí otra vez. Entonces se dirigen. Y luego párrafo necesita asegurarse de que estos son n decir el contenedor básico. De acuerdo, así que ahora veamos mejor. Yo me estoy pidiendo que piense, oh, era este botón. Ya verás cómo todo se junta en tan solo un segundo. Entonces tenemos esto apretado. Entonces, en primer lugar, sólo empecemos en la parte superior. Y luego algunos textos, simplemente pondrás características y beneficios clave. Pongamos algo de texto aquí. Y solo voy a dejar el automatismo logaritmo y aquí porque cuando sabes lo que te estás agregando, vale, todo el punto aquí es mostrarte el diseño, no verme tipear. Entonces, solo intentemos conseguir estos en un poco más. Otto, tenemos esta falla tolerante de clase y solo diremos arriba. Los textos son como un poco de subencabezamiento. Y con eso, quiero decir, tú nombras a la clase es lo que quieras. Este será H2. Y este será un párrafo básico. Está bien, genial. No, quiero hacer como no sé si quiero cambiar tal vez no cambiar el color del mismo, pero sí quiero cambiar algo. Entonces probablemente éste de aquí. Y quiero deshacerme de este margen superior. Entonces sólo voy a poner margen superior, tal vez 10. Ahora está subiendo. Sí. Correcto. Voy a centrar esto y, y la tipografía. Nosotros vamos a, vamos a saber que no vamos a hacer un perno. O no deberíamos hacer una encuesta, no saber perno no lo hará audaz. Pero lo vamos a cambiar por el rojo que nos gusta, que es éste de aquí. Y lo vamos a hacer en mayúsculas. Y nos vamos a esparcir menos de espaciado cada vez tan ligeramente aún probablemente por ahí también. Y lo que vamos a hacer es central aquí. Probablemente hacer en 10 px aquí. Y voy a aumentar el margen sólo para que no sea tan amplio como lo S porque eso no se ve bien así. Entonces probablemente como uno, tal vez dos Svante, veamos. Parece ser el punto dulce para eso. Y luego queremos agregar algo de relleno. Vale, genial, Así que eso se ve un poco sobre otro, algún tipo de diferenciación entre esta sección superior y luego las secciones aquí porque simplemente van a machacar juntos y no era demasiado aficionado a eso, si tengo que decirlo. Entonces. Ahora lo hemos hecho, pasemos a las fichas de servicio y que se vean bien. Entonces vamos a tener que usar Canva. Y ya verás por qué en un segundo por los daños. Pero sólo veamos las políticas a menudo cómo podemos conseguirlas. Mira. Vamos a usar ese bonito blanco alternativo que elegimos. Y los antecedentes para eso se van a quedar así. Entonces lo voy a hacer carritos y las protuberancias. Y en cuanto a la disposición, queremos hacer todo oración. Y entonces también queremos agregar sólo un menos de un relleno de 20, 20. Al igual que eso. De acuerdo, así que sí, puedo trabajar con esto, solo haré de esto un botón básico, ¿verdad? Está bien, esto está consiguiendo lo correcto. Y entonces lo que vamos a hacer es sólo tomar esto y copiar allí y luego, está bien, ahora conseguiremos tres secciones de servidores, lo cual es bueno. ¿ De acuerdo? Y voy a caer realmente rápidamente en este texto. Por lo que iremos por lo que creo características clave de servicio de un gimnasio. O sea, Vamos a poner apoyo x bar, grupo comunitario. Y entonces pondremos clases en línea porque ¿por qué no? Y luego voy a dejar un montón de apps. Mm-hm. Voy a tomar este bit aquí porque hay demasiadas frases en mi opinión para phi. Entonces aquí hay un pequeño consejo también. Cuando estás haciendo este tipo de secciones. Siempre he encontrado que también es un cinco líneas por lo general secciones de potencia suficiente. Y quiere decir con eso como cinco carriles, incluyendo el rumbo cuando luego a sexo y esas cosas. Algunos sitios web necesitan y la necesidad de ese texto extra. Pero en su mayor parte quieres intentar mantenerlo un tiro. Y en cuanto a esto, como mantenerlo como tipo de cosa corta y concisa. Realmente no quieres que te pongan en mucho texto. Quieres ser, ya sabes, quieres que sea fácil para que la gente consuma. Y eso es clave. Entonces digamos, sigamos con menos. Entonces, Ok. Entonces para mí eso se ve un poco de la ESA. Y vamos a cambiar el texto del botón para simplemente aprender más. Y ahí vamos. Está bien, y estamos llegando a algún lugar por aquí. Ahora sólo necesitamos algunas imágenes. Entonces vamos a Canvas. Vamos a crear una imagen de tamaño personalizado, digamos 300 por 300. La cosa que probablemente sea apropiada. Y entonces solo estamos buscando como solo pequeños gráficos que podamos usar. Entonces vamos a ir a elementos. Y lo que voy a escribirlo como justo Gym, a menos que tú lo que se nos ocurra. O salud MOOC revisión de los tramos. Eso puede ser una clase, grupo comunitario. Sólo iremos por esa. Entonces realmente importa lo que hay. Y tener experto. ¿ Podemos simplemente querer dimensionar estos ups y hacerlos del color que buscamos, verdad? Y hagámoslos Coachella, que son las ratas en esa y esa. Y M quiere descargarlos como PNG con fondo transparente. Chris. Y entonces sólo voy a volver aquí y vamos a subirlos. Ahora tenemos que hacer es suplemento. Y hay dos bancos secos así que queremos hacerlos más pequeños. Y como se puede ver aquí, como estoy haciendo más pequeña la imagen, derecha se inclina hacia el lado y hacia la izquierda. No, mira, yo dirijo esto. Esas son las pistas que corriste esto porque es algo con lo que podrías tropezar con bastante rapidez. Así que vamos a tamaños rápidamente abajo bosques y galones arriba lugar con el que estamos contentos. Su sí. Está bien. Entonces insertemos un punto muerto aquí, aquí y aquí. Y luego vamos a poner la imagen y guardar ahí. Y vas a ver qué voy a hacer en un segundo. Y luego vamos a cambiar la LEA y decir que están hablando sensores. Justo así. Vamos a nombrar a esta terminal de clase. Lo llamaremos servicio interno A imagen. eso. Voy a aplicarlo a todas nuestras secciones. Está bien, ahora, eso se ve bien, no lo hace. Por lo que eso se ve mucho mejor que el hecho antes. Y si solo salimos a decir aquí, si lo miras desde un poco y podemos ver cómo todos nos encaja un poco, pero estoy bastante contento con ese medio general, creo que eso se ve bastante bien para solo un sitio web de plantilla, deberíamos llamarlo? Entonces tomemos eso y hay una cosa más que tenemos que cerrar, un par de cosas más. Tenemos que volver aquí y quiero cambiar estos MG de la forma en que se establecieron. De verdad depende de ti en cierto sentido, tal vez podríamos cambiar estos y tal vez no se vean demasiado grandes. Entonces vamos a ver cómo vamos. Pero si bien probablemente hay que hacer es quitar estas imágenes de fondo porque no creo que vaya a jugar demasiado bonito. Entonces me quito el relleno aquí, así que quiero, sí, Así que quiero añadir ese patrón de nuevo en. Y yo quería sacar de aquí, así como así. Y lo mismo aquí abajo. Voy a quitar el relleno, queremos conservarlo. Y como puedes ver eso mantiene todo bonito y endline. Ahora échale un vistazo así. Me siento mucho mejor. Lo estoy mirando desde más atrás en el punto de ruptura más grande porque puedo ver todo es más que longitud, que creo que prefiero un poco mejor. Creo que es realmente una preferencia personal. Yo sólo sí. Creo que prefiero que fuera y estar en carril así. Sólo volvamos y comprobemos de nuevo. En realidad entonces parte de mí también es algo así como me gusta. Dejémoslo de la manera que teníamos. Está bien. Es decir, puedes hacer lo que quieras. Si querías un espacio, puedes ver lo que he hecho ahí. Si no lo haces, puedes mantenerlo como está. Entonces hagámoslo. Y entonces sólo quiero rápidamente y poner algunos encabezamientos aquí. Por lo que la información importante. ¿ De acuerdo? Entonces esto se ve bien. Estoy contento con esto. Es decir, puedes agregar más secciones. Se puede hacer todo tipo de cosas definidas. Pero para mí, quiero decir, estos son una especie del núcleo sí, diría, Sí, veo que estos son una especie de los componentes centrales de lo que probablemente terminarás haciendo. Quieres una sección de título solo para las cosas que quieres agregar. Si tienes sitio web de mendigo, querrás una sección de cola para enlazar a otros lugares de tu sitio web. Y quieres que estas secciones solo sean capaces de expandirse un poco más en ciertos puntos son ciertas cosas que son importantes de tu empresa. Y luego aquí abajo, siempre creo que es bueno agregar esa declaración de misión. ¿ Por qué es lo que estás tratando de lograr fue, qué hizo tu ejecutivo de empresa, por qué debería importarle a la gente es que estos son puntos importantes que deben abordarse lo antes posible cuando alguien está visitando tu sitio y eso es en c, Este es un buen lugar para detener eso. Entonces ahora tenemos que asegurarnos de que esto se vea bien en todo punto de ruptura es que es lo siguiente y tendrás que hacer esto con cada página sin importar cuál sea. Entonces, solo subamos la báscula y veamos cómo nos ponemos. Entonces a medida que salimos VF y nos vemos bien ahí, no veamos ningún problema. Así es como niños. Sí. Creo que estamos bien. Y quiero decir, como, si quieres que tu sitio web no tenga este espacio en blanco en ninguno de los lados a medida que escalas. Y entonces tendrás que rediseñar básicamente todo tus facturas y en cada punto de ruptura. Y lo que no escalará rentable, mira bien. Pero lo prefiero cuando mantienes todo consistentemente menos que n y no estás perdiendo mucho del buen diseño que has hecho como una forma de decir habilidades arriba. Entonces de todos modos, mi escuela luego bajó el camino porque aquí es donde las cosas empiezan a ponerse un poco más. ¿Debería decirlo? Entonces, bajemos a la tableta. De acuerdo, así que claramente vamos, tenemos trabajo que hacer aquí. Entonces sí, vamos, vamos, vamos a trabajar con nosotros. Entonces los fértiles explican cómo se ve bien, todo en medio. Entonces aquí lo que queremos hacer, ahora muévanos arriba. No lo oí. Ya que vamos a querer simplemente apilar estos. Bueno, en realidad, no lo sé. Puedes hacer, tienes un par de cosas diferentes que puedes hacer poniente tu tablet. Porque algunas personas no quieren que se diga una tableta que usamos un móvil. Y dependiendo del tamaño de tus imágenes de texto que estés usando, puedes mantener algo, algún tipo de consistencia entre el escritorio y la tableta. Pero de todos modos, vamos a ver cómo nos habíamos ido. 17. Construir la página sobre torno: Muy bien, Así que ahora hemos hecho nuestra página de inicio y lo siguiente que tenemos que hacer es diseñar nuestra página sobre. Y esperemos que esto no tome tanto tiempo porque hemos reunido algunas de las estructuras básicas que necesitamos para construir esta página en la página principal y ya verás a qué me refiero en tan solo un segundo. Pero lo primero que puedes ver aquí que quiero abordar, y tú ves esto como azul. Y nos acercamos, ¿por qué es eso? Bueno, eso es porque estamos en la página sobre. Ese es el que estamos editando. Y no queremos que eso sea azul porque no es consistente con nuestra marca, ¿verdad? Entonces queremos ir eso y se puede ver aquí que dice actual, este verde. Aquí. Significa que actualmente estamos en esa página. Y lo que podemos hacer es tomar nuestro bonito rojo y podemos cambiárselo a ellos. Por lo que ahora siempre que estemos en una página en particular se destacarán y derechos para estos, estas páginas a. Entonces lo que quiero hacer es, como dije, ya hemos trazado la estructura básica de lo que estamos tratando de lograr. Por lo que en realidad no necesitamos seguir adelante y reconstruir con un sombrero de copa y esas cosas. No quieres estar haciendo esas cosas desde cero después de que lo hayas hecho una vez, ¿verdad? Lleva mucho tiempo como aprendimos del primer video. Entonces lo que queremos hacer es ir a la página principal. Y podemos tomar, podemos tomar la estructura que tenemos aquí, pero vamos a querer cambiar un poco. Pero podemos tomar esta sección básica de la que hablaremos. Y podemos enseñar eso. Pegar entra a la sección del cuerpo y mira ahí, lo tenemos. Pero no vamos a querer una granja aquí. Entonces vamos a querer deshacernos de eso. Y este callejón sin salida, quiero decir, ahora tampoco queremos usar eso. Entonces vamos a ir a usar hasta cuadra ahí. Esas van a ser las telarañas de comida. Pero vamos a cambiar un par de cosas. Pero vamos a tener esa cabeza ahí dentro y vamos a tener un párrafo debajo de ella. Y luego vamos a tener un botón debajo de eso. Y eso va a enlazar a la página de contacto. Por lo que puedes usar este formato tipo estándar para cada página para al menos para la parte superior de la página de todos modos. Y por eso lo haría normalmente solo quiero decir, solo hace la vida más fácil al final del día. Y así tenemos algo pasando ahí. Bueno, imagina una Madonna y en realidad no el daño está probablemente bien. Sí, eso está bien. Vamos a seguir adelante con el párrafo. Y yo sólo voy a cambiar el diseño aquí también, sólo para que todo quede bien. Y luego vamos a ajustar el relleno como hemos hecho las páginas anteriores. Igual que eso. Y estamos bien para ir. Bueno para ir. Y yo sólo quería sólo algo de este texto porque quiero decir, hay otra cosa es también, como decía antes, por el tamaño de tener un lounge uno por sección. Por lo que podemos ver un libro de cinco carriles, incluyendo el título en el párrafo, hamburguesa tres líneas y la descriptiva en contraposición al encabezamiento. Y esa es la sección favorable. Pero para la cabecera, no debería decir que hemos tenido que cumplir dos o tres y no 23. Está bien. Entonces eso es sólo algo a tener en cuenta. Ahora vamos a usar eso como es el contacto. Y cómo me siento sobre sí. Bien. Supongo que demasiado ancho para mí. Al igual que es excesivamente blanco. Entonces bueno, creo que hice para realmente sólo cambiar esta capa, el centro y luego voy a tener que hacerlo, vale, Eso es mejor. Sí, eso está por encima de M. Ahora puedes ver aquí el contraste está bien, puedo leer este texto no está tan mal. Esto un poco invasivo, pero no hasta el punto en que es como exagerar por completo. Entonces qué voy a hacer aquí como déjame ir a, Está bien, entonces ahora que hemos hecho esa sección, que estoy bien, y vamos a asegurarnos rápidamente que sí, no escala, pero vamos a llegar a eso. Lisa. Sólo vamos a poner aquí algunas secciones realmente básicas. Como nada loco, nada distributivamente diseña, nada como eso. Y en realidad sólo voy a hacer algo realmente, realmente directo aquí. Está bien hacer las cosas de manera directa porque te lo facilitará a ti y a tu impresión en un texto y esas cosas. Y si estás diseñando y obviamente es más fácil para mí facturar aquí, pero es solo un diseño sencillo. Entonces, solo sigamos adelante y, y hagamos esto. Entonces a través con una cuadra ahí dentro y otra. Y luego vamos a tirar un párrafo de encabezamiento. No hace falta un botón. Y quiero decir, tenemos botón en la parte superior. No quieres que sí, no quieres exagerar con los botones también. Eso es bueno señalar y tener en cuenta. Y luego aquí dentro queremos simplemente otra vez, como muchas veces antes solo queremos ajustar el relleno. Ahora esta sección, puedes ser todo el tiempo que tenga que estar en eso, quiero decir, si solo estás buscando algo corto y convincente, puedes guardarlo ahí dentro, puedes agregar lo que quieras. Pero esa va a ser la primera sección. Y voy a hacer una nueva sección aquí abajo. Yo soy como estas páginas informativas no tienen por qué ser excesivas. Es decir, la gente Google aquí ya que sólo están buscando aprender más al respecto, más mala compañía en general hay. Y luego seguir la sección básica. Yo quiero, quiero hacerlo gris. Entonces cuando algún tipo de diferenciación. De acuerdo, así se puede ver que hay una diferenciación muy, muy leve entre las dos secciones. Ahora dentro del blog dev, voy a agregar dos columnas. Aquí. Justo por encima de eso. Voy a añadir un encabezamiento. Y este va a ser nuestro Meet the Team haber sido en realidad en lugar de columnas, creo que en realidad voy a hacer que los agregados y las mercancías suelen ser sólo un poco más fáciles, casi siempre. Entonces seré H2. Y vamos a sumar dos fichas muy básicas aquí. Simplemente llama a esto. Y luego voy a hacer este fondo un poco más oscuro también, no demasiado, pero justo lo suficiente para que los contrastes siempre tan levemente. Igual que eso. De nuevo, vamos a hacer los bordes y vamos a añadir un poco de relleno y cambiar la capa. Otra vez. Lo estamos haciendo Vasco anchos y así. Y luego al igual que hacíamos antes, vamos a agregar un valor predeterminado, arrastrar la imagen hacia adentro, y cambiar la capa que sí bloquea. Este será h3. Y luego queremos un texto para la profesión, cursiva. Y entonces haré ese rojo para que la profesión cambie el margen. Diez. Y eso me queda bien. Y luego para la hierba misma, estos son, quiero decir, para hacer el argumento, Estos son dos blancos, pero puede ser difícil juzgar eso. Entonces en realidad esos podrían estar bien. Creo que empujaría esto. Sí, en realidad, esos están bien. Entonces sólo voy a tomar esa copia, pegarla ahí dentro. Y esas son las secciones Conoce el Equipo. Y en Canva como cuando estás y los MGs. Siempre encuentro esto bueno para el equipo prueba AOC es como un pliegue circular. Entonces sobre Lienzo. Si vuelves a Canva y solo creas, entonces puedes agregar un marco. Ahí no. Son circulares uno. Se puede ir a fósiles. Fotos de perfil. John y Joe. De acuerdo, los descargo con fondo transparente. Ahora los tenemos ahí. Y queríamos sólo el tamaño de estas señales son demasiado vagas. Y esos están bien. Es decir, aquí es donde creo que deberían ser un poco más delgadas. Entonces si voy al pasto mismo, en realidad, por lo que estamos haciendo aquí. Está bien, eso va a estar bien. Y luego debajo de eso en el mismo contenedor, queremos seguir adelante y agregar una sección grande más. De acuerdo, y última sección que probablemente deberías buscar en agregar m, sobre todo si eres una página web, es sólo bastante larga En realidad. Sí, cambio esto de nuestra historia a impulsar la salud y el bienestar. Entonces aquí puedes ir a las capas y puedes tomar esta capa de polígrafo de contenido principal más bien. Se puede hacer esto como un mendigo. Al igual que si quieres escribir una ley, si tienes como mucho de qué hablar en tu sección Acerca y este es un buen lugar para hacerlo. A lo mejor tienes algunos videos que, y esta acción usará algo llamado elemento de texto rico, puedes ver aquí. Entonces tenemos que hacer algunas ediciones a eso. Y en realidad vamos a hacer esto y guía de estilo porque ese es el mejor lugar para hacerlo. Entonces si vamos, Así que chicos, no queremos una página, queremos guías de estilo y queremos vivir así. Queremos cambiar el texto a Proxima Nova obviamente. Y todos estos dedos de los pies apresurados y esas cosas deberían estar en línea. Y queremos que esto sea consistente con la otra página dos, así que tenemos a Sophie, y vamos a querer hacerlo gris. Permanecer gráfico de tarta. Queremos llegar a 16. Eso es un 165. Y como ves por dónde voy con eso hasta ahora, eres mucho menos por lo que quieres pasar y vas a pedir aplicar, um, todos los principios que adeuda por tus encabezados y tu gráfica de pastel principal en centímetros y quieres aplicarlos aquí. Y la razón de eso es igual de principalmente sólo porque es un bloque de texto rico, funciona un eje un poco diferente a algunos de los, algunos de los otros elementos. Entonces quieres entrar y solo hacer estos cambios y usar esto como tu base, ¿verdad? Así que mantén esto en tus guías de estilo y haz las ediciones que necesitas escuchar. Y Azure podrá ver si vuelvo a mi página web, ya se están aplicando. Y lo que sucederá es que estos cambios no se aplicarán a la, a la capa que acabamos de agregar a la página sobre. Pero lo que vamos a hacer es llevarnos, vamos a copiarlo. Vamos a volver a la lancha. Podemos platicar lo que tenemos aquí. Y podemos añadir una nueva sección. Y se puede ver que no he terminado de editar todo el asunto. Entonces estos son, estos construyen sobre tan demasiado pequeños. Podría monearlo y jugar con nosotros todo el día hasta que sienta que el texto rico es perfecto. Pero lo que voy a escoger aquí como nuestra historia, porque eso es lo que usarías una sección cuatro. Y puedes hacer lo que quieras aquí con eso. Y esa sería mi página web, ¿verdad? Por lo que permita la malla y luego impulsa el propósito de la empresa, conozca al equipo. Si eres más personal, agrega más secciones y hazlas más delgadas. Y al agregar más y más empleados si los has conseguido. Y luego habla de tu historia hecha que tal vez agregue un video de YouTube si puedes. Y eso es todo. No hace falta pensar en exceso. Estas páginas, no tienen que ser exhaustivas. Simplemente tienen que mantenernos con información sobre la empresa para cualquiera que esté buscando, peleó. Pero lo último que tenemos que hacer es que sólo necesitamos seguir adelante y asegurarnos de que la escala sea más o menos. Entonces podemos ver que está bien. Y estos escalados perfectamente, lo cual es genial. Entonces ahora volvamos atrás y queremos ir a la tableta. Entonces eso no escala muy bien. Queríamos simplemente relleno en eso. Y solo estoy pensando, creo que quiero hacer lo mismo aquí. Está bien. Similar aquí. ¿ Verdad? Y eso se ve bien en tableta aparte de los recipientes S pot. Y me acabo de dar cuenta de que no tengo sentido de eso. Y de todos modos, se puede ver un poco qué omega, así que sólo tenemos que seguir agregando estos contenedores. Esa está bien. Y el contenido principal también estará bien. Y entonces, de repente, se ve bien. Entonces pasemos a lo horizontal. Por lo que este contenedor de aquí es uno causando algunos de los problemas. Y queremos realmente, vamos a volver atrás y volver a comprobar esto. Eso está bien. Entonces tengo 77 ahí. Y luego queríamos reducir el relleno que tenemos aquí porque no va a parecer intento a medida que bajamos a este nivel. Y eso se ve bien. Y aquí estas rejillas, vamos a querer la pila porque va a ser mucho más textos. Entonces agrega uno aquí y deshazte de éste. Y de nuevo, mucho espacio aquí, pero se ve bien. Tú, te saldrás con la tuya. Y entonces otra vez, nuestra sección principal es la fama. Y por último tenemos móvil. Eso se ve bien. Estos no lo hacen claramente. Sólo comprobemos eso dos veces. Están bien. Y se ve bien ahí. Sí. Ahora vamos a conseguir ninguno. Vamos a revisar rápidamente, vamos a comprobarlo y lo sacas a la derecha y empuja n. déjame solo volver a comprobar forma de contenedor aquí. Sí. Está bien. Contentos con eso. Sí. Esa es la página sobre. Por eso lo recomiendo. No tiene que ser nada loco. No tienes que estar haciendo como una estúpida cantidad de trabajo. Es decir, puedes, y hablaremos de algunas de las cosas que puedes hacer en videos posteriores, o puede que sea en otro curso. Entonces si estamos tratando de avanzar más, pero si solo buscas algo, básicamente se ve limpio, se hace el trabajo. Es por ello que lo recomiendo. Entonces eso es todo. Pasemos a construir una página de servicios. Y veamos qué podemos hacer con eso. De acuerdo, Así que pasemos a eso ahora. 18. Construir tu página de servicios: Muy bien, entonces ahora que hemos terminado nuestra página sobre, la siguiente página se te pedirá que crees como página de Sócrates. Y para ti mismo cuando estás construyendo tu página de servicios, podrías tener un montón de servicios. Es posible que desee asignar una página, el servicio. Puede que solo una vez tenga bloques como te voy a mostrar aquí. Y hay un montón de cosas diferentes que, que puedes hacer. Entonces vamos a mantener este realmente, realmente sencillo. Entonces vamos a tomar Hola de la página anterior como lo hemos hecho antes. Vamos a golpear esa copia va los servicios, pegarlo, retomar así la parte superior. Cambia la imagen y hazla nuestros servicios. Y podemos ponernos algo aquí. Ahora podemos tener sólo podemos dejarnos solos. Absolutamente. De acuerdo, así que tenemos eso. Y entonces aquí lo que vamos a hacer, sólo quiero añadir aquí probablemente un acordeón. Por lo que quiero tener información para los servicios por lo que la mayoría de ella se esconda. Y, um, no quiero que sea demasiado complicado. Quería sólo llegar al punto en que la gente puede ver lo que Magnus Jim tiene para ofrecer y podemos mantenerlo así. Pero como dije, puedes seguir adelante y crear y centrar páginas para cada servicio. Y puedes tener un desplegable aquí que los visuales todos los diferentes servicios. Entonces sigamos adelante y solo construyamos un ricardiano para que podamos ver qué hemos conseguido diseño. Entonces echemos un vistazo a eso. Y no sé si tengo una lección por ahora. No tenemos acordeón ni nada por el estilo. Entonces vamos a tener que construirlo desde cero, lo cual está absolutamente bien. Entonces, solo construyamos una sección. Entonces elementos, whatnot container, quiero los míos propios. Así que tira un callejón sin salida aquí, luego otro. Y luego aquí abajo en algún lugar vamos a tener el desplegable. Suéltalos. Ahí vamos. Perfecto. Entonces vamos a tener que jugar un poco con esto. Entonces si seguimos echando un vistazo aquí y vemos qué podemos encontrar. Muy bien, y debajo de esta sección, qué vamos a hacer como quiero agregar un acordeón y en realidad ya tengo un preset para esta página que quiero agregar. Entonces lo voy a hacer es lo voy a agregar a un proyecto separado para que solo lo puedas tomar si quieres usarlo. Pero también toda esta página web, voy a publicar una copia de Ethan. Puedes quitarte lo que quieras de ella. Um, pero déjenme mostrarles rápidamente lo que voy a hacer. Entonces voy a ir a mi flujo en otra pestaña. Obviamente, me va a llevar a un sitio web de la empresa, pero está bien. No menos deliberado. No estoy tratando de reflexionar sobre los servicios, pero vamos a salir aquí. O en realidad creo que puede que tenga uno buscando aquí, pero vamos a ir al tablero desde eso. No, En realidad, sí, como en el sitio web de la NVD, por eso estaba apuntando a disculpas. Entonces volvamos aquí. Voy a tener que cazar un poquito. Ya sé, sé en algún lugar de aquí. Valores de tejido de camarón, posiblemente la página de valores. Sí. Este es el layout que quiero tomar y lo cambiaremos y nos aseguraremos de que represente los colores de la marca. Pero vamos a tomar esta sección, copiarla. Y podría pensar en una página web. Simplemente puedes copiar y pegar entre proyectos de manera muy, muy fácil, como esos. De verdad alguna vez ningún tema. Entonces, sólo vamos a arrastrar hacia arriba. De acuerdo, y ahora sólo vamos a querer entrar a estas horas de micrófono. Ahora obviamente, estos acompañan principios. Voy a ir al generador Lorem Ipsum. Ahora ese, probablemente éste. Entonces uno. Y luego aquí, todo lo que voy a añadir. ¿ Verdad? Entonces no, así que tomemos nuestros lindos rojos de aquí. Pega eso ahí dentro. Tengo un título largo, pero no realmente tan rápido. Y luego aquí dentro, solo voy a poner césped y epsilon justo ahí. Entonces sí, Como vas a poder tomar esto de los proyectos. Voy a Lincoln en Skillshare en este curso. Y puedes copiar cualquiera de eso que te guste. Se puede acceder a todo el proyecto y simplemente tomarlo. De acuerdo, no lo voy a usar para nada. Sólo se va a poner ahí dentro. Entonces si necesitas algo estoy diseñando aquí y puedes llevártelo. Y esto está todo escalado correctamente y esas cosas. Entonces como, déjame solo mostrarte lo que quiero decir. Entonces si voy aquí y solo veo, así que sólo se vería algo como esto. Me he perdido algo ahí pero y tú puedes sacar esto. Sólo podrías tener cuatro. Puedes dividirlos en diferentes secciones. Podrás añadirlos a nuestra draga. Puedes hacer lo que quieras con estos. Entonces estos son útiles, creo. Y me gusta bastante porque es solo un desplegable y es realmente sencillo. Y necesitas cambiar la capa de resaltado. En realidad, lo haré antes de seguir adelante. Creo que esta es una buena manera, sobre todo si tienes muchos servicios, pero no necesariamente quieres agregar amplia información sobre ellos. Alternativamente, si tienes bastante información, pero no quieres que obstruya tu página. Tener un desplegable como este es bueno para disfrazarlo y solo dejar que la gente haga clic en lo que el uno m y déjame simplemente cambiar rápidamente el color aquí. Y está en animaciones. Soy azúcar de sesión aquí. De acuerdo, entonces cambiemos esas esas de colores paletas de colores, ¿ verdad? Eso es lo que buscamos. Nieve conseguir unos buenos downs que podemos usar. Y sí. Por lo que puedes usar eso para tus servicios. Puedes usar definitivamente. Puedes hacer lo que quieras. Pero creo que esta es una buena manera de romper las cosas de una manera que no va a obstruir tu página o hacerlo demasiado pesado de texto y poco favorecedor. Entonces sí, por eso lo hago por la página web y esto debería escalar. Bueno, en esta sección no juega bien, pero eso está bien. Yo puedo trabajar con eso. Yo puedo hacer eso ahora mismo para que podamos asegurarnos de que todo sea bueno en estadísticas. Hagamos que esto y lo que debería ser y lo mejor de Hofstede. Yo creo. Sí, luce bien. Por lo general Vamos a Preview. Sí. Grano. Entonces ahora eso está en su lugar. Sí. Para que como tú bien. Y eso es todo. Está bien. Entonces pasemos a la página de precios. 19. Construir tu página de precios: Está bien. Por lo que ahora que tenemos nuestra página de Servicios hecha y espolvoreada, es hora de que sigamos adelante y consigamos el lugar y las sanciones. Entonces al igual que antes, vamos a tomar nuestra sección básica de cabecera. Y vamos a pegar eso aquí. Nosotros sólo vamos a poner bracing. Y lo dejaremos como mucho de Epsom. Y vamos a cambiar esa imagen por algo un poco más bonito. De acuerdo, Entonces dejaremos eso ahí. Y luego, luego en esta nueva sección que tenemos, vamos a construir algo realmente sencillo, que recomiendo. Es decir, puedes tener algunas, algunas complicaciones más en tu precio y página si quieres, pero probablemente no necesites hacerlo. Y la mayoría de las instancias con membresías de gimnasio, generalmente tienes como ofertas de acero. Tienes como una base uno, ese punto de entrada. Y tal vez obtienes tu nivel más alto para los clientes que pagan más alto. Entonces, y eso es lo que vamos a cinturón aquí. Entonces vamos a hacer eso. Tengo una sección básica contener un golpe mortal aquí. Entonces lo que voy a hacer como voy a tirar, creo que estamos bien. Sí, vamos a hacer este con columnas. Vamos a usar una grilla para esto. Usamos columnas y vamos a tener tres. Y entonces esas columnas van a agregar un bloque def y cada una, va a haber unas capas muy similares a lo que hemos hecho antes, pero va a ser ligeramente diferente. Y luego vamos a tener un encabezamiento por encima de las columnas y n aquí. ¿ Cómo vamos a hacer esto? Vamos a hacer, tengo que pensar en ello que sólo vamos a tener una clase que ha hecho primero. Entonces vamos a hacer la sección básica, luego contenedor básico. Y para nuestro rumbo, vamos a ser ese. Sensor versus va a decir. Y me acabo de dar cuenta de que en realidad no es H2, ese. Y aquí sólo vamos a nombrar a esto la clase Blog. Paquetes de precios. Vamos a mantenerlo realmente simple. Y en general tiene que ver con este porque realmente estamos tratando de poner algo de énfasis. En realidad quiero usar el rojo es los fondos y que no he hecho mucho menos, pero es solo porque no quieres usarlo en exceso. No se quiere saturar el uso del color. Entonces hagámoslo a su alrededor. Y luego vamos a conseguir algo así es como hay que pensar en la estructura de eso. Entonces vamos a poner, déjame pensar. Vamos a tener un elemento de texto primero. Entonces voy a tener cabeza. Y luego vamos a tener una breve descripción. Entonces otro elemento de texto. Y entonces vamos a tener un menos. Entonces déjame sólo encontrar una lista decente de textos. Está bien, así que déjame ver una misa pero vamos a pulir para que el agua, igual que antes de 2020. Y por cierto, puedes mantener presionada la tecla Mayús. Si quieres cambiar todo a un número a la vez. Entonces éste que vamos a ahora no pernos. No necesitas pernos. No necesitábamos que sea voy a ir 15. Y entonces sólo voy a llamar a esto Stacia, va a ser menos espacio y 2, y voy a hacerlo blanco. Obviamente un rumbo va a ser un H3. Y mantenerlo en eso. Y sólo lo vamos a hacer blanco. Y sólo vamos a decir 25. Entonces aquí vamos a sumar lo descriptivo. Entonces vamos a llevarnos un poco, un montón de epsilon. Yo sólo puedo llevarme este de aquí. A lo mejor no tanto como eso. Entonces tal vez sólo una frase. mí me parece bien y vamos a llamar a ese párrafo básico. Pongamos un poco de blanco ahí dentro. En realidad, no, no necesito conocer la clase aquí. Y luego vamos a fest listas. Ahí es cuando vamos a cambiar las cosas apenas siempre tan ligeramente. Y también quiero reducir el módulo en la parte superior de este rubro. Entonces un N aquí en menos vamos a hacer el ANOVA. Lo vamos a hacer blanco. Vamos a hacer un 16. Y luego vamos a añadir algo de relleno entre cada menos de probablemente diez. Yo creo. No siento que me esté sintiendo bastante bien con este. Y vamos a añadir un botón abajo. Sólo vamos a decir lección básica. Y vamos a subir porque queremos que esto sea blanco. Cambiemos lo último últimamente. Entonces uno de los botones para ser de ancho completo, así como así. Y voy a poner apuntarme. Voy a tomar eso y sólo voy a copiar y pegar eso aquí y aquí. Escondado todo el Padre ahora llame a los libros ir. No sé, 35, 45. Y por eso lo hago por la página de precios, una realmente sencilla, no quieres pensarlo de más. Entonces esos son los paquetes realmente básicos que podemos usar. Y podrías agregar algunas cosas al respecto, como, en lugar de tenerlas todas iguales de color así. Lo que podrías hacer es como podrías tener estos como vértices blancos y n en la parte superior como derechos. En realidad, no me importa hacer eso sólo para ilustrar. Entonces lo harás, eso se verá así. Entonces hagamos ese blanco, que en realidad va a apenas un poco gris. Para que pueda ver a Edison y puedo hacer el top one. Y puedo hacer que esa vaya tan lejos como hacer que la textura agregue. No creo que eso sea apropiado. Y luego quiero hacer esto gris. Eso me gusta. Y entonces porque estamos haciendo una pared blanca que quiero hacer aquí es agregar una caja-sombra. Al igual que lo hemos hecho muchas veces antes. Y para mí, si estoy contento con eso, copia que hay éste. Cambiemos las etiquetas. Especificador básico. Sí. Está bien, y puedes hacer algo así. Epístola un poco de énfasis en la última, y esa es la que quieres que la gente vaya. Podrías agregar las etiquetas más populares. Aquí puedes hacer muchas cosas, pero es por eso que te recomiendo por precio y no necesitas complicarte demasiado o hacerlo. Sí. Simplemente no lo complicas demasiado. Entonces revisemos rápidamente y veamos cómo la báscula, y quiero más espacio. Entonces me voy a mover no del todo un 100, tal vez como 60. Sí. Ahora llevemos a los más felices con eso. Vayamos a la tableta. Perdiendo un poco ahí, pero no tanto que estoy sintiendo ¿qué te gusta? Eso está bien. Yo creo. Sí, eso está bien. Lo que podemos hacer es cambiar el patrón a tal vez 20. Eso ayudará abajo, pero, está bien, Y aquí lo que tenemos, así que tenemos la pila de columnas que esperaríamos que hicieran, pero no hay suficiente espacio, así que vamos a agregar algo de espaciado. Y eso es todo. Bueno, es mucho mejor que eso. A ver. Buscaré en rejilla móvil. mí me parece bien. Por lo general sólo un espacio aquí, es Farsi y E bucles mercancías. ¿ Todo bien? Y eso es un precio y tono. Entonces estas páginas vienen muy bien y me siento bastante bien con ellas. Ahora, hay algunas partes que tal vez me has estado viendo haciendo aquí y estarías pensando, vale, esas partes que tal vez no han curado, he hecho en todas las páginas, por ejemplo, no he sido Lincoln el botones y no había estado prestando mucha atención a los encabezados son si están categorizados correctamente. Y la razón de eso también. Siempre lo hago. Normalmente trato de conseguir la mayor parte del diseño, qué tipo de camino. Y luego tengo algunos cheques estándar que hago al final, que voy a hacer un video y mostrarles qué hacer. Y como quieres asegurarte de que tu sitio vaya a funcionar de manera óptima, quieres asegurarte de que todo esté en su lugar. A veces es un poco mucho estar haciendo esos cheques ya que estás pasando por el proceso de diseño porque no es en eso en lo que estás enfocado, tu enfocado en el comercio y algo que está diseñado. Bueno. Entonces vamos a hacer eso en. Entonces si te has dado cuenta de eso, si no lo estás, vamos a volver a ello. Pero sí, esa es la página de precios. Y ahora tenemos la página de Contacto para echar un vistazo. Ese es el que sigue. Y luego ya casi estamos ahí. Ahora, permítanme empezar a hablar de estructuras de regeneración y de cómo en realidad vamos a generar leads con nosotros. Entonces pasemos al siguiente. 20. Construir tu página de contacto: Muy bien, entonces ahora por fin llegamos a abordar nuestra página de contacto. Y como los temas que estarían pasando por este curso. Sé que nos hemos estado centrando mucho en el diseño y estamos adivinando totalmente generación parte del curso ahora. Pero depende del tipo de sitio web que estés construyendo. En primer lugar, en cuanto a cómo quieres que luzca tu página de contacto, puedes seguir un enfoque más tradicional donde la página de contacto es solo una fuente. Y puedo mostrarles absolutamente cómo hacer eso aquí. Y también se puede decir el enfoque donde se construye una granja apretada y se incrusta en la página. Y esa es una forma más interactiva de coleccionar leads, que yo diría que es un poco más atractiva como un poco más innovadora. Y en esos, se conecta y forma apretada dos aplicaciones diferentes también es mucho más fácil que tal vez solo una forma estándar. Entonces hay tantas maneras diferentes en las que puedes tomar esto y es todo fue mejor para ti. Y lo que realmente voy a sugerir la forma en que voy a construirnos. Voy a seguir adelante y construir esto con una forma y mente ajustadas. Y depende de lo que estés haciendo, pero por eso te recomiendo que lo hagas si estás viendo esto y eres genuino y la forma en que estoy configurando esto y no va a estar probablemente no sea en tu mejor interés. Y la razón por la que digo que como, como se puede seguir, se puede decir que no por el resto del PT. Se puede decir que no por equipo. Podrás tener miembros diciendo eso hasta a través tu página web y en realidad sacando dinero de ellos antes de que incluso hayan pisado el gimnasio o antes incluso de hables con ellos. Y a menos que estés vendiendo como un tipo de productos o servicios de alta tecnología que necesitas hablar con la gente y tienes que pasar por un proceso de ventas en particular antes de que realmente te compren. Entonces de esta manera tal vez un poco mejor. De nuevo, si solo eres un poco estándares de negocios locales y necesitas contactos de personas y luego, sí, el método de tipo fuente es mucho Besso, desperdiciado. Ve y déjame simplemente volver rápidamente y te voy a mostrar tipografiar en nuestros cinturones son muy apretados de forma. Yo soy mucho menos. Simplemente te mostraré cómo se verá y te enseñaré cómo almorzar, ¿no? Y creo que estas son formas más fáciles de hacerlo, ¿verdad? Y rieles telefónicos apretados de tierra caros. Se puede crear, realmente involucrarse en granjas con él y simplemente liberarlo se incrusta. Entonces vamos a crear un nuevo tipo 1. Y vamos a llegar a su propio tema. Y podríamos simplemente empezar de blanco una cosa porque todo de cero. Está bien, y ahora que rastros sólo voy a llamar a esta firma de Magnus Jan. ¿ Y cuál es la forma tipo en sí? Tendrás que construir un tema. Tienes que simplemente monkeying sobre. Y quiero deshacerme de esta imagen. ¿ De acuerdo? Y quiero añadir una pantalla de bienvenida. De acuerdo, La primera pregunta aquí, obviamente la pantalla de bienvenida aquí, pregunta de lavado y sólo vamos a, sólo vamos a hacer un par de preguntas aquí. No necesitamos tomarnos mucho tiempo y sobre esto, pero tendrías tu pantalla de inicio, tienes tu primera pregunta la cual yo recomendaría también es tu nombre, que son menos que la dirección de correo electrónico. Vas a querer cobrar eso. Y cada instancia. Si puedo encontrarlo, es Hayden de ella. A go. Y puedes agregar cualquier otra pregunta que quieras aquí, pero yo sólo voy a ir con eso. Entonces quieres agregar un final. Se puede ver que ya hay uno aquí. ¿Está bien? Entonces tenemos eso y lo haré, lo voy a hacer es construir un tema. Entonces, cuando se trata de diseño, vamos a añadir un nuevo tema. Los antecedentes. No vamos a tener una imagen, pero vamos a tener un color de fondo y sólo vamos a usar nuestra cuadrícula. En cuanto a los textos. Vamos a usar el blanco. Y con el botón, vamos a usar nuestros rojos, como lo hemos estado haciendo anteriormente. Y ésos somos nosotros. Y las respuestas también van a ser, probablemente, nos vamos a quedar con blanco para eso. Y eso debería hacerlo. Veamos cómo fluye esto realmente rápido. Por lo que vamos a dar clic en iniciar. Sí, y sólo vamos a querer echar un vistazo rápidamente a la fuente también. Por lo que no usaremos la fuente del sistema, usaremos UDL, piensen que ustedes tendrán su ANOVA. Usaremos Matsuda solo usaría lo que podamos poner en nuestras manos. De acuerdo, así que eso funciona y podemos hacer muchos medios probablemente la mejor opción, um, ok, y ese es un cinturón de granja de tipo realmente básico para este sitio web. Entonces, solo publicémoslo. Y lo que vamos a hacer es que lo vamos a agregar como una página de relleno. Vamos a conseguir el abrigo va a copiar los códigos. Y aquí lo que vamos a hacer, vamos a deshacernos de nuestra cabecera. Tenemos esta sección. Entonces vamos a añadir un elemento embejado allí. Pega el fresco, luego guárdalo. Y ésos somos nosotros. No tienes que hacernos otra cosa todo lo que tenemos que hacer. Y cuando publiquemos eso, podremos ver cómo se ve y moverse, capaces de ver cómo podemos interactuar con él. Pero eso es realmente lo que vamos a tomar en este momento. Entonces sí, creo que sé por qué lo he hecho así puede que no tenga sentido que no se pueda ver oferente, vale, pero en las próximas lecciones voy a estar hablando cómo realmente volvemos esto o cómo realmente mejoramos la regeneración aspecto. Entonces eso no va a explicar el flujo de la misma. Y luego voy a hacer algunas sugerencias sobre, sí, pero cómo se puede conectar estas diferentes aplicaciones y cómo se puede aprovechar al máximo. Entonces pasemos a eso y empecemos con el lado de la generación de plomo de las cosas. 21. La estructura de la generación principal: Muy bien, entonces ahora que hemos diseñado todas nuestras páginas y todavía tenemos un poco de trabajo para hacer el lado del diseño de las cosas, pero en su mayor parte está básicamente terminado. Pero lo que queremos hacer ahora es hablar de generación de plomo. Y esto va a cambiar dependiendo de cuál sea tu empresa. Y hay tantas maneras diferentes en las que puedes ir por generar leads y domingo tus esposas para responder a lo que llamaríamos una maquinaria de venta, donde podemos recolectar lo que lleva y podemos hacer mucho buen trabajo. Este sitio web que pusimos, he tratado de armar una estructura que creo probablemente va a ser apropiada para la mayoría de las empresas. Entonces se llega a las matemáticas está pasando. El primero es donde puedes recolectar direcciones de correo electrónico y nombres y la lengua para algo para una oferta. Por lo que ofrecen que estamos usando aquí es decir que no te den 10 por ciento de descuento en tu primer año. Entonces cuando te inscribes en una membresía para obtener un 10 por ciento de descuento, la razón por la que he hecho me gusta esto porque hay una forma separada que normalmente lo haría. Se supone que van y llenan. No conozco la página web de Jim por ejemplo, como porque las matemáticas con los dos métodos que tengo aquí son probablemente los dos que cualquier negocio puede un poco usar que solo puedes agregar que puedes adaptar los cimientos de caminar, pero aquí puedes aplicarlo a tu. Y así tenemos esto arriba aquí arriba. Y lo importante a destacar aquí es que esto será visible para cualquiera que visite el sitio por primera vez. Al llegar a través de la página de inicio ahí siendo presentado por parcialmente pero esta página uno siendo presentado pero el propósito y la declaración de misión pero como decirle a la gente lo que esta gema puede ayudarte a. Y luego debajo de eso le estamos diciendo a la gente dónde si te apuntas aquí, se nos da un llamado mucho fuerte a la acción y ese es el punto. Y de nuevo, presentado con eso, con tener que hacer cualquier escuela y hago click en cualquier cosa. Y eso es lo importante. Y luego abajo aquí tenemos otra llamada. Va el mismo llamado a la acción. Es solo en la primera fila y esto se mostrará en cada página. Por lo que cuanto más profundo alguien se mete en la página cuando la cabeza la parte inferior otra vez presentó con otra oferta. Y estas son buenas por un montón de razones. O sea, el primero es que te da algo a lo que la gente puede adjuntar más allá de solo contactos en tu empresa. Si eres una marca basada en servicios para un gimnasio, habría más funcionalidad de ecommerce implica antes de que vamos a apuntar ese camino. Y la verdad es que si te metes realmente en un tipo particular de modelo de negocio, encontrarás que sus cimientos son los métodos de regeneración siempre se mantendrán igual, pero solo nos hacen festín, pero solo hacen ligeramente desvanecidos de uno al pensar que ese es uno que se muestra aquí es un lugar realmente bueno para empezar a llegar a una oferta como la que tenemos aquí. Y entonces obviamente alto buen botón de contacto arriba en la parte superior. Y la página de contacto o consistía un formulario tipo o en cualquier lugar tipo de granja que se desee utilizar. Y una cosa que no hice en la cinta desde cuando estaba construyendo fue realmente un llamado a la acción ahí un llamado definitivo a la acción. Ahora consigue 10 por ciento de descuento. Y podría ser lo que quieras. Y vamos a hablar de algunos de estos aquí. Entonces, por ejemplo, lo tengo listado gráfico abierto aquí. Yo sólo voy a renunciar a las densidades. Pero para la oferta de comedores de escritorio, puedes entonces ingresar tu email, campañas de email o el escritorio y sería barcos. Y sólo voy a ampliar eso con un enlace. Para comprar. A membresía. Son alternativamente, sería difícil. Pero el representante de ventas. Porque si eres ciberespacio y no vas a tener una funcionalidad de ecommerce. Alguien tiene que hablar contigo antes de que realmente puedas llegar a un acuerdo. Entonces eso es algo que quizá quieras considerar. Y puedes tomar múltiples correos electrónicos, pero puedes enviar múltiples, ya sabes, puedes crear toda una secuencia automatizada. Obviamente, no estamos, no vamos a entrar en eso hoy, pero eso es lo que puedes hacerlo puedes seguir adelante y puedes crear una secuencia de correo electrónico automatizada completa a una oferta para vender el tal vez y si le preguntaste, pero porque alguien va a ser inscribirte en el HUC lo suficientemente fuerte, hay una mayor va a conseguir escritorio y puede que tengas que hacer eso. Y entonces cuál es la página de contacto? Puede que solo sea un directo ya que el contacto es como escoger un descubrimiento de recolector de color llamado gap proposal request pricing para que tengamos el precio y a menos que Jim diga, pero hay tantos ganchos diferentes que puedes usar. Y sí, Así que vamos a decir contacto y luego el resultado fue que sería una gran llamada. Entonces sí, como los tantos métodos definitivamente de generación de los que podría hablar aquí. Y para ser honesto, sería un curso completamente separado. Podría seguir, pero eso es por el alma tanto tiempo. Pero mucho menos sitio web que estamos viendo. Estos son los dos diferentes con golfista les ofrecería un escritorio y los conservarían. Eran a menudo que mi escritorio y recoger una membresía o una llamada más grande líquida. Forman contactos estándar, donde alguien puede invadir un montón de información. Y luego volviendo a estar conectado con el representante de ventas o algo así. Y eso es lo clave aquí. Esas son las cosas clave en las que hemos estado tratando de enfocarnos y sobre las tendencias. Y lo que tenemos que hacer como próximo video. Más bien, vamos a estar conectando lo que tenemos aquí. Entonces lo que vamos a estar haciendo en el siguiente video como conectando nuestro formulario tipo y también nuestras granjas aquí y aquí con nuestro proveedor de email marketing. Y quiero tocar brevemente los diferentes tipos de proveedores malvados de Roxanne que puedes usar. Y deberían considerar si no tienes uno en este momento. Entonces nos meteremos en eso en el próximo video. 22. Conectar tu formulario de la Gen principal con un proveedor de marketing por correo electrónico: Muy bien, entonces ahora que hemos repasado los métodos de generación de alelos y tenemos que conectarlos con nuestro proveedor de email marketing. Por lo que es posible que ya tengas un proveedor de email marketing son si no lo haces, vas a tener que escoger uno. Y te voy a mostrar dos de mis favoritos que recomendaría a principiantes. Una de ellas las usamos internamente, estoy por mucho de lo que hicimos y eso es lo que te voy a estar mostrando. Entonces la primera que tenemos como Mailchimp, y ésta no es la que usamos, pero solíamos usarla. Y la milicia era realmente, realmente buena si eres principiante a Eva marketing es definitivamente caso. Por lo que a los dueños de pequeñas empresas. Y entonces la gente es nuevo equipo y marketing y marketing en general. Por lo que recomendaría altamente evaluar con ellos. Y el proceso para conectar tu granja Webflow con movimiento será muy, muy similar al proceso de conectar Webflow, pero convertir kit, que es de lo que voy a estar hablando aquí. Pero estos son los dos que recomiendo. Pero puedes irte y hacer tu propia investigación porque hay tantos proveedores de email marketing diferentes. Mailchimp es probablemente el líder del mercado y la ley respeta kit de conversión como menos conocido, pero es igual de bueno como Mailchimp. Entonces lo que vamos a hacer es abrir una nueva pestaña y pasar por un conductor. En realidad nos cambiamos de MailChimp o nos sometemos hace un mes, meses, quiere, quiere ir. Entonces, vamos a iniciar sesión. Por lo que este es kit de conversión. Vamos a darte una idea de cómo es. Y este es EU, sí, este es probablemente el que recomiendo usar esto como un tan bueno que mucho prefiero sobre el movimiento es simplemente mucho mejor en mi opinión. Pero sí, lo que vamos a estar haciendo aquí, entonces, en primer lugar, queremos conectar granjas o foros de descuento en, en aquí, en la parte superior de nuestra página de inicio. Bajo Fisa. Queremos conectarlos con gorra de combate. Y luego también queremos conectar nuestra granja tipo con Connecticut. Entonces el primero que te voy a mostrar es cómo conectar tu forma tipo con kickback hit. Y la forma en que vas a hacer esto es usar una plataforma llamada Zapier. Por lo que puedes ver aquí hay un montón de conexiones diferentes que puedes hacer con diferentes plataformas en forma apretada. Y lo que en realidad no tienen para usar Zapier o algún otro tipo de software de configuración de API. Entonces, solo tecleemos aquí y veamos si aparece el kit de conversión. Entonces podemos ver que no había aquí. Tendríamos que seguir adelante y usar Zapier para conectarnos a eso. Pero nosotros bien, bien buscamos usar aquí arriba. Entonces si no sabes de qué hablo ahí y todavía vamos a usar te mostraré el proceso por el que tienes que pasar, así que no hagas lo que sea. Pero aquí tenemos tipo formulario y nos vamos a conectar y deberíamos estar bien para ir en tan solo un segundo. De acuerdo, tan apretada forma ha sido autenticada. Ahora necesitamos obtener la autenticación de Connecticut, que debería ser relativamente sencilla. Por lo que se necesita ir para que puedas aspirar cualquier configuración escolar. Y cualquier SQL es una clave general y una menos API aquí. En realidad este, el secreto. Tomemos eso, copiarlo. Para volver aquí, pega, luego haz clic en Crear. Genial, y eso ha sido exitoso. Y lo que quiero hacer aquí con respecto a las etiquetas y esas cosas, tú, lo que tendrías para crear una etiqueta y decir convertir kit que vas a adjuntar. Los leads vienen de este formulario para así que solo voy a escoger sí, solo voy a escoger una sola etiqueta. Y sin embargo podemos actualizar los suscriptores existentes, pero no tenemos que hacerlo. De acuerdo, Entonces podemos elegir. Estas son todas las etiquetas que he conseguido lado volver. Realmente no importa cuál. Crea una etiqueta específica al formulario que tienes en tu página de contacto. Por lo que se crea una etiqueta sólo diciendo contactos y algo así. Y lo que vamos a usar. Es éste que simplemente no tengo yo theta. No he agregado una pregunta a. Y luego vas a emparejar estas preguntas con nombre y apellido. Y luego cuando esta información se mete en convecto, consigue o ser asignado a los lugares correctos. Por lo que haremos clic en Finalizar. Y eso es todo. Entonces si pasé a tomar forma en la página web que era Belgo aún tenemos que publicar. Y yo sería capaz de poner mi información y se presentaría y regresaría gatito, eso sería bueno ir. Entonces ahora que hemos conectado granja de cintas con convexa, vamos a volver a Webflow. Y vamos a conectar estas granjas. Entonces tenemos el encabezado y el Fisa y los vamos a conectar con el convecto KitKat. Ahora vamos a hacer eso usando una plataforma llamada Zapier, que obviamente mencionó. Y eso nos va a permitir conectar Webflow. Wes, convertir kits a través de la configuración API y Zapier, lo hace muy, muy fácil de hacer. Y en cuanto a estas formas, por supuesto va a conseguir que estas formas puedan parecer independientes unas de otras. Pero de la forma en que los vamos a configurar de la misma manera, lo vamos a configurar de la misma manera. Vamos a asignar la misma etiqueta y ahí se tratará como la misma cosa. Y porque en última instancia lo son. Entonces eso es lo que vamos a hacer a continuación. Ahora esto es un poco más complejo. Tomará un poco más de habilidad. Pero definitivamente valía la pena saber hacer. Y podría estar pensando, bueno, por qué, ¿por qué no simplemente inserté un formulario en mi página web? Porque no se puede hacer eso con una remontada aquí. Puedes crear una granja y luego solo puedes pegarla en el, en tu sitio y puedes recolectar información de esa manera. El motivo por el que no le ha gustado hacer eso es porque no tienes tanto control sobre cómo se ve la forma. Y eso suele ser toda una caída para alguien como yo que se preocupa por el zinc forma de ello porque no sería consistente. lo pegaría como un pulgar dolorido y me estaba volviendo loco por decir lo menos. Entonces sigamos adelante y hagamos esto. Entonces voy a cerrar todas estas pestañas, principalmente porque también estamos un poco metidos en el final de este proyecto. Por lo que hemos hecho la forma de tipo como otra forma. Vamos a deshacernos de todos estos. Entonces Zapier como plataforma que puedes usar de forma gratuita, pero también hay una versión de pago de la misma. Aconsejaría invertir en si terminas haciendo parte más complicada con ella. Entonces solo lo voy a decir aquí. Esta es una de las plataformas por las que pagamos. Y esto hará que sea realmente fácil para nosotros que conecte Webflow con convexo. Entonces lo que voy a hacer, voy a crear eso. Y este proceso será el mismo independientemente de que Estados Unidos pague la gratis. Y luego vamos a crear, vamos a crear un cliente. Entonces ahora que estamos aquí y Zapier, este proceso sería el mismo por cierto, sin importar si estás en un plan gratuito o de pago, y al menos debería ser. Pero lo que vamos a hacer es hacer clic en el botón Crear. Y luego vamos a navegar por la galería. Ya veremos si aquí hay alguna plantilla para los conecta Webflow con kit de convectos. Porque una gran cosa arriba exactamente es que puedes buscar en la app por lo que estás buscando aquí. Y luego puedes conectarlos directamente con el otro IPR. Por lo que no tienes que hacer mucho monkeying sobre eso te puede involucrar a través de todo el proceso. Entonces, primero tecleemos en Webflow ahí. Y luego vamos a teclear en Connecticut. Y luego vas a poner un gatillo. Por lo que F es una presentación de formulario. Eso es lo que va a desencadenar este evento. Entonces vamos a añadir un suscriptor. Entonces vamos a añadir un suscriptor a una secuencia. Eso es lo que vamos a hacer. Y sin embargo vamos a seguir adelante y crear eso. Y entonces lo que vamos a hacer aquí es solo hacer clic en Guest OS. Está bien, así que ahora que estamos aquí, vamos a hacer click en conecta. Y no se puede porque es una página web separada con la que estamos trabajando. Para que puedan ver todos los diferentes sitios web que tengo aquí. Y el que voy a usar es obviamente Magnus, Jimmy, o Shi'a. Entonces vamos a dar click ahí. Voy a dar clic en Autorizar solicitud. Y eso es todo para nuestra página web. Podría no decirlo, pero ese es definitivamente el uno. Entonces vamos a golpear la noche. Entonces esa es obviamente nuestra gema aquí. Ahora, lo que vamos a querer hacer antes de que realmente sigamos adelante y dar click siguiente es que vamos a querer publicar o decir en este punto, porque un pedido para Zapier, porque para que Zapier identifique las formas que nosotros quieren sacar información de ella tiene que ser publicada. Entonces volvamos a Webflow, vamos a subir aquí. Y entonces no vamos a agregar un dominio personalizado en este punto. Y ese es un proceso totalmente separado del que hablaremos al final. Porque para poder agregar el dominio personalizado y hay que actualizar a un plan de sitio, lo cual no voy a hacer aquí. Pero por qué voy a hacer es publicarlo. Entonces este Webflow, dominio de Hofstede. Entonces hagámoslo. Porque eso identifica a un proyecto es lo mismo sin importar en qué dominio se encuentre. Y luego lo que vamos a hacer para asegurarnos de que el formulario se va a registrar correctamente. Vamos a sólo rápidamente y SAT o información, por lo que la información termina Así se registra ya sea como respuesta. De acuerdo, así que esa es una. Y entonces aquí vamos a hacer lo mismo. ¿ De acuerdo? Por lo que ahora Zapier debería poder sacar esa información que sólo tenemos mete al dar click Siguiente aquí. Por lo que se puede ver que como estar registrado con dos formularios separados. En realidad vas a tener que crear 2s abs, vas a tener que crear uno para una granja y una fórmula. Entonces sólo vamos a ir por el primero aquí. Voy a dar click en Siguiente. Y se puede ver que está sacando los datos de Webflow. Y luego tenemos que conectarnos y volver. Bien. Y ya me he conectado, por lo que esa parte pasa por mí. Pero lo que tendrás que hacer ahí es cuando te conectes y conviertas kit, me imagino como conseguir tu secreto, como obtener tu clave API secreta. Y luego vas a tener que copiar y pegar eso aquí en alguna parte. Ahora te está preguntando un poco secuencias. No hemos creado una secuencia. Pero déjame volver atrás y hablar de Git y mostrarte. Crearás una secuencia y automatizaciones. Y de nuevo, convertir kit como probablemente todo un curso separado en y por sí mismo. Pero la forma en que planeamos tener información o puedes crear una secuencia realmente genial. Pero esto fue cuando estábamos hablando de las campañas por correo electrónico. Pero querrías ir a secuencias y empezar por ahí. Y aquí es donde construirías tus correos electrónicos. Y entonces esos correos electrónicos se pueden agregar en alguna automatización. Pero, ¿qué secuencias? Es solo un conjunto de correos electrónicos que están recibiendo incienso y una forma automatizada. Entonces no voy a usar ninguno de estos por el momento, pero volveremos a Zapier y solo voy a coleccionarlo realmente no importa cuál para mí, pero no se puede secuenciar. Entonces darías clic en Siguiente. Entonces podemos ver aquí cuando estamos viendo esto que se tira a través de un nombre, pero en realidad tampoco queremos ese. Queremos escribir el correo electrónico, queremos mapear eso. Por lo que sólo vamos a dar clic a Data emo. Y luego aquí abajo vamos a ir FirstName y LastName. Y eso es lo que vamos a usar. Y vamos a ver si funciona o no. Y luego vamos a seguir adelante y dar click Siguiente. Vamos a mandar una prueba para ver si está funcionando. En gris se saca a través. Entonces ahora hemos creado, así que lo que queremos sólo encender esos, y eso es todo. Y luego vas a querer repetir ese proceso para la segunda forma. Y luego tendrás tus pulgares enganchados para abogar y la información se pasará correctamente. Tú bien, uno para gastar un poco a la vez en que tus campañas de correo electrónico ley. Y para crear una secuencia, usa esa nueva secuencia, dale un nombre. Me gusta. Entonces. Entonces quieres darte una secuencia, un nombre. Y podemos ser cualquier cosa que te guste realmente en tu negocio. Tan solo asegúrate de que esté claro y que quede claro qué forma está relacionada la secuencia. Entonces y entonces eso es lo que usarás en tu Zach. Simplemente crearé una prueba solo para mostrarte el proceso muy rápido. Y entonces aquí es donde escribes tus correos electrónicos. Y puedes agregar múltiples correos electrónicos y todos ellos disparan de manera automatizada. Y determinarás cuánto tiempo después de que se envíe cada correo electrónico, cuándo se enviará el otro. Y realmente es así de simple. Puedes pasar un buen poco Taiwan te a los correos electrónicos asegurándote de que estén diseñados correctamente y la arena todas las cosas correctas. Y luego dependiente de tu autoría o de tu servicio, si la intención aquí es usar el libro de alguien una llamada que vas a querer enlazar, vas a querer enviar un enlace a tu mostrador, una plataforma que puedes usar para eso como llamado Calendly. Y esto es todo aquí. Y puedes usar esto. Y cuando es realmente, realmente fácil crear un evento, generará tu enlace personalizado. No tienes que hacer mucho mono y sobre. Tan solo tienes que conseguir Calibri la información que necesitas. Y podrás vincular eso en tus correos electrónicos para alumnos un poco llama a bebés por negocios, aún dependiente de lo que estés haciendo. Por lo que realmente puedes tomar esto en la dirección que quieras. No tiene que ser específico de lo que he estado hablando aquí. Y eso es todo. En ese punto tendrás conectado, son tus granjas para convertir kit. Y esa será una secuencia automatizada de relleno si configuras esto correctamente, lo cual es realmente, realmente útil significa que tendrás que ir manualmente enviando correos electrónicos a leads y todo ese tipo de cosas. Entonces sí, entonces eso es realmente ahora hay un par de cosas más que tenemos que hacer, relacionarnos con el sitio y evaluar. Por lo que voy a hablar en el siguiente video. Y vamos a entrar en eso ahora mismo. 23. Agrega tu sitio web y ajustes: Entonces las últimas cosas que necesitamos ir por aquí, y este es un aspecto que no hemos tocado ya que hemos estado pasando por este curso como flujos de trabajo, configuraciones de proyectos. Para que veas que tienes un montón de pestañas diferentes con un montón de ajustes. Yo sólo voy a ir rápidamente a través de ellos por ti y te explicaré cuáles son cada uno de ellos. Entonces en la configuración general, obviamente tienes el nombre en el subdominio sobre el sitio. Y puedes añadirlo a nuestra carpeta si quieres. Entonces también puedes agregar tu favicon y clip web. Por lo que aconsejaría ponerte tu logo ahí porque la gente no lo sabrá. Entonces y luego aquí abajo tienes tu zona horaria. Puedes agregar tu talón de inicio de sesión de línea, eso es útil. Puedes deshacerte del branding del flujo de trabajo en el HTML, lo que probablemente querrás hacer. Y luego aquí abajo, solo estadísticas realmente y hosting. Por lo que querrás conectar tu dominio personalizado al final, cuando estés listo para publicar, querrás agregar un plan de sitio. Un plan de ensayo puede ser uno de estos. El que recomendaría es CMS. Pero puedes usar básico si quieres. Cms solo te dará funcionalidad añadida y oh, probablemente sea un servicio de hosting un poco mejor. Entonces sí, los isótopos. Entonces si tienes algún empleado que quieras hacer ediciones al sitio, pero en realidad no quieres el desorden y el barco con un diseño. Puedes agregarlos como colaborativo. Entonces en Ingresa para cambiar el texto de MGS, cosas así, o crea nuevas páginas y tu CMS. No es necesario. ¿ Por qué rebelarse SEO? Por lo que aún no hemos configurado Google Analytics ni la consola del sitio. Pero cuando vayas a hacer esto, para hacer cualquiera de nosotros, tendrás que añadir un plan de sitio. También tendrás que verificar tu sitio con Google y son cosas SQL impresionantes que sí tienes que hacer, que hablaré en un segundo. Y luego granjas cuando los correos electrónicos de January son o si quieres saber cuándo esas granjas, en cuanto a conseguir notificaciones, solo pones toda la información aquí y sigue por ti. Entonces tenemos fuentes. Ya hemos tocado fuentes y conectándolas con Adobe y haciendo todo eso. Entonces estás bien sus copias de seguridad. Si alguna vez cometes algún error grande en tu sitio o pierdes cosas, puedes recolectar o regresar a una de las copias de seguridad aquí. Lo bueno de Webflow es que hace copias de seguridad automáticamente. Entonces eso es un verdadero beneficio e integraciones. Por lo que vas a querer integrarte con Google Analytics aquí. Si tú, google tiene Google Maps, pixel de Facebook en los dos más importantes aquí son el pixel de Facebook en Google Analytics. Por muy importante, los consigues configurar. Y el tercero como costos de búsqueda, también queremos llegar a ese yo. Y luego tenemos código personalizado. Depende de lo que quieras hacer, ¿ cuál es tu píxel de Google Analytics y de Facebook? Puedes agregar el código personalizado aquí. O alternativamente puedes usar Google, o alternativamente puedes usar Google Tag Manager, que también es una gran manera de vender esas cosas. Pero estos temas realmente divertidos para el castillo, un poco de optimización de sitios web, SEO. Y eso es todo. Eso es lo que necesitas saber y aquí. Y solo te va a dar una visión general de la configuración y las cosas que tienen que hacer para que el sitio esté listo para su lanzamiento. Entonces con eso dicho, solo quiero hacer un último video que cubrimos en los cheques finales que suelo hacer en cualquier sitio que esté construyendo. Entonces sí, saltemos a eso ahora mismo. 24. Checks finales: Muy bien, así que lo último que quieres hacer antes de llevar tu sitio web en vivo son solo algunos cheques finales en él. Entonces las cosas que queremos hacer aquí, queremos comprobar. Vamos a revisar la copia, asegurarnos de que no haya errores gramaticales. Queremos revisar los enlaces en todos los botones y asegurarnos de que todos vayan a los lugares correctos. Y ya revisamos la finca. Entonces eso es una cosa fuera del camino. Y entonces lo último que queremos hacer es revisar la cabeza y las estructuras. Y luego lo que nos ayudará con eso, como ya hablamos de ello antes, el otro checker de Webflow es útil. Y una cosa que no hemos tocado que en realidad está resaltando aquí como la falta de texto alt en las imágenes. Eso es otra cosa que realmente quieres revisar. El texto alt es bastante importante para SEO. Por lo que para agregar texto alt, ella sólo va a cualquier imagen como estás mirando. Haz clic en el icono de engranaje pequeño, y luego agregarás tu texto alt ahí para lo que sea. Entonces, para un final para revisar tus encabezados, solo tienes que ir a la configuración en cualquier encabezado en el que hagas clic y asegúrate de que esté marcado como el correcto. Haz eso para todo el sitio. Y luego cuando estés listo para irte, Todo lo que tienes que hacer es lanzar. Por lo que se puede ver aquí que estos no han sido ligados adecuadamente. Entonces sólo voy a mandar a estos dos. Ahora. Voy a mandar estos al contacto. Y lo harás si todo el sitio y asegurarte de que no te has perdido nada. Y siempre es mejor solo hacer esto al final de cualquier proyecto luego Azure pasando por él porque estás doblada para ensuciar algo, porque te estás enfocando en tantas cosas diferentes a la vez. Por lo que tanto batallas al final. Y sí, solo te voy a mostrar para esta página, pero cuando hayas seguido adelante y hecho esto, estarás bien para ir por lo que diga tu esposa. Y esa es una de las últimas cosas que te recomiendo que escribas. Por lo que ha sido un placer impartir este curso. Y espero verte en el próximo. Entonces gracias. 25. Próximos pasos: Está bien, Así que muchas gracias por ver este curso. Espero que hayas ganado mucho de ello. El cofre como Webflow, como una plataforma increíblemente poderosa es lo que usamos internamente para todo el trabajo que hicimos para los clientes. Es decir, realmente es un cambio de juego cuando se trata de diseño web. Y si quieres seguir mejorando tus escalas de host web, contamos con cursos intermedios y avanzados sobre ambient Academy. Si visitas nuestros recursos del sitio web, podrás financiar vista Academia. Te recomiendo encarecidamente checar tiene asequible. Llegas a ser parte de un grupo con otras personas como miras en muchas de las mismas cosas. Y realmente es un cambio de juego para las personas que buscan desarrollar pero habilidades de marketing digital en general. Pero de todos modos, muchas gracias por volver a ver este curso. Y lo veré en el próximo.