Clase de Elementor para principiantes: Diseña una página de aterrizaje de entrenador de fitness sensible

1. Introducción: En esta clase, te estaré mostrando cómo utilizar herramientas de diseño responsive móvil elementwise para crear páginas web que se alimentan correctamente en todos los tamaños de pantalla. Después trabajarás en un proyecto del mundo real donde aplicarás las habilidades que has aprendido para crear una página de aterrizaje moderna que se ajuste correctamente a las pantallas de escritorio, tablet y móviles. Mi nombre es Ken Besser y soy emprendedor en línea, creador web, y entusiastas de la tecnología. Dirijo un par de negocios en línea y los construí todos con Elementor sin ningún tipo de codificación. Para incorporarse a ellos se benefician de esta clase. No necesitas ninguna habilidad previa en Elementor. Todo lo que necesitas es un fuerte deseo de aprender a hacer que las páginas web respondan a móviles. Pero debido a que Elementor está instalando WordPress, mi suposición es que estás familiarizado con WordPress y drag and drop builders. Entonces cuando estaba creando esta clase, las personas que tenía en mente incluyen sentir como diseñadores web, diseñadores agencias de diseño web. Entonces si trabajas en una agencia de diseño web, emprendedores en línea que quisieran tomar el asunto en sus propias manos y diseñar páginas web receptivas para sus sitios web, incluso aficionados. Entonces si quieres hacer esto como pasatiempo , seguirá siendo algo impresionante para ti. Básicamente, si estás interesado en aprender a diseñar páginas web modernas de primer móvil en 2021 y más allá. Esta clase será una gran hazaña para ti. ¿ Por qué? Porque podrás aplicar esas habilidades en cualquier futuro proyecto de sitio web que surja en producir páginas web sobresalientes que no solo se ven hermosas en varios tamaños de pantalla, sino que también brindan a los usuarios una experiencia de usuario agradable. Si bien en la clase aprenderás a crear páginas web receptivas en Elementor creando tu propia página de aterrizaje, puedes aplicar esos mismos principios más allá tu sitio web personal con las habilidades que habrás ganado si aún no eres diseñador web. 2. Actualización rápida: el nuevo asistente de configuración de Elementor: Bienvenido de nuevo. Ahora, esta lección es una nota lateral rápida o una rápida actualización del proceso de instalación de Elementor. Si estás tomando esta clase en mayo de 2022 y más allá, notarás que la activación de Elementor ahora tiene un asistente de configuración que se compone de varios pasos que tienes que recorrer para configurar las partes básicas de su sitio web. Mientras estaba creando esta clase hace varios meses, Elementor no tenía ese asistente de configuración. Entonces solo quiero que pasemos por ese asistente de configuración. Pero todo lo demás que estás aprendiendo en esta clase no cambia. Sigue siendo el mismo proceso en todo momento. La única adición es el asistente de configuración. Para que como se puede ver en este momento, tengo una nueva instalación de WordPress y estamos en la Versión 6. Y lo que quiero hacer es ir a Plugins, Añadir Nuevo. Por lo que podemos sumar Elementor y pasar por ese proceso. Buscaré Elementor instalarlo ahora. Y ahora cuando haga clic en Activar será redirigido a ese asistente de configuración. Y podemos atravesarlo juntos. Entonces aquí estamos. Simplemente alejaré un poco para que podamos ver más detalles. Muy bien, entonces ahora notarás que lo primero que elemental quiere que hagamos ahora es crear una cuenta para sacar el máximo provecho de Elementor. Por lo que estos son algunos de los beneficios por registrarse para una cuenta con Elementor. Pero la cosa es que no necesitas tener una cuenta con Elementor para usar Elementor. Así que voy a seguir adelante y saltaré esta parte. El segundo paso es aceptar, continuar con el tema de la santificación que Elementor ha hecho para nosotros. Esto lo hace Elementor, pero estamos usando el Tema Astra, así que solo seguimos adelante y saltamos. Astra es un tema más poderoso. El tercer paso es dar un nombre a nuestra página web. Mientras estabas instalando tu WordPress. Le diste un nombre a la página web. Ese es el nombre que se mostrará aquí. Pero esto nos da la oportunidad de cambiar el nombre a cualquier otro nombre que queramos. Mi página web, y luego vamos a hacer clic en Siguiente. Y si tienes un logo para tu sitio web y quieres agregarlo ahora mismo de antemano. Simplemente puedes seguir adelante y abrir la mediateca y recogerla desde la mediateca o subido desde tu computadora. Pero no vamos a hacer eso ahora mismo. Así que sólo voy a mantener este paso. Y por supuesto podemos añadir el logo más tarde y te mostraré cómo hacer eso. Vamos a hacer clic en Skip. Y ahora llegamos al último paso donde tenemos dos opciones. Podemos empezar a editar nuestra página de inicio desde un lienzo en blanco con editor Elementor. O podemos navegar desde cientos de plantillas o importar nuestras propias plantillas si las tenemos. Pero voy a seguir adelante y saltaré. Eso. Será redirigido al lienzo donde ahora podremos empezar a construir un sitio web. Y aquí vamos. Así que básicamente eso es todo lo que quería mostrarte. Es una nueva actualización. No estaba ahí hace unos meses. Ahora, está ahí. Pero todo lo demás en las próximas lecciones sigue siendo lo mismo. El proceso sigue siendo el mismo para construir una landing page. Entonces sin perder más tiempo, pasemos a la siguiente lección. Iré a este menú de hamburguesas y hago clic en Salir a Dashboard. Salgamos de esta página. Ahora estamos dentro del tablero y estamos listos para empezar a construir el sitio web. 3. Instalación de los Plugins necesarios: Por lo que este es el encabezado de la página de aterrizaje para crear. Todo lo que veas en la pantalla en este momento formará parte del encabezado. Entonces estos botones justo aquí que el sexo bloquea en estos nav bar justo aquí. Y esto debería ser lo primero que crearemos ahora. Por lo que saltando al backend de WordPress, esta es una nueva instalación de WordPress, así que ni siquiera tengo un plug-in. Entonces vamos a seguir adelante y primero instalamos los plugins. Tendremos que crear la barra de navegación. Entonces vayamos dentro de los Plugins y Add New. Y el primer plugin que necesitamos es Elementor. Entonces es el primer artículo es piedra. Ahora, vamos a desplazarnos hacia abajo Mientras que en la misma página y buscar elementos, elemento Keith o complementos, iso ahora, y vamos también al este. Por lo que busca un efecto de cabecera para elementor. De acuerdo, así que ahora que están instalados, vamos a los plug-ins de instalación menos y activarlos todos a la vez. Entonces haz clic en eso, selecciónalos todos. Y en esta lista desplegable, seleccione, Activar y aplicar. Entonces ahora que todos están activados, estamos listos para crear nuestra barra de navegación. Y lo primero que queremos hacer es crear los elementos del menú, estos cinco elementos del menú aquí mismo, y estos son páginas web. Entonces vamos a crear páginas web. 4. Diseñar la navar: Entonces sigamos adelante y creemos una página. Llamémoslo a casa. Y aquí mismo en el lado derecho, desplácese hacia abajo y busque Atributos de página, plantilla. Establezca eso en Elementor ancho completo. Y debido a que estoy usando el tema de Astra, voy a poner esto a disposición de contenido a ancho completo, estirada. Después publicaría esto, crearía otra página. Agregar Nueva página de blog. Desplazarse hacia abajo, atributos pagados establecidos en Elementor ancho completo. Para mí es que eso es lo que publicar. Vuelve atrás, crea otro. Entonces llamemos a estos cursos. Desplazarse hacia abajo Página Atributos, elemental, estiramiento de cuatro semanas justo ahí, publicar. Pero no te preocupes por esta sección aquí mismo. A lo mejor el tema que estás usando no tiene los ajustes porque como puedes ver en este momento, nuestros ajustes de Astra, estoy usando el tema Astra. Por lo que mientras estés usando un tema compatible con elementor, tendrás esta opción de atributos y esto es lo que es importante. Se llama aquí atrás, pero también puedes acceder a los atributos de página en el front end y te mostraré cómo. Entonces, esas son tres páginas. Vamos a crear un contacto más. Bajen. Atributos de datos, plantilla de página para trigo. Muy bien, entonces ahora tenemos cuatro páginas. Entonces lo siguiente que queremos hacer es crear la barra de navegación real que se mostrará en la página. Y cómo creamos que irá dentro de los menús de apariencia. Y aquí, verás crear tu primer menú a continuación. Y podemos seguir adelante y crear un mega menú. Vamos a llamarlo mega menú, y hagámoslo el menú principal, Crear menú. Y como acaba de crear estas páginas aquí mismo, están disponibles para que las agreguemos al mega menú. Entonces sigamos adelante y marquemos estas casillas y añadirlas al menú. Derecha, por lo que se habían agregado, Vamos a arrastrar a casa para ser el primer elemento y los contactos serán el último elemento en el menú de izquierda a derecha. Adelante y guarde el menú. Impresionante. Por lo que ahora tenemos un menú. Wordpress sabe que tenemos un menú y el menú se llama Mega menú, y él contendrá estos cuatro enlaces. Estos son cuatro enlaces a estas páginas. Entonces, ¿cómo exhibimos estos menús de una manera elegante como esta? Eso lo hacemos con Elementor, y así es como hacerlo. Por lo que saltando sobre dos elementos clave, recuerda este es uno de los plugins barridos instalados con Elementor. Observe cuando pase el cursor sobre él, una de las opciones aquí es el pie de página del encabezado. Entonces haz clic en Header Footer, aquí mismo porque aún no tenemos ninguna creada. Podemos seguir adelante y crear uno, Añadir Nuevo, darle un nombre. Y puede significar mu por consistencia. Por supuesto que es un encabezado 1, es visible en todo el sitio web. Si lo quieres visible en páginas particulares, siempre puedes hacer eso, pero hay que tener la versión pro de los elementos mantener. Y la activación lo querrá activo. Eso significa que cuando publiquemos la página, este menú será luz visible BCE. Entonces ahora que tenemos el menú listo, Vamos a seguir adelante y crearlo visualmente para que se vea así. Entonces haz clic en Editar. Ir a editar contenido. Aquí estamos. Si solo podemos saltar a esta página aquí mismo, notarás que la Napa tiene dos columnas. Esta columna de aquí mismo que tiene el logo y esta que tiene el menú. Entonces lo que tenemos que hacer es agregar una sección de doble columna. Pero siempre podemos redimensionarlo en consecuencia. Lo que queremos es tenerlo largo de este lado y más corto que este, porque como puedes ver, ese es el caso. Entonces aquí, arrastra los elementos de imagen por ahí para que podamos añadir el logotipo. Y yo había subido algunas de las imágenes que estaremos usando. Los proporcionaré en los enlaces, así que asegúrate de revisarlos. Entonces vamos a seleccionar este logotipo. Insertar medios. Lo siguiente que queremos hacer es agregar una barra de navegación. Entonces aquí, teclea nav. Y notarás que tenemos dos Menús Nav idénticos. Uno de ellos tiene un icono de candado y el otro es igual. Este viene con Elementor Pro. Y como no tiene en el Pro mental, no podemos usarlo. Menos. Usa el IQ, IQ uno elementos Keats. ¿ Y por qué no podemos ver el menú todavía? Es porque hemos seleccionado un menuet, pero acabamos de crear uno. Recuerda, se llamaba Mega menú. Entonces ahí lo tenemos ahora visible en la frontera, pero está del lado izquierdo. Tenemos que empujarlo hacia el lado derecho. Entonces sigamos adelante y hagamos eso. Actualizar eso. Y aquí dentro, haga clic en esa rueda de rueda y asegúrate de que el diseño de página aquí, le dijo a elementor lienzo o a RI. Vamos a previsualizarlo. A mí me gusta cómo se ve. Por lo que lo siguiente que queremos hacer es crear el resto de la sección de encabezados, y comenzaremos con el fondo. 5. Diseñar la sección de encabezados: Añadamos un fondo negro como este. Entonces saltando por aquí, Salgamos de donde estábamos editando la barra de navegación Salir a Dashboard. Vayamos páginas del lado este. Entonces el punto aquí es que queremos crear la sección de encabezado. Lo que estábamos creando era la barra de navegación. No habíamos empezado a crear la página en sí. Por lo que ahora tenemos que seleccionar la ruta que se convertirá en la página de aterrizaje, la que poblaremos con todo este contenido. Entonces vamos a seleccionar uno de ellos. Cualquiera de ellos puede ser la página de aterrizaje. Vayamos con la página de inicio. Y debido a que ya lo habíamos publicado, puedes hacer clic en Editar con Elementor. Entonces vamos a seleccionar la sección de doble columna. Y para establecer el color de fondo, haga clic en la sección Editar. Ir al estilo bajo la normalidad. Tratar esa caja. Vamos a darle este color muy oscuro, azulado, negruzco. Pero puedes darle cualquier color que quieras. Tan ruidoso para ti. Eso me gusta. Haga clic en cualquier lugar por ahí. Lo siguiente que queremos hacer es agregar a esta señora aquí mismo. Porque el contenido de la columna le da a la sección su altura. Así que vamos a hacer clic en eso, arrastrar un elemento de imagen ahí dentro. Y vamos a seleccionar esa imagen. Y nuestra sección ya está empezando ahora a verse algo así. Entonces lo siguiente que queremos hacer es hacer clic en eso. Añada un encabezamiento. Piensa aquí mismo dice salud. Y así seleccionando todo eso, os selecciona a todos. Y así hagámoslo más grande. Ir al estilo, cambiar el color a blanco. Haga clic en topografía. Pool it, redimensionarlo al tamaño que desee. Démosle un 115. A continuación, quiero duplicar eso. Pasa el cursor por aquí y haz clic en ese ícono duplicado justo ahí, por si acaso no estás viendo estos pop-up. Cuando se pasa el cursor sobre las esquinas. Puede ir dentro del menú de hamburguesas, preferencias de usuario y asegurarse de que las manijas de edición. Dijo, sí. Entonces cambiemos esto a la aptitud. Si bien aún está seleccionado. Vayamos dentro de la tipografía. Haz que eso sea más grande. Disminuir el peso. Disminuir un poco su tamaño. Muy bien, Siguiente copiaré a los turcos. Haga clic en este ícono aquí mismo. Arrastre un editor de texto ahí mismo. Haga clic dentro de su cara, todo el texto ahí dentro. Estilo interior. Cambie el color del texto a blanco, y actualice la página. Observe que vamos a obtener una vista previa de la página. Y note que empezando a tomar forma, pero la parte superior justo aquí, esta blanca. ¿ Por qué es blanco? Queremos que se vea así. Queremos que el fondo corra todo el camino hasta la cima. Entonces, ¿cómo logramos eso? Entonces si pudiéramos simplemente saltar de nuevo dentro del tablero, ir dentro de los elementos, mantener el pie de página del encabezado. Y editemos el Mega menu contenido IT. Entonces ahora estamos editando ese encabezado de barra de navegación. Entonces lo que queremos hacer es seleccionar Editar sección. Ir a Efectos de cabecera pegajosos avanzados. Decir habilitar. Desplácese hacia abajo. Establezca esta distancia de meta a una. ¿ Cuántos píxeles quieres que el usuario se desplace antes de que la barra de navegación se vuelva pegajosa? Encabezado transparente establecido para poseer y actualizar eso. Por lo que saltando de nuevo a nuestra página donde estábamos editando la página de aterrizaje, si actualizas ese control R o Command R en el Mac, notarás que ahora la sección va hasta la cima. Entonces vamos a empujar todo aquí hacia abajo para que sólo sea la Napa y el logo lo que está en la parte superior. Y eso lo hacemos incrementando el relleno en esta sección, en toda esta sección. Por lo que no puedo seleccionarlo debido a la barra de navegación. Voy a traer al navegador golpeando Control I o Comando I en el Mac. Y puedo hacer clic derecho en sección y editar, ir a Avanzado, desvincular estos valores, y luego aumentar el relleno. Vamos a darle un relleno de 200. Sí. Vamos a darle un relleno inferior o 50 actualizar eso. Vamos a obtener una vista previa de la página. A mí me gusta lo que estoy viendo por ahora formas esta pincelada. Añadamos este trazo de pincel. Entonces entrando aquí, edita el estilo de sección. Ya agregamos el color, lo queremos para el fondo. Entonces ahora haz clic en la opción de imagen justo ahí y selecciona este trazo de pincel. Recuerda que ya te he proporcionado la imagen. Se puede consultar en los siguientes enlaces. Actualizar eso. Entonces vamos a previsualizarlo primero. Y notarás que parece que se está repitiendo y está fuera de lugar. Entonces debajo de la imagen notarás que es posición, digamos arriba a la derecha. Y digamos que no se repita. Digamos desplazamiento para el archivo adjunto. Y para el tamaño, digamos personalizado porque necesitamos un tamaño personalizado. Vamos a darle un tamaño de 60. Actualizar ahí. Ahora vamos a previsualizarlo. Está bien, está empezando a tomar forma. Entonces lo siguiente que queremos hacer es trabajar en estos enlaces para que cuando pases por encima de ellos, estén cambiando el color. 6. Finalizar la sección de encabezado: Recuerda que también estábamos editando la barra de navegación. Entonces ve a la página donde estabas editando tu caso Napa. No sabes dónde está eso. Simplemente ve a los elementos mantener, déjame refrescar esto. Vaya a los elementos mantener el pie de página del encabezado, luego edite, luego edite el contenido. De acuerdo, entonces aquí dentro, lo que queremos hacer es cambiar el color de la fuente a verde. Entonces, entremos aquí. Selecciona esta barra de navegación. Ir dentro estilo colapsó el envoltorio de menú. Expande el estilo de los elementos del menú bajo la normalidad. Cambia eso a ese verde. Por ahora. No tengo el verde exacto, pero solo trata de jugar con él. A ver si va a funcionar. Entonces déjame copiar ese código porque lo vamos a reutilizar. Control C. Permítanme sólo actualizar eso. Entonces. Ahora volvamos a la página donde estábamos editando la página aquí mismo y actualicemos la página. Muy bien, entonces ahora la fuente es verde. Entonces lo siguiente que queremos hacer es cambiar los efectos de hover son blancos. Por lo que saltando por allá otra vez, así de hover, eso dice eso a blanco. Y cuando está activo, también necesita ser blanco. O escribir actualización eso. Una vez que hayas actualizado eso, podemos volver a esta página donde estamos editando el encabezado y refrescar esa página. Por lo que ahora el elemento de menú activo debe ser blanco. Exactamente. Aquí vamos. Entonces vamos a previsualizar eso. Impresionante. Por lo que la página de aterrizaje está casi lista. Añadamos los botones. Estos tres botones aquí. Haga clic allí, escriba su. Subirá este botón dual por elementos mantener la luz. No viene por defecto con Elementor. Entonces, arrastrémoslo ahí dentro. Y lo primero que queremos hacer es cambiar el botón de nombre aquí mismo, las etiquetas de los botones. Y lo hacemos colapsando primero el botón doble, expandiendo el botón uno, y cambiamos eso para unirnos a nosotros o a cualquier otra persona que pudiera querer cambiarlo a. Y aquí es donde agregas tu enlace, donde quieres que apunte el botón. Y si quieres que el enlace se abra en una nueva pestaña, siempre puedes hacer clic en eso y abrir una nueva pestaña. Entonces actualízate ahora. Entonces cambiemos de botón a botón. Por lo que debería decir Aprender Más. ¿ Verdad? lo que notan que se derrumbó y la palabra More ha bajado porque es demasiado larga. Tenemos que hacer que los botones sean un poco más anchos. Botón tan colapsado, por lo que un botón expandible. Y vamos a aumentar el ancho ahí mismo. Ahora es ahí punto. Actualicemos eso. Y previsualizar los cambios. Muy bien, impresionante. Entonces volvamos. Entonces a continuación queremos cambiar el color del botón, por lo que éste debe ser verde. Vamos adentro mientras aún está seleccionado, vamos adentro. Estilo colapsado botón uno. Quieres cambiar de botón a primero. En lo normal, notarás que aquí hay color, y también hay un tipo de fondo. Si cambias este color, estás cambiando el color de la fuente, el texto Más información. Y si cambiamos el tipo de fondo, es entonces cuando cambiamos el color de fondo de este botón. Y vamos a querer que sea la pantalla. Entonces por ahora no tengo esos códigos de color, así que sólo intentaré acercarme a algo realmente a eso. Creo que eso es casi como ese verde actualizado. Este otro, botón uno es de color blanco. Entonces vamos al Botón 1. Encadena un tipo de columna vertebral aquí a blanco. Y ahora notarás que la fuente no es visible porque también es blanca. Por lo que necesitamos cambiar su color. Justo por debajo de lo normal es el color. A ver, es que estos oscuros. Lou, columna negruzco así. Observe que la fuente elige el negro también para el contraste. Entonces vamos a cambiar este color de fuente colapsado botón 1, Botón Expandir a bajo color. Vamos a cambiarlo a negro. El mismo negro que teníamos en el Botón 1. Entonces vamos, vamos a expandir el botón 1. En primer lugar. Haga clic en ese color, cópielo. Botón colapsado 1, Botón Expandir para hacer clic en eso y pegar ahí esa codificación de colores. Está bien. Entonces adelante. No obstante, esta fuente debería ponerse negra, no al pasar el cursor. Este botón debe ponerse verde y la fuente negra o montar. Por lo que en Pasa el cursor, botón 1 encima, dispara, gira a color verde. Anda y consigue estos verdes. Entonces colapsaré eso e iré a Button para conseguir la pantalla. Aguanta ahí mismo. Volver al botón uno. Vaya al estado de desplazamiento del botón 1 y cambie el color y el tipo de fondo. Es un verde. Por lo que al pasar el cursor cambia de color a verde y la función permanece, cambia a blanco. Muy bien, Así que este botón necesita cambiar a blanco y la fuente a negro en Holober. Entonces vamos a trabajar en el botón verde para en hover necesita cambiar a y. sí. Y la fuente necesita cambiar. Tan negro a ese negro oscuro. Podría haber entrado, agárrala del otro lado. Está bien. Vamos a agarrarlo de este lado. Agarramos esa falta copia que se derrumbó, eso, expanda eso. Y queremos cambiar el botón. Color sobre hover aquí. Sh que negro. Está bien, así que vamos a previsualizar eso. Y eso es lo que tenemos hasta ahora. Entonces lo siguiente que queremos hacer es agregar ese pequeño botón de video ahí mismo. Y este botón más grande es realmente genial. Es proporcionada por elementos mantener la luz. Te permite quizás agregar un video Acerca de Nosotros o algo para contarle rápidamente a la gente sobre quién eres dentro de esa página de aterrizaje. Y así es como sucede. Entonces haces clic en el botón y aparece así una ventana de video. Si tienes una historia de Acerca de Nosotros, podría contarle rápidamente a la gente sobre ti. Entonces sigamos adelante y agreguemos ese botón. Y lo agregamos haciendo clic en ese video de mecanografía. Y aquí tenemos las opciones de video de marco. Llevemos estos que son traídos por elementos. Mantén la luz, y déjala caer justo debajo de los botones. Por defecto, es de color rosa. Por lo que primero queremos alinearlo a la izquierda. Entonces vamos al estilo y alineación a la izquierda. Después haga clic en estilo de botón. Para que podamos empezar a editar los colores. Como ves, el color del resplandor es azul. Queremos darle vuelta a la pantalla. Entonces ya había copiado ese color verde, así que déjame pegarlo ahí. Y ahora te darás cuenta de que es verde al resplandecer. Y justo debajo del color de resplandor tenemos el tipo de fondo. Haga clic en eso en cadena. Déjame desplazarme hacia abajo una vez, cambiar el color ahí al mismo verde. Entonces pegaré el verde ahí dentro. Y ahora es verde. Entonces si pudieras previsualizar eso. Los cambios, eso es súper impresionante. Todavía necesitamos hacer algo de afinación fina para que se vea mejor así. Como ven, hay una diferencia en donde esta señora se situó en la página en comparación con nuestra referencia. Entonces vamos a empujarla un poco hacia arriba. Volviendo a esta página aquí mismo, seleccione la imagen de la dama. Vaya a Avanzado y elimine los márgenes y el relleno. Repasemos algún margen en la parte superior a algún lugar allí. Y actualizado. Está bien. Vamos a previsualizarlo. Sí, la hemos empujado un poco hacia arriba, pero tenemos que hacerlo más. Tenemos que aumentar ese margen. No te preocupes por que toque la barra de navegación aquí mismo cuando el editor, cuando actualicemos y vayamos a la página de vista previa, real si previsualizamos cambia, note que ahora está casi en el lugar correcto, pero necesitamos para empujar un poco estas pinceladas hacia afuera para que también sea totalmente visible. Hagamos eso. Redujamos el tamaño de la pincelada. Por lo que no puedo seleccionar esta parte aquí arriba porque estoy obstruida por la barra de navegación. Pero puedo golpear Control I para que traiga al navegante. Y si puedo colapsar eso, esta sección es toda esta sección aquí mismo. Entonces si edité así, alguna sección de edición que está sosteniendo el fondo negro en la pincelada. Vayamos al estilo. Y aquí mismo en el dimensionamiento, vamos a reducirlo aún más a tal vez 55. Actualizar ahí. Y vamos a previsualizar los cambios. Muy bien, así que ya casi estamos. Lo siguiente que queremos hacer es redondear estos rincones, como en nuestra página web de referencia aquí. Entonces volvamos aquí, selecciona el botón dual. Y vamos mientras todavía dentro de estilo. Debajo del Botón 1, Vamos a poner el radio a 10, el radio del borde a 10, actualicemos ahí. Después desplácese hacia abajo mientras sigue bajo el botón uno. El enlace, el relleno. Dame el relleno superior de 10 y el relleno inferior de 10. El desplazamiento hacia arriba y el botón colapsado 1, Botón Expandir para hacer lo mismo, borde radio 10. Desplácese hacia abajo para pad en el enlace dab. Acolchado superior, relleno inferior, diez datos. Analicemos los cambios. Impresionante. Por lo que el sitio web es Taney forma de la forma que queríamos. Entonces eso es todo. Nuestra sección de cabeza está lista. Lo siguiente que queremos hacer es crear la sección del cuerpo, luego el pie de página. No tenemos una sección de cuerpo a la que referirnos, así que sólo lo vamos a hacer freestyle. Pero no te preocupes, estamos en pleno control se te ocurrirá algo impresionante. El objetivo principal de hacer estos 0s, entender los conceptos fundamentales detrás de la creación páginas web que sean responsive o de escritorio y tablet móviles. Procedamos a crear la sección del cuerpo. 7. Diseñar la sección del cuerpo: Por lo que vamos a crear una sección de cuerpo muy simple porque sólo estamos tratando de ver cómo hacer que nuestra página web de respuesta móvil. Justo debajo de la sección de cabeza, voy a añadir un divisor. Entonces, en primer lugar, vamos a agregar estas triple columna a la estructura. Entonces vamos a hacer clic en ese signo más en el medio. Y vamos a añadir un divisor. Yo quiero decir, hagámoslo slashes. Sí, dejémoslo en eso. Probablemente quiero hacerlo verde también. Creo que todavía tengo ese verde. Podrías recortar. Sí, Así que quiero que vuelva verde. Vaya a la sección Editar, el enlace esos valores y agregue un margen superior de 40. A continuación queremos añadir una sección de doble columna. Añadamos una imagen aquí mismo. En esta imagen podría tener. Añadamos todas estas imágenes ahí dentro. Estaremos usando estas imágenes y las voy a proporcionar. Por lo que echa un vistazo en el siguiente enlace. Entonces básicamente estamos tratando de crear una página de aterrizaje muy simple. Todo se trata de aprender a hacer que la página sea receptiva. Y una vez que captes todos esos conceptos, podrás crear páginas WordPress muy increíbles usando Elementor. Por lo que con fines ilustrativos o crear solo una página de aterrizaje simple. Tomemos esa imagen e insertemos ahí dentro. Tomemos tal vez, agreguemos un encabezado, el 're y como seguimiento porque esto es una página de aterrizaje, tal vez estos podrían ser algo para convencerte. ¿ Por qué yo? Aquí, digamos que se trata un entrenador que está tratando de convencernos de contratarlos como nuestro entrenador personal, son buenos que ese color 404040. Puede que haya. Aumentemos el tamaño aquí mismo. Entonces podríamos agregar un subencabezado justo debajo él, o por encima de los resultados. Entonces probablemente te daremos ese mismo color ya, 40. 40. Entonces probablemente agreguemos un editor de texto ahí mismo. Sí, probablemente algo así. Aumentemos el tamaño de un, todo sobre eso. Por lo que a continuación queremos cambiar el color de esta columna aquí. Queremos darle un poco más de vida. Por lo que haciendo clic en ese editor de columnas justo ahí, yendo sitios azulejo, fondo bajo normal. Cambia eso a, digamos tal vez algunos de estos mismos colores aquí mismo. Entonces déjame entrar aquí. Editar sección. Déjame agarrar este color muy rápido. Es de color negro. Copiar eso. Yo quiero venir aquí, seleccionar eso aquí. Quiero decir pega ese código. Y quiero cambiar por qué yo a la pantalla. Entonces voy a hacer clic en eso. Selecciona ese verde. Copiarlo. Seleccionaré eso bajo estilo. Cambia ese color a verde. Hagamos estos blancos. Yo soy todo sobre resultados bajo estilo. Vamos a cambiarlo a blanco. También cambiemos eso a blanco. Entonces tal vez podrías agregar un botón. Va, recuerda, una página de aterrizaje es todo sobre llamada a la acción o CTA. Otra cosa que quiero hacer es hacer estos rincones un poco a tierra. Entonces mientras todavía está seleccionado aquí mismo, baja a frontera bajo Estilo, baja al radio de frontera, border-radius. Hagámoslo 20. Actualizarlos. Y una cosa más que queremos hacer, bueno, la columna sigue seleccionada. Haga clic en Avanzado. Y agreguemos el relleno mientras estos son enlaces juntos. Entonces aumentemos eso. Y ese tipo de trae todo hacia el centro para que ningún contenido se incline demasiado a un lado. Entonces digamos un dato y vamos a previsualizarlo. O RI, impresionante. Entonces creo que me desharé de esto. No me gusta. Solo estamos tratando de ser creativos con esto. Y fíjate que ahora no tenemos un espacio aquí. Podemos agregar algo de espaciado haciendo clic en este signo más. Y aquí, podemos añadir una sola sección de columna. Haga clic en el signo más ahí, y agregue espaciador. Ahora puedes aumentar y disminuir el espaciado es lo que quieras. Dejémoslo en eso. Lo siguiente que queremos hacer es, en primer lugar, actualicemos eso para que tengamos los cambios guardados. Entonces lo siguiente que queremos hacer es agregar otro espaciador. Entonces agreguemos un espaciador ahí. Entonces podemos añadir otra doble columna. Y esta columna, sigamos adelante y quizá agreguemos un encabezamiento. Y este rubro dirá algo así como encontrar mi ebook. Dáselo. Démosle tal vez un 40, 40, 40. Ese es un gris muy oscuro. A lo mejor aumentemos el tamaño de eso. Ojalá tuviéramos un libro. Ahora teníamos un libro PNG. Creo que ya es suficiente. Entonces dejémoslo en eso. Añadamos editor de texto. Y esto aumenta ese texto a alguien a big data como agregar una imagen aquí mismo. Asegurémonos de que estos textos vayan todo el camino a soportar. Entonces para la imagen y ver con qué podemos trabajar. Añadamos eso. Trabajemos con eso. Cada vista previa cambia o a la derecha. Sigamos adelante y duplicemos eso. Haga clic en este ícono duplicado justo aquí. Para duplicar este apartado. Solo queremos arrastrarlo por debajo de mi descarga, mi e-book esta duplicado este espaciador aquí mismo. Y arrastremos este aquí mismo para que tengamos ese espaciado y podamos cambiar esta imagen al frente. Uno. Problema con ese. Actualiza esa página. Empezamos a desplazarnos. Te darás cuenta de que nuestra cabeza sigue estando en la parte superior a pesar de que nos desplazamos y eso es lo que queremos decir con un encabezado pegajoso. Ya dijimos que agrega un encabezado pegajoso. ¿ Te acuerdas? Entonces vamos a duplicar esta sección también. Así. Y arrastrémoslo debajo de esta sección. Y duplicemos este phasor aquí. Y vamos a arrastrarlo hacia abajo, hasta ese punto para separar a esos dos. Vamos a duplicar otro otro y ponerlo debajo de esa sección ahí mismo. Entonces aumentemos el tamaño de este espaciado para que haya espacio en la parte inferior de una página de datos. Entonces vamos a previsualizar los cambios. Entonces ahora aquí hay una página web que ya empieza a parecer una página web real. Por supuesto, dado más tiempo, podemos trabajar en ello para que se vea mucho más hermoso. Y espero que eso sea lo que estás haciendo en tu proyecto. Le estás dando tiempo para que parezca atractivo. Muy bien, entonces vamos a reemplazar esta imagen aquí mismo. Sería otro más. Asumamos tal vez eso. Inserta eso. Entonces digamos nueva rutina. A lo mejor te dio el Jedi. Ahora. Hagamos los beats seleccionados. Podemos pies, luego actualizar esa página. Entonces vamos a previsualizar los cambios. Desplácese hacia abajo. Estoy pensando que tal vez podríamos poner estos de este otro lado, Enbridge ellos. Así que arrastre estas columnas hacia el lado derecho así, voltearlas. También es voltear estas dos columnas como si fueran solo por variedad. Hagamos una vista previa de los cambios en. Te darás cuenta de que cuando se está cargando, al principio esta parte es cosa blanca se vuelve azul. Y eso es por no conseguir que nuestros navbars de fondo del mismo color que el por lo que necesitamos hacer la barra de navegación que está en color. Haré eso. Así que sigamos adelante y creemos el pie de página antes de cambiar de marcha y ahora centrémonos en hacer que toda la página sea receptiva. 8. Diseñar la sección de pies de la sección: Vamos a crear el pie de página. Tendremos que utilizar el elemento kids light plugin que utilizamos para crear la barra de navegación. Así que saltemos al backend de nuestro tablero. Por lo que saliendo justo ahí, Salir a Dashboard. Vamos dentro de los elementos Clave pasa el cursor sobre elementos niño, y vamos a Header Footer. Vamos a añadir nuevo. Vamos a darle un nombre. Mega, mega carpeta, año. Impresionante. Y vamos a querer que sea un alimento por supuesto cambio que, que M1 necesita estar activo y disponible en todo el sitio. Guardar cambios. Y ahora podemos seguir adelante y editarlo de la misma manera que lo hicimos con un mega menú. Editar contenido. Entonces lo primero que queremos hacer es darle ese trasfondo que está en la sección de cabeza porque queremos mantener esa consistencia nuestra página web. Por lo que al volver a la página donde estábamos editando la sección de encabezado, podemos editar sección ahí mismo. Entonces ven aquí. lo que nos interesa es sólo el color, no estamos editando nada. Entonces saltemos aquí mismo. Estamos en el frente. Nos han redirigido a estos lugares por elementos. Mantener. Lo primero que queremos hacer aquí es crear una sección. Como de costumbre. Vamos a Editar estilo de sección, y peguemos ese color. Acabamos de dividirnos ahí, así que ese es nuestro color de fondo. Lo siguiente que queremos hacer es duplicar esa columna. De hecho, Vamos a triplicarlo para que tengamos tres columnas. Y podemos añadir el logo aquí. Entonces agreguemos una imagen ahí. Y vamos a agarrar el logo insertado. A continuación queremos decir algo sobre Watson, el pie de página. Entonces haz clic en ese signo más allá. Encabezamiento. Confía en nosotros a través. Confía en nosotros. Confía en nosotros para tomar aire húmedo. Eso es una promesa, ¿verdad? Pongámoslo en el medio. confianza aquí debería deletrear la capital, entonces cambiemos su color a blanco. Yo le daré ese verde. Cube esta verde aquí mismo. En todo el verbo era verde. Entonces vamos a saltar por aquí atrás. Yo quiero darle este verde actualizado. Entonces una breve descripción de lo que se trata el sitio web. Goles aquí abajo. Entonces haz clic en ese editor de texto. ¿ Verdad? Entonces, en primer lugar, vamos a centralizarlo. Hagámoslo de color blanco. Probablemente podríamos ver sección de edición y vamos a aumentar el relleno en la parte superior e inferior. Acolado tan avanzado, borra los de abajo. Démosle 60 y top 50. Veamos actualizar eso. También podríamos añadir probablemente la barra de navegación. Entonces vamos aquí. Nav, nav menu, IQ, comer. Entonces seleccionemos el menú caminará el mega menú, actualicemos eso. Pero aquí mismo es negro. ¿ Por qué es negro? Primero que nada, centralizarlo. Centro. Y vamos a mantenerlo de ese color blanco. Entonces aquí, se derrumbó el envoltorio de menús. elemento del menú podría ser de color blanco. Y cuando sobrevaloras, necesitamos que sea así de verde. Sí. Y cuando actuamos, cuando está activo, también tiene que ser esa actualización verde que. Entonces esa es una carpeta básica. Vamos a previsualizarlo. No te preocupes que lo estás viendo en la parte superior en lugar de en la parte inferior. Es porque estamos previsualizando el mundo que acabamos de crear. Es así como previsualizamos. Aquí mismo. ¿Qué podemos agregar? Vamos a añadir tal vez algunos enlaces. Entonces vamos a añadir una lista. Una lista. Y lo que queremos son las listas de iconos. Hay diferentes tipos de bonito que menos queremos el ícono. Suéltala justo ahí. Tenemos artículos pre-lanzados por ahora para que podamos cambiarlos. El elemento de lista número 1 podría ser privacidad, privacidad. Los lados M número dos podrían ser reservas, y este número 32 sería actualización de membresía ese curso, puedes agregar enlaces a cada texto. Entonces, así que para este artículo aquí mismo, tu enlace va aquí. Recuerda que siempre puedes abrir enlace en nueva pestaña. Vamos a colapsar eso. Entonces vamos al interior del estilo. Aquí es donde cambiamos el aspecto visual de cualquier elemento que estemos viendo. Por lo que para los iconos, queremos que sean verdes. Todavía tengo esos derechos verdes. Y por el arrendamiento, por el sexo, queríamos ser de White. ¿ Qué tal si interpreto, quiero que estén del lado derecho, del lado izquierdo. Vayamos a la menor alineación. Queremos que las alineaciones del arrendamiento estén del lado derecho así. Actualizado. Entonces vamos a previsualizarlo. Súper impresionante. Entonces ahora si volvemos a la página que estábamos creando, aka nuestra página de aterrizaje, ahora el pie de página estará disponible allí. Entonces pasemos por encima de su cambio de nacimiento. Está ahí. Entonces aquí estamos. Si actualizo esta página, Control R o Comando R en tu Mac. Y luego vamos a desplazarnos hacia abajo. Encontrará el pie de página aquí. Pero ahora note que hay esta carpeta aquí mismo por defecto también. Y estas fotos vienen por defecto con Astra, tenemos que deshacernos de éstas. Entonces entraré aquí. Ahora que hemos terminado de crear el pie de página, puedo salir de Salir a Dashboard, ir a páginas. Y en la página ahora una página de aterrizaje, página de inicio, iré a Editar. Del lado derecho aquí. Desplazaré todas las pesas. Por lo que los ajustes de Astros y cambiar a pie de página deshabilitado. Así que actualiza eso. Eso significa que nos hemos deshecho de este alimento que viene por defecto con asteroide. Entonces si actualizamos eso, Vamos a desplazarnos hasta el fondo y ver si nos hemos deshecho de la, eh, derecha, así que ahora no está ahí. Entonces vamos a previsualizar este phage, nuestra página de aterrizaje, todo el camino hasta el fondo. Entonces ahora que tenemos esta página, lo que queda es hacerla sensible. Pero ahora mismo, ¿cómo se ve antes de que lo hagamos sensible? Echemos un vistazo. Por lo que note que cuando actualizamos esta página, la barra de navegación es primero ancha. Déjame, déjame refrescarlo. Por lo que notarás que esta parte es y luego se vuelve a estos colores. Y eso se debe a que nuestra barra de navegación, por defecto no tiene un color de fondo. Vamos a poner el color de fondo para que sea paz. Entonces, entremos ahí a nuestro panel de control. Es ir dentro de los elementos, mantener pie de encabezado. Vayamos dentro del mega menú. Y vamos a editar contenido. Y me gustaría que viniéramos aquí. Páginas ya abiertas. Entonces estamos editando el encabezado para la barra de navegación. Así que ve a Editar estilo de sección bajo normal. Vamos a basar ese color de fondo ahí. Está bien, entonces si volvemos a las picas y refrescantes, entonces previsualizamos. Cuando esto se está recargando pesado, note lo que está pasando ahora. Vamos a refrescarlo de nuevo. ¿ Ves eso? Entonces lo hemos arreglado en el pergamino hacia abajo y mira nuestra página de aterrizaje. Eso se ve súper impresionante. Por lo que nuestra página de aterrizaje de muestra ya está lista. Lo siguiente que queremos hacer es hacerla receptiva o tableta móvil y escritorio. Pero antes de que lo hagamos sensible, primero veamos cómo se ve en este momento en el teléfono móvil. Por lo que haciendo clic en este icono de modo responsive aquí abajo. Mira el tamaño del logotipo en el teléfono móvil. No está en ningún lugar cerca de Responsividad móvil. Entonces, ¿qué hacemos al respecto? Lasso que estamos haciendo a continuación? Nos vemos del otro lado. 9. Ayúdame a enseñar a los estudiantes a 10,000: Hola mi amigo. En primer lugar, solo quiero decir muchas gracias por acompañarme en esta clase y elegir aprender de mí. Y también quiero decir felicitaciones por llegar tan lejos en la clase. El hecho de que hayas llegado tan lejos en la clase significa que estás ganando valor de la clase. Y así te agradezco mucho y espero que estés disfrutando de la clase en sí. Dicho esto, necesito tu ayuda. Tengo la misión de enseñar al menos a 10 mil empresarios como tú a usar elementary para construir sus propios sitios web o landing pages para vender sus productos. Y aquí te mostramos cómo puedes ayudar. Se ve cuando un nuevo alumno se une a una clase en Skillshare y luego le gusta esa clase y deja una reseña. Ayuda a otros alumnos a saber qué esperar de la clase. Y cuando una clase está recibiendo muchas críticas de los estudiantes, Skillshare dice: Oye, ¿sabes qué? Esta clase está recibiendo mucho compromiso y muchas críticas por parte de los estudiantes. Por lo que debe ser de ayuda. Por lo que debe ser útil. Y así empujémoslo hacia arriba en la biblioteca para que sea más descubrible por los nuevos estudiantes. Por lo que el algoritmo Skillshare empuja esa clase hacia arriba y la hace más visible, más descubrible para los nuevos estudiantes. Porque ha estado recibiendo críticas positivas. Y ahí es donde entran ustedes. Por favor, únete a mí en esta misión y me ayudó enseñar al menos a 10 mil estudiantes cómo usar Elementor, cómo construir hermosas landing pages, sitios web funcionando dejando una reseña en esta clase y haciéndoles saber qué esperar de esta clase. Sólo te tomará unos dos minutos y ya está. Pero tu reseña contribuirá en gran medida a ayudar a los nuevos alumnos, los futuros estudiantes, a saber qué esperar de la clase. Clase cumple con tus expectativas. ¿ Superó tus expectativas? Si tienes alguna pregunta, recuerda, siempre puedes dejarlas en el área de discusión debajo de este video y yo podré ayudarte. Siempre respondo a cada pregunta o comentario que los alumnos dejan en cualquiera de mis clases. Y con eso dicho, sólo quiero decir disfrutar de la clase y nos vemos en la siguiente lección. Paz. 10. Haz que la página sea completamente: Entonces empecemos con la barra de navegación. Después pasaremos a la sección de cabeza, luego al cuerpo, luego al pie de página, y ya terminamos. Entonces cambiando a mi cabecera. Aquí estamos en la cabecera. Si lo previsualizamos en pantalla móvil, así es como se ve. Justo en tableta. Da clic aquí para ver en tablet. Así se ve o más en una tableta. Lo que me gusta hacer es crear una barra de navegación separada que sólo será visible o teléfono móvil y tablet. Entonces, ¿cómo hacemos eso? En primer lugar, duplicemos la barra de navegación que ya tenemos. Entonces ahora que ahora tenemos que zumbar, ya se ven bien en el escritorio. Por lo que no necesitamos ajustarlos ni hacerlos quedar mejor en el escritorio. Entonces porque esto ya es bueno en el escritorio, quiero que te mantengas visible en el escritorio, pero no lo hizo en el móvil y la tableta. Por lo que editar sección ir a Avanzado responsive. Y queremos escondernos en tablet y teléfonos móviles. Entonces cuando estés viendo esta página de aterrizaje en un teléfono móvil o una tableta, ese es este menú no será visible. Solo será visible cuando lo estés viendo en el escritorio. Entonces a continuación, vengamos a esta sección Editar. Volvamos a la respuesta avanzada. Esta vez. Este es el menú querrá cambiar y editar para que se vea bien en móvil y tablet. Por lo que no queremos que sea visible en el escritorio. Queremos que sea visible sólo en tablet y móvil porque vamos a hacer que se vea bien en tablet y móvil. Entonces porque ahora no es visible en el escritorio, está oculto en el escritorio. Así es como se ve, se vuelve a Escala de grises. Si volteamos al teléfono móvil, observe que el menú superior ahora está en escala de grises para decir que no está activo en el teléfono móvil. Esto es lo que los usuarios de telefonía móvil veremos. Entonces lo primero que queremos hacer es quitarle el logo. No necesitamos el logo. Sólo necesitamos estos menús. Pero es negro. No podemos ver, apuesto a que ni siquiera lo puedes ver ahora mismo. Entonces cambiemos primero su color. Entonces seleccionando eso. Ahora estamos editando el menú de navegación. Por lo que dentro de Style, ve al estilo hamburguesa. Y luego voltea esto al lado izquierdo, así. Entonces los muchos ahora de este lado, pero necesitamos cambiar su color. Así que desplácese hacia abajo y busque el tipo de fondo. Bajo el tipo de fondo de hamburguesa, cambiémoslo a blanco. O quizá hagámoslo así de verde. Entonces, entonces vamos a basar ese verde ahí dentro. Ahora es verde. Pero en el hover, queremos hacerlo blanco. Hacer incluso blanco en flotar, así. Decir actualización. Entonces veámoslo en una tableta. Así se ve en la tableta. Y veámoslo en el escritorio. En el escritorio, se esconde. Y luego aparece el menú de escritorio. Cuando cambiamos a tablet, noten que el logotipo desaparece. Por lo que ahora tenemos el menú de hamburguesas y el que tiene el logo ha desaparecido, por lo que no es visible en tablet. mismo caso aplica para el móvil. Eso es escritorio destacado. Y luego vamos a previsualizar la página en la que estábamos trabajando, nuestra página de aterrizaje. Vamos a refrescar eso. Y vamos a previsualizarlo en el móvil. Cambios cif He tomado efecto. Entonces ahora tenemos un menú de hamburguesas en lugar del otro Ming que tenía el enorme logo aquí arriba. Entonces todo está surtiendo efecto. Y siempre podemos configurar el logotipo que aparece aquí, aquí arriba yendo a la configuración del menú móvil, logotipo del menú móvil. Y selecciono nuestro logotipo como de costumbre, inserto medios. Entonces cuando lo abres esta vez, tiene ese diminuto logo ahí mismo. Creo que estamos todos listos. Nuestra barra de navegación ya está lista. Pasemos a nuestra página de aterrizaje para ver los cambios que acabamos de hacer. Por lo tanto, volviendo más allá del modo de escritorio, y actualicemos eso. A mí me gusta. Entonces, correcto, entonces si pudiéramos previsualizar un teléfono móvil, aquí está nuestro menú. Por lo que ahora nuestra barra de navegación es receptiva en escritorio y móvil. Por lo que parece en la tableta cuando se necesita en el lado izquierdo. Entonces pasemos a este lugar. Cambia a decírselo aquí mismo. Y aquí. Cambiemos el lado en el que se encuentra. Cambiemos de este lado. Y estilo de menú de hamburguesa como pedacitos contaminados de esa actualización lateral. De hecho, vamos a deshacernos de estas columnas aquí mismo en el móvil y el escritorio. Ah, ya lo hicimos. Sí, así que actualicemos eso. Y echo de menos volver a nuestra página y refrescarla. Control R o Control Comando R en el Mac. Por lo que ahora lo vemos en tablet. El super cool. Entonces lo siguiente que queremos hacer es trabajar con todos los demás contenidos y el resto del cuerpo para asegurarnos de que todo se derrumba y los pies se hinche en cualquier dispositivo. Entonces empecemos con todo o con el móvil. Por lo que notarás que la salud va todo el camino más allá de los límites, también fitness. Por lo tanto, ofrezcamos la salud muy selecta. Y y notarás que en todas partes donde puedes hacer cambios a esa propiedad en particular en fase móvil, el icono móvil al lado de esa propiedad en particular. Entonces si pudiéramos ir dentro de estilo, podemos dimensionar esta ayuda y Hayden su ayuda y y ponerla en el medio. Hagámoslo por la aptitud. Fitness. Pongámoslo también en el medio. Podríamos reducir algo de ese relleno. Ahora reduzcamos el margen. El top. Y al fondo. Podríamos hacer lo mismo por la salud. Redujamos el margen superior y el margen inferior para que esté cerca. Está disminuyendo un poco su tamaño para que sea casi del mismo tamaño que el año fitness. Ahora vamos a reducir ahí la séptima actualización. Observe que lo alto aquí va más allá de donde llega F. Entonces vamos a aumentar el relleno en esta descripción aquí mismo. Con esto seleccionado. Acude a consultas avanzadas el arrozal al 10. A mí me gusta el donde están los botones para que podamos dejarlos ahí mismo. Entonces lo que queremos es seleccionar este fondo. Recuerda agregamos esto como imagen de fondo, luego agregamos esto como color de columna vertebral. Pero queremos que esto esté de pie aquí mismo, como en el escritorio. Entonces, ¿cómo hacemos eso? Seleccionando la sección Editar puede ir al azulejo de insights aquí, y podemos agregar una imagen diferente o la misma imagen. En este caso, agreguemos una imagen amarilla. Yo sólo quiero ilustrar estos dos. Te insertan en posición. Queremos que esté al fondo. Derechos. Entonces aumentemos el tamaño del tamaño, Carson. Y entonces ahora empecemos a aumentarlo manualmente así. Vamos a reducirlo. Punto de datos. Entonces volviendo a la cima, ahora nos queda todo el espacio. Podemos empujar todo hacia arriba y lo podemos hacer yendo a sección de edición, Editar sección Avanzado. Y luego desvinculemos todo lo que hay ahí. Y notarás que todo se ha restablecido a la cima para que ahora podamos empezar a añadir nuestra patty. Entonces vamos a aumentar el relleno en la parte superior justo ahí. Así. Actualizado. Entonces en este caso, acabo de agregar esta imagen de fondo amarillo para ilustrarte que en, puedes tener diferentes imágenes para aparecer en diferentes dispositivos. Entonces si cambiamos al modo escritorio, cambiará a verde. Si cambiamos al teléfono móvil, cambiará a amarillo. Veamos cómo se ve en la tableta. También podemos tener una diferente para las tabletas, así que llegaremos a eso. En primer lugar, estamos lidiando con un teléfono móvil. Ahora, otra cosa que notarás es que este menú de hamburguesas de aquí no está alineado correctamente a estos textos. Tenemos que empujarlo un poco hacia adentro y hacia abajo para equilibrar las picas. Entonces, ¿cómo hacemos eso? Volvemos al menú en sí y seleccionándolo en cualquier lugar dentro de esta minúscula caja azul que nav menu. Ir a Avanzado. Y luego el eslabón ese margen aumenta a la izquierda en 20. Ahora digamos 10. Digamos, Sí, 10 está bien. Y top 10. Actualicemos eso. Muy bien, Volvamos a esta página y la refresquemos. Entonces básicamente estamos cambiando entre diferentes páginas de edición. Entonces espero que eso no sea demasiado confuso para ti si eres principiante. Entonces nuestro menú de hamburguesas ahora está al menos un poco hacia un lado y se ve un poco más equilibrado, ¿ no? Sigamos. Llamemos hacia abajo y veamos si hay algo que necesite nuestra atención. Creo que esto es demasiado espaciado, así que selecciona ese espacio y ajustado en consecuencia, necesitamos solo un poco más de espacio ahí. Desplácese hacia abajo. Te darás cuenta de que esta columna de aquí toca los bordes, los bordes , y no queremos ahí. Entonces haga clic que avanzado. Y luego margen. Aumentemos el margen a tal vez diez. Sí. Disminuyamos el espaciado aquí mismo. ¿ Qué grado de espaciado? Creando 24, Hagámoslo 25. Por lo que eso significa mantenerse uniforme lo haría 25 en todo. Al igual que donde los mares. Volvamos aquí y veamos. Clip ese texto justo ahí. Y vayamos a avanzado. El relleno era de 10. Por lo que queremos mantener ese relleno uniforme para textos descriptivos como el por lo que este será 10. Entonces dentro de este tipo 10, para que no esté demasiado cerca de los bordes. Entonces el espaciado aquí, 25 para la columna, se incrementó los márgenes. ¿ Vamos a reducir esto? Sí, vamos a reducir el tamaño de estos títulos. El laboratorio que buscaron a Vk, consíguelo ahora. Está reducido ahí, consíguelo ahora. Entonces el tamaño ahora es de 44 píxeles, así que puedo copiar el estilo. Entonces haga clic derecho. Copiar en cualquier lugar donde haya un encabezado como este, puedo pegar el estilo así que lo he copiado. Con razón. Café. Si voy aquí a esto, eso es similar a eso. Y haga clic derecho, puedo pegar el estilo, eso significa el tamaño, el color, y todo. Por lo que el estilo de pasta lo redimensiona al mismo tamaño que el otro. Tenemos otra que se ve así. No. No, no lo hacemos. Entonces ahí vamos. Nueva rutina aquí mismo, se ve demasiado grande. Vamos a reducirlo. Y tú rutina. Actualizar eso. Entonces aquí recuerda que los textos descriptivos pueden tener un relleno de 10. Actualicemos eso. También podemos copiar este nuevo estilo de rutinas, copiarlo, y pegarlo aquí. Pegar estilo. Veamos si podríamos reducir aún más esto, porque se ve un poco a la derecha ahí. Sí. Simplemente correremos para tener algo que sea visualmente atractivo. Todo está al alcance visual y es fácil de leer mientras alguien está consumiendo estos a medida que se desplazan hacia abajo. Por lo que notarás que el logotipo en la carpeta es demasiado grande, por lo que necesitamos reducir también su tamaño. Entonces lo que tenemos que hacer es ir dentro del pie de página. Entonces eso fue en el área de mega pie de página. Por lo que tenemos que volver a entrar en el tablero. Elementos mantiene el pie de página del encabezado. Simplemente puedes editar con Elementor. Tienen razón, entonces, así que haz que el pie de página sea receptivo. Tenemos que meternos dentro también y editar, y ahora estamos dentro. Entonces vamos a verlo en el móvil. Y así es como se ve. Entonces si podemos, si cambiamos a la propia página de aterrizaje, aquí estamos. Así es como se ve. Así es como se ve en la página de aterrizaje. 11. Piño de pies responsivo: Entonces, ¿por qué no hacemos lo mismo que hicimos por el encabezado ahora mismo y duplicamos la carpeta para que tengamos un pie de página para los dispositivos móviles y otro para el escritorio. Por lo que esto ya se ve bien en el escritorio. Vamos a editar sección que avanzada y receptiva. Queremos que sea visible en escritorio, pero esconderse en tablet y teléfono móvil, o bien? Entonces vamos a duplicarlo. Y en este segundo se querrá decir sección de edición. Y luego en respuesta avanzada, queremos que la segunda foto se oculte en el escritorio. No queremos que sea visible en el escritorio porque lo haremos hermoso en tablet y móvil. Por lo que esto se creará para tablet y móvil, y esto es para escritorio. Entonces si cambiamos a móvil y tablet, el de escritorio se convierte en escala de grises, y ahora podemos editar éste. Deshaznos del logo del teléfono móvil. No necesitamos eso. No necesitas esa columna también. Ahora nos quedamos con estos huesos desnudos. Vamos a deshacernos de ese menú. Pero podemos centralizar esto menos. Es una línea en el medio. Actualicemos eso. Echémosle un vistazo en tableta. Así se ve en la tableta. Se C están en tableta. Podemos cambiarlo para decir, mira, es bueno diseñar mientras edita sección que tiene estructura de diseño activa. Yo quería tener esa estructura que actualizar. Entonces en el móvil, así es como se ve. Y luego en el escritorio, esto se ocultará y esto se hará visible. Por lo tanto, cambiemos al escritorio. Y ahora esto es calor y esto es lo que sería razonable al escritorio tuyo. Por lo tanto, pasemos a nuestra página, nuestra página de destino, y actualicemos para ver si los cambios han surtido efecto en nuestro pie de página. Me gusta lo que veo, pero ahora, si lo vemos en modo responsive y nos desplazamos todo el camino hasta la parte inferior. Ahora el pie de página se ve bien. Redujamos el espaciado a 30. Actualiza su lago superior, cómo está resultando. Entonces veámoslo en tablet. Por lo que así se verá en el modo tableta. Tenemos que ajustarnos en consecuencia también. Entonces reduzcamos la salud y la vida. Redujamos el fitness también. Siento que necesitamos reducir el espaciado aquí mismo. Entonces vamos a editar sección. También puede sacar eso por Control I y luego editar esta sección. Por lo que esta sección. Entonces vamos a reducir el relleno y el margen. Redujamos el. Por lo que notarás lo mismo que tener aquí. Después de deslindar el relleno, todo se ha ido al relleno por defecto para que podamos configurar todo desde cero. Entonces aumentemos el relleno ahí mismo. Y aumentemos eso. Háblalo a la izquierda. Hagámoslo 10. 10. Hagamos de esto una actualización de 70, 19 min ahí. Eso se ve mucho mejor, ¿verdad? Entonces aquí está nuestro menú. Vamos a cerrar eso. Desplazado por mi e-book. Entonces deberías estar por mi e-book o bien? Entonces recuerda, podemos aumentar este relleno de textos descriptivos ahí mismo a la izquierda tratando de deshacernos de eso. En realidad, 10, digamos cinco. Empujemos un poco esta columna del borde. Entonces lo hacemos al seleccionarlo. Después con margen a la izquierda, eso se incrementa en diez. Entonces vamos a copiar este estilo. Copiar eso. Vamos a pegar estilo ahí mismo. Entonces este es nuestro registro de fotos en tabletas, por lo que necesitamos reducir estos. Creo que quiero que esté alineado a la derecha en lugar de alinear a la izquierda. Entonces aquí, vamos ahí mismo. Queremos que estos se queden alineados así. Y entonces queremos aumentar eso ahí mismo. Esto también necesita estar alineado. Aumentemos el margen ahí mismo, y aumentemos el tamaño. tipografía es del tamaño, adecuado para mí. Deja me gusta más eso. Entonces pasemos a nuestra página de aterrizaje y la refresquemos. Está bien, así que vamos a previsualizar en tablet. Desplazemos hacia abajo y veamos cómo se ve nuestra foto. Escoger nuestro pie de página se ve mejor, pero ahora necesitamos empujar un poco esta lista hacia adentro para que el espaciado sea casi el mismo que el alma. Pasa al mega pie de página. Selecciona esta columna aquí mismo. O vamos a seleccionar la lista en sí. Un vasto. El enlace que estoy a la derecha, Es n, digamos 20. Actualizar eso. Entonces si pudiéramos cambiar a la página de aterrizaje y actualizarla de nuevo. Vamos a desplazarnos hacia abajo y echarle un vistazo. Pero queremos verlo en tablet. Perfecto. A mí me gusta así. Por supuesto, dado más tiempo, bastante seguro se puede llegar a algo que se ve increíble. Este es polvo para que podamos entender los conceptos detrás del diseño responsive. ¿ Cuáles son las herramientas que proporciona Elementor? Y cuál es la flexibilidad que tienes como usuario elemental para crear diseños responsivos. Entonces vamos a editar sección aquí mismo. Y quiero empujar esto hacia abajo para que quede por debajo de sus piernas. Por lo que bajo estilo. Vamos a sumar esto, hagámoslo el amarillo es, bueno, sé que el amarillo se ve raro en este verde. Pero eso es solo para ilustrar que puedes tener diferentes imágenes para los diferentes tamaños de pantalla. Recuerda en escritorio, tenemos verde. Ahora tenemos amarillo. Aumentemos. En primer lugar, vayamos a este defecto a la posición y digamos abajo, a la derecha. Entonces vamos a aumentar el tamaño del cliente justo ahí. Y digamos que aumentaron, actualizadas así. Entonces ahora cuando te seach al modo de escritorio, es verde. En tablet, CLO, o teléfono móvil. Puede ser rojo o puede ser la misma, misma imagen por ahora creada para ser perfecta para el teléfono móvil. Causa recuerda, una imagen podría verse impresionante en forma móvil, pero no impresionante en menos Doc Mode. Se supone que estos fitness son verdes. Hagámoslo así de verde. Vamos a buscar esa crema. Copiar eso. Cambiemos eso a verde. Cuando cambias el color en cualquier modo, escritorio, tableta o teléfono móvil, los cambios ocurren en los diferentes tamaños. Otra cosa que debes saber es que mover elementos alrededor, como mover la salud de antes de la aptitud física a después de fitness así. En tanto que el modo móvil o tablet se mueve lo mismo en todas partes en todos los demás modos. Entonces esos son cambios globales que estás haciendo. Moverse elementos alrededor es global. Entonces ahí lo tenemos chicos. Una página web de WordPress totalmente funcional construye con Elementor y es totalmente receptiva o móvil, de escritorio y tableta. Puedes usar esos mismos principios y conceptos para crear cualquier página web que quieras idear una página web que gente le gustará visitar en sus dispositivos de defensa. 12. Reflexiones finales: Espero que esto te resulte útil. Mi nombre es Ken best sum, tengo mucha curiosidad por ver qué se te va a llegar. Veamos las páginas de destino podrán crear como clase y ver cómo podemos ayudarnos unos a otros. De lo contrario, hablaré contigo la próxima vez. Sigue volviendo a ver si tengo una nueva clase a estrenar y los quiero a todos. Paz.