Aprende Elementor y WordPress al diseñar una página de destino

1. Introducción a la clase: Bienvenido de nuevo a otra clase elemental impresionante conmigo puede Besser, ya sabes, como de costumbre, mi trabajo es mostrarte cómo diseñar hermosas páginas de aterrizaje. Y todos vienen con una clase muy especial llamada diseño, una página de aterrizaje de podcast con Elementor. Entonces si tienes un podcast o estás planeando iniciar un podcast y te gustaría saber cómo diseñar un hermoso landing pages para ello. Esta clase es para ti. Aunque no quieras iniciar un podcast o no posees un podcast, pero aún así te gustaría aprender a diseñar hermosas páginas de aterrizaje usando Elementor. Esta clase es para ti. Ahora no hay prerrequisitos para estas clases. Entonces si nunca has usado Elementor, esto está bien. Te mostraré todo lo que necesitas saber como principiante y a medida que te acostumbras a usar Elementor, llegarás a aprender a usar el resto de las herramientas. Por lo que ahora mismo nos centramos en ayudarte a entender las herramientas y características más importantes en Elementor son algunos de los temas que cubriremos en esta clase incluyen cómo agregar y diseñar títulos, párrafos, botones, imágenes , y otros efectos especiales a través de sus páginas de destino. Cómo crear formularios de inscripción para recopilar datos de usuario. Cómo crear menús pegajosos que cuando las personas se desplazan, el Menú Principal se queda en la parte superior de la página. Cargas estará buscando un diseño responsive. Haremos trabajo para que una página de aterrizaje se vea increíble en smartphones, tabletas y computadoras de escritorio. Mirando cómo extender las características elementales con sorprendentes plugins de terceros. Por lo que algunas de las características que faltan en elemental misma podrán extender Elementor mediante el uso de plugins de terceros. Entonces si estás listo y emocionado de empezar a aprender a diseñar hermosas páginas de aterrizaje con Elementor. Estoy muy emocionado de mostrarte eso a ti sin más tiempo de Western. Vamos a saltar justo dentro. Correcto. 2. Descripción de la página de aterrizaje: Entonces a medida que nos preparamos para empezar, creo que sería crucial para nosotros echar un vistazo rápido a los resultados que deberíamos estar esperando. Por lo que ya abrí la página de aterrizaje o diseñando hoy. Y aquí está, tenemos una barra de navegación bonita por aquí. Bastante simple. El logo a la izquierda y el menú a la derecha. Y este menú aquí tiene un botón, y te mostraré cómo agregar ese botón a tu barra de navegación por si quieres que destaque. Te mostraré cómo hacer eso. Después veremos cómo crear estas líneas de pincel onduladas, efectos especiales ahí había landing page. A continuación tenemos la sección de héroes. Bastante simple. Dos columnas. La columna que tiene la imagen del héroe y la columna que tiene un bloque de texto y estos logotipos de pareja aquí mismo. A continuación tenemos otra columna doble, tiene un elemento de imagen y este bloque de texto con un botón justo aquí. Y ya veremos cómo hacerlo. Entonces aquí tenemos la sección de episodios. Estos son básicamente post y te mostraré cómo crear los episodios como post. Y cuando alguien haga clic, escucha, ahora serán redirigidos a la página que tiene estos episodios. Y ahí encontrarán un jugador. Y pueden hacer clic aquí y cargar más episodios. Habrá redirigido a la página que tiene todos los demás episodios o más episodios. Después tenemos otra sección de doble columna con un área de imagen y un bloque de texto a la derecha. Entonces tenemos esta sección aquí mismo que tiene un formulario de captura de datos. Algunos de los elementos principales que necesitas para agregar tu página de destino para hacerla más efectiva incluyen cosas como formularios. Los formularios son importantes porque te ayudan a capturar datos de clientes o datos de usuarios y sus datos que son importantes para ti porque te ayudan a entender cómo se está desempeñando tu sitio web y te permite estar en contacto con el personas que te han enviado sus correos electrónicos. Y tenemos un pie de página muy sencillo con un logotipo, la barra de navegación aquí mismo en medio, algún texto de copyright. Después tenemos estos iconos de redes sociales. Esto es básicamente lo que estamos construyendo. Lo más importante aquí mismo para entender es cómo utilizar estas herramientas gratuitas proporcionadas por Elementor y otros plugins relacionados con los elementales para llegar a una bonita página de aterrizaje moderna para tu podcast. Y estas habilidades, también puedes ser capaz de diseñar más sitios web, más páginas de aterrizaje para cualquier otro propósito, no solo necesariamente podcasts. Vamos a empezar a diseñar. Y por supuesto empezaremos con la barra de navegación, esta sección aquí mismo. Entonces saltemos al tablero y nos vemos en la siguiente lección. 3. Actualización rápida: el nuevo asistente de configuración de elementos: Bienvenido de nuevo. Ahora, esta lección es una nota lateral rápida o una rápida actualización del proceso de instalación de Elementor. Si estás tomando esta clase en mayo de 2022 y más allá, notarás que la activación de Elementor ahora tiene un asistente de configuración que se compone de varios pasos que tienes que seguir para configurar las partes básicas de su sitio web. Mientras creaba esta clase hace varios meses, Elementor no tenía ese asistente de configuración. Entonces solo quiero que pasemos por ese asistente de configuración. Pero todo lo demás que estás aprendiendo en esta clase no cambia. Sigue siendo el mismo proceso en todo momento. La única adición es el asistente de configuración. Entonces como pueden ver en este momento, tengo una instalación completamente nueva de WordPress y estamos en la Versión 6. Y lo que quiero hacer es ir a Plugins, Agregar Nuevo. Para que podamos agregar Elementor y pasar por ese proceso. Buscaré la instalación de Elementor ahora. Y ahora cuando haga clic en Activar será redirigido a ese asistente de configuración. Y podemos atravesarlo juntos. Entonces aquí estamos. Simplemente alejaré un poco para que podamos ver más detalles. De acuerdo, así que ahora notarás que lo primero que elemental quiere que hagamos ahora es crear una cuenta para sacar el máximo provecho de Elementor. Por lo que estos son algunos de los beneficios por apuntarse a una cuenta con Elementor. Pero la cosa es que no es necesario tener una cuenta con Elementor para usar Elementor. Entonces sólo voy a seguir adelante y saltarme esta parte. El segundo paso es aceptar, continuar con el tema hallow que Elementor ha hecho para nosotros. Esto lo hace Elementor, pero estamos usando el Tema Astra, así que solo seguimos adelante y saltamos. Astra es un tema más poderoso. El tercer paso es dar nombre a nuestro sitio web. Mientras estabas instalando tu WordPress. Le diste un nombre al sitio web. Ese es el nombre que se mostrará aquí. Pero esto nos da la oportunidad de cambiar el nombre por cualquier otro nombre que queramos. Mi sitio web, y luego hagamos clic en Siguiente. Y si tienes un logo para tu sitio web y quieres agregarlo ahora mismo con anticipación. Simplemente puedes seguir adelante y abrir la mediateca y recogerla de la mediateca o cargarla desde tu computadora. Pero no vamos a hacer eso ahora mismo. Por lo que sólo me quedaré con este paso. Y claro que podemos agregar el logo más adelante y te mostraré cómo hacerlo. Hagamos clic en Skip. Y ahora llegamos al último paso donde tenemos dos opciones. Podemos empezar a editar nuestra página de inicio desde un lienzo en blanco con el editor Elementor. O podemos navegar desde cientos de plantillas o importar nuestras propias plantillas si las tenemos. Pero yo seguiré adelante y saltaré. Eso. Será redirigido al lienzo donde ahora podemos empezar a construir un sitio web. Y aquí vamos. Entonces básicamente eso es todo lo que quería mostrarte. Es una nueva actualización. No estaba ahí hace unos meses. Ahora, ya está ahí. Pero todo lo demás en las próximas lecciones sigue igual. El proceso sigue siendo el mismo para construir una landing page. Entonces sin perder más tiempo, Pasemos a la siguiente lección. Voy a ir a este menú de hamburguesas y hacer clic en Salir a Dashboard. Salgamos de esta página. Ahora estamos dentro del tablero y estamos listos para comenzar a construir el sitio web. 4. Instalación de los plugins necesarios: Bienvenido de nuevo. Entonces aquí estamos en el panel de WordPress. Ahora esta es una instalación totalmente nueva de WordPress que preparé específicamente para esta clase. Por lo que no tengo ningún plugins instalados en este momento por el momento. Entonces si solo pudiera hacer clic en plugins, notarás que no tenemos ningún plugins instalado. Lo primero que tenemos que hacer para crear la barra de navegación, para instalar algunos de los plug-ins estará usando, estaremos usando plugins para crear algunas de las cosas dentro de aquí. Eso es algo bueno de WordPress. Permite ampliar sus características y funcionalidades instalando plugins que pueden hacer mucho más de lo que WordPress puede. Wordpress en sí ya tiene herramientas para crear todas estas cosas. Pero los plug-ins hacen mucho más fácil el trabajo de crear páginas de destino porque proporcionan herramientas específicas que son fáciles de usar. Entonces lo primero que tenemos que hacer es instalar elementor y cualquier otro plug-ins estará usando a medida que construyamos una página. Entonces volvamos al tablero y dentro de los plugins, diré Añadir Nuevo, o también puedes hacer clic en Plugins, Añadir Nuevo. Por lo que iré a Agregar Nuevo. Y dentro de la barra de búsqueda, buscaré Elementor. Ahí lo tenemos. Instalaré elementor website builder by Elementor.com. Y me desplazaré hacia abajo y buscaré constructor de cabecera y pie de página de Elementor, y haga clic en Instalar. Ahora, este es un plugin que se crea. Por lo tanto ampliar las características y funcionalidades de Elementor. Y notarás que muchos otros plug-ins aquí cuando busques Elementor, comparte el nombre del elemento o algo así Elementor. Por lo que eso significa que estos son plugins que se crean para extender la funcionalidad que vienen con Elementor website builder. Antes de activar estos Elementor y Elementor header pie de página, también necesitamos un plugin más llamado efectos de encabezado pegajoso para Elementor. Entonces instala eso también. Por lo que esos son los tres plugins que estarán usando para crear nuestra barra de navegación Elementor. Entonces ahora que están instalados, vamos a entrar a la lista de plugins de instalación y activarlos todos juntos. Por lo que estamos dentro aquí haciendo clic en plugins instalados. Yo los seleccionaré a todos. Y entraré dentro de este menú desplegable y seleccionaré, Activar, luego aplicar. Por lo que ahora tenemos instalados los tres plugins. Ya estamos listos para construir nuestra barra de navegación. Entonces hagámoslo en la siguiente lección. 5. Instalación del tema de Astra WordPress: Y bienvenido de nuevo. Entonces lo siguiente que queremos hacer ahora que tenemos plugins instalados es instalar un tema. Entonces en este momento, lo que tenemos que hacer es ir dentro de los temas de apariencia. Y debido a que se trata de una instalación totalmente nueva de WordPress, por defecto, el tema 2021 está activo. Entonces tenemos los temas 2019 en 2020 los cuales son, que son opcionales y se puede activar cualquiera de ellos. Pero me gustaría añadir un tema de terceros llamado Astra. Astra es uno de los temas gratuitos más poderosos que hay en el mercado. Y es un tema de usos múltiples que puedes usar para construir cualquier tipo de sitio web que puedas imaginar. Digamos que quieres construir un sitio web de dentista, quieres construir un sitio web de la escuela, quieres construir un sitio web para un abogado. Astro te ayudará a hacer eso porque viene completamente lleno características y herramientas para ayudarte a construir sitios web sin problemas. Entonces tecleemos a Astra en la barra de búsqueda aquí mismo. Y es un primer resultado que sale justo aquí. Entonces digamos instalar. Muy bien, Así que ahora vamos a activarlo. Y ahora se puede ver que es el tema activo en este momento. Entonces ahora que tenemos el tema instalado y nuestros plugins están listos, Vamos a tener una visión general rápida del espacio de trabajo, el espacio de trabajo Elementor, mientras que estarás mirando cuando estés diseñando tu sitio web. Y lo haremos en la siguiente lección. 6. Descripción del espacio de trabajo elemento: Bienvenido de nuevo. Sigamos. Por lo que ya tenemos nuestro tema y algunos de los plug-ins que estarán usando ya están instalados. Así que vamos a tener una visión general rápida del espacio de trabajo a medida que construimos la barra de navegación. Por lo que dentro de la apariencia, bajaré al constructor de cabecera y pie de página Elementor. Y por supuesto, porque es una instalación totalmente nueva del constructor de encabezados y pies de página. Aquí no tenemos ningún encabezado o pies de página, pero una vez que empecemos a crear el nuestro propio, aquí se enumerarán. Así que digamos Agregar Nuevo. Y así vamos a darle un nombre, nav bar. Y notarás que tenemos todas estas opciones aquí mismo. Por lo que en el lado derecho tenemos esta configuración de plantilla bajo los atributos de posts. Así que cámbialo a Elementor ancho completo. Y luego una configuración astro. Estos son los ajustes que vienen con el tema. Queremos configurar la barra lateral para conocer la barra lateral, porque no queremos una barra lateral, ni barras laterales. Y queremos que el diseño del contenido sea barra inclinada de ancho completo. Entonces queremos desactivar algunas de estas secciones. No queremos el encabezado primario predeterminado que viene con Astra. Tampoco los queremos cabecera móvil que viene con Astra. Tampoco queremos el título ni el pie de página. Entonces, publiquemos eso por ahora. Muy bien, Ahora notarás que tenemos este tipo, tipo de opción de plantilla aquí, y tiene un menú desplegable. Por lo tanto, seleccione encabezado en el menú desplegable, y eso revelará más opciones. Visualiza en toda la página web si quieres que se muestre en partes particulares del sitio web o de todo el sitio web, o incluso en una sola página, tenemos todas esas opciones que vienen con este plugin. Por lo que uno es visible en todo el sitio web y roles de usuario. Entonces quién puede usarlo, quién puede tener acceso a la barra de navegación y quién puede editarlo por si acaso tienes otras personas trabajando en tu sitio web y eres el principal administrador en Wordpress. Se puede permitir, se puede establecer quién puede editar este encabezado y pie de página. Por lo tanto Seleccionar Todo. Y pongámoslo disponible para plantilla de Canvas. Y Canvas es una de las opciones debajo de los atributos de publicación. Recuerda hemos dicho estos dos Elementor de ancho completo. También contamos con lona elementor. Y a medida que te acostumbras a usar elemental, llegarás a entender qué son las plantillas. Pero por ahora, solo debes saber que si queremos obtener estos resultados en nuestra página, necesitamos trabajar con Elementor de ancho completo, y es decir, esta es prácticamente la plantilla que uso para casi todas las páginas web que creé. Ahora con esas opciones, sigamos adelante y hagamos clic en Actualizar. Y ahora estamos listos para editar con Elementor. Lo que estábamos haciendo en este momento era crear si solo pudiera volver a la apariencia, Elementor, constructor de encabezado y pie de página. Entonces lo que acabamos de crear es la barra de navegación aquí mismo también creará una carpeta, pero lo haremos más adelante. Entonces ahora mismo tenemos a la Napa. Y si hacemos clic en Editar volveremos dentro de aquí donde podamos, donde podemos configurar todos los ajustes. Pero para construirlo visualmente, para lucir así, en el front-end, necesitará ahora ir y editar con Elementor será redirigido al front end desde donde ahora podremos empezar a ensamblar todo el asunto. Y ahora esto nos da una gran oportunidad de tener una visión general del espacio de trabajo Elementor. Entonces aquí estamos en el espacio de trabajo Elementor. Aquí es donde haremos toda nuestra edición en el front end. Básicamente lo que estaremos haciendo es arrastrar cualquier elemento que necesitemos de estos paneles aquí mismo. Déjenme colapsar esto y aquello y aquello, y todos ellos. Por lo que todas estas pinturas aquí mismo contienen elementos y estos elementos se pueden arrastrar y soltar aquí dependiendo de lo que se quiera agregar. Entonces, por ejemplo, si queremos agregar, digamos por ejemplo, elegimos esa columna triple, ya ves que se ha generado. Entonces si quisiéramos agregar algo dentro ahí, le daríamos click a ese Plus. Y estos elementos aparecerán aquí y podemos arrastrar todo lo que queramos dentro de ahí. Si queremos agregar algo aquí, Vamos a hacer clic en el Plus y arrastrar un elemento de imagen allí. Y mientras la imagen sigue seleccionada, podemos editar cosas aquí. Podemos agregar esa imagen. Insertar medios. Podemos arrastrar y redimensionar las columnas. Básicamente en Elementor trabajamos con columnas. El área azul justo aquí que tiene tres columnas se llama sección. Y el apartado es una columna triple. Y aquí hay diferentes tipos de secciones. Y también puedes crear las tuyas propias. Entonces, por ejemplo, si creamos una sola sección de columna que tenga una sola columna aquí mismo, podemos duplicar esa columna así. si acaso cuando pasas el cursor sobre los elementos, no ves estos menú emergente así. Entra dentro de estas preferencias y entra dentro las preferencias del usuario y asegúrate de que los manejadores de edición estén configurados en sí. Déjame volver. Entonces básicamente solo arrastras elementos a columnas. Y luego cuando el elemento que acabas de arrastrar esté activo, puedes realizarle cambios porque nota que cuando esto está seleccionado, dice Editar divisor porque es un elemento divisor cuando haces clic en el Texto aquí mismo, observa que cambia a editar encabezado. Si hacemos clic en la imagen, cambiará para editar imagen para decirnos que ese es el elemento actual que estamos editando en este momento. Y así podemos hacer cualquier tipo de cambios que queramos. Configura esta imagen para que sea más grande, para que sea opaca, agregarle sombras de gota y todas esas cosas y ya veremos cómo hacer todo eso. Solo quería darte una visión rápida de lo que debes esperar de tu espacio de trabajo elemental. Entonces tu, para que te acostumbres a ella a medida que avanzamos. Recuerda, si abres estos otros paneles aquí mismo o estos paneles, notarás que tenemos el panel Pro que tiene elementos a los que solo tienes acceso si eres miembro de Elementor Pro. Si tienes el Elementor Pro, ahora mismo estamos usando la versión gratuita de Elementor. Pero recuerda que también instalamos plugins de herramientas para Elementor. Ese fue el constructor de cabecera y pie de página de Elementor. Y efectos de encabezado pegajosos, está en algún lugar dentro de aquí. Pero básicamente, cada vez que instalamos un plugin que fue creado para extender Elementor, lo encontrarás listado aquí y viene con sus propios elementos para extender el poder de Elementor. Entonces eso es algo que debes recordar. Entonces no quiero aburrirte hasta la muerte. Saltemos de inmediato y empecemos a construir este sitio web ahora mismo. Así que déjame deshacerme de todo ahora mismo. Actualicemos esa página. Y se me olvidó decirte lo que tenemos aquí abajo. Entonces tenemos esto es donde estaremos actualizando nuestros avances. Si queremos previsualizar los cambios, aquí es donde haremos click y te mostraré cuándo haremos eso. Entonces aquí, aquí es donde hacemos clic cuando estamos listos para hacer que la página responda, cuando queremos diseñarla para que sea responsive en móviles y tabletas. Entonces lo siguiente aquí es la historia. Entonces si hacemos clic en eso, verás una lista de todos los movimientos que hemos realizado desde que empezamos a editar la página. Y si, por ejemplo, hacemos clic en este punto en el tiempo. Como puedes ver, este icono parece un reloj que se mueve en sentido contrario a las agujas del reloj. Demuestra que esto es como rebobinar y volver atrás en el tiempo. Entonces si hacemos clic en eso, nos llevará de vuelta al estado en el que se encontraba la página durante ese momento. Entonces si volvemos a la Sección agregada, esta fue una vez que agregamos una sección. Entonces esa es la historia. Entonces aquí tenemos el navegador por si acaso tienes tantas cosas aquí mismo en tu página que ni siquiera sabes dónde estás cuando estás editando cosas. Puedes hacer clic en este navegador y ahora podrás ver un desglose de todo lo que tienes en tu página como esquema. Y aquí mismo tenemos más cambios, más ajustes de los que llegaremos a conocer a medida que avanzamos. Y justo aquí en la parte superior, si quieres agregar algunos, un elemento de aquí y tal vez estés dentro de ahí. Digamos por ejemplo, permítanme simplemente agregar algo aquí rápidamente. Título ahí. Y entonces ahora porque esto es lo que está activo, editar título de página, si queremos agregar algo aquí, no necesariamente tenemos que hacer clic siempre en este plus solo podemos ir directamente y hacer clic en ese ícono aquí mismo. Y Ido revela las pinturas, todos los dolores. Entonces si por ejemplo, no lo estás, puedes ver las pinturas y quieres agregar algo. Haga clic en eso y revelará los dolores y podrá seleccionar el elemento que desee arrastrar. Muy bien, así que ya basta con el espacio de trabajo por ahora. El resto se conocerá a medida que avancemos con nuestro Western más tiempo, Saltemos directamente y empecemos a diseñar el encabezado visualmente. En la siguiente lección. 7. Añadir el logotipo de la compañía: Entonces bienvenidos a esta lección. Ahora que hemos tenido una visión general del espacio de trabajo elemental, Es hora de empezar ahora a añadir estos elementos. Entonces lo primero que queremos hacer es agregar el logotipo de la empresa. Por lo que volviendo dentro de la barra de navegación, lo que tenemos que hacer es seleccionar una columna doble. Y esta sección de doble columna está dividida así. Por supuesto será capaz de redimensionarlo a medida que avancemos para darle el tamaño correcto. Y te sugiero que hagas lo mismo ahora mismo, lo que agregará de este lado es este nav bar, nav menu. Y en el lado izquierdo se sumará el logo. Y el logo es un elemento de imagen. Entonces haz clic en ese signo más justo ahí. Y bajo el panel básico, déjenme colapsar eso bajo el panel básico, que contiene los elementos básicos de cualquier sitio web. Escojamos el elemento de imagen y lo soltemos ahí. Sin hacer clic en ningún otro lugar. El elemento activo a editar es ahora la imagen. Solo para confirmar, solo tienes que hacer clic en él, y esto aparecerá aquí. Entonces elijamos un click de imagen ahí dentro. No tenemos ningún elemento por ahora, así que déjame subir un archivo. Y ya he preparado esta carpeta para ti. Se llama Podcasts landing page class, y te proporcionaré en la siguiente descripción, asegúrate de descargarlo. Contiene todos los elementos que hemos utilizado en la página web. Por lo que dentro de esa carpeta tenemos activos del proyecto y tenemos todas las imágenes incluyendo los logotipos. Entonces haré doble clic en eso e importaré los logotipos o RI. Y así notarás que tenemos dos logotipos grandes y dos logotipos pequeños. Utilizaremos los logotipos pequeños para el branding del sitio web. Y añadí estos dos por si acaso necesitabas agregar el logo en cualquier otro lugar y ponerte creativo con él. Entonces iré con este que tiene el elenco en blanco. Entonces seleccionaré eso. Después inserte medios. Y notarás que la parte blanca no es visible porque el fondo en sí es blanco. Entonces lo que queremos hacer es cambiar el fondo a este azul. Entonces vayamos adentro. Y seleccionaremos toda esta sección, la sección azul que tiene las dos columnas. Y solo para asegurarte de que estás editando esto, debería decir Editar sección aquí arriba. Y así yendo al interior del estilo, Vamos al interior del estilo. Bajo Antecedentes. Haga clic en el primer icono del pincel justo aquí, y haga clic aquí junto al color. Y démosle ese azul. Y en lugar de adivinar estos códigos de color, ya había creado ese color azul y lo dije suficiente. En este expediente, los activos del proyecto. Proporcionaré esta guía de proyecto README dentro la carpeta de clases de la página de aterrizaje del podcast de la que acabo de hablar. Entonces déjame abrir eso. Y como pueden ver, aquí tenemos diferentes colores, el bonito azul, verde claro, y gris oscuro. Pero por supuesto puedes usar tus propios colores. Entonces copiaré este bonito azul. Copiar eso. Déjame minimizar eso, cierra esa carpeta. Y aquí dentro, fondo, color normal. Lo pegaré ahí dentro. Y ahora tenemos ese fondo y el logo es visible. Actualicemos eso. Y vamos a previsualizar los cambios. Por lo que ahí lo tenemos. Nuestro logo está listo luciendo todo bien. Lo siguiente que queremos hacer es agregar el menú de navegación. Entonces sigamos adelante y hagamos eso en la siguiente lección. 8. Añadir el menú de nav: Bienvenido de nuevo. Sigamos tiempo ahora para agregar el menú de navegación aquí mismo. Y como puedes ver, tenemos cuatro elementos de menú, página de aterrizaje Inicio Acerca de Nosotros contacto. Y estas son esencialmente páginas web. Al hacer clic en cualquier elemento aquí mismo, debería llevarte a la página. Entonces por ejemplo, Acerca de Nosotros te llevará a una página Acerca de Nosotros. Entonces, esencialmente lo primero que tenemos que hacer es crear estas cuatro páginas. Por lo que volviendo dentro del espacio de trabajo elemental, Vamos a hacer clic en este signo más iniciar sesión cerca de este signo más aquí. Y aquí dentro, tipo nav, nav. Y recuerda que uno de los plugins que instalamos era el constructor de pie de página de cabecera para Elementor. Por lo que uno de los elementos del Menú Navegación aquí será el menú de navegación con este HF en la esquina. Entonces ese es el que necesitamos. Arrastrémoslo y soltémoslo ahí. Y una vez que hacemos eso, el menú aún no aparece. Entonces, ¿por qué necesita aparecer? Porque no hay menús en tu página web y dice claramente que no hay menús en nuestra página web. Por lo que necesitamos crear un menú de WordPress, cual usaremos este elemento, este elemento del menú de navegación para mostrar. Lo mostraremos aquí mismo. Y entonces cómo hacemos eso es, primer lugar, permítanme actualizar eso. Actualicemos eso. Por lo que saltaré dentro del tablero sin cerrar este espacio de trabajo ahora mismo. Entonces aquí, tenemos que ir dentro de los menús de apariencia. Por lo que será redirigido a esta página. Y aquí es donde podemos crear menús para nuestra página web, somos menús de prensa y notarás que debajo de los menús, dice crear tu primer menú a continuación. Y entonces podemos darle en el menú un nombre. Entonces tal vez algo así como nuevo menú. Y hagámoslo nuestro menú primario. Entonces vamos a crearlo. Ahora se ha creado el menú, pero no tenemos ítems. Ver aquí mismo dice Añadir elementos de menú de la columna de la izquierda. Y la columna de la izquierda derecha aquí tiene agregar muchos elementos y uno de los elementos de menú aquí puede ser una página web, puede ser páginas web, y podemos agregar páginas web, que van a hacer en este momento. Pero, pero los elementos del menú también pueden ser posts. Por ejemplo, puedes tener entradas de blog, una entrada de blog y otra entrada de blog y luego otra entrada de blog. Eso también es posible. También puedes crear tus propios enlaces personalizados. Entonces puedes crear un enlace aquí mismo, hey, HTTP, WW dot algo, y luego el texto del enlace tal vez quieras decir calculadora y luego agregar ese elemento de calculadora aquí para que cuando alguien haga clic en él, sean redirigidos a esta URL. También puedes tener categorías como elementos de menú. Entonces lo que queremos hacer es crear las cuatro páginas web a las que queremos que lleve el menú de navegación. Entonces vayamos dentro de las páginas. Y obviamente no tengo ninguna página porque esta es una nueva instalación de WordPress. Por lo que diré Agregar Nuevo. Y seguiré adelante y cerraré esto. Y tenemos este espacio de trabajo aquí. Este es el editor de backend que viene con WordPress y se llama Gutenberg. Y este es el equivalente de Elementor, lo que tenemos aquí, tenemos un editor que podemos usar en el front-end editor por defecto de WordPress se llama Gutenberg y funciona en el back-end justo aquí. Pero lo que queremos hacer es sólo darle un nombre a esta página y editar con Elementor. Entonces démosle cualquier nombre. Y luego en el lado derecho justo aquí, antes de golpear Publicar, Vamos a plantilla y ponerlo en Elementor ancho completo. Y aquí debajo de Page Atributs, ajustes de Astra, digamos que no hay barra lateral y diseño de contenido, ancho completo extendido. Entonces sigamos adelante y desactivemos estos tres como de costumbre, desactivemos también el pie de página. Después publicar. Ahora que está publicado, Volvamos a las páginas menos. Y ahora está enumerado aquí. Yo quiero crear tres páginas más para que tengamos cuatro páginas. Por lo que adelantaré rápido esta parte y crearé más páginas. Entonces seguiremos a partir de ahí. Muy bien, entonces ahora estamos de vuelta. Hemos creado cuatro páginas. Espero que hayas hecho lo mismo. Puedes crear tantas páginas como quieras, siempre y cuando puedan alimentar aquí mismo. Ahora que tenemos nuestras páginas listas, podemos utilizarlas como elementos de menú. Entonces vayamos dentro de los menús de apariencia. Y ahora notarás que debajo de las páginas tenemos las cuatro páginas que acabamos de crear. Y esta parte del nuevo menú que hemos creado nos dice que podemos añadir elementos de la columna de la izquierda. Entonces vamos a revisarlos todos. Y luego agrega algo de menú. Vigile lo que sucede o cabalgue. Por lo que todos han sido traídos aquí mismo y podemos usarlos como nuestros elementos de menú, la misma manera que están apilados de arriba a abajo. Ahí se mostrará de izquierda a derecha en el mismo orden. Por lo que generar cotización será el primer ítem aquí mismo. Por lo que arrastraré a casa aquí para ser el primer artículo que lo traerá aquí mismo. Arrastra a casa para ser el primer elemento de la izquierda, después el blog, luego la tienda. Y luego diré Guardar Menú. Por ahora nuestro menú de WordPress está listo para ser mostrado con el pie de página del encabezado. Construye un plug-in que colocamos en el front end usando Elementor. Por lo que yendo al frente de esta página en el espacio de trabajo elemental y habiendo guardado nuestros cambios, voy a presionar Control R para refrescar la página. Y ahora te darás cuenta de que ahora se está mostrando el menú. Entonces seguiré adelante y lo seleccionaré. Haga clic en cualquier lugar dentro de la línea azul, dentro del borde azul. Y notarás que el mensaje que estaba aquí ha cambiado porque ahora tenemos un final de menú. Este es el menú que creamos, el nuevo menú. Nuevo menú, y los elementos que creamos estas páginas web que agregamos como elementos de menú al nuevo menú ahora se están mostrando aquí en el front-end. Ahora vamos a querer que este menú esté del lado derecho. Por lo que si bien aún está seleccionado en el menú Contenido, notarás que tenemos el último menú. En primer lugar, pongamos que eso sea un botón. Generar cotización cambiará a un botón así. Entonces abramos Layout. Bajo alineación. Vayamos a la derecha. Y queremos que el menú sea de color blanco. Por lo que en primer lugar se derrumbó ese diseño e ir dentro de estilo. Entonces bajo menú principal, tenemos muchas opciones y si colapso menú principal, tenemos cuatro pinturas. Entonces déjame solo abrir el menú principal primero. Entonces podemos ir justo aquí donde dice decir pornografía. Daré clic en Topografía y cambiémosla a Montserrat. Déjame simplemente desplazarme ahí mismo. Por lo que hice clic en tipografía, familia. Y luego en la caja justo aquí, teclea meses alrededor. De esta manera una fuente que se ve impresionante, pero puedes elegir cualquier fuente que te guste. Haga clic en cualquier lugar fuera de ese cuadro. Después emprender el color del texto. Hagamos clic en ese color ahí mismo, y cambiémoslo a blanco. Y notarás que está cambiando demasiado ancho en tiempo real. Actualicemos eso. Ahora queremos trabajar con este tono de verde que rima con el logo. Déjenme arrastrar un poco eso. Entonces voy a saltar hacia donde teníamos nuestros colores y recoger este verde claro. Copia eso, luego salta de vuelta a donde estamos trabajando. Y bajo topografía, hemos cambiado el color del texto a blanco o estado normal. Pero en hover, ahora mismo tiene ese tono de verde, pero queremos la sombra de verde. Por lo que en el hover querrá hacer clic en eso y pegar ese hermoso verde ahí mismo. No, déjame escoger eso. Copia eso y pegarlo ahí dentro. Pégala ahí dentro. Y cuando pasemos sobre él ahora que tiene ese tono de verde, Cambiemos estos botones sombra de verde. Por lo que pinchando en cualquier lugar fuera de esta caja para deshacerme de ella, colapsaré el menú principal y abriré el botón. Y bajo Tipo de fondo, haré clic en ese icono de pincel. Revelará este verde corriente. Voy a hacer clic en eso. Y luego me desharé de eso y pegaré el verde del que copiamos, del documento de texto. Y ahora tiene ese tono de verde, pero ahora propio sobre, ese texto está desapareciendo así que queríamos seguir siendo blanco. Por lo que haciendo clic afuera para el color del texto al pasar el cursor, queremos que el color del texto siga siendo blanco. Por lo que al flotar, queda blanco o podemos cambiarlo a este azul. Entonces, antes que nada, actualicemos eso. Y vamos a previsualizar los cambios. O RI. Por lo que nuestra barra de navegación está tomando forma. A mí me gusta lo que estoy viendo, pero claro vamos a necesitar hacer un poco más de trabajo para equilibrar este margen aquí mismo. Pero lo haremos, no te preocupes. Entonces de vuelta aquí, lo que tenemos que hacer es en el hover querrá que el texto cambie de color. Entonces mientras todo el elemento sigue seleccionado haciendo clic en cualquier lugar dentro del borde azul, pasaré a este documento de texto y copiaré el bonito azul. Copiar eso. Y luego aquí dentro, quiero ir, mientras seguimos editando el menú de navegación. Textos sobre hover deberían cambiar a ese Lou. Ahora cuando pasamos por encima de él, cambia a ese azul. Entonces revisemos los cambios. O RI, impresionante, eso me gusta. Por lo que ahí lo tenemos. Lo siguiente que queremos hacer es trabajar en este trazo de pincel justo aquí antes de pasar a la sección de héroes. Y lo haremos. Bueno, estamos haciendo la sección de héroes porque este pincel es en realidad parte de esta sección, no parte de la barra de navegación. Entonces terminamos con la barra de navegación. Te veré mientras estamos trabajando en la sección de héroes en la siguiente lección. Nos vemos en breve. 9. Añadir la imagen de héroe: Bienvenido de nuevo a otra lección. Ya estamos listos para construir una sección de héroes. Ahora que nuestra barra de navegación está lista, ya es hora de construir la sección de héroes. Y esta sección de héroes se divide en dos columnas. La columna que tiene la imagen y la columna que tiene el texto héroe y estos iconos aquí mismo. Entonces lo primero que queremos hacer es agregar la imagen de héroe. Entonces sigamos adelante y hagamos eso. Entonces dentro de aquí, quiero cerrar esta página porque ya no estamos usando este espacio de trabajo. Recuerda, estábamos construyendo la barra de navegación. Ahora que terminamos de editar la barra de navegación, podemos asegurarnos antes que nada, guardamos nuestros cambios. Entonces si tú, si esto es verde, asegúrate de hacer clic en Actualizar. Y luego sí, Salgamos al Dashboard. Por lo que ahora podemos crear la propia página de aterrizaje. Entonces aquí estamos en el back-end irá dentro de las páginas porque nuestra página de aterrizaje es definitivamente una página. Y podemos elegir una de estas páginas para ser la página de destino. Y por defecto, solo quería ser la página de inicio. Entonces esto, Vamos a dar click en Editar bajo Inicio. Y por supuesto se tomarán aquí mismo porque somos prensa asume que quieres editarlo aquí mismo en el back-end usando Gutenberg. Pero queremos hacer click en Editar con Elementor para que podamos empezar a crearlo visualmente. Muy bien, Así que aquí estamos. Ahora. En primer lugar, una vez que abras el espacio que lo único que notarás es que esta barra de navegación ahora no es editable. Este no es el espacio de trabajo para editar la barra de navegación. Para ello, tendríamos que volver dentro del tablero bajo Elemento de Apariencia, encabezado y pie de página. Y luego bajo barra de navegación, hacíamos clic en Editar y o editar con Elementor. Y íbamos al front end y podríamos editarlo. Pero ahora mismo, cerraré eso. Y entonces ahora aquí estamos editando la propia página de aterrizaje, el contenido principal de la página de aterrizaje aparte del encabezado y pie de página. Entonces sigamos adelante y sumamos, sigamos adelante y agregamos nuestra imagen de héroe. Por lo que voy a hacer clic en eso para agregar una columna doble. Porque ya se puede decir que es una columna doble. Arrastraré el borde sólo un poquito porque la imagen no es tan grande como el TextContent. Y aquí dentro, agregaré un elemento de imagen así. Entonces voy a dar click ahí. Y porque aquí no tengo esa imagen, tendremos que ir adentro. Déjame subir esas imágenes de nuestra carpeta. Recuerda que mencioné que puedes conseguirlo, puedes descargarlo de la siguiente descripción. Entonces entraré dentro de la imagen de los modelos y subiré esta. Ciertos medios de comunicación. Y ahí lo tenemos. A continuación, queremos añadir los textos hebreos junto con estos iconos aquí mismo. Entonces hagámoslo en la siguiente lección. 10. Añadir el bloque de texto de héroe: Por lo que ahora es el momento de agregar estos bloques de texto de héroe. Algo que debo mencionar es que es importante que tengas un H1 en tu página de destino o en cualquier página para el caso. si acaso no sabes de encabezados HTML. Html tiene seis niveles de encabezamientos. El más grande es H1, y el más pequeño es H6. H1 es lo más importante y es lo que dice a los navegadores y motores de búsqueda de qué trata tu página web en términos simples en una frase corta. Por lo tanto, ten eso en cuenta. No puedes tener más de un H1 en tu página, pero puedes tener múltiples H2, H3, H4, H5, y H6. Y sigamos adelante y saltemos dentro del espacio de trabajo. Y entonces lo primero que tenemos que hacer es hacer clic en este signo más para que aparezcas estos elementos y luego arrastrar el encabezado del texto justo ahí. Y te darás cuenta de que dice agrega tus textos de encabezamiento aquí mismo y lo podemos hacer aquí mismo. Entonces creo que dice, Bienvenido a los podcasts. Podcasts, ¿verdad? Así, y que sea una frase así. Y ahora, mientras aún está seleccionada, vayamos dentro de estilo, color del texto, y cambiémoslo a 40, 40, 40. Entonces eso es un gris oscuro, no negro, es un gris oscuro. Y digamos que hagamos clic en cualquier lugar, Hagamos clic en cualquier lugar fuera de la caja para deshacernos de él. Actualicemos eso. Y mientras se está actualizando, Vamos dentro de la topografía. Y cambiemos a la familia por dos meses. Agarremos este perilla de tamaño justo aquí y jalemos de él para aumentar el tamaño. Dejémoslo en algún lugar por ahora. Por supuesto, lo modificaremos hasta que tengamos los resultados que buscamos. Yo sólo quería tomar su bajo para que entiendas las cosas que estamos haciendo. Así que haga clic afuera en cualquier lugar allí. Y lo siguiente que queremos hacer es crear esta descripción aquí mismo. Entonces copiaré eso. Y voy a dar clic a este pequeño icono aquí mismo para que aparezcan estos elementos. Y luego arrastraré estos editor de texto. Y cuando esta línea azul aparezca por debajo del h uno elemento, la dejaré caer ahí. Ahora bien, mientras aún está activo, seleccionaré todos estos textos borrados y pegaré lo que acabamos de copiar de aquí. Entonces actualice eso. Ahora antes de ir más lejos, acabo de recordar que si seleccionamos el H1 justo aquí, en realidad es, no lo hemos configurado para que sea un H1 bajo el contenido, mientras que esto se selecciona bajo la pestaña de contenido, aquí abajo, HTML debería cámbialo a hey, uno. Y como se puede ver desde el desplegable, tenemos H uno todo el camino para odiar busca entonces estos otros elementos. Pero queremos que sea uno. Y vamos a actualizar eso. Muy bien, así que vamos a previsualizar los cambios. Entonces eso es lo que tenemos en este momento. Entonces lo primero que notarás es que necesitamos empujar estos artículos hacia abajo. Entonces hagámoslo. Aumentemos el margen en la parte superior. Y lo hacemos seleccionando toda la sección, esta sección entera, aquí mismo, clic derecho y editar sección. Y ahora es el elemento activo aquí. Vámonos por dentro avanzado. Y vamos a quitar este enlace y darle un margen superior de un 100. Hagámoslo 80 años, y actualicemos eso. Y vamos a previsualizar los cambios. O bien, entonces eso es lo que tenemos. Lo siguiente que queremos hacer es agregar estos trazos de pincel aquí mismo. Entonces, vayamos adentro. Déjenme cerrar esa vista previa y vayamos dentro de nuestro espacio de trabajo. Y voy a dar clic a la sección en sí. Entonces para aumentar el margen en la parte superior aquí, Hagamos eso dentro de las propias columnas. Vamos dentro de estas columnas, seleccionemos eso, y ahora es elemento activo, estamos editando. Y vayamos adentro avanzado, rompamos este enlace. Y luego para el margen superior, vamos a darle algo así como 70. Ahora eso es 770 para el modelo también. Adelante y haga clic en su columna. Y luego vayamos adentro avanzado. Rompe ese vínculo. Guardémonos esa columna 50. Sí, 50, margen superior. Actualicemos su propio derecho, así que revisemos los cambios. Impresionante, así que eso es lo que tenemos en este momento. 11. Añadir efecto de pinceles de héroe: Lo siguiente que queremos hacer es agregar estas pinceladas aquí mismo. Por lo que queremos añadir ese efecto pincel. Y eso lo hacemos en esto, en la parte superior de la sección. Como puedes ver, esa sección ahora mismo se cruza con la barra de navegación superior. Y así podemos añadir esa pincelada aquí. Entonces vamos a seleccionar la sección en sí haciendo clic en esa área allí o haciendo clic derecho y editando sección. Y luego vayamos adentro divisor en forma de estilo. Y luego queremos decir para el divisor de forma superior, queremos pincel de ondas en este menú desplegable, puedes elegir cualquier opción que quieras. Pero en este caso queremos ir con olas, pincel, y luego queremos darle una altura. Y ahora no lo puedes ver porque por defecto no tiene ningún color. Entonces lo que queremos hacer es copiar este azul, este color azul aquí mismo. Entonces voy a tabular, por lo que esta página aquí mismo, tienes estos ya en la descripción a continuación. Copiaré ese bonito azul. Entonces volveré aquí. Y mientras que nuestro separador de forma de azulejo sexualmente seleccionado y somos insights irá dentro del área superior y cambiará el color a ese azul. Entonces ahora ya está tomando forma. Tratemos de darle tal vez una altura de 60. Y vamos a actualizar eso. Y vamos a previsualizar los cambios o montar. Entonces me gusta cómo vamos? Pero ahora note que esa curva ahora ha reducido el margen aquí. Tenemos que aumentar el margen en esta columna. Entonces seleccionemos esta columna cuando pasemos el cursor sobre ella. Vamos adentro avanzado. Aumentémoslo a, usemos nuestro ojo arriba en algún lugar ahí. Para mí, son 110. Actualizar eso. Ahora. Ahora tal vez te estés preguntando, espera un minuto de nuevo, estos podcasts, podcasts en nuestra página de referencia es un poco más grueso que bienvenido a la. Entonces, ¿qué está pasando ahí mismo? Ahora hay dos métodos que podemos usar para lograr estos resultados aquí mismo. Entonces si volvemos dentro de nuestro espacio de trabajo, el primer método que podemos usar es eliminar eso, así que lo destacaré. Entonces. Déjame destacar eso, luego Control X para cortarlo. Y ahora que nos quedamos con esto, podemos duplicar eso. Y luego mientras se selecciona esto, podemos pegar ese texto ahí dentro. Y luego podemos editar cada una de ellas individualmente. Para que pueda venir y decir, para poder hacer esto un poco más pequeño, tal vez algo así como 44. Y luego selecciona esta cualquier tipografía de estilo lateral. Puedo darle un peso de 800. Y ahora es más grueso que este otro. Puedo darle a esto un peso de, mientras aún está seleccionado bajo tipografía de estilo, darle un peso de 300. Así, entonces actualiza los cambios. Entonces ahí lo tenemos. Entonces si previsualizamos los cambios en la propia página, eso es lo que tenemos. Y se ve algo parecido a esto. Pero ahora hay un atolladero aquí. Si bien hemos separado a los, bueno, hemos separado a los dos de ellos. Ahora. Ahora tenemos dos H 1s y no queremos que sean 20. Cual está en esta página de aterrizaje, sólo necesitamos un H1. Por lo que no podemos tenerlos tanto como H 1s. Tan débil lo que podemos hacer es seleccionar esto y bajo contenido, cambiarlos a H2. Entonces digamos eso y previsualice los cambios. Analicemos los cambios. Y tenemos algo cercano a lo que tenemos en la página final. Pero por supuesto, como notarás, nuestra descripción aquí mismo es un poco más larga que, que nuestra referencia. Y eso es porque antes que nada, necesitamos, primer lugar, necesitamos hacer que esta columna sea un poco más estrecha. Entonces vamos a agarrar eso y tirar de eso hasta probablemente ese punto. Entonces eso significa que necesitamos reducir hasta ese punto el tamaño del podcast. Después actualiza eso y previsualiza los cambios. Muy bien, impresionante. Entonces aquí es donde irá nuestra sección destacada y queremos añadir estos iconos aquí mismo. Entonces veamos cómo hacerlo en nuestra próxima lección. 12. Añadir los iconos de héroe destacados: Muy bien, Así que ahora es el momento de crear estos destacados en la sección. Entonces volviendo a nuestro espacio de trabajo aquí mismo, lo primero que queremos hacer es agregar estos destacados en. Entonces voy a seguir adelante y agarrar eso, copia eso. Entonces entraré aquí y haré clic en ese ícono, arrastraré un encabezado. Cuando ahí aparezca la línea azul, déjala ahí. Y ahora porque es el elemento activo aquí, puedo pegar lo destacado en los textos ahí mismo. Y por ahora es un poco grande, así que hagámoslo, en primer lugar, cambiemos su color a 40, 40, 40. Y luego cambiémoslo a Roboto. Es un monstruo. Ok. Y vamos a reducir su tamaño a tal vez algo así como 18. Font-peso 700. Y vamos a actualizar eso. O bien, lo siguiente que queremos hacer es crear estos iconos aquí mismo. Y estos iconos se llevan a cabo dentro de las columnas. Por lo que esta es una intersección y otra intersección con columnas dentro de ella. Entonces lo primero que queremos hacer es entrar aquí y seleccionar una intersección. Y eso es básicamente una sección que se puede soltar dentro de otra sección o dentro de una columna. Por lo que no puedo dejar caer toda esta sección dentro de otra sección, pero puedo llevar una intersección y dejarla caer dentro de una columna u otra sección. Entonces nosotros que recordamos podemos duplicar columnas, así que duplicaré esto también. Por lo que ahora tenemos tres columnas. Y como puedes ver, ya está empezando a tomar forma. N es que lo adivinaste aquí mismo. Agregaremos elementos de imagen. Entonces lo que quiero hacer es simplemente darle estilo a uno de los elementos y luego podemos simplemente duplicarlos y añadirlos dentro del resto de las columnas. Entonces para esta imagen, Vamos a seguir adelante y abrir archivos. Seleccionar archivos. Y quiero navegar dentro del socio podcast, logotipos de socio podcast. Y los seleccionaré todos porque queremos usarlos todos. Entonces ahora que esto ya está cargado, permítanme seleccionar eso e insertar medios. Ese es el primero. Así que haz clic con el botón derecho en Editar columna y luego entra avanzado saber Vamos dentro de estilo primero, y vamos a Border. Siguiente sombra de cuadro está en Editar icono, así que haz clic en eso. Y en el momento en que lo hagas, notarás que aparece la sombra de caja y podemos empezar a peinarlo. Entonces lo único que quiero hacer por ahora es reducir la opacidad para que sea, la sombra de caja es menos visible así a ese grado, tal vez un 22. Y luego voy a dar clic en algún lugar dentro hay uno se borrosa un poco más y luego lo extenderé un poco más. Digamos hasta ese punto. También quiero reducir, Vamos a reducir un poco esa opacidad. Y con eso, pinchemos fuera de esta caja y hagamos que el radio fronterizo sea algo así como 10. Y vamos a actualizar eso. Eso le da una esquina redondeada así. Entonces veamos qué tenemos. Analicemos los cambios. Entonces eso es lo que tenemos en este momento, notarás que este logo parece ser muy diminuto. Veamos qué podemos hacer al respecto. Haciendo clic mientras la columna sigue activa. Sólo para confirmar, quiero venir aquí y romper este enlace. Ahora eso dice restablece todo el relleno alrededor del logo. Y dejémoslo así por ahora, me gusta el tamaño. Entonces lo que queremos hacer a continuación es seleccionar la imagen en sí, el cursor sobre la imagen. No esta es la columna, y luego esta es la imagen. Yo quiero duplicar eso. Y una vez más duplicar ahí, soltar eso ahí, arrastrar eso y subirlo ahí dentro. Y luego seleccionaré esta columna aquí mismo, haga clic derecho en copiar. Y diré que haga clic derecho. Pegar estilo. Y ahora estos hereda esto en ahora esto, esta columna también obtiene el estilo de la primera columna. Y haré lo mismo por estos estilo de pasta de clic derecho. Ahora las tres columnas tienen el mismo estilo, pero nota que todavía hay tocado en los lados. Queremos aumentar el margen. Entonces mientras esto todavía está seleccionado, Editar columna avanzó, Vamos a romper ese enlace. Y luego por el margen izquierdo, démosle un cinco. Y por el margen derecho, Otros cinco. Está bien, así que vamos a hacer clic con el botón derecho del ratón copiar y peguemos ese nuevo estilo, pegue estilo. Hagamos lo mismo aquí. Pegar estilo y ahora tenemos suficiente espacio alrededor de ellos. Actualizar eso. Y vamos a previsualizar los cambios o derechazo. Entonces lo siguiente que queremos hacer es hacer click adentro aquí, y eso seleccionará la imagen en sí, no la columna. Y mientras se selecciona la imagen, elijamos una segunda ruta de autobús con logotipo. Hagamos lo mismo aquí. Seleccionemos el tercer logotipo, Google Play. Y entonces ahora que tenemos esos tres, Vamos a duplicar así esta sección. Y repitamos lo mismo aquí. Podcasts de Apple. Escojamos un logotipo de Ford, luego el quinto logotipo, y luego el último logotipo, o bien. Pero ahora nota que se están tocando en la parte superior e inferior. Por lo que necesitamos aumentar el margen superior en este apartado. Entonces lo que tenemos que hacer es seleccionar la intersección de sección en sí, ir a Avanzado, quitar ese enlace ahí mismo. Y luego para el margen superior, usemos nuestro ojo para posicionarnos en consecuencia. Creo que ese es el lugar correcto. Actualicemos eso. Pero ahora creo que estos drop box shadow es un poco oscuro. Por lo que quiero seleccionar una de las columnas aquí. Y dentro de estilo, me iré dentro de la frontera. Sombra de caja. Entonces haga clic en ese MNR, quieren reducir aún más esa opacidad en algún lugar, tal vez 11. Y luego copiaré, copiaré el estilo. Haga clic con el botón derecho en el estilo de pegar y repita eso para todos ellos. Pegar estilo, pegar estilo. Y por último, pega estilo. Actualicemos eso y previsualicemos a cambios o variedad. A mí me gustan los resultados que están llegando hasta ahora. Creo que realmente vivirías en luce mejor que regional. Impresionante. Entonces ahora notarás que cuando pasemos el cursor sobre estos iconos aquí mismo, en realidad hay enlaces y conducen a un sitio web diferente cuando haces clic en ellos. Por lo que necesitamos hacer estos enlaces. Entonces cómo hacemos eso es seleccionar la imagen en sí y una de las opciones y el contenido aquí será un enlace. Se puede decir URL personalizada, y se puede introducir cualquier URL a la que se desee llevar a la gente. Entonces, por ejemplo, si estos, si se trata de Apple Podcasts, algo así como www dot apple podcasts.com, slash escuche. Y si quieres que el enlace se abra en una nueva pestaña cuando alguien haga clic en ella, puedes hacer clic en esa rueda dentada y decir abrir una nueva ventana, actualizar eso. Y vamos a revisar los cambios o montar. Y así cuando alguien hace clic en eso, conociéndome sobre él, es un enlace y cuando alguien hace clic en él fueron llevados a una nueva página y nuestras páginas siguen intactas. Entonces déjame cerrar esa página. Entonces sigamos adelante y repitamos lo mismo para el resto de las imágenes. Por lo que voy a dar clic a esa imagen ahí dentro. Entonces solo agregaré un signo de hash por ahora. Adelante y agrega los enlaces que quieras. Para tu caso porque es tuyo es un sitio web real. Adelante y digamos que abran en nueva ventana. Así. Recuerda abrir en nueva pestaña. Y por último, Spotify o derecha. Entonces sigamos adelante y previsualicemos los cambios. Y ahora cuando pasamos por encima de cualquiera de ellos, es un enlace. Y cuando haces clic en él, te lleva a toda una página nueva. Entonces ahora que terminamos con la sección de héroes, Bajemos a la sección principal de la página de aterrizaje en que comienza desde aquí mismo del episodio destacado. Por lo que la lista de episodios a la galería de episodios, todo el camino hasta la parte inferior derecha antes del pie de página. Entonces, así que sigamos adelante y creemos estos episodios destacados en la siguiente lección. 13. Añadir la sección de episodio destacado: Bienvenido de nuevo a otra lección. Por lo que ahora mismo queremos crear esta sección de episodios destacados. Y una cosa que me gusta de Elementor es el hecho de que pudieras reutilizar elementos. Te darás cuenta de que tenemos una similitud entre este bloque de texto y este bloque de texto aquí mismo. Entonces dentro de aquí, dentro de nuestro espacio de trabajo, lo que podemos hacer es crear una doble columna. Y esta doble columna sostendrá este bloque de textos con un botón y esta imagen. Entonces, primero que nada agreguemos unos elementos de imagen aquí. Haré clic en el signo más allá y soltaré una imagen ahí. Pero ten en cuenta que no tenemos margen justo aquí en la parte superior. Por lo que con la sección seleccionada, iré por dentro avanzado. Rompe ese vínculo. Y luego para el marginal superior, dale tal vez 90. Démosle un 100. ¿Verdad? Entonces esa es la posición. Y entonces lo que podemos hacer es duplicar estos elementos aquí mismo. Entonces solo duplicaré eso y lo arrastraré adentro y lo soltaré cuando aparezca la línea azul. Voy a repetir para este otro rubro. Déjalo justo ahí y luego duplica eso y déjalo justo debajo de la H1. Pero ahora en nuestra página de referencia, esto no es un H1. No podemos tener más de una página uno. Entonces vamos a añadir, vamos a cambiar eso. Asegurémonos de que esto no sea uno. Hagámoslo un HA2 y reduzcamos su tamaño. Y también reduzcamos el font-weight, el peso de la fuente a algo así como 700. Y ahora vamos a encadenar, Vamos a agarrar eso. Agarramos eso primero. Sólo copiaré eso. No es necesario volver a escribir todo esto. Voy a dar click dentro de ahí, y luego aquí dentro, pegaré Lo que acabamos de copiar. Copiar eso. Y luego seleccionaré eso. Y dentro de contenido, dibujaré, pegaré esa otra redacción ahí mismo. Por lo que notarás que se ha tomado demasiado espacio. En primer lugar, la imagen de este lado es un poco pequeña, así que vamos a redimensionarla en consecuencia. Entonces vamos a reducir el tamaño de este H2 hasta algún lugar allí. Notarás que el espaciado aquí es casi conmovedor. Por lo que iré a seleccionar la sección de edición. Y luego dentro de la disposición, debajo de la brecha Columnas, iré a, elegiré ancho. Y eso aumentará un poco el espaciado entre las dos columnas. Entonces actualicemos eso. Y vamos a previsualizar los cambios. De acuerdo, me gusta lo que estamos llegando hasta ahora. Entonces volviendo aquí, seleccionaré la imagen. Y entremos aquí. Y subamos la imagen de ese modelo que tenemos ahí mismo. Estos podcaster imagen a impresionante, por lo que insertar medios. Y ahí lo tenemos, pero es un poco grande, así que vamos a reducir así el tamaño. Y entonces digamos actualización. Analicemos los cambios. Está bien, así que ahora sigamos adelante y agreguemos este botón. Entonces entraré aquí. Y seleccionaré los elementos de botón y lo dejaré justo debajo ahí. Y por defecto, tiene este verde que, que nuestra barra de navegación tenía en algún momento. Por lo que tendremos que reemplazar ese verde por esta pantalla. Así que tabulan un cruce, agarra esto. Entonces agarraré ese verde. Copia eso y vuelve aquí, selecciona el botón en cualquier lugar dentro de estos borde azul. Y si bien aún está seleccionada, iré al color de estilo. Y luego lo pegaré aquí, lo pegaré ahí dentro, y ahora haga clic en cualquier lugar de ahí. Ahora el verde es ese tono que queremos. Pero queremos que tenga estas fuentes azules y en el hover cada una será blanca. Por lo que estamos queriendo tener este color azul en estado normal y en hover quería ser blanco. Entonces hagámoslo. En primer lugar, ¿qué dice? Escucha este episodio. Entonces vamos, mientras aún está seleccionado, vamos al contenido. Vayamos al icono, biblioteca de iconos. Hagamos algo como auriculares, tal vez algo así. Insertar. Y ahora tenemos un icono y podemos elegir ponerlo antes o después del texto y cambiar los textos mientras aún bajo contenido. Vayamos al texto y digamos, entonces actualicemos eso. Y por supuesto podemos especificar a dónde queremos que el botón redirija a los usuarios, para que podamos ingresar nuestra URL justo aquí, https, www.dot_com. Y si quieres que se abra en una nueva pestaña, cuando alguien haga clic en el botón, haz clic en esa rueda COG, y por supuesto selecciona esa nueva ventana de apertura. Adelante y pruébalo y ver qué hace. Pero ahora, entonces de nuevo, nota cómo esto tiene algún relleno adecuado en los lados. Entonces sigamos adelante y agreguemos un bonito relleno a este botón. En primer lugar, cambiemos este color de fuente. Déjame tabular aquí mismo y conseguir estos azules. Yo copiaré eso. Y si bien todavía está seleccionado bajo el botón Estilo, iré al color del texto. Ningún estado normal debería ser tan azul. Y casa propia sobre el color del texto necesita ser blanco. Entonces actualicemos eso. Y mientras se está actualizando, también quiero que agreguemos ese relleno. Entonces, desplazémonos hacia abajo y busquemos relleno. Aquí está. Entonces romperé ese enlace y eso distorsionará completamente el botón. Pero lo que queremos hacer es antes que nada, por la derecha y la izquierda, vamos a darle un relleno de 50. 50, 50 m para arriba e abajo. Démosle un 20, 20, 20 y 20. Por lo que ahora tiene un relleno adecuado y se ve mucho más presentable. Piensa que también podemos hacer estos, odio usar el mismo azul que estos. Entonces sigamos adelante y agarremos esa copia azul. Seleccionemos eso. Si bien aún está seleccionada, entraré dentro del color del sexo y le daré ese azul. Mismo caso para esto o paseo. A mí me gusta. Entonces vamos, vamos a previsualizar los cambios. Y vayamos hacia abajo y veamos qué tenemos. Impresionante. Lo siguiente que queremos hacer es crear la galería de estos episodios aquí mismo, y lo haremos en la siguiente lección. Entonces te veré en breve. 14. Añadir el título de la cuadrícula de podcast: episodios de podcast:: Bienvenido de nuevo. Espero que hayas agarrado un vaso de agua. Ahora es el momento de volver a los negocios. Entonces básicamente ahora estamos creando esta galería de episodios aquí mismo. Entonces, empecemos creando estos encabezamientos. Después nos pondremos a crear la propia galería. Y así si pudiéramos saltar justo dentro del espacio de trabajo, sigamos adelante y creamos una sola sección de columna. El primero aquí mismo. Y ahora dentro de aquí podemos dejar caer esta galería. Pero antes de eso, vamos a crear estos encabezamientos. Entonces solo copiaré eso. Y luego aquí solo duplicaré eso y lo dejaré caer ahí en la sección de una sola columna. Entonces seleccionaré eso. Y mientras aún está seleccionado, pegaré el texto que acabo de copiar de aquí. Este texto. De acuerdo, entonces lo siguiente que queremos hacer es llevarlo al, alinearlo al centro. Alinearlo en el centro. Y démosle este fondo azul. Yo quiero darle esta almohadilla azul. Bueno, entonces vamos a agarrar ese azul de esta fuente aquí mismo. Bueno, esta fuente está seleccionada. Voy a hacer clic en eso y voy a copiar el azul. Entonces entraré dentro de esta sección, Editar sección, estilo para el tipo de fondo de pasta, ese código de color aquí mismo. Y ahora tiene ese azul. Ahora esta fuente, este encabezamiento es azul. Entonces cambiémoslo a la pantalla. Entonces copiaré esto, seleccionaré este botón. Y luego lo haré, porque ahora está resaltado bajo Estilo, voy a copiar estos verdes. O si aún tienes este documento abierto, Es la pantalla. Seleccionaré estos rubros. Y si bien todavía está seleccionado bajo el color de texto de estilo, pegaré ese verde ahí dentro. Y ahora tiene ese verde. Haga clic en cualquier lugar dentro de aquí para deshacerse de eso. Entonces actualizaré los cambios. Lo siguiente que queremos hacer es agregar estos efecto pincel aquí mismo, la misma manera que lo hicimos para la sección superior. Entonces la forma de añadirlo justo aquí arriba de este apartado, porque ahora mismo como pueden ver, tenemos una línea recta. No podemos agregar que brush1 top de estos se agrega dentro de esta sección aquí mismo, estos sección de episodios destacados. Entonces vayamos dentro de la sección misma, editemos sección, y luego bajo divisor en forma de estilo, abajo, porque ahora queremos que la curación aquí mismo, abajo. Escojamos ondas pincel, y ahora el color es invisible. Entonces copiaré eso. Bonito azul. Y si bien aún está seleccionada. Y mientras todavía estamos aquí, bajo divisor en forma, bajo estilo, color, pega eso ahí dentro. Y eso es demasiado grande. Entonces vamos a reducir la altura a algo así como 60. Yo lo quiero a los 60. Actualizar eso. Y vamos a previsualizar los cambios. Desplazarse hacia abajo. Se ve impresionante, pero ahora este tipo está tocando el trazo del pincel. Entonces vamos a añadir un poco de relleno debajo de este tipo. Por lo que seleccionaremos la imagen de este tipo. Y dentro avanzado, vamos a ir a romper ese enlace ahí mismo. Y luego para el relleno inferior, empujémoslo hacia abajo hasta que estemos satisfechos con la distancia. Entonces para mí, creo que ese es un buen lugar. En realidad eso es un 100. Por lo que solo puedes introducir un 100 para el relleno inferior. Actualiza eso, y luego vamos a previsualizar los cambios. Está bien. Eso es súper impresionante. No podemos ir más allá porque no tenemos nada abajo. Abajo aquí. Añadamos la galería ahora. Ahora la forma de agregar estas galerías es sencilla. Estos artículos de la galería justo aquí, nuestras publicaciones, son publicaciones de WordPress. Se puede crear una entrada de blog. Se puede crear un episodio es una publicación. Se puede crear un producto en contraposición. Se pueden crear diferentes tipos de contenido como publicaciones. Y así vamos a seguir adelante y crear unas cuantas publicaciones, creará tal vez alrededor de seis, para que podamos mostrarlas aquí. Entonces la forma en que hacemos eso es yendo dentro del tablero. Vamos dentro de los puestos. Recuerda que esta es una nueva instalación de WordPress, así que no tengo ningún post. Entonces tendré que sumar esos seis puestos. 15. Crea los episodios como publicaciones de WordPress: Así que sigamos adelante y sumamos algunas publicaciones. Diré Añadir nuevo. ¿ Y cuál es el nombre de este primero de aquí? Episodio 6, networking para podcasting. Entonces copia eso. Se sientan ahí mismo. Entonces para la plantilla, Vamos a configurarlo en Elementor barra lateral de ancho completo, configurarlo en ninguna barra lateral. Estiramiento de ancho completo justo ahí bajo Diseño de contenido. Entonces desactivemos esos cuatro elementos y lo publicemos. O bien, así que ahí tenemos eso. Entonces para poder exhibir con este extracto aquí mismo, también necesitamos que los huevos estén en alguna parte. Ahora, el objetivo de esta clase no es mostrarte cómo diseñar los episodios individuales. Cuando hacemos clic aquí, la página a la que te llevarán necesita estar bien diseñada y ese es el espacio que estamos creando. Entonces para crearlo, lo haríamos, por supuesto ir adentro editar con Elementor. Y entonces por supuesto vamos a añadir algo así como una doble columna allí. Y de este lado tal vez tendríamos una imagen. Entonces tal vez tendríamos un encabezado. Permítanme agregar un encabezado. Y el encabezado sería este particular, particular encabezado. Entonces lo pegaré ahí dentro. Y tal vez este este extracto sería el contenido del episodio. Breve descripción del episodio. Añadamos algún margen a la parte superior de esto. Yo solo quiero mostrarte esto rápidamente para que veas la relación entre los dos AD ahí mismo. Y así supongamos, hagamos esto, aunque sea con fines ilustrativos, hagámoslo un poco más presentable. Entonces digamos que el episodio, y luego tenemos, Cambiemos eso a Montserrat. Y luego actualicemos eso. Entonces vamos a previsualizar los cambios. Ahora este es un solo episodio que estamos creando, solo para que cuando hacemos clic en esto, nos lleven a una página que es un poco más presentable. No nos llevan a una página en blanco. Pero así es como tal vez se vería un episodio cuando alguien se abre a la vista para escucharlo. Entonces cambiemos esta imagen. Vayamos aquí y subamos una imagen semanalmente. A lo mejor esa señora de ahí. Se ve como un podcaster. Insertemos medios. Y vamos a actualizar eso. Después, previsualice los cambios. Entonces tal vez podría incluso pedir prestado lo que nuestro botón justo aquí solo haga clic derecho en copiar porque estamos editando el mismo sitio web, somos capaces de copiar elementos de una página a otra página para que pueda entrar, pegar ese botón aquí mismo. Igual que eso. Entonces actualicemos eso. Tampoco me gusta el espaciado aquí mismo, así que déjame seleccionar la sección en sí. Y bajo Layout, columnas gap, déjame aumentarlo a más ancho. Entonces digamos que actualicemos eso. Está bien, y luego vamos a previsualizar los cambios. Entonces ese es un ejemplo de lo que tal vez se vería un episodio de podcast. Entonces lo que queremos hacer es volver dentro de nuestro tablero. Salgamos al Dashboard. Y vayamos a la lista de todos los episodios que tenemos. Ahora notarás que tenemos 1 porque acabamos de crear uno, pero necesitamos cinco más. Entonces vayamos dentro del tablero y creemos los cinco restantes. Por lo que voy a añadir nuevo. Vamos a copiar eso. Y por supuesto que estoy haciendo esto manualmente, pero hay plugins que te pueden ayudar. Pueden ayudarte a duplicar publicaciones o páginas o elementos en WordPress con un solo clic. Entonces déjame simplemente pegar eso ahí dentro. Ese es el episodio 5. Debajo de las plantillas, Digamos Elementor ancho completo, sin barra lateral, estiramiento de ancho completo. Y luego deshabilitaré estos cuatro artículos, luego lo publicaré. Vamos a seguir adelante y crear el resto. Y adelantaré rápidamente esta sección y te permitiré crear los cuatro restantes. Entonces hablemos después de esto. Entonces aquí estamos. Déjame refrescar esta página de logrado crear los seis episodios. Entonces ahora que tenemos todos los episodios que necesitamos, necesitamos una manera de mostrarlos como se acordó, como esta codicia. Por lo que necesitamos un plugin de terceros para eso. Un plugin que extiende el poder de Elementor. 16. Uso el plugin EA para añadir la cuadrícula de episodio: Recuerda vimos que tenemos muchos plugins relacionados elementales en los repositorios de plugins. Por lo que dentro de los plugins, agregue el mediodía. Buscaré complementos esenciales. Debe ser el primer resultado, complementos esenciales para elementor. De acuerdo, activemos eso. Entonces aquí vamos. Ahora está en la lista de todos nuestros Plugins instalados. Entonces iremos dentro de los ajustes, y vayamos dentro de los elementos. Por lo que por defecto hay algunos elementos que no se comprueban que necesitaremos. El elemento que necesitamos ahora en este momento es post avaricia. Porque queremos mostrar una cuadrícula como esta. Entonces con Post avaricia, ahora Chet, Vamos a desplazarnos hacia abajo y guardar ajustes. Todas estas son características y elementos que puedes agregar a tu Elementor. Y algunos de ellos son muy cool. Y la mayoría de ellos son gratuitos, mientras que otros son premium tienes que pagar para acceder a ellos. Entonces ahora volvamos a saltar de nuevo a la página donde estamos editando la página de aterrizaje. Y actualicemos la página antes de que la actualicemos. Ahora vamos a controlar R o Command R. Refresca la página para que podamos cargar el plug-in que acabamos de instalar. Muy bien, así que viniendo aquí al lado izquierdo, vamos a derrumbar ese panel. Y ese panel. Vamos a colapsar todos los paneles para ver si se ha cargado. Y ahora aquí vamos. Complementos esenciales para Elementor y todos estos son, todos, estos son los elementos que vimos en el back-end. Ahora, estamos buscando la codicia post. Y esto es lo que buscamos con esta etiqueta EA para complementos esenciales. Por lo que desplazándose hacia abajo aquí. Arrastremos este complemento esencial pausar codicia, y soltarlo justo debajo de los textos. Y notarás que ahora tenemos cuatro episodios mostrando. Entonces lo haremos, lo editaremos para que se vea así. Lo siguiente que queremos hacer es agregar primero ese efecto pincel aquí abajo. Entonces lo que queremos hacer es agregar otra sección de ancho completo como esa. Y para esta sección de ancho completo, Vamos a seguir adelante y seleccionar la sección. Entra dentro divisor en forma de estilo, top. Porque ahora es la parte superior de esta sección, no la inferior. Cepillo de ondas. Y vamos a darle una altura de 16. Pero ahora tenemos que darle este fondo azul. Entonces vamos a seleccionar la sección porque ya tiene ese fondo azul dentro de estilo. Vamos a dar click ahí y vamos a copiar eso. A continuación, haga clic en la sección. Asegúrate de que diga Editar sección aquí arriba. Divisor de forma, M para el color del divisor de forma. Vamos a pegarlo aquí. Impresionante. Todo bien. Entonces ahora vamos a previsualizar los cambios sólo para ver qué tenemos. En lo que va de momento. Aquí está nuestra parte superior. Desplazemos hacia abajo. Entonces ahora vendamos estas avaricia. Entonces seleccionando la codicia. Primero decidamos de dónde queremos sacar nuestros episodios. Y podemos conseguir los episodios por autor. Podemos conseguir episodios por categorías. Podemos conseguir a los autores por etiquetas, formatos, o podemos decidir qué quieres excluir de lo que estamos mostrando aquí. Y ves que tenemos muchas opciones, pero estas están más allá del alcance de esta lección. Podrás aprender más sobre las categorías o las etiquetas finales buscando en Google eso. Entonces mientras esto está seleccionado y tenemos estas opciones aquí, Primero digamos que queremos conseguir, Veamos de dónde estamos sacando nuestros posts. Echemos un vistazo a las categorías de puestos. Por lo que bajo las categorías de puestos, sólo tenemos una categoría. Por impagos. No podemos eliminar esta categoría. Viene con WordPress por defecto para que cualquier publicación o página que no esté categorizada caiga automáticamente dentro de la sección sin categoría, categoría sin categoría. Entonces ahora mismo queremos decir, queremos todos los episodios de uncategorized. Por lo que voy a escribir en categorizados. Por lo que seleccionaré y categorizaré. Y debido a que no hemos categorizado ninguno de nuestros ninguno de estos, automáticamente caen bajo uncategorized. Entonces eso significa que estamos exhibiendo los seis. Puedes agregar tantas categorías como quieras. Por lo que aquí puedes agregar más categorías. Productividad, hit Enter. Y ahora tenemos dos categorías. Entonces si yo, antes que nada guardo esto y luego escribo aquí, por favor ingrese tres o más caracteres. Tan orgullosa. Ya se muestra la productividad y también mostrará publicaciones de esa categoría. Entonces entonces otra vez aquí queremos decir posts por página. Queremos mostrar seis puestos. Y ahora nota que tenemos cuatro columnas y dos filas. Queremos dos columnas y tres filas. Por lo que eso viene bajo la configuración de diseño. Entonces vamos a colapsar la consulta, y vamos a abrir la configuración de diseño. Debajo de columna. Seleccionemos dos. Y luego actualicemos eso. Y vamos a previsualizar los cambios. Y ahí lo tenemos. Entonces vamos a refrescar este control de página. ¿ Estamos actualizando la página para reflejar los cambios en estos. Genial, así que aquí estamos. Entonces lo siguiente que queremos hacer es deshacernos de esta imagen aquí mismo, la imagen del autor, no queremos ver eso. Por lo que seleccionando en cualquier lugar dentro de esta cuadrícula, podemos ir aquí y decir consulta colapsada, luego expandir la configuración de diseño, luego desplazarnos hacia abajo. Y ahora tenemos estas casillas aquí mismo. Entonces podemos decir que no queremos mostrar tal vez no queremos mostrar los huevos son. Y este es el extracto. Por lo que también podríamos decir que no queremos mostrar el nombre del autor, o no queremos mostrar el avatar del autor. Esa es esta imagen. Actualicemos eso. Lo siento chicos, mi internet es un poco lento. Por eso parecen estar descoloridos ahora mismo. Necesitaré refrescar la página para reflejar los cambios. Muy bien, así como eso. Entonces ahora nos hemos deshecho del avatar, esa imagen del autor. También podemos decidir la posición de estos metadatos de estos detalles del Meta. Entonces digamos por ejemplo, encabezado de entrada. Igual que eso. Eso es exactamente lo que tenemos aquí. Y entonces ahora te darás cuenta de que aquí tenemos escuchar ahora eso es básicamente estos leer más. Entonces vamos a seguir adelante y estilo que lea más. Entonces, actualicemos eso por ahora. Y vayamos dentro de estilo para darle estilo al botón dentro de la codicia. Entonces vayamos dentro de estilo, desplázate hacia abajo y busquemos, Estilo de botón Read More. Vamos a expandir eso. Y lo que queremos hacer es darle un color de fondo. Entonces en este momento no está configurado para nada. Nosotros queremos darle este azul. Entonces eso definitivamente son estos azules. Por lo que seleccionaré una de estas secciones con un fondo azul y agarraré ese click azul en cualquier lugar dentro de ahí. Y de lo contrario seleccionaré en cualquier lugar dentro de la cuadrícula es para asegurarnos de que vayamos dentro del estilo Postgres. Y vamos al estilo de botón Read More. Y de nuevo al tipo de fondo. Vamos a cambiarlo así de azul. Entonces ahora tiene ese azul. Pero ahora necesitamos agregar algo de relleno para que el texto no toque los bordes del fondo. Entonces, antes que nada, liberemos ese enlace. Entonces por la derecha, Probemos 20. Y por la izquierda, Probemos 20 años. Bueno, está bien, para arriba y abajo, vamos a darle 55. Entonces para el margen, espacio entre el botón y los demás elementos a su alrededor, aumentemos el espaciado aquí mismo. Por lo que margen superior. Démosle un 20. Y vamos a actualizar eso. Ahora ya que nosotros, vamos, no desactivemos el extracto. Entonces déjenme volver dentro del contenido. Ajustes de diseño dentro. Mostramos extracto. Y ahora te darás cuenta de que no tenemos ningún extracto y podemos añadir eso dentro pose. Vayamos dentro de todos los mensajes. Y si vamos dentro de cualquiera de la publicación y decimos Editar, por ejemplo. Para agregar el extracto, tendríamos que ir dentro de Elementor y creado a partir de ahí. Pero por ahora, usaremos el back-end. Entonces copiaré eso. Y yo entraré aquí y básicamente pegaré que lleva aquí. Entonces actualizaré eso. Y ahora si entramos dentro de estos espacio de trabajo y actualizamos eso. Antes de actualizarlo, quiero refrescar esta página Control R para reflejar los cambios que hicimos aquí en el back-end para reflejarlos en el en Elementor. Si nos desplazamos hacia abajo, notarás que ahora tenemos un extracto, pero está mostrando solo unas pocas palabras. Por lo que seleccionando en cualquier lugar dentro de aquí, dentro de la cuadrícula, podemos venir, colapsemos la consulta y expandamos la configuración de diseño. Y aquí dentro podemos decidir cuántas palabras de extracto necesitamos. Entonces mostrar extracto luego palabras extracto, digamos 30 palabras. Y ahora muestra más palabras. Entonces lo haré, seguiré adelante y repetiré lo mismo para el resto del episodio. Por lo que todos tienen extractos. Entonces actualicemos eso. Entonces mientras se está actualizando, iré a la salida de back-end desde ahí. Entonces ahora lo siguiente es esto. Abramos eso. Déjame abrir eso en una nueva pestaña y simplemente pegarlo ahí. Entonces entraré aquí, aseguraré de que esto esté copiado. Y luego aquí, Episodio 2, lo pegaré ahí y actualizaré el episodio tres. Pega eso ahí y un episodio de datos para pegar eso ahí dentro y actualiza ese episodio 5. Pega eso ahí dentro y actualiza que estén bien. Ahora, permítanme refrescar esta página, nuestro espacio de trabajo, y ver si el cambio se está reflejando aquí. Y mientras hacemos eso, déjame cerrar estas pestañas extra. Está bien, así que echemos un vistazo a lo que tenemos. Entonces esto es lo que tenemos. Ya está empezando a tomar la forma de nuestra página de referencia. Entonces sigamos adelante y previsualicemos los cambios a casa. Entonces ya se ve bien. Pero claro que podemos hacer mucho más. Entonces, en primer lugar, te das cuenta de que esto tiene algunas esquinas redondeadas y tiene una sombra de caja que hace que el episodio destaque del fondo azul, realmente los hace pop. Adelante y hagamos eso. Entonces mientras estamos selectos, mientras esto está seleccionado, haga clic en cualquier lugar es lado. Vamos adentro estilo, estilo post grid. Vayamos al radio fronterizo y dámoslo bien, el enlace sigue activo. Démosle tal vez un abogado de 10 años suficiente y ya está tomando forma. Lo siguiente que queremos hacer es darle al propio botón una esquina redondeada también. Así que así. Entonces vamos a colapsar esa codicia post e ir al estilo de botón Read More. Para el radio fronterizo mientras el enlace sigue activo, Vamos a darle un cinco. Y ahora tiene esa esquina redondeada. Actualicemos eso. Adelante y colapsemos. Read More estilo de botón. Y volvamos al estilo de las rejillas postales. Démosle esa sombra de caja haciendo clic en ese icono Editar ahí mismo. Y notarás que ya está estallando. Pero quiero reducir esa opacidad a algún lugar. En algún lugar ahí para que no sea tan obvio. Ahí está, pero no es tan obvio. Entonces sigamos adelante y abramos un adelanto. A ver lo que tenemos. Por lo que ahí lo tenemos. Eso es lo que tenemos hasta ahora. Ahora bien, este episodio parece ser un poco más grande porque este es el primero, si recuerdas, este es un primer episodio que creamos y lo creamos con Elementor. Entonces si hacemos clic en Leer más, se está tomando todo ese texto de aquí, a partir del Episodio 6, hasta aquí. Si volvemos, notarás que aquí tiene todo ese sexo mientras estos otros parten de cómo puedo crecer? Entonces por eso parece ser un poco más grande, pero eso no te debe preocupar. Entonces lo siguiente que queremos hacer es agregar este botón aquí mismo. Y para hacer eso, recuerda, un Elementor, siempre podemos reciclar cosas. Entonces vamos a copiar esto, copiar ese final. Bueno, esta codiciosa aún seleccionada. Si quieres pegar algo, siempre selecciona el elemento bajo el que quieres pegar el elemento al que quieres ritmo. Entonces debido a que queremos pegar el botón debajo del grado, necesitamos seleccionar la cuadrícula y pegar ahí mismo. Por lo que el botón irá por debajo de la elemental, haga clic derecho y lo pegue. Entonces vamos a hacer clic en el botón justo aquí, y luego vamos a centrarlo. Y vayamos adentro avanzado mientras todavía estamos seleccionados. Y vamos a darle un margen superior. Quitemos ese eslabón y le demos un margen superior o 50. En un margen inferior de tal vez 50 o a la derecha. Entonces actualicemos eso. Vamos a previsualizar los cambios. Y empecemos a desplazarnos para ver qué tenemos hasta ahora. Necesitaremos algún margen aquí arriba. Pero me gusta lo que tenemos actualmente. Se ve impresionante ya. Es casi similar a lo que tenemos aquí. Dado mod sum, podemos llegar a algo mejor. Entonces, sumemos este margen justo aquí en la parte superior. Entonces vamos a seleccionar esta sección. Y vayamos dentro de la pestaña Avanzado. Y vamos a liberar eso. Y entonces vamos a darle un relleno superior de tal vez 50. Así. Entonces digamos captación. Repasemos los cambios. A mí me gusta. ¿ O bien? Entonces lo siguiente que queremos hacer es crear esta sección aquí mismo, que debería ser muy fácil porque solo reciclaremos los bloques de texto que ya tenemos en el botón de la imagen. Entonces hagámoslo en la siguiente lección. 17. Añadir la sección de la sección de la de referencia: Bienvenido de nuevo a otra lección conmigo puede Besser. Terminamos esta sección de grado de episodio. A continuación queremos crear estos sobre la sección Alex. Y esto debería ser bastante sencillo porque estaremos duplicando los elementos que ya tenemos en nuestra página web. Entonces para hacer eso, primero que nada crearé una doble columna aquí mismo. Sección de doble columna así. Y notarás que tenemos un margen justo aquí arriba y abajo. Entonces démosle ese margen por adelantado. Por lo que seleccionando la sección de doble columna y entrando avanzado, Quitemos ese enlace. Y vamos a darle un margen superior de un 100 y un margen inferior sobre un 100. De acuerdo, así que ahora sea cual sea el contenido que agreguemos tendrá estas habitaciones en la parte superior e inferior. Entonces lo que tenemos que hacer a continuación es dar click a ese Plus y seleccionar Imagen. Yo quiero dejar caer esta imagen de Alex ahí dentro. Inserta eso. Por supuesto que tendrías las lindas imágenes de ti mismo de Estados Unidos o, o si estás creando la página de aterrizaje para un cliente, les aconsejarías que te proporcionen bonitas imágenes. Sigamos adelante y duplicemos este rubro. Y arrastrémoslo ahí dentro. Arrastrémoslo y soltémoslo ahí dentro. Y digamos de nuestra próxima copia que seleccione eso, pegue esto ahí dentro. También duplicemos eso. Arrastra, arrástrala hacia abajo, suéltala ahí. Ahora copia eso. Entra aquí. Si bien esto está seleccionado, seleccionaré todo eso, eliminaré y lo pegaré ahí. Y entonces qué tenemos después? Un botón poniéndose en contacto. Entonces entraremos aquí. Yo copiaré eso. Y voy a hacer clic con el botón derecho dentro de estos elementos, estos textos elemento y pegar para que el botón vaya por debajo de él. Después los cambiaremos mientras se selecciona esto. Entra, ponte en contacto. Y luego cambiaremos ese icono tal vez un teléfono e insertaremos eso. Y digamos que queríamos antes de conseguir tal actualización que. Repasemos los cambios. Desplazemos hacia abajo. A mí me gusta hasta ahora. Entonces aumentemos el margen en esta columna para que el texto se mueva un poco más bajo que donde está ahora mismo. Por lo que al seleccionar esta columna, haga clic derecho Editar Columna, avanzado. Rompe ese vínculo. Y vamos a darle un margen superior de 50. Y vamos a darle un 150. Ahora digamos un 100. Y aumentemos el tamaño de Alex. Y digamos que actualicemos eso. Seamos realmente cambios. Súper impresionante. A mí me gusta lo que tenemos hasta ahora. Entonces ahora lo siguiente que queremos crear es este área de llamada a la acción aquí mismo. Y esta es una parte muy importante en cualquier página de aterrizaje. Hay elementos que están landing page debe tener para que sea una página de aterrizaje efectiva en uno de ellos es formar una forma de recopilar datos de clientes o usuarios. También necesitamos botones que sean conspicuos. Y notarás que hemos estado usando botones que son muy conspicuos, fáciles de ver porque una página de aterrizaje está destinada a hacer que la gente tome acción. Por eso necesitamos tener llamado a las acciones. Este es un llamado a la acción. Escucha este episodio. Entonces sigamos adelante y creemos estas formas en la siguiente lección. Nos vemos en breve. 18. Instalación del plugin de formularios necesarios: Bienvenido de nuevo a otra lección impresionante conmigo puede Besser. Entonces en este momento hemos llegado a un punto en el que hemos creado todas estas secciones. Y sólo tenemos dos secciones más para ir. Tenemos esta sección de llamada a la acción que tiene un formulario y tenemos la sección de pie de página. Entonces ahora mismo, sigamos adelante y creemos esta forma. Y para crear el formulario estará usando un impresionante plugin formado por terceros llamado formulador. Entonces vayamos al backend e instalemos para Ministro para que podamos crear estos Foro. Por lo que dentro del tablero, entraré dentro de Plugins, Añadir Nuevo. Entonces aquí, voy a escribir formulador. Y estos por WPA AMU dev, instálalo. Ahora. Vamos a inactivarnos. Y ahora tenemos cuatro minutos listados bajo plugins instalados. Por lo que lo encontrarás casi en la parte inferior de tu menú de la izquierda, aquí mismo. Por lo que se cierne sobre canciller y entra dentro de formularios. Ahora si quieres aprender más sobre cómo crear formularios de WordPress para tu sitio web, solo tienes que seguir adelante y buscar cómo crear formularios en WordPress en YouTube. Y encontrarás mucho tutorial que te muestra cómo hacer eso. Pero ahora mismo estamos usando para Monitor, que es mi plugin de formulario favorito. Entonces sigamos adelante y creemos un formulario con formulador. En la siguiente lección, nos vemos en breve. 19. Crea un formulario con Forminator: Por lo que diré Crear. Ahora para nuestro propósito, queremos inscribir personas a nuestro boletín que puedan estar recibiendo nuestros correos electrónicos de vez en cuando. Entonces digamos que el boletín de noticias suscríbase y continúe. Entonces démosle un formulario de registro de nombre, y vamos a crearlo. Entonces el objetivo aquí es crear un formulario con formulador, y luego lo mostraremos en el front end de esta página usando un código corto y veremos cómo hacerlo. Por lo que ahora que se ha creado el formulario, como se puede ver por el formulario de registro de nombre. Y tenemos los campos que vienen por defecto porque era una plantilla que seleccionamos. Cuenta con el nombre de pila, correo electrónico y el botón de suscripción. Y si lo previsualizamos, así es como se ve. Nombre, correo electrónico suscribirse, nombre, correo electrónico suscribirse. Y si hago clic en FirstName, se expande y muestra esos detalles de marcador de posición que acabamos de ver FirstName y todos estos, pero esto, pero esta clase no se trata de cómo crear formularios. Entonces solo tienes que saber que puedes editar estos formulario para tener los detalles que quieras. Se puede cambiar este titular del lugar para saber where.com aplicar eso. Y si previsualizamos eso, el marcador de posición ahora para la entrada de correo electrónico será Kim en Nowhere.com. Y podemos cambiar esos detalles y podemos agregar más campos. Pero seguiré adelante y publicaré esa forma justo como es. Y cuando lo publique, te darás cuenta de que tenemos estos pop-up que presenta esta opción Copiar. Podemos copiar este código corto. Entonces vamos a copiar ese código corto y obtienes este mensaje. El código corto se ha copiado con éxito. Y si vamos dentro de nuestro espacio de trabajo, y justo debajo de estos Acerca de la sección, Abramos. Vamos a crear una nueva sección y debería ser una columna doble. Déjame cerrar esta ventana. Entonces lo que necesitamos es una doble columna. Y dentro de estas doble columna, queremos agregar dentro de la columna derecha un código corto. Código corto. Así que arrástrelo y suéltelo ahí y antes de hacer clic en cualquier otra cosa mientras esto está seleccionado. Ahora podemos pegar ese código corto aquí. Estoy hablando de estos código corto que acabamos de copiar del formulador. Pega ahí dentro, y haz clic en Aplicar. Entonces digamos actualizar y previsualizar los cambios. Entonces, desplazémonos hacia abajo y veamos qué tenemos actualmente. Entonces así es como se ve ahora mismo en este momento. Tendremos que hacerle un poco de estilo. Pero sobre todo necesitamos tener estos antecedentes. Empezaremos con estos brocha superior aquí mismo. Y para ello, lo que tenemos que hacer es seleccionar esta sección que tenga los detalles Acerca de ALEKS. Seleccione la sección en sí. Y quitemos el margen inferior para que ambos estén apegados el uno al otro. Y luego dentro de esta sección de edición, vamos al divisor en forma de estilo y luego abajo. Seleccionemos ondas pincel, y déjame tabular y agarrar ese verde aquí mismo. Copiar eso. Volvamos aquí. Y mientras todavía estamos bajo Editar sección, estilo, divisor en forma, fondo, Vamos a cambiar el color ahí a ese verde. Pégala ahí. Ese es el cepillo de parada aquí mismo. Entonces son dos, sepárela de esta imagen aquí mismo. Adelante y agreguemos algo de relleno a esta imagen. Por lo que seleccionando la imagen en sí. Avanzado. Sueltemos ese relleno y luego relleno de fondo. Hagámoslo hasta que estemos satisfechos. Le daré un 100. Vamos a darle 110. Ahora le dan 120. Y luego volvamos dentro del divisor de forma de estilo. Déjame seleccionar ahora vamos adentro. Editar sección, divisor en forma, fondo. Yo quiero darle una altura de 60. Año. Así. Volvamos a copiar la pantalla. Vamos a seleccionar esta sección, Editar estilo de sección, fondo, y vamos a darle ese verde. Actualizar el color. Y entonces vamos a crear otra sección aquí mismo. Podemos crear otra sección para crear estos pincel inferior. O podemos simplemente duplicar estos. Recuerda esto, Vamos a duplicar eso. Y vamos a arrastrarlo ahí abajo. Entonces vamos, mientras aún está seleccionado, vamos al divisor en forma de estilo. Todavía tengo ese verde seleccionado, así que lo pegaré aquí. Y luego actualizar eso. Analicemos los cambios. Anular. Eso es súper impresionante. Entonces ahora saltemos hacia un lado y agarremos este texto. Copiar eso. Entrémonos aquí. Y aquí dentro, podemos sumar este rubro. Y yo pegaré, pegaré el texto ahí mismo. Ahora agarra esta descripción aquí mismo, copia eso. Yo, voy a agarrar a ese editor de texto. Y aquí dentro seleccionaré todo, lo eliminaré, y luego pegaré lo que había copiado desde el otro lado. Actualizar eso. Y ahora notarás que el color de la fuente aquí es estos azules. Entonces déjame solo agarrar ese azul del lado del vendedor. Copiar eso. Y entremos aquí. Si bien esto sigue seleccionado, iré al color del texto de estilo y pegaré eso ahí. Ahora, ve y selecciona este estilo de color de sexo, pega eso ahí dentro. Y quiero cambiarlo a Montserrat. Por lo que mientras aún es topografía seleccionada, Montserrat. Y entonces sólo quiero darle un peso de fuente de 800. También aumentemos el tamaño de estas fuentes, quería ser más grandes, más conspicuas. Y también cambiemos estos por tipografía de Montserrat. Hagámoslo talla 16. Actualizar eso. Entonces vamos a previsualizar los cambios. Desplácese hacia abajo y vea qué tenemos ahí abajo. Súper impresionante. A mí me gusta lo que estamos teniendo hasta ahora. Entonces ahora aumentemos el margen aquí mismo. Entonces hazlo un poco más presentable. Y eso lo hacemos seleccionando esta sección. Vamos adentro a vasto. Puede aumentar el relleno, acolchado superior y ver tu satisfacción. Creo que ese es un buen tamaño. Hagámoslo 45 y actualicemos eso. Entonces vamos a previsualizar los cambios. Súper impresionante. Entonces aumentemos el espaciado entre estas dos columnas. Porque como puedes ver aquí mismo, hay un bonito espaciamiento entre ellos. Por lo que seleccionaré esta sección que está sosteniendo las dos columnas e ir dentro de diseño. Brecha de columnas. Digamos más amplio. Y entonces solo jalemos este pedacito hacia el centro y actualicemos eso. Entonces vamos a previsualizar los cambios. Eso me gusta. Hasta ahora se ve impresionante. No me gustan los bordes alrededor de los campos de entrada. Parecen extraviados. Yo quiero que sea plano. Y por plano me refiero a no fronteras, sólo de fondo simple, llano. Entonces volvamos dentro de nuestro canciller y hagamos esos cambios ahí mismo, porque no creamos estos formularios usando Elementor. Creamos ya sea en el back-end justo aquí dentro del formulador. 20. Styling la forma de forminator: Por lo que hacemos los cambios a cómo aparece yendo dentro de la pestaña de apariencia de formulador formas. Entonces vamos a dar click dentro de la apariencia de nuestra forma. Y una vez que haces clic en apariencia, aquí tenemos diferentes opciones con las que podemos jugar y afectar cómo bucla forma. Entonces, por ejemplo, notarás si hacemos clic plano aquí, esa pantalla quita los bordes. Si hacemos clic en Negrita, añade bordes muy audaces, material y ninguno. Entonces quiero ir con piso, luego actualizar eso. Entonces si previsualizamos los cambios, notan ahora nuestros, nuestros campos de entrada no tienen fronteras. Y eso es bueno. Entonces lo siguiente que queremos hacer es editar los colores de nuestras fuentes. Entonces como aquí, nuestra fuente es blanca. Podríamos querer darle un color más oscuro como este color. Entonces lo que queremos hacer es ir dentro de los colores justo debajo del estilo de diseño. Segunda sección, Colores, Personalizado. Y luego tenemos los diferentes campos de formulario de entrada. Tenemos todos los campos que pudieras tener en tu formulario se pueden editar aquí. Entonces lo que nos interesa por ahora son los conceptos básicos de campo. Y dentro del campo lo básico es donde tenemos cosas como la etiqueta, el nombre y las etiquetas de direcciones de correo electrónico. Puedes editar los colores dentro aquí. Entonces podemos decir, queremos que sea este azul. Copia ese azul pegado ahí dentro. Entrar. Entonces vamos a dar clic en Actualizar. Y si lo previsualiza, las etiquetas ahora tienen ese azul. Entonces sigamos adelante y veamos qué más podemos cambiar. Vamos dentro de nuestra página de Elementor aquí mismo, y seleccionemos el elemento de código corto que está sosteniendo nuestra forma. Y haga clic en Aplicar o a la derecha. Entonces vamos a hacer clic en la vista previa de los cambios para que podamos echarle un vistazo. Desplazemos hacia abajo y veamos qué tenemos hasta ahora. Entonces esa es nuestra forma de estaca en una forma diferente hasta ahora. Y ahora notarás que este formulario, nuestra página de referencia, tiene esquinas redondeadas y el propio botón tiene esquinas redondeadas. Pero el nuestro no tiene eso. Abrámoslo. El nuestro tiene rincones muy agudos. Entonces, ¿cómo logramos esas esquinas redondeadas? Por lo que cuatro minutos o nos proporciona una manera de agregar CSS adicional y agregar CSS significa hojas de estilo en cascada. Por lo que cada página web que ves en Internet ha sido peinada y dada esa apariencia por CSS. Por lo que podemos agregar algo de CSS adicional comprobando eso. Y ya nos han proporcionado algunos selectores básicos aquí. Ahora en caso de que no conozcas CSS, realmente no necesitas entender nada aquí porque eso es algo que puedes aprender más adelante. Esto es solo para ayudarnos a lograr algo que el plug-in del formulador no proporciona fuera de la caja. No lo tienen, tienen muchas opciones aquí mismo para editar haciendo clic en cosas, pero no podemos hacer clic en alguna parte y hacer que estas esquinas sean redondeadas. Tenemos que usar algún código. Y esa es una de las cosas buenas de WordPress. Eres capaz de ir más allá de lo que te da un tapón y agregar tu propio código. Y los plug-ins incluso te proporcionan un lugar para lanzar tu código y se combinará con su código y te proporcionará con los dos, realmente estás buscando. Entonces en nuestro caso ahora mismo, quiero seleccionar nuestros campos de entrada. Y tenemos un selector aquí llamado input. Entonces si hago clic en eso, seleccionará todas las entradas, todos estos campos de entrada. Y cualquiera que sea la regla que le dé dentro estos dos corchetes rizados se aplicará al campo de entrada. Por lo que ahora mismo quiero darle un radio de borde que sea un poco redondeado. Por lo que border-radio 50 pixels. Entonces si lo previsualizo ahora, notarás que nuestros campos de entrada tienen una esquina redondeada porque los hemos seleccionado con nuestra entrada selector aquí y dándole alguna regla que se supone que se le aplica. Entonces vamos a actualizar eso en ver qué tenemos en el front end. Actualizar eso. Entonces vamos a la parte delantera. Desplácese hacia abajo, seleccione el formulario y aplique esa anulación. Así que vamos a seguir adelante y hacer clic en Vista previa de cambios. Y las esquinas ahora están redondeadas, pero nuestro botón aún no está redondeado. Ahora, ahora mismo por el momento, no tenemos un selector para el botón de envío dentro de estos plug-in, hay otra forma de localizar ese selector y eso es mediante el uso de las herramientas de desarrollo. Pero no quiero profundizar en hacer eso. Entonces ahora mismo podemos simplemente dejar el botón así. Podemos dejar el botón así porque no quiero empezar a meterme aquí dentro de las DevTools y hablar de cómo encontrar el selector que buscas porque eso está más allá del alcance de esta lección. Entonces, solo dejemos el botón así. A mí me gusta hasta ahora. Pero quiero acercar esto un poco más juntos solo para aumentar su altura. Veamos qué pasará cuando actualicemos la página. Desplazemos hacia abajo. Sí. No, volvamos al original. Aumentemos el tamaño de este rubro sólo para que sea más llamativo. Y vamos a actualizar eso. Entonces vamos a previsualizar los cambios. O cabalgar. A mí me gusta hasta ahora. Ahora terminamos con esta sección de llamada a la acción. Usted es capaz de recopilar datos de usuario. Podrás apuntar a personas a tu lista de correo y mantenerte en contacto con ellas y comercializar cosas con ellas. Lo siguiente que queremos hacer, ya que finaliza la versión de escritorio de la página de aterrizaje es el pie de página. Entonces vamos a crear el pie de página en la siguiente lección. Y después de eso, seguiremos adelante y haremos que todo el sitio web receptivo en dispositivos móviles, de escritorio y tabletas. Entonces vamos a crear el pie de página en la siguiente lección. Nos vemos en breve. 21. Construye el pie: Ya casi terminamos con la versión de escritorio de esta página de aterrizaje. La única parte que queda es la comida es así que sigamos adelante y saltemos en el tablero y creemos el pie de página. Iré dentro de apariencia, Elementor, constructor de cabecera y pie de página. Y recuerdas que creamos una barra de navegación. Por lo que esta vez estamos creando una carpeta. Entonces haz clic en Agregar nuevo. Y podemos seguir adelante y darle un nombre. Entonces pie de página. Como de costumbre, las plantillas deben ser Elementor ancho completo, sin barra lateral para el estiramiento de ancho para el diseño de contenido, deshabilitar el pie de página deshabilitado titulado Encabezado móvil, cabecera principal. Y publiquemos eso. Entonces lo siguiente que queremos hacer es establecer el tipo de plantilla debe ser un pie de página, debe estar disponible en todo el sitio web, debe ser editable por todos. Y sigamos adelante y hagámoslo. Simplemente me gusta habilitar estos porque a veces podría querer usar el Canvas en lugar de la opción estirada de ancho completo. Y vamos a actualizar eso. Entonces editemos con Elementor. De acuerdo, Así que aquí estamos. Estamos trabajando en el pie de página. Y notarás que lo que tenemos son cuatro elementos básicos. Un logotipo, que es un elemento de imagen, un elemento de menú que ya creó. Entonces tenemos un elemento de párrafo y estos iconos aquí mismo. Vamos a seguir adelante y crear una sección de triple columna. Entonces aquí estamos. Seleccionaré esta triple columna. Y en el medio aquí, vamos a seguir adelante y añadir un nav. Recuerda que teníamos un nav por HF ser Header Footer builder, Nav Menu. Ahora por defecto, va a la izquierda. Entonces lo que quería facilitar, ir a Layout y alineación. Ponga su, ponlo al centro. Aquí dentro. Añadamos un elemento de imagen. Adelante y agarremos eso. Uno de los logotipos que creamos para la carpeta. Creo que debería ser éste, la versión pequeña. Insertar medios. Y sigamos adelante e insertemos los iconos de las redes sociales aquí mismo. Dejemos eso ahí dentro. Y vamos a ampliarlo un poco. Por lo que dentro del estilo, mientras esto todavía está seleccionado, vamos a reducir un poco el tamaño. Y alinémoslos a la derecha. Actualicemos eso y previsualicemos los cambios. Entonces esa es la comida que, así se ve. Tenemos que empujar estos hacia abajo, como ya he mencionado. Tan bueno, siguen siendo seleccionados acolchado avanzado. Top. Empujémoslo a algún lugar ahí. Entonces actualice eso. Ahora lo siguiente que queremos hacer es hacer clic en este ícono aquí mismo para que podamos agregar un editor de texto y soltar ese texto ahí. Entonces bajo estilo, mientras esto sigue activo, alinémoslo al centro. Sigamos adelante y copiemos ese texto de derechos de autor ahí mismo. Copiar eso. Y mientras esto todavía está seleccionado, vamos al contenido, seleccionemos todo eso y eliminarlo, y peguemos eso ahí. Actualización. Entra al estilo de esta topografía, y hagamos esta talla 12. Ahora vamos a seleccionar el menú de navegación. Y vayamos dentro de estilo. Debajo de Menú Principal tipografía. Cambiemos la tipografía a Montserrat y actualicemos eso. Ahora en el hover, este es el verde que viene por defecto de Elementor. Este no es el verde que queremos. Entonces solo tocaré este documento y copiaré ese verde. Y tab de nuevo al menú. Selecciónelo. Y luego dentro de estilo tipografía hover. Voy a cambiar ese color por el color que acabamos de copiar. Y ahora tiene esa bonita actualización verde que vamos a previsualizar el pie de página o el viernes. Ahora que la carpeta está lista, no creo que quiera hacer más cambios a estos iconos. Creo que se ven increíbles, pero puedes jugar con ellos seleccionándolos. Y aquí, haciendo todos los cambios que quieras bajo Editar iconos sociales. Lo que quiero hacer es Salir a Dashboard. Porque tengo todos mis cambios guardados. Entonces iré por dentro de las páginas. N. Homepage era una es nuestra página de aterrizaje, por supuesto. Por lo que quiero verlo. Entonces cambiemos las pestañas a esa página. Entonces aquí estamos, de arriba a abajo, Vamos a desplazarnos hacia abajo. Entonces nuestro 40 luce impresionante, pero necesitamos algún margen entre los dos. Por lo que podemos agregar un margen inferior a esta sección de pincel o podemos agregar un margen superior a la carpeta. Entonces para editar eso, volveré dentro de la lista todas las páginas, y diré Editar con Elementor, pero quiero hacer clic derecho en eso y abrir el enlace en una nueva pestaña y cambiar a esa pestaña. Para que a partir de ahí podamos hacer los cambios. Entonces vamos a desplazarnos todo el camino hasta el fondo. Y lo que notaremos es que necesitamos algún margen aquí en la parte inferior. Pero el margen que necesitamos 0s en este pincel inferior. Entonces vamos a seleccionar esa sección de edición. Vámonos a Avanzado y luego liberemos ese enlace. Añadamos el margen inferior para ser 50. Ahora digamos un 100. Actualizar eso. Y vamos a previsualizar los cambios. Desplazarse todo el camino hasta la parte inferior. Ahora tenemos algún margen bonito aquí entre los dos. Súper impresionante. Ahora, acabo de recordar que se suponía que teníamos que hacer algo con la barra de navegación para que cuando nos desplazamos, nunca desaparezca, siempre se quede en la parte superior. Entonces sigamos adelante y hagamos eso en la siguiente lección. Entonces te veré en breve. 22. Haz el caligrafía de navbar: Bienvenido de nuevo. Ya es hora de hacer el encabezado pegajoso. Empecemos. Entonces saltemos justo dentro del tablero. Vamos adentro aparece pie de página de encabezado, constructor. Y editemos la barra de navegación con Elementor. Entonces haré clic derecho y editaré la barra de navegación con Elementor y cambiaré a esa pestaña. Entonces aquí estamos en el espacio de trabajo de la barra de navegación. Y lo que queremos hacer es dejar que la sección edite la sección e ir adentro avanzado. Y recuerda uno de los plugins que instalamos en el backend, déjame simplemente cambiar al backend e ir dentro de plugins, plugins instalados. Uno de los plugins fue efectos de encabezado pegajoso para Elementor. Entonces dentro de aquí, si bien esto sigue seleccionado y esto lee Editar sección avanzada, notarás que aquí tenemos efectos de encabezado pegajosos. Ampliar eso. Tienes esta opción para habilitarla, y eso presenta más opciones aquí abajo. Entonces lo que queremos hacer es primero cambiar la distancia de Skoll a una. Esa es la cantidad de desplazamiento que quieres antes de la cabeza o te vuelves pegajoso. Entonces lo que necesito hacer aquí es cambiar la distancia de desplazamiento a uno. Y luego veamos ¿qué más tenemos aquí? Encabezado transparente. No, no queremos que se vuelva transparente. Por lo que queremos mantener el color azul incluso cuando es pegajoso. Lo que quiero hacer es encender eso, encender. Y para el color, quiero tabular aquí y escoger este color azul. De nuevo, copia esa pestaña aquí atrás, y pega ahí dentro. Y actualizar eso. No quiero encoger el encabezado ni el logotipo en scroll. Yo sólo quiero que sigan siendo del mismo tamaño. Entonces vamos a previsualizar lo que tenemos. Pero claro que no podremos ver la pegajosidad porque estamos previendo la propia barra de navegación. Por lo que necesitaríamos una página que sea desplazable. Entonces veamos, veamos eso en una nueva página de pestaña que es desplazable. Para que podamos ver este efecto Tiki. Entonces ahora empecemos a desplazarnos y notemos qué sucede con el encabezado. Por lo que queda pegajoso. No importa cuánto lo desplazemos, siempre será visible para el usuario y podrán navegar rápidamente por el sitio web. Entonces eso es eso, eso marca el final de esta sección de escritorio. Lo siguiente que queremos hacer facilidad ahora hacen que toda la página de aterrizaje receptiva en escritorio, móviles y tabletas. Te veré en breve. 23. Ayúdame a enseñar a los estudiantes a 10,000: Hola mi amigo. En primer lugar, solo quiero decir muchas gracias por acompañarme en esta clase y elegir aprender de mí. Y también quiero decir felicitaciones por llegar tan lejos en la clase. El hecho de que hayas llegado tan lejos en la clase significa que estás ganando valor de la clase. Y así te agradezco mucho y espero que estés disfrutando de la clase en sí. Dicho esto, necesito tu ayuda. Tengo la misión de enseñar al menos a 10 mil empresarios como tú a usar elementary para construir sus propios sitios web o landing pages para vender sus productos. Y aquí te mostramos cómo puedes ayudar. Se ve cuando un nuevo alumno se une a una clase en Skillshare y luego le gusta esa clase y deja una reseña. Ayuda a otros alumnos a saber qué esperar de la clase. Y cuando una clase está recibiendo muchas críticas de los estudiantes, Skillshare dice: Oye, ¿sabes qué? Esta clase está recibiendo mucho compromiso y muchas críticas por parte de los estudiantes. Por lo que debe ser de ayuda. Por lo que debe ser útil. Y así empujémoslo hacia arriba en la biblioteca para que sea más descubrible por los nuevos estudiantes. Por lo que el algoritmo Skillshare empuja esa clase hacia arriba y la hace más visible, más descubrible para los nuevos estudiantes. Porque ha estado recibiendo críticas positivas. Y ahí es donde entran ustedes. Por favor, únete a mí en esta misión y me ayudó enseñar al menos a 10 mil estudiantes cómo usar Elementor, cómo construir hermosas landing pages, sitios web funcionando dejando una reseña en esta clase y haciéndoles saber qué esperar de esta clase. Sólo te tomará unos dos minutos y ya está. Pero tu reseña contribuirá en gran medida a ayudar a los nuevos alumnos, los futuros estudiantes, a saber qué esperar de la clase. Clase cumple con tus expectativas. ¿ Superó tus expectativas? Si tienes alguna pregunta, recuerda, siempre puedes dejarlas en el área de discusión debajo de este video y yo podré ayudarte. Siempre respondo a cada pregunta o comentario que los alumnos dejan en cualquiera de mis clases. Y con eso dicho, sólo quiero decir disfrutar de la clase y nos vemos en la siguiente lección. Paz. 24. Descripción del diseño responsivo de diseño: Entonces ya casi terminamos con nuestra página. Ya lo hemos diseñado para el escritorio y se ve impresionante en el escritorio. ¿ Cómo se ve en tabletas y dispositivos móviles? Entonces para ver cómo luce en otros dispositivos, tenemos dos opciones. Nosotros vamos a usar. Se construye en visor de dispositivos elementales, función de diseño responsive. Y te mostraré cómo hacer eso. O también podemos utilizar las DevTools del navegador. Y quiero mostrarles eso rápidamente antes de saltar a Elementor. Entonces mientras seguimos en su página de aterrizaje, quiero golpear Control Shift. I. Eso traerá a la altura las DevTools. Cada navegador tiene estas DevTools. Y por si acaso el tuyo está en la parte inferior justo aquí, no te preocupes por eso. Siempre puedes cambiar dónde se encuentran sus herramientas haciendo clic en este menú aquí y eligiendo cualquier opción aquí. Entonces si elijo esto, irá al fondo. Simplemente lo dejaré justo ahí por ahora. Ahora vamos, pongámoslo en el lado derecho. Y luego para ver cómo se verá la página de aterrizaje en diferentes tamaños de dispositivo, podemos entrar en modo responsive. Alternar barra de herramientas del dispositivo. Deberías ver este icono. Si haces clic en eso. Ahora tenemos todas estas opciones aquí arriba para ayudarnos a imitar diferentes tamaños de dispositivo. Entonces si hacemos clic en este menú desplegable justo aquí que tiene responsive, tenemos modo responsive y responsive significa que podemos arrastrar Pantalla manualmente para aumentarla de tamaño. Y verás las dimensiones cambiando aquí en tiempo real. También contamos con presets de diferentes dispositivos. Hagamos clic en Galaxy S five para ver cómo se verá la página de aterrizaje en ese dispositivo. Vamos a seguir adelante y hacer clic en un iPad y ver cómo se verá en un iPad. Y podemos aumentar el zoom justo aquí solo para acercarlo. Entonces así es como se ve en un iPad. ¿ Qué tal en un iPhone X? Eso es lo que debería parecer un iPhone X. Y notarás que tenemos este menú de hamburguesas aquí mismo. Y cuando hacemos clic tiene estas opciones, la, la barra de navegación. Pero tenemos que hacer algo al respecto porque no se ve bien. Actualmente. Desplácese todo el camino hacia abajo y vea cómo se ve el pie de página. Entonces así es como se ve la foto. También tenemos que hacer algo al respecto. Básicamente, creo que el sitio web ya está en buena forma, sólo unos cuantos trucos, y lo tendremos luciendo bien en dispositivos móviles. Tengamos un 100 por ciento ahí. Entonces ahora para salir del modo de diseño responsive, vuelve a hacer clic en ese mismo icono aquí mismo, y los peajes de muerte, y luego cerrar las herramientas de desarrollo. Y entonces ahora queremos meternos dentro del modo de edición o espacio de trabajo de Elementor. Entonces mientras seguimos en esta página, subiré aquí y si hago click eso abrirá estos espacios de trabajo. Y si pasamos por aquí y hacemos clic en la barra de navegación en su lugar, abriremos el espacio de trabajo de edición de la barra de navegación. mismo caso aplica al pie de página. Si hacemos click, eso será llevado al lugar donde empezaremos a editar el pie de página. Entonces empecemos con la barra de navegación. Entonces te veré en breve. 25. Navbar, naval móvil responsivo: Bienvenido de nuevo a la parte de diseño responsive de esta clase. Ahora para empezar a usar elementales incorporados en las características y herramientas de diseño responsive tendrán que saltar al modo de edición. Y así voy a flotar por aquí. Y si hago clic en Editar con Elementor se llevará directamente a editar la página en sí, el contenido principal, la sección de héroes, y el contenido principal del cuerpo. Pero si pasamos por aquí y hacemos clic en navbar en su lugar se llevará al lugar donde estaremos editando eso. Ahora Bar, Sólo. mismo caso aplica al pie de página. Entonces lo primero que queremos hacer es editar barra de navegación porque queremos empezar por hacer que la barra de navegación sea receptiva o correcta. Entonces aquí estamos. Podemos editar la barra de navegación y hacerla como pasiva. Entonces para empezar, lo primero que queremos hacer es bajar aquí y hacer clic en este icono del modo responsive para activar el modo responsive. Y un nuevo aviso de que hay una barra pop-up justo aquí en la parte superior con todas estas opciones. Y como puedes ver, tenemos una tableta, tamaño de tableta, y un tamaño móvil. Queremos empezar por mirar cómo se ve la barra de navegación en las pantallas móviles. Entonces en una camarilla que, así se ve. No se ve del todo presentable. Entonces lo primero que queremos hacer es empujar el logo a la izquierda y este menú a la derecha. Ahora, una cosa que hay que tener en cuenta es que se trata dos columnas alojadas dentro de esta sección. Cambiemos el modo de escritorio por un segundo. Entonces recuerda, esto de aquí es una sección de doble columna. Tiene una columna, dos columnas. Y así ocupa un 100 por ciento de la pantalla. Por lo que esencialmente estas dos columnas se dividen en porcentajes de ese 100%. Por lo que esto podría ser del 20 por ciento en estos podría ser del 80 por ciento. Entonces cuando cambias a dispositivo móvil para llevar este logotipo a la izquierda y el menú a la derecha, lo que necesitamos hacer es dividir este ancho 100 por ciento por dos, así que eso es 50, 50% por ciento. Voy a dar clic a esta columna aquí mismo. La columna que está sosteniendo el logotipo. Y debajo de los diseños, ancho de columna, voy a escribir 50 por ciento. Tan solo 50 como ese. Y ahora está ocupando el 50%. Se lo puede decir por la frontera aquí mismo. Por lo que también seleccionaré la columna del menú. Y haré lo mismo bajo Layout, ancho de columna 50 por ciento, y ahora los dos están en la misma línea. Lo siguiente que queremos hacer es hacer visibles estos menús. Ahora mismo es negro. No es fácil de ver por defecto. Entonces en la siguiente lección, Vamos a añadir un poco de estilo al menú móvil. Te veré en breve. 26. Styling el menú móvil: Y bienvenido de nuevo. Es hora de hacer más presentable el bucle del menú móvil. Entonces, empecemos. Por lo que seleccionaré el menú en sí. Y ahora yendo bajo contenido, entraré dentro de layout. Y bajo alineación responsiva. Empujémoslo hacia la derecha, así. Y ahora hagámoslo blanco y color. Entonces vayamos dentro de estilo y colapsemos la configuración del menú principal. Tenemos que ir dentro de disparador de menú y cerrar icono. Podemos establecer el fondo. Vamos a ponerlo en blanco por ahora para que sea visible. Y actualizar eso. Y cuando hacemos clic en el propio menú, noten lo que sucede aquí mismo. Por lo que la fuente por defecto es blanca y al pasar el cursor es verde. Entonces lo que queremos hacer en primer lugar es darle un trasfondo. Démosle este fondo verde. Y yo solo quiero tabular al lugar donde tenemos este verde. Voy a copiar eso y volver aquí y colapsar gatillo principal y cerrar icono. Porque nos interesa este menú desplegable. Ir dentro del menú desplegable. Y para el color de fondo, quiero cambiarlo. Quiero pegar ese código que acabamos de copiar desde el otro lado. Entonces ahora es verde. Y como puedes ver en este momento, en el flotador, porque se vuelve verde, es invisible. Por lo que necesitamos cambiar el estado de flotación del color de los textos a, vamos a darle este color. 40, 40, 40. En nuestro propio flotador, cambia demasiado mal color. Pero ahora está escondiendo el logo. Por lo que tenemos que empujar todo el menú desplegable hacia abajo. Si bien seguimos bajo desplegable. Desplazemos hacia abajo y busquemos la distancia máxima. Y solo aumentemos eso manualmente. Empujarlo hacia abajo. Y me gusta dónde está ahora mismo. Actualicemos eso. Y para el divisor, digamos que ninguno. Para que se deshagan de esas líneas. Y ahora no hay frontera, actualizar eso. Entonces vamos a previsualizar ahí. Si tocamos Control Shift I para revelar las DevTools y luego hacer clic en este icono justo aquí acabamos de ver. Así es como se ve en estos momentos en tabletas. Entonces así es como se ve en un iPad. Llegaremos al tamaño de la tableta en breve, pero cambiemos a una vista telefónica y así es como se ve en el teléfono. Creo que me gusta donde entramos, pero podemos deshacernos de estas líneas blancas empujándola un poco. Entonces volvamos aquí, distancia máxima y reducirlo tal vez a 25. Actualizar eso. Y vamos a previsualizar los cambios. Entonces, vamos a hacer clic en eso. Sí, así que me gusta esa posición. Pero ahora mismo, note que el logotipo está sangrada mucho más que, mucho más que los artículos de navegación. Entonces posicionemos correctamente el logotipo o pantallas móviles. En la siguiente lección, nos vemos en breve. 27. Posicionamiento del logotipo móvil: Bienvenido de nuevo. Ya es hora de posicionar correctamente este logotipo en las pantallas móviles. Entonces, empecemos. Volvamos aquí. Seleccione el logotipo. Y mientras que la columna del logotipo. Y mientras se selecciona la columna del logotipo, Vamos a editar columna, vamos adentro avanzado y vamos a quitar este enlace y esto también. Y ahora para empujarlo hacia la izquierda, todo lo que necesitamos hacer es reducir el margen de la izquierda, así hasta ese punto. Y vamos a aumentar el margen en la parte superior, sólo para que podamos crear algo de espacio en la parte superior. Démosle algo así como 20. Y ahora notarás que el logotipo está casi tocando el borde inferior de la sección. Entonces hagamos algo con estos acolchados aquí mismo. Lo primero que tenemos que hacer es empujar hacia abajo todo el menú desplegable. Y hagámoslo antes que nada, asegurándonos de que estamos, hemos seleccionado el menú de hamburguesas y seleccionamos en cualquier lugar dentro de ese borde azul. Y ahora este es el artículo que estamos editando aquí mismo. A continuación, vayamos dentro de estilo, desplázate hacia abajo y busquemos el menú desplegable. Y luego vamos a bajar a la distancia máxima y aumentarla. O bien. A continuación, seleccionemos esta sección superior que está sosteniendo el logotipo y el menú. Ya había quitado este enlace aquí mismo. Permítanme también quitar eso. Aumentemos el relleno inferior. Un poco así. Y actualicemos. Vamos a previsualizar los cambios. Control I para abrir las DevTools. Y así es como se ve. Entonces vamos, vamos a cambiar la hamburguesa puede necesitar para ver qué tenemos. Y ahora se ve impresionante. Pero ahora este menú en sí, el ícono del Menú, necesita estar correctamente alineado, como el logotipo. Entonces volvamos atrás y hagamos eso. Si bien aún está seleccionado. En un ir dentro de aquí y romper esos enlaces también. Y aumentemos un poco el margen derecho hasta 10. Y también el margen superior. Aumentémoslo hasta ese punto. Simplemente usa tu ojo para ver si puedes posicionarlo correctamente. Entonces actualicemos eso y previsualicemos los cambios. ¿ Verdad? Entonces ahora tenemos que empujar un poco el menú desplegable para deshacernos de ese espacio en blanco. Por lo que mientras aún está seleccionada, voy a ir dentro de estilo. Se colapsó el menú principal, se abre el menú, menú desplegable. Y para la distancia superior, vamos a reducirlo hasta ese punto. Actualización. Y vamos a previsualizar los cambios. Impresionante. Por lo que ahora terminamos con el menú responsive. Está funcionando correctamente. Lo siguiente que queremos hacer es trabajar en una sección de héroes receptivos y el resto del cuerpo. Entonces sigamos adelante y hagamos eso en la siguiente lección. 28. Sección de héroes responsivo: Sigamos desde donde lo dejamos. Ya tenemos un menú de dispositivos móviles responsive. Y aquí está. Lo siguiente que queremos hacer es hacer que el resto de la página sea receptivo, y comenzaremos con la sección de héroes. Entonces para hacer eso, saltemos dentro del tablero y vayamos dentro de las páginas. Y luego editemos nuestra página de aterrizaje con Elementor. Abriré eso en una nueva pestaña y cambiaré a esa pestaña. Aquí estamos. Por lo que definitivamente queremos saltar al modo responsive para empezar. Entonces cambiemos al móvil. Por lo que con solo mirarlo, ya se puede ver un desequilibrio. El margen aquí son pequeños pozos, margen aquí es B. Y estos trazos de pincel parecen un poco empinados, así que necesitamos aplanarlos un poco. Pero a medida que nos desplazamos hacia abajo, esto es lo que tenemos actualmente. Desplácese hacia abajo. No creo que tengamos mucho trabajo porque todo el contenido parece haberse alineado correctamente cuando cambiamos al modo responsive, pero necesitamos ajustar algunos de los elementos un poco como este botón, solo para que esté correctamente alineado. Entonces volvamos aquí mismo en la parte superior. Y lo primero que queremos hacer es aplanar este trazo de pincel. Entonces vamos a seleccionar la sección que lo está sosteniendo. Y vayamos adentro divisor en forma de estilo. Y reduzcamos la altura a tal vez 30 por ciento. Esa es la mitad de lo que tenemos actualmente. Sí, así que me gusta eso. Eso es eso. Pasemos a esta columna aquí mismo y hagamos algo al respecto. Entonces lo primero que quiero hacer es seleccionar la columna que está sosteniendo todos estos bloques de texto e iconos. Y lo que queremos hacer es hacer clic derecho y editar columna. Y mientras seguimos ahí, Vayamos por dentro avanzado. Y eliminemos este enlace, el relleno y el margen por defecto. Y eso restablecerá todo para que podamos empezar a sumar nuestros propios márgenes y relleno. Y ahora quería unirlos una vez más ahora. Entonces lo haré yo. Y démosles un relleno de 15 o derecho. Entonces desde todos lados, desde arriba, derecha, abajo, e izquierda. Dentro de esta columna, todos los textos tendrán un relleno de 15. ¿ Verdad? Entonces eso es eso. Seleccionemos esto. Bienvenido a. Y alinémoslo al centro. Y creo que necesitamos reducir un poco el tamaño porque está en las pantallas móviles, solo para que esté en una línea. Hagamos lo mismo para los podcasts. Podcast. Alinémoslo al centro y reduzca un poco el tamaño. Pueden levantarlo un poco. Sólo porque este es nuestro H1 y es un resumen del contenido de nuestra página de aterrizaje. Y luego a continuación, hagamos lo mismo para el párrafo aquí mismo. Entra mientras aún está seleccionado. Vamos al interior del estilo y alinémoslo al centro. Y vamos a actualizar eso. Siguiente. Seleccione el destacado en. No me importa tenerla ahí, pero vamos a deshacernos de esta columna y alinearla al centro que se ve más presentable. Hagamos una vista previa de los cambios hasta el momento. Vamos a golpear Control Shift I o Command Shift I en el Mac. Ya está empezando a lucir impresionante. Entonces hagamos algo con estos iconos destacados. Recuerda agregamos los márgenes izquierdo y derecho en estas columnas individuales, pero no agregamos un margen superior o inferior. Agregamos los márgenes superior e inferior en la sección que lo está sosteniendo. Por eso existe este espacio continuo todo el camino hasta el final. Pero para las columnas individuales, no agregamos márgenes superiores ni inferiores. Y por eso cuando cambiamos a la vista móvil, no tienen margen. Entonces vamos a seleccionar el primero aquí, yendo dentro avanzado. Y por el margen, primero romperé esto. Y entonces aumentaré el margen superior tal vez hasta cinco. Digamos cinco. Y luego copiaré ese estilo. Y si pego el mismo estilo en la segunda columna , tendrá un margen superior de cinco. Y el mismo caso se aplica al resto. Por lo que seleccionaré que cada columna avanzara. Hagamos de esto un 10. Eso es más parecido. Hagamos de esto un 10 también. El top realmente no cuenta porque no tiene ningún artículo encima. Pero vamos a copiar ese estilo y pegue el estilo dentro de estos otros. Ahora vamos a quitar el margen superior en este. Porque como se puede ver, es en esta nueva sección que es una, que es una intersección que sostiene estos tres y otra intersección que sostiene estos tres. Por lo que los propios tramos tienen su propio margen. Y esos márgenes no son iguales a los márgenes que tenemos para la columna. Por lo que tenemos que tratarlos un poco para que se vean consistentes. Entonces vamos a reducir esto sólo un poquito. Démosle un diez. Actualizar eso. Y vamos a previsualizar los cambios. Desplazarse hacia abajo. Impresionante. Nuestros iconos se ven geniales. Pasemos a la sección de episodios destacados y que sea sensible. Hagámoslo en la siguiente lección. Te veré en breve. 29. Sección de contenido principal responsivo: Así que bienvenido de nuevo. Sigamos haciendo que nuestra sección principal de contenido responda en el móvil. Entonces lo siguiente que queremos hacer aquí mismo es el selecto ese subtítulo. Y reduzcamos su tamaño. Por supuesto, eres libre de darle cualquier talla que quieras. Serrano lo tienen en una sola línea. Y asegurémonos de que esté alineado al centro. Entonces bajo el centro de contenido, Hagamos lo mismo por eso. Y solo quiero reducir el tamaño un poco así. Vamos a seleccionar esta fuente, esta descripción también. Vamos dentro de estilo, alinear, centrar. Seleccione el botón, alinee centro, actualice eso. Y repasemos los cambios. De acuerdo, así que sigamos desplazándonos. Me gusta la posición y el tamaño de la imagen. Hagamos algo con esta pincelada. Entonces seleccionaré esta sección que está sosteniendo esa pincelada. ¿ Recuerdas si pudiera cambiar al modo de escritorio? Esta pincelada de aquí está dentro de esta sección, no en la sección azul. Entonces volvamos aquí adentro, retrocedamos ahí. Seleccione esta sección. Y mientras aún está seleccionado, vamos al interior divisor en forma de estilo, fondo. Y mantengamos eso a los 30. Actualizar eso. Creo que se ve bien. En cuanto a esta sección, pienso igual donde todo está posicionado. Pero una cosa que podemos hacer es seleccionar esta columna yendo sitio avanzado. Y vamos a darle un relleno de 15. Muy bien, así que hemos empujado estas cartas un poco hacia adentro. Hagamos una vista previa de los cambios. Súper impresionante. Ya me gusta eran estas imágenes posición, pero hagamos algo con este trazo de pincel. Entonces volvamos aquí. Seleccione esta sección. Vayamos dentro divisor de hojas de estilo. Y eso es en la parte superior porque esta es una sección pequeña que agregamos solo para agregar los trazos de pincel. Vamos a darle una actualización 30 que Sigamos desplazando para ver qué más necesita mejorar o bien, así que vamos a seleccionar esta columna que está sosteniendo avanzada la descripción del texto. Elimina ese eslabón ahí mismo. Y quita esos enlaces ahí mismo. Y ahora podemos seleccionar eso, darle un 15. 15. Así es como se ve. Redujamos este margen justo debajo de la imagen. Por lo que al seleccionar la imagen avanzó. Quitemos, quitemos ese margen ahí mismo. Y para el margen inferior, Vamos a usar nuestro ojo y reducirlo hasta el punto correcto. Creo que iré con el 75. Y vamos a seleccionar sobre Alex. Alinear centro. Seleccione este texto. Alinear centro. Selecciona el botón. Alinear centro. Correcto. Entonces lo siguiente que tenemos que hacer es empujar esta sección verde hacia abajo y separado de este bloque de texto. Entonces vamos a seleccionar el botón. Y vayamos adentro avanzado. Rompe el eslabón aquí mismo, y aumente el relleno inferior. Entonces, vamos a ver. Usemos nuestro ojo hasta ese punto. Y ahora queremos hacer algo al respecto esta pincelada como en el anterior trazo de pincel aquí mismo. Veamos dónde se encuentra cambiando a nuestra vista de escritorio. Y notarás que está dentro de esta sección, la sección que está sosteniendo la imagen y el bloque de texto. Por lo que para editar la pincelada, necesitamos tener esta sección de edición seleccionada. Un cambio a la vista móvil. Todavía seleccionado. Estilo, divisor en forma. Abajo 30. Sí, así que ahora se ve mucho mejor. Seleccionemos esta fuente. Ponlo en el medio. El mismo tipo de letra aquí. Empuja esto hacia el medio. Al igual que donde se encuentra el formulario. Pero por supuesto puedes jugar con el posicionamiento hasta que estés satisfecho. Y hagamos algo al respecto también. Por lo que al seleccionar eso, ve dentro divisor en forma de estilo 30. Actualicemos eso y previsualicemos los cambios. Están en lo cierto. Por lo que casi terminamos con el diseño responsive móvil. La única parte que queda es el pie de página. Entonces hagamos que la comida sea receptiva. En la siguiente lección, antes de que terminemos. Te veré en breve. 30. footer móvil responsivo: Entonces sigamos. Queremos que el pie de página sea receptivo. Por lo que por el momento tenemos aquí nuestro logo. Después tenemos nuestro Menú Nav, que si haces clic, se abre así. Y tenemos esta información de copyright y nuestros iconos de redes sociales parecen estar desalineados. Saltemos dentro de nuestro tablero de instrumentos. Vamos adentro apariencia encabezado pie de página constructor. Y vamos a editar nuestra foto con Elementor, abrir enlace en nueva pestaña, y vamos a cambiar a esa pestaña. Súper impresionante. Por lo que ahora el pie de página es editable. Cambiemos al modo responsive. Y vamos a hacer clic en el ícono del móvil. Entonces aquí lo tenemos. Entonces creo que ahora mismo, vamos a seleccionar los iconos y alinearlos en el medio. Actualizar eso. Y veamos qué tenemos. Controla el ojo de oveja para subir el DevTools y cambiar a idear vista. Y así se ve nuestro pie de página. Ya me gusta cómo se ve, pero siempre puedes hacer exactamente lo mismo que hicimos si quieres que tu logo en el pie esté en el lado izquierdo y el menú del lado derecho solo dividirlos en, en porcentajes de la, un ancho 100 por ciento. Entonces volviendo aquí, cambiemos a la vista de escritorio. Como mencioné, cuando estábamos haciendo que la barra de navegación respondiera, la sección que está sosteniendo todos estos elementos tiene un ancho del 100 por ciento y básicamente están divididos en porcentajes de ese 100%. Entonces aquí, en el pie de página, si queremos llevar este logo a la izquierda y el menú a la derecha, o tenemos que hacer es seleccionar eso. Recuerda tenemos tres columnas, a diferencia de la barra de navegación que tenía dos columnas. Por lo que en esta ocasión estamos dividiendo el 100% en tres porcentajes diferentes. Entonces, vamos a hacer clic en eso. Podemos seleccionar la columna del logotipo, que ahora mismo corre por todo el camino a la izquierda. Cada columna, por defecto, se ejecuta todo el camino de izquierda a derecha en dispositivos móviles. Entonces lo que tenemos que hacer es seleccionar la primera columna y darle algo así como tal vez 20 por ciento o 55%. Y vamos a dar al menú 45 por ciento. Está bien, para que eso alinea a esos dos de ahí. Pero recuerda que teníamos un tercer artículo. Sólo dejémoslo en un 100 por ciento por defecto para que esté en la parte inferior. Esa es otra forma de hacerlo. Pero prefiero lo que teníamos un poco antes. Solo quería mostrarte cómo estructurar el pie de la misma manera que estructuramos el menú de navegación usando porcentajes. Actualizar eso. Hagamos una vista previa de los cambios. Entonces en este momento todo se ve dispersado por todas partes. Y el objetivo era mostrarte que puedes mover cosas alrededor de las diferentes columnas y cambiar el tamaño de las cosas. Prefiero elementos en el pie de página apilados uno encima del otro como los teníamos inicialmente. Entonces volvamos a lo que teníamos originalmente. Entonces le daré a esto un 100 por ciento. Daré el menú a un ancho 100 por ciento también. Y por supuesto, los iconos sociales son una actualización 100 por ciento eso y vamos a previsualizar los cambios. Sí, así que eso es lo que tenemos. Por lo que al hacer clic en eso se revela el menú desplegable, pero el menú desplegable no tiene estilo. Entonces, ¿qué podemos hacer al respecto? Para que podamos darle estilo de la misma manera que habíamos peinado la barra de navegación superior. Entonces volviendo aquí, expandiéndolo. Y vayamos dentro de estilo. Ese no es el menú principal. Queremos el menú desplegable para el color de fondo. Déjame agarrar ese verde muy rápido. Copiar eso. Vuelve aquí. Enfrentémoslo ahí dentro. Y para el color del texto, queremos que sea blanco y propio hover. Queremos que sea este azul. Ese azul. Y cuando está activo, también queremos que sea ese azul. Deshacernos de estas líneas. Por lo que vamos a desplazar hacia abajo todo el camino todavía bajo desplegable. Desplázate hacia abajo hasta divisor, estilo de borde, ninguno. Y vamos a dar clic en Actualizar. Hagamos una vista previa de los cambios. O el viernes, me gusta lo que tenemos. Por lo que ahora nuestra página es totalmente receptiva. Contamos con una barra de navegación receptiva, cuerpo receptivo y un pie de página sensible. Entonces echemos un vistazo rápido a la página en este momento. Entonces vayamos dentro de las páginas. Y haré clic derecho en Ver, abrir enlace en nueva pestaña, y pasemos a esa pestaña. Entonces este es el resultado final que tenemos para la vista de escritorio. Y si hago clic en Control Shift I, o Comando Shift I, veamos cómo se ve en las pantallas móviles. Hará algo al respecto, no te preocupes. Entonces eso es lo que tenemos. Entonces, vamos a deshacernos de este espacio en blanco aquí arriba. En la siguiente lección, nos vemos en breve. 31. Ajustar la posición de navbar responsivas: Vamos a hacer algo al respecto. Entonces déjame solo salir de las DevTools, cierra eso. Y luego pasaré por encima de estos y haga clic en barra de navegación para que podamos editarlo. Entonces aquí lo que queremos hacer es cambiar al modo responsive a menos que sea una vista móvil. Entonces lo que queremos hacer es empujar hacia arriba toda la sección reduciendo este margen superior justo aquí. Entonces sigamos adelante y seleccionemos toda la sección y digamos Editar. Sigamos adelante y eliminemos estos enlaces aquí mismo. Y luego para el margen superior, primero que nada, aumentemos el relleno superior a algo así como 40. Y vamos a reducir el margen superior en la misma cantidad, pero en la dirección opuesta. Entonces eso es un 40 negativo. Y lo que eso hace es empujar esta sección azul que acabamos de sumar hacia arriba. Entonces vamos a reducirlo a, Digamos negativo negativo 40. Y ahora el área extra azul que obtuvimos cuando aumentamos el relleno, déjame solo quitar el margen. Esta zona extra azul aquí ha sido empujada hacia arriba y cubrirá esta zona. Entonces devolvamos ese negativo 40. Y vamos a actualizar eso. Creo que también deberíamos aumentar el relleno inferior aquí a algo así como 15. Oops, conexión perdida. Permítanme que actualice eso. Y vamos a previsualizar los cambios. Control Shift I, para que podamos verlo en móvil y empecemos a desplazarnos. De ninguna manera podemos desplazarnos por esto porque estamos editando únicamente la barra de navegación. Tenemos que ir dentro de la página de aterrizaje real. Permítanme cambiar a eso. Permítanme refrescar eso. Por lo menos no tenemos ese espacio en blanco ahí. Y sólo para que no tengamos demasiado espacio aquí arriba, lo que podemos hacer es reducir el margen superior en estos elementos. Entonces seleccionando las columnas individuales y entrando avanzado para el margen superior, digamos algo así como 10. No fijamos el margen para la columna del logotipo. Lo dijimos directamente en el elemento logo. Entonces digamos 0. Actualizar eso. Y vayamos dentro de nuestra página de aterrizaje y actualicemos esa página y veamos qué tenemos. Correcto. Entonces reducimos todo ese espaciado que estaba en la parte superior. Creo que ahora mismo tenemos una página de aterrizaje que está funcionando y se ve super impresionante. Por supuesto, si tienes más tiempo, necesitas hacer más práctica y jugar con todas las herramientas y características que proporciona Elementor. Espero que hasta ahora hayas entendido cómo usar algunas de las herramientas y características que proporciona Elementor para construir una página de aterrizaje de clase mundial. Déjame simplemente apagar eso. Vamos a previsualizar toda la página ahora con todos los cambios que hemos realizado o bien, así que empecemos a desplazarnos hasta el fondo. Y pasemos a la vista móvil. Empecemos a desplazarnos. Y nuestra página de aterrizaje está funcionando correctamente y podemos cambiar a través de diferentes dispositivos y ver cómo se verá. Entonces así se verá en un iPhone X, en un Galaxy S5, y así sucesivamente. Ahora tal vez te estés preguntando, Oye, ¿ no podemos haber hecho diseño responsive en tablet? Entonces si hago clic en modo responsive, todavía tenemos el modo tablet. Y eso no lo hemos hecho. Yo dejé eso deliberadamente para que puedas tener algo de ejercicio que hacer antes del final de la clase. Así que adelante y trata de hacer que esta página responda en tablet usando los mismos principios que hemos utilizado para hacerla sensible en el móvil. Recuerda lo que hicimos para poner estos dos elementos de lado a lado en la barra de navegación, hace lo mismo que harás por la tableta. Y como puedes ver en este momento, esto es lo que tenemos, pero necesita algo de conmovedor. Por lo que esta será una buena manera para que ejercites el diseño responsive. Ya entiendes cómo hacerlo en el móvil. mismos, mismos principios exactos aplican aquí en tableta. Así que adelante y haz eso, y veamos con qué terminarás. Y esto marca el fin de nuestra clase. Ojalá te divirtieras tanto viéndolo y siguiéndolo como yo lo había creándolo. Y espero que sobre todo, hayas aprendido a crear una hermosa página de aterrizaje para un podcast. Mi nombre es Ken visa. Siempre es un placer enseñarte a crear hermosas páginas web. Ya estoy trabajando en la siguiente clase, que espero te resulte útil. Y espero verte pronto hasta la próxima vez. Cuídate, Mantente fresco, pieza.