Nuevo flujo de trabajo basado en contenedores de Elementor (2023): construye una página de destino para un sitio web de ejercicios desde cero

1. Introduccion: Bienvenido de nuevo a otra clase elemental increíble conmigo puede mejorar. Siempre es un placer tenerte aquí y estoy muy emocionado de presentarte una nueva clase sobre cómo construir hermosas páginas de destino y sitios web con Elementor. Como de costumbre, ya seas dueño de un negocio, un freelancer o simplemente alguien que busca mejorar tus habilidades de diseño web. Esta clase te enseñará todo lo que necesitas saber para crear sitios web impresionantes con facilidad. Elementor es un creador de páginas de WordPress que ha revolucionado la forma en que se construyen los sitios web. Y ahora con su nuevo flujo de trabajo basado en contenedores, crear sitios web de aspecto profesional que se ven geniales en todos los dispositivos nunca ha sido tan fácil. En este curso. Te guiaré a través del proceso paso a paso de construir una página de destino para un sitio web de fitness. El uso de Elementor es las últimas características y técnicas. Y lo haremos desde cero. No necesitas tener ninguna experiencia para empezar. A lo largo del curso, aprenderá a diseñar y personalizar cada aspecto de su página de destino utilizando una interfaz elemental e intuitiva de arrastrar y soltar con un enfoque en la utilización del flujo de trabajo del contenedor. Estaremos viendo los contenedores en detalle y para cuando terminemos la clase, tendrás un conocimiento profundo de cómo trabajar con los contenedores elementales para construir una página de destino completamente funcional. El sitio web de fitness ficticio que acabo de mencionar, desde seleccionar el esquema de color perfecto, hasta personalizar la fuente y crear gráficos llamativos, agregar y cambiar el tamaño de imágenes, hasta crear fondos geniales y efectos de movimiento. Te guiaré a través de todo el proceso para que puedas crear una landing page que no solo se vea bien, sino que también ayude a que tu negocio se destaque en línea. Y como de costumbre, estaremos usando la versión gratuita de Elementor y otras increíbles herramientas gratuitas. Por lo tanto, quieres que gaste dinero en complementos premium para crear estas hermosas landing page. Todo lo que necesito de ti es un profundo deseo de aprender Elementor. Si es la primera vez que me ves, mi nombre es Ken y he estado usando primaria para construir sitios web para mí y los clientes durante los últimos cinco años. También he estado enseñando primaria a miles de estudiantes, como tú aquí mismo o Skillshare en YouTube y otras plataformas en línea durante los últimos dos años y medio. Entonces, si estás listo para llevar tus habilidades de diseño web al siguiente nivel y aprender a construir sitios web hermosos con una nueva función de contenedores elementales. Únete a mí en esta nueva y emocionante clase, y construyamos juntos una página de destino increíble. Entonces comencemos. 2. Resumen del proyecto: Ahora la mejor manera de captar un nuevo concepto o reforzar una habilidad es construir un proyecto. Entonces, a lo largo de esta clase, como he mencionado, trabajaremos en una página de aterrizaje del mundo real que funcione completamente para un sitio web de fitness ficticio. Así que vamos a tener una visión general rápida de la página de destino. Entonces aquí estamos. Esta es la landing page que se construirá con Elementor. Y antes de echarle un vistazo rápido, necesito mencionar que seguí adelante y creé esto como landing page de referencia mientras preparaba la clase. Y lo bueno de tener una landing page de referencia o un sitio web de referencia es que te permite ver lo que estamos creando. Entonces, cuando llegue el momento de crear esta parte, al menos puedo mostrarles que estamos creando algo así. Entonces juntos pasaremos por esta página y la reconstruiremos desde cero. Así que vamos a tener un desplazamiento rápido de arriba a abajo. Como pueden ver, permítanme antes que nada refrescarlo. Entonces déjame recargar esa página. Ahora como puedes ver, tenemos estas animaciones en la sección de héroes. Y las animaciones están en toda la página de destino, no solo de la sección de héroes. Como pueden ver, tenemos este reproductor de video aquí. Y cuando haces clic en eso, puedes tener un video aquí diciéndole al visitante qué se trata esta landing page o de qué se trata tu sitio web. Y cuando hagan clic en reproducir, podrán ver un video. Haga clic afuera. Entonces a medida que nos desplazamos, tenemos diferentes secciones aquí donde puedes enumerar tus servicios y el usuario puede hacer clic en el botón Learn More para ser llevado a la página como obsceno. Tenemos esa animación. Entonces desplazándose hacia abajo. Y esto y este testimonios se supone que deben estar justo aquí en el medio. Debo haber olvidado alinearlo al centro aquí mismo. Pero claro, en la página final que estamos construyendo, estará bien alineada. Bajando al pie de página, Eso es una carpeta. Y si golpeo Control Shift, yo para imitar diferentes dispositivos. Si hago clic en este icono aquí mismo, como pueden ver, la página de destino también se ve increíble en una tableta. Este es el iPad Air. Déjame hacer un iPhone 12s pro. Entonces así será la landing page en un iPhone 12s pro. Y claro, el menú aquí es un menú de hamburguesas. Y cuando estamos en modo tablet, sigue siendo un menú de hamburguesas. Así que vamos a desplazarnos hacia abajo hasta el fondo. Y así se ve en un smartphone. Entonces, básicamente, como puedes ver, la landing page se ve increíble en todos los dispositivos. Es receptivo y veremos cómo hacerlo receptivo también. Entonces, en pocas palabras, creé esto como una landing page de referencia. Lo bueno de crear la landing page de referencia es que cuando llegue el momento de crear esta sección, al menos puedo mostrarte antemano lo que estamos a punto de crear, en lugar de simplemente alearla y decirte que sigas adelante sin que sepas lo que estamos construyendo. Entonces eso es solo una descripción rápida de lo que estaremos trabajando para cuando terminemos, tendrás esta landing page completamente funcionando y lista para ser utilizada en un sitio web. Entonces eso es lo que vamos a estar diseñando. Y para lograr esta landing page, necesitaremos usar varias características elementales y modificar muchos ajustes que te dotarán de las habilidades necesarias para construir con confianza tus propias páginas web con Elementor en el futuro. Y para ayudarte a seguir adelante en esta clase y reproducir la misma landing page. He preparado todas las imágenes para ti y las proporcionaré en una carpeta llamada assets. Simplemente descárgalo desde la pestaña Proyectos justo debajo de este reproductor de video. Ahora que has visto en lo que vamos a estar trabajando, tengo la sensación de que estás súper emocionada por empezar. Entonces, sin más dilación, vamos a verle en clase. 3. Instalar el tema de Astra: Y aquí estamos. Como puedes ver, esta es una instalación completamente nueva de WordPress. Esta es la versión 6.2 de WordPress. Y lo primero que siempre hago cuando estoy trabajando en cualquier proyecto de WordPress es instalar un tema de WordPress. Entonces, sin perder tiempo, vamos a Temas de Apariencia. Ahora, claro, porque estamos en 2023, el tema activo por defecto es 2023. El año pasado era 2022, y el año anterior a ese fue 2021. Pero no vamos a usar estos temas predeterminados de WordPress. Vamos a decir Add New. Y instalaremos uno de los mejores temas mercado con el nombre de Astra. Entonces haré clic en Instalar. Astra es uno de los mejores temas en el mercado de WordPress. Muy bien, entonces seguiré adelante y golpearé Activar. Y ahora Astra es el tema activo. Como puede ver, tenemos estos agradecimientos por instalar la notificación de Astra. Así que déjame cerrar eso. Y así es como instalar un tema de WordPress. En la siguiente lección, Vamos a instalar elementor. Te veré en breve. 4. Instalar Elementor: Estamos de vuelta. Entonces ahora que tenemos nuestro tema instalado, es el momento de instalar Elementor antes de que podamos comenzar a construir nuestra página. Así que vayamos directamente a los plugins. Podemos hacer clic en Agregar nuevo, pero antes que nada, solo quiero hacer clic en plugins para que podamos ir a la lista de plugins de instalación. Y estos son los plugins que vinieron por defecto cuando instalé WordPress. Así que solo quiero deshacerme de todos ellos. Antes de que pueda hacer eso, seleccionaré estos dos y los desactivaré. Seleccione el activar en este menú desplegable. Y luego digamos Aplicar. Es posible que tengas diferentes plugins predeterminados de mi parte. Te sugiero que solo los borres todos. Ahora que todos están desactivados, seguiré adelante y los seleccionaré todos haciendo clic en esta casilla de verificación. Entonces aquí voy a ir a Eliminar, aplicar. ¿Bien? Bien, así que ahora si actualizo la página, no tenemos ningún plug-in instalado. Entonces voy a seguir adelante y decir Add New y seré redirigido al directorio de plugins de WordPress. Entonces seguiré adelante y buscaré Elementor aquí, Elementor. Y sean los primeros resultados en la lista de resultados por elementary.com con 5 millones más de instalaciones activas. Haga clic en Instalar. Ahora bien, así es como instalar cada plugin en WordPress. Bien, así que sigamos adelante y golpeemos Activar. Ahí vamos. Entonces Elementor ahora está activado. Ahora, antes de seguir adelante, a veces si es la primera vez que instala Elementor, posible que te redirijan a un asistente de configuración donde necesites seguir varios pasos para configurar tu sitio web. Porque ya había instalado Elementor en este dominio en particular. No me han redirigido a ese mago. Y por si acaso te han redirigido a ese asistente de configuración, donde tienes que seguir esos pasos. Los próximos minutos serán un proceso paso a paso. Yo había pregrabado para una clase diferente donde te muestro cómo pasar por todos esos pasos. Entonces aquí vamos. Entonces voy a golpear instalado, ¿verdad? Así que cuando haga clic en Activar será redirigido al asistente de configuración de Elementor. Entonces, vamos a darle a Activar. Y este es el mago de aquí mismo. Así que déjame alejarme un poco para que puedas ver todo. Como puedes ver ahora mismo, tenemos unos cinco pasos para configurar todo antes de que podamos empezar a usar Elementor. Y el primer paso aquí es crear una cuenta con elementor.com si quieres disfrutar de estos beneficios, pero no tienes que tener cuentas elementales para usar Elementor. Entonces voy a seguir adelante y saltarme esta parte. Entonces, el segundo paso aquí es decidir si quieres usar el tema hola que es desarrollado y mantenido por el equipo de primaria. Pero también tienes la opción de saltarte este paso si tienes otro equipo que quieras usar, me gusta usar Astra. Astra Theme es uno de los temas más ligeros, rápidos y amigables con SEO en el mercado. Entonces voy a seguir adelante y saltarme esta parte. El tercer paso aquí es darle un nombre a tu sitio web. Y por defecto, el nombre que aparece en este campo es el nombre que le diste a tu sitio web cuando estabas instalando WordPress. Entonces este es el nombre que le di a mi sitio web. No voy a cambiarlo. Así que solo me quedaré, solo golpearé Escape. Entonces si tienes un logo, tienes la oportunidad de subirlo en este momento, pero esto es algo que siempre puedes hacer más tarde mientras construyes tu sitio web para que podamos seguir adelante y saltarte. Y luego finalmente, podemos ir directamente a editar un lienzo en blanco y comenzar a construir una página web desde cero. O podemos navegar entre cientos de plantillas creadas por Elementor que están dentro del espacio de trabajo de Elementor o importar nuestro propio elemento de plantillas que podríamos haber comprado o creado nosotros mismos anteriormente. Yo seguiré adelante y me saltaré eso. Y por defecto, cuando pulsas Skip, te lleva directamente a un lienzo en blanco donde puedes comenzar a construir tu página web. Entonces, para salir de este lugar, haga clic en este menú de hamburguesas y Salga al tablero. Así que nos llevan a la parte posterior del editor para ese lienzo en blanco específico que acabamos de dejar. Pero lo que queremos hacer es hacer clic en esto para que nos lleven el tablero real donde tenemos todos los ajustes de Wordpress. Y ahora si miras en el menú de la izquierda aquí, notarás que tenemos Elementor y plantillas. Ambos aparecen después de instalar Elementor. Y si hacemos clic en Elementor, podemos jugar con todos los ajustes aquí. Pero por lo general no necesitarás hacer ningún cambio en la configuración predeterminada del plugin. Simplemente irás directamente para comenzar a construir tus páginas web. Pero claro, siéntete libre de ver para qué sirven todos estos otros ajustes. Si abres una plantilla aquí, aquí es donde encontrarás una lista de todas las plantillas de primaria que podrías haber subido o creado. Si quieres construir una nueva plantilla que puedas seguir reutilizando en tu proyecto. Se pueden agregar nuevos. Si quieres importar una plantilla que hayas descargado, puedes importarla desde aquí. Muy bien, así que ahora que hemos instalado astro, el tema y Elementor, ya estamos listos para comenzar a construir la landing page. Y empezamos con la sección de héroes. Esa es la parte superior de cualquier página de destino que el cliente ve cuando llega a la página. Entonces, en la siguiente lección, comencemos a construir la sección de héroes. Te veré en breve. 5. Descripción del espacio de trabajo de elementos: Bienvenido de nuevo. Entonces ahora es el momento de construir la sección de héroes. Y para ello, antes que nada echemos un vistazo a lo que es la sección de héroes. Así que saltando a esta landing page de referencia que creé en preparación para esta clase. Esta de aquí es la sección de héroes. Contiene el H1 principal o encabezado de la página de destino, que es una breve descripción de lo que trata la página de destino. Algunos botones de llamada a la acción. Aquí tenemos este botón de Video. Entonces tenemos a esta señora. Este botón de video aquí trae a colación un reproductor de video de YouTube. Puedes mostrar de qué se trata tu sitio web. Y los visitantes pueden jugar y ver qué. Déjame cerrar eso. Entonces veamos cómo crear estos. Así que saltando de nuevo dentro de nuestro tablero, ve directo a las páginas. Y debido a que esta es una instalación completamente nueva de WordPress, tenemos páginas predeterminadas que vienen con cada nueva instalación de WordPress. Entonces seleccionaré ambos marcando esa casilla ahí. Y en este menú desplegable, muévalos a la basura y aplícalos. Entonces ahora no tenemos ninguna página. Diré Agregar Nuevo. Y debido a que esta es nuestra landing page, asumiré que es la página principal. Entonces voy a decir casa, Ese es el nombre de la página. Y ahora aquí arriba tenemos un par de ajustes. Estos son los ajustes de Wordpress, y estos son los ajustes de Astro. Si no has instalado Astra, aquí no vas a tener estos ajustes porque vienen con un tema y los necesitamos. Entonces, antes que nada, sigamos adelante y cambiemos la plantilla aquí a Elementor full width. Así como así, porque queremos que corra de izquierda a derecha o de derecha a izquierda. Así Elementor ancho completo. Y eso es todo lo que necesitamos de la configuración de WordPress. Ahora cambiemos la configuración de Astro. Y aquí tenemos varios menús desplegables aquí que necesitamos abrir. En primer lugar, queremos decir ancho completo estirado. Así debería ser el diseño del contenido. Por supuesto, estas son las opciones también son utilizables, pero me gusta usar ancho completo estirado. Vamos a la barra lateral. No queremos que un sitio web o página de destino tengan una barra lateral. Entonces iré sin barra lateral. Siempre podemos cambiar estos ajustes en la propia página mientras la construimos usando Elementor. Y te voy a mostrar donde podemos cambiar eso. Y luego finalmente, vayamos a deshabilitar elementos. No queremos el encabezado o pie de página predeterminado de Astra porque vamos a construir nuestro propio con Elementor. Entonces con esos ajustes establecidos, diré Publicar, haz clic en Publicar una vez más. Y ahora se publica nuestra página. Ahora hagamos clic en editar con Elementor y seremos redirigidos al constructor front-end donde podremos comenzar a construir nuestra página. Ahora bien, si esta es la primera vez que usas Elementor, la última versión de Elementor introduce lo que llamamos contenedores. Antes de la introducción de los contenedores, estábamos usando secciones y columnas. Y ese es el flujo de trabajo que encontrarás en todas mis clases elementales anteriores. Y ese flujo de trabajo sigue siendo muy relevante. Puedes elegir trabajar con secciones y columnas si eso es con lo que te sientes cómodo. Pero ahora elementor nos da la opción de usar contenedores, y esto es lo que vamos a aprender hoy. Entonces quiero activar la funcionalidad del contenedor. Entonces voy a hacer clic en eso. Se abrirá una nueva pestaña que nos llevará a la configuración donde podremos activar el contenedor Flexbox. Así que solo tienes que ir al contenedor Flexbox. Esto es dentro de las características y la configuración de Elementor. Menú desplegable activar. Y luego vamos a desplazarnos hacia abajo y guardar los cambios. Muy bien, entonces con esos cambios, volvamos a la página. Aquí estamos. Y claro, antes de refrescar la página, la interfaz de usuario del editor aquí se parece la antigua UI que tenía las secciones y el flujo de trabajo de columna. Pero ahora cuando actualicemos esta página para reflejar la activación del contenedor flexbox ahora esto cambiará ligeramente. Observe ahora que tenemos contenedor y las columnas se han ido. Entonces ahora lo primero que tenemos que hacer es tener una visión general rápida de cómo funcionan los contenedores. Así que sólo voy a arrastrar un contenedor aquí. Y ahora tenemos este contenedor aquí corre de izquierda a derecha. Y esto es lo que vamos a sostener nuestra sección de héroes. Y dentro de este contenedor podemos dejar caer más contenedores que tenemos diferentes tipos de contenido. Entonces, para revelar los elementos arrastrables, una vez más, podemos hacer clic en este icono aquí arriba. Y eso revelará los elementos. Una vez más, si puedo colapsar todos estos paneles aquí mismo. Estos son diferentes elementos que podemos arrastrar a nuestra página para crear contenido. Entonces por ejemplo tenemos el área pro. Estos son los elementos que solo están disponibles con Elementor Pro. Tienes que pagar para usar Elementor Pro. Pero ahora tenemos los elementos básicos como el encabezado, editor de texto de imagen y todo eso. Entonces también tenemos elementos generales. Estos siguen siendo gratuitos. Los elementos Pro tienen un pequeño icono de candado en la parte superior derecha. Como aquí dentro. Podemos arrastrar esto y ponerlo ahí arriba. Podemos arrastrar esto y soltarlo ahí. Déjame deshacer ese control Z. Entonces básicamente aquí es donde vamos a estar obteniendo nuestros elementos y dejándolos caer aquí y luego haciendo cambios en ellos. Así que volviendo a nuestro panel básico y expandiendo el diseño, el panel de diseño contiene el elemento contenedor. Y a medida que empezamos, hay una configuración muy importante que necesitamos cambiar. Y te voy a mostrar lo que es eso. Siempre que coloques el cursor sobre cualquier contenedor, puedes seleccionarlo yendo a una de estas esquinas. Entonces si por ejemplo I. Entra aquí y arrastra un encabezado ahí, puedo seleccionarlo yendo a esta esquina aquí mismo. Y ahora estos cambios de rumbo. Si quiero seleccionar el propio contenedor que contiene estos contenidos, puedo seleccionarlo haciendo clic en este. Y ahora se elige estos contenedores. Y si quería seleccionar este contenedor exterior, puedo hacer clic en este. Y estos cambios para contener un acero. Así que ahora cuando pasamos el cursor sobre estos selectores de aquí mismo, podemos revelar algunos atajos rápidos que nos ahorrarán algunos pasos en nuestro flujo de trabajo. Entonces, si voy dentro de este menú de hamburguesas, las preferencias del usuario y cambio esto y enciendo las manijas de edición. Ahora bien, si pongo el cursor sobre cualquiera de estas esquinas, tenemos este atajo duplicado y eliminar atajo. En lugar de ir a esto. Si apago esto, en lugar de ir aquí, haciendo clic con el botón derecho y luego duplicando. Cuando esto está encendido. Todo lo que necesito hacer es pasar el cursor sobre estos y luego duplicar sobre el Eliminar. Ahora, volviendo al interior de este menú de hamburguesas, también tenemos más ajustes. Entonces, si hago clic en esta configuración del sitio, tenemos colores globales y veremos cómo trabajar con colores globales, fuentes globales. Podemos cambiar el comportamiento de todos los teléfonos del sitio web aquí mismo, y todas estas otras configuraciones. Pero no necesitaremos tocarlas por ahora. Por lo general, necesitas tocarlos cuando estás trabajando en todo el sitio web. Pero ahora mismo nos estamos enfocando en la landing page. Así que permítanme cerrar estos ajustes. Y ahora eso es una rápida visión general del espacio de trabajo elemental. En la siguiente lección, ahora comenzaremos a trabajar realmente con contenedores para construir la sección de héroes. Entonces te veré en breve. 6. Cómo entender los contenedores: Hola, bienvenido de nuevo. Entonces, ahora que hemos tenido una visión general rápida del espacio de trabajo elemental, es hora de comenzar a entender cómo funcionan los contenedores. Entonces, permítanme seguir adelante y eliminar eso. Y luego en lugar de arrastrar este contenedor aquí, déjame hacer clic en este ícono más aquí. Ahora bien, aquí están bonitas estructuras de construcción de un contenedor. Arrastrarlo y soltarlo aquí es lo mismo que agregar cualquiera de estos contenedores. Pero ahora estos contenedores que tienen divisiones dentro de ellos son contenedores que tienen otros contenedores en ellos como plantillas. Estos dos no tienen ningún contenedor en ellos. Y son lo mismo que arrastrarlo y soltarlo ahí porque no tiene ningún contenedor. Si agregamos esto aquí, como pueden ver, es un contenedor. Se puede ver por la frontera. Y tiene este contenedor. Y este contenedor. Si agregamos tal vez este de aquí. Como puede ver, es el contenedor, y luego tiene otros seis contenedores en su interior. Y ahora, si borro esto, echemos un vistazo rápido a esto. Ahora porque este contenedor exterior contiene dos contenedores en su interior. Si lo seleccionamos y le mostramos los ajustes, notará que tenemos la sección de estos artículos aquí abajo debajo de los elementos de diseño, y tenemos la configuración de dirección. Y lo que significa el ajuste de estas direcciones es simplemente cómo disponen los contenedores dentro de otro contenedor. Entonces fila, horizontal significa que están dispuestos de izquierda a derecha. Porque ahora actualmente eso es lo que tenemos de izquierda a derecha. Si queremos que estos contenedores se apilen uno encima del otro, es decir de arriba a abajo. Podemos elegir esta configuración vertical así. Y ahora esto está encima de la base. Sólo para ayudarnos a entender visualmente lo que estamos haciendo. Déjame dejar caer un rumbo ahí y volver aquí y tal vez soltar un botón ahí dentro. Entonces ahora recuerda que estos siguen siendo contenedores. Y cada contenedor contiene ahora un elemento. Entonces esto contiene un elemento button y éste contiene un elemento text. Así que ahora volviendo y seleccionando este contenedor exterior aquí, ahora estamos de vuelta a comer ajustes. Recuerden, fuimos de izquierda a derecha. Déjame seleccionar de izquierda a derecha, izquierda a derecha, luego de arriba a abajo. Pero antes de hacer clic en esto de arriba a abajo, podemos revertirlo. Y eso significa que el contenedor de la izquierda ahora se pondrá a la derecha y el de la derecha se pondrá a la izquierda. Entonces veamos ese revés y ahora están invertidos. Y ahora vamos a apilar de arriba a abajo. Eso significa que el primer contenedor ahora estará en la parte superior y el segundo estará en la parte inferior. Y lo contrario es de abajo hacia arriba. Y ahora habrá revertido. Entonces así es como funciona un contenedor. Y claro, no importa cuántos contenedores tengamos. Lo que realmente importa es qué dirección has seleccionado para ese contenedor exterior que sostiene los otros contenedores dentro de él. Entonces si volvemos a entrar aquí y agregamos un contenedor aquí, dejémoslo ahí dentro. Y ahora tenemos tres contenedores. Y si los organizamos de izquierda a derecha, seleccione esto. Si los arreglamos de izquierda a derecha. Ahora tenemos tres contenedores. Y si agregamos algunos, tal vez agreguemos un, agreguemos un ícono ahí. Entonces ahora seleccionando el contenedor exterior, podemos revertirlos. Y el del medio no cambia porque cuando los invertimos , seguirá quedando en el medio. Entonces ahora, a medida que construimos las diferentes partes de la landing page, podrás ver estos contenedores en acción. Y nos permiten mucha flexibilidad en cómo fluyen diferentes elementos en nuestra página web. Y eso es solo una visión general rápida de los contenedores. En la siguiente lección, pongámonos más prácticos y veamos cómo ponerlos a trabajar para producir una hermosa sección de héroes. Esa es la única forma en que podrás entender cómo usarlos realmente. Entonces te veré en breve. Pieza. 7. La sección de héroes - Cómo agregar los elementos de héroes: Bienvenido de nuevo. Entonces ahora pongamos a los conocimientos teóricos que hemos aprendido trabajar los conocimientos teóricos que hemos aprendido sobre los contenedores. Así que sigamos adelante y eliminemos todo de aquí. Y ahora vamos a observar estos apartados por un segundo. Tenemos aquí este contenedor que sostiene el texto y los botones. Y tenemos otro contenedor que sostiene la imagen del héroe. Entonces agreguemos un contenedor doble. Contenedor. Es decir, un contenedor que ya tiene dos contenedores. Ahí vamos. Entonces ahora en este contenedor, sigamos adelante y agreguemos un elemento de imagen. En este contenedor. Agreguemos un encabezado. Volvamos aquí. Editor de texto, es decir, un párrafo. Déjalo caer tan pronto como aparezca ese indicador. Y luego dejemos caer un elemento de botón. Bien, así que permítanme primero que nada golpear Actualizar. Y vamos a previsualizar los cambios. Entonces eso es lo que tenemos. Muy básico. Entonces ahora, primero que nada, agreguemos una imagen aquí mismo, una imagen real de esta señora. Recuerda que mencioné, se proporcionan todas estas imágenes en una carpeta llamada assets. Justo debajo de esta imagen, solo mira la pestaña de proyectos debajo de esta imagen. Así que volviendo aquí, seleccionaré el elemento image y esto cambiará para editar imagen. Entonces estos son ajustes de este elemento. Voy a seleccionar esa casilla ahí dentro. Por ahora. Aún no tengo ninguna imagen en la mediateca, así que iré a subir archivos, seleccionar. Y ahora esta carpeta está en mi escritorio. Simplemente voy a hacer clic en eso. Se llama activos. Puedes descargarla en la pestaña de proyectos. Entonces déjame abrirla. Esta es la señora abierta. Y ahora está subido. Entonces déjenme decir seleccionar. Ahí vamos. Entonces ahí está la señora. Lo segundo que tenemos que hacer es cambiar la fuente y el color de la fuente. Entonces volviendo aquí, si cambiamos la fuente a blanca, no serás visible. Lo que nos lleva al siguiente paso, que está cambiando el trasfondo de nuestro sitio web. Así que entrando dentro de este menú de hamburguesas, vamos a Configuración del sitio. Eso revelará todos estos ajustes aquí mismo. Y queremos ir a Antecedentes, tipo de fondo. Y vamos a seleccionar este color y convertirlo en negro. Lo actualizo de nuevo a editor. Ahora podemos cambiar esta fuente aquí mismo. Queremos utilizar una fuente llamada Montserrat. Entonces, para cambiar estos textos, seleccionamos el elemento heading, y esto cambiará para editar encabezado. Y podemos ir dentro de estilo. Cambia esto a blanco. En primer lugar, haz clic en cualquier parte aquí en el editor para deshacerte de esa caja. Y luego vamos al interior de la topografía. Y en este menú desplegable, escriba, Montserrat, seleccione meses, Irak, y como puede ver, se cambia a rack de monitor. Lo siguiente que queremos hacer es cambiar el peso de la fuente. Me gusta usar el negro. Eso significa un texto muy audaz porque este es nuestro encabezado principal en esa landing page. Yo sólo voy a seguir adelante y copiar esto. Tendrás que teclearlo. Adelante y copia eso. Y mientras esto todavía está seleccionado, entra dentro del contenido, dentro del título, pegarlo ahí dentro. Cuerpo, mente y alma fuertes. Seleccionaré estos textos. Ir insights, texto de mosaico, color, cambiar eso a blanco. Da clic en cualquier parte de aquí para deshacerte de eso. Y entonces claro, notarás que se trata de Roboto. Elemental viene con fuentes predeterminadas, y principalmente para los párrafos, es Roboto. Y eso significa que cada vez que agreguemos un nuevo elemento editor de texto, siempre será Roboto a menos que lo cambiemos manualmente. Ahora, para evitar tener que cambiarlo manualmente cada vez, podemos entrar en el menú de hamburguesas, una vez más, la configuración del sitio. Y aquí es donde ahora cambiamos las fuentes globales. Primaria, eso significa los encabezamientos. Ya cambiamos estos específicos a Montserrat. Pero fíjate que es Roboto. Eso significa que cada vez que agreguemos un encabezado, siempre serán robots. Entonces, a menos que digamos específicamente queremos que sea Montserrat y queremos que sea negra. Pasemos a secundaria. Cambiemos eso a Montserrat. Vamos a los textos. Ahora. Esos son los textos de los párrafos. Cambia eso a Montserrat. Vamos al acento. Cambia eso a Montero. Actualiza eso de nuevo al editor. Ahora bien, por alguna razón esto no ha cambiado, pero siempre podemos cambiarlo manualmente. Voy a averiguar por qué. Así que entremos aquí. En el interior, mientras se selecciona esta, editor de texto topografía, Montserrat. Actualiza eso. Revisemos los cambios. Ahí vamos. 8. La sección de héroes - cómo diseñar los elementos de héroes: Entonces ahora queremos cambiar el botón para tener estas esquinas redondeadas. Y al mismo tiempo, tenemos que darle este verde. Y tengo ese código de color verde justo aquí. Déjame elegirlo de mi otra pantalla. Al entrar aquí. Seleccione eso. También te proporcionaré estos códigos de color verde específicos por si acaso quieres ir con eso con el código de color verde seleccionado, seleccionaré este botón, coincidiendo estilo. El botón. Tenemos topografía. Ya cambiamos a Montserrat, pero también tenemos color. Selecciona eso, pega eso ahí dentro. Y notarás que el color del botón ha cambiado. Ahora para el color del texto, cambiemos eso a negro, y ahora es negro. Al pasar el cursor. Queremos que sea de color blanco. Ahora cuando volamos el cursor, es de color blanco. Queremos que el texto siga siendo negro. Vayamos también ahora al relleno. Queremos agregar el espaciado entre el borde del botón y el contenido, el texto. El espaciado aquí mismo. Como puedes ver, aquí es un poco más grande. Así que ve al relleno, rompe ese enlace. Para editar los lados individuales. Sin romper el eslabón. Significa que cada vez que haces un cambio a una de las celdas de aquí, afecta a todos los lados. Quiere editar lados individuales. Así que desmarca eso. Selecciona la izquierda, dale 50 ahí, ¿verdad? 50. La parte superior e inferior pueden ser 20. Y ahora para el radio fronterizo, vamos a darle 50. Para darle esa esquina redondeada menor que el número aquí, menos redondeada es. Entonces si le damos tal vez 20, ves que cambia a menos redondeado. Si le damos diez, es mucho menos redondeado. Si le damos cero, no es redondeado. Entonces vamos a darle 15. Si rompes así este enlace, puedes tener un lado sin la esquina redondeada. Actualiza eso. Vamos a previsualizar los cambios así. Hecho lo voy a dejar así. Ahora, una cosa que notarás es que tenemos dos botones. Entonces, ¿cómo agregamos el segundo botón aquí? Si arrastramos un nuevo botón aquí, vendrá por debajo de este botón aquí mismo. Y eso es porque los botones, el editor de texto y el encabezado están todos dentro de un contenedor. Entonces si selecciono el contenedor, si miramos la dirección, todos están dispuestos de arriba a abajo. Entonces todos los elementos van de arriba a abajo. Si quieres que vayan de izquierda a derecha y seleccionen fila horizontal. Todo incluido el impuesto se reorganizará de izquierda a derecha. Pero eso no queremos. Solo queremos que los botones estén dispuestos de izquierda a derecha, no el texto. Entonces volviendo a este escenario aquí, arriba a abajo, ¿qué hacemos? Podemos usar un contenedor aquí, arrastrar un contenedor y soltarlo ahí. Entonces vamos a arrastrar este botón ahí dentro. Y también arrastremos estos otros botones dentro de ese contenedor cuando aparezca ese indicador. Y ahora ambos están dentro del contenedor. Y ahora cuando seleccionamos aquí este contenedor específico, podemos cambiar la dirección para que sea de izquierda a derecha. Ese es el poder de los contenedores. Entonces ahora selecciona este botón, haz clic derecho, Copiar. Seleccione este botón, pegue estilo. Y ahora es heredado todos los estilos de estos otros botones. Pero ahora queremos que sea de color blanco. Entonces, mientras aún esté seleccionado, voy a entrar en estilo. Color. Cambia eso a blanco. Y en hover. el cursor, ¿o cambia a cambios a algún gris claro? En Hobo, también lo queremos a Bob. Entonces mientras todavía se selecciona en hover, queriendo ser así de verde claro así. Y mientras se selecciona hover, verás animación hover. En este menú desplegable. Puedes seleccionar cualquier animación que quieras. A mí me gustan Bob y Bob, así como así. Seleccionemos esto. Bajo hover, hover animación. Bob. Bien, así que sigamos adelante y actualicemos eso y previsualicemos los cambios. Muy bien, ahora volviendo aquí, permítanme seleccionar este rubro. Ir a tipografía de estilo. Y cambiemos el tamaño a tal vez en algún lugar ahí. Actualiza eso. Y vamos a previsualizar los cambios. Bien, entonces ahora notarás que no están bien alineados verticalmente. El texto y el botón parecen estar un poco más elevados que la chica. Porque si trazamos aquí una línea imaginaria, éstas deberían ser ligeramente inferiores. Entonces ahora la mejor manera de hacerlo es usar la justificación. Entonces, si seleccionamos este contenedor principal y vamos a alinear elementos, aquí es donde entran estos ajustes. Si decimos centro. Ahora, todo en referencia al contenedor exterior estará verticalmente en el centro. Ese es el espaciado desde aquí. Y el espaciamiento aquí será igual. Así como así. Actualiza eso. Y vamos a previsualizar los cambios. Ahí vamos. Pero ahora noten que este contenido es empujado hasta el final, casi al borde y el nuestro es empujado hacia adentro. Entonces volviendo aquí, selecciona el contenedor principal y el ancho del contenido en este menú desplegable, selecciona semana completa. Y ahora tenemos una actualización de contenedor de ancho completo que. Revisemos los cambios. Ahí vamos. Pero ahora no queremos que toque completamente los bordes. Entonces volviendo aquí, mientras esto todavía está seleccionado, podemos decir que tal vez el 80%. Entonces 80%. Y ahora está ocupando el 80 por ciento de las pantallas. Llorar. Actualicemos eso y previsualicemos los cambios. Ahí vamos. Ahora bien, lo siguiente que queremos hacer es sumar este fondo, estas ondas que les agregan cierto valor estético. Landing page. Entonces volviendo aquí, mientras esto todavía está seleccionado, quiero ir dentro de estilo, fondo, tipo de fondo. Seleccionaré Clásico. Y ahora tenemos aquí este espacio de imagen. Haga clic en esa imagen porque queremos agregar esas ondas como fondo de imagen. Entonces iré a subir y todavía encontrarás esa ola aquí dentro. Esta es la sección de héroe de fondo neón. Ya lo creé en Adobe Illustrator para ti. Y ahora lo hemos subido. Así que selecciona. Y ahí lo tenemos. Pero ahora te darás cuenta de que está cortada aquí mismo. Entonces, una cosa que queremos hacer es entrar en posición y decir al centro, ¿verdad? Así. Y también queremos decir no repetir, no repetir. Actualiza eso. Y vamos a previsualizar los cambios. Ahí vamos. Entonces ahora esto trae aquí un pequeño reto. Como puedes ver, está cortada porque el borde de esta sección sube hasta 80 por ciento del ancho de la página. Y lo que queremos es que llegue hasta el final así. Así que tenemos que ser creativos aquí. Recuerda esto, este contenedor contiene dos contenedores principales. Sostiene el contenedor textblock y el contenedor de la sección hero. Y los ajustes van de izquierda a derecha. Y así si queremos agregar un contenedor aquí, necesitamos agregarlo ahí mismo. Entonces ahora tenemos tres contenedores, pero queremos poner este contenedor, estos dos contenedores dentro del nuevo contenedor. Entonces voy a arrastrar eso ahí dentro. Y luego eso ahí dentro. Y ahora tenemos este contenedor que contiene esos dos contenedores. Pero por defecto, todo va de arriba a abajo. Entonces tenemos que decirle que corra de izquierda a derecha. Y ahora estos dos contenedores están dentro de este contenedor, es decir dentro de este contenedor exterior. Y si hacemos este contenedor exterior de ancho completo, ahora el fondo corre de izquierda a derecha, de borde a borde. Déjame actualizar eso. Y vamos a previsualizar los cambios. Bien, entonces ahora el contenedor interior que sostiene estos dos contenedores sigue en caja. Queremos que sea de ancho completo, pero ahora queremos que sea del 80 por ciento. Y queremos seleccionar el contenedor exterior para empujar este contenedor interior hacia el centro. Entonces queremos que sea centro. Actualiza eso. Y vamos a previsualizar los cambios. Ahí vamos. Y así ahora por lo menos estamos empezando a llegar a alguna parte. Este texto es un poco más grande, así que seleccionemos el encabezado, yendo a la topografía del sitio, hazlo más grande así. Actualizar, previsualizar cambios así. Y ahora vamos a alinear todo al centro verticalmente. Dentro de este contenedor. Así como así, actualización. Vista previa de los cambios. Ahora todo está alineado correctamente. Entonces así es como construir la sección de héroes. Pero ahora tal vez te estés preguntando, esa es una hermosa sección de Heber, pero no tenemos una barra de navegación. ¿Dónde está la barra de menú? ¿Dónde está el logo? No te preocupes, eso es lo que vamos a hacer. En la siguiente lección. Veamos cómo agregar la barra de navegación, que contiene el menú y el logotipo. Así como esto. El logo y los muchos. Entonces te veré en breve. 9. La barra de nav - Instalar ElementsKit: Bienvenida de nuevo. Entonces ahora ya hemos trabajado en la sección de héroes. Por supuesto, sé que no hemos agregado este botón de video aquí mismo, pero vamos a hacer eso, no te preocupes. Pero lo que queremos hacer es crear la napa. Entonces volviendo al interior de nuestro editor, esta es la landing page, pero aquí no es donde crearemos la napa. Entonces solo quiero salir de aquí. Volveremos aquí para construir el resto de la página, todas estas otras partes. Pero por ahora, dejemos esta página. Entonces voy a hacer clic en este menú de hamburguesas. Y en la parte inferior aquí, hay salida. Cuando lo patees por primera vez, te dará un menú desplegable para seleccionar dónde quieres que siempre te redirija cada vez que hagas clic en Salir. Entonces elegiré el tablero de WP. Eso significa que cada vez que hagas clic en salir aquí mismo, siempre serás redirigido al tablero. Esto solo ocurre una vez, así que seleccionaré el panel de WP, luego aplicarlo. En primer lugar, permítanme cancelar y actualizar los cambios son correctos. Como ya he seleccionado donde quiero ser redirigido, si hago clic en Salir, no sacarás ese pop up. Sólo me llevará al tablero. Entonces ahora que ya sabemos que esta es la versión 6.2, déjame descartarla. Y ahora para crear estos navbar, necesitaremos instalar otro plugin, que es una extensión de Elementor por el nombre elements keep light plugin. Así que volvamos al interior de nuestro tablero. Plugins, añadir nuevos. Y aquí quiero buscar a Elementor. Elementor. Y ahora notarás, por supuesto, además de Elementor, hay muchos otros plug-ins basados en Elementor. Estos son complementos creados por desarrolladores de terceros para extender el poder y las características de Elementor. Elementor es desarrollado por resultado elemental, pero complementos esenciales para Elementor es desarrollado por desarrollador WP, complementos premium por salto 13. Y lo que necesitamos es que los elementos mantengan los complementos elementales por WP cumplidos. Así que voy a hacer clic en Instalar ahora. También necesitaremos los efectos de encabezado pegajoso para Elementor, y te mostraré dónde se usará. Para. Ahora, notemos instálelo. Lo instalaremos cuando lo necesitemos. Entonces ahora que el kit de elementos está instalado, hagamos clic en Activar. Ahí vamos. Ahora tenemos elementos key light instalados, y aquí está en nuestra barra lateral. Así que select elements kit será redirigido al asistente paso a paso donde podremos configurar el plugin o add-on. El primer paso aquí es seleccionar cualquiera de estas tres opciones aquí. Básicamente lo que significan estas opciones es, dependiendo de la opción que seleccione aquí. Algunos de los widgets y funciones aquí no estarán activos y disponibles para usted en el front-end mientras esté usando Elementor. Entonces, por ejemplo, si selecciono Avanzado aquí, mira lo que sucede con algunos de estos widgets. ejemplo, el constructor de widgets ahora se ha activado por defecto. Eso significa que cuando estoy usando Elementor en el front-end para construir y construir una página que construimos , estará disponible para mí en el front-end. Y también lo harán otras varias características aquí abajo. Entonces me gusta usar avanzado. Entonces, hagamos clic en el siguiente paso. Siguiente paso. Siguiente paso, compartir algunos datos de diagnóstico no sensibles. Siguiente, max, guardar cambios. Ahora el kit de elementos ya está listo para que lo usemos. Déjame deshacerme de eso. 10. La barra de naves - Añade los elementos de navar: Y ahora te darás cuenta bajo kit Elements, tenemos lo que llamamos encabezado y pie de página. Aquí es donde queremos ir, haga clic en Encabezado y Pie de página. Y aquí es donde podemos crear diferentes encabezados y pies de página que se mostrarán en diferentes páginas dependiendo de nuestra configuración. Entonces voy a seguir adelante y agregar nuevos. Vamos a llamarlo encabezado. El tipo es header. Sólo podemos tener un encabezado o pie de página. Condiciones es que quiero que sea visible en todo el sitio web. Ahora, si compras la versión Pro de este plugin, puedes decidir que quieres que este encabezado en particular esté disponible o visible solo en páginas específicas. Entonces quiero que sea visible en el lado anterior y quiero que se active cuando estés haciendo algo de mantenimiento y no quieres que esta barra de navegación sea visible mientras estás haciendo ese mantenimiento. Se puede desactivar. Así que guarda los cambios porque quiero que sea visible. Lo dejaré como activado y guardaré los cambios. Y ahí vamos. Entonces ahora está activo. Digamos editar. El contenido de edición será redirigido al front-end donde ahora podemos construirlo visualmente. Aquí estamos. Ahora notarás que no tenemos la sección de héroes que ya creamos. Y eso es porque dejamos esa parte donde estábamos editando la sección de héroes. Ahora bien, esta es la parte donde estamos editando la barra de navegación. Así que sigamos adelante y agreguemos un contenedor doble, contenedor. La estructura, ésta sostendrá el logotipo. Así que haz clic en este Plus en imagen porque nuestro logo es esencialmente una imagen. Y mientras eso está seleccionado, esto cambiará para editar imagen. Ir aquí, subir archivos, seleccionar archivos. Aptitud. Ese es el logo que creé para este proyecto. Ahí vamos. Seleccione eso. Lo siguiente que queremos hacer es agregar nuestro menú. Así que entremos aquí y digamos más. Y aquí dentro, vamos a teclear nav. Ahora, se dará cuenta de que tenemos que elementos de navegación. Tenemos el nav por elementos kid, y luego ahora por Elementor Pro. Y no podemos usar estos elementos de navegación Elementor Pro porque aquí tiene este icono de candado. Es un elemento pro. Así que déjame arrastrar y soltar esto aquí. Y ahora cuando lo sueltas ahí, mientras aún está activo, es por supuesto, los elementos de edición obtienen Nav Menu. Estos son sus escenarios. Y notarás lo primero aquí es seleccionar menú, un menú como este. Y este menú está conformado por elementos del menú. Y estos elementos del menú son en realidad páginas, páginas web, la página acerca de, página de videos, la página nítida y la página de contacto. Eso significa que necesitamos tener un montón de páginas web creadas para ser nuestros elementos de menú. Así que volviendo aquí, solo voy a presionar Actualizar. Y luego vamos a previsualizar los cambios. Y claro que aquí no tenemos menú. Así que volviendo aquí, quiero volver al tablero, así saldré. Y vamos al interior de las páginas para crear algunas páginas. Ya tenemos la página principal. Entonces voy a hacer clic con el botón derecho en este y abrir enlace en nueva pestaña. Voy a hacer eso una y otra vez. Entonces ahora vamos a esas pestañas, cambiemos esto. Llamemos a eso. No estamos realmente preocupados por estos cambios por ahora publicados. Solo queremos tener algunos elementos del menú que se publiquen. Pasemos a los siguientes videos publicados. Pasemos a la tienda. Publicar. Los lotes también tienen el contacto publicado. Entonces ahora volviendo aquí, si actualizo el tablero, ahora tenemos todas estas páginas. Ahora lo siguiente que tenemos que hacer es entrar dentro de los menús de apariencia. Y aquí es donde creamos el menú que tiene todas esas páginas como elementos del menú. Y te darás cuenta aquí mismo a la izquierda que esta parte se desvanece porque aún no hemos creado un menú. Crea tu primer menú a continuación. Entonces lo llamaré menú fitness. Y lo haré el menú primario. Después Crear menú. Ahora que se ha creado, podemos agregar elementos de menú desde la columna izquierda, aquí mismo. Y si colapso esto, los elementos del menú pueden ser páginas, que es lo que vamos a usar. Pero también pueden ser publicaciones como publicaciones de blog. Pueden ser enlaces personalizados. Podemos ampliar esto y tener un enlace específico aquí mismo. Y luego los textos de enlace tal vez aprendan más. Y podemos decir Agregar menú, o necesitamos proporcionar un enlace, solo voy a poner un hash. Entonces ahora lo hemos agregado ahí. O también pueden ser categorías. Pero ahora mismo queremos que los elementos del menú sean páginas. Y si ampliamos eso, aquí están todas nuestras páginas. Así que déjame seleccionar todo y agregar al menú. Eliminemos estos. Conoce más enlace personalizado porque no lo necesitamos. Y vamos a arrastrar, reorganizar estos elementos del menú. Inicio. Contacto porque está en el lado derecho más alejado. Inicio sobre videos agudos. Inicio sobre videos agudos. Y ahora estamos en eso está hecho. Guardar Menú. Por lo que nuestro menú de fitness se guarda. Se ha actualizado con estos elementos del menú. Así que ahora volviendo al interior de elements kit header folder, header, edit with Elementor porque ya empezamos a trabajar en ello. Si seleccionamos el elemento de navegación que agregamos a esta mitad y nos dirigimos al menú Seleccionar. Ahora tenemos el menú de fitness disponible para nosotros. Si seleccionamos eso. Nuestro menú ha sido agregado. 11. La barra de naves - Cómo diseñar los elementos: Pero por defecto todo es negro, así que necesitamos, mientras aún esté seleccionado, ir al estilo. Permítanme primero colapsar el panel de envoltura de menú. Entra. Menú, estilo de elemento, artículo, color de texto. Hagámoslo blanco. Ahí vamos. Volvamos al interior del contenido y digamos la posición horizontal del menú, ¿verdad? Eso lo empujará hacia el lado derecho. Volvamos al interior del estilo. En sin embargo queremos que sea este verde. Así que déjame sacar ese color verde. Copia eso. Si bien esto todavía está seleccionado, quiero contraer el envoltorio de menú, estilo del elemento del menú, el color de los conjuntos de elementos, sin embargo, queremos que sea ese verde. Y cuando está activo, todavía queremos que sea así de verde. Diré Actualización. Y vamos a previsualizar los cambios. Ahí vamos. Pero ahora por supuesto este logo es demasiado grande. Déjame cerrar estas pestañas. Así que volviendo aquí, selecciona el contenedor exterior y vamos a hacerlo de ancho completo. Actualiza eso. Vamos a previsualizar los cambios. Y ahora parece estar apagada. Entonces, ¿cuál es la solución aquí? La misma solución que usamos para la sección hero cuando colocamos estos dos contenedores dentro un contenedor que estaba dentro del contenedor exterior. Veamos cómo hacer eso. Entonces entrando aquí, vamos a arrastrar un contenedor aquí mismo. Porque recuerda que el contenedor exterior tiene todo apilado de izquierda a derecha. Y ahora vamos a arrastrar el logo dentro de aquí al lado de estos nuevos contenedores. Y también vamos a arrastrar estos contenedores dentro de estos otros contenedores. Eso significa que debe estar por debajo del logo. Así como así. Muy bien, así que ahora vamos a seleccionarlo. Si bien todavía está seleccionado. Seleccionemos arreglos de izquierda a derecha así. Si bien todavía está seleccionado, hagámoslo de ancho completo. Y vamos a seleccionar el contenedor de logo y hacerlo 20 por ciento de ancho. Así. De hecho, hagamos que sea 1010 por ciento de ancho. Y ahora te darás cuenta que tenemos este espacio aquí porque no le hemos dado un porcentaje específico a esto. Y debería ser el 90 porque esto es el diez por ciento. El contenedor logo es del diez por ciento, lo que deberían ocupar el 90% restante, 90% así. Actualización. Y vamos a previsualizar los cambios. Entonces ahí vamos. Pero ahora en nuestro sitio web de referencia aquí, no estaban muy cerca de los bordes. Entonces volviendo aquí, podemos hacer este contenedor interior que está conteniendo estos dos contenedores. Ancho completo, pero 90%. Ahora claro, empieza de izquierda a derecha. Entonces seleccionando el contenedor exterior, podemos poner todo en él en el centro. Así como así. Ahora está justo en el medio. Actualización. Y vamos a previsualizar los cambios. Así como así. Entonces ahora así es como crear el menú de nav. Volviendo aquí, porque hemos terminado con el Navbar. Salgamos al tablero. Ir dentro de las páginas. Homepage porque habíamos empezado a editarlo con Elementor. Tiene esta opción. Si no has editado una página con Elementor antes, no tendrás esa opción. Así que edita con Elementor. Y ahí vamos. Entonces ahora fíjate que esta parte es editable, la sección de héroes. Y el Napa es visible en nuestra sección de héroes o en nuestra página de destino en toda la página. Pero no es editable. Y eso es porque aquí no es donde estábamos editando o aquí no es donde creamos el menú de navegación. Así que permítanme solo previsualizar los cambios. Ahí vamos. Por supuesto que podemos empujarlos hacia afuera. Entonces déjame primero cerrar esto. Mientras estamos aquí, podemos simplemente, podemos seleccionar este contenedor interior y hacerlo 90%. Al igual que la barra de navbar. Actualiza eso. Y vamos a previsualizar los cambios. Y ahí vamos. Entonces ahora mirando estos y comparándolos con nuestra landing page de referencia, casi se ve. Idéntico. Entonces ahora agreguemos este reproductor de video antes de que lo llamemos wrap. Entonces volviendo aquí, abriré los elementos y luego buscaré video. Video. Y el que queremos es este por kit de elementos. Así que arrástralo y suéltelo ahí. Queremos dejarlo ahí mismo. Y luego arrástralo todo el camino a n. Actualiza eso. Vista previa de los cambios. Y ahí vamos. Entonces, sin embargo, éste se vuelve verde. Pero por defecto en sin embargo, el que hemos agregado ni siquiera cambiará de color. Así que vamos a resolverlo mientras se selecciona esto. Vamos al estilo. ¿Dónde está? Estilo de botón, color resplandor. Primero que nada le demos ese color verde. Tipo de fondo. Al pasar el cursor. Hagámoslo verde. Así como así. Actualización. Vista previa de los cambios. Queremos que este icono se ponga negro al pasar el cursor. Ese es el color del texto al pasar el cursor. Hagámoslo negro, incluso en su estado normal. Vamos a hacerlo negro. Actualizar, previsualizar los cambios. Ahora es negro sobre hover. De hecho, eso no les gusta. Verde y rosa. No creo que riman. Así que déjame cambiar el color del resplandor de nuevo a rosa Actualización. Y la razón por la que elegí ir con mal color rosa por defecto es porque lo hace destacar. Casi todo lo demás es blanco y verde, pero esto es rosa, por lo que realmente destaca. Y esa onda de resplandor también la atención del espectador y solo hace que quieran hacer clic en ella. Y si le haces clic, claro que ahora tiene ese video. Si bien aún está seleccionado, puedes agregar una URL a tu video aquí. Entonces, si tienes un video de YouTube, aquí es donde puedes agregarlo. Y cuando la gente haga clic en él, reproduciría ese video. Y así es como agregar el menú de navegación. En el siguiente video, veamos cómo empezar a crear el resto de estas secciones. Entonces te veré en breve. 12. Sección 1 del cuerpo - Parte 1: Estamos de vuelta. Entonces ahora que hemos terminado con la sección de héroe y la barra de navegación, es momento de comenzar a construir estas diferentes secciones que conforman el cuerpo de la landing page. Entonces comencemos con esta calle de aquí. Así que volviendo al interior de nuestro editor de landing page, justo debajo de nuestra sección de héroes, agreguemos un contenedor. Así como así. Y dentro de este contenedor, claro, agreguemos un texto. Quiero agregar un editor de texto, no un encabezado, así como así. Ahora, déjame, déjame agarrar estos textos aquí mismo, por supuesto ahora vas a escribir el texto que quieras. Entonces copia ese verde de vuelta aquí. Voy a pegarlo ahí. Pero no quiero pegarlo con su formato, así que voy a deshacer eso. Y luego Control Shift V que pegan el texto dentro estos editores sin ningún equipo anterior. Bien, así que ahora mientras todavía está seleccionado, voy a entrar en estilo, cambiarlo a negro. Y voy a cambiar este fondo del contenedor exterior a ese verde. Entonces déjame seleccionar este botón, coincidir estilo. Seleccione este verde. Copia eso, y vuelve a este contenedor aquí. Estilo, tipo de fondo, color clásico. Lo pegaré aquí. Entonces ahora es así de verde. Lo siguiente que quiero hacer es, por supuesto, antes que nada, seleccionar estos textos. Como puedes ver, tiene algún relleno o margen que viene por defecto. Entonces mientras se selecciona el texto, ve a Avanzado. Quitar, romper ese vínculo. Y ese vínculo también. Quiero antes que nada entrar al estilo y centralizarlo así. Y luego tipografía. Aumentemos el tamaño hasta ese punto. Tal vez ir adentro avanzado mientras todavía está seleccionado para el relleno inferior, para el margen inferior. Vamos a reducirlo así así. Y voy a ver que está espaciado. Entonces, aunque todavía se seleccionan sitios en curso, topografía, espaciado entre letras, Vamos a espaciarlo así. Y no te preocupes de que sea envoltorio. Todo lo que tenemos que hacer es ir a seleccionar el exterior, seleccionar el contenedor exterior. En Diseño, hagámoslo de ancho completo. Así como así. Aumentemos el margen superior. Ahora vamos a reducir más el margen inferior hasta algún lugar ahí. Actualiza eso. Por supuesto que tendremos que añadir algún margen entre la sección de héroes en esta tira. Entonces seleccionando el contenedor exterior, margen avanzado, eliminamos ese enlace para que podamos editar solo una celda, la celda superior. Vamos a darle tal vez 15150 es demasiado. Cien. Actualiza esa vista previa de los cambios. Ahí vamos. Entonces tenemos esa tira. Y claro que podemos aumentar tanto, podemos darle tanto relleno como queramos en el propio contenedor exterior. Así que el relleno exterior del contenedor, vamos a romper eso. Y vamos a darle un acolchado superior e inferior, tal vez 20, abajo, 20 arriba así. Actualización. Bien, entonces ahí está. Permítanme solo previsualizar los cambios. Ahí está. Pero ahora se dará cuenta de que este fondo está un poco cortado por el borde del contenedor que contiene todo aquí dentro. Este de aquí mismo, como pueden ver, está cortando parte de eso. Así que vamos a seleccionar estos contenedores. Y bajo la altura, altura mínima, Vamos a elegir la altura de la ventana. Actualiza eso. Y vamos a previsualizar los cambios. Bien, eso no lo cambia. Entonces solo podemos decir al 100%. Vamos a probar eso. Eso es intentar que sea el 100% de la pantalla. Entonces con eso, vamos a reducir el margen en la parte superior. Pero en la parte inferior, en realidad hemos, nos hemos deshecho de ese carro. Probemos tal vez el 80% de la altura de la ventana gráfica. Vista previa de los cambios. Creo que eso es mucho mejor, pero podemos hacerlo mucho mejor. Probemos 70 por ciento. Actualiza eso. Vamos a previsualizar los cambios. Vista previa de los cambios. Ahí vamos. Entonces ahora seleccionando esto, en realidad podríamos reducir el margen superior a tal vez 50. Actualiza eso. Se trata de jugar con estos números hasta que se vea bien en tu opinión? Sí. Entonces porque lo queremos porque yo quería que fuera visible cuando estás en la landing page. Entonces eso es todo. Entonces básicamente así es como crear esa tira. En la siguiente lección, sigamos adelante y creemos esta sección aquí mismo. Y si actualizo esta página, déjame refrescarla. Verás estas animaciones. Este tipo rebota junto con los textos, verá cómo hacer todo eso. Entonces te veré en la siguiente lección. 13. Sección 1 del cuerpo - Parte 2: Estamos de vuelta. Entonces ahora es el momento de ver cómo crear a este tipo de aquí junto con este bloque de texto. Una cosa que notarás es que el fondo no se mueve. A medida que nos desplazamos, estas ondas permanecen fijas en un solo punto. Entonces, ¿cómo logramos ese resultado? Hagámoslo primero antes de empezar a crear a este tipo. Entonces volviendo aquí, cuando nos desplazemos, notarás que nuestras olas se mueven con el contenedor. Entonces seleccionando el contenedor que tiene estas ondas como fondo. Y yendo dentro de estilo, tenemos apego y está configurado por defecto. Podemos hacerlo fijo en un solo lugar. Y ahora cuando nos desplazamos, se fija en ese lugar. Actualiza eso. Vamos a previsualizar los cambios. Ahora bien, si nos desplazamos hacia arriba, no tenemos suficiente contenido debajo de estos para desplazarnos. Este es el último contenido que tenemos aquí. Entonces agreguemos una sección. Entonces bajaré aquí y haré clic en el signo más. Y agreguemos, una vez más, solo quiero agregar un contenedor menos contenedor. Así que así. Y ahora agreguemos el primer contenedor que debería contener la imagen. Déjame agregar algo de texto ficticio ahí. Y ahora agreguemos otro contenedor más. Así que lo arrastraré y soltaré fuera del contenedor que acabamos de crear. Entonces ahora tenemos dos contenedores, pero quiero que este contenedor que sostiene el texto sea después del contenedor de imágenes. Entonces déjame arrastrar este contenedor de imágenes antes del contenedor de textos, así como así. Ahora que los tenemos pilas así, vamos al contenedor que los sostiene. Este contenedor exterior. Y cambiemos la dirección de izquierda a derecha, así. Entonces aquí, agreguemos un elemento de imagen. Bueno, eso es activo. Yo había subido esta imagen con este tipo, así que solo la seleccionaré. Ahí vamos. Y aquí dentro, queremos decir que hazte más fuerte más rápido. Así que voy a agarrar eso, seleccionarlo bajo el título de contenido. Pégalo ahí dentro. Y fíjense que cuando agregamos encabezados, son Montserrat negros, eso es muy fuerte, atrevido, y esto es lo que configuramos como nuestra fuente global para los encabezados. Entonces mientras todavía está seleccionado, digamos estilo, color del texto, blanco, un poco más grande. Este es un editor de texto, texto ficticio, así que solo diré agregar un editor de texto, Lorem Ipsum por defecto. Si bien sigue activo, pasemos al estilo del color del texto. Cámbialo a blanco. Así como así. Y tenemos estas listas aquí mismo. Así que volviendo aquí, selecciona la lista de elementos y es una lista de iconos. Entonces voy a arrastrar la lista de iconos debajo de eso. Y si hago clic en el primer ítem, puedo cambiarlo a lo que quiera. ¿Qué es esto? Levantamiento pesado. Así que levantar objetos pesados, entrenamiento de resistencia, culturismo, construcción, técnicas de culturismo. Y también puedes hacer los cambios aquí mismo en lugar de aquí. Así que el artículo arrendado número tres listado dos num tres solo puede seleccionar ese texto. Entrenamiento de resistencia. Y por supuesto ahora te darás cuenta que aquí podemos cambiar los íconos. Entonces si selecciono esto, vamos a escribir check. Porque quería marcar la casilla, está bien. Insertar, Casilla de verificación, contraer eso, expandir eso, ir dentro del icono. Cheque. Insertar. Y por último, levantar objetos pesados. Cheque. Puedes empezar con eso. Y ahí vamos. Ahora vamos y hagámoslo. Y puedes agregar, como puedas, agregar más artículos aquí si lo deseas. Entonces a continuación aquí tenemos agregar ítem, tal vez sesiones de yoga. También se dice cheque. Insertar y ahora tenemos sesiones de yoga. Ahora para cambiar los colores entraría dentro del icono de estilo. Cambiémoslo a este verde. Creo que son blancos o verdes. Entonces seleccionando estos, seleccionando estos contenedores que van dentro de estilo, seleccione el color, copie. Seleccione el estilo de lista. Icono. Color. Al flotar. El color debe ser blanco. Así como así. Ahora, hagamos también algo con respecto a los textos. En estado normal. Queremos que sea blanco. Y al flotar queremos que sea verde. Así como así. Actualización. Y ahora claro, igual que en la sección de héroes, queremos que todo esté equilibrado verticalmente para que tengamos el mismo espaciado aquí abajo que aquí arriba. Estos textos parecen estar elevados a la cima y lo queremos en el medio en alguna parte de aquí. Entonces seleccionamos el contenedor que contiene estos dos contenedores. Ir a los artículos, Alinear y alinearlos en el centro verticalmente así como así. Y ahora, claro, ahora notarás que esta imagen es más grande y está casi al borde. Y eso significa que el contenedor en sí es de ancho completo. Así que hagamos este contenedor de ancho completo seleccionado por ancho así como así. Y ahora agreguemos sus antecedentes. Entonces yendo dentro de estilo, clásico, creo que ya había subido estos antecedentes. Es este trasfondo de aquí mismo. Fondo de neón a la izquierda. Ya lo había subido. Así que trae insight mediateca. Aquí está. Seleccione. Y ahora ahí vamos. Actualizar, previsualizar los cambios. Desplazamiento hacia abajo. Ahí vamos. Y fíjense que el patrón se está repitiendo y no queremos eso. Eso es lo que pasa por defecto. Entonces repita los valores predeterminados, no. No repetir. Actualiza eso. Vista previa de los cambios. Desplazarse hacia abajo. Y ahora no se repite. Ahí vamos. Espera, y acabo de notar alguna manera perdimos el editor de video. No sé qué le pasó. Entonces claro que es muy fácil agregarlo una vez más. Así que sólo dame un momento. Video. Él niños. Justo ahí. Ni siquiera voy a trabajar en ello porque ya sabes qué hacer. Entonces déjame actualizar eso. Y luego vamos a previsualizar los cambios. Ahí vamos. Entonces desplazándose hacia abajo. Ahora este contenedor está demasiado cerca del arroyo. Queremos que se separen. Entonces, seleccionemos el contenedor en sí. Avanzado. Rompe ese vínculo. Vamos a darle 150. Margen superior. Así que eso es lo espacios por completo. Y siento que hay demasiado espacio aquí arriba. Siento que necesitamos empujar estos elementos un poco hacia arriba. Entonces seleccionando este contenedor que está sosteniendo todo avanzado, margin, top, vamos a reducir ese espaciado así, tal vez negativo 85, dependiendo de tus preferencias. Y vamos a previsualizar los cambios. Ahí vamos. Creo que ahora eso está muy bien posicionado. Entonces desplazándose hacia abajo. Ahora, arreglemos este fondo antes de que lo llamemos envoltura. Así que seleccionando ese accesorio estilo contenedor fijo. Así como así, actualización. Vista previa de los cambios. Desplazamiento hacia abajo. Ahí vamos. Entonces ahora, claro, es muy fácil de agregar. Olvidamos agregar el botón. Y el botón tiene un icono, así que olvidamos agregar ese icono. Entonces seleccionando este botón bajo Icono de contenido, podemos seleccionar de la biblioteca de iconos. Quiero este inserto de flecha. Y podemos ponerlo después. Para que pueda posicionarme después, así como así. Y dicen, únete a nosotros hoy, mira clases. Entonces, mientras se selecciona este y el texto del contenido del texto, únase a nosotros hoy. Y esto debería decir cursos o clases. Hagámoslo. Ahora. Duplicemos esto. Así que voy a duplicar ese botón arrastrando. Ahora lo dejaré ahí mismo. Y claro que notarás que tenemos demasiado espaciado aquí arriba. Entonces seleccionaré este texto margen avanzado abajo. Vamos a reducirlo hasta eso, hasta ese punto, y luego seleccionar lista, lista, avanzado, romper ese margen abajo. Aumentemos eso para separar el botón. Actualiza eso. Y vamos a previsualizar los cambios. Desplazamiento hacia abajo. Ahí vamos. Entonces esa sección ya está completa. Como puede ver, los principios siguen siendo los mismos. Las mismas cosas que hicimos en la sección de héroes, o los mismos consejos y trucos que estamos usando para crear estas otras secciones. Ahora claro, sigamos y creamos aquí esta siguiente sección, usaremos los mismos principios, pero la imagen estará de este otro lado. Hagámoslo en la siguiente lección. Nos vemos en breve. 14. Sección 2 y 3 de órganos: Bien, así que volvamos a los negocios. Así que ahora acabamos de terminar de crear esta parte. Pasemos a crear esta sección aquí mismo. Así que volviendo a nuestro editor. Así que sigamos adelante y agreguemos un contenedor doble así. Y aquí adentro, de hecho, podemos simplemente arrastrar, podemos simplemente duplicar este contenedor aquí así. Entonces arrástralo aquí en el costado de ese otro contenedor ahí. Vamos a deshacernos de esto. Y también podemos duplicar esto. Y arrastre bolsa mixta así como así. Entonces, deshagámonos de eso. Así de elemental te facilita las cosas. Simplemente puede duplicar y reutilizar elementos. Entonces por supuesto ahora seleccionando el contenedor exterior avanzado. Agreguemos un margen superior de 150 para uniformidad. Y si bien esto todavía está seleccionado, vamos dentro del layout y alineemos todo al centro, verticalmente. Selecciona esta imagen yendo aquí para que podamos reemplazarla. Iré a subir esta señora aquí mismo. Abierto. Ahí vamos. Entonces ahí está nuestra chica. ¿Tiene antecedentes? Por supuesto, ella sí, pero este es un trasfondo más sencillo. Así que entrando aquí y seleccionando fondo estilo contenedor exterior, clásico, vamos a seleccionar ese fondo subir archivos. Se trata de los elementos BG. Ese es el trasfondo que creamos para esa sección. Ahí vamos, selecciona y ahora tenemos ese bonito fondo por allá. Por supuesto, podemos aumentar el relleno, el espaciamiento entre el borde aquí y el contenido en la parte superior e inferior. Entonces seleccionando el contenedor exterior. Vamos al relleno, rompa eso. En la parte superior, hagamos 50 y en la parte inferior, 50. Entonces ahora tenemos ese bonito espaciado por allá. Si bien todavía está seleccionado. Volver al interior del diseño. Ahora vamos al interior de estilo adjunto, fijo. Ahora mientras nos desplazamos, parece que hay una sola actualización de fondo. Vamos a previsualizar los cambios. Ahí vamos. Entonces comencemos a desplazarnos. Así como así. Y ahí vamos. Pero claro, permítanme cambiar ligeramente estos textos y el tamaño del texto es mayor que lo que tenemos en el nuestro. Entonces seleccionando eso, entrar en contenido, pegar eso ahí dentro un hombre, Hagamos el texto más grande yendo dentro de estilo. Tipografía. Piensa que ese es el tamaño perfecto para el cuerpo perfecto. Luego, mientras esto todavía esté seleccionado, haga clic con el botón derecho en Copiar, seleccione este estilo de pegar con el botón derecho. Entonces lo hace del mismo tamaño que este. Si tal vez fuera un color diferente, este también sería ese color. Bien, así que actualicemos eso. Y claro que ahora en la siguiente lección las hubiéramos creado. Pero en lugar de esperar a la siguiente lección, solo vamos a duplicar esto. Duplicemos ese contenedor ahí, así. Ahora tenemos que arrastrar esto por debajo de ese contenedor. Ahora está aquí y sigue siendo la copia está aquí. Seleccione esta imagen. Necesitamos esos guantes. Entonces voy a ir aquí. Guantes seleccionados. Seleccione. Ahí vamos. Boxeo de clase mundial. Copia eso. Seleccione eso. Entonces aquí en el título, el boxeo de clase mundial. Ahora por supuesto, puedes cambiar todos estos contenidos a tu propia discreción. Personalízalo a tus propias necesidades específicas. Solo estábamos viendo cómo diseñar cada elemento en la página de destino. Bien, entonces ahora tenemos estos servicios, y eso es en lo que vamos a estar trabajando en la siguiente lección. Entonces, antes que nada, permítanme decir esta actualización. Veamos qué tenemos en el sí, el fondo aquí sigue siendo el mismo que el fondo sobre esto. Así como así. Así que vamos a previsualizar los cambios. Desplazarse hacia abajo. Y ahí vamos. Entonces en la siguiente lección, veamos cómo crear estos. Veamos cómo crear estas características o servicios antes de llegar a los testimonios. Entonces te veré en breve. 15. Sección de servicios: Hola, bienvenido de nuevo. Entonces ahora es el momento de crear estas secciones de servicios o sección de características. Y esta parte es un poco más compleja que las partes anteriores porque involucra contenedores dentro de contenedores, dentro de contenedores. Y así vamos a ver cómo hacer eso. Así que volviendo aquí, primero que nada creemos el contenedor que lo está guardando todo. Entonces hay un contenedor que contiene todos estos artículos. Entonces, antes que nada, creemos eso. Y solo quiero comenzar desde un contenedor en blanco así. Vamos adentro avanzado. Rompe ese vínculo. Margen superior de 150, así como así. Y vamos a actualizar eso. Y mientras se está actualizando, permítanme seguir adelante y duplicar ese rumbo porque vamos a necesitar un rumbo ahí dentro. Y también estas breves descripciones bajando por debajo del encabezamiento. Y mientras esto todavía está seleccionado, voy a ir dentro de estilo, alinearlo al centro. Si bien esto se selecciona, entra dentro del centro de alineación de contenido. Permítanme antes que nada cambiar eso a nuestras características mientras este es el título seleccionado. Eso seguirá siendo así. Actualización. Entonces ahora volviendo aquí, esto de aquí es un contenedor y estos son dos elementos. Y están dispuestos dentro del contenedor exterior que los sostiene a todos. Y están dispuestos de arriba a abajo. Entonces, permítanme ilustrar eso muy rápidamente. Déjame alejarme un poco para que podamos ver todo hasta ahí. Déjame ahora elegir la herramienta de recorte. Entonces ahora, aquí vamos. Entonces asumamos que esto es un contenedor. Todo esto es un contenedor. Y ese contenedor tenemos este elemento. Y este elemento. Y esto de aquí también es un contenedor. Entonces esos son tres elementos y están dispuestos de arriba a abajo. Entonces volviendo aquí, están arreglados. Déjame seleccionar este contenedor exterior. Este contenedor exterior es este contenedor exterior, el contenedor negro de aquí. Y tiene tres elementos, el encabezamiento, la descripción, y un contenedor en su interior. Y está arreglado de arriba a abajo, así como así. ¿Bien? Entonces eso significa que necesitamos tener un contenedor justo debajo de estos dos elementos. Entonces agreguemos un contenedor aquí. Entonces este contenedor es lo que va a contener estos otros contenedores. ¿Bien? Entonces, pero ahora mirando este encabezamiento y esta descripción, estos son dos elementos dispuestos dentro un contenedor de arriba a abajo, al igual que aquí. Entonces un encabezamiento y su descripción dentro de un contenedor dispuesto de arriba a abajo. Y entonces este contenedor en esta imagen están dentro de otro contenedor dispuesto de izquierda a derecha. Y esto de aquí es una columna, contiene esto aquí hay un contenedor que es una columna con tres contenedores como este, dispuestos de arriba a abajo. Muy bien, entonces ahora eso es lo que estamos tratando de lograr. Espero que lo hayas entendido. Espero que hayas entendido estos dibujos, aunque parecen garabatos, al menos has seguido y entendido cómo se relacionan los contenedores entre sí. Entonces ahora estamos trabajando en. Entonces ahora comencemos primero creando este contenedor aquí, CrossFit y su descripción. Así que entremos aquí y dupliquemos esto. Y luego duplique eso. Entonces ahora vamos a dibujar esto. En el contenedor y esta justo debajo de él. Entonces ambos están dentro de un contenedor. Ese es este contenedor aquí dispuesto de arriba a abajo. Entonces, si seleccionamos este contenedor, está dispuesto de arriba a abajo, así como así. Ahora, vamos a crear este contenedor exterior que tiene la imagen en este contenedor. Entonces eso significa que estamos agregando un contenedor. Vamos a agregar un contenedor ahí dentro. En este contenedor. Dejemos caer estos otros contenedores. Así como así. En este contenedor exterior. Este contenedor exterior. Dejemos caer la imagen. Entonces déjame agregar una imagen ahí dentro. Entonces ahora tenemos este contenedor que está dentro con el texto y su descripción. Y el segundo elemento es la imagen. Entonces ahora es el momento de seleccionar este contenedor. Y tiene que ir de izquierda a derecha, así como así. Entonces ahora tenemos este contenedor aquí. Lo siguiente que queremos hacer es crear estos contenedores que están sosteniendo, eso es como una fila con tres servicios, 123. Ahora vamos a arrastrar otro contenedor aquí, justo debajo del texto. Y vamos a arrastrar este contenedor ahí dentro. Ahora. Ese es un servicio ahí dentro. Duplicemos el servicio. Vamos a duplicarlo una vez más. Ahí vamos. Así que ahora acabamos de crear estas columnas. Pero ahora recuerden que también tenemos dos columnas. Entonces esas dos columnas están dentro de otro contenedor. Y están dispuestos de izquierda a derecha. Entonces necesitamos tener otro contenedor y duplicar esta columna. Entonces ahora agreguemos otro contenedor. Y vamos a arrastrar este contenedor ahí dentro. Entonces ahí vamos. Por lo que ahora este contenedor tiene tres servicios. Está dentro de este contenedor. Entonces ahora vamos a duplicarlo. Pero claro, por defecto, este contenedor que sostiene las dos columnas ahora está dispuesto de arriba a abajo. Y si nos desplazamos, tenemos esa columna hasta ahí con tres servicios. Y luego esta segunda columna duplicada. Entonces lo que queremos hacer es ir y seleccionar esta columna o esta. Estoy usando la palabra columna porque ese era el flujo de trabajo anterior en elemento. Entonces seleccionando aquí este contenedor exterior que tiene estas dos columnas. Seleccionándolo. Cambiémoslo de izquierda a derecha. Ahora tenemos dos columnas. Eso es todo. Ahora que tenemos eso, ¿qué más necesitamos? Creo que tenemos todo cubierto. Entonces ahora es solo crear el contenido que se necesita aquí. Seleccionando esta imagen. ¿Qué necesitamos, esta chica? Así que entremos y subamos archivos. Esta chica. Abierto. Bien, Así que selecciona eso. Entonces tenemos esa imagen. Primero que nada reduzcamos el tamaño del encabezado. Necesidad de reducirlo drásticamente hasta algún lugar allí. Y queremos que quede alineado. Así que el contenido se alinea a la izquierda, así. Entonces quiero seleccionar estos textos y eliminar la mayor parte de ellos porque eso es solo una breve descripción. Y mientras todavía está seleccionado, estilo, alineación a la izquierda. Ahora seleccionaré esta copia. Selecciónelo. Haga clic con el botón derecho, copie. Seleccione este estilo de pegar con el botón derecho. Seleccione este estilo de pegar con el botón derecho. Seleccione. Estilo de pasta. Seleccione, haga clic con el botón derecho en Pegar. Seleccione, haga clic con el botón derecho en el estilo de pegar. Seleccione esto. Alinear a la izquierda, como este estilo, línea izquierda. Por supuesto ahora esto será reemplazado por tu contenido específico. Quería reducir esto una vez más. Usa eso, usa, eso, usa eso así. Actualización. Y ahora los encabezamientos son de color verde, y de hecho ni siquiera son ningún hecho que note que atrevido. Así que yo no iría también. 700. Sí, creo que es lo correcto. La audacia, los textos, el color. Vamos a darle ese verde. Entonces selecciona ese botón. Estilo. Copia eso. Entra aquí. Bajo encabezado de estilo. Debería haber hecho todo lo que necesitaba en esto y luego lo pegué. Así que haga clic con el botón derecho en Copiar, Pegar. Voy a hacer eso por cada otra partida aquí. Pega el estilo así. Déjame seleccionar esta imagen, basada en cardio. Y luego mientras se selecciona esto, entraré aquí. Seleccione la imagen de cardio. Seleccione. Adelante y selecciona esto. Esto es CrossFit. Seleccione ese CrossFit, resistencia, pérdida de peso. Y finalmente la fuerza. Así que pon eso ahí. Y permítanme simplemente rápidamente estas imágenes. Por lo que elemental cambiará automáticamente tamaño para que usted sea del mismo tamaño. Aunque en realidad las imágenes no tienen las mismas dimensiones. Y por último, agreguemos la imagen de pérdida de peso. Ahí vamos, para que esto sea a lo que me refiero. Entonces, si seleccionamos eso, como puedes ver, elemental lo ha redimensionado. Entonces ahora vamos a seleccionar esta imagen, ir dentro de estilo, border-radius. Vamos a darle 20 para darle unas esquinas redondeadas. Dale esquinas redondeadas. Repetimos lo mismo para el resto. 20 aquí, estilo, estilo. Es estilo running. Ronnie. Por último, el entrenamiento de estilo. Así que actualice eso. Y ahora recuerden, ¿qué pasaría con la alineación de textos que parece elevarse hacia arriba dentro de un contenedor O tenemos que hacer es seleccionar el contenedor en sí, este contenedor, y alinear todo al centro así como así. Así que vamos a repetir eso para todos los servicios. Centro. Seleccione ese centro, seleccione ese centro. Seleccione ese centro y finalmente seleccione ese centro. Actualización. Y vamos a previsualizar los cambios. Así que desplazándose hacia abajo. Ahí vamos. Nuestros servicios ya están hechos. Si quieres, puedes hacer estos contenedores de ancho completo. Así que selecciona el propio contenedor. A ver. Sí, seleccione este contenedor por ancho. Actualización. Y vamos a previsualizar los cambios. Desplazamiento hacia abajo. Por lo que el contenedor que los sostiene tampoco debe ser encajonado. Así que vamos a seleccionar esto. Como puedes ver, sigue en caja, así que de ancho completo, pero vamos a hacerlo tal vez el 70 por ciento. Ahora, digamos 80%, 80%. Y seleccionemos el contenedor que contiene estos contenedores. Ese es el contenedor exterior. Y alinea todo al centro así como así. Actualización. Y vamos a previsualizar los cambios. Así que desplazándose hacia abajo, está un poco más espaciado. Y así es como crear estas características sección. En la siguiente lección, justo antes de continuar a crear la carpeta, vamos a crear los testimonios. Entonces te veré en breve. 16. Sección de testimonios: Bienvenido de nuevo. Entonces ahora es el momento de crear la sección testimonial justo antes de continuar a crear el pie de página. Así que sin perder más tiempo, vamos a saltar de inmediato. Así que volviendo al interior de Elementor, justo debajo de nuestra sección de servicios, hagamos clic en este signo más y solo queremos un contenedor simple vacío o en blanco. Y luego aquí, agreguemos un testimonio. Ahora tenemos el elemento por defecto elementor testimonial y tenemos un elements, kit elements. Entonces usemos los elementos, mantengamos uno porque es muy, es mucho mejor. Y como siempre, vamos a darle un margen en la parte superior. Entonces seleccione el contenedor externo, avanzado, califique ese enlace. Una quinta parte. Bonito espaciado ahí arriba. Lo siguiente que queremos hacer es seleccionar el testimonio en sí, el elemento testimonial. Si bien está seleccionado, aquí tenemos diferentes formatos. El que me gusta es esto o esto. Así que vamos con éste. Y ahí vamos. Vamos dentro de la configuración. Y podemos mostrar dos diapositivas a la vez. Entonces, permítanme decir dos. Ahora tenemos que, justo antes de hacer otra cosa, vamos a hacer, vamos al interior del estilo. Y para el radio fronterizo, vamos a darle 20. Así como así. Así que sigamos adelante y cambiemos el color de fondo. Bajo Disposición. Bajo diseño, tenemos el tipo de fondo, clásico. Vamos a darle tal vez un gris oscuro para que lo separemos del fondo negro. Así como así. Haz clic en cualquier parte de aquí para deshacerte de eso. Y luego vamos a colapsar eso por un segundo porque queremos ir a cambiar la descripción. Antes de cambiar la descripción, vamos al contenido testimonial. Testimonial uno. Yo sólo quiero agarrar estos testimonios aquí. Entonces esa es Emily Chan. Bien, no puedo agarrar eso. ¿Puedo? No puedo arrastrar eso. Entonces solo tendré que usar algunos de estos textos. Entonces digamos que esta es la designación de Julia Roberts, tal vez comercializadora. Ahora vamos a pegar ese testimonio ahí dentro. Lo duplicaré otra vez. Y ahora ahí tenemos algunas cantidades sustanciales de textos. Así que volviendo al interior, colapso de estilo que van dentro de la descripción, cambian de color a blanco. Ahora que nuestro testimonio colapsó eso Vamos a la calificación. Puedes cambiarlo a ese verde. Entonces déjame seleccionar este estilo. Copia eso. Seleccione los elementos testimoniales, colapse Layout, vaya a rating, coloree, cámbielo a verde, y ahora tenemos alguna calificación agradable consistente verde colapsado. Vamos con el cliente. En primer lugar, el color del nombre del cliente. Podemos hacerlo así mismo. Verde. Expandir clientes nuevamente. Así que acude a clientes discretos designación comercializador. Entonces el color debe ser blanco. Así. ¿Qué más? ¿Qué hay aquí abajo? Imagen del cliente, no necesitamos cobrar la imagen del cliente. Creo que se ve bien. O tenemos que hacer se agrega. Así que ahora permítanme simplemente colapsar cliente. Entra dentro de las cotizaciones, icono de cotización. También puedes hacerlo de color verde así. Y entonces tal vez reducir la opacidad después de algún lugar ahí para que no esté gritando. Al flotar. Simplemente podemos hacerlo blanco o reducir la opacidad. Una vez más, así como así. A lo mejor así. Podemos copiar eso activo. Que también sea de ese mismo color. A pesar de que estas actividades son irrelevantes aquí, porque no se puede hacer clic y hacerla activa. Entonces, sin embargo, es solo de ese color. Volvamos a la configuración de contenido. Y ahora también podemos habilitar loop. Eso significará que no va de izquierda a derecha, de izquierda a derecha. Simplemente va en una dirección en un bucle. Mostrar puntos. Podemos mostrar los puntos para que alguien sepa Qué testimonio estás viendo ahora. Sí. Deja eso igual que así. Entonces vamos a entrar. Testimonial. Testimonial uno, Julia Roberts, clientes, avatar. Vamos a subir archivos. Estos son los tres clientes. Voy a subir los tres. Seleccione. Entonces esa es Julia. Ahí vamos. Déjame colapsar eso. Segundo. Tal vez ganchos de equipo. Tal vez. Mástil Jim. Vamos a copiar algún bloque de texto. Copia eso. Vamos a pegarlo ahí dentro. Y luego es imagen. Ese es él. Déjame colapsar equipo. Vamos a expandirnos. Tal vez. Moniker. Sus alas. Las alas llaman, designación. Músico al que le gusta la salud y el estado físico. También peguemos algunos de los textos ahí dentro. Por supuesto, escojamos su imagen. Actualicemos eso. Entonces ahora tenemos tres testimonios y acabo de notar que nos olvidamos pico el encabezamiento y su descripción. Testimonios aún indecisos, esto es lo que nuestros clientes tenían que decir. Así que simplemente podemos duplicar esto y arrastrarlo hacia abajo. Déjalo caer ahí arriba. Este contenedor. Ve aquí como duplicado eso. Arrastrando. Déjalo caer ahí. Así que actualice eso. Y vamos a previsualizar los cambios mientras se está actualizando. Cambiemos esto para probar dos monomios. Actualización. Una vez más. Vamos a previsualizarlo. Desplazamiento hacia abajo. Ahí vamos. Entonces nuestro testimonio ahora se ve increíble. Ya casi terminamos con la landing page y hasta ahora me gustaron los resultados. Pero lo más importante es no conseguir el sitio web o landing page perfecto en este momento es que aprendas el flujo de trabajo. Estoy bastante seguro de que puedes hacerlo mucho mejor y producir una landing page mucho mejor con el tiempo. Así que tómate tu tiempo, mejora estas habilidades. Y esto es solo la punta del iceberg. Hay muchas más cosas, muchos más consejos y trucos que puedes aprender. Bien, entonces ahora así es como crear la sección de testimonios. En la siguiente lección. Sigamos adelante y creamos la carpeta. Lee antes de hacer que el sitio web o la página de destino respondan en diferentes pantallas del dispositivo. Entonces te veré en breve. 17. El pie de página: Bienvenida de nuevo. Entonces ahora es el momento de crear el pie de página. Así que sin perder más tiempo, saltemos aquí mismo a nuestra landing page. Y claro, al igual que la napa o la sección nav, no vamos a estar construyendo la carpeta aquí mismo. Aquí es donde construimos el cuerpo de la página para el pie de página y encabezado, los construimos por separado. Así que ahora todo lo que tengo que hacer es salir de aquí será redirigido al tablero. Y podemos entrar en kit de elementos, encabezado y pie de página. Y podemos decir Agregar Nuevo. Entonces llamémoslo carpeta, seleccione pie de página aquí. Esa es la etiqueta que queríamos en todo el lado. Y queremos que esté activo. Así dicen los cambios. Ahí vamos. Entonces porque no lo editó con Elementor, no tiene estas opciones. Haga clic en Editar. Los contenidos de edición serán redirigidos al front-end donde ahora podemos construirlo visualmente. Hagámoslo. Muy bien, así que ahora comencemos con un contenedor en blanco. Ahí vamos. Y ahora queremos comenzar con esto. Queremos comenzar con este contenedor aquí. Tiene el local y la breve descripción y todo está arreglado de arriba a abajo. Ya nos acostumbramos a esos contenedores. Espero. Entonces. Vamos a arrastrar un contenedor ahí dentro. Y agreguemos un elemento de imagen y un editor de texto justo debajo de la imagen. Así como así. Es sólo un contenedor con dos elementos. Seleccione los elementos de la imagen, y vamos a elegir el logotipo. Así como así. Seleccione la descripción. Quiero copiar esto. Copia eso. Y seleccionaré todo este control Shift V para pegarlo sin ningún formato. Y si bien todavía está seleccionado, voy a entrar en estilo. El color tiene que ser blanco. Actualiza eso. Ahí vamos. Ahora, lo siguiente que queremos hacer es crear esta parte. Y ahora igual que hicimos con la herramienta de recorte aquí, quiero mostrarles cómo vamos a hacer esto. Entonces, una vez más, este es un contenedor que tiene una imagen. Y estos textos. Entonces aquí tenemos un contenedor que tiene dos elementos a las listas de iconos. Y están dispuestos de izquierda a derecha. Y entonces esto de aquí es un elemento de encabezamiento. Junto con este contenedor de aquí. Están dentro de un contenedor y están dispuestos de arriba a abajo. Entonces tenemos el texto y luego el contenedor aquí mismo. Ignora esto. Aquí mismo tenemos este icono, estos íconos sociales. Y tenemos estos formularios de inscripción. Estos son dos elementos dentro de este contenedor, y están dispuestos de arriba a abajo. Y luego todos ellos están dispuestos dentro de un contenedor de izquierda a derecha. Entonces ya creamos este contenedor que sostiene a estos dos. Y ese es este contenedor de aquí mismo. Entonces lo que queremos hacer es crear este contenedor exterior antes de crear estos otros dos. Así que agreguemos un contenedor en. Ellos van a entrar aquí. Arrastre y dibuje un contenedor fuera de este contenedor interior. No, no voy a comer afuera. Todo bien. Déjeme dejarlo ahí por ahora. Bien, entonces, sí, así que está fuera de este contenedor. Entonces ahora queremos arrastrar este contenedor ahí dentro. Y vamos a duplicarlo. Uno. Dos. Entonces ahora que tenemos tres columnas, esas son como estas tres columnas. Escojamos el contenedor que los sostiene a todos. Y para la dirección, cambiémoslo a tres columnas. Ahora aquí dentro, lo que necesitamos es, recuerden que esto también era un contenedor. Así que vamos a arrastrar un contenedor aquí. Dejémoslo ahí dentro. Deshazte de eso. Déjame agregar un cuadro de iconos, lista de iconos ahí dentro. Y porque es un contenedor, si duplico eso, habrá apilados. Pero si selecciono el contenedor, podemos ir a las indicaciones y cambiarlas a dos columnas, igual que aquí. Ahora, necesitamos este texto. Ese texto vendrá aquí porque seleccionamos un encabezado. Déjalo caer encima de este contenedor. Vamos a deshacernos de esta imagen. Actualiza eso. Entonces aquí dentro, vamos a deshacernos de eso. Y vamos a deshacernos de eso. Signo más. Digamos íconos sociales. Iré con los elementos, los íconos sociales de los niños. Y así se ven por defecto, no los puedes ver porque el fondo es negro. Pero si bien esto sigue seleccionado, claro, por defecto, tenemos Facebook, Twitter, LinkedIn, y puedes agregar tantos como quieras si quieres Pinterest, Instagram y todo eso. Entonces, antes que nada, incluso antes de ir más lejos, abramos Facebook. Y vamos al color. Por defecto, es así de gris, pero queremos que sea verde. ¿Todavía tengo ese verde? No, no lo sé. Entonces déjame agarrarlo de este otro lado. Copia eso aquí. Vamos a pegarlo. Y ahora es verde. Y de hecho, quería que el fondo fuera verde, no el icono. Así que pegarlo ahí y deberían ser de color negro, así como así. Entonces al flotar, queremos que sea un fondo blanco. Así como así. Repetimos lo mismo para Twitter. Color. Ese es el color del texto, negro, color de fondo. Péguelo verde. Y luego al flotar, queremos que el fondo sea blanco. Hagamos lo mismo con LinkedIn. Color del texto, negro, color de fondo verde. Al flotar. Queremos que esto sea blanco. Muy bien. Ahí vamos. También podemos alinearlos a la derecha o a la izquierda o al centro. Así. Si vamos dentro del estilo, también podemos reducir o aumentar el tamaño del icono. Actualiza eso. Quería seleccionar este texto. ¿Y qué dice? Enlaces Rápidos. Entonces voy a copiar eso. Si bien se selecciona esta. Entra. Enlaces Rápidos. Estilo, tipografía blanca. Hagamos que sea font-weight 700, así como así. Ahora bien, fíjate que esto está espaciado. Entonces eso significa que esto es de ancho completo. Primero que nada hagamos el contenedor exterior de ancho completo. Ahora es de ancho completo. Pero ahora también tenemos el contenedor interior que los sostiene a todos. También necesita ser de ancho completo. Pero necesitábamos ser del 90%. Entonces va todo el camino hasta aquí. Pongámoslo en el medio, seleccionando el contenedor exterior. Pongamos todo en el centro, así como así. Seleccione este logotipo. Vamos a conocer el ancho de las baldosas. Vamos a empujarlo, puede ser de hasta 30%. Y vamos a alinearlo a la izquierda. Así. Seleccionemos la lista de iconos que entra aquí. Puede cambiar eso para verificar, verificar, insertar. Uno sobre las clases en el ítem, digamos contacto. También ha cambiado los íconos. Cheque. Cambiemos estos para verificar. Por último, éste para comprobar. Insertar. En. Ahí vamos. Así que hagámoslo antes de duplicarlo, mientras aún esté seleccionado, entremos en el icono de estilo. Cambiémoslo a verde oscuro. ¿Todavía tengo ese verde? No. Déjame seleccionarlo desde aquí. Contenido. Facebook copia eso. Seleccione estos iconos de estilo. Necesitamos que sea verde así al flotar, necesitamos que sea blanco. Entonces para el texto, tipografía, el color necesita ser de color blanco. Y en hover necesita ser de color verde. Así como así. Duplicemos la lista de iconos. Suprimir eso. Y ahora para esto, cambiemos los artículos a privacidad, política, términos de servicio, y tal vez licencia. Vamos a cerrar eso. Actualización. Vamos a previsualizar los cambios. Y eso es lo que tenemos. Entonces ahora fíjense aquí que tenemos algo más de espaciamiento entre estos dos. Y tenemos estos formularios de inscripción, lo cual es muy importante. Volviendo aquí. Selecciona un contenedor que esté guardando todo aquí. Este contenedor avanzó. Rompamos estos acolchados aquí mismo. Y para el relleno que queda, ese es el espaciado desde el borde. Hagámoslo tal vez 50, o hagamos que sea una quinta parte de saber, 100, 100. Actualización. Vamos a previsualizar los cambios así como así. Pero ahora lo que tenemos que hacer es crear ese formulario de inscripción, y eso es lo que queremos hacer en la siguiente lección. Entonces te veré en breve. 18. Crear el formulario de inscripción: Hola, bienvenido de nuevo. Entonces ahora ya hemos creado la carpeta, pero lo que falta es el formulario de registro aquí mismo, la derecha aquí en el lado derecho de la foto. Entonces, ¿cómo hacemos eso? Necesitamos instalar un plugin de formulario. Hay varios plug-ins de formulario en el repositorio de plugins de WordPress, pero me encanta formar más tarde. Entonces tendremos que instalar por un minuto más o menos. Salgamos de aquí por ahora. Salida. Y la razón por la que me encanta formulador es porque nominador es muy poderoso y es gratis para que lo uses. Y algunas de las características más importantes que te proporciona de forma gratuita en realidad se pagan en otro plugin de forma. Entonces tienes que pagar por esas funciones cuando usas otros complementos de formulario. Usa el formulador y los obtienes gratis. Así que vamos dentro de Plugins y Add New. Y sólo voy a escribir cuatro minutos están aquí. Para terminador. El terminador. Y aquí estamos. Entonces es por WP MU Deb. Así instalado ahora. En este momento está instalado. Entonces vamos a activar. Y aquí vamos. Y es justo aquí están casi en la parte inferior del menú lateral. Entonces vayamos al formulador. Puedes hacer click para mí más tarde o ir directamente a formularios, pero quiero que vayamos al tablero del formulador. Entonces aquí estamos. Este es el hogar del plugin de cuatro monitores dentro de WordPress. Entonces como puedes ver, tenemos diferentes opciones. Podemos crear un formulario o una encuesta. Ahora mismo nos interesa una forma. Así que crea. Y tenemos plantillas aquí entre las que podemos elegir que ya están preconstruidas. Por lo que queremos una suscripción al boletín. Entonces, sigamos adelante y digamos que se suscriba al boletín, continúe. Regístrate. Sólo llamémoslo registrarse o bien. Entonces ahora está creada. Y ahora tenemos dos campos. Nombre, correo electrónico y luego un botón de suscripción. Y si quieres previsualizarlo, solo puedes decir vista previa. Entonces tenemos nombre, correo electrónico y suscribirse, FirstName, correo electrónico, suscribirse. Y podemos arrastrar y reorganizar estos campos. e.g. Podemos poner el miedo, podemos ponerlos lado a lado así en la vista previa gratuita de ellos. Ahora están uno al lado del otro. Entonces no quiero incluir el primer nombre, así que simplemente lo eliminaré. Y ahora nos quedamos con la dirección de correo electrónico. Así como así. Cierra eso abajo. Y ahora queremos darle a ese botón este color verde. Entonces déjame agarrar ese verde de este lado. Una vez más. Copia. Volviendo aquí. Quería entrar en apariencia. Y esta es una vista previa de los cambios que estás haciendo. Entonces si vas a plano, me gusta plano sin ese borde duro. También puede ir material audaz o ninguno. A mí me gusta ese piso. Y también puedes ajustar los colores, que es lo que queremos hacer. Así que haz clic en disfraz. Esto revela cada parte de una forma existente. Como puedes ver en la parte inferior, tenemos el botón Enviar. Si hago clic en eso, podemos cambiar su color haciendo clic en color de fondo. Selecciona eso, voy a pegar ese verde ahí dentro. Haga clic en el exterior. Entonces para los textos, Hagámoslo negro. Al pasar el cursor. Quiero que el botón sea blanco. Y en foco, quiero que sea blanco. Vamos a previsualizar eso. Al pasar el cursor. Bien, así sucesivamente hover, Hagamos que el texto sea blanco, negro. Desenfocado. El texto debe ser de color negro al pasar el cursor y también debe ser previsualización negra que así como así. Publicar. Y cuando probablemente la hoja, se nos da un código corto. Un código corto es básicamente un código minúsculo como este, y lo he copiado. Es un código diminuto que pegas en cualquier parte de tu sitio web. Y esta forma va a aparecer. Este diminuto código representa una forma. Estos 243 es el número o es el DNI del formulario. Si tienes como diez formando formas nativas, has creado cuatro páginas diferentes. A lo mejor la página de contacto tiene su propio formulario que tiene más campos. Podría tener un número diferente. Cada formulario tiene su propio número único para que cada código corto muestre una forma diferente. Entonces déjame copiar eso. El acceso directo se ha copiado correctamente. Cierra eso. Ahora, volviendo al interior de nuestro tablero, quiero abrir nuestro pie de página. Entonces portal de fitness, vamos al interior del tablero. Todavía tengo esta página abierta, pero estoy abriendo el dashboard en una pestaña diferente para que podamos ir dentro de elementos kids, header, footer, editar con Elementor. Y ahora en este contenedor queremos dejar caer un elemento de código corto, elemento de código corto. Así que vamos a arrastrarlo y soltarlo ahí. Y esto es sólo básicamente un campo para ingresar a nuestros códigos cortos. Así que vamos a pegar eso ahí dentro. Y ahora, como puedes ver, el formulario aparece ahora en nuestra carpeta. Si arrastramos estos elementos de código corto a cualquier otra parte, el formulario aparecerá en esa parte. Así que actualice eso. Y vamos a previsualizar los cambios. Y ahí vamos. Entonces este formulario de edición es solo un enlace a nuestro editor. Si hago clic, se redirigirá al dashboard Para continuar editándolo. Pero cuando no lo estás editando, si eres un visitante o un cliente de su sitio web, no los verás. Solo el Administrador puede verlos porque están editando activamente el sitio web. Muy bien, entonces ahí vamos. Ahí está nuestro pie de página. Ahora, si vamos dentro del tablero, las páginas del tablero, todas las páginas. Y veamos la página de inicio. Desplazamiento hacia abajo. Ahí vamos. Nuestra carpeta ya está lista. Pero una cosa que quiero hacer es aumentar el margen entre los testimonios y el pie de página porque necesitamos un buen espaciado ahí. Entonces mientras estamos aquí en la página, podemos ir a Editar con Elementor. Podemos hacer clic en encabezado para editar la carpeta de encabezado para editar la carpeta. O simplemente haz clic en editar con Elementor para editar el contenido de la página en sí. Entonces ahora estamos editando la página. Vamos a desplazarnos hasta el fondo. Seleccione el contenedor de testimonios avanzado para el margen inferior. Vamos a darle 100. Actualiza eso. Y vamos a previsualizar los cambios. Desplazarse hasta la parte inferior. Aún no tenemos suficiente espaciado. Entonces mientras todavía está seleccionado, vamos a darle uno. Actualiza eso y vamos a previsualizar los cambios. Desplazamiento hacia abajo. Sí, así que ahora tenemos esos 150. A lo mejor le podemos dar 200. Digamos 250. Actualiza eso. Vamos a previsualizar los cambios. Desplazarse hasta la parte inferior. Sí, así que ahora eso es un buen espaciamiento entre los dos. Y fíjense que necesitamos un poco más de espaciado aquí. Entonces volviendo a nuestra carpeta, selecciona estos dos. Si seleccionamos el contenedor que contiene estos dos y entramos aquí, tenemos contenido justificado. Podemos centrar el contenido. Podemos justificar desde Inicio, que es lo que teníamos originalmente. Podemos empujarlos hasta el final. Podemos tener espacio entre así. Podemos tener espacio alrededor o podemos espaciar incluso. Entonces creo que el espacio se ve bien de manera uniforme. Pero ahora esto está desalineado con el rumbo. Entonces otra cosa que podemos hacer es simplemente hacer que estos comiencen desde el principio y seleccionar este elemento en sí Avanzado. Vamos al margen, margen izquierdo. Hagámoslo 20, o hagamos 50. Hasta ese punto. Actualiza eso. Vamos a previsualizar los cambios. Ahí vamos. Así que ahora si vamos a nuestra página y la actualizamos, desplazándonos todo el camino hasta la parte inferior. Ahora tenemos un buen espaciado. También tenemos nuestro registro para y todo eso. Recuerda que también podemos hacer de este logo un enlace. Así que volviendo al interior de nuestro editor, si seleccionamos esta imagen, podemos convertirla en un enlace, tal vez una URL personalizada. Y ahora tal vez puedas decir tu sitio web.com, Esa es la página principal. Y si quieres que este enlace se abra en una nueva pestaña, haz clic en esta rueda dentada y selecciona Abrir en una nueva ventana. Vista previa de los cambios. Si ahora hacemos clic en esto, se abrirá en una nueva pestaña. Pero claro que ese sitio web no existe. Su sitio web.com. Aquí es donde nos lleva a hospedar. Estos son vendedores de dominios. Entonces básicamente así es como construir tu landing page. Ya casi terminamos. En las próximas lecciones que vienen, vamos a hacer que esta página de destino receptiva en teléfonos inteligentes y tabletas porque ya se ve increíble en el escritorio. Espero que hayan disfrutado de la clase. Si lo eres, este es un buen momento para tomarte un minuto y dejar una reseña. Deja que otros alumnos sepan lo que piensas de la clase. ¿Cómo te has beneficiado de ello? ¿Qué te gusta de la clase? ¿Eso va a ser de mucha ayuda? Ahora, volvamos al trabajo. Nos vemos en la siguiente lección. 19. Hacer que la barra se pegue: Entonces ahora mismo queremos trabajar en la barra de navegación. Queremos hacer alguna mejora. Y para ser más específicos, queremos que quede pegajoso en la parte superior. Te darás cuenta ahora mismo si empezamos a desplazarnos, la barra de navegación desaparece. Y si quieres acceder a otras páginas del sitio web, tendremos que desplazarte hacia arriba para acceder al menú. Eso no es muy fácil de usar y nuestro objetivo es hacer que el sitio web sea lo más fácil de usar posible. Así que vayamos dentro de nuestro tablero de instrumentos. Y quiero entrar en Plugins, Add New, porque queremos agregar un plugin que nos permita hacer que la barra de navegación sea pegajosa en la parte superior. Entonces aquí, vamos a escribir sticky. Espero que traiga eso. Oh, sí. Entonces son efectos de encabezado pegajosos para Elementor. Así que al igual que los elementos, calor, efectos de encabezado pegajoso para Elementor es otro complemento creado como complemento para Elementor. Así que vamos a instalarlo ahora. Activar. Y ahí vamos. Y parece que necesito actualizar los elementos, obtener luz. Déjame hacer clic en Actualizar. Ahora. Siempre es bueno mantener tus plugins actualizados. Bien, así que ahora que tenemos instalados los efectos de encabezado pegajosos, volvamos a la página. Y ahora quiero pasar el cursor sobre editar con Elementor. Pero como queremos editar el encabezado, voy a hacer clic en encabezado. Y aquí estamos. Entonces, antes que nada, permítame cerrar estos navegantes. Y ahora, bueno se selecciona este contenedor. Quiero ir a Diseño de colapso avanzado y expandir los efectos de encabezado pegajoso habilitados. Actualicemos eso. Revisemos los cambios. Bien, entonces lo que estamos previsualizando es la barra de navegación. Pero lo que queremos ver es un efecto pegajoso en acción. Así que déjame hacer clic en casa para ir a la página de destino. Pero ahora ya hemos hecho pegajosa la barra de navegación. Entonces comencemos a desplazarnos. Y ahora notarás que queda en la parte superior incluso mientras nos desplazamos. Por lo que todavía tenemos acceso al menú sin importar en qué parte del sitio web se encuentre. Pero hay un pequeño problema. Observe si nos desplazamos a algún texto aquí, por ejemplo , estos textos, no podemos leer el menú porque hay algunos textos en el fondo. Entonces, ¿qué hacemos para que podamos introducir un trasfondo sobre la barra de navegación Así que volviendo al editor, notarás que tenemos ajustes aquí abajo bajo el efecto de encabezado pegajoso. Así que desplazándose hacia abajo. Color de fondo, elige a qué color cambiar el fondo después de desplazarte. Así que voy, lo encenderé y luego lo cambiaré a negro. Actualicemos eso. Vamos a previsualizar los cambios. Como de costumbre, vamos a ir a la página de inicio para que podamos desplazarnos a Ahora, si empezamos a desplazarnos, notarás que el fondo en el menú es negro. Y eso nos permite seguir leyendo el contenido del menú independientemente de lo que haya en segundo plano. Y así es como hacer que la barra de navegación sea pegajosa para permitir que el usuario acceda al menú sin importar en qué parte del sitio web se encuentre. Y esto les da una buena experiencia de usuario. Se trata de UI UX. En la siguiente lección, agreguemos algunos efectos de movimiento a los diferentes elementos que tenemos en la página. Entonces te veré en breve. 20. Agregar efectos de movimiento: Ya es el momento de agregar algunos de esos efectos de movimiento que vimos en el sitio web de referencia. Así que permítanme simplemente saltar al sitio web de referencia. Notarás que diferentes elementos están animados y que solo básicamente agregan algunos efectos geniales al sitio web y hacen que el sitio web sea más memorable. Así como así. Entonces alguna entrada dramática de los diferentes elementos que tenemos. Entonces veamos cómo hacer eso. Entonces volviendo a nuestro editor, ahora, esta es la página que estamos creando. Iré a Editar con Elementor y haré clic en eso. Para que podamos comenzar a editar los elementos en la página. Y aquí estamos. Entonces la página ahora es editable. Entonces lo primero que tenemos que hacer es seleccionar el contenedor que está sosteniendo el textContent junto con los botones. Este contenedor aquí entra en el diseño de Colapso Avanzado. Y tenemos efectos de movimiento. Tenemos varios. Entonces haz clic en este menú desplegable. Por ejemplo, en el sitio web de referencia, tengo rebotando a la izquierda. Sobre esto. Por supuesto, puedo usar rebotar bien. Vaya, selecciónelo. Entra en Diseño de Contraer Avanzado , expandir Efectos de movimiento, menú desplegable, equilibrio, derechos. Así como así. Actualización. Vamos a previsualizar los cambios. Y ahí vamos. Así que ahora básicamente solo usaremos diferentes efectos sobre los diferentes elementos de esta página y podrás conseguir lo más creativo que quieras. Así que volviendo aquí, vamos a ver. Incluso puedes animarlos si quieres, pero yo solo saltaré eso. Depende de ti. Permítanme seleccionar el contenedor que contiene esta imagen. Va a decir Diseño de colapso avanzado. Una vez más, los efectos de movimiento. Digamos que estoy haciendo zoom a la izquierda o a la derecha. Seleccionemos este contenedor externo Avanzado. Veré acertar el zoom. Actualiza eso. Vamos a previsualizar los cambios. Primero, la sección de héroes, desplazándose hacia abajo. Como has visto, se han acercado izquierda y derecha como los hemos establecido. Entonces básicamente solo sigue adelante y haz el resto de los efectos de movimiento. Agrega el resto de los efectos de movimiento. Cada elemento que le añadas puede tener un efecto de movimiento. Así que ponte creativo. Veamos qué se te ocurrirá. Y antes de terminar esta lección, acabo de recordar, no te mostré cómo configurar la página principal. Y es muy crucial porque quieres que el dominio roots tenga dos puntos a tu página de inicio para que no sea tu root domain.com slash home. Es solo tu dominio raíz.com para que si es fitness.com, apunte a esta página de inicio. No es fitness.com slash home fitness.com. Entonces, ¿cómo configuramos eso? ¿Volviendo al interior de nuestro tablero? Voy a entrar en Ajustes, Lectura. Y aquí tenemos tus pantallas de inicio, y luego tenemos opciones. Así que elige una página estática y para la página principal, selecciona Inicio guardar cambios. Y ahora si hago clic con el botón derecho en esto y abro enlace en nueva pestaña, si vamos a eso, te das cuenta ahora que estamos en la página principal y es el dominio raíz. Y básicamente así es como agregar los efectos de movimiento y configurar la página principal. En la siguiente lección, veamos cómo hacer que la landing page receptiva en tabletas y teléfonos móviles. Te veré en breve. 21. Encabezado sensible: Entonces en este momento queremos que este sitio web sea receptivo, o más bien nuestra landing page responsive. Y queremos comenzar con el encabezado, decir, el Napa. Veamos cómo hacer que la barra de navegación sea receptiva. Entonces, antes que nada, déjame cerrar todas estas pestañas que habíamos abierto. Y ahora nos quedamos con una landing page. Así que déjame pasar el cursor sobre esto y luego hacer clic en encabezado. Porque estamos trabajando en el encabezado. Ahora queremos que sea receptivo. Así que voy a seguir adelante y hacer clic en este botón de modo responsivo. Y eso mostrará estos ajustes aquí arriba. Y lo que realmente nos interesa, estos tres iconos de aquí, como se puede decir, este es el escritorio. La landing page ya se ve bien en el escritorio. Así que vamos a trabajar en la versión tablet haciendo clic en que yo desde ahí arriba. Y ahora aquí estamos. Por lo que de inmediato cambiamos al modo tablet. Notarás que el menú ha desaparecido y eso es porque se ha cambiado a un menú de hamburguesas. Si coloco el cursor por aquí hay un menú de hamburguesas y por defecto, en su estado inactivo, es negro y al pasar el cursor es azul. Para que podamos cambiarlo a nuestro verde. Entonces lo que quiero hacer es seleccionar el propio menú. Entra al estilo porque queremos cambiar el estilo del menú de las hamburguesas. Vamos a colapsar el envoltorio del menú y abrir el estilo hamburguesa. Y vamos al tipo de fondo. Vamos a cambiar. Quiero pegar en el color verde aquí. Así como así. Voy a hacer clic en cualquier parte de aquí para deshacerme de eso. Y realmente no necesitamos cambiar toda la configuración del pájaro porque cuando estás usando una tableta, no pasas el dedo sobre tu tableta para hacer clic en algo, solo tocas. Entonces los efectos hover realmente no tendrán ningún efecto. Ahora, cuando ampliemos este menú haciendo clic en él, aparecerá el menú lateral. Entonces tenemos que cambiar este trasfondo. Entonces yendo dentro del envoltorio de menú, que es el primer elemento, tipo de fondo, cambiemos eso a negro. Ahora por supuesto, es de color negro y hereda los colores que establecemos para el escritorio. Y creo que lo dejaré así. Pero ahora también tenemos estos iconos de toggle aquí. Podemos cambiar su color colapsando el envoltorio del menú. Al interior estilo hamburguesa. Si no me equivoco. Y aquí abajo hemos cerrado toggle. Así que desplazándonos hacia abajo tenemos el tipo de fondo. Selecciona el color aquí y pega ese verde ahí dentro. Y ahora es de color verde. Y creo que eso me gusta. Bueno, el menú aún está seleccionado. También podemos ir a la configuración del menú de contenido y móvil. Podemos agregar logo aquí. Seleccione eso, seleccione. Y ahora cuando toquemos este icono, sacará a colación el logo, pero se ve distorsionado. Así que yendo dentro de estilo, podemos ir dentro del logotipo del menú móvil y trabajar en el llanto 100% y batallado k También podemos trabajar en el margen. Vamos a expandir eso. Empújalo desde la izquierda. Así que margin-izquierda actualiza eso. Ahora vamos a previsualizar los cambios. Ahora, podemos usar las herramientas de desarrollo que vienen con cada navegador para imitar diferentes dispositivos. Entonces, si hago clic en mi turno de control de Chrome, yo, sacará a colación las DevTools de Chrome. Y si haces clic aquí en este ícono de modo responsivo, podemos alternar entre diferentes dispositivos. Entonces ahora mismo este es el píxel cinco. Si haces clic en el menú desplegable, tenemos diferentes dispositivos aquí porque estamos trabajando en la versión tablet. Hagamos clic en iPad Air. Y así se ve en un iPad Air. Así que volviendo aquí, queremos que el logo sea un poco más grande. Y lo que queremos hacer es trabajar con porcentajes de estos contenedores que sostienen el logo y el menú, seleccionando el propio logo. Cambiemos estas unidades a porcentajes. Y también seleccionemos estos contenedores que están sosteniendo el menú y cambiemos eso a porcentaje. Y ahora hagamos que estos puedan ser del 20%. Y creo que ahí es una buena actualización de tamaño. Ahora bien, si tenemos una vista previa de los cambios, creo que ese es un tamaño mejor que el que teníamos antes. Volviendo aquí, vamos a llegar a la versión móvil. Entonces haciendo clic en eso, ahora notarás que el logo y el menú están apilados, pero los queremos lado a lado. Entonces ahora mismo es solo jugar con los porcentajes. Podemos darle al logo tal vez el 50% del ancho de ese contenedor exterior. Y claro, le da a estos otros contenedores el 50 por ciento. ¿Y qué pasa con el 149 por ciento? Creo que a lo mejor vamos a darle el logo 30%. Y esto deja darle 70%. Redujamos el porcentaje hasta algún lugar ahí. Actualiza eso. Y vamos a previsualizar los cambios. Y cambiemos a cualquier celular que queramos aquí, tal vez el pixel cinco. Así se ve en un píxel cinco. Echemos un vistazo al iPhone Pro, iPhone 12s pro. Así se ve en un iPhone 12. Ampliamos eso. Así es como se ve. Estos son iconos de configuración. El logotipo es visible en un teléfono real. Y básicamente hemos terminado con la configuración del modo responsive para el encabezado. En la siguiente lección, veamos cómo hacer que el cuerpo principal de la landing page sea receptivo. Entonces te veré en breve. 22. Secciones receptivas de los cuerpos: Entonces ahora mismo acabamos de terminar de trabajar en la capacidad de respuesta del encabezado o la barra de navegación, y ya terminamos con eso. A continuación, queremos trabajar en la capacidad de respuesta del propio cuerpo. Entonces si entro al menú y hago clic en casa para que podamos, así abrimos la página principal. Así es como se ve actualmente antes de que hagamos algo. Entonces, como pueden ver, realidad no tenemos mucho trabajo que hacer en la página. De hecho va a tomar sólo unos minutos. Así que déjame alejarme de la configuración del modo de respuesta y cerrar las herramientas de desarrollo. Ahora vamos a Editar con Elementor. Ahora estamos editando la página así como así. Así que déjame entrar aquí donde estábamos editando el encabezado y en realidad solo cerrarlo. Entonces nos quedamos con esto. Y luego como siempre, haz clic aquí arriba en el icono del modo de respuesta. Y cambiemos al modo tablet. Entonces así es como se ve en la tableta. Empecemos por seleccionar el contenedor que contiene el bloque de texto y la imagen. Y creo que esto es todo. No puedo seleccionarlo. Entonces iré a Control I para que aparezca el navegante. Y ahora este contenedor de aquí es el contenedor de la sección héroe superior. Y dentro de él, tiene el contenedor que estamos buscando. Este contenedor. Y dentro de ese contenedor tenemos los dos contenedores. Éste sostiene el bloque de texto y éste sostiene la imagen. Así que selecciona este contenedor. Ahora está seleccionado. Vamos adentro avanzado. Rompamos antes nada este margen para empujarlo hacia abajo eso. Y permítanme seleccionar estos textos. Y vamos a reducir el tamaño entrando dentro de la tipografía de estilo. Creo que esa es una buena talla. Para los botones. Creo que podemos tenerlos apilados uno encima del otro. Entonces seleccionaré el contenedor sujetando los botones. Entonces para la dirección, voy a cambiar a columna vertical, así. Y luego vamos a alinearlos al inicio. Al inicio. Así como así. Actualización. Ahora, tenemos, creo que tenemos demasiado margen o relleno alrededor de este contenedor interior. Entonces seleccionándolo. ¿Cuáles son los ajustes aquí? Sobre el contenedor exterior? ¿Peso? Tenemos que seleccionar esto. Y en la maquetación. Hagámoslo al 100%, al 100% no batir las células. Creo que esa es una buena talla. 90%. Actualiza eso. Y me gusta así. Pero claro, si quieres agrandar la imagen, también puedes decidir hacerlas pilas en lugar de tenerlas una al lado de la otra. Para que pueda seleccionar este contenedor exterior que contiene el contenedor de imagen y el contenedor de textos. Y para la dirección, cámbiate a eso. A continuación, seleccione este contenedor. Cambia al 100%, al 100% así. Y para la imagen, también, cambia eso a porcentaje, 100% así. Entonces, se trata de lo creativo que quieres obtener y diferentes personas tendrán diferentes configuraciones para sus landing pages. Creo que ya se ve bien. Pero claro, si quieres hacer cambios en él, solo puedes seleccionar el propio editor de texto. Ir al estilo. Por ejemplo, quiero editar la topografía, altura de línea. Piensan que están demasiado cerca el uno del otro. Así. Creo que esto ya se ve bien, pero podemos reducir el tamaño de esta rúbrica. Tipografía de estilo. Vamos a reducirlo a tal vez 45. Y todo lo demás se ve bien. Al entrar aquí. También puede seleccionar esta tipografía de estilo en el tamaño de texto 45, como la otra. Y porque está demasiado cerca del borde, voy a, seleccionaré el contenedor exterior. Acolchado avanzado. Por la izquierda. Eso es lo correcto. Podemos darle 20. Y para la izquierda, 20. Así que eso empujará todo hacia adentro desde el borde. Creo que esto se ve bien también. Se puede seleccionar este estilo tipografía. La talla 45 está bien. También podemos trabajar en el relleno como lo hemos hecho con este otro. Ahora. Aquí la solución es muy sencilla. Simplemente vamos dentro cada contenedor de servicio como este servicio, y apilar todo de arriba a abajo así. Y luego seleccionemos el texto aquí. Alinear el centro, descripción, estilo, centro de alineación. Repitamos lo mismo para estos otros servicios. Entonces aquí hay una dirección del contenedor, arriba a abajo, centro, centro alineado. Seleccione la dirección de servicio. Casi terminado. Dirección de arriba a abajo, centro, centro de estilo. Y finalmente, dirección de arriba a abajo, centro, centro. Impresionante. Y ahora este texto también está demasiado cerca de los bordes. Así que volviendo aquí, selecciona el contenedor que está conteniendo todo avanzado. Y vamos a cambiar el acolchado a la izquierda y a la derecha. Entonces ahora tenemos un buen espaciado ahí. Bueno, también podemos reducir el tamaño de este rubro. 245 para uniformidad. Testimonios, 45 también. Seleccione un contenedor que los esté sujetando. Acolchado avanzado para cualquier izquierda, 20, ¿verdad? Eso se ve bien. Y básicamente eso es todo. Oh, podemos seleccionar esta cabecera de sección de héroe y también ponerla en el centro. Así como así. Después el centro de estilo de texto. Y también podemos seleccionar los botones, contenedor y empujar todo al centro, alinear elementos al centro, así. Actualización. Y vamos a previsualizar los cambios. Entonces ahora Control Shift. Entonces le dije esto. Cambiemos al iPad Air, y así es como se ve en un iPad Air. Piensa que todo se ve increíble. Si cambiamos a un teléfono móvil. Vamos a la más. Vamos al iPhone 12. Creo que ya creo que ya se ve bien aunque no lo hayamos tocado. Y te lo dejaré a ti para que puedas hacer cualquier cambio o mejora que consideres necesario para la versión móvil. Pero creo que ya se ve bien. Se heredó la configuración que hemos establecido para la tableta. Entonces claro ahora si nos desplazamos hasta la carpeta, notarás que tenemos alguna desalineación, y eso es en lo que estaremos trabajando en la siguiente lección. Entonces te veré en breve. 23. Pie de pie sensible: Ahora mismo estamos justo aquí en la carpeta. Solo necesitamos hacer algunos ajustes y terminamos con un pie de página. Entonces, sin perder tiempo, alternemos este ícono aquí mismo, y cerremos las DevTools. Y luego, por supuesto, cursor sobre estos y haz clic en Carpeta para editar la comida en sí. Y aquí es donde estábamos editando los principales contenidos. Así que vamos a cerrar eso porque hemos guardado los cambios. Ahora bien, aquí es donde estamos editando la carpeta. Vuelva a hacer clic en el icono del modo de respuesta. Y cambiemos a tablet. La derecha del bate. Así es como se ve. Si seleccionamos este contenedor que contiene los enlaces rápidos y entramos en avanzado, notará que estamos heredando este relleno de 100 izquierdas del modo escritorio. Así como así. Así que volviendo al interior de la tableta, vamos a romper estos acaparamientos. Eso restablece todo y podemos establecer los valores que queramos para la versión tablet. Pero si volvemos al modo escritorio, todavía tiene sus cien. Así que volvamos al interior de la tableta. Entonces veamos qué podemos hacer aquí. Si selecciono este contenedor que está sujetando los enlaces y voy a la dirección y hago que todo comience desde el principio. Teníamos algo de relleno o margen en esto. Entonces seleccionando eso avanzado, Sí, teníamos margen izquierdo de 50. Si eliminamos eso, tenemos esos dos conjuntos de enlaces. Creo que ahora se ve mucho mejor. En realidad. Si selecciono el logotipo en sí, entrar, estilo, puede aumentar el ancho hasta ese punto de actualización. Y vamos a previsualizar los cambios. Por supuesto que tenemos que controlar Shift I y luego alternar esto. Así es como se ve en los teléfonos móviles. Pero ¿qué pasa con el iPad Air? Así se ve en el iPad Air, creo que ya se ve bien. Cambiemos al iPhone Pro. Creo que también se ve increíble en pantallas de iPhone o móviles. Así que en realidad no necesitamos hacer ningún cambio en lo que a mí respecta. Pero por si acaso quieres hacer cambios a la versión móvil, todo lo que necesitas hacer es hacer clic en este icono aquí. Y por ejemplo si quieres centralizar todo. Así que vamos a seleccionar esta imagen. Contenido, alinéelo al centro. Seleccione este estilo de texto, alinéelo al centro. Seleccione este contenedor aquí. Maquetación. Alineemos todo al centro. Este también es otro contenedor. Alinea todo al centro. Seleccione este contenedor aquí. Alinea todo al centro. Y ahora tienes un escenario diferente. Pero voy a entrar en esta historia y volver a donde estuvimos hace un momento. Creo que estaba ahí mismo. A mí me gusta esa ambientación. Aquí es donde puedes echar un vistazo a todos los movimientos que has realizado desde que empezaste a editar. Contenido en la página o en cualquier editor. Y como pueden ver, esto es lo más temprano, esto es la edición iniciada y este es el último cambio que hemos hecho. Podemos retroceder en el tiempo y restaurar la forma en que se veían las cosas hace un momento. Quería escuchar actualizar eso. Vamos a previsualizar los cambios. Y así es como se ve. Entonces claro, puedes hacer mucho más. Esto es solo un flujo de trabajo para que puedas comenzar. Cuanto más uses elemental, más creativo obtendrás, más descubrirás diferentes formas de lograr los mismos resultados. Así que depende de ti seguir practicando y mejorando y entendiendo cómo usar todas las características de esta increíble herramienta. Entonces, alejémonos de esta zona. Voy a pasar por encima de eso y cerrar eso. Volviendo a nuestro editor. De hecho, déjenme salir de aquí porque ahora estamos bien. O vamos a previsualizar los cambios y luego hacer clic en Inicio. Bueno, déjame simplemente quitarlo e ir a la página principal Control Shift. Conmuevo eso para que podamos echarle un vistazo de arriba a abajo. En primer lugar, antes de desplazarnos, es abrir el menú. Así es como se ve. Escapar. Desplázate hacia abajo. Y ahí vamos. Entonces, cambiemos al modo tablet, iPad Air. Así se ve la comida en el iPad. Desplazamiento hacia arriba. Ahora saliendo de ahí para mirarlo desde la versión de escritorio. Entonces básicamente así es como construir esta landing page, como se mencionó hacia la clase, mi intención era mostrarte cómo usar los contenedores para construir una hermosa landing page. Los contenedores son la nueva forma de construir páginas web usando Elementor. Siempre puedes usar el flujo de trabajo de secciones y columnas que he estado enseñando en todas mis clases elementales anteriores, que puedes consultar visitando mi perfil. Ahora, antes de concluir las cosas, tengo algunos consejos más importantes que quiero compartir con ustedes. Y entonces lo llamamos envoltura. Entonces te veré en el outro. 24. 24 pensamientos finales: Enhorabuena, finalmente has llegado al final de la clase, lo que significa que terminas de construir tu landing page. Solo quiero tomarme un momento y agradecerles por acompañarme en este curso sobre la construcción de landing pages con Elementor. Y sinceramente espero que hayas encontrado el contenido útil e informativo y que hayas adquirido valiosas habilidades que puedas aplicar a tus propios proyectos de desarrollo web. Ahora que has aprendido a construir una hermosa landing page con Elementor y por extensión, hermoso sitio web con Elementor. Es importante que te asegures de que sea compatible con SEO. Hay varias cosas que debes hacer para que tus páginas de destino y sitios web sean visibles para los motores de búsqueda porque así es como te descubren. ejemplo, debes haberte dado cuenta cuando estábamos subiendo imágenes de nuestra computadora a la mediateca de WordPress, teníamos rellenos de texto que no nos molestamos en llenar. Pero estos campos de textos son muy cruciales para tu SEO. Debes proporcionar detalles como el texto alt para que las imágenes sean más accesibles, haciendo que la página sea más amigable con el SEO. Otro ejemplo es que usamos encabezados en nuestra landing page, pero no establecimos una jerarquía para ellos. Partiendo de uno todo el camino a H6. Es muy importante que entiendas cómo usar los encabezados manera jerárquica para una mejor estructura de página, lo que mejora tu SEO. Y esto es solo la punta del iceberg cuando se trata de las acciones y pasos necesarios para la visibilidad en buscadores. Si estás interesado en aprender más sobre WordPress SEO, tengo una clase completa paso a paso disponible para ti en mi perfil aquí mismo. Y te recomiendo encarecidamente que lo tomes inmediatamente después de esta clase para que puedas entender las cosas que debes hacer en tus futuros sitios web para hacerlos más visibles. Y por último, si encontraras útil esta clase, agradecería mucho tus comentarios. Por favor, tómate un minuto para dejar una reseña sobre la clase para ayudar a otros futuros estudiantes a saber qué esperar de mí y también me ayudaron a mejorar mis clases futuras. ¿Qué te gustó de la clase? ¿Cómo son las lecciones? ¿Estaba el profesor atractivo? Para dejar tu opinión, simplemente haz clic en la pestaña Revisar debajo de este reproductor de video, y te llevará menos de un minuto hacerlo. Una vez más, gracias por tomar la clase y espero verte en mis otros elementos de clases muy pronto. Hasta la próxima vez. Que tengas una buena pieza.