Webflow para principiantes: diseña tu sitio de portafolio

1. Introducción: Oye, mi nombre Jeremy y soy Diseñador de Marca de Sydney, Australia y llevo más de ocho años diseñando sitios web. He usado todo desde Wix, Squarespace, e incluso WordPress pero ahora he aprovechado el poder de Webflow. Llevo alrededor de tres años diseñando en Webflow y quiero compartir con ustedes todos mis conocimientos que he aprendido sobre cómo construir sitios web para mí, pero también para clientes, y darles todo el herramientas prácticas y consejos que he aprendido para ayudarte a construir tu sitio web. Si quieres aprender a elaborar diseños increíbles sobre todo cuando se trata de tipografía, maquetación, e interfaz de usuario, voy a compartir algunos consejos de diseño de sitios web. Te voy a dar algunas webs donde encuentro mi inspiración personal. Te voy a mostrar el flujo de trabajo y los precios de usar los bloques de construcción, usar el modelo de caja, y crear un sitio web sencillo que sea funcional, que también tenga algunas interacciones también. Te voy a mostrar un poco de la animación, también voy a desglosar cómo puedes importar algún código ahí dentro. Te voy a mostrar todos los ajustes y todos los conceptos básicos sobre cómo usar Webflow, cómo funciona todo, y honestamente te daré mi experiencia personal sobre cómo usarlo. Para tu proyecto de clase, vas a estar creando y diseñando tu propio sitio web desde cero, ya sea diseñador, artista, o tal vez fotógrafo, y quieres construir tu portafolio, entonces esta clase probablemente será genial para ti porque puedes desafiarte a construir un sitio web desde cero y lo genial es que no necesitas conocer ningún código para Webflow, es un no-code Visual Builder. Si quieres aprender a ser un poderoso diseñador web o tal vez simplemente aprender a construir sitios web como hobby entonces definitivamente echa un vistazo a esta clase, es genial para principiantes, diseñadores gráficos, o personas que solo quieren aprender un nuevo pasatiempo. Inscribirse hoy y nos vemos en la clase y espero verte hacer increíbles webs. 2. Qué es el flujo web: ¿ Qué es Webflow? Webflow es un sitio web visual sin código construir. Ahora, he usado de todo desde Squarespace, Wix, WordPress, e incluso Shopify, y te puedo decir que de todas esas, Webflow es el mejor porque es fácil, es funcional, tiene tantas características, y es simplemente increíble en general. Es realmente genial porque en realidad puedes construir sitios web que funcionen plenamente, desde blogs hasta e-commerce, así que solo sitios simples normales, aunque sea para tu portafolio. Por eso me encantó la versatilidad de Webflow, y eso es lo que es. Todo se trata de crear y diseñar un sitio web de la manera que lo desees sin tener que conocer todo este código y todas estas otras jerga, realmente puedes hacer sitios web con bastante facilidad. Es simple, y todo es visual, hace que sea mucho más fácil construir todos los bloques juntos. Ahora bien, ¿cuáles son algunos de los beneficios o los pros de Webflow? Algunas de ellas lo son, es una solución todo en uno, es fácil para los clientes actualizarla realmente y editarla cuando finalmente entregues nuestro sitio web del cliente, no necesitas ningún plug-ins también, también es consiguió un montón de características como HTML embed, también puedes exportar código, lo cual es genial si eres desarrollador, y quiero profundizar más con el código. Todo está alojado en un solo lugar, así que no necesito ir a resolverlo y contratar a Bluehost o algún otro servicio de hosting, está todo integrado. También incluye una CDN, que es una red Cloud que permite que tu sitio sea mucho más rápido porque utiliza servidores de todo el mundo, y encima de eso, tiene la Academia X, que está llena de tutoriales sobre mostrarte cómo aprender Webflow y la gran comunidad también, montones de apoyo en los foros, y la gente solo está dispuesta a ayudar, y a darte consejos. Esos son los beneficios y los pros de la misma. A los contras, sólo puedo pensar en tres. El principal es el costo que, porque vas a pagar la cuenta y el hosting, puede ser un poco caro, pero solo tienes que pagar después de usar dos o más sitios, por lo que es gratis bajo eso, así que es un trato bastante decente. Entonces, por último, está la curva de aprendizaje. Es mucho más alto porque hay que entender cómo funcionan las cosas. Tienes que entender un poco de HTML y CSS, pero realmente no necesitas ninguna experiencia de codificación. Sólo tienes que entender las herramientas, y vas a aprender que no es tan fácil como arrastrar y soltar. lo vas a resolver. 3. Modelo de caja: [ MÚSICA] Ahora quiero mencionar el modelo de caja. Esto se basa en CSS. Se trata de los bloques de construcción y las funciones principales sobre cómo funciona un sitio web cuando lo estás construyendo. Hay cuatro bloques de construcción clave. El número 1 es el contenido. El número 2 es el relleno. El número 3 es el margen, y el número 4 es el borde. Estos son los cuatro bloques constructores que sí necesitamos entender antes empezar a intercambiar el dimensionamiento y el diseño y todas esas cosas. Voy a mostrar una imagen aquí muy rápido. Aquí se puede ver que todo se trata de tener cajas. No sé si sabes de una muñeca rusa, cómo la abres y tiene una pequeña y una pequeña y sigues abriéndola. Tiene todas estas cuadras en su interior. Piensa en contenedores dentro de contenedores o cajas dentro de cajas. De eso se trata todo. Cuando tienes un bloque que estás usando para arrojar imágenes o texto dentro de él, comienzas con el contenido principal. Entonces tienes el relleno en el exterior. Después tienes el borde que es el contorno o el exterior del relleno. Entonces tienes el margen que es el borde mismo y fuera de la caja. En ocasiones si quieres ajustar el espaciado entre dos objetos, todo lo que tienes que hacer es ajustar el relleno. A lo mejor quieres agregar un contorno a tu caja. Entonces ajustarías el borde y agregarías un trazo a eso. Eso es básicamente lo que es el modelo de caja CSS. Tratando de mantenerlo muy simple, pero es bueno tener el entendimiento así que cuando estás construyendo los bloques, recuerdas, vale, estas son todas partes y bloques de construcción juntos. 4. Inspiración y herramientas: [ MÚSICA] Te voy a mostrar algunos sitios web increíbles donde encuentro inspiración y algunas herramientas que realmente puedes usar para tus sitios web. El número 1 será Dribble, siempre voy aquí por inspiración de diseño de interfaz de usuario así que si escribo diseño de interfaz de usuario, puedes ver que obtienes un montón de diseños y sitios web, y todo es visualmente hermoso. Sólo recuerda una cosa que no todos estos sitios web son funcionales, o están diseñados y realmente construidos en un Webflow o en un sitio web, pueden verse hermosos pero no siempre es práctico, hacer seguro que lo piensas, pero tiene unos diseños increíbles aquí y creo que es un sitio web realmente genial. A continuación tenemos a Behance, otro gran sitio sobre todo si eres diseñador. Tienen sitios web increíbles, tienen branding, todo el shebang aquí. Puedes desplazarte por aquí y mirar todos estos sitios web interesantes aquí enteramente tiene mucho contenido aquí. Siguiente arriba es en realidad el escaparate de Webflow. Si vas al sitio web de Webflow y haces clic en “Showcase” en la esquina superior, puedes ver que te va a mostrar todos estos sitios web que se construyen con Webflow. Puedo ver un montón de nuevos aquí, se ven realmente cool y lo genial de Webflow es que en realidad puedes clonar algunos de estos sitios web, te mostraré cómo hacerlo en otro módulo pero tienen tantos diseños geniales como aunque haga clic en este. Esto se ve hermoso, mira estos consiguieron algunas interacciones en él y sí creo que eso es impresionante. Puedo dar click en “Abrir” en Webflow, si quiero ver rápidamente cómo se construye y se puede ver aquí, puedo ver todos los elementos y es simplemente increíble cómo podemos hacer esto. Puedo ver todas las cajas negras realmente cool. Ese es el escaparate de Webflow. A continuación se presentan algunas plantillas, se llama flowbase.com. Ahora si vas a este sitio web en realidad puedes descargar algunas plantillas gratuitas pero también tienen plantillas comprables. A lo mejor estás construyendo un sitio de membresía o necesitas un tipo específico de diseño o diseño o componente, en realidad puedes obtenerlo de estos sitios, por ejemplo, puedes ver que en realidad solo tienen plantillas de sitio web normales, pero también tienen solo componentes básicos que puedes obtener. Este 150 dólares puedes conseguir un temporal para la construcción así que tal vez sea para un cliente puedes ahorrar tiempo y simplemente descargar una plantilla y luego diseñarla de la manera que quieras con los colores y la marca etc, y las fuentes. Este es un sitio web realmente genial, me encanta ir a plantillas. Si voy a plantillas y hago clic en “ Plantillas gratuitas ” en el menú de ahí, estas son todas descargables y literalmente solo lo copiarás y pegarás en un proyecto de sitio web. Hace que sea súper fácil y te ahorrará un montón de tiempo. Siguiente arriba es Awwwards con tres W's, no me pregunten por qué hicieron eso. Pero suelen hacer concursos donde múltiples diseñadores cada año presentarán su sitio web y se clasifican por solo inspiración básica, en realidad realmente bueno también. Son más creativos, están más fuera de la caja en lugar de sitio web estándar basado en clientes a veces es solo más para abstraer y ganar. Podrás echar un vistazo a estos. Tienen un menú aquí para que puedas echar un vistazo a las colecciones o a los ganadores, por ejemplo, en las colecciones tienen e-commerce, tienen hovers y cursores, todo un montón de cosas. A lo mejor quiero mirar galerías de imágenes y presentaciones de diapositivas, voy a hacer clic en eso, y va a aparecer y mostrarme todo un montón de ejemplos de una galería, por ejemplo, voy a dar click en esta y esta luce bonita cool. Podría inspirarme para hacerlo, ni idea de eso ni algo así . Creo que es impresionante. Siguiente arriba es, land-book.com. Este es un sitio increíble, llevo un tiempo en esto. Si solo me desplazo hacia arriba puedes ver que básicamente es inspiración web. Tienes carteras de aterrizajes, así que arriba a la izquierda puedes ver tal vez quiero filtrar por carteras y ver algunos ejemplos de eso, y mira todos estos increíbles lugares de interés por inspiración, súper increíbles. A lo mejor sólo quería dar click en una de ellas y por ejemplo, vamos a dar click de ésta aquí. Se puede ver por el lado derecho en realidad me va a mostrar el sitio web para que pueda dar click en eso e ir a revisarlo. Puedo desplazarse y ver ese diseño principal aquí, realmente me gustó el esquema de color aquí solo negro simple y el color grisáceo. Consiguió alguna interacción que es bastante droga. Este es un gran sitio para obtener inspiración y echarle un vistazo. Ahora, mobbin.design es otro, Mobbin o Mobbin, no lo sé. Básicamente, obtienen toda una biblioteca llena de diferentes startups tecnológicas y negocios reales reales y miran la pantalla por lo que principalmente es para diseños de interfaz de usuario móvil. Puedes ver que tienes un montón entero por ejemplo, Klarna es una aplicación de pago como Zip Pay. Podrás ver todas las pantallas, incluso puedes descargarla, lo cual es una locura y copiar diseño o inspirarte, para que puedas ver todas las pantallas de la app real sí y esto te ahorrará un tono de tiempo, especialmente si estás construyendo un sitio web que necesita ser móvil sensible este sería el sitio a revisar. Si eres alguien que ama las ilustraciones, puedes echar un vistazo a un montón de sitios uno se llama blush.design puedes echar un vistazo a eso. Ahora puedes combinar diferentes imágenes y hacer algunas ilustraciones tú mismo. También tienen diferentes colecciones, si voy a la colección Beep Beep, puedes ver puedes descargar todos estos activos, lo cual es realmente genial. tienen algunos de forma gratuita, pero también tienen diferentes planes también, puedes comprobarlo. Tienen el plan gratuito y tienen $12 uno, es un sitio cool para algunas ilustraciones hay un montón de otros sitios como Envato Elements los cuales uso pero solo te estoy mostrando unos cuantos específicamente para ilustraciones. También tienes ilustraciones negras, tal vez quieras algunas imágenes al estilo de África, estas son realmente geniales. Como puedes ver, algunos de los packs se pagan, creo que la mayoría de ellos sí pero hay los pocos packs gratis pero este es realmente bonito sitio si quieres agregar algunas ilustraciones diferentes aquí también. A lo mejor quiero unos negocios como tú puedes checar, tienen como este pack cool y eso sería realmente genial. Ahora bien, si quieres algunos iconos 3D, 3dicons.co, este es un pack gratuito diseñado por uno de mis compañeros, su nombre es Vijay. Podrás descargarlos todos como PNG o incluso Figma. Si estás diseñando Figma, en realidad puedes conseguir todos esos archivos y puedes ver un montón de iconos aquí, lo cual creo que es realmente genial, realmente [inaudible] Si te gusta ese estilo 3D, definitivamente pensar en conseguir algunos de estos creo que es realmente impresionante. Ahora, si quieres más iconos 3D, ilustraciones, todo un montón de cosas, puedes consultar iconscout.com. Tienen algunos planes de precios. Es bastante asequible, ¿es único qué? 12-13 dólares, obtienes todo el acceso y puedes conseguir un montón de imágenes. A lo mejor quiero incluso animaciones para web player, puedo ir a la animación Lottie y se puede ver hay un montón completamente diferente de ellas que puedo usar para un sitio web como puedes ver, super droga así que esa es otra gran sitio lo recomiendo. Si específicamente quieres solo iconos, flaticon.com es realmente genial, tienen planes realmente baratos, también tienen un plan gratuito también, todo un montón de iconos diferentes, así todo un montón de iconos diferentes, que definitivamente echa un vistazo Flaticon. Es bastante sencillo, tienen solo paquetes diferentes y cosas así. El siguiente sería thenounproject.com también. Tienen más de tres millones de iconos, tecleemos en una pirámide o algo así , ya veremos qué aparece. Podrás ver que todos estos iconos aparecen un montón de estilos diferentes algunos son trazos finos, algunos son gruesos, pero literalmente puedes descargarlos y usarlos para tus proyectos. Se puede decir obtener este ícono y obviamente se necesita una cuenta gratuita para obtener esos iconos. ¿ Dónde puedes conseguir algunas fuentes de Google? Simplemente ve a fonts.google.com y en realidad puedes descargar todo un montón de estas fuentes, son gratuitas para uso comercial. Utilizo elementos Envato para obtener mis fuentes y uso otros sitios web también. Por último, acabamos de tener un grupo de Facebook. Esta clave se llama Webflow designers global. Es básicamente un grupo donde un montón de diseñadores de flujos de trabajo de todo el mundo se ayudan mutuamente decir, si quieres hacer preguntas o necesitas ayuda con algo, este es un gran grupo ser y la gente publica inspiración y todo un montón de cosas diferentes. Entonces es un grupo gratuito, 20K miembros, solo únete a él. No tengo ninguna afiliación con ella, así que echa un vistazo. Tenemos apenas unos cuantos canales de YouTube que me encantan, se centran específicamente en Webflow. uno se le llama Timothy Ricks. Tiene tutoriales increíbles, realmente increíbles, realmente increíbles, y acabas de ver que hay diseño y esas cosas. Eso es realmente genial para Webflow y luego otro tipo también, Caler Edwards, tiene algunos diseños geniales específicamente en Webflow también, echa un vistazo a esos canales y ojalá todos estos recursos y herramientas te ayudan. Sé que puede parecer mucho, pero realmente te ayudarán a conseguir esa cabeza en el diseño de tu sitio web. 5. Principios de diseño del sitio web: Quiero darte cinco consejos de diseño de sitios web que realmente me han ayudado y creo que necesitas implementar cuando estás diseñando tu sitio web. Número uno son imágenes de héroe. Cuando se trata de imágenes de héroes, necesitan ser audaces, impresionantes y hermosas porque necesitas captar la atención de alguien. Cuando alguien salta a ese sitio web, literalmente tienes cinco segundos para impresionarlos y es por eso que ves todas estas startups tecnológicas y estas grandes empresas, tienen maquetas de aspecto increíble y diseños en la primera página, en la imagen misma de héroe, que es la imagen principal de héroe en la parte superior de la página principal. De eso se trata todo; agarrar la atención, ser visual, ser audaz, ser creativo, pero hacer que destaque y ser funcional también. Cuando pienses en imágenes de héroes, piensa en usar ilustraciones, imágenes audaces, piensa en el color, piensa en cómo puedes hacerlo interesante. Mi segundo consejo es la sencillez. Cuando se trata de diseñar un sitio web, ¿es sencillo? ¿ Es fácil de entender? Este es un botón, este es el encabezado, esta es una imagen. ¿ Es fácil escanear a través del sitio web y entender cómo funciona? Porque necesitamos dejar claro nuestro mensaje central. ¿ Es nuestro mensaje central y nuestro marketing y nuestros títulos todos tienen sentido? ¿ Es fácil de leer? Estas son las cosas que forman parte de la simplicidad que quiero asegurarme de que implemente en mi sitio web. Asegúrate de que sea simple, asegúrate de que esté claro y asegúrate de que también sea funcional que alguien pueda usarlo realmente sin frustrarte. El tercer consejo es el CTA, que significa llamado a la acción. ¿ Tienes un simple y audaz llamado a la acción? Piensa en un botón. ¿ Tiene un alto contraste? ¿ Tiene color? ¿ Es más fácil hacer click en? ¿ Tiene un estado flotante encima? Porque necesitas asegurarte de que un botón sea consistente en todo el sitio web para que alguien sepa, si pongo mi ratón aquí, va a ser un botón que lleve a un enlace o a una página o algo así. Siempre deja claro el llamado a la acción en el botón. En ocasiones puedes tener como programado llamar o reservar ahora o contactar ahora o cotizar hoy mismo. Sea lo que sea, piensa en un titular audaz y claro cuando se trata un llamado a la acción porque quieres que alguien actúe, que tome acción, que dé los siguientes pasos. Ya sea reservarte para un correo electrónico o una llamada, si eres cliente, o lo que sea. Asegúrate de que tu llamado a las acciones realmente destaque. Siempre uso el color y típicamente eso es lo que hice para que destaque. Yo uso un color de alto contraste que es lo opuesto al fondo realmente, y así es como suelo hacer mi llamado a las acciones. consejo número 4 es estructura; la forma en que estructuras tu sitio importa. Como mencioné antes, tenemos la imagen de héroe en la parte superior de la página. Entonces tienes que pensar, vale, ¿qué viene después? Mucho del tiempo, la prueba social es realmente buena, mostrando logotipos de clientes pasados o marcas con las que has trabajado, eso impulsa la reputación y la confianza. Se puede pensar, necesito poner trabajo o proyectos o servicios. Necesito agregar testimonios o reseñas si es un lado de producto, necesito tener un pie de página en la parte inferior. A lo mejor necesito tener un blog en algún lugar ahí o tengo un email marketing embed que necesito en la parte superior que pueda conseguir más opt-ins por eso. Piensa en la estructura del sitio y la disposición. Es muy importante que construyas antemano y lo diseñes para que cuando vayas a crear el sitio web, tengas una estructura clara que sea fácil de navegar. Planifique su sitio, piense lógicamente y piense en la jerarquía. ¿ Cuál es la información más importante que un cliente o un cliente necesita ver? Ponga eso en la parte superior. Las cosas en la parte inferior deben ser las menos importantes pero mantener todo lo demás claro. Mi último consejo es la navegación. Cuando se trata de navegación, la experiencia del usuario lo es todo. Todo necesita ser fácil de seguir, y todo tiene que tener sentido. ¿ Tienen sentido los nombres de las páginas? ¿ Tienen sentido los botones? Porque si es mala navegación, alguien se va a frustrar y saltar del sitio. Piensa en cómo interactúan los botones, piensa si alguien está en un teléfono móvil, ¿reacciona muy rápido el menú de hamburguesas a medida que hacen clic? ¿ O está demasiado lejos a la derecha o lo que sea? Piensa en la navegación, cómo todo fluye juntos. Piensa en, ¿cuál es la siguiente página de la primera página? ¿ Qué botón va a qué página? Piensa en los pasos lógicos que alguien quiere dar o los pasos que quieres que dé guiándolos a través del diseño del sitio web. Esos son mis cinco consejos cuando se trata de diseño de sitios web. Hay mucho más, pero ojalá, esos te den algo de inspiración. 6. Conceptos básicos de la interfaz de flujo web: Ahora vamos a llegar a la parte divertida. Vamos a construir este diseño en Webflow. En Adobe XD, acabo de ir y construir dos páginas aquí como pueden ver. Se trata de un 1920 píxeles por 1080, y se puede ver acaba de hacer un realmente simple, agregó un poco de trabajo ahí, algunos servicios, sección testimonial, botón clave con un titular. Entonces tenemos una página para una pieza de cartera o una obra de arte. A lo mejor eres fotógrafo, lo mejor eres diseñador de logotipos, lo que seas, puede funcionar para ti. Como parte de la acumulación de tu proyecto de clase, vas a necesitar construir tu sitio web, y puedes seguir adelante o puedes intentar hacer lo tuyo. Aquí se puede ver que he ido adelante y exportado algunos de los activos ya. Si voy a mis activos aquí, tengo la estrella, la flecha, y luego sólo las otras formas también. Puedo importar eso a Webflow. Voy a ir a Webflow. Voy a ir a la esquina superior derecha y hacer clic en “Nuevo proyecto”, y esto está en tu tablero, para que puedas iniciar un nuevo proyecto. Voy a seleccionar la primera donde dice Blank, como se puede ver ahí. Voy a dar clic en “Seleccionar”, luego voy a decir Proyecto de Clase Skillshare , haga clic en “Crear sitio”. Puedes ponerle el nombre que quieras, probablemente pongas tu nombre de pila. Ahora estamos en Webflow. Antes de empezar a diseñar, quiero pasar por los conceptos básicos de la interfaz Webflow. En la parte superior verás esta barra, y estos se llaman los puntos de ruptura. Ahora mismo puedes ver que tengo este punto de ruptura automático, que es el punto de ruptura del escritorio. Si muevo mi ratón sobre él, puedes ver Punto de ruptura Base, que es el escritorio, y siempre debes empezar a diseñar en escritorio. Esa razón es, es porque cuando diseñas desde escritorio, cada cambio que haces siguiendo en la vista del iPad y luego en el móvil, los diseños caen en cascada hacia abajo, por lo que es como una cascada. Si realizas cambios en el escritorio, debería afectar a los demás. Pero si diseñas desde el móvil, los cambios que realices no afectarán a la versión de escritorio. Sólo ten eso en cuenta. Lo que realmente puedo hacer es hacer click aquí. Puedo cambiar el ancho a 1080. También tienes algunas otras opciones aquí, pero voy a presionar “Enter”. Ahora puedes ver que ha cambiado, y este es nuestro punto de ruptura. Puedo hacer clic en el otro punto de ruptura para ir a la vista de tableta, que es vista de iPad. Tienes paisaje móvil, rara vez diseño para esto porque la gente no ve videos como ese, a menos que estén en un tren o algo así. Entonces tienes el punto de ruptura móvil también. El genial es que en realidad puedes arrastrar esta pestaña. Si sabes que estás diseñando para un teléfono o móvil específico, puedes arrastrarlo, y si pones atención al fondo como estoy arrastrando, está apareciendo en los diferentes tamaños de teléfono, por lo que 360 pixels es un Galaxy S8, S9, etc. Se puede ver que el iPhone 12 es un poco más ancho. Voy a dar clic atrás a los puntos de ruptura. Se puede ver en los puntos de rotura, debe guardar los píxeles. Ya puedes ver si vuelvo atrás, no es guardar el 1080 al que lo puse y eso es porque necesitamos hacer un nuevo punto de ruptura. A la izquierda ves estos tres puntos, puedo hacer click en eso, y puedes ver puedo añadir un punto de ruptura específico. A lo mejor quiero el de 1920, voy a hacer clic en eso y hacer clic en “Crear”. Ahora se puede ver que tiene este punto de ruptura, 60 por ciento ahí, y este punto de ruptura está al 100 por ciento ahí, lo cual es genial. Básicamente, así es como usas los puntos de ruptura, muy simples, muy fáciles. Ahora vamos a ir al navegante. En el lado izquierdo tenemos a nuestro navegante. Puedes presionar “Z” para apagar y encender eso , y eso lo saca. Aquí es donde tenemos todos nuestros elementos y nuestra capa. Piénsalo como capas de Photoshop, ahí es donde están todas nuestras cajas, todas nuestras capas, y todas las cosas que estamos usando para apilar todo. Tus secciones, tus cajas, tu Nav, etc. arriba a la izquierda, al botón más, puedes agregar elementos. También puedes agregar diseños. Si hago clic en “Layouts” puedo arrastrar un layout prehecho, tal vez quiero una barra Nav, Sticky Nav, puedo arrastrar eso y se va a añadir esa barra Nav ahí en la parte superior, súper fácil. En mi navegador, verás que va a aparecer, ahora tengo el Sticky Nav ahí, tengo un Contenedor. Dentro de eso, tengo la Cuadrícula de Nav, y la Lista de Ítems, etc. Tienes un montón de opciones aquí, jugar con ellos, divertirte con ella, experimentar. Tenemos secciones, contenedores, y rejillas que definitivamente usaremos. El Bloque Div es el bloque básico que construimos, y siempre usaremos eso. Tienes tipografía, encabezados, párrafos, citas, etc. Tienes los ítems CMS. Se pueden agregar videos de YouTube, animaciones de Lottie, formularios, componentes. Si quieres agregar código HTML, puedes agregar e incrustar, así puedo soltar un código de inserción ahí, soltar el código y luego debería agregar el código ahí, obviamente no lo tenemos en este momento. El siguiente son símbolos. Un símbolo es básicamente como en Photoshop o en Illustrator, cuando guardas un símbolo, es básicamente cuando creas un botón, puedes guardarlo como un objeto o un símbolo, y creará un para que pueda reutilizarlo todo a través del sitio, y tendrá la misma funcionalidad. Súper útil, ahorra tiempo. El tercero es tu navegante ahí. Después tenemos a Pages en la cuarta pestaña. Tenemos páginas de Utilidad, tienes E-Commerce y CMS, estas solo aparecen si están activadas, obviamente. Con Pages, puedes ver puedo hacer clic en el zuecos, puedo renombrar el nombre de la página, puedo establecer otras páginas como la página principal. También tienes tu configuración de SEO aquí, que podemos discutir un poco más adelante. Si quieres agregar una página, puedes ir a la parte superior izquierda y hacer clic en “Agregar página”. Voy a ir a añadir las páginas que quiero. Haré mi página Acerca de, iré a Página de contacto, luego regresaremos e iremos a Trabajo, o puedes hacer portafolio, lo que quieras. Tienes estas páginas, así que puedo arrastrar estas, y puedes ver el rehuffling, súper fácil de hacer. El quinto tabulador que puedes ver es CMS Collections, no vamos a estar usando eso. También tienes la sección de tarjetas, necesitas pagar el e-commerce, así que no vamos a usar eso. Entonces tienes a tu gestor de activos, aquí es donde caemos en nuestros activos. Voy a volver a mis activos aquí, arrastrar y soltar esos archivos. Antes de subir archivos, lo que quieres hacer es ir a TinyPNG y comprimir los archivos, porque quieres que el sitio se cargue más rápido. Cuanto más grandes sean los archivos, entonces necesitan ser comprimidos, por lo que TinyPNG comprime las imágenes. Por ejemplo, este archivo es demasiado grande, puedo arrastrarlo aquí, va a comprimir el PNG y en realidad lo puedes ver reducido en un 60 por ciento, puedo descargar eso. Ese es otro consejo rápido que necesitabas recordar también. Esperemos que los activos debieran haber subido ahí. Por lo general, eres capaz de arrastrar el botón, pero en este caso solo voy a hacer clic en el “Subir” ahí. Voy a ir a localizar los activos y hacer clic en “Abrir”. Ahora los está subiendo para que puedas presionar ese botón para subir archivos. También puedes agregar carpetas. Se puede ver que tengo todas las imágenes ahí, realmente cool. Entonces tenemos este pequeño piñón aquí para guardar tus copias de seguridad, súper fácil. Después abajo, tienes otras cositas como tutoriales en video. Si te quedas atascado, siempre puedes hacer clic en eso y literalmente ver un tutorial en ese momento y allí. Si no enseño algo, siempre puedes volver atrás y aprender eso. Ese es todo el panel lateral izquierdo. En el lado derecho tenemos nuestro panel de estilo. Cuando tenemos un objeto, en realidad podemos darle estilo a las cosas. En la esquina superior derecha, tenemos clases. Una clase es como un estilo en Illustrator, Photoshop , InDesign, cuando creas un estilo gráfico, es así, así es como intento y pienso en ello. Pero una clase básicamente establece un estilo específico para un objeto específico. Si es para un contenedor, o un encabezado específico, etc. También tenemos disposición, así que tienes tu estática, tu Flexbox, tu cuadrícula, etc. aquí. Tienes Spacing, por lo que podemos ajustar nuestros márgenes, y también podemos ajustar el relleno , por el cual pasaremos. Tienes dimensionamiento, así que cualquier cosa, el ancho, la altura. Tienes el desbordamiento, así que si la imagen está fuera de los límites de una caja div o un contenedor, entonces puedes ajustar eso. También tienes posición, que vamos a pasar por eso. También tienes tipografía, así que tenemos todas las fuentes aquí, súper útiles. Tienes peso, tamaño, color, alinear, estilo, herramientas muy similares si eres diseñador y has usado cosas así antes. Tienes fondos también, así que podemos agregar imágenes, podemos agregar fondos, degradados, podemos agregar recorte, como una máscara de recorte, lo cual también es interesante. También tenemos frontera, por lo que podemos agregar un borde a un objeto. Podemos añadir un guión también. Entonces tienes efectos en el fondo aquí. Tenemos opacidad, sombras, transiciones, filtros, etc. En la esquina superior derecha, tienes ajustes. A veces cuando tenemos un menú, por ejemplo, si voy a hacer un Nav, sólo voy a poner un Nav aquí. Se puede ver la configuración, dice cabecera, y luego tenemos ID, y se obtienen algunas cosas ahí. Si hago clic en el botón, puedes ver que tiene la configuración del enlace. Puedo elegir esto para ir a una página por ejemplo, elegir una página, puedes ir a una página web o lo que sea. Lo siguiente es el gerente de estilo. Aquí es donde están todos tus estilos. Si creas clases o estilos que no estás usando, básicamente, te dirá, y haces clic en “Limpiar”, y eliminará todos los no utilizados. A veces podrías tener un elemento y luego tal vez lo peines, pero luego decidiste hacer un nuevo botón en una página diferente, y si no quieres, ya no lo necesitas, eliminas el estilo. Entonces la última opción es el menú Interacciones con un poco de rayo, que es un icono genial, y aquí está la forma en que puedes agregar desencadenantes y animaciones, etc. Básicamente, este es el básico interfaz de Webflow. Entonces nos vamos a quedar atrapados, vamos a empezar a diseñar. Una última cosa es en la parte superior izquierda, puedes hacer clic en el botón Webflow y hacer clic en “Dashboard” o en la “Configuración del proyecto”. Te llevará de vuelta. Puedes ver si necesitas subir fuentes, solo tienes que ir directamente a las fuentes. Si quieres volver, haces clic en el botón “Diseñador” con un pequeño pincel de pintura, y te llevará de vuelta al diseñador de Webflow. 7. Ajustes de cuenta: [ MUSIC] Te voy a mostrar cómo usar la configuración básica de la cuenta en Webflow. Una vez que estás en el tablero, puedes ver que tengo un montón de sitios web aquí, estos son mis sitios web actuales y cosas que también he archivado. Ahora para acceder a la configuración de la cuenta, lo que tienes que hacer es ir a la esquina superior derecha, click, “Cuenta. Haga clic, “Configuración de la cuenta”. Ahora una vez que estés aquí, vas a subir todas estas pestañas por la esquina superior izquierda, para que puedas ver todas estas pestañas. Voy a ir rápidamente a través de ellos y mostrarte de qué se trata. En primer lugar tienes perfil. No necesitas preocuparte por esta pestaña, básicamente es solo la información básica de tu cuenta. Eso básicamente no es necesario. También puedes subir una imagen. Te recomiendo subir una pequeña foto para que veas si tu cuenta sí ayuda para visuales. Haga clic en, “Planes”. Voy a explicar los planes de cuenta. Hay una diferencia entre los planes de cuenta y los planes de alojamiento. Hosting es donde realmente hospedas un sitio web específico con todas las características de hosting y luego la cuenta es una cuenta real para crear sitios web con Webflow. Te recomiendo comenzar con la cuenta gratuita porque es gratis. Obtienes dos sitios web. También puedes hacer facturación de clientes y puesta en escena gratuita. Ahora la puesta en escena gratuita es cuando eres capaz de previsualizar sitio web en vivo, no en tu propio dominio aunque será webflow.io. Actualmente estoy en el plan Lite. Eso es lo que recomiendo, a menos que seas un diseñador web de tiempo completo loco y quieras hacer él es de proyectos de clientes, luego ve al plan Pro. Creo que el planeta plan Lite es suficiente. Se puede tener hasta 10 sitios web. Ellos les llaman proyectos. Se puede ver aquí dice 10 proyectos. También tenemos facturación de clientes, escena mejorada y también exportación de código. No uso la exportación de código porque no necesariamente me desarrollo fuera de Webflow. Estos son los planes de cuenta. Puedes filtrar por anual en la esquina derecha o hacer clic, “Mensual” y puedes ver el precio cambiaría a $24 al mes. Puedes dar click en la siguiente pestaña de la parte superior donde hay facturación, tienes tu número tienes tu tarjeta, y siempre puedes cambiar o mover tu tarjeta de crédito como puedes ver ahí. También puedes ver el monto de suscripción que estoy pagando por año y luego obviamente todo el plan del sitio que tengo hosting básico. puedes ver tengo dos sitios con hosting básico, $15 al mes. Las facturas y tienes algún cambio en facturas pasadas ahí también. A continuación se presentan las integraciones. Las integraciones son si quieres poner una clave API. A lo mejor tienes una plantilla de terceros que necesitas. Estoy bastante seguro de que en realidad puedes usar Zapier con Webflow y algunas otras herramientas que permiten conexiones no están teniendo integraciones actualmente, así que no me molesté con eso. A continuación se encuentran las herramientas de facturación. Esto es cuando se quiere facturar a su cliente a través de Webflow. A lo mejor quieres tener un plan de mantenimiento donde actualices mensualmente el sitio web. Aquí es donde la facturación del cliente es realmente genial. Puedes configurarlo, empiezas aquí y puedes configurar cómo funcionará esa facturación. Lo más probable es que funcione a través de Stripe o PayPal. El siguiente es Plantilla de Compra. Si haces Plantilla de Compra a través de Webflow, se te mostrará por aquí. También tienen un ThemeForest aquí también. Si hago clic con el botón derecho en Examinar plantillas, puedes ver que sí tienen un montón de plantillas que son como montón entero de cosas y puedes ver que siempre se están actualizando con plantillas frescas. Aquí hay alguien que no quiere facturar desde cero, quiere ahorrar tiempo después invertir en una plantilla. Aparecerá en este segundo aquí en la sección Plantilla de Compra. El siguiente es la configuración del correo electrónico. Si sí pones un stand en el formulario Webflow en tu página web, este es el correo electrónico al que el formal envía los correos electrónicos. Necesitas asegurarte de que este es el correo electrónico principal que estás usando. Después podrás seleccionar las notificaciones por correo electrónico. Eso es bastante sencillo. elegir lo que quieras rellenar el boletín, etc. Esa es la configuración de correo electrónico. También tienes seguridad. Aquí puedes habilitar la autenticación de dos factores para obtener más seguridad y puedes cambiar tu contraseña y básicamente eso es todo. Te mostrará los detalles de inicio de sesión, la actividad si hay una actividad sospechosa pero no lo hago nadie estaría hackeando tu cuenta de Webflow en cualquier momento. Una última cosa, si voy a la esquina superior derecha, se puede ver que dice ir al perfil público. En Webflow, lo que sucede es que en realidad tienes un perfil público donde puedes compartir tus sitios web reales. Esto se puede compartir con la comunidad. puedes ver tengo 90 visitas sobre esto lo cual es bastante cool y alguien puede ver mi sitio y echar un vistazo a todo eso. También puedes editar. También puedes apagarlo también si no quieres que se vea. Así es básicamente como usas la configuración de la cuenta en Webflow. 8. Ajustes del sitio y cambio de fuentes: Te voy a mostrar rápidamente la configuración del proyecto cuando quieras ver el back-end de uno de tus sitios web. Voy a utilizar mi ejemplo de mi sitio web actual, jeremymura.com. Una vez que selecciones un sitio web, puedes hacer click izquierdo sobre él y dirá Open Designer, eso tomará en la parte de diseño donde podrás empezar a construir un sitio web. Pero en lugar de hacer clic en eso, voy a hacer clic en los tres puntos aquí entonces y hacer clic en Configuración. Puedes ver que tienes otras configuraciones como duplicar el sitio web, puedes moverte a una carpeta, puedes compartir el enlace y también puedes ir al editor, que es el lado cliente de la edición. Ahora, voy a dar clic en Configuración y en realidad te voy a mostrar esta sección porque en realidad es importante en cuanto a la construcción de los sitios web. En la configuración general, puedes ver que tienes tu nombre de tu sitio web y luego tienes el subdominio. Cuando estoy escenificando el sitio web y para previsualizarlo, va a usar este dominio ahí. Ahora, en cuanto al Favicon, quiere poner atención a este Favicon, dice que el tamaño de subida es de 32 por 32 píxeles. Cuando hagas un icono en Illustrator o Photoshop, asegúrate de que sí guardas para web y lo guardas como PNG o JPEG en ese tamaño y asegúrate de que todo esté bien. Básicamente puedes hacer clic en Subir y luego soltar la imagen ahí dentro. Entonces tienes un bonito ícono en la parte superior de tu navegador, cuando en la pestaña, eso es un Favicon. Ahora el clip web, esto es sólo para iPhones. Básicamente, no necesito eso pero pongo mi logo ahí de todos modos. Lo mismo, solo guardas para web y lo guardas como PNG o JPEG para subirlo. Tienes localizaciones en las zonas horarias y también puedes poner contraseñas de un sitio web para que puedas hacer clic en eso y poner una contraseña. En caso de que quieras que nadie acceda a ella por accidente o un hacker o algo así, puedes encenderla. Normalmente no lo uso porque mis otras herramientas que protegen mi navegador. Ahora escaparate, como ya he mencionado en el módulo anterior, lo que puedes decir es si quieres que tu sitio web se exhiba en público y la gente puede verlo en el escaparate de Webflow, en la página de destino, entonces puedes encender eso, pero siempre puedes apagarlo así que solo obtienes tu perfil público. También tienes la opción de dejar el branding Webflow encendido. Si quieres que te guste una pequeña insignia en la parte inferior de tu página web, puedes marcar eso. puede ver, obviamente, lo he apagado porque simplemente no lo quiero, pero dejo flujo de trabajo en el HTML, así que si alguien quiere revisar el sitio web. Entonces si presionas F12 en un sitio web, puedes ver que Webflow aparecerá en algún lugar de aquí. Podría ir a buscar, podría escribir Webflow y aparecerá aquí en el código HTML. Voy a simplemente dar clic a guardar ahí, y luego simplemente siempre tiene actividad lateral en la parte inferior. Enfriar. Lo siguiente es hospedar, así que si quieres hospedar un sitio web, entonces debes seleccionar el plan correcto. Ahora para mis sitios web básicos, si estoy construyendo solo un portafolio para mí o es un pequeño negocio que no necesita locuras, entonces solo seleccionas el Básico. Te daré todas las opciones aquí. Eso se puede leer en su propio tiempo. Tienes el dominio SSL incluido así que estaba protegido, tienes un CDN, ancho de banda, 100 páginas es bastante, y tienes 100 envíos de formularios, lo cual es genial. Ahora bien, si sí quieres CMS, CMS es un Sistema de Gestión de Contenidos. Si puedes tener un sitio que tenga un blog grande o tenga múltiples proyectos o páginas de planificación dentro de él, entonces probablemente CMS sea el mejor para ir. Ahí se puede ver el precio. Ahora bien, si quieres hacer como un negocio más grande, entonces seleccionaría negocio. Si quieres hacer tienda de E-commerce, solo tienes que hacer clic en E-commerce y los precios subirán significativamente, por lo que eso se duplicará, pero sí obtienes características como las integraciones de Stripe y PayPal. Tienes clientes que checkouts, CMS, impuestos, envíos, etc. Tenía un cliente que sí usó el estándar para esto y funcionó muy bien. Entonces obviamente si seleccionas anual, el precio bajará. Eso es por hosting. Entonces, cuando estés listo para albergar tu sitio web, todo lo que tienes que hacer es solo seleccionar Básico y luego pagar y ya estás listo para ir. Solo tienes que hospedar cuando quieras, porque la cuenta te da dos sitios web gratuitos, puedes diseñar todo lo que quieras, lo cual es bastante genial. Ahora, el editor es el ajuste del editor. Por lo que cuando quieras agregar un colaborador, puedes invitar a alguien. Aquí, puedes ver que mi correo electrónico, puedo editar y publicar. Para hacer más colaboradores, necesitas agregar un plan CMS o sitio de negocio, por lo que debes subir aquí. Además, para obtener etiquetado blanco, necesitas actualizar también, y esto te dará acceso a esto. Esto es genial si quieres tener compañeros de trabajo de diseño gestionado o múltiples clientes o personas en el equipo del cliente gestiona su sitio, por lo que esta es una buena característica. También tienes facturación aquí. Una vez más, puedo ver la facturación exacta de este sitio específico y luego la facturación de clientes, similar a las otras configuraciones que te mostré en el otro módulo. Entonces tenemos SEO, así que Optimización de motores de búsqueda como la mayoría de nosotros sabemos. Tienes indexación, así que no quiero que mi webflow.io sea indexado en el buscador así que me aseguraré de que quieras apagar eso para que esté deshabilitado. Tienes Robots.txt. Si necesitas subir ese texto, puedes hacerlo. Se quiere auto-generar sitemap, yo tenía eso encendido así que marque sí para eso. Simplemente te ahorra tiempo, por lo que Webflow lo hace automáticamente por ti. También puedes poner la verificación de tu sitio de Google. Si estás usando Google Analytics, aquí es donde pones tu clave y te conectas con eso, lo hace realmente, realmente fácil. Entonces esta cosa, no sé qué es eso obviamente. Sobre las formas. Un formulario es cuando solo estás usando el formulario básico de Webflow, no estás incrustando uno de digamos Mail o ConvertKit, solo estás usando puramente el formulario dentro de Webflow. Estos son los detalles en el relleno aquí. El nombre, el correo electrónico al que me enviaron, así que quiero cambiar esto a mi hola email. Línea de asunto que puede ser nuevo envío, y luego responder simplemente sería cualquiera. Si alguien lo pone a través de tu formulario, pesar de que en este sitio web no tengo particularmente un formulario, pero si lo haces, te lo enviaré a mi correo electrónico. También puedes poner la plantilla de correo electrónico también que enviará una cosita a la persona que responde. También tienes validación de recaptura, yo no uso eso, y luego tienes integraciones. También puedes ocultar los envíos de formularios si lo deseas. Restringir el acceso subido, acabo de tener eso encendido y simplemente dejarlo así. Ahora, una de las importantes son las fuentes. Si sí quieres subir tus propias fuentes para un diseño de sitio web, necesitas venir aquí y hacerlo aquí. Es súper fácil, es súper simple. Obviamente, puedo elegir fuentes de esta lista aquí. Tienen en realidad mucho, en realidad han agregado unos pocos más de uno luego el último comprobado, así que tienes que golpear las fuentes de Google entonces. Pero quieres bajar a fuentes personalizadas. Ahora, puedes ver mis Fuentes Instaladas. Ya he subido estas fuentes personalizadas, que es mi fuente Montreux. Se puede ver el estilo, tan normal, cursiva, negrita, etc. Entonces obviamente, es un archivo W-O-F-F, ese es el archivo que debes subir como. Ya puedes ver, puedo ir a la derecha y borrar las fuentes que no quiero. Si tengo una que no me gusta, sólo la borro. puede ver que sólo tiene fuentes de copia de seguridad ahí. Es súper fácil, puedes poner Adobe Fonts también, API, pero simplemente mejor solo déjalo, solo descarga la fuente. Si hago clic en subir, por ejemplo, iré a mi sección de fuentes. Se puede ver obviamente subiendo fuente. Se lo va a importar a esta ventana así. Se puede ver el nombre para que yo sólo pueda quitárselos 400. Asegúrese de seleccionar el peso adecuado. Cualquiera que sea el peso que tenga en tus programas en InDesign o Illustrator, solo comprueba dos veces. Normal, y luego puedes ver, puedo cambiarlo, puedo darle vuelta al pedido, etc. Entonces haré clic en Subir Archivo y se subirá aquí. Ahora mismo, no quiero hacer eso, así que solo dejaré eso, pero es tan fácil y rápido. A continuación, tenemos copias de seguridad. Las copias de seguridad son sencillas. El sitio web guarda automáticamente una copia de seguridad para ti, por lo que no tienes que preocuparte por eso. Super-fácil. Se puede previsualizar o se puede restaurar. A lo mejor el diseño, no gustó, solo puedes volver atrás. Super-fácil. Siguiente arriba son las integraciones. Ahora, aquí por este lado específico, tengo mi Google Analytics porque está rastreando este sitio específico en mis otros sitios. Se puede ver mi Universal Analytics Tracking, este es mi código. Ahora bien, si inicio sesión en Google Analytics, todo va a estar conectado. También tienes pixel de Facebook. Esto es lo que estoy haciendo. Anuncios, está conectado a este píxel aquí, y puedes obtener un código para eso. Entonces la última final es agregar HTML y CSS personalizados. Se puede ver aquí, en el código de cabeza, tengo este código aquí. Ahora este código es de Flodesk, mi proveedor de correo electrónico. Si voy a Flodesk, básicamente estoy usando una API desde dentro de mi cuenta. Esto es lo que uso para mis correos electrónicos. Básicamente es decirle a Webflow recoja los formularios que he creado en mi Flodesk. Después están todas las pestañas en la configuración de la fiesta. Tienes algunas otras cosas aquí arriba, como transversal, si haces clic en este botón, puedes transferir un sitio a tu cliente. Eso lo puedo descomponer en un video similar. También tienes el botón de compartir. Tienes el botón de diseñador, el botón de edición, y el de publicar, y todos estos están disponibles en el diseñador. 9. Nav y héroe: En primer lugar, vamos a trabajar en el Nav, así que voy a ir a Webflow. Voy a ir al lado izquierdo y voy a ir a la maquetación y normalmente, sólo me quedo con el Sticky Nav aquí, simplemente simple y fácil. Haga clic derecho. Voy a hacer doble clic en el “ logotipo de Nav” y hacer clic izquierdo y hacer clic en el código ahí, elegir imagen y voy a seleccionar mi logotipo que ya he subido en las imágenes. Enfriar, así está el logo, ahora voy a ir al lado derecho e ir al dimensionamiento para poder cambiar el píxel del mismo. Voy a bajar y hacer como 150 pixeles. Hermosa. Eso debería quedar bien. Ahora, voy a ir al Nav y a la derecha se puede ver dentro de esta caja tenemos un contenedor y dentro tenemos la rejilla que sostiene estas listas de estos otros nombres. Tenemos un elemento de lista y luego entre eso solo está el enlace y estos enlaces van a otra página. Necesito ir y subir la fuente, así que voy a ir a la configuración del proyecto. Voy a dar click en “fuentes” y voy a ir y dar click en “subir” y voy a localizar mis fuentes inter, y voy a necesitar negrita, regular, y esta, cursiva extra ligera tan audaz, regular, cursiva extra ligera haga clic en “abrir” y se puede ver ahí dentro, y luego solo voy a dar clic, “subir”, y subir y ahora tengo esas fuentes hermosas. Ahora, voy a ir primero cambio a la página web. Tengo que trabajar sobre proceso y contacto. Tienes trabajo sobre. Ahora, también puedo presionar “control C”, “control V”, y debería duplicarlo. Si lo hago desde el lado izquierdo, puedes ver, seleccionar el ítem de lista y duplicar eso así, como puedes ver en el menú del navegador. Tengo trabajo, sobre, proceso, y contacto. Ahora, puedo dejar este botón aquí si quiero, solo voy a eliminarlo y asegurarme de que borres el botón en el ítem de lista para que podamos ver ahí. Está bien, así que tengo mi menú aquí y lo que voy a hacer es que voy a darle estilo. Para este menú, puedes ver que hago doble clic en él, es 29 negrita en la parte superior. Voy a bajar a topografía, voy a encontrar mi fuente, que estoy usando inter para esto, voy a ir a seleccionar el estilo, el peso, que también es el estilo. Haga clic en “negrita" y voy a hacerlo 29, que obviamente es demasiado grande a este tamaño, pero a este 1,920 no se ve tan mal así que sólo voy a ajustarlo y vamos a ir 19. Eso se ve bien y el color, lo voy a hacer como un negro por ahora, y luego por favor haga clic en “plus”, y se puede ver aquí, crear. Ahora, si vuelvo a XD, se puede ver que aquí tengo los colores, diferentes colores, así que puedo seguir adelante y añadir eso en. Voy a hacer doble clic, seleccionar esto y luego puedo pegar el código hexadecimal aquí, y hacer clic izquierdo sobre él y luego hacer clic en “más” y puedes ver que lo agrega y puedo nombrarlo como quiera. Puedo cambiarlo, solo hacerlo gris, presionar “crear”. Voy a hacer eso rápidamente para estos otros colores también. Lo que quieres hacer es si estás en la topografía, haz clic en el “color” y podemos entrar aquí y podemos sumar estos en. Ahora, se puede ver este, el contraste dice fallar eso es por razones de accesibilidad. Es realmente bueno cómo Webflow hace que eso suceda, pero obviamente, todavía podemos usar la universidad no importa si dice triple A que es realmente bueno. Es solo por razones de contraste, pero en este caso, debe ser divertido. Sólo voy a eliminar ese color, pegar eso, y hacer clic en “más” y crear. Hermosa. Está bien, así que tenemos todos nuestros colores son realmente geniales. Yo sólo voy a asegurarme de haber establecido el color negro, y para el fondo también, voy a bajar por el lado derecho de mi libra esterlina ir a fondos y hacer clic en el color y estoy va a hacerlo simplemente completamente blanco como puedes ver y ahora tenemos nuestro Navbar. puede ver que es totalmente receptiva si voy a la vista móvil. Hermosa. Eso es lo genial de Webflow. Simplemente responde automáticamente porque hemos utilizado esas plantillas de diseño. Increíble. Ahora, vamos a empezar a construir el resto de esto. Tienes Sticky Nav aquí y ahora un truco genial o atajo es que presionas “control K” y puedo teclear cualquier cosa. Si puedo escribir div, puedo escribir en sección, puedo escribir en contenedor, sea lo que sea. Yo sólo voy a escribir en sección, y se puede ver que sólo voy a arrastrar esto hacia fuera. Voy a arrastrar el Nav dentro de esa sección, y luego voy a controlar K y presionar “Container”. Muy bien, también puedes ir a la parte superior izquierda y hacerlo desde aquí y simplemente arrastrar y soltar un contenedor como este dentro de la caja, eso también está bien. Tenemos el Sticky Nav, tenemos el Contenedor, pero se puede ver que está dentro del Sticky Nav, así que voy a arrastrar eso hacia fuera así y arrastrarlo abajo. Se puede ver que las capas importan. Asegúrate de arrastrar en la ubicación correcta. Voy a presionar “Control K” y luego seleccionar un bloque div. Un bloque div es básicamente igual que un bloque normal. Estaba hablando de cuatro temas para construir un bloque de construcción, como un bloque de logotipo o un contenedor, una caja. Lo que queremos hacer es, queremos darle una clase, o una etiqueta. Para este, lo llamaremos envoltorio y podemos hacer que el ancho sea un píxel determinado, por lo que está en 940. Puedo hacerlo 1,080 si quiero. Se va a extender más allá de eso. Puedo hacerla 500 pixeles si quiero, como puedes ver ahí, así que realmente depende de ti lo que quieras hacer eso. Puedo ponerlo como ideas, pero digamos que haces 600 píxeles, puedes ir al botón de espaciado, y hacer clic en esta casita, y va a centrar la caja. Ahora por ejemplo, si entro en soltar una imagen dentro de esa envoltura, se puede ver que está totalmente centrada y es de solo 500 píxeles. Ahora si hago clic en el “contenedor” y lo hago 1,000, se va a expandir eso como se puede ver así. Es bastante sencillo. Yo sólo voy a volver. Yo sólo lo voy a dejar en 940, porque está establecido eso. Ahora lo que quería hacer es agregar algunos elementos, así que voy a ir aquí, voy a añadir un encabezado. Asegúrate de hacer clic con el botón izquierdo y arrastra dentro del envoltorio. Yo también voy a presionar “párrafo” y luego vamos a necesitar las dos imágenes también. Yo sólo voy a copiar y pegar. Copiaré y pegaré esto ahí, y luego tenemos un botón también, así que iré plus, localizaré el botón y luego arrastraré eso hacia abajo así, así que tienes un botón ahí. Enfriar, solo dejaré las imágenes fuera por ahora. Enfriar. Ahora, lo que voy a hacer es que quería darle estilo a estos. Se trata de una internegrita 85 puntos. Bajaré a topografía, tipo 85. Podría parecer grande, porque yo estaba diseñando para este tamaño aquí básicamente. Yo sólo voy a hacer 45. Eso es genial. Iremos Inter, Bold. Excelente. Este es Inter, Regular, o Normal. A veces no muestra los nombres correctamente lo cual está bien. Voy a ir 16 pixeles. Por lo general, 16 píxeles es bueno. Para el botón, bajaré a fondos, en el lado derecho, y luego solo haré clic izquierdo en el color que ya tenía ahí. Botón, tengo el color. Ahora para el texto, voy a ir a escribir, y voy a dar clic en el “menú” donde dice más opciones de tipo. Ahora, me va a dar la capacidad de capitalizar, que pueda capitalizar mi botón, como se puede ver ahí. Puedo hacer doble clic en esto, pegar eso en, y voy a ajustar un poco el kerning, también conocido como el espaciado entre las letras. Puedo ver el espaciado entre letras si escribo cinco, puedes ver que lo va a espaciar. Eso es demasiado. Yo quiero hacer tal vez dos. Ah, sí, tal vez sólo haga dos, y luego voy a cambiar la fuente también, y eso puede ser normal, como se puede ver ahí. Se ve bastante similar a eso. Hermosa. Ahora lo que también puedo hacer es agregar relleno extra. Ya puedes ver que tenemos relleno aquí. Puedo sostener Alt y si sostengo Alt, Se va a escalar ambos lados, que pueda sostener Alt y arrastrarlo hacia fuera. A lo mejor quiero agregar un poco más de espacio, y a lo mejor quiero hacer 12 pixeles. Por un lado tal vez quiero hacerme un poco más grande así. Vale, genial, Ese es un botón bastante sólido. Tenemos nuestro envoltorio, tenemos el encabezado y párrafo, y botón. Ahora puedo darle una estrella a esto. Dice encabezamiento, para que pueda hacer rubro y tipo H1. Ahora he añadido una clase combo. Puedo quitar esa clase y simplemente renombrar este a título H1 así y presionar “Enter”. Ahora bien, este es el encabezado de clase H1, esto es sólo párrafo, y luego esto es sólo botón. Siempre puedes renombrarlo. Simplemente recuerda cualquier otro objeto en el Sitio Web que le des a esa clase también, le va a agregar el mismo estilo. Está bien, genial. Tenemos eso. Para este envoltorio, voy a añadir una clase combo, voy a llamarlo héroe. Tenemos envoltorio, héroe, y entonces lo que quería hacer ahora es que le voy a agregar algo de relleno, y tal vez muchos píxeles, dar algo de espacio, dar algo de espacio. Enfriar. Tenemos esta sección también. Ahora a esta sección, voy a añadir mis imágenes. En lugar de agregar las imágenes al envoltorio, lo voy a agregar al fondo. En la parte inferior derecha se puede ver que dice fondos, imágenes, y gradientes. Voy a dar click en esto. Voy a ir por el lado derecho. Se puede ver elegir imagen y aquí voy a seleccionar a mi pequeñito. Voy a hacer clic en “contener” y voy a ajustar esto. Voy a quitarme el azulejo. No queremos azulejar a este tipo aquí y vamos al 90 por ciento. Podemos ir a la medida. A lo mejor sólo quería establecer en píxeles. Puedo hacer tal vez 400 pixeles. El ancho y la altura. Genial, impresionante. Tenemos a este tipo, ahora le vamos a añadir un poco más de relleno. El tramo, fresco. Yo también puedo agregar otra imagen y voy a agregar ese rectángulo, apagar el azulejado, y luego la voy a llevar a la misma posición más o menos. Es demasiado grande, así que vamos a ir a 50. Ahí vamos, y sólo voy a arrastrar esto hasta el fondo para que puedas ver, lo estoy arrastrando debajo de Jeremy y ya puedes ver ahora tengo a ese tipo ahí, que soy yo. Voy a ir a mi sección y en realidad voy a añadir algo de relleno. Si muevo el relleno, se puede ver que se mueve la parte inferior, si le agrego margen, se puede ver que agrega espacio afuera recuerda, pero queremos solo quitar el relleno para que veas que el Nav es ancho, así que por eso se está cortando la cabeza, así que queremos bajar esto. Digamos que un 100 píxeles, y también podemos bajar esta envoltura. Voy a añadir un poco más de Relleno ahí, y puedo sacar esto así y dar click en la “sección trasera” y si quiero seguir adelante y tal vez arreglar esto, tal vez 250, hacerlo más pequeño, puedo ajusta esto y solo tienes que jugar con estos ajustes y luego si juegas alrededor puedes ver eso. Yo solo controlaré Z para volver atrás. Puedo apagar el 2X, pero eso está apagado. También puedes agregar gradientes y cosas así y como puedes ver, bueno, solo voy a controlar Z y conseguir [inaudible]. 10. Trabajo y servicios: Enfriar. Una vez que terminemos con eso, empecemos a construir la siguiente sección. Voy a hacer clic en el “Plus”, añadir una sección, arrastrarla y soltarla. Como puedes ver, guapa, ahora tengo la sección. Voy a empezar a construir en esto. Ahora, estoy seguro de que podrían tener un diseño aquí. Se puede ver que tienen una sección de tarjetas. Voy a arrastrar literalmente eso y soltar eso. Se puede ver a veces agrega la sección automáticamente, por lo que podríamos simplemente eliminar esta sección. Yo sólo voy a empezar a copiar este texto aquí. Ahora, para hacer de este texto el mismo que éste, todo lo que tengo que hacer es seleccionar el encabezado y escribir h1, y puedo ver las clases existentes. Ahora, todo lo que tengo que hacer es hacer clic izquierdo y se va a añadir ese mismo estilo en clase. Se va a extraer la misma fuente y la misma fuente y estilo bonus. Es súper fácil hacer eso. Reanudar aquí, copiar el texto que ya tenía, que ya escribí, eliminar este párrafo. Entonces ahora tengo estas cartas, lo cual es realmente genial. Ahora puedo ir y elegir una imagen. Hago doble clic en esta imagen, clic en “Elegir imagen”, y luego voy y agrego eso así. Tengo éste, guapa. Yo sólo voy a hacer esto rápidamente. Está haciendo que el proceso sea muy sencillo. El estilo de párrafo, asegúrate de que estos tengan el estilo de éste. Voy a ir tipo párrafo, añadir la clase. A pesar de que tiene el nombre del párrafo, pero tienes que agregarle la clase. Estilizado en el costado, y debe tomar la fuente. Hermosa. Ahora lo que voy a hacer es dar click en la Sección de Cartas. Se puede ver que estoy en el área de la Sección de Tarjetas. Vuelve a bajar al fondo, pero esta vez vamos a dar click en “Color”. Voy a seleccionar esto y seleccionar el bonito color crema. Se puede ver cómo se ve. Lo que voy a hacer ahora también, voy a ir al contenedor de rejilla porque automáticamente agregaba una cuadrícula. Si quiero editar la cuadrícula, puedo dar click justo en la tarjeta detrás de ella y dar click en la casita roja que hay. Puedo ajustar el dimensionamiento. Si no quiero espaciar, solo puedo hacerlo así. Puedo acortar un lado si quiero, realmente depende de ti, y puedo hacer click izquierdo en “Hecho” para salir de ahí. Ahora lo que quiero hacer es dentro de esta tarjeta, tenemos la máscara de imagen y luego tenemos un bloque div también. El bloque div, voy a hacer blanco el fondo para eso. Voy a ir blanco, haga clic en “Plus”, lo cual es impresionante. Puedo teclear, lo llamaré bloque de tarjetas. Ahora, para los otros, voy a dar el mismo estilo. Una vez más, escriba tarjeta, vaya a la clase existente, y luego aplíquelo. En el bloque de tarjetas, se puede ver el texto demasiado lejos a la izquierda. Puedo hacer click en el bloque de tarjetas y añadir un poco de relleno. Pero se puede ver que va a cambiar las imágenes. Como puedes ver ahí, está agregando relleno alrededor de todo. Pero lo que queremos hacer es agregar solo relleno al encabezado y al párrafo. Podemos agregar un div y poner estos dentro de ese div o bloque. A lo que puedo hacer, voy a ir div. En el lado izquierdo, voy a arrastrar el encabezado y el párrafo dentro de esa caja. Voy a llamar a esa tarjeta de texto. Entonces por el lado izquierdo, voy a ajustar algunos remeros. Ahora se pueden ver los remaches ahí. Voy a hacer unos 20 pixeles. Eso se ve bien. Puedo aguantar y descifrarlo [inaudible]. Yo sólo voy a mirarlo. No quiero tardarme demasiado. Después barremos. Entonces ahora todo lo que tengo que hacer es hacer lo mismo por estos otros de aquí. Acude al Selector en la parte superior y toca el texto de la tarjeta, y ahí lo tenemos. Boom, dulce. Ahora tenemos estas tarjetas luciendo igual que yo las diseñaría. Podemos añadir un poco de sombra si queremos, pero sólo la voy a dejar por ahora. Está en un contenedor centrado ahí y la tarjeta es genial. Yo sólo voy a añadir un poco de relleno en la parte superior. Vamos 40 pixeles solo para darle un poco de espacio para respirar ahí. Hermosa. Ahora lo que voy a hacer, es que voy a añadir otra sección. Yo sólo lo voy a arrastrar hasta aquí. Voy a arrastrarlo en la parte inferior, asegúrate de que sea azul, no rojo, como puedes ver. Las secciones tienen que estar separadas, no pueden estar dentro de otra caja, etc. Esta sección, voy a hacer que sea del mismo color que antes. Voy a agregar un bloque div y le voy a nombrar el contenedor. tienes la envoltura Ahítienes la envolturay solo necesitamos añadir un contenedor también. Iré a buscar un contenedor. Recuerda, siempre puedes hacer una clase para los contenedores si querías un cierto ancho, pero solo lo voy a hacer así. También voy a cambiar el color de este texto, esto no está destinado a ser negro. Estos encabezamientos deben ser de cabecera h2. Hazlo negro. Yo sólo voy a añadir otra sección. Control K. A veces no funciona como querías. Solo voy a agregar otra sección solo para poder ver el contenedor y el envoltorio que tengo. Lo que voy a hacer es agregar un div. También podría agregar una cuadrícula si quisiera y poner una en cada uno. También podría agregar una columna. Podría hacer clic en “Plus”, obtener columnas, y luego arrastrarlo. Arrastra eso dentro de la envoltura que tenemos aquí. Voy a presionar “Control K” y escribir imagen. Arrastra eso aquí. Entonces voy a presionar “Control K”, escribir encabezado, y luego arrastrar esto así. También puedo ir aquí y, una vez más, arrastrar el párrafo. Voy a copiar, pegar, copiar también todos estos textos. Obviamente, puedo hacer una lista y hacerlo de esa manera, pero creo que esta es sólo una forma más rápida [RISAS] de hacerlo. Una vez más, sólo añadiendo los estilos a medida que voy. Ahora, haces click en esta imagen. Voy a elegir imagen y luego necesito subir la que quería. Tengo esta imagen de Unsplash, se ve bien. Impresionante. Puedo presionar shift enter aquí para hacer un punto de ruptura, se puede ver el final, sólo para que el texto sea más apretado. Eso se ve bien. Puedo agregar relleno si quiero, así que 20 pixels para alinearlo más al texto. Eso está totalmente bien. Pero creo que se ve bien. Es sólo bonito nombrar. También puedes nombrar tus secciones. Obviamente, dice la Sección 2, puedo nombrar a esta sección servicios. Incluso puedo hacer un guión, a veces es agradable agregar servicios de dash, sección dash. La tarjeta de ésta. Siempre puedes volver atrás y añadir las secciones. Sólo recuerda, puede alterar otras partes de tu sitio con el mismo estilo. Así que asegúrate de hacer nombrar las cosas desde el principio lo mejor que puedas. Voy a ir container y luego div block, estilo esa envoltura. Entonces dentro de eso vamos a tener un encabezado. Se puede ver. También puedes elegir los diferentes encabezamientos también. Si añades una etiqueta global, así que si hago clic izquierdo, puedes verlo dice etiqueta HTML y si es rosa eso significa que si haces eso todas las etiquetas con estos ajustes como H1, H2, H3 cada una tiene su propio estilo. Es similar a como agregar un ancho de clase pero esto lo agrega a todo como una etiqueta global predeterminada. Simplemente me gusta hacer una clase, solo es más fácil hacer un seguimiento como puedes ver aquí. Tenemos testimonios Ahora necesitamos tener esta frase, y para esta, lo que voy a hacer es que la voy a hacer una clase combo y simplemente llamarla centro. Ahora voy a ir a Tipografía y dar clic al Centro. Ahí. Ahora debería centrar ese texto como se puede ver ahí. Realmente fácilmente. Ahora para esta sección, necesito agregar un poco de relleno ahí solo para alejarlo de la otra sección ahí para que tengamos algo de espacio. Ahora voy a conseguir un párrafo. Perdón, no párrafo. Tenemos que ir y añadir una cuadrícula aquí. Veamos maquetación, a ver si tienen algo similar. No tienen testimonios. Probablemente podría volver a hacer una sección de tarjetas. Pero para este, voy a añadir una cuadrícula. Voy a arrastrar una cuadrícula aquí dentro de la envoltura. En el lado derecho, voy a añadir otra columna. Lo que quieres hacer es hacer clic en el botón pequeño plus aquí y también puedes hacerlo aquí también. A las filas, voy a borrar la fila y tener tres columnas como esta. Ahora lo que voy a hacer es ir párrafo y luego tenemos como un pequeño texto ahí para que pudiera volver a hacer párrafo, pero voy a ir encabezado. Podemos ir H5, así que todos los encabezamientos H5. Voy a dar click en el selector en la parte superior derecha. Todos los ajustes de H5, les vamos a dar Inter y vamos a ir extra ligero así. Entonces puedo seguir adelante y copiar el nombre así y solo asegurarme de que lo arrastre por dentro, asegurarme de que esté en la cuadrícula correcta. Sólo voy a hacer un bloque div para que pueda arrastrar las cosas dentro de ahí. Voy a hacer en este círculo. A veces no funciona correctamente. Voy a arrastrar por ahí y arrastrar el párrafo dentro de ahí. Ahora tenemos un bloque div. Ahora siempre es mejor crear una cosa primero. Voy a añadir 100 relleno en la parte inferior. Siempre es bueno crear un bloque primero y luego puedes copiar y pegar para que sea mucho más rápido. Sólo voy a cambiar rápidamente la fuente ahí a la normal. Este va a ser párrafo. Asegúrese de que tenga la convención de nomenclatura correcta. Enfriar. Yo lo voy a pegar ahí y porque esto está centrado, voy a hacer una clase combo que puedas ver dos clases ahí. Voy a ir a la tipografía y a centrar eso así. También voy al rumbo 5 y centro eso así, boom. Al igual que eso, tenemos un elemento agradable. Ahora lo que puedo hacer aquí es que también puedo presionar un bloque div. Para este, voy a añadir imagen y voy a añadir las estrellas. Será mejor si solo tuviera las cinco estrellas como una sola imagen, pero para esto solo podría controlar C y pegarla. Pero es mejor si acabas de tener una imagen. Pero ahora tengo un bloque div con cinco imágenes de las estrellas como se puede ver ahí. Ahora esto solo puedo llamarlo estrella como clase y luego agregar un poco de relleno, como se puede ver ahí. A lo mejor seis píxeles. Simplemente voy a eliminar estos otros y copiar pegarlo de nuevo, así que tiene el relleno ahí. Ahí vamos, y ahí está esta cuadra, voy a llamar crítica estrella, y luego voy a centrar esto. Voy a ir a mi display flexbox. En Layout, voy a dar click en Flexbox y luego queremos dar click en el centro aquí. Debería alinear eso al centro. Ahora tenemos nuestros testimonios. Se ve bastante bien. Ahora voy a añadir un poco de relleno aquí. Voy a conseguir el bloque div, podría llamarlo tarjeta-testimonio. Entonces voy a copiar y pegar esa misma cosa. Literalmente simplemente lo duplicamos así, realmente fácilmente. Ahora sólo voy a copiar todo este texto aquí. Tengo los nombres de mis clientes a los que renombré. No quería poner su verdadero nombre. Ahí tenemos la sección testimonial. Ahí vamos. Hermosa. aspecto bonito [inaudible]. Ahora casi hecho. Tan solo una pequeña sección con el botón y el pie de página ahí. Yo puedo ir al Navegador. Si quiero presionar esto, lo fijará para que siempre esté ahí, pero me gusta tener un desanclado por lo que tengo más espacio para trabajar. Ya puedes ver, sí, así es como me gusta. Voy a ir a añadir otra sección, y arrastrarla hasta abajo. Voy a hacer Sección-CTA, cambiar el color. Entonces lo que puedo hacer es copiar este encabezado y simplemente pegarlo aquí. Primero, déjame coger el contenedor y luego el bloque div. Entonces lo pegaré dentro de esto, así que está en el envoltorio. Siempre es bueno asegurarse de que recuerden que las cajas que estamos apilando todo en mantenerlo limpio y ordenado tanto como sea posible. Para este texto, éste debería ser un centro H1. Ahí lo tienes. Entonces todo lo que quiero hacer es poder seguir adelante y copiar este botón si quiero. Ahora si quiero hacer un símbolo con este botón, todo lo que tengo que hacer es ir click en “Crear símbolo”. También puedo hacer clic derecho. Me pediría crear símbolo aquí como puedes ver. Entonces puedo llamarlo botón principal. Crear. Ahora se vuelve verde. Ahora este botón, le puedo dar ajustes, etc. Pero en realidad es realmente útil. Ahora quiero ir a ajustes, siempre puedo usar la misma instancia. Puedo arrastrar y soltar la instancia de botón y se puede ver que dice botón principal. Siempre puedo hacer clic derecho y puedo hacer clic en desvincular instancia. Esto va a asegurarse de que este botón no sea la edición principal. Porque si edito este botón, va a efecto este botón y así quiero desvincularlo básicamente. Quiero agregar otro bloque div y simplemente tirar el encabezado en esto también porque quieres centrar estas cosas. Entonces esto, voy a ir a dar click en el Flex, click en Vertical, y luego Centro. Ahora es envolver y poner ese objeto en el centro. Está alineándolo y justificándolo a ese bloque div que acabamos de hacer. Hicimos realmente lo hizo bloque dentro de la envoltura. Vamos a llamarlo centro alinear por ahora. Haz que tu marca destaque. Presiona “Enter”. Ahora podría ajustar el dejar aquí. Está un poco apretado. A las alturas, vamos 50. Ahí vamos. El alto de la letra, está bien, eso será mejor. Sección CTA, voy a añadir un poco de relleno, así que voy a sostener Alt, arrastrar hacia fuera. Ahí lo tenemos. Ya hemos construido nuestra página. Ahora para el botón, puedo hacer clic en el engranaje, clic en una página y digamos que sólo va a ir a página Contacto, y dar clic en nueva pestaña. Ahora si hago clic en la parte superior izquierda, verás la vista previa. Ahora puedo ver cómo se vería mi sitio. Aquí hay un poco de problema con la imagen. Podría tener que arreglar eso. Podría ser porque mi PNG está un poco apagado, pero de todos modos, no importa. Por ejemplo, haga clic en el botón ahora. Puedo hacer click izquierdo en él y voy a ir a la otra página. Obviamente no hay nada en esa página. En literalmente como 20, 30 minutos, hemos construido este sitio. Voy a volver a mi página de inicio y podemos hacer pequeños ajustes. Por ejemplo, este botón, y lo que puedo hacer es hacer un estado de desplazamiento. Voy a ir al selector en la parte superior, haga clic en el menú desplegable, haga clic en Hover. Ahora, lo que quiero hacer aquí es ir al color y puedo hacer que se vuelva negro o como un rojo oscuro. Entonces tal vez sólo quiero ir como rojo oscuro o algo así. Ahora si hago clic en un Ninguno, así que estoy cambiando los estados de hover. Entonces este es el estado flotando, y luego vuelvo, haga clic en “Ninguno”. Ahora si hago clic en “Vista previa” poner mi ratón, puedes ver ahora tiene un estado de hover, lo cual es impresionante. Se siente tan bien cuando haces eso. Ahora, se puede hacer es prensa estados, se puede hacer enfocado, etc., pero estoy tratando mantenerlo simple y dejarlo así. Increíble. Ya hemos hecho nuestra página, quiero construir la página del portafolio. 11. Pie de página: Voy a terminar rápidamente el pie de página y luego podemos pasar a la siguiente página. Yo sólo voy a volver aquí y copiar estos enlaces. Podemos ver aquí. Copiar estos. Se puede ver que los textos están en cada lista separada. puede ver que es una lista y luego dentro de la lista se encuentra un elemento de lista. Cada texto es básicamente un enlace diferente. Es posible que necesitemos simplemente escribir casa, sobre, y contactar. Después vamos a eliminar los otros ítems de la lista, así que vamos a navegar a la izquierda y simplemente dejar esos, y luego recursos. Yo sólo puedo escribir herramientas y obsequios. Sólo les estoy dando algunas ideas sobre algunas cosas que pueden tener en el pie de página. Por lo general, son solo enlaces extra para ayudar a la gente a encontrarte o contactarte si se pierden. Entonces tienes sociales. Bueno, ahora se llama Meta, así que sólo lo llamaremos Meta. Instagram, Twitter. Entonces tienes este texto aquí. Ahora podemos duplicar la imagen de esto. Por lo general, me gusta simplemente chuck en el logo, que es realmente genial. A lo mejor puedes agregar eso en. Después el encabezado de pie de página. Necesito cambiar esto por inter, y vamos a ir atrevidos. Eso está bien. Entonces este enlace de pie de página. Lo mismo, sólo voy a ir inter, normal. Después bombear hasta 16. Creo que eso es realmente genial. El de la página inferior. Puedo copiar este texto, copiar y pegar, así. Queremos asegurarnos de que se vea similar a cómo lo diseñamos. Aquí estoy en el pie de página, y tengo diferentes bloques div. Si copio y pego un bloque div más, puedes ver otros enlaces. Voy a arrastrar los bloques de texto dentro de ellos y simplemente eliminar los elementos de la lista, y el encabezado se puede eliminar. Eso se puede ver, y yo sólo voy a presionar Enter en esto, y debería hacerlo así. Entonces en este bloque div, solo lo llamaré copyright como clase, agregaré un poco de relleno en la parte superior para bajarlo si quiero, así. puede ver que es una especie de alinearse ahí. Sólo estoy usando mi ojo para hacerlo más o menos exacto. Creo que 40 píxeles servirán. Entonces sólo cambia la fuente, 60 normal. Ahí vamos. Puedo enlazar el logo si queremos, pero obviamente, va a cambiar el tamaño y todo. Pero creo que eso se ve bien. Básicamente lo mismo. Ahí tenemos nuestra página principal, se ve muy bien. Ahora, algunas cosas que quiero hacer. Quiero seleccionar el pie de página, y quiero hacer clic derecho y convertirlo en un símbolo. Entonces crearé un símbolo, y lo llamaré pie de página. Ahora cuando lo utilicemos en la siguiente página, Va a ser lo mismo. Entonces haré este nav pegajoso también. Crea símbolo, y solo lo llamaré nav. Ahora ya estamos bien para irnos. Lo que voy a hacer es poder seguir adelante y duplicar esta página para la página de trabajo, o simplemente puedo ir a la página de trabajo. 12. Página de proyecto: Empecemos a construir eso fuera. Voy a ir a mi ficha de la izquierda, y se puede ver que tengo un nuevo símbolo, el Nav. Entonces también puedo arrastrar el pie de página allí también. Con el pie de página y el Nav, entonces lo que voy a hacer es presionar “Control K”, Find section, y sólo traer esa sección ahí así y voy a empezar a construir la página secundaria, que debería ser bastante fácil. Vamos a agregar un contenedor aquí y luego dentro de eso un bloque div. Después nombramos el bloque div, el contenedor. Entonces dentro de eso vamos a añadir un encabezamiento, que va a ser un H1. Hazlo negro. Hazlo así. Voy a llamar a esta envoltura y luego agregar otra clase llamada trabajo. Voy a agregar algo de relleno en la parte superior ahí y en la parte inferior, tiene 100 pixeles. Yo sólo voy a añadir otra sección también. Debajo de eso para la siguiente parte, sólo voy a cambiar el color de esa siguiente sección. Para éste y entonces tenemos el texto también. De lo que puedo hacer por este, puedo agregar una cuadrícula. Yo sólo voy a añadir una cuadrícula y no necesitamos ninguna fila así que voy a ir a dar click al pequeño papelín. Voy a usar esto, voy a arrastrarlo para hacer 1.75. Voy a dar clic hacia abajo y arrastrar el encabezado dentro de ese cuadro de la izquierda. Ahora en la otra caja puedo ir en párrafo y ahora está dentro de esa cuadrícula. Tenemos básicamente dos columnas en esta cuadrícula y lo genial de una cuadrícula es que la hace sensible. Solo tenemos que asegurarnos de que sea vertical y se apilar uno encima del otro. Pero básicamente usa Flexbox, lo cual es genial. Entonces puedo igual que entrar aquí, copiar y pegar el texto. Voy a tener que seleccionar este tipo y puedes seleccionarlo. Ya ves que tienes algunas opciones aquí, así que puedo insertar enlaces. En realidad puedo envolver con el lapso. Si necesito hacer una clase personalizada dentro de este párrafo, puedo hacer eso. Si hago clic en esto y luego lo llamo es H3, cabecera H2, debería funcionar. Yo sólo voy a agregar cabecera, podemos ir cabecera H4. Sólo voy a arrastrarlo dentro de eso. Yo sólo voy a hacer que sea un div para que podamos tirar las cosas en esa caja. Ahora todas estas cosas en su propia caja y luego puedo escribir rol, así que puedo eliminarlo aquí. Simplemente escribiendo guiones. Puedo copiar pegar el encabezado, lo arrastro abajo. Agregamos un párrafo y luego simplemente pegamos eso así. Entonces el año, lo mismo, copiar pegar, arrástralo debajo. Tenemos año y poner un párrafo, poner 2020 así. Basta con darle estilo a esto con la clase de párrafo. Párrafo. Justo así. Entonces boom, tenemos algo así. Simplemente iremos al diseño de plantillas, excelente. Ahora tenemos nuestra página aquí y luciendo bien. No tiene que ser exacto. Siempre podemos simplemente hacer las cosas fáciles como esta. Enfriar, así que ahora lo que voy a hacer, voy a añadir las imágenes. En realidad puedo agregar otra cuadrícula si quisiera, solo mantenerla realmente simple, me desharé de las filas y me desharé de la columna. Ahora tengo una columna. Yo sólo voy a asegurarme de que esa rejilla esté dentro del contenedor. Nos aseguramos de que esté centrado. Podría ponerlo en la envoltura pero el contenedor ya lo concentra. Entonces todo lo que tengo que hacer, puedo llamar a esta Grid 3 y solo podemos ir llamarla trabajar. Ahora, voy a ir a seleccionar una imagen en la sección de medios y voy a soltar eso. Elige la imagen y ahora básicamente puedo empezar a pegar esto en. De lo que queremos hacer, se puede ver cómo esta sección se superpone. Simplemente voy a ajustar el relleno de esta rejilla como esta primero y la sección superior, puedo subir el margen. También puedo ajustar el relleno también. En primer lugar, solo voy a copiar y pegar las imágenes y luego solo puedo pasar, es solo duplicar el bloque de imagen y luego solo puedo pasar y cambiar las imágenes. Estoy haciendo doble clic, reemplazar, reemplazar y ahora se puede ver que tenemos estas imágenes así, que es lo que queríamos. Para solapar las secciones, todo lo que tenemos que hacer es ir a la parrilla y podría hacerlo en el contenedor. Pero si haces eso, va a cambiar todos los contenedores con esa cosa. Pero voy a ir a la rejilla y voy a cambiar el relleno y arrastrarlo hacia abajo. Apenas me queda haciendo click y arrastrando para que sea menos. Vamos menos 135. Voy a añadir un poco más de relleno a la sección superior. Vamos a ir 100 píxeles y luego volveremos a la cuadrícula y obtenemos menos como 150, como se puede ver hacia abajo en el lado derecho. Ahora puedes ver que tenemos estos efectos superpuestos. Ahora si vamos al móvil, se puede ver que todavía se superpone, lo cual es genial. Hermosa, demasiado fácil. Ahora, sólo vamos a sumar el último toque final. Voy a agregar un div en la parte inferior aquí y luego voy a agregar un encabezado para el siguiente proyecto. Sólo voy a nombrarlo una vez más, envoltorio. Siguiente proyecto, esto puede ser un encabezado H1 y luego lo que voy a hacer es que voy a llamar a este wrapper siguiente, solo llámalo envoltorio siguiente. Creo que está dentro de la cuadrícula, así que solo necesito arrastrarla fuera de la cuadrícula por un segundo. Yo sólo voy a hacer otro contenedor y luego poner el envoltorio dentro de ese contenedor. Asegúrate de que lo arrastraré fuera de ahí, lo soltaré aquí, y sólo asegúrate de que esté dentro de la sección. pueden ver las líneas, Sepueden ver las líneas,te dice dónde se encuentra, así que solo quiero arrastrarlo encima de eso. Normalmente solo arrastro bajo así. Ahora está dentro de esa sección. Voy a añadir algo de relleno a esta sección. Vamos 135 pixels y en esta envoltura siguiente, tengo esto y luego necesito una imagen. Voy a elegir la imagen, voy a seleccionar la flecha. Ahora para conseguir la flecha junto a eso, voy a ir a la envoltura, voy a ir a Layout click en el Flexbox y ya puedes ver ahora está cambiado a horizontal. Ahora en esta imagen puedo darle una clase de flecha y luego agregar algo de relleno como este. La flecha es un poco demasiado grande, así que la voy a hacer más pequeña. Lo que voy a hacer es ir al máximo y sólo cambiar el porcentaje. Puedes ver si haces clic en el botón pequeño aquí, puedes cambiar los píxeles. PX es pixeles, tienes porcentaje, tienes EM, tienes CH, que tienes VW, que es ancho de vista, VH que es altura de vista, y luego tienes auto. Normalmente solo uso porcentaje, píxeles y a veces también uso la altura de la vista. Pero para esto voy a usar porcentaje. Está dentro de esta envoltura, esta envoltura recorre todo el camino. Es básicamente, por el momento el ancho es del 39 por ciento del tamaño total o ancho de la envoltura real. ir a presionar Control Z, sólo voy a cambiar esto a 20 por ciento para el ancho, vamos a ir 25 por ciento. Entonces voy a añadir algo de relleno sólo para que pase eso. Dejaré caer el relleno de esto también y ahí lo tenemos, tenemos la flecha ahí mirando un poco más como el tamaño de aquí, que es realmente genial, hermosa. Ahora que esta página está funcionando, ahora sólo voy a volver a mis páginas, vaya a la página de inicio. Ahora lo que queremos hacer es que queremos hacer esta tarjeta vinculada a la otra página. Lo que tenemos que hacer es que tenemos este bloque de cartas y tenemos la máscara de imagen de tarjeta. Lo que necesitamos hacer es agregar un bloque de enlace. Voy a presionar el botón Plus y bajar al bloque de enlace. Ahora esto es básicamente sólo una caja con un enlace adherido a ella para que podamos asegurarnos de que la tarjeta en la que hacemos clic se va a vincular. Yo sólo voy a traer el bloque de enlace al bloque de tarjetas. Voy a traer la máscara de imagen de tarjeta al bloque de enlace de ahí. Voy a asegurarme de que el ancho esté al 100 por ciento para que puedas ver eso. Ahora tenemos el bloque de cartas, tenemos un bloque de enlace, y dentro del bloque de enlace tenemos la máscara de imagen de tarjeta, con las imágenes. Voy a dar click izquierdo en el bloque de enlaces y puedes hacer click en el pequeño engranaje aquí, o puedes ir en el engranaje derecho a la derecha. Como pueden ver, me gusta hacer por el lado derecho, así que voy a dar click en el Cog, clic en la Página, y voy a bajar a la sección de trabajo. Si quiero ir a una pestaña nueva, puedo hacer clic en este botón, pero si no, lo voy a dejar. Voy a ir a la esquina superior izquierda y cambiar la vista previa. Ahora, cuando pase por encima de mi ratón, voy a hacer click izquierdo y me va a llevar a la página web, que es la que acabamos de crear, como se puede ver ahí. Ahora bien, ¿y si quisiéramos añadir un hover sobre la imagen? Voy a ir al bloque de enlaces aquí, me voy a desplazar todo el camino hacia abajo. Ahora lo que vamos a hacer es querer cambiar la opacidad. Voy a dar clic en la parte superior superior derecha, el selector, clic en el botón Hover y lo que voy a hacer es que puedo soltar la opacidad hacia abajo, o puedo agregar un color encima de ella. Añadamos un filtro. Yo puedo ir saturación, por ejemplo. Si quisiera ir como blanco o negro, deje caer la saturación a cero por ciento. Ahora cuando pase el rato sobre esto, se va a ir en blanco y negro como se puede ver. Por ejemplo, haré clic en “Vista previa”, tire de mi ratón sobre él, y ahora puedes ver los cambios del ratón. Doy clic en él, boom, así como eso. puede hacer que cambie a un color diferente. Puedes hacerlo a escala si lo deseas. Se puede agregar cualquiera de estos efectos o colores, etc. Va a cambiar literalmente la forma en que se ve. Si voy a hover, si voy a prensado también, puedo borrar eso. Por el bien de ello, sólo cambiemos la escala. Ahora volvamos atrás. Ahora si voy a Vista previa y tiro mi ratón y hago clic izquierdo, se puede ver que se está escalando. ¿Ves eso? Si me suelto, se va a ir. Bastante cool, puedes hacer como pequeñas interacciones y pequeñas cosas, pero hemos hecho nuestro sitio web y ahora te voy a mostrar cómo hacer un poco de SEO en algunas cosas de último minuto para el sitio web. 13. Haz que sea responsivo: Ahora lo que voy a hacer es mostrarte cómo hacer que el sitio web responda. Solo vamos a usar la página de inicio por ahora. Lo que quiero hacer es ir al punto de ruptura superior y dar click en la tableta. Como puedes ver, estamos empezando a ver algunas cosas que no están funcionando. Recuerda, cualquier cambio que hagamos en el escritorio afectará a los más bajos. Pero cualquier cambio que hagas en el móvil no afectará al escritorio ni al iPad. Se cae en cascada. Si hago cambios en el iPad, debería afectar a los más bajos, y no afectará al escritorio. Si hago cambios aquí, la vista de escritorio no se verá afectada. Voy a dar click en esto. Lo que puedo hacer en realidad es que puedo hacer el texto más pequeño, o puedo hacer que la imagen de fondo se vuelva invisible para que encaje. Por ejemplo, voy a dar clic en “Sección” y luego voy a bajar a Fondos, y voy a apagar el globo ocular. Ahora, puedes ver que lo apaga. Si vuelvo al escritorio, se puede ver que mi imagen de mí misma está ahí, y está totalmente bien. Ahora, vuelve aquí. Está apagado. Si voy al escritorio, podemos ver que la imagen también se ha ido, lo cual es súper fácil. Puedo dejar el texto ahí. Es legible. Está funcionando. Todo encaja aquí porque esto es como una bonita tarjeta aquí que funciona. Para que podamos mover esto, en lugar de mover el relleno y el margen porque está puesto en cierta caja ahí en una columna, lo que realmente puedo hacer es bajar y queremos ir a nuestro posicionamiento. Está en la estática ahora mismo. Lo que quiero hacer es dar click en “Relativo”. Relativo hace que funcione en base a la sección en la que se encuentra. Lo que puedo hacer en realidad es que puedo jugar con el ancho aquí. Puedo arrastrar el posicionamiento y lo va a tirar hacia la izquierda ahí, lo cual es genial. Para el escritorio, se puede ver que no pasa nada. Si me pongo al móvil y me desplazo, se puede ver que obviamente, es realmente grande. Podría necesitar hacer eso más pequeño. Ya puedes ver, puedo traerlo de vuelta así eventualmente. Voy a volver a la vista del iPad. El posicionamiento relativo nos permite controlar esa imagen y romperla fuera de una caja y traerla en base a la sección. Podemos mirar testimonios. Se puede ver que la última está cortada. Lo que quiero hacer es que voy a seleccionar la cuadrícula. Ahora lo que queremos hacer es cambiar la cuadrícula a dos filas. Voy a dar clic en “Editar cuadrícula”. Ahora voy a ir por el lado derecho, ir a este pequeño punto rojo plus, y dar clic en “Plus”. Ahora solo voy a eliminar esta fila ahora para poder hacer clic derecho y hacer clic en “Eliminar columna”. Entonces puedo hacer clic derecho aquí y eliminar esta columna aquí, como pueden ver. Simplemente voy a reducir eso usando esta pequeña caja de herramientas. Voy a presionar “Hecho”. Ahora los testimonios están justo en el centro. Este testimonio aquí tiene que estar centrado también. Voy a ajustar el relleno aquí y bombear así justo en el centro. Sólo voy a mirarlo. Fresco, fácil. Eso se ve bien. Entonces el botón aquí, tenemos el texto y el botón que parece estar todo vertical. Yo sólo voy a conseguir el botón, y luego sólo voy a ajustar los márgenes ahí para arreglarlo. Hermosa. La foto no está tan mal. Creo que está bien. Podría simplemente dejar caer el tamaño del texto aquí, lo cual es genial. Ahora en el escritorio, el tamaño del texto sigue siendo el mismo que se diseñó originalmente. El iPad view va a ser un poco más pequeño. Hermosa. Eso se ve bien. Eso se ve genial. Creo que en realidad necesito agregar un poco más de relleno a esta sección, así. Hermosa. Este es el modo paisaje. Normalmente no toco esto porque obviamente, gente no ve videos como ese a menos que sean cierto tipo de persona. Pero usualmente me salto eso y simplemente voy directo al móvil. Móvil es esta vista. Ahora puedes ver que tenemos el menú. Ya está activado. Obviamente puedes personalizar este menú aquí. Puedo cambiar de colores. Puedo cambiar los enlaces. Puedo cambiar el teléfono, etcétera Pero porque ya teníamos eso, por ejemplo, si tengo un hover, voy a cambiar el color, y vamos a ir como este color rojo. Ahora cuando paso el ratón sobre él, puedes ver que hay una selección roja. Obviamente, cuando alguien está en su teléfono, su pulgar hace clic y desplaza, por lo que no podrán ver eso. Pero si de alguna manera están en el navegador y es de tamaño pequeño, entonces se verá así. Creo que eso es bueno. Ahora lo que voy a hacer para esto es, bajar a mi tipografía y voy a bajar el tamaño de manera significativa. Voy a cambiar la altura, que es lo [inaudible] o el espaciado entre líneas. Va a ir como 30 tal vez. Cambia esto a 25. Eso lo romperé así. Ahora voy a ir a la envoltura y voy a ir al relleno de la izquierda y sólo traer eso así. Voy a presionar “Shift-Enter” aquí para hacer un salto de página. Lo que realmente puedo hacer es disminuir esto también si quisiera, el relleno en la parte inferior. El trabajo ya estaba en un bonito grupo de cartulinas. Eso ya es todo receptivo. Esto de aquí, voy a traer el relleno. Lo que puedo hacer en realidad es que puedo aumentar o disminuir el tamaño de la fuente. Yo solo quiero presionar “Enter” y ya veremos qué pasa ahí. Creo que eso se ve bien para esta imagen. Creo que eso está bien. Sólo voy a cambiarlo a estático. Debe ser arreglado. Veamos aquí. Entonces la vista móvil. Fácil. Creo que está bien. El relleno. Las imágenes. No sé qué está pasando con él, sigue yendo más grande. Ahora tenemos estos también, los testimonios. [ RUIDO] Está en una rejilla. Yo sólo voy a asegurarme de que todo esté centrado también. Agarra la tarjeta, y luego tira de ese relleno así. Ahora tienes relleno en los laterales, lo que lo está haciendo caber. El testimonial, solo ajusta el relleno ahí, encaja así. Hermosa. Demasiado fácil. Simplemente voy a ajustar el relleno del bloque div en el que está, como se puede ver ahí. El pie de página ya está bien y listo para salir. Así es básicamente como haces que tu sitio web responda. Ahora bien, si hago clic en “Vista previa” y solo hago que mi navegador sea más pequeño. Se puede ver que si hago mi navegador más pequeño ahora, empieza a volverse sensible. Ahí vamos. Obviamente, este es un cierto tamaño. A veces tu sitio web no se verá perfecto en cada tamaño, pero la mayoría de los tamaños, se verá bien. Ahí se puede ver. Entonces alguien va [inaudible] a ver cómo se ve. Por eso es genial usar rejillas y flexboxes porque es fácil apilar cosas, y es fácil hacerlo sensible. 14. SEO básico: [ MÚSICA] Solo te voy a mostrar cómo hacer algo de SEO básico. Una vez que hayas finalizado tu sitio web y hayas ajustado todo lo que necesitabas, todo lo que vas a hacer es ir a la sección de páginas en la parte superior izquierda. Acude a las páginas principales que tienen el contenido ahí y da clic en el botón de llamada pequeña. Te va a llevar a la configuración de la página de inicio aquí. Una vez que agregue un plan de sitio, puede hacer que una página de aprendizaje específica protegida por contraseña. A lo mejor tienes un cliente privado o una audiencia que quieres enviarles algo determinado, entonces necesitaremos una contraseña ahí. Pero eso es todo. Después bajamos y conseguimos la configuración de SEO. Esta es una vista previa de cómo va a quedar en la Búsqueda de Google. Por ejemplo, si voy a Google y escribo en mi página web, puedes ver Jeremy Mura- Inicio. Esto es lo que dice aquí y ese es el título que tengo ahí. Cuando tienes diferentes sitios web, puedes ver Google, tiene los subsitios que muestra. Lo que tenemos que hacer es agregar la etiqueta de título. Siempre que hagas esto, quieres asegurarte de que usas palabras clave que están relacionadas con tu nicho, tu ubicación, y cosas que son relevantes. Básicamente puedo decir Diseñador de identidad de marca en Western Sydney-Jeremy Mura. Estoy usando Sydney, Western Sydney específico. Estoy usando Marca Identity Designer o podría decir diseñador de logotipos, eso podría funcionar. Intenta averiguar tus palabras clave que la gente realmente busca. Entonces tenemos la descripción del Meta. Esta descripción del Meta es simplemente básicamente el texto extra. Se puede ver el texto aquí en la parte inferior. Se puede decir, Jeremy ayuda a las pequeñas empresas a crear una marca estratégica para hacer crecer su negocio en línea. Eso es sólo una línea. Normalmente quieres probar y tener dos líneas, pero puede ser bastante corto. Crear una marca estratégica para hacer crecer su negocio en línea y construir una audiencia que ame sus productos. Enfriar. Puse pequeños negocios ahí pero estratégicos. Probablemente sea bueno si digo identidad estratégica de marca para hacer crecer su negocio en línea y construir una audiencia que ame sus productos. Enfriar. Se puede ver la vista previa ahí, qué está apareciendo; eso es bastante guay. Impresionante. Ahora, tienes la configuración de Open Graph. Normalmente no hago esto realmente porque no comparto cosas en mi página web a Twitter. Si estoy en Instagram o YouTube, solo comparto directamente a mis otras páginas sociales. Si tienes blogs y esas cosas, entonces esto es útil. Pero una vez más, Open Graph. Te dice lo que sea que estés compartiendo con Facebook, Pinterest, Google desde tu sitio web. Se puede ajustar el título, también la descripción. Aquí puedes tener una URL. se puede hacer. Pero típicamente dejo eso fuera. Puedes ver Google aquí tiene cuenta e ir a Google Classroom y también continuar a Google Drive. Si no quieres que se muestren ciertos sitios web, simplemente puedes hacer clic en “Excluir esta página de los resultados de búsqueda del sitio”. Eso básicamente significa que lo ocultará de los bots de búsqueda escaneando a través de esa página básicamente. Pero si lo quieres encendido, entonces puedes ver que lo que va a aparecer como tu etiqueta de título, puedo apagarla o encenderla, igual que la descripción también. Entonces puedes tener una imagen también, pero eso está totalmente bien. Entonces también tienes código personalizado. Normalmente dejo eso, no toco eso. Básicamente así es como se agrega el SEO. Tienes que hacer eso para cada sitio web individual. Una última cosa cuando se trata de SEO también, obviamente usando CLI, títulos con palabras clave relevantes y cosas así. Pero también puedes ir a tus imágenes. Yo sólo voy a guardar los cambios. Voy a mis imágenes. Por ejemplo, voy a ir a esta imagen aquí. Haga clic en la llamada. Se puede ver en la parte inferior hay Alt Text. Alt Text es textos HTML que aparece mientras se carga el sitio web. Si el sitio web no puede cargar la imagen por cualquier motivo, internet lento, etc, entonces necesitas ser descriptivo aquí. Diré imagen persona caminando por diseño de postura. Estoy siendo descriptivo, explicando cuál es el sitio web. Ponga un alto completo. También puedes usar decorativo, no transmitas significado y no requieres Alt Text. Si es solo una imagen como una ilustración, haces clic en “Decorativo” o en un icono. Pero si tiene un poco de descripción, entonces puede agregarlo de nuevo. Obviamente volví y ya se ha ido. Pero eso es Alt Text cuando se trata de SEO. El sitio web generalmente te dirá si necesitas ajustarlo. Normalmente si vienes aquí, te dirá cosas que debes ajustar para el sitio web. Aparte de eso, lo único otro es apuntarse a Google Analytics. Si voy a revisar mi cuenta, solo voy a iniciar sesión rápidamente aquí. Puedes ver aquí que estoy viendo algunos detalles en mi página web. Doscientos usuarios, 230 sesiones, tasa de rebote es de 66 por ciento. Duración de la sesión. ¿Cuánto tiempo hay alguien en mi sitio? Es por un minuto. Puedo averiguar qué es directo, qué viene de lo social, etc. Lo cual es bastante guay. Referencias, diferentes sitios web, YouTube, Webflow. Eso es impresionante. Puedo mirar por país, lo cual es genial también. Simplemente me da un montón de detalles para que pueda ver qué partes de mi página web están haciendo lo mejor. El homepage tiene más vistas, la tienda tiene la segunda más vistas. Entonces mi Guía de diseño gratuito es el siguiente, y luego la Academia Mura es la siguiente. Puedo ver, ¿puedo mejorar mi sitio web? ¿ Puedo mejorar la conversión, etc? También es bueno prestar atención al escritorio y al móvil. Mucha gente está viendo desde escritorio, como 75 por ciento. El móvil está en 23 por ciento en este momento, lo cual es genial. Configura Google Analytics y realmente te va a ayudar a gestionar el sitio web y mejorar el SEO. Una última cosa es Google My Business y obtendrás un sitio web que aparece, quieres hacer clic en eso. Es así como obtienes una página en Google. Se puede inscribir. Ya tengo uno por lo que puedo dar clic en “Gestionar ahora”. A ver si carga mi página. Hermosa. Esto es otra cosa buena para SEO. Si aparece cuando gente está buscando en el motor de búsqueda. Mi casa, puedo ver las vistas aquí que se llama la actuación. Puedo actualizar mis horas. Puedo mirar mis críticas. Si hago clic en “Administrar opiniones”, puedes ver todas mis reseñas como esta. Ahora si voy a Google muy rápido y escribo los diseños de Jeremy Mura, se puede ver, boom, solo sale justo en Google. Se puede ver que está certificado. Me dice cuántas vistas, tengo mis críticas también del lado derecho y tiene todos los detalles también. Te recomiendo hacer esto también con fines SEO. Eso va a impulsar. Obviamente, puedes manejar las cosas desde aquí, pero una vez que actualices todo y pones tu sitio web, entonces va a hacer más fácil a la gente buscarte y encontrarte. Esos son mis consejos básicos de SEO. 15. Incrustar calendario y formulario de correo electrónico: [ MÚSICA] Ahora, te voy a mostrar cómo poner incrustación HTML. A lo mejor tienes un formulario de Mailchimp que quieres poner ahí, o tal vez quieras poner tu agenda de citas o calendarios, algo así. Te voy a mostrar cómo usar eso. Tengo mi sencillo diseño. Acabo de tener el contenedor, una envoltura, y luego una caja div, y lo llamé Calendly. Lo que voy a hacer es ir al botón más, desplácese hacia abajo, e ir a incrustar. Voy a arrastrar y soltar eso en la caja. Te va a pedir código personalizado. Lo que voy a hacer es ir a mi Calendly, sea cual sea el sitio que estés usando. Voy a hacer clic en el “Cog” y hacer clic en “Agregar al Sitio Web”. Lo que realmente puedo hacer es convertirlo en un texto popup o en un embed en línea. Para esta situación, voy a usar el embed en línea, y voy a dar clic en “Continuar”. Qué va a pasar, aquí va a producir este código, como se puede ver, que básicamente es HTML. Lo que vamos a hacer es “Control C” o podemos hacer clic en el pequeño botón “Copiar código”. Voy a pegarlo dentro de esta caja, y luego presionar “Guardar y cerrar”. Siempre que hagas un inserto HTML, no se va a mostrar en vivo. Incluso cuando lo previsualices, no aparecerá. Sólo aparecerá cuando realmente publiques el sitio. Voy a la esquina superior, y luego voy a publicar. Obviamente, no he configurado un dominio para esto porque es solo una compilación que estamos haciendo para la clase ahora, pero puedo publicar en el webflow.io. Voy a dar click en “Publicar”. Una vez hecho eso, dirá publicado. Genial. Éxito. Ahora, puedo hacer click izquierdo en esta pequeña flecha, así como así, y me va a llevar al sitio web real, con el sitio web webflow.io. Puedo desplazarme hacia abajo, y en realidad tiene mi forma incrustada de Calendly donde la gente puede entrar y reservar algún curso. Vienen aquí, tal vez quieran reservar una consulta, pueden dar clic aquí, y los llevará al calendario así como así. ¿ Y si quisiera agregar un formulario de correo electrónico? Voy a mis correos electrónicos, y voy a hacer clic en uno de mis formularios, que veas que tengo mi guía de identidad de marca. Puedo hacer click en estos tres puntos, y lo que realmente puedo hacer es ir embed. Debería darme un código, para que pueda ver el código de la línea de encabezado. Lo que realmente voy a hacer es poner esto en el código de encabezado, y luego este es el código en línea para el embed. Voy a copiar esto. Voy a hacer doble clic, y voy a pegarlo aquí dentro y hacer clic, “Guardar” y cerrar. Seguimos en la sección Calendly, pero voy a cambiarlo. Entonces para este código aquí, voy a presionar “Copiar”. Básicamente, necesita enviar un mensaje al servidor de flodesk, para que pueda sacar la información de ahí. Lo que realmente puedo hacer, ir y hacer clic en la página “Contacto”, desplazarse todo el camino hacia abajo, y se puede ver, puedo poner dentro del código de cabeza. Esto solo funcionará para esta determinada página, pero si la pones en el código de cabecera en la configuración de back-end real, entonces funcionará para cada página. Voy a ponerlo ahí. Voy a dar clic en “Guardar”, luego voy a dar clic en “Publicar”, y ya veremos qué pasa. Ojalá, debería tener mi pequeña forma ahí. Pero básicamente, así es como lo haces cuando estás poniendo un formulario de correo electrónico. Así como así, ya puedes ver, tenemos nuestra forma. Puedo entrar aquí y escribir mi nombre y mi dirección de correo electrónico, y va a enviar un correo electrónico, y voy a conseguir eso, y luego puedo dar clic en “Descargar” como puedes ver allí. Obviamente, tiene un fondo negro porque ese es el diseño que he diseñado en este formulario. Si quiero editar el formato, tendré que volver atrás y cambiarlo aquí. cuales sean los colores de marca que utilices en tu sitio web, asegúrate de que sea el mismo color de fondo para que parezca que se mezcla. 16. Interacciones simples: Ahora te voy a mostrar cómo hacer algunas interacciones picantes. Voy a mantenerlo muy sencillo. Podría ir más avanzado, tal vez más tarde por la pista cuando actualice el curso. Pero para éste, estoy pensando muy básico. Ahora voy a seleccionar el encabezado o el objeto o el fondo, lo que sea, lo que quiero animado primero. Voy a seleccionar el “Cabecera H1”. Tiene el estilo de rumbo H1, lo cual es genial. Voy a ir a la esquina superior derecha, haga clic en el pequeño rayo. Me va a llevar a las interacciones. Lo que quiero hacer es en lugar de hacer un disparador de elementos, quiero hacer un disparador de página. Cuando la página se cargue, quiero que el texto venga y se desvanezca. Voy a hacer clic en el botón pequeño más aquí, y voy a establecer cuándo quiero que se active la interacción. ¿ Quiero que se active en la carga de la página o en el desplazamiento de la página? Voy a hacer carga de página. Lo que voy a hacer es ir a la Acción, y voy a seleccionar “Iniciar una animación”. Me está diciendo cuando la página empieza a cargarse, esta es la acción que tomará. Voy a empezar la animación. Voy a presionar el botón “Plus” aquí, y ahora, me lleva al menú Acción. Lo que tengo que hacer es pulsar de nuevo el botón “Plus”. Para esto, lo que quiero hacer es que quiero hacer opacidad. Lo que voy a hacer es que la opacidad lo hará ir a cero. Esta es la fase de inicio. Voy a bajar eso a cero. Ya puedes ver, el H1 Dirigirse se ha ido. Lo que quería hacer es querer más el final de la animación, y quiero volver a poner la opacidad. Para este, voy a traer la opacidad al 100 por ciento. Si presiono “Play”, puedes ver qué pasa aquí. Se inicia en cero, y va al 100 por ciento realmente fácilmente. Si selecciono en una de estas cosas, necesito seleccionar la primera y hacer clic en “Establecer como estado inicial”, lo que comienza en cero por ciento de opacidad. Asegúrate de que tengo los elementos seleccionados. Ahora puedes ver aquí que va a afectar al elemento seleccionado H1. Se puede ver, es un H1 Encabezado. También puedes hacerlo en la clase. Eso significa que va a afectar cada título o titular con el H1 Rumbo en él. Prefiero hacer eso, por lo que afecta todo en la página. Si presiono “Play”, puedes previsualizar cómo va a bajar. Lo que también puedo hacer es que voy a seleccionar el último bit. Ya puedes ver, puedo iniciarlo After Previous Actions, por lo que va a empezar después de la primera sección. Puedo hacer una facilidad en, así que una facilidad básicamente la hace más suave. Puedo hacer facilidad en. Eso es realmente genial. Lo que quiero hacer es añadir un retraso tal vez de, digamos, dos segundos, para que podamos ver cómo se ve. El facilidad de entrada puede ser los primeros 0.5 segundos. Eso estuvo bien, y creo que está bien. Voy a dar click en “Guardar”. También puedo renombrar eso. Justo antes de que la voy a guardar, voy a decir desvanecerse. Después voy a hacer clic en el botón “Guardar”. En esta parte, se puede ver que tiene el desvanecimiento. Si hago clic en él, me llevará vuelta a él, y puedo editarlo. Puedo borrar las cosas y cambiar lo que quiera ahí dentro. lo que puedo hacer, puedo hacer click en “Vista previa”, y se puede ver el desvanecimiento así como así. Obviamente, los dos segundos son un poco largos, así que voy a volver atrás, cambiar el retraso, y hacerlo un segundo. Haga clic en “Guardar”. Voy a volver a hacer clic en “Vista previa”. Se puede ver ahí, se desvanece de verdad, muy bien. Impresionante. Ahí es cuando la página comienza a cargarse. También puedo agregar una animación separada cuando la reproducción termine de cargarse, pero no necesito hacer eso. Si sigo adelante y hago clic en “Vista previa”, se puede ver que la animación está funcionando. Volveremos a ir. Mira el texto, se está desvaneciendo bien y fácilmente. ¿ Y si quisiéramos añadir algunos textos volando o el botón volando adentro? Voy a dar click en mi texto “Párrafo”. Voy a dar clic en “Disparador de página”. En carga de página, queremos hacer otra acción. En lugar de seleccionar lo de “Fade in” aquí, queremos hacer uno nuevo. Para este, voy a hacer movimiento. Voy a dar clic en “Establecer estado inicial”. Lo que queremos hacer es mover el eje x de la página así, entrando desde la izquierda. Voy a plus y sí me muevo otra vez. Para este, voy a asegurarme de que esté en cero. Queremos seleccionarlo y seleccionar la “Clase”. En lugar de ese único elemento, queremos que sea toda la clase. El retraso, sólo lo haré un segundo también. Voy a dar click en “Guardar”. Voy a golpear “Preview” y sólo poner atención a los textos de párrafo. Debería volar dentro. Sucede muy rápido. Tenemos que hacerlo un poco más lento. Voy a volver aquí. Tenemos esto, y tenemos la facilidad en. Necesitamos en realidad la facilidad. Podemos hacer cualquiera de estos personalizados. Es realmente genial. Haremos En Quart. Voy a hacer retraso dos segundos, fácil de entrar, o hacer que sea un segundo. El film va a estar a cero píxeles, por lo que empieza de nuevo en esa posición. Creo que va a estar bien. Voy a volver. Debería renombrarlo y llamarlo mover. Guardar, y vamos a hacer clic en “Vista previa”. A ver qué pasa. Obtienes el desvanecimiento y el texto volando así como así. Hermosa. Entonces ahora, podemos seleccionar diferentes animaciones. Si quieres ver el desvanecerse, Puedes ver que funciona para esa clase, y es realmente fácil hacer eso. Básicamente, así es como se agregan interacciones. ¿ Y si quisiera agregar un disparador de elementos? Yo voy libro en el botón principal. Puedo hacer un elemento disparador. Yo sólo voy a dar click en esto. Voy a hacer clic en el “Activador de elementos”. ¿ Qué pasa si pasamos el rato sobre el ratón? Podemos agregar todo un montón de cosas. Podemos hacer un grow o un loquero, un giro, una mosca, lo que queramos hacer porque rebotará incluso, pero podemos hacer todo un montón de cosas. Lo que puedo hacer es hacer un pop y ver qué pasa ahí. Voy a hacer el retraso tal vez un segundo. el mouse hacia fuera, podríamos simplemente volver a hacer pop, y luego vamos a dar clic en “Vista previa”. Ya puedes ver, si pongo mi ratón sobre el botón, mira lo que hace. Pops. Cuando lo suelto, vuelve a aparecer. Súper impresionante. Déjame solo editar eso. Puedo asegurarme que lo estés haciendo en el botón Principal ahí, como dentro de la instancia de botón. Voy a volver a dar clic en el hover aquí, y tal vez queremos hacer otra cosa. A lo mejor queremos hacer una columna vertebral o algo así. Podemos hacer giro. Retardo en el sentido de las agujas del reloj, haremos tal vez 0.5 segundos, 0.05. En este, haremos los spin outs, 0.5 segundos. Daremos clic en “Vista previa” ya que puedes ver esto. Si voy haciendo clic en el botón “Vista previa”, mira eso. Eso es bastante guay. ¿Queremos que gire? Vayamos en sentido contrario a las agujas del reloj. retraso sería sólo cero. Está en el hover. Enfriar. Puedo ponerlo en la clase. Aquí abajo, dice elemento. Puedo cambiar la clase. Vamos a probar eso ahora. El botón si pongo el ratón sobre él, se puede ver eso, y se aleja. Eso es bastante guay. Si pones elementos invisibles y porque lo cambié a clase, aquí también va a funcionar en este botón. [ RUIDO] Eso es bastante droga. Es así como haces un disparador de página y un disparador de elementos, dos formas muy simples de simplemente hacer las cosas. Puedes jugar con él, como puedes hacer un ratón encima o pasar el ratón sobre el. A lo mejor tienes botones o tienes ilustraciones o iconos y quieres que se muevan, puedes hacerlo. Si quieres más de un disparador de página simple donde te estás desplazando, puedes hacer que las cosas se muevan también. Esa es otra forma de hacerlo. Esperemos que te haya ayudado a entender cómo usar interacciones básicas. 17. Sistema de diseño simple: ¿ Qué es un sistema de diseño? Básicamente, un sistema de diseño está combinando todos los estilos, los elementos, y componentes de una marca para un sitio web. Es como cuando diseñas una identidad de marca y la marca usa impresión como tarjetas de visita y tiene un logotipo y todas esas otras características. Es básicamente una guía de estilo, pero para digital, para web básicamente. Es literalmente un sistema donde tú, como diseñador, o si tienes un equipo de diseñadores, o el negocio cuando entregues el proyecto, un sistema para asegurarte de que usan todos estos elementos juntos como parte de todo el sitio, por lo que tienen características globales. Ahora, les voy a mostrar algunos ejemplos de algunos sistemas de diseño aquí en Dribbble. Por ejemplo, puedes ver aquí, si hago clic en uno de estos, puedes ver aquí un sencillo sistema de diseño. Tiene los colores, los colores de la marca, el sistema de tipografía, los encabezados, los estilos de párrafo, cualquier cita. También tienes algunos componentes de interfaz de usuario. Si bajo, aquí encontrarás algunos más. Por ejemplo, este tiene un montón de botones, interfaz de usuario, módulos, tarjetas, todo un montón de cosas diferentes, incluso entradas para formularios y cosas. Se puede poner muy complejo si tienes un sitio web grande, pero si es un sitio web de cliente simple o para ti, no necesitas nada loco. Podría ser simplemente una simple guía de estilo o sistema de diseño. Ahora, puedes ir a Dribbble y escribir styleguide en la parte superior y obtendrás todo un montón de cosas. También puedes escribir sistema de diseño aquí, y si presiono “Enter”, obtendrás un montón de cosas diferentes aquí, diferentes componentes, diferentes elementos. Este, puedes ver que tiene los colores, la tipografía una vez más, las barras de pestañas, botones, avatares, iconos, campos de texto. Básicamente, si actualizaste uno de estos estilos, va a cambiar todo el estilo sobre todo en la página web. Es un cambio global. Por eso es bueno tener uno de estos porque todo con la misma clase en Webflow o en la web, realidad va a afectar un cambio en todo, y por eso es inteligente diseñar así. Ahora, puedes ir a Webflow. Si vas a Showcase, quieres entrar al bar y puedes escribir en guía de estilo. También puedes escribir en sistema de diseño y en realidad podemos encontrar un proyecto y clonarlo. Aquí hay unos cuantos. Voy a escribir en sistema de diseño porque encontré uno antes eso era realmente útil. Encontré este, éste fue bastante guay. Ya tiene 400 clones, eso es realmente genial. Se puede hacer clic en “Ver proyecto”. Lo que pasa aquí es que eres capaz de ver el diseño de página real en Webflow. Puedo hacer clic en “Abrir en Webflow”, y eso se va a abrir. Se puede ver este ejemplo. Voy a mirar la página. Es sólo una página. Puedo hacer clic en “Vista previa”, y puedes ver si hago clic en estas pestañas, básicamente se va a desplazar hacia abajo a esas áreas. El encabezado está aquí. Tiene tipografía, párrafos. Tiene cosas de texto rico, colores, botones, todo un montón de cosas diferentes. Si voy a la esquina superior derecha, se puede ver que dice modo de lectura. Lo que quiero hacer es hacer clic en “Clone Project”. Ahora, una vez que hagas eso, iré a éste porque ya lo he clonado, puedo ver todos los envoltorios, los dibs, todo el contenido aquí. El caso es que en realidad puedo editar esto. Por ejemplo, este encabezado tal vez no quiero fuente Inter, puedo cambiarlo a fuente Merriweather, y ahora se va a cambiar en todos los sentidos. Ahora bien, si construyo un sitio web, hago las páginas normales, va a afectar todo, siempre y cuando las clases sean las mismas. Este es un rubro H1. Esto es realmente genial. Aquí tiene un montón de cosas. Sí te recomiendo usar un sistema de diseño básico para tu página web, te va a ayudar. Parrillas también. Como se puede ver aquí, espacios. Te ahorrará tiempo, pero tomaría un poco de una curva de aprendizaje solo para acostumbrarte a usarlo y cosas así. Pero en general, siento que es una práctica realmente genial en la que entrar. Pero si estás poniendo tu primer par de sitios web, no te estreses demasiado, solo juega y úsalo. Pero si quieres meterte en esto, solo clonar un sistema de diseño para que no tengas que hacerlo desde cero, y estoy seguro de que te va a ayudar una tonelada. 18. Añadir archivos de Lottie: Ahora, voy a mostrar una herramienta increíble que te permite integrar animaciones con Webflow sin problemas. Se llama LottieFiles. Simplemente puedes ir a lottiefiles.com, y puedes descargar animaciones gratis. Así es como se ve el sitio web. Es apoyado por compañías increíbles, y es simplemente realmente genial. Se puede ver LottieFiles. Uno de los beneficios es que estos son más pequeños que los PNG y GIF, y se cargan más rápido que los MP4s también, por lo que puedes ver aquí un ejemplo de eso. Es mucho más comprimido, y se puede ver que la gente siempre está subiendo nuevos LottieFiles, animadores, etc. También puedes descargar el plug-in para After Effects, que puedas comprobarlo. Tienen los archivos de descarga aquí. Simplemente ve al Diseño en la parte superior, y haz clic en “Crear con After Effects”. También puedes usar el Editor, que te permite editar en línea si no eres animador. Simplemente puedes descargar estas herramientas desde Adobe Cloud o el plug-in allí. Se puede ver que se puede exportar directamente desde After Effects a un LottieFile. Eso es LottieFiles. Es realmente útil. Lo que quieres hacer es ir a Discover y dar clic en “Free Animations” en la esquina superior izquierda, y te va a llevar a esta sección aquí, donde literalmente puedo descargar cualquier animación, y puedes usar filtros en la parte superior por, por Popular. Lo que sí tienen ahora se llama en realidad Categorías, por lo que puedo buscar las específicas que quiera. Si me desplaza hacia abajo, puedes ver que tienen un montón de cosas diferentes: motion graphics, UI, todo algo diferente, incluso animaciones de cerveza, lo cual es genial. Vamos a hacer clic en eso. Siéntete libre de descargar el que quieras, lo que sea que flota tu barco. Este se ve bastante guay, Fiesta de Año Nuevo, pero solo hay tantas animaciones diferentes. He ido adelante y descargado unos cuantos. Si quieres descargar una animación, por ejemplo, si quieres esta aquí, solo voy a dar clic en ella. Se quiere ir a la parte superior, y hacer clic en “Descargar”, y lo que se quiere descargar es un archivo Lottie JSON. Podrás descargar los GIF y MP4, pero éste es el que queremos, así que haz clic en eso, y debería descargarte a tu computadora. Lo que voy a hacer es saltar a Webflow. Ahora he ido adelante. Ya he descargado una pareja antes, y lo que queremos hacer es agregar eso, así que solo voy a desplazarme hacia abajo, y quiero agregarla a esta sección. Tengo una pequeña charla uno. Lo que voy a hacer es dar click en el lado izquierdo, en el Activos, y se puede ver que arrastré ese ya, pero sólo voy a arrastrar en estos otros dos así como lo harías normalmente como una imagen normal. Ahora puedes ver que tenemos estos archivos JSON, que son la animación. Puedo poner mi ratón sobre él, y eso me va a mostrar como se puede ver ahí. Ahora lo que voy a hacer es que sólo voy a dar clic y arrastrarlo dentro de mi contenedor aquí. Tengo esto. Puedo cambiar el tamaño de la misma. A lo mejor sólo quiero bajar los píxeles, tal vez 300 píxeles, así. Ahora si hago clic en “Vista previa”, puedes ver la animación se ejecuta automáticamente. Súper fácil. Realmente no tuve que hacer nada porque está integrado automático. Se puede ver cómo la animación en realidad se detuvo. ¿ Y si quisieras realmente darle un bucle? Puedo volver a salir del modo Vista previa. Voy a hacer doble clic, si voy abajo, se puede ver que dice “Loop”. Yo quiero asumir eso. También puedo jugar en reversa, y también puedo cambiar la duración incorporada si no estoy en looping. Sólo voy a ir a dar clic en “Vista previa” otra vez, y ahora automáticamente debería estar volando una y otra vez sin parar. Ahí lo tenemos. Tan simple, tan fácil. Ahora te voy a mostrar una forma de crear una animación con el LottieFile. He ido adelante y he ido a mi otra página, y se puede ver aquí, tengo toda mi página de procesos. Tengo tres pasos sobre cómo trabajo. Lo que voy a hacer es ir al paso 2. Te voy a mostrar cómo hacer una animación de desplazamiento usando el LottieFile, así que voy a dar click en el activo. Voy a arrastrar en estos diseño gráfico uno, y sólo arrástrelo debajo de la sección de párrafos aquí. Se puede ver este bonito, gran icono. Ahora lo que puedo hacer es cambiar los píxeles del mismo. Vamos 600. Una vez que tengamos nuestra animación, queremos asegurarnos de que la seleccionamos, así que voy a dar click en ella, y se puede ver que está seleccionada en el navegador. Voy a ir a la esquina superior derecha, y asegurarme de que mis interacciones estén seleccionadas aquí. Vaya a Activador de elementos, y haga clic en el botón “Plus”. Ahora lo que quiero hacer es bajar a “Mientras desplácese a la vista”. Esto nos va a permitir, conforme nos estamos desplazando hacia abajo, que la animación deje reproducirse. Ahora voy a hacer clic en eso. Voy a dar clic en “Seleccionar una acción”, y hacer clic en “Reproducir animación de desplazamiento”. Sí tienes algunos ajustes aquí en los límites de la animación. Puedes jugar con eso, pero solo voy a dejar eso por ahora, y puedes ver que tienes una animación de scroll, y se llama New Scroll Animation. Voy a dar click en esto, y hacer clic en el “Cog”. Se puede ver en el lado derecho, se puede ver que tiene una etiqueta amarilla de exclamación, así que obviamente, no está funcionando, así que sólo voy a asegurarme de que seleccionemos nuestra animación Lottie. Voy a dar click en “Plus”, y voy a dar click en “Lottie”. Se puede ver la integración debería estar apareciendo, y se puede hacer clic en “Lottie” allí. Asegúrate de que esté seleccionado y plus, y luego vamos a tener la Lottie ahí, como puedes ver. Enfriar. Como puedes ver, cuando esté en cero por ciento, la animación estará en cero fotogramas, por lo que estará en la parada, y cuando estemos al cien por ciento, queremos hacer avanzar la animación. Se puede ver la animación es previsualización. Queremos que sea al cien por ciento, entonces lo que voy a hacer es agregar una facilidad de fotograma clave en. Voy a poner esto en facilidad adentro, y luego el 100 por ciento uno a gusto fuera, para que tengas una animación suave ahí. Voy a dar click en “Guardar”. A medida que me estoy desplazando hacia abajo, se puede ver la reproducción de animación. Eso se puede ver. Podría parecer un poco irregular porque estoy grabando la pantalla, pero se puede ver cómo se mueve, lo cual es realmente genial. Podemos hacerlo con cualquier otra animación. Probemos la cerveza de aquí. Voy a arrastrar eso hacia abajo. Yo sólo voy a tomar el Preview. Tenemos la casa uno, lo siento. Tenemos la casa uno, eso es genial. Puedo volver atrás y agregar el elemento disparador “Mientras se desliza la vista azul”. También puedo hacer clic en el pergamino, y eso debería funcionar también. Voy a volver arriba. Desplazarse a través, se puede ver que es animado, y como me estoy desplazando hacia abajo, se puede ver que está pasando así. Siempre se puede volver atrás, y nosotros podemos ir, y editar la animación de desplazamiento. Podemos cambiar la flexibilización si no quieres la vista previa en vivo de la flexibilización. Puedes tomar vista previa en vivo en la parte inferior derecha, y puedes ver cómo se va a ver. Eso se ve bastante guay. Es así como se agrega una animación de desplazamiento. 19. Conectar el dominio: Ahora una vez que estés contento con tu página web, te voy a mostrar cómo conectar tu dominio. Ahora, todo lo que tienes que hacer es ir a la esquina superior derecha. Cuando hagas click en “Publicar” y quieras publicarlo en un dominio personalizado, verás que aquí hay un botón que dice “Clic aquí”. Ahora voy a hacer clic en eso y me va a llevar a configuración de la cuenta en el backend del proyecto. Verás que de inmediato te llevará a la sección de facturación y eso se debe a que sí necesitas pagar una cuenta para albergar el sitio web. Una vez que hagas eso, entonces podrás conectar tu dominio. Si no conectas el dominio, entonces tienes que tener Jeremymura.Webflow.ai o como sea tu nombre. Una vez que hayas hecho eso, lo que puedes hacer es desplazarte hacia abajo y llegarás a la sección de dominio personalizado. Ahora, tendrás una opción aquí para conectar el dominio porque estoy en el sitio no lo tengo, voy a ir al otro lado en un segundo. Pero puedes hacer clic en este botón aquí y te mostrará realmente cómo conectar tu dominio. Ahora, personalmente uso GoDaddy para esto. Creo que GoDaddy es un gran sitio web para comprar dominios. Es barato, es asequible, y es realmente fácil de usar. Tienen una interfaz de usuario realmente limpia. Ahora solo voy a volver a uno de mis otros sitios que tengo. Ahora una vez que estés en la configuración de dominio personalizado, puedes ver aquí que la mía ha sido publicada, todo está verde, está todo conectado. Ahora, también puedes agregar dominio personalizado, para que veas que puedes poner un dominio ahí o puedes comprar uno nuevo a través de GoDaddy o Google. Puedes ver si haces click en “GoDaddy” te llevará allí. Ahora, lo que necesitas hacer para conectarlo, es que necesitas conectarte al DNS. Voy a ir a mis productos y necesitas agregar el número de dominio de Webflow a tu dominio. Voy a dar clic en el dominio, hacer clic en los tres puntos, y hacer clic en “Administrar DNS” que significa sistema de nombres de dominio. Voy a desplazarme hacia abajo. Ahora mismo puedes ver que tengo un registro CNAME y el proxy-ssl.webflow.com. Es bastante fácil agregar esto. Puedes editarlo. Básicamente puedes hacer clic en “Agregar” en la esquina superior derecha. Puedes hacer clic en CNAME y luego tecleas en WWW, y en este, solo lo copias desde el sitio web, pegas eso en, y esto puede ser de media hora o lo que sea. Después agrega el registro y luego básicamente solo espera, a veces toma 30 minutos, una hora, lo que sea. Entonces una vez que lo guardes, automáticamente debería ir verde y luego estás listo para ir. 20. Gracias: Iba a decir gracias por unirte a esta clase. Esperemos que aprendas todas las herramientas y técnicas que necesitas para construir increíbles sitios web sin código. Recuerda participar y en realidad hacer el proyecto de clase. Estaré revisando cada proyecto y dando retroalimentación donde pueda y solo para asegurarme de que mejore y mejore y mejore. Ahora si puedes hacer una cosa y solo tienes clic en el botón “Seguir” de mi cuenta para obtener actualizaciones sobre nuevas clases porque tengo todo un montón de clases nuevas llegando en 2022. No quieres perderte eso. Si tiene alguna pregunta o necesita apoyo, por favor solo publique una discusión en el panel de discusión abajo, y contestaré sus preguntas lo más rápido que pueda. En el futuro, estaré actualizando pequeños bits extra en parte del curso. Si sí tienes otras sugerencias o cosas que quieres aprender y sientes que me perdí, definitivamente pon eso como sugerencia en un e-mail o simplemente una sugerencia en el recuadro de abajo. Muchísimas gracias. Esperamos hacer nuevas clases, y nos vemos en la siguiente.