Taller intensivo de diseño estratégico de sitios web™: cómo usar Webflow para crear hermosos sitios web basados en resultados

1. Bienvenido al diseño estratégico de sitios web: ¿Qué aprenderás exactamente en este curso? Ahora bien, este curso no solo te enseñará a construir un sitio web, sino que también te enseñará a construir un sitio web, lo que va a ayudar estratégicamente a que tu negocio crezca La verdad es tener un sitio web que simplemente se ve bien no te va a dar resultados. Lo que necesitas es un sitio web que luzca hermoso pero que también pueda enfocarse estratégicamente en torno a los objetivos de tu negocio Ahora, ya sea que tengas experiencia en diseño de sitios web Zero o incluso un poco de experiencia en diseño de sitios web, este curso te ayudará a entender el diseño de sitios web a un nivel que ningún 0.1% de los diseñadores de sitios web entienda en todo el planeta. Eso puedo decir con confianza porque sé que muchos diseñadores de sitios web saben cómo construir un sitio web No necesariamente saben por qué hacen lo que hacen. En este curso, te voy a mostrar cómo construir un sitio web que te pueda obtener los resultados que necesitas. Vamos a aprender cómo piensan los visitantes de su sitio web cuando realmente aterrizan en su sitio web, cómo generar confianza con los visitantes del sitio web, cómo guiarlos para tomar ciertas acciones que necesita para cumplir con sus objetivos comerciales. Y podrás construir el sitio web de tu sueño simplemente siguiendo el proceso paso a paso en este curso. No hay necesidad de pagar miles por un desarrollador de sitios web caro. La mejor parte es que no necesitas entender nada sobre codificación, desarrollo de sitios web, estrategia o diseño porque podemos ayudarte a construir el sitio web perfecto para tu negocio en lecciones agradables, pequeñas y fáciles de entender. Además, al invertir en este curso, vas a tener acceso a una plantilla premium, que podrás usar para construir tu sitio web más rápido y conseguir que luzca profesional y confiable en minutos. Entonces todo lo que necesitas hacer es tomarte un tiempo para que el sitio web se vea personal para tu marca y negocio, y tienes el sitio web perfecto listo para comenzar a atraer clientes. Nuestro enfoque único para este curso fue hacer que sea lo más fácil y simple posible para cualquier emprendedor o fundador en cualquier parte del mundo crear un sitio web que sea perfecto para su marca en una fracción del tiempo y a una fracción del costo. En lugar de gastar miles en desarrollar un sitio web realmente genial, puedes aprender a hacerlo tú mismo y construirlo para tu negocio y cambiarlo a medida que pasa el tiempo y a medida que crece tu negocio. Como fundador o emprendedor, necesitas entender cómo tu sitio web puede crecer con tu negocio después de que se haya lanzado. Una vez que realmente te hayamos ayudado a lanzar tu sitio web y te hayamos ayudado a llegar a la página superior de Google, que viene un poco más adelante en el curso, también te vamos a enseñar cómo mejorar tu sitio web a lo largo del tiempo a medida que tu negocio se desarrolla. También porque has invertido en este curso, y has confiado en nosotros para guiarte a través de este proceso, te vamos a dar un par de regalos más. Un poco más adelante en el curso, te vamos a mostrar cómo obtener soporte premium gratuito para tu sitio web. Esto significa que si algo sale mal con tu sitio web en cualquier momento 247, tienes a alguien ahí para ayudarte a que las cosas vuelvan a funcionar lo antes posible. Esto también incluye cualquier duda que tengas si quieres hacer alguna solución tú mismo. Básicamente es como tener un asistente gratuito ahí para ayudarte con tu sitio web día y noche 247. También te voy a dar acceso exclusivo a nuestro paquete de iconos y gráficos premium. Estos iconos y gráficos son diseñados a medida por nuestro equipo, y solo están disponibles para los estudiantes de este curso. Usa estos iconos y gráficos axim para los sitios web de clientes que estamos trabajando ahora mismo, costo de hasta $20,000 Y por si eso no fuera suficiente, también vamos a desembarcar cada estudiante que invierta en este curso en cómo instalar un software que pueda ayudarte a rastrear los movimientos del mouse de cada visitante que visita tu Esto puede ayudarte a ver dónde están haciendo clic las personas, qué no están haciendo clic, para mejorar tu sitio web a lo largo del tiempo para optimizar la conversión y obtener el mejor resultado. Ahora, sé que debes estar emocionado por empezar y yo también. Así que vamos a sumergirnos en el curso, y te veré en la siguiente lección. 2. ¿Por qué Webflow es el mejor?: Entonces, ¿qué es el piso web y por qué es tan especial? Bueno, como estoy seguro de que eres plenamente consciente, hay muchos creadores de sitios web diferentes por ahí en línea. Sin embargo, hay algunas grandes diferencias entre otros creadores de sitios web y piso web, y lo que el piso web tiene para ofrecer. Ahora hay muchas razones por las que el piso web es la plataforma de creación de sitios web de más rápido crecimiento en el planeta. Y solo una de las razones por las que tantas personas en todo el mundo están dejando a otros creadores de sitios web más antiguos como WordPress, Wicks y el espacio Square es porque en el piso web, literalmente puedes crear sitios web impresionantes que están enfocados en resultados y pueden ayudarte a hacer crecer tu negocio en una fracción del tiempo sin código y experiencia, y sin costo alguno Inicialmente puede construir su sitio web completo de forma gratuita sin ningún código y sin experiencia en diseño y crear sitios web impresionantes, profesionales y confiables para su negocio. Y esa no es la única razón por la que tantos fundadores y emprendedores están dejando otras plataformas de creación de sitios web como WordPress, Shopper fi, Wicks y Squarespace para obtener realmente todos los beneficios del piso web y lo que el piso web tiene Si has utilizado alguna de las plataformas de creación de sitios web, verás que son bastante restrictivas en lo que respecta a lo que puedes crear. No obstante, el piso web es muy, muy diferente. piso web le brinda total libertad para crear lo que quiera hasta el píxel exacto. Y la mejor parte es que no haces una sola línea de código porque piso web lo hace automáticamente por ti usando EI. Y como consultor de desarrollo de marca, personalmente construyo sitios web para mí y para mis clientes, cada uno de mis seres queridos, y cada uno de mis sitios web que personalmente tengo está en la plataforma de piso web. El piso web me ha permitido crear sitios web personalizados sin que yo mismo haga una sola línea de código. Lo que en realidad ha ayudado a que mi negocio crezca. Inicialmente puedes construir un sitio web confiable, exactamente como quieres que se vea profesional en muy poco tiempo. Uno de los mejores beneficios que me encantan es el hecho de que la IE detrás flujo web es tan inteligente cuando está escribiendo el código para tu sitio web detrás de escena, en realidad lo hace de una manera que ayuda a que tu sitio web se cargue más rápido y cree una mejor experiencia de usuario para los visitantes de tu sitio web. También se asegura de que su sitio web sea totalmente receptivo sin importar qué dispositivo estén viendo su sitio web sus usuarios . Y por si eso no fuera suficiente, Lo que realmente me vendió en piso web hace muchos años fue el hecho de que su soporte premium no se parece a nada que haya experimentado alguna vez de cualquier compañía. De hecho, recuerdo casi borrar todo mi sitio web. Pero por suerte, debido al piso web, literalmente, me vuelves a los 30 minutos de enviarlos por correo electrónico, lograron guardar el sitio web y todo estuvo absolutamente bien Ahora, en la siguiente lección de este curso, voy a mostrarte cómo puedes obtener soporte premium gratuito con piso web para que puedan responderte antes y más rápido para asegurarte de que si tienes alguna duda alguna, te respondan primero como VIP. También me voy a asegurar de que tengas acceso a todas nuestras plantillas para asegurarte de que puedes construir tu sitio web más rápido, nuestro paquete de iconos y gráficos premium, y también el software de seguimiento del comportamiento para ayudarte a mejorar tu sitio web con el tiempo. Pero de todos modos, voy a repasar eso en la siguiente lección hasta entonces. Muchas gracias por tu tiempo y te veré en la siguiente. 3. $500 frente a $10,000 Sitio web: La verdad es que si tienes algún precio de agencias o autónomos por ahí, verás que puedes pagar cualquier cosa desde $500 hasta $10,000 por un Ahora para ser completamente honestos, un sitio web de $500 y un web de $10,000 pueden verse muy similares Entonces, ¿por qué alguien pagaría $9,500 adicionales por un sitio web de $10,000 Si pueden conseguir algo que se vea muy similar por solo $500. Bueno, déjame darte una pequeña idea de mi experiencia y cómo pasé de cobrar $500 por un sitio web a $10,000 en un par de años Ahora bien, aunque dos sitios web pueden verse muy similares, los resultados reales que producen esos dos sitios web podrían ser muy diferentes. Y esto se debe básicamente a la estructura del sitio web, la copia en los sitios web, la forma en que el sitio web real guía a los usuarios a tomar ciertas acciones. Por ejemplo, podría haber un sitio web que se vea genial, y cuesta $500 hacerlo de un freelancer, Pero la realidad es que se necesitan mil mil personas para venir a ese sitio web para conseguir realmente un cliente convertido que pague por algo de la marca. Ahora, por otro lado, podrías tener un sitio web que ha sido desarrollado y organizado estratégicamente de manera que convierta más tráfico en clientes de pago, y este sitio web solo lleva 50 clientes para convertir a un cliente. Ahora, como puede ver, 51,000 es muy diferente Esta diferencia no se debe solo a cómo se ve el sitio web, sino a cómo se organiza el sitio web y cómo está persuadiendo y empujando suavemente a los visitantes del sitio web para que tomen ciertas acciones dentro del Esta fue una enorme curva de aprendizaje para mí hace unos ocho años. Cuando empecé a entender realmente cuáles eran las diferencias entre un sitio web que realmente se desarrolló alrededor los objetivos del negocio y un sitio web que simplemente se veía muy bien. Ahora bien, esto no significa que un sitio web estratégico no pueda verse bien, pero lo que básicamente significa es que no debería ser la prioridad. Puede verse bien, pero no se trata solo de cómo se ve el sitio web. Entonces, como acabamos de cubrir, la primera diferencia principal entre un sitio web de $10,000 y un sitio web de $500 se debe en última instancia a estar enfocado en objetivos El sitio web de $500 puede verse bien e incluso puede sentirse agradable de usar, pero el sitio web de $10,000 va a estar diseñado estratégicamente para ayudarlo a convertir más tráfico en clientes de pago Ahora, la segunda razón todo se reduce a las calorías. Y por calorías, no me refiero a la comida que estamos comiendo, sino a las calorías mentales. Entonces, cuando tenemos un sitio web, lo que realmente nos facilita obtener el resultado que queremos, usar menos energía mental, y eso nos deja menos probabilidades de tener fatiga mental. Por ejemplo, si alguna vez fuiste a un sitio web y simplemente ha sido extremadamente complicado de usar, y solo estás usando mucha y mucha energía para tratar de encontrar el resultado que deseas. Y luego eventualmente solo te aburres y simplemente dejas el sitio web por completo y encuentras una alternativa diferente. A esto se le llama fatiga mental. Y esto en última instancia se reduce a que usemos demasiada energía y calorías en nuestra mente para obtener el resultado que queremos. Ahora, mientras que un sitio web de $500 puede hacer que sea más complicado para la persona en el visitante del sitio web obtener lo que necesita, un sitio web de $10,000 va a estar agilizando ese proceso para ayudarles a llegar a donde quieren ir mucho más rápido Todo esto se reduce a estructurar tu sitio web correctamente, que cubriremos un poco más adelante en el curso. En última instancia, queremos llevar al usuario desde donde se encuentra a donde necesita ser lo más rápido y eficiente posible. Como se puede imaginar a partir de los dos primeros puntos, el tercer beneficio de por qué un sitio web de $10,000 y un sitio web de $500 es tan diferente se debe simplemente a las ganancias que puede generar Obviamente, si estás convirtiendo uno y cada 50 usuarios en tu sitio web a diferencia de cada uno y 1,000, va a marcar una diferencia significativa en la cantidad de dinero que puedes generar cada mes. También te va a costar menos adquirir clientes, y también te va a permitir generar más confianza con los clientes para permitirte cobrar más adelante en el futuro. Así que solo para resumir las tres diferencias principales entre un sitio web de $10,000 y un sitio web de $500, todo lo cual vas a aprender a usar en este mismo curso en las próximas lecciones asegurarte de que tu sitio web esté estratégicamente enfocado en los objetivos de Si eso todavía no tiene sentido completo , no se preocupe. Vamos a cubrir todo muy pronto. En segundo lugar, se va a diseñar un sitio web de $10,000 para que tus usuarios usen menos energía mental Permitirle obtener una mejor tasa de conversión en su sitio web y finalmente ganar más dinero, lo que nos lleva muy bien a beneficiar a tres, que es obtener más ganancias e ingresos. Siempre pienso en mis sitios web como el mejor vendedor de mi negocio. Cada uno de los sitios web que tengo para cada uno de mis negocios debe representar esa marca en particular de la mejor manera posible. Debería darnos la mejor oportunidad posible de convertir a alguien que acaba de visitar el sitio web en un cliente de pago. Podemos hacer eso, y eso realmente va a ayudar a tu marca y negocio crezcan exponencialmente Y la mejor parte es que una vez que realmente te esfuerzas por construir el sitio web y hacerlo bien y obviamente, haciendo todo correctamente, lo que vamos a cubrir en este curso, nunca más tendrás que tocar el sitio web nunca más. Así que constantemente tienes este activo digital, y el empleado casi trabaja duro para ti cada año para traerte más dinero y ventas. Ahora, tal como mencioné antes, vamos a estar cubriendo cada paso para ayudarte a aprender a construir sitios web tal como he mencionado en esta lección. Entonces, sin más demora, vamos a sumergirnos en la siguiente lección del curso. Te veré. 4. Crea una experiencia de usuario sin fisuras: Entonces, ¿cómo se crea una experiencia de usuario perfecta en su sitio web? Bueno, el primer paso es entender la diferencia entre UX y UI. Entonces, ¿qué es UI? Bueno, UI es la interacción entre humano y computadora. Es esencialmente cómo usted es un usuario y el sitio web interactúa entre sí para crear una experiencia general, que luego nos lleva a U X, que significa experiencia del usuario. Ahora, la experiencia del usuario es cómo se construye visualmente el sitio web. Todo esto se centra esencialmente en cómo el usuario siente que realmente está interactuando con su sitio web. Ahora bien, esto es relevante para el software y otras plataformas digitales también. Pero por ahora, solo nos estamos enfocando en su sitio web para asegurarnos de que pueda crear la experiencia más fluida para los visitantes de su sitio web. Entonces, ¿cuáles son las principales diferencias entre UI y UX? Ahora, la primera diferencia principal es el foco de alcance. Ahora donde la interfaz de usuario se centra en los botones y otras cosas con las que el usuario real interactuará, UX es un poco diferente. UX por otro lado no se centra en botones o elementos específicos, sino más bien en la percepción general y la experiencia general del usuario en el sitio web La segunda diferencia principal son las responsabilidades. ¿Dónde se centra UY en cómo se ve el sitio web y qué color son las cosas y todo ese tipo de cosas? UX se centra en cómo se siente realmente el cliente y su viaje real para llegar de donde se encuentra a donde necesita estar para que la marca cumpla con sus objetivos. Entonces, solo para resumir, la interfaz de usuario se centra en cómo se ven las cosas, y la experiencia de usuario se centra en cómo se siente el cliente o usuario cuando está experimentando ese sitio web en particular Entonces, ¿cuáles son los beneficios de UI y UX? Bueno, la noticia verde es que no necesitas ser un experto en UI y UX para crear realmente un gran sitio web. Y la razón de esto es que ya hemos creado plantillas que puede usar para construir sobre su sitio web para, en última instancia, asegurarse de que todas las reglas fundamentales principales ya están en su lugar Esto significa que no importa lo que cambie en la plantilla, siempre se basará en los fundamentos principales y las mejores prácticas de UI y UX Entonces, en última instancia, siempre y cuando no elimines completamente la plantilla, no puedes ir muy lejos. Cuáles son los principales beneficios de usar UI y UX y realmente pensar en ello durante todo el proceso de construcción de su sitio web. Bueno, el primero es el aumento de la satisfacción del usuario. Esencialmente significa que cuando alguien llega a tu sitio web, es más probable que cumpla con los objetivos que has colocado para tu sitio web, a los que llegarán un poco más adelante en el curso, y también van a tener una experiencia más positiva. Por lo tanto, van a ser más propensos a volver a visitar el sitio web en el futuro, lo que me lleva al siguiente beneficio que es el aumento de la participación del usuario Esto esencialmente significa que las personas van a ser más propensas a pasar más tiempo en el sitio web, por lo tanto, impulsándote a subir de rango en Google, y esencialmente conseguirte en la primera página mucho antes. No te preocupes por el SEO todavía. Vamos a cubrir eso más adelante en el curso porque es una especie de una de las últimas cosas que necesitas para poner en marcha antes de lanzar tu sitio web. Pero solo recuerda esto. Cuanto más tiempo pase alguien en las páginas de tu sitio web, más probable es que Google confíe en ti. Y créeme, Google lo sabe todo. Entonces, si podemos usar UI y UX para ayudarlo a construir un sitio web que finalmente está recibiendo más atención de los usuarios. Por lo tanto, Google Sess como más confiable. Es más probable que se encuentre en la primera página de Google en un futuro próximo. Uno de los mayores beneficios de usar UI y UX a lo largo del desarrollo su sitio web y realmente pensar en ello estratégicamente es el hecho de que le ahorra tanto tiempo y tanto dinero en el desarrollo su sitio web y realmente asegurarse de obtener los mejores resultados posibles mucho antes No hay nada peor que desarrollar un sitio web y hacer un montón de cambios diferentes. Simplemente va a perder un montón de tiempo y si estás pagando para que alguien lo haga por ti, te va a costar mucho dinero. Asegurarse de que su sitio web esté hecho la primera vez perfección le va a ahorrar muchas molestias a largo plazo. Ahora, una de las cosas principales a tener realmente en cuenta desde el punto de vista de UX y UI es mantener las cosas claras y simples Y la razón por la que sigo mencionando la fatiga mental y las calorías mentales es porque queremos que el usuario use la menor cantidad de calorías mentales posible ya que está navegando en su sitio web. Van a ser más propensos a pasar más tiempo en tu sitio web. Van a tener una experiencia más positiva. Y por último, realmente van a completar el objetivo que tienes establecido para tu sitio web para ayudar a que tu negocio crezca. Ahora, otro papel clave para una excelente UI UX es la consistencia. Uno de los ejemplos más sencillos de ello es el llamado a la acción. Debe tener un color consistente de llamada a la acción en todo su sitio web. Esto significa que cuando intentas que el usuario haga una determinada acción o persuadirlo para que vaya a una determinada página, esos botones en particular deben ser todos exactamente del mismo color, y esos botones deben sobresalir, y eso es esencialmente algo realmente simple que puedes hacer en cuestión de segundos, y realmente puede afectar el rendimiento de tu sitio web En última instancia, estamos entrenando al usuario para que entienda eso. Este color particular lleva a la acción. Entonces quieres enfocarte en este color en particular a lo largo de todo el sitio web. Básicamente significa que cada vez que vean un botón de ese color en particular, conducirá su derecho a ese botón en particular y será más probable que lo presionen. Y antes de terminar esta lección, solo quiero darte un ejemplo de lo que pueden hacer UI y UX para mejorar realmente la experiencia del usuario. Entonces, si nos sumergimos en este ejemplo de H&M, donde esencialmente tienen una función de navegación de migas de pan en su sitio web, realmente puedes ver cómo esto podría ser útil para la experiencia del usuario Por ejemplo, si alguien está buscando una toalla, y luego van a la playa y toallas de playa de algodón, pero luego quieren volver a toallas para ver otras opciones. En lugar de regresar , o tal vez comenzar el viaje de nuevo, todo lo que tienen que hacer es hacer clic en las toallas, y pueden volver directamente a la página exacta que necesitan estar sin ningún tipo de molestia o confusión. Esto es en última instancia de lo que se trata UI y UX. Mantiene todo lo más simple y claro posible para el usuario. Nuevamente, no necesitas ser un experto en UI o UX porque ya hemos configurado las páginas dentro de las plantillas para que esto sea súper fácil para ti. Pero la razón por la que quiero compartir esto contigo es porque si realmente vas a estar construyendo el sitio web, necesitas buscar oportunidades para que el proceso y el viaje sean lo más fáciles y simples posibles para las personas que visitan tu página web. En fin, espero que esta lección te haya resultado útil. Muchas gracias por tu tiempo, y te veo en la siguiente lección. 5. Ejemplos de sitios web - edición de comercio electrónico: Bien, entonces a estas alturas, estoy seguro que estás listo para ver algunos buenos ejemplos de sitios web por ahí y para entender también por qué son tan geniales. Ahora, los sitios web que estoy a punto de mostrarte son para empresas que realmente venden productos de comercio electrónico. Por lo que en realidad están vendiendo productos en línea y todos utilizan un enfoque muy similar para hacerlo. Y este es exactamente el mismo enfoque que te voy a enseñar dentro del curso. Entonces entiendes exactamente cómo posicionar tu producto o tu marca como deseable y, en última instancia, ser capaz satisfacer las necesidades de tus clientes. Ahora, el primer sitio web de marcas en el que nos vamos a sumergir no es otro que Tesla. Ahora, como puedes ver en el sitio web de Tesla, comienza con un hermoso video del producto. Y puedes ver que están mostrando el producto en muchos entornos diferentes y en muchas situaciones diferentes. Y la razón por la que están haciendo eso es para mostrarle al cliente. Puedes integrar este producto a tu vida sin problemas. Vamos a desplazarnos un poco más hacia abajo en la página de inicio y veamos qué más podemos encontrar. Ahora, si nos desplazamos un poco hacia abajo, verás alguna hermosa fotografía del producto. Nuevamente, aumentar la deseabilidad, lo cual es súper importante, sobre todo cuando se trata de comercio electrónico Y si seguimos desplazándonos, entonces podrás ver más modelos y más ofertas de la marca. Estos son esencialmente los diferentes vehículos que Tesla puede ofrecer en este momento. Y mantienen las cosas súper simples para que en última instancia puedas encontrar el auto que más te parezca adecuado a tus necesidades personales, y luego puedes hacer clic en él para aprender un poco más. Ahora una cosa que es súper importante tener en cuenta es el hecho de que estas imágenes son de súper alta calidad. Esa es en definitiva una de las mayores lecciones cuando se trata de comercio electrónico. Literalmente puedes vender dos veces, tres veces o tal vez incluso diez veces más producto simplemente asegurándote de que fotografía de tu producto sea perfecta. Nunca te sientas mal por pagar por una fotografía de producto de buena calidad. Porque cuanto mejor sea tu fotografía de producto, más deseable será tu producto para el cliente que realmente vea el producto en el sitio web, y no solo hará que sea más probable que compren, sino que también hará que sea más probable que estén dispuestos a pagar más por tu producto o servicio, básicamente, aumentando la rentabilidad al instante. Bajemos un poco más para ver qué más podemos encontrar. Ahora, el sitio web de Tesla parece estar extremadamente enfocado visualmente, lo que de nuevo, es muy importante para los sitios web de comercio electrónico, pero no se ve mucha información en las páginas reales. En realidad, se centra en las imágenes reales del producto en sí y las soluciones, lo que hace que sea muy fácil para el cliente encontrar la página siguiente en cuanto a dónde debe estar Entonces, por ejemplo, si queremos echar un vistazo a los diferentes vehículos y básicamente conocer más sobre el modelo S, entonces nos llevan a una página de ventas donde podemos conocer más sobre el auto y también ser vendidos en última instancia sobre sus características y beneficios. Ahora, tener una página de ventas separada para todos y cada uno de los productos que vendes es súper importante porque realmente te permite obtener inmigrantes súper profundos a cuánto valor y qué valor puede proporcionar tu producto a tu público objetivo. Y como puedes ver, incluso en la página de ventas, está sumamente enfocado visualmente. Entonces Tesla realmente no te está vendiendo los beneficios y características reales en este momento. Todavía te están vendiendo la sensualidad del auto. En última instancia porque ellos lo saben, en última instancia estás comprando una prueba por el diseño del auto, y no necesariamente porque tiene más espacio para el maletero, o incluso por el kilometraje o la naturaleza eléctrica del auto. Lo estás comprando porque es un movimiento, probablemente por Elon Musk para ser completamente honesto, y también por el ahorro, la desgravación fiscal, pero en última instancia por lo ol que se ve, porque la prueba los autos no se parecen en nada a cualquier otro auto del mercado Y seamos sinceros, como este auto se ve extremadamente sexy, se ve genial. Y la mejor parte es cuando realmente llegas a ordenar el auto, en realidad lo hace súper fácil y sin esfuerzo, empieza a escoger el auto que quieras Entonces, si quieres el auto en un bonito y hermoso color rojo, puedes cambiar las ruedas, y puedes ver exactamente cómo se verá tu auto en cada ángulo. Puedes elegir el interior, puedes cambiar el color del interior. Literalmente puedes tener el auto exactamente como lo quieres. Ahora, sé que puedes hacer eso con prácticamente cualquier tipo de auto en estos días, siempre y cuando estés dispuesto a pagar el dinero, pero así es como Tesla realmente te muestra el auto y todos los diferentes beneficios en un formato visual. Hacen que sea súper fácil para el usuario, ese somos tú y yo entender lo que están obteniendo. Y por ejemplo, ¿puedes recordar en una lección anterior donde empecé a hablar de calorías mentales y fatiga mental? Piensa en esto. Tesla ha entrado literalmente en todo este dolor y esfuerzo para mostrar la función de piloto automático mejorado en un formato visual para que realmente pueda entender exactamente lo hace la función de piloto automático sin tener que leer una sola palabra de texto Esto literalmente muestra el auto que vas a comprar en acción en una carretera, listo para usar la función mejorada de piloto automático Entonces, cuando se trata de vender realmente esta característica y beneficio en particular, no solo estás leyendo al respecto. De hecho lo estás viendo en tiempo real, lo cual seamos sinceros. No muchas empresas de autos están haciendo. Y esto es lo que hace que Tesla sea tan especial como marca. Realmente les encanta usar bellas imágenes para vender su producto Entonces veamos cómo Apple puede hacer las cosas un poco diferente. Entonces como puedes ver, Apple está muy en el espíritu navideño ya que esto se está filmando en diciembre, así que solo faltan un par de semanas para Navidad, así puedes ver que están muy por delante de la curva. Ahora, si nos desplazamos hacia abajo, podemos volver a ver El producto real que se está utilizando en situaciones de la vida real. Ahora bien, no sé si puedes recordar, o si tienes la memoria de un pez dorado, que a veces lo hago, que a veces lo hago, pero exactamente este mismo enfoque se utilizó dentro del sitio web de Tests Estaban mostrando cómo el auto puede beneficiar al usuario, integrarse en su vida de manera sencilla Y este es un tema muy común, que verás en todos los sitios web de comercio que realmente entienden cómo vender a los clientes. Ahora bien, si nos desplazamos hacia abajo, de nuevo, volverás a ver bellas imágenes para aumentar la deseabilidad Y un formato realmente simple de básicamente solo enlaces para conocer más sobre el producto. Ahora, vamos a ir a estructurar tu página de inicio como en marca de comercio electrónico y todas esas cosas más adelante en el curso. Pero puedes ver que el único propósito de la página principal es llevarte a las páginas de ventas de los productos particulares que te puedan interesar lo antes posible. Y literalmente tienes todos los productos más populares que Apple está tratando de vender justo frente a ti. Tienes el iPhone 15 pro Titanium edition. Tienes el iPhone 15 con una nueva cámara, nuevo diseño y nuevo foi Esa es una palabra nueva. Ni siquiera sabía que eso existía, pero tienes los enlaces para comprarlo y también para conocer más directamente a la página de ventas. También tienes el Macbook Pro, el AP Hods Pro, el reloj, la tarjeta, el trading Tienes literalmente todo lo que necesitas para llegar a las páginas de los productos más vistos. Y puedes ver que cada producto, sin importar cuál sea, está perfectamente presentado, por lo que se ve nítido y hermoso, sin importar qué imagen estés mirando Nuevamente, solo reafirmando el hecho de que la fotografía, cuando se trata de Un comercio es súper clave Así que no te vayas barato en él. Asegúrate de invertir en tu fotografía. Especialmente cuando se trata de un sitio web de comercio electrónico. Ahora, cuando realmente entras en el sitio web y las páginas de ventas de Apples, es entonces cuando las cosas realmente empiezan a aclararse. Lo ves para los AirPods Pro, que es literalmente uno de los productos más poco sexys Literalmente solo los metes en tus oídos, y son esencialmente auriculares inalámbricos. Eso es. Apple tiene esta forma de hacer que sus productos se vean realmente sexys. Ahora, esta animación real se desarrolla usando mucha animación. Y esto en realidad no es tan difícil de hacer siempre y cuando tengas los medios de comunicación reales para hacerlo. Ahora, podemos entrar en eso un poco más adelante en el curso, pero solo enfocarnos en lo simples que son las páginas de ventas de Apple. Nunca muestran demasiada información, y mantienen las cosas súper simples. Después de todo, literalmente solo están vendiendo auriculares y lo están manteniendo extremadamente básico. Pero incluso con solo desplazarte por esta página en particular, me está haciendo querer comprarlos. Está haciendo que el producto se vea más deseable de lo que necesariamente es. Y de hecho, esa es una de las principales razones por las terminé comprando estos auriculares porque en última instancia solo se veían tan bien en la página web y tuve que ir a la tienda para verlos por mí mismo. Y una vez que los puse en mis oídos, entonces tuve el efecto de cancelación de ruido, me lo vendieron Necesitaba tenerlos. Ahora, no vamos a pasar por toda la página. Pero como puedes ver aquí, Apple realmente se enfoca nuevamente mostrando los beneficios del producto de manera visual, como puedes ver aquí y también aquí Y esto es algo muy consistente. Y verás esto en el sitio web de Tesla, sitio web de Apple, y también en el siguiente sitio web que estamos viendo. Les gusta mostrar visualmente los beneficios del producto. Nuevamente, volviendo a la fatiga mental y utilizando la menor cantidad de calorías mentales posible. Entonces todos podemos estar de acuerdo, el sitio web de Apple ve y se siente realmente fuerte, especialmente cuando están vendiendo un producto tan básico y aburrido. Pero en lo que respecta a los productos aburridos, ¿qué tan aburridos podemos llegar a ser? Bueno, pensé que probablemente veríamos el producto más aburrido del mundo entero para que pudiéramos ver cómo venden ese producto a su público Tarko Entonces esto es sonar, y Ring es esencialmente un timbre de video que puede ayudarte a ver quién está en tu puerta sin ningún esfuerzo, y puedes monitorear las cosas en tu teléfono y hablar con la gente Es bastante inteligente. Pero es un producto bastante aburrido. Entonces, ¿cómo lo venden? Bueno, vamos a saltar y averiguarlo. Entonces, como puedes ver por su página de inicio, nuevamente, puedes ver que su página de inicio simplemente está mostrando todos los diferentes productos que pueden ofrecer de una manera realmente simple y fácil de navegar Puedes llegar a cualquiera de sus productos simplemente usando estas cajas. Ahora, por supuesto, también puedes ir a la barra de navegación donde también puedes llegar fácilmente a cualquiera de los productos aquí. Entonces vayamos a la cámara stickup y veamos de qué se trata Bien, así como pueden ver, esta página de producto en particular es mucho más conservadora que las páginas de Apple y Tesla. Ahora bien, lo que puedes ver, sin embargo, es que la fotografía de producto real, de nuevo, es realmente impresionante. Se ve increíble. Y también se pueden ver los diferentes colores que tienen, de los productos, por lo que lo tienen en blanco y negro. Y también se puede ver que vuelven a tener el producto, mostrado en ciertas situaciones, y se puede ver más de esto. Entonces, por ejemplo, vas aquí, y puedes ver, h, hay alguien que parece bastante conspicuo afuera de la Puedes ver quiénes son desde la seguridad de tu teléfono, sin importar dónde estés. Te está enviando automáticamente esa imagen. Entonces nuevamente, está limitando la cantidad de fatiga mental que el usuario está gastando para entender, qué puede aportar este producto a mi vida. Bueno, puede ayudarte a mantenerte a salvo al no dejarte básicamente en la puerta cuando alguien potencialmente peligroso está llamando a la puerta Y nuevamente, te muestra otros beneficios, como, por ejemplo, poder monitorear ciertas áreas del jardín. También puedes ajustarlo, por lo que es realmente fácil de ajustar y básicamente cargar. Ahora, todos estos pequeños beneficios y características en realidad se resumen en esta sección realmente fácil de entender Y nuevamente, esto es en última instancia para salvar la fatiga del cliente. Así que siempre piensa en esto cuando estés construyendo un sitio web de comercio electrónico, porque en última instancia quieres limitar la cantidad de calorías mentales que está usando el usuario. Y a medida que te desplazas más abajo en la página, podrás ver interacciones reales y situaciones reales donde el usuario podría usar el producto. Es integrarlo a tu vida. Te está demostrando que necesitas este producto en particular para mantenerte a ti y a tu familia seguros. Hay una razón por la que hay un hombre con su esposa y su niño pequeño y una niña, mostrando eso para las familias, esto es perfecto porque va a ayudar a mantenerte a salvo, y también va a ayudar a mantener tu casa segura mientras no estés ahí, y en realidad estás en un restaurante italiano comiendo pizza con tu familia Ring realmente hace un gran trabajo entender exactamente por qué la gente compraría este producto en particular porque quieren mantener a sus familias seguras y quieren asegurarse de que protegen su hogar y su familia. Y se puede ver como de nuevo, están mostrando los beneficios y las características del producto en particular con esta animación en particular Están demostrando que, literalmente, puede monitorear toda la casa, incluyendo sus activos siendo su automóvil y vehículo simplemente invirtiendo en este producto en particular Entonces, ojalá, esto le dé una idea de cómo puede abordar la construcción de su sitio web de comercio electrónico. Ahora una cosa que deberías estar haciendo si estás viendo diferentes sitios web que están en tu espacio, y que es similar al tipo de cosas que vas a estar vendiendo es última instancia tomar todo lo que puedas de cada sitio web, pero no lo copies. Entonces básicamente lo que quiero decir es, tratar de tomar las mejores partes que te gusten de cada sitio web que encuentres y luego reunirlo y formarlo para crear un nuevo sitio web que sea personal y único para ti y lo que haces como marca. Pero de todos modos, esto es solo una inspiración para realmente empezar. Pronto vamos a comenzar a construir tu sitio web, así que en esa nota, te veré en la siguiente lección. Nos vemos pronto. 6. Ejemplos de sitios web - edición de marca personal: Entonces, si estás construyendo un sitio web para una marca personal, entonces realmente va a tomar un enfoque diferente a la mayoría de los otros sitios web que existen. La razón es que la marca personal y los sitios web no se tratan solo de vender productos. Se trata principalmente de construir tu lista de correo electrónico. Y en esta lección, quiero mostrarte algunos ejemplos increíbles de sitios web que realmente te ponen a gusto y te ponen en una posición en la que realmente quieres dar tu dirección de correo electrónico. Y te voy a mostrar cómo estos tres sitios web, en particular, utilizan técnicas realmente inteligentes para finalmente conseguir que tus datos te vendan más adelante en el futuro. Moriremos primero con Huberman Lab. Ahora bien, Huberman Lab, si no lo sabe, este caballero muy guapo, este es Andrew Es un neurocientífico y un podcaster muy popular. Ha estado en muchos podcasts diferentes como Joe Rogan, John Peterson y muchas otras En lo que respecta a su sitio web en particular, tiene muchas formas diferentes capturar su dirección de correo electrónico. Pero si puedes ver aquí, su llamado a la acción, y esto es un CTA aquí, un llamado a la acción para que tomes acción ¿Bien? Ahora, cuando haces clic en este botón en particular de aquí, te lleva a este pequeño pop up. ¿Quién lo sabía? Tiene un pequeño video diciéndote lo genial que es esta cosa que necesitas, cuánto va a impactar tu vida. Y luego te da una cajita aquí a da da da a tu dirección de correo electrónico. Los sitios web para marcas personales tienen ver con la generación de leads, por lo que puede venderle a ese mismo cliente una y otra vez para nutrirlos como clientes potenciales Ahora, profundicemos un poco más en lo que se trata este sitio web. Ahora hay mucho edificio de confianza. Entonces, en última instancia, se le ha dado el mayor valor posible para posicionarlo, tiene una autoridad dentro de ese espacio en particular. Y si te desplazas hacia abajo, literalmente se trata solo sus áreas particulares de especialización. Entonces se trata de crear tanto valor como sea posible. Tiene un boletín, que de nuevo, es todo acerca de la generación de leads. Te va a mandar información, posicionarse como autoridad. Y luego, cuando sea el momento adecuado, y tenga tal vez un producto o algo que quiera venderte o tal vez un patrocinador que sea relevante para lo que está haciendo, quiera venderte. Él puede tomar una comisión por cada venta que se genere. Vamos a sumergirnos en sus eventos. Está vendiendo eventos, por ejemplo. Ya sabes, está hablando. Por lo que en realidad puede vender boletos para sus eventos, hablando de lo exacto en lo que se ha posicionado como figura de autoridad. Entonces, por ejemplo, está en Melbourne, Sydney, Sydney, nuevamente, Los Ángeles, Nueva York, Toronto. Así que está teniendo estos eventos y vendiendo su tiempo como titular del evento para finalmente compartir su experiencia en ese escenario en particular. Ahora bien, si vamos a la página web de Con Mari. Esto es muy diferente. Ahora, esta es Marie Condo. Ahora. No estoy seguro si la has visto. Tenía una serie de Netflix muy popular, que se llamaba Marie Condo Tidy Specialist, o Tidy Mh Marie Condo, algo así De todas formas. Ahora bien, esto es esencialmente, en realidad, no lo era, se llamaba Spark with Joy o algo así con alegría. De todas formas. Fue muy, muy bueno, muy terapéutico, y podías verlo y simplemente sentirte realmente relajado después. Era una especie de meditación sobre ese tipo de, pero también lo suficientemente pequeña. Puedes ver aquí que Marie Condo tiene un par de formas diferentes de capturar tu dirección de correo electrónico ahora. De hecho, tenía un pop up, que apareció cuando entraba en el sitio web, que desafortunadamente nos perdimos Pero ella tiene un curso minúsculo. Ella tiene una tienda. También tiene un boletín en su pie de página, que es prácticamente estándar para casi todos los sitios web de marca personal. Pero lo que Marie Condo hace de manera muy diferente es que en realidad vende productos y coaching, lo que en realidad es realmente único, especialmente para alguien que es esencialmente una marca personal. Se ramificó y creó otra marca, Con Marie, alrededor de su marca personal. Así que su marca personal está en torno a ordenar y estar ordenado y ser organizado Ella esencialmente ha creado un programa de coaching para finalmente vender a personas que quieren estar ordenadas como ella, y no solo cansarse como ella, sino ofrecer ese orden como un servicio a otras personas dentro de su ubicación general Así que literalmente pueden ser dueños de su propio negocio, lo cual es súper impresionante, ¿verdad? En lo que respecta a su sitio web en particular, ves que está súper limpio. Se puede ver que tiene una tienda de comercio electrónico. Ella tiene muchos productos diferentes, lo cual es realmente, realmente genial. Ella tiene tantos productos diferentes, y en realidad es increíble cuántos productos tiene. Y puedes ver que toda ella, ya sabes, productos y toda ella, ya sabes, diferentes tipos de, ya sabes, ropa y libros. Ya sabes, tiene organizadores de escritorio. Todo se centra en la organización y crear un espacio realmente hermoso que despierte alegría. Esto es en última instancia uno de su marca completa se trata. Ahora, si tienes problemas con marca y aún no has hecho tu marca interna, dudes en consultar nuestro curso de branding estratégico, que es el primer curso de nuestro programa pro constructor de marca. Va a tener todo lo que necesitas para entender realmente cómo desarrollar una marca interna muy parecida a una marca interna muy parecida Marie Condor aquí y entender cuál es el propósito de tu marca, tu declaración de misión, valores, declaración de visión Todo para ayudar realmente a que todo se alinee dentro de tu marca. Pero en fin, volvamos al tercer ejemplo, que es Ghetti Ahora bien, ichi, si no lo conoces, es como un monje, un querido monje moderno, ¿qué te digo? Creo que fue a algún tipo de retiro de monjes como seis meses, y luego decidió, no, esto no es realmente tan bueno para mí. Quiero volver al mundo moderno, pero tomó algunas de las lecciones que realmente aprendió en el pueblo Monks En lo que respecta a este sitio web en particular, es muy, muy similar. Ahora, tenía un pop up, que surgió antes de que yo entrara en el sitio web, que no lograste ver. Pero en última instancia, está tratando mostrar la mayor credibilidad y autoridad posible, mostrándolo en el Show de Ellen, mostrándolo en la ópera, mostrándolo en diferentes películas, mostrando sus libros. Y nuevamente, esencialmente está vendiendo corte. Te está mostrando, Bien, si quieres ser como yo, puedes ser entrenador como J Shelly, ¿verdad Puedes ser entrenador igual que yo. Conviértete en entrenador y monje, Modern Day Monk, si así es como lo llama. Mira aquí que de nuevo se trata de autoridad y de construir confianza. Nuevamente, construir confianza es súper súper importante. Y nuevamente, a medida que vayamos más abajo en el sitio web, en última instancia puedes comprar coaching, cursos, libros, el podcast. Bueno, no tienes que comprar el podcast, pero puedes escuchar el podcast, pero también puedes reservar a Je para hablar. Ahora bien, esto en última instancia está en torno a la construcción de la mayor credibilidad posible. Y cuando se trata conseguir que Je She hable en tu evento, finalmente está demostrando que es un experto en ese campo en particular al mostrar todas sus experiencias, todos los diferentes espectáculos en los que ha estado Como marca personal, en realidad no necesitas hacer eso. No tienes que haber ido a Ellen o ser avalado por Oprah Pero solo necesitas mostrar que sabes de lo que estás hablando. Puedes hacerlo de muchas maneras diferentes. Puedes hacerlo con un blog. Eso se puede hacer con video. Eso se puede hacer con contenido realmente informativo. Eso lo puedes hacer, ya sabes , organizando talleres, seminarios. Todas estas cosas son esencialmente una forma de construir autoridad. Y a medida que seas mejor y más grande, entonces tal vez algún día vas a estar en Ellen u Opera, ya sabes, en una de estas plataformas reconocibles realmente grandes que puedes usar en última instancia para catapultarte al estrellato Ahora, escucha, cada uno de estos sitios web son muy únicos y diferentes a su manera. Pero una de las cosas que es común en todo momento es que realmente se enfocan en construir autoridad dentro de su espacio particular. Esto es esencial si vas a estar construyendo un sitio web para una marca personal. Lo que recomendaría es mirar a algunas de las personas que están ahí fuera con las que realmente resuenas A lo mejor hacen algo muy similar al tipo de cosas que quieres ofrecer dentro del sitio web que estás construyendo, y van al sitio web y luego solo anota todas las cosas que realmente te gustan ese sitio web en particular porque esas van a porque esas van a ser muy útiles más adelante cuando estemos construyendo tu sitio web. De todos modos, espero que estos ejemplos le den una idea muy buena y una idea cómo puede abordar personalmente el desarrollo de su sitio web. Más adelante en el curso, cuando en realidad estás construyendo tu propio sitio web, va a ser muy importante para ti mirar otros sitios web que realmente te inspiran. En esa nota, no puedo esperar para finalmente comenzar a construir su sitio web. Vamos a sumergirnos en la siguiente lección, y estaremos allí muy pronto. Nos vemos 7. Ejemplos de sitios web - edición de servicios de venta: Si estás tratando de vender un servicio a persona o a una empresa, por ejemplo, entonces necesitas entender cómo están haciendo los mejores sitios web del mundo, básicamente puedas integrar lo aprendes en el diseño de tu propio sitio web. Y es realmente genial en realidad solo aprender cómo lo están haciendo los grandes para que puedas aprender exactamente cómo puedes abordarlo y hacer lo mejor en función de qué recursos tienes. Y lo mejor del flujo web es, literalmente puedes crear prácticamente cualquier cosa que quieras siempre y cuando obtengas los fundamentos correctos, que cubriremos un poco más adelante en el curso Entonces, vamos a sumergirnos en el primer ejemplo que tenemos, que es Pentagrama Ahora, Pentagram es una agencia de diseño, que en última instancia se encuentra en cuatro lugares diferentes del mundo, entre ellos Nueva York, Londres, Austin y Berlín Entonces Pentagram ha existido desde hace bastante tiempo, y son bastante exitosos Así que probablemente haya algunas cosas que podamos aprender de su sitio web. Así que vayamos a su página de inicio, y luego solo intentemos entender exactamente lo que están tratando de hacer con su página de inicio. Entonces, como puedes ver aquí, tienen un slider que muestra ocho tipos diferentes de trabajo, esencialmente mostrando que hay una agencia de diseño ¿Bien? No están tratando de venderte nada. Solo están diciendo, escucha, esto es lo que hacemos, y si te interesa, entonces, siéntete libre de aprender más. Ahora bien, si nos desplazamos hacia abajo, entonces esencialmente solo va a ser más trabajo. Es solo mostrar el trabajo que hacen para que en última instancia puedas darte cuenta si este es el tipo de trabajo o el tipo de estilo que finalmente quieres tener para tu propio negocio Ahora bien, lo que verás es que en realidad no tienen nada de servicios. Por lo que no se puede aprender nada de sus servicios. Puedes revisar su trabajo y aprender un poco más sobre los tipos de trabajo que realizan. Pero en definitiva, no dicen, si quieres un logo haciendo, por ejemplo, entonces haces clic aquí. Simplemente es solo un caso de revisar su trabajo, y luego si te gusta, supongo, solo te pones en contacto a través de la barra y finalmente visita la oficina o los mandas por correo electrónico. Ahora, cuando realmente te metes en los proyectos en Pentagram, ahí es donde las cosas se ponen súper interesantes porque realmente puedes ver su experiencia dentro los diferentes proyectos que muestran Entonces, por ejemplo, esta es una marca de ropa deportiva llamada Lens, donde esencialmente se puede ver lo dinámico que es el logotipo, se puede ver lo hermosa que es la paleta de colores Y básicamente, realmente puedes tener una idea del tipo de marca con la que estás tratando, puedes ver que realmente han pensado en los diferentes, ya sabes, nueces y recovecos y detalles de la marca real para realmente obtener el mejor resultado posible Se puede ver que es muy atractivo visualmente. Puedes ver que están mostrando todos los diferentes colores que están usando a lo largo de su app, a lo largo de la página web, a lo largo de la publicidad Están mostrando muchas imágenes increíbles para mostrar en última instancia lo genial que es la marca y lo genial que están haciendo su trabajo Entonces, si eras una empresa de ropa deportiva y estabas pensando en contratar potencialmente pentagrama sabes que pueden hacer el trabajo Ni siquiera es una pregunta, ¿sabes? Entonces este es el primer ejemplo de una empresa que está vendiendo el servicio como, ya sabes, parte de su negocio, y básicamente están mostrando exactamente lo que hacen sin siquiera dejar margen de error o maravilla Bien, ahora, hemos visto pentagrama y hemos visto cómo abordan las cosas ¿Cómo se acercaría una agencia más pequeña? Entonces quería mostrarte uno de mis sitios web de negocios solo para ser totalmente transparentes para que sepas que practico lo que predico Entonces, si vamos a la página web de Clementine House, se puede ver en un par de segundos, y llegaremos a esto con más detalle más adelante en el curso Porque esto va a ser súper importante cuando empieces a construir tu página de inicio. Pero puedes ver dentro de los primeros segundos sabes exactamente por qué estás aquí. Entonces, esta es una empresa que esencialmente ayuda, ya sabes, a las marcas a encontrar los mejores nombres para sus negocios en base al posicionamiento estratégico y muchos otros factores. Ahora, este sitio web en particular ha sido diseñado una manera de generar confianza desde el primer segundo que aterrizas en el sitio web. Entonces sabes exactamente dónde estás, sabes exactamente por qué estás aquí. A continuación, en realidad mostramos algunos de los logotipos y nombres que hemos desarrollado a lo largo de los años. Esto es muy simple mostrar el trabajo exacto que hacemos y el trabajo que hemos hecho en el pasado Entonces a medida que bajamos, en realidad muestra a este apuesto diablo, ni idea de quién es con un video para compartir realmente lo que hacemos como negocio y lo que puedes esperar de nosotros como parte de tu viaje con nosotros Ahora, puedes ver aquí mantenemos las cosas extremadamente simples y fáciles de digerir porque es muy importante para nosotros llegar a través de exactamente lo que hacemos de la manera más simple posible. Tenemos toneladas de testimonios diferentes de muchas personas diferentes, y también tenemos nuestros precios en nuestro sitio web. Ahora bien, algunas agencias no hacen esto. A algunas agencias les gusta mantener las cosas bastante transparentes para que puedan cobrar, ya sabes, las tarifas que les gusten a cada cliente en particular. Personalmente siento que la transparencia es súper importante. Tengo ganas de ser honesto en todo momento. Y siento que ser transparente con los precios es realmente importante porque solo muestra exactamente lo que obtienes por qué precio, y también solo significa que cada cliente que realmente llega al sitio web paga exactamente lo mismo. Ahora en la parte superior, tenemos otro tipo de servicios, como por ejemplo, el desarrollo de sitios web, que en realidad estamos aprendiendo en estos momentos. Pero nombrar es la primera parte del viaje. Es donde apareamos a la mayoría de nuestros clientes, y luego finalmente llegamos a un punto en el que realmente terminamos trabajando más con ese cliente en particular para realmente ayudarlos a obtener el mejor resultado posible. Hemos mirado en mi sitio web. No quiero pasar demasiado tiempo aquí porque podemos aprender mucho de ello, pero quiero pasar a otra página web, que es un poco diferente a una agencia. Quiero pasar a un sitio web que está principalmente al servicio del software. Así que en realidad te ayuda a construir sitios web de una manera que es principalmente alrededor del comercio electrónico. Ahora bien, esta marca en particular, Shopify en última instancia solo vende la capacidad de vender productos en línea Eso es todo lo que básicamente te permiten hacer. Básicamente te permiten vender tu producto en línea usando una tienda en línea. Ahora bien, algunas de sus plantillas son bastante restrictivas, y es por eso que generalmente uso el flujo web para ser completamente brutalmente honesto Pero puedes ver cómo se conectan instantáneamente con el usuario real al que buscan apuntar. Entonces emprendedores, fundadores que quieren vender un producto Básicamente se están conectando con ellos al exhibir emprendedores ambiciosos y apasionados por lo que están haciendo, que es algo con lo que un fundador y emprendedor siempre va a conectar También ve instantáneamente una sección de construcción de confianza. Ahora bien, esto es algo a lo que vamos a volver a llegar más adelante en el curso, y es muy importante que esta sección de confianza en particular esté aquí. Verás que esta sección de confianza también es muy importante en mi sitio web también, y también va a ser importante en tu sitio web, porque a menos que seas una empresa masiva como Pentagram que ha existido por más de 30 años, siempre va a valer la pena tener una sección de confianza ahí porque en última instancia, necesitas construir una confianza con nuevos usuarios que son llegando a tu sitio web y no tengas idea quién eres y a qué te dedicas. Ahora, de nuevo, se puede ver aquí que mantienen las cosas súper simples. Y abajo a la pena. No es complicar las cosas, es mantener la fatiga mental lo más baja posible, darle pequeños trozos de información del tamaño de un bocado, y también asegurarse de que usen imágenes para mostrar lo fácil que es usar el software Nuevamente, a medida que te desplazas hacia abajo, estás viendo más y más imágenes, estás viendo gráficos, estás viendo animaciones, lo que esencialmente te muestra que puedes vender cualquier cosa a cualquier persona con muchas configuraciones de pago diferentes, y esencialmente está tratando de vender Shopify como la solución para la empresa de comercio electrónico Ahora de nuevo, el sitio web es súper limpio, súper mínimo, y la estructura, aunque este sitio web puede parecer un poco complicado, en realidad no lo es. En realidad es muy, muy simple. Y cada sección de este sitio web tiene un propósito. Tiene razón de existir. Y vamos a pasar por todos estos dentro del curso. No te preocupes. Vas a entender exactamente qué está haciendo cada sección de este curso. Vas a entender cómo luego tomar y aprender tanto como sea posible para luego integrarlo en tu propio sitio web en el futuro. Entonces vas a poder tener un sitio web, que es igual de bueno, si no mejor, entonces shopify después de tomar este curso y aprender todo dentro de él Ahora bien, una de las cosas más importantes a la hora de construir un sitio web, es en última instancia aprender lo más posible de los sitios web que nos gustan Luego llevar lo que aprendemos a nuestro proceso de desarrollo para nuestro sitio web. Y vamos a estar construyendo tu sitio web muy pronto en el curso. Vamos a pasar por todo eso muy, muy pronto. Pero solo quiero que entiendas que no te sientas mal por tomar ciertas lecciones y tomar cosas que te gusten de ciertos sitios web, porque eso es todo parte del juego. Todo es parte de aprender lo que quieres en tu sitio web y lo que no quieres en tu sitio web. Y esto solo viene de explorar a otras personas, incluida tu competencia para finalmente construir un sitio web que crees que te representa mejor a ti y a tu marca. De todos modos, no puedo esperar para entrar realmente en la construcción de su sitio web, y comprender los fundamentos del diseño del sitio web pronto en el curso Entonces te veré en la siguiente lección. Por favor. 8. Haz crecer tu marca con el diseño de sitios web: ¿Por qué es importante el desarrollo de sitios web de enfoque objetivo? Bueno, la pregunta que quizás te estés haciendo es, ¿qué es el desarrollo de sitios web de enfoque objetivo? Bueno, en realidad suena mucho más complejo de lo que realmente es. Es muy sencillo. Y la razón por la lo digo simple es porque creo que cada negocio debería tener como máximo, solo dos objetivos que están tratando de lograr con su sitio web. Entonces déjame darte algunos ejemplos de los tipos de objetivos que tendrían los sitios web promedio por ahí. Ahora, obviamente, todo depende del tipo de sitio web que realmente estés construyendo. Por ejemplo, si una empresa está en marca de comercio electrónico, Y su objetivo es vender cantidad de producto al precio más alto posible. Y donde ese podría ser su objetivo principal, un objetivo secundario puede ser capturar tantos leads y correos electrónicos como sea posible, porque esto luego lleva al primer objetivo, que es venderles productos más adelante en el futuro. Ahora bien, si alguien está construyendo una marca personal y creando un sitio web para esa marca personal, entonces sí , claro, todavía puedes vender productos como libros y productos digitales incluso o tal vez cursos o coaching. También vas a querer hacer crecer tu lista de correo electrónico tanto como sea posible. Porque con una lista de correo electrónico más grande, más influencia tienes. Con más influencia, también puedes hacer crecer tus seguidores, lo que finalmente crea más autoridad que se compone para finalmente ayudarte a hacer crecer tu marca personal más rápido. Entonces, para un sitio web de marca personal, podría ser el caso de que quieran hacer crecer su lista de correo electrónico y tal vez vender algunos productos como resultado. Entonces, para un sitio web enfocado en la marca personal. Esto va a estar enfocado en hacer crecer tu lista de correo electrónico lo más grande posible para que puedas venderles productos más adelante y también un objetivo secundario de vender productos mientras tanto. Entonces, si está vendiendo algún tipo de producto o servicio digitalmente, última instancia, sus principales objetivos van a ser en la línea de vender el producto o servicio por adelantado o crear algún tipo de configuración de citas o algún tipo de taller o seminario para que finalmente pueda vender el producto o servicio en persona para obtener tantas ventas como sea el producto o servicio por adelantado o crear algún tipo de configuración de citas o algún tipo de taller o seminario para que finalmente pueda vender el producto o servicio en persona para obtener tantas ventas como Por ejemplo, dentro de mi agencia de desarrollo de marca, consigo que el cliente responda un par de preguntas rápidas y luego les doy un sistema de reserva de citas, que en realidad pueden programar una llamada conmigo para tener 15 minutos de chat para ver si somos los adecuados el uno para el otro. Esto luego conduce a una llamada de ventas donde esencialmente puedo presentar nuestros productos y servicios para ayudarlos a obtener la solución que necesitan. Ahora, realmente quiero ver un par de sitios web diferentes que puedan darte una idea los diferentes objetivos que cada sitio web está tratando de lograr, solo para que entiendas exactamente cómo encontrar los objetivos para tu sitio web específico. Entonces la pregunta que tal vez te estés haciendo es, ¿cómo encuentro el objetivo para mi sitio web? Bueno, quiero compartir contigo un par de ejemplos de sitios web de sectores completamente diferentes para que puedas entender cómo se acercan las diferentes empresas encontrando sus objetivos para su sitio web. Y una vez que encuentres el objetivo para tu sitio web y lo que realmente quieres que el sitio web haga por ti como un trabajo y una responsabilidad, va a hacer que el proceso de diseño del sitio web mucho más sencillo y mucho más fácil. Entonces, por ejemplo, si nos sumergimos en el sitio web Gym Shark, que es la compañía de comercio electrónico en el Reino Unido que vende ropa de fitness y leggings y todo ese tipo de cosas, entonces puedes ver que tienen objetivos extremadamente directos. Quieren comenzar a canalizar a las diferentes personas dentro su página de inicio, ya sea en la categoría femenina o en la categoría masculina. Entonces puedes dar click aquí para ir a Men's, por ejemplo, que luego nos lleva a todos los productos que están enfocados en torno a los hombres. Entonces es bastante obvio cuáles son los objetivos de esta compañía. Los objetivos son lograr que los visitantes del sitio web lleguen a páginas relevantes para que eventualmente puedan comprar productos lo antes posible. Echemos un vistazo a otra compañía de comercio electrónico solo para llevar este mensaje a casa. Entonces, si vamos al sitio web de Oak Monk, que es una marca realmente genial basada en la USC, creo, y venden algunos productos realmente geniales, puedes ver aquí que están empujando productos muy específicos Ahora, si realmente miras todos los diferentes productos que ofrecen, tienen un montón de productos diferentes que potencialmente pueden vender a sus clientes. Tienen cosas como cerillas , tienen relojes, tienen temporizadores, tienen tazas hermosas, tienen este tipo de cosas de rompecabezas, que se ve bastante genial, pero en realidad no sé qué es, para ser completamente honesto También tienen cosas como buzones turísticos, por ejemplo, y cosas estacionarias, por lo que tienen una gama muy amplia de productos disponibles. Pero si vuelves a la página principal de la compañía y revisas los principales productos que están tratando de vender, que es esencialmente, me imagino, es el producto más rentable, básicamente puedes ver que están tratando de vender el análogo y el kit de planificación semanal, que son esencialmente los dos productos que están tratando de impulsar más que todos los demás. Y cuando estamos viendo este botón en particular, ¿ notaste cómo es un color completamente diferente a todo lo demás en la página de inicio? Esto se debe a que la marca quiere que te concentres en ese botón en particular y lo veas salir entre todo lo demás que hay en la página. Y cuando hacemos clic en ese botón, nos lleva a una página que esencialmente tiene todo lo que está relacionado con ese producto y categoría en particular. Entonces esos son solo dos ejemplos de cómo las empresas de comercio electrónico pueden tener un objetivo muy específico en lo que respecta a lograr que los usuarios vayan a ciertas páginas e incluso empujarlos hacia ciertos productos ¿Cómo podría una marca que está vendiendo un producto digital, por ejemplo, conseguir que alguien haga exactamente lo mismo? Bueno, si vamos a la página web de Hoot Suite, puedes ver que su llamado a la acción es muy claro Esencialmente quieren que el usuario solicite una demo o más prominentemente, obtenga una prueba gratuita con el servicio Ahora, tienen muchas opciones y páginas diferentes entre las que podrías elegir, pero de todas las páginas a las que quieren que vayas, el inicio de una página de prueba gratuita es la opción que quieren que lleves. Y luego cuando haces clic en ese botón, te lleva a una página donde puedes decir que es solo para mí. O tengo un equipo. Y esto esencialmente está canalizando el tráfico del sitio web hacia cubos relevantes, para que puedan crear el mejor recorrido del cliente posible para esos dos públicos objetivo relevantes Y veamos otro ejemplo de un producto que está vendiendo un servicio digital que todos conocemos y amamos, que es Netflix. Ahora, la página de inicio de Netflix es realmente sencilla. Ahora, esencialmente te permite firmar Oh, tiene este gran botón rojo, que no te puedes perder, que esencialmente te permite agregar tu dirección de correo electrónico para unirte al día y cancelar en cualquier momento. Ahora, puedes ver lo completamente sencillo que es para la persona comenzar, y también están diciendo que solo son 99 ti bat al mes. Si aún no te has dado cuenta, actualmente estoy en Tailandia filmando este curso en particular, así que eso es aproximadamente alrededor de 10 dólares. Entonces, básicamente, lo que están diciendo es que no es caro, y es prácticamente libre de riesgos para probarlo porque puedes cancelar en cualquier momento. Como puedes ver, Netflix tiene una agenda muy clara. Quiere que te registres para que realmente puedas entrar en la plataforma, y hace que sea perfecto para ti hacerlo. No complica demasiado las cosas. Quiere que te inscribas lo antes posible para entrar en la plataforma para que puedas empezar a disfrutar del contenido y finalmente engancharte a él para que puedas empezar a pagarles una cuota recurrente cada mes. Ahora, por último, echemos un vistazo a algunos sitios web de marcas personales para ver qué tipo de objetivos tienen en su lugar. Entonces, si conoces a Patrick Beck David, es un podcaster, empresario, una persona muy inspiradora Y en última instancia tiene muchos objetivos diferentes dentro de su sitio web. Ahora bien, este tipo ha estado por aquí desde hace mucho tiempo, ¿de acuerdo? Y cuenta con un equipo trabajando en la construcción de su marca personal. Ahora bien, lo que personalmente sugeriría es que no tienes tantos objetivos dentro de tu sitio web. Se adhieren a solo uno o dos, uno primario y uno de soporte o secundario. La razón es que Patrick Beck David tiene un equipo de personas administrando su sitio web y todos los diferentes aspectos dentro del sitio web para finalmente crear esta gama muy amplia de ofertas, que en última instancia le va a permitir obtener tantos puntos de contacto como sea posible con clientes potenciales. Pero en la etapa en la que estás ahora mismo con apenas comenzar a construir tu sitio web, necesitas enfocarte en tener solo un objetivo principal y tal vez dos en un empujón para que las cosas comiencen. A medida que comienzas a construir tu marca y realmente desarrollas tu sitio web con el tiempo, inicia una nueva oportunidad spot, última instancia puedas vender más a tus clientes y finalmente en última instancia puedas vender más a tus clientes y finalmente tener más objetivos establecidos. Aquí puedes ver que Patrick Bec David tiene tantas ofrendas diferentes. Está tratando de capturar tu dirección de correo electrónico. Está tratando de vender su libro. Está tratando de vender coaching. Está tratando de que escuches su podcast. Tiene tantos objetivos diferentes, todos basados en las diferentes ofertas y paquetes y soluciones que puede ofrecerle como cliente. Veamos otra marca personal para ver si toman el mismo enfoque. Ahora, Jessie Isler es en realidad una de las personas más inspiradoras Tiene una energía súper contagiosa, y es simplemente un tipo muy agradable. Esencialmente, así es como se me encuentra de todos modos. Ahora, tiene otra gama realmente grande de productos y servicios que ofrecer. Pero lleva mucho tiempo por ahí. Lo que sugiero de nuevo es enfocarnos básicamente en tener un producto en particular o un objetivo particular en el que enfocarse. Porque en última instancia lo que Jesse está haciendo aquí es que está ofreciendo coaching Él vende un calendario, que es realmente genial, lo que te ayuda a planificar tu año. También tiene un boletín, tiene libros, y también tiene arreglos para hablar. Es exactamente la misma configuración. Pero en última instancia, todo se reduce a lo mismo. Si quieres reducir todos esos servicios a un solo objetivo, es vender la mayor cantidad de producto posible. Esencialmente, si piensas los arreglos para hablar, los libros, el calendario y el coaching son todos productos. Todos son productos para Jessie ofrezca a los clientes potenciales De hecho, nunca antes había estado en este sitio web, pero si voy al fondo de los sitios web, puedo garantizar que va a tener algún tipo de boletín informativo o función de suscripción porque esencialmente va a intentar registrarse para que puedas unirte a su lista de correo electrónico para que te pueda vender algún tipo de producto o servicio algún tipo de producto o servicio más adelante en el futuro. Entonces, ojalá eso le brinde un poco de información sobre cómo puede encontrar personalmente el objetivo para su sitio web. Asegúrate de anotar esto y dejarlo muy claro dentro de tu estrategia para construir tu sitio web, quieres estar tratando de lograr un objetivo específico y un objetivo de apoyo para tu sitio web, sin importar qué tipo de sitio web estés tratando de construir. Así que tómate un tiempo para entender realmente exactamente lo que quieres que el sitio web haga por ti. Piense en su sitio web como un empleado digital, y le está dando a ese empleado solo dos responsabilidades para que le vaya extremadamente bien. Porque cuando solo te enfocas en darle una responsabilidad principal y luego una responsabilidad de apoyo, puedes ver instantáneamente lo que es importante agregar en el sitio web. Así que no va a quedar demasiado desordenado. No va a parecer, ya sabes, súper ocupado. Va a ser sumamente claro y conciso para lograr esa única cosa que necesitábamos lograr. En fin, espero que esta lección le resulte valiosa, y de verdad espero verte en la siguiente. Nos vemos pronto. 9. La regla de los 5 segundos: Bien, entonces, ¿cómo se gana una confianza de los visitantes del sitio web en 5 segundos o menos? Ahora, estoy seguro que eres plenamente consciente de que en el día común, gente realmente no tiene una larga capacidad de atención con TikTok e Instagram y que nosotros estemos en nuestros teléfonos todo el tiempo Básicamente damos sitio web 3-5 segundos para básicamente decirnos, Bien, puedes darme lo que necesito. Dime un poco más. Ahora, cuando realmente llegamos a un nuevo sitio web, y si realmente visitas un nuevo sitio web en el futuro, en realidad puedes ser consciente de ti mismo y darte cuenta de que te haces estas preguntas exactas de SM tres en este orden sm exacto si miras lo suficientemente de cerca. Ahora, cuando vamos a un sitio web completamente nuevo, si realmente das un paso atrás y piensas en qué preguntas te estás haciendo cuando aterrizas en una nueva página de inicio en la que nunca antes habías estado, generalmente nos hacemos tres preguntas específicas en el orden exacto de SM cada vez. Esto es muy importante de entender porque si estás construyendo un sitio web y nunca antes has construido un sitio web, entonces puedes entender cómo captar atención de tu público objetivo en los primeros tres a 5 segundos, que puedan pasar más tiempo en tu sitio web y darse cuenta de que podrías ser la opción para ellos para ayudarlos a encontrar una solución al requisitos que necesitan. Entonces, si sabes cómo captar su atención y ayudarlos a quedarse un poco más en tu sitio web, entonces pueden aprender un poco más sobre lo que tienes para ofrecer y luego finalmente elegirte como solución al problema que tienen. Si alguna vez has construido un sitio web antes y ha tenido una tasa de rebote muy alta, esto se debe básicamente al hecho de que el sitio web no ha captado la atención de la persona o no ha sido muy claro cuanto a lo que vende o puede ofrecer Esto de nuevo, solo hace que sea súper importante que como alguien que está construyendo un sitio web, necesites asegurarte de que la gente sepa exactamente lo que haces, lo que puedes ofrecerles. La forma más sencilla y clara posible. Entonces, ¿cuáles son estas tres preguntas que nos hacemos cuando aterrizamos en una nueva página web? Bueno, la primera pregunta es, ¿ qué haces y cómo me puedes ayudar? Ahora, esas son dos preguntas. Así que vamos a quedarnos con, qué haces porque eso solo mantiene las cosas realmente fáciles. Ahora bien, lo que haces esencialmente significa, Bien, tengo un problema, y creo que podrías ser una solución. ¿Por qué debería elegirte a ti? ¿Qué es lo que realmente me ofreces? Ahora bien, si miras este sitio web aquí, por ejemplo, puedes ver que literalmente te dice exactamente lo que ofrecen dentro del primer segundo que aterrizas en la página de inicio. Es literalmente decirle al cliente, esto es lo que podemos hacer por usted, y es por eso que debe elegirnos. Es esencialmente decir, escucha, no vas a perder el tiempo viendo nuestro sitio web, estás en el lugar correcto. Bien, entonces ahora los tenemos en el lugar correcto. Saben que no van a perder el tiempo. La siguiente pregunta que solemos hacernos es, Bien, estoy en el lugar correcto. Podrías tener lo que necesito, pero ¿puedo confiar en ti? Ahora bien, esta es la siguiente pregunta que cada persona se hizo, cuando llegan a un nuevo sitio web. ¿Esta marca es de fiar? ¿Esta oferta es realmente genuina? ¿Voy a darles mi dinero, y voy a recuperar lo que espero? Ahora, hay toneladas de formas diferentes en las que puedes generar confianza dentro de tu sitio web. Y esta sección esencialmente debería venir por debajo de la sección de Héroe , al igual que este ejemplo, donde solo puedes mostrar que tienes autoridad en esa cosa en particular que estás ofreciendo? Estás diciendo eso, escucha, te puedo ofrecer lo que necesitas, y he hecho esto 1 millón de veces antes. Entonces en última instancia no te van a decepcionar, y esencialmente estás en buena compañía, como si no fueras la primera persona en hacer esto, y no vas a ser el último en comprarle Bien, así que ahora realmente tienes la confianza del cliente, y ellos saben exactamente lo que puedes ofrecer. ¿Cuál es el siguiente? Bueno, cuando llegamos por primera vez a un sitio web, ¿ es qué puedes hacer por mí? Entonces puedo confiar en ti. La siguiente pregunta es, Bien, Dime un poco más, que en realidad no es una pregunta, pero entiendes la idea. Para que sepan que puedes ofrecerles lo que quieran. También saben que eres digno de confianza. Ahora quieren conocer más sobre los detalles y los beneficios que puedes ofrecerles como parte de tu oferta. Y aquí es donde puedes entrar en más detalles en cuanto a por qué la gente debería comprarte. ¿Qué te hace diferente como marca? ¿Por qué otros clientes te compran antes? Y ¿cómo puedes realmente conseguir a la persona el resultado o la solución que busca? En última instancia, todo se reduce a generar confianza y luego, en última instancia, entregar esa confianza. En cualquier tipo de negocio, si básicamente puedes establecer una expectativa y luego entregar o superar esa expectativa, realmente no puedes perder. Entonces solo para resumir, la primera pregunta que cada visitante del sitio web se hará es, ¿qué haces y cómo me puedes ayudar? La segunda pregunta es, ¿puedo confiar en ti? Así que muéstrales elementos confiables de tu marca para construir autoridad y para mostrar que somos quienes decimos que somos, y puedes confiar en nosotros. Y la tercera pregunta es, Bien, cuéntame un poco más sobre lo que puedes hacer por mí para ayudarme con mi reto. Es por ello que muestras, todas las características y beneficios de una manera, que es fácil de digerir. Y así, amigos míos, es como desarrollar la página de inicio perfecta para cualquier negocio. En fin, espero que esto te haya resultado útil. Y si trabajas con esta estructura, realmente te va a ayudar a construir un sitio web que realmente obtenga los resultados que necesitas. De todas formas, tenemos mucho impulso ahora entrando en la siguiente lección, así que te veo ahí. 10. Diseño de sitios web 101: alineación y cuadrículas: Entonces, ¿qué significa la alineación cuando se trata del diseño de sitios web y cómo las cuadrículas juegan un papel para ayudarnos a crear sitios web hermosos que realmente captan la atención Bueno, la verdad es que las cuadrículas y alineaciones ayudan a hacer mucho más que simplemente crear sitios web hermosos También pueden hacer que los sitios web sean más funcionales, más receptivos y también ayudar a mejorar la experiencia del usuario. Entonces comencemos con la alineación. ¿Qué es la alineación? Bueno, la alineación se refiere a la relación y posicionamiento de ciertos elementos sobre un eje común. Cuando los elementos están alineados, le da un sentido de estructura y profesionalismo a un sitio web. Páginas web bellamente estructuradas y organizadas, realmente ayudan a darle a su sitio web una sensación profesional, y también mejora significativamente la experiencia del usuario al ayudar sus usuarios a navegar por su sitio web usando menos calorías mentales. Ahora hay algunos puntos clave a tener en cuenta a hora de enfocarse en la alineación y usar la cuadrícula. Lo primero es la consistencia. Ahora, usando alineaciones y calificaciones consistentes a lo largo de todo tu sitio web, va a ser súper importante hacer páginas predecibles que no solo sean profesionales, sino que también sean fáciles de digerir por el usuario. Esto incluye el uso de las mismas alineaciones y cuadrículas para texto, imágenes e incluso botones también Esto te va a ayudar a lograr una sensación estética general que se vea realmente profesional y confiable. Ahora el segundo punto clave de los inmigrantes a la alineación y las cuadrículas es la jerarquía Debe usar la jerarquía en lo que respecta a alineaciones y cuadrículas para finalmente mostrar primero la información más importante y asegurarse de que se presente de una manera limpia, profesional y fácil Aquí es donde entra la alineación y las rejillas. Crea una experiencia predecible en las páginas de tu sitio web, para que el usuario sepa dónde buscar a continuación. Y el último punto clave, que tocamos un par de veces a lo largo de esta lección es el diseño responsivo. uso de cuadrículas es muy importante para asegurarse de que su sitio web se vea genial tanto en dispositivos móviles como en tabletas y computadoras de escritorio Al ser consistente con la alineación en todo su sitio web y también con las cuadrículas que usa para construir las páginas de su sitio web, puede ayudarlo a crear una experiencia de marca perfecta, que es consistente en todos los dispositivos que el espectador podría estar navegando potencialmente en su sitio web Y lo que quiero hacer es compartir estas dos páginas web contigo y dejarte decidir cuál crees que tiene la mejor alineación y cuadrícula. Y tres, dos, uno. Ahora bien, si no conseguiste un derecho, no te preocupes, solo vuelve a ver este video, y estoy seguro que lo conseguirás por segunda vez Pero si conseguiste un derecho, entonces felicitaciones, ahora sabes la diferencia entre un sitio web que es perfecto en cuanto a alineación y arenado y uno que no usa esos principios en lo que respecta a su diseño Entonces, ahora el hecho de que realmente entiendas la alineación y el arenado, podrás crear páginas web que no solo se vean y se sientan más atractivas visualmente, sino que también van a poder brindar una mejor experiencia de usuario para que tu sitio web ayude a tus usuarios a quemar menos calorías mentales, permitiéndoles dirigir tu sitio web por En fin, realmente espero que hayan disfrutado esta lección y un poco de ejercicio al final, veré en la siguiente lección. Nos vemos pronto. 11. Diseño de sitios web 101: jerarquía visual: Jerarquía visual y diseño de sitios web. ¿Qué es y por qué es tan importante? Bueno, primero discutamos qué es realmente la jerarquía visual. Jerarquía visual es la disposición o presentación de ciertos elementos para mostrar su orden de importancia. Un sitio web bien diseñado utilizando jerarquía visual puede ayudar a mejorar significativamente la experiencia general Mejora la legibilidad, el engagement, y además reduce la cantidad de calorías mentales que el usuario tiene que invertir para navegar por tu sitio web y consumir la información que necesita para digerir tu sitio web y consumir la información que necesita para Ahora, hay algunos elementos clave que utilizan más comúnmente jerarquía visual para transmitir su mensaje de manera más efectiva. Y el primero de esos elementos es la tipografía. Sitios web bien diseñados que utilizan jerarquía visual para mejorar realmente la experiencia del usuario, utilizan diferentes formas de tipografía que son más gruesas, delgadas y, a menudo, de un color diferente, en última instancia, utilizando los principios clave de la jerarquía visual Se puede mostrar exactamente la misma información una manera completamente diferente, una de las cuales es extremadamente legible, y la otra es realmente un dolor de leer. Ahora otro elemento, que es realmente importante cuando se trata de jerarquía visual es el contraste de color. Puedes usar el color para llamar la atención del usuario hacia ciertos elementos. Los colores más vibrantes que captan el ojo se pueden usar para llamar a la acción, botones importantes e incluso información importante. Ahora, otro enfoque que está conectado a la jerarquía visual es el espacio en blanco. Ahora, aprenderemos más sobre el espacio en blanco con más detalle más adelante en el curso. Pero al abrazar el uso del espacio en blanco y saber cómo usarlo correctamente, cual te enseñaré en poco tiempo puedes ayudar a que ciertos elementos destaquen, nuevamente, potenciando la jerarquía visual dentro de tu sitio web Ahora, como un pequeño ejercicio divertido para terminar la lección, solo quiero mostrarte dos piezas de contenido y hacer que elijas cuál crees que está usando jerarquía visual para guiar cómo se ha presentado. Entonces, si tienes que elegir entre estas dos piezas de contenido, que crees que es más legible, atractivo y más probable que brinde una mejor experiencia de usuario. Y te voy a dar 32, uno. ¿Lo entendiste bien? Bien, entonces si no lo hiciste bien, entonces tal vez vuelva a ver esta lección, y tal vez puedas aprender un poco más sobre lo que significa tener un sitio web increíble con una gran jerarquía visual Pero si lo hiciste bien, las felicitaciones, ahora entiendes la diferencia entre el contenido que es simplemente un poco machacado y no pensado realmente y el contenido que en realidad se ha arreglado con jerarquía visual y mente, lo que es más legible, más atractivo y más claro de digerir En fin, realmente espero que disfrutes este pequeño ejercicio y también del contenido de esta lección. Y espero verte en la siguiente. Nos vemos. 12. Diseño de sitios web 101: fuentes y tipografía: Así que elegir las fuentes y tipografía adecuadas para tu ¿Cómo lo haces? ¿Y por qué es tan importante? Ahora bien, un error que comete mucha gente diseñando un sitio web es lo que elegir la fuente o tipografía adecuada es todo para No se trata solo de cómo se ve el sitio web. Aunque eso sigue siendo muy importante. Ahora, de lo que se trata más de elegir la fuente y la tipografía adecuadas se trata más de elegir la fuente y la tipografía es crear un lenguaje visual que pueda ayudar a comunicarse y crear una percepción alrededor de su marca, lo que también puede mejorar la experiencia del usuario Y dependiendo de las fuentes y tipografía que elijas usar en tu sitio web, y podrás crear una percepción completamente diferente dependiendo de los tipos fuentes y tipografía que utilices a lo largo de cada página de tu utilices a lo largo de cada página Por ejemplo, puedes elegir una fuente que sea más divertida y juguetona, Una que sea súper tradicional y profesional, o puedes elegir una fuente que sea súper simple y moderna. O una forma, que sea más futurista y creativa. Ahora una de las cosas clave para recordar es que solo debes estar eligiendo una o dos fuentes diferentes para usar en todo tu sitio web. Por ejemplo, tienes una fuente principal, que se suele utilizar para tus subtítulos y encabezados, y luego otra fuente, que se usa para contenido general, que es extremadamente legible y fácil Esto se debe a que cuanto más tiempo sea un fragmento de texto más difícil es mantenerse en marcha, por lo que necesitamos asegurarnos de que el texto sea súper fácil de leer para mantener a tu usuario leyendo y no fatigarlo mentalmente Elegir las fuentes adecuadas puede ayudarte a evocar cierta emoción dentro de tu cliente o cliente Y también puede mostrar cierto nivel de profesionalismo y confiabilidad que puede ayudarte a generar más ventas Ahora, hay algunas cosas clave en las que pensar a hora de elegir las fuentes o tipografía adecuadas para tu marca Ahora, en realidad cubrimos el proceso de elegir la tipografía y las fuentes correctas para su sitio web y marca Curso número dos dentro del programa Brand Builder pro. Este curso es toda nuestra expresión visual, y literalmente te dice todo lo que necesitas saber en lo que respecta a tipografía, fuentes, colores, cómo diseñar el logotipo perfecto, voz de marca y todas esas cosas buenas Ahora el curso entra en mucho más que solo esos elementos particulares. Pero si sientes que necesitas un poco más de apoyo en esas áreas en particular, entonces siéntete libre de comprobarlo. Ahora, elegir las fuentes adecuadas con la personalidad adecuada es súper importante. Como te mostré antes al principio de la lección, usar diferentes fuentes es tu encabezado y fuente de subtítulo, emite un mensaje completamente diferente sobre tu marca Por ejemplo, si te pregunto cuál de estas dos fuentes es utilizada por una marca de lujo, entonces puedo garantizarte que vas a elegir esta. Esto se debe a que esta fuente en particular fue creada hace mucho tiempo. Por lo tanto, tiene más historia. Por lo tanto, se siente como que tiene más tradición, y la tradición y la historia están más estrechamente asociadas con la sensación de ser lujo. Ahora, otro verdadero punto clave para recordar es la legibilidad. Es órgano y bien eligiendo una fuente que sea súper creativa y súper única. Pero si tu cliente o cliente no puede leerlo, entonces va a plantear un problema. Todo lo que hacemos en cuanto a tipografía y fuentes debería permitirnos crear la mejor experiencia de usuario posible Entonces, si estamos usando una fuente o una forma de tipografía, que es súper difícil de leer, eso se quita de la experiencia del usuario, que obviamente no queremos Así que asegúrate de que tus fondos sean fáciles de leer, especialmente tu fuente de contenido principal. Eso va a ser súper importante porque va a ser utilizado para tramos más largos de texto, lo que va a ser muy fácil de cansar a tu usuario y esencialmente perder su atención. Un último punto clave a recordar es la inconsistencia jerárquica En cuanto al tamaño, debes mantener esta relación general para tu encabezado, subencabezado y contenido general. Ahora, obviamente, necesitarás hacer que tu texto sea receptivo dependiendo del dispositivo. Por ejemplo, si estoy viendo un sitio web en mi computadora, el texto no va a tener exactamente el mismo tamaño de fuente que si lo estuviera viendo en mi iPhone. Entonces, aunque el tamaño del texto cambia, la relación entre el tamaño del encabezado, el subencabezado y el contenido general, permanece igual. Y eso te dará la jerarquía que necesitas para que tu contenido sea súper legible. Pero solo asegúrate de mantener la coherencia con uso de esa jerarquía en todo tu sitio web. Eso te va a ayudar a crear una experiencia fallida consistente, lo que hace que tu usuario se sienta cómodo usando las páginas de tu sitio web y navegando por tu sitio web. Ahora, solo como un pequeño experimento, solo quiero llevar a casa el hecho de que probablemente hayas aprendido algo durante esta lección. Quiero que tomes estos dos ejemplos de tipografía y básicamente me digas cuál de estos dos es más adecuado para una empresa de software moderna Entonces, si fueras el director general de una compañía de software, cuál de estas dos configuraciones tipográficas elegirías para el Y tres, dos, Uno, ¿lo hiciste bien? No si no lo hiciste bien, no es el fin del mundo. Solo tal vez vuelva a ver esta lección y tal vez pueda recoger algunas otras cosas antes de comenzar a seleccionar la tipografía y los fondos para su También voy a agregar algunos recursos súper útiles al curso para que realmente puedas elegir qué fondos se usan más comúnmente dentro de tu mercado e industria en particular. Me aseguraré de agregar el recurso dentro del curso para que pueda encontrarlo fácilmente, y pueda encontrar los fondos perfectos para su sitio web sin ningún trabajo duro. Elegir los fondos y la tipografía adecuados para tu marca es súper emocionante, al menos para mí Me parece súper divertido. Pero de todos modos, te veré en la siguiente lección donde las cosas realmente empiezan a ganar impulso. Te veré ahí. 13. Diseño de sitios web 101: creación de paletas de colores: ¿Cómo se crea una gran paleta de colores para su sitio web? Ahora, usando la paleta de colores correcta para su sitio web, ¿Podemos ayudar a crear la percepción correcta, profesionalismo y de gan motion dentro su cliente cuando navega por sus páginas web Ahora cada marca debería tener tres tipos diferentes de colores en su sitio web. El primero es un color de fondo, que en última instancia suele ser blanco o si realmente quieres ser experimental, un color súper oscuro. Ahora, el 99% de las marcas deberían usar el blanco o un gris realmente claro como sus colores principales para el color de fondo para el sitio web de sus marcas. Y la razón de ello es que es muy fácil para un ser humano leer texto negro sobre fondo blanco a diferencia de texto blanco sobre fondo negro. Simplemente usa menos calorías mentales, que en última instancia es lo que queremos desde punto de vista de la experiencia del usuario Ahora, los otros dos tipos de colores son los colores de acento y sus colores primarios. Ahora tu color primario es en última instancia el color que quieres ser conocido por tu marca. Ahora, puedes tener dos colores primarios, pero personalmente, creo que lo mejor es apegarse a uno solo. Ahora cubrimos el proceso de desarrollar tu propia paleta de colores para tu marca mucha más profundidad y cómo realmente puedes pensarla desde un punto de vista estratégico. El segundo curso del programa Brand Builder Pro. Pero solo para ayudarte si no quieres invertir en ese programa, lo cual está absolutamente bien. Tenemos una herramienta en línea en nuestro sitio web, que puede utilizar para encontrar la mejor paleta de colores para su marca y sitio web. Esto se llama Color Pro Plus, y lo puedes encontrar en línea. Es realmente fácil y completamente gratis de usar. Esto te va a ayudar a encontrar una gama de diferentes paletas de colores que puedes seleccionar y luego comenzar a usar para tu sitio web, que sepas que tu sitio web siempre va a quedar genial Ahora, tus colores de acento dentro de tu paleta de colores son realmente importantes. La razón de ello es que esencialmente guía el ojo del usuario hacia donde debería estar haciendo clic. Los colores de acento se suelen utilizar para captar la atención de las personas y también decirle a la gente dónde hacer clic y qué es importante. Ahora, vamos a cubrir cómo usar realmente tu paleta de colores en una lección un poco más adelante en el curso. Pero por ahora, solo quiero ayudarte a crear una estructura y un proceso de pensamiento detrás cada color dentro de tu paleta de colores para tu sitio web, que sepas cómo usarlo cuando vengas a construir tu sitio web más adelante Ahora, algunos puntos clave para recordar cuando estás pensando en desarrollar un color palt para tu marca es la alineación de marca Así que asegúrate de que los colores que uses sean relevantes para tu marca y el mensaje que quieres transmitir. Aquí es donde la herramienta Color pro plus viene muy útil. Te brinda una selección de paletas de colores bellamente diseñadas que puedes usar en tu sitio web en segundos. Y también te dice los tipos de emociones y sentimientos que va a evocar dentro de tus clientes o clientes potenciales Ahora, otra cosa en la que pensar es el contraste y la armonía. Debes asegurarte de que tu sitio web tenga suficiente contraste para que sea fácil de leer y cree una buena experiencia de usuario. También debes asegurarte de que tus colores se fusionen perfectamente. Ahora hay muchos métodos diferentes para crear una mayor paleta de colores para sitios web. Pero si no quieres aprender demasiado sobre teoría del color y psicología del color, y solo quieres tener una paleta de colores realmente genial para tu sitio web porque solo quieres que se vea bien y sea realmente presentable y confiable Usa la herramienta color pro plus para seleccionar una paleta de colores y luego ver cuál funciona mejor para tu marca. Todas las paletas de colores que se presentan en la herramienta color pro plus han sido diseñadas por expertos capacitados en diseño que entienden cómo los diferentes colores funcionan bien juntos No tienes que preocuparte por aprender teoría del color, o algo de lo que tienes que hacer es seleccionar la paleta de colores que más te convenga a tu marca. Comprueba las emociones reales que esa paleta de colores en particular va a transmitir y comunicar, y luego prueba en tu sitio web y mira cómo te sientes. Ahora, un último punto es la consistencia. La consistencia es súper importante porque si comienzas a usar diferentes colores para diferentes llamadas a acciones, solo vas a crear una experiencia realmente confusa para el usuario. Al ser consistente, simplemente significa que estás usando tu acento primario y colores base la misma manera en todo tu sitio web. Por ejemplo, si tuvieras todo tu sitio web con fondo blanco y luego solo una sola página con fondo negro, con texto blanco, va a quedar un poco apagada, y va a confundir a tu usuario Por lo que la consistencia es súper importante. Y sólo por un poco de ejercicio, un poco de diversión. Quieres mostrarte estas dos páginas web y darte 3 segundos para decidir cuál crees que usa mejor Color. Y tres, dos, uno. ¿Lo entendiste bien? El diseño que usa mejor el color en última instancia es seguir los principios que acabas de aprender en esta lección. Es consistente, tiene armonía. Es usar colores que funcionan muy bien juntos. Tiene suficiente espacio en blanco, y está usando el blanco como fondo para darle al resto del contenido dentro de la página tiempo y espacio para brillar. El otro diseño, sin embargo, no hace exactamente eso. Está bastante mal diseñado. Realmente no es usar el color correctamente, y en realidad vamos a aprender más sobre cómo usar el color correctamente en el diseño de tu sitio web un poco más adelante en el curso. Y en esa nota, los veré en la siguiente lección. Nos vemos pronto. 14. Diseño de sitios web 101: uso de tus colores: Ahora probablemente tengas un par de ideas o tal vez solo una idea en lo que respecta a la paleta de colores de la marca que quieres usar en tu sitio web. Ahora vamos a mostrarte cómo usarlo en tu sitio web. ¿Cómo usas tu paleta de colores en tu sitio web? Bueno, en este punto, o bien has usado la herramienta Color P plus y en realidad tienes la paleta de colores para tu sitio web, o estás tratando de decidir entre una pareja y no estás realmente seguro de cuál elegir. Al final de esta lección, vas a saber cómo usar los diferentes colores dentro de tu paleta para que puedas hacer un poco de experimentación y ver qué paleta de colores te gusta más. Ahora, recuerda que usar tu paleta de colores significa básicamente usarla para cada elemento diferente que esté en tu sitio web. Esto incluye texto, botones, otros elementos, bordes, líneas, su logotipo y el fondo. Nunca olvides el trasfondo. Ahora, como mencioné en la lección anterior de este curso, debes asegurarte de que eres muy consistente con los colores que estás usando y cómo los estás usando. Por ejemplo, no intentes ser demasiado experimental cuando estés usando tus colores, pero en esta lección, solo quiero darte algunas reglas fundamentales y mejores prácticas para que puedas usar los colores de la mejor manera posible para obtener el mejor resultado. Ahora, tu color primario debería ser el color más dominante en tu sitio web. Entonces, por ejemplo, todos tus íconos, tu logo, los encabezados de tu sitio web deberían ser todos de este color. Muestra cuál es el color primario de la marca. Su color primario debe ser el color más utilizado en su sitio web aparte del color de fondo. Si el color primario que has elegido no es el más dominante en tu sitio web, aparte del color de fondo, entonces estás haciendo algo mal. La regla básica que siempre uso es todo lo importante tiene que ser el color primario, aparte de una llamada a la acción, que es el color de acento. Entonces siempre hago el fondo blanco, y siempre hago todo el contenido general negro o simplemente apagado negro, así que un gris muy oscuro. Al hacer esto y mantenerlo realmente simple, puede asegurarse de que su acento primario y colores base se estén usando correctamente. Y recuerda que tu color de acento debe ser usado de una manera que llame la atención del usuario. Y al hacer esto y usar tu color de acento correctamente, vas a poder guiar al usuario para que haga clic en ciertos botones y piezas clave de información en las que realmente quieres que haga clic. Ahora, como un pequeño ejercicio divertido, solo quiero mostrarte dos ejemplos diferentes de páginas web, uno de los cuales, que es usar colores usando los fundamentos exactos que acabo de enseñarte en esta lección, y el otro que está haciendo las cosas de una manera completamente diferente Entonces, ¿cuál de los dos crees que está usando el color correctamente? Y 321. ¿Lo hiciste bien? Como puedes ver, este sitio web en particular simplemente se ve mucho mejor. Simplemente fluye mucho mejor. Sabes exactamente donde hacen clic y lo que es importante y lo que no es tan importante. Y crea una jerarquía y una experiencia que el usuario puede disfrutar, a diferencia del otro diseño del sitio web, lo que simplemente hace que las cosas sean un poco más duras. No es realmente sencillo, y es un poco confuso. En fin, realmente espero que disfrutes de esta lección. Tengo muchas ganas de verte en la siguiente. Ver eso. 15. Diseño de sitios web 101: jerarquía de Button: Jerarquía de botones, ¿qué es y por qué es tan importante? Bueno, diseñar botones de gran apariencia básicamente puede aumentar la probabilidad que se haga clic en Hay algunas cosas clave en las que deberías estar pensando cuando realmente estás diseñando los botones dentro tu sitio web para hacerlos más clicables y finalmente lograr que el usuario haga lo que quieres que haga en tu sitio web Los botones de tu sitio web Guían al usuario a través tu sitio web hacia donde quieres que vaya. Deben ayudar a tu usuario a navegar manera efectiva por todo el sitio web para que pueda llegar a donde necesite estar en el menor tiempo posible con la menor cantidad de clics. Entonces, ante todo, ¿qué es la jerarquía de botones? Bueno, la jerarquía de botones es esencialmente la disposición o estilo de los botones para crear una gran experiencia visual y, en última instancia, hacer que el botón sea más clicable Utilizamos jerarquía de botones para mostrar al usuario, donde debe estar haciendo clic. Que podamos obtener un resultado deseado dentro del sitio web. Esto nos ayuda a priorizar los botones en los que deben estar haciendo clic los usuarios para que puedan ir a las páginas que queremos que hagan. En última instancia, los botones bien diseñados y una jerarquía bien estructurada para tus botones deberían ayudar a crear una interfaz más atractiva y divertida para que tus usuarios disfruten. Ahora, algunos puntos clave para discutir en lo que respecta a la jerarquía de botones, y el primero de esos puntos es el tamaño y la ubicación. Ahora, cuanto más predominante es un botón, más improbable es que se haga clic El color también está incluido en este proceso de toma de decisiones, pero lo cubrimos en la última lección así que por el momento, centrémonos en los propios botones. Ahora lo que deberías estar haciendo es hacer los botones que sean más prioritarios para ti personalmente, tus objetivos de negocio, sean más considerables, más obvios y prominentes, mientras que los botones, que son menos importantes, son en última instancia un poco más sutiles y un poco más difíciles de ver Ahora una cosa que sí necesitas para asegurarte de Rob es que eres consistente con el estilo de tus botones. Una vez que confirme su estilo de botón y sistema, ese sistema en particular debe ser utilizado en la totalidad de su sitio web. Entonces, por ejemplo, si tus interacciones de llamadas son del mismo tamaño en toda tu página de inicio, eso también debería ser lo mismo en todo tu sitio web. Ahora, al igual que un ejercicio muy divertido, solo quiero mostrar dos ejemplos de jerarquía de botones y cómo algunos pueden ser muy fáciles de entender y muy fáciles de hacer clic, y cómo otros pueden ser un poco confusos y no tan fáciles de entender. Entonces, ¿cuál de estos dos crees que es el más fácil de entender y en cuál es más probable que hagas clic? Te quiero dar 3 segundos. Entonces, ¿tres a uno, para hacerlo bien? Ahora bien, si entendiste todo en esta lección, entonces deberías haber seleccionado los botones correctos. Pero si no lo hiciste, no te preocupes, solo vuelve a visitar esta lección y ojalá la recojas la segunda vuelta Ahora, una cosa que te mostrará un poco más adelante en el curso es cómo crear animaciones con botones que realmente ayuden a darles vida. No significa hacer locuras con botones. Se trata de pequeñas animaciones profesionales simples, que puedes hacer en el piso web en cuestión de segundos, y es realmente fácil llevar tus botones a un nivel diferente, un estándar completamente diferente donde cobran vida e interactúan con el usuario para crear una mejor experiencia de usuario. Te voy a enseñar cómo hacer eso un poco más adelante en el curso, y es realmente muy fácil, así que no te preocupes. No necesitas saber codificar, no necesitas saber nada sobre el diseño de sitios web. Literalmente tan fácil como editar un documento word. Así que de todos modos, espero verte en la siguiente lección, y realmente espero que estés disfrutando del curso. Te veré pronto. 16. Diseño de sitios web 101: la importancia de las imágenes: Entonces, ¿por qué es tan importante elegir las imágenes adecuadas para tu sitio web Y lo más importante, ¿ cómo lo haces? Bueno, antes de sumergirnos en esta lección, en la siguiente lección de este curso, voy a estar mostrándote lugares específicos en línea donde podrás obtener imágenes libres de derechos para tu sitio web que se ven increíbles. Así que estén atentos para eso. Pero primero hablemos de por qué las imágenes son tan importantes en un sitio web. Bueno, como ya lo hemos comentado varias veces en el curso ya, Cuando alguien llega a un sitio web, lo primero que se están preguntando es, ¿yo esto para mí? ¿Puedo usar lo que sea que este sitio web esté ofreciendo? Por lo que usar las imágenes correctas puede ser súper importante porque los humanos son criaturas visuales. Vemos algo y lo entendemos mucho más fácil que si estamos leyendo algo y tratando de averiguar qué significan realmente las palabras. Y al usar las imágenes correctas que encajen con la sensación general que queremos transmitir con nuestra marca, va a ayudar a los clientes a descubrir quiénes somos y qué podemos ofrecer mucho más fácilmente y ofrecer mucho más fácilmente y última instancia, crear una mejor experiencia de usuario en general Ahora bien, lo más importante a la hora seleccionar el tipo de imágenes para usar tu sitio web, ¿ qué mensaje quiero transmitir? ¿Cómo quiero que me perciban como una marca? ¿Quiero que me vean como más lujosa, o necesito que me vean como más infantil y más juguetón O quiero que me vean como más moderno, o debería ser visto como más futurista o incluso espacial. Ahora ese es el primer paso. Necesitas averiguar cómo quieres que te perciban y luego seleccionar tus imágenes en función de eso Ahora, otra cosa que es realmente importante a la hora de seleccionar las imágenes correctas es asegurarse de que sus imágenes sean de alta calidad Una cosa que siempre les digo a los clientes cuando estoy trabajando en ayudarlos a desarrollar su sitio web, si un sitio web tiene una imagen en él, que está amontonada y no de alta calidad, ¿Cómo crees que eso refleja el servicio que el cliente piensa que va a obtener de esa marca en particular Realmente no lo refleja muy bien, ¿verdad? Entonces, seleccionar las imágenes correctas es una cosa, pero asegurarse de que sea de alta calidad es otra muy distinta Así que asegúrate de tenerlo en mente, y si alguna vez tienes dudas, entonces sácalo. Hay toneladas de imágenes diferentes que puedes usar ahí fuera. Así que no seas romántico por solo uno. No es la mejor calidad. Si está pixelado, no lo use Ahora, un par de cosas en las que pensar cuando realmente estás eligiendo imágenes para tu sitio web, es que necesita ser relevante para tu público objetivo, y también lo que estás ofreciendo Como humanos, nos relacionamos con personas como nosotros mucho más fácilmente en función de su etnia, por sus aficiones, aspecto, por su género, su estatura, en función de si son atractivas o menos atractivas, o muchas cosas diferentes. Así que usando ventaja natural. Si eres una marca de yoga, por ejemplo, o estás vendiendo algo respecto al yoga, entonces tu sitio web para mostrar a las personas dentro las imágenes que son tu público objetivo ideal Porque usar las imágenes, que son las más relevantes para tu público objetivo, va a ser lo mejor y más efectivo para persuadir a tu cliente de que te elija para que seas la marca a la que compran Ahora, otra cosa que es realmente importante a la hora seleccionar las imágenes adecuadas es un estilo consistente Por ejemplo, si vas a hacer imágenes en blanco y negro en todo el sitio web, hazlo en todo el sitio web. No empieces a aparecer diferentes imágenes con color o, en tonalidad verde, por ejemplo, eso solo va a parecer basura Lo que quieres hacer es mantener la naturaleza consistente de tus imágenes en todo el sitio web Esto a veces puede ser difícil si estás usando imágenes de stock Entonces, si estás usando imágenes de stock y el tono y la sensación de la imagen real es un poco diferente, siéntete libre de editarlo en cualquiera de las tiendas de fotos o tal vez conseguir que cualquiera de las tiendas de fotos o tal vez conseguir alguien en fibra lo edite para que te asegures de que todos se sientan muy consistentes y casi fueron tomados en la misma sesión de fotos Esto se puede hacer a través de light room o photoshop, por lo que cualquier persona con incluso las habilidades más básicas respecto a esos dos programas puede hacerlo muy fácilmente. O si quieres que las cosas sean realmente simples, solo hazlas todas en blanco y negro y se verán todas consistentes independientemente. Ahora bien, una cosa clave para recordar a la hora de elegir imágenes, es como humanos, nos gusta ver a otros humanos hacer cosas. Por ejemplo, hay una razón por casi todas las marcas de comercio electrónico muestran el producto en situaciones de la vida real. Por ejemplo, pueden mostrar un bolso tal vez sobre un fondo en blanco, pero también lo mostrarán en el hombro de la mujer que se supone que es el público objetivo ideal para el cliente. Entonces, en serio, piensa en esto cuando estés eligiendo las imágenes para tu marca Y obviamente, en la siguiente lección, voy a estar mostrándote por qué puedes encontrar una gran variedad de imágenes absolutamente gratis sin ningún problema Ahora, igual que un pequeño ejercicio divertido, quería preguntarte cuál de estos dos conjuntos de cuadros e imágenes funcionan mejor juntos. Entonces te voy a dar 3 segundos, así tres, dos, uno. ¿Lo entendiste bien? Como puede ver, estas imágenes son simplemente mucho más consistentes. Y eso es lo que estás buscando cuando se trata de tu sitio web. Debes asegurarte de tener esto en mente. Porque a medida que las personas se desplazan por tus páginas y obviamente visitan diferentes páginas, vas a poder crear una armonía entre ellas. Por lo que va a crear una mejor experiencia de usuario en general. En fin, estoy súper emocionada de mostrarte algunas cosas increíbles en la siguiente lección, así que te veré ahí. 17. Diseño de sitios web 101: encuentra excelentes imágenes de sitios web en línea de forma gratuita: Entonces, ¿dónde puedes encontrar imágenes increíbles para tu sitio web de forma gratuita En esta lección, en realidad tengo dos opciones gratuitas que son fantásticas, y las uso todo el tiempo, y también dos opciones de pago. Ahora, en realidad he creado enlaces directos a las páginas web específicas del curso, solo para que sea súper fácil para ti encontrar cada plataforma. Ahora el primer sitio web, que es absolutamente gratuito, y puedes obtener tantos sitios web como quieras sin pagar un solo centavo es Pixab Todo lo que necesitas hacer es buscar el tipo de imagen que deseas y desplazarte hacia abajo, y hay toneladas de imágenes relevantes para tu término de búsqueda. Ahora bien, una cosa que realmente me gusta hacer es que me gusta hacer click en ciertos fotógrafos de los que me gusta mucho el estilo porque por lo general, eso me permite obtener diferentes imágenes relevantes que son del mismo fotógrafo con el mismo estilo, y por lo general tienen el mismo desgarro y sensación. Así que es mucho más fácil encontrar imágenes consistentes para tu sitio web de esta manera. De hecho, puedes usar exactamente este mismo enfoque para mi segunda plataforma gratuita, que es Pixels. Ahora bien, esto funciona exactamente de la misma manera que la cerveza Pixel. Generalmente hay algunas opciones más u opciones diferentes en este sitio web en particular, pero funciona exactamente de la misma manera. Entonces simplemente busca los tipos de imágenes que desea e imágenes, y luego simplemente le dará una selección de esas Basado en su término de búsqueda. Nuevamente, usa un pequeño truco ingenioso que te dije sobre la búsqueda de ciertos fotógrafos o si te gusta cierta imagen, haz clic en la imagen y luego debería tener el fotógrafo ahí abajo, y tendrán diferentes proyectos en diferentes categorías o colecciones, lo cual han hecho, que deberían tener el mismo desgarro, sensación y estado de ánimo. Ahora, encima de esas dos plataformas gratuitas, que te van a dar un montón de imágenes para elegir. Hay dos opciones premium más por ahí si quieres la imagen que es súper especial. Ahora, la primera es la parada de azúcar. Funciona exactamente de la misma manera que la cerveza Pixel y los píxeles, pero las imágenes simplemente son un poco más de calidad. Y en última instancia, todo se reduce a si crees que vale la pena pagar un poco por la imagen para obtener una imagen de calidad ligeramente superior. Ahora, personalmente, he usado **** de stock unas cuantas veces simplemente porque realmente quería una imagen increíble que encajara perfectamente en mi sección de héroes en un sitio web. Veces vale la pena simplemente vincular una imagen solo porque es de mayor calidad, y tal vez se adapte perfectamente a tus necesidades. Pero obviamente depende completamente de ti. Ahora, otro gran lugar para obtener imágenes increíbles es adoby imágenes de stock Ahora, personalmente, por alguna razón prefiero las acciones de Shutter a un Derby. No sé por qué, pero todo depende de las imágenes que estés buscando. Yo personalmente recomendaría buscar en todos y solo buscar el tipo de imágenes que deseas, y luego básicamente elegir la imagen que crees que más te convenga. Obviamente, no hay una respuesta correcta o incorrecta, pero solo recuerda, he creado un recurso que en última instancia puedes usar para llegar a cada una de estas plataformas en las páginas específicas para que puedas comenzar a buscar imágenes sin ningún sle Sé que esta lección fue Sean Sweet, pero tuve que compartirla contigo porque hay toneladas de imágenes por ahí que puedes usar, y quiero que encuentres las mejores para tu sitio web de marcas. En fin, espero verte en la siguiente lección. Nos vemos ahí. 18. Diseño de sitios web 101: recorte y encuadre (regla de tercios): ¿Qué es recortar y enmarcar? ¿Y cuál es la regla de los tercios? Bueno, si tienes alguna experiencia de fotografía, entonces deberías conocer ya la regla de los tercios. Pero en última instancia, al entender el recorte, encuadre y la regla de los tercios, realmente se puede agregar mucho más carácter y crear realmente una imagen cautivadora a partir de una imagen que a primera vista no fue realmente Realmente es un cambio de juego. Cuando entiendes cómo hacer esto correctamente, realmente puede ayudar a elevar diseño de tu sitio web tan rápido. Esto se debe a que cuando una imagen se recorta y enmarca de la manera correcta usando la regla de los tercios, realmente puedes ayudar a guiar el ojo del usuario y crear una imagen que realmente pueda atraer interés Entonces, ¿qué es recortar y enmarcar ante todo? Es esencialmente tomar una imagen y redimensionarla y cortar algunas partes para finalmente hacer que la imagen sea más interesante. Ahora, puedes hacer esto usando la regla de los tercios, y la regla de los tercios es esencialmente donde seccionas la imagen en nueve partes iguales. Esto se hace añadiendo dos líneas verticales y dos líneas horizontales directamente sobre la imagen. Ahora no siempre tienen que ser iguales, pero en la mayoría de los casos, habrá. Ahora bien, la regla de los tercios no solo se usa en el diseño de sitios web o en la fotografía, sino que también se usa en películas. Usar la regla de los tercios te ayuda a atraer interés a ciertos elementos dentro de la imagen. Ayuda a crear puntos focales y esencialmente ayuda a que la imagen parezca más intrigante y cautivadora Y puedes usar la regla de los tercios para agregar diferentes dimensiones dentro la imagen, diferentes profundidades. También puedes usarlo para jugar con el peso visual de la imagen, lo cual es realmente interesante, lo que realmente puede ayudarte a mantenerte alejado de un enfoque centrado realmente aburrido, que no va a ser muy interesante de ver. Ahora, una cosa para recordar es la consistencia. Entonces, si vas a usar la regla de tercios en todo tu sitio web, simplemente asegúrate de hacerlo por cada imagen para agregar intriga en cada punto donde la gente esté viendo fotos en tu sitio web Entonces solo un poco de ejercicio, sé que puede que no seas fotógrafo o ya sabes, director de cine o diseñador de sitios web en este momento. Aunque eso es lo que estamos tratando de hacer, me gustaría que solo veas estos dos ejemplos y me dijeras cuál crees que está usando la regla de los tercios en lo que respecta a recortar y liberar Como siempre, te voy a dar 3 segundos. Tres. Dos, no necesito que veas. Uno. ¿Lo entendiste bien? Entonces como puedes ver aquí. Esta imagen en particular es simplemente más cautivadora. Simplemente es más interesante, y te atrae. Sin embargo, con esta imagen, simplemente no es tan interesante. Es simplemente aburrido. Simplemente no parece llamar mi atención tanto como la otra. Entonces, si lo hiciste bien, entonces date una palmadita en la espalda, aplaudir, darte la vuelta, tocarte los dedos de los pies, y ve a encontrarte de café, para celebrar porque estamos a punto comenzar la siguiente lección, así que te veré pronto 19. Diseño de sitios web 101: contraste (y requisitos legales en Estados Unidos): La importancia del contraste en el diseño de sitios web. ¿Por qué es importante y qué significa siquiera? Bueno, comencemos entendiendo realmente lo que realmente significa el contraste. Ahora bien, algunas personas piensan que el contraste es sólo una especie de truco visual cuando en realidad es mucho más que eso. Porque el contraste en el diseño de sitios web puede ayudar con la legibilidad Puede ayudar a mejorar la experiencia del usuario, y también puede ayudar al usuario a llegar a donde necesita ser mucho más rápido dirigiendo su ojo y atención. Y todo eso es sumamente importante, pero algo que es aún más importante es el hecho de que si no tienes cierto nivel de contraste en EEUU y te ajustas a sus requisitos, podrías terminar con una multa considerable Y estos se hacen cumplir fuertemente como el estándar ADA y también los estándares WC AG. Básicamente, si alguien con discapacidad visual no puede distinguir entre ciertos elementos en tu página web porque el contraste no está ahí y no es lo suficientemente bueno, entonces esto podría meterte en un poco de agua caliente. Ahora, en realidad puedes verificar el contraste en este sitio web a continuación. También lo agregaré al curso que pueda verificarlo usted mismo y usarlo cuando esté construyendo su sitio web para asegurarse de que está seguro legalmente. Ahora tenemos las cosas legales nacidas fuera del camino. ¿Qué pasa con el uso de contraste para que tu diseño se vea y se sienta mejor para el usuario? Bueno, una de las más importantes es la diferencia entre texto y contraste de fondo. Ahora con todo lo que te he enseñado en este curso hasta ahora, deberías estar usando un fondo blanco para tu sitio web real, y luego deberías estar usando texto negro o un gris realmente oscuro. Entonces, desde un punto de vista de contraste, deberías estar bien. La única diferencia es si tu color primario o los colores de acento no se contrastan lo suficiente con el blanco, y esto podría meterte en un poco de problemas Asegúrate de revisar en el sitio web que te di hace un rato en esta lección, para que puedas darte un poco de mente que el contraste de tu sitio web está a la altura. Otra cosa que es realmente interesante en lo que respecta al contraste es la jerarquía visual. Por ejemplo, el sitio web de Apple usa esto para la barra de navegación. Es esencialmente una forma atractiva de usar el contraste para interactuar con el usuario. Les ayuda a saber a qué hacen clic y a dónde van. Y en última instancia, solo se suma a la experiencia del usuario para crear realmente un sitio web increíble para ellos a través de las cejas Ahora bien, lo que realmente quiero hacer es conducir casa la lección de lo importante que es el contraste. Así que echa un vistazo a estos dos ejemplos. Y no me dejes en 3 segundos, cuál crees que está usando el contraste correctamente. Y 32, uno. ¿Lo entendiste bien? Como puedes ver con el diseño de este sitio web , todo se ve bien. Está muy claro, y puedo verlo todo, y es muy fácil de digerir. Sin embargo, en el otro sitio web, es un poco diferente. Es un poco demasiado artístico, y realmente no puedo leer parte del texto. Es legible, pero en realidad no es tan fácil como el otro diseño. Tenga esto en cuenta a la hora de diseñar su sitio web. Mantén las cosas simples. Honestamente. Una de las cosas que le digo literalmente a cada estudiante y fundador y emprendedor y diseñador con el que trabajo en los últimos diez años es mantener las cosas simples. No hay que reinventar la rueda. Usa tu sentido común en lo que respecta al uso del negro con un fondo blanco y elige un color realmente único para tu paleta de colores pero solo asegúrate seguir los estándares en Estados Unidos si estás ahí porque no quiero que te metas en ningún problema ilegal. ¿Bien? Te veré en la siguiente lección. 20. Diseño de sitios web 101: repetición y consistencia: ¿Por qué la repetición y la consistencia son súper importantes a la hora de crear un sitio web hermoso? Bueno, cuando estos dos principios se unen, ayuda a crear una experiencia de usuario que es predecible, ayuda al usuario a usar menos calorías mentales cuando navega por tu sitio web y crea una mejor experiencia de usuario general. No se trata sólo de duplicar todo y hacer todo igual No es de eso de lo que se trata. De lo que se trata es de tener ciertos sistemas en su sitio web y el diseño para asegurarse de que cuando la persona se desplaza por la página de su sitio web, se siente como una experiencia larga y fluida Y no es complicado de hacer. En última instancia, es solo asegurarse de que sus colores, fuentes, imágenes y otros elementos sean de tono consistente y que el estilo de cada uno de esos elementos se repita lo largo de la totalidad del sitio web. Esto puede ayudar a crear una experiencia con la que el usuario pueda familiarizarse. Y al usar la repetición y consistencia a lo largo de cada página de su sitio web, también puede ayudar a que su marca se vea más profesional y, por lo tanto, más confiable. Pero esto también incluye cosas como botones y el espaciado entre letras en tu texto y el espacio entre el titular y el contenido. Muchos elementos diferentes que esencialmente puede reunir para crear su experiencia general en el sitio web. Entonces, ¿cómo puedes asegurarte de que todo tu sitio web sea consistente y estés usando la repetición de una manera, que no sea aburrida, sino más atractiva y que cree confianza Bueno, piénsalo así. Todas tus cosas básicas tienen que ser iguales. Pero ¿puedes expresarte de diferentes maneras para crear una experiencia atractiva para tu usuario? Por ejemplo, en las entradas de blog, puedes tener el llamado a la acción en el mismo lugar. Esto asegura que siempre que el usuario esté leyendo diferentes entradas de blog y tratando de educarse, sepa dónde va a estar en todo momento el llamado a la acción. La inconsistencia de la petición también es súper importante con el sitio web de comercio electrónico específicamente Piense en las páginas de productos y qué diferentes páginas de productos son última instancia, todas diferentes porque son un producto diferente, pero las imágenes reales que se muestran en el producto son muy similares Tienen los mismos ángulos, el mismo estilo, tal vez el mismo fondo de color. Todo se une para crear una repetitividad y también una consistencia al tiempo que permite que cada producto brille a su manera individual Otra cosa, que no es del todo visual, pero es más que ver con la experiencia real del usuario es asegurarse de que la funcionalidad de cada página también sea consistente. Por ejemplo, con tu barra de navegación, si tu barra de navegación es de un color diferente cada vez, va a una página diferente, realidad no va a quedar muy bien. Así que asegúrate de tener en cuenta que la consistencia y la repetitividad no son aburridas En realidad es algo que tu usuario necesita. Necesitan familiarizarse con su sitio web para que puedan usarlo de una manera que sea la más efectiva para que lleguen a donde necesitan ir en el menor tiempo posible y con la menor cantidad de clics. Ahora, igual que un poco de diversión, veamos estos dos ejemplos, y tú me dices cuál de estos dos está usando la teoría y la práctica de la repetición y la consistencia para crear un mejor fiel general, que se siente más familiar para el usuario. Bien, te voy a dar 3 segundos, así que tres, dos, uno. ¿Lo hiciste bien? Ahora bien, si no lo hiciste bien, no te preocupes. Vamos a aprender y ver muchos más ejemplos a medida que avanzamos por el curso. Y la consistencia y la repetición van a ser muy evidentes cuando estemos construyendo nuestro sitio web más adelante. Pero si lo hiciste bien, enhorabuena, palmaditas en la espalda y otro café para ti. Y si no te gusta el café, entonces no lo sé. No sé qué decirte. En fin, ¿te veré en la siguiente lección del curso? No puedo esperar a ver eso. 21. Diseño de sitios web 101: superposición: Bien, entonces, ¿qué es lo que se superpone en el diseño web? Bueno, la superposición es una forma bastante poco convencional de desarrollar tu sitio web porque generalmente se trata de cosas pd muy estructuradas y organizadas Pero la superposición puede agregar un poco de intriga visual, y también puede hacer que las cosas vean y se sientan un poco más creativas Al usar la superposición, realmente puedes atraer al usuario, y realmente puedes, ya sabes, captar esa atención. Entonces, ¿cómo usas realmente superposición correctamente dentro de tu sitio web? Bueno, puedes usar muchas formas diferentes, pero en última instancia la regla principal es básicamente romper la regla de usar cuadrículas, superponer dos elementos para que creen algún tipo de profundidad intrigante Ahora, lo que realmente estás haciendo con superposición es que estás permitiendo que un elemento se rompa fuera de sus límites. Y al romper fronteras externas, nuestros ojos se sienten atraídos instantáneamente hacia él porque en última instancia no se supone que esté donde está. En realidad, está cruzando hacia límite de otro elemento, lo que puede hacer que la página se vea un poco desordenada, pero si se hace correctamente, en realidad puede lograr muy bien Ahora, algunas cosas en las que pensar, si te estás preguntando si la superposición va a valer la pena hacer para tu sitio web en particular. Lo primero es que realmente puede dar una agradable sensación moderna. Es posible que los sitios web tradicionales no necesiten el enfoque superpuesto, pero si quieres que se vean como un poco diferentes, un poco innovadores y un poco nuevos y modernos, entonces la superposición podría ser un gran enfoque para ti. Ahora bien, una manera realmente genial de pensar sobre superposición es utilizarla como capas. Entonces, por ejemplo, tienes tu color base de tu sitio web, que es la primera capa, luego tienes la capa secundaria, que es el primer elemento, y luego la capa superior debe ser el otro elemento, que obviamente se superpone sobre el primer elemento. Ahora bien, el elemento superior, que se superpone, debería ser un poco más pequeño porque deberías poder ver la base del sitio web, la primera capa y la segunda capa de una vez. No debería superponerse demasiado porque entonces eso va a ocultar en última instancia el primer elemento y contradecir por completo toda la práctica de solapamiento en primer lugar Ahora bien, otra cosa en la que pensar es usar la superposición con moderación, porque sí arrastra el ojo hacia la superposición, y es porque puedes llamar la atención sobre el elemento solapado, pero realmente no quieres usarlo con demasiada frecuencia, porque va a perder su novedad Y usuario lo vas a ver como un poco molesto con el paso del tiempo. El mejor lugar que me gusta usarlo es en la sección de héroes. Realmente llama la atención de la gente, los trae en Entonces tienes su atención para que puedan desplazarse por el resto de tu sitio web. También recuerda que puedes usar la superposición para resaltar ciertos aspectos de un sitio web, como tu llamado a la acción, por ejemplo. Porque recuerda, estás usando la superposición para arrastrar la atención de la gente a ese elemento en particular. Úsalo a tu favor, úsalo estratégicamente. Ahora quería mostrarles dos ejemplos. Solo un poco de diversión solo para ver si puedes detectar la superposición hecha correctamente y la superposición hecha bien, no tan correctamente. ¿Cuáles son estos dos ejemplos crees que es mejor? ¿Cuál crees que está usando superposición de la manera correcta? Tres, dos, uno. Ese es el indicado. ¿Lo hiciste bien? Ahora bien, si no lo hiciste bien, no te preocupes. La superposición no es para todos. Y además, vamos a estar cubriendo un poco más adelante en el curso, así podrás recogerlo entonces. Pero si lo hiciste bien, bien hecho, palmaditas en la espalda, y te veré en la siguiente lección. Nos vemos más tarde. 22. Diseño de sitios web 101: espacio en blanco: Espacio en blanco en el diseño de sitios web. ¿Qué tan importante es? ¿Qué es? ¿Y cómo podemos usarlo para crear sitios web hermosos? Ahora, como dije, al principio del curso, creo personalmente que el 99% de la web debería tener un fondo blanco o un fondo realmente, realmente, realmente carrera. Y hay una razón para eso porque a la gente le gusta el blanco. Especialmente a mí. A mí me encanta el blanco. Ahora bien, la razón por la que nos gusta el blanco es porque permite que los elementos dentro del sitio web respiren. Ahora, el espacio en blanco se puede llamar muchas cosas diferentes. Hay micro espacio en blanco, hay macro espacio en blanco, que cubrirá un poco más tarde, pero también se le conoce como espacio negativo, que también se inclina en el diseño de logotipos, si eres diseñador de logotipos. Hay algunas cosas que son muy importantes para recordar cuando usas espacios en blanco dentro del diseño de tu sitio web para obtener realmente los mejores resultados. Ahora bien, ¿qué es el espacio en blanco ante todo? Bueno, el espacio en blanco es el espacio intencionalmente dejado que no tiene nada en él. Está completamente en blanco. El espacio en blanco esencialmente da a todo el contenido y los elementos dentro su sitio web espacio para respirar. Y sin ese espacio para respirar, tu sitio web puede sentirse bastante limitado y bastante ocupado, y realmente no queremos que el sitio web se vea súper súper ocupado. Queremos que sea un poco más moderno, un poco más aireado, un poco más aireado, para que la persona se sienta a gusto mientras está garabatando lentamente a través de tu sitio web y descubriendo más sobre ti Ahora, el espacio en blanco realmente puede ayudar a crear un diseño realmente despeinado. Y esa es la clave. Quieres que tu contenido sea súper legible para tus usuarios, que en última instancia puedan tener la mejor experiencia posible, y puedan consumir toda la información que necesites digerir. En última instancia, conduce a un diseño más astéticamente agradable. Ahora bien, si no usas espacios en blanco, entonces en última instancia te arriesgas a sobrecargar las páginas de tu sitio web y última instancia, apagar a la gente de querer pasar demasiado tiempo viendo por Apple que usan toneladas de espacio en blanco al diseñar sus sitios web Y te sorprendería lo hermoso que un texto simple con una hermosa imagen y mucho espacio en blanco realmente puede darle vida a tu sitio web. En lo que respecta al diseño de sitios web, a veces menos es más. Así que tener un montón de espacio en blanco realmente puede ayudar a crear esta hermosa experiencia que tus usuarios pueden esperar. Ahora bien, ¿cuál es la diferencia entre macro y micro espacio en blanco? Porque esto es realmente importante. Ahora, el micro espacio en blanco es lo más grande, como, por ejemplo, tu fondo, como el relleno y margen entre tu titular y el contenido, por ejemplo, el espacio entre el contenido de tu sitio web es el texto, y luego también las imágenes que tienes al lado, tal vez, como el espacio entre el botón y la parte inferior de algún texto sobre él mientras que el micro espacio en blanco es un poco diferente. Eso es cosas como el espacio entre el texto en tu sitio web, solo para darle un poco de respiro, o tal vez incluso el mayor espacio en blanco entre texto que está en un botón, por ejemplo, para darle un poco más de espacio para respirar y ayudar a que destaque. Ahora, es un poco de experimento. Veamos dos sitios web diferentes, uno que usa correctamente el espacio en blanco y otro que no está usando del todo el espacio en blanco a la derecha. Cuál de estos dos crees que está usando mejor el espacio en blanco? Te voy a dar un poco de tiempo. Tres, dos, uno. ¿Lo hiciste bien? Como puedes ver, usar correctamente los espacios en blanco realmente puede ayudarte a crear una experiencia increíble para tus usuarios. Pero si no lo usas correctamente y solo tienes tu sitio web un poco desordenado y no realmente organizado correctamente, también puedes tener un efecto negativo también Así que tómate un tiempo, da un paso atrás y recuerda siempre que siempre puedes agregar y llevar y experimentar mientras diseñas tu sitio web. En fin, espero que esta lección les resulte útil en los ejemplos. Por lo que espero verle más adelante en el curso. Nos vemos entonces. 23. Diseño estratégico de sitios web: definición de objetivos: ¿Cómo encuentras el objetivo estratégico para tu sitio web? Bueno, en esta lección, vamos a aprender cómo puedes encontrar los objetivos para tu sitio web, para puedas asegurarte de que tu sitio web está trabajando duro para ti todos los días, 247, los siete días de la semana en 365 días al año. La forma en que me gusta pensar sobre un sitio web es como un empleado digital. Entonces mi sitio web está trabajando duro para convertir el tráfico del sitio web en clientes de pago. Que todo lo que necesito hacer es saltar una llamada rápida de ventas con ellos y ponerlos sobre la línea de meta. Ahora, obviamente, cada negocio es único y ligeramente diferente a su manera. Pero los objetivos que tienen que lograr los sitios web para esos negocios son muy similares. Entonces, ¿cómo encuentras personalmente los mejores objetivos que tu sitio web necesita lograr para tu negocio? Ahora bien, lo primero que quiero decir es que aunque hay algunos sitios web que intentan lograr muchos objetivos a la vez, esta es la primera vez que estás construyendo un sitio web, deberías estar enfocándote ya sea en un solo objetivo o un objetivo primario y uno de apoyo. No lo hagamos si eso no tiene sentido todavía. Vamos a profundizar un poco más en esta lección. Ahora bien, la razón por la que lo veo para enfocarme solo en un objetivo o dos objetivos es mantener las cosas simples. Esto se debe a que cuando un usuario llega a tu sitio web, lo último que queremos es que se confunda. Y de hecho te voy a mostrar algunos ejemplos un poco más adelante en esta lección de sitios web que utilizan el enfoque objetivo uno y dos, que sugiero que todos usen cuando están construyendo por primera vez un sitio web para su empresa. Ahora, si estás construyendo un sitio web para una marca de comercio electrónico, entonces los objetivos que deberías tener en su lugar son bastante simples. El primer objetivo debe ser bastante autoexplicativo, y es decir generar ventas. Por lo que todo en lo que respecta a su sitio web debe enfocarse en generar tantas ventas como sea posible. Vamos a entrar en algunos métodos especiales como upselling, cross selling y varias otras tácticas de marketing y ventas Pero en este punto, solo necesitamos enfocarnos en los objetivos que tiene tu sitio web y en lo que necesita lograr. Ahora bien, obviamente, vender sería el objetivo principal de cualquier empresa de comercio electrónico, pero el objetivo secundario sería finalmente reunir tantas direcciones de correo electrónico como sea posible para que pueda venderle a esa persona en particular más adelante en el futuro. Construir una lista de correo electrónico que le permita mantenerse en contacto directo con clientes potenciales que estén interesados en lo que tiene para vender. Por lo tanto, lo que le permite generar más ingresos más adelante en el futuro. Ahora, cuando estás construyendo un sitio web que vende productos o servicios digitales, el enfoque es bastante simple y directo. Ahora para que tu negocio sea exitoso, en última instancia necesitas vender tus productos o servicios. Y para hacer eso, te refieres a saltar en algún tipo de llamada de ventas con un cliente potencial para discutir sus necesidades para que en última instancia puedan comprarte y sentirse cómodos haciéndolo. Entonces, para un sitio web que está vendiendo algún tipo de servicio o producto digital o algo que sea intangible como una marca de comercio electrónico, por ejemplo, entonces en última instancia su objetivo principal debería ser establecer algún tipo de llamada de ventas o generar realmente el ver si eso es posible Para mí, personalmente, con mi negocio basado en servicios, me enfoco en generar llamadas de ventas, para poder discutir el proyecto con el cliente y finalmente cerrar la venta a partir de ahí. Ahora como objetivo secundario, esto podría ser generar confianza. Por ejemplo, para el sitio web de mi agencia de branding , clementinh do, he posicionado mi sitio web para mostrar todo el trabajo que he realizado en la última década También me aseguro de responder a todas las preguntas que puedan tener los clientes potenciales con preguntas frecuentes y agregar testimonios con clientes anteriores con los que hemos trabajado. Y también me aseguré de agregar algunos cuestionarios en el sitio web para que podamos comenzar a generar clientes potenciales a partir de hacer preguntas a los clientes en un entorno digital La realidad es que los clientes no saben lo que no saben. Al hacerles preguntas que invitan a la reflexión, última instancia nos posiciona como un experto en el campo de la marca , el diseño de marca y también el desarrollo de sitios web para que cuando los clientes se pongan en contacto con nosotros y comiencen a tomar nuestros cuestionarios y mirar alrededor de nuestro sitio web, sientan al menos saber que sabemos de lo que estamos Ahora, construir un sitio web para una marca personal viene de una gama de objetivos diferentes entre los que puedes elegir. Ahora bien, estos son los objetivos más comunes que veo sitios web de marcas personales el primer objetivo es construir tu lista de correo electrónico. Al igual que un sitio web de comercio electrónico, por ejemplo, estás tratando de construir una lista de correo electrónico y una lista de personas a las que puedas vender más adelante cuando sea el momento adecuado. Básicamente te estás manteniendo en contacto directo con personas que están interesadas en lo que tienes que ver y lo que puedas tener para ofrecer en el futuro. Entonces, en última instancia, tener algún tipo de generación de leads o algún tipo de descarga gratuita donde la gente pueda intercambiar su dirección de correo electrónico por ese activo en particular, eso en última instancia va a ayudarte a hacer crecer tu lista de correo electrónico súper rápido. Ese sería probablemente tu principal objetivo. Pero, ¿cuáles serían los objetivos secundarios que potencialmente podrías explorar? Bueno, si realmente quieres sumar objetivos secundarios, eso podría ser aumentar tus seguidores en las redes sociales. Por ejemplo, alguien puede encontrarte en YouTube y luego visitar tu sitio web, y al tener pequeños íconos en tu pie, básicamente mostrando que también estás activo en TikTok e Instagram, gente va a poder encontrarte también en esas otras plataformas Entonces, básicamente, estás creando este ecosistema y comunidad de personas que quieren saber más sobre ti y en última instancia quieren seguir lo que tienes que decir. Ahora, a medida que crece la marca personal de alguien, obviamente, posible que el sitio web también tenga que ofrecer diferentes tipos de productos. Por ejemplo, si la marca personal tiene mucha autoridad y confianza, entonces esa persona puede ser reservada para hablar y, tal vez, avales de marca Entonces vas a tener que agregar otros elementos al sitio web para acomodar eso. Va a estar mirando diferentes sitios web y los objetivos que están tratando de lograr a lo largo del curso. No te preocupes si las cosas aún no están 100% claras. En este punto, todo lo que necesito que hagas es que empieces a pensar los objetivos que quieres que logre tu sitio web y los anotes. Porque cuando los escribes, encontrarás que todo lo que haces, cuando realmente comienzas a diseñar tu sitio web y construir tu sitio web lo hace súper fácil cuando tienes un enfoque claro en lo que estás tratando de lograr. En fin, realmente espero que disfrutes esta lección y te veré en la siguiente. Nos vemos. 24. Diseño estratégico de sitios web: encuentra inspiración: Antes de comenzar a construir su sitio web, necesita algo de inspiración. Ahora hay dos lugares principales donde puedes encontrar una increíble oleada de inspiración a la hora de diseñar tu sitio web y pensar en ideas para tu sitio web. Ahora, el primero viene en forma de café. Y para ser sinceros, de ahí viene prácticamente toda mi energía en estos días, con un poco de azúcar y postre. Y Binsu. Si nunca has tenido BinSu, pruébalo. Es increíble. Y otro lugar donde puedes encontrar inspiración ¿lo has adivinado En línea. Entonces, de hecho, recomiendo estos tres sitios web para encontrar inspiración en línea para sus ideas de desarrollo de sitios web. Entonces el primer lugar son los premios deletreados E W, W, W. Ard s.com Los premios son esencialmente el pináculo de todo el diseño de desarrollo de sitios web, No, los sitios web están extremadamente bien diseñados y esencialmente están clasificados por expertos en desarrollo de sitios web, lo que puede obtener los mejores sitios web por lo que puede obtener los mejores sitios web mucho antes sin tener que rastrillar muchos sitios web malos, si eso tiene sentido Entonces, si estás luchando por entender qué hace que un sitio web sea bueno y un sitio web malo, puedes consultar estos sitios web y saber que todos son prácticamente acertados. Ahora, en realidad puedes hacer clic en cada sitio web y experimentar el sitio web un poco más y entender un poco sobre cómo a la persona se le ocurrió la idea, por qué hizo ciertas cosas, solo para tener una idea de cómo quieres abordar el desarrollo de tu sitio web. Ahora, por favor recuerda, y ya mencioné esto antes en el curso que cuando estás mirando otros sitios web, no tienes que copiar tu sitio web, ya sabes, Spade por la velocidad, pero lo que puedes hacer es que en última instancia puedes mirar lo que te gusta de ese sitio web, luego tomar eso como inspiración lejos ese sitio web para usarlo como parte de tu propia idea Entonces, una gran cosa de los premios es que en realidad puedes visitar el sitio web tú mismo y verlo completamente activo y en movimiento para que puedas experimentar lo que el diseñador ha construido. Ahora, otro gran lugar para encontrar inspiración es un sitio web llamado manos B. Y nuevamente, hay tantos tipos diferentes de sitios web para elegir. Entonces, si solo te desplazas y encuentras algo que crees que se ve genial como este, por ejemplo, entonces realmente puedes pasar por el proceso de en última instancia cómo ese diseñador en particular se le ocurrió la idea. Y nuevamente, puedes simplemente tomar las cosas que te gusten del sitio web. Entonces tal vez solo te guste mucho la fuente y lo elegante que se ve, tal vez te guste la combinación de colores y cómo la fotografía combina muy bien con los blancos y grises y negros de los sitios web A lo mejor te gusta el hecho de que es realmente limpio y sencillo, y no está pasando demasiado. Así que toma tantas notas como sea posible, porque más adelante, cuando realmente lleguemos a construir tus sitios web, vas a poder entender exactamente lo que te gusta y lo que no te gusta para que el resultado final sea mejor de lo que puedas imaginar. Be Hans, para ser honesto tiene la más amplia gama de sitios web increíbles para toneladas de diferentes tipos de sitios web Entonces, por ejemplo, ya sea una marca personal o empresa de servicios o incluso una empresa de servicios en un sector en particular, puedes buscar el tipo de sitio web que deseas ver. Y en definitiva, B Hans te va a dar los ejemplos más relevantes también son los que más se aprecian, por lo que estás obteniendo los mejores sitios web posibles en la plataforma sin ningún esfuerzo adicional. Ahora bien, el último lugar en el que quizás no hayas pensado a la hora de inspirarte para el diseño de tu sitio web es Pinterest. Ahora, como puedes ver aquí, Pinterest tiene algunos ejemplos increíbles de desarrollo de sitios web, muchos tipos diferentes de sitios web, para muchos tipos diferentes de sectores, y no tienes que inspirarte solo en los tipos de sitios web específicos para tu marca en particular. Puedes ver sitios web de muchas marcas diferentes y, en última instancia, puedes tomar lo mejor de todas ellas para crear una experiencia realmente única para tu usuario. Y al igual que B Hans, puedes buscar tipos muy específicos de sitios web como sitios web de comercio electrónico, sitios web de marcas personales o sitios web de servicios, para obtener los tipos de sitios web que son relevantes para tu marca y negocio en particular, que puedas inspirarte mucho antes. También, al igual que las manos B, los palos de Pinterest, los mejores sitios web en la parte superior, para que puedas obtener los mejores ejemplos posibles mucho antes. 25. Diseño estratégico de sitios web: ejemplos de sitios web de comercio electrónico: Construir un sitio web de comercio electrónico significa que básicamente necesita vender la mayor cantidad de producto posible para tanto como sea posible. Y si quieres ser el mejor en tu mercado en particular, entonces deberías estar investigando lo mejor dentro de tu sector particular Por ejemplo, si fueras una empresa de joyería, entonces mirarías a alguien como Tiffany and Co que sepa exactamente cómo vender productos de gama alta, ¿verdad? Sí, en efecto, han existido desde el 18 37, pero eso solo significa que hay un tesoro de lecciones por aprender para que puedas averiguar qué te gusta y qué no te gusta de cómo hacen su sitio web Ahora, puedes ver aquí, toda su fotografía de producto es absolutamente impecable También cortaron sus productos con algunas fotos agradables de estilo de vida, de su producto siendo ganado por una modelo encantadora. También puedes ver que hacen esto con bastante frecuencia donde están mostrando a la modelo que realmente lleva el collar, solo para captar el interés de nuevo para el usuario, y no solo están mirando productos mundanos una y otra vez Se puede ver que la interfaz de usuario es realmente, muy fluida. De hecho, puedes navegar por los diferentes productos. Así que realmente puedes entender lo que estás comprando antes hacer clic en el producto para ver los detalles más finos Y puedes ver cómo realmente se enfocan en usar una paleta de colores muy simple de grises y blancos y, ya sabes, especie de tonos bronce para finalmente posicionar muy bien a la marca y dejar que brille el color principal de Tiffany Esas son solo algunas cosas que me quité de mirar el sitio web de Tiffany y Core por un par de minutos, pero deberías pasar más tiempo en los sitios web de tu competencia para finalmente ver lo que están haciendo bien y lo que no están haciendo tan bien. Toma inspiración, toma notas y aprende lo que te gusta y lo que crees que va a funcionar para tu marca en particular. Ahora, como otra marca que sabe lo que están haciendo cuando se trata de comercio electrónico, por decir lo menos. Echemos un vistazo al sitio web de Nike para averiguar qué hacen para conectar realmente con su público objetivo y última instancia, crear la mejor experiencia posible, que está en la marca, para vender la mayor cantidad de producto posible. Lo que puedes ver aquí tan pronto como llegas al sitio web de Nike es que están muy enfocados en las zapatillas. Y muchos de los ingresos de Nike en realidad provienen de zapatos y zapatillas deportivas, y en particular, las zapatillas Jordan, que son extremadamente populares en Estados Unidos y prácticamente en todo el mundo. Entonces, de lo que puedes aprender de eso es que cuando tienes un producto principal o un best seller, eso debería estar a la vanguardia de todo lo que haces rem en tu sitio web. Ese debería ser el primer producto que veas. Ese debería ser el producto que se presenta más fácilmente. Y también, recuerda que cuando realmente estamos viendo un sitio web, lo vemos desde la parte superior izquierda la inferior derecha en ese orden. Entonces cruzamos en líneas. Entonces, en última instancia, lo que quieres estar haciendo es que quieres estar mirándolo como si estuvieras leyendo un libro. A menos que, en algunas culturas donde se lee de derecha a izquierda, mayoría de la gente en el mundo occidental lee de izquierda a derecha. Así que tenlo en cuenta y asegúrate de estar posicionado en los productos de izquierda a derecha en función de su importancia y popularidad. Así que de nuevo, solo estoy mirando los diferentes elementos del sitio web y trato de tomar lo más posible. Al igual que, en realidad me gusta mucho esta sección en particular simplemente donde es como una tarjeta de regalo, ¿verdad? Todos los regalos más grandes. Nike. Simplemente se ve realmente genial. Me encanta la combinación de colores, me encanta cómo funcionan juntos el oro y el verde. Entonces esto podría ser potencialmente algo que escriba o tal vez incluso una captura de pantalla para decir: Bien, si voy a hacer una tarjeta regalo, voy a hacer algo como esto. Este es el tipo de estilo que quiero. Y puedo llevar eso a la siguiente etapa, que en realidad va a ser construir el sitio web y usar esa pieza en particular del sitio web como inspiración. Si estoy buscando ofrecer una tarjeta regalo dentro de mi oferta particular. Así que no importa de dónde obtengas tu inspiración, ya sean manos B, premios, Pinterest, o tu competencia, único que importa es que te tomes el tiempo para aprender lo que te gusta y lo que no te gusta. Para que puedas construir el mejor sitio web para ti. En fin, realmente espero que hayan disfrutado de esta lección. Te veré en la siguiente. Nos vemos. 26. Diseño estratégico de sitios web: ejemplos de sitios web de marca personal: Para inspirarse en los sitios web personales de marca, puedes ver lo increíble busca este sitio web en particular para UC y Bolt, que es este tipo extremadamente rápido al que no quieres estar persiguiendo o ser Chase por el caso. Ahora, para ser completamente brutalmente honesto, me encanta la simplicidad de este sitio web, pero aparte de eso, en realidad no veo mucho sobre el sitio web que me gusta En realidad, no usaría una gran parte de este sitio web en particular en mi propio diseño. Creo que es muy sencillo son muy mínimos. Me gusta cómo está en la marca con sus colores, y me gusta mucho el logo. Pero aparte de eso, esto no es realmente lo que estoy buscando, y eso está bien. Entonces, cuando realmente estás viendo un sitio web, no tienes que amar todo al respecto. De hecho, puede que no te gusten muchas cosas al respecto. Solo da un paso atrás y mira las cosas desde tu punto de vista del usuario, ¿verdad? Ya sabes, si fueras el usuario, ¿Qué pasa con este sitio web, encuentras que se suma a la experiencia y qué le quita a la experiencia? Porque al tomarse el tiempo para entender exactamente lo que disfrutas desde el punto de vista de un sitio web, te va a permitir tomar mejores decisiones más adelante, pero solo te permites tomar esas decisiones y realmente aprender sobre lo que te gusta y lo que no te gusta tomándote el tiempo para entender ¿qué más hay ahí afuera Necesitas ver otros sitios web que están en tu espacio para entender lo que están haciendo para que puedas entender lo que es para ti y lo que no es del todo para ti. Si nos fijamos en otro sitio web de David Goggins, quien es este tipo de foca de la Marina realmente inspirador que originalmente tenía que originalmente tenía sobrepeso, y ahora es como un Jack Maniac absoluto Él está consiguiendo que compres su libro estas distintas plataformas. También tiene grandes testimonios de gente como Dyn the Rock Johnson y Joe Rogan Y en definitiva, este sitio web, también, no es una locura. No estoy completamente enamorada de ella. Pero una cosa que realmente me gusta este sitio web es la página de logros. Por lo que tiene una página, que está alrededor de sus años de logro atlético todo el camino de regreso a 2005. Entonces estas son todas las diferentes razas en las que ha participado para finalmente llevarlo al punto en para finalmente llevarlo al el que ahora es este maniaco absoluto secuestrado, quien literalmente puede, ya sabes, quiero decir, esto es en realidad un ejemplo de él cuando estaba de vuelta en el día anterior a ser foca de la Marina Ahora bien, él es, ya sabes, creo, solo una de las personas más en forma y atlética del planeta. Sólo está loco, ¿verdad? Entonces, este sitio web en realidad muestra quién es él como persona Muestra el tipo de mentalidad que tiene, y no solo te lo está contando En realidad te está enseñando, yo he hecho todas estas carreras. Yo vine primero, vine segundo. Sabes, no me coloqué en esta, pero aun así lo hice, y es como una carrera de 22 horas, lo cual es una locura. Me gusta esta página en particular como constructor de confianza. Entonces creo que esto es algo que realmente puedo quitarme como inspiración cuando estoy construyendo mi propio sitio web de marca personal. Una marca personal debe ser capaz de mostrar a las personas que pueden caminar el paseo, así como platicar la plática, lo cual es realmente importante porque necesita construir confianza y autoridad. Así que no importa de dónde obtengas tu inspiración, ya sean manos B, premios, intereses, o tu competencia, único que importa es que te tomes el tiempo para aprender lo que te gusta y lo que no te gusta. Para que puedas construir el mejor sitio web para ti. En fin, realmente espero que hayan disfrutado de esta lección. Te veo en la siguiente. Nos vemos. 27. Diseño estratégico de sitios web: ejemplos de sitios web B2B: Ahora, en lo que respecta a inspirarse negocios basados en servicios o vender software, por ejemplo, monday.com es un ejemplo realmente genial Ahora bien, si no sabes lo que es monday.com, es esencialmente como una plataforma de productividad donde en última instancia, puedes administrar tu día o administrar tus clientes y todo ese tipo de cosas Esencialmente se parece mucho a la noción, pero básicamente es más cara. Ahora, en lo que respecta a monday.com, puedes ver aquí que tienen una muy buena variedad de opciones . Entonces esto es esencialmente como cliente, voy a elegir, Bien, a lo mejor quiero usarlo para creatividad y diseño, empezar. Así que esencialmente empiezo y me lleva directamente a una página de registro. Entonces me estoy inspirando aquí pensando, Bien, tal vez con mi negocio particular, quiero mostrar las opciones que debería tener el usuario, para que, ya sabes, podamos empezar a tomar todos los visitantes del sitio web y ponerlos en ciertos cubos para que pueda crear una mejor experiencia en el futuro porque cuando hago clic en este botón, está diciéndole a monday.com que me lleve a páginas, que son relevantes para la creatividad y el diseño. Si hago clic en algo como marketing, me va a llevar a una página, que es más relevante para el marketing. Si hago clic en algo como RRHH, sabe que lo voy a usar para RRHH. Así que piensa en esto cuando realmente estés buscando desarrollar las páginas de tu sitio web para que la gente llegue a la página relevante lo antes posible. Para que puedan inscribirse para que puedan empezar a darte dinero y trabajar contigo encontrar una solución al problema. Ahora, otra cosa realmente genial que quiero mostrarte porque así es como pienso de los sitios web cuando solo los estoy viendo es lo genial que es, cómo estas pequeñas cosas se iluminan para interactuar contigo desde el punto de vista de la experiencia del usuario Al igual que, solo me gusta el hecho de que todos se adaptan a los colores de los iconos, y solo me gusta el hecho de que en realidad estoy interactuando con el sitio web, y parece que mi mano es una extensión del sitio web. Así que ten en cuenta porque inspiración puede venir de cualquier parte. Puede provenir de colores, puede provenir de fondos, puede provenir de estructura. Sea de mente abierta cuando esté pasando por el desarrollo de un sitio web o buscando inspiración, porque la inspiración puede venir de cualquier parte. Si vamos a este sitio web, que es Canva, del que estoy seguro que has oído hablar Es como una plataforma visual de diseño para todos. Ahora, se puede ver que literalmente usan exactamente el mismo enfoque. Tienen una especie de sección interactiva donde básicamente se puede decir, Bien, estoy buscando usar Canva para presentaciones, o tal vez estoy buscando usarlo para sitios web Eso es bastante conveniente. O tal vez estoy buscando usarlo para publicación de Instagram. Hace que sea súper simple para ti encontrar la página relevante a la que necesitas llegar lo antes posible. Y esto no es por error. Esta es en última instancia la mejor manera posible lograr que un usuario se registre porque Canva y monday.com tienen el objetivo de lograr que las personas se inscriban para usar su plataforma Porque si no se inscriben, ¿adivina qué? No les pagan y no pueden generar ingresos. Entonces, haciendo que sea realmente sencillo para las personas encontrar la página o encontrar la información que necesitan de manera muy fácil y llegar a donde necesitan ir lo antes posible, va a aumentar la cantidad de registros que estas dos plataformas pueden No importa de dónde obtengas tu inspiración, ya sean manos B, premios, pinterest, o tu competencia, lo único que importa es que te tomes el tiempo para aprender lo que te gusta y lo que no te gusta. Puedes construir el mejor sitio web para ti. En fin, realmente espero que disfrutes de esta lección. Te veré en la siguiente. Nos vemos. 28. Diseño estratégico de sitios web: definición de objetivos: Bien, entonces estructurando las páginas de tu sitio web. ¿Por qué empezamos y cómo lo hacemos? Bueno, si recuerdas de una lección anterior, cuando hablamos de la página de inicio y realmente captando la atención de la persona en el menor tiempo posible, conocerás la estructura que necesitamos usar ya Y esa estructura se basa en torno a tres preguntas clave. Siendo el número uno, ¿estoy en el lugar correcto? Número dos, siendo, ¿puedo confiar en ti? ¿Un ser número tres? Dime más. Entonces, ¿qué significa esto para la estructura de las páginas de tu sitio web? No importa de qué página estés hablando en tu sitio web, última instancia deberías estructurar las páginas de tu sitio web alrededor esas tres preguntas en todo momento. Y si sigues la fórmula simple, entonces nunca podrás equivocarte al intentar construir cualquier página para tu sitio web. Y esto se debe a que están estructurados en torno exactamente las mismas preguntas que un visitante del sitio web hace en su mente cuando visita su sitio web por primera o segunda vez. Así que piensa siempre en las páginas de tu sitio web en este orden. Y esto va para cada tipo de sitio web que existe, ya sea un sitio web de comercio electrónico, un sitio web de servicio o un sitio web de marca personal. Ahora, en la siguiente lección de este curso, vamos a estar cubriendo cómo diferentes sitios web toman exactamente este mismo enfoque y solo lo estructuran de una manera ligeramente diferente para que sea suya. Obviamente, cada negocio es único. Quiero darle un marco sólido de confianza para seguir cada vez que construya una página nueva para su sitio web. Porque en última instancia, tu sitio web necesita verse bien, pero también necesita obtener tus resultados, y por eso estamos aquí. Ahora una cosa que encuentro súper útil a la hora de diseñar un sitio web desde cero es simplemente tomar un bolígrafo de confianza y poco de papel y realmente esbozar un diagrama realmente simple y fácil de entender de qué es cada sección y qué debe incluir la sección Por ejemplo, para la página de inicio, literalmente simplemente pondría una caja en la parte superior como la sección de héroes y diría, decirle al cliente por qué están aquí. La siguiente sección sería una sección de construcción de confianza. Entonces la sección a continuación eso sería lo que realmente hacemos y lo que podemos ofrecerte. Esto le va a dar al cliente exactamente lo que quiere en el orden en que lo quiera. Y puedes hacerlo por cada sección del sitio web. Y si te tomas un tiempo solo para delinear rápidamente la experiencia en tu sitio web con cuadros simples y solo texto, entonces finalmente puedes detectar cualquier problema o desafío en particular antes de llegar a la etapa de desarrollo del sitio web, que viene más adelante. Ser, por ejemplo, es muy fácil simplemente garabatear una caja y simplemente cambiar algunas cosas en un trozo de papel con un bolígrafo Pero una vez que realmente hayas puesto el tiempo y el esfuerzo en diseñar la sección y luego construirla en tu sitio web en Webflow, última instancia va a ser mucho más difícil de cambiar, y es posible que tengas que volver al principio para comenzar de nuevo desde cero Entonces en este punto, podemos cometer todos los errores que queramos y podemos experimentar tanto como tu corazón desee, porque solo toma unos segundos garabatear todo y empezar nuevo y escribir una estructura completamente nueva con bolígrafo y papel Pero solo para asegurarnos de que estás 100% seguro en cuanto al tipo de estructura que crees que funcionará para tu sitio web en particular, vamos a sumergirnos en un par de ejemplos en la siguiente lección donde puedes ver cómo algunas otras empresas han utilizado la estructura de su sitio web para crear realmente una gran experiencia para sus usuarios. Entonces con nuestro Fellow Delay, vamos a morir en esa lección, y te veré muy pronto. 29. Diseño estratégico de sitios web: definición de objetivos: ¿De verdad puedes usar plantillas de sitios web o vale la pena construir tu sitio web desde cero? Bueno, la verdad es que puedes hacer ambas cosas. Pero en lo que respecta a las plantillas, como ya he mostrado en este curso varias veces, ya, la mayoría de los sitios web son muy similares En su mayoría siguen exactamente la misma estructura. Y las cosas que en su mayoría son diferentes son cosas como las fuentes que usan? Los colores que se utilizan, el logotipo y las imágenes. Aparte de eso, la mayoría de los sitios web son bastante similares. Ahora, una cosa que es muy diferente es la razón real por la que existe el sitio web. Entonces, por ejemplo, tienes marcas de comercio electrónico, tienes marcas que son marcas personales, entonces también tienes marcas que ofrecen algún tipo de servicio o producto digital. Esos son en última instancia los tres tipos diferentes de sitios web que hay por ahí. Al menos los sitios web medios que encontrarás en línea hoy. Y he trabajado con miles de fundadores durante la última década, y finalmente terminamos construyendo sitios web que son muy similares, pero simplemente son diferentes desde el punto de vista de la marca Ahora, tal vez te estés preguntando, Scott, ¿esto es posible? ¿Puedo realmente construir un sitio web sobre una plantilla que se vea y se sienta completamente de marca y personal para mí? Bueno, déjame darte un ejemplo que podría simplemente llevar el mensaje a casa. Construir un sitio web es un poco como decorar una casa. Si usas una plantilla. La casa ya está construida. Ya tienes todos los ladrillos en su lugar. Todo va bien desde un punto de vista estructural. Todo lo que necesitas hacer es darle una pizca de dolores, poner algunos muebles ahí, y ya estás listo para ir. Ahora puedes por todos los medios, construir una casa completamente personalizada en otro lugar en medio de la colina con una linda vista, pero eso va a costar mucho más, y va a llevar mucho más tiempo. Entonces todo depende de lo que realmente necesites en este momento de tu negocio. ¿Necesitas algo que va a ser realmente sólido, realmente confiable y que se vea genial? O necesitas algo que sea completamente personalizado, y eso va a llevar mucho más tiempo y mucha más energía y recursos financieros. Obviamente depende completamente de usted, pero la mayoría de los fundadores con los que hemos trabajado durante la última década han elegido el primer enfoque. Básicamente han tomado una plantilla de sitio web confiable y bien estructurada y la han usado para construir su propio sitio web. Y como puedes ver, hay muchas maneras diferentes en las que podemos usar exactamente la misma plantilla para hacer sitios web que se vean completamente diferentes. Ahora, por favor no te preocupes porque más adelante en el curso, te voy a estar mostrando cómo tomar la plantilla que ya deberías haber descargado fase uno del curso y tomarla y convertirla en un sitio web personal que sea perfecto para tu marca específica que se siente completamente única para ti. Esto te va a ahorrar un montón de tiempo, un montón de dinero, y también te va a ayudar a obtener realmente un sitio web increíble configurado fácilmente sin ningún problema o soporte. Ahora obviamente, voy a estar aquí para apoyarte, pero solo quiero hacerte saber que si quisieras hacer esto por ti mismo, que eres, entonces puedes hacerlo muy fácilmente por todos los pasos que tenemos en este curso y lo bien estructurados que están. Queríamos crear la solución perfecta para cualquier persona, sin importar la experiencia que tengan con el diseño o el desarrollo de sitios web. Crea un sitio web del que puedan estar realmente orgullosos. Ahora, muy pronto en el curso, vamos a estar entrando en el piso web y realmente aprendiendo a usar el piso web para editar la plantilla, comenzando en imágenes, comenzando en el texto, y realmente tomando la plantilla, y haciéndola tuya. Así que asegúrate de que si aún no has seguido los pasos de la lección tres fase uno de este curso, para que puedas configurar tu cuenta de piso web también puedes obtener tu plantilla de nosotros, para que puedas comenzar a construir tu sitio web más adelante en el curso. Recuerda usar exactamente el mismo correo electrónico tanto para el flujo de registro en web el correo electrónico que nos das, para que podamos enviarte la plantilla directamente. De todas formas, estoy súper emocionada meterme en la plataforma de flujo web, y es súper fácil de seguir, así que te veré en la siguiente lección. Nos vemos pronto. 30. Webflow 101: paquetes de Webflow: Así que solo quiero tomarme un poco de tiempo para explicarte los diferentes paquetes de flujo web para que puedas averiguar cuál es el mejor para ti. Ahora, para ser completamente brutalmente honesto, cuando vi por primera vez los precios de Webflows, estaba un poco confundido en cuanto a lo que estoy pagando No fue realmente súper sencillo, y me preguntaba, Bien, estoy pagando, muy buen dinero aquí para alojar mi sitio web contigo, pero ¿qué estoy obteniendo realmente por ello? Ahora, las cosas que realmente obtienes con la plataforma de flujo web cuando estás construyendo tu sitio web en Webflow, no solo lo que obtienes en el paquete, es la experiencia general Entonces, por ejemplo, depende de cuánto valoras tu tiempo, pero en lugar de pasar 10 horas cambiando algo en tu sitio web, puedes hacer algo en unos 5 minutos. Entonces eso es lo primero, que al menos es súper valioso para mí. El hecho de que en lugar de pasar por una situación larga y frustrante en la que tal vez necesito contratar a alguien para cambiar algo, o necesito pasar mucho tiempo averiguando Piso web lo hace súper fácil y libre de estrés, cual no estoy seguro de ti, pero para mí personalmente, pena pagar un par de dólares extra solo para básicamente asegurarme de que pueda pasar mi tiempo libre haciendo lo que realmente disfruto haciendo, en lugar de tratar de lidiar con un sitio web que es realmente difícil de administrar Ahora, otra razón por la que tanta gente usa piso web es su apoyo. Ahora, su soporte es de lejos, el mejor soporte que existe en cualquier plataforma que puedas usar a la hora de construir un sitio web. De hecho recuerdo un problema que tuve con un sitio web para un cliente hace poco. Y cuando envié por correo electrónico a piso web, no solo me volvieron con algún tipo de enlace a una página de la comunidad donde tendría que averiguarlo yo mismo El tipo del equipo de soporte de flujo web había entrado al sitio web, hizo la corrección y luego me mostró cómo lo hacía. En última instancia, si no te importa tener estrés y perder el tiempo, entonces otras plataformas van a estar bien para ti, y puede valer la pena ahorrar un par de dólares solo para perder ese estrés y ese tiempo extra. Ahora bien, si no te importa estar estresado y perder un montón de tiempo, entonces por supuesto, ya sabes, ahorra los cinco a 7 dólares en otra plataforma, lo que puede que te quede un poco mejor Para mí, personalmente, no podía pensar en nada peor que perder un montón de tiempo tratando de arreglar algo y última instancia obtener un soporte realmente promedio y simplemente señalarme artículos para leer cuando el problema podría solucionarse en cuestión de segundos. Y por eso me encanta piso web porque literalmente te da tanto tiempo libre, y te ayuda a obtener el mejor sitio web posible con el menor esfuerzo, y con soporte VIP premium, que si ya te has apuntado a eso, deberías tenerlo con el menor esfuerzo, y con soporte VIP premium, que si ya te has apuntado a eso, ya. En última instancia, simplemente se siente como que el flujo web realmente le importa. Así que vamos a sumergirnos en los paquetes reales que ofrecen, y puedo explicarte cuál podría ser el mejor para tu situación particular. Entonces, si miramos los diferentes paquetes de precios, tienen dos tipos diferentes de paquetes. Entonces uno es general, que es solo para sitios web generales, como, por ejemplo, si estás vendiendo un servicio o tal vez, ya sabes, haciendo un blog o tal vez incluso, ya sabes, haciendo un sitio web personal de marca, o tienen la opción de comercio electrónico, que es bastante autoexplicativo. Ahora, lo genial es que puedes cambiar de uno a otro. Entonces, por ejemplo, podrías comenzar con un paquete básico de 14 dólares al mes, y luego una vez que estés listo para vender realmente un producto y tengas productos listos para vender, podrías cambiar al paquete de comercio electrónico e ir directo al estándar Así que en realidad estás generando ventas tan pronto como estés listo. Ahora, para el paquete de inicio gratuito, está limitado a tener solo un dominio de flujo web. Entonces eso básicamente significa que no puedes tener nombre de marca.com como tu dominio Tienes que pagar realmente por el hosting para poder conectar un dominio personalizado a tu sitio web. De hecho, tendremos una lección sobre cómo conectar un dominio personalizado al sitio web un poco más adelante, así que asegúrate de estar atento para eso. Entonces, dentro del paquete de inicio, en realidad obtenemos dos páginas, 50 elementos CMS, que si no sabes qué son los elementos de CMS, son esencialmente cosas como publicaciones de blog, productos o tal vez proyectos en los que has trabajado desde el punto de vista del servicio Y también obtienes 50 envíos de formularios para toda la vida de tu propiedad en el sitio web. Ahora, 50 envíos de formularios básicamente significa que si alguien intenta contactarlo a través de su página de contactores, entonces finalmente enviará esa consulta o conducirá a su dirección de correo electrónico Luego bajamos a la localización, que es esencialmente si tu sitio web aparece en una computadora francesa medio de París con un usuario francés, entonces todo el sitio web va a aparecer en francés, o si está en Alemania, entonces es alemán, si está en otro lugar, entonces va a ser un idioma diferente, etcétera, etcétera En lo que respecta al tráfico limitado, esto en última instancia para el paquete start up significa que habrá 1,000 visitantes permitidos para ingresar al sitio web. Ahora bien, este es un sitio web completamente gratuito y el flujo web están alojando esto completamente gratis para ti en este momento, así que tenlo en cuenta, pero también el 1 gigabyte de ancho de banda esencialmente significa que el sitio web se va a cargar a cierta velocidad. Ahora bien, esta podría no ser la carga de sitios web más rápida que hayas visto en toda tu vida, pero se va a cargar con éxito. El ancho de banda está conectado a muchas otras cosas, pero eso es lo más importante al menos para mí que encontré. Cuando tengo un sitio web de inicio, que aún no se ha publicado del todo, y no tiene un dominio personalizado adjunto porque no tengo una opción emparejada o un paquete emparejado adjunto a ese sitio web en particular. Se tarda un poco más en cargarse. Así que por favor tenlo en cuenta porque se cargará más rápido. Una vez que consigas uno de los paquetes peered Conectado al sitio web Ahora bien, si se pasa al paquete básico, esto es de 14 dólares mensuales, lo que, para ser sinceros, es un acero absoluto Y para eso, obtienes tu dominio personalizado, así que sea cual sea el dominio que tengas para tu marca, puedes conectarlo de manera realmente simple, y te mostraré cómo hacerlo más adelante en el curso. Obtienes 150 páginas para tu sitio web, lo cual es suficiente. Pero una cosa que no obtienes en este paquete en particular son los artículos CMS. Ahora, vamos a pasar por los artículos de CMS más adelante en el curso con mucho detalle. Por lo que te mostraremos cómo utilizarlos manera efectiva para hacerte la vida 1 millón de veces más fácil. Ahora, en lo que respecta al envío de formularios, obtienes 500 mensuales, lo que es bastante. En lo que respecta a la localización, obtienes una vista previa gratuita. Entonces otra vez, en Francia, saldrá en francés en Alemania, saldrá alemán, etcétera, etcétera Ahora bien, en lo que respecta al tráfico moderado, esencialmente obtenemos 50 gigabytes de ancho de banda y 250 mil visitantes, lo cual, para ser honesto, si recién estás iniciando un sitio web, eso debería ser suficiente También significa que tu sitio web se va a cargar súper rápido, y va a ser súper genial para tus usuarios. Ahora bien, si te mueves al paquete CMS, este es el paquete que tengo para casi todos mis negocios que uso con Webflow Ahora bien, la razón por la que uso el paquete CMS es porque quiero que sea muy fácil para mí agregar publicaciones de blog para agregar proyectos en los que hemos trabajado en lo que respecta a mi agencia de marca, para agregar productos, por ejemplo, si estoy construyendo una marca de comercio electrónico, todo se reduce a la eficiencia. Entonces, en lugar de tener que crear una página nueva, todo lo que necesitamos hacer es agregar algunas cosas en el back-end del sitio web, y automáticamente crea la página para ti usando la función CMS. Ahora, también con la opción CMS, obtienes un formulario KR envía tres creadores de contenido, para que la gente realmente pueda entrar y ayudarte a crear contenido dentro de tu blog o tal vez tu página de proyecto, o obviamente cualquier razón por la que estés usando el sitio web. Y para el paquete CMS, obtienes 200 gigabytes de ancho de banda, lo que incluye la velocidad de tu sitio web, pero también la cantidad de contenido que realmente puedes subir a tu sitio web. Entonces, por ejemplo, si estoy agregando imágenes o videos para la página del proyecto, entonces en última instancia esas imágenes en particular van a ocupar memoria. Pero todos estos se pueden almacenar dentro del sitio web para que el sitio web se cargue súper rápido. Ahora, también obtienes 250 k visitantes con este paquete también. Y luego básicamente nos movemos al paquete de negocios. Ahora bien, para ser completamente brutalmente honesto, no conozco a nadie que necesite el paquete de negocios al momento de comenzar un nuevo sitio web Yo personalmente, lo mantendría súper simple. Entonces, cuando realmente estás construyendo tu sitio web, tal vez lo mantendría como un paquete gratuito hasta que básicamente necesites agregar más de dos páginas o necesites comenzar a agregar elementos CMS en múltiples categorías. Nuevamente, si aún no entiendes lo que es CMS, vamos a cubrir todo más adelante en el curso, pero va a ser súper útil para ti y una vez que lo aprendas, te va a agotar mucho tiempo en el futuro. Pero una vez que superas el paquete gratuito, la siguiente opción es esencialmente entre el paquete básico y el paquete CMS Ahora, para mantener las cosas súper simples, si sientes que realmente no necesitas un blog y no necesitas agregar proyectos, y no necesitas agregar y no necesitas agregar el mismo tipo de contenido una y otra vez, como, por ejemplo, ejemplos de tu trabajo o, ya sabes, reseñas de clientes o algo así donde realmente puedas administrar las cosas de manera muy eficiente en un solo lugar, luego solo usa el paquete básico. No necesitas nada más que eso. Sin embargo, si realmente quieres agregar un blog y simplemente hacer las cosas súper simples dentro del sitio web, El paquete CMS es solo como $9 más, y en realidad te ahorra diez veces la cantidad de tiempo que tomaría si solo tuvieras el paquete básico Ahora, solo para ser totalmente transparentes, estos precios se basan en ser facturados anualmente, por lo que básicamente pagarás una vez por todo el año, y luego tu sitio web estará activo durante todo el año sin interrupciones Pero si querías pagar mensualmente, sí sube un poquito. Apenas unos pocos dólares, así que no es mucho. Pero si quieres ahorrar tanto como sea posible, puedes ahorrar hasta un 22% con solo pagar el año por adelantado Ahora para las marcas de comercio electrónico, las cosas son un poco diferentes. Entonces, si vamos a la sección de comercio electrónico, básicamente podemos ver que hay tres opciones. Hay estándar, plus y avanzado. Ahora bien, de nuevo, si recién estás empezando como marca, no te recomendaría que tomes el plus o la opción avanzada. La razón es que no deberías tener más de 500 artículos de comercio electrónico en tu sitio web cuando recién comienzas. Yo personalmente sólo sugeriría que tuvieras cinco a diez como máximo. Ahora, cada paquete de comercio electrónico viene con un nivel diferente de artículos de comercio electrónico , artículos CMS y un par de otras características también, que veremos ahora mismo. Por ejemplo, el estándar plus en avanzado tienen diferentes niveles de artículos que realmente puedes vender en tu sitio web. Por ejemplo, el paquete estándar da 500. El plus da 5,000 por adelantado da 15,000. De nuevo, no puedo imaginar una nueva marca o una nueva startup vendiendo más de 500 artículos. Yo solo sugeriría que se apegara a la norma. En lo que respecta a los artículos CMS, obtienes 2000, 10,000 o 10,000. Y en lo que respecta a la tarifa de transacción, esto simplemente significa que cada vez que alguien compre algo de su sitio web, le cobrará el 2% de lo que sea que se pague Y esto está encima de la tarifa peer pL o stripe, que también tomará una pequeña porción de lo que se compre. Ahora, el paquete estándar cobrará 2% y luego lo que cargue PayPal y Stripe, mientras que el plus en avanzado finalmente cobrará exactamente lo que cobra Peer pL y stripe. Por lo que no se tomará un 2% adicional si asegura el plus o el paquete avanzado. Ahora, una gran cosa de todos estos paquetes es que todos incluyen las características del plan CMS. Entonces, si recordamos, va a estar pagando $23 mensuales en cualquier lugar por los paquetes de CMS Ahora en realidad es la relación calidad-precio grilla si lo piensas bien, porque para el paquete CMS, estás pagando 23 dólares mensuales Sin embargo, si desea actualizar en algún momento a un paquete de comercio electrónico, puede obtener el paquete estándar, que va a ser suficiente para usted en solo $29 al mes, que es literalmente $6 más que el paquete CMS Entonces estás obteniendo toda la funcionalidad de comercio electrónico y la capacidad vender productos y servicios directamente desde tu sitio web, por un extra de $6, lo que realmente no es tanto en absoluto Y otra gran cosa cuando pagas anualmente con comercio electrónico es que básicamente obtienes una estúpida cantidad de ahorros. Puedes ahorrar hasta un 30% en lo que normalmente te costaría si pagas mensualmente. Ahora, obviamente, depende completamente de ti cualquier paquete que creas que es mejor. Pero si no está seguro, no dude en comunicarse conmigo porque estoy más que feliz de darle algún consejo o tal vez compartir una historia o dos sobre lo que me pasó cuando comencé a usar piso web y qué paquete era el mejor para mí entonces y qué paquetes estoy usando ahora para mis sitios web, que tengo en la plataforma del piso web Como siempre, estoy aquí para ayudar y apoyar de cualquier manera que pueda, así que tenga una querida increíble. Muchas gracias por tu tiempo, y te veré en la siguiente lección. 31. Webflow 101: Webflow frente a otras plataformas: Ahora, todos sabemos que hay toneladas de diferentes plataformas de creación de sitios web por ahí en línea. Pero en última instancia, hay cinco plataformas principales por ahí, prensa de palabras, espacio cuadrado, Wicks, Shopify, y obviamente flujo web Ahora, esto se basa en mi experiencia de usar diferentes plataformas de construcción de sitios web durante la última década de ser dueño de mi Brannan Agency Clementine Ahora, cuando he usado estas diferentes plataformas, tengo la experiencia de estar en situaciones realmente pegajosas con los clientes porque la plataforma me ha defraudado. Y lo que quiero compartir contigo en esta lección es solo mi experiencia personal basada en todas las diferentes plataformas que he usado y por qué algunas son buenas y por qué algunas no son tan buenas. Ahora, quiero comenzar con WordPress, porque WordPress existe desde hace mucho, mucho tiempo. Y en última instancia, es la más antigua de todas las plataformas de creación de sitios web que existen. Eso en última instancia significa que tiene, ya sabes, una amplia gama de personas que utilizan la plataforma. Pero la realidad es que desde el punto de vista del mantenimiento, eso fue lo más grande que me desconectó de WordPress La razón es cambiar algo que es súper simple, tal vez tienes que hacer clic en diez botones diferentes y luego cambiarlo y luego salir y luego guardarlo y luego actualizarlo con diferentes complementos y muchas otras cosas desordenadas, que hace que sea una verdadera molestia de administrar Entonces, esencialmente, si tienes que administrar el sitio web de manera realmente consistente, una y otra vez, te lleva mucho tiempo cambiar algo, eso no vale la pena para mí. Quiero algo que me ahorre mucho tiempo que sea realmente fácil de usar, y además, que no requiera un código personalizado para construir el sitio web y editar nada porque, sí, puedes usar temas fácilmente construidos, donde básicamente puedes conectarlo al sitio web de prensa de palabras, y en última instancia es bueno para usar, y solo puedes cambiar el texto Pero es muy restrictivo con lo que puedes hacer en esa plataforma en particular. Por ejemplo, si tienes dos sitios web diferentes que están usando exactamente el mismo tema, Para poder editar esos dos sitios web, necesitas conocer código personalizado para que se vean únicos. Lo que me encanta de piso web es el hecho de que no necesitas código personalizado. Literalmente no conozco una sola línea de código personalmente, pero entiendo cómo usar la plataforma web para dejar que haga toda la codificación y el trabajo duro por mí Ahora, el siguiente en línea es el espacio cuadrado y Wicks, y la razón por la que estoy armando estos dos es por múltiples razones Entonces, ante todo, espacio Square es un poco más receptivo que Wicks. He visto muchos ejemplos con Wicks, donde esencialmente el sitio web no es súper receptivo, y lo que eso básicamente significa es, si estoy viendo un sitio web en mi escritorio, entonces se ve genial quizás Pero si lo estoy viendo en mi celular, no se ve tan bien en ningún lado. Y este es un problema enorme. Y no estoy diciendo que no se pueda obtener un sitio web responsive en Wicks, pero lo que estoy diciendo es que es muy difícil hacerlo y hacerlo de una manera en la que realmente se ve bien La razón por la que prefiero el piso web es porque lo hacen súper simple, y su sistema para asegurarse de que el sitio web se vea consistente en cada dispositivo y cada tipo de pantalla individual me da la confianza que las personas que realmente ven los sitios web que construyo van a tener una gran experiencia, sin importar dónde vean el sitio web. Ahora, una cosa que el espacio cuadrado y las Wicks tienen en común es que hay migras realmente terribles al SEO, al menos en mi experiencia Construí toneladas de sitios web en el espacio cuadrado y Wicks hace muchos años antes descubrir el piso web Y la realidad es que nunca logré que un solo sitio web construido sobre espacio cuadrado o mechas llegue un solo sitio web construido sobre a la página superior de Google Ahora bien, esto se debió simplemente a que el código que se usa dentro esas plataformas particulares es demasiado complicado para que Google lo entienda a veces. Al menos eso es lo que me dijeron cuando hablé con un experto en SU que me estaba contando un poco sobre las diferentes plataformas y los pros y los contras de cada una. Webflow, sin embargo, me hizo súper simple obtener cada sitio web que construí la página superior de Google o bastante cerca Y esto es simplemente a través asegurarse de que las entradas del blog y todo lo que realmente puse en el sitio web se estructuró correctamente, y el flujo web lo hace súper simple. La única otra plataforma de creación de sitios web que existe, que es un poco diferente a la prensa de palabras, Wicks y el espacio cuadrado es, en última instancia, Shoppi Ahora, Shopper fi es una plataforma de enfoque puramente de comercio electrónico. Entonces, en última instancia, no tiene sentido usar Shop fi a menos que realmente estés vendiendo un producto. Ahora, tengo que ser totalmente transparente con ustedes. Te da muchos datos para ayudarte a construir tu sitio web y hacerlo un poco mejor con el tiempo. No obstante, el software de seguimiento conductual, que te di en la Fase uno de este curso, literalmente te va a ayudar a lograr exactamente lo mismo. La única diferencia es que en realidad puedes ver el mouse del usuario que realmente está en tu sitio web, para que puedas ver exactamente qué es lo que les hace hacer clic y qué es lo que hace que no hagan clic. Literalmente puedes lograr prácticamente lo mismo exactamente en el flujo web. La única diferencia es, y una de las grandes cosas que realmente me molesta de Shopify a veces es el hecho de que Shopify vuelve a ser las grandes cosas que realmente me molesta , muy restrictivo, al igual que word press y Wicks y espacio cuadrado desde Tienes que pagar alrededor de $350 para obtener una plantilla realmente genial ante todo Y luego cuando obtienes esa plantilla, no se ve tan bien. La mayoría de los sitios web se ven bastante de mal humor, y realmente no brillan, y no se ven muy únicos Esto en última instancia puede llevar a que la mayoría de las marcas se vean muy genéricas. Y mucho lo mismo. Y en última instancia, para mí, simplemente no valió la pena. Quería una plantilla donde básicamente pudiera agregar mis propios pequeños giros únicos y realmente crear una experiencia de marca única para mis clientes Y piso web te ayuda a hacer eso. Y otra cosa que realmente me molestó Shop offi es que no importa qué membresía o qué paquete elijas con Shop offi, todavía te cobran una Ahora, de hecho, he tenido la suerte de pasar por todo el dolor de probar cada plataforma a medida que han sido lanzadas. Y para ser honesto, piso web es el que he usado desde que me presentaron por primera vez hace unos años. Literalmente lo he estado usando desde entonces. Y ahora literalmente me piden que construya sitios web para clientes en diferentes plataformas, e insisto en construir solo en el flujo web simplemente porque nos ahorra mucho tiempo cuando estamos construyendo sitios web para clientes. Ayuda a los clientes a administrar los sitios web mucho más fácilmente, ahorrando tiempo y también reduciendo la cantidad de tiempo que se necesita para capacitarlos para administrar realmente el sitio web. Y porque podemos construir los sitios web mucho más rápido, y para ser honesto, el flujo web es mucho más divertido de usar. Podemos crear sitios web personalizados de aspecto increíble en última instancia por una fracción del costo de si estuviéramos construyendo en Shopify, Wick, Square base o WordPress En fin, entiendo que tienes que tomar la decisión en base a qué plataforma es la mejor para ti, y respeto plenamente cualquier decisión que tomes. Todo lo que puedo decir es que he probado todas y cada una de las principales plataformas de creación de sitios web que existen en línea, y Webflow ha surgido de Trump cada vez Se debe principalmente a la libertad de lo que tienes desde punto de vista del diseño para crear realmente algo que sea único para ti No solo eso, sino que es principalmente el tiempo de gestión de obtener un sitio web increíble y luego administrarlo prácticamente sin tiempo durante la semana. Entonces eso es lo más importante para mí personalmente. No estoy seguro de lo importante que es eso para ti, pero quiero poder crear lo que sea en mi imaginación poder crear realmente el sitio web que mejor se adapte a la marca. Y luego los beneficios secundarios para mí es asegurarme de que estoy ahorrando el mayor tiempo posible a la hora construir el sitio web, Webflow en realidad se actualiza automáticamente Entonces, a diferencia de WordPress, por ejemplo, cuando tienes que actualizar todos tus complementos y asegurarte de que todo siga funcionando todo el tiempo, Webflow lo hace todo completamente por sí mismo Sin mencionar que Webflow también cuenta con un increíble soporte premium, que si ya te registraste en la Fase uno del curso, ya tendrás tu soporte VIP gratuito asegurado Y por último, Webflow es muy divertido de usar. Literalmente se siente tan inmersivo, y literalmente puedes crear lo que quieras una vez que domines la plataforma Y no lleva mucho tiempo, y literalmente vamos a empezar a acostumbrarnos a la plataforma y todas las diferentes pequeñas herramientas que puedes usar en las próximas lecciones. Entonces de todos modos, estoy súper emocionada de comenzar y de hecho comenzar a construir tu sitio web, así que te veré en la siguiente lección. 32. Webflow 101: comprensión de los puntos de interrupción: ¿Qué es la capacidad de respuesta del sitio web? Bueno, la capacidad de respuesta del sitio web es básicamente el sitio web que se ve genial en cada pantalla y dispositivo que se te ocurra Esto incluye un escritorio, una pantalla móvil, un iPad, prácticamente cualquier pantalla que se te ocurra. Ahora, la capacidad de respuesta del sitio web puede parecer un poco aterradora si nunca lo has hecho antes, pero es realmente simple, y se hace realmente simple, especialmente en el flujo web mediante el uso de puntos de interrupción La pregunta es, ¿qué son los puntos de interrupción, si no sabes cuáles son ya Bueno, un punto de interrupción es esencialmente un cierto punto en las dimensiones del sitio web donde se adaptará a una pantalla diferente para asegurarse de que siempre se vea increíble No te preocupes. Vamos a asegurarnos que todo el sitio web que construyes dentro de este curso sea totalmente receptivo en cada dispositivo, y te mostraré cómo hacerlo , y es súper simple. Pero en esta lección, solo quiero mostrarte lo que es un punto de interrupción, y también cómo entender cómo configurar puntos de interrupción para que sepas qué hacer más adelante en el futuro En definitiva, el punto de interrupción ya debería estar instalado en tu plantilla, por lo que no deberías tener que preocuparte por esto en absoluto Pero es realmente importante que entiendas exactamente qué son los Breakpoints, que sepas qué buscar en el futuro Entonces veamos un par de ejemplos de sitios web por ahí de marcas que conocemos y amamos. Así que en última instancia podemos entender exactamente qué son los Breakpoints y cómo impactan la experiencia dentro del sitio web Entonces, veamos el sitio web de Tesla y veamos cómo se adapta su sitio web a través de diferentes dispositivos. Entonces, si vas al sitio web, podemos ver que si empezamos a adaptar el tamaño, de la pantalla, las cosas empiezan a cambiar un poco. Puedes ver aquí hay un punto de interrupción donde la barra de navegación cambia a una barra desplegable. Si solo tomamos eso aquí y luego desplazamos hacia abajo. Ese es un punto de quiebre Se puede ver que ese pequeño punto de interrupción sucede donde la barra de navegación se convierte en este tipo de menú, que es súper fácil de ver Ahora bien, esto es lo mismo para casi cualquier sitio web por ahí. Todos ellos tienen diferentes puntos de interrupción. Con solo usar este método realmente simple, puedes ver cómo va a lucir tu sitio web como un escritorio. Cómo va a quedar en un iPad, y luego también cómo va a quedar en un teléfono móvil. Y el flujo web hace que sea súper sencillo hacer que tu sitio web responda en cualquier dispositivo. Y te estaremos enseñando cómo hacerlo un poco más adelante en el curso. Pero veamos otro ejemplo en el sitio web de Nike para ver cómo su sitio web se rompe en ciertos puntos de quiebre para adaptarse a los diferentes tamaños de dispositivo. Entonces por ejemplo, aquí, tenemos una bonita pantalla grande, y a medida que empezamos a adaptarla, se puede ver que esta imagen en particular empieza a hacerse un poco más pequeña. Y las cosas empezaron con DAP Más. Se puede ver que la barra de navegación real se hace un poco más pequeña, y vemos aquí este es un punto de ruptura donde cambia el menú. La imagen real cambia aquí a esta imagen en ese punto de ruptura, y también vemos que la barra de menú aquí cambia a un menú de Hamburguesa Así que de nuevo, cada sitio web sigue la misma estructura. Y dentro de este curso, te vamos a mostrar cómo crear un sitio web responsive. Así que no te preocupes esto es todo súper simple y fácil entender siempre y cuando sigas los pasos de este curso. Ahora, por último, echemos un vistazo al sitio web de Apple. Ahora, el sitio web de Apple, obviamente, todos sabemos que Apple es increíble. Vendiendo sus productos y haciendo que todo se vea súper sexy, incluso AirPods, ¿verdad? Ahora, cuando miramos su sitio web real, podemos ver que, por ejemplo, tenemos seis ventanas diferentes aquí, una, dos, tres, cuatro, cinco, seis. Ahora, vamos a ver cómo se adaptan a medida que cambiamos el tamaño de la pantalla. Este es solo un ejemplo solo para mostrarte cómo Apple hace otro tipo de secciones dentro del sitio web. Ahora vemos aquí, tenemos un escritorio, que se ve genial. Ahora como adaptamos eso y lo hacemos un poco más pequeño, puede ver que estos se están aplastando un poco, pero siguen en la misma formación Entonces a medida que lo desplazamos aún más hacia abajo, estamos esperando el punto de interrupción, y efectivamente, ahí está Entonces podemos ver que dentro del punto de interrupción, el punto de interrupción ocurre aquí, donde en última instancia el texto en el diseño cambia Entonces puedes ver el tamaño del texto aquí, y luego a medida que llega a cierto tamaño, el tamaño del texto cambia porque es más pequeño, es un dispositivo más pequeño. Es un tamaño de pantalla más pequeño. Entonces necesitamos que el texto sea relevante para el tamaño de la pantalla en la que se está viendo. Ahora bien, si desplazamos esto aún más hacia abajo, se puede ver que algo más va a cambiar. La estructura real de cada cuadrado. De hecho, hemos cambiado la forma en que se estructuran los cuadrados. Entonces por ejemplo, antes, teníamos uno, dos, tres, cuatro, cinco, seis en filas de dos. Pero ahora si vamos a la versión móvil, tenemos uno, dos, tres, cuatro, cinco, seis, pero en la misma fila. Ahora cada bloque está apilado uno encima del otro, porque si lo tuviéramos en la forma original, que mostramos antes, que estaba hecha para tablet o escritorio, no va a caber. Por lo que necesita tener ese punto de interrupción ahí para que el contenido se ajuste a la pantalla del teléfono móvil Ahora, puedes usar exactamente este mismo enfoque con tu sitio web para probar cómo interactúa el contenido con diferentes puntos de interrupción Es solo ver si tienes un poco de teaser en cuanto a cómo el flujo web hace que esto sea súper fácil Puedes ver aquí arriba, estos son tus diferentes puntos de interrupción Entonces este de aquí es tu punto de ruptura base. Entonces, esta es en última instancia la pantalla de tamaño más promedio que la gente va a usar. Entonces a medida que trabajas hasta una pantalla más grande, esto es en última instancia mirar como un televisor, por ejemplo, si el sitio web se está viendo en un televisor o incluso en una pantalla grande como esta. Y luego mientras trabajas tu camino hacia abajo, puedes ver que tienes una tableta, tienes un teléfono apaisado, y luego también tienes un teléfono móvil de retrato. Lo bueno del flujo web es que si cambias algo en el punto base, también afecta a los demás elementos de cada lado. Así que lo hace súper fácil, para que no tengas que rediseñar el sitio web en todos los dispositivos Simplemente solo tienes que cambiarlo de una vez y luego simplemente ajustar las cosas a medida que avanzas para que el sitio web se vea absolutamente perfecto sin importar en qué dispositivo lo estés viendo. De todos modos, muy pronto nos vamos a sumergir en construir tu sitio web. Por lo que espero verte en la siguiente lección. Te veré ahí. 33. Webflow 101: el modelo de caja: Bien, entonces, ¿cuál es el modelo de caja cuando se trata de piso web? Bueno, si miras la lección anterior, entonces sabrás que emparejo la sección, el contenedor y el dibloque en un solo sistema me gusta llamar a esto el sistema del hogar porque si lo piensas en forma de terreno siendo la sección, el contenedor es la casa, y luego los bloques div son las diferentes habitaciones dentro de esa casa, puedes crear una comprensión realmente rápida de cómo usar cada elemento correctamente. Déjame explicarte esta sección de precios en mi sitio web para mostrarte a lo que me refiero. Ahora bien, esta sección en realidad es bastante complicada, y me tomó un poco de tiempo construir. Ahora, tú Hombre nunca necesitas construir algo como esto. Pero si lo haces, avísame, y estoy más que feliz de ayudarte y apoyarte. Ahora lo que puedes ver es dentro de cada bloque din, estos di bloques están organizados en forma de cuadrícula, que cubrirá un poco más adelante en el curso. Pero cada di bloque y cuadrícula se estructura dentro de un contenedor, y luego ese contenedor se estructura dentro de una sección. Entonces, como puedes ver, al usar secciones como la tierra, contenedores como el hogar, y luego bloques div dentro del contenedor para crear más estructura, puedes crear sitios web altamente receptivos que te van a permitir realmente obtener un sitio web que se vea y se sienta profesional, sin importar dónde lo esté viendo tu espectador. Entonces, si siempre recuerdas usar secciones, contenedores y bloques de dI de esta manera, entonces siempre tendrás un sitio web bien estructurado que puede responder a todos los dispositivos en los que el espectador pueda verlo. Veamos otro ejemplo solo para llevar realmente el mensaje a casa de lo importante que es usar el método box y finalmente usar secciones, contenedores y bloques de buceo de esta manera. Entonces como puedes ver aquí, tenemos una sección. Ahora, dentro de esa sección, tenemos un contenedor, que está dentro de la sección, que está en el cuerpo, y luego dentro de ese contenedor, también tenemos di bloques. Entonces estos bloques dip se llaman cosas diferentes porque tienen otras funciones conectadas a ellos? Ni siquiera sabes de ese dh todavía, pero es exactamente el mismo enfoque. Tenemos bloques de inmersión dentro del contenedor, y el contenedor está dentro de la sección. Al crear la estructura, te estás asegurando de que cada sitio web que construyes y cada sección que construyes esté estructurada correctamente. Y al estructurar su sitio web correctamente, puede crear puntos de ruptura efectivos dentro de su sitio web para asegurarse de que no importa en qué dispositivo se esté viendo su sitio web, siempre se ve fantástico. Ahora vamos a estar usando di bloques, contenedores y secciones en las siguientes lecciones. Entonces, ¿no te preocupes si todavía no tiene sentido completo? Lo cubriremos todo muy pronto. 34. Webflow 101: secciones: En las próximas lecciones, vamos a usar secciones, bloques de inmersión y contenedores para finalmente construir algo realmente simple como esto. Ahora voy a mostrarte cada paso del proceso para que puedas seguir adelante. Así que me gustaría mucho si realmente puedes seguirme dentro del curso para que realmente puedas saber exactamente cómo se siente crear algo realmente simple como esta sección aquí. ¿Por qué empezamos? Bueno, siempre empezamos con agregar una sección, así que simplemente iríamos aquí agregaríamos una sección y la arrastramos hasta el fondo, y ves esa línea azul en la parte inferior, es donde va a aterrizar la sección. Entonces lo dejamos caer, y se puede ver que ahora tenemos una sección. Paso uno, hecho. Ahora dentro de esa sección, necesitamos agregar un contenedor porque el contenedor va a permitir que el contenido dentro de ese contenedor sea receptivo en todo momento, y va a mantener las cosas en su lugar. Entonces, ¿cómo hacemos eso? Bueno, volvemos a la caja más, luego agregamos un contenedor, y dejamos caer el contenedor dentro de la sección, puedes ver aquí, va dentro de la sección y lo dejamos caer. Perfecto. Entonces ahora tenemos nuestro contenedor y lo tenemos dentro de una sección. Ahora, podemos ver que todo se alinea. Entonces sabemos que todo está en su lugar, ¿por qué hay tanto espacio en la parte superior de esta sección y en la parte inferior? ¿Por qué se ve así? ¿Por qué el nuestro se ve bastante plano? Bueno, todo esto se reduce a una cosita llamada padding, y puedes agregar padding a containers, di blocks y secciones. Ahora, el relleno es el desarrollo de sitios web súper importante porque puedes crear espacio entre diferentes elementos. Y nuevamente, esto se puede usar en di bloques, contenedores o secciones. Pero para este ejemplo en particular, porque nos estamos enfocando en secciones para esta lección en particular, quería mostrarte que, solo agregando 75 píxeles de relleno en la parte superior e inferior, comienzan a darnos una mirada y sensación que estamos buscando desde la sección que estamos tratando de construir. Ahora, obviamente, puedes crear un poco más, o puedes crear un poco menos, pero todo depende de la cantidad de espacio que realmente quieras. Pero si realmente quisiéramos ser muy específicos con la copia de una determinada sección, podríamos simplemente hacer clic en la sección, y efectivamente, son 80 píxeles por lado, y luego 30 píxeles a cada lado a la izquierda y a la derecha. Entonces, si quisiéramos copiar eso, simplemente podemos ir 80, 80, y luego 3030 Entonces ahora, nuestra sección tiene exactamente el mismo relleno que la sección anterior. Pero, ¿por qué se ve diferente alféizar? Bueno, eso todo se reduce a los elementos que están dentro del contenedor. Por el momento, este contenedor tiene elementos en su interior . Este está vacío. Por lo que la sección real no se está expandiendo orgánicamente para encajar en los elementos dentro de la sección. Es simplemente muy plano. No hay nada ahí dentro. Entonces necesitamos comenzar a agregar elementos, lo que haremos en la siguiente lección. Ahora bien, otra cosa que quizás te estés preguntando es, ¿por qué nuestra sección es blanca? ¿Por qué no es del mismo color que éste? Bueno, generalmente, cada vez que añades una sección o contenedor o bloque de buceo o cualquier otro elemento a un sitio web, va a ser blanco por defecto. Entonces, ¿cómo cambiamos el color? Bueno, de verdad, muy simple. Entonces, si quieres exactamente el mismo color que este, podemos dar click en esa sección, luego bajar a esto aquí. Entonces simplemente robaremos este código, copiaremos y pegaremos, y luego seleccionaremos nuestra sección y pegaremos ese código en particular en esa sección. Y entonces como por arte de magia, tenemos exactamente la misma sección, exactamente el mismo relleno, y exactamente el mismo color. Ahora, en las próximas lecciones, vamos a estar cubriendo contenedores y bloques de bits y terminando este pequeño ejercicio en particular que estamos haciendo. Entonces te veré en la siguiente lección. 35. Webflow 101: contenedores: Bien, entonces hemos construido nuestra sección, y ahora tenemos un contenedor aquí, que necesitamos llenar con ciertos elementos. Ahora, para hacer eso, necesitamos comenzar a agregar alguna forma de bloques DID para finalmente comenzar a organizar la sección de una manera donde se vea y se sienta profesional, y básicamente copia exactamente la misma sección que tenemos aquí. Ahora, hay muchas formas diferentes en las que realmente puedes construir esta sección, pero quiero mostrarte la mejor manera y la forma más eficiente que usaría personalmente si estuviera construyendo este sitio web para un cliente. Y lo primero que haría es agregar una grilla. Ahora, la grilla va dentro de la columna así. Y dentro de la cuadrícula, básicamente eliminaría la sección inferior. Entonces ahora solo tenemos las dos secciones superiores. Ahora lo siguiente que voy a hacer es que empezaría a cambiar el tamaño de la brecha aquí. Entonces quiero que las cosas se alineen muy bien para que haya suficiente espacio para que la imagen y el texto estén separados. Una vez que esté contento con eso, presionaré listo. Ahora, tenemos la grilla, y todo se ve muy ordenado y muy bonito. Ahora, en este punto, quiero comenzar a agregar mis bloques div, y los agrego simplemente dejándolos caer en la cuadrícula. Ahora he agregado un dibloque aquí. Ahora esto, voy a agregar un pequeño selector de estilo y agregar esto como texto. Entonces ese va a ser mi texto. Y luego voy a agregar otro bloque de Di aquí, que va a ser mi imagen. Entonces ahora tenemos texto, una imagen dentro de una cuadrícula, que luego está dentro de un contenedor, que luego está dentro de una sección. Bien, entonces estamos en un punto donde tenemos nuestros bloques de DI, los tenemos nombrados. También tenemos una cuadrícula en contenedor en una sección, y se ve muy similar a esta sección, pero hay una cosa que falta, y que son los elementos reales de la imagen, el texto y el botón. Ahora hay dos formas en las que podemos hacer esto. La primera es que podríamos simplemente copiar y pegar esa imagen exacta dentro de este di bloque en particular. Esa es una forma en que podemos hacerlo, pero no queremos ser perezosos. Entonces te voy a mostrar paso a paso. Y para ser completamente claros, podemos hacerlo con texto también si quisiéramos. Es muy sencillo. Todo lo que necesitas hacer es copiar y pegar de manera muy parecida a la edición de un documento de Word. Puedes probar esto y experimentar un poco, pero es así de simple. Ahora, te voy a mostrar cómo construirlo realmente desde cero, así que en realidad sabes cómo construirlo de primera mano Pero cuando estés usando flujo web, no tengas miedo de usar la función copiar y pegar. eso está ahí para ahorrarle tiempo y energía. Para que no tengas que hacer lo mismo una y otra vez. Pero vamos a deshacernos de estos tres elementos, y volvemos a donde empezamos. Entonces, el siguiente paso es en última instancia comenzar a poblar nuestros dos d bloques Y eso es exactamente lo que vamos a hacer en la siguiente lección. Te veré ahí. 36. Webflow 101: bloques de división: Bien, entonces tenemos nuestra sección. Tenemos nuestro contenedor. Tenemos nuestra cuadrícula dentro del contenedor, y dentro de la cuadrícula, tenemos dos bloques d, un texto con nombre y una imagen con nombre. Ahora, comencemos con el cuadro de imagen para hacerlo primero porque eso es lo más fácil. Ahora, para agregar una imagen a esta caja en particular, necesitamos subir al botón pequeño más, bajar a imagen, luego dragón soltar la imagen en esta caja. Entonces ahora tenemos nuestro bloque Di con una imagen dentro de él. Ahora, para poder agregar realmente una imagen a este cuadro de imagen en particular, necesitamos hacer clic en el Little Cog Ir a elegir imagen. Y luego nos llevará a este cuadro aquí donde podremos arrastrar y soltar archivos, donde podremos agregar diferentes imágenes. Ahora bien, esto es solo stock es un marcador de posición, así que vamos a agregar algo un poco más interesante Entonces, si hacemos clic en el botón de subir, va a nuestra pantalla de inicio, y voy a agregar esta hermosa foto de un cisne. Entonces hacemos clic en abrir. Agrega el cisne, y efectivamente, una vez que el cisne se carga, luego se aplica a la sección. Ahora bien, para ser honesto, no estoy seguro si eso es un swanlo o un pato, pero digamos que es un pájaro de aspecto muy atractivo Bien. Entonces ahora tenemos nuestro conjunto de imágenes. ¿Cómo empezamos a agregar texto al otro lado de la sección? Bueno, eso es muy fácil, empecemos desde arriba y trabajemos nuestro camino hacia abajo. Ahora bien, si inspeccionamos este elemento aquí, se puede ver que está utilizando los ajustes de tipografía aérea, 700 negrita, el tamaño es 38, y la altura es También tenemos aquí el código de color, que es 333, y se deja su alineación. Entonces agreguemos alguna rúbrica. Texto a la sección. Y mientras estamos ahí, en realidad podemos agregar también el texto del párrafo, porque eso va a ser necesario a continuación, así que solo agregamos eso debajo, como pueden ver, la línea azul ahí vamos. Y después de eso, también podemos agregar el botón, que se puede hacer así. Ahora bien, estos se ven muy similares en estos momentos, pero ¿cómo podemos hacer que se vean idénticos? Bueno, lo primero que hay que hacer es asegurarse de que los encabezados estén usando los mismos caracteres y principios, así que Aerial 738 44, perfecto, exactamente lo mismo Entonces, si básicamente copiamos y pegamos este texto, debería verse idéntico. Efectiva, lo hace. Pero cambiemos esto porque ese texto es bastante aburrido. Los cisnes son increíbles. Exclamación, Marcos. Impresionante. Otra vez, no estoy seguro si eso es un cisne de Dock. Sólo lo estoy poniendo ahí afuera. Ahora bien, en lo que respecta al siguiente texto, se puede ver que se trata de Arial 400 normal 14 20. Así que vamos a comprobar aquí, Aéreo 400 normal 14 20. Ahora, creo que todos podemos estar de acuerdo en que esto es bastante texto para leer, e incluso esto es bastante para que un usuario lo digiera. Así que vamos a cambiar el por lo que un poquito y sólo poner cisnes son hermosos, pero también pueden ser un poco traviesos a veces Ahora, tenemos este texto, pero es un poco pequeño, ¿verdad? Es un poco difícil de leer en el escritorio. Entonces hagámoslo un poco más grande para que solo podamos agregar esto. Podemos agregarlo un poco diferente en lo que respecta a la diversión. Entonces agreguemos esto como Monsa quizá. Hagámoslo un poco más ligero. Eso se ve genial. Ahora, vamos a estar cubriendo tipografía un poco más adelante, pero solo quiero darte un poco de una idea sobre cómo puedes usar la tipografía para ayudar realmente a usar la tipografía para ayudar realmente a Ahora como puedes ver aquí, todavía es un poco difícil de leer. Entonces lo que básicamente voy a hacer es porque he incrementado el tamaño del texto Su altura debe ser alrededor de 1.5 veces el tamaño del texto. Entonces voy a poner eso como 30, lo que le da un poquito más, pero en realidad voy a reducir eso un poco y hacerlo 28 porque creo que eso es mejor. Bien, perfecto. Ahora, como pueden ver, nuestra sección se ve un poco mejor, y también es de buen tamaño, que es exactamente el mismo el ejemplo que teníamos al inicio de la lección. Ahora una cosa que me ha molestado un poco es el hecho de que este botón es de un color realmente extraño Ahora quiero que sea súper limpio y súper profesional como este ejemplo aquí. Entonces, ¿cómo lo hago? Bueno, lo primero que voy a hacer es hacer clic en el botón mismo. Entonces también necesito asegurarme de que el color sea exactamente el mismo Como el botón de aquí? Copia y pega eso en esto aquí. Entonces esta debería ser Arial 412 20. Perfecto. Y luego si hago clic en Unirse a Swan Club, puedes ver que está empezando a parecerse mucho más al botón de arriba, pero aun así se ve bastante diferente. Entonces, ¿por qué se ve diferente? Bueno, aquí hay dos cosas principales en juego. Lo primero es el texto en sí mismo. Entonces aunque el texto es exactamente el mismo Aéreo 400 normal 12 20, y luego Aéreo 400 normal 12 20, todavía hay algo diferente. Y eso está en las opciones de más tipos. Entonces aquí donde se puede ver el espaciado entre letras es normal, el espaciado entre letras aquí es dos. Entonces, si aquí agregamos espaciado entre letras dos, va a parecerse mucho más al ejemplo anterior. Ahora bien, se ve muy similar, pero todavía hay algo bastante diferente los dos botones. ¿Por qué es eso? ¿Es la cantidad de texto? Bueno, podría ser, pero ese no es el factor principal. El factor principal aquí es el relleno dentro del botón. ¿Recuerdas cuando agregamos relleno a la sección para darle un poco de espacio para respirar? Bueno, es muy importante que hagas esto también con botones, porque donde actualmente este botón tiene 15 y nueve acolchados, este botón tiene 12 y 25 acolchados. Ahora bien, esta es una muy buena relación para usar para la mayoría de los botones. Pero una de las cosas más importantes que debe hacer es asegurarse de mantener la misma proporción, pero se asegura de que sea consistente en todo su sitio web. Ahora bien, esta es una relación realmente grande para usar. Entonces, si básicamente usamos esta proporción a lo largo de todo nuestro sitio web, ¿ debería verse bastante consistente? Y bastante agradable a la vista. Entonces, literalmente, 25, 12, 25 y 12. Ya puedes ver que la habitación dentro del botón tiene mucho espacio para respirar. Se ve mucho más estéticamente agradable, y entraremos en la creación de botones un poco más adelante en el curso Pero para este ejemplo en particular, solo quería mostrarte cómo crear un botón realmente simple y por qué este botón se ve muy diferente a este. En definitiva, queremos crear la mejor experiencia visual para nuestros usuarios. Y crear un botón, que en realidad se ve bastante atractivo para hacer clic te va a ayudar a obtener un mejor rendimiento y una mejor tasa de conversión en tu sitio web como resultado. Ahora, estoy bastante contento con cómo se ven las cosas. Pero si nos fijamos en esta sección y esta sección aquí, todavía hay algo que no está del todo bien. Ahora bien, dentro de este particular di bloque, que planteamos hace un par de lecciones, ¿qué tienen estos elementos particulares, que sigue siendo muy diferente a estos? Ahora bien, si te tomas un poco de tiempo para pensarlo, puedes ver que el espacio entre el encabezado y el texto aquí es más o menos el mismo. Aquí hay un margen de diez. Ahora bien, el relleno y el margen son bastante diferentes, y los tocaremos a lo largo del curso de varias maneras diferentes. Pero puedes ver aquí que el relleno y el margen para el encabezado aquí El encabezado aquí son literalmente idénticos, 20 en la parte superior y diez en la parte inferior. Ahora bien esto es bastante estándar cuatro cabeceras y puedes ajustarlo como quieras. No obstante, para este caso en particular, no es el encabezado, ese es el problema aquí. El problema es el texto dentro del párrafo, porque con este párrafo en particular, tenemos un margen de 24 píxeles, Fue con este texto, sólo tenemos un margen de diez. Entonces, si cambiamos eso un 24, ahora esto se ve mucho mejor, y tenemos un buen espacio entre el párrafo y el botón y el titular y la imagen, pero todavía hay algo que no del todo bien. Y esa cosa es simplemente donde se colocan estos elementos. Ahora bien, por eso es súper importante tener un contenedor, una sección y el di block funcionando bien juntos. Esto es porque si quisiéramos tomar este texto como este ejemplo y hacerlo central en la imagen. Todo lo que tenemos que hacer es ir a esta sección aquí dentro del dibloque y hacer clic en el centro Esto solo hace que se vea mucho más limpio, mucho más alineado y mucho más presentable Y por eso es tan importante que las secciones, los contenedores y los di bloques funcionen bien juntos. Porque si no tuviéramos este dibloque, entonces no podíamos controlar dónde queríamos que estuvieran los elementos Sólo podríamos tenerlo en un solo lugar. Y al ponerlo central, hace que se vea mucho más presentable y mucho más profesional Eso cubre todo en lo que respecta a secciones, contenedores y bloques de inmersión. Ahora, vamos a estar tocándolos lo largo del resto del curso mientras construimos tu sitio web, así que no te preocupes. Pero eso debería darte una muy buena comprensión de cómo usar tres elementos juntos para crear un sitio web muy bien estructurado. En fin, pasemos a la siguiente lección del curso. Te veré pronto. 37. Webflow 101: cuadrículas: Para crear esa grilla, vamos a crear una nueva sección como siempre. Y dentro de esa sección, vamos a llamar sexy a esta sección la sección grid. Ahora, cuando entremos en esa sección, vamos a agregar un contenedor como de costumbre, y al igual que antes, si recuerdas, ahora tiene cero relleno y no tiene idea real de lo grande que debería ser. Así que vamos a añadir un poco de relleno, al igual que antes. Suena bien. A ambos lados. Bien, entonces ahora tenemos un poco de respiro. Ahora, en lo que respecta a agregar la cuadrícula, primero tenemos que ir al fondo aquí y agregar la cuadrícula aquí. Y esto nos ha dado un par de opciones para elegir. Ahora podemos agregar nuevas secciones de cuadrícula aquí, y podemos agregar otra sección de cuadrícula aquí, por ejemplo. Pero quiero mantenerlo a solo dos a lo largo y tal vez a tres abajo. ¿Bien? Perfecto. Ahora, de nuevo, si queremos crear un poco de ancho aquí, entonces podemos hacerlo. Y si queremos crear un poco de ancho aquí, entonces también podemos hacerlo. Tenga en cuenta que si cambia el tamaño de esta fila en particular, entonces también necesita cambiar el tamaño de esta fila, por lo que está conectada en este punto. Ahora, una vez que tengamos la grilla todo configurado, hay un par de formas diferentes en las que vamos a abordar agregando cosas a la cuadrícula. Ahora bien, una forma es en última instancia hacer lo que hicimos antes, agregar el bloque di. Entonces podríamos agregar otro bloque div, y luego podríamos agregar otro bloque div, etcétera, etcétera Ahora bien, esto puede llegar a ser extremadamente tedioso. Ahora lo que preferiría hacer es seleccionar este dibloque, copiarlo y luego presionar la cuadrícula, y luego pegar el mismo dibloque en todos ellos Ahora, quiero mostrarte cómo puedes usar eso de una manera que realmente te ayude a ahorrar mucho tiempo y energía. Entonces, por ejemplo, quiero crear una pequeña cuadrícula para mostrar algunas fotos que he tomado. He tomado algunas clases de fotografía, y quiero mostrar mi fotografía al mundo. Entonces tengo mi bloque de DI, lo cual es muy importante. Así que de nuevo, sección que contiene di, siempre recuerda eso, baja a imagen. Perfecto. Entonces tengo una imagen dentro de mi bloque de Di, que está dentro de mi cuadrícula, y luego tengo mi contenedor, que está dentro de mi sección de cuadrícula. Bueno, mi sexy sección de grid, obviamente. Ahora, si hacemos clic, esta imagen aquí, y vamos a elegir imagen. Después subimos todas las imágenes que he guardado. Entonces comenzará a subir todas las diferentes imágenes que tengo Ahora una vez que tenga esto guardado, entonces puedo empezar a ahorrarme un poco de tiempo. Y puedo hacerlo simplemente copiando y pegando el bloque div y pegándolo varias veces a través del Ahora bien, algo que puedo hacer es básicamente ir a cada una de estas imágenes y luego seleccionar una imagen diferente para agregar a cada bloque. Ahora esto me va a ahorrar un montón de tiempo y energía. A medida que empiezo a agregar diferentes imágenes a mi nuevo portafolio de fotografía. Ahora bien, una cosa que en realidad es bastante molesta es el hecho que mis imágenes no son todas del mismo tamaño. Uno es un poco más grande que el otro. Uno es el paisaje y el otro es el retrato. Entonces, ¿cómo podemos arreglarlo? Entonces, una forma de hacer esto es simplemente redimensionar el tamaño de las propias imágenes reales, pero hay otra manera Y en realidad está haciendo un efecto de cuadrícula sin usar realmente la función grid, que voy a pasar contigo ahora. Ahora bien, esta otra forma es simplemente no usar la función grid en absoluto, sino usar un contenedor. Entonces nuevamente, dentro de la sección real, vamos a agregar un contenedor, y vamos a deshacernos de esta sección solo para mostrarte exactamente lo que vamos a estar haciendo. Y dentro de ese contenedor, vamos a agregar el efecto de cuadrícula. Y dentro de ese contenedor, ahora vamos a sumar todas nuestras imágenes. Entonces vamos a agregar este. Entonces vamos a añadir éste, y luego éste. Hoy sólo he tenido tres copias. Entonces por eso soy un poco lento de lo habitual. Perfecto. Entonces ahora tenemos un par de imágenes, todas todavía de diferentes tamaños. Y agreguemos el pato ahí también, sólo por si acaso. Bien. Entonces, básicamente, lo que está haciendo el contenedor es simplemente apilar todas las imágenes una encima de la otra, lo cual ya sabes, no se ve mal por ningún tramo de la imaginación, pero tampoco se ve genial. Entonces, ¿cómo podemos arreglarlo y obtener algún tipo de efecto de cuadrícula? Bueno, una forma de hacerlo es bajar dos aquí, donde dice columnas. Y cuando hacemos clic en la columna de efecto de cuadrícula, que no es una cuadrícula, recuerden, es un contenedor real. Ahora, puedes ver todas las imágenes apiladas una encima de la otra automáticamente por defecto. Ahora bien, no se ve mal, pero no se ve exactamente genial, ¿verdad? Tienes que desplazarte un largo camino hacia abajo para ver todas las imágenes. Entonces, ¿cómo podemos arreglar esto y hacer que parezca una cuadrícula sin usar la función grid? Bueno, podemos hacer algo usando este pequeño elemento aquí llamado el efecto columnas. Así que básicamente podemos tomar el contenedor, bajar dos columnas, y escribir dos. Ahí tienes, literalmente tienes una forma condensada realmente genial de mostrar tus imágenes. Ahora podríamos poner tres, podríamos poner cuatro, pero creo que dos en realidad se ven mucho mejor. Ahora en realidad tenemos un poco de espacio entre las dos columnas. Y lo que podríamos hacer es agregar un poco de espacio adicionalmente si quisiéramos crear un poco más de la brecha. Entonces agregaremos eso como 20 solo para el significado. Ahora, eso se ve genial, pero ¿qué pasa con debajo de cada imagen? ¿Por qué no hay ningún espacio debajo de cada imagen para una especie de, ya sabes, romperlas un poco? Bueno, eso es muy sencillo, así que todo lo que tenemos que hacer es agregar la imagen, y luego darle un poco de relleno 20. Y ahí tienes. Literalmente tenemos exactamente el mismo relleno en el lateral que lo hacemos para la imagen. Y todo lo que tenemos que hacer es simplemente pasar por las imágenes y hacer lo mismo por cada una de ellas, y estamos literalmente bien para ir. Entonces ahí tienes. Entonces, hay dos formas diferentes de agregar realmente su cuadrícula a su sitio web de una manera realmente efectiva. Entonces uno es un poco más organizado, y es donde finalmente tienes imágenes o elementos que son todos exactamente del mismo tamaño. Pero si no todas son del mismo tamaño, y quieres algo que sea un poco más versátil y algo que en realidad pueda ser un poco más dinámico en última instancia que esta opción puede ser la mejor selección para ti. En fin, realmente espero que disfrutes esta lección. Te veré en la siguiente. 38. Webflow 101: bloques de enlaces: Bien, entonces, ¿cómo se agrega realmente un bloque de enlaces? Ahora, los bloques de enlace son súper simples. Son más o menos como botones aparte de que no parecen un botón. Simplemente se ven como un poco de texto. Ahora una cosa que realmente me gustaría hacer es mostrarte la diferencia entre un bloque de enlace y un botón. Entonces si solo tomamos esto aquí, ahora, esto me va a dar un bloque completo, básicamente, así por ejemplo, podría poner esta imagen dentro de aquí, y un bloque de enlace básicamente actúa un poco como un bloque de DiS. Ahora, un bloque de enlace se puede usar de muchas maneras diferentes. Ahora bien, las dos formas principales en las que puedes usar un bloque de enlaces es en última instancia como una forma conseguir que la gente vaya a una determinada página. Entonces, por ejemplo, podríamos poner esto aquí, luego podríamos agregar esta imagen. Así que vamos a tomar el bloque de dI, y vamos a añadir la imagen al bloque de enlace. Y luego básicamente, lo que podríamos hacer es que podríamos tomar el bloque de enlace, si alguien hace clic en este elemento en particular o en este bloque de enlace en particular, donde solía estar el bloque de dI. Entonces el bloque dI básicamente está siendo reemplazado por el bloque de enlaces en última instancia, puedes agregar otro dominio, o puedes llevarte a una página diferente en el sitio web, puedes agregar un correo electrónico, puedes agregar un número de teléfono. Básicamente se puede tener cualquier acción tomada cuando hacen clic en este elemento en particular. Ahora bien, esto es súper útil porque si quieres llevarlos a la página de Swans, por ejemplo, o a Duck, lo que prefieras, entonces Esto lo haría súper fácil, y en última instancia está oculto, así que en realidad no ves el botón Ahora bien, esto también puede ser súper útil por varias otras razones. Y una de las formas en que me gusta usar el bloque de enlaces es crear en última instancia un botón casi invisible. Entonces lo que al final haría es tomar el bloque de enlace, lo agregaría al fondo. Entonces déjame agregar esto aquí, así que copia, elimina, pega. Puedes ver aquí, tenemos el bloque de enlace ahí. Ahora, quiero crear un botón invisible para esta sección en particular. Entonces voy a copiar y pegar esto. Voy a agregar algo de texto para aquí. Bien. Nos desharemos de esa línea en un par de segundos, y luego voy a perforar esto aquí. Así que tengo exactamente la misma característica en este bloque de enlaces, y puedo enlazar exactamente a la misma página la que va el botón, ¿de acuerdo? Ahora bien, ¿cuándo usaríamos un bloque de enlaces en lugar de un botón para este propósito en particular? Bueno, lo usaríamos cuando el botón real no es una prioridad. Entonces por ejemplo, si vamos a mi sitio web, clementh.com, entonces este botón es una prioridad porque esto en realidad me ayuda a generar ventas Pero si bajamos, verás que esto no es tanto de una prioridad. Esto no es tanto de una prioridad. Esto no es tanto de una prioridad, y tampoco es esto. Si bajamos un poco más, esto es una prioridad porque esto realmente lleva a la gente hacia el objetivo que mi sitio web está tratando de lograr. Si bajamos, este es de nuevo un botón muy importante. Este es un botón importante porque la gente realmente puede descargar un ejemplo de lo que les vamos a proporcionar. Esto es bastante importante porque te puede mostrar todos los artículos, aunque esto también podría ponerse como un bloque de enlace secundario. También, también, este es otro botón importante para que la gente vaya a donde yo quiero que vaya. Entonces, básicamente, el bloque de enlace debe usarse para todos los botones secundarios, donde no están enfocados principalmente en el objetivo que su empresa está tratando de lograr. Y lo primero para que se vea básicamente exactamente igual que este botón es asegurarse de que es lo mismo, tiene el mismo espaciado. Y también podemos asegurarnos de que sea del mismo color porque de momento, básicamente está vinculado a eso. Entonces, si cambiamos el color, eso cambia eso, que se ve perfecto. Y luego si solo hacemos clic en esta pequeña x aquí, entonces se quita el subrayado, que lo deja luciendo mucho más limpio y profesional Entonces básicamente tenemos el botón, así que solo podemos retrasar esto. Esto ya queda alineado. Aunque si quisiéramos poner poco de relleno y que se destaque un poco, entonces podemos hacerlo muy fácilmente. Pero mantengámoslo alineado por el momento. Entonces, cuando estoy viendo esto, esto no parece realmente un botón, ¿verdad? No sabríamos que es un botón a menos que realmente miráramos detrás del sitio web, o si realmente hicimos clic en él y descubrimos que iba a alguna parte ¿Cómo podemos hacer que esto se vea más como un botón usando la función de bloque de enlace? Bueno, podemos hacer eso simplemente usando algo como esto, una pequeña flecha. Puedes usarlos y encontrarlos en línea simplemente buscando en Google iconos, copiándolos y pegándolos, y te mostraré dónde los puedes encontrar Entonces, si literalmente vamos a nuestro pequeño bloque de enlaces y usamos esto, ahora eso se parece mucho más a un botón. Ahora, hay muchas otras formas en las que podemos hacer que esto se vea aún más como un botón. Y la forma en que podemos hacerlo es simplemente haciendo cosas como, por ejemplo, ir a flotar Y cuando está bajo flotación, podemos bajar la opacidad a 40, diría yo Y luego cuando volvemos al non, lo que simplemente básicamente significa que no le está pasando nada . Sólo está ahí parado. Es 100% de capacidad. Pero cuando pasamos el cursor sobre él, se vuelve transparente, lo que básicamente le dice al usuario, cuando haces clic en esto, algo va a pasar, ¿de acuerdo? Entonces, cuando hacemos eso, creo que es un poco demasiado rápido. Realmente no se ve muy estéticamente agradable, ¿verdad Al igual que, se ve un poco Mm, nerviosos y poco profesionales Entonces, ¿cómo podemos hacer que se vea mejor? Bueno, lo que podemos hacer es bajar a las transiciones. Podemos bajar a todas las propiedades, y luego hacerlo un poco más suave. Entonces, cuanto mayor sea este número , más suave es. Alrededor de 500 deberían estar bien. Y ahora cuando pasamos el cursor sobre él, se vuelve transparente de una manera más suave Así que eso me ha hecho bastante bien. Pero sí quiero que se vea un poco más como un botón. Quiero que la gente sepa que si haces clic en esto, vas a ir a algún lado. Entonces, ¿cómo podemos hacer eso? ¿Cómo podemos hacer que este botón se parezca aún más a un botón y menos a una pieza de texto estándar? Bueno, porque es un bloque de enlace, y puedes hacerlo con cualquier elemento, pero como es un bloque de enlaces, básicamente parece que es un bloque de texto, y en realidad lleva a alguna parte. Entonces es más discreto y es un poco más limpio. Lo que podemos hacer es volver a Hover. Podemos ir a dos D transformar y presionar esto, y esta es la posición de los elementos reales. Para que podamos mover esto alrededor. Podemos hacer muchas cosas geniales. Incluso podemos, moverlo a la izquierda y a la derecha. Y en realidad creo que esa podría ser una opción realmente genial. Entonces, vamos a mover esto a la izquierda por 15. Y luego cuando volvamos aquí, debería mudarse. Cada vez que hacemos clic en él, que se ve súper profesional y limpio. Y este es un gran ejemplo de cómo la jerarquía de botones puede ser súper importante cuando estás diseñando tu sitio web. Puedes ver aquí de estos dos botones, el botón principal, y este pequeño bloque de enlaces, cuál destaca más? El que tiene un fondo sólido. Este es mucho más discreto y mucho más sutil, por lo que puedes usar los diferentes tipos de botones para crear más de un enfoque en ciertos botones que quieres que la gente presione. Botones adicionales o botones bonus, en definitiva son los que van a estar agregando más a la experiencia del usuario, igual que el club Swan, obviamente. Puedes hacer exactamente lo mismo que esto con este botón para darle vida un poco, y escucha, vamos a estar entrando en muchas cosas importantes y divertidas a lo largo de este curso a medida que comenzamos a construir nuestro sitio web juntos. Entonces, por ejemplo, si volvemos a flotar, y bajamos a fondo Entonces potencialmente podríamos hacer esto un poco más oscuro. También podríamos aumentar esto, tal vez un poco, para que podamos hacer esto un poco más alto Sí, eso se ve bien. Ve aquí. Y entonces todo lo que tenemos que hacer es hacer la transición de todas las propiedades, hacerla un poco más suave porque 200 todavía está un poco nerviosa Pero alrededor de 500 es más o menos acertado. 575 se verá bien. Perfecto. Así que ahora, cuando pasamos el cursor sobre esto, se vuelve más oscuro y aparece un poco de una manera agradable y suave Entonces es solo una cosita muy sutil, pero hace toda la diferencia. Ahora, solo para que sea sumamente evidente para cualquiera que todavía se esté preguntando si esto es un botón, y este es un botón o no, entonces básicamente puedes ir al botón, subir a Puntero, y lo mismo con aquí. Y luego en última instancia, si solo tienes una vista previa de tu sitio web, cada vez que pasas el cursor por encima, es inconfundiblemente cada vez que pasas el cursor por encima, es inconfundiblemente un botón. Y la pequeña animación y el poco sutil, ya sabes, tipo de diferencias entre cuándo se cierne y cuando realmente no se comunica con el usuario usando la menor cantidad de calorías mentales posible que estás a punto de presionar un botón y estás a punto de ir a algún lado Ahora, sé que se suponía que íbamos a sumergirnos en el cuadro de enlaces en esta lección en particular, pero no pude resistirme a mostrarte algunos pequeños trucos para ayudar realmente a que tu sitio web cobre vida de una manera profesional. Va a haber mucho más de donde vino eso en la siguiente lección, así que te veré ahí. 39. Webflow 101: buttons: Entonces, ¿cómo agregamos botones a nuestro sitio web en flujo web? Bueno, es súper simple. Entonces tomemos este botón aquí y solo borrárelo. Adiós. Y luego simplemente ve al botón más y presiona el botón, arrástralo sobre, y ahí tienes. Ahí está tu botón. Ahora bien, este botón en particular no se ve muy bien a menos que realmente te guste el azul. Entonces lo que quiero hacer es, quiero mostrarte cómo diseñar el botón para que en última instancia se vea mejor y que se ajuste a la estética de tu marca y sitios web Entonces lo que podemos hacer es que en realidad podemos empezar a editar un par de cosas. Entonces esto es solo editar el relleno a cada lado. Y si solo eliges opción o comando en tu teclado, puedes cambiarlos ambos al mismo tiempo. Agreguemos un poco de relleno a los lados. 30 se ve bien. Ahora, agreguemos un poco de relleno a la parte superior. 12. Eso se ve bien. Y entonces, dos cosas para recordar es, cuando estás editando el botón, el tamaño del botón se distingue por el texto interior, el tamaño del texto, el espaciado entre cada carácter, y también el relleno alrededor del texto, ¿bien? Entonces si cambiamos el texto a Swan Club, Y luego si lo seleccionamos de nuevo, baja y aumentamos el tamaño de la tecnología, puedes ver que el botón empieza a cambiar de tamaño también. Ahora bien, lo que también puedes hacer es cambiar el espaciado a dos, por ejemplo, lo que hace que se extienda un poco, un poco como este ejemplo de aquí abajo. Pero entonces lo que también puedes hacer, y aquí es donde las cosas se ponen súper interesantes es que puedes empezar a manipular y editar realmente el diseño y la apariencia del botón, usando cosas como el color de fondo, que está aquí, así que literalmente puedo hacer que ese color sea el que quiera. Hagamos una bonita de oro. Eso se ve bien. Bonito. Perfecto. Entonces, quiero decir, eso se ve bastante bien tal como está. Pero quizá agreguemos algunas curvas al botón. Hagamos que se vea un poco más elegante. Seis se ve bien. Y si, por ejemplo, quisieras editar diferentes esquinas en diferentes estilos, podrías hacerlo, lo que le da este tipo de efecto de sución No, quiero que todas las curvas estén ahí, así que voy a cambiar eso de nuevo. Ahora estás en una posición donde tienes un botón hermoso, pero ¿cómo puedes vincular el botón a tal vez a una página separada o tal vez en página o tal vez si quisieras hacer un botón para Carnes, llamando al club Cisne? ¿Cómo se hace eso? Bueno, todo lo que necesitas hacer es hacer clic en el botón. Ir a ajustes. Y en la configuración, simplemente verás cinco opciones. Entonces el primero es el teléfono. Entonces, cuando hagas clic en esto, solo puedes agregar tu número de teléfono. Ahora, la segunda opción es el correo electrónico. Entonces este es básicamente el correo electrónico que quieres que el botón te lleve para enviar esencialmente un correo electrónico a esa dirección de correo electrónico en particular. Y luego también tienes la barra de temas. Ahora bien, la barra de temas básicamente va a decir algo en la línea de, Hey, Swan Club, quiero unirme. Pieza hacia fuera. Entonces eso esencialmente va a surgir como una línea de asunto. Si hago clic en este botón y está conectado a cierto correo electrónico. Ahora la siguiente opción es la página. Entonces, lo que quiero decir con página es, si bajo hasta aquí y llamo a esto la sección de cartera, entonces puedo vincular esto a la sección de cartera para que cuando realmente empiece a navegar por el sitio web, simplemente pueda hacer clic en esto, y me lleve automáticamente a esta sección. Y volvamos. Ahora bien, esta es una página separada. Entonces, por ejemplo, esta es una página que se encuentra internamente dentro de su sitio web. Ahora bien, es muy importante que uses esto si vas a estar enlazando internamente dentro de tu sitio web porque si usas la URL, la URL puede cambiar en el futuro. Entonces, por lo tanto, si cambia, entonces la URL real podría estar equivocada, y probablemente solo, ya sabes, estropeará por completo todo tu sitio web, lo cual no es genial. Así que solo ten esto en mente. Si estás enlazando fuera de tu sitio web, entonces usa esta opción, la opción URL. Básicamente vas a estar enlazando a una página dentro de tu sitio web, así que permanecerás dentro de tu dominio, luego usa esta opción. Ahora bien, ¿y si quisiéramos tener una opción de Autos y un correo electrónico nosotros? Bueno, aquí tendríamos la opción de Autos así. Entonces lo que podríamos hacer es literalmente simplemente copiar y pegar esto. Así que ahora tenemos dos botones que son esencialmente exactamente iguales. En este botón, esencialmente podríamos poner correos electrónicos. Entonces podríamos cambiar esto en los escenarios. A la opción de correo electrónico. Cisnes en swans.com. Entonces tienes cisnes. Oh, eres un cisne. Bien. Exclamación, Marcos Bien. Entonces ahora tenemos dos botones. Una es por llamar a este club O, y la otra es para enviar por correo electrónico a este club. Ahora bien, se ve bien, pero dos cosas realmente me están molestando. Lo primero es que no me gusta cómo se apilan estos botones uno encima del otro. Entonces, ¿cómo podemos arreglarlo? Podemos arreglarlo con un bloque dF. Entonces agregamos el bloque dip. Después agregamos esto, copiamos y pegamos esto. Ahora puedes ver que están uno al lado del otro, lo que se ve diez veces mejor, pero no hay brecha entre ellos, y es realmente molesto. Entonces, ¿qué podemos hacer? Podemos añadir un poco de margen. Entonces los elementos interiores es padding, y los elementos externos es margin. Entonces ya tiene un margen por debajo, lo cual es genial, pero en realidad podemos quitarlo porque en realidad no lo necesitamos, pero podemos darle un poco de margen a la derecha, y eso ayuda a romper los dos botones. Ahora bien, estos dos botones se ven geniales. Pero algo que es realmente importante es tener jerarquía de botones, que si ya has tomado esa lección en particular en este curso, entenderás a lo que me refiero. Ahora bien, si no entiendes la jerarquía de botones, ve a revisar esa lección ahora porque va a ser súper valiosa para ti. Entonces lo que voy a hacer es, me gusta cómo se ven estos dos botones. Pero quiero que el botón de las personas que llaman sea más prominente y el botón de correos electrónicos menos prominente, ¿de acuerdo? Entonces lo que voy a hacer es que voy a llamar a estos dos botones, algo diferente. La razón por la que estoy haciendo eso también. Déjame mostrarte, es porque si cambio el fondo o el texto en este botón en particular, va a cambiar para ambos. Sin embargo, si llamo a este botón botón cuatro, Carl nosotros y este botón correos electrónicos, ya no están conectados, ¿de acuerdo? Así que básicamente se pueden diseñar de cualquier manera que yo quiera. Entonces lo que puedo hacer es que puedo tomar esto, puedo tomar esto, agregar un poco. Ve o incluso esto. Completa, quítate eso. Y luego también puedo agregar texto. Me veo mucho mejor. Ahí vas. Eso se ve diez veces mejor. Ahora, lo que también voy a hacer es que también voy a agregar un poco de contorno de oreja alrededor de esto solo para que sea agradable y parejo. Perfecto. Ahora, cuando miramos esta sección en particular, ahora podemos ver que aquí hay un botón alto rocoso. Queremos que la gente presione este botón primero, pero si quieren enviarnos un correo electrónico, entonces son libres de hacerlo. Esa opción sigue ahí. Pero, ¿cómo podemos darle vida a estos botones un poco? Porque cuando pasamos el cursor sobre ellos, en realidad no pasa nada. Sólo estamos como que la manita se acerca para demostrar que es un botón, pero en realidad no está haciendo mucho. Es un poco molesto. Entonces veamos cómo podemos darles vida a estos. Y una forma de darles vida es mediante uso de la animación hover, que es realmente fácil Entonces puedes ir a esto, presionar hover, bajar, y en última instancia puedes quitarle un poco de pacidad a 65, volver a ninguno, y luego cuando jugamos, puedes ver que el botón de Carlos tiene una pequeña característica que demuestra que se está presionando o se le ha pulsado sobre, debería Ahora bien, en realidad no se ve muy bien, si lo miras. Como que va a 65 pacity muy, muy rápido. Y eso no queremos. Nosotros sí queremos es queremos que sea agradable y suave. Entonces tuvimos una transición, y llevamos esto a alrededor de 500. Eso va a verse mucho más suave. ¿Ves eso? No se ve mucho más profesional y mucho más confiable. Ahora podemos ir un paso más allá. Podemos ir de nuevo a la sección de hover, todavía en este botón aquí, el botón de las personas que llaman. Podemos bajar a dos d transformaciones. Podemos ir a esta sección, y podemos moverla un poco hacia arriba por cuatro. Eso son sólo cuatro píxeles. Ahora volvemos a ninguno. Volvemos a esto. Y bien podríamos simplemente cambiar esto a todas las propiedades. Entonces, antes de que solo se fijara Apcity, ahora son todas las propiedades Entonces, cualquier cambio que haga a este botón en particular se hace con una brecha de 500 milisegundos, ¿de acuerdo? Así que déjame ver esto. Este botón, sigue siendo el mismo. Este botón. Ah, se ve bien. Mira qué suave se ve eso. Muy bonito. Entonces, ¿cómo podemos animar este botón? Bueno, hay un par de formas diferentes en las que podemos hacerlo. Si volvemos a ir a Hova, bajamos. Podemos ver que actualmente el texto es oro. Cambiemos eso a blanco. Y luego quiero cambiar el fondo a este color. Se ve bien. De hecho, quiero que sea un poco más oscuro. Ahí vamos. Veamos cómo se ve eso. También voy a cambiar esto. Perfecto. Ahora voy a volver a ninguno. Y luego iré a las transiciones, recuerden. Ir a todas las propiedades. Ir a 500, 525 va a ser bueno. Bien. Entonces ahora, cuando probamos los dos botones, Llámanos se ve bien. Un correo electrónico nos queda bien. Entonces ahora tenemos dos botones que están completamente animados. Ahora bien, esto es básicamente, ya sabes, reunir diferentes animaciones. En realidad no recomendaría usar estas dos animaciones una al lado de la otra. Ahí debe haber un elemento de consistencia. Solo quería mostrarte cómo puedes crear botones realmente geniales en un periodo de tiempo realmente corto. Y una vez que realmente tienes las animaciones generales para tus botones, todo lo que tienes que hacer es copiar y pegar, y puedes simplemente copiar estos botones en particular en cualquier lugar del sitio web que quieras. Y siempre será lo mismo en lo que respecta a la animación, e incluso se puede cambiar el texto. Perfecto. Entonces, ojalá, eso te dé un poco de un curso rápido en lo que respecta a agregar botones a tu sitio web, así que te veré en la siguiente lección. Nos vemos ahí. 40. Webflow 101: tipografía: Entonces tipografía en piso web. ¿Cómo podemos hacer nuestra tipografía en piso web? ¿Cómo podemos hacer que el texto nuestros sitios web se vea y se sienta increíble mientras también comprendemos cómo editarlo para obtener ese sitio web perfecto que queremos? Ahora, en esta lección, vamos a cubrir todo en esta hermosa cajita. Entonces ya sabes usar la tipografía en piso web a la perfección. Entonces comencemos a jugar. Entonces, en lo que respecta a la fuente, esto es bastante autoexplicativo. Se puede seleccionar cualquiera de las fuentes estándar en piso web? Pero también puedes agregar fuentes personalizadas. Y la forma en que lo haces es simplemente haciendo clic aquí, que luego te llevará directamente a la sección Fuentes en el panel de configuración. Y entonces todo lo que necesitas hacer es subir tu archivo de fuente de tu elección, presionar guardar, y luego presionar publicar y publicar el sitio web, y ya estás listo para comenzar. Entonces, digamos, por ejemplo, queremos cambiar esto a Mon Serrat. Perfecto. Eso se ve increíble porque los cisnes son increíbles Si quisiéramos hacer esto un poco más grande, podríamos usar esta herramienta. Entonces esto es esencialmente los diferentes pesos que tenemos para esa fuente en particular o tipo de cara. Ahora, lo que verás es que no todas las fuentes tienen toda la selección. Por lo que puede que tengas que agregarlos manualmente si específicamente necesitas, ya sabes, aéreos delgados, por ejemplo, porque no está disponible por defecto en el flujo web. Pero afortunadamente para nosotros, Monsat tiene todos los pesos disponibles, así que elijamos extra audaz, y veamos eso. Mmm No está mal. Ahora bien, aquí es donde las cosas empiezan a ponerse un poco más interesantes, así que podemos editar el tamaño de ese frente aquí con solo hacer clic arriba y abajo, o incluso podemos poner un número ahí, y podemos distinguir qué tan grande o pequeño es el texto real. De hecho creo que eso es un poco demasiado pequeño. Vamos por vamos por 35. Perfecto. Ahora bien, la altura es un poco diferente. Entonces la altura es, déjame mostrarte porque las medias alas, obviamente. Ahora bien, la altura es el poco espacio entre las líneas de las palabras. Entonces, si vamos a 40, verás que se pone un poco más apretado Si vamos al 60, verás que se ensancha mucho. Ahora bien, la mejor práctica es aproximadamente 1.5 veces lo que tienes aquí. Entonces, si esto era 30, por ejemplo, entonces si ponemos esto como 45, esto es aproximadamente la cantidad correcta de espacio que deseas para tus encabezados. Y lo mismo va para el texto de tu párrafo y cualquier otro fragmento de texto también. Así que hemos cubierto todas las cosas básicas. Obviamente, sabemos qué es el color, así que donamos una inmersión demasiado profunda en eso. La alineación es bastante sencilla. Es simplemente cómo se alinea el texto dentro de la caja en la que lo tienes dentro. Podemos hacer que el texto sea cursiva. También podemos agregar una línea a través del texto, alinear debajo del texto, y también una línea por encima del texto. Seré completamente honesto. No tengo idea de cuándo pondrías una línea encima del texto, pero las opciones ahí si lo necesitas. Ahora bien, estos ajustes adicionales aquí abajo están básicamente ocultos en esta barra de opciones de tipo más. Entonces, si solo hacemos clic en esto, entonces podemos comenzar a cambiar cosas como el espaciado entre letras, que es básicamente la cantidad de espacio entre cada letra en el cuadro. Entonces tenemos que escribir sangría. Entonces si ponemos esto como diez, esto va a sancionar el primer carácter del texto Digamos, por ejemplo, queríamos sangrar un poco de cinco, o tal vez queríamos iniciarlo aún más. Pondremos 30. Para ser honesto, en realidad no uso eso muy a menudo, pero está ahí si lo necesitas. Ahora bien, en lo que respecta a las columnas, en realidad usamos esto aquí antes. Entonces lo que podemos hacer es si ponemos esto como dos, entonces básicamente lo divide todo en dos columnas separadas para simplemente hacerlo un poco más cautivado, supongo No estoy muy seguro de cuándo usarías esto para un titular, pero puedes usarlo, por ejemplo, si estás creando el efecto un poco como un periódico donde tienes dos líneas de texto yendo a ambos lados y lees la izquierda primero y el segundo derecho, eso podría ser cuando se usa eso. Pero para ser completamente brutalmente honesto, no usaría eso para encabezados en absoluto Ahora, la herramienta en mayúsculas es realmente importante porque en realidad puede ahorrarle mucho tiempo Por ejemplo, si quieres que todos tus encabezados estén en mayúscula, entonces puedes presionar esto y puedes cambiarlo como desees También puedes asegurarte de que cada primera palabra También puedes asegurarte de que cada primera letra también esté en mayúscula Entonces, aunque tenga las letras mecanografiadas así y presiono esto, automáticamente pone en mayúscula cada palabra de esa oración O, por supuesto, también puedes simplemente tenerlo con todas las letras minúsculas también, lo cual también es genial. Vamos a deshacernos de eso por un segundo, y vamos a elegir en realidad capitalizar, así se ve un poco mejor Ahora bien, esta pequeña función aquí es esencialmente la dirección. Entonces por el momento va de izquierda a derecha, pero si cambio esto aquí, entonces empieza a ir de derecha a izquierda. Nuevamente, no estoy muy seguro de cuándo usarías esa función en particular, pero está ahí si la necesitas. Ahora bien, si ya has hecho la lección de capacidad de respuesta del sitio web en este curso, sabrás qué son los puntos de interrupción Pero si no lo has hecho, un punto de interrupción es esencialmente el momento en que la pantalla se vuelve lo suficientemente pequeña, por ejemplo, aquí, donde las líneas reales empiezan a romperse en ciertos puntos, dependiendo del tamaño de la pantalla, en los que estés viendo el sitio web Y esto tiene un par de opciones diferentes. Entonces, por ejemplo, tiene break a, así que básicamente, cualquier letra o cualquier palabra se puede romper en última instancia, dependiendo del tamaño, o incluso se puede seleccionar mantener todo, que es esencialmente simplemente mantener todo en una línea y no romper las cosas. Ahora puedes hacer esto por palabra, o también puedes hacerlo por línea. Así que experimenta un poco con esto si realmente quieres, pero voy a ser completamente honesto. Nunca he usado estos dos elementos en ningún diseño que haya creado en los últimos diez años, ya sea en flujo web o en una plataforma diferente. Ahora, en lo que respecta al rap, realidad no soy fanático del rap yo mismo. Prefiero rega, pero puedo decir que es en lo que respecta a esta función en particular, creo que si vas a usar esto, entonces puedes estar haciendo el sitio web sea un poco más complicado de lo que necesitabas ser Y la razón por la que digo eso es, en realidad se puede envolver el texto manualmente en el propio texto. Entonces, por ejemplo, podría envolver a Great. Entonces está separado, y en realidad está, ya sabes, contenido, entonces podría incluso poner un poco de margen de seis y seis. Se ve bien. Bueno, eso son 60 escoceses, así que dividamos eso por diez Perfecto. Entonces lo que creo que podríamos hacer, Mm. Interesante. Vamos a pasar esto al blanco. Bien, entonces no podemos verlo en absoluto ahora mismo, pero luego robaremos este oro, y cambiemos este fondo por oro. Oh, Dios mío. Eso se ve increíble. Y puedes hacer muchas cosas creativas con esta función en particular. Entonces, cuando seleccionas cualquier texto, esencialmente puedes agregar un enlace si realmente quieres. No estoy seguro de lo genial que se vería eso o cuándo lo harías, pero tal vez puedas ser útil. Puedes envolver con spam, que es básicamente lo que hemos hecho aquí, y también puedes borrar el formato. Entonces, por ejemplo, si quisiera aclarar esto, y quería despejar completamente todo, entonces simplemente haría clic en eso y lo llevaría de nuevo a la normalidad. Pero eso me gusta, así que voy a mantenerlo como está. De todos modos, realmente espero que esto te haya dado un poco de perspicacia en lo que respecta a cómo usar la tipografía correctamente en el flujo web, así que espero verte en la siguiente lección. Nos vemos pronto. 41. Webflow 101: imágenes: Bien, entonces ya hemos agregado y reemplazado imágenes en este curso, pero solo quería dedicarle una sola lección a mostrarte todo lo que necesitas saber sobre agregar imágenes en el piso web porque es súper simple y fácil de entender. Ahora bien, si quitamos esta imagen en particular y la borramos, lo cual es genial, entonces esencialmente no tenemos nada en el lado derecho, que es justo lo que queremos. Entonces, ¿cómo agregamos una imagen? Bueno, aquí vamos a la pequeña cruz. Luego nos desplazamos hacia abajo hasta la barra de imágenes, y simplemente colocamos nuestra imagen ahí dentro. Ahora, por el momento, simplemente tenemos una imagen de marcador de posición, así que no tenemos nada que mostrar realmente a nadie, lo cual no es bueno porque en realidad no es una imagen Es solo un marcador de posición. Entonces, ¿cómo agregamos una imagen? Bueno, puede que solo sea este pequeño botón aquí el que dice elegir imagen. Entonces, si hacemos clic en eso, entonces va a abrir nuestra barra de activos aquí en el lado izquierdo, y luego todo lo que tenemos que hacer es seleccionar una imagen que queramos. Y aquí, Presto, la imagen ya está aquí. Ahora, como puedes ver aquí, la imagen es su propio elemento. Entonces, por ejemplo, si seleccionas la imagen, entonces puedes ir al estilo, tamaño, y puedes agregar 50% a la mitad del tamaño de la imagen. Ahora bien, aunque esta imagen en particular será 50% en este escritorio, si vamos a la laptop, que es esencialmente el núcleo todo lo que responde en el flujo web, verás que la imagen está al 100% o auto en este momento. Pero si vuelves al escritorio grande, verás que todavía está establecido en 50. Entonces, ¿por qué es eso? Bueno, la razón que es es porque si nos quitamos esto, por ejemplo, y simplemente le volvemos a pegar esto a Auto, entonces está de vuelta como lo teníamos antes. Ahora bien, si volvemos al centro, que es el núcleo, si todo lo que responde en piso web, si cambiamos algo aquí con la estrellita en la esquina superior derecha, automáticamente cambiará todo a la izquierda y todo a la derecha para que sea exactamente lo la izquierda y todo a mismo. Y así es como se crean sitios web receptivos en piso web de manera muy fácil. Entonces, por ejemplo, si seguimos aquí, y si lo cambiamos al 70%, vemos que aquí cambia el tamaño, pero también cambia el tamaño en todos los demás dispositivos, también, ya sea más grande o incluso más pequeño. Entonces, ¿y si quisiéramos que fuera 70 en esta página en particular, pero luego queríamos que fuera 100 en el móvil Bueno, podemos simplemente seleccionar eso aquí, ponerlo como 100%. Y aquí, Presto, está de vuelta. Y debido a que esto está al final de la escalera de respuesta, esencialmente puedes asegurarte de que solo estás editando este dispositivo en particular Esto no impactará ninguna otra configuración del dispositivo en todo el sitio web y su capacidad de respuesta Vamos a fingir que tomamos camino auto. Y también llevamos esto de vuelta a la orden. Entonces, ¿y si queremos cambiar esta imagen? ¿Y si no nos gusta que estos niños encantadores pesquen? Bueno, muy fácil. Simplemente haga clic en el diente, tengo que reemplazar la imagen, haga clic en la nueva imagen Y ahí tienes. Así que de todos modos, espero que esta lección te haya resultado útil. Inmigrantes a agregar imágenes al flujo web. Te veremos en la siguiente lección. Nos vemos ahí. 42. Webflow 101: videos: Básicamente hay dos formas en las que puedes agregar videos al flujo web, y quiero mostrarte cómo. Lo primero que debes hacer es agregar realmente el video al flujo web. Entonces lo primero que haces es bajar a Media, Dragon drop video. Y entonces debería aparecer con ajustes de video. Ahora, para la URL, puedes o bien agregar tu video video, que suele ser lo que prefiero porque se ve mucho más limpio, o simplemente puedes agregar un video de YouTube, así, escribe la URL. Presentador, y automáticamente aparece con el video. Ahora, lo que acabo de hacer ahí es que básicamente tuve que agregar un poco de ancho solo para mostrar realmente el video. Entonces cerca de 400 funciona perfectamente para esto, y lo puedes ver. Y si realmente vemos el sitio web, puedes ver que el video aparecerá y se reproducirá sin esfuerzo. Iniciar sesión. Ahora, si bajamos, a la otra manera que en última instancia puedes agregar un video en Webflow. Entonces tienes esto aquí. Vamos a poner la función de YouTube directamente en la división de héroes. Y nuevamente, vamos a agregar estos 400 píxeles que lo muestra, URL. Y lo mejor de esta función en particular es que puedes agregar el inicio. Digamos, por ejemplo, que queríamos comenzar a 1 minuto y 15 segundos. Puede configurar el modo de privacidad de reproducción automática. También puedes mostrar controles o no mostrar controles, también puedes silenciarlo. Y también puedes limitar videos relacionados al canal. Entonces, si jugamos esto ahora, y gritamos inicio, elementos CMS A 150. Los elementos CMS son de color perl distinto Y así es en última instancia como agregas videos al piso web. Ahora también puedes agregar videos al piso web usando la función de video de fondo. Y la manera de hacerlo es muy sencilla. Entonces, ante todo, necesitarías una sección, que podemos agregar aquí abajo. Y dentro de esa sección, vamos a agregar la función de video de fondo, que está ahí abajo en la configuración avanzada. Como puedes ver aquí, en última instancia tienes el video de fondo, todo lo que necesitas hacer es subir un archivo de video. Ahora una cosa para recordar es que solo tienes 30 megabytes de espacio de archivo para subir para un video de fondo Entonces, ante todo, asegúrate de que el video sea de alta calidad porque lo último que quieres es un video pixelado solo para mostrar que realmente no te importa lo que hay en tu Eso no es lo que queremos. Pero en segundo lugar, debes asegurarte de que el video sea corto, porque eso va a mantener el tamaño real del archivo mucho más pequeño y permitir que el video se reproduzca sin problemas. Ahora puedes elegir si quieres mucho el video, que yo recomendaría reproducir el video, que yo recomendaría, y también incluir un botón de reproducción o pausa, que no recomendaría. Y una vez que lo hagas, simplemente puedes presionar play, y tu video se reproducirá en la parte inferior de la pantalla. Ahora, una vez que tengas el video de fondo todo configurado, puedes agregar el video así, y puede tardar un poco en cargarse y formatear. Pero una vez que lo hace, tu video se reproducirá automáticamente, y se reproducirá automáticamente sin que ni siquiera necesites levantar un dedo. Entonces, en cuanto alguien llegue a tu sitio web, podrás ver exactamente qué incluye el video. Y así después de que haya sido formateado, puedes ver el video aquí. Vamos a comprobarlo en el botón del jugador. Se puede ver aquí que el video real es un poco pix mintió, pero eso es simplemente porque descargué un archivo, que solo tenía 11 megabytes de tamaño Si descargaste uno que es un poco más grande, entonces va a parecer mucho más limpio y va a tener más píxeles ahí y va a parecer de mayor calidad. Ahora bien, lo mejor de los videos de fondo es la sección esencialmente activa, así que en realidad podría agregar este contenedor al video de fondo, y esencialmente tenerlo para que todos mis elementos estén ahí. Si pongo esto en un contenedor y solo trato el video de fondo como una sección, básicamente, entonces básicamente puedo tener exactamente lo mismo que esto aquí arriba, pero con un video de fondo reproduciendo detrás de él. Ahora bien, no estoy seguro de cómo va a quedar esto. Esto podría no verse muy bien, pero ciertamente podemos ver el potencial de usar un video de fondo como parte del diseño del sitio web. Ahora, no recomendaría hacer esto. De hecho, creo que usar videos de sitios web no es realmente genial para fondos en muchos casos. Es mucho mejor agregar realmente el video en sí, pero está ahí si quieres usarlo. Es otra forma de expresarte, pero solo ten cuidado porque el contraste aquí no es genial, y realmente no hace mucho por la experiencia del usuario. Y en última instancia, como puedes ver aquí, en realidad ralentiza bastante el sitio web. Ahora bien, solo porque esto no se esté cargando lo suficientemente rápido, no significa que no debas estar haciéndolo de todos modos. Realmente espero que hayas disfrutado esta lección en particular en lo que respecta a agregar videos al piso web, pero te veré en la siguiente lección, y no puedo esperar a verte ahí. 43. Webflow 101: animaciones de Lottie: ¿Qué son las animaciones lotty? Bueno, las animaciones litty son muy útiles para varias cosas diferentes, y quiero mostrarte una de las mejores formas de usarlas dentro del diseño de tu sitio web Ahora, para agregar mucha animación a tu sitio web, es realmente, muy simple. Y todo lo que tienes que hacer es crear una nueva sección, que va por aquí abajo. Y para poder agregar mucha animación a tu sitio web, todo lo que necesitas hacer es tener un contenedor, que está aquí. Y dentro de ese contenedor, añadiremos su di bloque. Eso no ha entrado en el contenedor. Así que vamos a copiar y pegar eso ahí dentro, para que vayamos al bloque dif que está dentro del contenedor. Después dentro del bloque di, agregaremos nuestra animación de lottie Entonces esta es la animación de Lottie aquí. Bien, así que eso no ha funcionado. Entonces copiemos y peguemos eso. Luego pega eso dentro del bloque diff. Entonces ahí vamos. Así que tenemos nuestra animación lotty dentro de un bloque diff dentro de un contenedor, que está dentro de la sección En lo que respecta a una animación lotty, es exactamente lo mismo que agregar una imagen o un video Simplemente presiona el pequeño diente. Sustituirías la secuencia lotty por una nueva secuencia lotty, que te voy a mostrar dónde conseguir eso en poco tiempo Y entonces todo lo que básicamente haces es decir duración construida, así que solo verías cuánto tiempo realmente quieres que dure. También presionas loop, lo que significa que simplemente girará constantemente y otra y otra vez, lo que se ve muy sin costuras. Y luego también puedes presionar aquí para tocarlo en reversa. Ahora, tal vez te estés preguntando qué es realmente una animación lotty Ahora, tu animación es esencialmente una animación muy suave. Puedes agregarlo como una imagen, pero es como un regalo, pero es una animación muy suave, que en última instancia puede ir para siempre sin detenerse nunca. Y esto puede ser súper útil si buscas mostrar, por ejemplo, ciertas estadísticas sobre tu negocio o tal vez clientes con los que has trabajado o ya sabes, publicaciones que te han destacado porque Tener esto tu sitio web en forma de una animación Lotty puede llegar a través de una superpfessional, y realmente limpia y simplemente se Déjame mostrarte un ejemplo de mucha animación que uso dentro de mi sitio web. Entonces esto es esencialmente dos animaciones lotty. Este va a una velocidad un poco más rápida, y este de aquí va a una velocidad más lenta. Y como puedes ver, simplemente se ve súper limpio, superpfsional, y realmente ayuda a posicionarnos como expertos en el ámbito de la marca, mostrando todas las diferentes marcas que hemos desarrollado y creado en los últimos años Ahora bien, ¿dónde puedes realmente obtener mucha animación? ¿O incluso puedes crear uno tú mismo? La verdad es que puedes crear uno tú mismo si realmente quieres. Ahora, personalmente no sé cómo hacer eso, pero sí sé dónde conseguir mucha animación súper barata. Por lo que inicialmente puedes obtener mucha animación por $15 en sitios como fibra. Incluso puedes conseguirlos gratis incluso barato en eso para ser honesto, son $5, lo cual es realmente, realmente genial. Y todo lo que necesitas hacer es simplemente decirles exactamente lo que quieres, darles todos los archivos, y deberían poder resolverlo por ti. Y entonces todo lo que simplemente haces, una vez que tengas tu archivo es simplemente subirlo a la página web, solo hacer clic en el Cog, reemplazar un Lott de secuencia, y la secuencia LoTTi debería estar aquí, y debería Ahora, mucho las animaciones vienen en forma de archivos JSN. Entonces, si puedes obtener el archivo JSN de alguien de Fiber o de alguien más que sea diseñador, tal vez conozcas a alguien, o tienes a alguien en tu familia, cuanto tengas ese archivo JSO, simplemente lo agregas a tu sitio web como si fuera una imagen, y luego en cuanto publiques realmente tu sitio web, comenzará a reproducirse automáticamente Entonces realmente espero que puedas encontrar algo de tiempo para invertir en una animación de Lotti si se adapta a tu sitio web, pero ojalá te resulte útil la lección, y te veré en la siguiente 44. Webflow 101: formularios: Entonces, ¿cómo se construye un formulario sobre el flujo web? Ahora, te puedo decir ahora es muy, muy fácil. Te voy a mostrar exactamente cómo hacerlo en esta lección. Lo primero que debes hacer es si quieres construir un formulario en una sección, por ejemplo, es ir a la sección de formularios presionando el signo más y luego agregar el elemento de bloque de formulario, que simplemente pondrías ahí. Y como puedes ver aquí, no se ve genial. Voy a copiar y pegar eso dentro del bloque DIF. Y ahora por lo menos está centrada. Ahora bien, este es el primer paso para construir una forma. Necesitas tener todo dentro de un bloque de formulario. Entonces agrega primero el bloque de formulario, y luego podemos comenzar a construirlo. Ahora puedes construir cualquier tipo de formulario que te guste. Y todo lo que necesitas para construir una forma está dentro de esta cajita de aquí. Entonces, por ejemplo, usemos realmente cada uno de los elementos dentro de esta caja en particular para mostrarte cómo usar cada elemento. Entonces ya hemos usado el bloque de formulario. Ahora agreguemos una etiqueta. Entonces, si vamos a agregar una etiqueta, entonces esencialmente necesitamos algo más para agregar al bloque de formulario. Entonces agreguemos aquí esta área de texto, que no va en la casilla. Entonces agreguemos esta copia y péguemos eso dentro del formulario. Perfecto. Y entonces el botón de enviar debería estar en la parte inferior, así que agreguemos eso aquí. Perfecto. Así que hemos agregado esto aquí, que es esencialmente un área de texto, que se ve muy bien. Entonces agreguemos una etiqueta, que está aquí. Agreguemos eso encima del bloque de texto. Oh, entonces eso está por debajo de eso. Entonces, solo agreguemos eso por encima de eso. Perfecto. Entonces ahora tenemos un campo de texto adicional, nuestro buzón de dirección de correo electrónico, y también nuestro cuadro de nombre. Así que vamos a hacer esto aquí y nombrar este mensaje. Perfecto. Ahora bien, no se ve genial, pero estamos llegando ahí. Estamos avanzando. Entonces, solo seamos pacientes. Vamos a sumergirnos en los demás elementos. Entonces tal vez agreguemos una casilla de verificación ahí dentro también. Y vamos a poner cambiar el nombre para optar por la comercialización de correos e. Comenzar comprobado, requerido. Deja esto un poco y agrega un poco más de margen. Bien, entonces el margen por alguna razón no está funcionando, y creo que eso es porque esto es un poco demasiado grande. Entonces vamos a hacer eso más grande. Estamos agregando un poco de margen. Entonces 20 Entonces agregaremos 20 en este también. Ahí vamos. Así que ahora tenemos un poco de respiro. Ahora no me gusta lo squash que es esto. Realmente no parece tan genial, así que voy a sumar 20 entre estos también. Voy a cambiar este botón de enviar con solo hacer clic en él para enviar mensaje. Y luego voy a cambiar esto a enviar mensaje. Ahí vamos. Así que eso se ve un poco mejor, pero todavía se ve muy estrecho Entonces, ¿cómo podemos arreglarlo? Bueno, si presionamos la sección y presionamos vertical y la estiramos, Eso debería funcionar. Pero entonces si vamos al contenedor de bloques DIV, entonces podemos empezar a entender realmente cómo estirar las cosas aún más. Ahí vamos. Así que básicamente acabamos de liberar cualquier tipo de restricción del bloque de sección, por lo que se permite que el formulario se expanda completamente, lo que se ve mucho mejor. Ahora bien, me gusta esto, pero creo que estas etiquetas simplemente no se ven muy limpias. Prefiero tenerlos dentro de las cajas ellos mismos, solo para dar una experiencia más fluida para el usuario. Entonces, ¿cómo podemos hacer eso? Bueno, podríamos simplemente borrarlo, luego hacer clic en el pequeño diente, y luego simplemente poner la palabra Nombre aquí, que se ve mucho mejor Hagamos lo mismo con la dirección de correo electrónico. Perfecto. Y luego hagamos lo mismo para el mensaje también. Perfecto. Entonces podemos eliminar eso. Excelente. Eso se ve mucho mejor. Ahora una vez que hagamos eso, agreguemos un poco más de brecha. Se ve bien. Mercadotecnia e mails. Ahí vamos. Así que eso se ve mucho mejor. Voy a agregar un encabezado encima de él, que en realidad no necesita estar dentro del bloque phm, solo necesita estar por encima de él, pero lo voy a poner dentro del contenedor solo para que en realidad esté en línea con el resto de los elementos Y la mejor manera de hacerlo, creo que es simplemente conseguir esto y hacerlo por encima del bloque phm Ahí vamos. Y luego quiero agregar un poco más de espacio aquí. Ahí vamos. Eso no se ve muy mal. No se ve muy mal en absoluto. La sección de nombres me está molestando un poco. Entonces, ¿y si pudiéramos poner y apellido en el bloque de formulario? ¿Cómo haríamos eso? Bueno, en realidad es bastante fácil. Entonces, la primera forma de hacerlo es básicamente, o la mejor manera, debería decir, es agregar un bloque de DiS. Entonces dentro de ese bloque di, que actualmente está aquí, teníamos una grilla, que está aquí. Así que teníamos eso dentro del bloque di ahí. Ahora tenemos la grilla, y dentro de esa cuadrícula, también agregaremos dos nuevos bloques de Di. Recuerda que los bloques de Di son solo las habitaciones dentro de la casa. Así que estamos creando algunas habitaciones adicionales dentro de la casa, ¿de acuerdo? Entonces sólo copiaremos y pegaremos eso. Perfecto. En realidad, no, no copiemos y peguemos. Pongámoslo manualmente. Hagámoslo correctamente y dejemos de ser perezoso, Scotty Bien, entonces ya tenemos todo ahí arriba. Ahora, lo que quiero es que quiero agregar un cuadro de entrada dentro del bloque d. Perfecto. Ahora voy a agregar otra caja de entrada dentro del bloque di. Excelente. Bastante contento con eso, para ser honesto. Bien. Excelente. Entonces voy a editar esta grilla. Voy a mirar el espaciado aquí y tonificar eso hacia abajo, así que no me gusta eso, siendo demasiado. Y esto en realidad se ve bastante bien. Entonces ahora voy a borrar esto. Así que ya no necesito eso. Esto está ahí. Esto está ahí. Esto está ahí. Entonces voy a cambiar esto por nombre de pila. Y explico cuál es el nombre y el texto de marcador de posición y la diferencia entre esos son después Pero por ahora, solo me estoy enfocando en el diseño de la misma. Bien, perfecto. Así que ahora tenemos el formulario prácticamente terminado. Ahora, en regar usando el formulario, lo que voy a hacer es que voy a agregar un poco de relleno, así que voy a agregar tal vez 15 aquí y tal vez 45 aquí, que voy a tomar este bloque de buceo y básicamente hacerlo Vamos a hacerlo de un color diferente Vamos a hacerlo. ¿De verdad vamos a hacer oro otra vez? ¿Por qué no? Hagámoslo de nuevo oro. Perfecto. Vamos a hacer esto blanco. Y vamos a hacer esto blanco. En realidad, no. No lo hagamos. Hagámoslo un oro realmente oscuro. Bien. Eso no se ve tan mal. Solo mantengamos una luz que porque no nos estamos enfocando demasiado en el diseño. Solo quiero mostrarte cómo construir realmente un bloque de formulario y un formulario para tu sitio web. Entonces tenemos que se ve bastante bien, pero lo que me molesta es que el espacio entre estos dos elementos no es lo mismo que estos. Así que eso me molesta de verdad. Entonces lo que quiero hacer es, quiero ir a la grilla. Voy a echar un vistazo a una grilla. Entonces hay 16, hay 16 píxeles entre las dos columnas de aquí, ¿de acuerdo? Ahora bien, podría cambiar eso o puedo cambiar la cantidad de espacio entre esas secciones, lo cual, si haces esto, debería ayudarnos un poco. cosa de estos es que la mejor manera de hacer esto puede ser solo en realidad hacerlo por mí, porque ya hay algunos píxeles ahí. Eso se ve mucho mejor. Entonces ahora voy a agregar otros siete píxeles a este. Ahí vamos perfectos. Ahora todo está en proporción. Excelente. Estoy contento con eso. Impresionante. Ahora bien, en lo que respecta al formateo real, los diferentes elementos dentro del formulario, todo lo que necesitas hacer es asegurarte que cuando estés agregando, digamos, por ejemplo, el primer bloque de nombre, el bloque de apellidos, la dirección de correo electrónico, el mensaje de texto, el cuadro de mensaje, que está aquí, y luego obviamente el optar por los correos electrónicos de marketing. Debes asegurarte de que al hacer clic en el Cog, estos se nombren porque cuando los datos se envían a tu dirección de correo electrónico, debes asegurarte de que están etiquetados porque si no lo están, entonces solo obtendrás la información y no sabrás cuál es, así que no sabrás si es su nombre de pila, si es su apellido, si es su mensaje Por lo que etiquetar estos es súper importante. Entonces el marcador de posición es el texto dentro del cuadro, mientras que el nombre realmente va a venir a través del correo electrónico que se le envía cuando alguien se ponga en contacto con usted. Entonces revisamos este. Este se requiere obviamente porque necesitamos saber su nombre en lo que respecta a éste, Apellidos, sin embargo, ese es nombre, eso es bueno, y eso se requiere, perfecto, dirección de correo electrónico. Bien, eso es bueno. Y el tipo. Así que tenemos cinco tipos diferentes de datos. Primero es llano, que es sólo letras normales. A continuación se encuentra la dirección de correo electrónico. El siguiente es una contraseña. El siguiente es el teléfono, y el siguiente es solo un número. ¿Bien? Entonces, dependiendo del tipo de datos que intentes obtener del usuario o del visitante del sitio web, debes seleccionar el tipo de datos que estás tratando de conseguir la persona ingrese dentro de este elemento. Entonces, por ejemplo, aquí, es correo electrónico, dice correo electrónico en la parte superior, y dice dirección de correo electrónico, que es perfecta. Ahora en lo que respecta al mensaje, vamos a comprobar éste apenas último. Entonces esto todavía decía campo. Entonces no queremos que vea eso. Queremos que vea mensaje requerido. Escribe tu mensaje aquí. Eso me gusta. Ese es el texto del marcador de posición. Excelente. Entonces ahora todo se ve bastante bien, pero ¿por qué este se ha vuelto un poco loco? No entiendo. ¿Por qué esto se está volviendo un poco loco? Vamos a refrescarlo y a ver qué pasa. Bien, así que todo parece estar en orden. Así que en realidad podemos comprobar esto. En realidad podemos verificar este formulario. Y antes de que realmente revisemos el formulario, veamos lo que está sucediendo afuera. Bien. Así forma de nombre. Si quieres redirigir a una URL diferente, puedes poner esto aquí. En lo que respecta a las acciones, esto está en un flujo web predeterminado, y solo tendrías que cambiarlo si quieres vincularlo a un proveedor de correo electrónico como Mailchimp, por ejemplo, o algo así Y que si quieres conectarlo a un proveedor de correo electrónico como chip de correo o una plataforma diferente basada en correo electrónico, consulta sus tutoriales específicos, que tendrán en su sitio web porque cada plataforma es ligeramente diferente. Entonces entramos ahí. Todo se ve bien. Pondremos formulario de mensaje. P. Y entonces sólo vamos a comprobar el back end en la configuración. Bien, todo se ve bien. Todo se ve bien todo se ve bien. Perfecto. Y luego, si hacemos clic en el éxito, esto es lo que va a surgir cuando finalmente se le envíe un formulario exitoso. Entonces, solo queremos cambiar esto porque actualmente se ve real, real, muy malo. Cambia eso. Cambia el texto aquí a blanco. Perfecto. Y entonces qué pasa cuando no tiene éxito. Error. Perfecto. Eso se ve bien. Impresionante. Entonces, cuando realmente probamos esto, entonces entramos ahí. De hecho, vamos a quitarle eso. Perfecto. Ahí vamos. Vamos a probarlo. Bien, entonces Scott Lancaster, scott@gmail.com. Me encantan los cisnes. Bien, opta, envíame un mensaje, y no funciona en modo de vista previa. Pero si esto realmente se publicó, que es lo que haremos ahora, y si lo revisamos en línea, si bajamos por el fondo y lo probamos de verdad, y luego me encanta el signo de exclamación de Burger Un mensaje, éxito. Así que literalmente hemos construido una forma en cuestión de lo que 10 minutos, 15 minutos. Y, ya sabes, no es la forma de peor aspecto del mundo. Obviamente, puedes tomarte más tiempo y buscar inspiración a tu alrededor. Pero ahora sabes exactamente cómo editar un formulario e incluso construir un formulario desde cero. Lo acabamos de hacer nosotros mismos en los últimos diez, 15 minutos. Entonces puedes construir un formulario desde cero, pero recuerda también que las plantillas que te vamos a dar como parte de este curso todas tienen formularios ya arreglados para ti, así que no tienes que construir un formulario desde cero si no quieres. De todos modos, realmente espero que encuentre útil esta lección, y realmente espero que disfrute construyendo formularios en el futuro para su sitio web. Espero verte en la siguiente lección. Nos vemos ahí. 45. Webflow 101: barra de navegación: Bien, entonces digamos, por ejemplo, que querías agregar una barra de navegación a tu sitio web. Ahora, de nuevo, las plantillas que ibas a usar dentro este curso tendrán todas barras de navegación ya integradas en ellas. Pero si quieres crear tu sitio web desde cero, entonces puedes encontrar la barra de navegación justo aquí abajo. Y todo lo que haces es simplemente arrastrar eso hasta la cima. Déjalo ir. Y aquí, Presto, tienes tu barra de navegación Ahora, una vez que tengas tu barra de navegación establecida, ahora solo necesitas darle estilo y agregar tu logo, por ejemplo. Entonces vamos a ir a la cajita de la marca aquí. Y entonces lo que tenemos que hacer es, necesitamos básicamente que esto vuelva a casa. Así que cada vez que se presione esto, no importa en qué página esté, automáticamente nos llevará de vuelta a la página principal, que es lo que queremos, ¿de acuerdo? Entonces, el siguiente paso es comenzar a diseñar la barra de navegación, así que iremos a estilo y daremos clic en la barra de navegación. Bajaremos, y vamos a hacerlo bonito y blanco. Entonces me destaco. Perfecto. Y también, también, quiero agregar un poco de espacio extra y relleno entre la parte superior e inferior. Así que solo quiero mantener la opción y solo agregar alrededor de ocho píxeles de relleno a cada lado, lo que se ve bien. Ahora, quiero poner un logo aquí dentro. Entonces, ¿ cómo hago eso? Bueno, ve al signo más abajo a imagen. Agrega la imagen dentro de la caja. Entonces como puedes ver aquí, la imagen está dentro del cuadro de enlace de marca. Y entonces todo lo que hago ahora es agregar el logo. Ahora bien, en lo que respecta al logotipo de una marca, hay un logo en el que llevo bastante tiempo trabajando de una pequeña compañía que solo estoy construyendo en el lado llamado Amazon, que sí, si has oído hablar de él, entonces enhorabuena. No creo que mucha gente haya oído hablar de nosotros, pero estamos llegando despacio, pero seguramente. Ahora, como puedes ver, este logotipo está algo unido a la parte superior del contenedor por alguna razón. Y para ser honesto, no estoy muy seguro de por qué. Entonces, lo que podemos hacer para arreglar esto es simplemente agregar un poco de relleno para derribar eso. Y el Presto, el logo está ahora en el medio. Ahora todo lo que tenemos que hacer es cambiar el ombligo. Entonces, para este punto, debes saber qué páginas necesitas para tu sitio web. Entonces, por ejemplo, no necesitamos una página de inicio porque el enlace debajo de la imagen en realidad vuelve directamente a la página principal, y siempre nos llevará allí sin importar qué página se ejecute. Así que en realidad no necesitamos un enlace a la página de inicio en nuestra opción de navegación. Entonces tenemos el sobre nosotros. A lo mejor necesitamos un contacto con nosotros. Sí. Y entonces creo que necesitamos servicios. Ahora, quiero agregar un enlace de navegación adicional aquí para los servicios. Pero, ¿cómo lo hago? Bueno, sólo podemos copiar y pegar, el sobre nosotros. Cambia esto a servicios, y ahí tienes. Entonces como puedes ver aquí. Se ve bastante bien. Tenemos el logo, que nos lleva de vuelta a la página principal. También tenemos al sobre nosotros, los servicios, el contacto con nosotros. Ahora por el momento, no se ve mal, pero tampoco se ve muy bien, ¿verdad? Entonces, ¿qué podemos hacer para que estos elementos cobren vida un poco? Bueno, lo que podríamos hacer es que podríamos reducir un poco el color aquí a tal vez esto. Y entonces podemos simplemente copiar esto para cada uno de los elementos. Y este es el mismo enfoque que hace Apple. Con ese sitio web, y me encanta la forma en que lo hacen también. ¿Bien? Entonces tenemos las tres opciones. Ahora, a lo mejor queremos agregar un poco de espacio entre ellos, tal vez 25, 25, también. Perfecto, tiene un poco más de espacio. Y luego, cuando vuelvas el cursor, quiero que se vuelvan mucho más oscuras. Ahí vamos. Me veo mucho mejor. Y también presionamos seleccionados también. Cuando se selecciona, cuando se presiona. También debemos ir a esta opción. Perfecto. Entonces puedes ver aquí cómo en realidad se está volviendo un gris más oscuro cuando pasamos el cursor por encima y también cuando lo presionamos Entonces todo lo que tenemos que hacer es hacer exactamente lo mismo para cada una de estas otras opciones. Impresionante. Y entonces todo lo que tenemos que hacer es volver a bajar hasta aquí y seleccionar transiciones. Todas las propiedades. Alrededor de 425 debería estar bien. Inmuebles 425. Solo asegúrate de que todos sean iguales solo para que se vea todo agradable y consistente, lo cual es genial. Impresionante. Y ahora puedes ver que se ve súper limpio y súper profesional. Entonces lo tienen. Sabes cómo hacer una barra de navegación realmente simple en tu sitio web con un mínimo de alboroto Recuerda, dentro de las plantillas que ofrecemos dentro del curso, todas tienen barras de navegación ya incorporadas. No tienes que hacer todo este trabajo, pero solo quiero asegurarme de que tengas toda la capacidad de crear todo dentro de tu sitio web desde cero si acaso quieres. Espero que encuentre útil esta lección, y los veré en la siguiente. 46. Webflow 101: símbolos: Bien, entonces, ¿cómo puedes crear símbolos para ahorrarte mucho tiempo a la hora de construir tu sitio web? Bueno, déjame mostrarte cómo. Entonces este pequeño símbolo de aquí, perdón por el juego de palabras, es esencialmente lo que nos gusta llamar símbolos en el flujo web Entonces puedes llamarlos componentes, o puedes llamarlos símbolos. Me gusta llamarlos símbolos porque puedes usarlo para repetir ciertos elementos de tu sitio web a lo largo de la totalidad de tu sitio web con un mínimo de alboroto Y lo mejor es, cuando creas un símbolo, así, y en última instancia creas este duplicado. Entonces cuando cambias algo en este elemento en particular, lo cambia en todo el sitio web. Ahora bien, esto puede ser súper útil porque, por ejemplo, veamos que queremos crear esto como símbolo. Entonces vamos a esa sección, simplemente hacemos clic en ella, creamos esta sección. Esta es nuestra sección de información. Perfecto. Entonces ahora tenemos un nuevo símbolo aquí. Entonces digamos, por ejemplo, queremos agregar uno de estos más abajo en la página, ¿de acuerdo? Entonces lo tomamos, lo copiamos, lo pegamos. Ahí vamos. Entonces ahora tenemos dos de cada cuatro secciones en la parte inferior de la página. Ahora bien, si cambio esto aquí abajo, y tienes que hacer clic en dos símbolos para cambiarlos realmente también, entonces vas a hacer clic en esto, y luego realmente te permite cambiarlo. Vas a decir que lo mismo Scott es feo, es broma, ¿entonces adivina qué? Cuando vas al fondo, lo cambia automáticamente. Ahora bien, esto puede ser muy útil para cosas como formularios si quieres tener el mismo formulario en la parte inferior de cada página, o tal vez quieres agregar reseñas, y quieres actualizar solo una sola caja sin actualizar cada reseña en todo el sitio web y quieres reseñas en cada página. Puede ser súper súper útil. Así que usa símbolos, siempre que quieras ahorrar tiempo, úsalo para tu barra NaF, úsalo para pies , y podrás tener múltiples símbolos, prácticamente tantos como quieras para ahorrarte tanto tiempo como necesites De todos modos, realmente espero que este pequeño consejo te resulte útil. Y espero verte en la siguiente lección. Nos vemos pronto. 47. Webflow 101: cajas de luz: Bien, entonces, ¿qué es una caja de luz y cómo la puedes usar? Bueno, en realidad uso bastante lightboxes en mi sitio web, donde básicamente tengo un pequeño botón creado por un enlace de lightbox, que luego en última instancia se puede ver se abre para mostrar algún tipo de video o imagen Entonces lo uso aquí, pero también lo uso un poco más abajo aquí para que cuando alguien quiera ver testimonios de video de clientes, simplemente haga clic en este enlace y automáticamente aparezca con el video. Ahora bien, esta es una forma muy sencilla tener videos e imágenes, lo que sea relevante para tu marca en particular, aparecen cuando alguien hace clic en un enlace, y es una forma realmente sencilla de hacerlo. Y te voy a mostrar cómo usar un enlace de Lightbox en este video Bien, entonces estamos de vuelta en nuestro pequeño sitio web experimental, donde no nos molesta realmente lo que pasa si algo se rompe, y realmente no quiero jugar demasiado con sitio web de mi agencia Brandon porque he estado refinando ese sitio web durante los últimos diez años, y no quiero romper nada Así que L et's se sumergen y vemos cómo podemos usar en última instancia esta función de enlace Lightbox para finalmente obtener, ya sabes, una experiencia realmente agradable para nuestro usuario cuando visitan nuestro sitio web Entonces, la función lightbox está justo aquí. Entonces vamos a agregar esto al contenedor. Y por alguna razón, no quiere entrar ahí. Entonces lo que voy a hacer es, sólo lo voy a dejar caer aquí. Y entonces lo que puedo hacer es simplemente copiar. Entonces, cuando estás haciendo esto, automáticamente pone una imagen dentro del enlace de Lightbox Entonces lo que voy a hacer es, no quiero la imagen real solo voy a borrar la imagen y simplemente tomar la caja de luz Ling, así voy a copiar y perforar eso Entonces voy a saltar a aquí. Nuevamente, recuerda que tienes que hacer doble clic para entrar en símbolos, los cuales mencionamos en la lección anterior. Haga doble clic. Ahora estamos dentro. Se puede ver que esta sección está resaltada. Entonces quiero eliminar este botón, y quiero agregar un enlace de lightbox Perfecto. Ahí vas. Así que ahora hemos agregado el enlace de la caja de luz a esta sección en particular Ahora bien, no quiero que el enlace de la caja de luz esté debajo. Quiero que esté a un lado, ¿de acuerdo? Entonces veamos cómo podemos hacer eso. Entonces solo lo copiaría y pegaría de nuevo. El botón está dentro del bloque d. Entonces si presiono pegar aquí, aquí presione hacer, va a un lado. Ahora, quiero que este enlace de lightbox se vea como un botón Entonces, ¿cómo hacemos eso? Bueno, una forma en la que puedes pensar que puedes hacerlo es simplemente agregando un botón. Sin embargo, no se puede usar ningún elemento que se vincule o tenga un enlace asociado con él dentro del enlace de Lightbox porque eso sería confuso para la computadora y para el flujo web como plataforma Básicamente les estás diciendo que hagan dos cosas muy diferentes con el mismo elemento, que simplemente no va a funcionar. Entonces no podemos agregar un botón. Entonces, ¿cómo podemos hacerlo? Bueno, bueno, si pensamos el enlace de Lightbox un poco como el bloque de enlaces, y si realmente has seguido la lección de bloque de enlaces un poco antes en este curso, entonces sabrás exactamente lo que estamos a punto de hacer Entonces lo que podemos hacer es, aunque no podemos poner un botón ahí, podemos poner texto ahí, así que vamos a agregar algo de texto, lo cual es genial. Ahora bien, no te preocupes de que esto quede subrayado en este momento. Todo eso va a cambiar en poco tiempo. Ver reseñas. Bien, tan perfecto. Entonces tenemos el texto. Vamos a bajar aquí, lo que actualmente está subrayado. Recuerda la lección de tipografía. Si no lo has comprobado, compruébalo ahora. Eliminaremos esto, y luego eliminaremos el enlace con el que está asociado. Entonces, para quitarle esa línea, lo que vamos a hacer es primero y ante todo, cambiar el color del texto. Y entonces lo que vamos a hacer es, vamos a ir realmente al enlace de Lightbox, y vamos a quitar la línea debajo, así Entonces ahora tenemos el texto dentro del enlace de Lightbox para que cada vez que se presione, vaya a aparecer un video Ahora, ¿cómo agregamos el video? Entonces, simplemente simplemente seleccionamos el enlace de Lightbox, vamos a ajustes Y lo que básicamente verás es algo llamado media dentro de la configuración de enlaces de Lightbox Ahora, todo lo que necesitas hacer aquí es agregar una imagen o un video. Ahora al agregar el video, solo subes tu video a vimeo, y luego básicamente agregas el enlace en esta sección en particular, que mostrará el video cuando todo aparezca. O simplemente puedes agregar imágenes. Ahora bien, la imagen que está actualmente en su lugar es este pequeño marcador de posición, pero no queremos que eso suceda Entonces básicamente vamos a reemplazar eso con esta imagen de este fino caballero de aquí. Entonces ahora cuando volvamos. Y por ejemplo, también puedes agregar más medios. Entonces podemos agregar esta imagen. Y luego podríamos agregar otra imagen. Para que puedas agregar tantas imágenes como quieras. Ahora, una cosa para recordar es que no puedes agregar imágenes y videos, y tampoco puedes agregar dos videos. Bien, básicamente tendrías que editar esos dos videos juntos para que sea un solo video. Bien, entonces ya tenemos tres imágenes en juego. Entonces, si hacemos clic fuera de eso, entonces esto debería estar todo configurado. Entonces vayamos a esta sección, haga clic en esta. Y efectivamente, aparecen tres imágenes. Ahora, se puede utilizar esta función en particular para muchas cosas diferentes, y es sólo una muy simple, limpia eran para ocultar todo. Ahora bien, una cosa que podrías hacer, por ejemplo, es si quisieras que tu cartera estuviera, ya sabes, un poco más limpia y no tan desordenada, entonces lo que podrías hacer es en última instancia agregar un enlace de lightbox a esta sección en la cuadrícula Y luego dentro de esta imagen en particular, en última instancia podrías cambiar esta imagen a ese tipo, de nuevo. Y luego cuando en realidad se haga clic en esto, podrías ir a ajustes y podrías agregar a este tipo Y en realidad puedes agregar videos a los medios así como imágenes al mismo tiempo. Sin embargo, no lo sugeriría simplemente porque puede ser un poco confuso para el usuario. Pero podemos agregar muchas imágenes diferentes y básicamente crear una experiencia mucho más limpia para el usuario. Entonces, por ejemplo, vamos a añadir aquí una imagen más. Ahí vamos. Ahora, por ejemplo, en lugar de nuestra cartera tenga turno, obviamente, podemos, ya sabes, agregar un poco de margen por debajo, así. Ahí vamos. Ahora, por ejemplo, cuando vamos a nuestro portafolio, en lugar de tener cada imagen que tenemos, potencialmente podríamos tener, ya sabes, si tuviéramos más imágenes de este caballero en particular, podríamos tenerla para que cuando alguien haga clic en ella, en realidad exhiba las otras imágenes que son relevantes para esa imagen en particular Entonces todos estos podrían ser proyectos diferentes, y luego al hacer clic en él, entra en más fotos, más piezas de fotografía, ya sabes, más piezas de medios, más ejemplos relacionados con ese proyecto específico. Bien, así que realmente espero que hayas disfrutado esta lección rápida sobre el uso de la función Lightbox, y espero verte en la siguiente lección. Nos vemos pronto. 48. Webflow 101: deslizadores: Bien, entonces, ¿cómo puedes usar los controles deslizantes en el flujo web para finalmente crear una gran experiencia de usuario Bueno, recientemente organizamos función de control deslizante de oreja para la marca de oreja con la que estábamos trabajando, que finalmente muestra todos los diferentes testimonios para esta compañía en particular Entonces, ¿cómo se crea realmente una gran función de control deslizante en su sitio web? Bueno, en realidad es muy sencillo. Entonces, si bajas, agregaremos otra pequeña sección aquí, que llamaremos la sección deslizante. Aunque en realidad no quiere ir aquí por alguna razón. Ahí vas. Por fin llegamos ahí. Entonces ahora tenemos la sección. Vamos a agregar contenedor en su interior. L et's agregan un poco de relleno. Digamos 100, 100 aquí, 30 de cualquier manera de este lado también. Ahí vamos. Entonces, en lo que respecta a agregar un control deslizante, simplemente vamos aquí. Bajamos a la función sliide, que está aquí. Lo metemos en el contenedor, y en realidad ya tenemos el control deslizante prácticamente hecho. ¿Cómo podemos empezar a editarlo? Bueno, lo primero que debes hacer es editar tu slider ahora. Así que baja aquí. Ahora, aquí hay toneladas de opciones diferentes. Ahora bien, lo que me gusta es que en última instancia me gusta arreglar las diapositivas para que sean lo más mínimas posible. Lo que quiero decir con eso es que en realidad no me gusta que estén contados. Ya nadie usa realmente los números dentro de las diapositivas. Es muy anticuada. Esto se ve mucho más limpio y se ve mucho mejor. También puedes seleccionar si es redondeado o cuadrado, para que puedas ver aquí, cómo está cambiando Voy a mantenerlos redondeados. Ahora también puedes agregar una sombra si realmente quieres, que a veces puede verse bastante genial, pero me gusta que sea agradable y nítida y agradable y mínima. También puedes invertir color, así que básicamente puedes hacerlos más oscuros. Obviamente todo depende del tipo de sitio web que tengas. Pero en lo que respecta a este caso en particular, solo voy a mantenerlos blancos y grises solo porque me gusta el minimalismo Ahora, también puedes aumentar el espaciado entre las diapositivas si quieres algo que sea un poco más moderno y futurista, entonces puedes agregarlo a tal vez diez Pero para ello, sólo voy a mantenerlo como cinco. En lo que respecta a agregar diapositivas, puede agregar diapositivas con bastante facilidad. Lo que voy a hacer porque es bastante difícil ver estos botones particulares en una diapositiva, si digamos, por ejemplo, la diapositiva es blanca. Ahora, normalmente lo que me gusta hacer es que me gusta tomar la diapositiva Nav y ponerla fuera del deslizador real. Pero en este caso, el fondo es blanco, sólo voy a mantenerlo como está. De lo contrario, tendría que básicamente cambiar esto para tener una sombra o para invertir colores, por ejemplo, y eso me permitiría luego ponerlo fuera de la caja. Pero en este caso, sólo voy a mantener las cosas como están. Entonces, ahora en realidad tenemos el deslizador. ¿Cómo podemos empezar a usarlo? Entonces, para agregar una diapositiva, todo lo que necesitas hacer es simplemente agregar la diapositiva aquí. Así que ahora tenemos tres diapositivas juntas. Y la forma de llegar a esas diapositivas es simplemente presionando este botón en la configuración. Entonces ahora estamos en la diapositiva dos, ahora son las diapositivas 3, ahora es la diapositiva uno, así que es tan fácil como eso. Entonces, ¿cómo podemos empezar a editar realmente estas diapositivas? Bueno, esta diapositiva es esencialmente como un bloque de DiS. Y lo que quiero decir con un bloque de Di es que puedes hacer prácticamente lo que quieras con él. Entonces podrías, ya sabes, agregar, por ejemplo, una grilla. O podrías hacer algo más simple en realidad. Solo podrías agregar una imagen, por ejemplo, que irá dentro. Elige una imagen. Escojamos el cisne. Bien. Entonces dentro de eso, básicamente podrías agregar algún tipo de imagen. Escoge la imagen aquí, y vamos a centrarla, si tu la imagen. Además, ahí tenemos el cisne. Entonces solo puedes agregar una imagen así si realmente quieres, pero entonces tendrías que básicamente ir a la diapositiva dos. Y dentro de la diapositiva dos, agregarías otra imagen en su interior. De nuevo, sólo tienes que seleccionar la imagen que creas que es mejor para ti. Y entonces puedes simplemente colocarlo como quieras. Ahí vas. Entonces, si realmente jugamos esto ahora, puedes ver que se está desplazando por diferentes imágenes Ahora, puedes usar esto para, tal vez un portafolio, tal vez para productos, o para lo que sea que lo necesites para tu sitio web específico. Pero agregar una diapositiva, es muy, muy simple. Y en definitiva, si quieres hacer algo un poco más, no lo sé. Complejo. Entonces podrías. Déjame simplemente llevarme esta caja de imagen de dentro de aquí. Perfecto. Así que ahora volvemos al inicio. Ahora bien, si quisieras crear algo un poco como la sección testimonial, que te mostré al inicio de esta lección, entonces podríamos hacerlo un poco así Así que sólo voy a crear uno realmente simple. Entonces esto es un dibloque, pero podemos poner un dibloque dentro de un dibloque Entonces, ¿cómo conseguimos que el control deslizante se reproduzca automáticamente por sí solo Así que no tenemos que usar realmente estas flechas, y simplemente sucede automáticamente para el usuario. Bueno, lo que podemos hacer es, podemos tener la duración aquí, que es esencialmente de 5 segundos. Entonces lo que podemos hacer es reproducir diapositivas automáticamente. Tiempo y retraso. A menos que quiera un tiempo y un retraso, yo sugeriría poner cero. Entonces podemos eliminar estos iconos, pero depende completamente de ti obviamente lo que quieras. Puedes eliminar esta sección en particular aquí con solo hacer clic en esta. También puedes hacer clic en la flecha izquierda y ocultarla así, así que está mucho más limpia. Y luego cuando realmente lo jugamos, se puede ver aquí abajo que los elementos cambiarán por sí mismos después de alrededor de 5 segundos. Ahí vas. Después de 5 segundos, pasa automáticamente a la siguiente diapositiva. Ahora que ya está hecho, podemos comenzar a agregar reseñas. Entonces, ¿cómo hacemos eso? Bueno, por el momento, el elemento real en sí es gris. Por lo que tiene un fondo gris. Ahora, no queremos eso. Queremos que sea completamente transparente. Lo que vamos a hacer después es porque en realidad no podemos ver estos elementos abajo ahora, lo que vamos a hacer es que vamos a hacer ajustes agregar una sombra, y tal vez invertir colores en realidad. Ahí vamos. Eso en realidad se ve mucho mejor. Ahora lo que vamos a hacer ahora es que realmente vamos a empezar a agregar las reseñas, así podemos agregar las reseñas simplemente agregando una cuadrícula, que está aquí. Entonces vamos a eliminar esta sección inferior porque no necesitamos demasiadas secciones en la parte inferior. Sólo queremos dos. Y luego dentro de cada uno de estos, vamos a agregar un bloque div. Entonces vamos a agregar un bloque de Di aquí. Aquí vamos a agregar otro dibloque. Ahora, un pequeño truco que te voy a mostrar es muy parecido a los trucos que te he estado enseñando en lecciones anteriores de copiar y perforar di bloques, no necesitas di bloques en estas dos secciones. Necesitas diseñar un dibloque, y luego cuando hagas esto, entonces puedes multiplicarlo a lo largo de la totalidad del control deslizante Entonces, por ejemplo, aquí, vamos a simplemente agregar un encabezado realmente simple. Para el nombre de la persona, párrafo inferior. Vamos a agregar algún tipo de imagen, que va a necesitar entrar en otro bloque de DiS. Entonces agregaremos otra imagen, que debería estar aquí. Ahí vamos. Perfecto. Entonces ahora tenemos nuestro encabezado, que es el nombre de la persona. Tenemos su opinión. Faldas. Por supuesto Webflow no lo es. Malo en absoluto. Logré pagarle a mi lechero esta semana. Buenas noticias. Ahí vamos, y luego sólo tenemos que revisar esa ortografía. Ahora bien, para esto, lo que podemos hacer es que en realidad podemos agregar una reseña de cinco estrellas, por ejemplo. Entonces vamos a Google, reseñas de Five Star, vamos a imágenes. Y aquí, lo que podemos ver son básicamente cinco estrellas. Ahora bien, esto no se ve muy bien. De hecho, este me gusta un poco más. Este es un PNG, así que vamos a usar este. Así que guarda esta imagen. Entonces vamos a ir a guardar eso en el escritorio. Obviamente, puedes crear el tuyo propio si realmente quieres , elige imagen, resalta. Y entonces eso debería hacer que las cinco estrellas salgan muy bien en el buscador. Ahora puedes ver aquí en realidad no puedes verlos. Ahora la razón que es es porque la imagen es demasiado grande. Entonces lo que podemos hacer es hacerlo más pequeño, genial. Eso es bueno. Y entonces lo que podemos hacer es porque básicamente esta imagen es un cuadrado, que en realidad no me gusta mucho. Lo que creo que deberíamos hacer es en cambio, y puedes hacer esto un poco más profesionalmente, pero solo te estoy mostrando por rapidez es solo Vamos a darme cuatro estrellas Ahí vamos. En lugar de usar esta versión cuadrada grande, básicamente voy a cambiarla con la captura de pantalla, que básicamente es solo formar agregar un poco mejor. Y como si no lo supieras, esto es ahora. Tal vez sea ser un poco pequeño, solo hecho un poco más grande. Ahí vas. Entonces ahora tenemos la revisión. Ahora bien, ¿cómo hacemos que se vea un poco mejor? Bueno, ¿tenemos el diblock Podemos darle un poco de relleno, creo, sólo para que se vea un poquito más cuando vayamos. Y entonces lo que podemos hacer es también, tal vez podamos curvar un poco las esquinas. Podemos añadir un poco de sombra, sacar mi cabeza por el camino. Afuera. Entonces ahora tengo un poco de sombra ahí ahora, por alguna razón, las sombras se cortan en la parte superior e inferior del deslizador. Y la razón de eso es porque básicamente se superpone con la función de diapositiva real. Entonces, lo que tenemos que hacer es agregar un poco de relleno a la parte superior y a los lados de esto. Yo solo quiero hacer 15 solo para ser amable y darle un buen número. 15, 15. Y todo lo que está haciendo es, es simplemente darle espacio a la sombra real para respirar, ¿verdad? Sé que esta es una sombra realmente simple. Vamos a verlo de David. Ahí vamos. Entonces David Copperfield. Ahí vamos. David C. Nuevamente, lo que mencioné antes es que podemos simplemente duplicar estos y simplemente crear tantos como nos guste para ser completamente provamente honestos Entonces podemos incluso duplicar la diapositiva real si no queremos rehacer las cosas una y otra vez Entonces esto es de Parla H. Digamos literalmente exactamente lo mismo porque obviamente el curso de webflow es fantástico, obviamente, aunque ella no estaría aquí Vayamos a aquí. Vamos a pasar a la siguiente diapositiva, y esta diapositiva está en blanco. Así que básicamente necesitamos reconstruir todo desde cero. Ahora, realmente no quiero hacer eso, verdad? Entonces, simplemente eliminemos eso. Vamos a esta diapositiva, solo presiona copiar, y luego vamos a enmascarar y pegar. Así que ahora lo que tenemos son múltiples reseñas, que podemos editar y cambiar después de haber diseñado la primera caja. Entonces, después de que estamos diseñando esta primera caja, literalmente no tenemos que hacer más trabajo. Todo lo que tenemos que hacer es copiar y pegar las demás reseñas ahí dentro, agregar la calificación de estrellas relevante que hemos recibido por nuestro producto o servicios, por ejemplo, y luego solo puedes administrarlas súper fácilmente. Si tienes alguna duda con respecto a estos elementos en particular, sé que es uno de los elementos más complicados dentro de Webflow, pero para ser honesto, es bastante fácil y bastante directo Entonces, si necesitas algún apoyo extra, comunícate y avísame, pero eso debería ser prácticamente todo. Entonces te veo en la siguiente lección. Ver eso. 49. Webflow 101: pestañas: Bien, entonces, ¿qué es una pestaña y cómo puedes usarlas para crear hermosas funciones en tu sitio web? Bueno, en realidad usamos la función de pestañas para hacer muchas cosas en el sitio web de mi Brand Agency. Entonces, por ejemplo, organizaremos entradas de blog de una manera realmente simple y fácil de entender. Y lo más importante, creo, es cuando lo usamos en nuestra cartera. Entonces, por ejemplo, si alguien viene a nosotros y la marca R A fitness, por ejemplo, entonces en última instancia pueden venir y ver el tipo de trabajo que hacemos. Si están buscando un nombre de marca, entonces pueden ver todos los diferentes proyectos de nombres de marca en los que hemos trabajado Por otro lado, si son una empresa de comercio electrónico, fitness apower, por ejemplo, y quieren ver, bien, qué tipo de servicios o con qué tipo de servicios o negocios has trabajado en el espacio del comercio, entonces podrían venir aquí, entonces podrían venir aquí, echa un vistazo al comercio electrónico y echa un vistazo a todas las marcas relacionadas con el comercio electrónico con las que hemos trabajado a lo largo de marcas relacionadas con el comercio electrónico con las los años Y lo que esto hace es que simplemente le da al usuario una manera realmente sencilla y fácil de encontrar la información que necesita, ya que cuando un cliente está buscando contratar a una agencia de branding, por ejemplo, buscando ejemplos de trabajo está buscando ejemplos de trabajo que sean relevantes a lo quiere lograr para su marca. Así que es realmente genial. Así que las pestañas son simplemente una gran manera organizar la información en su sitio web para finalmente permitirle darle al usuario lo que necesita de una manera mucho más fácil y sencilla. Bien. Así que ahora estamos de vuelta en nuestro pequeño sitio web de pruebas, que realmente no nos importa romper demasiado porque solo estamos jugando. ¿Cómo se usan realmente las pestañas? Bien, entonces agreguemos una sección aquí entre estos dos elementos. Si me va a dejar. Sí, si en realidad no te permite agregar las secciones o agregar elementos en lugares particulares, o copiarlo y pegarlo o realmente usar esta barra de navegador aquí para finalmente mostrar exactamente donde quieres, y luego va a ser un poco menos complicado. En el contenedor. Entonces lo que vamos a hacer es, vamos a añadir un poco de relleno como de costumbre. Entonces eso es solo tal vez solo sí, 65 parece bueno. Y pondremos 40 a cada lado. Eso también se ve bien. Perfecto. Bien, entonces ahora tenemos eso en su lugar. Vamos a bajar a la función de pestañas aquí y dejarla caer directamente dentro. Ahora lo que puedes ver aquí es que tenemos tres pestañas diferentes. Y si realmente vemos el sitio web, puedes ver que cada una de estas pestañas está actualmente activa, ¿de acuerdo? Entonces, ¿cómo empezamos a usar estas pestañas para hacer algo útil con ellas? Bueno, hagamos algo realmente sencillo, ante todo. Entonces lo que quiero hacer es mostrar los diferentes tipos de imágenes que he tomado como fotógrafo. No soy un fotógrafo real, pero solo estoy usando esto como ejemplo donde puedes seleccionar el tipo de imagen en función de la pestaña que se selecciona. Entonces, por ejemplo, voy a poner animales, gente, edificios. ¿Bien? Entonces, ¿soy fotógrafo y estoy creando esta función de pestaña para mostrar a clientes potenciales? Si quieren a alguien que pueda tomar una foto de una persona, entonces a quien quieran. Y si quieres a alguien que pueda tomar una foto de edificios, aquí tienes algunos ejemplos de edificios de los que he tomado fotos. Y obviamente, los animales, eso es un B dado los animales son increíbles. Entonces, ¿cómo empezamos a hacer que esto se vea bien? Y ¿cómo empezamos a agregar piezas de contenido a los paneles de pestañas? Así que vamos a sumergirnos primero y ante todo. Entonces, ¿cómo podemos empezar a estilizar este menú de pestañas? Entonces, cómo podemos hacerlo es simplemente ir al enlace de la pestaña. Color. Y podemos darle color verde a éste. Por ejemplo, hagamos que ese texto sea blanco también. Así que el negro y el verde no lo están haciendo realmente por mí. Oh, eso es un contraste extremadamente bajo. Hagamos que eso sea un poco mejor. Un poco mejor. Bien. Perfecto. Para la gente, vamos a elegir de nuevo. Ve por el blanco. Pero esta vez, vamos por un bonito rojo. Eso le conviene a esos animales. Bien. Perfecto. Ahora bien, esta no es de lejos la paleta de colores de aspecto más astético, pero básicamente quiero mostrarte y mantener las cosas realmente simples y claras mientras estamos desarrollando Bien. Ahí vas. Perfecto. Solo agreguemos esto a esto. Tú. Perfecto. Bien, ahora tenemos que empezar a agregar realmente estas imágenes dentro de aquí, así que lo que podemos hacer es simplemente agregar un bloque dif. En el pin de la pestaña. Ahora, una panorámica de pestañas es esencialmente solo un bloque de dI dentro de la función de pestañas, así que tenlo en cuenta porque solo va a mantener las cosas súper simples para ti. Ahora, si en realidad seleccionamos un dibloque, entonces podemos comenzar a agregar la imagen o imágenes del pato real que tenemos o cisne Ahí vamos. Perfecto. Y entonces si vamos a la gente, ¿por qué no cambia? Hm. Interesante. Bueno, lo que tenemos que hacer es simplemente tenemos que ir al menú Tabs, hacer clic en ajustes. Y cuando vayamos a ajustes, puedes ver esta pequeña característica aquí. Y cuando hacemos clic en la Tablados, esto significa que está seleccionada la Tablados, por lo que podemos empezar a, nuevamente, agregar nuestro dibloque Agrega nuestra imagen, y luego podemos agregar una foto de una persona. ¿Esa es una persona? Perfecto. Y luego simplemente hacemos exactamente lo mismo para la sección de construcción agregar Dave Block. Y una vez que empieces a usar estos elementos, va a resultar mucho más fácil te va a resultar mucho más fácil construir sitios web. Todo viene con la práctica. En realidad, recuerda la primera vez que comencé a construir sitios web y básicamente tenía que ya sabes, aprender webflow dentro de una semana, lo cual, ya sabes, fue definitivamente, ya sabes, una alta presión para el proyecto en el que estaba trabajando porque el cliente realmente quería usar el flujo web Pero después de una semana de enfocarte realmente en aprender los fundamentos, realmente te acostumbras a ello súper rápido Ahora bien, una cosa que estoy seguro que has captado es que básicamente, dependiendo de cuál de estos se seleccione, cambia los botones reales en la parte superior. Ahora, obviamente, no queremos que eso suceda. Entonces lo que voy a hacer es el estilo Tab one. Entonces, cuando en realidad se selecciona, tiene corriente unida a él. Ahora, lo que vamos a hacer es, vamos a ir a esto, Tab dos. Vamos a hacer esto con eso. Ahí vamos. Puedes ponerte súper creativo con, ya sabes, cómo se arreglan estos, y, ya sabes, puedes hacer que aparezcan con diferentes colores, por ejemplo. Pero en última instancia, lo que estás tratando de hacer, si solo quieres asegurarte de que sea consistente en toda la función tab. Entonces el siguiente que vamos a hacer es p, bajar aquí, y podemos ir a esta sección. Ahí vamos. Por lo que esto necesita ser actualizado. Ahí vamos. Y entonces todo lo que tenemos que hacer es el último, que es Tab tres. Entonces por alguna razón, esta es seleccionada, así que nos va a dar un poco de sle, pero pasemos a esta sección aquí Ahí vamos. Así que ahora, cuando realmente lo jugamos, cuando seleccionamos las diferentes opciones, puedes mostrar ciertas imágenes que son relevantes para nuestra pestaña específica que hemos configurado. Y puedes usar esto para prácticamente todo. Puedes usar esto para exhibir proyectos. Puedes elegir esto para escaparate y diferentes productos. Incluso puedes usar esto para exhibir diferentes paquetes, ¿verdad? Podrías tener un paquete core, un paquete pro y un paquete plus. Todos estos incluyen cosas diferentes, y cuando seleccionas ese paquete, última instancia, puede estar mostrando los diferentes tipos de paquetes y lo que se incluye en ese paquete Y cuando llegas un poco más avanzado, incluso puedes empezar a hacer cosas como lo que hicimos para este cliente aquí, donde básicamente tienen los diferentes paquetes tanto en una opción de pago único como en una opción de financiamiento. Esto es literalmente exactamente lo mismo que lo que acabamos de hacer en el sitio web de Test. La única diferencia está dentro del bloque DIV, de la pestaña. Básicamente acabamos de cambiar eso para agregar más información. Entonces no solo estamos agregando una imagen, sino que estamos agregando toda esta información aquí, que obviamente está, ya sabes, en el extremo superior de lo compleja que debería ser o podría ser la pestaña. Pero solo te estoy mostrando el potencial real de usar pestañas de la manera correcta porque es realmente simple y fácil para la persona navegar entre pagos únicos y opciones financieras. Es simplemente una gran herramienta para tener en tu kit de herramientas. En fin, realmente espero que hayas encontrado es menos valioso. Espero verte usar pestañas en tu sitio web porque son súper útiles si sabes utilizarlas correctamente. Por lo que espero verte en la siguiente lección. Nos vemos pronto. 50. Webflow 101: adición de buttons en las redes sociales: Bien, entonces, ¿cómo puedes agregar íconos de redes sociales realmente bonitos en tu sitio web de flujo web? Bueno, en realidad es súper simple. Entonces, si vamos a nuestra página web, que actualmente solo estamos con la que actualmente solo estamos jugando obviamente, lo largo de este curso, ahora, podemos agregar estos botones realmente muy fácilmente Entonces, como siempre, vamos a agregar una sección. Si me deja. Perfecto. Ahora, vamos a simplemente agregarlos en el centro solo para mostrarte cómo agregarlos y cómo hacerlo una manera realmente sencilla, así agregaremos un contenedor. Como de costumbre, no vamos a ser para agregar ningún patrón en este punto porque no nos es realmente útil. Y luego dentro de ese contenedor, agregaremos un bloque dif. Recuerda, la sección es el terreno en el que se asienta la casa, el contenedor es la casa, y el diblock es la habitación Así que recuerda eso cuando estés construyendo tu sitio web, y vas a ser un k Así que ahora tenemos el di block. Ahora, todo lo que tenemos que hacer es si quisiéramos agregar, por ejemplo, no sé, Facebook, Instagram, y Twitter o X, por ejemplo. Vayamos a la grilla en esto. Entonces también podemos usar uno pequeños elementos de cuadrícula adicionales. Bien. Y entonces lo que podemos hacer es que en realidad podemos usar el bloque dF para que estos sean más centrales. Entonces vamos a juntar estos. Entonces la grilla es más central. Y entonces todo lo que tenemos que hacer es agregar bloques de Di dentro de cada una de estas secciones de cuadrícula. Bien, entonces ya tenemos la estructura establecida, así que solo podemos agregar nuestros elementos. Ahora bien, ¿cómo agregamos nuestros elementos? Bueno, hay un par de formas en las que puedes hacerlo. Y para ser honesto, ni siquiera necesitas agregar estos di bloques. Podrías usar el bloque de enlaces real directamente, pero personalmente me gusta agregar bloques de Di solo porque me da un poco más de estructura cuando estoy construyendo mi sitio web. Entonces entonces solo puedo soltar bloques de enlace dentro. Ahora bien, en realidad no es necesario agregar estos bloques de Di. Esto es justo lo que me gusta hacer porque me da un poco más de estructura con el sitio web. Pero una vez que tengas los bloques de dI, todo lo que necesitas hacer es soltar los bloques de enlace dentro. Como pueden ver, en realidad los está empujando hacia afuera, así que solo copiaré y luego lo perforaré en cada uno. Así que ahora nuestro bloque de enlaces está dentro cada bloque de Di dentro de la cuadrícula de tres secciones. Ahora bien, ¿cómo empezamos por nuestros íconos? Bueno, si queremos que se vean así, entonces en última instancia podemos hacer algo en esta web. Entonces, ¿dónde podemos conseguir realmente los íconos para el sitio web? Bueno, hay un par de formas diferentes en las que podemos hacerlo. Entonces, por ejemplo, si queremos que se iluminen así, para que se vean realmente geniales, podemos ir a Google, escribir iconos gratis. Puedes poner un espacio, o si eres perezoso como yo, no necesitas poner un espacio. Vaya a este sitio web, que es flacon.com, y luego pongamos íconos de redes sociales Lo que deberías quedarte es esencialmente todas estas diferentes opciones de iconos para redes sociales, así que queremos Facebook, Instagram, y vamos a hacer TikTok, solo porque ¿por qué no? Entonces lo vamos a descargar , PNG, descarga gratuita. Perfecto. Entonces ahora tenemos todos los íconos que necesitamos. Ahora, para mí, personalmente, voy a necesitar obtener estos y agregarlos a mi escritorio, solo porque así es como funciona mi encantadora computadora. Por alguna razón, esa no está funcionando. Ahora, una cosa para recordar, cuando en realidad estás seleccionando los íconos para tu sitio web es asegurarte de que todos sean consistentes, porque si no son consistentes, digamos, por ejemplo, si tuvieras dos circulares y un cuadrado, no te van a quedar muy bien. Si miras el sitio web de Nike, todos son muy similares, y todos están exactamente en el mismo círculo de tamaño. Entonces, cuando realmente los agreguemos al sitio web, y los vamos a agregar al sitio web ahora, así que agrega la imagen dentro, elige subir. Vamos a elegir Instagram y TikTok. Entonces vamos a agregar todo esto a nuestra barra de activos. Ahí está Facebook ante todo. Entonces podemos simplemente copiar y pegar esto dentro, luego cambiar las imágenes Instagram, y esta, cambiar a TikTok Nos vamos perfectos. Se puede ver que todos son del mismo tamaño. Ahora bien, estos son obviamente demasiado grandes. Entonces, ¿cómo podemos hacerlos más pequeños? Bueno, simplemente simplemente los agregamos. Y puedes ver aquí tenemos 75 75, así que básicamente solo podremos agregar esto aquí, 75, así que todos son exactamente del mismo tamaño. Y luego te vas, ahí tienes tus íconos. Entonces, ¿cómo puedes empezar a vincularlos a tus cuentas de redes sociales? Bueno, es muy fácil. Sólo tienes que ir a tu bloque de enlaces. Haz clic en el Pequeño Cog. Y luego aquí, solo pones la URL a tu plataforma de redes sociales. Entonces, por ejemplo, voy a ir a Instagram, ir a mi perfil, hacer clic en el enlace Little, y solo voy a agregar esto, y efectivamente, si entro y hago clic en este enlace, me va a llevar a mi página de Instagram. Ahora bien, esto se ve bastante bien, pero no se ve tan bien como la versión de Nike. Ahora, obviamente puedes hacerlo blanco o gris o como quieras. Pero, ¿cómo se obtiene este pequeño y agradable efecto hover que cuando uno está resaltado, simplemente salta hacia fuera Bueno, en realidad es muy simple, y en realidad hemos cubierto exactamente este mismo método en lecciones anteriores si aún no lo has aprendido. Entonces, ¿cómo podemos hacerlo? Bueno, lo mejor que se puede hacer es ir al bloque DIFF, bajar a la opacidad, justo aquí, y escribir algo así como el 50% Así que eso nos da un aspecto y una sensación agradables, más verdes. Así que vamos a hacer esto también. Bloque diff, 50%. Y luego por último pero no menos importante TikTok, 50%. Bien. Entonces ahora si lo jugamos y el cursor sobre él, todavía no se enciende. Entonces, ¿cómo conseguimos que se encienda? ¿De verdad simple? Ir al bloque div, ir a flotar, bajar, a pacity, y darle la vuelta hacia arriba. Acelerador completo. Haz lo mismo aquí. Pase el cursor. Ir a capacidad, 100%. Impresionante. Estamos haciendo tanto progreso. Pasa el cursor, 50%, y luego nos vamos. Todos están enlazando muy bien. Ahora bien, obviamente, si has visto alguna de las lecciones anteriores de este curso, que deberías tener. Sabrás que si agregas un poco de transición, va a verse 1 millón de veces mejor. Ahora, solo un pequeño experimento, veamos los tres diferentes niveles de transición que puedes hacer en cuanto a velocidad o suavidad. Entonces esto es como, ya sabes, 950 es muy, muy, muy alto. Pero miren estos. Entonces, TikTok literalmente no tiene configuración de capacidad de transición, por lo que literalmente debería ir Negro, gris. Gris negro, muy, muy agudo. Negro, gris. Negro, gris, negro, gris. Facebook, sin embargo, tiene 500 establecidos como la suavidad de la capacidad cuando finalmente estás tratando de cambiarlo. Entonces se ve bastante bien, ¿verdad? Suave. Ahora, Instagram tiene 950, creo, así que esto va a ser extremadamente lento, pero aun así se ve muy, muy bonito. Entonces, este es un poco más rápido. Este es un poco más lento. Ahora, puedes elegir lo que más te guste personalmente. En realidad no importa. No hay una respuesta correcta o incorrecta. Simplemente se reduce a la preferencia personal. Todo lo que puedo ver es, lo sé por, ya sabes, con solo mirar. Podría ser el ejemplo. Mira aquí. También hay es extremadamente suave. Entonces esto es aproximadamente alrededor de 500, creo, o tal vez 400. Entonces está mucho más cerca la configuración de Facebook que tenemos en estos momentos. El de Instagram es un poco más lento. Es como el doble de velocidad o suavidad. Entonces va a ser un poco lento, pero sí se ve mucho más suave. Así que todo depende de las preferencias personales. Selecciona el que más te convenga. Así que eso prácticamente vincula los botones de agregar redes sociales a la lección de tu sitio web. Entonces espero que lo hayan disfrutado, y espero verte en la siguiente. Nos vemos. 51. Webflow 101: clases: Bien, entonces, ¿qué son las clases? Bueno, las clases son una herramienta realmente útil dentro del flujo web para ayudar a hacer tu vida mucho más fácil. Entonces déjame mostrarte cómo funcionan. Ahora, si agregamos un contenedor aquí, y luego agregamos un par de botones, y lo que puedes ver es todos esos botones son iguales. Y vamos a esparcirlos un poco solo para darles un poco de espacio, y ahí tienes. Entonces cada uno de estos botones por el momento, no tienen clases asignadas a ellos. ¿Cómo podemos cambiar eso? Empecemos a diseñar este botón en particular. Así que vamos a escribir boleto de oro. En esta, vamos a escribir Golden Dog. Y en esta, vamos a teclear Gato dorado. No tengo ni idea de por qué estoy usando estas palabras, pero solo tengan paciencia conmigo. Eso no es importante. Pero lo siguiente que estoy a punto compartir con ustedes, eso es muy importante. Entonces, si editamos este botón en particular y lo hacemos dorado, por ejemplo, entonces básicamente verás que no afecta de ninguna manera forma ni forma a los demás elementos dentro de esa sección. Entonces aunque el botón dorado del boleto es dorado, Perro Dorado y Gato dorado no lo son. Entonces, ¿cómo podemos cambiar eso? Lo que podemos hacer es tomar el botón, y podemos agregarle una clase. Por el momento, esta edición está clasificado como el botón cinco. Lo que vamos a hacer es que vamos a renombrar esta clase. Entonces pongamos botón dorado. Ahora, por el momento, a este botón se le llama el botón dorado, pero este es solo botón frío, y no tiene nada unido a él. Entonces, ¿cómo podemos hacer que este botón sea dorado como éste? Bueno, hay dos maneras. Una es que copiamos y pegamos este código, y lo agregamos. Sin embargo, eso es un poco demasiado largo para mí. Entonces hagámoslo de la manera más inteligente. Entramos en clase, y tomamos la clase existente que se adjunta a este botón, y la aplicamos a este botón, así. Y puedes hacerlo con cualquier elemento que desees, incluida la sección. Entonces, por ejemplo, para esta sección en particular, actualmente está conectada al relleno, y esta es la clase que tiene esas características asignadas a ella. Pero, ¿y si agregamos dorado? ¿El fondo se vuelve dorado? Entonces, básicamente, lo que puedes hacer es usar las clases para hacerte la vida mucho más fácil. Si quieres que todos tus botones sean exactamente iguales. Entonces, por ejemplo, si ahora empezamos a editar el relleno, sobre este botón en particular. También va a afectar a todos los demás botones con esa clase en particular. Pero digamos, por ejemplo, si no queremos editar cada botón para que sea exactamente el mismo. Ahora bien, no sé por qué no harías eso, pero digamos, por ejemplo, si tuviéramos otra sección más abajo, y los botones aquí eran un poco diferentes. Entonces agreguemos un color de fondo como este, y agreguemos el blanco. Ahora bien, estas secciones siguen conectadas a través de la clase sección cinco. Pero este de arriba tiene una clase diferente, que es blanca. Esta no tiene esa clase adicional. Entonces, si cambiamos el fondo a esta clase en particular como blanco, entonces se va a poner blanco y va a quedarse ahí sin afectar a esta clase en particular. Entonces, en última instancia, si agregas una clase adicional, entonces lo que sea que agregues y lo que cambies en esta clase en particular, va a sobrescribir lo que se hace en la clase estándar Ahora, digamos, por ejemplo, si cambiamos esto a oro. Entonces si se trata de un fondo dorado, y apenas se pueden ver los botones. Ahora bien, si cambiamos estos botones, a Negro, por ejemplo, eso va a cambiar todos los botones que tienen esta clase unida a él. Entonces, ¿cómo podemos cambiar eso? Bueno, podríamos, por ejemplo, hacer un botón completamente nuevo. A mí me gusta este botón. Me gusta el hecho de que sea de buen tamaño, el relleno es bonito, el texto es bonito. Entonces, ¿cómo podemos simplemente cambiar el color de fondo sin, estropeando completamente el resto de los botones que son geniales sobre un fondo blanco Bueno, en realidad es muy fácil. Entonces simplemente agregaríamos clase adicional para sobrescribir el botón oro Básicamente, esta clase aquí sigue siendo muy activa, pero esta clase sobrescribe a esta clase Entonces lo que haríamos es simplemente agregar negro aquí arriba, cambiar esto a negro. Y como puedes ver aquí, esa clase en particular ahora está sobrescribiendo la clase anterior Y puedes usar esto para cualquier elemento en Webflow. Puedes usarlo para iconos para que puedas obtener la misma alimentación en cada clase. Se puede utilizar para las revisiones. Puedes usarlo para texto para que todos tus titulares sean exactamente del mismo tamaño. Se puede utilizar en todas partes. Entonces ojalá, este aguijón te resulte útil, y espero verte con la siguiente. Nos vemos. 52. Webflow 101: fondos: Así fondos. ¿Qué son y por qué son importantes? ¿Y cómo puedes realmente cambiarlos? En realidad es muy simple. Ahora hay dos formas diferentes de usar fondos. Ahora la primera forma es cambiar el fondo de una sección en particular. Entonces, obviamente, podemos seleccionar esta sección, bajar a fondos, entonces básicamente podemos cambiar el color o podemos hacer una serie de otras cosas, así que en realidad podríamos agregar una imagen como fondo, así, o potencialmente podríamos agregar un degradado, que se hace así. O podríamos agregar un degradado circular, que básicamente es exactamente lo mismo que la opción de degradado, pero simplemente obviamente te da el color más oscuro o el color alternativo alrededor del exterior. O por último, solo puedes agregar un color normal. Ahora bien, la razón por la que puedes agregar estas cosas diferentes es porque en realidad puedes agregarlas una encima de la otra. Entonces, por ejemplo, actualmente tenemos esto como fondo, pero también podríamos agregar la gradación del oído como fondo también. Así que vamos a cambiar esto un poco más oscuro. Y entonces podríamos en última instancia cambiar el orden. Entonces básicamente el elemento que está en la parte superior va a ser el que sea el más destacado de la página. Y podríamos agregar esto y básicamente configurarlo al 100%, y no verías nada, o cuanto menos opacidad tenga, más fácilmente podrá ver el elemento detrás de él Ahora bien, esto se puede utilizar de numerosas formas diferentes. Entonces lo que me gusta hacer es que si tengo esto es como una sección de sobrecapa, agregaría algo así como una imagen, que puedes hacer aquí, y podemos agregar esta imagen aquí, que no se ve tan mal Ahora bien, esta sección aquí es esencialmente la razón por la que quieres que se posicione. Entonces, si quieres que se posicione más alto, entonces básicamente seleccionarías esta opción, si la quieres más baja, aquí, a la izquierda, aquí, a la derecha aquí, y luego en el centro ahí. Ahora, lo que puedes hacer es que también puedes seleccionar contener portada o personalizada. Personalizado significa que en realidad tienes que, ya sabes, seleccionar manualmente qué tan alto es, qué tan pequeño es y todas esas cosas. Tiendo a simplemente ir con CVs, solo hace las cosas súper fáciles Y luego puedes seleccionar qué posición deseas. Y ese de hecho se ve bastante bien. Ahora, por ejemplo, lo que voy a hacer aquí tal como te muestra es que usaremos la opción de contener, que básicamente solo se asegura de que la imagen completa se use como fondo tantas veces sea necesario para llenar realmente el espacio. Ahora bien, lo que puedes hacer aquí es porque esto solo se ve un poco raro, es que podrías agregar esta superposición encima de la imagen, solo hacer que esta sección destaque más, lo que en última instancia, como puedes ver, solo ayuda al elemento a destacar un poco más y solo ayuda a que se vuelva más prominente. Otra cosa que puedes hacer con respecto a tu sección es que eliminemos todos estos de aquí y solo consigamos que esto esté de acuerdo como lo era antes. Entonces otra cosa que puedes hacer es que en realidad puedes cambiar el fondo de todo el cuerpo. Entonces, por ejemplo, si quisieras cambiar esto para que fuera completamente rojo, entonces podrías hacerlo. Ahora bien, no sé por qué harías eso, y sería bastante raro que lo hicieras. Entonces cambiemos eso de nuevo porque creo que el hecho que todo esto sea rojo me está dando ansiedad. Así que vamos a retroceder esto. A blanco. Ahora, en realidad no necesitas poner nada como color de fondo para tu cuerpo, pero también puedes agregar imágenes. Entonces, por ejemplo, si quisiéramos agregar esto como la imagen general, entonces, esto no se ve lo mejor, y en realidad es extremadamente confuso, pero en realidad puedes hacerlo de esa manera. Se puede utilizar. Y esto es solo el poder del flujo web. Te ayuda a crear diseños realmente creativos muy fácilmente sin el estrés y la codificación. Te ayuda a hacer todo súper fácil. Ahora así es en última instancia como puedes usar los fondos. Es realmente simple, muy fácil, y puedes ser realmente creativo con el tipo de fondos que usas. Por ejemplo, si vamos al sitio web de mi agencia de marca clementinhous.com, puedes ver estos círculos que tienen una sombra detrás de ellos, lo cual es súper sutil, pero simplemente se ve muy bien en el sitio web, y es solo una pequeña característica muy agradable solo para que el fondo destaque un poco para que el fondo destaque También se utilizó un enfoque muy similar para este sitio web para un cliente, donde básicamente estamos estos pequeños patrones, pequeños círculos y Xs, solo para que no sea súper aburrido y mundano Así que siéntete libre de dejar volar tu imaginación y obviamente, no descartes el fondo por ser solo blanco, puedes agregar pequeños elementos para que se vea más interesante. En fin, espero que esta lección le resulte útil, y espero verle en la siguiente. Nos vemos pronto. 53. Webflow 101: configuración de pantalla y capacidad de respuesta: Bien, entonces muestra la configuración y haz que tu sitio web sea receptivo en todos los dispositivos. ¿Cómo podemos hacer esto? Bueno, en realidad es muy simple y directo, y la configuración de su pantalla se puede ver aquí en la parte superior de su pantalla. Por lo que actualmente, tenemos cuatro puntos de interrupción diferentes en juego. Tenemos tu punto de ruptura base, tenemos tu tablet, Tenemos móvil horizontal, y tenemos móvil vertical Ahora podemos agregar otros tres puntos de interrupción, uno es el de 12 80 píxeles, lo que en última instancia es bueno para tu Macbook Air y otros dispositivos Apple, y también puedes agregar tu punto de interrupción de 14 a 40 píxeles, y también por último, tu punto de interrupción de 1920 píxeles Ahora bien, ¿por qué es importante tener todos estos diferentes puntos de interrupción Bueno, la razón por la que es importante es que va a ayudar a que tu sitio web sea receptivo en todos los dispositivos. Y ahora te voy a enseñar cómo hacerlo. Si realmente está viendo el sitio web tal como está, puede ver que funciona bien en la tableta, paisaje, el retrato y también en todos los demás puntos de ruptura también. Ahora bien, si realmente empezamos a cambiar el tamaño del sitio web, se puede ver que cambia de manera bastante significativa. Ahora bien, si vuelves a nuestro sitio web de pruebas y solo intentas jugar con esta sección en particular, que hemos construido anteriormente en el curso, entonces podemos ver aquí que actualmente responde en los 1920 píxeles y arriba, pero desafortunadamente se ve muy diferente cuando empezamos a bajar a la sección móvil e incluso al punto base. Entonces, ¿cómo podemos cambiar esto? Bueno, lo que tenemos que hacer es que esencialmente necesitamos comenzar a reconstruirlo como punto base. Ahora bien, el punto de quiebre base en última instancia dicta todo lo que sucede subiendo y todo lo que sucede bajando. Entonces, reconstruyamos esta sección en particular en el punto base, y luego básicamente podemos comenzar a entender cómo funciona la naturaleza receptiva del flujo web. Así que bajemos a construir una nueva sección, o podemos crear exactamente el mismo relleno. Haremos un poco de relleno en el costado ahí. Eso es agregar un contenedor. Perfecto. Ahí vamos. Y entonces podemos empezar a sumar esencialmente. Y recuerde, en realidad estamos construyendo sobre el punto de ruptura principal, el punto de interrupción central, el punto de interrupción base No estamos construyendo sobre esta sección, que no va a afectar a ninguno de los elementos. Porque cuando construyes sobre el punto de interrupción base, entonces estás afectando a todo bajando al móvil y todo subiendo a una pantalla más grande también Mientras que cuando editas algo en el punto de interrupción más alto y también en el punto de interrupción del retrato móvil, no estás editando nada Así que recuerda que el punto de interrupción base cae en cascada hacia abajo y también hacia arriba Pero cuando estás editando al final de los puntos de interrupción, no estás Esto también se aplica si está editando el punto de interrupción del paisaje Si editas aquí, también afecta a este punto de interrupción aquí, así como si editas en el punto de interrupción de la tableta, también afecta a estos dos También sucede al revés también. Entonces, por ejemplo, si digo este punto de interrupción, afecta a este punto de interrupción en este punto Sin embargo, si agregué este punto de interrupción, entonces no edita este, sino que editará a la izquierda Así que ten esto en mente porque va a ser muy importante a medida que empecemos a entender cómo hacer que tu sitio web sea receptivo, y compartiré contigo en esta misma lección el proceso que utilizo para asegurarme que todo mi sitio web sea receptivo en todo momento. Siempre estás diseñando en los puntos de interrupción base. Entonces, por favor, recuerda eso. Ahora bien, si estamos reconstruyendo esto en la sección de punto de interrupción base, entonces lo que podemos hacer es simplemente tomar esta división de héroes Podemos agregar un dibloque a este contenedor. Podemos agregar una grilla. No necesitamos dos. Solo necesitamos uno, para que podamos hacerlo. Entonces podemos tomar esto, agregar un bloque dif a la grilla. la izquierda en esto, que se ve bien hasta el momento. Entonces podemos simplemente agregar otro di block al otro lado y luego volver. A el video de YouTube aquí, y ahí vas. Ahora en este momento, esto actualmente se ve extremadamente squash. Entonces, ¿por qué es eso? Bueno, eso se debe a que el ancho máximo en este elemento en particular se encuentra actualmente en 46%. No queremos ese ancho máximo. Por ejemplo, si empiezo a aumentar eso, entonces empieza a llenar su salida. Entonces, si solo cambio esto a ninguno, entonces esencialmente va a llenar la totalidad de la sección. Pero sí queremos un poco de patrón ahí solo para asegurarnos de que no se acerque demasiado a la imagen. Así que estoy bastante contento con eso. Ahora, puedes ver porque hemos duplicado todo en el punto de ruptura base, solo se activa en el último punto de ruptura dentro del sistema y la naturaleza receptiva del flujo web Entonces básicamente lo que tenemos que hacer es que tenemos que empezar a diseñarlo aquí. ¿Bien? Entonces, si tomamos esto, por ejemplo, podemos empezar a mirar cómo se ve esto. Entonces estoy contento con cómo se ve esto. Estoy contento con cómo se ve esto en este momento. Pero lo que podemos hacer es que podemos empezar a cambiar este botón en particular. Entonces cambiamos esto. Podemos deshacernos de esto para el significado. En realidad no necesitamos esto ahora mismo. Entonces cambiamos esto. Cambiamos el color a oro. Podemos cambiar el acolchado en esto también para que se vea un poco más agradable Nuevamente, solo manteniendo presionada la opción para asegurarme de que los estoy cambiando a ambos al mismo tiempo. También podemos agregar un poco de respiro, y luego podemos comenzar a editar. El elemento lightbox, que es simplemente cambiando eso, cambiando el color Ahí vamos. Entonces una vez estamos contentos con cómo se ve una sección. Entonces podemos empezar a mirar para ver cómo se ve en otros dispositivos. Así que permítanme agregar un fondo de color aquí solo para que sepamos exactamente lo que estamos haciendo. Y vamos a cambiar esto a un bonito color púrpura. Sólo para adaptarse. Ahí vamos. Perfecto. En realidad sé un poco más azul. Perfecto. Entonces ahora tenemos esta sección. Así que vamos a comprobarlo en cada punto de ruptura para ver cómo se ve en una pantalla un poco más grande. Eso todavía se ve bien. Estoy contento con eso. En una pantalla aún más grande, todavía se ve bien. Estoy contento con eso. Llegamos hasta aquí, y esto queda bien en esta sección dos. Entonces ahora bajemos a la tableta. Bien. Aquí es donde las cosas se ponen un poco complicadas. Entonces por el momento, esto es obviamente un poco squash, cierto. Realmente no se ve muy bien, entonces, ¿qué podemos hacer? Bueno, podemos hacer esto un poco más pequeño. Ahora, recuerda que cuando estoy editando aquí, no afecta a nada que suba. Yo sólo afecta bajar. De nuevo, si vas aquí, esto sigue siendo 38. Yo estaba aquí, ya son 30. Ahora, como dije, esto también va a afectar a bajar. Entonces, si lo edito aquí, va a afectar también a las dos opciones móviles. Entonces, si lo edito en tablet, también va a afectar a las dos configuraciones móviles también. Entonces voy a editar esto para que se vea un poco más pequeño, y luego voy a reducir el tamaño. Creo que si los voy a tener uno al lado del otro, necesito hacer esto mucho más pequeño, así que vamos a bajar esto a diez. De hecho, eso realmente no se ve muy bien. A lo mejor debería guardarlo así y ponerlo así. Y entonces solo puedo reducir esto, hacer que se vea un poco más pequeño. Y entonces aquí, puedo centrar esto, así se ve más centrado y hacer esto un poco más pequeño. Y eso debería. Eso se ve mucho mejor, ¿de acuerdo? Vamos a reducir esto un poco. Ahí vamos. Eso se ve mucho mejor. Eso está mucho más alineado. Ahora, tenemos que mirar y ponernos en la tableta, así que veamos ahora cómo se ve en el paisaje. Entonces aquí es donde las cosas empiezan a verse muy, muy estrechas, ¿de acuerdo? Entonces no tenemos mucho espacio. Y si lo piensas bien, cuando en realidad estás sosteniendo tu celular, va a quedar muy porquería, y probablemente no vas a poder ver todos los elementos. Entonces, ¿cómo podemos cambiar esto? Bueno, podemos ir a grid, podemos editar la grilla, y realmente no está funcionando de esta manera, así que intentemos agregar una sección a continuación y hacerlo un poco así. Así que eso en realidad se ve muchísimo mejor. Ahora bien, esto tiene un poco de elemento aquí abajo, así que quizás reduzcamos la cuadrícula para hacer que la fila sea más pequeña para acercarlos más. Y eso se ve diez veces mejor. Eso se ve 100 veces mejor. Y podemos aunque quisiéramos, si queremos acercarnos, jalarlo un poco hacia arriba, lo que va a hacer que parezca aún más compacto. Pero no tenemos que hacer eso. Simplemente puedes guardarlo como está. Pero como pueden ver, porque he editado aquí en el punto de ruptura del paisaje móvil, no afecta a nada que suba. Sigue siendo lo mismo. Por lo tanto, responde en todos los dispositivos siempre que caiga o suba desde el punto de interrupción del núcleo Entonces aquí, lo tenemos muy bien aquí. Entonces veamos ahora cómo se ve en el retrato móvil. Y recuerda que si lo edito aquí, va a caer en cascada en retrato móvil. Entonces ya se ve bien. Ya parece que está muy bien presentado. Entonces, en última instancia, así es como debes mirar el diseño de sitios web que sean receptivos. Primero y ante todo, lo construyes en el punto de ruptura central, el punto de interrupción base, y luego esencialmente editas hacia abajo y luego editas hacia arriba para asegurarte de que cada sección sea perfecta, sin importar en qué dispositivo la estés mirando Entonces espero que esta lección les resulte útil. Si tiene alguna duda, hágamelo saber. Estoy aquí para apoyarlos como pueda, pero espero verlos en la siguiente lección. Nos vemos ahí. 54. Webflow 101: optimización de imágenes y carga lenta: Bien, entonces en lo que respecta a la optimización de la imagen y la carga perezosa, esto es lo que necesitas saber, y es realmente simple. Entonces, por ejemplo, si tienes una imagen que está en tu página de inicio real en la sección hero, y necesitas que se cargue más rápido que cualquier otro elemento en tu sitio web. Entonces, en última instancia, debes asegurarte de que esta imagen en particular esté priorizada porque cuando alguien ve tu sitio web, no quieres estar esperando a que se cargue esta imagen Porque si tienes un sitio web que estás visitando, y luego en última instancia la imagen ni siquiera se carga hasta 3 segundos después, esto no va a quedar bien en lo que respecta al diseño de tu sitio web. Va a reflejar muy mal tu negocio porque si no puedes tener un sitio web que funcione correctamente, entonces ¿cómo se supone que debes atender adecuadamente a tus clientes? Entonces, ¿cómo podemos cambiar eso? Y ¿cómo podemos priorizar las imágenes que cargan en nuestro sitio web Entonces, ¿cargan lo antes posible? Bueno, en realidad hay un par de formas de hacerlo. Entonces, la primera forma es seleccionar en última instancia la imagen misma. Y presiona este pequeño diente, que en última instancia sacará a colación algo muy similar a lo que hay en esta sección aquí, la configuración de la imagen Una vez que hayas hecho clic en el pequeño diente y finalmente tengas acceso a la configuración, hay un par de opciones en lo que respecta a la carga, que puedes ver Ahora, la primera es la carga perezosa. carga perezosa básicamente significa que se carga en el orden en que se establece la página. Entonces no va a priorizar nada. Ahora la siguiente opción es la carga ansiosa. Esto significa que se carga con la página. Entonces esencialmente se va a cargar lo antes posible, y se va a establecer como prioridad. Y luego tenemos auto. Entonces esto esencialmente significa que lo que sea que el navegador sienta es la prioridad más alta, eso se cargará primero, lo que obviamente no queremos hacer porque diferentes navegadores pueden tener diferentes prioridades, así que vamos a seleccionar Eagle load. Ahora bien esto va a asegurar que cuando alguien básicamente visita nuestro sitio web. Esta imagen es empujada al frente de la cola. Se carga primero, que es lo que queremos. Entonces esto va a ser realmente importante para una serie de elementos diferentes. Entonces, por ejemplo, realmente quieres hacer esto también para tu logo. No quieres que tu logo se cargue en última instancia después de todo lo demás en el sitio web. Entonces quieres asegurarte de que asertivo, y es decir al sitio web, escucha, necesito cargar primero porque soy muy importante, y esto es en última instancia lo que la gente va a ver en cuanto llegue a tu sitio web Asegúrate de priorizar tus imágenes, y especialmente las imágenes en tu sección de héroes, que estaremos aprendiendo un poco más a medida que vayamos pasando por el resto de lecciones en esta fase en particular Y cualquier imagen que personalmente sientas que una prioridad para tu sitio web en particular o tu negocio o marca, asegúrate de priorizarlas con carga águila porque primero las va a cargar, y va a darle a tu usuario la mejor experiencia posible en tu sitio web En fin, realmente espero que esta lección haya sido valiosa. Sé que fue corto y dulce, pero solo quería asegurarme de que entendieras la diferencia entre las dos configuraciones de carga para asegurarme que tu sitio web sea lo mejor que pueda ser. Te veré en la siguiente lección. 55. Webflow 101: posicionamiento: En esta lección, vamos a estar enfocándonos en el posicionamiento. Actualmente tenemos estática, relativa, absoluta, fija y pegajosa. ¿Qué significan y cómo los puedes usar? Empecemos con estática. La estática es esencialmente la opción predeterminada dentro de los flujos web. Si agregas algún nuevo elemento o imagen o texto o lo que sea, entonces se le asigna automáticamente estática como su posición. Ahora bien, ¿y si cambiamos a estos dos relativos? ¿Qué significa relative even? Bueno, relativo en realidad es muy similar a la estática, pero ofrece más opciones de posicionamiento. Ahora bien, si elegimos relativo, entonces nos permite cambiar la posición real del elemento relativo a sí mismo. Ahora una cosa en la que pensar es tu índice Z, pero llegaremos a eso un poco más tarde. Ahora la siguiente opción es absoluta. Cuando seleccionas absoluto, puedes verlo aquí, y en realidad lo describe aquí dentro del propio sitio web real, posiciona absolutamente un elemento, relativo a su padre posicionado más cercano o cae al elemento body. Entonces, si miramos esto aquí, la imagen está en realidad dentro de la sección. Entonces la sección es el padre de la imagen. Ahora, por el momento, la sección no tiene ninguna configuración. Por lo que la imagen automáticamente va a estar absolutamente posicionada en relevancia para el cuerpo, que es el padre más cercano. Entonces, ¿cómo podemos mantener la imagen dentro de la sección? Bueno, en realidad es muy sencillo. Todo lo que hacemos es poner el posicionamiento de la sección a relativo. Y aquí Presto, ahora, puedes asegurarte de que la imagen es relevante para la sección porque la sección es el padre más relevante para la imagen, como puedes ver aquí Ahora bien, ¿qué pasa si elegimos fijos? Ahora, fijo en última instancia significa que el elemento es relevante para la ventana del navegador y permanece en su lugar a medida que se desplaza la página Entonces, por ejemplo, elegir fijo y luego tenerlo en la esquina superior izquierda, sin importar a dónde nos desplazemos, ahora se fija a esa esquina superior izquierda. Aquí se puede ver que es relevante para el cuerpo, y esto no se puede cambiar. ¿Cómo puede ser esto bastante útil? Bueno, si elegimos esta Navbar como elemento, y por el momento, simplemente se establece como relativo, que es, solo el estándar para una Navbar, pero si la ponemos a fija, entonces puedes ver aquí que está fijada a la parte superior de la barra de navegación Entonces no importa donde nos desplazemos, siempre estará aquí. Ahora bien, lo que podemos hacer es que podamos repartir esto para que cuando nos desplazemos hacia fuera, la barra de navegación esté siempre en su lugar. Por lo tanto, no se puede perder la barra de navegación, sin importar dónde se desplace en la pantalla. Ahora, esto es extremadamente útil porque cuando estás construyendo una página web, quieres poder ver la barra de NAF mientras te desplazas por la página para finalmente permitir que tu usuario pueda navegar por el sitio web sin tener que desplazarse hasta la parte superior nuevamente para volver a la barra de navegación Entonces esto puede ser realmente útil para nosotros. Ahora hay otra forma en la que puedes usar sticky básicamente, donde Sticky es una especie de enfoque más único para fijar la posición del elemento. Y te voy a mostrar por qué. Ahora, sticky es esencialmente lo mismo que fix, pero tiene un par de configuraciones adicionales que puedes usar, que en última instancia significa que realmente puedes manipular el posicionamiento del elemento sticky para básicamente hacerlo más receptivo y solo tener un poco más de control con respecto a dónde se desplaza hacia abajo, y en dónde se desplaza hacia abajo, última instancia cuando deja de desplazarse. Una cosa a tener en cuenta es el índice Z, porque esto puede ser sumamente útil como herramienta. Entonces cuando tomamos esta gran cantidad de animación y establecemos este relativo, obviamente, antes era estático, lo cual es estándar, pero si lo configuramos como relativo, entonces si básicamente nos desplazamos hacia abajo, la página, se puede ver que la barra de navegación actualmente repasa la animación de lottie así Ahora bien, y si nosotros, por cualquier motivo, quisiéramos que este elemento en particular estuviera a la vanguardia de todo en el sitio web, manera que aunque la barra de navegación se desplazara sobre él, seguiría clasificándose como estar por encima de la barra de navegación solo para hacer interesante la página web Bueno, podemos hacerlo así. La sección del índice Z aquí, esencialmente hace que el elemento numerado más alto, el elemento más destacado. Entonces, por ejemplo, aquí, hemos puesto 99999 para que cuando realmente lo veamos y desplazemos la página web hacia abajo, en realidad pase por encima de la barra de navegación, lo cual es bastante interesante, pero en realidad podemos hacerlo aún más interesante Entonces podemos poner esta imagen en particular como relativa. Podemos poner esta imagen como relativa, esta imagen como relativa, y esta es relativa. Ahora, lo que podemos hacer aquí es que simplemente podemos hacer esto súper alto desde el punto de vista del índice Z, sin importar lo que se desplace sobre estas imágenes, siempre estarán en la cima No se pueden desplazar por encima. Y sólo para mostrarte realmente lo que hace el índice Z. Si nos desplazamos hacia abajo ahora, puedes ver la animación lotty, que tiene un índice Z más alto que la barra de navegación Se pasa por encima de la barra de navegación. Pero puedes ver aquí esta imagen no tiene ninguna configuración de índice Z. Éste sí. Éste sí, éste no. Entonces veamos cómo le afecta. Nos desplazamos por encima. Se puede ver aquí que anula la barra de navegación, y va en la parte superior, que puede verse súper cool Entonces de todos modos, espero que disfrutes esta lección sin posicionamiento, y espero verte en la siguiente lección. Nos vemos pronto. 56. Webflow 101: secciones de héroes: Secciones de héroe. Entonces, ¿cómo se construye la sección de héroe perfecta? Esta sección de héroes es discutiblemente perfecta, pero también puede que nada sea ¿Qué es lo que realmente hace una gran sección de héroes para tu negocio y marca? Bueno, depende del objetivo que estés tratando de lograr. Por ejemplo, si vas a este sitio web de marcas, este sitio web de marcas está tratando de canalizar a individuos, parejas y adolescentes en su embudo de marketing, y el embudo de marketing es específico para sus necesidades y requisitos específicos. Entonces, por ejemplo, si eres un individuo y estás teniendo ataques de pánico, entonces harías clic en este botón, y te llevaría a una página que es específica de los ataques de pánico. Nuevamente, si eras un equipo y en última instancia estás expresando ira y quieres que se ordene, entonces tienes una página que está específicamente relacionada con la ira. Ahora bien, esto es obviamente algo que es diferente para cada marca. En última instancia, la sección de héroes en cada sitio web debería literalmente darte exactamente lo que necesitas saber desde el momento en que aterrizas en la página de inicio. Entonces, por ejemplo, para Clementine House, sitio web de mi Agencia Brannan, le decimos a la gente exactamente lo que hacemos en seis simples palabras, nombrando las ambiciosas startups del mañana Bien. Entonces, literalmente te estamos diciendo que esto es lo que hacemos. Nombramos las ambiciosas startups del mañana. Ahora bien, si vamos a este sitio web de ejemplo, podemos ver que la sección de héroes te dice exactamente qué esperar de este sitio web. Entonces esto es obviamente una influencer del fitness llamada Sandra Leon's. Consigue tus puntuaciones de fitness logradas. Después de obtener una licenciatura en nutrición y entrenamiento físico, comencé a trabajar con personas de todo el mundo y a cambiar sus vidas para siempre. Entonces sabes exactamente lo que estás obteniendo en cuanto aterrizas en esta página de inicio, y sabes exactamente qué esperar. Así que básicamente puedes hacer la suposición, a Esto es para mí o esto no es para mí. Veamos otro ejemplo, que es HubSpot. Entonces HubSpot literalmente te dice exactamente lo que ofrecen. Plataforma de clientes HubSpot. Así que crece mejor con HubSpot. software potente, no superador, conecta sin problemas tus datos, equipos y clientes en una plataforma de clientes que crece con tu negocio Tú exactamente lo que vas a conseguir. Y verás cada marca por ahí que está realmente enfocada en lograr un determinado objetivo y realmente posicionarse de cierta manera, se va a asegurar que haga este principio exacto. Te dice exactamente quiénes son en los primeros 3 segundos de aterrizar en la página principal. Ahora, si estás trabajando en Webflow y quieres construir tu propio diseño y tu propia sección de héroe por ti mismo, entonces eso está absolutamente bien Ahora, obviamente proporcionamos plantillas que puedes usar, y ya tienen secciones de héroe incluidas en ellas. Pero si quieres elegir el tuyo, entonces finalmente puedes ir a la sección de diseño de anuncios. Y básicamente elige un layout, que es muy similar al que te acabo de mostrar. Ahora obviamente, puede que tengas que cambiar un poco el texto y cambiar el color y agregar algunos patrones y agregar un fondo. Pero en última instancia, puedes usar esto para crear una sección de héroes que realmente pueda captar la atención de alguien porque esa es la clave. Necesitas asegurarte de que en los primeros 3 segundos de construir tu sección de héroes, que en última instancia le estés diciendo a la gente, esto es lo que hacemos, así es como te podemos ayudar. Esta va a ser una de las cosas más importantes para asegurarse de que la gente no acuda a tu sitio web, luego se vaya instantáneamente. Necesitan saber exactamente lo que puedes ofrecerles dentro los primeros 3 segundos de aterrizar en tu página de inicio. Esta es la sección de héroes. Esto es exactamente en lo que deberías centrar el 80% de tu atención antes de comenzar a construir el resto de tu sitio web. Asegúrate de que esto sea perfecto. Asegúrate de que las letras y las palabras que uses sean lo más mínimas posible. simple posible y mostrar exactamente lo que puede ofrecer al cliente. Asegúrate de que tenga un llamado a la acción y también asegúrate de que la imagen sea relevante y mostrando lo que puedes ofrecer al cliente potencial o cliente En fin, espero que hayan disfrutado esta lección rápida sobre las secciones de héroes. Espero verte en la siguiente lección. Nos vemos pronto. 57. Webflow 101: CMS y contenido dinámico: Bien, entonces, ¿qué es CMS y contenido dinámico? ¿Y cómo podemos usarlo para ayudarnos a administrar mejor el contenido de nuestro sitio web? Bueno, tu CMS es esencialmente tu sistema de gestión de contenidos. Y te voy a mostrar un ejemplo de uno de mis sitios web y cómo estructuramos nuestro sistema CMS para que sea súper fácil administrar el sitio web. Ahora, como puedes ver aquí, esta es la configuración de CMS, y tenemos múltiples sistemas CMS diferentes en juego. Ahora, uno de ellos son los proyectos. Entonces, dentro del marco del proyecto, tenemos todos los clientes con los que hemos trabajado en los últimos, un par de años, que nuestro equipo actualiza regularmente. Ahora bien, si haces clic en cada proyecto, verás que tenemos ciertas pestañas que deben rellenarse a lo largo de cada proyecto. Entonces, por ejemplo, el nombre del cliente, el slog, que es esencialmente la extensión para la URL También tenemos el nombre de la marca específicamente, la visión del proyecto. Entonces esto es esencialmente, una idea en lo que respecta a lo que hace el negocio real y el mercado en el que se Tenemos el logo, tenemos los servicios entregados a la izquierda, los servicios entregados correctamente. Tenemos el problema que ellos tienen, la solución que les dimos nosotros. El cliente y el nombre y el rol, tenemos un testimonio real del propio cliente, más imágenes relacionadas con el proyecto real, y luego realmente tenemos un enlace al siguiente proyecto en proceso, y luego también un enlace del proyecto para que puedan ver realmente el proyecto cuando hagan clic en él en nuestra página de inicio Ahora para el CMS, en realidad es muy fácil crear un sistema CMS, y todo lo que necesitas hacer es simplemente hacer clic en el pequeño botón aquí para crear una nueva colección. Ahora, cuando creas una nueva colección, lo que sucederá es que en última instancia se te da la opción de agregar diferentes campos. Ahora, por diferentes campos, simplemente me refiero a las diferentes cosas que quieres cambiar en la página principal dentro de tu sitio web. Entonces, por ejemplo, a lo mejor quiero crear una colección, que esté enfocada en torno a los blogs y las noticias que producimos en la página web de Clementine House Entonces, por ejemplo, si entramos en nuestro blog y noticias, simplemente presionarías agregar campo, y luego básicamente crearíamos los campos que necesitamos para cada página para cada entrada de blog. Entonces, por ejemplo, si vamos a la página web de Clementine House, y vamos a una entrada de blog real, vamos a elegir ésta, por ejemplo Se puede ver aquí que tenemos la imagen media, que es en definitiva la imagen que está aquí. También tenemos la imagen secundaria, en caso de querer agregar otra imagen dentro del poste de bloque real, una tercera imagen, en caso de querer agregar otra imagen, texto relativo al artículo, que se puede encontrar aquí. Entonces también tenemos el tema selecto. Entonces, básicamente, ¿para qué tema es relevante el artículo? Es estrategia de marca, creación de identidad de marca o nombre de marca. También tenemos la fecha y hora publicadas, que puedes ver aquí, justo debajo del título en la página de entrada del blog real. Entonces tenemos el enlace a la página del proyecto, que es esencialmente la URL, que en realidad se activa cuando haces clic en la imagen en la página principal del blog. También tenemos al autor, que se puede ver debajo aquí. Para que te ahorres tanto tiempo cuando estés agregando nuevas entradas de blog, por ejemplo, o nuevos productos o nuevos proyectos. Simplemente puedes manejar todo en el back-end así. Entonces, por ejemplo, si quisiéramos cambiar, ya sabes, el título de esta entrada de blog en particular, por qué la lealtad a la marca es una completa tontería, podemos ir a la entrada del blog noticias, y luego básicamente podemos ir a por qué la marca es una tontería. Haz clic aquí de verdad. Entonces, en lugar de cambiar realmente cada elemento dentro del sitio web real, podemos simplemente editar estos elementos aquí. Cambiar el texto real del artículo. Podemos agregar más imágenes. Podemos cambiar la imagen real de la miniatura real, que es esta Podemos cambiar quien realmente escribió la entrada del blog. Podemos cambiar el texto de información para que la gente lea la entrada del blog. Entonces por ejemplo, si realmente publicamos esto de verdad, y lo guardamos, y luego lo publicamos, entonces si vamos a checar en el sitio web real, Entonces puedes ver que se actualiza automáticamente en la página web principal, pesar de que acabamos de cambiarlo dentro del sistema CMS en el back-end del sitio web. Ahora puedes agregar un elemento CMS a tu página web simplemente agregando la colección así. Y puedes usar todas las lecciones que ya aprendiste en esta fase particular del curso para luego agregar, por ejemplo, un bloque DIF a cada sección, luego también puedes agregar la imagen. Entonces todo lo que básicamente necesitas hacer es hacer doble clic en ir al sistema real al que quieres conectarlo, y automáticamente arrastra hacia adelante todos los elementos que tienes dentro de ese sistema CMS en particular, y finalmente puedes mostrarlo de la manera que quieras, sin embargo, te sientes mejor Y puedes agregar, digamos, por ejemplo, una imagen dentro de ese elemento en particular, y automáticamente rellena cada otro elemento por ti Por ejemplo, no queremos elegir una imagen. Queremos realmente obtener la imagen de la entrada del blog. Entonces agregaremos la imagen principal. Y aquí presione hacer cada imagen, que está en el back-end de la página web y el sistema CMS sin que tengamos que levantar un dedo. Así que inicialmente podemos agregar tantos como queramos. Podemos agregar el encabezado, por ejemplo, dentro de cada bloque de Dave. Y luego en vez de tener que escribirlas todas, todo lo que hacemos es que acabamos el nombre de la sección real, y ese es el ta. Ahora, obviamente, eso no se ve muy bien, pero como que entiendes la idea, ¿verdad? Se trata de ahorrar tanto tiempo como sea posible. Y si puedes hacer eso, y si realmente puedes usar el sistema CMS a tu favor, entonces tu sitio web va a ser súper fácil de administrar, y vas a ahorrar mucho tiempo en lo que respecta a cambiar las cosas y, en última instancia, solo hacer tu vida mucho más fácil con la administración de tu sitio web. De todas formas, vamos a entrar en sistemas CMS más adelante en el curso. Así que estén atentos para eso, pero espero que hayan disfrutado de esta lección, y nos vemos pronto. 58. (Audio remasterizado y 16: Bien, entonces vamos a empezar de cero y construir nuestro sitio web juntos. Entonces, lo primero que hay que hacer es crear la estructura del sitio web. Y podemos hacer esto muy fácilmente usando algunas de estas bibliotecas construidas dentro de Webflow Ya he tenido un par instalado, pero puedes conseguir un montón de ellos. Los que suelo usar son los que básicamente tienen más opciones. Cuando estoy construyendo un sitio web, quiero asegurarme de que tengo los, diferentes formatos y diferentes secciones para elegir. Y éste es uno de mis favoritos. Déjame ver. realmente no tienen tanta opción. Este no tiene tanta opción, pero vamos a que simplemente puedes instalarlo haciendo clic en ese botón, y luego solo seleccionas el sitio web en el que quieres instalarlo. Ahora, en realidad ya tengo demasiadas bibliotecas en mi sitio web. Entonces no puedo instalar uno nuevo. Así que volvamos y solo puedo usar porque estas son mis bibliotecas favoritas de todos modos, así que puedes elegir la biblioteca que quieras Pero para el propósito de este video, solo voy a estar usando el que más me familiarice, y también el que creo que es simplemente el mejor. Y obviamente, puedes elegir esa si realmente quieres, y en realidad es una gran biblioteca para usar. Y básicamente lo que es una biblioteca es que es solo una selección de secciones que pueden ayudarte a construir un sitio web diez veces más rápido. Entonces, bien, comencemos por construir la página de inicio. Así que vamos a usar la interfaz de usuario sin título, que realmente me encanta en realidad Tiene toneladas de opciones diferentes. Es realmente genial. Escojamos un Navbar. Bien. Escojamos éste. No, en realidad, vamos a elegir algunos otros. Sí, vamos a elegir esta en realidad, porque esas son fotos ahí abajo. Entonces, literalmente, arrastras y sueltas la barra de NaF en el cuerpo del sitio web Y ya está hecho. Es súper simple. Ahora, te voy a mostrar cómo crear un Navbar universal más adelante en el curso para que si cambias tu Navbar en una página, vaya a cambiar en todo el sitio web, y sea súper fácil No te preocupes. Pero sí, te mostraré cómo hacerlo un poco más adelante. En este momento, recuerden, solo nos estamos enfocando en crear la estructura de las páginas del sitio web. No estamos mirando colores, no estamos mirando imágenes No estamos enfocados en otra cosa aparte de conseguir las secciones en el lugar correcto. Entonces aquí lo que estoy buscando es una sección de héroes, que creo que esta realidad va a funcionar bastante bien en lo que respecta a lo que necesitamos. Sí. Bien, perfecto. Sí. Entonces ya sabes, eso nos va a permitir literalmente decirle a gente exactamente por qué deberían pasar más tiempo en nuestro sitio web. Recuerda, las tres preguntas que cada persona se hará cuando llegue a tu sitio web. Número uno, primero, están en el lugar correcto, así que debes asegurarte de que sepan que están en el lugar correcto. Número dos, ¿puedo confiar en usted , por eso ahora estamos buscando una especie de sección de características? Um, para mostrar a las diferentes personas con las que hemos trabajado o, ya sabes, los diferentes logotipos que hemos creado, o las diferentes marcas con las que hemos trabajado, por ejemplo. Obviamente, depende del tipo de servicio que estés ofreciendo. Y entonces la tercera pregunta que básicamente se harán es, bien, ¿qué puedes hacer realmente por mí? Así que recuerda, esto cuando estás construyendo cualquier página de inicio. Primera pregunta, ¿estoy en el lugar correcto? Tienes que responder a esa pregunta. Número dos, ¿puedo confiar en ti , por eso hemos agregado la sección de características? Y luego número tres, ¿ qué más puedes hacer por mí? ¿En qué me puedes ayudar? ¿Y ahí es cuando podemos empezar a buscar diferentes servicios? Así que en realidad podemos mostrar los diferentes servicios. Veamos esta sección de características. Bien. A lo mejor éste. A lo mejor éste. Sí. Esto debería quedar bastante bien. Así que literalmente hice clic en él, y se agrega directamente al sitio web Bien, perfecto. Perfecto, perfecto. Entonces esto se ve bastante bien. Y nuevamente, no nos estamos enfocando en los colores, no nos estamos enfocando en nada en este momento aparte de la estructura. La razón por la que hacemos eso es que busquemos algunos testimonios o sección de revisión. La razón por la que lo hacemos de esta manera es simplemente para que podamos enfocarnos en construir el sitio web, y luego podamos enfocarnos en los detalles finales después. Esa es la forma en que debería ir. Porque si intentas hacer todo juntos, terminas gastando demasiado tiempo tratando de hacer todo bien y conseguir que todo sea perfecto, en lugar de simplemente hacer el 80% del trabajo cuando en realidad estás construyendo la estructura del sitio web. Bien, entonces tenemos una sección testimonial que es buena. Veamos la adición, como una pequeña página de blog, solo para mostrar que somos expertos en lo que decimos. Bien. Perfecto. Eso ya lo tenemos. Eso se ve bien. Y entonces creo que todo lo que necesitamos ahora es un pie de página. Bien, echemos un vistazo a los pies de página. Vea cuál nos queda mejor. Bien, esta es agradable y sencilla. Y escucha, recuerda, vamos a cambiar como, ya sabes, las pestañas y, ya sabes , todo lo demás después. Ahora bien, una cosa que a veces sucede cuando usas estas plantillas es que tienen anchuras y tamaños preestablecidos y alturas y cosas en espaciado Entonces a veces, sobre todo con esta plantilla en particular y esta biblioteca, siempre tiene el ancho establecido en 126. No estoy seguro de por qué es realmente molesto para mí, pero vale la pena porque me ahorra mucho tiempo. Así que he pasado 5 minutos simplemente cambiando literalmente un par de los elementos. Si se ve un poco raro, solo compruébalo, y probablemente esté establecido en 126. Así que sí, solo vuelve a ponerlo auto y vas a estar bien. Bien, eso se ve bastante bien para la página principal, para ser honesto. Bien increíble. En ese caso, comencemos a buscar la creación de una especie de página de blog, una página de artículo, por ejemplo. Así que comencemos a crear una página de artículo. Entonces otra vez, sólo vamos a agregar el Navbar. Y nuevamente, este NAV Bar va a cambiar un poco más adelante en el futuro, así que no te preocupes. Te voy a enseñar exactamente cómo hacer eso. Um, tenemos el forraje. Bien, solo agreguemos eso. Te mostraré también cómo usar el pie de página para que puedas crear un pie de página universal. Esto te va a ahorrar tanto tiempo. Definitivamente me ahorra tanto tiempo cuando puedes crear una sola sección, que en última instancia puede ser la misma en todo el sitio web. Y si lo cambias en una página, cambia a lo largo de cada página. Entonces te mostraré cómo hacerlo un poco más adelante. Pero esto es, sí, esto te va a ahorrar tanto tiempo. Bien. Vamos a sumergirnos y poner esto aquí. Solo estoy asegurándome de que esté conectado al cuerpo y no a ninguna otra sección, así que solo lo estoy girando de derecha a izquierda. Bien. Ahí vamos. Eso debería ser bueno. Impresionante. Bien, entonces eso es algo bueno. Eso me gusta. Eso se ve bastante bien. Bien, comencemos a revisar algunas cosas solo para asegurarnos de que todo esté en su lugar. Ahora, en lo que respecta a los artículos, vamos a estar creando un CMS más adelante en esta lección. Ahora bien, lo que es un CMS es básicamente una forma de crear varias páginas alrededor de la misma estructura de páginas. Entonces, por ejemplo, blogs , artículos, son realmente geniales para esto, así como también proyectos. L, por ejemplo, si estás, ya sabes, vendiendo, ya sabes, diseño de logotipos, por ejemplo. Puedes crear una página de proyecto donde simplemente cambies, los logotipos reales que obviamente has diseñado, la escritura, algunos otros elementos como el título, el nombre de la marca. Y lo que hace el CMS es que básicamente crea nuevas páginas. Y te voy a mostrar cómo hacer esto más adelante. Es súper súper simple. Básicamente crea páginas únicas muy rápidamente sin que tengas que crearlas manualmente para que todo lo que tienes que hacer es simplemente cambiar el nombre, cambiar los logotipos, y automáticamente puebla todas las páginas para mostrar tu trabajo Es súper inteligente y realmente, muy eficiente. Realmente te ahorra mucho tiempo. Es posible que esté familiarizado con el uso de CMS antes. Si lo eres y eso es genial, te mostraré cómo hacerlo en webflow Si no, no te preocupes. Es súper simple de configurar, y te va a ahorrar mucho tiempo en el futuro. Este es solo un ejemplo de una plantilla de artículo, que utilizo para Lancaster Academy. Pero tengo toneladas, uso CMSs para todo. Y todo lo que haces es simplemente tomar el campo personalizado. Entonces, por ejemplo, tenemos la página principal del artículo, tenemos temas, color del tema. No tienes que hacerlo en esta cantidad de profundidad, no tienes que ser una especie de, ya sabes, esto detallado. Principalmente vas a estar usando el texto, el botón de texto, el texto enriquecido, la imagen y el enlace, y tal vez un video. No vas a necesitar mucho más que eso. Pero básicamente, lo que haces es una vez que creas los campos en la sección CMS del sitio web. Entonces básicamente puedes vincularlo. Entonces por ejemplo aquí, tengo esto vinculado al tema para que en este caso, sea branding. Esto conecta con el tiempo de re, sea cual sea el tiempo de re en el CMS, lo verá aquí, la imagen del artículo principal, que está aquí, y así sucesivamente y así sucesivamente. Es realmente, realmente genial. Y aquí, creo que tengo 47 artículos diferentes, y puedes ver que todos están conectados a un campo personalizado diferente, y puedes ser tan complejo o tan simple al respecto. No tienes que volverte loco como yo, pero ya sabes, solo mantenlo súper simple, pero prepararemos todo esto un poco más tarde. Ahora, en Margo, sólo quiero comprobar esto todavía. Esto es 126, como dije antes. Entonces necesito asegurarme de que eso cambie. Yo Mogo, no creo que necesitemos tres colaboradores diferentes Así que vamos a cambiarnos de uno. No creo que necesitemos los botones de redes sociales ahí. Puedes guardarlos ahí si quieres, pero no creo que sean muy buenos. Cambia eso. Bien. Te lo contaré, comencemos a crear otra página y comencemos a crear tu página de artículo en general, porque eso va a ser muy útil para organizar todos tus artículos y todo lo que quieras compartir. Porque en última instancia como agencia, quieres mostrar que tienes experiencia, ya sabes, en diferentes áreas, ¿verdad? Entonces eso va a ser súper importante. Así que tener un blog y solo asegurarme que lo exhibas de una manera realmente profesional y minimalista. Realmente va a ayudar, ya sabes, simplemente ganarse al cliente y lograr que confíe en usted, que en última instancia es lo que quiere hagan antes de que en realidad, ya sabes, reserven una llamada contigo o te contraten para tus servicios y ya sabes, última instancia te den dinero. Bien. Esto es looky. Bueno. Bien. arreglar todo esto un poco después, pero puedes ver aquí el cuadro de enlace está establecido en uno, 26. Simplemente se ve un poco raro, así que arreglemos eso. Y si, Bien, eso se ve bien. Estoy contento con eso. Y podemos, podemos cambiar estas pequeñas cosas después. En general, nos vemos bastante bien aquí. Y tienes que, ya sabes, apreciar aquí también, debido a estas bibliotecas, literalmente estamos construyendo un sitio web completo en poco tiempo. Quiero decir, literalmente solo han pasado unos 11 minutos, 12 minutos desde que realmente empezamos. Y ya hemos construido literalmente como tres o cuatro páginas ahora. Y estas páginas se ven bien. Al igual que, estas páginas en realidad se ven profesionales. Y van a verse mucho mejor una vez que realmente los hayamos terminado, y ya sabes, los coloreé e hicimos todas nuestras otras cosas, lo siento. Bien. Hagamos la página de contactores Las páginas de contactores son generalmente bastante simples. Entonces solo agregaremos el Nav y el fudder. Y luego agreguemos la sección contact du. Así que solo queremos algo agradable y sencillo. No queremos volvernos demasiado locos. Creo que uno es probablemente el mejor lo que quieres ser completamente brutalmente honesto Bien. Echemos un vistazo a esto. Bien. Agreguemos esto aquí. Bien. Perfecto. Así que vamos a crear esto, y luego vamos a comprobarlo de nuevo. Bien. Así es pasar al 126, como pueden ver. Y luego tenemos Bien, eso es todo lo que hay. Bien, perfecto. Perfecto. Perfecto. Bien, eso se ve bien. Ahora, pasemos a la página de política de privacidad. Ahora, en lo que respecta a las políticas de privacidad y las páginas legales , en general, todas están construidas prácticamente de la misma manera. Sin embargo, en realidad son muy fáciles de hacer. La única diferencia es, obviamente, el contenido en lo real en la página real. Entonces la forma en que me gusta hacerlo es, estaba buscando aquí una sección para estar lista para construir, pero creo que en realidad es más fácil simplemente hacerlo manualmente. Para que pueda mostrarle cómo hacer eso. Es igual de fácil, pero, no tiene que verse súper bonita, así que no tienes que tener, ya sabes, diseño realmente intrincado para una página de política de privacidad Para ser honestos, nadie va a leerlo realmente. Simplemente está ahí desde un punto de vista legal o desde un punto de vista de descargo Así que vamos a construirlo de forma manual, creo. Entonces te voy a enseñar cómo hacer eso. Bien, chequea. Parachoques. Bien. Entonces acabamos de agregar una sección ahí, luego vamos a agregar un contenedor, y luego vamos a agregar un encabezado. Entonces agreguemos algún párrafo. Ahora bien, podría funcionar con un párrafo. No estoy seguro de si va a funcionar con una sección de párrafo o texto enriquecido. Ya veremos. Pero sí, si no funciona con un párrafo, entonces básicamente lo haremos con texto enriquecido después. Entonces no va a ser un tema enorme. Por lo que la política de privacidad se puede crear solo usando este sitio web, policy.com de privacidad gratuita, y lo mejor de este sitio web en particular Voy a añadir todos los enlaces para que sepas, política de privacidad, envíos y devoluciones, términos y condiciones, cookies, todas esas cosas. Vincularé todo en el curso para que simplemente puedas hacer clic en él e ir directo a la sección real. Sitio web. Lo siento. Ahora bien, lo que intentan y hacen es que básicamente intentan cobrarte por el si quieres, como una política de privacidad realmente profesional, que, quiero decir, para ser honesto, quiero decir, no soy abogado, pero en realidad nunca he usado, ya sabes, uno súper profesional aparte de mi agencia, que obviamente hice con mi abogado. Pero, um, sí, no lo necesitas para ser completamente honesto. Creo que cuando recién estás empezando como marca, solo haz clic, no quiero una, como una política de privacidad profesional, y puedes obtenerla gratis. Entonces, sí, eso es lo que probablemente sugeriría. Aquí, no necesitas poner tu dirección de correo electrónico correcta. Entonces sí, no siento la necesidad de hacer eso. Pero básicamente, ahora, tú tampoco puedes, mirar tratando de copiar esto, pero en algunas computadoras por alguna razón, no te deja. Podrías copiar el portapapeles y básicamente puedes hacerlo haciendo, como, casi como una como una codificación Así que simplemente copiarías eso en como un código personalizado, un código HTML. Ahora bien, si no sabes cómo codificar, entonces hay una manera fácil de hacerlo, y puedo mostrarte cómo hacerlo. Ahora bien, la mejor manera creo es que deberían enviarte como, como un correo electrónico. Déjame revisar mi correo electrónico para que pueda intentar mostrarte lo que eres sería enviado. Ellos vagan vagabundo, dejan que esta carga. Ahí vamos. Entonces te enviarán algo como esto. Pero para ser honestos, eso normalmente te envía directamente de vuelta a la página de política original. Entonces lo que suelo hacer, que suele funcionar mejor es descargarlo como un documento como un word. Y puedes hacerlo con tan solo bajar aquí para generar archivos. Entonces, si vas a generar archivos, entonces simplemente haz clic. Normalmente uso el archivo Doc porque eso ya está formateado y esas cosas. Y luego, si haces clic en él y lo abres, debería permitirte simplemente copiarlo y pegarlo directamente en tu sitio web. Bien, vamos a mover esto al trabajo. Bien, ahora está funcionando. Perfecto. Ahí vamos. Entonces puedes ver aquí, ya está totalmente formateada. Ya está bastante listo para funcionar. Entonces intentemos agregarlo a la sección del párrafo y veamos cómo se ve. Bien, entonces puedes ver el problema aquí, ¿verdad? Se puede ver que el problema es que no lo ha formateado. La razón de eso es que simplemente la sección de párrafo es solo para un solo bloque de texto. No es para como un bloque de texto formateado. Entonces, lo que tenemos que hacer es básicamente tenemos que cambiar esto por una sección de texto enriquecido, que va a ser mucho más útil. Bien, así que vamos a hacer eso. Entonces puedes ver aquí este formato diferente, así puedes ver aquí. Acabo de copiar y pegar exactamente el mismo texto, y podríamos cambiar, y podríamos cambiar, el espaciado entre algunas de las secciones y esas cosas. Pero en general, se ve genial, como sabes, se ve profesional. Se ve bien formateado. Sabes, ¿podríamos alterar ligeramente el espaciado? Sí, definitivamente. Pero ya sabes, toda la información está ahí, y se hace de la manera correcta. Una cosa a la que me atrevería es asegurarme de que a veces vean cosas como aprender más sobre las cookies en el sitio web gratuito de política de privacidad. Entonces básicamente solo se anuncian dentro de las políticas de privacidad reales. Puedes retrasarlos si quieres lucir un poco más profesional, porque obviamente, entonces la gente sabe que obtuviste la política de privacidad de un sitio web gratuito de política de privacidad, cual no es algo malo, pero, la gente puede mirar eso y pensar, tal vez no son tan profesionales como pensé que eran. Ahora, con la página Acerca de nosotros, esencialmente estamos tratando de, ya sabes, decirle a la gente sobre lo que nos hace especiales? Qué nos hace diferentes y por qué deberías elegirnos como agencia, ¿verdad? Entonces, lo que vamos a hacer ahora es construir la sección Acerca de. Ahora, tenemos el bar de la NAF, tenemos el Fuda como deberíamos tener Y ahora tenemos que empezar a contar la historia de nuestra marca, la historia nuestra empresa y lo que nos hace diferentes. Entonces lo que estoy haciendo aquí es que solo estoy buscando, ¿quiero agregar un video? No estoy seguro si realmente quiero agregar un video para ser completamente prudentemente honesto. ¿Quiero agregar un video? Bueno, esta es una caja de luz. Entonces básicamente lo que es una caja de luz es que puedes ocultar algunos medios, así que ya sea una imagen o una selección de imágenes o un video dentro de la caja de luz para que cuando la gente haga clic en la imagen o en la caja de luz, se le ocurra el video real, que es, um, Que es súper súper útil no estoy seguro de si realmente quiero un video de oído Sin embargo, no estoy seguro de si realmente quiero un video de oído. Esa es la cosa. Entonces podría ir por algo un poco más simple, como solo una imagen o algo así. Déjame ver si puedo encontrar algo ahí. Bien. ¿Cómo estaba eso? ¿Cómo estaba eso? Aquí. Esto se ve bastante bien. Yo sólo quiero algo que sea bastante simple. Sólo quiero algo bastante simple, pero no estoy seguro a lo que me refiero, eso no está tan mal. ¿Qué pasa con esa? Sí, podemos hacer eso. Bien, increíble. Bien, hagámoslo. Perfecto. Y luego puedo cambiar las imágenes y rellenar un poco más adelante. Eso no es gran cosa. Pero tiene todo lo que necesito. Tiene un encabezado. Tiene un poco de texto. Bien, perfecto. Empecemos a mirar algunas otras secciones para agregar debajo de eso también, solo para ver las cosas. Bien. Nuevamente, con la página Acerca de nosotros, solo estamos tratando de decirle a gente lo que realmente podemos hacer por ellos. Entonces esto es lo que somos, y esto es lo que podemos hacer por ti. Un poco como la página de inicio, pero la página de inicio es como aquí una landing page para tratar de generar confianza. La sección Acerca de Nosotros es cuando gente está realmente interesada en lo que tienes que hacer y cómo puedes ayudarles. Y ahí es cuando en realidad están empezando a pedir más detalles, para que puedas ser un poco más técnico en la página Acerca de Nosotros en lo que respecta a decirle a la gente qué tipo de servicios puedes ofrecerles. Entonces vamos a agregar aquí una pequeña sección de servicios. L et's solo encuentra algo que se vea bien. Mm mm. Y esta biblioteca, en particular, uso para tantos sitios web diferentes. Puedes usarlo para sitios web de agencias, sitios web de marcas personales, sitios web de comercio electrónico, y puedes editarlo para que se vea como quieras. Sí, es súper súper útil, realmente útil. Y una gran cosa que me encanta tener una página acerca de es porque la gente va a tener preguntas que hacer, bien. Por lo que siempre agrego una sección de preguntas frecuentes porque nos permite responder preguntas. Acerca de nosotros mismos en un espacio de tiempo y espacio realmente corto en el sitio web. Así que sí, en lugar de, ya sabes, leer como 20 secciones diferentes sobre, ya sabes, responder diferentes preguntas y hacerlo una manera muy larga, solo podemos tener una pequeña sección de preguntas frecuentes, que básicamente resalta todas las que básicamente resalta todas las preguntas más frecuentes del cliente para que luego solo puedan básicamente tomar una decisión si leer como 20 secciones diferentes sobre, ya sabes, responder diferentes preguntas y hacerlo de una manera muy larga, solo podemos tener una pequeña sección de preguntas frecuentes, que básicamente resalta todas las preguntas más frecuentes del cliente para que luego solo puedan básicamente tomar una decisión si nosotros son los adecuados para ellos o no. Ahora, me gusta mucho esta pequeña sección al final de la sección de preguntas frecuentes sobre esta biblioteca en particular porque tiene, como, un llamado a la acción. Pero otra vez, como las imágenes que había tenían un poco de relleno, así que tuve que cambiar eso. Y entonces, por alguna razón, creo que esto no se reenvía correctamente. Oh, discúlpeme. Sí, no está formateado correctamente, así que necesito cambiar el cambio de formato de esto y mover el pie de página hacia abajo. Sí. Bien, entonces puedes ver aquí que hay un pequeño problema porque la sección está dentro de otra sección, lo cual obviamente es un problema. Entonces, la forma de arreglar esto es básicamente separarlos. Entonces voy a hacer eso con sólo hacer clic en el cuerpo. Asegurándome de que estoy copiando en el amigo, puedes ver aquí los acolchados siendo un poco atornillados Entonces solo voy a agregar esta sección nuevamente porque, no quiero otra vez, cuando estoy creando la estructura del sitio web, quiero asegurarme de que la estructura del sitio web sea perfecta para que luego pueda enfocarme en el diseño. El diseño es la parte divertida. El diseño es la parte que más me gusta. La estructura es simplemente muy importante para acertar primero, porque si no se hace bien la estructura, entonces básicamente hay que empezar de nuevo. Así que realmente concéntrate en hacer eso. Así que simplemente colapsé la barra del navegador, y solo voy a agregar el pie de página al fondo. Entonces, solo agreguemos eso así. Tenemos al héroe, tenemos servicios, tenemos las preguntas frecuentes, tenemos el pie en la parte inferior. Perfecto. Eso se ve bien. Y entonces podemos pensar por estos, no estoy seguro. Vamos a agregar dos, en realidad. Solo agreguemos dos servicios porque no tenemos que volvernos demasiado locos. Puedes agregar tantos como quieras, pero vamos a agregar dos para la hora principal. Bien, perfecto. Bien, entonces ahora veamos, ya sabes, un solo proyecto. ¿Bien? Entonces, si eres, ya sabes, cualquier tipo de servicio que estés ofreciendo, ya sea diseño de logotipos, fotografía, sabes, redacción publicitaria, sea lo que sea, necesitas una sola página de proyecto para explicar realmente y casi crear un estudio de caso para los diferentes clientes con los que has trabajado Entonces eso es súper importante para acertar. Ahora bien, lo que me gusta usar es, me gusta usar un truco muy amable en el que básicamente uso una plantilla de artículo para la página del proyecto, que funciona muy, muy bien porque es simplemente muy funcional Entonces te voy a mostrar lo que quiero decir en un poquito, pero agregué la barra NAP, agregué el Pie de Página, Ahora lo que vamos a hacer es simplemente ordenar un poco las cosas porque esta plantilla en particular es simplemente súper útil para, sabes, como, una página de proyecto, y simplemente se ve súper profesional. Una vez que todo esté terminado de todos modos. Bien, entonces solo cambia eso un creador. Entonces, ¿quién realmente trabajó en el proyecto? No necesitamos nada de eso porque no hay un artículo. Entonces solo cambia eso. Bien perfecto. Y entonces lo que probablemente deberíamos agregar es algún texto. Entonces con agregar un párrafo después, solo para escribir un poco sobre el proyecto real. Entonces tenemos el título del proyecto real. Bien. Perfecto. Esto no se ve tan mal. Probablemente haremos algunos cambios solo para ponerlo a punto de cero. Pero bien, agreguemos un do. Agreguemos una grilla. Lo que quiero hacer es, quiero exhibir Así que otras imágenes, sobre todo si estás como hacer como diseño de logotipos o la fotografía, ya sabes, quieres que sea muy pesada de imagen, ¿verdad No quieres que sea, ya sabes, solo un poco, ya sabes, solo texto o demasiado texto debería decir. Entonces sí, agreguemos algunas imágenes al aquí. Bien, entonces hemos agregado un cuadro de cuadrícula, hemos agregado un bloque d, y luego solo vamos a agregar una imagen a ese bloque d. Ahí vamos. Perfecto. Así que puedes ver aquí, tiene un poco de relleno, solo quítate eso. Ese estándar con cada uno, imagen en flujo web básicamente, así que solo tenemos que quitárnoslo. Sólo voy a agregarlo al 100%. Entonces esa base va a llenar completamente el bloque div. Y luego vamos a copiar y pegar un dibloque, así que tenemos muchas imágenes diferentes Así es solo y, tal vez pongamos seis en eso, lo cual va a quedar genial. Y luego vamos y, necesitamos poder explicar El proyecto real. Así que vamos a tratar de encontrar algo. De hecho, qué vamos a hacer aquí. ¿Qué estoy buscando? ¿Qué estoy buscando? Vamos, sección FQ. Vamos a agregar. No quiero la sección FQ en su conjunto. Yo sólo quiero el llamado a la acción. Eso es lo que más quiero. Entonces solo voy a obtener la sección de preguntas frecuentes, pero luego solo voy a eliminar la sección FQ y mantener el llamado a la acción real Entonces sí, no necesito todas estas preguntas. Yo solo estoy borrando todos esos. Bien. Ahí vamos, sólo para tomar eso. Y luego básicamente tenemos el bonito llamado a la acción en la parte inferior, que es perfecto. Vamos a reducir el acolchado, así que no es tan grande. Reduzca este relleno en la imagen. Sólo quítate ese patrón. Ahí vamos. Impresionante. Impresionante. Ahora tenemos un lindo llamado a la acción en la parte inferior, que es perfecto. Ahí vamos. Reduce un poco ese patrón. Y eso se ve bastante bien. Estoy bastante contento con eso ahora mismo. Eso se ve bastante bien. Impresionante. Reduzca un poco ese patrón , solo para unir las cosas, porque quiero que el espacio sea casi el mismo. Llévate eso. Bien, eso se ve súper limpio. A mí me encanta esto. Impresionante, increíble, increíble, increíble. Bien. Asombroso. Bien, vamos a ver esto. Bien. Bien, entonces ahora vamos a construir la página real de la cartera. Entonces la diferencia entre la página única del proyecto y la página de la cartera es que la página única muestra un solo proyecto, la página de la cartera muestra todos tus proyectos, ¿de acuerdo? Entonces construyamos una estructura para esto. Y nuevamente, podemos ser un poco inteligentes y usar esta sección. Bien. Por lo que no queremos mostrar a nuestro equipo. Solo queremos mostrar obviamente los diferentes trabajos que hemos realizado. Um, así que esto es de nuevo, formato de 21, 26, para que podamos arreglarlo. Estos son todos fijos. Hay un poco de margen en estos, así que quítate eso. Bien, eso se ve bastante bien. Entonces obviamente, aquí, no vamos a estar usando estos para exhibir a los miembros de nuestro equipo porque no estoy seguro si tienes miembros del equipo, si lo haces, entonces fantástico Si no lo haces, entonces está bien. Básicamente vamos a usar esto para mostrar nuestro trabajo. Entonces, simplemente eliminemos algunos de estos solo para que tengamos un poco más de espacio para trabajar. Bien. Sí, creo que tres es bueno. Bien, hazlo. Hagámoslo. Bien, eso se ve bien. Perfecto. Ahora, comencemos a ver cómo podemos saber en qué es lo que realmente necesitamos vender a la gente , ya sabes, mirando el trabajo que hemos hecho. Entonces, lo que podemos hacer es simplemente enfocarnos en crear uno. Y luego una vez que creamos uno, de la manera que nos guste, entonces podemos simplemente duplicarlo y tenerlo para múltiples proyectos diferentes, múltiples diferentes en los que hemos trabajado. Bien, entonces aquí, por ejemplo, solo vamos a cambiar esto a, por ejemplo, un poco sobre el proyecto, mira Bien. Bien, retrasa eso. Solo estoy tratando de que esto se vea bien porque obviamente es una página de portafolio, así que quiero asegurarme de que la veamos bien. Así que podemos duplicar eso y tener múltiples versiones diferentes de la misma. Ahora bien, esto puede parecer un poco extraño en este momento, pero solo tengan paciencia conmigo. Este es un trabajo en progreso, así que solo estoy trabajando en esto contigo. De nuevo, quiero un llamado a la acción, como en la página del proyecto único, así que voy a agregar nuevamente la sección FQ al cuerpo Y luego otra vez, voy a editarlo para que no tenga que tener todas las diferentes preguntas y esas cosas. Retrasar eso. Retrasar esto. Aquí vamos. Perfecto. G impresionante impresionante impresionante. Vamos a llevarnos esto. Vamos a reducir eso. Bien, eso se ve un poco mejor. Y de nuevo, sé que ya lo he mencionado algunas veces, pero aquí solo nos estamos enfocando en la estructura. No nos importa nada más. Sólo la estructura real. Vamos a reducir eso un poco a cuatro. Bien. Eso se ve bastante bien. Eso se ve bastante bien. Ahí tenemos la estructura. Entonces ahora tenemos la estructura, y todo está, ya sabes, en el lugar correcto. Empecemos realmente a diseñar el sitio web, ¿verdad? 59. (Audio remasterizado y 16: L et's empieza realmente a diseñar el sitio web, ¿verdad? Así que todas las estructuras se hacen a través de todas las páginas. Empecemos a diseñar el sitio web. Entonces aquí queremos agregar algunas imágenes. Estas son solo algunas imágenes que arreglé solo para hacer el flujo de trabajo un poco más rápido solo para poder superarlo contigo mucho más rápido. Entonces solo voy a agregar algunas imágenes. Entonces cambiemos el logo. Acabo de encontrar este logo en línea en Google, creativo en. Solo agreguemos esto aquí. Borremos esto. En realidad este pequeño icono. No necesitamos este icono. Simplemente borra eso. Perfecto. Ahí vamos. Entonces eso es todo lo que hay. Lo que puedes hacer es tomar el enlace de navegación y simplemente presionar el pequeño ****. Y luego ponlo a casa. Entonces puedes hacer lo mismo en configuraciones donde básicamente simplemente simplemente haces clic en esto, elige una página. Entonces, cada vez que alguien haga clic en su logotipo, lo va a enviar directamente a la página de inicio. Esto es algo bastante común. Y también significa que en la barra de NAF también, realidad no necesitamos la pestaña home Simplemente cambia la imagen rápida allí. Mantengamos estos logotipos así como los clientes solo obviamente ahorran algo de tiempo. Solo pretendamos que hemos trabajado con monedas basadas, flujo web, holgura, Zoom, etcétera Con esta pequeña sección aquí. Entonces lo que estoy haciendo aquí es que estoy cambiando las imágenes dentro de los íconos. Y la forma de hacerlo es simplemente obtener una imagen, clic en esta copia y pegar, y luego básicamente tienes una imagen dentro, que puedes cambiar. No se pueden cambiar los íconos. Es necesario agregar una imagen y luego cambiar la imagen a un PNG. Entonces aquí, por ejemplo, tengo tres PNGs, una estrella, que está aquí, y luego solo obtengo el tamaño correcto porque el tamaño es un poco demasiado pequeño Sí, necesito subir un poco esa talla. Sólo estoy borrando esos. Déjame revisar el tamaño. Ese tamaño es un poco mejor. De nuevo, así que sólo voy a copiar y pegar. Copiar y pegar. Ahí vamos, así que tengo el más grande adentro, y luego puedo simplemente cambiar la imagen real. Tengo el tamaño correcto. Sólo voy a cambiar el PNG por dentro. Y un PNG, si no estás familiarizado con un PNG, PNG es simplemente una imagen sin fondo. Simplemente es transparente. Bien. Así que las críticas reales se ven bien. Si no necesitamos cambiarlos. No vamos a pasar mucho tiempo cambiando todos los textos y esas cosas porque eso es algo que obviamente puedes hacer muy fácilmente. Es como editar un documento de Word. Bien. Cambiemos algunas imágenes dentro de la sección del blog. Bien. Veamos esto. Perfecto. Eso ya lo tenemos. Eso se ve bien. Obviamente, podemos cambiar los títulos del blog y esas cosas, pero no es necesario para ello. Esto es algo que puedes hacer en tu propio tiempo. Um quiero ser lo más respetuoso posible con tu tiempo. Bien, entonces ya tenemos eso, tenemos eso. Bien. Sólo estamos cambiando el logotipo exactamente igual que antes. Nuevamente, podemos conectar esto a la página de inicio. Bien. Ahora, echemos un vistazo a, los íconos de las redes sociales. Entonces para este particular, ¿estamos en Facebook? No, ¿estamos en Twitter? No. Roni on Linked in inn Instagram, así que acabo de borrar esos Y solo elimínalos, simplemente haces clic literalmente sobre ellos y solo presionas para tarde como en un documento de Word. Súper simple. Bien. Vayamos a aquí, por alguna razón, creo que eso se ve un poco raro, pero en realidad, se ve bien. No se ve tan mal para ser honesto. Pero vamos a pasar a hacer que esto, um, esto se vea un poco más en la marca. Así que solo pon mi marca. Bien. Y creo que 2077 es justo Wile lejos, así que vamos a ir al 2024 Y entonces, entonces quiero decir, esto no se ve muy mal, ¿verdad? Tenemos las imágenes en su lugar. Ya sabes, ahí hemos puesto el logo. Todo se ve bastante bien en este momento. Creo que el siguiente paso es hacer la página Acerca de nosotros, porque la página Acerca de nosotros y la página de inicio real es en realidad bastante similar, ¿ verdad? Son muy similares. Entonces lo que vamos a hacer, y de hecho cambié, la estructura sobre nosotros un poco, porque no me gustaba la imagen de esa sección en particular de antemano, y era un poco más difícil de, cambiar porque había múltiples capas en ella. Así que solo cambié eso solo para mostrarte la forma más sencilla. Pero nuevamente, solo estamos cambiando el logotipo real dentro del pie de página real. Solo para conseguir todo en la marca. Y esta es una especie de parte divertida, justo donde puedes pasar por el sitio web y, ya sabes, cambiar los colores, cambiar las imágenes, cambiar el texto. Generalmente cambio el texto último solo para que pueda, ya sabes, conseguir que la imagen haga que todo se vea bien, y entonces básicamente podemos, realmente tomarnos el tiempo para obtener los derechos de autor. Probablemente crearé un curso de redacción publicitaria más adelante en el futuro, pero esto es solo por el ínterin. Ahora, en lo que respecta a Navbar, vamos a crear ese Nav Bar universal en un poco Ahora, puedes ver aquí que tenemos este Navbar aquí, que está en la página de inicio Ahora, no necesitamos este botón, así que podemos eliminarlo. No necesitamos inscribirnos en el, así que podemos simplemente cambiarlo al objetivo más importante, objetivo estratégico para nuestro sitio web, que es contactarnos. Podemos cambiar eso a un bonito rosa. Bien, L es carmesí, ¿debería decir? Cambiemos eso a carmesí solo para que coincida con eso. Ahora, Ese rosa no es lo mismo que el logo rosa. Así que vamos a desconectarlo. Entonces voy a volver a coger el carmesí, y desconectarlo. Y luego lo voy a ajustar ligeramente hasta que sea lo mismo que el logo. Ahí vamos. Eso es un poco mejor. Bien, me voy a quitar el contorno. Pero bien, cuando flote sobre él, se vuelve púrpura. Eso es súper molesto. ¿Bien? Así que vamos a pasar el cursor Vamos a la sección de color. Solo escojamos el carmesí. Bien, perfecto. Y entonces ahora cuando me pongo el cursor sobre él, va como un rojo más oscuro Entonces se demuestra que estoy involucrando con el botón real, que es exactamente lo que quiero. Y eso va lo mejor estas plantillas es que cuando cambias una cosa, cambia todos los botones en todo el sitio web, para que no tengas que hacerlo varias veces. Entonces por ejemplo, aquí, solo estoy conectando el botón de contactores a la página de contactores Aquí, en realidad no necesitamos casa, así que podemos tlate eso porque el logo ya nos lleva a casa. Entonces no necesitamos la sección home. Aquí podemos cambiar esto a otra cosa como servicios, por ejemplo. Y eso solo puede ir a nuestra página sobre nosotros o algo así. Y cuando pasamos el cursor sobre él, podemos cambiarlo para que en realidad se vuelva rosa, lo que se ve en la marca, ahí vamos. Eso se ve bastante genial. Ahora bien, la razón por la que no hace lo mismo con los recursos, sino que hace el mismo efecto para precios es porque los recursos son un desplegable. Es un elemento desplegable, mientras que los servicios y los precios son un elemento de pestaña, ¿de acuerdo? Entonces, ya sabes, puedes hacer exactamente lo mismo, pero solo para explicar por qué sucedió eso. Bien, entonces tenemos la barra de NaF ahí. Ahora lo que vamos a hacer es que vamos a crear un nuevo componente. Entonces, ¿qué es un nuevo componente? Entonces, si creamos un componente llamado Agency NAV Bar, entonces eso nos va a permitir simplemente usar ese componente en todo el sitio web en todo el momento. Para que veas como es verde. Ahora podemos tomar ese componente y usarlo en cada página en todo el sitio web. Y cuando cambiamos algo, entonces por ejemplo, quizá añadimos otra página a la barra de NAV. Una vez que lo cambiemos ahí en la primera página, va a cambiar en todo el sitio web, que es exactamente lo que queremos. Nos va a ahorrar tanto tiempo, tanto tiempo. Entonces podemos usar esto para toneladas de cosas diferentes, y lo usaremos un poco más adelante para el forraje, lo más importante Y luego sí, solo quería mostrarte no solo cómo construir el sitio web muy rápido, sino también cómo configurar las cosas para que cuando estés administrando tu sitio web, también puedas manejarlo muy rápido también, porque eso va a ser un elemento súper importante súper importante porque tu tiempo es súper valioso, ¿verdad? Entonces quieres asegurarte de que el sitio web esté configurado para hacerte la vida lo más fácil posible. Y esa es una de las razones por las que me encanta el flujo web. Por eso invierto en el sistema Webflow CMS, porque el sistema CMS simplemente te ahorra tanto tiempo Y el tiempo es súper valioso, y es súper importante, ya sabes, no perder el tiempo. Entonces bien, vamos a la página de artículos del blog del blog. En realidad nos está llevando a la página de contacto. Hagamos esto primero. Entonces aquí, obviamente, puedes agregar tu dirección de correo electrónico, puedes agregar tus datos y esas cosas. Yo solo quiero cambiar realmente el color real a rosas, obviamente de momento, es morado, y no se ve muy bien Y si haces clic en ese pequeño botón morado aquí arriba, solo te lleva a muchos colores diferentes, como puedes guardar colores, lo cual es súper genial. Entonces, es solo así que voy a guardar esto. Sólo voy a seleccionar el mismo rosa. Así que simplemente te ahorra encontrar el mismo color una y otra vez o agregar el mismo código hexadecimal una y otra vez. Súper súper inteligente. Bien. Bien, ahora podemos simplemente agregar obviamente nuestra barra universal de NaF porque esa otra era la otra era la vieja Entonces solo estamos agregando eso ahí. Puedes ver lo rápido y fácil que es crear una página de contactores realmente en la marca Literalmente nos tomó como 5 minutos hacerlo. No es difícil. Es muy, muy simple. Bien. Vamos a tener esa mirada. Bien. Ahí vamos. Perfecto. Bien. Ahora bien, esto se ve bastante bien. Bien. Pasemos a la página del proyecto único. Entonces es por eso que podemos empezar a, ya sabes, conseguir que las cosas se vean muy, muy bien. Y la página del proyecto es realmente importante para cualquier agencia o proveedor de servicios porque simplemente eres, sabes, no es tanto una página de proyecto, sino que es como una página de estudio de caso, ¿verdad? Solo estoy usando una página de proyecto para esta circunstancia en particular. Es muy importante mostrar tu trabajo la mejor manera porque eso es lo que va a conseguir que te contraten, ¿de acuerdo? Entonces, vamos a cambiar este forraje. Así que sí, asegurarse de que te gusta invertir el tiempo y realmente mostrar y tu trabajo de la manera correcta y hacerlo correctamente te va a ahorrar mucho tiempo y energía en la adquisición de nuevos clientes más adelante. Básicamente, cuanto mejor se vea tu sitio web, más fácil te va a ser conseguir clientes. Actualmente tenemos, nuestro sitio web en un muy buen lugar y lo hemos refinado en la última década. Y ahora nuestro sitio web te hace saber, o nos da, ya sabes, en cualquier lugar 30-25 leads al día, y rechazamos la mayoría de esos leads porque no queremos trabajar con esas empresas en particular Entonces solo muestra el poder de, ya sabes, obtener buenas imágenes y mostrar tu trabajo de la manera correcta Así que solo voy a agregar algunas imágenes aquí solo para algo así como marcadores de Pero una cosa que yo diría también, y lo he mencionado en otros cursos y también al principio de este curso, es asegurarse de que compruebe lo mejor de su industria dentro de los servicios que está brindando. Y aprende de ellos, aprende lo que hacen, cómo presentan su trabajo, y luego hazlo de una manera muy similar porque entonces vas a poder, ya sabes, vas a poder vender tus servicios mucho más fácilmente. Porque, ya sabes, son lo mejor de lo que hacen. Entonces hay una razón por la que son tan buenos y por qué pueden cobrarte una fortuna, como Pentagram, por ejemplo, una firma de diseño de marca que tiene oficinas en todo el mundo El cargo como cientos de miles, si no, 50,000, 50,000 a 100,000 por proyecto de desarrollo de identidad de marca. Entonces, agreguemos algunos textos porque eso va a ser importante para explicar lo que realmente estamos haciendo dentro del proyecto. En realidad no voy a agregar el texto porque eso obviamente va a perder el tiempo, pero obviamente puedes tomarte el tiempo para escribir una pequeña y agradable reseña del proyecto. Bien. Agreguemos un poco de ganas de trabajar con nosotros. Sí. Vamos a agregar eso ahí. Y luego solo enlaza eso hasta la página Contáctenos. Para que la gente pueda ponerse en contacto con nosotros. Lo cual es increíble. Bien, esto se ve bastante bien. Puedes ver cómo, no hemos pasado mucho tiempo construyendo este sitio web. Literalmente estamos construyendo el sitio web. Y creo que es alrededor, ya sabes, 40, 46 o 47 minutos. Hemos estado construyendo el sitio web. Y en serio no es difícil. Pero la razón por la que hemos podido hacer esto tan rápido, es porque, ya sabes, tenía todas las imágenes preparadas y obviamente, no estoy escribiendo el texto. Pero como el 90% del trabajo de construir realmente el sitio web. Se puede hacer eso. Y luego es solo el 10%, que realmente necesitas para tomarte tu tiempo. Y realmente recomendaría tomarse su tiempo, ya sabe, los detalles más finos como cómo mostrar su trabajo, cómo escribir el texto, todas esas cosas como esas cosas son realmente importantes. Bien. Sólo cambiemos la barra de NaF y el forraje. Perfecto. Y una vez que tienes confianza con el flujo web, y empiezas a, ya sabes, agregar más cosas y calcular más cosas. Tu sitio web simplemente sigue mejorando y mejorando. Y con el sitio web también, una cosa que voy a decir es agregar aquí un software de seguimiento conductual donde realmente se puede ver como el mouse. Bien, entonces lo que voy a hacer aquí, sólo para una especie de parar por un segundo. Voy a agregar el CTA, el llamado a la acción a la otra página De una manera mucho más fácil. Entonces tengo esto. He seleccionado la sección real. Voy a crear un componente. Recuerda lo mismo que el Navbar y el forraje. Y voy a crear una sesión o sección de llamada de descubrimiento, donde básicamente podemos agregar esto a diferentes secciones, y todo va al mismo lugar para la sección de llamadas de descubrimiento. Ahí vamos. Mayúscula D. Perfecto. Crear. Bien. Entonces ahora se puede ver que es verde. Eso significa que en todo el sitio web, va a ser exactamente lo mismo. Así que agreguemos eso a la sección de cartera también. Porque podría quedarme con este actualmente el azul. Pero la realidad es, voy a que va a ser más trabajo para mí más adelante porque voy a tener que editar dos secciones distintas, donde en cambio si hago el trabajo ahora, puedo borrar esto. Y luego solo puedo agregar la otra sección de llamadas de descubrimiento, que es universal, por lo que cambia fácilmente en todo el sitio web, y no tengo que hacer el mismo trabajo dos veces, lo cual es, ya sabes, realmente importante. Bien. Echemos un vistazo a esto. Bien. Eso es todo bueno. Eso es todo bueno. Eso es todo bueno. Empecemos a agregar entonces vamos a empezar a agregar algunos b, b, bum, bum. Oh, sí, lo que estaba diciendo antes es sobre agregar software de seguimiento conductual para mejorar tu sitio web. Así que cada mes, después de que hayas construido tu sitio web y esté en vivo, vas a empezar a conseguir clientes. ¿Bien? Sólo voy a añadir algunas imágenes mientras te estoy hablando de esto porque es muy importante. Cuando empiezas a rastrear los visitantes de tu sitio web todos los meses, ¿verdad? Entonces solo un día del mes, a fin de mes, más probable es que solo veas grabaciones, y te puedo mostrar como instalar el software el Hot Jar, hecho tengo un link donde puedes conseguir lo puedes conseguir gratis, básicamente, está adjunto a este curso. Cuando aplicas algo como Hot jar al sitio web, te muestra cómo se comportan tus visitantes dentro de tu sitio web, y luego básicamente puedes hacer cambios basados en el comportamiento real que están haciendo los visitantes de tu sitio web Entonces, en lugar de solo adivinar y simplemente cambiar el sitio web por lo que piensas que se ve bien o lo que sea, en realidad puedes hacerlo la manera correcta por las razones correctas para obtener los resultados que deseas Y hay una gran diferencia. Ya sabes, alguien que acaba de cambiar el sitio web porque se ve mejor. No tienen idea de lo que están haciendo. Van a estar dando vueltas en círculos porque no están tomando decisiones basadas en lo que realmente está sucediendo. Solo están tomando decisiones basadas en lo que creen que está sucediendo, lo cual es, ya sabes, es bastante estúpido, ¿verdad? Entonces lo que estoy haciendo aquí es que solo voy a hacerlo solo voy a crear como una fotografía, como un sitio web de fotografía aquí. Entonces este va a ser un estudio de fotografía. Y entonces podemos cambiar esto. Así que de nuevo, como, ya sabes, podemos jugar con los textos y esas cosas, pero en general, esto se ve bastante bien Entonces, um echemos un pequeño vistazo a esto. Entonces, lo que quiero hacer, empiezo a crear algún tipo de animación o algún tipo de efecto genial cuando alguien se cierne por encima Porque por el momento, cuando pasamos el cursor sobre él, realmente no pasa nada Simplemente es como que se ve bonito, bastante aburrido para ser honesto. Al igual que, no me gusta bien, así que ahora cuando vuelo el cursor sobre él, cambia la capacidad Bien, eso es bueno. Así que ya tenemos eso. Bien perfecto. Bien, vamos a hacer Hagamos otra cosa. Hagamos otra cosa bastante genial. Cambiemos el Tal vez podamos agregar, como, tal vez podamos hacerlo un poco más grande cuando la gente haga clic en él o pase el cursor sobre él No por mucho, sólo por tal vez, como, un poquito. Vamos a ver qué tan grande lo hace eso. Bien. No lo hace mucho más grande, así que hagámoslo un poco más grande. Bien. Y entonces tal vez agreguemos. ¿Qué más podemos hacer? ¿Qué más podemos hacer? ¿Qué más podemos hacer? Yo no quiero hacerlo también, como demasiado loco. Quizá agreguemos como tal vez como un filtro o algo así. ¿Vamos a publicar un filtro? Sí, agreguemos un filtro. Agreguemos algo de desenfoque. Agreguemos, no queremos hacer nada de ese tipo de cosas. Ese tipo de cosas se están poniendo un poco demasiado intensas. Vamos a agregar un desenfoque. Y no queremos agregarlo demasiado borroso, sino solo un poquito, solo para que sea interesante Bien. Entonces ahora cuando pasas el cursor sobre, el um la imagen Básicamente debería verse desdibujado. Simplemente vaya a las transiciones de antemano y luego vaya a todas las propiedades, y luego, literalmente, solo consígalo por aproximadamente 375, y luego simplemente relácelo un poco más elegantemente, así que simplemente mejore esas Y entonces lo que vas a estar haciendo es hacer clic fuera de eso y eso automáticamente guarda. Y ahora, cuando en realidad pasamos el cursor sobre él, se puede ver que tiene este tipo de efecto vítreo genial, que es lo que ya sabes, se ve mucho mejor Bien. Ahora en realidad ahora ellos realmente saben, es como un efecto artístico, ¿verdad? Y puedes hacer lo que quieras con esto. Realmente toma algún tiempo jugar con esto porque esta es, ya sabes, es una de mis partes favoritas del diseño de sitios web, solo agregando pequeñas animaciones e imaciones geniales como esta Voy a agregar un puntero para que cuando la gente realmente pase el cursor sobre él, se convierta de un mouse a una mano solo para que sepan que es clicable Um si, aparte de eso. Creo que esto se ve bastante bien. Esto se ve mucho mejor de lo que esperaba en realidad. Bien. Veamos tal vez porque en este momento no se puede hacer clic en Esto es solo una imagen, lo cual es un problema, obviamente, porque si la gente no puede hacer clic en ella, entonces no pueden ir a la página del proyecto, así que necesitamos agregar un bloque de enlace. Entonces vamos a agregar un bloque de enlaces aquí. Esto podría causar un pequeño problema. Así que vamos a trabajar juntos en esto. Sólo para poder mostrarte exactamente cómo debes abordarlo. Bien. Entonces tenemos esto. Lo he copiado y pegado. Bien, así que obviamente eso es demasiado pequeño. Vamos a hacer este auto. Bien. Entonces ahora es como ahora está como subrayado, que no se ve muy limpio, ¿verdad? Entonces aquí lo que podemos hacer es agregar la real la página a la que queríamos ir. Pero no me gusta cómo está subrayado. Bien vamos a hacer clic en esto. Vamos a deshacernos de esas líneas que hay debajo. Bien. Así que vamos a seleccionar el artículo. Luego el bloque de enlace, y luego simplemente haga clic en eso y haga clic en eso, y luego estamos bien. Ahí vamos. Bien, también. Entonces ahora, todo lo es, todo debería estar bien para ir. Ahora bien, en lo que respecta al CMS, aquí es donde las cosas pueden ponerse un poco más interesantes a la cerveza. 60. (Audio remasterizado y 16: Bien, entonces con las secciones CMS, solo quiero mostrarte cómo configurar una. Y puedes usar secciones CMS para literalmente todo. Puedes usarlo para tus artículos, puedes usarlo para páginas de proyectos, puedes usarlo para productos si estás en el sitio web de comercio. Pero para este ejemplo, podemos literalmente simplemente, ya sabes, crear una colección para nuestros ejemplos de cartera, ¿verdad? Entonces, ya sabes, estamos agregando las imágenes principales, el tipo de trabajo, ya sabes, el tipo de proyecto. Podemos agregar, obviamente, tenemos el nombre anterior en texto plano. El talud, que es, ya sabes, información básica, necesitamos esos, el texto de la Taser de la nota publicitaria Entonces esto le va a decir a la gente un poco sobre ya sabes, lo que pueden esperar. Y luego si realmente lo creamos, entonces solo podemos agregar cinco elementos. Estos son solo marcadores de posición, así que no tenemos que usarlos obviamente, sino que solo te va a mostrar cómo agregarlo realmente Bien. Entonces entonces cuando vamos a la página P 40 aquí, en lugar de crear, ya sabes, agregar enlaces y hacer todo manualmente. De hecho, podemos hacer algo genial donde podamos , podemos crear esto sin ningún problema, ¿verdad? Entonces solo agregamos la barra NaF. Agreguemos esa sección, así que simplemente la copiaré y pegaré esa sección aquí abajo. Tengo el llamado a la acción. Y también vamos a añadir el pie de página. Y entonces se puede ver aquí que esto no está conectado con el cuerpo, pero lo es ahora, pero no lo fue. Vamos al pie de página. Bien. Así que tenemos esa página otra vez, pero en realidad hemos creado, se puede ver en la esquina superior izquierda. Ahora es una caja morada. Eso quiere decir que está en la sección CMS. No es una página estática, está en la sección CMS. Entonces lo que puedo hacer es básicamente empezar a mirar, me pregunto si esta podría ser la mejor manera de hacerlo realmente. , ba, ba, ba, ba. Bien. Vamos a crear un conta, conta separado Entonces vamos a reducir el margen del lado a unos 30. Más o menos. Creo que 30 debería ser bueno. Ninguna. Entonces eso está lleno. Bien, se puede ver cómo se llena toda la pantalla, lo cual es bueno. Y luego podremos jugar con los márgenes y esas cosas y hacer todo ese tipo de cosas. Pero vamos a agregar el bloque CMS a esta C ver aquí. Se llama la lista de colecciones. Entonces simplemente lo dejamos ahí, lo cual es genial. Después haga doble clic, seleccione la fuente, que en este caso, es ejemplos de cartera. Y entonces puedes ver aquí que ahí los cinco artículos que son algo así como elementos marcadores de posición que teníamos antes Ahora bien, si vas a la lista de colecciones y haces clic en cuadrícula, entonces básicamente rompe las cosas para que puedas hacer que se vea bien y profesional. Es más o menos exactamente lo mismo que tenemos a continuación. Ahora, lo que puedes hacer es simplemente copiar este ítem, así que haz clic en el bloque de enlaces. Copia y pega esto en lo anterior. Entonces ahora tienes esto, ya sabes, ve muy, muy, ya sabes, bueno, en realidad no se ve muy bien. Bien, ¿cómo podemos arreglarlo? Porque quiero asegurarme de que podamos arreglar esto juntos. Bien, imagen principal, vamos conectarla a la imagen y luego ver qué pasa. Bien, eso tampoco funcionó. Entonces ahora mismo, vamos a conectar los datos reales y luego ver qué pasa. Entonces solo estamos conectándonos a los diferentes elementos, por ejemplo, tipo de trabajo. H, k. Ah, así que por eso fue por eso que la razón por la que no estaba funcionando es porque la cantidad real de la cantidad de contenido no fue suficiente para llenar todo el espacio. Ah, bien, bien, bien. Y ahora eso tiene sentido. Bien, entonces ahora lo tenemos entonces. Ahora ya lo tenemos. Ahora, todo lo que tenemos que hacer es cambiar el CMS en la parte de atrás en el back-end. Bien, perfecto. Así que en realidad no hubo ningún problema con la plantilla. Entonces, si agregáramos el contenido desde el principio, no hubiéramos tenido ningún problema. La razón por la que tuvimos un problema es porque básicamente terminamos, ya sabes, no teniendo el contenido ahí dentro. Bien. Entonces lo que podemos hacer ahora es simplemente eliminar esto o deshacernos de él porque no necesitamos ambos Bien. Y entonces lo que podemos hacer es agregar algunos elementos al back-end de CMS real, que va a todos estos elementos. Entonces, las imágenes reales, el texto está siendo arrastrado de los ejemplos de cartera en la colección CMS Entonces, eliminemos esos dos. Y agreguemos tres proyectos solo para mostrarte como funciona esto. Es realmente simple y fácil, así que solo sigue adelante. Bien, entonces vamos a reemplazar uno de estos. Bien. Vamos a llamar a esta planta. Y entonces, el slogle generalmente se pueblan, pero obviamente, para este caso, sólo vamos a cambiarlo tipo de trabajo Entonces este es el tipo real de obras o fotografía. Bien. Y luego el texto de la nota publicitaria o Teaser Esto es solo un poco sobre el proyecto real y qué esperar cuando realmente haces clic en él. Bien. Bien, también. Déjanos ir. Así que ahora una vez que realmente terminemos eso, podemos eso ya está poblado el elemento real en la página de la cartera. Entonces ya se editó para nosotros. No tenemos que hacer otra cosa, por eso me encantan los sistemas CMS así y las colecciones y usarlas porque ahorran tanto tiempo. Um, así que, de nuevo, sólo voy a cambiar eso a la cabeza. Vamos a cambiar esto a la fotografía. Cambiemos esto a Me encanta mi tiro en la cabeza. Ahí vamos. Sif. Y luego para el último, vamos a, vamos a hacer simplemente no lo sé. Simplemente elijamos esto Ahí vamos, y luego solo hagamos algo más relacionado con ello. Y obviamente, como con las colecciones CMS, lleva un poco de tiempo acostumbrarse a usarlas. Pero honestamente, en cuanto te acostumbras a usarlos, vas a, como, es una de esas cosas en las que quiero que la aprendas. Estás tan contenta de haberlo hecho, y solo desearías haber aprendido a usarlo antes. Entonces, construyendo tu sitio web, esta manera te va a ayudar a ahorrar tanto tiempo. Bien, entonces ahí están los tres elementos. Así que ahora cuando volvamos a la página del portafolio, puedes ver que la editó, y pero sí, por alguna razón, ésta sigue siendo un poco molesta. Bien. Entonces esto es lo que está pasando. ¿Bien? Todavía nos está dando un poco de problema. Entonces, ¿qué debe haber otra cosa? Debe haber algo más que esté causando un problema. Vamos a resolver problemas y conseguir que esto se solucione. Bien. Vamos al bloque dif. Entonces el bloque dif es lo que más va a estar formateándolo. Ah, k Esta brecha, Bien. Mm. A veces se trata solo de jugar con las cosas y luego volver a ti mismo para resolver las cosas Opciones, funda de ajuste. Mmm Ancho Máx. Eso no es. Bien. Definitivamente hay algo que está provocando que esto no se vea perfecto. Sólo necesito averiguar de qué se trata. Mm. Bien. Bloque Di. G di bloque. Sólo va a tomar un par de minutos llegar a hacer esto bien. Artículo de colección. Bien. Artículo de colección. Creo que definitivamente es el elemento de colección o el bloque div. Es uno de esos. O tal vez sea, tal vez sea la imagen en realidad. Vamos a ver esto. Bien, vamos a jugar. Bien. Ah. Bien. Mmm. que podría haber sido todo, pero ninguno. Bien. Vamos a probar esto. Solo estoy jugueteando ahora mismo, tratando de averiguar cómo hacerlo. Vamos a soplar eso por completo. Así que vamos a recuperar eso. Vamos a poner eso de nuevo. Y simplemente haga clic, comando Z, comando Z, para que eso vuelva a donde lo queríamos. Envoltura de imagen. Ah, es el envoltorio de imagen, quizá. A lo mejor es el envoltorio de imagen. No lo vi antes. A lo mejor no es eso, entonces. A lo mejor es esto. Bien. Bloque Mm. No, no es eso. Flexión. Bloque de enlace. Entonces solo estoy trabajando a través de las opciones. En este punto, solo estoy trabajando a través de las opciones, tratando de averiguar cuál podría ser. Y como puedes hacer eso, entonces puedes empezar a ver lo diferente, Bien. Ah, ahí vamos. Entonces, solo volvamos y veamos cómo se arregló eso. Entonces tenemos el flex de bloqueo. Para. Bloque flexible. Ir al bloque dif. Así que sólo podemos ir al bloque dif. Vamos al bloque dif. Haga clic en el bloque central derecho. Ahí vamos. Entonces, básicamente, el bloque dif se configuró como Flex en lugar de bloque, y simplemente lo arregló literalmente inmediato, así que eso se ve genial. Bien, perfecto. Ahora eso está arreglado. Supongo que el último paso es simplemente empezar a terminar las cosas y terminar las cosas. Y entonces podemos y luego podemos empezar a realmente empezar la fiesta . Se puede ver aquí. Bien. Entonces echemos un vistazo a este pequeño menú desplegable de aquí abajo. Estableciendo esta toma. Entonces puedes ver aquí eso. No se ve muy bien. Ahora bien, si recuerdas de antes, tenemos el ancho establecido en uno, dos, seis. Entonces, si cambiamos eso, eso va a cambiar todo y va a verse 1 millón de veces mejor. Impresionante. ¿Bien? Y nuevamente, podemos usar eso para vincularnos a diferentes cosas, etcétera, etcétera. Pero obviamente, ya te mostramos cómo hacer eso, así no tenemos que pasar por eso otra vez. Bien. Ahora, básicamente tenemos una situación en la que el sitio web está prácticamente hecho. Ya sabes, obviamente, es un sitio web muy básico. No es nada demasiado loco, pero obviamente, vas a pasar mucho más tiempo. Vas a pasar por todo. ¿Realmente necesitamos ese pequeño elemento o no? ¿Necesitamos eso? A lo mejor nosotros solo , uh, podemos cambiar el color si queremos. Podemos cambiar el color o simplemente podemos eliminarlo. Depende completamente de ti. Bien. Ahí vamos. Acabo de cambiar el color real de la sección. Y entonces podemos y luego básicamente podemos pasar a la configuración. Bien, así que vamos a desconectarnos. Vamos a pasar eso. Perfecto. Impresionante impresionante impresionante. Ahí vamos. Bien. Así que ya tenemos eso. Eso se ve bien. Eso se ve bien. Se cuelga al rosa Cambios a nuestro carmesí, lo siento, otra vez, carmesí. Sigue entendiendo eso mal. Carmesí carmesí Ahí vamos. Bien. Bien, k. Así que todo lo demás se ve bien. Obviamente, podemos vincular todos los botones y esas cosas, pero es, simplemente haces clic en él y haces clic en el pequeño diente y luego puedes elegir el botón que quieras o la página a la que quieras ir Todo lo demás se ve bastante bien. Esto de aquí. Obviamente, se puede cambiar el texto, cambiar los colores. De hecho, también puedes hacer una sección CMS para esta sección, si quieres. A veces lo uso si tengo más de tres artículos. Pero por lo general lo que hago aquí, ya que acabo de poner aquí los artículos más populares. Los que quiero que la gente realmente lea, lo que solo ayuda a mantener las cosas bien y organizadas. Bien. Perfecto. Eso ya lo tenemos aquí. Sí, sí, podemos simplemente agregar esto como el CMS si queremos de la misma manera que lo hicimos antes. Pero sí, quiero decir, todo se ve bastante bien. Así que vayamos a la configuración y solo cubramos algunas cosas importantes que deberías estar viendo al terminar tu sitio web, solo renuncia a esto para cargarlo Muy rápido. Bien. El primer lugar esto te va a llevar a la página general. Lo primero que debes hacer es agregar tu fabcon. Ahora, un favicon solo puede tener 32 píxeles por 32 píxeles, y tu clip web tiene que ser de 256 por 256 Con el fabcon y el clip web, mantenlos súper simples porque si son demasiado detallados, o tienen demasiadas cosas que hacer, van a verse realmente estúpidos No se ve muy bien. Así que mantenlos súper simples. Entonces iremos a formularios. Ve a aquí y solo básicamente pon como, perdón, ve aquí y agrega tu dirección de correo electrónico. Esta es la dirección de correo electrónico a la que irán todos sus formularios. Entonces, por ejemplo, si alguien entra en contacto con tu formulario de contactores, aquí es donde irá el correo electrónico, luego asegúrate de hacer clic en Guardar Entonces vayamos a los planes. Entonces, si quieres CMS y yo tengo CMS para cada uno de mis sitios web con Webflow, cuesta $29 al mes facturado mensualmente, es un poco más barato si lo construyes anualmente, pero vale la pena el dinero, porque te ahorra mucho Si no quieres CMS, pero aún quieres un dominio personalizado, entonces la opción básica probablemente sea la mejor para ti. Pero si solo quieres, como un dominio de flujo web, simplemente puedes hacer clic en el plan inicial. El plan de inicio. Entonces obviamente, estoy en el CMS, el paquete CMS. Pero con el plan inicial, la cosa es, como, si no tienes un dominio real conectado a tu sitio web, como agencia, la gente realmente no te va a tomar muy en serio. Entonces eso es eso va a impedir que puedas cobrar mucho dinero. Entonces sí, y luego obviamente, puedes conectar tu dominio y te vas a ir, pero espero que hayas disfrutado viendo cómo se construye este sitio web. Si tiene alguna duda, házmelo saber. Pero sí, pasemos a la siguiente sección del curso, y te veré ahí. 61. (Audio remasterizado y 16: Bien, entonces vamos a estar construyendo este sitio web de comercio electrónico desde cero en Webflow Ahora bien, lo primero que tenemos que hacer es instalar nuestras bibliotecas. Ahora, tengo algunas bibliotecas ya descargadas en este sitio web. Estos son solo mis favoritos, pero puedes elegir los que quieras Los que más me gustan suelen ser los que tienen la mayor selección. Entonces verás aquí que, ya sabes, este tiene como 283 elementos diferentes. Este tiene 226. Este tiene 200. Entonces generalmente voy por estos, solo porque hay tantas opciones. Hay tantas opciones, lo siento. Algunos de los otros no tienen tantas opciones, así que es un poco menos atractivo para mí. Pero luego solo instalas la biblioteca, clic en el sitio web en el que quieres instalarla. Y entonces, creo que para mi, ya no me va a dejar instalar solo porque ya tengo tantos subidos, pero para ti, debería funcionar, y todos son gratis al menos al momento de grabar esto. Así que sí, puedes echarles un vistazo . Vamos a cargar las cosas. Y voy a estar mostrándote cómo crear un sitio web, un sitio web de comercio electrónico, para tu marca o para la marca Ear en tiempo real. No va a tardar mucho. Va a tomar tal vez alrededor 45 minutos a una hora, en general. Y vamos a mostrarte cada uno de los pasos. Va a ser súper fácil. Así que lo primero que vamos a hacer es ir a nuestra biblioteca de oídos y añadir una barra de navegación. Bien, así que agreguemos este Navbar. Y una cosa que decir, y bueno, vamos a agregar una foto también muy rápido. Una cosa que decir es en este punto, literalmente nos estamos enfocando en crear la estructura del sitio web. Así es como empezamos cada vez. La estructura del sitio web es el esqueleto estratégico del sitio web. Sin la estructura, ya sabes, el sitio web puede ser súper bonito, pero la estructura es la estrategia, ¿bien? Entonces tenemos que estar bien, creo que para cualquier sitio web de comercio, esto podría funcionar, pero también quiero una imagen que realmente se vea la parte, ¿sabes? Vamos a probar este. A ver si esto funciona. Pero creo que esto es un poco complicado. Mm. Sí, no es así, no estoy seguro. No estoy seguro si me gusta o no. Vamos a quitarle esto, eliminemos esto porque no quiero que sea demasiado complicado. Bien, esto tiene muchas y muchas imágenes diferentes ahí dentro. Bien, definitivamente no quiero eso. Definitivamente definitivamente no quiero eso. Bien. Sí, cambiemos eso porque no queremos que sea solo queremos una imagen. ¿Cómo podemos encontrar una sola imagen? Vamos a encontrar un buen héroe con una sola imagen. Esta suele ser una sección bastante genial para ese tipo de cosas. Me gusta esta biblioteca para ese tipo de para este tipo de minimus cincos, pero no parece haber nada ahí Vamos a vamos a ir a estos. Ah. Ahí vamos. Eso se ve bastante genial. Mm, probemos eso. Vamos a probar eso. Eso se ve bastante bien. Impresionante. Bien, no estoy segura cómo me gusta que esté del lado derecho. Creo que la alineación de la mano derecha, si tomaste la lección de alineación antes en el curso, se ve muy raro. Creo que voy a llevar esta orden a la izquierda porque simplemente se ve mejor. Entonces tomemos esto o a la izquierda. Y simplemente haga clic en este elemento y simplemente tome a la izquierda una línea, dejó la línea, dejó la línea, tome este botón sobre. Ahí vamos. Perfecto. Quiero decir, eso se ve diez veces mejor. La razón por la que eso se ve mejor es porque la mayoría de las culturas leen de izquierda a derecha de arriba a abajo. Así que es más cómodo. Es más familiar para nosotros. Sé que algunas religiones y algunas otras culturas leen de manera diferente, pero para la gran mayoría de los casos, ya sabes, esta va a ser la mejor opción para ti. Entonces agreguemos otra sección. Entonces, si recuerdas, cuando estamos creando él un sitio web, la página principal debería responder a tres preguntas. Número uno, estoy en el lugar correcto. Entonces, en la primera sección, la sección de héroes, hay que decirles que están en el lugar correcto. No vas a perder el tiempo. La segunda sección, que acabamos de agregar ahí, es como una sección destacada, ¿verdad? Es como construir confianza, como hemos aparecido en, ya sabes, este lugar, este lugar, este lugar, y esto va a mostrar que eres serio y que eres creíble. La siguiente sección va a ser, ya sabes, definitiva para el sitio web de Ecommerce, pero para otro sitio web estaría bien, ¿qué me puedes ofrecer? ¿Qué puedes hacer realmente por mí? Entonces, para un punto de vista de Ecommerce, Estamos bien, solo agreguemos esto a Auto Sí, lo que encontrarás es con algunos y limitemos esto a cuatro. Con algunas de las bibliotecas que usas, siempre les gusta establecer ciertos elementos en 126 por alguna razón. No sé por qué lo hacen. No me preguntes, yo no construí estas bibliotecas, pero a veces hay que ajustar el ancho de 126 a ordenar. Entonces, si algo no se ve bien, entonces solo échale un vistazo, y esa es probablemente la respuesta. Entonces sí, ¿qué estaba diciendo de la sección? Entonces sí, primera sección, estoy en el lugar correcto. Tienes que demostrarles que están en el lugar correcto desde el primero, segundo, aterrizarán en tu sitio web. En segundo lugar, ¿puedo confiar en ti? Esta va a ser una sección destacada o, tal vez opiniones de clientes o algo así. Entonces, por último, ¿qué puedes hacer realmente por mí? Entonces agrega algún tipo de producto, agrega algún tipo de, ya sabes, servicio o lo que sea. Obviamente, para cualquier sitio web de comercio, queremos mostrar los productos. Y por el momento, estamos usando una sección de conocer a nuestro equipo. Pero vamos a cambiar eso en una sección de productos muy rápido. Recuerda, por el momento, literalmente estamos enfocados en el a ver aquí, esto es 126 auto, y se ve mucho mejor. Por el momento, no nos estamos enfocando en el texto, no nos estamos enfocando en las imágenes Se puede ver esa imagen ahí tiene un poco de relleno, así que simplemente nos lo quitamos. Solo nos estamos enfocando en la estructura real del sitio web. La historia que estamos tratando de contar. No queremos quedar atrapados en, ya sabes, crear muchas imágenes diferentes y cambiar demasiado las imágenes en este momento. Por el momento, solo nos estamos enfocando en poner en marcha la estructura del sitio web. Porque después, esto nos va a ayudar a terminar las cosas diez veces más rápido, y literalmente vamos a estar construyendo un sitio web en tiempo real en 45 minutos a una hora en este mismo video. Entonces, voy a mostrarles que es posible. Bien. Así que tenemos nuestro primer par de secciones en la página principal. Agreguemos una sección de bloque en la parte inferior solo para que podamos mostrarla. Bien, para que veas que esto se ve un poco raro, ¿verdad? Así se puede ver que el que se ve un poco raro. Cambiemos eso a cero. Bah, bah, bah, bah. Se puede ver que el headle Disculpe. El titular es 126. Cambia ese auto. Bueno. Bien. Esto también es 126. Cambiemos eso. Bien. Perfecto. Cambiemos el margen sobre esto a cero. Ideal. Tenemos la sección de bloque, tenemos esto, esto es esto se ve realmente increíble. Me encanta cómo se ve esto. Bien. Cambiemos un poco el tamaño de esto solo para que consigamos la estructura correcta. Quiero decir, eso se ve bastante bien. Desde un punto de vista estructural se ve bastante bien bien. Agreguemos un ejemplo de bloque. Echemos un vistazo a esto. A una página de bloque. Nuevamente, sólo vamos a agregar una Navbar y un pie de página. Vamos a crearme. Vamos a crear una Navbar universal y un pie de página más adelante en el curso. Así que no te preocupes. Te voy a enseñar cómo hacerlo. Yo más adelante en este video, ¿debo decir? Así que no te preocupes por eso. Te voy a enseñar cómo hacer eso. Y lo que eso va a hacer es que te va a permitir cambiar algo en una página, y tu Navbar y foto se llenarán automáticamente en cada Entonces sí, vamos a sumergirlo para agregar. Bien, creo que estos son bastante buenos. De veras, me gusta mucho la estructura. Creo que esta es la mejor de todas las que he visto, y he usado bastante, pero esta parece ser la más profesional y atractiva. Asegúrate de que esté todo el camino a la izquierda para que esté conectado al cuerpo del sitio web y no a la sección. Bien. Y ahora nos vamos. Bien, así que eso ya está todo construido para nosotros. Ya lo hemos hecho. Tal vez podamos quitarnos algunas cosas, así que tal vez podamos quitarnos a un par de esos contribuyentes porque hay demasiados para ser honestos. Pero sí, en lo que respecta al blog real, lo que haremos es configurar un CMS para el blog o los productos un poco más adelante en este video, que pueda mostrarles cómo hacerlo. Como puedes ver aquí, un CMS es básicamente como una colección de cosas similares. Entonces por ejemplo, en este caso, artículos o productos, y se puede almacenar información. Entonces por ejemplo, aquí Mira, puedes almacenar información para que cree páginas únicas para ese artículo o producto en particular sin que tengas que crear una nueva página desde cero. ¿Bien? Te voy a mostrar cómo hacer esto más adelante, pero es súper súper útil. La razón por la que es súper útil es que te permite crear varias páginas en como una fracción del tiempo, y todas se ven exactamente iguales. Así que todos están perfectamente en la marca. No tienes que preocuparte por el tamaño ni nada por el estilo. Súper súper benéfico. Me encanta usar el sistema CMS. Y te voy a contar un poco más al respecto un poco más adelante, pero solo pienso que es súper útil, realmente útil. Puedes ver aquí, lo uso para los artículos para el sitio web de Lancaster Academy. Lo usamos para páginas de productos. Lo usamos para mi agencia de branding. Lo usamos para el proyecto real, como los proyectos reales en los estudios de caso que creamos. Pero aquí solo lo usamos para contenido. Y es súper útil, porque no tienes que administrar varias páginas, solo tienes que administrar una sola colección, lo cual es realmente genial. Te voy a contar un poco más al respecto un poco más tarde, pero solo quiero destacar lo importante que es. Creo que tengo como 47 artículos diferentes en este momento. Y obviamente, tenemos la página principal del producto, el artículo real, si aparece o no, no tiene que ser tan complicado para ti personalmente. No tienes que hacerlo súper complicado. Pero en general, lo único que vas a usar de todas estas, para ser honesto cuando empiezas por primera vez es texto plano, texto enriquecido, una imagen, tal vez un video, y eso es prácticamente todo. Realmente no vas a necesitar nada más que eso para ser completamente brutalmente honesto Y luego Todo lo que haces es simplemente conectar el título. título y a las Ls, por ejemplo, aquí, hemos conectado el tema del artículo a esto, así que en este caso, es branding, el re time. Entonces solo pequeños detalles que van a cambiar a lo largo de cada artículo, pero puedes un producto o lo que sea, y luego básicamente puedes agregarlo a la página sin agregarlo realmente a la página. Entonces solo lo escribes y simplemente lo hace por ti, lo cual es súper inteligente. Pero puedes ver aquí que, ya sabes, para mis artículos, tenemos ya sabes, tal vez alrededor de 15 elementos diferentes que están trabajando todos juntos. Y no tengo que volver a construirlas por separado una y otra vez. Yo sólo lo hago una vez, y eso es todo. Así que volvamos a sumergirnos en la construcción de nuestro sitio web de comercio electrónico. Y luego hablaremos un poco más sobre los CMSs. Pero voy a las colecciones CMS más tarde. Pero por ahora, vamos, eliminemos algunos de estos porque no creo que necesitemos tres colaboradores. Eliminemos los íconos de las redes sociales. Echemos un vistazo a las otras páginas que podemos crear. Bien bien. Vamos a crear la página de artículos del blog. Entonces esa fue la página del artículo real. Esta página es todos los artículos juntos. Entonces esto es, ya sabes, todos los diferentes artículos que tienes en tu sitio web en una sola página para que la gente realmente pueda encontrarlo, ¿de acuerdo? Entonces encuentro tu artículo. Debería ver y encontrar el mejor artículo para ellos. Creo que esta probablemente va a ser la mejor opción. Echemos un vistazo a unos cuantos más solo para ver. Pero pienso para, Para ser completamente honesto, creo que esto podría funcionar, pero también Um, sí, tiendo a mantenerlo bastante simple. Tiendo a ir por lo mismo los mismos diseños todo el tiempo, solo porque se ven muy bien. Al igual que, este personalmente es como mi favorito personal. Lo uso para todos mis sitios web, para ser honestos. Se ve tan bien. Puedes ver aquí, se ve un poco raro así que puedes ver que es un problema de uno, 26 otra vez. Así que simplemente haz clic en esto. Esto puede que en realidad no te suceda, pero siempre me pasa por alguna razón. No estoy seguro si esa es quizás alguna configuración en mi sitio web, pero sí, solo para tenerlo en cuenta. Nuevamente, 126. Yo literalmente voy a marcar el problema 126, porque es literalmente el problema que más surge. Ahí vamos, pero no tarda mucho en arreglarlo, así que eso está todo bien. Bien. ¿Eso es algo bueno? Sí. ¿Realmente necesitamos la opción de tabulación anterior? Tal vez, pero también tal vez no, podría simplemente borrar eso un poco más tarde. Bien. Bien, pero ya lo tenemos. Entonces hagamos la página Contact Dust. Y otra vez, chicos, como, ¿recuerdas que en este momento solo estamos construyendo la estructura del sitio web? ¿ No estamos haciendo otra cosa? No nos importan los colores, no nos importa la fotografía, no nos importan las imágenes, no nos importa el texto No nos importa nada aparte de la estructura del sitio web. Lo que eso va a hacer es que nos va a ayudar a construir el sitio web, así que haz como el 80% del trabajo muy rápido para que luego podamos enfocarnos en los otros aspectos del sitio web. Entonces por ejemplo, las imágenes, por ejemplo, el copywriting, porque el copyrightting debería llegar último en mi opinión, porque eso es lo que realmente debería tomar Se puede ver aquí de nuevo, 126 problema. Eso literalmente sucede demasiado. Um si, solo construir la estructura del sitio web solo te ayuda a ver el sitio web, como puede verse. Y luego puedes resolver las cosas y cambiar las cosas y las cosas de teta a medida que te sientas en forma. Pero solo hacer eso, ya sabes, muy temprano es muy, muy útil. Entonces la política de privacidad y, ya sabes, entrega y envío y, ya sabes, ya sabes, descargos de responsabilidad y esas cosas, ese tipo de páginas son realmente fáciles de crear Y, Básicamente, creo que la mejor manera de hacerlo en realidad no es mediante el uso de las plantillas, sino simplemente agregando los propios textos. Creo que solo hay que mantenerlo súper simple. Tratando de complicarlo en exceso. Simplemente va a dejar a la gente un poco confundida y es simplemente innecesario porque seamos sinceros. Quien realmente lee las secciones de privacidad de todos modos. La política de privacidad, los descargos de responsabilidad, ya sabes, todas esas cosas. Simplemente está ahí para cuestiones legales legales. Entonces términos y condiciones y esas cosas, solo puedes agregar los elementos por separado. Entonces agrega una sección. Después solo agrega contenedor. Bueno, puedes agregar antes de primero, pero creo que agregar el contenedor es mejor solo porque lo hace receptivo. Sí, entonces agregamos un encabezado. Y luego podemos agregar el um, podemos probarlo con un párrafo, pero para ser honestos, solo quiero mostrarte la diferencia entre agregarlo con un párrafo y agregarlo con texto enriquecido solo para que puedas entender la diferencia entre los dos elementos. Bien, entonces tenemos el encabezado, pon política de privacidad. Y sólo para hacérselo saber, he agregado un enlace dentro del curso real. Deberías poder encontrarlo en los diferentes enlaces a la política de privacidad, haciendo consiguiendo políticas de envío y devoluciones gratis , todas esas cosas. Y suele ser más o menos el mismo sitio web. Pero es simplemente súper útil tener todos esos enlaces. Simplemente agregue todos obviamente los detalles de su sitio web y esas cosas. Y entonces puedes, um, sí, solo sacar todas tus cosas legales del camino. Ellos sí intentan cobrarte por, ya sabes, como, ¿documentos oficiales? ¿Los necesitas al inicio de tu negocio? Yo discutiría que no. Creo, ya sabes, si estás creando estos para un cliente o estás creando el sitio web para ti mismo, y recién estás comenzando, ¿realmente necesitas todas estas grandes cosas legales en su lugar? Ya sabes, a lo mejor estás en un sector en particular donde estás bien. Así que sí, está tratando de que compremos realmente cosas, pero no las necesitamos. Entonces solo hacemos clic, No, no quiero una política de privacidad profesional, y luego solo la generamos. Ahora aquí, en realidad no necesitas poner tu dirección de correo electrónico correcta. En algunos casos lo haces, pero en este, no lo haces porque puedes simplemente hay un par de formas diferentes de agregar esto a tu sitio web. Entonces, la primera forma es intentar copiar y pegar esto. Ahora, encontré que en mi en Safari, a veces esto no funciona, y a veces en Chroma no funciona Así que a veces puedes copiar al portapapeles. Y lo que esto básicamente hace es, esto básicamente significaría incrustar los datos, que es que si no estás seguro de lo que eso significa, no te preocupes Se trata de HTML y código. No necesitas saber cómo codificar, pero básicamente puedes copiar ese código en una caja de inserción dentro de Webflow, que es algo así como donde vas a agregar código personalizado No hace falta que aprendas a hacer eso. Solo quiero mostrarte el correo electrónico que recibes cuando en realidad te envían la política de privacidad solo para que puedas verla. Bien, ahí tienes. Así que básicamente solo te enviarán de vuelta a la misma página. Entonces lo que generalmente me gusta hacer. Pero una cosa buena de eso es que en realidad tiene todos los enlaces a los diferentes otros sitios web que tienen, así que si necesitas algo más, que básicamente puedes conseguirlo ahí, realmente, muy útil. Entonces acabas de revisar la parte inferior del correo electrónico, y debería tener un enlace a todos los diferentes formularios y políticas que puedan crear para ti. Ahora bien, la forma en que me gusta agregar la política al sitio web es básicamente generando archivos. Entonces puedes generar un archivo doc X, que básicamente es solo un archivo word. Y luego cuando la abres, It , um, déjame generar esto en Chrome. Por alguna razón, se atornilla un poco con safari. C, ábrela. Perfecto. Entonces, cuando realmente copiamos y perforamos esto en el sitio web, si lo hacemos en una sección de párrafo, entonces esta es la sección aquí. Si lo hacemos en una sección de párrafo, se ve terrible, ¿verdad? No está formateado, y la razón de eso es que las secciones de párrafo no están pensadas para grandes bloques de texto. Están pensadas para, ya sabes, una pequeña cantidad de texto debajo un encabezado o un poco de texto, ya sabes, tal vez Debajo de un video, por ejemplo, No está pensado para largos bloques de texto. Entonces, lo que realmente necesitamos usar es algo llamado bloque de texto enriquecido. Entonces básicamente agregamos esto aquí. Se puede ver que esto es muy diferente. Y cuando copiamos y pegamos exactamente el mismo texto, está todo formateado, y se ve mucho mejor. Esto es, ya sabes, mucho más fácil. Ya sabes, se puede ver que el espaciado necesita un poco de trabajo, pero en general, se ve mucho mejor, y ya sabes, puedes ser que puedes ser mucho más feliz con esto Ahora, algo a tener en cuenta cuando realmente estás usando estos proveedores de pólizas gratuitos y creadores de políticas, ya sabes, documentos. ¿Hay a veces agregar política gratuita privacidad tipo de política de privacidad gratuita sitio web anuncio artículo consejos. Entonces se enlazarán a su propio sitio web, lo cual no queremos hacer. Así que siéntete libre de eliminar eso. Pero, sí, básicamente entiendes, ya sabes, solo tómate un tiempo para leer eso y solo asegúrate de que no haya nada ahí dentro que se diga que no deba ser dicho por ti o tu compañía. Bien, entonces la página A US para cualquier sitio web de comercio. Nuevamente, agregaremos la barra NAF. Vamos a añadir el forraje. Y recuerda, vamos a estar creando barras NAF universales y pies de página universales un poco más adelante para que sea lo mismo en todo el sitio web Y nuevamente, ahora mismo nos centraremos en la estructura. Solo tenlo en cuenta. Sé que el sitio web en este momento no se parece a ningún sitio web de comercio, pero al final, lo hará. Y sólo va a tomar como, ya sabes, como, 45 minutos a una hora. Bien, entonces agreguemos Sección aquí. Entonces, la página Acerca de nosotros para el sitio web de comercio electrónico N necesita contar una historia, ¿de acuerdo? Le estamos diciendo a la gente por qué deberías comprarnos porque hay toneladas de otras personas o marcas que puedes comprar de prácticamente el mismo producto exacto. Ya sabes, No muchos productos son muy únicos. Entonces, ¿por qué deberías comprarnos? ¿Qué nos hace especiales? Podemos hacer que nuestra marca parezca más especial contando una historia. Y esta es una de las cosas más poderosas. Entonces, si vas a, por ejemplo, página web de Rolex, ya sabes, cuentan una gran historia en lo que respecta a cada uno de sus relojes, y , ya sabes, solo se ve, ya sabes, que las imágenes y todo Simplemente tiene mucho sentido. Y puedes ver por qué son una marca premium. Para este sitio web, obviamente, ya sabes, no vamos a tener imágenes de Rolex, pero definitivamente aún podemos contar una historia Entonces lo que estoy tratando de hacer aquí es, voy a crear una pequeña página de producto. Entonces la primera sección es la sección Haro. Vamos a contar un poco veremos un poquito sobre lo que nos hace únicos ahí. Y entonces vamos a agregar aquí una sección para los productos. Ahora, podemos usar esta sección de equipo. Eso está bien. Tiene una estructura realmente genial. Sólo vamos a quitarnos estos elementos. Aquí. Bien. Sólo vamos a despegar. Sí. El espaciado aquí es bastante malo, así que vamos a cambiar eso hacia arriba. Así que en realidad no necesitamos todo de esta manera. Solo vamos a ser, de nuevo, a, tomemos la u tomemos primero lo que haces, solo para que sea sencillo para ti. Bien. En primer lugar, arreglemos la lista para que así podamos obtener las cosas cuatro por bien, solo quiero cuatro artículos. Yo sólo quiero cuatro productos. Así que en realidad no quiero, ya sabes, toneladas de toneladas de productos ahí. Así que vamos a volver a agregar estos en una sección. Bien. Entonces podemos agregar un contenedor. Y entonces, en realidad, tal vez ni siquiera necesitemos hacer eso. Estoy tratando de pensar la forma más fácil de hacer esto por ti. Bien. Um, creo que simplemente mantenemos las cosas simples, en realidad. Creo que simplemente mantenemos las cosas simples. Bien. Vamos, uh, esto. Tengamos esto aquí. Esta grilla. Bien. En realidad tampoco creo que esta sea la mejor manera de hacerlo. Bien. Entonces ahora vamos a agregar. Entonces ahora vamos a agregar algunos productos. Entonces volvamos a tomar la sección de equipos. Sé un poco creativo. Bien. Entonces obviamente, el formateo de esto es base. Vamos a despegar aquí que va a ir que se ve diez veces mejor. Vamos a quitarnos un poco de esto. En realidad, vamos a quitarnos estos botones. Vamos a quitar el espaciado. Tener los ocho productos es generalmente bastante, así que vamos a llevarnos esto. Bien. Ahí vamos. Cae en abundancia. Obviamente no necesitamos los íconos de las redes sociales porque eso es una tontería. Veamos Bien, eso se ve mucho mejor. Y obviamente, todavía parece una página tam ahora mismo, pero en realidad lo estamos, vamos a agregar estos de nuevo. Sí, eso tiene mucho más sentido. Bien. Sí, definitivamente no queremos íconos de redes sociales. Pero veamos El hecho de que esto es obviamente una sección de equipo, pero vamos a crearla en una sección de productos. Entonces, cuando estés eligiendo secciones, no mires las imágenes reales en la sección Mira más en busca más de los elementos reales que están en la sección y el formato. Porque siempre puedes tomar cosas y poner cosas como, ya sabes, quitar cosas, agregar cosas. Pero no sé si me gusta esta sección de preguntas frecuentes. Sí, me voy a deshacer de eso, creo. Esa sección de preguntas frecuentes no es mi favorita. Vamos a conseguir uno mejor porque definitivamente hay mejores por ahí. Bien, vamos a bom bom. Agreguemos esto aquí. Creo que esto va a quedar mucho más limpio y mucho mejor. Ahí vamos. Eso se ve. Eso se ve mucho mejor. más limpio, mucho más fácil de leer. Perfecto. Y este tipo de animación literalmente tomaría a alguien, ya sabes, tal vez una hora al menos o 2 horas menos para hacer este tipo de animación, mientras que, ya sabes, como, la respuesta en la sección de preguntas frecuentes es, ya sabes, algo así como revelarse. Literalmente toma como 2 segundos hacer aquí. Es tan fácil. Y eso es lo que hace que el flujo web sea tan grande. Eso es lo que literalmente hace que el elemento de creación de sitios web sea tan rápido, y te va a ahorrar mucho tiempo. Bien. Bien, agreguemos esto aquí. Entonces otra vez, tenemos la sección, la sección se ve bien. Vamos a agregar todas las diferentes, ya sabes, imágenes y cosas más adelante. Pero por el momento, solo nos estamos enfocando en las estructuras de sección, ¿de acuerdo? La estructura de las páginas. Bien. Ahora vayamos a la parte interesante y agreguemos una página de producto. Agreguemos una página de producto real y veamos cómo se va a desarrollar esto. Porque una cosa una cosa sobre el piso web especie de las bibliotecas y plantillas de piso web, no tienen una plantilla enfocada en el producto o todavía no tienen una plantilla enfocada en el producto o el comercio electrónico. Pueden tener en el futuro, cuando veas esto, pueden tenerlo. Pero vamos a construir una página de producto aquí usando esta plantilla de blog. Y esta es literalmente la misma plantilla de artículo que hemos usado antes. Pero creo que simplemente tiene una estructura realmente genial. Creo que si borramos estas cosas aquí, lo cual, creo que eso solo se ve un poco mejor. Probablemente podamos llevarnos eso , para ser honestos. No estoy seguro de si esos íconos sociales se ven bien. Pero sí, vamos a sacar esto de verdad y llevémoslo. Bien. Entonces lo que estamos haciendo ahora es, vamos a construir la sección de productos. Vamos a traer todo de vuelta solo para poder mostrarte exactamente cómo quiero hacerlo. Así que ahí vamos a agregar el artículo del producto. Vamos a tomar esto Uh, vamos a llevarnos estas cosas, creo. Aquí puedes ver cómo le gustan los pergaminos, y simplemente se ve muy bien cuando le gustan los pergaminos hacia abajo Creo que lo que podemos hacer es que probablemente podamos agregar el título aquí. Así que en realidad no necesitamos esa sección superior. Sólo podemos agregar el título real. A continuación, agregue el Mm mm mm. Bien, deshazte de eso. Así que acabamos de salir con la parte inferior, que se desplaza muy bien A lo mejor eso es un poco demasiado alto. Agreguemos dos. Bien. Es un poco mejor. Y tal vez se esté preguntando, ¿cómo se ve esto como una página de producto? Confía en mí. Va a quedar increíble. Confíe en el proceso. Entonces, vamos a deshacernos de eso. Nos vamos a deshacer de todas esas cosas. Todo lo que queremos es la función real detrás de las construcciones, ¿verdad? La estructura, la página propiamente dicha. Entonces queremos agregar una pequeña grilla aquí. Disculpe. Y luego vamos a empezar a agregar imágenes. Para que podamos deshacernos de todo este texto. O sea, puedes guardar el texto ahí si quieres, pero para el propósito de esto, no quiero ningún texto. Quiero que esto sea todo visual. Bien. Agreguemos una imagen aquí. ¿Dónde está la imagen? Sólo tienes que escribir imagen. ¿Bien? Bien, no estoy seguro de lo que pasó ahí , pero, luego solo copia y pega esto, quítate el relleno. Copia y pega esto en el bloque dip, haz de este un 100%. Perfecto. Ahí vamos. Así que mientras la imagen sea cuadrada, va a verse cuadrada. Bien, entonces solo pega eso. Y entonces básicamente lo que tenemos aquí es, mira, tenemos lo real, tenemos el título real. Entonces el nombre del producto, el precio en el lado izquierdo, que podemos editar en un minuto. Pero luego tenemos una buena racha de imágenes de desplazamiento , que se ve genial Se ve muy elegante. Se ve realmente genial. Entonces, quiero decir, Esto se ve bien. Estoy emocionada. ¿Esto se ve mejor? Dependiendo. Dependiendo del tipo de producto que estés vendiendo, podrías simplemente poner, ya sabes, la cuadrícula como una columna. Pero creo que para este caso, sólo voy a mantenerlo como 222. Bien. Empecemos a seguir jugando con la brecha. Entonces solo estoy agregando una clase diferente, así que, ya sabes, puedes hacer esto como quieras, pero solo estoy agregando un poco de hueco a cada uno de los elementos en el lado izquierdo. Entonces tengo el título, entonces la página del producto real, entonces el encabezado. Entonces tengo un poco de párrafo solo para básicamente explicar un poco sobre el producto. Entonces tengo inlate eso en realidad, entonces tengo el precio, y entonces todo lo que necesito ahora es como un botón, ¿verdad Al igual que un botón de compra, que puedo agregar a continuación. Bien, entonces copia delt y luego solo pégalo en esa sección Y entonces sólo puedo poner a estas alturas, obviamente, no así. Bien. Y entonces todo lo que necesito hacer es agregar Ahí vamos. Perfecto. Perfecto, perfecto. Perfecto. Bien. Quiero decir, eso todavía se ve absolutamente terrible, pero va a quedar mejor. Confío en mí. Bien. Podemos averiguar cómo se ven las cosas y cosas más adelante, pero en cuanto a funcionalidad, parece una página de gran apariencia. Bien. Bien. ¿Qué más tenemos que hacer aquí Entonces creo que creo que eso es más o menos creo que eso es más o menos todo. A lo mejor Mm, a lo mejor añadimos algo justo al fondo. A lo mejor agregamos, como, como una sección de productos adicionales, tal vez. Eso podría ser genial. Así que vamos a ver eso. Por encima de ese vagabundo. Echemos un vistazo a eso a continuación. De nuevo, así que aquí, se puede ver que es el mismo problema. Y además, lo que voy a mostrarte cómo hacer más adelante es usar la función de componentes en flujo web donde básicamente puedes crear puedes crear un elemento a universal, que cambia a lo largo de todo el sitio web. Entonces lo vamos a usar para el Nappar. Lo vamos a usar para el Pie de Página. También lo vamos a usar para los productos también. Entonces, por ejemplo, si tienes cuatro productos que estás tratando de vender, a, ya sabes, a una audiencia específica, ya sabes, o durante una época específica del año. Usted puede cambiar los productos, así que los cuatro productos, usted puede cambiarlos, y va a cambiar en todo el sitio. Para que no tengas que cambiar cada página, lo cual es súper súper útil. Y entonces te voy a mostrar cómo hacer eso un poco más adelante en el video, pero por ahora, solo estad atentos, y entraremos en esto. Entonces aquí, solo vamos a agregar un pequeño llamado a la acción a continuación, solo para que se vea un poco más profesional. Y luego hablemos un poco de mirada. Echemos un pequeño vistazo. 62. Construcción de sitios web: sitio web de comercio electrónico (segunda parte): Aquí. Bien. Así que ahora estamos revisando todas las páginas. Tenemos todas las páginas, aproximadamente donde queremos que estén. Empecemos en realidad, ya sabes, cambiar las cosas ahora y en realidad a diseñar cosas. Así que sólo voy a agregar algunas imágenes que como que he reunido, sólo para algo acelerar un poco las cosas, supongo. Y así vamos a cambiar primero el logo. Ahora bien, esto no parece un sitio web de comercio electrónico en este momento, pero al final va a parecerse mucho más a un sitio web de comercio electrónico. Confía en mí. ¿Bien? Entonces vamos a agregar esto primero. Solo agreguemos esto aquí. Entonces podemos cambiar esto. Esto parece que se ha estirado un poco por alguna razón. Vamos a automatizar eso. Max Ingenio. Bien. No estoy seguro de por qué se ve un poco raro. Déjame hacer clic en eso otra vez. Bien, es el relleno en realidad ahí vamos. Para que puedas ver la red acolchada para squash. Ahí vamos. Eso se ve mucho mejor. Impresionante. Entonces sí, eso lo tenemos, lo cual es perfecto. Y luego Todo lo que tenemos que hacer es simplemente echar un vistazo a los otros elementos ahora. Entonces ahora lo que básicamente tenemos es que tenemos la estructura completa del sitio web hecha. Ahora lo que tenemos que hacer es simplemente organizar los otros elementos del sitio web. Entonces, por ejemplo, cambiando las fuentes, y puedes tomar todo el tiempo que quieras jugar con esto y realmente conseguir algo con lo que estés súper súper contento. Pero para ser honestos, como, esta es la parte más divertida. Al igual que has hecho la estructura del sitio web, que es el mayor trabajo para ser honesto, como poner las páginas del sitio web estructuralmente en su lugar Ahora es la parte divertida. Ahora se llega a experimentar con las cosas, se llega a crear, ya sabes, di diferentes versiones. Se llega a agregar diferentes imágenes, llega a escribir la copia Esta es la parte que me encanta. Literalmente podría pasar todo el día solo construyendo un sitio web por diversión, ¿sabes? Bien, vamos a jugar un poco con esto. Sólo estoy cambiando las fuentes y esas cosas. Sólo estoy jugando. PT S parece decente normal 400 pesos. Eso suena bien. El, sólo estoy cambiando los colores. Solo estoy jugando solo para ver qué se ve bien. Yo sólo voy a ir con, como, un bonito tema en blanco y negro. me gusta cómo cuando Sin embargo, me gusta cómo cuando me pongo sobre el botón en la parte superior, se vuelve un poco a esto, como, una especie de verde muy oscuro, este verde realmente elegante Bien. Bien, k. Bien. Bien. Ahora voy a cambiar esto. Así que sólo voy a enlazar. Simplemente puedes ir a la configuración y cambiar tu logotipo para volver a la página de inicio. Eso es bastante estándar. Obviamente también puedes enlazar todas las otras páginas hacia arriba. Obviamente no voy a pasar por todos esos contigo, pero puedes hacerlo por tu cuenta. siguiente paso es básicamente empezar a buscar cambiar el pozo, crear los componentes, para que podamos empezar a hacer nuestros elementos internacionales. Entonces por ejemplo, aquí, ya ves como eso es verde. Eso básicamente significa que la barra de NAF va a ser la misma en todo el sitio web Vamos a hacer exactamente lo mismo con el pie de página. Así que vamos a conseguirla perfecta primero. Vamos a simplemente de, retrasar que borre eso. Eliminar de eliminar. Bien perfecto. Ahí vamos. Ahí no hay relleno, perfecto. Y luego todo lo que tenemos que hacer Vamos a agregar el agregar la página de inicio. Quítate eso. Oh, en realidad, eso es que en realidad es muy, muy grande. ¿Por qué es tan grande? Tan loco. ¿Por qué es tan grande? En realidad podría volver a poner eso a 126. En realidad quiero un problema de 126 ahí. Bien, hagámoslo. Borremos eso. Yo solo lo quiero agradable y limpio. No lo quiero muy ocupado. Obviamente, puedes cambiar el texto en la parte inferior si realmente quieres, pero como creas un componente es simplemente seleccionar el elemento, que quieres que sea el mismo en toda la web. Haga clic en, cree un nuevo componente y luego simplemente asígnele un nombre y luego haga clic en crear. Y luego en cuanto se vuelve verde, sabes que es lo mismo en todo el sitio web. Así que puedes ver aquí, puedes ver aquí. Vamos a usarlo de nuevo para los productos. Pero sí, solo por ahora, solo ten en cuenta que esto te va a ahorrar mucho tiempo. Bien, comencemos a jugar con las imágenes y a poner las cosas en su lugar Entonces tenemos esta imagen aquí, lo cual es genial. Otra vez, pon eso en su lugar aquí. Bien, eso se ve bien. Obviamente, base de monedas y todo ese tipo de cosas. No queremos eso ahí, así que vamos a cambiar estos Sí, vamos a cambiar un poco los de alrededor. Para que podamos tener, como, destacados, como destacados en el correo diario, CBS, New York Times, solo para darle un poco de credibilidad Bien, eso se ve bien. Bien. Entonces podemos comenzar a agregar. Obviamente, podemos cambiar los textos y esas cosas. Podemos, ya sabes, esto es obviamente, ya sabes, no voy a pasar por el aspecto de redacción, pero, ya sabes, obviamente, puedes Organizar las cosas como quieras Y además, cuando estés diseñando tu sitio web, asegúrate de usar los demás elementos del curso, como, por ejemplo, las lecciones anteriores sobre, ya sabes, diseño de sitios web, en, ya sabes, flujo web, ya sabes, como el curso acelerado sobre elementos de flujo web, para responder a tus preguntas para obtener las respuestas que necesitas y para que tu sitio web vea y sentir, como, por ejemplo, cómo usar el texto, ya sabes, los diferentes tipos de tipografía, ya sabes, cómo crear tu paleta de colores, cómo usar tu paleta de colores Aquí, solo voy a editar un poco estas esquinas para que coincida con el botón en la esquina superior derecha. Bien. Perfecto. Bien, empecemos a sumergirnos en esta sección, y vamos a crear nuestra pequeña variedad de productos. Bien, genial. Entonces agreguemos cuatro. Perfecto. Ahí vamos. Entonces. Hagamos esto súper simple. Así que ahí tenemos el sol. Impresionante, increíble, increíble. Ahí vamos, ahí vamos, ahí vamos. Bien, nuevos lanzamientos. Y obviamente, puedes poner lo que quieras, pero esto es solo, bien, solo agreguemos algunas imágenes. Solo agreguemos algunas bolsas. Esto es para una marca de moda, alguna fotografía de arena. Una cosa también sobre, si estás construyendo una marca de comercio electrónico y quieres como el El sitio web se ve realmente genial. La fotografía de tu producto es literalmente lo más importante. Es más o menos lo más importante si quieres vender cualquier cosa. Y una cosa que he encontrado, que es tan súper beneficiosa es encontrar, como un gris muy claro o un azul muy claro y usarlo como color de fondo en lugar de blanco, solo para que como color de fondo en lugar de blanco, parezca que solo ayuda a enmarcar las cosas y hacer que las cosas vean súper profesionales. Obviamente, entonces puedes, ya sabes, agregar el nombre del producto y hacer todo ese tipo de cosas. No voy a perder tu tiempo y pasar por todo eso. Pero y mira aquí cómo, ya sabes, tenemos los diferentes productos ahora todos arreglados. Pero lo que queremos hacer es que queremos crear un enlace para ir a la página del producto real. Entonces por el momento, si hacemos clic en eso, no va a ir a ningún lado. Entonces vamos a conseguir el bloque de enlace. Eso es un pequeño problema. Eso no se ve realmente muy bien. Entonces vayamos al bloque de enlaces y lo suficientemente gracioso. Es 126 auto. Vamos a hacer clic en eso . Ahí vamos. Cosas buenas. Ahora tenemos que irnos. Bien. Y entonces lo que vamos a hacer es que literalmente podemos simplemente duplicar eso tres veces y luego simplemente literalmente simplemente copiar y pegar eso, copiar y pegar eso, copiar y pegar eso, y luego nos vamos a ir. Entonces tenemos todo con un bloque de enlaces para que si quisiéramos enlazar a una página de producto, entonces podamos. No me gustan esas líneas debajo del texto, así que vamos a hacer clic en eso. Bien. Perfecto. Y luego veamos esto es simplemente, ya sabes, elige la página que quieras, y luego simplemente se enlazará automáticamente a esa página en particular. Y luego cuando lleguemos a esta sección, sólo hay que añadir un añadir una imagen agradable. Bien. Impresionante. Perfecto. Y luego, obviamente, solo estamos escribiendo un poco sobre la historia de la marca, y solo estamos haciendo que la gente aprenda más sobre la marca en este momento. ¿Bien? Bien, entonces vamos a ver esto. Bien. Se ve bastante bien. Bien. Bien. Y solo he copiado y pegado literalmente los textos desde arriba y el botón y esas cosas solo para no tener que volver a crearlo Al igual que, solo quiero mantener todo consistente. Y literalmente puedes simplemente copiar y pegar como editar en un documento de Word. Es súper fácil. Esto se puede hacer con todos los botones. No te voy a perder el tiempo y ya sabes, realmente tipo de entrar en el meollo arenoso detalles, pero, ya sabes, puedes hacerlo en tu propio tiempo, y solo quiero mostrarte una vez solo para que entiendas cómo hacerlo Bien, entonces tenemos todo eso. Bien, vamos a editar el blog solo porque obviamente este bloque. Estas publicaciones de bloque realmente no se ven muy bien en este momento. Ahí vamos. Entonces solo haz estos un poco más de marca, supongo. Impresionante. Se ve bien. Bien, perfecto, perfecto. Perfecto. Bien, moda, moda moda. Impresionante. Bien. Ahora solo estamos poniendo los toques finales ahora. Solo estamos literalmente queriendo, ya sabes, poner las cosas en su lugar, poner todas las imágenes en su lugar Ya sabes, cambia un poco de texto, y no necesitamos a los colaboradores. Creo que no se ve tan limpio. Cambia esto a negro o, como, a gris o algo así. Sí. Solo mantén las cosas bonitas y simples. Pero sí, en este momento, literalmente estamos jugando con cosas, y podría pasar horas haciendo esto, como, literalmente, ya sabes, haciendo diferentes colores y, ya sabes, probando cosas diferentes. Es literalmente mi parte favorita de todo el proceso. Absolutamente me encanta. Entonces sí, tómate tu tiempo con esto. Ya sabes, ya has hecho la estructura. Esa es la parte más importante. Bueno, ambos son igualmente importantes, pero La estructura es importante porque en realidad va a ayudar a crear la experiencia para el usuario y conseguir que vayan a donde quieras que vayan. Pero ahora puedes divertirte un poco con la estética real y el aspecto real del sitio web. Aquí es donde las cosas se ponen súper interesantes. Entonces aquí está la página del artículo, así que de nuevo, puedes simplemente cambiar esto. Voy a mostrarte cómo configurar un sistema CMS más adelante. Es súper simple, súper fácil, así que no te preocupes. Pero te voy a mostrar cómo hacer eso para esta marca en particular en poco tiempo. No necesitamos a los contribuyentes. Yo no creo. Definitivamente necesitamos suscribirnos a nuestro boletín porque la lista de correo electrónico es el rey. Entonces ya tenemos todo eso. Tenemos todo eso. Bien. Ahora, ya no necesitamos estas barras de navegación porque tenemos nuestra barra NAV universal, que podemos hacerlo es asegurarnos de que la conectes al pie de página del cuerpo, ahí vamos. Y entonces estamos bien para irnos. Y entonces podemos hacer exactamente lo mismo con la barra de navegación en la parte superior, lo cual va a ser genial. Y luego ahí vamos. Entonces, literalmente, ese Nav Bar, y ese pie de página va a ser el mismo sin importar en qué parte del sitio web, vayamos. Siempre va a ser lo mismo. Siempre nos va a dar el mismo aspecto, la misma sensación. Si cambiamos algo, también va a cambiar en las otras páginas del sitio web. Nuevamente, puedes ver aquí, normalmente tendríamos que crear la barra NAV desde cero nuevo y hacerlo una y otra y otra vez y luego cambiarla una y otra y otra vez, pero no tienes que hacerlo cuando creas el componente. Así que asegúrate de hacer eso, te va a ahorrar mucho tiempo. Bien. Entonces aquí, obviamente, puedes cambiar el color de las cosas si realmente quieres. Obviamente para esto, me voy a quedar con él. Sólo voy a mantenerlo negro. Ya sabes, cambia tus datos, todo ese tipo de cosas. Sólo voy a cambiar esto, así que es un poco más de marca. Perfecto. Bien, genial. Esto está hecho, ya sabes, L, literalmente estamos construyendo un sitio web en unos 45 minutos a una hora, y ya está prácticamente hecho, ya sabes. Es como, no muy lejos. Bien, agreguemos esto. Entonces en tiempo real, vamos a echar un vistazo a este de aquí. Entonces, bolsas increíbles. Obviamente, vamos a decirle a la gente lo increíbles que son nuestras bolsas. Solo agreguemos aquí una nueva imagen. Bien. Sólo tienes que añadir esta imagen. Para mostrar a los fundadores de esta empresa de bolsas. Son fundadores encantadores. Bien. Así que ahora estamos en un punto que literalmente tenemos que crear las bolsas, las bolsas y esas cosas de nuevo. Yo no quiero hacer eso. Quiero ser lo más perezoso posible a la hora de crear el sitio web y administrar el sitio web. Entonces lo que vamos a hacer es que vamos a crear un componente. Así que vamos a volver a la página principal mientras hemos hecho ese trabajo antes. Vamos a conseguir la sección real, ¿de acuerdo? Vamos a asegurarnos de que es el correcto, luego hacer clic, crear un nuevo componente. Así que mira. Bien, así que consigue el más cercano al cuerpo. A continuación, haga clic en componente. Entonces vamos a productos ec, ahí vamos. B, bam bam. Entonces vamos a volver a la página. Así que ya hemos creado el componente. Eso va a ser lo mismo en todas las páginas del sitio web. ¿Bien? Así que vamos a sumergirnos y ver las cargas de cifa Bien. Entonces ya sabes, necesitamos agregarlo en esta página también. Así que vamos a llevarnos eso porque no lo necesitamos. Sección, suprimir. Y entonces vamos a conseguir esto. Ahí vamos perfectos. Impresionante, increíble, increíble, increíble, increíble, increíble. Ahí vamos. A, b, bum, bum, bum pa, ba, ba, ba, put put, bum put. Echemos un pequeño vistazo a esto. Mira eso. Bien. Solo salgamos para que esto se cargue un poco. Una cosa que he encontrado es que el flujo web tiende a funcionar mejor en Safari, y no estoy seguro de por qué. Lo siento, funciona mejor en Chrome. No funciona tan bien en Safari, y ahora mismo estoy trabajando en Safari. Y sí, es un poco más lento, pero no está tan mal. Sigue funcionando, pero es un poco más lento. Sí, así puedes ver que he usado el componente y lo acabo de abofetear directamente, y es lo mismo en todo el sitio web ÚTIL. Así que asegúrate de estar haciendo eso si quieres tener la misma sección o la misma, ya sabes, parte del sitio web en múltiples lugares diferentes en el sitio web. Asegúrate de agregarlo porque literalmente es ir a ahorrarte tanto tiempo y energía, chicos. Confía en mí. Bien. Entonces solo estoy agregando un poco de sección de contacto por aquí. Bien, solo conéctanos a la página de contactores. Perfecto. Bien. Ahora, de nuevo, no necesitamos volver a crear la foto. Podemos simplemente literalmente simplemente eliminar eso y obtener eso, obtener eso agregado de la sección de componentes. Ahí vamos. Impresionante. Esto se ve muy bien. ¿Recuerdas cómo esto no se parecía nada a un sitio web de comercio electrónico? Ahora en realidad se ve como un sitio web de comercio electrónico? La magia del tiempo, del tiempo y de la paciencia. Bien. Así que ya podemos ver aquí, obviamente, ya sabes, el texto y esas cosas se pueden cambiar, pero, ya sabes, aquí tenemos un comienzo bastante bueno. Esta va a ser la página real del producto. Entonces esto probablemente va a ser lo que es, ya sabes, importante para acertar. Entonces tenemos los productos adicionales que hay? Eso es bueno. Empecemos a arreglar esto y conseguir que las cosas comiencen las cosas Entonces otra vez, con eso, se puede ver como esto no está en el cuerpo. Súbase al cuerpo. Ahí vamos. Ahora eso es mejor, y éste también. Entonces otra vez, no necesitamos volver a hacer esto . Oh, espera un segundo. Ya hemos hecho esto antes, ¿verdad? En realidad ya hemos hecho esa sección antes. No necesitamos volver a hacer esa sección. Así que volvamos. Y otra vez, así es como deberíamos estar trabajando chicos. Entonces tenemos que estar asegurándonos que nos ahorremos tiempo en el futuro, porque tu yo futuro te va a dar las gracias por ello. Entonces necesitas volver a la sección, crear, así que solo tienes que seleccionar la sección que quieras copiar. Entonces crea el, en realidad lo estoy buscando. En realidad lo estoy buscando aquí. No sé por qué estoy haciendo eso. Bien. Vamos, Esto está mal. Bien, ¿qué estoy haciendo? ¿Qué estoy haciendo? Scott, haz que actúes juntos. Entonces, lo que he hecho ahí es que básicamente he agregado el pie de página en esa sección en lugar de crear un componente. Entonces en su lugar, seleccionaré, crearé un nuevo componente, Contáctenos. Ahí vamos. Ahora tenemos eso en verde. Ahora podemos ir a la página del producto, y ahora podemos agregarlo al final de la sección, que está aquí. Ahí vamos. Y podemos simplemente agregar eso aquí, y todo va a estar bien. Perfecto. Ahí vamos. Agradable y limpio. Se ve genial. Bien. Ahora, deshagámonos de este feo forraje, y vamos a instalar nuestro buen forraje o nuestro forraje de marca Bien, increíble. Y ahora comencemos a conseguir esto, ya sabes, refinado y arreglemos esto porque creo que creo que solo necesitamos sacar algunas imágenes aquí para el producto y arreglar todo esto. Bien. Ya tengo algunas imágenes arregladas. Echemos un vistazo a estos. Ahí vamos. Deberían quedar bastante bien. Acabo de sacarlos de aquí y una especie de plantilla en línea. Así que de nuevo, este no es el producto que realmente tengo ni nada. Acabo de encontrar estos en línea, así que pensé que sería genial usarlos solo para mostrarte. Bien. Así que ya tenemos eso. Sólo tienes que añadir estas imágenes. Realmente simple. Ya puedes ver, la página está empezando a cobrar vida un poco, ¿verdad? Sólo por las imágenes, y agreguemos dos más Creo que en seis imágenes es sobre lo correcto. Ahí vamos. Aquí vamos, vamos allá vamos. Bien. Impresionante. Bien. Cosas buenas. Se ve bien. Se ve bien. Se ve bien. Esa bolsa se ve muy grande en realidad cuando la sostiene. No me di cuenta de que era tan grande. Bien, increíble. Bien, Button, vamos a robarnos este botón de contacto, y solo pongamos eso ahí dentro. Y sólo vamos a cambiar eso como a estas alturas. Obviamente, no vamos a ir a la página de contacto DS. Íbamos a cualquiera, ya sabes, un procesador de pagos o al plan de comercio en flujo web, que voy a pasar contigo un poco más tarde. Y costó un poco más, pero es definir definitivamente es una buena inversión si fueras una marca de comercio electrónico. Bien. Entonces, sí. Bien, el precio real. No lo entreguemos por demasiado barato. Realmente no necesitamos eso. Realmente no necesitamos la sección, ¿verdad? Sí. Vamos a deshacernos de eso, pero luego podemos agregar, como stock limitado o algo aquí solo para crear un poco de urgencia. Pero este color rosa realmente no lo está haciendo por mí, así que lo que quiero hacer es querer usarlo como un azul o algo así, como un azul frío. Creo que eso probablemente va a quedar un poco mejor. Bajemos a los fondos. Bonito azul. Ahí vamos. Eso se ve, quiero decir, sí, eso se ve decente. Eso se ve decente. Estoy contento con eso. Bien. Después tienda de blog. Se ve bastante bien, ahora. Se ve bastante bien. Obviamente, agregarías el texto, página del producto real, el nombre del artículo del producto, todas esas cosas. Pero ahora lo que quiero mostrarle. Quiero mostrarte CMS muy rápido porque CMS te va a ahorrar mucho tiempo como componentes. CMS te va a ahorrar mucho tiempo. Ahora bien, esta es la sección de comercio electrónico Actual. Obviamente, eso es algo que, si realmente pagas por el plan de comercio electrónico, entonces lo obtienes y ya está completamente construido, ya está todo configurado para que no tengas que preocuparte por nada, así que solo compra el plan y luego solo puedes configurarlo todo. Y si tienes alguna duda, pregúntanos o puedes preguntar directamente a weblow Los flujos web suelen ser los mejores para las cosas reales de comercio electrónico porque en realidad pueden guiarte a través de él con videos Pero con el CMS, puedes crear una colección CMS para los diferentes productos que vendes. Ahora bien, la razón por la que esto es súper útil es Por ejemplo, veamos estos activos. Entonces estos son todos los productos que vendemos en Lancaster Academy en nuestra página web. Esto es literalmente solo para ayudar a la gente a, ya sabes, construir sus marcas de la manera más fácil. Entonces tenemos diferentes cosas como el nombre, como, ya sabes, el punto de venta, ya sabes, lo que hace que la cosa sea especial. Pero en realidad podemos crear una colección CMS para los productos. En su sitio web. Es muy sencillo. Entonces, por ejemplo aquí, sólo vamos a jugar, ¿verdad? Solo vamos a usar esta colección CMS existente y simplemente crear como un marcado de la misma. Entonces, por ejemplo, vamos a eliminar todas las cosas de esa página. Entonces, vamos a copiar esto. Copia. Eso lo he copiado. Bien. Y vamos a la otra sección aquí. Entonces, si miras esta página aquí, esta es solo para una página de producto que solíamos diseñar antes. Y literalmente podemos tomar la página que acabamos de diseñar para la marca de comercio electrónico y usarla para construir algo en el CMS. Entonces una colección CMS, que nos va a permitir agregar productos y administrar productos y cambiar productos mucho más fácilmente, y te voy a mostrar lo que quiero decir en un segundo. Entonces borramos todo de esta página, y vamos a copiar y pegar. Entonces tenemos eso, que es perfecto. Entonces solo podemos agregar nuestra barra NAF y forraje. Aquí aquí. Bien entonces solo agrega el pie de ahí. Entonces vamos a empezar a ligar todo. Entonces, por ejemplo, simplemente haremos esto rápidamente. No voy a crear una nueva colección de SMS. O colección CMS, debería decir. Sólo vamos a reconstruir la página. Dentro de una colección CMS. Porque por el momento, esto está en una página estática. Esta es la página CMS. Las páginas moradas son la página CMS, como se puede ver en la esquina superior izquierda. Tiene la cajita morada. Esa es la página CMS, el signo para una página CMS. Bien, así que vamos a volver a arreglar las cosas aquí. Para que las cosas se vean bien. Bien. Así que solo estamos agregando nuestro componente nuevamente con los diferentes productos. Se ve perfecto. Bien, increíble, increíble, increíble. Ahí vamos. Bien. Eso se ve bien. Ahora, cuando miramos en la creación una página o un sistema en la página CMS. Puedes ver aquí cuando hacemos clic en cosas, tenemos la opción, no solo de cambiarlo, sino de vincularlo a algo. ¿Bien? Entonces déjame mostrarte a lo que me refiero. Entonces vamos a la sección CMS. Colecciones de blogs. Esto es solo una colección, con la que simplemente estamos jugando. Vamos a editarlo un poco. Entonces, simplemente eliminemos esto. Y luego vamos a bloquear la colección. Bien, mira aquí, esto es todo cosas preexistentes de una colección de bloques que hicimos hace un tiempo. Ya tenemos uno nuevo. Pero por ejemplo, si solo miramos las imágenes, solo usemos los campos de imagen ¿Bien? Así que ahí tenemos cuatro imágenes. Agreguemos dos más. Entonces pondremos la imagen cinco. Después imagen seis. Bien. Perfecto. Entonces tenemos el nombre. Así que solo podemos usar eso como el nombre del producto. Nosotros tenemos esto. Solo podemos usar eso como contenido. Y entonces tenemos bloque Autor, que podemos cambiar a precios, ¿a? Así que de nuevo, solo estamos haciendo las cosas súper rápido aquí solo para mostrarte cómo hacerlo, acuerdo? Así Guardar colección. Que te bendiga. Disculpe, ¿debo decir? Puedes ver aquí, cómo en lugar de cambiar la imagen, estamos conectando a un campo dentro del CMS. Entonces estamos haciendo clic en un pequeño botón morado, y hemos hecho el número uno, número dos, el número tres, este es el número cuatro. Bien. Entonces podríamos hacer clic en reemplazar la imagen, pero no queremos reemplazar la imagen. Queremos conectarlo al CMS real. Bien. Entonces lo tenemos ahí. Entonces Conecta este uno a cinco. Y luego conecta éste a la imagen seis. Ahí vamos. Perfecto. Estos dos, vamos a conectarlos y ver qué pasa. Conéctate a cuatro, luego conecta este uno a tres. Bien. Fresco. Entonces conectemos esto con el nombre o el título del bloque de título, pero podría ser el nombre del producto, lo que sea. Esto conecta esto con el tema del contenido. Conecta esto al precio. Si lo vamos a encontrar ahí vamos. Y luego conectar esto al enlace. Esencialmente vincularíamos esto a, ya sabes, qué, ya sea que estemos haciendo como un pago, como, como, un pago. Procesador, o estamos haciendo, ya sabes, lo real como agregar a la tarjeta, por ejemplo, solo lo estamos vinculando a un procesador para este caso como P pal o Pioneer o Air walx o algo así, pero puedes hacerlo de cualquier manera Entonces ahora, todo se ha ido, cual es un problema, pero en realidad no es un problema. Déjame mostrarte por qué. Entonces si agregamos cinco tipos de marcador de posición de orden de lugar, lo siento, artículos, aquí, puedes ver que tenemos esto Ahora bien, si en realidad solo eliminamos cuatro de estos porque están desperdiciando nuestra energía cerebral, y volvemos a las colecciones del bloque, y solo agregamos ejemplo de bolsa y miramos las imágenes. Simplemente ignore todo lo demás, solo concéntrese en los campos reales en los que nos estamos enfocando. Tenemos seis imágenes que necesitamos agregar. Puedes ver aquí, mira como en este momento, ejemplo de bolsa, y tenemos seis imágenes las cuales son completamente ajenas a las bolsas, ¿ok Y el texto no tiene ningún sentido. Así que volvamos al elemento CMS real. Y agreguemos una imagen de la bolsa. Agreguemos otra imagen. Así que ahora solo estamos agregando las fotos de las bolsas. A esto aquí. Y luego obviamente, agreguemos los otros dos elementos, o las otras dos imágenes al final. Bien, bien. Y luego para el tema del contenido, y, vamos a escribir algo loco como, ya sabes, que bolsa tan increíble. Ojalá pudiera deletrear. Bien, genial. Y luego precio, vamos a meter algo ahí dentro. Sólo vamos a meter un poco más de texto ahí. Todo parece estar en orden. La imagen cinco y seis, por alguna razón, no se ha actualizado, pero sí, esa es otra diferente. No te preocupes demasiado por ello todavía. Bien. Entonces te voy a mostrar en realidad porque imagen cinco y seis aún no se ha actualizado, así que te voy a mostrar lo que eso significa. Precio, vamos a cambiar el precio muy rápido. $79. Asegúrate de poner un letrero de $1 ahí. Y luego intentemos guardarlo, pero en realidad nos va a dar una patada porque el enlace es incorrecto. Ahí vamos, así que vamos a sumar el slog. Guardar dice, no está bien. Entonces, si vuelves a bajar, ya veremos. Entonces necesitamos agregar realmente un enlace ahí, como un enlace real. Para este ejemplo, solo tomemos un enlace del dominio. Bien. Ahí vamos. Guárdala, y debería funcionar. Y entonces todo debería ser perfecto. Aparte de dos imágenes deberían estar equivocadas, porque aún no las hemos actualizado. Y seguro que sí. Ahí vamos. Las dos imágenes de abajo están equivocadas. Bien. Entonces, ¿qué podemos hacer con eso? ¿Bien? Entonces básicamente necesitamos volver al CMS y agregar las imágenes de la bolsa. Esa es la única solución que podemos hacer en este momento en el tiempo. Ambos están conectados con las cosas correctas, pero simplemente no están conectados a ellos no están conectados por la imagen correcta. Así que vamos a, está bien. Eso es bueno. Eso es bueno. Eso es bueno. Solo cambiemos estos dos a las fotos de la bolsa, y luego estamos bien para irnos. Bien, vaya bien. Entonces eso debería configurar automáticamente las cosas ahí arriba. Y entonces creo que me gusta bastante tener las fotos de la chica en el fondo por alguna razón. Así que vamos a conseguir eso en el fondo. Así que sólo voy a copiar y pegar esa copia y pegar eso en la parte inferior. Ahí vamos. Ahí vamos. Llévate ahí vamos. Perfecto. Impresionante. Bien. Ideal. Eso se ve bien. Estoy bastante contento con eso. Bien. Increíble. Entonces sí, así que todo está prácticamente todo configurado ahora. Sí, quiero decir, así de fácil es crear una colección CMS y crear una página de producto realmente atractiva donde solo puedas tener todos tus productos. Ya sabes, como, literalmente hemos creado un sitio web completo de comercio electrónico en menos de, como, ya sabes, menos de una hora y 10 minutos, realmente, muy rápido. Y una cosa que sí quiero mostrarles es en la configuración. Entonces si vamos a la configuración del sitio, Así que algunas cosas importantes que creo que deberías saber antes las cosas a tener en cuenta son fabric, asegúrate de que sea 32 pixeles por 32 pixeles, tu clip web, asegúrate de que sea 256 por 256. No los compliques demasiado. De lo contrario, se verán terribles. Formularios. Asegúrate de poner tu dirección de correo electrónico en el formulario. Eso solo va a asegurar que todas las personas que te contacten, todo va a tu dirección de correo electrónico real, la relevante, y asegúrate de guardarla, asegúrate de publicarla. También así planeada. Entonces, para los sitios web de comercio electrónico, debe asegurarse de seleccionar un plan de sitio de comercio electrónico. Entonces uno de estos, no creo que vayas a necesitar nada más aparte del estándar para ser honesto, pero obviamente, ya sabes, depende completamente de ti. Pero creo que también puedes vincularte a un procesador de pagos, como pay pL o algo más y dejar que la gente pague de esa manera y solo use el CMS o el básico. Si solo tienes uno o dos productos, entonces podrías usar el básico y simplemente usarlo y simplemente hacerlo de esa manera. El problema con el starter es que no llegas a agregar un dominio personalizado, así que realmente no te ves muy profesional y creíble. Entonces va a ser muy poco probable que la gente te compre. Y además, ya sabes, no puedes crear más de cinco páginas, así que es un poco molesto. Pero si quieres agregar tu dominio, puedes hacerlo aquí, tengo otro video más adelante en el curso donde realmente puedes aprender a hacerlo. Pero solo asegúrate de publicar todo, y eso es prácticamente todo. Bastante fácil, bastante sencillo. Y sí, es muy, muy bueno descomponerlo todo, y espero que hayas disfrutado esta lección tanto como yo disfruté haciéndolo. Bien. Nos vemos pronto. Adiós. 63. (Audio remasterizado y 16: Bien, así como pueden ver, estamos empezando de cero y construyendo este sitio web desde cero. Ahora, lo primero que tenemos que hacer es comenzar a construir la estructura del sitio web. Y la forma en que podemos hacer esto es yendo al diseño del flujo web y luego agregando algunas básicamente plantillas de la biblioteca. Y aquí hay algunos muy buenos, por ejemplo, este es realmente bueno. Este es uno que uso bastante. Um, simplemente discuta que tiene la mayor selección. Me gustan los que tienen ya sabes, la mayor cantidad de opciones solo para poder jugar con diferentes formatos. Entonces sí, los que tipo de, ya sabes, tienen más selección ahí, esos son los que voy a elegir. Y luego simplemente simplemente lo agregas a la biblioteca. Todos son completamente gratis. Y luego una vez que los agregues, entonces solo puedes usarlos. Y es absolutamente fantástico. Ahora, ya tengo demasiadas en mis cuentas, así que no me deja agregar una adicional. Pero ya tengo los que quiero usar de todos modos, así que simplemente puedo usarlos sin tener que volver a instalarlos, ¿de acuerdo? Entonces, simplemente renunciemos a esto para cargar, y luego podremos continuar Pero construir la estructura del sitio web es súper importante porque eso es literalmente sobre, ya sabes, del 50 al 60% del trabajo real. Ya sabes, construyendo un sitio web, necesitas asegurarte de que las estructuras sean correctas. Entonces, comencemos con solo, ya sabes, mirando una de estas bibliotecas. Vamos a usar este. Ahora, lo primero que deberíamos estar viendo es crear una barra NAV. Ahora, un poco más adelante, te voy a mostrar cómo crear la barra NAV para que solo tengas que crearla una vez, y entonces nunca más la tengas que crear nunca más. Y crearemos la foto también, pero lo haremos un poco más tarde. Así que vamos, vamos a ver este, tal vez. Sí, esa se ve bien. Bien, perfecto. Ahora, vamos a cambiar el logo, ya sabes, un poco de, ya sabes, las fuentes y los colores y cosas un poco más tarde. Pero ahora mismo solo nos estamos enfocando en la estructura del sitio web. Así que no te preocupes por los colores, las imágenes y esas cosas todavía. Eso lo haremos más adelante. este momento, solo estamos buscando una bonita sección de héroes para nuestra página web. Y obviamente, este sitio web es para una marca personal. Entonces estamos buscando algo que pueda representar la marca personal, ya sabes, de una gran manera. Quiero decir, esa se ve bastante bien, en realidad. Ese se ve bastante versátil. Tiene una bonita imagen grande. Va a ser súper receptivo. Sí, vamos con esa. Ese se ve bastante bien. Podemos jugar con las cosas, borrar cosas, cambiar las cosas después. Ahora mismo, nuevamente, solo nos estamos enfocando en la estructura del sitio web. ¿Bien? Busquemos otra sección para agregar debajo de la sección de héroe. Y nuevamente, esto es súper fácil de usar. Simplemente puedes arrastrarlos y soltarlos, y, ya sabes, es súper fácil Honestamente, como, no entiendo cómo flujo web ha hecho que sea tan fácil crear sitios web súper hermosos. Bien, agreguemos aquí esta pequeña sección de confianza, que básicamente dice que hemos aparecido en, o al menos podemos usarla como una sección destacada en. Solo asegúrate de que lo tengamos en el lado izquierdo, así que es su propia sección porque de lo contrario va a estar un poco casada hasta la sección anterior. Bien. Entonces eso se ve bien. Podemos cambiar esto después, pero de nuevo, solo nos estamos enfocando en la estructura ahora mismo. No te preocupes por los colores y esas cosas porque de lo contrario, toma mucho más tiempo construir el sitio web. Solo concéntrese en crear la estructura. Bien. Entonces sí, podemos cambiar eso un poco más tarde y tal vez tuvimos un poco, presentado en la sección, lo cual será bueno, y eso va a generar cierta confianza con los visitantes de nuestro sitio web. Ahora, veamos algo. Por los servicios o las cosas que esencialmente podemos brindar. Sí, eso se ve bien. Bien. Perfecto. Podemos cambiar los iconos, podemos cambiar el texto más adelante. Eso no es un problema, pero me gusta cómo se ve eso porque en última instancia estamos comenzando con la sección de héroes. Entonces otra vez, por eso estás aquí, te estamos diciendo exactamente por qué estás aquí. Entonces nos estás diciendo, bueno, entonces les estamos diciendo que pueden confiar en nosotros con la sección destacada. Y luego después, les estamos diciendo qué, bueno, el visitante del sitio web, luego les estamos diciendo, Bien, esto es lo que podemos hacer por ti. Al igual que, estos son los servicios que podemos brindar, o esto es lo que, ya sabes, como marca personal, puedo hacer por ti. Bien. Una pequeña y agradable sección de revisión ahora. Eso se ve bien. Y solo podemos agregar, ya sabes, tal vez, ya sabes, algunos testimonios de cualquiera de los empleadores. Ya sabes, sea cual sea tu marca personal, puedes agregarla aquí. Y agreguemos una sección de bloque, en realidad. Eso estaría bien. Solo para mostrar nuestra experiencia. Y creo que vamos a convertir esto en un sitio web de moda en modelaje para una marca personal de moda sobre modelaje, que debería ser bastante divertido. Bien. Impresionante, entonces solo agreguemos un forraje Bien. Ese ese que se ve bastante limpio. Bien, perfecto. Eso se ve bien. Bien. Podemos cambiar algunas de estas cosas después. Una de las cosas es por alguna razón, el ancho en el dimensionamiento, a veces lo configuran automáticamente en 126, y puedes verlo aquí, realmente no se ve muy bien. Y puedes cambiarlo súper fácilmente, literalmente ir al elemento que es 126 y simplemente configurarlo en auto, y lo pone bien. Básicamente lo configura todo correctamente. Pero sí, por alguna razón, hace eso. Pero me ahorra tanto tiempo construyendo sitios web que realmente no me importa. Estoy feliz de cambiar estos, tomar 10 minutos solo para cambiarlos porque me ahorra mucho tiempo construyendo sitios web usando estas diez placas. Son súper serviciales. Bien. Perfecto. Impresionante. Estoy bastante contento con cómo se ve la página de inicio. Empecemos a buscar construir la siguiente página, que creo que va a ser el blog, creo. Empecemos a construir la página del blog. Bien. Entonces otra vez, el pie de página. Ahora otra vez, para el pie de página y para la barra NAV. vamos a mostrar o te voy a mostrar cómo crear una barra NAF universal más adelante No tienes que preocuparte por añadir, ya sabes, ya sabes, los títulos o cualquier otra cosa. Solo concéntrese en construir la estructura del sitio web. Sé que sigo diciendo eso, pero sí, es muy importante porque solo quiero mostrarte cómo puedes construir literalmente un sitio web increíble en literalmente 45 minutos. Al igual que literalmente vamos a, va a tomar alrededor de 45 a 50 minutos para construir este sitio web. Bien. Entonces vamos a tener esta sección de bloque aquí. Lo cual va a volver a hacerlo, solo asegúrate de que esté súper a la izquierda para que no intervenga con ningún otro elemento, así que está solo. Bien, eso se ve genial, y vamos a editar esto después. Así que no te preocupes. Sé que no se ve muy a la moda ni a la luz personal de marca en estos momentos, pero voy a mostrarte cómo editarlo un poco más adelante. Así que no te preocupes. Bien, Impresionante. Bien, ya tenemos esto. Ahora, tenemos la configuración de SMS, que yo voy a mostrarte cómo configurarlo porque ahorra mucho tiempo. Entonces, por ejemplo, aquí, se puede decir que tengo toneladas de artículos. Esto me ahorra crear muchas páginas diferentes para diferentes artículos. Entonces en lugar de crear ya sabes 50 o 100 páginas diferentes, solo puedo crear una página. Y, entonces este es, por ejemplo, el blog de Lancaster Academy. Sabes, tengo tal vez entre 50 y 80 artículos ahí y solo una sola página para que si quisiera, literalmente podría tener como miles de artículos diferentes, y nunca tengo que hacer la misma página dos veces. Es literalmente solo una página, y simplemente la autollena para que se vea y se sienta, ya sabes, súper profesional y de marca cada vez Pero solo se está tomando el tiempo para hacerlo bien una vez. Entonces una vez que lo haces bien una vez, entonces no tienes que volver a crearlo nunca más. Entonces te mostraré cómo hacerlo un poco más tarde y cerca del final. Pero por ahora, solo estoy, mostrándote un par de cosas diferentes que puedes hacer solo para, ya sabes, hacer que la página de bloque real se vea un poco más agradable Entonces vamos a cambiar los colores y las cosas un poco más tarde. No te preocupes por ello, pero así es como debería ser una buena página de bloque. Ya sabes, definitivamente podría mejorarse. Definitivamente podría atarte un poco el contenido real. Pero así es en última instancia como debería verse en general. Bien. Entonces, y estos son todos los diferentes artículos que tengo sí. Así que tengo 47 en total, y te voy a mostrar cómo configurar los diferentes ajustes de CMS más adelante en el curso porque esto te va a ahorrar mucho tiempo. Y sí cuesta un poco cuando realmente hospedas el sitio web si quieres la configuración de CMS. Pero al seleccionar la configuración de CMS, puedes hacerte la vida diez veces más fácil. Es solo que es una inversión que vale la pena. Entonces, por ejemplo, aquí, mira, puedes ver que el nombre del artículo real del blog está conectado al back-end del sitio web, que en última instancia es, ya sabes, decirle a la página qué poner. Entonces les está diciendo el título. Es decirles cuántos minutos es el tiempo de lectura, qué tema es, qué imagen poner. Ya sabes, está impulsando el contenido hacia adelante. Entonces es literalmente tan útil. Y te voy a mostrar cómo hacerlo un poco más adelante, pero honestamente, eso no me puede gustar, explicarte cuánto tiempo te va a ahorrar esto. Entonces, sí, solo quiero realmente, realmente conseguir eso a través. Pero L Empecemos a mirar la página de nuestro blog real. Empecemos a mirar k, entonces esto es 126, así que cambiemos eso. Bien, así que eso se ve bien. Todo se ve bastante bien para ser honesto. No está a 1 millón de kilómetros de distancia. A lo mejor sólo nos los quitamos porque no necesitamos tres colaboradores. No necesitamos eso. Definitivamente necesitamos un poco de registro al boletín. Eso definitivamente va a ser útil porque como marca personal, realmente quieres estar haciendo crecer tu lista de correo electrónico. Eso es literalmente lo más importante. Entonces, Impresionante. Hagámoslo. Artículos de blog, Impresionante impresionante impresionante. Hagámoslo. Hagamos el tipo de página principal del blog donde realmente mostramos todas las diferentes publicaciones de blog que realmente hemos creado para que gente pueda leer nuestro contenido. Bien. ¿Cuál se ve mejor en realidad? Esa se ve muy bien, pero como que solo quiero verlas todas juntas. Bien. Sí, vamos a usar este en realidad. Vamos a ver cómo se ve esto. Y otra vez, chicos, recuerden, vamos a ser, solo estamos creando una estructura en este momento. Literalmente no nos estamos enfocando en otra cosa. Vamos a cambiar todo en, ya sabes, aproximadamente alrededor de 20 a 25 minutos. Así que no te preocupes. Agárrate fuerte y lo superaremos, y va a quedar genial. Bien, sí, eso fue 126, así que solo necesitaba cambiar eso. Nuevamente, podemos cambiar todos los textos, puedes ver esto aquí. Esto de aquí no se ve genial. Entonces tenemos que verificar eso. Sí, eso es 126 también. Cambia eso. Eso es 126 también. Sí, entonces, quiero decir, esto es un poco molesto de cambiar cuando estás usando estas plantillas fácilmente hechas, pero te ahorran mucho tiempo, honestamente. Así que realmente vale la pena, ¿sabes? Perfecto. Perfecto. Perfecto. Eso se ve bien. Eso se ve bien. Eso va a quedar muy bien cuando realmente tengamos algunas, ya sabes, entradas de blog ahí dentro. Bien. Pasemos a la página de contacto. Ahora, esta página va a ser súper simple, así que vamos a lanzar una barra de NaF ahí dentro Lo cual es agradable y fácil. Y nuevamente, lo marcaremos un poco más adelante. Hagamos también el formulario de contacto. Ese se ve bien, pero creo Mm. ¿Cuál se ve? Eso ni siquiera parece un contacto o sección, ¿verdad? Creo que esa es probablemente la mejor, ¿verdad? Sí, esa se ve bien. Bien. Vamos a usar eso. De nuevo, solo asegúrate de que esté completamente a la izquierda. Se puede ver en el lado derecho ahí. Debes asegurarte de que no esté ubicado en ningún otro contenedor o sección. Bien. Perfecto. Entonces otra vez, solo toma los de porque eso es 126. Se puede ver cuando está un poco rayado. Se puede decir. Bien, eso se ve bien, eso se ve limpio otra vez. Cambiaremos todos los colores y las cosas un poco más tarde. Pero eso se ve bastante bien. Estoy bastante contenta con ello. Bien. ¿Cuál es el siguiente? Hagamos la página de política de privacidad, porque, sí, este tipo de páginas son súper importantes para que prácticamente cualquier tipo de sitio web sea completamente honesto. Pero sobre todo para una marca personal, donde obviamente, quieres asegurarte de que solo, ya sabes, tienes todo en su lugar legalmente. De hecho, te muestro cómo obtener, como, tu texto de política de privacidad y todo ese tipo de cosas un poco más tarde. Te voy a enseñar cómo hacer eso porque es muy, muy simple. Pero, sí, solo te va a ayudar a poner las cosas en su lugar muy, muy fácilmente. Porque, ya sabes, nadie quiere escribir una política de privacidad completa o incluso pagar por una. Eso definitivamente no es lo que quieres. Entonces sí, vamos a buscar una sección. Creo que en realidad pienso simplemente hacerlo como de forma manual. Ni siquiera necesitamos usar una plantilla para esto. Solo agreguemos una sección aquí. Sólo una sección normal. De nuevo, solo asegúrate de que esté conectado al cuerpo. Entonces agreguemos un encabezado. Ahora, en realidad, agreguemos un contenedor. Entonces el contenedor solo va a asegurarse de que todo sea agradable y receptivo y que no, ya sabes, se derrame a los lados. Añadiremos un encabezado, y luego agregaremos el texto normal, el texto del párrafo. Además, agregaremos un poco de margen entre esos. En la parte superior de la sección. Entonces también agregaremos un poco de margen entre el encabezado y el párrafo también, solo para asegurarnos. Entonces este es el sitio web real para el que puedes obtener puedes obtener tu política de privacidad. Lo agregaré en algún lugar del curso solo para que puedas obtenerlo, pero es esencialmente una política de privacidad gratuita. Es realmente muy fácil de conseguir. Y voy a añadir el enlace real en el curso en alguna parte. Entonces, solo asegúrate de comprobarlo. Y úsalo. Pero es realmente fácil. Ellos intentarán cobrarte por, ya sabes, como políticas de privacidad profesionales. Pero ya sabes, en este punto tu negocio, no estoy seguro de si lo necesitas, pero puedes ver aquí que están tratando de cobrarte $24 $14, $24 Ya sabes, en última instancia es un negocio, así que están tratando de sacarte dinero, pero no necesitas hacerlo. Hacen que parezca que necesitas hacerlo, pero, ya sabes, realmente no lo haces, para ser completamente brutalmente honesto Bien. Ahí vamos. Entonces déjame ir al siguiente paso. Bien. Me está pidiendo que haga Sí, no queremos como política de privacidad profesional. Sí, así que sí, solo dame mi política de privacidad, y luego todos estamos bien para irnos. Impresionante. En realidad no necesitas poner tu correo electrónico para esto. Simplemente puedes tomarlo directamente desde aquí. Pero para algunas cosas, sí necesitas poner tu correo electrónico exacto. Entonces, ya sabes, puedes poner tu correo electrónico correcto, pero esta es en última instancia nuestra política de privacidad. Todo listo para ir. Ahora podemos copiarlo a nuestro portapapeles Vamos a probar eso. Intentemos copiarlo al portapapeles Y luego podemos intentar llevarlo al sitio web para que ya esté todo formateado, lo cual sería genial. Y se puede ver, como, esta política de privacidad literalmente me llevó a lo mejor no sé, 5 minutos para hacer. Entonces fue súper rápido. Déjame revisar para ver si me mandaron el correo electrónico. Bien, sí, me mandaron ya me mandaron el correo electrónico. Bien, veamos la mejor manera de conseguirlo. Bien. Así que me acaban de enviar de vuelta a la página real. Bien, estoy tratando de encontrar la mejor manera de hacerlo por ti específicamente, solo para ahorrarte mucho tiempo. Bien generar archivos. Probablemente esa va a ser la mejor parte. Bien. Perfecto. Hagámoslo. Hagamos un archivo de pato. Bien. Impresionante. Y luego abramos eso. Y entonces creo que deberíamos poder simplemente copiar y pegar esto en la sección de texto rico rico. Entonces tal vez tengamos que cambiar eso. Hagámoslo. Solo agreguemos esto a una sección de texto enriquecido. Te voy a enseñar cómo hacer eso. Tenemos que descargarla. Impresionante. Entonces ahí está. Literalmente tenemos una política de privacidad completa lista para ir formateada con encabezados, subencabezados, espaciado, todo Quizá tengamos que ordenar las cosas un poco, pero, ya sabes, esto es, ya sabes, esto está ahí. Entonces puedes ver ahí, la razón por la que eso ha pasado es que aquí hay un elemento de párrafo. Y esencialmente tendríamos que hacer todos los espaciamientos nosotros mismos. Y no creo que eso vaya a ser eso va a ser una pérdida de tiempo. Entonces creo que hacer un texto rico. Ahí vamos. Vamos a usar esto. Esto nos va a ahorrar mucho tiempo. ¿Bien? Entonces, literalmente, lo copiamos y pegamos de nuevo y miramos eso. Me veía diez veces mejor. Impresionante. Ya sabes, a lo mejor ponemos un poco unos espacios entre las cosas, pero en general, ya sabes, se puede ver todo, todo está ahí. Sabes que está todo redactado. Asegúrese de que realmente echa un vistazo. Eso se puede ver. Dice generador de políticas de privacidad gratuito. Puedes eliminar eso si quieres. Eso es solo vincular al sitio web para obtener a otras personas. Se puede volver a ver, su mirada. Te dice que puedes simplemente borrar eso. Eso no es necesario. Pero sí, puedes ver que tiene todo lo que necesitas, y también es súper rápido y fácil, y no tienes que pagar por ello, para obtener una política de privacidad para tu sitio web. Creo que eso es un poco despilfarro de dinero, sobre todo para una puesta en marcha. Entonces sí, ya tenemos eso. Perfecto. Empecemos ahora la página Acerca de Nosotros porque la página Acerca de Nosotros es súper importante. Queremos contar una historia. Queremos tener un espacio donde realmente podamos, ya sabes, mostrarle a la gente por qué pueden confiar en nosotros, qué podemos ofrecerles, ya sabes, cuál es nuestro posicionamiento en el mundo como marca personal. Entonces esta es una gran oportunidad para eso. Así que vamos a conseguir algunas secciones ahí que nos permitan contar nuestra historia de una manera agradable y digerible ¿Bien? Esto se ve bien. Bien, tal vez podamos agregar un video ahí, quizá. Mmm, tal vez. Bien. Entonces esto es básicamente una caja de luz. Entonces, lo que es una caja de luz es cuando haces clic en la caja de luz, cuando haces clic en el botón pequeño del reproductor, aparecerá con un video o, ya sabes, um, una imagen incluso Entonces, en este caso, se está dando con un video. Para que podamos cambiar ese video. Para que podamos tener, como, un video personal de marca para contarle a la gente sobre nosotros y, ya sabes, por qué en última instancia, ya sabes, confían en nosotros o nos eligen o nos compran. Pero, no creo que quiera un video en esta web en particular. Creo que solo lo mantendremos agradable y sencillo con una linda imagen. Encontremos algo que esté realmente limpio. No estoy seguro de si en realidad hay algo en este. Yo uso mucho este conjunto particular de plantillas, y no creo que haya nada aquí que pueda usar. Quiero decir, probablemente haya algo, pero no creo que haya nada que sea, ya sabes, va a ser súper innovador Bien. Quiero decir, eso podría funcionar, supongo. Eso podría funcionar. Es decir, está limpio, ya sabes que no es demasiado autoritante Bien. Vamos a echar un vistazo un poco más. Echemos un vistazo a algunas secciones más. Y en este punto, cuando en realidad estás construyendo tu página sobre mayo o sobre nosotros página. Otra vez, no estás queriendo abrumar a la gente. Sólo quieres contarles algo sobre ti. Quieres decirles, ya sabes, ya sabes, quién eres, de qué se trata, ya sabes, qué te hace diferente, todo ese tipo de cosas. Esa cosa es lo más importante. Lo que estoy buscando ahora es que estoy buscando algunas cosas para que podamos decirles lo que hacemos. Entonces la sección superior siempre está bien, como, ¿cómo es la misión general? Como, ¿cómo es nuestro posicionamiento general, ya sabes, qué nos hace diferentes? Entonces podemos empezar a decirle a la gente, bien, como, esto es lo que nos hace diferentes, pero esto es lo que en realidad puedo ofrecerte. Entonces este es un servicio o, ya sabes, nuestros productos que ofrezco y a los que te puedo vender, ya sabes, si eres fan o lo que sea. Bien, entonces sí, probemos esta sección. Bien. Sí, podemos agregarlos. Podemos arreglarlos. Eso no es un problema. Eso se ve bien. Y solo podemos agregar, ya sabes, tal vez no necesitamos los cuatro, tal vez solo necesitamos dos, pero ya veremos. En este punto, realmente no importa. Podemos eliminar cosas después. Pero, sí, solo tenemos que asegurarnos. A veces esto puede ser un poco complicado, por cierto, cuando estamos tratando de obtener secciones y poner secciones en secciones, y, ya sabes, simplemente puede ser un poco de molestia Así que solo prepárate solo para juguetear con las cosas. Así que solo queremos agregar una pequeña sección de preguntas frecuentes. Y tenemos, ahí vamos, acabamos de colapsar todo, y luego bien, eso se ve bastante bien. Se puede ver aquí que está siendo aplastado, así que sólo vamos a ir bien. Sí, sólo tenemos que quitarle el margen, creo. Hay un margen de 13. Siempre hay un margen de 13 en las imágenes por alguna razón, y es súper molesto. Pero de nuevo, te ahorra tanto tiempo. Sí, vale la pena. Bien. Entonces agreguemos esta sección de preguntas frecuentes abajo en la parte inferior, y luego eso debería ser. Creo que esa debería ser más o menos nuestra página general sobre, más o menos hecha. No creo que haya mucho más que hacer realmente. Sí. Así que solo estamos tratando de averiguar la estructura real de la página en este momento, solo porque tenemos las piezas que necesitamos, pero solo estamos luchando para bien, estoy luchando por meterlas. Bien, eso se ve bien. Bien. Tenemos la foto en la parte inferior. Tenemos la sección de preguntas frecuentes, Ah, ¿por qué está esto aquí abajo? Bien. Vamos, vamos a cambiar esto a otra cosa. Bien. Sí. En realidad, vamos a quedarnos con esta. Sí, eso se ve bien. Eso se ve bien. Bien, entonces vamos a organizar el así que simplemente colapsar todo, así que es un poco más fácil de manejar. Agregamos el pie por la parte inferior, y después agregamos las preguntas frecuentes. Ahí vamos. Perfecto. Ahí vamos. Eso debería ser bueno. Impresionante. Y esa página web se ve súper limpia, súper profesional. Es sensible, lo que básicamente significa que funciona en cualquier dispositivo porque ya está configurado. Vamos a derribar eso a las dos porque solo queremos dos. No queremos abrumar a la gente Pero esa página se ve, ya sabes, súper buena. Bien. 64. (Audio remasterizado y 16: Entonces, comencemos a jugar con el Napa. Empecemos realmente a diseñar el sitio web porque ahora tenemos la estructura real. Empecemos a diseñar cosas. Cambié los colores de los botones para pintar solo para ver cómo se ven. Pero ahora mismo, sólo voy a agregar algunas imágenes y algunos íconos y esas cosas, que previamente seleccioné. Entonces, obviamente, puedes tomarte un tiempo para, ya sabes, encontrar estos íconos y, ya sabes, imágenes y cosas para ti, para tu propia marca personal, o tal vez la marca personal de tu cliente. Pero sí, solo estamos agregando un logo aquí, así que solo un logotipo de script realmente simple, que encontré en Google. Así que sólo voy a pensar que dice Evelyn's. Así que vamos a hacer este sitio web para Evelyn. Así que de nuevo, acabamos de eliminar la cajita, y eso es literalmente simplemente hacer clic en ella y eliminarla, como lo harías en un documento de Word. Vamos a llegar tarde ese botón ahí. El botón de inicio de sesión porque no lo necesitamos. Pero lo que queremos hacer es que no necesitamos ese botón de inicio porque solo podemos obtener el logo, ve al enlace aquí. Y luego podemos literalmente en configuraciones, podemos configurarlo literalmente para que cuando hagas clic en el logotipo, vuelva a casa muy fácilmente. Y eso es muy estándar con muchos sitios web. Si haces clic en el logotipo, te vas a casa. Vamos a hacer esto sobre mí, así que eso es bueno. Cambiaremos esto a sí, solo hagámoslo una tienda. No es realmente importante por el momento, pero solo quiero asegurarme de que nosotros que te muestro aproximadamente cómo cambiar las cosas, como texto e imágenes. Y entonces, ya sabes, puedes hacer las cosas tú mismo. Una vez que entiendas como cambiar las imágenes, como borrar cosas, entonces solo puedes hacer ya sabes, cosas a tu gusto. Bien, así que bienvenido a mi marca personal. Bien. Entonces vamos a cambiar esta imagen. Cámbialo por éste. Bien. Perfecto. Ahora bien, en lo que respecta a esta sección, obviamente, ya sabes, no hemos aparecido en flujo web o Zoom o, ya sabes, contenido para o spotify o cualquier cosa, o tal vez hayas aparecido en Spotify, pero solo queremos agregar algunos logotipos más relevantes de al igual que los medios de comunicación, Netflix, y cosas así, solo para que se vea un poco más realista. Disculpe. Pero sí, con los logotipos reales, con este tipo de secciones, me gusta mantener todo del mismo color. Si puedo, solo porque solo se ve mucho más limpio que tener como toneladas de diferentes colores. Así que solo los tenía todos arreglados en gris. Entonces simplemente se ve mucho más limpio. Bien, entonces, sí, puedes cambiar los botones a lo que quieras. Y obviamente, puedes elegir, lo que pones en el texto. Puedes cambiar las cosas como te sientas en forma. Ya sabes, solo te estoy mostrando una idea aproximada de lo que puedes hacer y, ya sabes, darte algunas ideas, y luego simplemente puedes hacer lo que más te parezca para tu marca porque es tu marca, es tu empresa, es o tu cliente. Para que puedas usar tu experiencia en lo que has aprendido anteriormente en nuestros otros cursos sobre diseño de sitios web o en este curso, y simplemente, haz tu propia versión. Eso es muy importante que hagas lo tuyo. Bien. Entonces, así que ahora sólo vamos a cambiar estos íconos. La forma de cambiar los íconos es realmente sencilla. Entonces, en lugar de cambiar los íconos, en realidad no puedes cambiar estos íconos. Entonces, en cambio, solo pones una imagen, así haces clic en el ícono, luego copias y pegas una imagen, y luego simplemente la dimensionas de manera diferente y luego simplemente borras el ícono original real. Entonces este es el ícono original. Usted copia y pega la imagen. Y luego solo literalmente, solo lo cambias. Entonces es súper simple. Y obviamente solo asegúrate de que sea lo suficientemente pequeño como para caber en la pequeña burbuja. Y luego sí, estos pueden ser, ya sabes, representan, como servicios o lo que quieran. Obviamente, esto no necesita cambiar mucho. No voy a perder tu tiempo y agregar reseñas y esas cosas, porque eso es obviamente algo que puedes hacer en tu propio tiempo. Pero agreguemos algunas imágenes más relevantes para el blog. Pero obviamente, puedes usar la sección CMS para esto, y te mostraré cómo hacer ese bit de cerveza más adelante en aproximadamente diez, 15 minutos de tiempo. Bien, entonces solo eliminamos estos porque no necesitamos. Pero creo que está un poco ocupado. Puedes quedarte con esos si quieres, pero yo solo quería borrar eso por ahora. Yo creo que, cambiemos el color de estos botones, porque por alguna razón, los rosas simplemente destacan y simplemente no se ve bien Entonces vamos a cambiarlo. Hay un par de formas en las que puedes cambiarlo. Me gusta la herramienta cuentagotas. Sí, ese color se ve mucho mejor. Bien. Impresionante. Eso se ve bien. Bien. Así que ahora podemos también podríamos cambiar esto, así que ellos simplemente pueden cambiar la imagen, y luego simplemente borrar eso. Por lo tanto, elimine, elimine, elimine. Y luego ya solo formateo para ti. Digamos, por ejemplo, que no estás en Twitter, solo elimínalo. Vinculado en él, Facebook e Instagram. Sólo quedemos con esos dos. Bien. Bien. Entonces obviamente, con los enlaces, simplemente ir literalmente al enlace. Sí. Entonces, cuando estés en tu Facebook, solo puedes agregar tu enlace aquí. Y eso va a enlazar a tu Facebook. También puedes hacer clic en abrir una nueva pestaña, eso a veces es bastante útil. Eso simplemente significa que no quita de la página del sitio web, por lo que aún están conectados a su sitio web o tienen su sitio web abierto, sino que simplemente abren un nuevo navegador en su teléfono en su escritorio. Entonces sí, no recomendaría tener más de tres o cuatro pestañas en tu pie de página. Entonces sí, solo tenemos algunas pestañas diferentes aquí solo para mostrarte que puedes cambiarlas, y es realmente fácil. Simplemente, literalmente, solo tienes que hacer clic en el enlace. Aquí, mira, el enlace de pie de página de EI. Luego, literalmente, simplemente haces clic en el pequeño diente, y luego puedes elegir la página a la que vaya Sólo voy a cambiar el color de la libración. Entonces, por ejemplo, ahí vamos. Entonces básicamente podemos cambiarlo para que cuando alguien se cierne por encima, cambie a un color diferente, y podamos hacer lo mismo con este Así que, literalmente, haga clic en el enlace. Sube a pasar el cursor. Entonces solo desconéctelo. Eso es muy importante. Haga clic en la pequeña herramienta cuentagotas. Ahí vamos. Entonces tenemos que los tenemos hechos a esos dos, pero aún no hemos hecho los recursos. Eso es lo que no hemos hecho. Así que sólo vamos a conseguir eso. Haremos exactamente lo mismo ho. Ahí vamos. Y luego literalmente nos hemos desconectado, desconectamos. Ahí vamos. Y ahí vamos. Entonces solo podemos agregar el código Hex, y ya estamos listos para comenzar. Estamos listos para el rock and roll. Impresionante. Bien. Quiero decir, obviamente, puedes agregar, diferentes enlaces en el Navar y esas cosas, pero solo quiero mostrarte como aproximadamente cómo puedes hacerlo solo para que las cosas sean realmente simples para ti Y luego puedes jugar con fuentes, y puedes jugar con el color y averiguar exactamente lo que quieres. Pero esto es solo un curso rápido en la construcción del sitio web. Entonces lo que estoy haciendo aquí es que estoy creando un componente, así que en última instancia una Navbar universal Entonces qué haces, y te voy a mostrar de nuevo con el pie de página. Entonces seleccionas el elemento. Entonces en este caso, es el pie de página, ¿de acuerdo? Para que puedas ver cómo se selecciona el pie de página todo el pie de página. Bien. Después ve a esta cajita, haz clic en Crear nuevo componente, y luego solo etiquétalo, solo créalo. Y mira aquí, ahora es verde. Cuando es verde, significa que siempre y cuando ese elemento sea verde. No importa en qué página del sitio web se encuentre, va a ser la misma. Entonces, si lo cambias en una página, va a cambiar en todas las páginas para que pueda ser súper útil. Bien. Empecemos a diseñar la página del blog. Vamos a quitarnos algunas cosas en realidad porque no quiero que esté demasiado ocupado. Cambiemos el color. Entonces cambia eso, cambia ese color también. Cambiémoslo a azul oscuro. Bien. Yo también me cambio a azul oscuro. Por qué solo lo guardamos en realidad lo mantenemos como rosa. Esa es una imagen. Así que de nuevo, acabo de recibir algunas imágenes antes de arreglar esto solo para asegurarme de que las tenía listas, y respeté tu tiempo. Bien. Entonces, por alguna razón, eso no se está cargando. Solo alberguemos uno de estos por el momento. Perfecto. Y luego este contenido. Entonces te voy a mostrar cómo configurar el CMS en un segundo. Y una vez que realmente entiendas cómo configurar un CMS, va a cambiar literalmente todo sobre cómo realmente trabajas en el flujo web. Es súper fácil. Bien, entonces por ejemplo aquí, el Nav y el pie de página son ambos la versión antigua. ¿Bien? Así que ahora podemos agregar la nueva versión. Bien Así que suma esto aquí arriba, ahí vamos. Oh, espera un segundo. No está completamente ahí. Se puede ver como no está conectado con el cuerpo, ahí vamos. Ahora lo es. Eso, para que esté conectado al cuerpo, tire de él hasta el fondo. Asegúrate de que esté a la izquierda. Ahí vamos. Perfecto. Entonces ahora, si cambiamos algo en la barra de NAF en la página principal, va a cambiar en todo el sitio, cada lugar del sitio web, donde está esa barra de NAF en particular, va a Bien, podemos echarle un vistazo a esta página de blog. Bien. Entonces con la página de bloques , en realidad, hagámoslo un poco más tarde porque así va a ser como puedo mostrarte el CMS. Entonces hagámoslo un poco más tarde. Contacto ors página, esto debería ser bastante fácil. De nuevo, puedes cambiar la dirección de correo electrónico, el número de teléfono y esas cosas. Yo sólo voy a cambiar el color, y mostrarte cómo cambiar el color porque esa es una especie de la parte más difícil. Obviamente, no sé cuál es tu dirección de correo electrónico o tu número de teléfono, así que puedes cambiar esto como quieras. Pero sí, vamos a agregar la barra de la NAF aquí arriba. De nuevo, solo asegurándome de que esté conectado al cuerpo. Entonces elegimos el forraje. Bien. Perfecto. Quiero decir, eso ya está bastante hecho. Eso está prácticamente terminado. Entonces ahora pasemos a la página acerca de nosotros. Bien. Bien. Bien. Ahora tenemos en realidad, vamos a usar este. Yo creo una segunda página sobre nosotros. Y fue bastante similar. Pero solo quería agregar algunas otras cosas solo porque era solo quería que fuera un poco más diferente a la página de inicio. Entonces sí, así que acabo de cambiar ligeramente la estructura. Pero esto es más o menos exactamente lo mismo. Entonces voy a estar haciendo exactamente lo mismo. Es solo un diseño diferente. Bien, agreguemos ahí un bonito, bonito, humilde titular. Y agreguemos algunos que no sé. Agreguemos algunas imágenes. No estoy seguro de qué imágenes debemos usar. Quizá agreguemos estos. Digamos que a ella le gusta, ya sabes, la fotografía o algo así, y tal vez digamos que está, ya sabes, mostrando sus habilidades fotográficas Impresionante. Estas son como imágenes de stock de un sitio web que encontré. Creo que fue pixels.com, que de hecho mencioné anteriormente en el curso también Y, solo puedes eliminar estos elementos o puedes agregarles texto. Depende completamente de ti, obviamente. Sólo te estoy mostrando, una especie de versión simplificada de lo que puedes hacer. Bien. También tomo grandes fotografías de la fotografía. Mi trabajo. Ahí vamos. Entonces solo podemos escribir un poquito. Pero la cosa es, como, la razón por la que es realmente importante que usemos plantillas y un poco de ortografía ahí. La razón por la que usamos plantillas, y la razón por la que configuramos las cosas de esta manera es para ahorrarnos mucho tiempo y también asegurarnos de que el sitio web responda. Entonces este sitio web funcionará bien, siempre y cuando uses las plantillas, y no cambies demasiado en lo que respecta a la forma y solo en realidad, ya sea borras cosas o, ya sabes, cambies el texto real o las imágenes, todo va a estar perfectamente en formato. Es solo la forma en que están construidos. Entonces, por ejemplo, aquí, mira, puedes ver, ya sabes, el poco um que conoces, apertura y cierre de la sección de preguntas frecuentes. Eso tardaría tanto en crearlo por ti mismo. Al tenerlo así, literalmente solo hace que sea mucho más fácil construir un sitio web y crear un sitio web guapo, que en realidad es funcional. Bien. Entonces en esta pequeña sección aquí debajo de la sección de preguntas frecuentes, vamos a agregar, quieres reservar conmigo. Sí, puedes reservarme a continuación. Pon, escribamos algo como libro conmigo. Ese es Pink, pasa el cursor sobre él. Entonces, si quieres cambiar eso, entonces simplemente, literalmente, ve ahí. Seccionador. L vamos a hacerlo un poco más ligero. Esta curva aquí, entonces la curva que acabo mostrarte es básicamente, siempre y cuando escojas cualquier color en esa curva, va a adaptarse al color principal, así que al color más oscuro. Eso es un pequeño consejo para ti. Bien. Entonces la barra de Nav en el pie todavía no se ha cambiado, así que cambiemos eso. Bien. Bien, ahí vamos. A con eso, no está conectado con el cuerpo. Está conectado a la sección. Entonces cambiemos eso. Es eso es a lo que está conectado con el cuerpo ahora. Eso es bueno. Impresionante. Bien. Eso está bien. Eso está bien. Eso se ve bien. Impresionante. Bien, comencemos a mirar los artículos del blog. Creo que aquí es donde puedo mostrarte cómo usar el CMS. Este va a ser el mejor ejemplo de ello. Así que mantengamos las cosas simples y solo eliminemos las pestañas que se abren. Puedes agregar eso si quieres, pero es un poco más complicado, pero solo quiero que las cosas sean lo simples posibles por ahora. Y luego si quieres que agregue una lección adicional al curso, entonces solo envíenos un correo electrónico y podemos arreglarla. Entonces solo estoy agregando un contenedor. Y luego dentro del contenedor, voy a agregar un componente CMS, que te mostraré una vez abra esto y lo ponga en el lugar correcto. Ahí vamos. Simplemente haz clic en el botón pequeño más, y luego solo en la lista de colecciones. Así es como en realidad se llama, pero básicamente es un elemento CMS. Ponlo dentro del contenedor. Entonces la fuente necesita ser el CMS una colección, bien, que te voy a mostrar cómo hacer en un poquito. Puedes ver aquí que todavía no hay artículos, pero vamos a agregar algunos artículos en un segundo. ¿Bien? Entonces podemos ver eso, estado vacío. Entonces no hay nada ahí. Queremos que esté en una grilla. Entonces vamos a hacer listas de recolección de goma y luego presionar grid. Esto va a romper las cosas y queremos que tres columnas se adapten a las columnas de abajo. Bien. Así que ahí tenemos eso. Eso es perfecto. Ahora lo siguiente que tenemos que hacer es ir a la configuración de CMS. Entonces esta es la colección que tenemos configurado con el CMS, y solo vamos a sumar cinco. Sólo son unos simulados. No son serios. Simplemente agregan como marcadores de posición casi. Entonces podemos sumar esos. Vamos a solo un lat unos pocos solo para que sea un poco más fácil de manejar. Y luego podemos tomar una y solo mirar cambiar la imagen en miniatura Vamos a cambiar la imagen en miniatura por algo que creemos que es un poco más relevante Ahí vamos. Eso funciona. Y solo podemos agregar el bloque uno, perfecto. Éste, vamos a cambiarlo al blog dos. Vamos a cambiar el real Bien, cambiar la imagen. Y por último, el blog tres. Y puedes ver aquí que en la sección CMS, es mucho más fácil cambiar cosas, y es mucho más organizado. Ahora bien, esta es en realidad una configuración de CMS preexistente para como mi sitio web real para que pueda mostrarte todos los diferentes detalles y esas cosas, y no solo estoy comenzando de cero, sino como, tuyo va a ser mucho más simple y mucho más fácil de administrar. Obviamente, va a ser único para ti. Entonces por el momento, mira, puedes ver que acabo de copiar y pegar el elemento, los elementos del diseño de la plantilla anterior Entonces, déjame mostrarte. Bien. Déjame tratar de averiguar por qué eso no me deja pegar eso. Bien. Volvamos a agregar esa lista de colecciones de nuevo. Ir a colecciones de bloque. Perfecto. Y luego el envoltorio. Ahí está. Vamos a abrir eso un poco. Artículo de colección. Ahí vamos. Entonces ahora hemos copiado y pegado el elemento Así que literalmente simplemente tomamos uno de estos elementos y simplemente lo copiamos y pegamos. Así que ahora ya no necesitamos esto. Simplemente lo borramos. Eso se ha ido. Bien. Perfecto. Y lo que pasa con el elemento de colección es que una vez cambias algo en uno cambia en todos ellos. Entonces, en lugar de reemplazar la imagen, lo que podemos hacer es simplemente hacer clic en este pequeño botón morado aquí, y luego simplemente hacemos clic literalmente en la imagen en miniatura, y la cambia automáticamente Ahí vamos. Ahí vamos. Perfecto. Ahora, por alguna razón, así que eso nos está dando un poco de margen, así que quita ese 13, perfecto. Ahora, por alguna razón, esa imagen del medio no ha cambiado, pero luego cambiaremos eso, un problema repentino. Entonces cambiaremos este por el título, ver bloque uno, bloque dos, bloque tres. Podemos cambiar eso si uno, podemos conectarlo al CMS, pero para el propósito de esta lección, no hagamos eso. Cambia eso al contenido. Y luego para esto. Nuevamente, aquí, mira, si cambiamos el enlace, vincula la sección del bloque actual. Esto es lo que quieres. Entonces, el título real y los enlaces en cada uno de los elementos de la colección, desea vincularlos a la sección actual del ítem actual. Así que mira aquí. Entonces colección de bloques actual, perdón. Ahí vamos. Entonces esta imagen del medio no se ha actualizado. Entonces volvamos al CMS, colección de bloques, bloque dos. Ah, en realidad no salvé. Por eso. Bien, vamos a reemplazarlo. Vamos a entrar, vamos a asegurarnos de realmente se cargue esta vez. Parece que se ha cargado, vamos guardarlo, y luego vamos a comprobarlo. Vamos a asegurarnos de que se actualice. ¿Funciona? Ahí vamos. Impresionante. Entonces ahora, podemos sumar 50 1 millón, para que veas eso. Lo cambié al tema a la moda en un solo artículo, y literalmente lo cambié en todos ellos. Entonces esto es lo mismo para todo. Puedes tener 1 millón de artículos diferentes. Creo que hay cantidades ilimitadas de artículos que puedes crear, y los cambia tan fácilmente. No hay que cambiarlos uno por uno. Ese es el poder de la configuración de CMS. Entonces, ya tenemos esa configuración. Vamos a cambiar esto Foer y Nav Bar, porque eso me molesta. Bien, ahí vamos. Echemos un pequeño vistazo. Bah bah, bah, bah. Ahí vamos. Y vamos a cambiar esto. Y obviamente, esto podría llevarte un poco más de 45 minutos, pero solo te estoy mostrando que si tienes todas tus imágenes listas y todo te formateó, ya sabes, con un poco de práctica, puedes hacerlas como súper súper rápido. Y puede que te lleve un poco más la primera vez que lo hagas, pero después, no te va a llevar nada de tiempo. Bien. Entonces quiero decir, tenemos un sitio web bastante bastante fuerte aquí, espera a que se cargue esto. Pero, ya sabes, como, literalmente hemos construido esto en, ya sabes, 45 minutos planos. El sitio web es responsive. Sabes, ya sabes, nos tomó 45 minutos crear este sitio web, y es literalmente, quiero decir, en realidad puedes agregar el CMS, por cierto aquí también. Entonces puedes agregar exactamente la misma función y limitarla a tres, solo puedas mostrar, como, los artículos más recientes, por ejemplo. Um , si, solo para avisarte eso para que no tengas que hacerlo manualmente. Pero quiero decir, el sitio web en general se ve muy bien. Quiero mostrarte un par de cosas en lo que respecta a los escenarios antes de que terminemos porque eso solo nos va a ayudar a terminar de todo. Pero sí, quiero decir, ya sabes, en 45 minutos, hemos logrado construir quiero decir, si se carga un poco más rápido, eso sería fantástico, pero creo que mi Internet solo estaba funcionando un poco lento. Ya sabes, cuando puedes construir un sitio web, que sea receptivo, listo para funcionar en 45 minutos, realmente no puedes, ya sabes, quejarte demasiado de eso. ¿Sabes? Es bastante impresionante. El hecho de que puedas hacer eso. Bien, entonces echemos un pequeño vistazo a esto. Bien. Quiero decir, todas las páginas se ven bien. Las páginas estáticas son las cosas más importantes. Entonces por ejemplo, ya sabes, esto aquí está en una página estática. Entonces esto es aquí está en una página estática aquí. Bien. Pero para el artículo, por ejemplo, si quieres que la página llene automáticamente por sí misma, entonces necesitas crear las páginas reales de la colección CMS, es decir, aquí tienes un ejemplo de una aquí para el sitio web de Lancaster Academy Entonces, por ejemplo, si cambio, si creo un elemento CMS o un artículo CMS, se rellena automáticamente a la página real, y crea una página separada sin crear una página extra si eso tiene sentido. Entonces, simplemente harías clic aquí. No creo que tenga demasiados, así que no me va a dejar que básicamente tendría que actualizar mi plan, pero el plan CMS es perfecto. Así que vamos a mostrarte dentro de las colecciones del blog. Así que puedes ver aquí, tengo toneladas de elementos diferentes. Lo siento, yo acabo de hackear upped. Tengo toneladas de elementos diferentes como el texto enriquecido, enlace de imagen. Esos son los principales que vas a usar, texto plano, texto enriquecido, imagen, enlace de video y enlace. Realmente no vas a usar mucho más, pero puedes usar otras cosas si quieres. Simplemente crea las cosas que necesitas que necesites, comúnmente en cada página. Entonces solo crearlos. Es muy, muy fácil, muy, muy simple. Bien. Veamos algunos ajustes ahora. Vamos a la barra de configuración del sitio. Ahora, lo primero que hay que mencionar justo antes de terminar es el favicon y el clip web Entonces esto necesita ser de 32 por 32 píxeles, y esto finalmente va ya sabes en la pestaña cada vez que alguien visita tu sitio web. El clip web debe ser de 256 por 256 píxeles. Ahora, en lo que respecta a los planes, puedes simplemente quedarte en el plan inicial, que es gratuito, pero no puedes conectar un dominio personalizado. El CMS, opción en realidad te permitirá configurar el CMS, que de nuevo, es súper útil, así que realmente lo recomendaría si tienes el dinero para invertir en él. Y también te da un dominio personalizado, lo cual es genial. La opción básica básicamente te da la posibilidad de conectar el dominio, y te da un alojamiento un poco más rápido, pero no te da la opción CMS. Y luego una vez que tengas un plan, ya sea la opción básica o la de CMS, entonces puedes agregar tu dominio, que acabas de ver ahí. La opción de formulario, así que asegúrate de agregar tu dirección de correo electrónico aquí. Aquí es donde si alguien se pone en contacto contigo con respecto a tu formulario de contacto DS o cualquier otra cosa, entonces me pondré en a tu formulario de contacto DS o cualquier otra cosa, contacto contigo allí, pero luego una vez que hayas terminado, solo publícalo, y tu sitio web está terminado. Todo está hecho. Sí, buen trabajo. Bien. Te veré en la siguiente lección, pero sí, muchas gracias por darme el tiempo de pasar por esto contigo, y espero que tengas un gran día. Nos vemos pronto. 65. Lanzamiento del sitio web: obtener su sitio web en la página #1 de Google: ¿Cómo puedes preparar tu sitio web y acceder a la primera página de Google lo más rápido posible? Bueno, hay algunas cosas clave que debes tener en cuenta cuando realmente estás obteniendo tu sitio web, TAN listo. En esta lección, vamos a cubrirlos todos. Ahora, lo primero que necesitas para ponerte en marcha son tus palabras clave. Ahora tus palabras clave son esencialmente las palabras con las que te puedes asociar para tu marca y lo que realmente puedes ofrecer, que son únicas y distintivas de tu marca específica. Básicamente ve a Google Keyword Planner y luego busca términos de búsqueda relevantes que alguien pondría en Google nuevo para encontrar tu marca. Básicamente, piensa en las palabras con las que quieres que te asocien para tu marca. Luego revisa el planificador de palabras clave de Google para asegurarte de que haya suficiente volumen de búsqueda, que básicamente significa que hay suficientes personas buscando ese término o palabra en particular que puedas asegurarte de que haya suficientes personas buscando ese término para encontrarte en Google. Ahora bien, otra cosa a verificar es ver qué términos y palabras clave tienen menos competencia. El truco aquí es asegurarse de que el término de búsqueda por el que te conocen sea lo más único posible. Por lo tanto, cuando alguien realmente lo busca en Google, es más probable que aparezca. Ahora las palabras clave no son las únicas cosas que necesitas para que te encuentren en Google. Otra cosa que realmente tienes que tener en su lugar es el SEO en la página. Esto básicamente significa asegurarse de que sus titulares y subtitulares sean todos relevantes para el tipo de cosas que está ofreciendo. Esto va a ayudar a los clientes a encontrar realmente sus productos en línea, y también asegurarse de que cuando agregue imágenes a su sitio web, asegúrese de que tengan un texto descriptivo adjunto a ellos para que Google pueda reconocer realmente qué se trata la imagen y para qué es relevante. También asegúrate de que todas tus URL sean agradables, limpias y concisas Por ejemplo, no hagas que tu URL sea súper larga ni agregues palabras innecesarias porque Google no va a saber qué hacer con tu URL, y no te encontrarán en la primera página pronto. Ahora, otra cosa que es realmente importante para el SEO y que te encuentren en Google es el contenido de calidad. Este es en realidad uno de los enfoques que he tomado personalmente para cada uno de mis negocios para asegurarme de que la gente encuentre mi sitio web y finalmente luego vaya a comprar mis productos y servicios. Esencialmente, cuando se trata de contenido de calidad, esto significa escribir publicaciones de blog o tal vez publicar videos, para mantener a los usuarios en tu sitio web. Google se preocupa por dos cosas simples hora de clasificar tu sitio web. Uno, cuánto tiempo pasa el usuario en tu sitio web. Debido a que cuanto más tiempo pasa alguien en tu sitio web, esto le dice a Google que la calidad del contenido es mucho mayor, y también la relevancia del contenido para lo que la persona está buscando Y estos dos trabajan de la mano para decirle a Google, cuando alguien busca este término de búsqueda en particular, si le muestras esta página, van a estar satisfechos y obtener las respuestas que están buscando. Google esencialmente se preocupa por darle a la persona lo que necesita lo antes posible de la mejor manera. Entonces, si realmente puedes resolver ese problema y darles lo mejor, entonces en última instancia van a pasar más tiempo en tu sitio web, y Google va a trabajar a tu favor y te pondrá en la parte superior de la página uno. Ahora, otra cosa a tener en cuenta es la velocidad de la página. Ahora, literalmente puedes encontrar herramientas en línea para verificar la velocidad de tu sitio web, simplemente buscando en Google, revisa página de mi sitio web y luego solo agregas tu URL Entonces eso es súper fácil de verificar, pero asegúrate de que tu sitio web sea lo más rápido posible. Esto significa no agregar archivos muy largos , profundos y grandes como videos en tu página de inicio, porque eso va a aumentar en última instancia la tasa de rebote. Y cuando digo tasa de rebote, básicamente me refiero a la gente que viene a su sitio web y luego se va inmediatamente si su sitio web no se carga instantáneamente Así que simplemente asegúrate de que tu sitio web se cargue muy rápido, y va a permitir que las personas lleguen a donde necesitan estar y pasar más tiempo en tu sitio web porque va a brindar una mejor experiencia. Ahora, otra cosa de la que debes asegurarte es de la experiencia del usuario. Ahora, ya hemos cubierto esto desde el principio del curso, pero asegurarse de que el cliente o la persona pueda llegar a donde quiera estar en pasos agradables y fáciles de seguir es realmente importante. Esto significa que no se frustrarán y no marcarán el sitio web, y pasarán más tiempo ahí, lo que le dirá a Google que tu sitio web es de alta calidad, por lo tanto, dado que tiene una mejor oportunidad de clasificar altamente. Ahora, algunas otras cosas que son realmente importantes para su sitio web son los enlaces internos y los enlaces posteriores. Ahora, los enlaces internos son donde tienes muchas publicaciones de blog diferentes, y todas se vinculan entre sí para finalmente construir una red de publicaciones de blog que todas se complementan muy bien Por ejemplo, en una entrada de blog, podrías estar hablando del mismo tema, en el que ya has escrito otra entrada de blog, así podrías vincularte a esa publicación de blog mantener a la gente en tu sitio web por más tiempo. Ahora, los enlaces traseros son ligeramente diferentes. Los enlaces hacia atrás son esencialmente enlaces de otros sitios web que Google ya conoce y en los que confía. Entonces, por ejemplo, si fueras una compañía completamente nueva y solo estás construyendo un sitio web desde cero, siempre podrías llegar a diferentes sitios web que están en tu nicho para finalmente volver a vincular desde páginas de tu sitio web a las de ellos y viceversa, para básicamente compartir tráfico y también generar algo de confianza con Goole mientras Ahora, sé que esto es mucho para tomar. Pero personalmente, lo que haría si te sientes un poco abrumado es solo enfocarte en crear contenido de alta calidad y publicaciones de blog en tu sitio web Esto es algo que he hecho personalmente por cada uno de mis negocios en línea, y funciona extremadamente bien. Simplemente porque cuando alguien viene a tu sitio web y dice que tienes mucho contenido de calidad ahí, tienden a confiar mucho más en ti. Y en última instancia, si pasan más tiempo en tu sitio web, entonces Google confía mucho más en ti también. Entonces de todos modos, sé que este no es un curso basado en SEO, y nosotros el 1 de mayo en el futuro, pero en este caso, solo queríamos darte un resumen rápido las cosas en las que puedes estar pensando cuando estés construyendo el SEO y tu presencia digital para tu sitio web. Sin embargo, si tienes alguna duda con respecto al SEO, no dudes en comunicarte. Estoy más que feliz de ser lo más solidario posible. Pero aparte de eso, te veré en la siguiente lección. Nos vemos pronto. 66. Lanzamiento del sitio web: protección de un gran dominio para tu sitio web: Entonces, ¿por qué es tan difícil encontrar un gran dominio para tu sitio web en estos días? Bueno, en última instancia, solo para darte un poco de historia de fondo, gente ha comenzado a comprar dominios en los últimos años y luego venderlos por una prima Entonces, por ejemplo, si alguien se encontró con un dominio por $20, que generalmente es cuánto debería costar un dominio, y no quiere usarlo personalmente, pero lo ve como un dominio que alguien más podría potencialmente usar para un negocio o para algún tipo de proyecto. Lo que básicamente harán es que comprarán el dominio por 20 dólares, y pagarán 20 dólares al año para conservarlo. Y luego, cuando alguien más se encuentre con ese dominio y lo busque, lo enumerará en línea con una prima por tal vez cuatro o $5,000 como mínimo Ahora, creo que esta es una de las peores cosas de la industria del dominio. De hecho, trabajo con muchas empresas para ayudarles a encontrar la marca perfecta aman. Una de las cosas que muchas empresas quieren es una gran demanda por su sitio web. Ahora bien, para ser completamente brutalmente honesto, si buscas una marca, que es de menos de seis letras, va a ser muy, muy difícil encontrar un dominio en cualquier lugar 2-5 letras, que esté disponible, y sobre todo disponible a menos de un número muy alto cuando se trata del costo Y no sólo disponible, sino que probablemente te va a costar un brazo y una pierna si realmente quieres comprarlo. Ahora, no te preocupes. De hecho, tenemos un par de trucos realmente interesantes que puedes usar para básicamente obtener un dominio que es súper valioso para tu negocio, y además te ahorra muchísimo dinero. Es posible que ya tengas tu marca en su lugar. Y si estás completamente configurado en tu marca, entonces un gran método para usar, que usamos todo el tiempo con los clientes es agregar una palabra relevante. Por ejemplo, si estás en una tienda de comercio, entonces podrías agregar algo como tienda, por ejemplo, o incluso podrías agregar tienda antes de la marca real. Entonces, por ejemplo, si tu marca era Nike, entonces podría ser shop nike.com O potencialmente, siempre podrías agregar tienda al final, que es esencialmente nike store.com, o si eres una agencia, por ejemplo, siempre podrías usar la palabra agencia dentro de tu dominio también Básicamente, todo lo que necesitas hacer es asegurarte que la palabra que agregas sea relevante para lo que ambos vendes ahora y también para lo que podrías estar vendiendo en el futuro. Y en realidad, hay muchos negocios que si no puedes pagar el dominio clean.com, así que solo tu marca en el.com en las etapas iniciales de construir tu negocio, muchos negocios, incluyendo Facebook en el principio, por un dominio, que básicamente es solo un dominio que básicamente es de $20 con una palabra agregada en él, pero más adelante cuando el negocio es súper rentable compran el dominio claim.com porque tienen los fondos para hacerlo Entonces ese es el primer enfoque, básicamente agregar una palabra simple que sea relevante para lo que haces y lo que ofreces a tu nombre de dominio. Ahora bien, si ese enfoque no te funciona, entonces siempre puedes simplemente pagar una prima. Ahora a veces puedes negociar y obtener una gran oferta para tu nombre de dominio. Y en definitiva, la persona que gana esa negociación es la que menos le importa. Entonces, si tienes un plan de respaldo como agregar una palabra y estás ofreciendo a alguien realmente buen dinero que ha estado guardando este dominio durante bastante tiempo, podrías obtenerlo a un precio bastante decente. Ahora, obviamente, no todas las personas venden un dominio van a ser iguales, entonces alguien va a estar más órbita a la negociación y otros, bueno, no tanto. Pero todo lo que puedes hacer es preguntar y hacer la pregunta, y si vuelven con un precio ridículo, probablemente sea mejor mirar otras opciones. Ahora, otra forma realmente inteligente de obtener un dominio.com realmente genial es cambiar la ortografía Por ejemplo, teníamos una marca con la que trabajamos hace poco tiempo llamada Spruce, pero en lugar de usar la ortografía común de SPUCE, en realidad cambiamos la C por una S, que todavía se veía como abeto, pero esencialmente tenía mucho más distinción Fue mejor para el SEO, y también nos ayudó a obtener un dominio claim.com, que solo tenía cinco letras Ahora bien, esto en realidad es casi inaudito cuando se trata de encontrar dominios con cinco letras, y eso se veía tan genial Pero logramos encontrarlo, y acabamos de tener súper suerte. Así que siéntete libre de comprobarlo si realmente quieres e intenta usar este enfoque para ver qué tan afortunado tienes a la hora de encontrar tu dominio. Ahora bien, si no quieres cambiar la ortografía del nombre, no quieres pagar una prima, y tampoco quieres agregar una palabra. Siempre existe la opción de cambiar la extensión al final. Ahora, la mayoría de la gente quiere que dominio.com.au sea completamente honesto, pero no es el único dominio que existe. Hay muchas otras opciones. Entonces, por ejemplo, si estás radicado en Inglaterra o Francia, por ejemplo, podrías usar dot at UK o do fr, lo cual es relevante para tu ubicación geográfica particular. Esta puede no ser la mejor opción para alguien que busca hacer negocios a nivel internacional como en una marca de comercio, por ejemplo. Si solo buscas enfocarte localmente, esa podría ser una gran opción para ti. Si ninguna de esas opciones funciona, y ni siquiera estás tan seguro sobre el nombre de dominio que estás buscando usar o la marca que tienes, entonces podría valer la pena explorar una marca diferente por completo. En las últimas décadas, tanto yo como mi equipo, en la agencia Clement Tn House Brand hemos ayudado a miles de emprendedores diferentes utilizando nuestro enfoque único para marca para encontrar nombre de marca para encontrar la marca perfecta para su empresa Ahora, por desgracia, estuvimos muy abajo hasta 2025. Sin embargo, tenemos nuestro proceso establecido como un curso en línea, que deberías poder encontrar si revisas nuestro perfil. Así que asegúrate de comprobarlo, y eso podría ayudarte a encontrar una marca increíble para tu negocio. Realmente espero que esta lección te haya ayudado a entender cómo tal vez conseguir un nombre de dominio realmente genial para tu marca. Pero aparte de eso, si tienes alguna duda, por favor házmelo saber que estoy aquí para apoyarte y ayudarte en la medida de lo posible. Pero no puedo esperar a verte en la siguiente lección. Entonces te veré ahí. 67. Lanzamiento del sitio web: agregar un dominio personalizado a tu sitio web: ¿Cómo se adjunta un dominio personalizado a su sitio web de piso web? Bueno, en realidad es muy sencillo. Así que vamos a sumergirnos y te mostraré cómo hacerlo. Entonces el primer paso es llegar realmente a tu sitio web. Ahora bien, este es obviamente el sitio web de Lancaster Academy of Design and Brand. Y cuando vayamos a esta sección aquí, verás un pequeño botón llamado Configuración del sitio. Entonces ahí es donde queremos ir. Ahora, cuando hagas clic en Configuración del sitio, entonces serás llevado a esta página, que luego solo te deja hacer clic en Publicar. Y te encontrarás aquí donde ves producción y tus dominios personalizados a continuación. Ahora, como pueden ver aquí, ya tengo dominios personalizados adjuntos a mi sitio web. Pero si solo miras por encima de esos dominios, puedes ver un pequeño botón que dice agregar dominio personalizado. Ahora, la mejor manera de agregar un dominio personalizado en mi experiencia, si tienes tu dominio ya sea con Go Daddy o Google Domains, por ejemplo, es simplemente seleccionar el dominio Quick Connect. Porque lo que eso hará es esencialmente abrir un proceso de selección rápida donde finalmente puede comenzar a agregar sus dominios o punto WWW, domain.com De hecho, también quita el punto WWW y luego haz clic en Continuar. Luego analizará el dominio, detectará el proveedor de DNS, y luego también comenzaremos a configurar realmente los detalles. Ahora, obviamente, no necesito conectar este dominio a este sitio web en particular. Una vez que hayas conectado tu dominio usando ese enfoque, es muy sencillo publicar tu dominio. Ahora, a veces toma un poco de tiempo para la configuración de DNS con tu dominio. Conéctese con la plataforma de flujo web, y eso puede llevar entre un par de horas y 48 horas. Pero una vez que se haya vinculado con éxito y todo esté perfecto, verá conectado al lado de cada uno de los dominios. Y en ese punto, todo lo que necesitas hacer es publicar tu dominio haciendo clic en este botón aquí y luego presionando publicar dos dominios seleccionados. Ahora bien, si vamos a otro sitio web, solo quiero mostrarte cómo se ve si no tienes un dominio fácilmente adjunto a tu sitio web. Ahora bien, esto básicamente me está diciendo que si quiero agregar un dominio personalizado, necesito agregar un plan de sitio web emparejado. Ahora en una lección anterior, hecho te mostré los diferentes planes de sitios web, y en última instancia, eso debería ayudarte a tomar la mejor decisión basada en lo que es mejor para ti. Pero en última instancia en esta situación, necesito hacer clic en este botón y luego elegir un plan de sitio web que se adapte mejor a mis necesidades personales. Ahora, sólo para resumir, de nuevo, el plan de inicio, no se puede agregar una costumbre de mí a este plan en particular Ahora bien, el plan básico es para ti si no necesitas agregar algún tipo de blog o algún tipo de función CMS. Pero si necesitas agregar un blog y realmente quieres agregar contenido a tu sitio web, entonces elige la función CMS porque esa es la más popular porque es simplemente la mejor. por la opción CMS para cada uno de mis sitios web, y siempre pago anualmente solo porque ayuda a ahorrar un poco de dinero. Ahora, obviamente, si eres una marca de comercio electrónico, debes asegurarte de seleccionar un sitio de comercio electrónico, y por lo general el estándar va a ser más que suficiente para ti. Entonces, una vez que selecciones un plan que sea mejor para ti, simplemente paga por él. Y luego cuando vuelvas a la página, deberías poder conectar tu dominio personalizado usando la técnica que te mostré anteriormente en esta lección. Pero de todos modos, si tienes alguna duda o algo en lo que respecta a conectar tu dominio, por favor házmelo saber. Estoy más que feliz de intentar ayudar lo más posible. Pero aparte de eso, espero que esta lección haya sido de ayuda, y los veré en la siguiente. 68. Después del inicio: instalación de Hotjar: ¿Qué es Hot jar? ¿Cómo puede ayudarte a mejorar tu sitio web a lo largo del tiempo y a obtener en última instancia un mejor rendimiento de tu sitio web? ¿Y cómo lo instalas? Bueno, Hotjar es en última instancia un software donde puedes rastrear exactamente lo que hacen los visitantes de tu sitio web cuando visitan tu sitio web Usando la plataforma Hotjar, literalmente puedes ver cada movimiento del mouse que alguien hace cuando visita tu sitio web para asegurarte de que sabes que tu sitio web está funcionando y haciendo lo que se supone que debe hacer Porque, como puedes ver aquí, literalmente tengo cientos de grabaciones de todo el mundo de personas que han encontrado mi sitio web y finalmente están dejando grabaciones para que pueda ver exactamente lo que han hecho en el sitio web, por qué han visitado, y también por qué no compraron si estoy tratando de venderles algo. Esto básicamente te ayuda a descubrir exactamente lo que está sucediendo dentro tu sitio web sin hacer ningún trabajo de conjeturas y preguntarte si estás en lo cierto o equivocado Porque en realidad puedes ver los movimientos del ratón que la persona está haciendo en tu sitio web. puede ver en qué hacen clic, en qué están dudando, en qué no están haciendo clic A lo mejor si un botón no funciona, debería ser así. Literalmente puedes ver todo, y puedes refinar las cosas y perfeccionar las cosas a medida que avanzas. Ahora, lo mejor del software es que es absolutamente gratuito, y no tienes que pagar ni un solo centavo por él hasta cierto número de visitantes del sitio web. Ahora, una vez que tu sitio web se pone súper ocupado, básicamente puedes obtener 100 sesiones diarias en lugar de solo las 35. Pero personalmente siento que 35 es suficiente para mí. Simplemente me ayuda a ver un par de sesiones todos los días y refinar mi sitio web en función de esas sesiones. No sienta la necesidad de actualizar a 100 secciones o incluso a 500 secciones porque no siento que valga la pena para mí personalmente. Y en realidad tampoco te sugiero que hagas eso hasta que tu sitio web esté recibiendo una gran cantidad de tráfico. Entonces, obviamente, conocemos los beneficios que pueden venir de ver rendimiento y el comportamiento de cada visitante del sitio web en su sitio web. Puedes ayudarte a superar desafíos y refinar tu sitio web de manera más fácil y mucho más rápida. Entonces, ¿cómo instalas realmente Hotjar en tu sitio web? Ahora con webflow y Hot jar trabajando tan sin esfuerzo juntos, lo hace súper simple, y te mostraré cómo hacerlo en este video Ahora, lo primero que debes hacer es crear un activo en Hotjar Entonces, si subes aquí y haces clic en Agregar nuevo sitio, Entonces solo puedes agregar el apa agregar nuevo Scott Limited, organización de anuncios. Entonces en última instancia, agregarías el nombre, que es scotlncaster.com URL del sitio. Solo usemos exactamente el mismo. En el sector de la industria, Let's CT commerce. Por la presente declaro que soy dueño de este sitio Sitio de anuncios. Ahora, asegúrate de copiar y pegar el enlace en esta sección porque por alguna razón no le gusta cuando no pones el HTTPS delante de él. Después simplemente haz clic en Agregar sitio. Y entonces básicamente te llevarán a esta página donde obviamente, tengo muchos sitios web diferentes que estoy administrando a la vez con mi agencia de branding. Entonces, en este punto, simplemente vas a esta sección en particular, que es relevante para tu sitio web y haces clic en Instalar código de seguimiento. Esto puede parecer un poco aterrador, pero es realmente fácil. Confía en mí, vamos a seguirlo paso a paso. Ahora, si hacemos clic en Instalar código de seguimiento, verás este código aquí. No sabes nada de código para instalar esto en tu sitio web, y te voy a mostrar exactamente cómo hacerlo. Entonces todo lo que haces es ir a este botón superior aquí y dar clic en Copiar código. Una vez copiado esto, simplemente vaya a su sitio web de flujo web y haga clic en la configuración del sitio. Entonces cuando vengas aquí, simplemente haz clic en código personalizado. Ahora, recuerden, aquí no estamos haciendo ninguna codificación con solo copiar y pegar. Es lo mismo que copiar y pegar texto en un documento word, y es súper sencillo de hacer, no te preocupes Ahora una vez que llegues a esta sección, vas a tener código de cabeza y código de foto. Ahora bien, el código de cabeza que necesitas es donde quieres estar pegando el texto Ahora, verán aquí que en realidad he pegado este texto aquí Ahora bien, este es exactamente el mismo texto que tengo en Hot jar. Literalmente dice Hot Jar, y termina con guión. Ahora bien, una vez que agregas esto, este es obviamente el Lancaster Academy of Design and Brand, que es un poco diferente porque en realidad tiene el nombre comercial diferente, y obviamente tiene un conjunto diferente de código detrás de él. Pero es exactamente lo mismo. Todo lo que hice fue presionar copiar código y luego agregarlo en la cabecera de código. Y una vez que haces eso, todo lo que necesitas hacer es presionar publicar, y luego volver a Hot Jar, y básicamente verificar la instalación. Y lo que sucederá cuando verifiques la instalación es que te dará una buena toma verde, y sabes que Hotjar y web flow están trabajando juntos para comenzar a rastrear a los visitantes de tu sitio web Luego, cada vez que quieras ver cualquiera de las grabaciones de tu sitio web, simplemente vas a hot jar.com y las revisas porque estarán muy bien organizadas para ti y podrás verlas y revisarlas e investigarlas para mejorar tu sitio web con el tiempo De hecho, reviso mis datos de hot jar todos los meses para simplemente ver por qué la gente viene a mi sitio web, qué están haciendo en mi sitio web, si hay algo así como que puede mejorar Luego bloqueo tiempo durante todo el mes para básicamente mejorar el sitio web, por lo que mi sitio web está mejorando constantemente a medida que pasa el tiempo. Siempre lo hago el primero o cada mes solo para asegurarme de que me estoy quedando al tanto de todo y de que mis sitios web estén funcionando a la perfección. Cualquiera, si tienes alguna duda en lo que respecta a Hot job, por favor házmelo saber. Siempre estoy aquí para apoyar y ayudar, pero eso debería ser bastante sencillo, y espero verte en la siguiente lección. Nos vemos pronto. 69. Después del lanzamiento: creación de una estrategia de marketing para sitios web: Bien, entonces has construido un sitio web increíble para tu negocio. Entonces, ¿cómo empiezas realmente a conseguir tráfico ahí? Así que la gente realmente puede comprarte y saber más sobre lo que tienes para ofrecer? Ahora, todo esto se reduce al tráfico del sitio web y al desarrollo de una estrategia de marketing, que puede ayudarlo a obtener tráfico relevante del sitio web a su sitio web para que la gente pueda averiguar quién es usted y cómo puede ayudar. Obviamente, este es un curso de desarrollo de sitios web para ayudarte a construir un sitio web increíble para representar tu marca a la perfección. Pero si crees que te sería útil aprender a desarrollar una estrategia de marketing accionable para tu marca para generar tráfico relevante a tu sitio web para finalmente conseguirte más clientes y generar más ingresos y ventas, entonces el siguiente curso en el programa Brand Builder P podría ser exactamente lo que estás buscando Y dentro de ese curso, te ayudamos a establecer tus objetivos de negocio y marketing, y luego te ayudamos a llegar allí sin importar si tienes el mayor presupuesto del mundo. Sin presupuesto. En última instancia, queríamos darle a cada emprendedor, sin importar cuánto dinero tuvieran el plan para ayudarles a conseguir que su marketing fuera perfecto Y dentro de ese curso, cubrimos el embudo de marketing, que es esencialmente lo que cada negocio usa para generar clientes para su marca. Ahora bien, este es un proceso de cuatro pasos, y todo comienza con la conciencia. Entonces, en última instancia, el primer paso para conseguir que alguien realmente te compre es hacerles conscientes de lo que tienes para ofrecerles. Ahora, hay toneladas de formas diferentes de hacerlo como YouTube Instagram y toneladas de otras formas que no están completamente relacionadas con las redes sociales, que en realidad cubrimos en el curso de marketing más profundidad para encontrar la mejor solución para ti En definitiva, si alguien no sabe quién eres o qué puedes ofrecer, entonces nunca te podrá comprar. Pero una vez que sí saben quién eres, el siguiente paso del embudo es la consideración. Ahora bien, aquí es donde realmente te consideran como una opción potencial o una solución potencial para sus desafíos. Aquí es donde están revisando tu sitio web. Están tratando de saber si eres la opción correcta para ellos. Y luego en última instancia una vez que hayan decidido que eres la mejor opción y la mejor relación calidad-precio para esa situación en particular, Luego pasa a la tercera etapa, que es la conversión. Aquí es donde realmente te compran. Aquí es donde sacan su dinero duro ganar de su bolsillo y te lo dan a cambio de lo que tienes para ofrecer. Ahora su sitio web es una parte clave lograr esa conversión con éxito. Porque si tu sitio web no está a la altura, que si has tomado este curso, entonces debería serlo, entonces en última instancia nunca vas a conseguir esa conversión porque tu sitio web no es confiable, y no va a darle al cliente la tranquilidad de poner su mano en su bolsillo, darte su efectivo, porque no van a creer que el cosa que reciban en sustitución de su efectivo va a valer la pena. Básicamente, un cliente siente tranquilidad cuando siente que va a obtener lo que espera o tal vez incluso un exceso de sus expectativas cuando te da su dinero. Es por esto que las marcas realmente existen, porque cuando le damos nuestro dinero a una marca de confianza, sabemos que vamos a conseguir algo a cambio, lo cual está en línea con nuestras expectativas. Si nunca antes habíamos hecho negocios con una persona o una marca, entonces finalmente nos sentimos un poco inseguros cuando estamos entregando nuestro dinero porque es un poco más arriesgado Ahora, probablemente te estés preguntando cuál el último paso de este embudo de marketing. Y eso es, en última instancia, retención. Ahora, una vez que has convertido a un cliente, has puesto mucho esfuerzo para conseguir esa venta. Lo siguiente mejor que puedes hacer es mantener a esa persona leal a tu marca y a lo que tienes para ofrecer. Es por ello que marcas como Netflix, por ejemplo, y también Apple son negocios súper lucrativos, porque en última instancia pueden tener ingresos reiterados porque se les paga de manera consistente cada mes Por ejemplo, puede que haya comprado estos auriculares y esta computadora de capaz, pero también pago $10 cada mes por mi Cloud, donde básicamente almaceno todos mis archivos. Esto es dinero que va instantáneamente al bolsillo de Apple cada mes. Y la única forma en que puedo quitarles es finalmente tomar todos mis archivos y ponerlos en otro lugar. Realmente no vale la pena. Netflix es exactamente lo mismo. Si te detienes aquí Netflix, entonces dejas de tener acceso a todo el gran contenido. Entonces en última instancia, básicamente solo le das a Netflix los diez a 12 dólares al mes para que puedas disfrutar de tus tardes perezosas con tu pareja Ahora bien, esto es en realidad algo que cubrimos con mucha más profundidad y mucho más detalle en el curso de marketing. Pero obviamente, queremos respetar tu tiempo aquí. Ahora, en lo que respecta a construir un negocio, en tu primer cliente o conseguir un cliente es el primer paso. Pero mantener a ese cliente es donde se obtiene la mayor parte de las ganancias. Entonces, si puede intentar cambiar su modelo de negocio para finalmente vender más a esa sola persona para maximizar realmente el CLV, el valor de por vida del cliente, entonces puede obtener más jugo de cada naranja que aterrice en su sitio web, también conocido como cliente En última instancia, obtenga la mayor cantidad de ingresos posible en el menor tiempo posible. Ahora, obviamente, es un poco más complicado que eso. Y obviamente, no podemos cubrirlo todo en este curso en particular porque este es principalmente un curso de desarrollo de sitios web, pero siéntete libre de comunicarte si tienes alguna pregunta, estoy más que feliz de ayudarte y ser lo más solidario posible porque quiero verte triunfar. En fin, espero que esta lección le resulte útil, y los veré en la siguiente. Nos vemos pronto. 70. Después del lanzamiento: refinar tu sitio web para optimizar la conversión: ¿Cómo puedes refinar tu sitio web para optimizar la conversión y el rendimiento? Bueno, lo primero que te recomiendo encarecidamente que hagas es reservar en un día al mes para revisar tus datos de hot jar. Ahora bien, si revisaste la lección anterior del curso sobre cómo instalar Hot jar, ya deberías tenerla en tu sitio web, y deberías estar listo para comenzar. Ahora una vez que lo tengas instalado, reserva un día en particular al mes, potencialmente el primero del mes, que es lo que yo uso personalmente, donde básicamente te tomas algún tiempo para ver todas las vistas y todas las personas que han visto tu sitio web y en realidad hicieron algo en tu sitio web y tal vez hicieron clic o simplemente exploraron dentro de ese Ahora, en última instancia, esto podría ser bastantes grabaciones si su sitio web es popular. Y si lo es, eso es fantástico. Pero lo que sugeriría es pasar el mayor tiempo posible revisando esas grabaciones y luego simplemente tomando notas a un lado para básicamente decir, Bien, En esta página en particular, gente tiende a no encontrar muy fácilmente el botón de llamada a la acción. ¿Cómo puedo tomar ese botón y hacerlo más prominente en la página? Eso es algo que aprendí muy recientemente dentro de una página en particular en uno de mis negocios, lo que finalmente me permitió aumentar mi tasa de conversión para clientes potenciales generados hasta en 4%. Originalmente, solo estaba obteniendo 2% de conversión, y luego eso se muestra hasta seis solo por ese solo cambio, que incluso si eres matemático de boleta, puedes decir que es un resultado bastante decente considerando que todo lo que hice fue cambiar un solo botón en la página, que me lleva a mi siguiente enfoque cuando se trata optimizar realmente tu sitio web en el flujo web? Ahora bien, todo esto se reduce a algo llamado pruebas AB, que no es ciencia espacial. En realidad es muy sencillo, así que no te preocupes. Ahora lo que es realmente importante recordar cuando estás probando diferentes cosas en las páginas es no cambiar demasiado de una sola vez. Por ejemplo, si tomara esa página con ese solo botón, que cambié y cambié otras tres o cuatro cosas en la página, entonces nunca sabría qué estaba impactando realmente la tasa de conversión más alta Podría haber sido el botón, claro. Podría haber sido el cambio de titular. Podría haber sido el cambio de foota. Podría haber sido el cambio de imagen que hice. Si las hiciera todas de una sola vez, entonces no tendría ningún dato para reflexionar sobre el nuevo comportamiento. Entonces, lo que en realidad es mucho mejor hacer es básicamente tomar el diseño existente y cambiar una sola cosa antes entonces pasar a cambiar otra cosa y lentamente, pero seguramente mejorando cada vez mejor a medida que pasa el tiempo. Porque, por ejemplo, si cambio ese solo botón y la tasa de conversión empeoraba, entonces sabría volver a poner ese botón como estaba. Y si puedes rastrear esto y puedes estar atento a esto y tomar un enfoque muy gradual con cómo estás, diseñando tu sitio web y mejorándolo con el tiempo, entonces poco a poco, vas a terminar con un resultado mucho mejor al final del mismo. Pero lo que hace la mayoría de la gente es que intentan apresurarse a intentar cambiar todo su sitio web de una sola vez. Y no tienen nada con qué compararse porque no saben lo que funciona y lo que no funciona, así que estás constantemente en el juego de las adivinanzas De hecho tenía un sitio web donde lo construí para un cliente. Costó alrededor de 15 mil. Y dentro de las dos semanas de entregar el sitio web al cliente y básicamente asegurarme de que tenían todo en su lugar, finalmente cambiaron prácticamente toda la página de inicio Ahora bien, esto obviamente no era lo ideal porque ni siquiera sabíamos qué estaba funcionando y qué no funcionaba. Simplemente estábamos tan bien informados como lo estábamos al principio cuando teníamos cero datos Ahora, la gente está yendo al sitio web, y por suerte, logré atraparlo y volver a acercarnos a lo que teníamos antes antes de que las cosas se pusieran demasiado desordenadas Pero en última instancia, debemos asegurarnos de que tomamos un enfoque muy cuidadoso cuando estamos desarrollando nuestro sitio web, cuando estamos optimizando las cosas, cuando intentamos mejorar las cosas. Porque si no tienes nada con qué compararlo, Y realmente no sabes si estás mejorando o no. Realmente no sabes lo que está haciendo la mejora. Y por lo tanto, como que simplemente te quedas en el mismo lugar o peor aún. Ahora bien, toma un poco de tiempo y se necesita un poco de paciencia para hacer realmente este enfoque correctamente. Ahora, si tiene alguna pregunta con respecto al uso Hot jar o tal vez evaluar los datos de su sitio web, no dude en comunicarse. Estoy aquí para apoyarte de cualquier manera que pueda. Realmente quiero que tengas éxito, así que no dudes en comunicarte si necesitas ayuda adicional. Pero espero que esta lección le resulte útil, y espero verle en la siguiente. Te veré. 71. Después del lanzamiento: cómo saber si tu sitio web es perfecto: Entonces, ¿cómo sabes cuándo tu sitio web está listo y perfecto? Ahora, en este punto, has puesto mucho trabajo para entender cómo construir tu sitio web, y probablemente lo hayas llevado a un lugar donde estés bastante contento con él. Pero, ¿cómo sabes que es correcto? Bueno, hay algunas cosas que debes saber a la hora de construir realmente un sitio web y saber cuándo es perfecto. Y la verdad es que nunca es realmente perfecto. Y la razón por la que veo eso es porque siempre hay margen de mejora. Ahora lo que ofrezco, cada estudiante que invierte en este curso, para que yo les dé un poco de retroalimentación en lo que respecta al diseño de su sitio web Ahora, has invertido en este curso y finalmente confiaste en mí para guiarte a través de este proceso. Así que lo menos que puedo hacer es darte un poco de comentarios sobre cómo se ve y se siente tu sitio web, puedas hacerlo lo mejor que pueda ser. Y para poder hacer eso, en realidad necesito ver tu sitio web. Entonces, una vez que termines tu sitio web, compártelo conmigo como proyecto en este curso, porque esencialmente va a asegurarse de que pueda darte la crítica constructiva o simplemente decirte lo genial que eres para que puedas sentirte completamente seguro de que tu sitio web está listo para ser publicado. Y quiero 100% prometer que si lo compartes como proyecto En este curso, voy a querer que el 100% me ponga en contacto contigo y te dé una En este curso, voy a querer que el 100% me ponga en contacto contigo y te dé crítica constructiva completa y cualquier comentario que tenga para ayudarte a mejorar el sitio web. Ahora, no tienes que escuchar todos mis consejos, pero solo quiero darte mis pensamientos honestos de que puedes tomar la mejor decisión para tu negocio y tu marca. Y una vez que hayas hecho eso y tengas tu sitio web perfectamente en su lugar, el siguiente paso es comenzar a generar tráfico a tu sitio web. Quería realmente cubrir brevemente los pasos de un embudo de marketing solo para que entendiera qué papel jugó su sitio web al convertir a alguien que inicialmente desconocía completamente su marca en un cliente de pago y cómo funcionaba todo eso. Pero para que puedas crear una estrategia de marketing accionable para tu marca y tu negocio y realmente comenzar a hacer crecer tu marca y negocio, necesitas tener una estrategia y un plan para impulsar el tráfico del sitio web a tu sitio web para que puedan comprarte Pero para que realmente comiences a generar tráfico, que tu sitio web pueda comenzar convertirlos en clientes de pago, a convertirlos en clientes de pago, necesitas tener un plan establecido para que tu marketing sea correcto. Y si has tomado alguno de nuestros cursos, y si ya has tomado alguno de nuestros cursos en el programa Brand Builder Pro, entonces sabrás que el siguiente paso en el programa Brand Builder Pro es tu curso de marketing estratégico. Esto va a cubrir todo lo que necesita para crear una estrategia de marketing accionable que funcione en el mundo digital en el que nos encontramos hoy para generar tráfico relevante a su sitio web para que pueda crear más clientes, generar más ingresos y, en última instancia, más ganancias En fin, estoy muy agradecida de que invirtieras tu tiempo y tu energía en confiar en mí para ayudarte a guiarte a través de este proceso No puedo esperar a ver el sitio web que creas. Por favor, asegúrate de compartir conmigo de todos modos que puedas, y espero verte ojalá en un curso futuro. Muchas gracias, y pronto volveré a verle. 72. Tiempo de proyecto para sitios web: Solo quiero darte un poco de comida para llevar, solo para poner a prueba tus conocimientos. Ahora, quiero asegurarme de que hagas cualquier duda que tengas respecto al diseño estratégico de sitios web, pero también quiero que solo tomes una captura de pantalla de un sitio web que creas que está perfectamente diseñado y subido como proyecto en este curso. Y este sitio web podría estar en Pinterest. Podría ser algo que encuentres en Google. Podría ser un sitio web que realmente conoces. Podría ser incluso un sitio web que hayas construido ahora sabes que sigue las reglas clave para el diseño estratégico de sitios web y un hermoso diseño de sitios web para el caso. Así que asegúrate de compartir al menos un sitio web como proyecto en este curso, solo para demostrar que entiendes los fundamentos clave en lo que respecta al diseño estratégico de sitios web Y siéntete libre de dejar algunas notas también. Quiero ver que entiendas las lecciones que hemos enseñado Siempre sabes que estoy más que feliz apoyarte a ti y a todos los demás estudiantes que invierten en nuestros cursos tanto como sea posible. Así que siéntete libre de llegar. Si necesita enviarnos un correo electrónico, no dude en consultar nuestro sitio web. Tenemos muchas otras herramientas y recursos para ayudarte en tu viaje de creación de marca. Muchas gracias, y te veo en la siguiente. Se.