Clase de Elementor para principiantes - Aprende diseñando la página de aterrizaje de Lyft

1. Introducción: Bienvenido de nuevo a otra clase elemental impresionante conmigo puede versa. Siempre es un placer tenerte aquí. Si eres principiante, te estaré mostrando las diferentes herramientas y características de Elementor y no solo estaré mirando eso como una visión general, estaremos diseñando proyectos del mundo real, estaremos diseñando las páginas de aterrizaje de las conocidas mundialmente marcas. Y en esta primera clase se empezará con la hoja. Si no eres dueño de la hoja. Leaf es una empresa que se parece más o menos a Uber o barco. Se ocupan de derechos y ride-sharing y todo eso. Tienen una app. Por lo que tienen esta página de aterrizaje muy impresionante que estaremos viendo en un corto momento. Y luego estaremos diseñando esas páginas de aterrizaje en Elementor. Estaremos viendo las carencias de Elementor y estaremos viendo fuerza. Y para cuando terminemos, habrás entendido cómo llegar constantemente a la impresionante página de aterrizaje por tu cuenta. Entonces si sientes que quieres aprender a construir mejores páginas de aterrizaje para tu sitio web o la de tu cliente. Acompáñame a esta clase y te prometo que las próximas dos horas te estarán cumpliendo, o sobre todo, serán beneficiosas para tu futuro. Entonces únete a mí por ahí. 2. La página de aterrizaje que estamos diseñando: Por lo que aquí estamos en la página de aterrizaje de frondo.com. Esto es lo que se intentará diseñar hoy. Y así si pudiéramos simplemente desplazarnos hacia abajo y ver lo que tenemos en la tienda para nosotros. Aquí vamos. Entonces a medida que diseñemos esto estará tratando de entender cómo utilizar las herramientas y características de Elementor para construir una moderna página de aterrizaje de trabajo que pueda convertir a los visitantes en clientes. Entonces sin perder más tiempo, Empecemos. 3. Actualiza rápidamente el nuevo asistente de configuración de elementos: 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 seguir para configurar las partes básicas de su sitio web. Mientras creaba 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. Entonces como pueden ver en este momento, tengo una instalación completamente nueva de WordPress y estamos en la Versión 6. Y lo que quiero hacer es ir a Plugins, Agregar Nuevo. Para que podamos agregar Elementor y pasar por ese proceso. Buscaré la instalación de Elementor 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. De acuerdo, así que 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 apuntarse a una cuenta con Elementor. Pero la cosa es que no es necesario tener una cuenta con Elementor para usar Elementor. Entonces sólo voy a seguir adelante y saltarme esta parte. El segundo paso es aceptar, continuar con el tema hallow 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 nombre a nuestro sitio web. Mientras estabas instalando tu WordPress. Le diste un nombre al sitio web. Ese es el nombre que se mostrará aquí. Pero esto nos da la oportunidad de cambiar el nombre por cualquier otro nombre que queramos. Mi sitio web, y luego hagamos clic en Siguiente. Y si tienes un logo para tu sitio web y quieres agregarlo ahora mismo con anticipación. Simplemente puedes seguir adelante y abrir la mediateca y recogerla de la mediateca o cargarla desde tu computadora. Pero no vamos a hacer eso ahora mismo. Por lo que sólo me quedaré con este paso. Y claro que podemos agregar el logo más adelante y te mostraré cómo hacerlo. Hagamos 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 el editor Elementor. O podemos navegar desde cientos de plantillas o importar nuestras propias plantillas si las tenemos. Pero yo seguiré adelante y saltaré. Eso. Será redirigido al lienzo donde ahora podemos empezar a construir un sitio web. Y aquí vamos. Entonces básicamente eso es todo lo que quería mostrarte. Es una nueva actualización. No estaba ahí hace unos meses. Ahora, ya está ahí. Pero todo lo demás en las próximas lecciones sigue igual. El proceso sigue siendo el mismo para construir una landing page. Entonces sin perder más tiempo, Pasemos a la siguiente lección. Voy a ir a este menú de hamburguesas y hacer clic en Salir a Dashboard. Salgamos de esta página. Ahora estamos dentro del tablero y estamos listos para comenzar a construir el sitio web. 4. Instalación de los complementos: Lo primero que tenemos que hacer es instalar los plugins que estaremos usando. Por lo que vamos a seguir adelante e instalarlos todos a la vez y activarlos. Y a medida que diseñamos la página de aterrizaje, se llega a entender dónde se utilizará cada plugin. Entonces vamos a Plugins, Add New, y busquemos Elementor. Vamos a instalarlo. Y mientras estamos en ello, vayamos hacia abajo en el constructor de cabecera y pie de página de instalación Elementor. También necesitamos buscar otro plugin llamado formulador. Estos otros se están instalando en segundo plano. Entonces busquemos formulador. Esto nos permitirá crear estas diminutas formas aquí mismo. Entonces vamos a instalarlo. Y tengo una búsqueda de biblioteca de investigación. Y eso nos permitirá crear una barra de búsqueda en la parte superior y en cualquier otro lugar que necesiten una barra de búsqueda. Entonces una vez hecho eso, entremos dentro de los plugins instalados y activarlos todos. Así que solo confirme que tiene todos esos y seleccione, Activar en el menú desplegable, luego aplicar. Muy bien, Así que ahora todos nuestros plugins están instalados y activados. 5. Instalación del tema: Por si acaso quieres cambiar el tema que está instalado actualmente. Este es el momento de hacer eso. Y por supuesto, no quiero usar el tema que viene por defecto con una nueva instalación de WordPress, que es para mi caso, 2021. Es el tema actual. Quiero agregar Nuevo, y buscaré Astro. Este es uno de mis temas favoritos porque es un tema de usos múltiples que puedes usar para muchos tipos diferentes de negocios. Tiendas en línea, blogs personales, lo que sea. Astro es un tema súper impresionante que te recomiendo si quieres un bonito tema multiusos que puedes usar para tus proyectos de WordPress. Entonces lo instalaré. Vamos a activarlo. Impresionante. Entonces ahora mismo, vamos a cerrar esto. Por lo que ahora mismo, nuestro tema activo es Astro. 6. La barra de navegación: Entonces pasemos ahora a lo primero y creemos la barra de navegación superior. Entonces iremos dentro de apariencia, Elementor, constructor de cabecera y pie de página. Entonces sigamos adelante y sumamos nuevos. Vamos a darle un nombre. Ahora bar por ejemplo. Y vamos a darle a Publish. Entonces ahora para el tipo de plantilla, es un encabezado. Por lo tanto seleccione el encabezado, mostrar en todo el sitio web. ¿ Quién debería verlo? Todos. Personas que visitan tu sitio web. Y vamos a actualizar eso. Y aquí mismo de este lado derecho, tenemos unos ajustes que vienen con Astra. Y en la barra lateral, selecciona no barra lateral. Y ancho completo estirado. Desactivaré el encabezado principal, deshabilitaré el encabezado móvil, título y el pie de página, y tocaré Actualizar. Entonces ahora que lo hemos configurado en el back-end, vamos a diseñarlo visualmente en el front-end con Elementor. Entonces haga clic que se redirigirá al front-end donde ahora podemos empezar a construir esto. Entonces aquí estamos. Si eres nuevo en Elementor, necesitas pensar en términos de columnas. Y esta barra de navegación tiene tres columnas. Hay una columna que sostiene esta barra de navegación, y otra que sostiene la barra de búsqueda, y otra que sostiene este logotipo. Aquí mismo tenemos dos columnas, una que sostiene esta zona y otra que sostiene las imágenes. Y ya verás oh, eso a medida que bajamos. Entonces la cosa aquí es que necesitamos agregar una columna triple. Elige un anuncio que triple sección columna. 7. Agrega el logotipo: Y en este extremo, vamos a reducir un poco ese tamaño, y vamos a añadir un elemento de imagen. Ahí es donde irá el logo. Entonces así es como agregar un logotipo. Y ten en cuenta que una vez que seleccionas esto, aparece esta opción Editar imagen. Al seleccionar esto, cambia para editar sección. Entonces, cualquiera que sea el elemento activo que hayas seleccionado aquí es el que puedes hacer ediciones. Entonces si quieres saber qué está seleccionado actualmente, solo mira esto. Así que adelante y haz clic en eso y sube una imagen de logotipo. Y proporcionaré esta carpeta aquí mismo. Preparé una carpeta que contiene todas las imágenes que he usado en esta clase. Por lo que si quieres seguir, puedes descargar esta carpeta zip, extraer todas las imágenes y utilizarlas. Entonces aquí está nuestro logo. Simplemente voy a seguir adelante y de hecho, subiré todas estas imágenes porque las vas a necesitar. Pero voy a seguir adelante y agarrar el logo porque ya está cargado e insertado ahí dentro. 8. Agrega una barra de búsqueda: Por lo que lo siguiente que tenemos que hacer es agregar esta barra de búsqueda aquí. Y la forma de agregarlo, porque estaremos usando la búsqueda de marfil rezagada que acabamos de instalar. Lo que tenemos que hacer es agregar un código corto aquí y colocarlo allí. Y vamos a ir a agarrar ese código corto del plugin. Por lo que necesitamos ir al backend. Pero antes de hacer eso, vamos a dar clic a aplicar aquí. Está bien, para luego actualizar la página. Entonces en este punto, lo que quiero hacer es abrir una nueva pestaña y me voy a agarrar rápidamente esta sección aquí mismo. Vayamos al tablero. Copia eso. Acude al tablero. Y quiero ir directo dentro de marfil para que podamos crear nuestra barra de búsqueda. Entonces vamos a quedarnos con eso. Ahora si volvemos a abrir una búsqueda de biblioteca, vamos a escoger este código corto, copiarlo, cambiar la otra pestaña, hacer clic en el portador de código corto, y aquí, pegue ese código corto, luego aplique. Te das cuenta de que ya está apareciendo. Pero claro que necesita un poco de estilo adicional y nosotros nos encargaremos de eso, así que no te preocupes por eso. Por lo tanto, volviendo a la configuración aquí mismo. Entonces nuestro objetivo en este momento es básicamente tratar de stylet para que se vea similar a esto, pero va a ser una barra de búsqueda básica. Si quieres aprender a trabajar con barras de búsqueda en profundidad, puedes buscar videos y tutoriales en las barras de búsqueda de WordPress. Y si pudiera cambiar rápidamente a la página de aterrizaje de ascensores originales, nuestro objetivo es imitar esta barra de búsqueda, este esquema aquí en nuestra página. Por lo que aquí notarás que tenemos diferentes columnas con ajustes. Estos son los principales ajustes aquí. Y cuando amplías cualquier relleno aquí, se expande a esta área. Entonces en este momento, es la configuración de búsqueda que podemos ver aquí mismo. que podamos configurar los tipos de post que queramos. Y el mismo caso se aplica al resto de todos estos campos. Entonces si pudiéramos cambiar por aquí, pegamos este código aquí para poder mostrarles cómo vamos a usar este código corto. Pero déjenme borrar eso y volvamos aquí y agreguemos nuevo formulario de búsqueda. Este era el predeterminado para, pero queremos crear un formulario que usaremos en nuestra página. Entonces llamémoslo mi formulario de búsqueda. Vamos a guardarlo. Está bien, así que no quiero profundizar en qué resultados estará mostrando el formulario de búsqueda y todo eso. Pero lo que me interesa es hacer que se vea similar a esto. Por lo que nuestra área de interés es la pestaña Diseño por ahora. Y notarás que tenemos este formulario de búsqueda Personalizador. Simplemente haz clic en eso para habilitar la personalización de tu formulario de búsqueda. Al hacer clic, se redirigirá al personalizador de WordPress. Y aquí vamos. Por lo que aquí podemos elegir el estilo de forma. Por lo que actualmente tiene estos botones, pero no los necesitamos. Por lo que podemos seleccionar eso y publicar o ponderar. Entonces en este momento el formulario no aparece porque recuerda que hemos eliminado el código corto y tenemos que agarrar el código corto del nuevo formulario que acabamos de crear. Entonces vamos a duplicar esto rápidamente. Y en esta ficha, Volvamos atrás. Y vamos a agarrar esta forma. Copia eso. Y volvamos aquí. Aquí, y pega eso ahí dentro. Actualizaciones. Por lo que notarás que ya ha tomado la forma que hemos seleccionado en este personalizador. Por lo que ya está tomando forma. Apliquemos eso. De acuerdo, así que al menos tenemos algo con lo que podemos trabajar. Por ahora. Quiero que agreguemos el menú. Entonces podemos darle estilo a toda la barra de nav a la vez. 9. Agrega el menú de la nav: Añadamos un menú. Y la forma de agregar un menú es, primer lugar, volvamos al tablero. Y aquí dentro, lo que tenemos que hacer es crear unas páginas. En este momento tenemos las páginas por defecto que vienen con una nueva instalación de WordPress, así que las eliminaré todas. Mover a la basura. Aplicar eso. Y pasemos por un momento a la página web de la hoja. Y notarás que tenemos conductor, escritor, inicio de sesión empresarial, inscribirte cinco ítems. Entonces eso es básicamente lo que estamos haciendo cuando estamos creando las páginas, porque estas son páginas web. Al hacer clic en esto, tú, serás llevado a la página que contiene información sobre escritores si quieres ser escritor. Entonces vamos a crear unas cinco páginas. Por lo que diré Agregar Nuevo. Entonces conductor, así conductor. Y del lado derecho aquí, recuerda los ajustes de Astros. En esta sección aquí queremos deshabilitar el encabezado móvil del título y el encabezado principal deshabilitado y el pie de página. Y queremos asegurarnos de que esto esté lleno el cual se estiró y no hay barra lateral. Entonces para la plantilla de abajo Page Atributes dijo que es Elementor ancho completo y publicación. Entonces repetiremos el mismo proceso para todos los demás. Es volver atrás, añadir nuevo. Ahora avanza rápido, y crea el resto. Entonces haz lo mismo. Ahora que tenemos cinco elementos de menú, lo siguiente que tenemos que hacer es crear el menú real. Y eso lo hacemos entrando en los menús de apariencia. Y notarás aquí mismo que a continuación de los menús, hemos creado tu primer menú a continuación, que podamos crear un menú y colega, mi menú superior. Vamos a crear menú o cabalgar en. Ahora después de eso, estos elementos se activan y estas son las páginas que acabamos de crear. Así que selecciónalos todos y agréguelos al menú. Este menú, impresionante. Entonces reorganizémoslos en consecuencia. Por lo que conductor escritor de inicio de sesión empresarial registrarse, escritor de conductores, inicio de sesión empresarial , regístrese, y hagámoslo nuestro menú principal. Voy a guardar eso. Ahora estamos listos y estamos listos para ir al front end y agregar este menú que contiene todos estos elementos del menú justo aquí. Por lo que pinchando ahí, busquemos nav. Y notarás que tenemos menús de navegación de defensa. Nos interesa este que tiene odio FB para Elementor header pie de página builder. Arrástrelo ahí y notarás que los elementos del menú ya están apareciendo. Ahora actualizo mi página de aterrizaje después de agregar este elemento de menú aquí. Por eso esta zona se ve un poco diferente. Entonces si ves aquí una notificación azul diciendo que no tienes menús, actualiza la página para que este menú aparezca aquí mismo. Y si tienes múltiples menús que has creado aquí, se mostrarán aquí en este menú desplegable y podrás seleccionarlo, y lo que elijas se mostrará aquí. Entonces ahora digamos al menú que se vea así. Cuando pasas por encima de los artículos aquí te das cuenta que se vuelven morados. Entonces hagámoslo. Por lo que seleccionando su elemento de menú, se vuelve activo aquí puedo ir dentro de estilos. Debajo del menú principal. Tenemos topografía, y aquí es donde podemos cambiar la fuente y todo. Y lo que queremos hacer en este momento es cambiar el color flotante a ese morado que acabamos de ver. Vamos a darle un poco de color morado brillante. Sí, creo que eso me gusta. Yo copiaré eso. Y también asegurémonos de que cuando el enlace esté activo y tenga el mismo color púrpura. Adelante y actualicemos. Y vamos a previsualizar los cambios. Ahora sé que te estás preguntando, ¿qué tal estas líneas verticales aquí y esta línea horizontal aquí, dónde está? Y eso se debe a que todo aquí está dentro de este único elemento. 10. La sección de héroes: Y como mencioné, mientras empezábamos a diseñar la barra de navegación, todo dentro de esta página cae dentro de una sección. Y cada sección tiene columnas, al menos una columna. Por lo que como se puede ver, esta zona tiene dos columnas. El sitio que tiene imágenes y el sitio que sostiene los botones en el texto, y viceversa aquí mismo. Por lo que saltando a nuestra página del editor Elementor. En primer lugar, actualizaré los cambios que acabamos hacer porque por ahora hemos terminado de trabajar en la napa. Todavía le haremos algunos toques finales. Quiero cerrarlo haciendo clic en ese botón de allá y Salir a Dashboard. Entonces lo que queremos hacer es ir a las páginas. Y escogeremos una de las páginas para ser nuestra página de destino. Entonces vamos con la página de negocios. Entonces diré Editar. Y como habíamos configurado todo aquí para empezar, lo que tenemos que hacer es editar con Elementor porque ahora mismo estamos construyendo todo visualmente. Por lo que notarás que tenemos la barra de navegación, pero esta vez no es editable ni clicable. Y es porque no estamos dentro del editor de barras de navegación, estamos dentro del editor de páginas. Entonces lo primero que queremos hacer es crear esas dos columnas. Y aquí dentro, en esta columna del lado derecho, necesitamos tener dos imágenes. Por lo que sólo podemos tenerlos apilados juntos. Entonces para agregar una imagen debajo de esto, iré aquí a este menú y agregaré una imagen, arrastraré, y la soltaré cuando aparezca aquí esta línea azul. Ahora tenemos dos imágenes apiladas juntas, pero en breve, haremos que se superpongan así. En este otro lado, queremos sumar algunos de estos textos. Y me limitaré a copiar este texto directamente como está. Porque esto es sólo con fines educativos. No puedes ir a copiar la página web de alguien así como así. Entonces seguiré adelante y agarraré eso. Ahí mismo un impuesto, copia. Y aquí dentro haré clic en el signo más y añadiré un encabezado. Porque este es un rubro. Y una mejor práctica cuando estés diseñando páginas de destino o páginas web, asegúrate de usar un H1 por página porque H1 es el tema principal de la página. Y una vez que tengas un H1 en tu página de destino o en tu página web, todo lo demás puede ser subtítulo o subtítulo, que ahora caería en H2, H3, H4. Pero recuerda, un H1 por página. No tiene que hacerlo. Cambiemos el color aquí. Entonces con esto seleccionado, voy a hacer clic en estilo y el color del texto. Lo cambiaré a color que esté cerca de lo que queremos. Y por supuesto, mirar la fuente se parece más a Montserrat. Por supuesto, puedes elegir cualquier fuente que quieras. Adelante y digamos Montserrat. Por lo que en Tipografía, haga clic en este botón Editar y escriba meses alrededor. Y creo, sí, creo que eso es una fuente. Aumentemos el tamaño de la fuente. Creo que casi lo tenemos bien. Por ahora, solo veamos lo que tenemos. Entonces subiré datos y previsualizaré los cambios. Impresionante, Así que ahora está empezando a tomar forma. Permítanme copiar este texto. Y voy a añadir un nuevo hashtag. Y esta vez va a estar encima de eso. Y pegaré esa tipota aquí. Y voy a ver que es un tipo de letra más pequeño. Entonces, en primer lugar, es un H2. Y queremos asegurarnos de que sea negro. Dice copiar estos negros. Seleccione eso. Haga clic en el color debajo del estilo, copie eso, y luego seleccione aquí estas fuentes más pequeñas. Haga clic en el Color. Pega el que acabas de copiar el. Hay una ligera diferencia. Y luego necesitamos hacer estas fuentes más pequeñas. Y creo que también es Montserrat. Sí. Entonces sigamos adelante y digamos monstera bajo texto, tipografía, Montserrat. Y por supuesto, hagámoslo de ese tamaño. Actualizar eso. 11. Agrega los botones de héroes: A continuación, vamos a crear estos dos botones aquí mismo, aplicar para conducir, registrarse para conducir. Entonces lo que tenemos que hacer es volver a hacer clic en ese menú. Este es el menú click cuando quieras agregar cualquier elemento. Por lo que necesitamos una doble intersección y una sección interior habita dentro otra sección y se pueden agregar múltiples columnas dentro de ella. Entonces porque necesitamos dos botones justo aquí, solo necesitamos dos columnas. Voy a borrar eso y eso. Y ahora que tenemos estas dos columnas, arrastraré un botón elementos ahí dentro. Y si bien aún está seleccionada, es hora de darle estilo. Entonces creo que tiene este color morado. Entonces mientras aún está seleccionado, ve a Estilo. Ahora antes de ir al estilo, Vamos primero a cambiar los textos aplicados para conducir. Por lo que bajo el botón Contenido aplicado para secar. Ahora podemos ir dentro de la pestaña de estilo. Y bajo la topografía. Podemos, en primer lugar, cambiar el tipo a Montserrat. Y tenemos que añadir, notar que los botones justo aquí, cómo estos esquina redonda. Entonces ese es el radio fronterizo. Y debido a que esto está vinculado, cualquier figura que entremos aquí se aplicará a estas otras. Entonces digamos que 50 le da ese efecto de esquina redondeada. Y luego para el color, por supuesto, necesitamos hacerlo de color púrpura. Gracias. Fue a ver, un morado brillante. De acuerdo, así que sé un poco oscuro. Anillo de borde. Sí, bordeando azul. Haga clic en cualquier lugar dentro de aquí para llegar a ese menú. Ahora que tenemos este botón aquí mismo, podemos seguir adelante y duplicarlo. A continuación, arrastre la copia a esta otra columna y acercarlos más. Ahora necesitamos darle estilo a esto de manera diferente. Sin color de relleno, solo un contorno. Entonces con esto seleccionado, ir dentro de tipo. Entonces para el color, Vamos a cambiarlo a blanco. Y notarás que ha desaparecido. Pero eso es porque no tiene frontera. Y si le agregamos un borde sólido y le damos un ancho de uno y coloreado ese borde falta. El botón ahora es visible. Y cambiemos el color del texto a negro. Actualizar eso. Por lo que este botón está cambiando a grisáceo al pasar el mouse. Para lograr los mismos resultados, necesitamos entrar aquí bajo estilo de botón, tipo de fondo, bajo color. Cambia eso a un gris. Gris claro. Sí, creo que eso es bueno. Actualización. Y vamos a previsualizar los cambios. Está bien, así que ten en cuenta que aquí arriba, hay algo de espaciado. Pero en nuestra página no tenemos el espaciado, así que trabajemos en eso. Y eso se trata de margen. Por lo que estaremos sumando algún margen a la parte superior de las columnas. Por lo tanto, haga clic en la columna y seleccione. Ve a Avanzado, desvincula eso, luego agrega un margen superior. Es solo jugar con él y ver cuál encaja, cuál se ve mejor. Actualicemos eso. Repasemos los cambios. Por lo que al menos tenemos algún margen en la parte superior. El imagen parece estar bien, adecuadamente posicionado. Entonces lo siguiente que queremos hacer es agregar las dos imágenes y hacer que se superpongan así. 12. Agrega las imágenes de héroes: Vámonos aquí. Haga clic en la primera imagen, y por supuesto esto cambiará a la configuración de la imagen. Haga clic en eso. Y entraré dentro de mi carpeta. Encontrarás una carpeta de imágenes de sección de héroes. Por lo que podemos simplemente agarrar todas estas imágenes y tirarlas ahí. Volveré atrás y agarraré a estos otros que no tenemos que volver ahí cada vez. Entonces volvamos. También conseguiré estas imágenes de deslizador, digamos abierto. Entonces ahora que tenemos todas estas imágenes, tomemos eso e insertemos medios, actualicemos o montemos. Pasemos a la segunda imagen. Escojamos ese. Actualizar eso. Y revisemos los cambios. Por lo que ahí tenemos todo el contenido que necesitamos en la sección de héroes. 13. margins de botones y rellenos: Entonces, acerquemos un poco más estos botones. Redujamos esta brecha. Pero antes que nada, lo que quiero hacer es seleccionar esta columna, ir a Avanzado, y eliminar todos estos márgenes y relleno predeterminados. se aplica el mismo caso. Seleccione esa columna avanzada. Elimina todos estos predeterminados. Entonces apriételos más juntos así. Entonces diga Actualización. A mí me gusta dónde están ahora, pero ahora tenemos que empujarlos un poco hacia abajo porque esta distancia es demasiado pequeña. Entonces tomaremos toda la intersección de sección avanzada, eliminaremos este enlace, y luego agregaremos, tal vez, digamos una actualización 40. Estos botones parecen tener algún bonito relleno, parte superior, inferior y laterales. Nuestro parecía ser un poco más corto en altura. Entonces agreguemos un poco de relleno en la parte superior e inferior. Seleccionaré uno de esos botones. Voy a ir al relleno y decir aprendiz. mismo caso se aplica a este otro. Haga clic en Actualizar. ¿ Todo bien? De acuerdo, entonces lo siguiente que queremos hacer es hacer que estas dos imágenes se superpongan por aquí. 14. Cómo Styling las imágenes de héroes: Por lo que seleccionaré la primera imagen. Ve a Avanzado, y jugaremos con el margen y el relleno. Entonces, eliminemos esos enlaces. Y luego para el margen, aumentar el margen a palabras así. Muy bien, pasemos a la segunda imagen. Avanzado. Redujamos el margen superior. Démosle un negativo 100, negativo 150. Y luego reduzcamos el margen izquierdo. Y aumentemos el margen derecho. Démosle tal vez un 90. Y actualicemos eso al mirar los cambios. Impresionante. Creo que aunque no somos perfectos en este momento, nos vamos a algún lado. Nosotros lo hicimos. Por lo que ahora mismo, estoy satisfecho con nuestra sección de héroes. En lo que va de momento. A continuación, queremos pasar al área del cuerpo, que está conformada por un par de secciones, todas con diferente número de columnas y filas. Entonces. 15. La sección del cuerpo principal: Por lo que para la sección de cuerpo, necesitamos volver a tener una columna doble. Por lo que podemos duplicar esto haciendo clic en esto porque ya tiene dos columnas, o podemos volver a crear una columna doble. Por lo tanto, creemos una doble columna. Y notarás que aquí hay algún margen, espaciado entre las dos secciones. Entonces hagamos lo mismo. Añadamos algún margen, la parte superior de la sección. Así que haga clic derecho en Editar sección. Entonces irá aquí. En vasto. Eliminar el eslabón en el margen. Y vamos a darle a esto un margen, margen superior de 50. A lo mejor digamos 80. 16. Agrega una máscara de imagen: Añadamos una imagen aquí. Déjalo ahí dentro. Y por supuesto vamos a traer una imagen, tal vez este tipo, inserte medios. Y ahora lo que tenemos que hacer es mientras la imagen sigue seleccionada, ve a Avanzado, desplázate hacia abajo y verás máscara. Haga clic en esa máscara y diga en. Y se te presentará estos ajustes. Por lo que por el momento ahora mismo está configurado para circular. Probemos a los demás. Boceto de flores. No tenemos esta forma aquí en esta lista, pero siempre puedes subir tu propio SVG informal o puedes subir una imagen que tenga esa forma. Pero los archivos SVG generalmente se consideran inseguros. Creo que solo voy a seguir adelante y trabajar con sketch por ahora. Actualizar eso. Y podemos seguir adelante y agregar este bloque de texto con estos dos botones. Copiemos eso y lo pongamos aquí. Voy a dar clic en Plus, y eso es un encabezamiento. Voy a pegar eso ahí. Y recuerda que creamos algo parecido a eso Aquí está. Por lo que voy a hacer clic en eso, haga clic derecho, Copiar. Haga clic en ese botón derecho. Y no voy a pegar, superó su estilo para que no tenga que tratar de averiguar qué hice para que el otro se vea como se ve. Entonces ahí vamos. A continuación, queremos agarrar es esto de aquí. Es un sub-encabezado por supuesto. Por lo que podemos duplicar esto, cursor sobre estos y hacer clic en aquello, hacer clic dentro. Vienen aquí y pegan ese texto ahí. Y si bien aún está seleccionada, ve dentro de estilos, tipografía, eso es reventar el tamaño. Creo que me gusta así. Y arriba los datos. 17. Agrega texto corporal: Lo siguiente que queremos hacer es agarrar de nuevo algo de este texto. Haga clic en ese botón justo ahí para agregar un elemento. Y el elemento que estamos agregando estos textos. Haga clic aquí dentro, resalte todo, y pegarlo ahí dentro. Ahora si notas que has pegado ahí y el estilo del texto se ve divertido como en tal vez la fuente es grande. Asegúrate de seleccionar todo aquí. Haga clic en este toggle y despeje el formato para que en caso de que el impuesto viniera con algún preformato, deshaga de ese formato para que pueda hacer su propio formato. 18. Lista de funciones personalizada: Entonces aquí tenemos una lista y la lista tiene iconos. Entonces, ¿cómo podemos lograr eso en Elementor? Ahora hay diferentes formas de agregar esto, pero la forma que funcionará en este escenario es agregando una intersección. En esa intersección se dividirá en dos. Entonces tendremos una sección interna que tiene un ícono y un encabezado. Y luego debajo del encabezamiento tendremos el texto. Así que haz clic en el icono de signo más. Entonces, arrastremos un icono ahí y pinchemos ahí. Podemos agarrar con rumbo aquí o simplemente podemos duplicar esto y ponerlo en las ganancias confiables. Paguemos eso ahí dentro. Y ahora para los textos, podemos simplemente duplicar esto y arrastrar ese duplicado en lo que por supuesto ahora tenemos que cambiar esto. Entonces mientras esto se destaca, resalta todo lo que hay dentro y pega eso ahí dentro. Este espaciado es demasiado por lo que necesitamos reducirlo para que coincida con lo que tenemos aquí. Seleccionemos este texto avanzado, eliminemos este enlace y este enlace. Entonces para el margen superior, vamos a reducir el margen superior hasta ese punto. A lo mejor puedes ir más allá si quieres. Y así lo siguiente que queremos hacer es reducir el tamaño de esta fuente y mientras está seleccionada, ir al tamaño de estilo. Dejémoslo a los 20. Y luego arrastremos eso todos los pesos que apuntan. Redujamos aún más la distancia. Puede reducirlo así. Entonces noté que tenemos mucho margen por debajo de los textos. Entonces seleccionaré el texto y reduciré el margen inferior hasta ese punto. Ahora, todo lo que necesitamos hacer en este momento es duplicar eso y duplicarlo de nuevo. Y tenemos una lista. Para que podamos seguir adelante y copiar todos estos otros elementos de la lista que se pegan aquí. Agarremos este texto aquí mismo. Haga clic en ese texto, agréguelo ahí mismo. Después ve a que te paguen. Haré lo mismo, ya sabes, el simulacro. Copia que lo puso ahí dentro. Y me encanta día los cambios porque hemos hecho tantos cambios y haberlos salvado. Entonces vamos a previsualizar lo que tenemos hasta ahora. Entonces si empezamos a desplazarnos, creo que ahora mismo está empezando a tomar forma. Pero ten en cuenta que la distancia aquí es muy pequeña. Tenemos que aumentar el ancho del, del espaciado aquí para que coincida con esto. Y al mismo tiempo también hay que cambiar estos iconos que son demasiado pequeños para ser seleccionados, pero voy a hacer lo mejor posible. Seleccionaré eso e iré a Contenidos haciendo clic allí. Y puedo elegir un icono. Ganancias tan confiables, así que eso son unos billetes bancarios. Entonces solo escribiré dinero. Sí, creo que podemos trabajar con eso. O eso. También podríamos darle color negro. Y entonces en lugar de hacer lo mismo por el resto, solo copiaré lo que tenemos aquí. Y destacaré estos. Voy a pegar el estilo y va a cambiar a eso sobre esa pasta seleccionada. Y cambiaré esto por un ícono diferente. Selecciona cualquier icono aleatorio. Porque ahora mismo lo que necesitamos entender es cómo agregar y editar el icono no es realmente qué icono es el. Hagamos eso. Un auto, porque todo esto se trata de autos y camino. Actualizar eso. Y lo siguiente en lo que queremos trabajar ahora son estos dos botones. 19. botones y enlaces avanzados: Sigamos adelante y agreguemos una doble sección justo debajo de eso. Y aquí dentro podemos agregar nuestros botones. Entonces vamos a agarrar un botón. Ponlo ahí dentro. Seleccionaré este botón. Copiar, seleccionar este, pegar estilo y cambiar a ese color. Y luego duplicaré esto. Ahora déjame duplicar esto y arrastrarlo hasta aquí. Por eso se trata de un constructor de arrastrar y soltar. Entonces ahora que lo tenemos aquí, necesitamos darle estilo me lleva al segundo plano y todo eso. Entonces, antes que nada, cambiemos el color de la fuente a negro. Por lo que el estilo interior, mientras el botón sigue seleccionado, pasará al siguiente color. Cambio. Es esa falta. Entonces para el fondo. Queremos seleccionar el fondo y como ahora es verde, queremos venir y decir que necesita ser transparente, completamente transparente para que sea blanco así. Entonces otra cosa que queremos hacer ahora mismo es cambiar el texto del botón. Por lo que se aplicó para impulsar cómo funciona el Dr. pay. Vamos a hacer clic en eso. Aplicado a la Dra. Lisa. Otros dicen que es contenido. Cómo funciona el seco. Ahora notarás que no están alineados. Permítanme actualizar eso en los cambios de vista previa. Si me desplazo hacia abajo, nos desharemos de estos. No te preocupes. Hay demasiada distancia entre los dos botones y éste parece estar desalineado. Entonces lo que tenemos que hacer es volver a nuestra página, con razón BCE, y quitar el margen predeterminado y el relleno y hacer lo mismo por eso. Eliminar esos remantes por defecto y todo eso. Entonces acerquemos a estos dos y necesitamos empujar un poco a éste hacia abajo. Entonces vamos a aumentar el relleno, relleno superior así. Y sigamos adelante y agreguemos esta flecha al final. Por lo que mientras aún está seleccionado, ve a la biblioteca de iconos de contenido. Y tecleemos en flecha. Usemos este. Insertar. Y digamos que lo queremos después. Entonces justo debajo del ícono. Después de una actualización, vamos a previsualizar los cambios. Deshaznos de este botón antes que nada, antes de que nos olvidemos desplazándonos hacia abajo. Y aumentemos este margen superior para que estos botones tengan algo más de espacio, más espacio. Entonces, vamos a hacer clic en eso. Ve a Avanzado, quita eso, y luego margen superior. Démosle una actualización 35. Y antes de que me olvide, aumentemos el espaciado entre esta imagen y este bloque de texto. 20. Métodos de la sección: Por lo que voy a dar clic en la sección y el diseño e ir a donde dice columnas brecha. Entonces creo que sólo elegiré ancho y actualizaré eso y ver cómo se ve. Creo que me gusta hasta ahora, pero podríamos hacer mucho más. Podríamos hacer más. Entonces digamos más amplio. Está bien, Entonces, hasta ahora tan bien. Oh espera, mira cómo se ve este botón. Piensa que reducimos demasiado el espaciado. Vamos a reducir el margen encendido, creo que es la oreja izquierda, el margen izquierdo. Y actualizar eso. Hagamos una vista previa de los cambios. A mí me gusta hasta ahora. Entonces a continuación, pasemos a esta sección testimonial. Y notarás que hay más testimonios ocultos del lado derecho. Y para verlos, hay que hacer clic y desplazarse. 21. Agrega testimonios del cliente: Entonces para crear estos testimonios, necesitaremos instalar otro plugin, y te mostraré algo rápidamente aquí. Entonces sigamos adelante y tecleemos testimonios. Y te darás cuenta de que aquí tenemos elementos testimoniales, pero estos no son con los que queremos trabajar. Entonces volvamos al dashboard y entraré dentro de plug-ins y añadiré un nuevo plugin que tenga una opción que nos dará resultados que son similares a estos. Por lo que volviendo aquí, tipear elementos, elementos, niños. Instalemos elementos, elementos de niño o átomos. Está bien, entonces vamos a activarlo. Impresionante. Entonces ahora que está instalado, saltaré a nuestro editor y refrescaré esta página para que podamos aparecer aquí. Así que haga clic en el signo más aquí y escriba en testimonial. Y agarraremos este testimonio aquí. Y note que tenemos estas diferentes opciones de cómo queremos mostrarlas. Y puede seguir adelante y elegir cualquiera, creo que escogeré tal vez yo elijo éste. Entonces lo que tenemos actualmente es una muestra testimonial por diapositiva, y queremos que sean tres a la vez. Entonces vamos a colapsar la pestaña Layout e ir adentro testimonial. Y lo primero que queremos hacer es duplicar esto para que tengamos por luz en la página izquierda 1, 2, 3, 4. Y luego colapsemos la pestaña testimonial y abrimos Configuración. Debajo de Ajustes tenemos diapositivas que mostrar, digamos tres, para que sean tres que se muestran a la vez en la pantalla. Y vamos a actualizar eso. Analicemos los cambios. Muy bien, Así que vamos ahora poblemos cada testimonio con algún contenido. Y seguiré adelante y rápido y agarraré estos testimonios desde aquí. Entonces colapsando los ajustes, entraré dentro testimonial. Voy a sitio testimonial uno. También nombre aquí, Mary Mary maneja hoja desde 2019. Por lo que Mary Mary conduciendo ya que está corriendo 17. Y peguemos ese testimonio aquí. ¿ Verdad? Ya empieza a tomar forma. Como se puede ver. Agarremos el segundo testimonio aquí de Harold. Vamos a colapsar a Mary y abrir sistema en tu herramienta. Ese es Harold conduciendo con nosotros desde 2009, 2018. Paguemos ese testimonio ahí mismo. Agarramos ese emparejado. Contraer Harold. ¿ Verdad? Quieres decir Alex dice 16. Vamos a pegarlo testimonial ahí mismo. Y entonces sigamos adelante y agarremos el último testimonio aquí. Se derrumbó. Alex, expande eso. Digamos que Anthony Driving desde 2020, desde 2020,esforzándose bien Sperling, correcto. Está bien, Así que vamos a pegarlo ahí mismo. Analicemos los cambios. Desplazarse todo el camino hasta la parte inferior. Y agreguemos las imágenes aquí mismo. Por lo que pinchando en cualquier parte dentro de la sección, solo iré directo a Anthony en primer lugar. Y vayamos dentro del avatar del cliente. Y ya había subido estas imágenes aquí. Recuerda que proporcioné una carpeta zip que puedes encontrar a continuación en la descripción. Todas estas imágenes están ahí dentro. En realidad usé esta persona no exist.com para conseguir estos inmediatos. Entonces estas no son personas reales. Entonces elegiré a este tipo. Insertar medios, actualizar. Voy a colapsar a Anthony, ve con Alex. El avatar del cliente se llama hacia abajo. Agarra a este tipo. Se ve como una L, Es Harold. Adelante y agarremos el avatar del cliente. Agarramos eso. Y por último, sumemos la foto de Mary en esa actualizada. Impresionante. Pero ahora estos testimonios aquí no tienen una sombra de gota, pero los nuestros tienen una sombra de gota, así que necesitamos deshacernos de eso. Y vamos a ir dentro de estilo y buscar la opción para quitar la sombra de caja. Y en este caso está bajo la sombra de cuadro de diseño de estilo. Por lo que note que cuando hicimos clic en él, cambió un poco. Y lo que queremos hacer es hacer clic en esa minúscula caja ahí y hacerla transparente por completo. Entonces actualiza eso. Analicemos los cambios. ¿ Verdad? Entonces, desplazémonos hacia abajo y veamos los resultados que tenemos. Y notarás que tenemos personal extra aquí que no está, como estas estrellas de calificaciones y estas comillas. Y eso se debe a que estos tipos que hicieron Lyft no usaron elemental para crear esta página. A lo mejor estos tipos en realidad codificaron todo aquí, pero estamos usando un constructor drag and drop. Y el constructor drag and drop viene con ciertos elementos por defecto, pero podemos eliminarlos. Entonces, vamos a deshacernos de las cotizaciones. Pero si quieres mantenerlos ahí, puedes mantenerlos ahí. Si quieres quitarlos, adelante y quítalos. Entonces busquemos, me desplazaré hacia arriba diseño colapsado. Volver al contenido. Veamos dentro del testimonial habilitar calificación esta capaz eso. Entonces ahora eso se ha ido. Y habilitar las cotizaciones. Estos Abel eso también. Puedes seguir adelante y jugar más con los ajustes para ver qué más puedes hacer con los testimonios. Pero por supuesto, como ya han visto, aquí hay muchas opciones. Así que sigue adelante y prueba todos estos otros diseños y ve qué puedes lograr con tus resultados. El punto aquí es entender cómo usar las herramientas y características elementales para crear páginas web impresionantes. Y por supuesto, es bastante fácil ver que no pudimos crear estas flechas aquí mismo. Con el que desplazarse por los testimonios. Y por supuesto es porque usan diferentes tecnologías para crear su página. Estamos usando un constructor de arrastrar y soltar que tiene sus propios poderes y deficiencias. Entonces el nuestro se ve así. Y hay luce así. Entonces a continuación, trabajemos en esta sección azulada justo aquí, todo el camino hasta aquí antes de crear esta forma. 22. Sección corporal avanzada: Al mirar esta sección aquí mismo, notarás que es una sección azul y él tiene una mezcla de diferentes secciones de columna dentro de ella. Como se puede ver, se trata de una columna doble. Pero cuando vienes aquí, esta es una sola columna porque corre todo el camino hasta el final. Entonces lo que tenemos que hacer es entrar aquí, crear una sola sección de columna. Primero que nada le demos este color de fondo y ya lo había comprobado. Es si vas dentro, editas la sección, haces clic derecho en ella e ingresas ahí, vas al estilo, fondo, color. El color es hash, PB, VB, Ff, o ride. Y dentro de esto, necesitamos agregar una intersección de doble columna. Entonces entra aquí y di añadir una intersección, que ahora es una columna doble. Y debajo de ella, podemos agregar una sola columna. Sigamos adelante y solo eliminemos eso. Agrega otra intersección. Pero esta vez por supuesto, vamos a quitar esta sola columna, pero vamos a llegar a eso. Entonces en lo que quiero que nos enfoquemos es en esta parte superior para empezar. Entonces agreguemos esta imagen en esta columna. Y entonces aquí dentro tendrá que agregar algo de texto. Entonces vamos a copiar eso, justo con Lyft. Y sólo podemos seguir adelante y duplicar esto porque nos permitirá tener subtítulos uniformes. Llevaré eso y lo tiraré ahí. Yo agarraré eso. Y también me desplazaré aquí abajo. Duplicaremos eso y arrastraremos eso ahí dentro. Vamos a arrastrarlo hasta aquí. Vamos a dejarlo ahí y agarrar esto y ponerlo por encima de eso. Haga clic dentro de esta. Y peguemos texto. Nosotros sólo agarramos, sólo están poniendo mis manos en ello. Y por supuesto que puedes adivinar lo que haremos a continuación es egresar, duplicar estos y así es como elemental te hace fácil trabajar. No tienes que seguir agregando nuevos elementos. Ya puedes usar los elementos que ya peinaste. Entonces peguemos ese texto ahí. A continuación, vamos a crear este botón. Y podemos hacerlo duplicando esto. Y luego arrastrémoslo dentro de esta zona. ¿ Qué dice este botón? Consigue un derecho confiable en cuestión de minutos. Entonces cambiemos eso. Sexo. El botón. Si bien el botón sigue activo, vamos al interior del estilo. Y por lo tanto el color. Por supuesto que necesita ser amplio. Pero el tipo de frontera necesita ahora cambiar a Sólido y le daremos uno. Y el color del borde debe ser negro o blanco, o el color ¿está aquí? Es ese morado. Entonces démosle un color morado. Ese color púrpura brillante así. Y te darás cuenta de que tiene una sombra de gota. Entonces agreguemos aquí una sombra de gota. Pero así sombra de caja. Y luego reduzcamos la opacidad de esta sombra de caja para que te alientes a gritar. Sólo quiero que sea un poco sutil. Entonces subiendo al botón aquí mismo, color del texto, Vamos a cambiarlo a, creo que era negro. Entonces vamos a actualizarlo. Y noto que tiene este diminuto ícono justo aquí. Entonces vamos a añadir un icono. Volvamos al contenido. Si bien aún está seleccionado. Haga clic en ese minúsculo icono justo ahí. Ripe puede encontrar el coche correcto, auto. Agarremos eso, insertemos eso. Siguiente. Estos son dos botones más, y tienen un estilo más o menos parecido a este botón de aquí. Entonces, solo duplicemos eso. Arrástrelo y suéltelo justo debajo de esto. Vamos a duplicarlo de nuevo porque hay dos botones. Agenda tu escritura avanzada. Sepan que tienen razón. Sepa que su conductor lleva una máscara. Entonces con eso activo la masa. Y el segundo dice, programa tu viaje con anticipación. Entonces vamos a hacer clic en eso de antemano. Actualicemos el horario. Correcto, tiene 1 r Asegurémonos de que estos iconos vienen antes que el texto. Entonces antes, y para este antes también. Antes. Actualicemos eso. Siguiente. Añadamos una imagen del teléfono. Haga clic en esa imagen. Entonces voy a hacer clic en eso. Agarra este teléfono aquí. Ahora inserte medios. Actualizar eso. Siguiente. Vamos a crear este botón. Entonces solo vamos a seguir adelante y duplicar eso. Y ponlo justo aquí, arrástralo y soltarlo en la actualización que y son ¿qué dice? Consigue un paseo. Entonces diré nuestro paseo. Correcto. Añadamos este logotipo. Pero ahora este logo, aunque parece estar directamente debajo de este botón, no están juntos, no están en un solo grupo. Y te darás cuenta de que cuando estés haciendo esto en pantallas móviles, porque vamos a golpear Control Shift I por un momento. Y si hago esta pantalla más estrecha y me desplaza hacia abajo, notarás que la imagen viene antes ese logo y el botón viene antes de la imagen. Por lo que este logo facilidad con estos textos y vienen después de esta imagen. Entonces eso significa que se supone que debemos agregar una nueva sección justo debajo de estas secciones de doble columna. Y recuerda que habíamos agregado un doble, otra sección de doble columna. Podemos usar eso. Entonces agreguemos una imagen aquí. Voy a hacer clic en eso. Deberíamos tener ese logotipo aquí. Adelante y usemos esa. Inserta medios, y pongámoslo en el lado izquierdo. Siguiente. Agarremos este texto aquí mismo. Copia eso. Y voy a hacer clic en eso. Arrastra un editor de texto aquí. Haciendo clic ahí y pega ese texto ahí dentro. Y a esto se debe sumar aquí mismo. Entonces únete. Y luego vamos a actualizarlo. Siguiente. Echemos un vistazo a cómo se ve esto en las pantallas móviles. Sólo por un momento. Entonces si colapsamos ese desplazamiento hacia abajo. Sí, por lo que va directamente por debajo de esto, por debajo de éste. Entonces esta es una nueva sección. Sigamos adelante y creemos una nueva sección. Entonces duplicaré eso. Y ahora deberíamos tener una nueva sección. Entonces me voy a deshacer de todo ese logotipo. ¿ Qué tenemos aquí? Tenemos esto, las picaduras correctas podrían ir plátanos. Y ese soy yo, H2. Entonces haré clic en ese ícono ahí mismo y arrastraré un encabezado y pegaré eso aquí. Cambiemos el color a negro. Por supuesto, necesitas ser consistente ya que estás creando estas páginas. Yo sólo estoy poniendo cualquier negro, pero si estás usando negro, asegúrate de estar usando consistentemente el mismo negro. Si estás usando un color específico, morado, asegúrate de que tu botón sea morado. Cada botón que es morado usando el mismo morado, no diferencia un morado. Actualicemos eso. Y esta fuente parece ser Roboto, las fuentes predeterminadas. Entonces cambiémoslo a Montserrat por consistencia. Eso es en lo que estamos tratando de insistir. Montserrat. O sea, podemos darle un peso de tal vez 700. Sí, las cosas han sido 100 años. Está bien. Agarremos eso y pinchemos ahí y reemplacemos estos por ese nuevo texto. Pero notarás que este texto es un poco más pequeño que éste. Entonces hagámoslo un poco más pequeño que los otros. Entonces suelo tal vez. Sí, actualicemos eso. Esta frase parece estar en una línea. Entonces vamos a expandir eso todo el camino a tal vez en algún lugar allí. Actualizar eso. Entonces ahora seguiré adelante y duplicaré esto una vez más porque recuerden, todo este contenido que estamos creando en este momento está en la sección azul. Por lo que aquí es donde agregaremos nuestro deslizador de imagen. Quitémoslo. 23. 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. 24. Carol de imagen de desplazamiento: Por lo que ahora tenemos esta sola columna en una sección. Siguiente cosa que queremos hacer es tipo logo, logo cliente por IQ kids. Arrástrelo al final. Aquí podemos sumar todas las imágenes que queremos para cada diapositiva aquí. Por lo que iré dentro del Título 1 y haré clic en el área de imagen. Estas son las imágenes que estarán usando. Por lo que voy a dar clic en el primero, el insertado ahí dentro. Haga clic en el segundo. Pongámoslo ahí dentro. Y puedo adelantar aquí para poder sumar el resto. Vamos a actualizarlos. Y note que tienen sombras de caja y no queremos esas caja-sombra, así que tendremos que deshacernos de ellas. Entonces saltando dentro de estilo, Vamos a Logo y te darás cuenta de que tenemos este frontero-radio. Vamos a darle un 10 o escribir actualización que. Quitemos la sombra de caja. Entonces haciendo clic en esa opción de sombra de cuadro ahí, y luego ese botón de opacidad ahí mismo, podemos reducir la visibilidad de la caja-sombra y actualizar eso. A medida que nos movemos. Espero puedan ver algunas de las fortalezas y deficiencias de un constructor de drag and drop como Elementor. Pero hay muchas otras herramientas que puedes combinar con Elementor para obtener mejores resultados. Y recuerda, estamos usando la versión gratuita de Elementor. La versión de pago tiene muchas más características y herramientas que pueden ayudarte a lograr resultados mucho mejores. Y de nuevo, todo se trata de tu creatividad. Vamos a crear esta región de disponibilidad. Entonces eso es x, se parece más o menos a esto. Entonces solo seguiré adelante y duplicaré esto en caso de que te perdieras mis instrucciones sobre cómo plantear esto. Estas dos opciones, al pasar el cursor, cómo habilitar eso. Entra dentro de este programa unas nuevas preferencias de usuario y asegúrate de que los manejadores de edición estén configurados en sí. Entonces salgamos de eso y arrástrelo hasta aquí. Ahora por supuesto lo reemplazaré con eso te lleva acaba de copiar en la actualización del otro lado. Por lo que a continuación, queremos crear esta sola línea en la línea cuatro. 25. Agrega una forma: Entonces lo siguiente que queremos hacer es crear esta forma. Y como pueden ver, tenemos dos columnas. Una columna que está sosteniendo el texto, y esta columna que está sosteniendo el formulario. Entonces, en primer lugar, es de lado saltado, nuestro tablero. Por supuesto, como mencioné, hay muchos plug-ins de forma por ahí, pero los que usaremos, el que usaremos para esta clase es formulador. Entonces, desplazémonos hacia abajo y busquemos formulador y pinchando a la derecha. Por lo que te llevarán a esta ventana aquí mismo. Y verás esta opción aquí. Crear formulario puede crear encuestas, pero por supuesto esta clase no está por encima la creación de formularios simplemente seguiría adelante y haría lo que queremos. Y podemos escoger cualquier preset aquí. Por lo que sólo iré con el registro o podemos empezar con un espacio en blanco. Nos deja recoger en blanco y continuar. Llamémoslo registro. Y luego creémoslo o montemos. Entonces aquí está. Podemos seguir adelante y empezar a sumar campos. Estos campos. Por lo que voy a dar clic en Insertar y puedes agregar cualquier campo que quieras. Entonces escojamos dos campos cualquiera, como el correo electrónico y el teléfono. Entonces insertemos campos. Y notarás que están apilados yendo hacia abajo. Pero lo que queremos lograr es una forma de una sola línea. Entonces volviendo aquí, Vamos a arrastrar esto y soltarlo tan pronto como veas esa línea azul justo aquí. Déjala caer ahí, y luego vamos a darle a Publish. Se presentará con estos código corto. Basta con hacer clic en ese pequeño icono para copiar el código corto. Recibirás ese diminuto mensaje. Vuelve a nuestra página aquí. Y ahora, mientras aún tenemos este código corto copiado en nuestro portapapeles, bueno, primero que nada, crea una sección de doble columna. Y de este lado de la sección de doble columna, añadiré un elemento de código corto. Entonces, arrastrémoslo al final aquí, ahora podemos pegar ese código corto que acabamos de copiar. Y por favor observe este número porque lo estaremos usando en breve cuando estéis aprendiendo a agregar algún CSS personalizado, aplicaremos eso. Crecamos hacia abajo a esa sección. ¿Verdad? Observe que se puede, por ahora no se puede ver nada porque en primer lugar, vamos a darle este fondo azul y añadir estos textos. Por lo que agarrando esta sección, Editar estilo de sección es entrar aquí. Y le daremos ese color de fondo. Gracias estuvo en alguna parte. Vamos con esos datos. Entonces de este lado, queremos tener estos textos. Entonces voy a agarrar eso. Entonces entraré aquí y seleccionaré Encabezado. Pega ese texto ahí. Y digamos este color al blanco. Texto. Blanco. Por supuesto, hagamos que el tipo sea la gráfica Montserrat, ya es Montserrat, así que estamos bien para ir. Muy bien, Así que si ahora previsualizamos los cambios, desplácese hacia abajo y vea qué tenemos. Entonces esto es lo que tenemos actualmente, pero el botón está debajo de los campos de entrada. Entonces, ¿cómo lo traemos aquí? Ahora, llega a un punto en el que cuando estás trabajando con plugins de WordPress y WordPress, todos esos plug-ins son incapaces de ayudarte a lograr ciertas apariencias que quieres en tu página. Por lo que eso requiere CSS personalizado. 26. Cómo Styling la forma con CSS personalizado: Si bien todavía estamos en esta página de vista previa, no en la página de edición, irá por dentro personalizar y añadiremos algún CSS personalizado. Wordpress te proporciona esta sección aquí mismo. Si nos desplazamos hacia abajo, encontrarás CSS adicional. Por lo que nuestro objetivo ahora mismo es llevar este botón a un lado. Y nuestro plugin no tiene eso por defecto. Entonces, ¿cómo hacemos eso? Entraremos aquí en el CSS Adicional y solo cambiaré de pestañas rápidamente. En primer lugar, ya había preparado algún fragmento de código que estaremos agregando en el por lo que estos fragmentos de código estarán en la carpeta zip en la siguiente descripción, así que asegúrate de agarrarlos y agregarlos será muy fácil. Así que agarra el primero, SO agarra el primer fragmento de código a su copia. Vamos dentro de nuestra página y peguémosla ahí mismo. Y cuando lo pegues, mira lo que pasa aquí. Por lo que ahora el estilo ha cambiado. En primer lugar, publiquemos eso. Recuerda, hemos utilizado para ministro para crear esta forma. Y hemos usado un código corto. Déjame hacer clic en eso. Hemos utilizado estos códigos cortos que nos han proporcionado formulador. Y este formulario tiene este número aquí mismo, que es el número del formulario. Si pudiera volver adentro para ministro en formas de camarilla. Te darás cuenta de que tenemos el formulario justo aquí, formulario de inscripción. Y si hace clic en este COG con aquí, tenemos copia código corto. Ese es el mismo código corto que tenemos aquí, y tiene este número 350 hasta ahora. Nuestra página aquí está desalineada porque este 570 es el número de la otra forma que uso para crear estos fragmentos de código. Por lo que necesitamos reemplazar estos 570 por el número de su formulario, 352 en todo ahora está correctamente alineado. Adelante y publiquemos eso. Volvamos aquí. Haga clic en Revisar. Y ahora esto es lo que tenemos, pero queríamos ejecutarlo todo el camino hasta el final. Por lo que volviendo dentro de nuestro formulario en cualquiera de los dos formularios, formulario de inscripción, click, Editar. Entonces podemos cambiar la apariencia ahí dentro porque como mencioné, esta forma no es editable con Elementor. Es editable con el plug-in que lo creó, el cual está formulado. Entonces ahora que hemos abierto el formulario de inscripción, ve dentro de la apariencia y podemos hacer ediciones ahí dentro. Entonces lo que queremos hacer es primero ir a los colores y luego bajo la costumbre, obtendremos todas estas opciones. Pero lo que nos interesa es el botón Enviar. Entonces haga clic en eso. Y cambiemos el color de fondo a blanco. Por lo que sólo voy a hacer clic en ese blanco. Y luego en el hover, ¿ o parece que tiene ese gris? Entonces, sin embargo, queríamos tener un color gris y puedes recogerlo a partir de aquí. Y en foco, queremos que tenga ese mismo gran color y que actualice eso. Entonces volvamos a esta página y digamos Aplicar. Desplazarse hacia abajo. ¿ Verdad? Entonces vamos a dar click en vista previa. A ver lo que tenemos ahora. Entonces esos son nuestros botones hasta ahora, necesitamos cambiar el color del texto a negro. Entonces para hacer eso, volvamos aquí y debajo del color de fondo tenemos el color del texto. Démosle ese gris oscuro que está cerca del negro. Y este negro ahora se está aplicando al estado de enfoque. Asegurémonos de que se aplique al hover y al default porque aquí mismo sigue siendo negro en todos los estados. Entonces copiaré ese código. Y luego voy a venir de lado el estado de hover, Haga clic en eso y pegado ahí dentro. Y entraré dentro del estado por defecto, copiaré eso, y lo pegaré ahí. Actualizar el formulario o derecho. Entonces si volvemos aquí y nos desplazamos hacia abajo, haga clic en que aplique. Entonces solo digamos Vista previa. Desplácese hacia abajo. Y el botón en este momento debería tener ese color cuando nosotros sin embargo, es gris y el texto sigue siendo negro. Entonces ahora es el momento de darles esa esquina redondeada. Al igual que hicimos con los otros botones. Dentro de formulador. Desplácese hacia abajo, encontrará una sección CSS personalizada, habilite CSS personalizado. Y aquí puedes agregar más CSS personalizado para darle estilo específicamente a tu formulario. Aquí mismo ya tenemos selectores básicos para las diferentes partes. No hablará de lo que son los selectores. Porque recuerda, esto no se trata de CSS, se trata de entender que puedes hacer estos cambios, estas ediciones. Entonces volveremos a nuestros fragmentos de código y tomaremos estos dos fragmentos de código y volveremos aquí y los pegaremos ahí dentro. Entonces día arriba. Entonces si actualizamos eso, entonces previsualizarlo aquí mismo. Veamos cómo se ven las formas ahora tienen esa esquina redondeada y el botón aquí mismo es invisible porque el fondo es blanco. Pero vamos a cerrar eso. Y entremos aquí. Desplácese hacia abajo, vuelva a hacer clic en el formulario y aplique. Entonces si hacemos clic en Vista previa ahora, desplácese hacia abajo. Nuestra forma ahora tiene este botón de esquina redondeada y las esquinas justo aquí, el radio de borde es de 5, se ve un poco mejor. 27. secciones de columna doble: Entonces saltando a esta página aquí mismo, agreguemos eso, Vamos a añadir esa columna. Y ahora en esta columna aquí mismo, lo que necesitamos es seguridad primero, cómo aparecer como un extraño. Recuerda, en primaria puedes reciclar cosas. Entonces, ¿por qué no los escogemos primero, duplicamos eso. Y luego arrastrémoslo hasta aquí. Suéltala ahí. Vamos a duplicar este texto aquí mismo también. Y arrástrelo ahí abajo. Y entonces vamos a agarrar de qué manera. Todavía tenemos este texto más pequeño ahí mismo. Entonces vamos a duplicar eso. Y arrastrémoslo hacia abajo. Arrástrelo al lugar. Entonces ahora pongamos esa seguridad primero. Ponlo ahí dentro. Adelante y agarremos eso. Cómo, cómo aparecer como un mejor extraño. Haga clic en eso, luego pegue esto ahí dentro. Entonces tomemos eso también dentro de ahí y peguémoslo ahí dentro. Y como ya puedes adivinar, ya creamos algo como esto antes, así que no tendremos que recrear. Entonces vamos aquí a agarrarlo desde donde lo diseñamos, donde aquí está. Entonces duplicemos eso y arrástrelo a nuestro nuevo spot. Dejémoslo ahí. Y ahora el margen aquí parece ser demasiado. Entonces vamos a reducir el margen en la sección de botones. Pero si lo dejamos a los 15, ahora digamos sólo cinco. Y ahora solo digamos 0. Entonces actualice eso. Desplazamiento hacia abajo o hacia la derecha. Entonces, agreguemos esa imagen que se supone que está aquí. Haciendo clic en su elemento de imagen. Agarremos una imagen ahora mismo. Imágenes como agarrar. Agarremos a esta señora. Agarremos de nuevo a este tipo. Lo vio bastante, pero no tenemos demasiadas imágenes. Así que actualice eso. Vamos a previsualizarlo o RI. Pero ahora necesitamos aumentar un poco el espaciado. Entonces vamos a agarrar esta sección, editar sección. Y luego, antes que nada, quita ese eslabón en el relleno y agreguemos algo de relleno superior de tal vez 20. Y esto parece ser lo contrario de esto. Por lo que ahora la imagen llega a este lado y el textblock va al otro lado. Entonces lo que tenemos que hacer es duplicar eso y luego simplemente arrastrar bien estas columnas a un lado. Y ahí lo tenemos. Y me he dado cuenta de que aquí no tenemos suficiente espacio. Entonces hagamos que el espaciado aquí sea más amplio. Por lo que las columnas brecha, Vamos a ver, más ancho. Actualizar eso. Hagamos lo mismo para este diseño. Las columnas brecha más ancha. Pero cambiemos primero esta imagen. Permítanme usar eso para esa sección. Entonces, a continuación, trabajemos en esta área. Pero antes de eso, noté que el botón justo aquí, sólo hay un botón justo aquí. Entonces vamos a quitar este extra. De hecho, quitemos esa columna y dejemos ese botón ahí mismo. Y podemos cambiar lo que dice el texto. Conoce más sobre el eje de la vacuna. Haciendo clic en el botón en sí. Más sobre lineamientos comunitarios. Haga clic en esas pautas y piense que la canción estaba diciendo sobre aprender sobre seguridad. Aprende sobre seguridad. Actualizar eso. Y vamos a previsualizar los cambios. Desplácese hacia abajo. Hagamos algo con este botón aquí mismo. Se ve un poco exprimido. Ahí mismo. Actualizar eso. Entonces lo siguiente que queremos hacer ahora podemos ir a trabajar en esa zona baja. Y esta es una sección de una sola columna de ancho completo. 28. Sección de columna única de ancho completo: Por lo tanto, agreguemos una sección de una sola columna de ancho completo. Ahora, antes que nada, ves que esto es texto, pero esta es una imagen porque es algo seleccionable. Entonces vamos a añadir un elemento de imagen ahí dentro. Y luego pinchemos ahí. Escogeré, escogeré este logo que había creado para esa zona. Y como se puede ver en tamaño, Es muy pequeño, 123 píxeles por 54 píxeles. Y por eso encaja bien ahí. Si eliges una imagen grande, llenarás esta zona y no quieres eso. Así que asegúrate de que tu imagen tenga el tamaño correcto. A continuación, vamos a crear estos. Te ayudamos a mover tu. Entonces seguiré adelante y agarraré este texto aquí mismo, lo duplicaré, y arrastraré esto en la pasta que ahí dentro. Y luego pongámoslo en el medio. Y luego para agregar estos textos animados aquí mismo, necesitaremos instalar otro plugin que agregue más funcionalidad a elementor. Y eso se llama complementos esenciales para elemental. 29. Agrega un texto animado: Entonces volvamos dentro de nuestros plugins de panel. A ver si ya lo tenemos. No, no lo hacemos. Entonces agreguemos complementos esenciales para Elementor. Mostrar. El mismo espectáculo. Y es la primera. Por supuesto. Vamos a instalarlo. Está bien, entonces activemos eso. Entonces este es un asistente de configuración. Sólo tienes que seguir adelante y dar click siguiente. Y lo que nos interesa es el texto elegante, así que está comprobado. Podemos seguir adelante y dar click Siguiente. No instale esto. Siguiente. Terminar. Impresionante. Con eso instalado ahora tenemos complementos esenciales y podemos acceder a ella aquí. Entonces antes que nada, actualizaré esta página cuatro, seguimos adelante. Entonces refrescaré la página para que se cargue add ons esenciales. Muy bien, así que vamos a desplazarnos hacia abajo por abajo. Y ahora escribiré texto y notarás que tenemos diferentes elementos de textos, pero lo que necesitamos es el texto de fantasía. Así que agarra eso y déjalo justo debajo de esa x justo ahí. Por lo que estos elementos de texto de fantasía aquí tiene el texto del prefijo y el texto del sufijo. Entonces, eliminemos el prefijo y el sufijo. Ahora nos queda esta zona animada en esta es una lista de todas las diferentes palabras o frases que quieres animar. Entonces en nuestro caso aquí mismo tenemos clientes, ideas, entrevistados, visitantes. Vayamos con esos por ahora. Somos ideas en sus estudiantes, pacientes. Básicamente solo los estoy duplicando y agregando el extra. Añadamos uno más. Empleados, negocios, negocios y empleados. Entonces vamos a actualizar eso. Y no queremos que esté escribiendo, queriendo desvanecerse hacia abajo. Entonces vamos a la configuración de textos de fantasía. Y ahora en estos ajustes aquí ve al tipo de animación, selecciona lo que quieras. Entonces en este caso estamos diciendo desvanecerse. Y así sintió que estaban buscando podemos cambiar el tiempo de retardo. Cuánto tiempo quieres que se quede ahí mismo antes de que pase a la siguiente palabra o frase. Esto parece estar moviéndose rápido y de manera tan ágil. Esto parece tener esa transición lenta. A continuación, vamos a crear esto. Copia eso. Vamos a duplicar eso. Después arrástrelo justo debajo del texto. Entonces lo pegaré ahí dentro. Voy a ir al estilo y alinearlo en el centro. Actualizar eso. A continuación tenemos que añadir este botón. Ya estás adivinado. Sólo tenemos que entrar, agarrar estos aquí mismo. Pero no estamos agarrando la sección interna, estamos agarrando el botón en sí. Duplicar eso. Déjala caer aquí. Y pongámoslo en el medio. Es demasiado margen justo aquí por debajo de esto. Entonces mientras este texto está seleccionado, iré a Avanzado, rompo eso y eso, y luego reduciré el margen inferior. Creo que ese es el lugar correcto. Y seleccionaré este texto de fantasía y haré lo mismo. Entonces vamos a romper eso y vamos a reducir el margen superior. Vamos a reducir, Vamos a reducir también el margen inferior. Ese año el botón se ve bien. Aprende sobre el negocio de las hojas. Está seleccionado. Actualizar eso. Siguiente. Vamos a crear este logotipo. Vamos a crear este área de logotipos. 30. Agrega un deslizador de logotipo del cliente: Entonces vamos a seguir adelante y agarrar. Duplicemos esta sección aquí mismo. Y quitémoslo todo. Eliminar todos estos otros elementos. Quitemos ese botón. Y luego voy a añadir log cliente logo gota dentro de la. Ahora, recuerda que ya habíamos usado esos elementos del logotipo del cliente aquí arriba. Por lo que voy a dar clic en cualquier lugar dentro de aquí. Y voy a copiar. Y me desplazaré hacia abajo y pincharé en cualquier lugar dentro de aquí. Y pegaré el estilo. Vea, todos los estilos aplicados a esto ahora se aplican en el otro. Y todo lo que necesitamos hacer ahora es sustituir las imágenes por nuestras imágenes. Y la suma estará usando estos logotipos aquí abajo. Entonces voy a agarrar eso, colapsar esa Agarra imagen dos. Agarra Logo árbol. Contraer que expanda la imagen para colapsar eso, expandir eso. Imagen 5. Colapso que duplicó. Doble seis. Duplica eso. Y por supuesto necesitas reemplazar el nombre. Puedes darle un nombre. Ascensión. Entonces vamos a duplicarlo una vez más y añadir un logotipo más. Y vamos a actualizarlo. Correcto, así que vamos a previsualizar los cambios. Desplazemos hacia abajo y veamos qué tenemos hasta ahora. Y luego note que hay logotipos. Los logotipos parecen ser más pequeños y necesitamos hacer el nuestro un poco más pequeño. Entonces colapsemos los ajustes locales. Vamos dos diapositivas a mostrar. Hagámoslo quizá seis. Hagámoslo siete. Sí. Por lo que siete los hace un poco más pequeños porque el espacio es limitado. Y vamos a previsualizar los cambios. Está bien, creo que me gusta así, pero reduzcamos el margen. Margen superior justo aquí. Es un poco demasiado en nuestra página de aterrizaje. Por lo que voy a hacer clic en el logotipo del cliente elementos avanzados. Quita eso, y voy a reducir el margen superior. Digamos hasta ese punto. Desplazemos y veamos qué tenemos hasta ahora. Nuestro sitio web está casi completo como puedes ver. Entonces lo único que no hemos diseñado es un pie de página. Bajemos y diseñemos. 31. Diseñar el pie del pie: Entonces lo que voy a hacer, entonces lo que voy a hacer en este momento es salir de esta página porque ya terminamos con ella por ahora. Seguiremos adelante y diseñaremos la carpeta. En. Una vez que hayamos terminado con nuestra carpeta, abriremos toda la página y la haremos sensible en diferentes dispositivos y tamaños de pantalla. Y voy a hacer clic en eso. Entonces para crear una carpeta, usaremos la misma herramienta que usamos para crear el encabezado y así el constructor de encabezado y pie de página Elementor. Entonces haga clic en eso. Y vamos a dar clic en Nuevo, añadir nuevo. Y aquí mismo le daremos un nombre, mi carpeta. Y por supuesto, es pie de página. Queremos que sea visible en toda la página web. Y queremos que queremos asegurarnos de que todos tengan acceso a ella. Entonces vamos a darle a Publish. Y antes de editar con Elementor, Vamos a asegurarnos de que sea completo Elementor, ancho completo, sin barra lateral, ancho completo estirado. Desactiva estos tres y el pie de página porque no quieres mostrar el valor predeterminado que viene con Astra. Queremos crear la nuestra propia con Elementor. Así que actualiza eso primero. Perdón por eso. Y entonces podremos editar con Elementor se llevará al frontend. Como de costumbre. Lo diseñaremos visualmente. ¿ Verdad? Entonces aquí estamos. Quien siga adelante y echemos un vistazo a cómo se ve. Entonces estas son nuestras cuatro columnas. Se trata de una sección de 40 columnas. Entonces haz clic en eso, y luego elijamos éste aquí mismo. Ahora tenemos estas cuatro columnas. Entonces lo primero que hay que hacer aquí es dar clic a este botón aquí mismo. Queremos añadir estos textos, esta lista de textos. Entonces escribiendo aquí, listas. Y tenemos diferentes elementos de lista. Y lo que nos interesa es la lista de páginas por elementos kid. Entonces déjalo caer ahí y podemos agregar el primer elemento, que se convertirá en un conductor. Los CDs de ganancias ayudan a conductor de seguridad. No hace falta un subtítulo por ahora. Entonces podemos seleccionar la página a la que conducirá ese enlace. Porque al hacer clic en esto, serás llevado a una página. Cualquier enlace en el que haga clic hay una página. Así que vamos a elegir cualquier página o ir con una página de negocios. Y el artículo se pone en la lista de inmediato eliges una página. Podemos duplicar eso. Ayuda. Eso se puede editar. Sólo estoy inventando estas palabras. Entonces los negocios. Entonces duplicemos eso. Cambiemos esto para montar. El colapso menos complicado que. Cambiemos esto a nosotros. Y claro que podemos hacer la lista todo el tiempo que quieras, pero voy a parar ahí. Hagamos dos listas más. Entonces solo duplicaré eso. Y lo arrastraré ahí dentro. También lo duplicaré de nuevo y lo arrastraré ahí. Entonces, en primer lugar, si pudiera seleccionar eso, vaya al texto de estilo. Se puede cambiar el color del texto a negro. ¿Qué más? Y luego podemos copiar el estilo, pegar, estilo. Pegar el estilo de nuevo. Actualizar eso. Ahora agreguemos estos subtítulos aquí mismo. Chofer, escritor, ascensor. Entonces voy a hacer clic en eso. Voy a conseguir un encabezamiento de texto, H2. Tenemos que hacerlo un poco más pequeño. Entonces vamos a la tipografía. Probemos 18. Sí, creo que eso me gusta, pero necesita ser de color negro. Y por supuesto, cambiemos. El texto dice conductor. Y puedo duplicar esa droga con ahí. Se trata de un escritor jinete. Duplicar eso, lo probé por ahí. Y éste es ascensor. Entonces vamos a crear nuestros botones. Haga clic en eso, vaya a Botón, suéltelo ahí. Volvamos aquí mismo al estilo. Cambiemos el color a blanco. Y entonces vamos a darle un borde sólido de uno. Y vamos a dar el borde de la columna negra anulación. Entonces démosle un radio de frontera de 50. Entonces el color del texto en este momento no es ninguno. Vamos a cambiarlo a negro. ¿ Y qué dice el botón? Aplicación del conductor Lyft. Entonces mientras todavía seleccionados, desplazémonos hacia arriba. Ascensores. App de conductor, Hola. Y propio, sin embargo, tiene ese gris, por lo que el estilo. Si bien aún está seleccionado sobre, seis colores deben permanecer negros. Y el color de fondo debe ser este gris. Sí. Entonces ahora simplemente duplicemos eso dos veces. Y entonces podemos cambiar lo que dice el texto. Aplicación de escritor de hojas, justo en la web. Derecho en web o a la derecha. Entonces, hasta ahora me gusta lo que tenemos, pero creo que necesitan estar un poco más cerca y dejar algo de espacio a los lados. Entonces lo que tenemos que hacer es agregar algo de relleno en la sección que los está sosteniendo. Y necesitamos en primer lugar romper este enlace. Después la derecha, el relleno izquierdo. Aumentemos el relleno izquierdo a tal vez 50, tal vez un 100. Y el relleno correcto lo mismo. A 100. Entonces actualicemos eso. Vista previa de la cadena, vista previa de los cambios. Todavía no, así que hagámoslo. Entonces digamos 200 por 200. Entonces vamos a actualizarlo. Creo que eso me gusta. Entonces ahora que tenemos la carpeta lista, Salgamos de aquí, Salgamos de eso al tablero. Y luego vamos a Pages. Y esta es nuestra página. Entonces vamos a hacer clic derecho y abrir enlace en nueva pestaña para que podamos previsualizarlo. Entonces ahora que se agrega todo el contenido a la página y se presenta, sigamos adelante y hagamos los toques finales en todo el relleno y margen y alineaciones que necesitamos en la página, entonces hagámosla plenamente responsiva antes de terminar. 32. Cómo hacer que la página sea: Entonces lo que voy a hacer es traer a arriba las DevTools pulsando Control Shift I. Cada navegador tiene DevTools. Si estás usando Chrome, aún podrás acceder a las DevTools. Y luego voy a golpear este icono del modo de diseño responsive aquí mismo. Y traerá estos ajustes diferentes para diferentes tamaños de pantalla. Aquí puedes ver tenemos el Galaxy S9, el iPad, iPhone, y podemos cambiar por los diferentes dispositivos y ver cómo se verá la página web. Por lo que ahora, como pueden ver, el menú se ha derrumbado. La barra de búsqueda se ha movido hacia la derecha, y nuestro logo permanece justo aquí. Por lo que aún tenemos los tres elementos en tablet y en iPhone. Se acercan los elementos, pero siguen ahí. Y por supuesto en todos los demás teléfonos, los tres artículos seguirán ahí. Entonces déjame saltar a nuestra página y hagamos el mismo turno de control, yo y C, el estado actual. Entonces le pegaré a ese ícono aquí mismo. Y veamos qué tenemos. Entonces esto es lo que tenemos actualmente. Así es como muchos luce el logo, parece que cada elemento está apilado encima del anterior. Tenemos bastante trabajo que hacer aquí. Entonces seguiré adelante y pegaré eso y luego cerraré eso. Y aquí mismo, le pegaré a eso y luego cerraré eso. 33. navbar responsa: Por lo que volviendo a nuestra página de aterrizaje, cursor sobre editar con Elementor y haga clic en barra de navegación. Muy bien, entonces aquí estamos. Entonces lo que quiero hacer es golpear este pequeño icono del modo responsive aquí abajo. Se va a traer este bar. Y como ves, aquí tenemos los diferentes dispositivos, y puedes elegir el móvil. Empecemos con eso. Vayamos al modo tablet. Así se ve. Creo que en escritorio podemos trabajar con eso. Entonces lo que quiero hacer es crear una barra de navegación diferente para cada dispositivo para que podamos personalizarlo cómodamente sin afectar cómo se ve en otras áreas. Entonces duplicaré eso. Y esto es lo que personalizaremos para la tableta. Y lo duplicaré de nuevo. Y esto es lo que tendremos para nuestros smartphones. Entonces en esta barra de navegación que será visible solo en escritorio, voy a hacer clic en eso, asegurarme de que sea la que estoy editando y L vaya adentro avanzado. Desplázate hacia abajo en encontrarás sensible. Y lo que queremos hacer es escondernos en tablet y pantalla móvil y actualizarlo. Eso significa que este menú no lo hará, esta barra de navegación no será visible en las pantallas móviles. Y se puede decir que por el color que tiene cuando estamos en un modo diferente. Entonces si hago clic para ir a la tableta, note que ahora es escala de grises, el color ha cambiado. Es decir, no está activo. En otras palabras, ahora mismo no es visible. Si lo estás viendo en tablet y si vamos dentro pantalla del móvil y vamos a seleccionar la tablet napa, vamos adentro avanzado, desplázate hacia abajo, responsive. Y vamos a ocultarlo en escritorio y móvil. Actualizar eso. Y vayamos dentro del tamaño móvil. Y ahora nota que ambos son en escala de grises por lo que no están activos ni pantalla móvil. Y luego aquí mismo, Vamos a seleccionar eso avanzado y vamos a ocultarlo en tablet y escritorio para que sólo sea visible en smartphones. Ahora que tenemos eso, quiero arrastrar esto y ponerlo en la parte superior para que podamos trabajar con él cómodamente y ver cómo se ve cuando está ahí arriba. Lo que queremos hacer es lograr este resultado. Sólo traigamos de vuelta la vista móvil. Y lo que queremos lograr son estas tres columnas actualmente las tenemos apiladas una encima de la otra. Seleccionando aquí esta primera columna que sostiene el logotipo. Queremos ir dentro de la disposición. Y en el punto ancho hizo el logotipo tal vez 10 por ciento, digamos 20 por ciento, 30 por ciento. Haré clic en la columna justo aquí, sosteniendo la barra de búsqueda, y entraremos aquí, digamos 60 por ciento. Entonces 30 más 60, eso es 90. Demos a este 10 por ciento la columna ahí que el 10 por ciento, voila. Entonces los tenemos en fila. Analicemos los cambios y veamos cómo se ve. Control Shift, I. Haz clic en este icono aquí mismo. Tenemos que sumar algún margen y hacer algunas alineaciones sobre los elementos. Entonces volvamos aquí. Y lo que queremos hacer es seleccionar esa columna. Y vamos a romper este enlace y ese enlace. Y luego queremos sumar un margen superior arriba en algún lugar ahí. Hagamos lo mismo por la columna eddie logo. Rompamos eso y eso. Entonces agreguemos el poquito marginal superior hasta algún lugar allí. Actualizar eso. Echemos un vistazo a cómo se ve o a RI. Por lo que en este momento están correctamente alineados, pero aún necesitamos agregar algún margen o relleno tanto al lado izquierdo como al derecho de la pantalla. Por lo que seleccionar este elemento en sí o ir a Avanzado, parece que es el margen. Disminuyamos el margen en algún lugar ahí, negativo 20. Analicemos los cambios. Hagamos también lo mismo por el logotipo. Seleccione el logotipo en sí. Avanzado. Tratemos de aumentar el margen de ese lado y actualizar su vista previa los cambios. Creo que estamos llegando a algún lugar con esto. Y por supuesto podemos jugar con él hasta que estés satisfecho. Siempre y cuando sepas usar las herramientas, podrás jugar con estos números y valores hasta obtener la apariencia perfecta. Ahora, pasemos al tamaño de la tableta. Por ahora ya terminamos con eso. Y esta es nuestra tableta Napa. Y por supuesto, abramos la configuración del iPad. Tenemos que empujar el menú para decidir. Con el menú seleccionado, el menú de navegación seleccionado hace clic en Diseño. Vayamos aquí al alineamiento, y pongámoslo en el lado derecho. Entonces, ahora mismo necesitamos dividir este ancho 100 por ciento. Exactamente yo quería. Entonces como se puede ver, esta columna es larga, va todo el camino hasta aquí, por lo que debería ser alrededor del 55 por ciento. Esto parece 45 por ciento. Entonces vamos a seleccionar la columna del logotipo. Disculpe, el 55 por ciento. Empujemos el logo todo el camino hacia la izquierda o hacia la derecha. Por lo que el menú ha sido empujado hacia abajo porque no hemos dado valores para estas columnas, tan buenos. Esto puede ser un 30 por ciento. Y vamos a darle al menú 15 por ciento. Ahora tal vez vamos a darle alrededor del 10 por ciento. Entonces vamos a conseguir este 40 por ciento. Demos a esto un 50% de derecho. Entonces vamos a previsualizar los cambios en este momento. Abramos el iPad. Entonces creo que podemos trabajar con eso. Pero claro que siempre puedes seguir trabajando en ello hasta conseguir algo que realmente te agrade. El punto aquí es aprender a usar las herramientas. Eso es en lo que insisto. 34. Sección de héroes responsivo: Pasemos a la siguiente parte, que es la sección de héroes. Como puedes ver en este momento, este lado tenemos dos imágenes. Y a un lado tenemos el texto y los botones. Y cuando controlamos turno I, este encabezamiento textos aquí mismo se derrumba y llega al centro, su centro alinean los botones justo aquí, nuestro central alineado. Ahora sólo tenemos una imagen. El otro ha desaparecido o está oculto. Entonces hagamos que esta sección de héroes sea receptiva porque hemos terminado con esto. Entonces cerremos esta ventana. Volvamos al tablero y vayamos por dentro de las páginas. Y nuestra portada son los negocios, tan a menudo con Elementor. Así que vamos a seguir adelante y hacer clic en ese icono del modo responsive. Veamos cómo se ve en la tableta. Entonces así como hicimos con el menú justo aquí, necesitamos conseguir a estas columnas un nuevo ancho para la tableta. Y entonces qué queremos hacer con este de aquí. Entonces lo que queremos hacer es hacer clic en esta columna justo aquí y dentro de la columna. Démosle un 100 por ciento que anulamos. Igual que eso. Actualicemos eso. Ahora mismo, todo está centrado, así que centremos nuestro texto y botones. Entonces comenzando esto, seleccione aquello y golpee esa alineación, escriba el selecto esto, haga lo mismo. Y ahora, ahora que tenemos estos botones aquí mismo, no podemos hacerlos apilar uno encima del otro porque están en columnas diferentes. Entonces lo que haremos es duplicar esto y podemos seguir adelante y seleccionar este top en una sección, ir a Avanzado responsive. Y entonces digamos, hola Don tablet. Entonces esto es lo que será visible cuando estemos justo aquí. Pero cuando vayamos dentro del modo tablet, esto es lo que será visible. Y lo que queremos hacer es arrastrar esto por debajo de esto así. Y ahora podemos deshacernos de esta columna. Haciendo clic en este botón aquí mismo. Alinearlo en el medio. se aplica el mismo caso. Actualiza eso, y quiero arrastrar esto hasta ese punto ahí mismo, pero como puedes ver, no puedo arrastrarlo directamente ahí mismo, así que solo lo arrastraré hasta aquí. Y cuando lo libere, vendrá justo debajo de eso. Simplemente encuentra una manera de dejarlo caer justo debajo de estos textos para que puedas trabajar con los más cómodamente y ver cómo se alinean. Entonces ahora volvamos atrás y ocultemos esto en tablet. Actualizar eso. Y reduzcamos este tamaño de fuente porque se ve un poco demasiado grande. Tipografía. Creo que esto es un poco más audaz, así que vamos a darle un peso de fuente de 700. Piensa que es un poco más oscuro, así. Actualizado. Entonces bajemos a las imágenes, seleccionemos la columna de imagen, y le demos un ancho de 100 por ciento, tal y como hicimos con esta columna aquí mismo. Entonces un 100 por ciento y ya está tomando esta forma, esta forma aquí mismo. Entonces lo que haré es seleccionar esta imagen. Ahora ve a Tableta Haydn de respuesta avanzada. Entonces en este momento sólo esto será visible en tableta, igual que aquí mismo. Por lo que golpeamos guardar y previsualizar los cambios. Esto es lo que parece. Whoa, necesitamos esconder estos dos botones primero. Entonces volvamos aquí rápido. Selecciona esos dos botones. Avanzado, responsive, Hi Don, escritorio y smartphones. Actualizar eso. Y si volvemos a nuestra página, está bien, entonces tenemos nuestros botones originales de escritorio, pero cuando controlamos el ojo de oveja, ahora tenemos esos dos botones que se apilan juntos en tablet. A ver La distancia justo aquí. Tenemos que aumentar un poco la distancia aquí mismo. Entonces volviendo a esta imagen, Vamos a seleccionar la sección interna. Ir a Avanzado. Y aumentemos el margen inferior. En primer lugar, quitamos ese enlace. Se ha incrementado el margen superior hasta algún lugar allí. Y el margen inferior hasta algún lugar allí. Actualización. Hagamos una vista previa de los cambios. ¿ Verdad? Por lo que nuestro espaciado aquí se ve un poco mejor. Por lo que esta imagen necesita alguna corrección. Pero ten en cuenta que sólo tenemos esta imagen ahora porque esta otra está oculta en tablet. Entonces lo que tenemos que hacer es llevar esto al centro. Entonces seguiré adelante y seleccionaré esa columna. Y eliminaré estos enlaces ahora mismo. Y luego seleccionando la imagen en sí, vaya a Avanzado. También mueves esos enlaces. Después trae de vuelta el relleno. Vamos a darle un relleno de 25. Y vamos a previsualizar los cambios o bien, pensar como lo que tenemos hasta ahora. Creo que necesitamos aumentar el relleno aquí un poco más allá, tal vez un 50, 70. Hagamos una vista previa de los cambios. Está bien, pero ahora nota que por el relleno que hemos agregado la imagen, esta distancia es demasiado grande. Entonces sigamos adelante y reduzcamos el margen. El hecho del margen inferior, eliminemos ese margen inferior y actualicemos eso. Vista previa de los cambios. Eso es más parecido, pero podemos ir un poco más allá y reducirlo hasta 30. A lo mejor. Seguiré adelante y volveré a previsualizar los cambios. Eso se ve bien. No exactamente así, pero aún tenemos algo con lo que podemos trabajar. Recuerda, tómate tu tiempo para trabajar en esto y hazlo perfecto. Por lo que estoy satisfecho con nuestra sección de héroes por ahora. Estampa para pasar a la sección principal del cuerpo y hacerla sensible. 35. Sección corporal responsiva: Entonces volviendo a la página principal, la página real, piensa que la teníamos luciendo bonita, pero recuerda agregamos relleno alrededor de esta imagen, sin lados, así que tenemos mucho relleno aquí. Redujamos el margen superior en esta sección. Por lo que al seleccionar esta sección, iré a Avanzado desvincular eso. Y notarás que se saltó al alza después de quitar los márgenes predeterminados. Y ahora le podemos dar el margen que queremos. Solo usemos nuestros ojos y veamos dónde queremos tenerlo. Creo que necesitamos darte tal vez 10, marginal 10 o derecha, así que me gusta eso hasta ahora. Siguiente sección, pero en este momento estos iconos parecen un poco exprimidos. Y así tenemos que añadir un poco de espaciado entre el icono y los subtítulos como llegar y hacer eso. Por lo que necesitamos conseguir estos tal vez 10, 10% por ciento en este 90 por ciento. Hagamos lo mismo por este 10 por ciento y por el horario flexible 90 por ciento. Y por último, ese 10, 90% actualiza eso. Analicemos los cambios. Está bien, eso también se ve bien. Es mucho mejor mirando el botón aquí mismo. Casi parece un círculo. A ver cómo se ve eso. Y parecen haber centralizado este subrubro aquí mismo. El nuestro no es yo creo que me gusta el nuestro así. No tenemos que copiar exactamente lo que tienen. Pero si quisieras lograr eso, tendríamos que seleccionar eso. Entonces sólo ven aquí y di centro alinear hacia atrás. En el mismo caso con eso. Muy bien, así que pasemos a este botón aquí mismo. ¿ Qué aspecto tiene esto? Está bien, están apilados uno encima del otro. Podemos hacer lo mismo que hicimos por estos dos botones aquí mismo. O simplemente podemos dejarlos uno al lado del otro. Veamos qué podemos lograr con eso. Entonces sigamos adelante y duplicemos esto también. Para que podamos esconder uno en el escritorio. Ocultemos esto. Ocultarlo en el escritorio. Y ahora llevemos esto y lo pongamos justo ahí debajo de eso. Y vamos a deshacernos de esta columna aquí mismo. Actualizar eso. Por lo que esto será visible sólo en tablet, y esto será visible en el escritorio. Entonces vamos a ocultarlo en la tableta. Avanzado responsive. Hola Don, tableta. Actualizar eso. Y vamos a previsualizar los cambios. Ahí vamos. Se ve bien, así como esto. Se puede jugar con la distancia entre los dos. Hazlos más estrechos o más anchos, ¿verdad? Entonces pasando a la sección testimonial, ¿qué aspecto tiene esto? Entonces ahora mismo están exhibiendo sólo uno y el nuestro también está jugando. Yo quiero darte un ejercicio. Quiero que dupliquen esta sección aquí mismo y hagan la copia de visible en tableta sólo en lugar de la de tableta para mostrar solo un testimonial en cada momento dado. Y una vez que hayas hecho eso, pasemos ahora a esta zona, aumentemos este margen aquí mismo. Como puedes ver en este momento, es un poco diminuto. Entonces seleccionaré esta sección, iré a Avanzado, quitaré ese enlace ahí mismo y le daré tal vez un 50. Sí, creo que eso me gusta. Hagamos lo mismo para esta sección azul aquí mismo, o seleccione la sección interna aquí mismo. Vayamos a Avanzado. Elimina ese eslabón y dale un margen superior de 50. Entonces actualiza eso. Aquí, Vamos a previsualizar los cambios o ¿verdad? Por lo que se ve un poco más presentable en este momento. Y como nota en este momento, esta columna estaba por debajo de este botón. A estas alturas se ha saltado a este otro lado. Y en el nuestro, no ha saltado al otro lado. Y esto por cómo lo agregamos. Recuerda, teníamos esta sección de doble columna. Entonces, ¿cómo ponemos esto? ¿ De este otro lado? También utilizamos la duplicación. Entonces vamos a duplicar eso como lo hemos estado haciendo. Arrastremos esto ahí dentro. Y ahora queremos que esto sea visible sólo en tablet. Entonces vamos a Avanzado con ese seleccionado responsive. Alto no lo actualicen los ordenadores de sobremesa y los teléfonos inteligentes. Y queremos ocultar esto en tablet y smartphones. Tan avanzado. Ocultarse en tabletas y smartphones. Creo que esto se ve bien, pero vamos a previsualizar los cambios. Creo que me gusta cómo se ve. Pero podemos ponerlo en medio, así. Seleccionándome ahí mismo. Deshacernos de esta columna aquí mismo. Realmente no está jugando ningún papel. Y vamos a seleccionar eso. Puso esto en el medio y eso también. Desplácese hacia arriba hasta el estilo. Siguiente. Aquí están nuestros testimonios, auto desplazamiento, piensa igual donde están hasta ahora, entonces tenemos esta disponibilidad de bicicletas. Piensa que podemos agregar algún margen o relleno y empujarlo un poco hacia la derecha. Entonces, vamos a seleccionar ese texto. Ir a Avanzado. Vamos a aumentar el relleno en 20. Actualizar eso. Analicemos los cambios. Y note que nuestro formulario aquí mismo se ha derrumbado, mientras que el formulario aquí mismo sigue en línea. Y de nuevo, eso es por el método que hemos usado para agregar el formulario aquí mismo usando para ministro, tendríamos que agregar algo de CSS personalizado aquí para hacer de este un formulario en línea en tableta. Pero ese no es nuestro objetivo para esto. Nuestro objetivo es entender las herramientas elementales. Por ahora sólo iremos con el colapsado así. Entonces vamos a cerrar eso. A continuación queremos pasar a este apartado. Veamos qué tenemos hasta ahora. Voy a hacer clic en ese modo responsive. Desplazarse hacia abajo, ¿verdad? Entonces creo que podemos hacer esta columna aquí mismo parece ser más larga que esta columna y, y es por eso que los botones aquí parecen alineados adecuadamente. Pero los nuestros parecen un poco exprimidos. Entonces hagamos que esta columna sea un poco más larga. Desplazarse hacia abajo. Seleccionaré esta columna. Entonces vamos a darle a este un 30 y darle a éste un siete. Muy bien, actualicemos eso. ¿ Verdad? Entonces hagamos lo mismo por esto aquí mismo. Aumentemos eso a tal vez 60, 40. Actualizar eso. Ya casi terminamos. Entonces veamos qué tenemos para este apartado. Desplazemos hacia abajo. Casi similar. Pero ahora note que nuestros logotipos aquí. En primer lugar, sólo podemos ver dos logotipos y son un poco grandes. Pero veamos qué podemos hacer al respecto. Vamos a colapsar el logotipo luego ir a Configuración. Y veamos dónde se desliza para mostrar. Digamos cuatro. Sí, eso me gusta. Actualicemos eso. Analicemos los cambios. Desplazarse todo el camino hasta la parte inferior. Sí. 36. Sección de pies de base: Entonces, desplazémonos hacia abajo por el pie de página. Veamos qué tenemos de nuestro lado. Por lo que el nuestro parece un poco desordenado. Tenemos que hacer bastantes mejoras o Knauer, así que vamos a saltar justo aquí. Y ahora que hemos terminado con el contenido de la página principal, podemos seguir adelante y cerrar esto y Salir a Dashboard. Entonces voy a hacer clic en eso. Vamos al interior de la apariencia, Encabezado Elementor y pie de página constructor. Y editemos la edición de pie de página con Elementor. Muy bien, Así que entremos al modo responsive. Vayamos dentro de la tableta. Entonces lo que tenemos que hacer es duplicar esto como lo hicimos con el encabezado o con la barra de navegación. Y lo haremos visible sólo en tableta. Responsable. Por lo que queremos ocultarlo en el escritorio. Y smartphones. Actualiza eso, y queremos que esto sea visible sólo en el escritorio. Entonces actualicemos eso. Entonces vengamos aquí mismo y seleccionemos la sección. Quitemos estos enlaces aquí mismo. Y luego vamos a vincular el relleno entre sí y darle a esto algo de relleno. Démosle tal vez un 50. Entonces, vamos a seleccionar la primera columna aquí mismo. Ir a Layout. Démosle tal vez un 20, 20% por ciento o 20. Y vamos a darle a esto una captación del 30% ahí. Hagamos una vista previa de los cambios. Control Turno. Doy clic en este icono del modo responsive, y esto es lo que tenemos en la tableta. Entonces creo que me gusta cómo se ve. Entonces voy a salir del tablero y voy a ir por dentro de las páginas. Vamos a ver, haga clic con el botón derecho en abrir enlace en nueva pestaña, y veamos la página ahora. Por lo que iré a Control Shift. Cambiaré al modo responsive. Y veámoslo de arriba a abajo en un iPad o cualquier tableta. Veamos cómo se ve en un Galaxy S9. Y así notarás que en este momento no se ve mal, presentable o pantalla móvil. Y eso es porque intencionalmente dejé fuera la parte responsiva móvil. Ahora que has aprendido a hacer que los diferentes elementos respondan en la tableta, usarás los mismos principios exactos para que respondan en la pantalla móvil. 37. Conclusión: Entonces eso es todo chicos, esto marca el fin de la clase. Espero que hayan disfrutado viendo. Por supuesto, esta es la primera de una serie de clases donde te estaré mostrando cómo usar Elementor construyendo landing pages del mundo real que han sido exitosas, landing pages de marcas mundialmente famosas. En esta clase, sí levantamos. Siguiente clase, estaremos mirando otra marca famosa y estaremos reproduciendo su página de aterrizaje usando Elementor hasta la próxima vez que sea niño, can bursa piece.