Construir y diseñar un sitio web profesional de WordPress: introducción a Elementor y diseño de páginas web | Parte 4

1. Introducción de elementos: hola y bienvenidos al diseño con sección elemental. Ahora bien, si has estado siguiendo a lo largo del curso, habrás aprendido a configurar un sitio web de WordPress totalmente funcional, instalado todos los enchufes esenciales y también entendido la psicología detrás de crear profesional páginas de su sitio web. Ahora es el momento de aprender sobre l Un mentor. Entonces, ¿qué es L mentor? L. Un mentor es las herramientas de diseñador más profesionales que hay para hacernos ir de diseñadores de Rukia a profesionales completos. Déjame mostrarte a lo que me refiero. Ahora aquí hay un par de ejemplos de personas que usan elemental para su el signo junto con el tema océano WP WordPress. Correcto. Así que echa un vistazo a este hermoso sitio. Ahora lo primero que vamos a notar es que hay un cuadro grande y maravilloso alrededor de toda esta zona. Ahora aprendimos que esto se llama por encima del redil. Tenemos aquí el nombre de la persona y luego su eslogan desplazándose hacia abajo. Vamos a conseguir un montón más de información sobre la página web sobre la persona. Pero el punto aquí es que este es un diseño elemental. Esto está usando la herramienta elemental y esto es de aspecto extremadamente profesional porque es tan limpio. Ahora la mayoría de los diseñadores a Diseñadores Web más bien usan elemental para el diseño porque es tan fácil. Es tan rápido, y puedes crear un sitio web totalmente funcional, hermoso en tan solo un par de horas. Es increíble no se necesita codificación. Entonces si nos fijamos en este sitio web, nos dimos cuenta de que el tema es más o menos el mismo. Tenemos un cuadro grande, maravilloso. Aquí hay un título. Aquí hay un eslogan o mejor dicho, descripción. En este caso, desplazarse hacia abajo obtendría un montón de información. Esto podría ser cualquier cosa que sería una venta estacas mostrando su producto. Poner tu correo a menudo decía Ra, y recordarás que Pat Flynn hizo algo similar con su diseño. Ahora esto se ve tan afectado porque notarás que hay sección. Tenemos una sección de pantalla completa aquí, desplazándose hacia abajo. Tenemos otra sección, otra y luego otra, algunas siendo pantalla completa pero la mayoría cubriendo toda la pantalla. Muy profesional. Ahora bien, si echamos un vistazo a este sitio web, que también está usando elemental con el océano WP todos estos ejemplos son te darás cuenta que están usando un video de fondo aquí. Ahora claramente están transmitiendo de qué se trata. Y luego hay un llamado a la acción fondo llamado a la acción. Significa que quieres que la gente haga clic, cuida de recibir un correo electrónico, Opta para que tus productos compren algo. Sea lo que sea, la prioridad fuera de tu página principal, ¿recuerdas? Siempre establecer la prioridad comenzaría aquí, el home pitch todo. Ahora estos son mi tipo favorito de pescado casero porque están tan limpios, su derecho al grano. Y esto es a lo que vamos a apuntar también. Cuando se trata de que decidamos desplazarnos hacia abajo, se llega a poner más información, aún siendo muy limpio. Ya sea usando este tipo de media pantalla o toda pantalla el signo ¿verdad? Y por último, esta página teniendo un diseño similar pasando ahí, cubriendo toda la pantalla aquí mismo. Artesanía iniciando el cartel desde organizaciones de Branson escalonaron estudio Creative Digital. Ahora, si pudiera debilitarme, empieza. Recuerda, este es el inicio aquí. En realidad, el botón se estaba desplazando aquí abajo, así que ha puesto toda esta valiosa información en la primera página en un gran pergamino largo, como notarás que la mayoría de la gente tiene. Y luego, por supuesto, alguna prueba social pasando a exhibir a los clientes. Ahora, esto es solo para mostrarte que cualquiera puede crear estos hermosos sitios web gracias a una herramienta como L A mentor. Entonces vayamos más a fondo a lo que es elemental ahora. L. Un mentor es lo que se llama constructor de páginas. En otras palabras, te ayuda a construir páginas como lo verías? ¿ Y en qué consiste tu sitio web? Bueno, básicamente páginas diferentes ahora. En el pasado, necesitabas habilidades de codificación para poder crear sitios web. Ahora WordPress lo simplificó. Ah, muchos enchufes vinieron después de eso. Demasiado simplificado. Y ahora tenemos l. un mentor para diseñar para que se vea hermoso. Si eres como yo, sabrás que no soy un diseñador en absoluto. No tengo buen ojo para esta vez, pero gracias a L. Un mentor, todo se vuelve súper fácil. Se trata de una herramienta muy intuitiva de usar, y también tienen otra característica que realmente ayuda. Esa es la capacidad de poder diseñar cal. Ahora te darás cuenta. En las conferencias anteriores, cuando estábamos creando nuestras páginas que creamos la página y luego fuimos a la vista previa para ver cómo resultó. Ahora, con L. Un mentor, se llega a construir toda la página con vida. Se llega a ver preguntarte, poniendo las diferentes funciones, diferentes partes diferentes brujas y ver cómo resulta. Live es una característica increíble, y ahorra tanto tiempo y ayuda a través del diseño intuitivo ahora de nuevo. Porque no soy diseñador, realmente aprecio que esta elemental esté llena de plantillas de página. De verdad los necesito, y hace que mi vida sea tanta Pascua. Yo no diseñaría un logotipo, pero aun así tenemos un logotipo de gran aspecto, y de igual manera, no seguiría adelante y diseñaría una página. Pero gracias a las plantillas, podemos conseguir páginas realmente, muy buenas y por lo tanto muy buen aspecto web, gracias a esta herramienta. Entonces, en otras palabras, si aprendemos a dominar estas herramientas no solo serán realmente competentes a la hora construir sitios web, sino también diseñar esos sitios web, ya sea para tu negocio, ser un freelancer, ayudar a alguien a construir tu propio negocio podría ser cualquier cosa mientras necesites construir un sitio web decidido lucir profesional. Elemental es la herramienta ahora También hay una característica en elemental llamada Elemental Can Va. Básicamente, lo que hace es que te permite eliminar todo lo que está en esta determinada página, es decir, la barra lateral The Footer. Si quisieras que el logo que el menú todo y solo que lo hagas completamente limpio un Canadá para que puedas poner, por ejemplo, una película ahí o podrías estar poniendo un cuadro grande ahí y entonces podríamos iniciar el firmando. Pero algunos pueden ser un menú en la parte superior, tu logo, etcétera. Pero esta característica lo hace tan fácil, porque si puedes partir de una pizarra limpia con la elemental Canadá, diseñar se vuelve mucho más fácil. Y aquí está la última cosa loca. En realidad es gratis. Hay una versión pro, en realidad, creo que hay dos versión pro. Si quieres usarlo para varios sitios web que te costaron, creo $99 o $199 por un año de descuento actualizaciones actualmente, pero el 90% de esto es completamente gratuito, y el 19% va a ser más de lo que necesitamos para nuestro propósito, ¿ verdad? Y si debieras, alguna vez por alguna herramienta o algún plug ins y En mi opinión, si alguna vez vas a comprar un plug in o va a ser para la protección de tu sitio web para la restauración y copias de seguridad de tu sitio web en el elemental enchufando para decidir como un profesional. Pero una vez más, vas a notar que básicamente tenemos todo en este constructor de páginas. Y si alguna vez necesitas más, tienes el presupuesto para ello. Es fácil actualizar y usar esas características para woo comercial. Por ejemplo, si quieres crear en un sitio web de comercio electrónico, vamos a hablar más de eso más adelante, y te mostraré cómo construir un comercio electrónico usando comers. Vale, Entonces si estás tan emocionado como yo por empezar a construir esas páginas que ya hemos preparado siendo nuestra página de inicio siendo nuestra página de inicio aquí y por supuesto ser nuestro recurso es página, entonces empecemos pasando por elemental desde el principio, todo el camino hasta conseguir el producto terminado. La cosa terminada, ¿verdad? Empecemos a ver la próxima conferencia 2. Ajustes de elementos: Muy bien, chicos, vamos a aprender todo sobre elemental, pero para hacer eso, es una buena idea empezar desde el principio. Entonces, empecemos desde el fondo de nuestra página web y pasemos a Elemental aquí. Ahora, como con la mayoría de los enchufes, van a ser un par de ajustes fuera y diferentes opciones que viene con él. Entonces, antes de empezar y empezar a usarlo, vamos a seguir adelante y sacudir lo que todo esto significa. Y si necesitamos cambiar algo, vamos a seguir adelante y hacer eso. De acuerdo, Así que empecemos en ajustes aquí ahora. Lo primero que tenemos en escenarios es donde quieres que se aplique elemental, ¿ verdad? Entonces ahora mismo lo tenemos a los tipos de post fuera de las páginas de correos, y eso es todo. Pero también podríamos aplicar elemental a la página del poeta masculino o a mi biblioteca. Pero eso no es nada en lo que realmente necesitan pensar ahora. Yo solo quiero que sepas que estas opciones están aquí. En caso de querer personalizar la página del poeta masculino más adelante, por ejemplo, recuerda, podrías crear diferentes páginas allí. El hombre es página de suscripción, etcétera. Entonces también tenemos desactivados los colores predeterminados. Ahora bien, esto es si quieres usar los colores que viene con tus temas principalmente. Entonces podrías revisar estos para desactivar los collares por defecto elementarios y usar esos en su lugar y lo mismo con los teléfonos. Puedes desactivar los fondos fuera elemental para usar los de tu tema. No obstante, en las próximas conferencias, cuando empecemos a diseñar nuestra página principal, en realidad vamos a pasar por qué collares y qué fondos usar para tu negocio, dependiendo de lo que estés haciendo con tu sitio web, qué se trata y de qué sentimiento se quiere entregar la psicología fuera de teléfonos y collares. Realmente emocionado. Creo que te va a encantar esa conferencia, pero por ahora, no vamos a tocar esto, ¿ verdad? Vamos a personalizar esos más adelante. Entonces también tenemos el ajuste de mejorar elementos, es decir si quieres ayudar elemental permitiéndoles rastrear tu uso. Ahora, este es un dato animus que recopilan para mejorar su plug in. Y si quieres hacer eso, realmente no puedes hacer mucho. Tiendo a no hacerlo, porque no quiero tener la carga de mí misma. En otras palabras, podría ralentizar ligeramente las cosas. Y realmente no me gusta hacer eso, aunque sea por una buena causa ahí. Y luego pasamos al estilo. Y aquí tenemos el estilo de forma genérico. Tenemos el contenido con básicamente el estilo fuera de tus páginas, este estilo me iba a ver cómo va a encajar con los espacios entre etcétera. Ahora, realmente no necesitamos tocar esto ahora mismo porque realmente vamos a mezclarnos con esto cuando estemos en l Un mentor en sí y de antemano, tenemos cosas como el método de impresión CSS y para nosotros mortales que no estamos en codificación. Realmente no tenemos que molestarnos por esto en absoluto. Cambiar al editor Modo de carga. Tampoco vamos a tocar esto, porque esto es para solucionar problemas y no vamos a entrar en hacer ese tipo de cosas . Esto es para usuarios avanzados. Eso no es nada que haga tampoco usando este enchufe él, y luego tenemos algo que se llama manijas de edición, y esta es en realidad una característica decentemente reciente. Ahora, lo que esto hace es que cambia los bloques de edición Ahora, sé que aún no hemos empezado con elemental, pero solo quiero mostrarles lo que hace esto. Si mantenemos esto en escondite, eso significa que con el fin de personalizar un bloque hemos estado trabajando con el bloqueo de Gutenberg. Por lo que te va a ser familiar Con el fin de personalizar un bloque, llegamos a hacer click derecho en ese bloque. Ahora, si guardamos esto para mostrar, va a usar manejar este enfrentamiento haciendo clic derecho. Y se ve así. Adelante, activas esto para mostrar, y luego, como puedes ver en la cuadra, obtienes este tipo de pliegue donde puedes copiar, puedes editar, puedes cerrarlo, etcétera. Ahora eso depende completamente de ti, cómo quieres hacerlo. Pero en general, cualquiera que empieces con lo que vas a estar cómodo, creo que esta característica se debe principalmente a que mucha gente que usó elemental por un tiempo se sintió incómoda con la opción de clic derecho. Pero si apenas estás empezando con elemental, vas a estar cómodo, más probable es con lo que nunca realmente me gustan los clics correctos. Voy a guardar esto para esconderme. Entonces vamos a bajar a roll manager ahora, igual que dice Roll Manager es si quieres permitir que la gente haga cierta edición en L. Un mentor. Ahora, por ejemplo, si quieres que tu editor no tenga acceso a L. Un mentor, seguirías adelante y Kallick aquí dentro. Ahora. Los diferentes roles en tu sitio Web van a ser mucho más importantes para ti Una vez que tu sitio web comience a crecer bien y puedas empezar a firmar diferentes roles a diferentes personas. Puedes tener varios autores si tienes un blogger. Por ejemplo, si tienes colaboradores alguien que lleva aquí si eres CEO, etcétera. Ahora bien, si quieres dar acceso a cierto contenido, necesitas ir pro. Pero lo que puedes hacer es que puedes limitar el acceso de las personas a lo que la gente puede agregarlo en L. Un mentor, y eso lo haces a través de Roll Manager. Entonces pasemos a las herramientas. Ahora aquí en realidad es algo que podrías venir a usar un par de veces, y ese es el CSS regenerado Ahora, pesar de que realmente no trabajamos mucho con CIA, dice que esto en realidad es algo que se dice al estilo, y este estilo va a ser la voluntad de tu página. A lo mejor el fondo los collares, etcétera. Entonces cada vez que estamos actualizando eso y nos dimos cuenta de que las actualizaciones en realidad no se están llevando cabo, a cabo, entonces lo más probable es que haya algo mal con los huesos de la muñeca. Por ejemplo, Entre elemental y el tema que tenemos, tenemos océano WP. Entonces si algo está rezagado o falta algo o estuvieron presentes haciendo algunos perdidos con L . Un mentor, todo lo que necesitamos hacer es volver atrás y hacer click en regenerar archivos, y luego nos vamos a asegurar que se hundan y básicamente el 99% del tiempo, eso sólo hace que funcione, ¿ verdad? Entonces, cualquiera que sea el cambio de estilo que hayas hecho, esto va a empezar a funcionar por ellos. Lo más probable es que vamos a usar estos un par de veces ya que construimos nuestro sitio web usando L. Un mentor, y luego tenemos biblioteca de fregadero, y la biblioteca va a ser mucho más útil más adelante en la sección elemental cuando nosotros empezar a usar plantillas. Entonces, por ejemplo, si descargas una plantilla determinada o guardas la tuya y notas que eso no es visible en tus plantillas guardadas, todo lo que necesitan hacer es ir a herramientas elementales y dar clic en la biblioteca de fregadero y la mayoría de las veces que va a resolver ese problema, y luego tenemos modo seguro y los motivos seguros. Si deseas solucionar cualquier problema o algo especial en elemental, esta es una característica avanzada. No vamos a usar esto así que realmente no tenemos que preocuparnos por esto. Esto es básicamente para los nerds. Y a pesar de que me considero un enorme nerd, no tengo conocimiento suficiente para entrar en la codificación y bits fuera del modo seguro. Entonces no vamos a usar eso. También tenemos la barra de depuración ahora la depuración. Es similar si quieres buscar problemas que decían, tampoco vamos a estar usando esto. Por lo que todas estas son funciones avanzadas que no necesitamos para construir sitios web fantásticos. Entonces pasando a reemplazarte a ti o a L. Ahora, si has estado siguiendo el curso todo el tiempo, antes que nada, eso es impresionante. Buen trabajo. En segundo lugar, recordarás cuando descargamos un plug in para hacer copias de seguridad de nuestro sitio web. Cuando respaldamos nuestro sitio web pudimos migrar nuestro sitio web en otro lugar, ¿ verdad? Y lo que podemos hacer entonces es que podemos migrar eso lejos y luego también migrar todo nuestro elemento o configurar usando este reemplazo U R L Wright va a mantener cierto también. Si estás cambiando el nombre de dominio a un nuevo nombre de dominio, vas a tener que reemplazar este u R l dos pero otra vez, igual que dice ahí. Realmente deberías hacer una copia de seguridad de tu base de datos antes de hacer algo como esto, y por suerte, sí tendría nuestro respaldo. Y sabemos hacer el respaldo manualmente. Entonces si necesitas reemplazar tu viejo tu el o tu migración, entonces adelante y vuelve a subir primero y luego usa esta derecha en tu viejo tu l y luego lo sabías y haz click en reemplazar euro, y luego pasamos al control de versiones. Entonces deberían lanzar cualquier nueva actualización con L A mentor, por ejemplo, por ejemplo, y te das cuenta de que Hey, espera, espera, Estos en realidad rompieron mi sitio web. Eso es muy raro, Pero como con todos los enchufes, podría suceder. Pero es muy, muy raro. Pero lo puedes hacer es seguir adelante y reinstalar la versión antigua que sabemos que realmente funciona. Y por supuesto, tenemos nuestro sitio web respaldado, dijo que iba a ser cualquier pérdida Pero aquí es donde vamos a la versión rollback, la versión anterior para instalar las que en realidad ha funcionado. Para que podamos seguir editando nuestro sitio web y seguir avanzando en nuestro negocio, y también tenemos si quieres convertirte en un mejor probador, si habilitas este, entonces tendrás la oportunidad de probar nuevas versiones antes de que sean liberado. Si te gusta eso, eso no es absolutamente necesario adulto en él para mantener esto en discapacitados. Entonces tenemos modo de mantenimiento. Entonces si estás actualizando tu sitio web o en esta determinada página, lo que puedes hacer es que puedas ir y usar un ritmo que se avecina pronto, por ejemplo, o una página de mantenimiento. Por lo que la gente que viene a tu página web ahí va a estar viéndolo próximamente, o una página de mantenimiento que te permita hacer lo que necesitas hacer en tu sitio web. De acuerdo, antes de que todo lo publique. Por lo que esto podría ser genial para cualquier actualización de mantenimiento o simplemente para estos días de registro. Si solo quieres bajarlo, actualiza tu sitio web en paz y luego libéralo con su nuevo y hermoso diseño. De acuerdo, entonces tenemos quien puede acceder bien a su sitio web, personas ingresadas. O si quieres establecer esto como una costumbre, por lo que solo las personas con ciertos roles pueden realmente iniciar sesión. Una vez que este sistema viene pronto o mantenimiento, prefiero simplemente mantener esto in conectado. Y luego tenemos las plantillas. Si has creado una plantilla incierta para cuando tu sitio web está abajo, puedes usar eso. Si no tienes un creativo, podemos crear uno aquí mismo. Ahora tiendo a no hacer eso tampoco. Si alguna vez bajara el sitio web, que básicamente nunca, nunca hago, seguiría adelante y usaría la parte de mantenimiento. Entonces tenemos info del sistema. Y aquí solo hay un montón de jerga técnica. No nos ayuda en absoluto. Simplemente se ve así. No hay nada fuera de la información que podamos estar usando aquí, así que no vamos a pasar ningún tiempo aquí. Tenemos una pestaña de inicio aquí. Un oleaje. Eso es realmente genial, porque L Un mentor es básicamente ilimitado en su potencial para hermosa la ciencia. Y hay muchos consejos y trucos que puedes estar usando desde aquí. Ahora, no vas a necesitar esto demasiado porque en realidad voy a ser tu editorial, ¿ verdad? Por eso estás aquí en este curso para hacer hermosa la ciencia y maravillosa página web. Pero para aprender muchos consejos y trucos, tienen algunos tutoriales realmente entregados aquí. Puede echar un vistazo a esto y luego obtener el artículo completo. Ahora, si necesitas alguna ayuda, puedes hacer click en, obtiene ayuda aquí. Tienen un gran apoyo para tener unas preguntas frecuentes aquí pueden seguir adelante y echar un vistazo a eso. Hay tutoriales, etcétera, realmente, realmente genial. Y entonces tenemos fundaciones personalizadas. Ahora esta es una característica pro que necesitas morder con el fin de agregar fondos a tus clientes y fondos personalizados significa si hay algún teléfono que hayas descargado o tal vez incluso creado tú mismo que quieras usar para que tu sitio web sea aún más único. Pero hay mucha diversión, como muchos teléfonos aquí ya que podemos usar. Y en la próxima conferencia en la psicología on, los diferentes fondos iban a elegir uno que va a encajar perfectamente a tu negocio es que no necesitamos preocuparnos por esto, y luego tenemos los traseros de GoPro. Y si quieres comprar la versión actualizada fuera de primaria y fuera de curso. Esto puede ser un beneficio si usas esto por un tiempo y tienes múltiples sitios web y quieres usar brujas adicionales y usarlo en múltiples plataformas. Pero como dije en la conferencia anterior, esto no es necesario. Obtienes básicamente todo por código abierto de zona libre, y vamos a hacer sitio web de Kick Ass usando la versión gratuita, ¿ verdad? Eres la mayoría de los niños. No vas a necesitar la versión pro. Pero si hay algo que debas por pro para un plug in, va a ser el anti virus o la sonda de respaldo o elemental, en mi opinión. Y entonces tenemos plantillas aquí abajo. Ahora tenemos nuestras plantillas de decir que. Entonces, por ejemplo, si decidiera hacer diferentes páginas para diferentes cursos, podría querer tener el tipo similar off page build. Entonces lo que podría hacer es hacer cierta página construida y guardarla como plantilla y usarla una y otra vez va a ahorrar mucho tiempo. Y, por supuesto, cuando empecemos a descargar plantillas, que vamos a pasar más tarde, eso se va a poner aquí también. El constructor de temas es una característica pro, por lo que no tenemos acceso a eso. Pero te permite entrar en lo integrado, por ejemplo, para editar tu ah, encabezar tu comida er en el l a mentor. Pero de nuevo, no hay nada que tengamos que hacer porque ya sabemos hacer eso afuera. Y te voy a mostrar cómo usar las diferentes características para hacer que tu sitio web sea increíble. Sin eso, tenemos popups y popups de los que todos conocemos. El Papa está arriba en tu pantalla. Quieres hacer un email abierto, por ejemplo, o si hay algo que quieras anunciar en tu sitio web, esa es una característica pro. Pero honestamente, esto es bastante sensible. Se pueden usar correctamente, pero también pueden ser muy molestos. Pero eso no es nada que necesitamos aquí. Podemos grandes plantillas nuevas, y aquí podemos poner plantillas en categorías, ¿ verdad? Entonces esos son los diferentes escenarios en primaria, por lo que hemos pasado por ajustes rol logró sistema en por todas estas cosas importantes y placas Sam, que vamos a pasar por la muerte de Maurin más adelante. Lo que quiero que recuerden principalmente es que si van a L. Un mentor y herramientas. Tenemos el CSS regenerado. Entonces si hay algo que no se está actualizando en tu sitio web, ve a decirle a un mentor herramientas y haz clic en regenerar archivos. La mayoría de las veces, esto va a resolver el problema fuera de tu tema, no actualizando tu estilo, no funcionando como deberían. Ahora mismo. Pasemos a la siguiente conferencia y empecemos a usar elemental. Esto es realmente emocionante, ven chicos en la próxima conferencia. 3. Prediseño de la página de casa: Muy bien, chicos, en esta conferencia, vamos a seguir adelante y pre diseñar nuestra página principal. Ahora bien, si has estado siguiendo el curso desde el principio y has estado siguiendo los mismos pasos que yo, igual que yo no tendrás una página de inicio ahora mismo porque anteriormente convertimos nuestra página de inicio en un inicio página de aquí. Entonces lo que vamos a hacer es ir adelante y ir a páginas aquí y dar click en agregar Nuevo y realmente crear una página de inicio que podamos estar usando. Entonces solo voy a llamar a esta casa, y luego voy a dar clic en publicar y luego publicar, Y luego voy a volver a todas las páginas. Y si te desplazas hacia abajo ahora mismo, verás que el inicio aquí es nuestro paciente frontal en la portada y en la página principal, esos sinónimos de aire. Entonces lo que quieres hacer es dar click en edición rápida porque esta babosa te acuerdas de lo que es la babosa ? Eso es lo que aparece después de tu nombre de dominio. Entonces la babosa aquí es Robin y jesper dot com. Adelante barra a casa. Pero esto es muy confuso para los motores de búsqueda porque queremos convertir esto en inicio aquí en este momento. La página de inicio aquí debería haber comenzado aquí. babosa ácida tiene mucho más sentido para la búsqueda y los oídos y los humanos por igual. Ahora, siempre que estés escribiendo babosas, siempre quieres usar letras minúsculas, y siempre quieres usar un guión cuando estás haciendo cualquier espacio. Entonces vamos a seguir adelante y dar click en actualizar. Y ahora echemos un vistazo a nuestra casa. Si semanal yendo edición rápida, vas a ver que esta pierna se llama casa y luego te corrió Solo queremos que esto se llame casa, y luego vamos a dar clic en actualizar. Ahí vamos. Y ahora vamos a ir a la configuración y a la lectura. Y ahora vamos a convertir nuestra página de inicio aquí en casa y ahora dar click en guardar cambios. Por lo que la página principal no está establecida actualmente en nuestro menú, y así es exactamente como queríamos. Queremos que la página principal sea la primera página. Ellos ven eso el editor, pero no quieres que esté en el menú porque ya lo tenemos en el logo. Entonces lo que vamos a hacer es convertir esto en su página principal Pre diseñarlo quitando toda la pelusa que no necesitamos, y luego vamos a seguir adelante y hacer de esto realmente profesional y hermoso usando L un mentor. Es decir, por eso estamos en esta sección, ¿no? Entonces ahora vamos a subir hacia las páginas y hacer clic ahí y luego vamos a ir a Hope, que ahora es una portada. El hogar es nuestra página principal. Eso es impresionante. Y ahora, chicos, finalmente llegamos a hacer click en este gran botón azul que nos lleva mirando a los ojos desde hace tiempo. Eso es que se suma con elemental. De acuerdo, ahora, al segundo que haga clic en esto, eso va a convertir nuestra página principal en una página editada elemental, derecha y también va a estar abriendo toda la página desde Gutenberg que hemos estado usando antes en el editor elemental. Entonces así es como se ve el editor elemental. Reconocerás muchas de las características de la gota de dragón de Gutenberg, pero también con esta hermosa edición de vida. Ahora, no te preocupes por todo esto. Vamos a pasar por el tablero de instrumentos en la próxima conferencia. Pero ahora para continuar con nuestro pre el signo de la página principal. Lo que vamos a hacer es bajar aquí a la configuración, y eso va a traer un par de ajustes generales para la página principal, como que quieren cambiar el título al que quieren cambiar el estado. Quiero agregar una imagen destacada. No vamos a hacer eso ahora mismo, y entonces también podemos ocultar los títulos. Ahora si nos fijamos en el título en este momento, dice casa y la mayoría de nuestras páginas ha titulado tal curso. Título asistente, por supuesto, se trata de sangre blawg, etcétera para están diseñados para tomar el siguiente nivel y luciendo realmente limpio y realmente profesional. Ya no queremos usar títulos, ¿verdad? Yo quiero que el sitio web sea lo más limpio y directo al grano posible, por lo que no necesitamos declarar al mundo que esta es una página de inicio. Simplemente queremos entregar el propósito fuera de nuestro sitio web, el propósito fuera de nuestra página principal y de lo que hablamos antes. Entonces lo que vamos a hacer es que realmente vamos a seguir adelante, haga clic atrás en ajustes aquí y vamos a dar click en Ocultar título ahora si esto no oculta el título para ti, entonces lo más posible es que el tema que estamos usando no sea sincronizando completamente con elemental en este momento. Y eso es porque a veces tienen el nombre diferente en los códigos. No necesitamos saber de eso. Sólo necesitamos saber cómo arreglarlo. Entonces si haces clic aquí y en realidad no lo esconde, recuerda, recuerda, esto es una vista previa en vivo. Entonces déjame mostrarte cómo trabajar en torno a esto y ocultar los cuatro títulos porque esto no está funcionando Ocean WP ahora mismo. Entonces sigamos adelante y ocultemos todos nuestros títulos en todas nuestras páginas porque ya no vamos a usar esos. Entonces lo que queremos hacer es correcto. Haga clic en nuestro logotipo aquí y haga clic en Abrir enlace en Nueva pestaña. Y luego vamos a ir aquí y vamos a seguir adelante y dar click en Personalizado. Si estás en el back end de tu sitio web, solo tienes que ir a la apariencia y luego personalizar. Y ahora vamos a seguir adelante y bajar a opciones generales y título de página. Y aquí donde dice estilo, en realidad vamos a seguir adelante y hacer clic de predeterminado a oculto. Entonces lo que eso va a hacer una vez que haga clic en editor es que va a ocultar los títulos de todas sus páginas actuales y futuras. Nos va a ahorrar muchos problemas. Por lo que ha sido publicado. Todos los títulos se han ido con apenas un poco limpiado nuestro diseño. Impresionante. Entonces ahora comprimimos este hacia abajo y volvemos a L un mentor. Ahora todo lo que tenemos que hacer es seguir adelante y actualizar esta página. Haga clic en salir, Paige, eso está completamente bien. Y luego se ha ido el título de casa. Todos sus títulos se han ido. Impresionante. Ahora, si seguimos adelante y volvemos a los escenarios aquí ahora, esta es la parte realmente importante e interesante. Ahora mismo tenemos algo aquí que dice diseño de página. Está bien. ¿ Y estaban usando esto antes? Hemos estado usando el elemental full with para quitar la barra lateral. Y si has estado siguiendo el curso con nosotros, te recomiendo encarecidamente que sigas adelante y hagas click en el l aumentar lleno con y vamos a usar. Este es un bonito diseño antes de empezar a diseñar nuestra página principal. El motivo de eso es porque me encanta este menú. Me encanta que tengamos el logo aquí, y también es la er comida que está contenida aquí con nuestra política de privacidad en términos de condiciones. Ahora bien, si acabas de saltar iniciar el curso y te vas directo a L. Un mentor, tienes un sitio web. Pero no tienes todas estas características o en realidad no te importa esta característica. Siempre que hagas todo puedes usar algo llamado lienzo elemental, y esta es una característica que en mucho sitio web, me encanta usar esto, sobre todo para empezar porque mira esto. Es un lienzo completamente limpio, y podemos empezar a construir cualquier cosa que queramos aquí. Por lo que dependiendo de tu diseño en tu propósito, puedes seguir adelante y elegir si quieres usar el lienzo elemental con el elemental lleno con. Pero si has estado siguiendo desde el principio, recomiendo que acostumbraras a elemental lleno con. Eso es lo que voy a usar, y eso es lo que va a ser la base para empezar esto firmando nuestra página principal. Entonces ahí vamos. Simplemente voy a seguir adelante y dar clic en actualizaciones, y ahora ya estamos todos terminados que han pre diseñado o página de inicio viendo la siguiente conferencia. Chicos 4. Tablero de elementos: De acuerdo, así que vamos a aprender un poco más sobre elemental pasando por el tablero. Pero lo primero es lo primero. Cómo llegamos a L. Un mentor de nuestro WordPress desde atrás y fuera de nuestra página web. Ahora, hay dos formas de entrar realmente al editor elemental aquí. El 1er 1 sería iniciar un desde tu panel de control, ir a opciones de pantalla y luego activar el elemental o revisión. Ahora, recuerda, hacemos clic en esto de distancia en una conferencia mucho más temprana del curso. Ahora, desde aquí, vas a poder crear nuevas páginas con tan solo hacer clic aquí desde aquí. Te vas a notar que el paciente que hemos estado editando nuestra página principal, en realidad dice elemental abajo aquí. Y todo lo que necesitamos hacer es seguir adelante y dar click editar con L. Un mentor, y vamos a saltar directamente a l un mentor empezando a editar esa página. De acuerdo, así que aquí estamos. Ahora, pasemos por este panel de control por aquí, todas las diferentes características. Ahora bien, si has estado siguiendo desde el principio estos núcleos, entonces eso es realmente impresionante. Porque entonces habrás aprendido a usar el Gutenberg Editor que también tiene que arrastrar y soltar función. Vas a reconocer muchas de esas características aquí porque si miramos estas, tenemos los elementos básicos aquí dentro, tenemos los elementos básicos aquí dentro, que son las cosas como tomas de encabezamiento,imagen del editor, imagen del editor, botón de video, etcétera que solo puedes seguir adelante y hacer clic, arrástrelo por aquí y soltar, y tenemos un rumbo más sobre eso en un poco. Pero su diverso lo es todo. Aquí está Dragon drop. Entonces, ¿qué? Tenemos todos los elementos básicos pasando aquí. Y si nos desplazamos hacia abajo o simplemente colapsamos, esta básica , también tenemos las generales, que son cosas como la Galería de Imágenes. Se puede tener un cuidado de imagen de calificación estrella para que pueda listar alerta código corto Soundcloud sidebar. Lee La de la madre. Hay un tono off funciones aquí es una herramienta tan impresionante. Y si colapsamos este también, también tenemos los widgets de WordPress que hemos estado pasando desde el área de brujas antes. También podemos simplemente hacer clic, arrastrar y soltar así muy, muy fáciles de construir páginas de esta manera. Ahora, lo siguiente que podemos hacer aquí lo que vas a notar es que si abro el básico y por ejemplo, quiero agregar un editor de texto aquí, entonces todo lo que voy a hacer es arrastrar el editor de texto aquí, y voy a conseguir una pieza de Texas al igual que la editora Gutenberg. Y cuando esto suceda, eso va a abrir el editor de texto aquí mismo. Entonces y se necesita alguien para escribir y sólo puede escribir eso aquí. Puedo seguir adelante y cambiar el estilo, la alineación y todo. Es súper similar a Gutenberg, y después tenemos funciones avanzadas también, que vamos a pasar más adelante. Pero todo va a funcionar igual que cuando lo tiras aquí, lo arrastras y lo sueltas. Vas a entrar en un editor donde podrás editar sus diferentes funciones. Ahora, si quiero seguir adelante y sumar más cosas, todo lo que voy a hacer es pinchar aquí arriba en la esquina superior derecha con todas estas casillas, y voy a volver a entrar aquí. Entonces digamos que quería agregar algo más. Digamos que quiero agregar esta imagen. Yo sólo voy a dar clic en él y moverlo hacia arriba y usted puede haber reconocido esto. Puedes ponerlo arriba, o puedes ponerlo debajo así. Ahora, si pongo abajo va a terminar justo aquí, y si quiero borrar esto lo voy a hacer es correcto. Haga clic y haga clic en eliminar. Ahora, recuerda, cuando estamos en la configuración antes de que la función adicta hubiera estado aquí arriba si añadimos en el manillar. Pero ahora vamos a usar el clic derecho para esto y simplemente eliminarlo para que podamos agregar cualquier cosa aquí dentro. Y este es un cuadrado de sí mismo donde se puede agregar un montón de cosas. Manojo de videos, botones, cualquier cosa. Te vas a dar cuenta de que podemos arrastrar sobre diferentes brujas o elementos. Básicamente son sinónimos aquí. Por lo que de esta manera podrás seguir en diferentes secciones con diferentes características. ¿ Verdad? Entonces digamos que quería agregar mi propio encabezado aquí. Puedo tirar de las cosas que quiero tirar de aquí, arrastrado aquí y crear un encabezado o un por encima del ritmo de casa de pliegue. Te acuerdas lo que por encima del pliegue significa cuál es todo. Eso va a estar en tu pantalla cuando abras la página. Entonces podría hacer esta y siguiente plaza aquí abajo. Esas podrían ser las cosas donde pongo, por ejemplo debajo de la completa, la primera pantalla debajo del pliegue, y podríamos hacer otra y otra. Todo eso va a tener mucho más sentido en un poquito. Ahora bien, si quiero colapsar en toda la plaza, todo lo que necesito hacer es seguir adelante y dar click en el borrar aquí arriba. ¡ Boom! Ya se ha ido todo. Lo siguiente que es tan increíble y tan hermoso con este editor es esta función. Observe el plus aquí dentro. Si hago clic en esto se va a agregar en una sección nueva entera, es tan fácil leerlo. Entonces digamos que añadiría en esto tenemos cuatro secciones diferentes pasando aquí. 1234 Y luego puedes editar thes que dentro entre ellos. Por ejemplo, la altura dos columna. Consigue el desbordamiento. Incluso la etiqueta, que es realmente genial, porque eso significa que podrías crear tu propio encabezado. Y los motores de búsqueda lo van a reconocer como un bateador porque cambiaste html a encabezado. En otras palabras, Header es para motores de búsqueda. S e o aún más sobre eso en la sección S e o. De acuerdo, entonces si volvemos aquí donde tenemos todos nuestros widgets, podría agregar en un encabezamiento a este. Realmente bueno. Volvamos atrás. Podría añadir en un video a este. Volvamos atrás. Podría añadir un Google Maps a éste. Aquí las posibilidades fuera de edición son infinitas, y eso es lo que la hace tan increíble. Por eso me encanta esto. Usted puede hacer este sitio web profesional fácilmente. Quiero decir en horas, una vez que aprendas esto. Entonces quitemos así toda la plaza. Ahí vamos. Ahora, lo siguiente que puedes hacer es seguir adelante y dar click aquí. Y esta es la siguiente cosa que sopla la mente aquí. Nos vamos a sacar un montón de plantillas. Ahora mira estos. Estas son plantillas de página, ¿verdad? Si te desplazas aquí abajo y digamos Bueno, éste se ve realmente bien, todo lo que necesitas hacer es dar click en él y puedes esperar inspeccionado, Mira cómo se ve desplazar hacia abajo con mar tenemos esta bonita, hermosa escenografía, video escenografía. Tienen a esta mujer apareciendo. Tenemos la caja que toma y el botón pasando. Muy sencillo, limpio y hermoso desplazándose hacia abajo. Tenemos estos doblez aquí dentro donde podemos llamar. Tenemos el número desplazándose hacia abajo por debajo del pliegue pasando. Tenemos todas las características fuera del servicio, algunas fotos y luego algo más de información. De verdad me gusta. Entonces voy a seguir adelante y dar click en insertar y luego obtenemos toda esta página. Mira, es tan fácil. Podría simplemente seguir adelante y escribir. Robin y Jesper empiezan a editar cosas diminutas, sumando en nuestros números, agregando en nuestro largometraje y honesto en un par de horas, estaría teniendo un sitio web de patadas culo. Esto es todo gracias a elemental tan fácil de usar. Ahora, vamos a colapsar todo esto haciendo clic en la sección de borrar aquí. Simplemente vamos a borrar todo dentro de esta plaza o más bien, en este caso, fue sólo el video. Y en esta plaza, por ejemplo, han dividido, Así que este número telefónico se va a derrumbar aquí. Y si la sostengo puedo ver que toda esta casilla de características va a ser borrada de esta plaza. Esto dividió esto en esto. Entonces todo depende de cómo quieras dividir a todas tus diferentes brujas y tu propio diseño, ¿ verdad? Entonces todo lo que te estoy mostrando aquí, vamos a entrar en más detalles sobre a medida que pasemos y construimos nuestra página de inicio. Esto es sólo para correr por el tablero y sus muchas funciones fuera Cómo funciona elemental. De acuerdo, entonces si bajamos, tenemos algunas características adicionales como la configuración. Ahora, tocamos la configuración justo antes en la conferencia cuando estábamos haciendo nuestro entorno de pacientes domiciliarios o elemental lleno con aquí, también podemos cambiar el estilo, lo que significa que podemos seguir adelante y dar click en fondo y agregar una imagen que significa que estaríamos agregando una imagen a este fondo pasando aquí. También podemos usar el Grady en significado podemos usar colores y hacer ciertos llamadores en este fondo. Y las posibilidades fuera de edición son infinitas aquí dentro. Y ahora si bajo, también tenemos navegante. Ahora, Navigator va a ser algo que, por ejemplo, Digamos que hago clic aquí arriba, vuelvo a las brujas y agrego en el encabezamiento aquí dentro. Ahora llegamos a ver el rumbo en nuestro navegante. Si vuelvo a los elementos y agrego en un colillas y s bien, pongámoslo abajo. Aquí podemos ver que en la misma columna tenemos el encabezamiento y el fondo. Ahora, si vuelvo aquí y agrego un video en una plaza natter, entonces vamos a ver que este video está en realidad en una nueva sección. cada una de estas plazas se les conoce como secciones, ¿verdad? Entonces si quiero un acceso rápido a ellos, solo puedo dar click en ellos y puedo ver al mártir. De igual manera, si hago click arriba en la esquina superior izquierda así se va a marcar en el navegante, y luego vamos a colapsar cada cuadrado, cuadrado o sección no importa como los llames y colapsar este también y luego yendo hacia abajo. También tenemos historia ahora historias de característica realmente útil, porque va a mostrar fue todo lo que hemos estado haciendo. Entonces, por ejemplo, acabamos de agregar el video. Entonces si hago click aquí. Obtenemos todo de vuelta de cuando tenemos el video. Entonces si estás haciendo algún error en el camino estás preocupado por Oh, ¿cómo va a quedar esto? Oh, ¿fui demasiado lejos? ¿ Puedo deshacer esto? Sí, puedes. Y eso es lo hermoso de esto. Todo está guardado aquí, que es realmente Austin. Incluso tenemos nuestra plantilla cuando agregamos esa aquí. Y por supuesto, si quieres ir a lo último, solo hacemos click en la parte superior y volvemos. También tenemos revisiones. Ahora, las revisiones es cuando hemos estado haciendo esto Grandes cambios que ha sido debería decir que tengo hace un minuto 13 minutos. He estado jugando un poco con esto y de la conferencia de previstas que se filmó. Por lo que también tenemos los que ahorran aquí se puede dar click en que podría aplicar y recargarlos. Por lo que nunca hay preocupación por que algo se pierda en el proceso de edición porque todo se guarda aquí abajo. Bajando. También tenemos modo responsive. Esto es realmente útil porque como tu edición en vivo, que es increíble en sí mismo, puedes seguir adelante y echar un vistazo ¿Cómo va a quedar esto en la tableta? ¿ Cómo va a quedar esto en el móvil? Por lo que siempre obtienes retroalimentación directa. Y sabemos que la mayoría de las personas en Internet hoy están usando su celular. Entonces necesitamos asegurarnos de que todo esté adaptado a los celulares, ¿ verdad? Si no, nos vamos a reunir en un montón de tráfico importante. Entonces vamos a asegurarnos de que siempre vigilamos a estos cuando estamos haciendo nuestro diseño y luego tenemos cambios de vista previa. Entonces, cada vez que haga algo, volvamos a las brujas aquí arriba. Y luego vamos a sumar. Ambientémonos en este video, por ejemplo. Aquí está. Ahora, si quiero ver cómo se ve esto, solo podría hacer clic en los cambios de vista previa, se va a abrir en nueva pestaña. Ya hemos visto esto pasar antes, y me va a mostrar cómo se ve ahora mismo. De acuerdo, así es como se ve con el video. Ahora bien, si quiero seguir editando esta sección, solo puedo mover mi ratón encima con esta sección de edición y vas a conseguir otro modo de edición aquí. Y lo bonito con esto es que puedes decidir Quieres tener la sección en caja Quieres tenerla llena con ¿Quieres tener alguna llamada en brechas? Va a haber muy importante. Tenemos diferentes Llamarlos posición Contin, desbordamiento etiqueta html, estructurar todo. Se puede cambiar el estilo, todo y eso está fuera de la sección. Si quieres agregar una sección anterior, por ejemplo, por ejemplo, solo tienes que dar click en el plus y vas a añadir aquí una sección que te recomiendo cuando estamos haciendo el diseño y nos vas a notar, vamos que mantenemos cada sección para cada contenido. Entonces, por ejemplo, lo primero que vamos a querer hacerlo dijo el propósito principal de nuestra página principal Eso va a ser en una sección Eso va a ser lo anterior la sección engañada ahora abajo . Podríamos, por ejemplo, cuando tenía un correo electrónico, optar en mi deseo de agregar un número de teléfono o cualquier cosa, tal vez testimonios. Sea lo que sea, va a haber por debajo de lo completo. Lo primero que aparece cuando se desplaza hacia abajo que va a estar en una nueva sección en la nueva plaza. Está bien. Y para eliminar estos Todo lo que tenemos que hacer es dar click en la X aquí. Es gon va a dar click en la X aquí. Ese también se ha ido y eso cubre todas estas funciones y todas las brujas. Ahora también tenemos algo llamado Global. Ahora, esto es un pro características que harían tu cual es global. No es importante Solo quería mostrarte cuál es esta parte, pero no vamos a usar porque es una característica pro que va hacia abajo. Siempre que hayas hecho algo de lo que estés orgulloso, puedes dar click en actualizar y eso se va a actualizar. También tenemos la misma opción. Podrías guardarlo como una plantilla de la que estábamos hablando antes puedes ir a plantilla y luego cargar que si quieres tener cierta plantilla para ciertas páginas y además solo guardar borrador y finalmente subiendo, sabemos que vamos a llegar a las brujas si hacemos clic aquí a la derecha, Pero si hacemos clic aquí, obtenemos un par diferente de opciones fuera de marcha. Llegamos a establecer nuestros colores por defecto son los fondos por defecto son el recolector de color por defecto, y luego tenemos configuraciones globales, que van a ser cosas como el fondo genérico por defecto, el contenido con el espacio widget etcétera. Además, contamos con luz de caja de luz. Reservado es si añades una imagen que haces clic en la imagen va a salir para que puedas ver las imágenes más a pantalla completa. Es una característica increíble que han añadido aquí Pulse aquí para volver. Tenemos la configuración del tablero, que es justo esta parte por la que hemos pasado antes. Tenemos el sobre elemental te va a llevar a su página principal. Tenemos el buscador, que es realmente genial. Si hay algo seguro que quieres encontrar en esta página, solo puedes buscarlo y luego podemos ver la página o salir a dash. Pero, ¿cuál es el back end de tu página web? OK, chicos, ahora en la próxima conferencia, realidad vamos a seguir adelante y decidir el tema fuera de nuestra página web, o mejor dicho, la sensación que queremos expresar. Y vamos a empezar decidiendo qué fondos por defecto queremos usar para nuestros encabezados para nuestros sub encabezados. Para lo genérico, tienes montando el texto. Decía que decidiera el sentimiento y que entendiera que si no eres diseñador como yo no soy diseñador, más probable es que no lo seas. Pero hay diseñadores por ahí que entienden la psicología fuera de los fondos. Por lo que tenemos que emparejar la psicología fuera del teléfono con la sensación de que quieres entregar a tus vistores. Y te voy a mostrar exactamente cómo hacer eso, porque hay muchas plantillas ahí fuera que los sitios en qué teléfono se expresa, sentimiento Así que vamos a ver qué servicio tenemos? ¿ Qué sentimiento quieren expresarse? Entonces, ¿qué telefoneó? ¿ Podemos decidir expresar ese sentimiento y qué fondos van a coincidir con eso? Entonces vamos a seguir adelante y hacer lo mismo por el tema más frío fuera de nuestra página web. Ahí hay un super emocionante, tan integral en parte importante fuera de diseñar tus sitios Web, etc. En la próxima conferencia, chicos 5. Establecer valores globos: fuentes: en esta conferencia, vamos a hablar de establecer valores globales. Entonces lo que es básicamente establecer ciertos valores que l un mentor va a estar usando y otra vez cada vez que estés diseñando cualquier página. De acuerdo, entonces vamos a empezar con establecer los valores globales para nuestros fondos. Entonces mientras estamos en elemental aquí, lo que vamos a hacer es ir a la esquina izquierda de la ópera aquí, click allí y luego trasladarnos a fondos por defecto. Vamos a pasar por los fondos antes de los colores porque los fondos son tan importantes cuando se trata la expresión en sí fuera de tu negocio fuera del sitio web para tu restaurante, para tu diseño o tu sangre, sea lo que sea que seas creando ahora mismo. Por lo que vamos a hacer clic en las fuentes predeterminadas aquí. Entonces como puedes ver, tenemos cuatro tipos diferentes. Tenemos un titular primario,titular secundario, titular secundario, un texto de cuerpo y acento toma. Lo primero que vamos a hacer es que voy a poner aquí cuatro ejemplos diferentes que van a representar todos estos cuatro tipos diferentes de texto. Entonces te voy a mostrar la psicología detrás de ellos y cómo puedes encontrar una expresión que se vaya a ajustar a tu negocio y luego también herramientas para encontrar emparejamientos adecuados a cada teléfono. Ahora, los fondos son en realidad bastante en el arte. Pero para nosotros que solo queremos tener una representación realmente buena fuera de nuestro sitio web en los negocios, vamos a tomar el atajo e ir por las plantillas. Definitivamente está lo más efectivo que podemos hacer aquí. Entonces titulares primarios, segundo titular cuerpo lleva acento toma Vamos a seguir adelante y vamos a ir a lo que no va a sacar esto sólo para mostrarte sus diferencias. Entonces este va a ser el rubro, y este va a ser el titular secundario y este va a ser el texto corporal va a ponerlo justo debajo de ahí. Y yo sólo voy a seguir adelante y escribir. Este es el texto del cuerpo golpeó un bajo. Voy a seguir adelante y centrar estos también, para que sean más fáciles de ver. Y luego vamos a sumar el acento. Toma va a poner eso en el fondo justo aquí. Entonces ahí vamos, y luego vamos a volver aquí y vamos a ir a los fondos por defecto. Aquí es donde configuramos nuestros valores globales todo lo que voy a hacer es abrir estos menús. Ahí vamos. Y aquí es donde se pone a la vez complicado e interesante, porque aquí es donde decidimos por nuestros teléfonos y como estamos hablando, los fondos anteriores están en realidad en el arte. Entonces lo que vamos a hacer es que vamos a usar una guía de can vote dot com. Ahora, en este tipo, tienen un montón fuera de diferentes plantillas. Han puesto una lista con diferentes emparejamientos de fondos que puedes seguir adelante y ver lo que sea John tu negocio y tu en checar eso, mira a sus padres telefónicos y simplemente sigue el ejemplo. Y si todo no existe en primaria, te voy a mostrar cómo encontrar alternativa. O si solo quieres encontrar tus propias alternativas de todos modos. Entonces lo que voy a hacer es desplazarme por esto hasta encontrar algo que me gusta aquí y aquí. He encontrado esta portada. Ahora estamos diseñando nuestra página principal, portada, página principal, eso casi lo mismo. Y mirando esto, creo que se ve realmente bonito. Realmente estoy disfrutando de la detección abierta aquí. Si me desplaza un poco hacia abajo. Obtengo una explicación de cómo funciona y luego también un ejemplo práctico. Y de verdad, de verdad disfruto esto. Entonces en realidad, voy a seguir adelante y usar esta configuración, OK, así que primero tenemos el titular principal y ese es el abierto Sonidos extra audaces. Entonces voy a volver y voy a seguir adelante y voy a escribir sonidos abiertos ahora, nota que no tienen los sonidos abiertos extra audaces, pero lo que puedo hacer es cambiar el peso porque el peso es otra palabra para negrita. Entonces voy a pasar de 600 a 800 podemos ver cómo eso cambia todo ese titular aquí mismo . Y está empezando a parecerse mucho más a este, y de verdad estoy disfrutando este Looks. Entonces vamos a quedarnos con esto. Volvamos a la cabeza aquí. Fondos por defecto. Por lo que ahora hemos dicho o titular primario. ¿ Y qué es un titular primario? Bueno, el titular principal va a ser cuando vayamos a nuestros elementos o widgets, y usamos estas espada fuera de encabezamientos. Si hago click en este rubro aquí, puedes ver que puede tener la etiqueta h de uno a seis años Dave Span o P. Ahora no importa realmente cuál utilices. Va a importar más, no llegará a la sección S e o. Lo importante aquí es que es el rubro va a ser rumbo a cualquier sección que estés editando para lo que se conoció tal que quieras conducir a casa, ¿ verdad? Y si volvemos aquí y vamos a los teléfonos completos, el titular secundario en realidad no existe tanto en L. Un mentor. El segundo titular. Es sobre todo va a ser sobre cierto, Por eso estoy usando este contador brujas como ejemplo. Porque todos los diferentes titulares aquí dentro, ya sea este h 2345 o seis esos se cuentan todos sus titulares primarios. Entonces el segundo titular, En realidad va a ser usado muy, muy raramente. Es sólo una buena cosa de saber, Vale, Vale, Pero ahora no pudimos encontrar al Cooper Hewitt. Entonces lo que voy a hacer es que voy a seguir adelante y buscar sonidos abiertos y tratar de igualar eso yendo al peridoto telefónico. Si o no. Todo esto va a estar en el recurso es así aquí. Lo que voy a hacer es buscar hijos abiertos así y luego golpear, entrar y luego abajo, podemos ver un par de emparejamientos diferentes pasando. Y lo genial aquí es que solo puedes hacer click en este toma y justo en el tuyo también , solo para ver cómo se ve. Y luego simplemente nos desplazamos hacia abajo hasta que veamos algo que nos gusta. De acuerdo, Ahora, en realidad creo que éste es realmente genial. Deliberada Baskerville. De verdad estoy disfrutando esa. Entonces el baño de liber, en realidad voy a usar ese. Entonces vamos a volver. Yo lo voy a revisar aquí y buscar plomo ¡Aliento, Bhaskar! Y ahí vamos. Ahí lo tenemos. Liberar a Baskerville. Y entonces tenemos el titular. Yo extra creo que se ve realmente, muy bonito. Ahora bien, si vamos al texto corporal, este va a ser la mayor parte del texto que montamos en nuestra página web. Van a ser valor global. Entonces, siempre que lo estés haciendo en un titular, vas a sacar estos valores de estos gruesos hijos abiertos que hemos seleccionado aquí Y siempre que estés escribiendo y sea necesario, vas a conseguir esta toma de cuerpo. Por lo que quiero elegir realmente con cuidado y asegurarme de que hagamos nuestros emparejamientos. Bueno, ahora volvamos a la lata de una guía aquí están recomendando que utilicemos sonidos PT aquí, entonces y creo que también se ve muy bien. Se ve realmente genial aquí, también. Entonces solo voy a seguir adelante y buscar hijos P T. Y ahí está. Nosotros lo tenemos. Entonces sólo vamos a ver cómo se transforman estas. Ahí vamos. Podría parecer una diferencia menor. Pero cuando empieces a agregar mucho texto, esto realmente va a sumar. Esto va a ser básicamente el 90% del diseño fuera de tu página web al final, sobre todo si estás blogueando. Toma esto todo patrocinador realmente todo. Entonces realmente estoy disfrutando esta parte, y luego voy a tener acento. Nos lleva lo suficientemente bien para que el acento tome que va a estar en cosas como los botones como diferentes partes de tu barra lateral, etcétera. No, realidad no tienen una recomendación para texto de acento aquí adentro Así que lo que vamos a seguir adelante y hacer es ir a financiar par de nuevo, y sólo vamos a seguir desplazando hasta encontrar algo que coincida bien con hijos abiertos. Porque ese es el titular que estamos usando. Entonces vamos a pasar por la brisa marina Serif. En realidad estoy disfrutando de verdad sobre todo culo. Toma un botón, como en este caso. Así que respira Serif. Voy a revisar eso y ver cómo se ve aquí. ¡ Congelen! Ahí vamos. Voy a hacer clic en Kim, y se irían. De acuerdo, verdad estoy disfrutando de esta montada. Entonces todo lo que necesito hacer ahora es rápido y aplicar. Y de repente hemos dicho nuestros valores globales para nuestros fondos y esto va a decidir por completo cómo nos expresamos. Ahora, recuerda, aquí dentro puedes pasar y ver qué tipo de fondos querías tener para la tecnología, por ejemplo, ejemplo, ¿qué tipo de sentimientos quieres tener por una galería de arte para invitaciones y eventos? Es decir, todos estos teléfonos, están expresando sentimientos diferentes. Por lo que es una buena idea social ir con los padres telefónicos que son recomendados por diseñadores profesionales . Son personas que hacen investigaciones y estudios en esto. Te recomiendo que hagamos lo que funciona. Por lo que hemos configurado nuestros teléfonos. Si quieres revisarlos, Maurin Death, podemos dar click en ellos. Y luego podemos ir, por ejemplo, al tamaño y poner esto en grande. Podemos incluso ponerlo a XXL y ver cómo se ve. Y realmente disfruto esto. Killeen. Mira, estoy súper feliz con esta elección. Creo que deberías hacer lo mismo. Echa un vistazo al recurso es ir y encuentra tu género Jordan ish. Encuentra tus emparejamientos y luego ve al ascensor superior aquí dentro. Ir al valor predeterminado. Font iba a ser tus valores globales. Por lo que estos siempre se van a aplicar y luego configurarlos. Golpear, aplicar. Y luego vamos a pasar a la siguiente conferencia donde vamos a hacer lo mismo para los colores fuera de Nuestra página web los colores también son súper importantes, ya que podemos ver este color, ¿ verdad? Simplemente no va a hacer ver en la próxima conferencia. Chicos, 6. Realiza tu menú con fuentes de pie: Muy bien, chicos, antes de que sigamos adelante y decidimos en nuestra paleta de colores para nuestra página web, dependiendo de qué necesidades su en John y qué servicio están ofreciendo, etcétera, vamos a seguir adelante y igualar el fondos que acabamos de recoger junto con nuestro menú y nuestra comida. Er Ahora, si has optado por la lata elemental va y actualmente no tienes un menú o un pie de página y no planeas usar ninguno de los dos, puedes seguir adelante y saltarte esta conferencia. Pero si lo eres, lo cual te recomiendo que hagas usando el menú en la comida o quedarte por ahí y vamos a seguir adelante y hacer esto. De acuerdo, Entonces lo primero que queremos revisar son los nombres de estos fondos que decidimos para la primaria encabezada El segundo Cuerpo Titular toma un texto de acento. Ahora, lo que vamos a querer igualar es el titular secundario que formó familia al menú superior aquí. El menú principal. Está bien. Y luego vamos a seguir adelante y emparejar el cuerpo lleva al texto de copyright y también a la comida nuestros enlaces para la política de privacidad y términos y condiciones Vale, Entonces lo que necesitamos recordar aquí es el segundo titular er y el texto corporal. De acuerdo, así que para mí, eso es el trabajo Baskerville, MPT Sands. Entonces los vamos a tener en cuenta. Lo que también podemos hacer es seguir adelante y quitar. Todos estos iban a quitar toda esta plaza, también conocida como sección. Al hacer click aquí, irían de arma. Y siempre que hagas algún cambio, solo recuerda hacer clic en actualizar. Ahí vamos. Entonces vamos a dar clic en la esquina superior izquierda aquí y luego hacer clic en Salir a Dashboard y esto nos va a llevar al final de la página web, y vamos a ir a la aparición aquí abajo y hacer clic en Personalizar. Y luego vamos a ir a la tipografía en el tablero izquierdo, escuchar hacer clic ahí en esa pestaña, y luego vamos a seguir adelante y dar click en el menú principal. Ese es el 1er 1 con el que vamos a empezar. Se irían y luego vamos a dar click en la familia del teléfono. Ahora, el menú principal es éste. Vamos a hacer clic en la familia del teléfono, y voy a buscar brah plomo. Y son esto liberan Baskerville. Entonces si le echan un vistazo al menú principal aquí mismo y miran cuando estoy dando click en el basquetbol laboral, podemos ver el cambio que hace. Y ya soy fan de esto. A mí me gusta este gran momento, en realidad. Por lo que eso cambia nuestro menú principal. Ahora, si podemos, también podemos cambiar el tamaño así. Si quieres tenerlo un poco más grande, podríamos hacerlo incluso en 16. Ahí vamos. Ahí. Tenemos 16 realmente me gusta mucho en Ford. Visto así, también puedes jugar con el espaciado de letras. Pero honestamente, no lo haría porque eso va a estropear el frente en sí. Y luego vamos a seguir adelante y dar click en la parte de atrás, y vamos a bajar a hacer donde diga comida o derechos de autor. Vale, Y los derechos de autor esto En realidad este copyright toma que escribimos justo aquí, y voy a buscar P T. Sands. Todo en efecto. Waas da click en PT en mi teclado y va a saltar abajo a P T aquí y tendrían PT Sands. Entonces si te mantienes a la vista este trozo de texto y podemos mirarlo, cambia y ahí vamos. Entonces no un gran diferente, pero va a encajar mucho mejor con el diseño general para el sitio Web, sobre todo a medida que empezamos a agregarle contenido. Entonces lo que también queremos hacer aquí, es jugar un poco con este tamaño, ¿no? Esto es realmente pequeño. Ahora bien, podríamos querer hacer esto un poco más grande. En realidad disfruto mucho que Ford vea aquí. Ahí vamos. A lo mejor 30. Sí, vamos a mantenerlo un 13 se ve realmente bien. Por lo que 13 y tamaño. Me gusta mucho este diseño. Y luego vamos a seguir adelante y vamos a volver y vamos a cambiar estos traseros. Bueno, entonces simplemente cambiamos la comida o los derechos de autor. Vamos a volver, desplazarnos hacia abajo a comida o menú, y vamos a cambiar el teléfono. Familia también a P T Sands. De acuerdo, Ahora, echa un vistazo a esto. Una vez más, podemos ver la diferencia. Y ahí vamos. Ahora, algunas personas podrían ofrecer igualar su menú superior, su principal principal novedad aquí con su pie de página. Y eso lo puedes hacer absolutamente. No hay nada malo en eso, pero yo personalmente, prefiero igualar el texto del copyright junto con la comida o se apodera de todo. Simplemente creo que hace para un diseño más bonito y más limpio. Y luego voy a cambiar este tamaño allá. Entonces se va ese 12. A ver. Tercera escena 14. 14. Se ve bastante bien. Ya nos vamos. 13. Creo que es realmente bueno. Y luego voy a dar clic en Publicar, y eso va a publicar este para el menú principal, las tomas corporativas y la comida o menú. Por lo que ha sido publicado. Se ha cambiado. Chicos increíbles, no con él. Coincide con el teléfono en nuestra página web. Nosotros hemos establecido los valores globales, lo que significa que cuando empezamos a crear contenido, empezamos a agregar encabezados, fondos, montando, tomas que todo va a coincidir con los teléfonos que ya tenemos elegido. Entonces, ¿qué, vamos a seguir adelante y hacer a continuación? Va por los colores. Echa un vistazo a qué color debería va a representar mi negocio. ¿ Qué paleta de colores va a encajar con eso? Y eso está en el valor global para los colores, igual que hicimos con los fondos. Ver, en la próxima conferencia, chicos 7. Fijar valores globos: colores: Muy bien, chicos, en esta conferencia, vamos a estar hablando de los colores. Qué significan cómo usarlos adecuadamente para representar su negocio y luego fuera de curso, establecer nuestros valores globales. Ahora, igual que con los fondos, podemos hacer esto tan fácil o s avanzados que como disfrutamos haciéndolo ahora mismo, opté por cuatro teléfonos. Estarás bien con sólo dos. Si no quieres adentrarte demasiado en él y los colores son similares, no tienes que adentrarte demasiado en él. Pero quiero mostrarte dónde puedes encontrar todo el recurso es hacer la exploración tan profunda como te gustaría, porque me parece que esto es muy divertido. Ahora, lo primero que podemos echar un vistazo es el significado y simbolismo off color. Este es un gran tutorial desde Canadá. Lo voy a meter. El recurso ya está aquí. Van a hablar de lo que simboliza cada color. Entonces lo que tal vez quieras hacer es pensar en los colores en los que has estado pensando para tu diseño. Echa un vistazo a lo que simbolizan. Echa un vistazo a través de la editorial y mira si esto va en línea con tus pensamientos e ideas fuera tu negocio. Ahora, por ejemplo, quizás no quieras tener una empresa que las ventas componen, por ejemplo, por ejemplo, y usar principalmente el negro y el rojo como colores. Debido a que estos colores de aire realmente agresivos, Es posible que quieras ir con colores más suaves ahí dentro. Esto no está ambientado en piedra. Ahora bien, recuerda esto no hay bien ni mal aquí dentro, pero hay lineamientos fuera de lo que generalmente funciona mejor. Está bien. Y para mí, prefiero seguir estos lineamientos, establecerlo desde el principio para que todo se ponga en su lugar y luego mantenerlo sencillo en todo el diseño. este momento, lo siguiente que podemos hacer es realmente seguir adelante y generar nuestra propia paleta de colores usando el generador de paleta de colores de lona. Y eso es lo que vamos a seguir adelante y hacer. Pero antes que nada, echemos un vistazo a nuestra paleta de colores actual. Entonces si entramos en escritor elemental, les he puesto atrás para que podamos revisar los diferentes colores. Preguntado. Cambiaron. También puedes hacer esto, si quieres, pero esto no es obligatorio. Esto es sólo para mostrarte lo que va a hacer la diferencia. Entonces si vamos al botón de menú aquí arriba y luego pasamos a los colores por defecto, vas a notar que aquí ya hay paletas por defecto. Entonces si solo quieres ponerte bien con ello, puedes hacer click en uno de los palacio de aquí y vas a seguir adelante y conseguir esos palacio ¿ verdad? Puedes ver todo cambia al instante, elige cualquier paladar que quieras. Ahora voy a dar click en descartar aquí para volver al original. Eso está actualmente establecido. Entonces tenemos texto primario, secundario y acento que vamos a cambiar el color ahora. Lo primero que voy a hacer porque voy a estar basando los colores de este sitio web fuera de los colores del logo derecha es una manera realmente inteligente de hacer coincidir el diseño de su sitio web. Entonces lo que voy a seguir adelante y hacer es usar canvas Kohler generador del que acabo de hablar click en subir imagen, y luego voy a desplazarme hacia abajo y en realidad usar este logo que hemos creado subido , y luego estoy va a conseguir una paleta de colores de esa carga que va a verse así . Ahora todo lo que necesito hacer es desplazarme hacia abajo. Y como pueden ver aquí dentro, voy a conseguir esta hermosa paleta de colores basada en el logotipo que está aquí. De acuerdo, entonces lo que voy a hacer es decidir cuál de estos quiero usar y dónde. Y aquí te dejamos un par de consejos y trucos para el futuro diseño. Ahora, si volvemos aquí, vas a notar que la persona que llama primaria va a estar fuera de cosas como el encabezado. También está en el número Contador va a estar en el número mismo, que es el símbolo principal de ese widget. Entonces todas las cosas grandes, como encabezados como, por ejemplo, números en ciertos testimonios, etcétera. Eso va a ser usando este color. De igual manera, eso va a ser usando ese fondo. Decidimos para la primaria ahora secundaria. Igual que con el fondo aquí. Tenemos un color secundario que se está mostrando debajo del número aquí dentro. Y la segunda er no es muy común cuando se trata de L. Un mentor, pero aún existe, ¿ verdad? Tomas, van a ser las tomas que escribimos con acento que va a estar en accesorios cosas como botones y ciertamente Oriente, y ciertamente sólo eso viene con ello. Entonces lo que voy a seguir adelante y hacer es poner en negro la primaria. Y la razón de esto es por que esta ciencia que vamos a hacer va a contener Back cross. Va a haber un solo color o un cuadro grande. Y para esto, lo más fácil de hacer es mantener tus encabezados y tomas grandes en blanco o negro. Entonces esos son los dos colores primarios que voy a estar usando en el diseño para los encabezados. Entonces lo que voy a hacer es que voy a volver a la paleta de colores y voy a dar click en copiar aquí mismo porque va a estar afrontando el tono negro del logo que estamos usando. Si hubiera tenido un tono diferente de negro, habría escogido eso, y lo habría usado en su lugar para emparejar con el logo. Voy a volver atrás, haga clic en primaria aquí. Voy a quitar esto y luego sólo voy a seguir adelante y pegar eso y luego voy a hacer clic de lejos así y puedes ver que se convierte en tono negro junto con el número. Ahora, prefiero mantener los colores realmente simples. Entonces lo que voy a hacer es volver y voy a cocinar esto genial aquí. Voy a volver aquí y voy a mantener el mismo gris para secundaria así y para el texto así, porque no quiero jugar con demasiados colores. De igual manera con los fondos, fui por cuatro. Se puede ir con dos. Se puede ir con tres. Prefiero quedarme un par de más ahí, pero depende completamente de ti. Prefiero ir más simple con los colores de diseño. Y luego finalmente, el acento, Sólo vamos a ser el botón y ese tipo de widgets. Voy a estar usando este tipo de color jitomate que se toma directamente de nuestro logo porque eso va a ser un hermoso partido en toda nuestra página web. Entonces voy a seguir adelante y voy a dar click en Accent aquí, quitar esto, pegarlo, y ahí vamos. Voy a dar click en aplicar. Y ahora voy a dar click en actualizar y hemos elegido nuestros colores. Súper fácil, Super agradable. Ahora, más adelante, también puedes notar que hay ciertos llamantes como el azul todavía apareciendo cuando encima de mi ratón en el menú de aquí. Entonces eso es lo que vamos a cuidar en la próxima conferencia. Ahora, si tuviste algún problema para extraer una paleta de colores decente del generador de Canadá, lo que puedes hacer es usar estos extractor Kohler aquí también está en el recurso es. Todo lo que necesitas hacer es subir el archivo desplázate hacia abajo, encontrarlo Ahí vamos así, y luego pasas el ratón sobre. Y digamos que quiero extraer este color. Se puede ver el Suman a la derecha aquí. Dondequiera que sostenga la boca, voy a dar click en ella y me va a dar el código de color. Yo lo copio. Yo pegué heredar elemental y tú lo tienes Súper simple. Ahora, si de verdad disfrutas esto, quieres sumergirte más profundamente en los colores. También voy a seguir adelante y agregar estos al recurso es no. Esta es una paleta de colores de zona paloma. Entonces, ¿qué? Puedes hacer aquí es encontrar tu propio collar que disfrutes? Por ejemplo, digamos, ¿realmente disfrutaste este rojo? Entonces lo que vas a notar es que muchos de estos se están moviendo al unísono cuando estás moviendo esto. Entonces eso significa que si tienes cierta pastoral, todas las demás, se van a convertir en culo pastel. Bueno, así lo pregunté, encuentras un bonito color que te guste, por ejemplo, este rojo. Los otros colores van a estar emparejando junto con ellos. Entonces si realmente disfrutas de esto y quieres ir, la ruta más avanzada puedes seguir adelante y hacer esto, encuentra tu propia paleta de colores. Entonces sólo tienes que copiar pegar las llamadas desde abajo aquí y finalmente, para tu inspiración. Este es también el recurso está aquí. Vamos a tener un par de sitios web de ejemplo de cómo están utilizando diferentes collares con el fin de diseñar su sitio web. Se puede ver a mucha gente realmente audaz con los que llaman aquí mezclando mucho emparejando. Es realmente emocionante porque este signo es tan personal. Puedes diseñarlo de la manera que quieras. Prefiero ir un poco más simplista con los colores, pero al final, estos no están engastados en piedra. Tampoco lo es el frente. Siempre podemos volver atrás, cambiar los collares y cambiar los valores globales en cualquier momento que queramos a lo largo de nuestro diseño, justo como nos parezca conveniente. Ahora en la siguiente conferencia, chicos, vamos a seguir adelante y vamos a ser cambiados en los colores apagados cuando pasemos el mouse por aquí en el menú porque siguen siendo azules, y quiero que estén en el mismo rojo que éste. Entonces ahora en la próxima conferencia, lo que vamos a seguir adelante y hacer es cambiar el color. Cuando pasamos la boca sobre el menú de aquí, se puede ver que se convierte en azul. Yo quería convertirme en el mismo rojo que tenemos en nuestro logo y que hemos puesto para nuestra llamadora de acento, ¿ verdad? Lo mismo va con el más abajo aquí. Se puede ver que se convierte en azul. Yo quiero convertirlo en ese rojo. Por lo tanto, mantén tu sitio web abierto o dondequiera que hayas extraído tus colores para que podamos usar ese código de color. Por supuesto, Si tienes tu propio curso o diferentes códigos de color, solo tienes que seguir adelante y utilizar esos y este signo libremente. Así es como lo hago. Se supone que es un paso a paso para ayudarte, pero siempre tienes manos libres al final. Eso es lo que es tan divertido con el diseño. Siempre y cuando estemos haciendo los elementos importantes juntos, correcto, Así viendo la próxima conferencia, chicos. 8. Realiza tu menú - colores de pie: Está bien, chicos. Entonces en esta conferencia, vamos a seguir adelante y hacer coincidir la paleta de colores que acabamos de crear o simplemente copiar en nuestro menú principal en nuestros enlaces y en nuestra comida. Er, correcto, Porque quieres igualar todo. Ahora mismo, tenemos la paleta de colores de los derechos del logotipo aquí. Pero cuando paso el ratón sobre el menú principal, se convierte en azul claro. Y esto realmente no coincide. Queríamos hacer coincidir los otros colores como el color del botón, por ejemplo para darle una forma más bonita en general decidida, mucho más profesional. Entonces lo que voy a hacer en primer lugar este, voy a dar clic aquí, y voy a hiperenlazar este cuerpo para poder mostrarte cuál es el efecto hover y cuál va a ser el color Si no sabes lo que es un efecto hover, Te voy a mostrar eso en un segundo. Simplemente voy a seguir adelante y dar clic en insertar enlace y escribir puntos de Google. Ven. Ahí vamos. Entonces ahora cuando haga clic en esto me va a llevar a Google, pero notó que al pasar el ratón sobre este enlace, se convierte en un color azulado. A esto se le llama efecto hover. Cuando algo cambia el color o el tamaño, por ejemplo, cuando pasas el cursor sobre él, Así que vamos a cambiar ese color también. Lo que queremos hacer ahora es que queremos ir a la esquina superior izquierda, dar click a tu botón de menú distante y luego dar click a los colores predeterminados. Y solo queremos dejar esto aquí arriba para que tengamos acceso rápido a los diferentes colores . Entonces vamos a dar click en este logo aquí, click derecho y click Gone open link en Nueva pestaña. Y a partir de aquí, vamos a seguir adelante y dar click en Personalizar, y luego vamos a ir a Opciones generales y a la izquierda aquí. Y luego vamos a dar click en estilo general a la izquierda aquí. Entonces aquí es donde diseñamos nuestros colores. Y en la primera columna aquí arriba, donde tenemos colores primarios hover y principales de borde, es donde podemos cambiar esta zona. Entonces lo primero que vamos a hacer es hacer clic en Llamador primario y seguir adelante y cambiar este collar. Ahora, recuerda que te hablé del efecto sobre, por lo que tiene sentido cambiar el color del efecto puerto. Aquí vas a cambiar esta variedad de llamadas, pero por alguna razón, En Ocean WP, el color primario va a ser el color Harvard. Por lo que esto engloba a ambos fuera de estos. No tengo idea de por qué lo han hecho en el diseño, pero actualmente, así es como funciona. Entonces vamos a seguir esas reglas. Entonces lo que queremos hacer es cambiar este color este color claro, azulado en este cuello rojo. OK, entonces voy a dar click en este collar de aquí, y luego voy a volver a primaria en la pestaña anterior. Voy a dar clic en este rojo, escuchar el color del acento, y luego solo voy a seguir adelante y seleccionar este código. Yo lo voy a hacer policía y luego volver aquí. Voy a quitar este código, y voy a pegar este código en. De acuerdo, Así que ahora mira lo que pasa cuando paso el ratón sobre el menú, ¿ verdad? Cambia a ese mismo llamador que estamos usando como tema que está en nuestra paleta de colores. Ahora bien, si esto no cambia de color instantáneamente, simplemente haz clic en él hacia abajo de esta manera, y luego puedes volver a hacer clic en él hacia arriba. Esto usualmente configurará la persona que llama, por lo que esto se ve realmente bien. Pero si bajamos al color del cuerpo aquí mismo, podemos ver que esto también se vuelve rojo, lo cual es realmente bonito. Pero tiene un color más oscuro porque está hiperligado, correcto. También podemos ver el abajo aquí donde dice lo que tenemos nuestro aviso de cookies. Esto se va a poner rojo. Pero el color principal fechas color natural es tan oscuro que ni siquiera podemos leer este aviso de cookies . De igual manera, tenemos weiter y esto se convierte en rojo también. Por lo que podemos cambiar todos estos. Pregunte. Deseamos. Ahora lo que voy a querer cambiar es en realidad esta persona que llama en la que cambia porque no quiero que los hipervínculos estén en este tipo de color grisáceo. Por lo que difícilmente se puede decir que se trata de un hipervínculo. En realidad quería estar en rojo. Entonces lo que voy a hacer, es dar click a éste hacia abajo y luego voy a bajar. Vamos a pasar por esto en un segundo. No te preocupes. Voy a bajar. Voy a saltarme el fondo del sitio porque vamos a hacer eso en l un mentor y voy a bajar a color de enlace, ¿ verdad? Entonces lo primero es que la persona que llama en sí va a ser el color natural apagado. El enlace va a ir por todos los hipervínculos, incluyendo esto Eso va a nuestra política de privacidad. Y lo que me gusta hacer aquí es en realidad ir al color y usar la misma combinación de colores que utilizo para el logo, el collar de acento, etcétera. Y así voy a seguir adelante y quitarlo, pegarlo, y ahí tenemos este bonito color rojo. Pero la cosa es ahora cuando paso el ratón, no pasa nada. Justo entonces como que queremos tener ese efecto pop como este se ve realmente bonito que algo pasa cuando pasas el rato. Es muy profesional. Entonces, lo que voy a hacer es bajar a la persona que llama hover aquí mismo, y voy a insertar la misma persona aquí también. Pero ahora voy a bajar un poco en esto para que se ponga un tono más claro de rojo y haga clic lejos así. Entonces mira esto. Ahora ya ves cómo aparece un poco cuando paso el ratón por encima, y eso solo significa que cuando pasas el mouse sobre un enlace, pasa algo. Y ese es un sentimiento muy profesional tener política de privacidad similar. Pon el ratón encima. Se aclara. Es algo tan bonito que te vas a dar cuenta. Hover Think está en la mayoría de los lugares de nuestra página web. Entonces mira esto. Está bien. Pero, Tom, por ejemplo, si paso el ratón por encima notó que se oscurece sobre un ratón sobre la política de privacidad, se pone más claro. Tenemos la sensación de que algo sucede. ese momento tenemos la política de privacidad y los términos y condiciones, y todo lo que necesitamos hacer es mantener estos activos es porque, honestamente, creo que esto se ve realmente bien. Entonces este es ahora nuestro color primario. Estoy realmente feliz por esto. Entonces lo que voy a hacer es seguir adelante y dar click en Publicar. Ahora, también hay algo aquí llamado Main Border Caller. Ahora la llamada de frontera principal si en realidad es esta pequeña línea la que separa el propio menú superior . Entonces si entrara en el color del borde principal y de hecho presiono esto en mirada blanca aquí dentro. ¿ Qué pasa? Por lo que hago click en blanco y se puede ver que la frontera desaparece y Ahora esto se funde en la página web y esto puede ser una buena ventaja si se ajusta a tu diseño, correcto. Quieres poner un menú en tu fondo, Pero si quieres mantener tu menú separado, puedes seguir adelante y hacer clic en él hacia atrás haciendo clic en el valor predeterminado aquí y obtienes esta diminuta línea que separa todo. Ahora, por supuesto, podría seguir adelante y cambiar esto y meterlo en una línea roja también. Pero en mi opinión, esto no se ve tan bonito. En realidad prefiero que esto consiga una buena separación. De lo que también queremos notar es que cuatro nuestro menú superior que no habría editado prácticamente por completo como queremos. Ahí arriba hay algo que dice, Coloca tu contenido aquí. Debido a estos, conseguimos otra llamada fronteriza principal aquí arriba. Entonces lo que vamos a hacer es en realidad seguir adelante y eliminar este llamado menú superior. A esto se le llama parte del menú superior para que este color de borde ni siquiera exista. Sólo vamos a tener el derecho inferior. Entonces vamos a tener este efecto realmente bonito cuando realmente nos desplazamos en nuestra página principal. Porque ahora mismo, cuando estamos blancos hacia el blanco, tenemos el blanco en el menú y tenemos el blanco en el fondo. Todavía separa este color de borde, separa el menú del fondo. Nosotros lo quitamos, no se separa. Y eso me gusta mucho. Mira hacia fuera la separación para el menú. Entonces sigamos adelante y eliminemos este espacio de menú superior que podemos hacer un ajuste aún más agradable para el menú aquí. Menú superior, menú regular. Entonces voy a seguir adelante y dar clic en las editoriales. Asegúrate de que siempre publicas y guardas todo lo que haces. Y luego voy a dar click en atrás aquí, y luego voy a volver a dar click en atrás una vez más, vamos a bajar a donde dice barra superior, ¿ verdad? Y luego vamos a ir a General y luego voy a desactivar este bar de Hope, y vas a notar que esto realmente desaparece. Algunas personas lo llaman el menú superior. Algunas personas lo llaman la barra superior, pero es cualquier tasa que haga clic aquí a la personalización superior son desmarcarlo, haga clic en publicar, y tenemos un look mucho más bonito en nuestra página web y Onley un color de borde principal. Entonces tenemos el menú tenemos el top muchos o el Tope se han ido todos Chicos. Gran trabajo. Pasemos a la siguiente conferencia. Nosotros lo hemos equipado todo. Ver ahí. 9. Anatomía de las secciones: De acuerdo, chicos, en esta conferencia, vamos a estar aprendiendo sobre las secciones qué son y cómo usarlas. Por lo que esta parte en L. A un mentor se le llama sección, y antes me he estado refiriendo a estas plazas. Por lo que estos cuadrados se conocen como secciones, y una sección te permite agregar un montón de diferentes columnas en ellas para que puedas diseñar prácticamente cualquier cosa que quieras. Entonces para descomponerlo, lo primero que tenemos que es la parte de sección derecha en la que podemos arrastrar cualquier cosa. Ahora, dentro de esa sección, podemos crear una columna, y es dentro de esta columna que vamos a agregar en nuestro elemento. Si recuerdas en Element, podría estar en la imagen. Podría ser una cabecera. Podría ser un video. Podría ser un texto, básicamente un contador. Cualquier cosa. Podría ser cualquier cosa que se llame sobre elemento. También podría ser un widget fuera de cualquier tipo, derecho a ser cualquier cosa. Entonces en este ejemplo, he agregado en una imagen y aviso, porque tengo un elemento. Es muy probable que ese cuadro vaya a cubrir toda la columna. Si lo quisieras. Están dimensionando depende completamente de ti, pero el elemento cubre que lo llaman ahora. Las columnas son completamente personalizables. Entonces si quisieras, también podrías estar dividiendo ese llamarlo. Entonces eso significa que si pudieras cambiar completamente la salida en lo que estás creando, por ejemplo, puedes agregar dos elementos en su lugar. Entonces, en lugar de tener un cuadro grande, podrías estar poniendo una foto a la izquierda. Y entonces podrías estar agregando un trozo de texto a los derechos. De acuerdo, entonces ahora tenemos un producto a la izquierda y podemos tener una descripción fuera del producto a la derecha. Y debido a estas columnas, es tan fácil centrarlas y asegurarnos de que todo esté en el lugar correcto en nuestra página web. Entonces si quisieras agregar algo adicional aquí dentro, podríamos hacer una llamada adentro fuera de esta columna. Supongo que llaman a esa columna excepción. Bromeando a un lado, lo llamó dentro de una columna. Entonces eso sólo significaría que agregamos en otra pieza como esta. De acuerdo, entonces, a la columna de la derecha, hemos agregado en otra llamada en donde podemos agregar un elemento adicional y que podría, por ejemplo, ser un por ahora abajo. Podría ser cualquier cosa que queramos agregar ahí. Entonces, siempre que estés haciendo algo en tu página web dentro de tu sección, ¿ quieres tener una idea fuera? ¿ Cuántas columnas voy a necesitar aquí? ¿ Cuál es el panorama? ¿ Qué es decidir que voy por Porque más o menos el cielo es el límite aquí, chicos, porque bien podrían haber tenido cuatro columnas. Y dentro de todas estas columnas, podríamos estar agregando reseñas. Por ejemplo, podríamos estar agregando en testimonios o un montón de productos porque todas estas columnas van a contener elementos. Y lo que son esos elementos depende completamente de ti, razón por la cual elemental es tan fácil de usar. Y una vez que entiendas las secciones que los llaman algo elementos para agregar, todos estos sitios web de aspecto realmente profesional son de repente muy fáciles de recrear. Ahora, si quisiéramos, todas estas revisiones o testimonios o productos podrían ir de 4 a 6 y pudimos agregar elementos a cada off estos y ahora de repente podríamos estar teniendo una pantalla de producto. En cambio, el cielo es el limitado. Sólo tienes que saber que dentro de cada sección va a haber columnas. Uno lo llamó varias columnas no importa. Pero eso se va a decidir por cómo quieres estar colocando tus elementos. Si tienes una galería, por ejemplo, podrías tener una columna y solo una galería grande, o podrías tener varias columnas y agregar en la imagen manualmente. Permítanme mostrarles un ejemplo práctico. Entonces si le echamos un vistazo a la página web de Pat Flynn ingresos inteligentes, pasivos, podemos ver que él muy parecido a nosotros O más bien, muy parecidos a él tenemos nuestro menú aquí arriba, ¿ no? Lo mismo va para nosotros. Tenemos nuestro menú aquí arriba. Entonces es un menú adicional. Pero no vamos a necesitar eso abajo. Aquí tiene su derecho de primera sección. Aquí es donde vamos a estar diseñando nuestra página de inicio para la primera sección, arrastrando todo aquí ahora ¿qué tan grande quieres hacer tus secciones? Eso va a ser completamente tu decisión. Pero en mi opinión, la solución más práctica y la forma en que voy a estar diseñando toda la página va a ser dividiendo la sección, dependiendo de lo que estemos agregando. Entonces por ejemplo, aquí tenemos el llamado arriba del pliegue. Si recuerdas, eso es porque esta es la capa superior que estás viendo en tu pantalla. Por lo que aquí ha añadido, obviamente una imagen de fondo fuera de sí mismo que es completamente blanca. Ahí hay una foto de él y su firma aquí a la derecha y a la izquierda. Aquí ha agregado en una cabecera. Y brillante, déjame ayudarte a construir un negocio en línea impulsado por ingresos pasivos abajo. Este es un encabezado adicional es solo uno más pequeño. A lo mejor en H tres sobre h cuatro. Vamos a ir más a fondo en lo que son y lo que significan más adelante en el curso. Pero básicamente H uno es el más grande. H seis es el más pequeño. Hendrawan se dirigió a cabeza o tres cabezales para etcétera. Y luego ha añadido en un botón aprender más aquí que tiene un efecto de pasar el ratón sobre. Y todo esto ahora cuando lo miramos, realidad es muy sencillo. Pero es tan efectivo y es tan hermoso. Y este es su diseño por encima del pliegue. De acuerdo, entonces pondría todo esto en una sola sección y luego podríamos agregar en las columnas, por ejemplo. Podríamos habernos dividido. Ellos lo llamaron aquí donde, como tenemos una foto de fondo de él y luego un blanco lo llamó, o podríamos estar teniendo una gran columna donde en realidad esto es sólo un cuadro grande. Todo depende de la practicidad de la imagen, del material, cómo se quiere decidir. Es Sarah. realidad no hay ningún bien o mal aquí. Trabajamos con lo que tenemos, correcto, Pero entonces queremos sumar en una cabecera, otra cabeza o cualquier fondo para que podamos ver que Quizás aquí dentro queremos tener una columna grande . Y aquí queremos tener tres columnas y vamos a ir más a fondo en cómo funciona esto en una próxima conferencia, porque vamos a estar diseñando nuestra propia página de inicio, y vamos a tener un look similar a esto con una descripción con una bonita imagen de fondo grande y un botón, porque me encanta esto. El letrero Así que esto podría ser una sección desplazándose hacia abajo. Tenemos la característica de culo en la prueba social y dice el New York Times, Forbes Lifehacker Inc. blogger Pro. Y esto es realmente bonito porque todo lo que tienes que hacer es tener esta parte como una sola sección crear un fondo negro, y luego podrías agregar en un texto o un Hedren muy diminuto aquí y justo como aparece en. Y entonces simplemente agregarías una imagen aquí, una imagen aquí, aquí, aquí y aquí y estas podrían ser columnas. Es así de sencillo. Por lo que eso sería 12345 y seis columnas. Es así de sencillo. Y luego sólo agréguelos uno junto al otro en un papel como este. Por lo que hay muchas estaciones de clientes diferentes que puedes hacer. O podría ser una sección grande con un gran llamado con solo una imagen añadida en ella. Desplazándose hacia abajo. Tenemos el correo a menudo. Lo mismo. Esta podría ser una sección aquí dentro, y luego tenemos un encabezado sumado a continuación. Tenemos un encabezado más pequeño y luego tenemos el correo abierto y luego el fondo agregado, y esto es todo super simple por diseño. Pero lo encantador es lo profesionalmente limpio que se ve ahora, si quisieras, podrías tener esto y esto y esto dentro de la misma sección. En mi opinión, eso no es práctico, pero puedes hacerlo para que no haya tanto bien o mal aquí dentro. Se trata más de practicidad y cómo se quiere dividir las diferentes columnas y los diferentes elementos con los que se trabaja. Pero ahora que estamos empezando a aprender sobre la sección sobre las columnas sobre los elementos , y sabemos que todo es solo arrastrar y soltar y hemos hecho el marco con el pre diseñado con los valores globales, las cosas ya no se ven tan difíciles, ¿verdad? Entonces lo que vamos a hacer es si vamos a seguir adelante, seguir aprendiendo y luego empezar a diseñar nuestra propia página principal mirando hacia adelante, chicos de hoy siguen mi paso, y también vas a estar teniendo una página de inicio impresionante en poco tiempo viendo la próxima conferencia 10. Fondo parte 1: Muy bien, chicos. Entonces en esta conferencia, vamos a seguir adelante y empezar a diseñar el fondo de nuestra página principal. Ahora, antes de que sigamos adelante y hagamos eso, vamos a querer ir al menú aquí en l un mentor y echar un vistazo a nuestro recolector de color. Ahora, el recolector de color va a ser los colores predeterminados que puedes elegir cuando estás diseñando. Entonces ya hemos dicho nuestros valores globales, lo que significa que estos van a ser los valores primarios cuando estemos, por ejemplo, sumando en una guerra de titulares. Cuando estamos agregando en un texto, por ejemplo, cierto fondo Te acuerdas de esa conferencia, ¿ verdad? Pero aquí hay un recolector de color. Entonces cuando estamos diseñando thes, van a ser el color primario para que nosotros elijamos. Ahora, lo que quiero hacer en realidad es agregar en algunos de nuestro palacio de color aquí, por ejemplo, quiero tener el rojizo en lugar de quizá el azul, y también quiero la versión más ligera apagada. Genial. Entonces solo voy a volver atrás e ir a los colores por defecto. Ve al gris aquí dentro. Voy a lidiar con esto, y luego voy a volver, ir al recolector de color y luego reemplazar uno de estos grises por ese código aquí de esa manera. De acuerdo, voy a hacer lo mismo para el próximo. Y de verdad te recomiendo que hagas lo mismo también para asegurarte de que tengas la paleta de colores . Pregunta tu elección por defecto porque nos vas a notar. Vamos, va a ser mucho diferente. Posible personalización es para nosotros, y voy a quitar este tipo de color azulado que tenemos aquí así y pegarlo y allá vamos. Entonces ahora cuando reviso el recolector de color, he agregado las paletas que realmente quiero tener ahí dentro. De acuerdo, Podría ser más podría ser menos para ti. Entonces empecemos a editar nuestros antecedentes para nuestra página principal. Ahora, antes de que empecemos, hay un par de cosas que quiero que sepas que van a decidir qué tipo de imágenes de fondo que estaremos usando especialmente para ti, ya que vas a tener las tuyas propias página web con tus propios objetivos en tu propio género, nichos, productos, etcétera. Entonces eso es si buscamos obtener la página web de Pat Flynn Ingreso pasivo inteligente, que hemos hecho muchas veces porque es así de bueno. Te vas a dar cuenta de que tiene algo que se llama tonto con diseño. Entonces eso significa que su imagen, su imagen de fondo que resulta ser blanca. Aquí va todo el camino hasta los extremos. Si nos desplazamos hacia abajo, aquí hay otro widget aquí abajo usando un color de fondo negro que va hasta el final. Ahora el contenido en sí es caja. Se puede ver que este encabezado está en línea con este encabezado más pequeño está en línea con este botón que está en línea con esto como aparece en etcétera, etcétera que se llama contenido de caja. Pero el fondo, las imágenes aquí están llenos. Ahora, si nos fijamos en WP principiante dot com, por ejemplo, vas a notar que tienen todo super encajado aquí y no están usando el completo con característica. Por lo que este es un diseño completamente diferente. Entonces eso significa que para nuestro propósito, como vamos a sumar aquí un panorama de fondo grande y bonito, vamos a querer que sea más Horace Santel con el fin de tener este tipo de lleno de look. Y si tuviéramos un look como este, por ejemplo, podríamos querer usar algo que es un poco más vertical. Entonces esto es lo primero que queremos saber antes de seguir adelante con nuestro diseño. Por lo que estos airean tanto grandes ejemplos como sitios web. Ahora, con el fin de encontrar nuestra imagen de fondo a menos que tengas la tuya, vamos a seguir adelante y usar picks obedecen porque aquí hay un montón de bellas imágenes de alta resolución que puedes usar de forma gratuita, no atribución requerida. Por supuesto, si tienes el tuyo propio, puedes usar eso. Y si no puedes encontrar lo que buscas, puedes usar shatter stock dot com. Voy a agregar eso en recurso también está. Pero antes de volver a seguir, hay un par de cosas en las que pensar aquí. Queremos saber sobre el punto focal fuera de nuestra imagen. De acuerdo, entonces si estás usando una foto fuera de ti mismo, quieres saber que esa foto fuera de ti va a estar un poco más centrada, ¿ verdad? Y la razón de eso es cuando empezamos a hacerlo móvil y receptivo a la mesa. Ah, muchos de estos lados van a estar desapareciendo del cuadro. Entonces si es importante que estés en la imagen, quieres asegurarte de que tengas un punto focal claro en esa imagen. Similares. Si tienes un producto o algo así, o alguien que representas Ahora voy a seguir adelante y buscar una imagen que le va a dar una gran sensación cuando vengan a nuestra página web al punto focal no va a ser tan importante. Pero digo que te voy a mostrar cómo hacer las versiones adaptadas y receptivas. De acuerdo, entonces lo primero que voy a hacer es buscar en imagen. Ahora, la palabra clave aquí puede ser cualquier cosa que se ajuste a mí y a Jesper. Estamos haciendo cursos enfocados en negocios y marketing. Pero realmente lo que están haciendo, los beneficios de esos cursos en realidad es crear libertad para dar resultado e inspirar a la gente. Entonces voy a usar una de dos palabras clave aquí. Va a haber libertad. Iba a ser inspiración que quiero que sea la sensación cuando entren a nuestra página web. Entonces vamos años inspiración aquí. Voy a escribir inspiración, y solo voy a seguir adelante y buscar ahí y luego voy a dar clic en orientación y elegir horizontal porque vamos a usar el completo con opción. Y ahora, personalmente, para mí, las fotos que prefiero y busco, es el tipo de imágenes de naturaleza que irán, naturaleza y el paisaje van a elegir eso. Y entonces solo voy a seguir adelante y desplazarme hacia abajo hasta encontrar algo. Ahora, hay un par de buenas opciones aquí, pero lo que realmente me gusta es esta, ¿de acuerdo? Y la razón por la que tanto me gusta este es porque ya puedo ver el contorno que voy a estar usando por lo que podría usar un encabezado aquí. Podría usar una descripción de texto aquí y un botón en algún lugar por aquí. Y porque muchas veces leemos de izquierda a derecha, dependiendo de dónde se encuentre en el mundo, prefiero poner el contenido a la izquierda. Podrías ponerlo a la derecha o en el medio, por ejemplo. Pero con este tipo a la derecha y el sentimiento que produce este predicador, realmente quiero ponerlo en esta zona. Entonces voy a seguir adelante y descargarlo. Siempre quieres asegurarte de la licencia. ¿ De acuerdo? No, atribución Gran libre para uso comercial. Genial, porque esto es de uso comercial. Vamos a seguir adelante y dar click en descarga gratuita y asegurarnos de que no estés descargando la enorme versión. Porque en un mundo de ensueño, no queremos que nuestra página web en sí sea más grande que un par de megabytes movimiento 345 megabytes. Porque cuanto más grande es nuestra página web, más hay para cargar este tiempo de carga del cargador. Peor sdo peor experiencia de usuario. Entonces vamos a ir por esta talla en lugar de esta talla porque mira la diferencia de talla que es enorme. Entonces y no va a haber pérdida de calidad usando esto. Entonces vamos a ir por esta calidad y todavía vamos a tener a Sush Has estado siguiendo el curso para ayudarnos. Entonces voy a seguir adelante y dar click en descargar ahí mismo y luego voy a volver. Entonces aquí, voy a ir a los elementos. Ahora lo primero que hay que notar es que aquí no pasa nada. Para que yo consiga una sección en la que trabajar, en realidad necesito usar un elemento digital y sacarlo. Déjalo caer. Y ahora de repente tengo una sección que va por aquí. Tengo una columna aquí y dentro. Se llama él. Tengo el elemento y ese es este texto. No, no vamos a estar trabajando en el título en esta conferencia. Eso será para la próxima conferencia. Ahora, con el fin de empezar. Lo que vamos a hacer es ir al medio aquí donde dice y es sección y vamos a dar click en esa. Y ahora somos capaces de editar toda esta sección. Entonces lo primero que vamos a querer hacer es pasar al estilo. Aquí hay muchas opciones. Vamos a pasar por ellos, pero llenemos nuestro propósito. En primer lugar, vamos a ir al estilo y luego al fondo y luego a dar click en Normal porque pasa el cursor, recuerda esto cuando pones el ratón encima Así vamos a ir al tipo de fondo normal y vamos a dar click en Clásico, y luego voy a hacer clic en el plus allá, y sólo voy a ir a subir archivos y voy a seleccionar ese archivo y subirlo y ahí iría, Está subido. Voy a seleccionarlo y dar clic en insertar medios. Entonces, mirando a la izquierda aquí, podemos ver que esta es la imagen es realmente genial. Me encanta el sentimiento que produce. Pero como puedes decir, realmente no está dando los resultados que buscamos, ¿ verdad? Entonces la sección en este momento es simplemente demasiado pequeña. Si me dirijo hacia abajo y hago clic en los cambios de vista previa, podemos ver que casi dos pies de página Y estos bien se supone que la imagen de fondo son del mismo tamaño. No creo que esto sea justo para Bueno, no sería un orgulloso diseñador de sitios web con este resultado. Entonces lo que vamos a hacer es que vamos a volver a diseñar, y vamos a aumentar el tamaño de la sección para que podamos tener Esta es una imagen de fondo . En otras palabras, lo anterior el fondo de pliegue, este signo. OK, entonces vamos a ir a la altura aquí donde se dispuso y luego vamos a escondernos. Y luego vamos a cambiar de la falla a una altura mínima así. Y el beneficio con esto es que se llega a elegir la altura tú mismo, acuerdo? Entonces como puedes ver, más me desplazé más grande o más que más altura obtenemos ahora, la imagen aún no tiene tamaño pero estamos consiguiendo más altura para que la imagen esté dentro esta sección. Entonces voy a ir con ahora. Creo que hay un poco grande voy a ir con 700. Por lo general es una buena. Simplemente podemos seguir adelante y dar click en los cambios de vista previa para ver cómo se ve. Podemos ver que cubre todo. Oh, tan bien, realmente amando esto. Ahora podemos decir que la resolución no es como se supone que debe ser. Entonces vamos a volver y vamos a cambiar la resolución de ella. Vamos a volver al estilo aquí dentro, y luego vamos a bajar al tamaño, ¿de acuerdo? Y vamos a pasar de default a cover, así que ve la diferencia que esta hace ahora La portada significa que va a cubrir La imagen va a cubrir toda la sección ahora mismo. Si estuviéramos usando algo más como contener, entonces la imagen estaría conteniéndose a sí misma, lo que significa que mantendría su tamaño. Y quizá no se desvaneciera también. Es así. Si lo uso así, se puede ver que tiene se está duplicando abajo de la cabeza aquí porque está teniendo una solución diferente. Entonces básicamente, cada vez que agrego una imagen de fondo, siempre voy con portada. Siempre, siempre. Y obtenemos un look realmente bonito así. Puedo pasar hacia abajo para previsualizar los cambios, y podemos ver que las cosas se ven realmente hermosas. A mí me encanta esto. De acuerdo, así que en realidad tenemos un buen comienzo pasando aquí. Ahora vamos a pasar por un par de opciones diferentes. Te voy a decir cuáles son, y luego vamos a añadir algunas cosas adicionales para que esto se vea aún mejor. 11. Fondo parte 2: Entonces si empezamos el diseño, aquí hay un par de opciones. Vamos a pasar por la mayoría de ellos porque vamos a usar tantas preguntas, vamos de todos modos. Y entonces esta conferencia sería de 50 minutos en lugar de mantenerla un poco más baja. Mucho más bajo. Esperemos. Por lo que el 1er 1 es una sección de estiramiento. Ahora bien, no me quedo con esto porque prefiero ponerlo yo mismo. Y por qué te voy a mostrar en un poquito bajando. Tenemos el contenido con cómo queremos que sea el contenido. O podríamos tenerla caja. Podríamos tenerlo lleno con ahora. Recuerda te dije que tanto Pat Flynn como principiante WP tienen su caja de contenido, lo que significa que dejan un poco de espacio a un costado. Si nos fijamos en la vista previa, puede ver que hay un espacio pasando de este lado aquí mismo. ¿ Verdad? Entonces si cambio esto para engañar en su lugar y hago clic puedo previsualizar, vas a ver que este texto va a saltar todos los pesos. Tú la izquierda aquí porque ya no está en caja. Entonces lo que prefiero hacer es usar imágenes de fondo de tamaño completo pero caja mi contenido. Entonces voy a mantener esta caja para mantener todo más en línea y más profesional. También va a transferir mucho más por la capacidad de respuesta fuera de tabletas y celulares. Y entonces tenemos el llamado brecha. ¿ Quieres tener algún hueco en nuestras columnas? Podríamos venir a usar esto ya que agregamos en columnas mawr y más elementos. También tenemos la altura mínima. Podríamos tener pies para cribir. Podríamos tener la culpa. Ahora los pies a pantalla por lo general no funcionan tan bien porque no coincide. Por lo que prefiero usar la altura mínima lo dijo yo mismo y luego también podemos dar click aquí, ¿ verdad? Por lo que ahora también puedo bajar a la versión de tablet y ver cómo se va a ver el fondo . Y es por eso que el punto focal es tan importante que te hablé porque si, por ejemplo, este tipo también de aquí fuera poco importante o parte integral de este diseño, entonces me decepcionaría bastante saber que ni siquiera es incluido en la versión tablet. Por lo que es tan importante que te asegures de que conozcas tu punto focal y asegúrate de que puedas centrarlo más para que podamos adaptarnos a la versión de tablet y a la versión de teléfono celular . Pero lo que también podemos hacer aquí es hacer que estos sean más receptivos personalizándolos nosotros mismos. Ahora mismo, puedes ver que si quieres la imagen completa, no llegamos a cubrir toda la pantalla. Entonces esa va a ser tu propia decisión. ¿ Cómo quieres diseñar eso? A lo mejor eso no es importante, pero en realidad prefiero cubrir más la pantalla. Entonces voy a ir algo así. Por lo que todavía se ve mejor que el anterior porque tienen casi mucho más asumido en. Pero no lo muestra todo, pero con éste desde el punto focal, o la imagen es un importante más allá de la sensación que está completamente bien. Ahora, también tenemos el celular pasando aquí. Se puede ver la tolerancia. Ves, es un es un globo de aire. No muy impresionante, honesto reventa capaz en este derecho. Pero la imagen en realidad se ve realmente hermosa, pero todavía quiero cambiar esto un poco ahora. Si sigo adelante y lo hago así, puede ver que el globo aéreo tiene un papel mucho menos central en este momento. Obtienes toda esta vista y todo, todavía tienes la sensación. Por lo que es tan importante asegurarse de que todo se vea bien en la tableta y en el celular. Y vamos a ir a tener un par de estos recorridos preguntados. Vamos a la derecha es una parte tan importante del diseño. Entonces tenemos estos y luego también tenemos la posición de columna. Ahora, recuerda, esta es la columna. Este es el texto. Volvamos a estas cosas. Ahí vamos. Entonces ahora mismo está en medio y lo vamos a mantener ahí porque aún no vamos a estar jugando con el título, Pero podemos moverlo a la cima va a chocar ahí arriba. Podríamos moverlo al fondo. Lo vamos a mantener en el medio ahora. También tenemos la posición de contenido justo donde queríamos estar. Si esto se debe asumir en, por ejemplo, si quisieras enfocarte en el fondo medio superior, etcétera para asegurarnos de que fijamos cuáles son la prioridad, generalmente dejo esto por culpa. Y luego tenemos desbordamiento y generalmente no vas a estar usando el desbordamiento. Ahora, el desbordamiento va a ser si arreglas alguna usando sus llamados valores fijos o absolutos. En otras palabras, si vas a poner, por ejemplo, un colillas aquí que se va a quedar contigo todo el tiempo, no importa cómo muevas la pantalla o en qué plataforma estás ahora, el problema con es decir, a veces se rompe el tema o la pantalla. Cuando cualquier tarea es llamar al desbordamiento, puede moverse fuera del cuadro de contenido, por ejemplo. Entonces si pones esto a escondida, por lo general va a cuidar de eso. Pero esa es una característica tan avanzada que no vamos a usar esto. En realidad no creo que en general contribuya tanto, Correcto. Entonces vamos a pasar por el estilo aquí arriba, y ya fijamos nuestros antecedentes. Ahora hay más tipos de fines de semana de fondo podemos usar un impacto codicioso de. Podríamos estar jugando con los colores usan los colores de los ingredientes, lo que significa que usamos diferentes colores para desvanecerse el uno en el otro y también chicos interesantes. Podemos agregar un video de fondo como vimos en algunos fuera de las plantillas antes. Ahora es súper fácil. O podemos seguir adelante y agregar en un enlace de video o vamos a nuestra mediateca y simplemente agarramos el enlace desde ahí. Realmente no importa. Y funciona exactamente de la misma manera que cuando usamos la imagen de fondo, la diferencia es que vamos a establecer una hora de inicio y en la hora de fin. Y también podemos tener un fondo retroceder. Y como puedes ver, descubriendo cuál reemplazará la parte posterior del video en dispositivos móviles y tabletas en general porque no pueden manejar el video, va a lenguaje no se va a quedar bien porque la resolución no se alimenta. Ya viste lo que le pasó a la imagen, ¿verdad? Entonces va a ser una llamada retroceso de fondo, y luego tenemos la opción de flotar es algo interesante va a pasar mientras nos ponemos boca encima. Entonces si sabes agregar una imagen de fondo es realmente lo mismo con un video de fondo , tienes que establecer la altura mínima. Tienes que asegurarte de que todo esté contenido. Todo se ve bien realmente igual y después agarró un enlace de YouTube o de tu mediateca. ¿ De acuerdo? Y ese es el trasfondo. Vamos a volver a nuestro clásico aquí dentro, desplazándonos hacia abajo. Tenemos la posición, ¿verdad? Podemos decidir. Queremos que el puesto sea. Cuando se trata de esto, la sección podríamos tener su centro, centro, centro inferior. Podemos tenerlo a la parte superior derecha, etcétera, etcétera. Y esto va a ser importante cuando se trata de la pantalla de tu producto. Cuando se trata de tu, por ejemplo, persona a la que estás representando aquí. ¿ Recuerdas? Estaba hablando de eso antes. Entonces si tienes, por ejemplo, una persona aquí en el medio y quieres que esa persona esté enfocada y cuando tenía un poco de texto sobre lo que podrías hacer es echar un vistazo a la versión móvil. Basta con dar click aquí, entra ahí. Y luego podríamos cambiar esta pantalla por defecto. A lo mejor ir a este centro centro y ya ves, obtenemos una mirada completamente diferente, ¿ verdad? Podríamos decir que éste, se ve mucho, mucho mejor ya. Podríamos tener la parte inferior derecha, y luego conseguimos a ese tipo o podríamos tener la parte inferior izquierda. El parte importante es que queremos conocer a nuestro punto focal. ¿ De acuerdo? Porque el punto focal va a ser donde establecemos esta posición para que el producto esté siempre en foco independientemente del tamaño de discreto. ¿ Qué dispositivo? Están usando una tableta en su escritorio en su celular. Ya sabes, tal vez bajo oclock en el futuro. No sé qué es, pero queremos asegurarnos de que lo que pretendemos mostrar aquí va a estar mostrando bien. Y si no importa, como en nuestro caso, podemos mantenerlo en defecto. Pero de lo contrario realmente necesitas cambiar estos y hacerlos coincidir. Y entonces tenemos el apego. Si quieres tener un pergamino, queremos tenerlo arreglado como si fuera a estar quieto todo el tiempo. Esto es esto no se va a mover como bien. Entonces si me desplazo aquí, ves que en realidad nos estamos desplazando dentro de esta imagen. Pero si lo tengo en pergamino así, se puede ver que somos las imágenes estando con el pergamino, por así decirlo. Y luego tenemos una versión repetida y no vamos a tener ningún uso Self. Vamos a dejarlo por culpa. Tenemos el tamaño que decidimos en la portada. También podemos usarlo en contención o personalizado o pedido o predeterminado. Pero en realidad, si quieres tener una imagen de fondo que cubra todo, vamos a ir con portada y luego tenemos el fondo Overly. Esta es una característica tan increíble e interesante. Ahora, lo que podemos hacer aquí es ponernos en superposición sobre todo este fondo. Entonces, en otras palabras, podemos asegurarnos de que estamos, por ejemplo, haciendo más oscura una imagen. Podríamos hacer un cuadro más ligero. Podríamos incluso combinar imágenes. Entonces obtenemos este bonito efecto de desvanecimiento o como vamos a hacer en este caso, vamos a ponernos superposición ahí va a coincidir con nuestra paleta de colores de nuestro logo. Entonces echa un vistazo a esto. Vamos a seguir adelante con el tipo de fondo, y vamos a ir con el clásico y no voy a añadir una imagen. Yo sólo voy a ir con el color aquí, y luego voy a seleccionar a esa bruja roja es nuestra. Y como se puede notar, hace que toda la imagen sea roja. Pero echa un vistazo a esto. Ahora bien, si lo muevo todo el camino hacia abajo, eso significa que no se agrega nada de por favor capacidad. Pero si añado un poco, podemos ver que actualmente, el tema es bastante azul. Pero si añado un poco así, se puede ver que las cosas empezaban a ponerse un poco más rojas. Y eso es algo tan asombroso, porque eso va a encajar con nuestro tema. ¿ Verdad? Entonces echa un vistazo a esto. Se ve tan natural conocer lista. Y si quito este filtro ahora, este fondo excesivamente, podemos decir lo oscuro y soplado que es como negro y azul. Entonces todo lo que necesitamos hacer es simplemente agregar una ligera capacidad como esa luce sobrenatural. Y de pronto el sitio web se vuelve mucho más profesional porque lo estamos haciendo coincidir con nuestra paleta de colores es donde el pick color que viene de mano también, porque simplemente podemos ir instantáneamente y agarrar nuestro color que escogimos del logo. Entonces esto es realmente perfecto. Y esa es la superposición de fondo. También puedes hacer con el flotante si quieres, y hay más cosas que puedes hacer. Puedes usar algo que se llama Filtros CSS. No vamos a usar ese tipo de características fuera de aquí. Puedes usar un modo de mezcla, que va a ser como plantillas para diferentes mezclas. Tampoco vamos a usar esos. Al igual, hay muchas opciones aquí dentro. Tenemos las fronteras y las fronteras básicamente van a ser las fronteras alrededor del propio tramo . Entonces si agrego un llamado borde sólido así y luego agrego el con para 50 ahora estos están todos encadenados juntos. Se puede ver que consigo esta pizarra o por todas partes y lo que podría hacer con eso es que podría cambiar el color. El borde, por ejemplo, lo ha puesto en este azul. Ahora bien, esto no se ve muy bien. A lo mejor si quieres agregar algún efecto de fondo de pantalla algún efecto de imagen o algo así, Pero solo para que sepas que puedes jugar con esto. También puedes usar los efectos de flotar para que cuando pongas el ratón encima, obtengas este pequeño. Este diminuto tipo de frontera crea este efecto tres D, pero vamos a pasar por eso más tarde, así que no te preocupes por ello. Realmente no vamos a estar usando esto. Yo solo quiero que sepas cuáles son, que no te estreses sobre ellos a medida que vamos. Entonces no vamos a estresarnos por este. Voy a quitar esto por rapacidad. Se irían y no voy a poner esto a nada. Ahí vamos. No queremos que siga ninguna frontera. Y con la frontera, también tenemos una sombra que no podemos. Vamos a cerrar éste ahora que tenemos algo que se llama divisor de forma. Ahora, los divisores de forma realmente interesantes porque a medida que vamos, vas a notar que esto puede hacer que tu sitio web realmente se vea profesional y poner un hermoso diseño. Pregúntale la transición de una sección de la anterior, la completa a algo debajo del pliegue. Entonces, por ejemplo, podemos seguir adelante y podríamos usar las nubes. Y ahora estamos usando las partes superiores. Como se puede ver, este muchos se está fundiendo en las nubes se está fundiendo en esta sección. Crea un realmente bonito y hermoso Bueno, lo llaman divisor, y hay un montón de cosas diferentes que podemos hacer con él. Podemos personalizarlo así. Cuánto queremos mucho querer demandar, quizá no lo sea. Son muchas cosas que podemos hacer. Nosotros también podemos cambiar . Ciertos triángulos, ondas. Hay muchos efectos diferentes. Podemos agregar cierta altura de color. Podemos ponerle una voltereta, ¿verdad? Invertir, llevar al frente. Es un montón de cosas que podemos hacer, y de igual manera, podemos hacer lo mismo en la parte inferior. Y si no quieres ninguno, todo lo que tienes que hacer es dar click a desconocido y no tendrás ninguno. A veces con L. Un mentor. Por alguna razón, el divisor de forma se ve hacia arriba así. Ahora todo lo que tienes que hacer es dar click en actualizar para asegurarte de que tienes todos tus cambios guardados, y luego actualizas la página y vas a ver que este divisor que quitaste realmente se va a haber ido. Entonces ahí está. Se ha ido por completo. Entonces lo voy a hacer es dar click aquí y subir y terminó la sección aquí arriba así que continuando en el estilo hemos pasado por la división de forma. Y finalmente tenemos la tipografía y no necesitamos tocar la tipografía porque ya fijamos nuestros valores globales para los correctos, así que no hace nada. Tenemos que hacer aquí. Y finalmente tenemos las características avanzadas que puedes hacer muchas cosas como puedes agregar en ciertos afectos de emoción puedes agregar en respuesta para esconderte en ciertas plataformas como puedes ocultar ciertas cosas en tus celulares, cómo ciertas cosas con una tableta con el fin de que el diseño se vea mejor. Pero vamos a pasar por esos traseros. Nos acercamos más en el apartado avanzado. Entonces en este momento estoy súper feliz por el fondo. Creo que se ve realmente bonito, limpio y profesional. Y si bajamos y hacemos clic en los cambios de vista previa ahí mismo, podemos ver que esto es actualmente lo que hemos agregado a nuestra página web, y estoy muy contento con eso. Esto va a ser fenomenal y se dio cuenta de esta superposición rojiza pasando a gustarle realmente esto . Entonces pasemos a la siguiente conferencia y empecemos a editar nuestro titular. Correcto. ¿ Cuál va a ser éste? Vean su ahí, chicos 12. Cargo: Muy bien, chicos, diciendo esta conferencia, vamos a ir y poner el rumbo para el orden del sitio web. Más bien el título que queremos vencer mostrando aquí. Entonces si miramos nuestro logo, dice Robin y Jesper cursos para cambiar tu vida para que no queramos usar esos cursos para cambiar tu vida. Vuelve a eslogan. Más bien, queremos ser más descriptivos fuera. De qué se trata los cursos. De lo que estamos ofreciendo ese tema, Nique. Entonces permítanme mostrarles un ejemplo aquí. Ahora bien, si vamos a Pat Hue y su trabajo es que un punto de ingreso pasivo inteligente com? Podemos ver que escribe. Déjame ayudarte a construir un negocio en línea impulsado por el ingreso pasivo. Entonces eso es lo que está ofreciendo. Se está ofreciendo para ayudar. Me perdiste para construir un negocio en línea impulsado por ingresos pasivos directamente al ponche. Sabemos lo que estamos consiguiendo aquí. Ese es el tipo de descripción que buscamos en nuestro rubro, ¿no? Si vas a wordpress principiante también, dice Guía para principiantes para WordPress. Inicia tu WordPress Blawg en minutos. Esto es realmente impresionante. Y esto es realmente bueno, porque sé lo que estoy recibiendo. Sé de qué se trata la página web. No hay confusión. Entonces esto es exactamente lo que buscamos. Entonces, ¿qué? Voy a seguir adelante y hacer aquí, y creo que debes seguir el ejemplo con tu sitio web y con tu propio título es dar click en este encabezado aquí. Y luego vamos a cambiar las tomas y voy a escribir algo así como negocios hechos Fácil . Permítanos mostrarle cómo. Y ahora podemos ver que todo aquí está escrito en una fila, ¿ verdad? Porque sólo tenemos una columna y ellos los llaman. Es realmente sabio. Todo. Todo el texto sale mucho tiempo así. Pero en realidad voy a separar esto para que bajemos este fragmento de texto si se ve bien. Pero al menos por ahora, eso es lo que quiero hacer. Pero eso se lleva a sí mismo. ¿ Se hacen negocios fáciles las cartas te muestran cómo es así? Lo que estamos prometiendo aquí es que queremos asegurarnos de que el negocio el negocio que aquí estamos ofreciendo sea fácil Negocio hecho fácil. Déjanos mostrarte casa. Estamos ofreciendo ayudarles a hacer el negocio fácil. Y creo que mucha gente por ahí se siente como que los negocios son complicados. El negocio es duro y nos enorgullecemos de pedir a los maestros que hagan cosas complejas simples. Y de verdad espero que ustedes sientan lo mismo. Entonces tenemos nuestro eslogan que dice Cursos para cambiar tus derechos de vida. Ya sabemos que se trata de cursos Robin y Jesper. Y luego tenemos negocios hechos fáciles cartas te muestran cómo, que es un realmente cool el título o descripción fuera de lo que estamos haciendo. Tratando de resumir eso todo en uno. Entonces empecemos a editar esto un poco, ¿verdad? Entonces lo primero que voy a querer hacer es hacer esto más grande. Entonces voy a dar click en el pliegue y voy a dar click en X l para hacer así. Mucho más grande. Ahí vamos. Esto ya se ve mucho mejor. Y luego cuando se trata de etiqueta HTML, voy a mantener esto en la edad de dos años. Y la razón de eso es que si lo mantienes en H one, que es naturalmente más grande, eso va a estropear el motor de búsqueda porque el buscador está buscando una descripción fuera de tu página web de H one. Por eso quiero mantener la mayor parte del contenido sobre la edad para que esté bien, vamos a pasar por la sección de CEO de esta mañana. Entonces, ¿quieres mantenerlo hasta los dos años a los seis años? Voy a dejar esto a los dos años y voy a tener la alineación a la izquierda por ahora. Esto podría cambiar a medida que avanzamos. Aquí no hay preparación en cómo voy a hacer este título. Este es el culo fichaje que vamos, que es probablemente lo que vas a hacer con tu sitio web también o con más sitio web que pueda venir a tu manera. Entonces esto es muy educativo. Y entonces podríamos pegar en un enlace aquí si queremos enlazar a algo. Pero no vamos a hacer eso. Nosotros sólo queríamos ser descriptivos. Pasemos al estilo aquí arriba Ahora aparecen con estilo. Vamos a hacer algo importante. Vamos a cambiar el color de las tomas ahora, Como puedes ver, tenemos un fondo bastante oscuro, ¿de acuerdo? Y también tenemos estas superposición frontal trasera roja, que es hermosa, pero el negro toma simplemente no está funcionando. Y es por eso que estoy tan contenta de que seleccionamos son paleta de colores. Porque lo que voy a hacer es seguir adelante y dar click aquí y luego voy a seleccionar blanco. Ahora, echa un vistazo a esto. Chicos de este papa, esto se ve mucho mejor. Y es por eso que los valores globales son geniales y nosotros van a ser muy prácticos cuando estemos editando. Pero también vamos a estar cambiando las cosas en el camino. Entonces como podemos ver, este blanco lo lleva se ve hermoso adentro y hace que las cosas estallen a lo grande. De verdad me está gustando esto. Si vamos a la tipografía aquí dentro, no vamos a cambiar el teléfono. Eso, quiero decir, eso es que ya está establecido. Pero no podemos cambiar más el tamaño así si quisiéramos. Voy a ir con algo como esto. Yo quería bastante grande, ¿verdad? El peso. Esa va a ser la audacia que ya hemos puesto de que no la voy a usar. Pero la transformación es realmente importante, al menos en este caso, porque quiero usar esto en mayúsculas. Entonces mira este título y asa usa letras mayúsculas. Se puede ver que este papa es mucho más. Esto está mucho más fuera de un título ahora mismo fuera de un encabezado adecuado. También podrías estar usando algo como minúsculas o por defecto normal en mayúsculas. Pero realmente disfruto usándolo con la mayúscula. Tenemos estilo. Si quieres usarlo en cursiva, por ejemplo, quieres usar en un oblicuo Hay muchas opciones diferentes que podemos usar en lo normal. Simplemente lo guardo en el teléfono porque lo predeterminado es general es lo normal. No quiero hacer nada con esto. A mí me gusta este estilo bastante estable pasando aquí mismo. Entonces podemos decorarlo con una línea. Pero no vamos a hacer eso. No lo vamos a hacer esponjoso, ¿verdad? A mí me gusta limpio. Podemos seguir adelante y cambiar la longitud de la línea aquí. Como pueden ver, estamos afectando la llamada que están pasando. Simplemente voy a golpear conjunto común para restablecerlo alrededor, hazlo y luego podemos jugar con el espaciado de letras. Pero honestamente, eso normalmente destruye la fuente o tampoco vamos a jugar con eso. Voy a dar click en mando y dicho por indebida Ahí va voy a presionar este hacia abajo. De verdad me está gustando esto hasta ahora. Y entonces también podemos sumar en un disparo a la sombra. Nosotros queremos hacer eso ahora. Generalmente no soy un gran fan fuera jugando con sombras y jugando con este tipo de efectos . Si me gusta lo que veo, que hago en este momento. Entonces en realidad no voy a hacer nada con esto. Si quieres jugar con Shadow, puedes seguir adelante y agregar un color puede ser un color más oscuro. Podría ser una paleta de colores. Y luego sólo tienes que seguir adelante y jugar con lo borroso, lo horizontal, lo vertical. Y vas a notar el cambio justo que hace en segundo plano aquí mismo. Se lo puede ver pasando y lo dijo como quieras. Voy a dar click en volver a default porque no quiero usarlo en absoluto que tenemos el modo blend y el modo blend va a ser como plantillas y no vamos a estar usando en el templo está pasando porque ya lo hemos dicho o en color, derecho. Si gritas, por ejemplo, eso va a agregar cierto efecto por diferencia de uso, eso va a agregar cierto efecto, lo voy a mantener en normal, y luego podemos pasar a avanzado en él . Aquí es donde las cosas empiezan a ponerse un poco interesantes porque aquí podemos cambiar los márgenes, como vimos antes también. Entonces si dije los márgenes a 50 llego a ampliar toda esta columna. Por lo que obtienes un poco más de opciones, no solo de cómo y dónde estás poniendo las tomas, sino también para las otras columnas están alrededor. Entonces vamos a estar jugando con este. Estamos terminando estos homepage un poco más hacia el final. Cómo queríamos lucir y luego tenemos el relleno es que podemos cambiar también, lo cual tiene un efecto similar. También tenemos el dicho índice CSS clase CSS y esto es todo para la codificación. No vamos a estar usando ninguno de estos. Y aquí dentro tenemos cosas como efectos de movimiento y efectos de movimiento. Se pueden entregar, como pueden ver, si pudiera debilitarme, desvanecerse aquí, por ejemplo, vamos a conseguir cierto efecto en estos palos. Entonces si hago clic en desvanecerse, vamos a conseguir ciertos efectos. Si voy abajo y previsualizado, podemos ver qué va a pasar cuando se cargue el sitio. Entonces este es el anterior y aquí es donde estamos en este momento. Y así es como aparece el texto. Ahora, lo que no me gusta con esto es que tipo de quita a la experiencia del usuario. En mi opinión, si encaja con tu diseño, utilízalo absolutamente. Es decir, puedes hacer algunas cosas realmente impresionantes con esto, pero las prefiero o limpias. Mira, quieres entrar a la página web, ¿quieres agarrar la información que buscas? Quieres tener una experiencia agradable y luego seguir adelante con tu vida en general, Y la mayoría de las veces, estos efectos van a ocupar espacio. Entonces no voy a jugar con ellos aquí porque me gusta este look limpio y no siento que vayan a aportar. No te limites. Juega con ellos tanto como quieras. Vas a tener ojo para esto. Definitivamente. Entonces voy a dar clic abajo movimiento para arreglar eso. También tenemos antecedentes. Y recuerda, ahora estamos trabajando con esta columna. Entonces cualquier fondo, por ejemplo, color de fondo que estoy agregando. Va a haber dentro de esta columna. Entonces esta es la sección Esta sección es realmente grande en este momento. Lo hicimos enorme. Y dentro de la sección, tenemos la imagen de fondo y la perspicacia de estas secciones. Tenemos los llamarlos. Hemos pasado por esto antes y dentro de esta columna. Puedo cambiar el color. Entonces mira esto, por ejemplo. Ahora hice del color el color de fondo fuera del llamativo El negro se ve terrible. Voy a dar click en claro, y no voy a usar eso. Pero quiero mostrarles que se puede. Entonces el efecto Harbury. También es muy interesante porque si uso el efecto puerto, por ejemplo, y entro y agrego un color, digamos que voy a añadir un color grisáceo así, algo así. Entonces, ¿ahora qué? Coloco el ratón sobre. Se puede ver que hacemos que estos efectos sigan adelante, y esto no se ve dos noches en este momento, pero en realidad se puede hacer que las cosas se vean realmente bonitas. Especialmente más adelante en las canchas. Cuando empezamos a sumar en la sección de cursos y pasas el ratón por encima, quieres tener este efecto hover porque hace que todo se vea mucho más profesional . Pero no lo vamos a usar para la página principal de esta sección en este lugar. Entonces voy a dar clic, poco claro, voy a dar clic a éste hacia abajo y voy a derrumbar el fondo que tenemos Fronteras y fronteras igual que antes. Se pueden cambiar los bordes seleccionando primero uno como este sólido podemos agregar en un número y luego se obtiene un borde alrededor de la columna. ¿ Dónde está antes? Nos dieron una frontera alrededor de la sección porque estábamos editando en la sección, pero no vamos a estar usando esa aquí. Voy a presionar este en non s Bueno, pero la frontera es muy similar así. Entonces tenemos posicionamiento personalizado, y en este momento estamos usando default, ¿ verdad? Podríamos hacer algo así como lleno con, como, te he mostrado la diferencia con full with. Va a ocupar mucho más espacio y hacer las cosas muy diferentes. Pero también podemos usar el posicionamiento, ¿no? Por lo que la posición podría ser algo llamado absoluto. Ahora bien, si lo usaba, es como absoluto. De hecho soy capaz de arrastrarlo y soltarlo así, y eso significa que se va a quedar ahí en la pantalla. El problema con estos jugaría con este tipo de absoluto y fijo que es que estos normalmente no van a ser muy receptivos. Por lo que prefiero simplemente mantenerlo a la culpa y no jugar con el posicionamiento personalizado porque estropeó esto. El grado de respuesta para la tableta, para el celular y para su sitio web a veces. Pero también hay con la función de desbordamiento va a evitar que esto se estropee demasiado . Generalmente, recomiendo mantenerlo simple y permitir elemental y permitir que tu tema lo haga bueno dentro de las fronteras. Eso es así que vamos a colapsar posición personalizada y luego tenemos parte responsive y responsive es realmente interesante porque si miramos en este momento y sabemos que estamos editando esta columna a la derecha con este elemento. Entonces si hago clic por ejemplo en ocultar en laptop aquí y hago clic en esto para ocultar y ahora previsualizo los cambios, vas a ver que este texto va a desaparecer, ¿ verdad? Por lo que en realidad no es superior en el editor, pero desaparece para el cambio final en el modo de vista previa, y puedo hacer lo mismo en las tabletas. Entonces si uso una tableta y bajo a responsable y voy a tablet. Esto no se va a mostrar para los que tienen una tableta, sino que va a mostrar para los que tienen un móvil. Esto no se ve en elemental, pero ese va a ser el efecto cuando la gente está entrando a la página web desde el celular o tableta como lo hicimos en un adelanto. Ahora, lo interesante, lo realmente bueno con esto es que puedes editar las cosas para una pantalla mucho más limpia, ¿ verdad? Entonces si no me gusta esto toma, no quiero que esta toma se muestre en el celular. Podría simplemente hacer clic en esconderse en Mobile y entonces esto no va a mostrar para las personas que ingresan a la página web en su celular. Pero si lo entras en la tableta o si entraste en el escritorio, mostrará la parte realmente, realmente mala con esto, sin embargo, sin embargo, es que esto todavía se va a cargar, ¿ verdad? Y el problema con eso es, es que en lugar de hacer algo de personalización para que se vea bien, simplemente lo eliminamos. En general, solo lo va a ocultar cargado, pero no mostrarlo, lo que significa que va a ralentizar tu sitio web si usas mucho esta función. Entonces si agregas en una enorme imagen bonita, por ejemplo, para escritorio en Lee y luego haces clic en Alturado Tablet y Móvil, eso significa que aún se cargarán en el Talbot y en el móvil. Y eso va a ralentizar el tiempo de carga a pesar de que no se esté mostrando. Entonces usa estos realmente con moderación, ¿de acuerdo? Y luego finalmente, tenemos la costumbre. Ves, dice, pero esa es una característica pro, y de todos modos no vamos a estar usando eso. Entonces si volvemos al contenido, tenemos que volver al modo escritorio, podemos ver que así es como se ve en este momento. Entonces si quiero tener este salto hacia abajo, solo necesito dar click aquí y salta por sí mismo. Entonces si quiero que esto toma para saltar hacia abajo, solo necesito dar click aquí y golpear enter, derecha. Entonces si golpeo enter, puedes ver que soy capaz de hacer espacios como este. Pero no quiero tener este pequeño espacio que realmente hice aquí. Entonces vamos a hacer eso una vez más y voy a pegarle en Entrar aquí y ahora conseguimos una mirada mucho más agradable. Por lo que no quieres pegarle entrar aquí como lo hice yo. Eso es un error de novato al escribir demasiado rápido. Quieres seguir adelante y golpear entrar dentro de la caja para hacer que salte por una parte. Entonces esto se ve realmente bien. me está gustando ahora. No me gusta la posición ideal para esto. Si usted sigue adelante y podríamos venir cambios de vista previa, por ejemplo, podemos ver que se va a estar mostrando en algún lugar en el medio Negocio hecho fácil. Permítanos mostrarles cómo quería estar más arriba. Yo quería estar en algún lugar por aquí. Pero para conseguir eso, tenemos que hacer una de las siguientes cosas. Tenemos que ir a los elementos y nos vendría bien algo así como un espaciador. Si añado un espacio o abajo aquí, puedo cambiar el tamaño de ese espaciador y puedo ponerlo arriba en la posición que yo quiera. Pero la cosa es que vamos a estar agregando más cosas ahí dentro. Vamos a estar agregando cosas como podríamos querer usar un subtítulo, podríamos Vamos a querer usar una descripción, y vamos a querer usar una llamada llamada a la acción inferior. Y todas estas cosas se van a cambiar en las posiciones fuera de éstas, por ejemplo, fuera de este título fuera de la descripción fuera del subtítulo, etcétera. Entonces voy a dejar esto aquí por ahora. Y luego a medida que avanzamos, voy a seguir cambiando las posiciones y agregando elementos como le pidió al espaciador los convirtiera en este lugar que yo quiero que sean. Pero una vez más, chicos, es como se ve en este momento, toda la personalización que realmente necesitábamos hacer aquí era hacer el texto blanco es hacer un espacio en el texto y luego asegurarnos de que haya un buenas tomas pasando aquí porque voy a poner esto aquí arriba algo, y luego voy a tener la descripción y voy a tener un llamado a la acción abajo. Y podría incluso aumentar el tamaño de esto. Veremos a medida que vamos, cómo encaja con el resto fuera del diseño. Pero esto es lo que me he conformado hasta ahora. Espero que ya sepas crear el título muy bien. Y como siempre, si tienes alguna pregunta, adelante y habla con nosotros. Estará en la Q y A y un recordatorio final. No hagas como lo hice y golpeaste el espacio aquí dentro. Quieres dar click aquí y quieres golpear el espacio aquí dentro, ¿ verdad? Así es como saltas correctamente. Perdón por eso. Entonces, chicos, veré en la próxima conferencia. 13. DESCRIPCIÓN: Está bien, chicos. Entonces en esta conferencia, vamos a seguir adelante y establecer nuestra descripción. Ahora, una descripción va a ser la pieza de texto que está debajo del título o del encabezado. Puedes usar esos indistintamente. ¿ Cómo lo llamas? Un título o un título. Ahora, si vamos a revisar una vez más a Pat Flynn, podemos ver esto. Aquí se presenta su descripción, y nos está diciendo exactamente lo que va a estar haciendo. Hice para mostrarte a través de mis propios experimentos. Exactamente lo que podría dejar de operar tiempo por dinero y empezar a construir un basado en que funcione para usted. Yo estoy aquí para mostrarles cómo funciona. Ahora. Esto encaja tan bien. También que dice Hola, soy Pat Flynn porque sí tiene una foto fuera de sí mismo. Ahora lo que queremos hacer es explicar más a fondo, qué vamos y qué estamos haciendo. Pero al mismo tiempo, tenemos una cantidad limitada de espacio. Ya está usando bastante espacio o bastante texto. Y no esperamos que todos estén leyendo esto por el punto de atención. Por lo que recomendé cortamos en esto un poco hacia abajo y luego dejaremos un poco para ser descubiertos. Por ejemplo, está escribiendo. Yo estoy aquí para mostrarles cómo funciona. Eso me hace querer presionar el botón que dice aprender más, correcto. En la próxima conferencia vamos a crear nuestro propio botón con un llamado a la acción. Ver, ta. Ahora el aprender más. Aquí está el llamado a la acción porque te inspiraste, pero toma Quieres aprender más. Entonces lo que vamos a seguir adelante y hacer es ir a nuestra página web que estamos creando y solo echar un vistazo rápido ahora mismo se ve así, y vamos a poner el texto aquí abajo. Ahora, medida que sigamos construyendo y agregando más cosas vamos a agregar sobre el tenis. Bueno, esto va a cambiar de posición, lo cual es perfecto, porque quiero esto un poco más alto. Pero vamos a hacer algunos ajustes, pedir que se vaya, y te voy a mostrar cómo funciona eso. Entonces vamos a entrar aquí y voy a dar clic y arrastrar el editor de texto y luego se puede ver dónde está la línea azul Eso mostró dónde se va a poner. Entonces lo voy a poner justo abajo aquí abajo. De acuerdo, entonces ahora tenemos esta pieza de texto en marcha. Ahora, en realidad he pre escrito algo aquí. Entonces todo lo que voy a hacer es correcto. Haga clic y haga clic en pegar y tengo Gran Bretaña. ¿ Buscas construir o ampliar tu negocio pero no sabes por dónde empezar? Y las letras te muestran cómo literalmente. Y el punto aquí es que el tipo, por supuesto, es que estamos haciendo Este tipo de tutoriales que estamos ofreciendo van a estar en pantalla y les mostramos a todos lo que estamos haciendo paso a paso exactamente de la manera que estamos haciendo ahora mismo. Entonces esto es mucho más fácil de aprender y entender porque ves lo que estoy haciendo y te estoy mostrando cómo funciona. Y ojalá también sientas que esto es realmente sencillo de aprender. Al menos así es como aprendí lo mejor. Entonces este texto, es bastante acertijo porque de lo contrario estarían aquí todo el día. No soy tan espontáneamente creativo, y lo vamos a usar, pero vamos a cambiarlo ahora. Lo primero que estamos viendo aquí es que estamos usando nuestro color predeterminado, que es genial y hace una buena persona que llama, pero no en este fondo. Entonces voy a seguir adelante e ir al estilo de inmediato. Voy a ir al texto Color, y voy a cambiarlo a blancos. Yo sólo voy a dar click en blanco aquí y allá vamos ya. Está empezando a papa tanto más Ahora, también voy a bajar a la tipografía para empezar a cambiar las cosas como este tamaño y todo. Entonces lo que voy a hacer es tirar del tamaño aquí y simplemente hacerlo grande. No eres tan grande. Hazlo más grande. A lo mejor algo así como alrededor de las cuatro Iban a empezar a los 40. 38 se irían. Y también quiero algunos espacios entre aquí. Entonces voy a tener estos puestos en frases. Voy a hacer clic de cuidado y golpear, Entrar y él va a saltar hacia abajo, y voy a quitar este espacio. Se irían, y yo voy a estar haciendo lo mismo aquí. Voy a dar clic en entrar ahí y luego voy a quitar ese poco espacio. De acuerdo, así que ahora mismo se ve así. Ahora, esto es un poco demasiado grande para mi gusto. Voy a disminuir el tamaño. Vayamos a tal vez algo así. Creo que 23. Creo que eso se ve realmente bien, pero no estoy apreciando el espacio entre aquí, ¿ verdad? Yo quería ser mucho más colectiva, así que voy a bajar a la altura de la línea y sólo voy a empezar a jugar con estos y voy a tener algo. Mawr. Ahí vamos. Creo que eso se ve realmente bien y natural. Correcto. Entonces voy a hacer clic en esto hacia abajo, y luego voy a odiar los cambios de vista previa, y vamos a ver qué está pasando aquí. Entonces son hace. Creo que ya se ve mucho mejor. No obstante, creo que es un poco demasiado pequeño. Entonces voy a seguir adelante y cambiar eso. Voy a entrar aquí yendo a la tipografía, y voy a estar aumentando el tamaño tal vez 28. 27. De acuerdo, voy a golpear cambios de vista previa una vez más. OK, entonces se ve bastante bien. Ahora, disfruto esto porque es legible, lo cual es realmente importante. No obstante, me gustaría en realidad un poco más de espacio. Y me gustaría hacer el tamaño de este título más grande en comparación. Entonces voy a seguir adelante, volver a la tipografía y aumentar la altura de la línea ¿De acuerdo? Algo así. Ahí vamos. Ahí vamos. Creo que eso se ve muy bien. Voy a seguir adelante y dar clic en el título aquí, y luego voy a pasar a la tipografía de estilo. Y voy a aumentar ligeramente esto a, digamos, 45. Ahí vamos. Voy a volver a dar clic en este. Y ahora voy a calentar los cambios de vista previa para que veas qué pasa. Negocio hecho fácil. Déjennos mostrarles. ¿ Cómo buscas construir o ampliar tu negocio, pero no sabes por dónde empezar? Déjennos mostrarles. Literalmente perfecto. Realmente me gusta esto. Voy a hacer una disminución más de tamaño aquí allá y luego finalmente previsualizar en contra. Entonces este es el proceso de diseño. Va a ser este pequeño retoque en los pequeños ajustes que hay hasta que estés contento con lo que estás viendo. Entonces realmente estoy disfrutando esto. En realidad, creo que esto se puso bastante perfecto. Ahora, lo que no estoy disfrutando es cómo el título va directo a la luna justo aquí. Está bien. Entonces lo que podemos hacer es realmente cambiar el posicionamiento fuera de fondo. Ahora, recuerda, vamos a añadir otra cosa aquí abajo. Ese es el llamado a la acción de fondo, ¿verdad? Íbamos a escribir algo, como, aprender más o empezar aquí, algo así. Pero vamos a vincular ese fondo al inicio aquí, página, que vamos a construir más tarde. Te estás siguiendo. ¿ Verdad? Entonces estamos explicando aquí arriba. Negocio hecho cartas fáciles. Muéstrale cómo, Correcto. Entonces, ¿cómo nos van a mostrar? Estamos explicando que todos tratamos de hacer de los negocios algo fácil. Y queremos mostrarles cómo hacemos eso y eso. ¿ Buscas construir o ampliar tu negocio? Bueno, si estás en el lugar correcto, ¿no? Ese es más o menos el dicho subyacente. Pero no sé por dónde empezar. Permítanos mostrarles cómo literalmente. Realmente bueno. Es un incentivo está apuntando a las personas adecuadas. Y entonces vamos a tener el aprender más. Pero por el fondo ahora mismo, pesar de que podríamos tener que microchips, quiero mostrarles cómo se puede en el camino. Micra. Sólo estas cosas. Se ven realmente bien. Entonces lo que voy a hacer es ir a L. Un mentor a casa aquí, y voy a volver atrás y dar clic en la sección de edición. Y luego donde tengamos estilo, voy a bajar a la posición, ¿Ves dónde está? Por defecto. Y sólo voy a probarme Vamos a tratar centro y ver qué pasa. Vas a ver que El fondo, la imagen misma. Cambia un poco porque está cambiando el punto focal en la imagen de fondo. Entonces voy a seguir adelante y dar clic en los cambios de vista previa y mirar la parte fácil ahí y ver cómo se mueve. Y ahora tenemos la luna que se ha movido erguida negocio hecho fácil. Déjennos mostrarles. ¿ Cómo buscas que Bill amplíe tu negocio? No sé por dónde empezar. Permítanos mostrarles cómo literalmente. Entonces me está encantando esto. A mí me gusta absolutamente. Estamos ajustando todo el texto dentro del globo de aire y debajo de la luna, y esto va a volver a aparecer. Pero entonces solo vamos a micro en solo el fondo para que todo se vea bien. Entonces en la próxima conferencia, chicos, vamos a construir que empezará aquí o aprenderá más colillas en dependiendo de lo que les interese. Pero así es como construyo el título, la descripción y luego un llamado a la acción al respecto. Y entonces tenemos este fondo ¿verdad? Hay más opciones. Podemos jugar dentro de aquí cuando se trata del estilo fuera de la descripción. Pero personalmente, creo que cuando clavas el tamaño y cuando clavas el espaciado entre letras y no vamos a jugar en un peso de decoración ni nada, entonces estás todo bien para ir bien. Se ve perfecto. No hay necesidad de hacerlo más complicado de lo que necesita ser. Pasemos a la siguiente conferencia. Gran trabajo. 14. Botón de CTA: Muy bien, entonces en esta conferencia, vamos a seguir adelante y crear nuestro llamado a la acción Bottom. Entonces, en otras palabras, sabemos si lo hemos hecho hasta ahora, hemos establecido el negocio de título hecho fácil. Permítanos mostrarle cómo. Entonces hemos hecho una descripción que va, ¿ Estás listo para construir o ampliar tu negocio pero no sabes por dónde empezar? Permítanos mostrarles cómo literalmente. Ahora queremos permitirles que tomen algún tipo de acción ahora mismo para esto toma un botón de acción que dice, por ejemplo, aprender más tendría más sentido para su servicio. lo mejor estás ofreciendo una consultoría gratuita, Se podría decir reclamar la oferta. Word podría decir contáctanos, o podría decir suscribirse. Ahora llaman a la acción va a depender en primer lugar de su servicio. Pero también, por supuesto, lo que está escribiendo sobre el servicio, Lo que está ofreciendo en su portada. Ahora, la idea aquí es explicar de qué vamos todos, qué hacemos, qué tenemos que ofrecer y luego crear este botón de llamada a la acción que les va a llevar a empezar aquí ahora. Podríamos haber llamado a este inicio aquí, pero quiero que tengan la capacidad de aprender más, que ofrecen algo diferente al inicio aquí. A pesar de que es lo mismo, ¿verdad? Porque están interesados y quieren aprender más. Empieza aquí. Eso significa más de una toma de acción. Están empezando algo, pero aprende más. Eso sigue siendo sólo por interés en la curiosidad. Por lo que es más fácil para ellos presionar ese fondo en general. Entonces vamos a seguir adelante y crear el botón, y no podría ser más sencillo. Chicos, todo lo que tienen que hacer es seguir adelante y hacer clic en sus palabras su botón, y vamos a arrastrarlo y ponerlo abajo. Aquí y ahora tenemos nuestro fondo. Entonces empecemos a editar esto para que se vea bien y se ajuste al tema. Ahora ya lo hace, porque tiene el color de acento que le hemos puesto, que va perfectamente con nuestro tema, así que eso es realmente útil. Pero aun así quiero cambiar éste ahora mismo. La primera opción que tenemos aquí arriba es el tipo. Ahora no tenemos que preocuparnos de eso porque ya hemos establecido los colores y lo hemos emparejado y todo. Pero aquí sí tenemos algunas plantillas interesantes, si se quiere. Eso te va a permitir, por ejemplo, el verde para el éxito. Advertencia a estos zumo de aire , ya sabes, los llamantes recomendados para ese tipo de sentimiento o peligro, que es la forma más oscura de color rojo. Ahora vamos a ir con el valor predeterminado, que es el color que enviamos nuestra paleta de colores con nuestros valores globales porque encaja realmente bien con los temas. Entonces no vamos a jugar con esto, Pero el texto, Claro que vamos a jugar con No vamos a tener un texto que diga clics care. Ahora voy a usar aprender más para estas tomas. Pero una vez más, el texto que elijas va a depender de lo que estés montando. Generalmente, prefiero escribir Aprende más en lugar de empezar aquí, sobre todo si tengo un comienzo aquí. abajo aquí porque me parece que generalmente es más fácil para la gente hacer clic, aprender más en lugar de empezar aquí. De acuerdo, Ahora, lo siguiente que tenemos este enlace fuera de curso, queremos que el botón haga algo. Entonces la idea es que para que aprendan más, vamos a seguir adelante y embustarlos en nuestro inicio aquí. Página. De acuerdo, entonces lo que vamos a hacer es que vamos a subir aquí para empezar aquí, ¿ verdad? Haga clic y, a continuación, seleccione copiar enlace. Y luego solo vamos a dar clic aquí, quitar este signo derecho, click y pegarlo en. OK, así que ahora si sigo adelante y podría debilitar los cambios de vista previa y luego voy a aprender más y hago click ahí me va a llevar al inicio aquí sitio se pueden ver. Quiero decir ya. Si estás comparando este diseño con lo que estamos haciendo ahora, es un nivel completamente nuevo, gracias a l un mentor. Pero de todos modos, aquí es donde los vamos a embudar. Y, por supuesto, vamos a cambiar. Esto está bien, vamos a rediseñar esto usando elemental. Pero ahora hemos establecido el propósito de nuestros botones. Entonces, volvamos a dar click aquí. Entonces ahora sabemos que si pudieran debilitarse, aprender más, se les va a llevar a la página de inicio aquí, que es diferente a esta página principal que tenemos. Y hemos pasado por lo que hacen, cómo funcionan. Decía, espero que lo recuerden. Entonces lo siguiente que podemos hacer es cambiar la alineación. En realidad prefiero tenerlo en línea así. Entonces si ves que tenemos el título, eso está perfectamente en línea con la descripción. Eso está perfectamente en línea con el botón, y prefiero mantenerlo así. Me gusta mucho este look limpio en línea. Entonces por ahora, vamos a quedarnos con eso, y luego podemos cambiar esta talla y prefiero ir con una talla mediana porque solo pienso que es Papas un poco más. Si vemos la diferencia de aquí a aquí. Yo solo creo que tiene un aspecto más bonito. Prefiero un poco más sitios. Simplemente le queda mejor. Y luego vamos a bajar. Tenemos algo. Estamos eso es genial. Yo puedo Podemos cambiar el icono a cualquier cosa. Podemos tener el look de libreta de direcciones, podemos tener el Digamos que tienen logo muscular. Si te gustaría esto hilarante que los madereros Amazon aquí, quiero decir, básicamente cualquier cosa manzana. Incluso hay mucho de que vengo aquí para elegir, pero honestamente, no para este tipo de botones. Realmente no lo recomiendo si estás vendiendo algo en Amazon. Por supuesto, podría ser genial agregar ese tipo de botón para comprarlo. Y entonces podrías tener un enlace de afiliado, etcétera. Pero no por esto. Eso no lo recomiendo. Y luego tenemos alrededor de un yo D. Pero no vamos a darle ninguna idea. No necesitamos hacer eso. Pasando a estilo un par de cosas que quiero cambiar con esto. Y el primero no es la tipografía, y podemos ver que dice aprender más. Yo quiero que esto sea en toda la capital, y quiero que eso tome un poco más grueso, un poco más gordo. Entonces voy a bajar. Y lo primero que tenemos aquí es familia. Y recuerden, ya centramos los valores globales. Ya nos divertimos. Estoy súper contento con eso. Creo que se ve genial. Y entonces tenemos talla, y ya lo dijimos a medio. Pero si quieres tener un look más en profundidad y ser más preciso, solo puedes ponerlo aquí. Pero medio es alrededor de la tercera escena 14 veranos. Voy a ponerlo a 14 así. Ahora, la espera es el grosor del texto. Voy a ponerlo demasiado audaz y se puede ver que se pone un poco más grueso. Y eso me gusta mucho. Y luego voy a dar clic en Transformar, y voy a usar las letras mayúsculas. Y básicamente, siempre uso letras mayúsculas en todos mis botones. Yo sólo creo que se ve mucho mejor. Creo que Papas mucho más, y eso me gusta mucho. No voy a hacer nada al estilo. No voy a hacer nada en la decoración, y luego tenemos la altura de la línea. No voy a tocar eso. Como pueden ver, va a cambiar un poco la caja así, pero no vamos a estar jugando con eso. Lo vamos a cambiar de diferentes maneras usando los márgenes, y eso es en un poco. Entonces tenemos el espaciado entre letras y nuevamente ten cuidado con esto porque se mete en el frente. No lo voy a tocar. Entonces ahí vamos. Estoy realmente feliz por eso. Lo que también podemos hacer ahora y esto es emocionante. Realmente me encanta esto es usar el efecto puerto, porque si previsualizamos los cambios que acabaría de haber hecho. Podemos ver que en realidad se ve muy bien. Estoy disfrutando esto. Mira a lo grande, ¿de acuerdo? Pero no pasa nada cuando estoy rondando el ratón. Y para mí, cuando pasa algo cuando paso el ratón sobre eso en realidad implica mucha calidad y profesionalismo y también sus aspectos destacados satisfactorios. Significa que algo puede pasar cuando hago clic allí. Por lo tanto, tengo mucho más probabilidades de hacer clic. Tipo de simboliza, Hey, Hey, click me manera realmente efectiva de conseguir que la gente haga clic en él Y también para el diseño. Creo que se ve genial. Entonces vamos a volver, y vamos a asegurarnos de que cuando pases por encima de él, pase algo. Entonces lo primero que quieres hacer es mirar, flotar y luego vamos a bajar a las palabras ¿Está flotando animación justo aquí? Hay un montón de animaciones diferentes. Y si haces clic en él, por ejemplo, Bob y yo pasamos el ratón sobre, Puedes ver lo que hace, verdad? Se puede ver cuál es la animación. Skew. Doy click en él o lo siento. Coloco el ratón sobre él. puede ver lo que pasa Ahora, cuando se trata de botones, sólo hay un Onley, una animación que cada uso y esa es la animación de crecimiento. Y se ve así y realmente disfruto esto. Creo que le da un efecto pop tan profesional. Y para ser honesto, no creo que nada fuera de estos efectos. Mira así de bien, a menos que tengas un equipo realmente agradable que vaya de la mano con él. Es decir, todos estos efectos están sujetos a cómo lo usas en tu diseño. Pero generalmente solo voy con el efecto grow. Ahora, esto se ve realmente bonito. Si seguimos adelante y previsualizamos estos cambios y paso el ratón por encima de esta manera, se obtiene este efecto pop realmente bonito. Eso me encanta, en realidad. Entonces esto es impresionante. A mí me gusta este gran momento Ahora. En realidad me gustaría que te pasara algo más. Entonces cuando paso el ratón sobre, me gustaría que estallara y también parecía que estoy seleccionando algo. Probablemente sabes a lo que me refiero. Al igual que cuando estás seleccionando algo, puedes ver que cambia de color como este o éste o éste, o si estás trabajando con algún archivo o cualquier mapa. Si haces clic en él, se selecciona. Por lo que quiero dar una especie de ética seleccionada cuando pase el ratón por aquí. Y la forma en que voy a hacer eso es ir adelante y cambiar el color de fondo para que se ponga un poco más claro cuando pase el cursor. Mi ratón sobre es un cambio sutil, pero hace un gran impacto. Empaqueta un ponche. Definitivamente. Entonces lo que vamos a hacer es hacer clic en el color de fondo, y aquí es donde podemos hacerlo un poco más claro. Ahora se puede ver que el color que estamos usando, en realidad no está aquí. Entonces lo que vamos a hacer es ir a la parte superior izquierda aquí y vamos a ir a los colores por defecto. Y voy a dar click en esto, leer que estoy disfrutando tanto y voy a seguir adelante y voy a copiar este código de color . Y luego solo voy a bajar y hacer clic en este botón. Ahí vamos. Y ahora vuelvo enseguida aquí. Voy a hacer clic en el flotador una vez más, y luego voy a dar clic en el color de fondo. De acuerdo, entonces todo lo que necesito hacer ahora es hacer click aquí, pegarlo en hit center, y ahí vamos. Entonces lo que voy a hacer es simplemente tirar esto un poco hacia abajo. Nada demasiado loco. Y yo quería ir, ya sabes, súper ligero y, ya sabes, sabes, parpadear toda la pantalla de mi computadora o ponerme blanco o cualquier cosa. Yo sólo quería tener un color un poco más claro. Entonces, así. Entonces si paso el ratón por encima, se ve así. me está gustando mucho. Entonces vamos a comprobarlo en la vista previa. Entonces voy a pasar el ratón por encima, y podemos ver que se pone un bonito color claro. Ahora, para mí, eso en realidad es un poco demasiado ligero todavía. Entonces voy a seguir adelante y sólo voy a aumentar un poco esto. Se irían. Voy a dar clic en venir vista previa una vez más y pasar el ratón por encima. Y, sí, esto me está gustando. Entonces como puedes ver, el efecto es bastante sutil, pero aun así empaca un puñetazo. Realmente se siente como si estuviera seleccionando esto ahora mismo, así que realmente estoy disfrutando de este efecto. De acuerdo, así que voy a seguir con eso No tienes que hacerlo si no te gusta, pero así es como me gusta decidir. A mí me gusta tener los efectos de crecimiento en los botones y también tener este aumento de ligereza. Por lo que parece que estoy seleccionando. Creo que se ve muy bien. De acuerdo, así que tenemos eso. Ahora estamos aquí en la frontera. De acuerdo, Entonces hay dos cosas que quiero hacer con esto. número uno de abajo es que quiero redondear un poco más estos bordes, y también quiero darle un look más amplio. Y para darle un aspecto más amplio, voy a disminuir el espacio en la parte superior y en la inferior y mantener este tipo de grosor en este lado. De acuerdo, entonces lo primero que voy a hacer es bajar a la frontera. Entonces si yo aumento esto, esto va a estar aumentando las fronteras alrededor de la suya, por lo que redondea los bordes. Consulta esto. Si hago clic en estos, se puede ver que los bordes están cambiando alrededor de este widget. De acuerdo, alrededor de este elemento se está volviendo realmente redondo. Creo que esto es muy excesivo para este diseño. Voy por algo sillín como, y luego me quedo apenas cinco Vamos adelante. Y Previ que esto es antes y esto es después de un sutilmente grueso. Pero creo que se ve realmente bonito. Se puede ver que hay un redondeo en la esquina, así que realmente me gusta eso. Entonces lo siguiente que voy a hacer es darle ese poco de una sensación más amplia. OK, entonces voy a seguir adelante y aumentar esto. Entonces si estoy jugando con esto, puedes decir que es por ahora está cambiando todos los elementos, ¿ verdad? Todo el relleno alrededor del texto justo aquí y están todos sincronizados. El izquierdo, el derecho, el arriba y el abajo. Ahora lo que voy a necesitar hacer es hacer click en esto que dice vincular valores juntos. Entonces puedo en enlazarlos y voy a cambiar el top 2 15 ¿verdad? Y voy a cambiar también los dos de abajo 15. Entonces voy a seguir adelante y previsualizar estos cambios y ver dónde nos metemos. Se puede ver que los libros cambian de tamaño. Nos hemos encogido un poco aquí, pero más aún aquí y aquí. Por lo que realmente me está gustando este look más sillín, pero aún más amplio. Mira apagado el botón. Y si me paso el rato, obtienes este bonito efecto popping. Esto me está gustando mucho. Por lo que al bajar a 20 en estos, también disminuimos el relleno. Pero realmente me gusta ese efecto. Ahora bien, si quieres tener el botón que se ve de manera similar y esto es decentemente universal. A mucha gente le gusta tener un botón es de este tamaño. Y con aproximadamente esta palmadita, todo lo que necesitan hacer es seguir adelante y mantener el relleno para la parte superior y la inferior a los 15 a la derecha e izquierda a los 20. Realmente disfruto esos valores. OK, entonces no vamos a jugar con el tipo de frontera. Nada que tengamos que hacer ahí en la sección avanzada esto va a estar jugando con toda la sección, ¿de acuerdo? Y no hay nada que realmente queramos hacer ahí adentro Ahora, por ejemplo, si empiezo a aumentar esto, se puede ver que estoy aumentando el tamaño de sección y de igual manera, si bajo al fondo y le doy un color aquí, por ejemplo, hago clic en color. Ese va a ser el color de esta sección, y no vamos a querer jugar con eso. Sólo vamos a querer arreglar el pero y hacerlo papa así. Haz que se vea bien. Y tampoco vamos a añadir ningún efecto para ello. De acuerdo, así que vamos a golpear los cambios de vista previa una vez más y comprobarlo. Y aquí estamos. Si paso el ratón por encima, mira este botón. Y si hago click en él, me van a llevar al inicio aquí. Page, estoy realmente contento con esto. Chicos, creo que está empezando a verse realmente impresionante. Para ser honesto, estoy orgulloso de esto. Entonces lo que también podría hacer ahora es echar un vistazo a su alrededor. Por ejemplo, ¿me gusta eso El por qué entra tanto en la luna? Está todo fuera del texto. Legible. Por ejemplo, ¿Buscas construir o expandir tu negocio hallazgo? Porque el blanco va bien en este fondo, esta parte va bien también. Y esta parte va bien también. Pero si esto hubiera sido un poco más bajo y llegar a este amarillo por aquí, esto no sería del todo tan legible. Vale, Así que por ejemplo, si quisiera cambiar, si quisiera moverme un poco por este texto Bueno, tendría que hacer es ir a los elementos aquí dentro y agregar algo llamado espaciador. Ahora, echa un vistazo a esto. Si agrego el espaciador aquí, esto sólo va a ocupar espacio. Eso es todo lo que hace. Ocupa espacio en la sección y empuja esto hacia abajo. Entonces echa un vistazo a esto. Ellos para previsualizar. Lo tenemos aquí y ahora se empuja aquí abajo. Se puede ver que esto se ve bastante bien también, pero me gusta tener que eso lleva un poco más arriba. Entonces yo podría de Houston. Pero podría hacer algo así como microgestión real. Algo así como cuatro, por ejemplo, que el por qué ligeramente más bajo de la luna. Sólo voy a previsualizar estos cambios ahí. Parece que están muy bien, pero podemos ver que el literalmente aquí en este momento, no es tan legible. Podríamos hacer esta microgestión ridícula, y yo sólo una otra vez. Estos son los propósitos de la firma. Esto es en lo que prefieres vamos a comprobarlo. En realidad, todavía está un poco bajo, así que sólo voy a seguir adelante, derecha, derecha, clic en él y dar clic en borrar. Ahí vamos. Voy a previsualizar los cambios. Y sí, esto se ve realmente bien. Entonces no voy a estar usando un espaciador aquí, Pero tal vez quieras hacer eso con el fin de ajustarse a tu diseño con el fin de asegurarte de que todo esto se vea bien hacia tu fondo. ¿ Verdad? Entonces, chicos, si pudiera les drogaría cinco. Yo lo haré. En fin, gran trabajo. Lo hicimos hasta aquí. Estoy realmente feliz por esto. En realidad podemos irnos. Este activo está ahora mismo y pasa a la siguiente sección. Acabamos de terminar de editar la anterior sección de pliegue. Realmente buen trabajo. Ahora bien, si tiene alguna pregunta que sea la policía les haga en las Q y A. Las responderemos en un plazo de 24 horas. Pasemos a la siguiente conferencia. Gran trabajo. Ver, ahí 15. Añade Testimonial: Está bien. Por lo que hemos terminado de editar la anterior la sección de pliegue en nuestra página principal. ¿ Qué tan emocionante es eso? Ahora vamos a seguir adelante y proceder con la adición de contenido para nuestras secciones de abajo el pliegue en nuestra página principal ahora mismo si has estado siguiendo a lo largo del curso desde antes, hubo una conferencia cuando estábamos revisando otro sitio web exitoso revisando página principal y tomando notas. Correcto. ¿ Todavía tienes esas notas? Bueno, yo sí si hay en papel para ti o digitalmente como lo escribí. Es decir, esto se ve terrible, pero es muy efectivo y una cosa que escribí aquí fue So show demostró lo correcto. Necesitan pruebas sociales para que los visitantes puedan confiar en ti y saber que lo que tienes para ofrecer está fuera de valor es lo mismo. Cuando se trata de páginas de Facebook que más me gusta, más probabilidades tenemos de confiar en ellas o instagram o en cualquier sitio web de la plataforma. Funcionan de manera similar. Es que realmente no ves cuántos visitantes tienen. Vamos a necesitar agregar este formulario fuera de prueba social para que la gente pueda confiar en nosotros, acuerdo? Y por supuesto, te salgas con más. Si tienes un nombre realmente grande, son de marca realmente grande. Pero no somos lo suficientemente grandes. Necesitas tener un enorme y aún entonces todavía quieres la prueba. Entonces lo que vamos a hacer es en realidad seguir adelante y agregar un testimonio justo debajo del redil aquí. Entonces lo que ya habremos hecho se muestra en lo que vamos a tratar y los guió a más contenidos en una página web que vamos a editar en la sección Ellos estaban en el inicio aquí , pero queremos presentarlos a aún más cosas sobre nuestra página web y construir su prueba social . Eventualmente vamos a hacer cosas como Adam E. Correo abierto, etcétera, etcétera. Entonces empecemos a sumar la prueba social, informemos a un testimonial, y eso en realidad es súper fácil de hacer. Todo lo que necesitamos hacer es desplazarnos aquí abajo hasta el ascensor, encontrar el testimonio. Vamos a seguir adelante y agarrarlo y luego liberarlo y ya tendrán unas hermosas plantillas testimoniales configuradas. Digo, honestamente, es ridículo lo sencillo que es con lo elemental. Me encanta este programa. Entonces vamos a empezar a configurar esto poco a poco, y lo vamos a hacer juntos. Ahora. La primera parte es el texto en sí y el texto. Voy a usar una crítica de uno de nuestros alumnos, ¿verdad? Entonces ya me he tomado la libertad de seguir adelante y sobrellevarlo que toma de eres dima curso? Entonces solo voy a ir a pegar eso. Y lo maravilloso es que esto en realidad es una revisión de verdad. Esto no es fingido de ninguna manera. Y tiene algunas palabras realmente hermosas y tipo de que dice que este es el mejor y más completo curso en línea sobre cómo hacer crecer tu negocio en línea con envío gota. Hice más de 1200 dólares dentro de la primera semana de ventas. Todo gracias a abrir clase Jeffers Monster. Ahora bien, esto es prueba social, todo caso, correcto. Entonces este es realmente buen material con el que estar trabajando, y esto va a ser tanta confianza para nuestra página web para nuestros cursos, que vamos a presentarles a etcétera. Esta es una revisión maravillosa para usar. Entonces qué, vamos a seguir adelante y hacer ahora es una vez que hayamos agregado en el contenido aquí dentro, vamos a bajar y elegir la imagen y la imagen va a estar fuera del revisor. Ahora, ya hablé con este estudiante y se me permite usar su foto. En realidad me mandó una foto, así que voy a seguir adelante y agarrar eso y armar esa. Entonces voy a ir a subir archivos. Voy a ir a seleccionar archivos y luego voy a dar clic aquí. Ahí vamos. Ahora notarás que este archivo es en realidad bastante grande. Es de un megabyte y se puede ver que los píxeles son enormes es de más de 3000 por más de 2300 solo vamos a usar esto para sitios realmente, realmente pequeños. Entonces agregando en esta enorme imagen que tiene este gran tiempo de carga, que simplemente no tiene sentido, pesar de que es una imagen realmente genial. Entonces lo que vamos a seguir adelante y hacer es en realidad cambiar el tamaño de la imagen a la miniatura en. Lo que eso va a hacer es que el tiempo de carga va a disminuir severamente. Se va a disminuir el tamaño de la imagen en serie. Y sin embargo no va a haber pérdida de cotización porque estamos usando un cuadro tan pequeño, ¿ verdad? Entonces eso está todo configurado. Lo que vamos a seguir adelante y hacer ahora es solo comprobarlo, comprobarlo en la vista previa y ver cómo se ve en este momento. Entonces vamos a desplazarnos hacia abajo y podemos ver. De acuerdo, aquí tenemos el texto. Aquí tenemos la imagen. Creo que se ve realmente bonito. Y su nombre no es John. No es diseñador, pero vamos a seguir adelante y cambiar eso. Pero hasta ahora, todo, Lou, deberían estos cargando superrápido Y realmente estamos buscando eso. Entonces vamos a poner su nombre. Trabajas Emeric, hijo. Y el título. Y lo que voy a hacer aquí es correcto, Fundador va a hacer una marca de coma, y luego voy a escribir su sitio web, que es clave tienda de video dot com. Vale, Él es el fundador de esta maravillosa tienda vendiendo artículos bohemio, Pero no voy a escribir el w w w tomó convertirlo en un enlace. Y tampoco voy a escribir aquí su enlace, aunque pudieras. El problema es que si la gente hace clic en este enlace, van a ser restados de tu sitio web. Ahora podrías agregar en el enlace como un ling saliente. Entonces ayudas a otros con hay CEO, pero no lo recomiendo. Te recomiendo a tus bajas personas que se centren en tu página web. Pero en caso de que decidas añadir este enlace, ve a opciones y haz click en abrir en nueva ventana. Esto es muy, muy importante para asegurarse de que todavía estarán en su página web. Pero no vamos a sumar aquí en el Lincoln. Simplemente vamos a agregar en el título derecho fundador y luego agregar en la página web para que todavía nos estamos refiriendo ahí. Pero no estamos vinculando ahí, ¿de acuerdo? Y luego desplazándose hacia abajo. Tenemos la posición de imagen, que está a un lado. También podría estar encima. Entonces lo conseguimos así. Pero eso no me gusta realmente. Eso me gusta. Es espacio seguro cuando está de lado así. Y creo que se ve realmente profesional. Entonces eso es todo para el contenido ahora mismo vamos a pasar al estilo. Hay un par de cosas que realmente quiero cambiarla ahora. lo primero de lo que quiero hablar es del panorama actual aquí. Ahora podemos ver que aquí estamos teniendo un fondo más oscuro con texto en blanco. De acuerdo, entonces el tipo de estilo que voy por aquí, es un contraste. Ahora voy a preferir tener un fondo blanco y después tener un texto más oscuro. Y me gusta mucho el fichaje, el tipo de estilos en sitio web cuando tienes ciertos llamantes en la parte superior, y luego contrastas con la primera sección siguiente en la parte inferior con la abajo el pliegue. Entonces vamos a seguir adelante y hacer eso ahora mismo a ahora por el contenido. En realidad quiero cambiar un poco las cosas. En primer lugar, no me gusta que esto tome color. Voy a entrar aquí y sólo voy a seleccionar. Ahí vamos. Un gris más oscuro. Creo que eso saca mucho más a los Papas. Entonces vamos a ir a la tipografía. No voy a jugar con el frente. Creo que la fuente es perfecta. Yo, sin embargo, jugaré un poco con el tamaño. Voy a hacerlo un poco más grande. Ahí vamos. Vayamos con 21. Creo que esto se ve realmente bien, así que aparece un poco más. Creo que eso se ve realmente bien ahora. El peso. No voy a jugar con. Estoy bastante seguro de que 500 es por defecto. Si hago clic en él, no pasa nada. ¿ Verdad? Pero 600 sólo lo va a hacer demasiado grueso. Vemos que casi se convierte en el balón así. Entonces no vamos a jugar con esto. Tampoco nos vamos a transformar en mayúsculas ni nada por el estilo. Pero lo vamos a hacer cursiva porque mira esto. Eso realmente cambia toda la perspectiva del texto. Ahora, siempre que estoy sumando en testimonios, siempre los pongo en cursiva. Simplemente creo que es una parte tan importante del tipo de diseño que lleva a Pope. Y también, gente generalmente espera este tipo de cursiva cuando se trata de las palabras de otra persona, verdad, porque hace que tome a papa de otras maneras. Tenemos nuestro propio diseño, y luego está esta repentina cursiva viniendo de otra persona. Piensa que se ve realmente, muy bonito. No vamos a hacer ninguna decoración. No vamos a jugar con la altura de línea ni el espaciado de letras. Vamos a presionar esto hacia abajo así. Entonces vamos a pasar a la imagen Ahora el tamaño de la imagen, creo que se ve muy bien, pero podríamos estar jugando un poco con ella si quisiéramos. Voy a ponerlo a 50. Creo que 50. Es un tamaño realmente bueno. No vamos a tener ninguna frontera. Y sabrás que la frontera se enfurece, pesar de que no le muestre que ya lo ha puesto. Porque si dije esto a cero, vas a notar que se convierte en un cuadrado al igual que lo es la imagen original. Pero si pongo esto a 50 va a tener esta hermosa ronda porque cambia la frontera . Ahora vamos a hablar más de las fronteras en un poco. ¿ De acuerdo? Entonces vamos a colapsar imagen, entonces vamos a ir a nombrar. Ahora. Yo también quiero cambiar esto un poco . Cuando se trata del nombre, en realidad me gusta. Voy a ponerlo a tono negro, pesar de que esto no hace ninguna diferencia ahí. Ya veo. Entonces, en realidad estoy muy contento con eso por ahora. Pero esto debajo de ahí, realmente no estoy cavando eso. Creo que son dos luces. Voy a ir con el color del texto. Voy a seguir adelante y oscurecerá eso. Y ahí vamos. Piensa que ya se ve mucho mejor. Por lo que ahora hemos emparejado el enfriador para este texto debajo y este. Entonces sigamos adelante y comprobarlo en el modo de vista previa. Entonces ahí vamos. Por el momento, tan buena seca. Piensa que se ve realmente bonito. Ahora hay una cosa que realmente no estoy cavando aquí, y este va a ser un aspecto tan importante a la hora de diseñar tu sitio Web, y ese es el espacio entre las secciones. Ahora ya se puede ver eso. A partir de aquí. Hay un poco de blanco apareciendo abajo que apenas hay espacio entre el blanco y el texto, así que en realidad no hay mucho de una perspectiva. Es como si tuvieras esta hermosa imagen aquí, el hermoso fondo que toma el mensaje, y luego se mete directamente en esto. Esto está tan condensado ahora, quería ser más espacioso. Yo quiero crear más espacio entre estos y para las secciones venideras, así que vamos a hablar un poco más sobre cómo hacerlo. Entonces, para hacer esto, lo que vamos a hacer es que vamos a seguir adelante y dar click en Editar sección para esta parte ahí mismo y entonces no vamos a cambiar nada aquí. Todavía queremos el contenido de la caja. No tenemos que estirar la sección porque la sección en realidad ya está estirada aquí por defecto sobre el tema. Si tuviéramos un tema de que nos estamos boxeando así, podríamos estirar todo el camino. Pero como puedes ver, ya lo hace. Por lo que no necesitamos usar la sección de estiramiento. Entonces lo que vamos a hacer es pasarnos para avanzar, y te voy a mostrar la diferencia entre margen y relleno lo que son, cómo usarlos y lo que significan. Ahora, para mostrar esto mucho más fácil, voy a seguir adelante y hacer el fondo de esta sección Negro. Esto es sólo con fines de demostración. Que esta vez vamos a usar va a ser blanco. Pero voy a ir al estilo de fondo clásico cambió el color a tono negro. Ahí vamos. Y luego voy a ir a avanzado. De acuerdo, Así que empecemos a hablar de márgenes y relleno. Entonces con márgenes, Pero estamos buscando aquí es que al aumentar en el margen, estamos incrementando el espacio entre esta sección y esta sección. Recuerdo en esta sección tenemos una columna. Aquí se puede ver ese azul claro. Esa es la columna y la otra línea punteada aquí arriba. Ese es el apartado. Y luego dentro de la columna tenemos el elemento, ¿no? Ya hemos pasado por esto antes en la conferencia de anatomía. Ahora, si pongo 50 en esto, vas a notar que en realidad estamos alejando esta sección de esta sección y entre él, nos ponemos blanco, nos ponemos blanco puro. Entonces si sigo adelante y previsualizo los cambios aquí, estamos teniendo este tipo de espacio en el medio. Y mientras quiero este espacio, todavía quería estar en el mismo color espada fuera, ¿ verdad? Y por eso lo cambié a negro, porque si lo cambiaba a qué, ibas a notar esta diferencia. Entonces lo que realmente buscamos hacer es alejar a los elementos el contenido de esta sección. En realidad no estamos buscando alejar la sección de la sección y la forma de hacerlo ,en realidad es volviendo atrás, , vamos a restablecer estos y aumentar el relleno. Entonces lo que hace el relleno es que aumenta el espacio entre la columna y esta sección. ¿ Verdad? Entonces si pongo 15 aquí, vas a notar que aquí todavía tenemos la sección La sección sigue conectada a la sección anterior. No ha pasado nada, pero la columna, esta es la columna por aquí, los llaman, se ha alejado de esta sección. Y debido a que tenemos a Joe alguien collar para toda nuestra sección, eso significa que podemos quedarnos con esa persona que llama. Entonces ahora si sigo adelante y previsualizo los cambios, podemos ver que la persona que llama en realidad es la misma. Estas secciones siguen conectadas. Pero ahora tenemos este bonito, hermoso espacio entre aquí que estamos buscando. Entonces realmente estoy apreciando este diseño y esto va a ser tan importante cuando estamos trabajando con este tipo de colores diferentes en la sección. Por lo que una vez más, solo para recapitular aumentando el margen, se incrementa la distancia entre las diferentes secciones. OK, Al aumentar el relleno, estás aumentando la distancia entre la columna y esta sección. Y esa va a ser la columna o columnas que estás editando actualmente. Recuerda, se nos hace clic en la sección de edición, así que espero que esto sea realmente claro y tenga mucho sentido. El margen es para sección y el acolchado de sección es para llamarlo y derechos sexuales. Entonces sigamos adelante y vayamos al estilo y quitemos este collar porque no vamos a estar usando ese. Y vamos a seguir adelante y convertirlo en por qué. Ahí vamos. Es un luke muy bonito, también. Entonces sigamos adelante y previsualicemos estos cambios. Entonces ahí vamos. Creo que esto ya está empezando a verse mucho mejor. Realmente me está gustando este espacio en el medio. También nota en este momento va a ser diferente dependiendo de la resolución en tu pantalla, claro. Pero para mí, tengo un poco de una raya blanca aquí abajo. Y aunque me desplace un poco hacia abajo , sigue siendo blanco. Y luego viene este maravilloso texto y luego tenemos la imagen. Tenemos el nombre y tenemos la información pasando aquí dentro. Esta es sólo una sección y va a haber más, más. Entonces tenemos, como, esta página principal de desplazamiento. Pero este espacio ahí es oh tan importante. Entonces lo que vamos a seguir adelante y hacer a continuación es en realidad dejarlo así ahora estoy contento con la edición de la sección. No hay nada más que yo quiera cambiar aquí. Pero lo que quiero hacer es realmente cambiar esto y enfatizar algunas de estas palabras. Creo que caen un poco planas. Entonces voy a seguir adelante y dar clic aquí para volver a entrar en la edición fuera de los elementos del texto. Voy a pasar al contenido. Y ahora, los chicos van a ser la primera vez que en realidad escribimos nuestro propio cono. Eso no entra en pánico. Es súper fácil. Y esto es más o menos hasta donde vamos a ir con la codificación. Entonces lo que voy a hacer aquí es realmente hacer algunas de las palabras negritas, ¿ verdad? Entonces lo que voy a hacer es elegir un par de palabras. Veamos si volvemos a la página web aquí y nos desplazamos hacia abajo. Podemos ver. Aquí vamos. Tenemos los $1200 dentro de la primera semana de ventas. Voy a hacer esta parte audaz. También se ve tan bonito porque empieza en la primera línea aquí justo en la segunda línea. Pero también voy a seguir adelante y hacer facilidad audaz en este 100% de satisfacción garantizada. Digo, honestamente, este tipo, está promocionando tan bien nuestro curso con estas maravillosas palabras. Entonces vamos a seguir adelante y enfatizar las palabras más importantes Say, que también va a hacer que esta sección sobresalga más. Entonces, empecemos aquí. Voy a pinchar aquí con la boca. Por lo que estoy seleccionado ahí. Entonces voy a seguir adelante y hacer esta señal, acuerdo? Ahora, si no sabes qué es este signo, se ve como este tipo de letrero es el signo que está justo debajo de una en la palabra clave y a la izquierda dijo, OK, entonces vamos a hacer de este tipo de signo y luego voy a escribir una B. Ahí vamos. Y luego voy a mantener turno, y luego voy a volver a hacer clic en ese letrero. Entonces es casi como si estuviéramos poniendo un muro dentro de este letrero. Noté que todo se está poniendo audaz ahora mismo. Todo después de esto se está poniendo audaz. Entonces lo que vamos a hacer es encontrar un lugar para detener el audaz dentro de la primera semana de ventas. Ahí vamos. Entonces voy a detener el perno aquí para que todo lo que voy a hacer es volver a crear este letrero, hacer una slash hacia adelante y luego escribir una B y luego cambiar y hacer clic en ese letrero en contra. Por lo que eso detiene el audaz. Entonces ahora podemos ver que tenemos este tipo de negrita sobre Lee en esta parte donde dice 1200 dólares dentro la primera semana de ventas, y luego vamos a seguir adelante y hacer lo mismo al 100% de satisfacción garantizada. Ahí vamos. Voy a escribir B en. Como pueden ver, todo se está poniendo audaz, pero lo voy a terminar aquí mismo por slash beat. Ahí vamos. Entonces esto se ve realmente bonito en este momento. Está estallando un poco más. Vamos a seguir adelante y previsualizar estos cambios. Y si crees que eso es complicado no te preocupes. Voy a seguir adelante y poner el código fuera. El recurso es que solo puedes seguir adelante y agarrar una copia pegada, y te voy a mostrar dónde escribir tu texto. Puedes usar eso en cualquier momento. De acuerdo, Desplazándose hacia abajo. Actualmente se ve así. Este es el mejor y más completo curso en línea sobre cómo hacer crecer negocios en línea con envío directo. Realmente agradable. Es decir, más de 1200 dólares dentro de la primera semana de descuento de ventas conseguimos esto. El audaz se ve muy bien. Todo gracias a Robyn Ingest Spurs clases de monstruo El práctico paso a paso cancha Y es muy fácil de seguir. Cualquiera puede hacer esto. Atrevido ganando 100% satisfacción garantizada. Eres Kim Erickson, niño fundador, tiendas dot com Impresionante. Impresionante. Impresionante. Me encanta esta sección. Por lo que hasta ahora, estoy feliz por todo con él. Y voy a estar satisfecho con esto ahora mientras vamos y seguimos siendo lado más fuerte con mis dos centavos semanas aquí en sus propias cosas diferentes. Pero ahora mismo estoy amando esto. Y, como siempre, no olvides que cuando hayas terminado, cuando estés contento con ello, haz click en actualizar. Asegúrate de que siempre estás guardando tu trabajo y de que siempre estás manteniendo las cosas actualizadas . Incluso si sólo estás guardando el derecho de borrador. Mantén siempre las cosas seguras. Entonces así es como creas un testimonial en tu página principal. Ahora bien, si este es el plan para el tuyo también, adelante y sigue el ejemplo. De lo contrario vamos a seguir en el curso y tú diseñas tu página web de la manera que te va a aplicar. Ver en la siguiente conferencia, chicos. 16. Añade opciones de opción de correo electrónico: Muy bien, Entonces en esta conferencia, vamos a seguir adelante y crear un correo electrónico, a menudo sección y fuera de curso. Hay innumerables cantidades de la ciencia que podrías hacer por tu email sección abierta. No obstante, les voy a estar mostrando dos versiones diferentes. Y en esta conferencia, vamos a pasar por la primera, y esta versión va a ser la versión de portada completa, igual que lo hicimos arriba. En lo anterior, el diseño completo que estamos cubriendo prácticamente toda la pantalla estaba ofreciendo. Se necesita una explicación y luego un fondo. Ahora vamos a hacer un diseño similar aquí para el email Upton, donde vamos a usar más o menos toda la pantalla, y luego vamos a ofrecerles algo y luego tener un llamado a la acción y luego adder nuestro email esperado Informar. De acuerdo, así que sigamos adelante y empecemos este diseño. Entonces lo primero que voy a hacer es seguir adelante y dar click en el plus aquí porque para este diseño, voy a agregar dos columnas y la razón de eso es porque aquí en realidad voy a estar agregando los elementos y la forma en que yo voy a estar haciendo eso es usando primero un encabezado, voy a estar describiendo la oferta que tengo, que en este caso, va a ser hacks de marketing digital. Curso. Por lo que vamos a estar ofreciendo un cupón gratis para que puedan conseguir nuestra toma 10 puntajes de hackeo de marketing digital cuatro gratis. Si ahora se inscriben en nuestra lista de correos, siempre quieres tener algo que ofrecer para darles una razón para que se inscriban, ¿ verdad? Entonces eso va a ser lo primero ahora abajo. Va a haber un texto, escribe un texto que explique lo que hay aquí y lo que van a estar recibiendo y abajo . Va a haber el correo a menudo, y vamos a seguir adelante y usar poeta masculino para esto ¿verdad? Pero antes de seguir adelante y sumar poeta masculino, sé que pasan muchas cosas, pero todo va a tener sentido en un segundo ahora antes de que sigamos adelante y sumamos son poeta varón aquí ? Vamos a seguir adelante y crear una forma poeta masculina. Si has estado siguiendo por las canchas. Ya sabes que esta es una parte esencial diseñando los cuatro haciendo que se vea bien. De acuerdo, así que sigamos adelante y hagamos eso. Entonces ahora lo primero que vamos a seguir adelante y hacer es ir a poeta masculino y luego ir a la lista. Ahora, recuerda, tenemos diferentes listas en puerto masculino por diferentes razones. Por ejemplo, tenemos la lista común de suscriptores. Tenemos la lista lateral, y ahora vamos a seguir adelante y hacer una página de inicio. Marca digital consiguiendo lista de hacks. Ahí vamos. Y el punto de esto es para que cuando la gente se inscriba aquí, podamos seguir adelante y hacerla secuencia para asegurarnos de que obtengan el código y el enlace a nuestro curso de hacks de marketing digital. Correcto. Entonces cuando se inscriben aquí, se les agrega a esta lista que podemos automatizar ese proceso. Y si no lo has hecho, adelante y echa un vistazo a la conferencia poeta correo más adelante en el curso. Porque pasamos por cómo hacer todo eso ahí dentro, y entonces sólo voy a escribir. Incluir lo hizo Mark consiguiendo hacks, curso más enlace. Y esto es solo por mi cuenta. Yo para que pueda recordar lo que está incluido en él lo que voy a estar haciendo. Y luego voy a dar click en Guardar. Y ahora voy a subir dos formularios aquí arriba, y luego voy a dar clic en Agregar nuevo, y voy a estar llamando a esta página de inicio. Hacks de marketing digital. Ahí vamos. Y voy a seleccionar la lista, que va a ser las páginas de inicio de la lista de hacks de marketing así como así. De acuerdo, entonces ahora vamos a seguir adelante y esta firma esta, y lo primero que voy a hacer es ir a Fields y voy a sumar en nombre de pila y ponerlo arriba allá. Yo quiero que esto sea realmente sencillo, ¿verdad? Entonces voy a dar click en editar display, y voy a tener la etiqueta de display puesta dentro para ahorrar espacio. Y también creo que es un diseño mucho más bonito. Entonces en lugar de que aparezca el nombre de pila, va a aparecer aquí dentro, y el nombre de pila no va a ser obligatorio. Así que mira eso se ve realmente bonito. Y luego el email voy a tener la etiqueta puesta dentro. Y, por supuesto, correo electrónico siempre es obligatorio, pero el nombre no lo es. Y luego voy a seguir adelante y editar la etiqueta para el botón de suscripción. Voy a escribir algo como mandarme los hacks, algo así, y dar click en Hecho. Ahí vamos. Y ahora voy a seguir adelante y dar clic en Guardar, así que está guardado. Entonces volvamos a L. Un mentor aquí. Ahora, lo que voy a hacer es seguir adelante y dar click en este y arrastrarlo hacia abajo. Ahí vamos. Por lo que ahora he agregado los tres elementos diferentes y esta no es la forma que va a estar usando. Yo también me voy a cambiar . Los pistones de casa no comercializan forma de hacks se ve un poco diferente. Es mucho más limpio tiene muchas menos cosas en él. Ahí vamos. Me habrían mandado los hacks por ahí. Eso se ve realmente bonito. Y voy a quitar el título, en realidad, y la razón de eso es todo el texto que vamos a añadir aquí vamos a estar haciéndonos nosotros mismos porque se ve mucho más bonito de esa manera. Entonces aquí estamos. Ahora es el momento de empezar esta firmando esto. De acuerdo, Pero antes de empezar a diseñar esto, vamos a seguir adelante y añadir en nuestro panorama de fondo. Entonces al igual que arriba aquí, Recuerda, seguimos adelante y encontramos esta imagen. Hicimos esta sección realmente grande, y luego agregamos en los diferentes elementos y los diseñábamos juntos para que se vean realmente bonitas y limpias ahora. De igual manera, porque esto tiene este tipo de exhibición y la vamos a tener al lado. Oye, vamos a tener que querer un punto focal fuera de algo en el medio aquí, ¿ verdad? Porque vamos a estar gastando todo nuestro contenido a la izquierda. Es por ello que he creado dos columnas para mantener todo esto a la izquierda. Y luego voy a tener una bonita foto de fondo con algo que está pasando, también en el medio y un poco a la derecha. Y el otro correo a menudo va a tener un discípulo un poco diferente seguir aquí se va a quedar realmente, realmente agradable. Entonces, chicos, ¿recuerdan cómo hacer esto? ¿ Verdad? Voy a seguir adelante y voy a editar sección y voy a ir al estilo aquí y ahora es el momento de encontrar realmente una imagen de fondo. Por lo que los picos obedecen a nuestro buen viejo amigo. Vamos a seguir adelante y encontrar una imagen de fondo realmente bonita que podamos usar. Entonces esta vez, recuerda, anteriormente tenía dos palabras en las que estaba pensando. La red era inspiración y libertad. Y en realidad voy a seguir adelante y buscar la libertad esta vez porque esa es una palabra tan poderosa de un sentimiento tan poderoso que quieres regalar y luego voy a cambiar un poco las cosas e ir a allá vamos orientación. Voy a ponerlo en horizontal. Y entonces también voy a asegurarme de que el tamaño sea por lo menos 1900 veces 1000 porque quería asegurarse de que se ponga realmente ancho, cierto. Es decir, las demandas aire alto cuando estamos teniendo este tipo de imagen completa para que encaje correctamente, y luego también voy a cambiar la categoría, y se lo voy a poner a la gente porque realmente quieren que la persona de aquí haga un poco más interesante. Entonces vemos un par de fotos diferentes aquí dentro, y hay muchas cosas diferentes que puedes hacer. Entonces aquí, por ejemplo, lo que podría hacer es usar esta imagen y luego poner todo el contenido aquí justo ves , hay este bonito espacio abierto y luego hay algo pasando a la izquierda porque nosotros tener dos columnas y sólo vamos a sentir una columna. Podría hacer algo similar aquí dentro. Algo es similar aquí, sin embargo. Está un poco lleno y algo similar aquí. Y aquí tienes el punto. Pero lo que realmente destaca para mí es éste, porque se coloca en el medio un poco a la derecha. Aquí hay mucho espacio para el texto y honestamente, esto para mí este es un cuadro de libertad realmente bonito. Por lo que realmente me gusta esto. Voy a seguir adelante y descargarlo. Entonces voy a dar clic en descargar gratis aquí, y voy a ir con éste. Siempre quieres asegurarte de que las fotos de abajo un megabyte este lugar diferente y voy a dar click en descargar y mirar este Gratis para uso comercial no requiere atribución . Es perfecto. Y luego voy a volver a L. A. Mentzer. Voy a pinchar aquí. Voy a seguir adelante y seleccionar el archivo. Aquí está, y voy a dar click en Elegir Y aquí lo tenemos y ya se ha optimizado, Así que eso es realmente agradable. Y voy a dar click en insertar derechos de medios. Entonces, como podemos ver, no pasa mucho ahora mismo. Hay un par de cosas que vamos a querer hacer. número uno es que vamos a querer ampliar toda esta zona. ¿ Verdad? Entonces vamos a seguir el diseño, vamos a ponerlo a alturas mínimas, y luego voy a seguir adelante y escribir en 700 porque recuerdo que ese es un número realmente bueno . Entonces ahí vamos. Está cubriendo una gran parte de la pantalla luciendo bonita, pero la imagen no es realmente cabida, verdad? Entonces vamos a ir al estilo, y luego vamos a ir al tamaño, y vamos a ir a cubrir. Entonces ahí vamos. Esto se ve realmente bonito. En realidad, esto es perfecto. Esto es justo lo que quería. Podemos ver que ella está ocupando este espacio, y aquí dentro podemos estar poniendo nuestro contenido y todas nuestras cosas, así que eso es realmente, realmente bonito. Por lo que estoy amando esto hasta ahora. Hay un par de cosas que quiero hacer porque, como podemos ver, aquí está pasando mucho oscuro. Hay mucho rojo. Esto es blanco. Me encanta el contraste, pero esto sigue siendo una novicita sobresaliendo. Entonces voy a ir a la superposición de fondo. Voy a seguir adelante y voy al Clásico aquí dentro, y voy a dar click en color y luego sólo voy a escoger un color. Entonces consigo el rojo. Esto no tiene por qué ser exacto. Podrías agregar el código de color aquí, pero esto no tiene por qué ser tan preciso. Yo sólo quería ser que se pondrían un poco más rojas, y luego voy a cambiar la capacidad para que veamos que la imagen se está poniendo un poco más roja. Ahí seguimos realmente gustando esto. Así que echa un vistazo a la diferencia entre esto es una súper luz, y esto esto es un poco más rojo pasando, dándole más contraste. A mí me gusta esto. Esto encaja perfectamente con nuestro tema rojizo. Gracias. Entonces esto es perfecto. Vamos a comprobarlo y a ver cómo se ve en este momento, voy a seguir adelante y hacer clic en los cambios de vista previa. Así que desplazándose hacia abajo, podemos ver que esto en realidad es realmente agradable, pero ella realmente no está encajando aquí de la manera que me gustaría que lo hiciera. Entonces voy a volver aquí y voy a ser su estilo. Y luego voy a bajar a la posición, y voy a probar algunas posiciones diferentes para ella. Entonces el 1er 1 que voy a probar es centro centro, ¿de acuerdo? Y luego te voy a matar. Puede previsualizar los cambios y ver cómo eso cambia las cosas. Desplazándose hacia abajo. Está bien, Mucho, mucho mejor. Súper feliz con eso. Para ser honesto, esto se ve realmente bonito. Aquí está cortando un poco para comer, pero en realidad, creo que puedo vivir con eso. Podríamos simplemente seguir adelante y cambiar un poco el diseño. A lo mejor aumentaron las altas lágrimas. Por lo que nos sacamos un poco más de descuento para tal vez ir a 750 en este caso. Adelante y haga clic. Los cambios de vista previa de comm se desplazan hacia abajo y aquí vamos. Sí, definitivamente. A mí me gusta esto. Esto es super bonito 17. Añade opciones de opción de correo electrónico: De acuerdo, entonces empecemos a editar los otros elementos. Voy a seguir adelante y empezar con el encabezado. Voy a dar clic aquí, y luego voy a escribir conseguir hacks de marketing digital gratis así porque esto es lo que estamos ofreciendo para nuestro llamado a la acción. ¿ Verdad? Entonces si se inscriben, van a conseguir nuestro curso de hacks de marketing digital de forma gratuita, y vamos a estar recibiendo su dirección de correo electrónico, Así que quiero cambiar esto un poco. No estoy súper contento con esto ahora mismo. Voy a seguir adelante y a ir al estilo. Voy a ir a la tipografía, y lo primero que voy a hacer es jugar un poco con el tamaño, así que no voy a ser tímida aquí. Hagamos algo así. Consigue hacks de marketing digital gratis. Creo que se ve bien, pero en realidad quiero quitar este signo de exclamación. Ahí vamos. Yo estaba mucho mejor, y luego voy a seguir adelante y transformarlos en mayúsculas. Casi siempre hago mayúsculas. Cuando se trata de este tipo de titulares, consigue hacks de marketing digital de forma gratuita. Adelante y previsualicemos los cambios. Por lo que esto se ve realmente bien bien, Consigue hacks de marketing digital de forma gratuita. No obstante, me gustaría reventar los cuatro aquí abajo para que estén juntos. Y en realidad hay una manera bastante fácil de hacer eso. Podríamos simplemente seguir adelante y tirar de esto cada vez tan ligeramente y francamente, los cambios de vista previa de comm y las posibilidades son que en este tamaño, va a haber saltado hacia abajo, y tiene, Correcto, Así que hay un poco menos espacio yendo hacia ella. Ella cubre más fuera de la pantalla, pero podemos tener este pop aún más así que realmente me está gustando esto ahora. Voy a conformarme con esto porque soy súper feliz, pero creo que se ve realmente bien. Voy a pasar a este. Y tengo que decir que hasta ahora, este color gris claro realmente no ha funcionado tan bien. Entonces lo que voy a hacer es que voy a ir al menú aquí atrás. Voy a ir a los colores por defecto y voy a ir al color del texto y voy a hacerlo en este más oscuro toma color como ese y click en. Aplicar derecho. Porque ya hemos usado el más oscuro toma color también aquí. Entonces no va a estar cambiando nada, así que esto me gusta mucho, mucho más. Y luego voy a seguir adelante y dar clic aquí y empezar a editar. Ahora, ya he pre leído un texto. Simplemente voy a seguir adelante y pegar eso aquí porque, chicos, no estoy tan creado que pueda escribir esto en el acto, pero aquí tenemos el texto que dice Get the latest hacks for digital marketing. Facebook, YouTube, instagram, AdWords, LinkedIn, Quora y S e O más la máquina de creación de contenido. $99 de valor gratis. Date de alta, abajo abajo, y te lo enviaremos. Realmente agradable. Entonces juguemos un poco con este estilo. Lo primero que quiero hacer es, por supuesto, aumentar el tamaño. Ahí vamos. Quieres tenerlo derechos legibles. Así que probemos esto y golpeemos la vista previa, y luego vamos a desplazarnos hacia abajo y comprobarlo. Consigue el último mercado productor de hackeos de Facebook YouTube en stem. Ahí vamos. Se ve bastante bonito. Ahora, en realidad me gustaría que esto estallara un poco más. Entonces lo que voy a hacer es aumentar aún más el tamaño así que voy a volver a la tipografía, y actualmente son 22. Vamos con 24 a ver qué pasa y previsualizar los cambios. Entonces aquí lo tenemos. Ya se ve mucho mejor. Ahora podemos ver que por este collar de aquí, esto en realidad se está derritiendo en un poco demasiado para mi gusto. Entonces voy a seguir adelante y papa ese color un poco más. Ahora, voy a ir al color del texto, y voy a estar dando click en este valor predeterminado. Mayor tenemos y solo lo hacemos un poco más gris. ¿ Verdad? Incluso voy a mover esto más hacia el área negra. Se puede ver que están empezando a reventar un poco más. Ahí vamos. Entonces voy a seguir adelante y golpear la vista previa una vez más, desplácese hacia abajo. Y esto es mucho más fácil de leer, ¿no? Realmente me está gustando este gran fan fuera de ella. Entonces aquí lo tenemos ahora mismo. Y aquí escribes el nombre de pila aquí, escribes el correo y luego golpean. Mándeme los hacks y se va a enviar. En realidad, creo que esto se ve realmente bonito. estoy súper contento con esto. Yo sí quiero mostrarles algo que puedan agregar. Adicionalmente, si te gustaría ahora estoy realmente contento con esto. De la forma en que se ve, creo que se ve bien tenerlos en una fila como esta. Pero lo que podrías hacer es ante todo, podrías poner estos correos electrónicos que se trata de la derecha aquí. También podrías seguir adelante y hacer que el fondo en estas entradas sea blanco. De acuerdo, así que voy a seguir adelante y mostrarte cómo hacer eso. Y para hacer eso, tenemos que ir al poeta varón aquí. ¿ De acuerdo? Vamos a bajar a las palabras este estilo y aquí hay un gran montón de código. No te preocupes por ello. Te voy a guiar a través de esto. En realidad es súper fácil. Y aquí dentro y esto va a estar en el recurso es que sí tengo un pedazo de código que vamos a estar usando. Entonces como pueden ver una parte de esto, he subrayado, y este código subyacente, ese es el código que quiero que copie. Está bien. Entonces voy a seguir adelante y copiar toda esta parte el resto de esta parte que es sólo para mostrarles que esto ya existe. Esto ya existe, y esto ya existe. Ahora, lo que quiero que hagan es agregar en la parte subyacente dentro de esto ya. De acuerdo, entonces vamos a seguir adelante y buscar poeta varón. Párrafo subrayado. Y luego donde dice line dash height 20 PX. Vamos a estar pegando esta pieza de código ahí debajo, así que sigamos adelante y hagamos eso Ahora. Vamos a seguir adelante y servir desde poeta masculino Párrafo subyacente. Aquí está. En los vertes arriba, se podía ver que dice línea Dash alto 20 PX. De acuerdo, entonces lo que voy a hacer es dar click aquí hasta el final. Voy a pegarle entrar. Entonces conseguimos una nueva línea aquí y voy a pegar este código en la derecha. También vas a hacer click ahí y asegurarte de que estos estén en línea. Ahí vamos. Entonces lo que hemos agregado ahora es una pieza de código. Hemos cambiado el color de fondo y también la pantalla, ¿no? Entonces si sigo adelante y hago clic en guardar aquí ahora mismo y luego volvemos a nuestra página web y lo actualizamos y desplazamos hacia abajo, podemos ver eso ahora. En primer lugar, las casillas de entrada han cambiado de posición. Por lo que tenemos el nombre aquí tenemos el correo electrónico a la derecha. Tenemos los traseros y por debajo, y también se han vuelto blancos, ¿ verdad? Entonces si esto no se alimenta con tu fondo, teniendo lo transparente como son, puedes agregar en esta pieza de código. Agrega también en esta pieza de código con el fin de moverlos así. Y hay cosas adicionales que puedes hacer La codificación es en realidad sorprendentemente simple. Entonces, por ejemplo, vemos el área de texto poeta masculino aquí dice, con 200 píxeles. Si me adelantara y quitara esos y escribiera 250 hit save y luego volvemos y actualizo esta página, vamos a ver que ahora son más largas. Entonces hay muchas cosas que puedes hacer incluso sin entender el código, ¿no? Pero lo principal es solo seguir adelante y usar este código, hacer frente a esta pieza y ponerla bajo guión párrafo y luego debajo de línea guión alto 20 píxeles, justo como lo hice. Y vas a conseguir esto hermoso. Bonita exhibición, ¿verdad? La gente puede apuntarse, y luego va a estar fuera de curso después de que vayas con poeta varón, armar la secuencia y asegurarte de que sea lo que estés ofreciendo, se van a poner bien, Así que estoy súper contentos con esto. Creo que se ve muy, muy bonito. Y como podemos ver en este momento, los tramos aire realmente fundiéndose. Bueno, tenemos esta espada fuera de contraste pasando. Entonces aquí tenemos un tema rojo. Tenemos este bonito blanco yendo directo al punto bajando, tenemos el contraste de fondo blanco, un texto más oscuro. Y luego viene esta hermosa parte. De verdad estoy disfrutando de nuestros chicos del diseño. Ahora, en la próxima conferencia, voy a seguir adelante y mostrarles otro correo electrónico, muchas veces la señal de que hoy es súper popular. De acuerdo, Entonces para hacer eso, en realidad voy a querer ahorrar esto, pero lo voy a quitar para fines de demostración. Entonces lo que voy a hacer es correcto. Haga clic aquí y luego siga adelante y haga clic en Guardar como plantilla. Y luego voy a escribir email arriba en sección completa para que sepa de qué se trata. Y luego voy a pegarle a guardar. Entonces ahora está guardado aquí. Puedo hacer clic en éste hacia abajo, y sin tener un ataque al corazón, en realidad puedo seguir adelante y hacer clic en éste de distancia. Ahora quiero hacerte consciente de un par de cosas antes de que sigamos adelante. Y el 1er 1 es que si decides agregar algún texto aquí, cual podemos hacer yendo a campos y usando un toma acostumbrado igual que hicimos cuando teníamos la etiqueta G d. P R, correcto, no es obligatorio ahora porque tenemos las cookies en la política de privacidad. Pero si vas a seguir adelante y agregando aquí tus propios mensajes de texto, se va a estar volviendo completamente blanco y meterte con el diseño por el código. Agregamos, Si quieres agregar en un g d. p r tex, recomiendo encarecidamente que sigas adelante y utilices un elemento editor de texto. Ponlo abajo abajo y escríbalo así en su lugar. Eso no va a faltar con él. Ahora, Elementary en realidad tiene un widget de formulario súper fácil de usar, pero eso es para la versión pro. Pero como habrías notado elemental superfuerte, podría valer la pena invertir en ella si no te interesa tanto. Pero por ahora, vamos a seguir adelante y usar esto porque es más que suficiente. Sigamos adelante y hagamos la siguiente versión. Chicos, voy a hacer clic en éste de distancia. irían a ver en la siguiente conferencia. 18. Opción de opción 2 2 2 en: Entonces en esta conferencia, te voy a mostrar otra versión que puedes hacer por tu correo electrónico. A menudo diseña. Ahora, nuevo, hay innumerables fuera de la ciencia por ahí, pero el diseño anterior era un diseño de sección más completo. Este va a ser una sección más pequeña. Diseñado va a ser más directo al grano. Y este tipo de aperturas se han vuelto realmente populares últimamente. Este tipo de apertura de la ciencia que es. Entonces déjame mostrarte exactamente cómo lucen estos como los hago. Y luego puedes decidir si quieres usar la versión uno o la versión dos para tu propia construcción de página principal. ¿ Verdad? Entonces vamos a empezar aquí, y voy a empezar con bajar un rumbo por aquí. Ahí vamos. Y luego voy a escribir, trae el jabón. 10 hacks de marketing digital así. Voy a seguir adelante y centrarlo, y luego me voy a pasar al estilo porque quiero esto tanto en mayúsculas. Pero también Biggers, voy a transformar un a mayúsculas así y luego vamos a aumentar el tamaño. No voy a ser tímida con esto. Van algo así. De acuerdo, entonces tenemos esta parte. Estoy muy contento con esto. Y ahora vamos a seguir adelante y poner en el correo electrónico. Upton. Correcto. Entonces vamos a desplazarnos hacia abajo hasta que encontremos wordpress. Voy a abrir éste, y aquí tenemos correo Poeta 34 ¿Puedo agarrarlo? Y lo voy a poner justo abajo aquí, abajo del encabezado. Está bien. Y luego me voy a cambiar a la que usamos en la conferencia anterior. Por lo que tenemos este tipo de versión más larga fuera, así luciendo realmente bonito. Ahora, la cosa es que no hay muchas opciones pasando aquí con el widget del poeta masculino ahora mismo. Si estuvieras usando la versión pro off L a mentor, solo podrías estar usando la forma elemental. Podrías estar agregando estos manualmente. Podrías estar agregando las colillas manualmente. Sería mucho más rápido y sencillo, y simplemente lo engancharías al gimnasio masculino. Pero como no estamos usando la versión pro, vamos a trabajar en torno a eso. Entonces si echamos un vistazo a cómo se ve esto ahora mismo, voy a previsualizar los cambios y me voy a desplazar hacia abajo. Podemos ver que todo está a la izquierda derecha aquí. Ahora bien, si quiero este más centro, hay un par de formas en las que podemos hacer esto. No. Una de las formas sería, por ejemplo, que pudiera ir a avanzado para esta columna y pudiera cambiar el margen, ¿ verdad? Entonces ese sería el margen de la izquierda. Voy a ir en link. Y yo podría escribir, por ejemplo, 50 o apartamento más como 200 hace allí. Y entonces podría previsualizar los cambios y desplazarme hacia abajo, y sería mucho más centro. Entonces esto se ve realmente bonito, ¿verdad? Esa es una de las formas de hacerlo. Ahora, el problema con eso va a ser cuando miremos el Responsive Motor, vamos a la versión de tablet. Podemos ver que aquí tenemos este espacio de aspecto realmente raro, ¿ verdad? Si vas a la versión móvil, bueno, bueno, él es sólo un caos, para ser honesto. Pero también podríamos simplemente seguir adelante y empezar a adaptarlo y personalizarlo para móvil y para tablet. Específicamente, vamos a tener que hacer eso de todos modos. Pero te voy a ofrecer en forma adicional y muy efectiva de centrar tu contenido. Entonces echa un vistazo a esto. Que todo lo que voy a hacer es que lo voy a mantener un derecho de escritorio aquí, y en realidad voy a seguir adelante y quitar esta sección. Yo sólo voy a hacer click derecho y bajar a borrar. ¿ Verdad? Entonces voy a ir a sección interna, ¿verdad? Y voy a tirar de eso justo debajo de la cabecera. Entonces lo que hace la sección interna es que permite agregar más columnas, ¿ verdad? Y permite agregar más columnas dentro de esta sección aquí mismo. De lo contrario tendrías que hacer una nueva sección. Pero queremos mantener todo en una sola sección para que podamos hacer una bonita imagen de fondo para toda esa sección. Nos hace así que tenemos dos columnas ahora mismo. Voy a hacer click derecho, y voy a dar click en Agregar nueva columna y adivina qué vamos a poner en el medio aquí . Usted adivinó que vamos a poner en el oped, informa que voy a ir a elementos. Desplázate hacia abajo, poeta masculino. 34 Y yo sólo voy a seguir adelante y añadir ese en el medio. Ahí mismo. Ahí vamos. Entonces se ve así ahora y vamos a ir a la nuestra para poder ver cómo se ve realmente . Ahí vamos. Ahora, recuerda, tenemos la versión larga y queremos quedarnos con la versión larga. Entonces eso sólo significa que esto está demasiado abarrotado ahora. Es tan personalizable y tan fácil en elemental porque puedes ir a la pared justo aquí y luego simplemente puedes moverlo a la izquierda así Muy, muy fácil de diseñar así. Y voy a ir en una extremidad, punto, decir que tal vez quiera ir con 15%. Hagámoslo así. 15%. Y yo voy a golpear 15% aquí también. Vamos Aquí, Ahí vamos. Ahí vamos. 15. 15. Y ahora voy a seguir adelante y previsualizar los cambios, ver cómo se ve y desplazarme hacia abajo. Y está completamente centrado. Eso me encanta ahora. No me encanta esto, así que vamos a seguir adelante y quitarlo, pero me encanta lo centrado que está. Entonces vamos a volver y voy a quitar eso así que se irían. Y ahora si usted sigue adelante y mira al responsable y mira la versión de tableta por ejemplo, podemos ver que esto es perfectamente centro. Se ve realmente bien. Y si nos fijamos en el móvil, bueno, podría ser un poco de trabajo por hacer aquí Aún, pero todavía se ve realmente, muy bonito. Agradezco este diseño, así que estoy feliz por eso. Esto se ve realmente bien. Ahora, lo que vamos a hacer es seguir adelante y añadir un fondo aquí. Ya lo hemos hecho antes. Esto no es nada nuevo. Entonces vamos a ir a editar sección aquí, y luego vamos a ir al estilo, y vamos a ir al tipo de fondo, click en Clásico, y aquí vamos a añadir una imagen. Entonces para hacer eso, necesitamos encontrar una imagen, ¿no? Por lo que los picos obedecen a nuestro buen viejo amigo. Vamos a encontrar algo aquí. Y debido a que esta sección es más recta al grano, voy a ir con un cuadro más abstracto, cierto, porque es sólo una fila. No quieres imagínate para importar tanto, necesariamente. Al menos no con este diseño. Entonces voy a seguir adelante y escribir digital aquí, y luego voy a establecer la orientación para horizontal, y luego sólo voy a empezar a desplazarme aquí abajo y ver qué podemos encontrar. Y, ya sabes, lo que me aparece de inmediato es en realidad éste, porque esto es sólo un proyecto de ley de tonterías abstractas, y eso va a funcionar perfectamente como fondo. Entonces voy a seguir adelante y dar clic en este, y voy a descargar. Es realmente pequeño, también. Eso es lindo. Entonces vamos a descargar y probar este fuera, volver a L. Un mentor, Haga clic en el plus su propia imagen. Y luego me voy a dirigir a subir archivos y luego seleccionar archivos. Y ahí está. Voy a dar clic en elegir y luego insertar medios y aquí vamos. OK, así que no tan emocionante ahora mismo. Y lo primero que vamos a hacer como siempre hacemos es que vamos a elegir la opción de portada, y quiero decir, está bastante apretado, y eso tiene sentido que sea porque realmente no hemos cambiado el relleno es todavía. Entonces vamos a ir adelante a avanzado, y luego vamos a ir al relleno aquí mismo, y vamos a ponerlo a 50 luciendo mucho mejor. Vamos hasta con 17 esta vez. Ahí vamos. Y luego vamos a seguir adelante y previsualizar los cambios. Basta con ver cómo se ve ahora mismo desplazándose hacia abajo. De acuerdo, Esto en realidad se ve muy, muy bonito. Ahora, hay un par de cosas que realmente quiero hacer. Yo quiero oscurecer un poco el fondo. Creo que el color debería ser demasiado agresivo. Quiero cambiar el color del encabezado. En realidad, blancos puedo ver luce el bonito cabello, y lo vamos a tomar desde ahí. Voy a empezar con eso. Entonces voy a pasar a la edición de la sección otra vez, y luego voy a ir al estilo, y luego voy a ir a la superposición de fondo, ¿de acuerdo? Y luego voy a dar click en clásico y ahora color. Y voy a usar el negro así porque querían darle unos colores más oscuros. Simplemente voy a seguir adelante y oscurecerlo así. Hay algo así. El viejo es un poco oscuro, ¿no? Algo así. Oh, eso es realmente bonito. Eso me gusta. De acuerdo, entonces es mucho, mucho más oscuro. Y ahora voy a ir al encabezado con sólo hacer clic en él. Haga clic en el color del texto aquí, y hagámoslo blanco. OK, realmente apreciando este diseño, y luego vamos a previsualizar los cambios. Entonces de esto a esto, Ok, me gusta esto. Ahora hay un poco demasiado aire y demasiado espacio es voy a cambiar la posición de la imagen de fondo aquí dentro, así que sigamos adelante y hagamos eso de inmediato. Entonces voy a ir a editar la sección una vez más, y voy a ir a diseñar, y voy a ir al estilo aquí y luego a la posición que voy a probar Center center. Por lo general va muy bien con el centro uno, y voy a comer cambios de vista previa. Oh, realmente me encanta esto. Entonces esto es exactamente de lo que estoy hablando con este tipo de trasfondo abstracto que realidad no significa nada, no capta la atención. Pero da una agradable sensación porque esta es la parte importante, ¿no? Consigue los 10 mejores hacks de marketing digital. Nombre correo electrónico, envíame los hacks. Directamente al grano muestra lo que quieres y tiene un hermoso diseño. Y este diseño también va de la mano con lo que estamos ofreciendo aquí, que son hacks, ¿ verdad? Entonces realmente estoy apreciando esto. El tipo de contraste en el blanco rojo y tener el blanco limpio completo pasando con el texto negro y luego encima en éste. Así que realmente, muy agradable. Me encanta este diseño, pero en realidad creo que una sección completa va a encajar mucho mejor a este. Entonces lo que voy a hacer, porque realmente me encanta este. Dijo, voy a seguir adelante y dar click derecho aquí. Voy a dar click en guardar como plantillas y voy a escribir email, opt en secciones más pequeñas como esa, y voy a dar click en Guardar. Ahí vamos. Por lo que se guarda. Puedo hacer clic en éste hacia abajo, y puedo quitar éste ahora mismo sin tener un ataque al corazón. Está bien. Y ahora voy a seguir adelante y dar clic en plantillas de Addie. Voy a ir a mi plantilla, y voy a agregar en el email abrir sección completa haciendo click en inserciones. Sí, cuando importe todo y luego recuperamos éste. Realmente aprecio este diseño. Ah, y a veces mientras importamos las plantillas, recuperamos la barra lateral. No sé por qué es eso, pero todo lo que necesitamos hacer es bajar a establecer las cosas aquí abajo y luego bajar al diseño de página e ir con lo elemental lleno con. Si estuvieras usando lienzo fuera de curso, vas con lienzo, pero estamos usando full with. Entonces solo vamos a seleccionar esa y todo cambia de nuevo así como así. Así que vamos a dar la vista previa y asegurarnos de que todo se vea bonito y hermoso desplazándose hacia abajo. Y ahí estamos. A mí me encanta esto. Entonces lo que vamos a hacer en realidad es usar la segunda versión fuera del email off cosa que acabamos de crear para otra página, más probable es que la estrella lágrima Patrón. Va a querer poner en otro correo a menudo. Entonces estoy muy, muy feliz por estos tipos. Gran trabajo. Si has estado siguiendo y luego decides qué tipo de decidir vas a querer para tu página web Y puedes, por supuesto, tener ambos porque vas a querer tener este correo a menudo más de una vez. Pero la mayoría de las veces, no quieres que se repita el mismo diseño una y otra vez. Entonces si tiene alguna pregunta, estará en la Q y A. Nos vemos en la próxima conferencia 19. Sección de Showcase parte 1: Muy bien, entonces en esta conferencia, vamos a seguir adelante y crear nuestra sección de vitrina. Y lo que es una sección de vitrina básicamente va a ser una sección donde exhibas algunas ofertas que tienes en tu página web. Ahora para nosotros, eso va a ser un par de nuestros cursos más vendidos ahora mismo. Para ti, eso podría ser una cierta oferta que tienes con tu servicio. Podrían ser ciertos productos, etcétera, etcétera. Ahora vamos a profundizar más en cómo vender productos en la sección Wu calmer donde vamos a aprender a convertir tu sitio web en un sitio de comercio electrónico. Pero por ahora, vamos a crear nuestra sección de vitrina, y te voy a mostrar cómo voy a crear este. Entonces la idea es que lo primero que quiero hacer es crear un encabezado. Entonces solo voy a arrastrar y soltar esa de aquí, y luego voy a escribir en el rubro cursos más vendidos como ese. Voy a centrarlo y luego me voy a pasar al estilo y voy a aumentar el tamaño. Vamos con Sí, digamos que vayamos con 50. Creo que eso se ve bien. Y luego voy a seguir adelante y convertirlas en letras mayúsculas. Eso ya se ve mucho mejor. De acuerdo, así que esto es lo básico que se ve realmente bien. Ahora lo que quiero hacer es mostrar cased tres fuera de nuestros cursos más vendidos ahí. Entonces lo que voy a necesitar son tres columnas, ¿verdad? Pero también voy a querer tener un bonito fondo o un solo color. Veremos a medida que sigamos con el diseño aquí qué voy a elegir. Pero eso significa que voy a tener que usar una de estas intersecciones en lugar hacer click aquí. Porque si hago clic aquí, voy a conseguir una nueva sección, y entonces va a ser más difícil usar el mismo fondo o la misma persona que llama. Recuerda, hemos pasado por estos antes, así que voy a seguir adelante y arrastrar en la sección interna y ponerlo abajo bajo los mejores cursos de venta así. Entonces ahora llegamos a columnas y quiero 1/3. Entonces todo lo que voy a hacer es correcto. Haga clic y, a continuación, agregue nueva columna. Y ahí vamos. Ok, entonces para esto, el elemento que voy a estar usando es en realidad uno nuevo y se llama en cuadro de imagen . Está bien. Y la razón de eso es simple. Vas a ver exactamente por qué lo voy a usar ahora. Si lo arrastro y lo suelto aquí, vas a ver que esto tiene el diseño perfecto para estar exhibiendo un servicio de oferta de producto , sea lo que sea porque se llega a agregar en una foto fuera de ella aquí, escribir un encabezado y luego una descripción Me encanta este conjunto de. Creo que es absolutamente impresionante. Entonces voy a seguir adelante y empezar a editar esto, Pero antes de hacer eso, realidad voy a arrastrarme hacia más. Entonces hagamos una más aquí y luego sigamos adelante y hagamos una más aquí. Ahí vamos. Empecemos a diseñar. Entonces el 1er 1 aquí, vamos a seguir adelante y sumar en nuestra imagen, ¿ verdad? Entonces voy a dar clic aquí, y me he quitado la libertad, agregando yo curso foto aquí de antemano ya. Tenía que buscar para encontrar ese, pero el 1er 1 en realidad va a ser nuestro curso de marketing digital. Entonces voy a estar insertando ese aquí. Ahí vamos. Y luego voy a escribir marketing digital completo, ¿de acuerdo? Y entonces voy a estar agregando en un texto aquí, unas descripciones. Voy a escribir algo como, ¿ Estás buscando x expandir tu negocio con arte? Curso completo de mercadotecnia digital. Obtienes más de 40 horas de descuento enseñando de calidad algo así. Ahora bien, esto es algo que estoy escribiendo sobre importaciones. Vas a querer tomarte un poco más de tiempo haciendo un poco más efectivo en relación con tu cliente y realmente transmitir el mensaje. Pero para esta demostración, vamos a quedarnos con eso. En realidad estoy bastante contento con eso. Y lo siguiente que podemos hacer es ir adelante y un vincularlo aquí a lo que sea que estamos ofreciendo ahora, ¿sería algún producto cierto aquí? Por ejemplo, lo que podría hacer es seguir adelante y pasar a cursos aquí dentro. Podría hacer clic derecho copiar este enlace, y luego podría simplemente agregarlo aquí, ¿no? Pase ese enlace ahí dentro. Por lo que cuando hagan clic aquí, se les va a llevar a la sección de cursos. O podríamos seguir adelante por nuestro propio caso por ejemplo y vincularlo directamente a nuestro curso que sí conoces . ¿ Verdad? Entonces también vamos a estar siguiendo a la gente . Eres a mí Curso donde realmente lo estamos vendiendo. Entonces ahí va a ser donde pongamos el enlace, y luego tenemos la posición de la imagen. Podemos cambiar esto hasta cuando una pantalla diferente. Pero me gusta mucho la parte superior, la posición media, así. De acuerdo, así que pasemos al estilo ahora, algo de lo que realmente soy un fan está aumentando en realidad el tamaño así. Por lo que quería realmente estar saliendo así. Creo que se ve realmente bonito. Y no voy a estar jugando con el espaciado. Al igual, creo que se ve bien a los 15 por defecto. También tenemos nuestra animación hover. Podríamos usar crecer para esto, pero en realidad no voy a estar usando eso porque tengo un diseño diferente en este momento, al menos en mente, y veremos cómo resulta esto. ¿ De acuerdo? Y entonces también podríamos sumar en los efectos de hover. Ahora, antes de que hagamos eso, en realidad quiero extender y poner todos estos fuera sólo para poder echar un vistazo de cómo va a quedar esto . Entonces voy a seguir adelante y dar clic aquí. Voy a estar eligiendo mi imagen. Y aquí dentro voy a poner el logo de Shopify. Ahí vamos. Y aquí dentro, voy a hacer lo mismo. Pero voy a poner el logotipo de Amazon. Las ciudades son todos cursos diferentes como este. Ahora, esto es algo realmente, realmente genial, chicos. Y ten esto en cuenta cuando estés diseñando, porque va a ahorrar mucho tiempo. Por lo que ya he hecho algunos diseñando ahí dentro. Por ejemplo, lo he incrementado con off la imagen. Ahora bien, si quiero copiar todos estos estilos aquí a estos todo lo que necesito hacer es correcto. Haga clic aquí y haga clic en Afrontamiento. Y luego entro aquí y hago click derecho y hago click en estilo de ritmo por aquí y ves que se van a adaptar a ese estilo de afrontamiento de inmediato. Es un salvavidas del tiempo. Me encanta esa función. ¿ De acuerdo? Y entonces seguiríamos adelante y editaríamos estos también. Shopify, drop ship siendo esto, escríbelo así aquí. Vamos a escribir Amazon f B a.Ahí vamos. Ahora, claro, vamos a querer una descripción también. Pero sólo voy a ahorrar eso por ahora, es para ahorrar un poco de tiempo. Entonces veamos qué tenemos ahora mismo. Voy a previsualizar los cambios. De acuerdo, así es como se ve ahora mismo. Nadie aspecto realmente importante a la hora de este fichaje y cuando estás haciendo columnas como esta es asegurarte de que tengas la misma cantidad fuera de texto en tus líneas. Entonces si tienes la cabeza o querías estar en una sola fila, similar y similar y abajo tenemos la descripción en tres filas. 123 Y queremos mantenerlo así porque si tenemos cuatro filas mientras que las otras tienen tres, toda esta fila va a ser desplazada, así que esto va a ser un poco más bajo o más alto que el resto, y es sólo va a estropear todo el diseño. Entonces ese es un consejo fuerte para mantenerlos en línea cuando estás diseñando columnas y filas como esta. De acuerdo, entonces estoy bastante contento con esto ahora. Yo quiero seguir adelante y hacer un poco más de espacio. Ahora bien, recuerdas que hablamos de esto antes. Por ejemplo, tenemos algo de espacio entre esta y esta sección. Tenemos algo de espacio entre estas secciones, y yo quiero hacer lo mismo aquí también. Entonces voy a entrar aquí arriba y editar esta sección. Voy a ir a avanzado. Entonces voy a seguir adelante y entrar en margen, y voy a poner esto, digamos a los 70 y a ver cómo resulta esto. Entonces conseguimos un poco más de espacio aquí. También tenemos un poco más de espacio abajo. De acuerdo, creo que se ve bastante bien ahora mismo. Hay mucho espacio pasando entre aquí. Ahí vamos. Ahora, yo también quiero algo de espacio entre estas columnas, es decir los cursos y el propio encabezado. Entonces lo que voy a hacer es seguir adelante y dar click aquí arriba para editar este cierto llámalo esta columna, y voy a ir a avanzado aquí arriba, y luego me voy a sentar saliendo a digamos 50 ¿verdad? Y voy a hacer lo mismo por esta columna. Voy a dar click aquí arriba, ir a avanzado. Establezca el relleno en 50 similares aquí, haga clic arriba su avanzado y configure el relleno en 50. Por lo que ahora podemos ver que hay un poco más de espacio en general ahí, algunos lo relleno entre la cabecera. Y también hay algo de relleno entre los propios cursos. Entonces vamos a revisarlos, y luego nos desplazamos hacia abajo y esto ya está empezando a lucir mucho, mucho mejor. Agradezco este bonito look limpio ahora mismo también podemos ver que hay más Rose pasando aquí que va a estropear un poco el diseño. Voy a querer agregar algunos mensajes de texto adicionales aquí. Voy a seguir adelante y hacer eso por ahora, pesar de que esto es una demostración. Entonces voy a dar clic aquí, y voy a ir al contenido y voy a escribir Lleva tu negocio al siguiente nivel, y luego sigamos adelante y previsualizar los cambios y ver cómo se ve va a desplazar hacia abajo. Y ahí vamos. Entonces hay 444 Ahí vamos. Se ve mucho mejor ya. De acuerdo, entonces lo siguiente que quiero hacer aquí es en realidad agregar botones aquí. De acuerdo, Entonces si hubiera dicho un enlace, por ejemplo, el enlace que lo cociné antes así, podemos ver que la imagen se hace clicable y el encabezado, pero el texto no se hace clicable. Y la buena noticia es que hay mucho espacio para hacer click aquí, sobre todo porque hicimos la imagen más grande. Pero también queremos ser súper duper claro aquí, y por eso queremos poner botones abajo, ¿ verdad? Entonces vamos a seguir adelante y hacer eso. Y en realidad hay algo realmente bonito que puedes hacer cuando hemos llegado tan lejos en el curso, ¿ verdad? Y es que podemos desplazarnos todo el camino hacia arriba y usar este bonito botón que ya pasamos tiempo para terminar el letrero podemos sobrellevarlo, y luego podemos desplazarnos hacia abajo. Podemos hacer click aquí, y en realidad podemos seguir adelante y pegarla. Y eso es increíble. Ahora date cuenta de que va a tener toda la configuración fuera del botón que usamos antes. Eso significa que eso va a decir, aprender más va a tener este enlace, etcétera, etcétera. Pero sólo vamos a seguir adelante y quitar ese eslabón. Vamos a seguir adelante y ponernos en este enlace aquí también, ¿ verdad? Y luego vamos a ir a opciones de enlace y vamos a dar click en abrir en nueva Ventana, porque cuando haces clic aquí, no quieres que la gente salga realmente de esta página, ¿ verdad? ¿ Quieres que se queden aquí mientras vas a tus cursos? Entonces puedes tener mawr cosas buenas mientras se desplazan hacia abajo. Entonces vamos a tener esto abierto en nueva ventana, ¿de acuerdo? Y vamos a tener lo mismo para este para que cuando hagan clic aquí, vayan a opciones. Esto va a estar abierto en Nueva Ventana preguntó. Bueno, entonces vamos a seguir adelante y poner estos también con el no siguiente va a ir a opciones de enlace. Pueden abrir en nueva ventana ahí, click en abrir en Nueva Ventana. Y ahí vamos. Ahora probablemente notes que hay un montón de cosas simplemente apareciendo a medida que voy con el diseño. Y así es como luce el fichaje. Obtienes las ideas, cubres esas cosas, obtienes ideas nuevas, agregas, pruebas cosas Esto es muy intuitivo, Esta ciencia. No sé cómo va a terminar esto, pero tengo una sensación realmente buena porque tengo un esquema básico con esto pasando, tengo un encabezado. Yo quiero tener estas tres columnas con los cursos y luego quiero los fondos. De acuerdo, así que ahí va a ir. No, yo también quiero mandar a esto para que se vea mucho, mucho mejor. Y entonces estoy bastante contento con esto. Lo que voy a hacer es que voy a cubrir esto y lo voy a poner aquí también. Voy a pasar ese ritmo, y voy a pegar ese en luce muy, muy bonito. Por lo que hasta ahora, en realidad estoy muy feliz por esto. Ahora quiero hacer una cosa más, y eso es en realidad agregar una no otra colillas y abajo aquí abajo. Y esto va a ser una vista. Todos los cursos abajo. Por lo que quiero que tengan la capacidad de ver que estos son nuestros cursos más vendidos que estamos ofreciendo. Se puede aprender más sobre ellos y luego también ver todo por supuesto, esto aquí abajo para ver más cursos tenemos más de 20 ahora darse cuenta de que esto no tiene que aprenderse más. Esto podría ser, por ejemplo, contactarme. Esto podría ser ya. Esto podría ser cualquier cosa. No importa cómo elijas mostrarlo. Ahora para mí, voy a usar para aprender más porque vamos a tener esto enviado más tarde a ti. A mí, ¿verdad? Entonces voy a seguir adelante y agarrar el enlace sobre ti a mí y jugo conectarlos aquí. Y de esa manera llegan a entrar en la página de aterrizaje de ti a mí y aprender más allá. Ahora bien, si tienes todo de tu lado, podrías tener un a estas alturas, podrían comprar el producto, o podrías enviarlos a otra página. Entonces aquí tenemos esto, pero, um, voy a seguir adelante y centrarlo así, y voy a seguir adelante y hacerlo grande. Yo quería ser más grande que los demás, ¿de acuerdo? Y también quiero que el texto sea vista todos los cursos que iban a ir, y voy a ir al estilo, y luego voy a ir a la tipografía porque quería ser mayúscula. Igual que eso. Se ve muy bien en. Yo quería tener los efectos hover. Voy a seguir adelante y cobre este, y voy a pegar el estilo. De acuerdo, entonces ahora en realidad consiguió el mismo tamaño también, Pero podemos seguir adelante y volver al estilo, ir a la tipografía y simplemente aumentar el estilo así. También lo hicimos un poco más largo porque agarramos todo el estilo del anterior . Pero en realidad, realmente disfruté ese look. Entonces vamos a mantener esa mirada. Ahora, una cosa que sí quiero hacer es hacer que esto sea un poco más redondo. ¿ De acuerdo? Entonces voy a ir con la frontera y en realidad armar estas fronteras para, digamos , 20 y las fronteras. Como puedes ver, eso va a hacer que los bordes sean más redondos. Voy a ir con 30. Ahí vamos. Echemos un vistazo a nuestro diseño actual. Seguramente te darás cuenta. Preguntado hace que estás reconociendo cada vez más opciones y siempre y cuando conozcas las opciones y funciones básicas , las opciones de este signo son infinitas. Es realmente agradable. Entonces, vamos a desplazarnos hacia abajo y comprobarlo. De verdad estoy disfrutando esto ahora. Quisiera un poco más de espacio entre aquí. Entonces vamos a seguir adelante y ocuparnos de eso. Voy a bajar. Voy a hacer click care, ir a avanzar, y luego voy a poner algo de relleno aquí. Entonces pongamos como, es entre C o algo así. A lo mejor hasta en tercer lugar. Ya sabes, vivir al borde. 30. Vamos a probar esa. Simple probable vista previa de comm de nuevo. Desplácese hacia abajo. Y sí, esto me gusta mucho, mucho más. Está bien, chicos. Entonces esto se ve realmente bien. Ahora, hay un par de cosas más que me gustaría hacer aquí dentro, ¿no? Y lo primero sería que me gustaría que algo pasara cuando mueva el ratón por aquí. Entonces en este momento es bastante jugar es bastante aburrido. Hay algunas acciones en el fondo. Eso lo podemos ver ahora mismo. A mí me gustaría que pasaran más cosas. Entonces lo que voy a hacer es que voy a ir a l Un mentor como este, y voy a empezar a añadir editar los fondos para estas columnas porque no quiero al papa. Yo quiero que todos estos dos tengan en acción cuando pases el cursor sobre el ratón. Entonces, ¿qué? Voy a seguir adelante y hacer a continuación es asegurarme de que haya algo de acción pasando cuando pase ratón sobre esta manera hacen que todo el sitio web sea un poco más interesante y un poco más satisfactorio para pasar el ratón sobre. Entonces lo que voy a hacer en realidad es hacer click en la columna de aquí arriba. Entonces empezamos a editar esta columna, ¿recuerdas? Tenemos 123 columnas diferentes pasando aquí. Voy a ir a avanzado, y luego voy a ir al estilo, ¿ verdad? Y con estilo, tenemos antecedentes. Voy a pasar a pasar a rondar y terminar con este hover. Vamos a ir al clásico y luego al color. Ahora, aquí llegamos a jugar un poco con el color. Entonces si solo elijo estas geniales y lo reviso Bueno, esto se ve bastante espantoso. Para ser honesto, no estoy disfrutando de esto en absoluto. Esto no me gusta. Entonces si nos ponemos Green, ¿qué se ve un poco más bonito? Podríamos hacer esto. Se ve bien, ya sabes, podemos hacer el grado de luz ahora. Esto en realidad se ve bastante bien. Estoy disfrutando de los efectos de esto. Entonces esto es bastante bonito. Ahora bien, si sigo adelante y elijo esto y solo previsualizaría los cambios para ver cómo se ve. Y luego nos desplazamos hacia abajo. Obtenemos este bonito efecto verde cuando estamos flotando sobre la mano que en realidad se ve bastante bien. Yo estoy disfrutando de esto. Entonces lo que voy a hacer es en realidad seguir adelante y mantener este bonito color verde en marcha porque se ve muy, muy bonito con estos efectos. Ahora podríamos usar nuestro rojo clásico también. No tengo la combinación de colores aquí, pero normalmente cuando tienes tanto rojo, puedes ver que va a estropear el gran color de la descripción. Y además, no es muy acogedor cuando estás ofreciendo un producto y estás poniendo esta gran libra detrás de su ahora, Red se ve mucho mejor en los botones como este en general. Por lo que este verde claro que es mucho más acogedor. Entonces eso es exactamente a lo que vamos a estar yendo para disfrutar realmente este diseño. Entonces todo lo que necesito hacer aquí es ir adelante y dar click en copiar y luego hacer clic derecho y pegar estilo , clic derecho y pegar estilo. Y mira esto ahora ahí Es que algunos efectos están pasando. Seguimos adelante y semanalmente vienen los cambios de vista previa se desplazan hacia abajo y podemos ver que hay algunas cosas pasando aquí mismo. De verdad estoy disfrutando esto. De verdad, realmente bien. Entonces, chicos, esta waas parte uno Ahora en la siguiente conferencia, segunda parte, realidad vamos a seguir adelante y cambiar el color, el fondo, odiado tres colores o a un fondo. Vamos a probar algunas opciones diferentes fuera y ver dónde aterrizamos. Y luego voy a seguir adelante y asegurarme de que los botones encajen con el tema de color que elegimos . Y vamos a completar esto y hacer que toda la sección se vea realmente, muy bien. De acuerdo, chicos, nos vemos en la próxima conferencia para la segunda parte. 20. Sección de Showcase parte 2: Muy bien, chicos. Bienvenido de nuevo. Entonces vamos a seguir adelante y seguir con este diseño. Es muy intuitivo. Es muy emocionante. Vamos a ver dónde aterriza esto. De acuerdo, entonces lo que quiero hacer ahora mismo, es empezar a jugar un poco con el fondo aquí mismo, ¿ verdad? Entonces para hacer eso, vamos a seguir adelante y en realidad elegir un fondo en picos un día que va a ser blanco, ¿ verdad? Porque podemos ver ahora mismo que el blanco realmente funciona realmente, muy bien ahora mismo estoy disfrutando de este blanco de regreso, pero vamos a seguir adelante y usar algún tipo de imagen de fondo solo para ver cómo funciona. Ahora, recuerda antes, en realidad fijamos los márgenes con la edición aquí cuando editamos la sección. Eso va a ser un problema si dijéramos un color de fondo, un color determinado o una imagen de fondo, ¿ verdad? Porque sólo va a estar cubriendo esta área de sección. Esto se va a dejar blancos. Eso no se ve muy bien. Entonces vamos a volver aquí en preparación para usar una imagen de fondo. Vamos a dar click en la sección de edición. Vamos a ir a quitar el margen porque realmente no podemos tener el margen entonces y luego vamos a poner algo de relleno. Y aquí tenemos dos opciones. O podríamos ir y poner algo de relleno así, y eso va a hacer que estos sean aún más largos y estrechos de esta manera. O podríamos seguir adelante y un los avergonzó y Onley puso 70 en la parte superior. Entonces conseguimos este espacio que originalmente teníamos en este momento ¿qué? Voy a seguir adelante y usar enlace real estos juntos para que todos se avergoncen así y obtenemos un gran efecto de relleno porque estamos palmaditas la sección fueron palmaditas, las columnas, etcétera. Entonces sigamos adelante y veamos cómo se ve eso, porque eso va a hacerlos más largos cuando estemos exhibiendo los propios productos así que desplazándonos hacia abajo, podemos ver que se ven bastante diferentes a estas desplazándonos hacia abajo, alturas. Y realmente estoy apreciando este diseño. Se ve mucho más sólido, mucho más estrecho. Creo que se ve muy bien. Voy a quedarme con esto. De verdad lo estoy disfrutando. Hay más espacio al tamaño, pero eso solo me da un efecto más largo, más elegante. Entonces sigamos adelante y busquemos una imagen de fondo ahora porque sabemos que el fondo va a ser bastante grande, ¿ verdad? Y también sabemos que el color blanco es algo que encaja realmente bien. Vamos a seguir adelante y usar algún tipo de imagen inspiradora que vamos a usar de nuevo hacia la libertad porque me parece que eso da unos resultados realmente buenos. Pero también vamos a ir a cambiar la orientación a horizontal. Vamos a fijar el tamaño para que sea por lo menos 1900 a 1000 ¿verdad? Para que va a ser grande, Una linda, buena calidad y todo. Y si es a pequeño, esto generalmente va a ser borroso y no encaja, y simplemente no se ve bien. Y esta es la siguiente interesante opción. Podemos ir a color aquí y dar click en blanco. ¿ Verdad? Entonces si hacemos eso al hacer click ¿qué? Sólo vamos a conseguir esta bonita imagen con fondo blanco. Entonces pensemos en nuestro punto focal ahora mismo. Entonces, con nuestro turno de firmar, tenemos estas tres columnas pasando. Por lo que miramos nuestro sitio web, realidad están cubriendo el medio de la imagen ahí mismo, muy centro. Están mucho en el medio. Y eso significa que no podemos tener cosas pasando en medio porque entonces todo va a parecer caótico. Entonces lo que tenemos que hacer es buscar algo que tenga una imagen abierta y bonita. Entonces esto, por ejemplo, no funcionaría. Este no funcionaría, y ni siquiera éste funcionaría porque estarían cubriendo al pájaro. Vamos a buscar algo que tenga más espacio. Esta sería una bonita foto de que pongas cosas a la derecha. Se puede ver el potencial en este tipo de imágenes. Ahora, aquí en realidad hay algo donde realmente estamos hablando. Chicos, miren esta hermosa imagen. El asunto Onley que está pasando es esto. Creo que es un niño balanceándose en el swing hacia abajo a la derecha, y eso es hermoso porque podemos poner sobre todo con todo el relleno que hemos hecho, podemos poner todo tan centrado aquí si llegamos a poner nuestro material aquí y esto es no voy a cubrir nada, así que voy a probar este tema. Probable yendo descarga gratuita, ¿recuerdas? Bueno, bajo un megabytes, esto se comprueba, lo vamos a descargar, y luego vamos a volver y vamos a ir a editar la sección aquí. Eso no es optimizado. No hay márgenes entre aquí, y vamos a pasar al estilo. Vamos a ir al fondo, mantenerlo normal, Quicken Classic, y luego dar clic en Imagen. Ahora vamos a subir ese archivo selecto. Y aquí está. Sólo voy a dar clic en elegir y luego dar clic en insertar medios. De acuerdo, entonces esto es lo que estamos consiguiendo en este momento, Así que no hay que realmente no se vea tan bien. Bueno, se ve decente, el bonito, pero sólo tenemos estas nubes de fondo. Y no es por eso que conseguimos esta imagen. Entonces lo que voy a hacer, es click en talla. Siempre hacemos esto y luego hacemos clic en destapar. Entonces esto se ve mucho, mucho, mucho mejor. Agradezco esto Ahora. Vamos a seguir adelante y dar click en la vista previa para asegurarnos de que nada realmente se derrumba con el niño para que las cosas no hagan que no se colapsen entre sí, cubran algún texto o algo así desplazándose hacia abajo. Podemos ver que esto realmente se ve perfecto. Wow, mira esto. Los chicos se ven realmente bonitos. Entonces me gusta mucho este diseño. Entonces, por ahora, lo que realmente quiero seguir adelante y cambiar es que hay fondos rojos pasando aquí en este momento, y eso es realmente bueno, pero porque estamos usando el verde así, yo le gustaría también poner este verde en la vista Todos los cursos, vale, porque eso le va a dar un efecto diferente. Eso también va a hacer que destaque de los botones de orden. Entonces vamos a seguir adelante y hacer eso. Voy a dar click en este botón aquí mismo. Se irían y luego me voy a ir al estilo. Voy a ir al color de fondo y voy a poner el color de fondo a este verde más oscuro aquí mismo. Ahí vamos. Voy a estar contento con eso. Y luego voy a dar clic en Hover porque ahora cuando muevo el ratón por encima, todavía se vuelve como una amenaza. Y eso no es realmente agradable. Por lo que voy a cambiar el hover click en esto y llevado en deleite Verde. Ahí vamos. Entonces ahora cuando paso el cursor, mi ratón sobre él aparece así y también se pone un poco más ligero. De verdad, muy agradable. Entonces sigamos adelante y previsualicemos los cambios desplazándose hacia abajo. Está bien, esto se ve bien, chicos. Ahora, en realidad hay una cosa más que me gustaría hacer aquí, y es hacer salir un poco más a estos papa. Ahora, realmente disfruté el look. Me encanta este hecho de que tenemos al niño aquí abajo y todo se está alimentando tan agradable, para ser honesto, pero aun así me gustaría cambiar esto un poco haciéndoles pop. Y la forma en que lo vamos a hacer es hacer realmente blanco el fondo de estas imágenes . Entonces volvamos a la mesa de dibujo. Da click aquí, y voy a dar click en la columna. editor escribe aquí, y luego me voy a ir al estilo, ¿ verdad? Voy a ir al tipo de fondo, y voy a seleccionar la persona que llama y hacer clic en blanco. Ahí vamos. Entonces lo que voy a hacer es en realidad tú haces lo mismo por esto. Llámalos. Voy a dar clic a su ir al estilo de fondo tipo color lo dijo al blanco. De igual manera, aquí da click en este. Ahí subimos ahí. Haga clic en este. Ir al estilo establecer el tipo de fondo de color clásico y blanco. Está bien, ahí vamos. Y luego voy a hacer clic, um, vista previa de los cambios, y vamos a ver cómo resulta esto. Desplazándose hacia abajo. Vale, Entonces lo que estoy amando es el blanco Ok, el blanco se ve, super duper NYSE. Lo que no estoy amando en este momento es el hecho de que todas estas estén unidas. A mí me gustaría un poco de espacio entre estos, así que vamos a seguir adelante y ocuparnos de eso. Entonces para ello, voy a seguir adelante y dar clic en esta columna y editarla. Voy a ir a avanzado, y podemos ver que ya tiene el relleno. ¿ Verdad? Pero si pongo algún margen aquí como, digamos 25 podemos ver que empieza a salir un poco. Podemos incluso ir, ya sabes, ir un poco mientras pongámoslo a 30. Ahí vamos y podemos hacer lo mismo aquí también. Vayamos a este. Acude a avanzado. Ir al margen. Ponlo a 30. Ve a este. Pero ustedes los llaman Margen Avanzado 30. Ahora se hace aún más largo. Y me encanta esa bonita exhibición larga. Entonces vamos a comprobarlo ahora mismo desplazándose hacia abajo Y ahí vamos. Chicos, creo que esto se ve realmente super bonito. Ahora vemos el insee de la desesperación también con la diferencia en el texto Ling Así que vas a tener que ser realmente cauteloso asegurándote de que el texto se pregunte mucho tiempo. Ahora, eso está un poco fuera de arte, pero es Oh, tan importante. Ahora sí tenemos un par de problemas nuevos, si van a seguir aquí mismo, el número uno sería Tenemos que cambiar este texto. Entonces eso es lo primero que vamos a hacer. Pero yo también miro, el chico está cubierto. Eso no está bien, Pero primero sigamos adelante y cambiemos de nuevo este texto. Entonces voy a pinchar aquí. Eso va a ir y luego ir al contenido. Simplemente voy a seguir adelante y quitarles estos y ver si esto funciona. Desplázate hacia abajo y allá vamos Ahora en realidad son más o menos aún son completamente, incluso impresionantes. Ahora también hay un problema, por supuesto, porque este encabezado es un poco largo, pero en este momento están decentemente. Incluso podemos hacer esto más agradable una vez que empiezo a trabajar y en realidad ponerle una descripción adecuada en estos también. Entonces, como puedes ver, lo que tenemos aquí en este momento es que hemos diseñado nuestra página de escaparate donde tenemos nuestros cursos más vendidos y que para ti podría ser cualquier cosa. Podrían ser sus servicios. Podría ser ciertos productos podrían ser ciertas ofrendas. Sea lo que sea que tengas que quieras exhibir. Y estamos exhibiendo nuestros cursos. Tenemos este bonito efecto hovering de verde. Cuando rondo sobre, tenemos este bonito efecto papa que el fondo fuera, todos ellos. Y también tenemos esta gran, bonita vista, todos los cursos. Pero voy a seguir aquí ahora mismo. Lo único que me quedaría para editar aquí en este momento sería editar la descripción de estos para seguir adelante y agarrar los enlaces y simplemente dar click en éste y establecer el enlace aquí abajo con esos enlaces. Establece ese enlace, luego ve adelante al botón aprender más y configura ese enlace también, ¿ verdad? Y entonces establecería el enlace para ver todos los cursos a la sección del curso. Entonces chicos Así es como puedes exhibir algo en tu página web, sobre todo usando múltiples columnas. ¿ Verdad? Tan gran trabajo en llegar hasta aquí. Recuerda, cuando se trata de este signo, es interminable. Y una última cosa para recordar que cuando estás haciendo espacio aquí arriba, puedes usar márgenes. Si estás usando un fondo blanco y quieres mantenerlo blanco que todo esto, bien. Pero necesitas usar el relleno cuando guardas un fondo como este o si estás cambiando el color del fondo. De lo contrario vas a meter este espacio en medio así. Y eso simplemente no se ve bien también, recuerda, ese margen está en Lee para hacer espacio. Y no es bueno si vas a seguir corriendo ahí. Entonces estoy súper feliz con esto, chicos. Nos vemos en la próxima conferencia. 21. Menú palillo: Muy bien, chicos, en esta conferencia, vamos a aprender a hacer nuestro menú pegajoso. En otras palabras, vamos a hacer que nuestro menú se adhiera a la pantalla a pesar de que nos estamos desplazando en nuestro sitio web. Entonces si miramos cómo se ve en este momento, si me desplaza hacia abajo, el menú desaparece. Correcto, porque está sobre Lee aquí arriba ahora mismo. Y si me desplaza hacia abajo, ido como magia ahora, lo que queremos hacer es que queremos hacer este palo, correcto. Entonces cuando nos desplazemos, todavía va a estar aquí arriba. Todavía van a tener acceso al inicio aquí al curso de sección. Todo va a ayudar con la navegación. Se ve muy profesional. Entonces lo que vamos a hacer es que vamos a volver, vamos al menú aquí, y luego vamos a salir al panel. Esto en realidad no es algo que vamos a estar haciendo una elemental, pero va a ser parte de para el signo d elemental que hemos creado hasta ahora. Entonces vamos a seguir adelante e ir directamente a enchufes aquí y dar click en agregar Nuevo. Vamos a usar un enchufe para esto y Es un realmente ligero con enchufamiento preguntado. Bueno, y entonces vamos a buscar un menú pegajoso así. Y luego vas a conseguir cada vendido aquí abajo que dice mi menú pegajoso. También puedes buscar esto de inmediato . Todo es una palabra, mi menú pegajoso. Entonces aunque no esté probada con esta versión, sé que funciona. Es un enchufe bastante simple en ligero, pero hace el trabajo muy bien. Entonces me encanta este. Voy a seguir adelante y dar clic en Instalar ahora y después voy a dar clic en Activar. Está bien, así que está instalado. Está listo para salir, pero todavía vamos a bajar y entrar en la configuración aquí abajo. Entonces para algunos de ustedes, esto en realidad va a empezar a funcionar de inmediato. Pero para algunos otros, vamos a tener que hacer un poco más de edición antes de que funcione. Y eso es por esto llamado palo it clase. Ahora tenemos un elemento de menú o cabecera, generalmente llamado la barra Navigacional Nab Bardem. Pero no todo tiene a estos nombres. Si estás usando un tema como nosotros, por ejemplo, eso tiene un nombre diferente. Esto no va a estar funcionando por defecto, pero si estás usando otro tema, simplemente podría. Entonces lo que podemos hacer en realidad es ir adelante y entrar aquí y actualizar este sitio web y solo ver si funciona. Voy a seguir adelante y desplazarme hacia abajo y podemos ver que no pasa nada. Entonces no está funcionando. Entonces lo que tenemos que hacer es cambiar esta clase pegajosa, ¿ verdad? Queremos el nombre I. D. D.fuera de esta sección. Entonces esto una vez que saquemos el nombre de este, vamos a poner el nombre aquí, y entonces eso va a estar pegado en la pantalla a medida que nos desplazamos. Entonces para conseguir eso, todo lo que tenemos que hacer es correcto. Haga clic aquí y haga clic en Inspeccionar Elemento. Ahora, si no tienes este elemento inspect y estás usando un Mac, todo lo que necesitas hacer es subir aquí en safari y luego ir a preferencias y luego pasar a avanzado y cliquish dice show, desarrollar menú en barra de menús, y creo que para ventanas es muy similar. Sólo tienes que ir a tus preferencias o ajustes, vas a avanzar que debes tener un similar. Creo que podría ser capaz de usar si 12 también. Pero de lo contrario debería estar en la sección de opciones como esta. Y una vez que tengas todo esto activado, todo lo que necesitas hacer es correcto. Haga clic aquí y haga clic en inspeccionar elementos. Entonces aquí es donde lo tenemos. Dave, subrayado i d es igual al encabezado del sitio Inner. Entonces este es en realidad el nombre que nos van a insertar ahí. Por lo que es sitio, dash, header, dash interno. Vamos a volver, y luego vamos a hacer un sitio de marca hashtag, dash, header, dash inner. Irían, y voy a dar clic en guardar cambios sólo para ver que esto realmente está funcionando. De lo contrario, esta va a ser una conferencia terrible, ¿verdad? Y luego voy a volver aquí y puedo hacer clic en éste hacia abajo. Voy a actualizar los sitios, y ahora voy a intentar desplazarme hacia abajo, y ahí está. Por lo que funciona. Funciona con claridad, pero como podemos ver, hay un par de temas. En primer lugar, se ve horrible. Y ahí a razonar para eso está la opacidad que podemos ver a través de ella. No vamos a querer que con este diseño, por supuesto, quizá quieras otro diseño, y también podemos ver que hay un color diferente en el logo. Entonces lo que vamos a hacer es que vamos a volver aquí, y luego vamos a ir al estilo, ¿ verdad? Y lo primero que vamos a hacer es cambiar la opacidad aquí. 200. Eso significa que no va a haber vista a través. Y luego vamos a ir a selects color, y sólo vamos a dar click en blancos. Simplemente va a ser completamente blanco. Ahí vamos. Y luego vamos a desplazarnos hacia abajo y hacer clic en guardar cambios y volvamos aquí actualizar este sitio y ver qué pasa y desplazarnos hacia abajo y podemos ver que se ve mucho, mucho mejor, ¿ no? Por lo que realmente estoy disfrutando de este diseño ahora. En realidad hay un problema con éste, y es, como puedes ver, no hay frontera entre aquí, así que esto es completamente blanco, y también tenemos un fondo completamente blanco sobre lo que Quiero decir ¿Sería una frontera entre el menú y el contenido aquí es que no hay línea que vaya aquí. Entonces, como ejemplo, Si vamos al chimpancé de correo, por ejemplo, podemos ver que están usando un menú. Aparece bien y esto es completamente blanco y este fondo completamente blanco. Pero aquí hay una frontera que separa el menú del contenido del fondo. Y realmente aprecio esta frontera. Realmente demuestra que aquí está el menú, y aquí está lo que estás revisando y leyendo. Entonces voy a querer usar esa frontera también. Y ahora, con el fin de hacer tanto mi vida como por supuesto, tu vida mucho más fácil, especialmente tu vida chicos, en realidad he ido adelante y agarrar un código para eso. Y ese código, en mi opinión, sí se ve un poco más fresco que esta frontera porque se trata de una frontera simple, y prefiero tener en realidad un borde sombra. Por lo que parece que el menú está en la parte superior de la página web. Te voy a mostrar lo que quiero decir con esto. Entonces vamos a volver al estilo y aquí tenemos algo de CSS, y no tenemos que preocuparnos por codificarnos, pero podemos usar el código de otras personas que son mucho mejores en esto, y no soy programador y lo más probable es que no ser. Las otras personas lo están, y podemos aprender de ellas. Entonces este código aquí este va a estar en el recurso es que solo puedes seguir adelante y agarrar ese. Todo lo que necesitas hacer es seleccionar todos estos. Haga clic derecho, haga clic en copia. Entonces vamos a volver. Vamos a entrar y voy a pegarle a Enter. Entonces voy abajo y voy a pegar esta información justo aquí, ¿de acuerdo? Igual que eso. Y luego voy a seguir adelante y dar clic en guardar cambios así. Y como podemos ver ahora mismo, no hay frontera entre aquí entre el blanco. Entonces cuando actualice esto, debería haber una bonita sombra detrás de una mirada a eso. Esto se ve realmente bonito. Ahora. De verdad me encanta esto. Mira, honestamente parece que el menú está encima de la página web. Es un look impresionante, en mi opinión. Entonces ahora cuando tengo este blanco contra blanco, podemos ver que hay una separación clara, una frontera muy clara como esta, ¿ verdad? Entonces si hay cosas adicionales que quieres editar aquí Hay más cosas que podemos hacer. Por ejemplo, en lugar de usar un efecto ligero, podemos usar un efecto de desvanecimiento. Ahora, el efecto de diapositiva funciona así, que cuando me desplace hacia abajo desde aquí, ve que desaparece. Pero luego aparece justo atrás cuando hemos desplazado hacia abajo lo suficientemente lejos. Ahora bien, si no queremos usar la diapositiva, en realidad podemos usar un fade como este. Puedo seguir adelante y guardar esos cambios y te puedo mostrar cómo se ve el destino y voy a actualizar esto también. Entonces ahora, desplazándose hacia abajo, podemos ver que hay un desvanecido que sucede. Pero el destino, en realidad es tan rápido aquí mismo. Entonces no estamos consiguiendo mucho efecto. No se ve tan bien en absoluto. Vamos a tener que seguir adelante y ir al estilo y luego pegarla. Tiempo de transición. Podemos seguir adelante y subir eso para ponerlo a dos segundos y luego dar click en guardar cambios. Volver atrás, actualizar este sitio. Y ahora cuando me desplace hacia abajo, se puede ver que hay un desvanecido sucediendo. Pero también podrías notar algo más escribe aquí este logotipo realmente sobresale. ¿ Verdad? Por lo que ahora cuando me desplace hacia abajo hacia el blanco, podemos ver que aquí hay una hermosa frontera fuera de la sombra. Pero aquí hay algo que no está del todo bien, ¿verdad? Se está rompiendo la frontera. Y eso es porque cuando hicimos nuestro logo, en realidad usamos un fondo completamente blanco. Y debido a esto, este fondo blanco está interfiriendo con la frontera. Entonces lo que vamos a hacer es que vamos a seguir adelante y quitarle el blanco en la parte inferior nuestro logo aquí y asegurarnos de que esta frontera se vea bien. Ahora bien, si no tienes una pizca de o c d como al parecer lo hago, podrías definir con esto. Pero en mi opinión, esto es lo que te separa y te da un realmente profesional decidir cuando todo es solo puntual e impecable. Y aquí podemos ver un defecto menor. Y eso suma chicos. Entonces, ¿qué? Voy a seguir adelante y hacer. En realidad ha cambiado de nuevo a la diapositiva, y voy a ir y cambiar de nuevo al tiempo de transición off 0.3. Ahora, como puedes decir, hay muchas cosas que puedes cambiar aquí y solo puedes jugar con estas opciones tú mismo, por ejemplo. Se puede deshabilitar pantallas pequeñas y pantallas grandes. También puedes decidir cuándo quieres que sea visible. Por ejemplo, querías ser invisible cuando te desplazas hacia abajo y Onley aparece cuando te desplazas hacia arriba. Aquí hay muchas opciones diferentes. Además, si vas a avanzado, puedes decidir desactivar esto en ciertas páginas. Pero una vez más, vamos a volver a pegarnos aquí y vamos a asegurarnos de que esta frontera rota sea reparaciones. Aquí hay un límite completamente hermoso que se ve impecable y 15 con nuestro diseño. Entonces lo que vamos a seguir adelante y hacer es ir a un sitio web llamado Luna Pic. Ahora, Luna pic, Es realmente genial porque te permiten hacer transparentes tus ciertas imágenes. Y este sitio web va a estar en el recurso también está. Entonces, ¿qué? Voy a seguir adelante y hacer. En realidad es subir el logo que tenemos Ahí estamos, y voy a dar click en Elegir. Y aquí está nuestro logo ahora, honestamente, porque el enlace que la U. R L en el recurso ya está configurado para un fondo transparente. Todo lo que necesitas hacer es subir tu logo de la manera que lo hice y luego dar click en el fondo así, y luego todo va a desaparecer. Ahora puedes ver que aquí hay un poco de blanco, un poco blanco ahí en las abejas en éstas, pero no importa. Honestamente, La parte Onley que realmente necesitábamos quitar y hacer transparente fue esta parte derecha, Porque vamos a usar para diseñar con el menú blanco y ocho logo blanco, así que es completamente encontrar que hay algunos blancos todavía izquierda aquí. Entonces lo que vamos a hacer es desplazarnos hacia abajo y hacer clic en guardar aquí, y luego vamos a volver aquí, y luego vamos a ir a la apariencia que somos, y vamos a arrojar sobre personalizar así. Y para que veas la diferencia, voy a seguir adelante y desplazarme hacia abajo hacia el blanco otra vez. Aquí estamos. Podemos ver esta pequeña rotura por aquí, así que todo lo que voy a hacer es pinchar aquí arriba en esto. Pero, um, vamos a llegar a la parte de bateador de personalización, y voy a dar clic en cambiar logo. Voy a ir a subir archivos, y voy a seleccionar ese archivo. Eran usualmente se llama imagen. Edita algo y luego haz clic en los zapatos y luego selecciona. Y ahí estamos. Este es un cultivo perfecto en mi opinión. Y luego haga clic en imagen de cultivo. Y ya, ahora podemos ver la diferencia aquí, ¿no? Entonces podemos ver que no hay línea que se esté rompiendo aquí. Tenemos un borde sombra perfecto pasando, y se ve absolutamente impecable. Ahora, si seguimos adelante y comparamos con esto que concedimos aquí, todavía está la rotura, ¿ verdad? No hemos actualizado este sitio. Todavía hay la rotura en comparación con esto. No hay romperlo. Entonces esto podría parecer un detalle menor, pero honestamente lo hace, así, tanto. Entonces voy a seguir adelante y hacer clic. Ven publicado. Ahora, chicos, ¿recuerdan cuando realmente hicimos el logo antes? Tienes la opción de, por ejemplo, inscribirte m bist off en Canadá. Si te registras ahí, puedes descargar logotipos transparentes. Y si vas a llevar tu sitio web y lo mejor de ti al siguiente nivel, eso podría merecer la pena. También puedes ir a la fibra y pedirle a alguien que te diseñe un logotipo de aspecto realmente bonito. Y luego vas a conseguir ese logotipo en un fondo transparente también, para que puedas usarlo en cualquier lugar. Pero si vas a ir con la misma ruta que tenemos, debes asegurarte de que el diseño aquí, por ejemplo, por ejemplo, si íbamos con negro o morado o lo que sea que fuera del mismo color en el logo que que estábamos usando en Canadá, todo lo que necesitas hacer es realmente igualar los códigos hex como lo hemos hecho a lo largo de este diseño . Entonces aquí estamos, chicos, realmente estoy, realmente apreciando esta página principal ahora mismo. Y todavía hay un 1,000,000 cosas que podrías agregar Shoot que quieras. Pero ahora mismo creo que entiendes cómo crear una página de inicio de aspecto agradable, conociendo la próxima conferencia que vamos a pasar y asegurarnos de que hemos completado la misión fuera para la página principal para que hayamos clavado la psicología detrás de ella y el motivo para incluso tenerlo a ver en la próxima conferencia. Chicos 22. Análisis de diseño de página del hogar: Muy bien, chicos, hemos hecho un hermoso trabajo en la página principal hasta ahora. Ahora bien, se podría recordar de en adelante sección anterior que pasamos por el propósito, la psicología y básicamente el razonamiento detrás de la página principal. Ahora, en esta conferencia, vamos a seguir adelante y asegurarnos de que estamos caminando la plática, cierto. Nos vamos a asegurar que todo encaja y que hemos seguido todos los pasos. Entonces, si te acuerdas, había muchos puntos diferentes, ¿ verdad? Si tuviéramos hombres, no estás definiendo su propósito. Eso menos es más entregar contenido y navegar a la página de contenido. Pasemos por ellos uno por uno y asegurémonos de que los hemos clavado. El 1er 1 ¿Queremos la página de inicio en el menú o no? Ahora, en nuestro diseño, decidimos no optar por eso. Correcto, Porque ya tenemos la página de inicio en el logo. Entonces no vamos a poner ningún hogar aquí, a pesar de que podría haber algún visitante que en realidad no sepa que se puede hacer clic en esto , Pero aún así, la página principal no es el principal patrón que son las páginas más importantes en realidad el inicio aquí Página y la página del curso, ¿no? Porque para empezar aquí, page es lo que los va a calentar hacia todo lo que va a asegurarse de que entiendan de lo que estamos todos y básicamente les mostraron que están aquí con un problema y nosotros somos la solución. Entonces podemos ofrecerlos. El curso es que tenemos y los ayudamos. Obtienen sus problemas. Entonces y por supuesto obtenemos una venta. Esa es una situación de victoria. Entonces básicamente, para que sea una línea de tiempo aquí, primero tenemos la página principal, que los envía al inicio aquí que lo más probable es que eventualmente los vaya a enviar a los cursos. Correcto. Entonces no va a haber necesidad de poner la página principal en el menú, al menos, no en este diseño. Por lo que decidimos no usar un menú, una marca debilitada que fuera. Ahora el siguiente punto era definir su propósito. Ahora nuestro propósito con la página de inicio es introducirles a nuestro concepto, mostrarles de qué se trata, y luego ofrecer un botón de aprender más o empezar aquí. Básicamente son lo mismo para nosotros para que podamos hacerlos ir de. Me pregunto cómo me pueden ayudar a Ah, caliente. Esta es mi solución. Ese es el propósito principal fuera de nuestra página de inicio. Y por supuesto, algunas personas todavía van a seguir adelante y desplazarse hacia abajo. Entonces lo primero que hemos agregado aquí es la prueba social, y esto es enorme. Ahora entienden que esto no es broma, ¿verdad? Incluso podrías agregar más testimonios si quisieras. Pero creo que esto es tan minucioso que estoy más que contento con este. Y luego hemos pasado, realidad les estábamos ofreciendo algo aquí, ¿ verdad? Entonces si ahí desplazándose hacia abajo, todavía no están seguros si se van a quedar. Si se van a ir, entonces hay algo realmente para ellos aquí. Especialmente cuando ves que hay un valor de $99 y lo pueden conseguir de forma gratuita y fuera curso oportunidad de empezar porque están aquí. A ellos les interesa el marketing digital. Tienen un tema con él. Y aquí puedes conseguir los últimos hacks para sacar adelante, adelantarte a la competencia. Es un diseño realmente inteligente. Y luego finalmente, cuando se calientan lo suficiente, aquí tenemos nuestros cursos más vendidos. Por lo que hay un kidder más alto. Es un pensamiento detrás de cómo estamos haciendo esto. Entonces, en otras palabras, hemos definido muy bien el propósito de que queremos explicar lo que estamos haciendo y luego enviarlos a los iniciados para que el público sea aún más cálido. Ese era el propósito. Aquí no había un restaurante. A lo mejor querías mostrar el menú y que ordenaran algo. Si se trataba de un sitio web de la galería, por ejemplo, para una sesión de fotos. A lo mejor eres modelo y quieres exhibir de lo que el propósito sería mostrar al instante exhibir lo que tienes para ofrecer. Ese no era nuestro propósito. Entonces podemos marcar a éste también, y luego tenemos menos. Es más lo que fue diseñar que íbamos por, porque es muy popular y súper afectado para eliminar todo el desorden. Y en mi opinión, esta es la definición. Off menos es más. Tenemos un hermoso fondo dando una sensación tenemos un encabezado aquí que va directo al punto Negocio hecho fácil. Permítanos mostrarles cómo y luego nos estamos conectando. ¿ Estás buscando construir o ampliar tu negocio pero no sabes por dónde empezar. Permítanos mostrarles cómo literalmente. Y luego aprenden más. Entonces les estamos diciendo que odien. Tienes un problema con el negocio. Usted quiere iniciar su negocio, nosotros lo ponemos fácil. Déjanos mostrarte cómo lo ponemos fácil y podemos ayudarte. Súper limpio desplazamiento aquí abajo es una prueba social muy limpia. Aquí tenemos un correo electrónico. A menudo tenemos todo este espacio libre. Tenemos esta ofrenda aquí. Este el nombre de pila, Hay un correo electrónico. Envíame los hacks. También está todo limpio. Y luego tenemos nuestros cursos. Apenas tres. Echa un vistazo a uno de estos tres. Puedes hacer click, venir a aprender más o ver. Todo el curso es impresionante. En mi opinión, este es un signo muy limpio. Y estoy muy contenta con este. Entonces sí, menos es más. Y creo que en este caso hicimos menos y sacamos más de él. Entonces, vamos a marcar este también. Y luego a continuación, tenemos que entregar contenido y de hecho entregar contenido. Tenemos razón. Por lo que la idea para el aprender más así en realidad los envía a través de ella y entregar contenido para que ellos los conviertan en un público más cálido. Cuando presenté de qué tratamos y cómo consolamos su problema y la única forma resolver realmente su problema es entregando el contenido, entregando soluciones o sugerencias a soluciones que van a vender los problemas que ellos tener desplazamiento hacia abajo fuera de curso. También estamos entregando un curso completamente gratuito con la oficina de correo electrónico. Estamos aprovechando al máximo fuera de la página principal y más abajo incluso estaban entregando estos cursos o más bien mostrando estos cursos que Hey, esto en realidad es lo que tenemos aquí. Ahora bien, si estás buscando realmente entrar en el marketing digital, consulta este Sur o viendo a Shopify. Envío Drop, Amazon FB, etcétera, etcétera. Estamos entregando chicos de contenido, así que definitivamente comprueba eso y luego finalmente navega a la página de contenido. Y esto es de lo que he estado hablando todo el tiempo, ¿ verdad? Entonces tenemos el aprender más aquí que va a navegar al inicio aquí paciente. Ahí es donde vamos a tener un montón de contenido diferente y desplazando todo el camino hacia abajo todo este aire va a entregar a la página de contenido ahora, actualmente tengo estas configuraciones. Estos en realidad te los llevan directamente a mí, ¿verdad? Si hacen clic aquí o aquí, les van a llevar a ¿Eres tímido? Page, donde tenemos nuestro curso completo de marketing digital similar con Shopify an Amazon y luego con la vista, todos los cursos Esto va a seguir adelante y estar vinculado a nuestros cursos. Page right, para que puedan ver todos nuestros cursos pasando ahí, y esos cursos van a estar ligados a ti a mí. Por lo que definitivamente los estamos navegando a las páginas de contenido. Entonces, vamos a marcar este también. Ahora, chicos, realmente buen trabajo otra vez. Hay un sinfín de cosas que puedes hacer en tu terreno de juego de casa. Hemos estado mostrando diferentes cosas que puedes hacer para personalizar manualmente tu página principal usando diferentes fondos, diferentes características usando diferentes elementos de widgets, etcétera. Ahora, en la siguiente sección, vamos a seguir adelante y asegurarnos de que nuestro sitio web esté optimizado antes de seguir adelante. decir, queremos asegurarnos de que se cargue rápidamente porque confía en mí, si tu sitio web se está cargando más lento que en dos segundos, creo que las estadísticas dicen que hay como 30 o 40% de la gente se va a ir y eso es chicos enormes 30 o 40% de la gente. Y creo que si es aún más lento, eso va a ser incluso mawr quien se vaya. Entonces, aunque tengas el sitio web más hermoso del mundo, ¿cuál es el punto? Si nadie se va a quedar por ahí a comprobarlo? Por lo que en el siguiente apartado, vamos a asegurarnos de que todo esté optimizado. Todo se está cargando rápidamente. Todo sigue luciendo realmente bien. Y luego vamos a seguir haciendo y diseñando nuestra página de cursos o empezar aquí página sobre página, etcétera, etcétera. Y te voy a mostrar cómo utilizar eficazmente las plantillas que ya están en primaria porque ahora ya sabes usar realmente las diferentes características fuera de L. Un mentor. Por lo que solo podemos seguir adelante y editar y personalizar las plantillas que ya están aquí. Gran trabajo, si tienes alguna duda, será en la Q y A, como siempre se ve en la próxima conferencia y en la siguiente sección