Crea una página de aterrizaje en línea con Elementor: nueva clase de Elementor para principiantes

1. INTRODUCCIÓN A LA CLASE: Eso es correcto. Únete a mí ahora. Mi nombre es Ken y he estado usando Elementor desde hace cinco años. Descubrí a Elementor en 2019 cuando necesitaba un sitio web para mi negocio en línea. Tenía una idea de negocio en línea pero no sabía cómo construir un sitio web. Y antes de eso, nunca había construido un sitio web antes. Pero cuando descubrí que hay un constructor libre de arrastrar y soltar llamado Elementor. Fue un cambio de juego para mí. Larga historia corta. Finalmente construí el sitio web viendo tutoriales elementales en línea. Y desde entonces, lo que comenzó como una necesidad de ahorrar dinero al poder construir mis propios sitios web ahora se ha convertido en una habilidad generadora de ingresos para mí. Ya no solo construyo sitio web para mí con las habilidades que gané, sino también para otras personas. Hasta ahora, he construido decenas de sitios web para varios clientes. Y lo hago como un trabajo freelance y habiendo refinado mis habilidades con cada nuevo proyecto a lo largo de los años, hoy diseñé y vendo plantillas elementales en un mercado digital llamado Creative Market. Probablemente hayas oído hablar de ello a través de esta clase. Quiero ayudarte a entender cómo construir hermosas páginas web desde cero usando Elementor. Elementor es libre y creo que hay mucha gente como tú que quisiera aprender a usarlo como un profesional. Entonces al aprender Elementor, ahora tendrás una habilidad que puede ganar nuevos ingresos de varias maneras. Por ejemplo, puedes diseñar y vender plantillas elementales, marketplaces online como Creative Market, Envato marketplace, o incluso construir tu propio sitio web a través del cual puedes vender elemento de plantillas. Puedes diseñar sitios web para clientes y recibir el pago por tu trabajo. Si te gusta enseñar conceptos como este, puedes empezar a enseñar elemental. Al igual que yo, puede ganar ingresos pasivos de tus clases en línea. Y puedes hacer tantos nuevos negocios en línea como quieras sin las limitaciones impuestas por la falta de dinero para pagar a un diseñador web cada vez que tengas una nueva idea para un negocio en línea. Diseñé esta clase para principiantes completos. Entonces, si nunca has usado la elemental antes, encontrarás las lecciones de esta clase muy fáciles de seguir y entender. Partimos desde el principio mismo. Así es como instalar elementor. Todo el camino hasta el final donde habremos construido una página web completa que puede ser utilizada como parte de un sitio web totalmente funcionando. Para el final de esta clase, no solo tendrás una página web totalmente trabajadora construida con Elementor desde cero, también habrás ganado las habilidades necesarias para construir las futuras páginas web y landing pages e incluso webs en el futuro. Así que únete a mí ahora en la clase y vamos a reunirnos en la lección uno. 2. Comencemos: Entonces, una vez más, bienvenidos. Ahora, mientras nos preparamos para empezar, solo quiero que tengamos una visión rápida de la landing page una vez más para ver las diferentes partes que vamos crear y luego vamos a seguir adelante y empezar. Entonces en la parte superior tenemos el encabezado, que sostiene el logo y la barra de navegación. Entonces tenemos la sección héroe que típicamente tiene una buena imagen que representa de qué se trata la página. Y como pueden ver, tenemos esta señora tomada una clase en línea, y luego tenemos un H1 que resume de qué se trata la página. Y cada landing page necesita tener solo una h uno elementos. Tenemos H1 todo el camino a H6, que son diferentes niveles de encabezamientos. Como he dicho, cada landing page necesita tener un elemento H1, pero puede tener varios elementos H2, varios elementos h3, varios elementos h4, y en adelante. Y verás que tendremos varios H dos elementos, h tres elementos. Entonces si esta landing page es un libro, entonces el H1 en la parte superior es el título del libro. Un libro no puede tener más de un título, pero puede tener varios temas y subtemas en capítulos. Entonces de eso se trata todo eso. los motores de búsqueda también les gusta saber qué se trata una página y por eso los motores de búsqueda miran el H1 en cualquier página de destino para saber indexarlo. Déjame seguir adelante y refrescar la página porque la había creado para animarla cuando la estás desplazando, pero solo una vez cuando carga la página. Entonces porque ya había cargado la página, se puede ver la animación. Así que voy a seguir adelante y refrescar la página. Y ahora verás esta desvaneciéndose muy bien y sin problemas. La sección héroe, así como así, se ve cinematográfica. Y luego la sección de escalado se desliza así, lo que creo que es un efecto genial. Entonces la sección se desliza en eso así como se desvanece. Después tenemos esa sección de contador se desliza desde arriba hacia abajo. Esto ya ha animado. Para que como se puede ver, tenemos estas animaciones y realmente están agregando un buen ambiente en una agradable experiencia de usuario al usuario. Simplemente se enamoran de un sitio web. Entonces tenemos los testimonios. Esto se anima automáticamente. No necesitamos hacer nada. Sigue haciendo looping esta animación en los testimonios para captar la atención del usuario para que puedan leer lo que dicen los testimonios. Entonces, por último, tenemos el formulario de inscripción que aparece desde abajo para notificar a la gente que pueden inscribirse para obtener cursos gratis. Esta es una bonita sección llamada a la acción. Y luego tenemos la carpeta. Eso es básicamente el sitio web. Eso es, esa es básicamente la landing page que estamos creando. Y sin perder más tiempo, sigamos adelante y empecemos creando el encabezado. Entonces te veré en la próxima lección. 3. Instala el tema de Astra: Bienvenido de nuevo. Por lo que ahora estamos listos para empezar a construir la página. Y la primera parte que estamos creando es el encabezado. Pero antes de hacer eso, vamos a seguir adelante e instalar nuestro tema y luego nuestros plugins. Como se puede ver, esta es una instalación completamente nueva de WordPress. Estamos en la Versión 6. Podría estar usando una versión más nueva, pero el proceso que estamos aplicando este momento seguirá siendo relevante. Entonces yendo dentro de temas de apariencia, podemos seguir adelante e instalar Astro por defecto porque estamos en el año 2022. El tema activo es 2022. El año pasado fue 2021, y el año anterior a eso fue 2020. Pero queremos seguir adelante y decir Añadir Nuevo. Y nos llevarán al repositorio de temas de WordPress o directorio de temas. Y literalmente hay miles de temas que podemos usar aquí. Pero la que nos interesa es Astra. Por lo que debería estar justo aquí. Pero también puedes seguir adelante y escribir Astra solo para estar seguro. Y nota que hay Astral y astra no confunden a los dos. Es Astra instaló eso. Muy bien, sigamos adelante y activemos. Y ya hemos terminado. Por lo que ahora como se puede ver, el tema activo es Astra. Como se puede ver aquí arriba. Gracias por instalar Astra. Y solo nos están diciendo que Astro viene con docenas de plantillas de inicio listas para usar. Y de hecho, ya había publicado en clase donde te enseño a usar las plantillas de inicio para construir un webs totalmente funcionando. Si no lo has visto, adelante y abre mi perfil. Lo verás justo ahí. Te enseño a diseñar una tienda de cosméticos usando estas plantillas de inicio listas para usar. Pero voy a seguir adelante y cerrar esto abajo. Y eso es básicamente cómo instalar un tema de WordPress. Astra es uno de los temas de WordPress más populares en la actualidad, y lo ha sido desde hace varios años. Si quieres saber más, te recomiendo seguir adelante y Google Astra Theme Review. Solo para que puedas ver por qué es uno de los temas de WordPress más populares y mejores en el mercado. Ahora que tenemos nuestro tema instalado y activado, continuación, queremos instalar y activar nuestros plugins. Hagámoslo en la próxima lección. Te veré en breve. 4. Instalar el complemento Elementor: Y bienvenidos de vuelta. Entonces ahora que tenemos instalada Astra, es hora de instalar elementor. Y los otros dos plugins que vamos a utilizar para crear nuestro encabezado. Y verás por qué necesitamos esos dos plugins. Ir directamente dentro de plugins. Puedo hacer click en añadir nuevo, pero quiero que primero vayamos a la lista de todos los plugins que ya tenemos instalados. Y aquí estamos. Entonces lo que quiero hacer es decir Agregar nuevo y será redirigido al repositorio de plugins o directorio de plugins. Y podemos seguir adelante y buscar Elementor. Y debe ser el primer resultado. Una vez que lo busques, es de Elementor.com y cuenta con más de 5 millones de instalaciones activas al momento de la grabación. Instálalo ahora. Y mientras está instalando, observe que aquí hay otros plug-ins que tienen el nombre Elementor en ellos. Estos son básicamente plugins creados para ser extensiones o proporcionar extensiones al complemento Elementor. Por lo que Elementor proporciona características y configuraciones específicas y donde tiene deficiencias. Estos plugins agregan esas características a elementor y te mostraré cómo hacen eso. Estos plugins también proporcionan características de forma gratuita que podrían estar disponibles solo en la versión pro o versión premium de Elementor. Antes de activar Elementor, Vamos a seguir adelante e instalar elementos kids, complementos elementales, que es una de las extensiones que necesitamos para Elementor poder crear nuestro encabezado. Y también queremos que nuestro encabezado sea pegajoso. Así que vamos a instalar efectos de encabezado pegajosos para Elementor. Mientras está instalando. Permítanme simplemente saltó rápidamente a esta página de referencia aquí para mostrarte lo que quiero decir por pegajoso. Entonces cuando empiezo a desplazarse, observe que el encabezado aquí arriba permanece en la parte superior. No desplaza las palabras superiores con el resto de la sección héroe y la página. Entonces la sección de héroes sube y desaparece, pero la página permanece en la parte superior. Entonces eso es lo que queremos decir con encabezado pegajoso. El hecho de que se mantenga en la parte superior y que permita al usuario poder navegar sin importar qué parte de la página, la suya. Entonces volviendo a nuestra lista de plug-ins, ahora, está instalado. Todo lo que tenemos que hacer es activarlos. Vamos a instalar plugins. Vamos a activarlos uno por uno. Y comencemos con Elementor, porque últimamente desde la última actualización en el plugin, ahora tenemos un asistente de configuración que tenemos que pasar por varios pasos para configurar las partes básicas de un sitio web. Entonces aquí estamos. Este es el asistente de configuración que acabo de mencionar. Tiene varios pasos aquí. El primer paso aquí es crear una cuenta con el sitio web elemental para poder disfrutar de algunos de estos beneficios. Pero no necesitamos crear una cuenta para usar el plugin. Así que voy a seguir adelante y saltaré este paso. El segundo paso es seleccionar, para continuar con el tema Hola. Este es un tema que es creado por el equipo de Elementor para trabajar con Elementor. Pero recuerda, ya hemos instalado el tema Astra, que es más potente y más packs de características. Entonces vamos a seguir adelante y saltaremos. Aquí tenemos la oportunidad de darle nombre a nuestra página web. Por defecto, este es el nombre que le diste a tu sitio web cuando estabas instalando WordPress en tu cPanel. Por lo que sólo lo dejaré en eso y haga clic en Siguiente. Entonces tenemos la oportunidad aquí de subir nuestro logo. Pero no estamos haciendo eso ahora. Subiremos el logo ya que estamos construyendo la landing page. Por lo que voy a seguir adelante y haga clic en Skip. Y por último, tenemos dos opciones aquí. Podemos editar un lienzo en blanco con editor Elementor, o podemos navegar desde cientos de plantillas o importar nuestras propias plantillas elementales. No vamos directamente a empezar a construir la página web, tenemos que ir al tablero. Por lo que voy a hacer clic en Skip. Muy bien, por lo que parece Elementor nos ha redirigido al lienzo que estábamos evitando. Pero vamos a seguir adelante y hacer clic en este menú de hamburguesas y Salir a Dashboard. Porque recuerda que aún no hemos activado el resto de los plug-ins. Voy a hacer clic en este icono aquí que podamos salir al tablero. Vuelve a plug-ins. En la siguiente lección. Vamos a seguir adelante y activar elementos, calor, luz. Te veré en breve. 5. Agrega un complemento de Elementor: Y bienvenidos de vuelta. Por lo que ya hemos instalado y activado Elementor. Ahora estamos a punto de activar elementos clave luz. Pero antes de que hagamos eso, solo quiero mostrarles por qué necesitamos elementos, luz Keith y otras extensiones de Elementor y cómo funcionan. Entonces yendo dentro de páginas, solo quiero hacer clic derecho y abrir este enlace en nueva pestaña para que podamos dejar esta página intacta y vamos a ir a esa nueva pestaña. Para que pueda mostrarte lo que queremos decir. Esta es la página que ha sido auto-generada por Elementor cuando terminamos el asistente. Por lo que haré clic en editar con Elementor. que podamos ir al front-end y ver lo que tenemos. Aquí. Estamos en el lado izquierdo de Elementor. Contamos con varios paneles que contienen herramientas Elementor. Y por defecto, el panel básico siempre está abierto. Estos son los elementos más populares en cualquier sitio web. Cada sitio web o página web siempre necesitará un botón, siempre necesitará un encabezado e imagen, videos, divisores, espacios, y todo eso. Entonces si colapso esta área básica y abro el Pro, estas son las herramientas y características que solo estarán disponibles si hemos comprado la versión Pro de Elementor. Así que no podemos arrastrarlos a nuestro espacio de trabajo, pero podemos arrastrar una imagen aquí y soltarla ahí. Entonces una ventaja de tener esas extensiones como elementos kid light, elementos mantienen la luz es que algunas de las características que solo están disponibles en la versión Pro de Elementor son en realidad gratis cuando instalas esta extensión porque su trabajo es traer puntaje add-on avanzado Elementor con tiempo. Entonces hicimos cabecera y todas esas cosas. Por lo que vamos a activar elementos clave luz. Y iremos al frente y lo encontraremos aquí. Y vamos a echar un vistazo rápido a las diferentes herramientas que trae. Por lo que haré clic en Activar. Y ahora está activo. Está en la lista justo aquí a la izquierda. Y si hacemos clic en elementos, luces de niño, basta con seguir adelante y haga clic en eso. También cuenta con su propio asistente de configuración formado por varios pasos. Y básicamente estas tres opciones aquí determinan cuántas de estas diferentes características estarán disponibles o widgets. llamaremos así. Entonces si hemos avanzado en lugar de básico, tendremos más de estos chorros. Por lo que lo dejaré en avanzado o puedes seguir adelante y simplemente dejarlo en básico o recomendado. Y luego iremos y diremos el siguiente paso. Aquí puedes inscribirte a la comunidad de kits de elementos para estar recibiendo noticias de ellos. Vamos a seguir adelante y haga clic en Siguiente. Aquí. Tienes la opción de instalar más herramientas que son desarrolladas por el mismo equipo desarrollador de elementos niños. Después haga clic en Siguiente, ahora vamos a instalar esos. Entonces aquí, solo tienes que seguir adelante y haz clic en el siguiente paso. Próximo paso, y ahora estamos listos. Haga clic en Guardar cambios. Y ahora hemos instalado y activado elementos. Consigue luz en nuestra página web. Y con eso hecho, vamos al frente. Y voy a refrescar esta página. Es preguntarnos si queremos decir que cambian ya que no queremos guardar los cambios porque esta no es una página que vas a usar. Así que sólo voy a recargar. Y ahora si colapso el panel básico Pro panel en todos estos otros, ahora te darás cuenta que tenemos elementos kit y elementos kit header carpeta. Y si ampliamos eso, tiene varias herramientas que están destinadas a agregar más valor a nuestros sitios web. Entonces si escribo, ahora, notarás que tenemos el nav que viene con Elementor Pro y un elemento nav que es traído por elementos kit add-on. Y esto está en la versión pro, por lo que no podemos arrastrarlo a la página, pero podemos arrastrar esto y usarlo. Entonces esa es la ventaja de agregar esos complementos a Elementor. Ahora que tenemos elementos niño, luz activada, volvamos al backend. Dentro de plugins. Son efectos de encabezado pegajosos para Elementor no tiene un asistente de configuración. Entonces si hago clic en Activar, solo se activará y estamos listos para usarlo. Así que ahora que eso está hecho, lo siguiente que quiero hacer ahora es empezar a construir nuestra sección de cabecera. Entonces hagamos eso a partir de la siguiente lección. Te veré en breve. 6. Crea el encabezado del logotipo: Bienvenido de nuevo. Seguí adelante y preparé una carpeta que contenía todos los activos que vamos a utilizar. Y apropiadamente nombré activos de TI. Por lo que encontrarás estos activos carpeta en la descripción a continuación y puedes descargarla para encontrar todo aquí. Y una de las cosas que encontrarás ahí es estos colores dot archivo TXT. Esto básicamente contiene los diferentes códigos de color que solía llegar a este esquema de color. Puedes seguir adelante y usar esos códigos de color o puedes usar los tuyos propios. Entonces estaremos usando este azul marino, azul claro, naranja. Y por supuesto puedes usar cualquier tono de gris que quieras. Solo quería mencionar eso y también mencioné que encontrarás estos activos carpeta en la descripción a continuación. Con eso fuera del camino, entrémonos en nuestro tablero. Lo primero que tenemos que hacer es notar que el encabezado está conformado por el logotipo y la barra de navegación. Así que vamos a subir un logotipo para nuestra página web. Así que voy a pasar el puntero sobre elementos chico. Y una de las opciones aquí es la carpeta de encabezado. Por lo que voy a hacer clic en eso. Aquí. Te das cuenta que tenemos tres paneles, todos Encabezado y Pie de Página. Y esto es, esta será una lista de todos los encabezados y pies de página que has creado en esta sección. Por lo que voy a decir Añadir Nuevo. Y podemos darle un nombre a nuestro encabezado. Simplemente lo llamaré encabezado. Y el tipo puede ser ya sea un encabezado o un pie de página. Entonces en este caso, es un encabezado y las condiciones es que queremos que esté disponible o visible en todo el sitio. Y podemos seguir adelante y decir, antes que nada, vamos a activarlo para que en realidad sea visible. Si lo dejamos fuera, no se mostrará en ninguna parte. Entonces digamos activar, guardar los cambios. Y ahora está activo como se puede ver en este estado. Haga clic en Editar. Y en este menú emergente click editar contenido será redirigido al front-end donde ahora podremos empezar a construir el encabezado usando Elementor. Aquí estamos. Ahora estamos listos para empezar. Por supuesto. Empecemos agregando una sección de doble columna. Y es una sección de doble columna porque esta columna aquí contendrá el logotipo. Para que podamos seguir adelante y hacer clic en el signo más ahí y agregar imagen. Entonces, mientras se selecciona esta imagen, notarás que esta parte dice Editar imagen. Cuando seleccionamos la sección, esta parte cambia para editar sección. Entonces, cualquier elemento que tengas activo aquí en la página es el elemento activo aquí mismo. Y los ajustes y configuraciones que ves aquí son para ese elemento. Entonces si selecciono la imagen, cambios para editar imagen, y podemos seguir adelante y seleccionar la imagen. Y como no tenemos ningún logotipo aquí, abriremos nuestra carpeta de activos. Y este es el logotipo. Lo seleccionaré y abriré. Aquí vamos. Después inserte medios. Y ahí vamos. Tal vez te estés preguntando, por qué algunas partes no son factibles que por ser blancas en el fondo sea de color blanco, pero vamos a tener este fondo como azul, por lo que habrá visible. Así que sigamos adelante y pongamos ese fondo azul. Y el bicho, el fondo azul está en todo el encabezado, entero. Entonces es la sección seleccionar eso, luego ir dentro de estilo, tipo de fondo. Nosotros colapsamos esto. Contamos con varios paneles. Necesitamos los antecedentes bajo estado normal. Hagamos clic en Clásico bajo color. Podemos pegar el código de color aquí. Por lo que rápidamente agarraré a este documento y seleccionaré esta copia azul marino que. Entonces entra aquí y pega ahí. Y ahora es así de azul. Actualizaré y previsualizaré los cambios. Ahí lo tenemos. Entonces lo siguiente que queremos hacer es crear esta barra de navegación. Pero el navbar está formado por elementos de menú. Y estos elementos de menú, tenemos cuatro de ellos son en realidad páginas web. Entonces lo primero que tenemos que hacer es crear para páginas web o cualquier número de páginas web que necesites. Entonces podemos usarlos como los elementos del menú. Entonces veamos cómo hacer eso en la próxima lección. Nos vemos en breve. 7. Crea el encabezado de la barra de Nav: Bienvenido de nuevo. Ahora ya hemos subido nuestro logo. Ya es hora de crear nuestro menú. Entonces volviendo aquí, vamos a crear un marcador de posición para ese menú. Y lo que tenemos que hacer es hacer clic en este signo más para sacar los elementos o hacer clic aquí en este icono, hacen lo mismo. Por lo que si hago clic en eso, se traerán los elementos para que podamos arrastrar a este lugar. Por lo que voy a hacer clic en la barra de búsqueda aquí y teclear nav. Ahora recuerda, habíamos notado que tenemos dos elementos de navegación. Usaremos los elementos kids Nav Menu y lo dejemos caer ahí cuando aparezca ese indicador azul. En el momento en que hacemos eso, notamos que no vemos ningún menú. Pero debido a que este es el elemento activo, dice Edit elements get Nav Menu. Y una de las opciones aquí es seleccionar menú. Si hacemos clic en este menú desplegable, se supone que tenemos aquí un menú que seleccionaremos y se mostrará aquí. Pero debido a que aún no tenemos un menú, tenemos que ir al back-end en el tablero y crear un menú de WordPress. Así que permítanme actualizar eso primero. Y cambiando a esta pestaña aquí mismo, saldré a Dashboard. Todavía tengo esta página intacta. Así que acabo de abrir una nueva pestaña e ir dentro del tablero para poder crear rápidamente el menú. Solo puedes salir de aquí si quieres. Aún volverás. Ahora que estamos dentro del tablero, entraré. Apariencia pasa el cursor sobre la apariencia que los menús. Y cuando aterricemos aquí, notarás que lo primero que nos saludan con facilidad, crea tu primer menú a continuación. Eso es porque aún no tienen menú. Necesitamos crear uno. Permítanme cerrar esta notificación abajo. Así que vamos a darle un nombre a nuestro menú. Lo llamaré menú, y seleccionaré menú principal. Entonces estamos haciendo este menú, nuestro menú principal. Para que si tenemos más menús, puedan ser los menús secundarios de Canvas, menu, ETC. Así que haz clic en el menú Crear. Y en el momento en que hagamos eso, notarás que esta parte ahora está activa. Inicialmente no estaba activo. Y esta parte aquí dice Agregar elementos del menú de la columna de la izquierda. Los elementos del menú pueden ser mensajes de la página, enlaces personalizados, o categorías. A veces son aún más artículos aquí. Entonces lo que necesitamos es crear unas cuantas páginas y se van a enumerar aquí y podemos agregarlas a nuestro menú. Pero por ahora, nota que tenemos la página de muestra que generalmente viene con cada nueva instalación de WordPress. Entonces voy a hacer clic con el botón derecho en las páginas y abrir este enlace en una nueva pestaña. Y cambiaré a esa nueva pestaña para ver una lista de todas las páginas que tenemos aquí. Estos dos son borradores. Permítanme resaltar y moverlos a la basura. En otras palabras, eliminarlos. De hecho, necesito eliminar esta página de ejemplo. No lo necesitamos. Muévete a Basura. Y ahora podemos seguir adelante y sumar tal vez cuatro o cinco páginas. Por lo que haré clic en Agregar nuevo hogar. Y a la derecha tenemos aquí la configuración de WordPress y Elementor, y pidió una configuración aquí. Por lo que necesitamos configurar esos dos tipos de ajustes. El primero bajo la configuración de WordPress y Elementor. Vamos por debajo de plantilla. Vamos a elegir Elementor, ancho completo. Y luego bajo ajustes de Astro, bajo diseño de vestuario, vamos a elegir ancho completo, estirado. Y la barra lateral. No hay barra lateral. Porque no quieres que una página web tenga barras laterales. Entonces tenemos que desactivar el encabezado y pie de página por defecto awestruck porque estamos construyendo el nuestro propio en el front-end. Entonces con esos ajustes intactos, sigamos adelante y publiquemos la página. Después salga a la lista de páginas. Y ahora tenemos casa, su honor, las páginas voy a repetir el mismo proceso por más veces, creando diferentes páginas. Y aceleraré esta parte porque es, es sólo una reputación de lo que acabamos de hacer. Te sugiero que hagas lo mismo. Por lo que agrega nuevo. Llamaré a estos cursos. Y esa es la última página. Entonces saliendo a la lista de páginas que tenemos. Ahora tenemos cinco páginas las cuales se pueden utilizar como elementos de menú. Así que volviendo al interior, apariencia, menús debajo de las páginas, notarás que ahora los tenemos como elementos de menú, por lo que seleccionaré todos ellos. O puedes seleccionar uno por uno lo que quieras. Por lo que seleccionaré todos ellos y agregaré al menú. Y ahora los tenemos enumerados bajo el menú, que va por el menú de nombres. Y vamos a reorganizarlos arrastrándolos de arriba a abajo. Pongamos contacto como el último artículo. El artículo que está en la parte superior aquí será el de la izquierda. Y el elemento que está al final aquí será el ítem de la derecha en nuestro menú, así, de izquierda a derecha. De izquierda a derecha. Y con ese cambio, guardemos el menú. Ahora, con esos cambios, podemos seguir adelante y cambiar a la página donde teníamos nuestro menú aquí mismo. Recuerda que habíamos añadido estos elementos de nav, NAB keep menu de elementos seleccionados, consigue Nav Menu, y se suponía que teníamos que tener ese menú aparecer aquí. Ahora todo lo que necesito hacer es refrescar esta página y ese menú aparecerá aquí. Así que voy a golpear Control R o Comando R si estás en un Mac. Para refrescar la página. Y seleccionaré este elemento, saltaré elemento nav. Y ahora si vamos al menú Seleccionar, aparecerá el menú desplegable que acabamos de crear y aquí aparecerán los ítems. Ahí vamos. Pero ahora están a la izquierda. Tenemos que empujarlos hacia la derecha. Entonces vamos a la posición horizontal del menú y cambiemos a la derecha. Ahí vamos. Pero ahora tenemos que cambiar los colores para escribir porque actualmente no son visibles. Así que mientras esto aún esté seleccionado, haga clic en cualquier parte dentro de este cuadro azul. Ve dentro de estilo. Permítanme colapsar el envoltorio de menú. Tenemos varios ajustes aquí. Lo que necesitamos es el estilo de los elementos del menú, tipo de fondo, sin elemento de fondo, color del texto, blanco. Arrastrémoslo todo el camino allí. Y en el hover, déjame hacer clic en cualquier lugar para deshacerme de eso. Y en hover, necesitamos que el color sea 1524, que es uno de los colores que tengo aquí, un 24. Y cuando esté activo en el hover, ahora notarás que se vuelve a esa naranja. Y cuando estamos activos, también necesitábamos ser F 158. Veinticuatro, activan eso. Y luego vamos a prever los cambios. Ahí vamos. Así que ahora cuando pongo el cursor sobre esto, es impresionante. Y así es como crear el encabezado. A continuación, veamos cómo crear la sección héroe. Hagámoslo en la próxima lección. Te veré en breve. 8. Crea la sección de héroes: Bienvenido de nuevo. Entonces estamos a punto de crear una sección de héroes. Uno para empezar añadiendo este bloque de texto. Y luego añadiremos la imagen y terminaremos con estas partículas. Entonces saltando a nuestra página de Elementor, quiero salir de esta parte porque terminamos de editar el encabezado. Recuerda que este es el lugar donde estábamos editando el encabezado. Entonces, lo que tenemos que hacer es dar clic en este menú de hamburguesas y Salir a Dashboard. Podemos ir y crear una página web o utilizar cualquiera de las páginas web que hemos creado. Como puedes ver, hemos sido redirigidos al tablero y todavía estamos dentro de la configuración del encabezado. Entonces vayamos dentro de páginas. Y tenemos la lista de todas las páginas que habíamos creado antes. Entonces usaremos cualquiera de estas páginas y quiero usar la página de inicio es nuestra landing page porque tiene sentido. Entonces haré clic en Editar. Y como ya lo habíamos configurado todo aquí, todo lo que tenemos que hacer es decir Editar con Elementor y será redirigido al front-end donde podremos empezar a poblar la página con el resto de las contenido. Entonces ahora que estamos editando la página en sí y no el encabezado, no podemos editar el encabezado desde aquí. Entonces podemos hacer clic en este logo o podemos cambiar el tamaño de estas columnas aquí, o editar los colores de cualquier cosa dentro del encabezado. Estamos editando el contenido que está debajo del encabezado. Entonces saltando a nuestra referencia aquí, necesitamos una doble columna, una para sostener la imagen y la otra para sostener el bloque de texto. Entonces vamos a agregar una sección de doble columna. Por supuesto, de este lado, sigamos adelante y agreguemos un encabezamiento. Dejémoslo ahí dentro. Entonces sólo voy a seguir adelante y a escribir. Si bien esto está seleccionado, notarás que esto ha cambiado a través del encabezado de edición. Por lo que voy a seguir adelante y escribir fáciles cursos de primaria para todos. Y podemos ir dentro del estilo mientras aún está activa la tipografía de estilo. Vamos a aumentar el tamaño y podemos cambiar la familia de fuentes mientras todavía estamos bajo Tipografía. Familia de fuentes. Cambiemos eso a Montserrat o cualquier fuente que quieras. Entonces Montserrat, ahora haz clic en cualquier parte esta zona aquí para deshacerte de esta caja así. Y cambiemos este color a blanco. Y ahora no lo puedes ver porque el fondo es blanco. Lo que nos lleva al siguiente paso, que es cambiar el color de fondo toda su sección de izquierda a derecha, necesitamos seleccionar la sección en sí. Y ahora te darás cuenta de que es un poco complicado hacerse con la sección. Y lo que tenemos que hacer es simplemente pasar, si pasas el cursor sobre estos y luego vas hacia arriba, alguna manera, eres capaz de obtener esos ajustes. Y esto es algún tipo de bug en Elementor. Me he dado cuenta de que eso está pasando bastante. O puedes ir a esta columna. Y luego porque está en contacto con esa parte, puedes seleccionarla. Pero si vas directamente desde aquí y tratas de llegar hasta allá, no podrás. Elementos finales en realidad también nos proporciona una herramienta llamada el navegador que podemos utilizar para seleccionar y navegar por las diferentes secciones que tenemos en la página. Por lo que pulsando Control I en el teclado hará que aparezca la herramienta. Y la herramienta básicamente nos da una vista de pájaro de la página. Por lo que como pueden ver, aquí tenemos dos columnas. Y esas son estas dos columnas. Y están dentro de la sección. Entonces, si derrumbo esta sección, notarás que las columnas han desaparecido ahora porque están dentro de la sección. Al ampliarla se revelan las dos columnas que se encuentran dentro de ella. Por lo que podemos seleccionar una sección desde aquí dando clic en la sección. Y ahora esta se lee sección. Eso significa que se selecciona toda la sección. Esa es otra forma de sortear ese pequeño tema. Entonces cerrando eso hacia abajo y podemos ir al estilo. Si derrumbé el fondo, notarás que aquí tenemos varios ajustes. Sólo necesitamos los antecedentes por ahora. Esta vez no queremos que el fondo sea de un solo color clásico. Queremos que sea un gradiente, así que voy a dar clic en eso. Y tenemos el primer color. Y el segundo color, para el color superior, o el primer color, queremos el mismo color porque queremos que el degradado corra de arriba a abajo. Entonces si usamos el mismo color que estos aquí, habrá ese cambio gradual apareciendo sólo entre ese azul y este segundo color aquí. Entonces seleccionando color uno. Pasaré a esto y diré azul marino. Copia eso, pégalo aquí. Sigamos adelante y cambiemos este segundo color. Esta celeste. Copia eso. Pégalo ahí dentro. Y ahora es un hermoso gradiente azul. Entonces vamos a previsualizar los cambios. Sí, ahí vamos. Entonces volviendo aquí, mientras esto todavía está seleccionado, recuerden que dijimos que necesitamos un H1 por página. Entonces actualmente, mientras esto todavía está seleccionado, si vas a Contenidos, notarás que H2, cambiemos eso a H1. Demos clic en eso y agreguemos un editor de texto, que es esencialmente un párrafo. Entonces lo hemos dejado caer ahí mientras aún está seleccionado. Ahora dice cualquier color de texto estilo editor de texto, cambia eso a blanco. Y podemos seguir adelante y seleccionar topografía. Cambiar la familia. Montserrat. Selecciona eso, entra en estilo, tipografía, fuente, peso. Hagámoslo 900 para que sea pesado. Y ahora necesitamos algo de espaciado entre el contenido de la sección héroe y el encabezado. Entonces lo hacemos yendo a esta columna individual porque esta es una columna doble. Vayamos a esta columna. Margen avanzado. Eliminemos este enlace para poder editar celdas individuales. Por lo que el margen superior puede aumentarlo al observarlo. Creo que esa es una linda distancia. Actualicemos eso y previsualicemos los cambios. Entoncesahí vamos. Lo siguiente que queremos hacer es agregar la imagen. Entonces volviendo aquí, vamos a dar clic en este signo más aquí. Y vamos a arrastrar en un elemento de imagen. Con la imagen aún activa. Podemos seguir adelante y subir desde nuestra carpeta de activos. Esta es la imagen. Tienes, toda esta imagen disponible para ti debajo de este video. Vamos a insertar medios. Y ahí vamos. Actualiza eso. Y antes de verlo en el front-end, ahora, sigamos adelante y añadamos algo de espaciado, algún relleno entre el borde de la sección y el contenido donde está la región de contenido. Entonces vamos a seleccionar la sección en sí. Ve dentro del acolchado avanzado, retira ese enlace. Acolchado inferior. Démosle50. Ahora eso aumenta el espacio entre donde llega el contenido y la frontera. En la parte superior. Tal vez también podamos darle un poco de relleno, tal vez 30 actualizar eso. Vamos a previsualizar los cambios. De acuerdo, creo que eso es increíble. Lo siguiente que queremos hacer ahora es agregar nuestros botones. Entonces sigamos adelante y hagamos eso en la siguiente lección. 9. Cómo agregar efectos de texto: Bienvenido de nuevo. Estamos a punto de agregar nuestros botones justo abajo aquí. Pero antes de que hagamos eso, tal vez te estés preguntando, cómo agregamos esta sombra detrás del texto. Como se puede ver, tenemos algún tipo de efecto de sombra detrás del H1. Entonces, ¿cómo hicimos eso? Volviendo aquí, selecciona el H1 y entrando estilo. Vamos a la sombra de texto. Y si hacemos clic en eso, mira el texto. Si hago clic en eso de inmediato, muestra alguna sombra detrás. Y podemos personalizarlo a nuestro gusto aquí mismo para que puedas aumentar un poco la borrosidad. Me gusta cómo se ve, pero adelante y juega con eso. Voy a actualizar eso. Vamos a prever los cambios. Por lo que me gustó la sombra hasta ahora. Pero otra cosa que podrías estar preguntando es ¿cómo logré este color naranja? Quería que los cursos en línea se destacaran porque eso es lo que realmente deberíamos destacar para cualquiera que aterrice en esta página. Entonces todo lo que hice fue envolver ese texto dentro de un lapso. Para aquellos de ustedes que no saben codificar en HTML, hay algo llamado span. Y puedes leer más al respecto. Es muy fácil de usar, pero solo te mostraré cómo lo hice. Entonces mientras esto todavía esté seleccionado, voy a entrar contenido Elementor menos que firmar. Ventilador, tan apretado que lapso. Entonces las palabras para las que desea cambiar el color deben envolver dentro de los pantalones de herramientas y el segundo lapso debe tener la slash justo antes de la palabra span. Y luego dentro del primer lapso, tipo, estilo, igual a comillas. Y dentro de las dos comillas, puedes seguir adelante y escribir color. Yo usaré el código. Ya hemos estado usando 1524 solo para mantener esa consistencia. Ahí, lo tenemos, actualizar eso. Entonces si esto te parece demasiado complicado, no necesitas preocuparte en rosa, no conoces a Elementor, tú, realmente no necesitarás usar estos ajustes personalizados. Solo te estoy mostrando por si acaso quieres hacer personalizaciones adicionales como estas. En la siguiente lección, sigamos adelante y agreguemos los dos botones. Te veré en breve. 10. Cómo agregar y personalizar botones: Ya estamos de vuelta en el tiempo para sumar los dos botones. Existen diferentes formas de lograr el mismo resultado que éste. Podemos agregar dos botones aquí mismo insertando una columna doble en una sección aquí y luego arrastrando una y luego arrastrando a botones ahí así y personalizándolos hasta que se vean así. O podemos usar la opción de botón kit de elementos Duo, que estoy a punto de mostrarte. Entonces, antes que nada, permítanme actualizar esta página antes de continuar. Y luego dentro del tablero, quiero ir dentro del kit de elementos, haga clic en kit de elementos, widgets. Y luego recuerda mientras estábamos configurando kit de elementos, seleccionamos la opción básica. También estaba la opción Avanzada y la opción personalizada. Porque seleccionamos la opción básica, algunos de los widgets aquí, nos quedamos sin marcar o donde lo dejó. Por lo que necesitamos activar la opción de doble botón. Entonces vamos a buscarlo. Sí, aquí está. Opción de todos los botones, así sucesivamente. Y luego guardemos los cambios. Y ahora volviendo a nuestro front-end donde estamos haciendo nuestra edición. Si actualizo esta página pulsando Control R. Muy bien, así que ahora sigamos adelante y tecleemos Duo. Y ahora está disponible. Entonces arrastrando esto aquí y dejándolo caer ahí. Tenemos los dos botones. Ahora podemos personalizarlos. Entonces, antes que nada, comencemos extendiendo su anchura. Y luego aumentemos la brecha. Tal vez hasta allá. Y luego expandamos el botón uno. Vamos a darle una descripción como cursos de descarga. Y luego puedes proporcionar el enlace aquí para que cuando alguien haga clic en él, la longitud determine lo que sucederá. O es una duda, es un enlace de descarga, o los lleva a una página donde pueden descargar todo. Entonces colapsó el botón uno. Vamos a Button to, vamos a cambiar el texto para aprender más. Y puedes proporcionar un enlace. Y si lo desea, puede proporcionar un ícono. No vamos a hacer eso. Vamos a actualizar eso. Ahora. Si bien los botones todavía están seleccionados, vamos dentro del estilo. Ahora podemos empezar a peinarlos. Si colapso esto, sólo tenemos dos opciones. botón uno puede comenzar editando el color de fondo. Por lo que aquí tenemos el color del texto, y luego aquí tenemos el tipo de fondo clicando que podemos hacer este cambio 24. Y esto puede ser de qué color usamos aquí? Un blanco. Hagamos el botón a blanco en color. Entonces es bandas ese tipo de fondo color, blanco. Entonces eso significa que la textura necesita cambiar al azul marino. Así que haga clic en cualquier parte de aquí. Para deshacerse de eso, entonces el color del texto debe ser azul. Por lo que me pegaré a esto y seleccionaré esta copia azul marino que entra aquí, botón a color. Pega ahí dentro. Y ahora es azul. En el hover. Quería permanecer azul. Pega eso ahí dentro. Y ahora sigue siendo azul. Para el botón uno. Ampliar eso. En el hover. Sigue siendo blanco. A continuación, vamos a redondear las esquinas para que no estén tan afiladas como lo están ahora mismo. Entonces para el botón uno, border-radio, vamos a darle un diez. Y ahora está redondeado en las esquinas. Para el botón también. Hagamos lo mismo. Ahora. Está a tierra. Vamos a reducir la altura un poco. Y lo hacemos yendo hacia abajo hasta el relleno. Rompe ese enlace. Y luego hagamos nuestro propio relleno. En la parte superior. Vamos a darle un 15. Eso es 15015. Y el fondo 15. Eso me gusta. Pero aquí te podemos dar los 50 y brillantes 50. Eso es más parecido. Hagamos lo mismo para el botón uno. Relleno. Quitar el relleno predeterminado. Después a la izquierda, 50, derecha 50, arriba 15, abajo 15. Ahora tenemos que aumentar el ancho. Así que volvamos al botón de contenido. Eso nos gustaría. Entonces vamos a actualizar eso. Vista previa de los cambios. Muy bien, entonces ahora por la cantidad de texto aquí, los botones han ido más allá. Podemos reducir el tamaño de esto o cambiar esta palabra para sea una palabra diferente que sea más corta. Como cursos universitarios fáciles para todos. Y ya estamos empezando a empujar todo hacia arriba ya que se supone que debemos actualizar eso. Previsualizar cambios. Ya me gusta donde está. Entonces lo siguiente que queremos hacer es agregar esa animación. Cuando se pasa el cursor sobre eso, se redondea porque los colores no están cambiando al pasar el cursor, necesitamos una manera de mostrar al usuario que se está deslizando sobre los elementos específicos. Entonces volviendo aquí, seleccionemos eso. Vamos a reducir la brecha. Y luego por el estilo, si vamos al botón uno al hover, queremos cambiar el radio fronterizo a 50. Por lo que ahora cuando pasamos el cursor sobre eso, cambia a ese radio fronterizo circular. Pero porque no le hizo nada a esto todavía, No está cambiando. Así que vamos a Button para pasar el cursor. Border-radio. 51. Lo final, vamos a darles una sombra de caja. Entonces el botón uno. En circunstancias normales, lo necesitas para tener una sombra de caja. En el hover. Necesitamos que la caja-sombra se extienda más. Entonces en este momento tenemos la sombra de caja al tamaño predeterminado, difuminar tamaño de diez. Pero en hover, vamos a darle una sombra de caja con un tamaño borroso de, veamos, ahora mismo, sigue a las diez. Entonces si le damos tal vez un 20, la caja-sombra parece extenderse más y quizá intentemos 30. Eso me gusta mejor. Hagamos lo mismo para botón a caja-sombra bajo circunstancias normales, sombra de caja, y ahora tenemos una sombra de caja. Y en el hover, quiero que la sombra de caja sea una talla 30. Actualice eso. Y vamos a prever los cambios. Muy bien, así que si pasamos por encima de eso, me gustó lo que estamos viendo. Entonces así es como agregar el contenido en la sección héroe. A continuación, veamos cómo dar estilo a la sección de héroes para que parezca un libro como se ve aquí mismo. Y cómo agregar estas partículas. Te veré en breve. 11. Efectos de bordes personalizados: Estamos de vuelta. Entonces ya es hora de agregar ese libro como efectos de frontera justo aquí en la parte inferior de la sección de héroes. Y lo que tenemos que hacer es seleccionar la propia sección. Por lo que seleccionaré eso. Y iremos al estilo del sitio. Entonces iremos a dar forma a divisor en este momento. No queremos añadir esa forma aquí mismo en la parte superior. Queremos añadirlo en la parte inferior. Porque si lo agregamos en la parte superior y decimos, reserva, aquí estamos. Libro, lo estamos agregando a la cima. No queremos eso. Así que regresa y no digas ninguna. Quieres ir al fondo y luego reservar. Y ahí lo tenemos. Pero ahora está demasiado alto en la sección. Entonces lo que tenemos que hacer es jugar con la altura, digamos hasta algún lugar allí. Me gusta en ese punto. Pero siéntete libre de hacerlo tan alto como quieras. Y también siéntete libre de jugar con todos estos otros efectos aquí. Porque todo se trata de lo creativo que consigues esto. Lo dejaré en BU. Y también puedes invertirlo si quieres. Me gusta de esa manera. Lo siguiente que queremos hacer es, antes que nada, vamos a prever. Ahí vamos. Pero aumentemos el relleno en la parte inferior ahora que hemos acercado la frontera al contenido, empujemos más este relleno. Así que al volver mientras la sesión todavía está seleccionada, avanzada, me ha hecho un 50. Ahora, vamos, aumentemos el relleno en la parte inferior hacia arriba en algún lugar allí. De hecho, permítanme hacer 120 porque porque quiero que esto llene toda la landing page. Entonces hagamos esto 100. Y vamos a actualizar eso. Y vamos a prever los cambios. Quiero que vaya todo el camino hasta el fondo si es posible. Así. Empujemos un poco el bloque de texto hacia arriba. Deja la imagen donde está. Seleccionaré la columna que sostiene el bloque de texto. Ir a Avanzado. Se ocupa del margen superior. Así. Vamos a actualizar eso. Y eso es lo que realmente cambiamos. Me gusta donde está. Así que ahora lo siguiente que queremos hacer es agregar estas partículas. Y para ello, necesitamos agregar una extensión Elementor muy impresionante llamada complementos de red pirata para Elementor. 12. Agrega efectos de partículas animados: Entonces yendo dentro de nuestro tablero de instrumentos, plugins, agrega nuevo. Escribiré botnet. Botnet, dependiendo de cómo pronuncies palabras. Aquí estamos. Tenemos formas alternas Pi. En piratear se add-ons para Elementor. Entonces esto es lo que necesitamos, 30 mil instalaciones activas en este momento. Robó. Ahora. Vamos a activarlo. Y ahí lo tenemos. Por lo que también tiene todos estos elementos añadidos de forma gratuita para que lo usemos. Estos otros están en la versión Pro, pero ya tenemos lo que necesitamos, que son las partículas. Así que volviendo en el front-end aquí, cualquier elemento que seleccionemos que se pueda editar con la WordNet mostrará aquí la configuración de red. Así que déjame refrescar esta página para que puedas ver a lo que me refiero, controla nuestra actualización. Y ahora, en primer lugar, si colapso todo aquí, tenemos estos complementos Power Net para elemental o pago, o parfait widgets libres. Por lo que ahora está disponible para nosotros si selecciono esta sección, estos cambios para editar sección. Pero ahora nota que tenemos esta opción perfecta aquí. Y si selecciono eso, mientras esta sección todavía está seleccionada, ahora podemos venir aquí y decir partículas y encender eso. Ahora no verás nada aquí, pero lo verás en la página de vista previa. Entonces antes de que cambiemos nada, déjame hacer clic en Actualizar y vamos a previsualizar para que puedas ver lo que ya tenemos. Entonces previsualizar los cambios. Y eso es lo que tenemos. Así que básicamente cuando estamos editando estas partículas en el back-end, podemos verlas. Tendremos que estar cambiando al front-end para verlos. Pero podemos empezar reduciendo el número de partículas porque si usas demasiadas partículas, tu página web se cargará lentamente. Pero creo que un 100 o un 150 es un buen número. Entonces hagámoslo 120. Y cambiemos este color a tal vez un azul. Lo retocaremos hasta que consigamos el bonito azul. Entonces usaré ese azul. Yo usaré ese azul y lo copiaré. Yo copiaré eso y lo pegaré. Entonces ese es el color de las partículas. Ahora, también cambiemos el enlace. Fiesta llama color. Esos son estos enlaces que están sosteniendo las partículas juntas. También se leen, vamos a ponerlos azules. Entonces pegando ese azul ahí dentro. Entonces vamos a actualizar eso. Y vamos a prever primero los cambios. Ahora ese es un bonito color. En este momento. Estos son círculos. Podemos cambiarlos para que sean polígonos o estrellas, bordes, círculos, imágenes, todo lo que quieras, déjame cambiarlos por polígonos. Y también se puede reducir la velocidad. Entonces ahora mismo, dejemos eso a las cuatro. Y puedes elegir lo que sucede cuando pasas el cursor sobre las partículas. Por lo que podemos decir repulsarlos si se desplaza sobre ellos. Y vamos a actualizar eso y ver el efecto. Vista previa. Sigue cargando. Ahora cuando pasamos por encima de ellos los estaban repeliendo. Y eso es lo que hemos dicho. Entonces en este momento, así es como agregar esos dos efectos, los efectos de borde del libro y el efecto de partículas. Lo siguiente que queremos hacer es crear la siguiente sección, que es esta sección animada aquí. Entonces lo haremos en la próxima lección. Te veré en breve. 13. Sección de caja de imágenes parte 1: Enhorabuena, has terminado la sección de héroes. Ya es hora de crear el resto de la landing page. Y lo que queremos crear es esta próxima parte aquí. Y como se puede ver, tenemos tres columnas, pero estas son sólo una sola columna, pero todas están sostenidas en una sección. Entonces, ¿cómo hacemos eso? En primer lugar agregamos una sola sección de columna. Por lo que agregaré aquí una sola sección de columna. En primer lugar, agreguemos algún margen superior en esta sección para separarlo de la sección de héroes. Entonces al seleccionarlo, vamos a Avanzado. Movemos ese enlace y luego margen superior de tal vez 50. Y ahora hay ese espacio entre ellos. Ahora lo segundo que tenemos que hacer es agregar un encabezado. Entonces voy a seguir adelante y abriré el panel básico y arrastraré un rumbo allí. Sólo copiaré estos textos. Aprende a construir tus propios sitios web. Por supuesto, necesitas escribir tus propios textos. Si bien esto sigue siendo seleccionado. Destaca eso, y pega esto ahí. Ahora tenemos que moverlo al centro. Entonces bajo alineación de contenido, empujarlo hacia el centro. Y podemos ir dentro de Style Texts color, y cambiarlo a algún gris oscuro como ese. Aviso en este momento, si vamos a la tipografía, sigue siendo Roboto. Y eso es porque roboto se ha establecido como la fuente global cada vez que agregamos un nuevo texto, por defecto, Roboto. Entonces tendremos que seguir cambiando cada vez que agreguemos un nuevo texto, pero podemos evitarlo. Entonces, antes que nada, permítanme actualizar eso. Y luego si vamos a este menú de hamburguesas y seleccionamos Configuración del sitio, ve a fuentes globales. Podemos establecer las fuentes globales que queremos aplicar en todas partes en la página web. Cada vez que se agrega cualquier texto nuevo al sitio web. Por defecto, se establecerá a estas fuentes, dijimos aquí. Entonces las fuentes primarias, vamos a cambiarlo a Montserrat. Vayamos a la secundaria. Vayamos al texto y al acento. Después actualice. Muy bien, así que déjame cerrar eso abajo. Si seleccionamos esto y vamos a la tipografía. En primer lugar, cambiemos eso para monitorear ruta. Y si añadimos algún nuevo encabezado de texto, va a ser automáticamente monitorizar rata. Entonces por defecto es Montserrat. Así que déjame simplemente eliminar eso. Muy bien, no me lo elimine porque todavía lo necesitamos para estos escale-up hoy. Así que déjame sólo copiar eso, resaltar eso, y luego pegarlo ahí. Cambios para escalar hoy. Si bien todavía está seleccionado, pongámoslo en el medio. Vayamos dentro de estilo, tipografía, texto color. Cambiémoslo por ese color azul oscuro. Por lo que seleccionaré esto, copia eso aquí. Pega ese azul ahí dentro. Creo que quiero hacer esto un poco más débil. Así estilo. Vamos a empujar esto un poco hacia arriba. Haga clic en cualquier lugar por ahí. Tipografía. Hagamos esto un poco más pequeño. Hasta ese punto, tal vez. Entonces escala hoy. Tipografía, pesos de fuente, hagámoslo 800, y aumentemos el tamaño. Vamos a tocarlo hasta algún lugar allí, y vamos a actualizarlo. Lo siguiente que queremos hacer es añadir estas casillas aquí que tienen este bonito efecto cuando se pasa el cursor sobre ellas. 14. Sección de caja de imágenes parte 2: Verde de vuelta en nuestro editor. Si bien todavía estamos dentro de esta sección, seleccionemos, haga clic en ese icono de ahí arriba. Arrastrémonos en una intersección. Y dejémoslo dentro de esa sección. Entonces la función de una intersección es caer dentro de columnas. Por lo que agrega columnas dentro de columnas. Como se puede ver, esta es una columna, sola columna, y tiene dos nuevas columnas dentro de ella. Y aquí podemos añadir tipo aquí cuadro. Y como se puede ver aquí, tenemos un cuadro de iconos. Tenemos una caja de imagen aquí por elementos niños. Y tenemos una caja de imagen que viene por defecto con Elementor. El que necesitamos es esta imagen box by elements kit. Y tiene este botón y algunos textos descripción, título y una imagen. Entonces, antes que nada, agreguemos una bonita imagen. Entonces iremos dentro de nuestra carpeta de activos. Y tenemos estas diferentes imágenes. Voy a seleccionar todas ellas, incluyendo aquella. Ya tenemos esto subido. Ahora haga clic en Abrir para subirlas todas. Si bien estos cargan, vamos a elegir éste y decir Insertar medios. Y ahí lo tenemos. Entonces ahora vamos a cambiar lo que dice el rubro. Si bien esto sigue siendo seleccionado, el cuerpo tiene un título. Entonces, vamos a cambiar eso a qué dice? Diseño de landing page o lo que sea o cualquier categoría de clases que tengas. Así que tal vez esto esté bien, el anillo. Y luego una breve descripción de esa categoría. Y luego para el botón, podemos cambiar lo que dice. Conoce más o empieza. Y puede proporcionar un enlace para que cuando la gente haga clic allí redirigido a un lugar específico especificado por el enlace. Y también podemos agregar un ícono al botón, pero no vamos a añadir eso por ahora. Entonces lo siguiente que queremos hacer es darle estilo a toda la caja de imagen. Entonces empezando por la imagen, creo que estamos bien, pero entonces ahora tenemos el cuerpo, un título. Entonces vamos aquí al título, y podemos cambiar el color del título a ese color. También podemos aumentar el tamaño si queremos. Haga clic en Topografía, vamos a aumentar el tamaño a nuestro gusto. Creo que lo dejaré en eso. Me gustó la forma en que se ve la descripción del texto, así que no tocaré eso. Contraer que el botón. Quiero cambiar el tipo de fondo de color a algún gris débil. Eso significa que los textos deben ser oscuros. Entonces topografía. Espera. El color de los textos debe ser déjame mantenerlo así de azul, ese azul oscuro. Todavía lo tenía en mi portapapeles. Y al pasar el cursor, el texto debe cambiar a blanco. Y el fondo debe cambiar a un 24. Así. Y ahora que se ve bastante bien, podemos seguir adelante y eliminarlo. Y luego duplica esto una y dos veces. Actualice eso. Y revisemos los cambios. Muy bien, así que desplábamos hacia abajo. Por supuesto que ahora notarás que esta es una forma básica de presentarlo. Y en realidad a algunas personas les gusta sin la sombra paralela y las esquinas redondeadas que tenemos en esto. Pero quiero mostrarles cómo hacer esto. Entonces ya sabes cómo hacerlo, aunque no lo vas a hacer, aunque lo vayas a dejar así. Así que vamos a seleccionar la columna que está sosteniendo esta. Y vamos a la frontera de estilo. Démosle un radio fronterizo de 20. Por lo que se puede ver el radio fronterizo en este momento. Y lo que tenemos que hacer es decir caja sombra. Y ahora ves que tiene esa esquina redondeada. Lo siguiente que vamos a hacer es ir a Advanced, darle un margen de diez. Y ahora eso lo empuja lejos del resto. Y ahora que estamos satisfechos con eso, oh, tenemos que hacer es hacer clic derecho y copiar. A continuación, haga clic derecho en esta columna y pegue este mosaico se aplica al estilo de pegado. Y eso también tendrá los mismos estilos mal y hacer lo mismo por ese estilo de pasta. Ahora una cosa que notarás es que esto, después de sumar el margen, esta columna ha sido empujada hacia adentro por la izquierda, pero queremos que sea todo el camino hasta la n de la izquierda. Y éste para estar todo el camino hasta el final a la derecha. Pero éste para ser empujado hacia adentro por ambos lados. Entonces para éste, podemos romper este enlace. Y luego a la izquierda, podemos decir, queremos que tenga un margen de 0, y ahora empieza desde el mismo principio. Y para éste, avanzó romper ese enlace a la derecha. Queremos que tenga un margen de 0. Aviso aquí, si quitamos eso. Pero ahora esto permanecerá intacto, por lo que se empuja hacia adentro por ambos lados. Y otra cosa, seleccionemos esta columna para reducir esta opacidad de esta sombra. Ir dentro de borde estilo, sombra de caja. Vayamos aquí. Y vamos a reducir la opacidad para que sea menos intensiva así, para que sea simplemente sutil. Y luego aumentemos el tamaño del desenfoque a tal vez 30s, ¿de acuerdo? Y ahora que se ve mejor, hagamos lo mismo por estos otros dos. Frontera hasta algún lugar allí. Seleccione ese tipo 30. Y el tercero también. Frontera 30. Ahora nota que es tan intensivo, necesitamos reducir la opacidad hasta algún lugar. Después actualízalo y veamos los cambios. ¿ Verdad? Así que ahora desplazándose hacia abajo, Eso es lo que tenemos. Entonces lo siguiente que queremos crear es esta sección aquí mismo con este acordeón. Entonces veamos cómo crear eso en la próxima lección. Entonces te veré en breve. 15. Sección de acordeón: Y bienvenidos de vuelta. Ya es hora de crear esa sección de acordeón. Y esto aquí es el acordeón. Entonces nota cómo es solo un elemento que está abierto en un momento dado. Entonces si hace clic en otro elemento aquí, El anterior se cierra y el siguiente se abre. Entonces veamos cómo agregar eso a nuestra landing page. En este momento, cambiar a nuestro editor, lo que tenemos que hacer es agregar una sección de doble columna. Como puedes ver aquí, tenemos una columna de imagen y una columna de bloque de texto. Entonces entrando aquí, selecciona una sección de doble columna. Entonces vamos a darle un margen en la parte superior aquí. Y quiero darle un margen de tal vez un 100. Por lo que seleccionando esa sección, avanzado, rompe ese enlace 100. Y ahora tenemos un buen espaciado entre las dos secciones. Aquí, quiero agregar una imagen. Y si bien eso todavía está seleccionado, sigamos adelante y seleccionemos una imagen para caer ahí. Entonces seleccionemos eso e insertemos medios. Y aquí hay que añadir algunos textos antes de añadir el acordeón. Y una cosa que acabo de recordar es que no especificamos qué nivel de encabezamientos son estos. Así que sí, eso es un H2. Dejémoslo como un H2. Entonces deberían ser un H3 yendo a contenidos. Tres años. Y como se puede ver, tenemos diferentes niveles de encabezamientos. Puedes seguir adelante y Google para leer más sobre cuáles son estos y cómo usarlos mejor o mejor aún, puedes ver mi clase de SEO aquí mismo en Skillshare y aprender a trabajar con los encabezados en tus landing pages para una mejor optimización de motores de búsqueda. Echa un vistazo a mi perfil para esa clase. Tiene sólo 60 minutos de duración. Ahora podemos seguir adelante y crear nuevos encabezados aquí. Así. O como notas aquí, son sólo los mismos encabezamientos repiten en todo el sitio web. Entonces lo que podemos hacer es básicamente duplicar estos dos. Yo duplicaré eso y lo arrastraré. Y si arrastra y llegas al final de la página y ya no se desplaza. Mientras sigues manteniendo pulsado el botón del ratón. Desplázate con la rueda del ratón y luego suéltala cuando aparezca el indicador azul. Volvamos aquí. Duplicar la edad de tres años. Arrástralo mientras todavía lo mantiene presionado. Desplázate con la rueda del ratón y suelta eso ahí abajo. Ahora bien, mientras esto todavía está seleccionado, alinearlo a la izquierda y hagamos lo mismo por esto. A continuación, seleccionemos este icono y arrastremos en un editor de texto. Y por defecto, tiene algún texto de placeholder. Por ahora, sólo voy a duplicar estos textos porque estoy asumiendo que escribirás tu propio texto si estás construyendo estas landing page para un sitio web real, que espero que seas. Ahora creo que eso es suficiente para mí. Vamos a actualizar eso. Ahora vamos a seguir adelante y haga clic en este icono para revelar los elementos quiere más. Y en el widget de búsqueda, escribiré acordeón. Y autofill traerá a la luz los diferentes tipos de acordeones que tenemos aquí. Por lo que notarás que tenemos tres acordeones. Uno que viene por defecto con Elementor, uno que es traído por el inicio de sesión de socio. Se trata de un acordeón de imagen y tenemos un acordeón clave de elementos. Este es el que necesitamos. Lo arrastraré y lo soltaré allí cuando aparezca el indicador azul. Y ahora estamos listos para empezar a editarlo. Entonces mientras aún está seleccionado, podemos entrar. La primera opción aquí bajo contenido es el acordeón. Y estos son los tres que ya están prepoblados con texto o contenido. Por lo que si hace clic en éste, lo ampliará. Entonces vamos a hacer clic en éste para expandirlo. Y ahora puedes escribir lo que quieras ahí y cambiará en tiempo real para bien así. Y si quieres cambiar el rubro, claro, cambia el título aquí arriba. Muy bien, y ha cambiado en tiempo real. ¿ Cómo enseño en el título de ese acordeón? Entonces podemos derrumbarlo. Haz lo mismo por eso. ¿ Qué edad tiene la Estatua de la Libertad? Y ahí lo tenemos. Y si hacemos clic en eso, el otro se cierra automáticamente. Por lo que también podemos cambiar este texto. Entonces eso es bastante sencillo. Otra cosa que podrías querer saber es ¿cómo agrego más en consecuencia? Entonces si colapsamos eso, ¿cómo agrego más? Básicamente simplemente haga clic en el icono Duplicar aquí. Y puedes duplicar tantas veces como quieras. Y todos aparecerán aquí. Solo asegúrate de cambiar todo el contenido en cada uno de ellos. Lo siguiente que queremos hacer es que quizá nos gustaría cambiar estos íconos. Cuando está activo, muestra una flecha hacia arriba y cuando está cerrada, muestra una flecha desplegable. Para que puedas cambiar estos iconos haciendo clic allí. Abre todos estos iconos y puedes elegir lo que quieras. dejaré en la configuración predeterminada. Y ahora vamos dentro de ese estilo. Por supuesto, ahora, si colapsamos este título, tenemos cuatro opciones diferentes. El título y la descripción, este texto aquí, el borde y el icono. que podamos cambiar estos, por ejemplo, cambiémoslo a un azul. Y cuando está abierto, podemos cambiarlo a por lo que ahora que esto está abierto, este color naranja. Y cuando está cerrado, es este azul. Puedes hacerlo de cualquier color. Entonces si abrimos esto ahora gira ese color. Entonces vamos a actualizar eso y ver los cambios. Fechas, vista previa de los cambios. Y ahí vamos. Así que desplazándose hacia abajo, nuestro acordeón se ve impresionante y está funcionando correctamente. Lo siguiente que quiero hacer es trabajar en estos mostrador aquí. Veamos cómo hacer eso en la próxima lección. Entonces te veré en breve. 16. Sección de contador: Hey ahi, bienvenido de vuelta. Entonces ahora que hemos creado la sección acordeón, es hora de crear la sección de contador. Al ir a nuestra página de referencia aquí, me estoy desplazando hacia abajo. En primer lugar, he recargado la página para que veas las animaciones. Recuerda, haremos estas animaciones antes del final de la clase. Así que no te preocupes, solo quería mostrarte cómo reacciona el contador y así es como lo hace. Saltando a nuestro editor una vez más, agregaremos una sola sección de columna. Y por supuesto, como siempre, mientras aún está seleccionado, entra avanzado y necesitamos sumar un margen en la parte superior. Así que rompe eso, y vamos a darle un 100. Y ahora tenemos ese espaciado agradable una vez más. Lo siguiente que queremos hacer es darle un bonito color de fondo. Y le había dado a éste una naranja. Y las partículas detrás de ella eran de color naranja oscuro, o se puede llamar marrón. Así que hagamos eso. Si bien esto todavía está seleccionado, vaya al estilo de color de fondo. Estamos usando el clásico 1524. Vamos a actualizar eso. Y ahora con el conjunto de colores de fondo, agreguemos las partículas. Ir a PAF, partículas de vía. Vamos a encenderlos. Y escojamos tal vez algo así como cien, cien. Y aquí. Voy a escribir F 1524, pero luego arrastraré esto hacia abajo para hacerlo un poco más oscuro así, sólo para que sean un poco más oscuras que la F 1524. Entonces seleccionaré esto, lo copiaré, y luego cambiaré el color también a ese mismo color. Entonces pégalo, y ahora ambos son del mismo color. Podemos reducir la velocidad aquí también para la velocidad de las partículas. Me gusta que sea repulsivo. Pero puedes elegir cualquier otra opción que quieras aquí. Y puedo elegir polígono aquí. Y vamos a actualizar eso. Y antes de prever los cambios, sigamos adelante y agreguemos una intersección con cuatro columnas. Así que da clic en ese icono fuera de su intersección. Vamos a dejarlo ahí dentro. Por ahora. Por supuesto por defecto cae dos columnas. Dentro de esta primera columna. Agreguemos un contador. Por lo que haga clic en eso más allá y aquí escriba contador. Arrástralo aquí y suéltalo en la primera columna que hay. Ahora, lo primero que tenemos que hacer es cambiar las cifras. Entonces dependiendo de cuántos, dependiendo de qué sea esto. Por ejemplo, si los estudiantes matriculados. Entonces si tienes tal vez 1200 estudiantes, o si tienes más de 1200 alumnos, pero dentro de ese rango puedes agregar un plus, C gel, 100 plus. Y ahora sigamos adelante y cambiemos los colores en estas estadísticas. Cambiemos el color a blanco en el número y en el título. También es cambiarlo a blanco. Y notarás por defecto las fuentes son Montserrat porque aplicamos Montserrat en la fuente global. Y ahora que estamos satisfechos con estos contador, todo lo que tenemos que hacer es eliminar eso y luego duplicar esto. Ya hicimos algo parecido a eso, y eso es lo bueno de Elementor. Entonces ahí vamos. Tenemos cuatro contadores y podemos editar cada uno individualmente. Antes de hacer eso, seleccionemos la propia sección. Porque necesitamos separar esta frontera del contenido porque el contenido está demasiado cerca de la frontera. Por lo que al seleccionar la sección principal y luego entrar en relleno avanzado, elimine ese enlace. Podemos aumentar el relleno superior a algo así como 50. Y para el fondo 50 también. Actualice eso. En. Ahora vamos a prever los cambios. Desplazemos hacia abajo. Ahí vamos. Muy bonito. Por lo que ahora cada una de estas estadísticas se tratará de algo diferente. Entonces esto podría ser, ¿qué tenemos aquí? Años de experiencia, tasa de finalización del curso. Por lo que también tenemos porcentajes y todo eso. Entonces ya puedes adivinar eso. Para agregar un porcentaje, solo hay que agregarlo al sufijo. Y se puede decir tal vez el 8080 por ciento. Descuento, descuento, luego garantía de satisfacción 100% . Y el último, lo que quieras hacerlo. Entonces digamos que 700 regresan estudiantes. Por lo que tal vez les gustaron tanto tus cursos que volvieron. Vamos a prever los cambios. Desplazemos hacia abajo. Y así es como hacerlo. Impresionante. Entonces lo siguiente que queremos hacer es, por supuesto, crear esta sección, que es más o menos parecida a esta sección. Entonces veamos cómo hacer eso en la próxima lección. 17. PROYECTO DE CLASE: Al final de la clase, tendrás la oportunidad de reforzar lo que has aprendido construyendo una página web desde cero por tu cuenta. Y aquí está el contexto del proyecto. Propietario de una tienda de ropa en línea, llamémosle John. En tu barrio te gustaría que construyeras una landing page para la nueva línea de productos. Por lo que tienen nuevos productos de ropa que quieren vender. Y quieren construir una landing page para esa nueva línea específica de productos. Se han puesto en contacto contigo por tu gran reputación de diseño web en la comunidad. Alguien les dijo que eres muy bueno en lo que haces. Ahora, el sitio web que ejecutan está construido con Elementor, por lo que necesitarán a alguien que sepa usar Elementor. Así que construye una hermosa landing page que convertirá a las personas que visitan esa landing page en compradores. John te ha proporcionado todos los activos que necesitas agregar en esa landing page. Y por activos me refiero a imágenes. Para hacer esto, comience por descargar la carpeta de activos del proyecto en la descripción a continuación, y utilice esas imágenes para construir un sitio web. Recuerda crear un encabezado pegajoso para permitir a las personas navegar por el sitio web mientras se desplazan hacia abajo. Asegúrate de tener una sección de héroes que atrapa la atención que tenga una bonita declaración H1 visible, resumiendo de qué se trata la página y ponte tan creativa como quieras cuando se trata la sección de cuerpo que el resto de la landing page, aparte de la sección héroe y la sección de pie de página, juegan con los diversos elementos elementales que no hemos tocado en la clase porque podría haber notado, no miramos cada elemento que tiene para ofrecer ese elemento ya que estamos construyendo la página. Recuerda también agregar algunos efectos de movimiento, los diversos elementos de tu landing page, y hacer que la página web responda. Haz que se vea bien en diferentes tamaños de dispositivos. Una vez que hayas terminado con tu landing page, toma una captura de pantalla de página completa usando una extensión del navegador como ir a página completa y subirla a la galería del proyecto. Echaré un vistazo a todas las capturas de pantalla de tu landing page y proporcionaré retroalimentación. Y esto también te dará una buena manera de mostrar lo que has aprendido hasta ahora y obtener retroalimentación de otros estudiantes. Así que para empezar, descargue la carpeta dot zip de los activos del proyecto en la sección de descripción a continuación. Disfruta el proyecto. 18. Sección de cursos destacados: Por lo que ahora es el momento de crear la sección que viene después del mostrador, que es esta sección que tiene los últimos cursos o los cursos destacados. Entonces ir dentro de nuestro editor, por supuesto, lo siguiente que tenemos que hacer es agregar una sección. Pero debido a que esta sección es así, esta sección es tan similar a ésta, ¿Por qué no duplicar toda esta sección y luego personalizarla para esa parte en particular. Entonces vamos a duplicar toda la sección así. Ahora aquí estamos. Simplemente arrastraré esto. Y luego empezaré a desplazarse con rueda del ratón mientras mantendré pulsado el botón del ratón. Y cuando aparezca este indicador azul, solo lo dejaré caer ahí. Ahora tiene un margen de 50 en la parte superior porque eso es lo que dijimos. Por esta parte. Quiero aumentar esto a un 100 o tal vez un 150. Por lo que seleccionando la sección, agrega uno ahí. Ahora tenemos 150 espaciado ahí. Entonces vamos a cambiar estos para seleccionar un curso ahora. Y ahora, todo lo que necesitas hacer es venir a esta caja de imagen. Entonces vamos a seleccionar eso y la imagen, puedes cambiarla a cualquier imagen que represente ese curso específico. Contraer eso para el cuerpo, cambió el título por el nombre del curso. Por ejemplo, introducción a la mecánica. Y luego por supuesto, una breve descripción. Y luego pueden empezar de inmediato. Recuerda, estas son como categorías de los diferentes cursos. Por lo que esto puede ser una categoría cuatro, diseño web y animación. Por lo que estas son categorías aquí arriba. Pero luego cuando venimos aquí, estos son cursos específicos. Y debido a que esta sección está llevando a cabo cursos destacados, puedes duplicar esta intersección para que tengas cerca de seis cursos destacados en la página principal. Vamos a actualizar eso. Cambiemos esto a algo así como modelado en Blender. El tercero puede ser fundamentos de JavaScript. Vamos a actualizar eso. Y revisemos los cambios. Así que desplázate hacia abajo. Muy bien, así que ahí vamos. Por lo que ahora que hemos terminado con esta sección, veamos cómo crear estas sección de aprendizaje a sí mismo. Entonces te veré en la próxima lección. 19. Sección de lista: Bienvenido de nuevo. Aquí vamos otra vez. Notarás que esta sección, la sección de acordeón, se parece más o menos a esta sección de aprendizaje a ritmo propio. Sólo que no tenemos acordeón aquí, tenemos una lista. Y así es en lo que nos centraremos durante los próximos minutos. De lo contrario, todo lo demás es igual. Entonces saltando a nuestro editor, lo que tenemos que hacer es duplicar también esta sección. Entonces lo arrastraré. Una vez que lleguemos allí, empezaré a desplazarse con mi rueda de ratón central. Y cuando lleguemos, lo dejaré caer. Viene con todos los ajustes, incluido el margen en la parte superior. Y ahora todo lo que tenemos que hacer es en primer lugar, revertir esto con la imagen de ese lado. Entonces voy a quitar el acordeón. Y ahora nos queda con este bonito texto que podemos editar. Podemos actualizar dos pies en esa sección. Así que voy a copiar eso. Selecciona eso, pegarlo ahí. Copia eso, selecciónelo, péguelo ahí. Actualice eso. Y ahora lo que tenemos que hacer es ir a este ícono. Haga clic en este icono. Aquí. Vamos a teclear lista. Y tenemos lista diferente aquí. Sólo necesitamos lo normal, agradable que viene con Elementor por defecto. Vamos a dejarlo caer ahí y tiene un ícono y algún texto. Entonces vamos a abrir el elemento de lista uno y cambiemos lo que dice allí. Así que sólo voy a copiar esto básicamente ahí. Y ahí vamos. Voy a repetir lo mismo para los dos. Ahora notarás que estos son iconos diferentes para que siempre podamos cambiarlos. Entonces para éste, seguiré seleccionando una garrapata o jet. Por lo que seleccionaré eso. Insertar para el segundo. Consultar también. Y ahora tenemos tres dientes. Actualice eso. Y vamos a previsualizar los cambios. Desplazemos hacia abajo y veamos qué tenemos. Ahí vamos. Una bonita, hermosa sección. Simple, no muchas cosas ahí. Así que sigamos adelante y añadamos un bonito botón justo aquí debajo del texto. Como pueden ver aquí, tenemos un llamado a la acción. Este es el momento en que agregamos este botón que está en el panel básico. Así que vamos a arrastrar el botón justo debajo del texto. Y mientras sigue activo, podemos cambiar lo que dice. Entonces aprende más o empieza. Ahora, es nuestro llamado a la acción. Es coincidente estilo. Y por supuesto el enlace está aquí. Donde quiera que se redirija a la gente cuando haga clic en el botón, Eso está aquí. Y si quieres que este botón abra una nueva pestaña, en lugar de redirigir a personas desde esta página, siempre puedes hacer clic en este volante y abrir enlace en nueva ventana. Esto abrirá una nueva pestaña. Ahora va dentro de estilo. Vamos a quitar este relleno. Y eso romperá el relleno predeterminado en el botón. Y entonces podemos establecer el nuestro propio. Entonces a la izquierda vamos a darle un 50. Y a la derecha lo mismo. Después de arriba y abajo, 1515. Vamos a darle un 70 a la izquierda y a la derecha. Correcto. Y luego aumentemos el espaciado entre el botón y el texto de la lista aquí para que podamos seleccionar la lista misma. Margen avanzado, luego aumentar el margen en la parte inferior. Pulsó hacia abajo el botón, emite, reduce el margen en la parte superior. Reduzca ese espaciado entre él y el bloque de texto aquí. Actualice eso. Y también cambiemos el color de este botón. Así que selecciona este estilo de botón. Vayamos al color al hover, queriendo ser este azul. Así que permítanme seleccionar este estilo de texto. Copia esto. Seleccione este botón de estilo de botón, pase el cursor, color. Vamos a pegarlo ahí. Entonces cuando alguien se cierne sobre él, cambia a eso. Y cuando alguien se cierne sobre él, también podemos establecer cuando es el cilindro hover, la animación, tal vez algo así como Bob. Y eso es bulbo. Vamos a actualizar eso y luego previsualizar los cambios. Así que desplázate hacia abajo. Ahí vamos. Luciendo impresionante. Entonces, ¿qué sigue? Por lo que ahora es el momento de trabajar en la sección testimonial. Y como se puede ver, también tiene las partículas y algún fondo grisáceo. Veamos cómo hacer eso en la próxima lección. 20. Sección de Testimonials: Bienvenido de nuevo. Por lo que ahora estamos creando estas secciones de testimonios. Así que sin perder más tiempo, vamos a saltar a nuestro editor. Y como ya habrás adivinado, agreguemos una sola sección de columna. Lo primero, por supuesto, es seleccionarlo. Y por supuesto lo primero es ir al margen Avanzado. Démosle un margen superior 100 para separarlo de la sección anterior. Y luego empecemos dándole ese color de fondo. Así que ve dentro de estilo, tipo de fondo, clásico. Iré aquí y luego le daré un poco de gris que está cerca del blanco, no muy oscuro. Eso me gusta. Lo siguiente que tenemos que hacer es seleccionar aquí el signo más. Y te darás cuenta aquí tenemos este H2 y H3. Por lo que simplemente podemos duplicar esto. Duplicar eso, suéltalo ahí. Duplicar eso también. Y suéltala justo debajo de los dos años. Y luego por supuesto, empujémoslo al centro. Selecciona eso, empujarlo al centro. Y ahora podemos sumar nuestros testimonios justo debajo de ellos. Entonces yendo a este ícono, escribiré testimonios probando mole. Y el que necesitamos es este testimonio de IQ kids elementos, kid light. Lo arrastraré y lo soltaré justo ahí cuando aparezca el indicador azul. Y por defecto tiene éste ya seleccionado. Pero el que me gusta es éste. Adelante y elige el que quieras. Y por defecto solo está mostrando un testimonio por diapositiva. Y eso se debe a que dentro de la configuración, las diapositivas a mostrar están configuradas en una. Así que vamos a configurarlo en tres diapositivas para desplazarse. Por supuesto, eso es bastante sencillo. Significa que cuando estás desplazando necesita desplazar solo una diapositiva. Si tienes varios testimonios, puedes configurarlo en dos o tres testimonios por pergamino. Y seguir adelante y jugar con todos estos otros ajustes no va a profundizar en eso. Solo queremos poblar cada testimonio con algún contenido. Así que cerremos los ajustes y vayamos a testimonial. Para el testimonio número uno, puedes darle un nombre al cliente. Entonces designación, gerente de marketing, coma, tal vez la empresa seasitios web de ventanasde vidrio sitios web de ventanas o algo de ese tipo. ¿ Qué clase de nombre hay? Y luego tenemos la revisión testimonial. Así que voy a seguir adelante y copiar este testimonio aquí. De acuerdo, no estoy habilitada, está bien, no puedo resaltar eso, así que sólo voy a copiar este texto. Copiar eso. Y vamos a pegarlo aquí. Vamos a reducirlo un poco. Sí, eso me gusta. Entonces colapsemos de nuevo. Ir al segundo testimonio. Llamas de Timoteo. Ella tiene un testimonio y vamos a añadir uno más, así que voy a duplicar eso. Y ahora tenemos dos llamas de Timoteo. Cambiaré el segundo. Eso es actualizar eso. Y ahora tenemos cuatro testimonios. El motivo por el que tenemos cuatro testimonios en lugar de tres es porque también lo necesitamos para poder desplazarse. Entonces se está desplazando porque tenemos un testimonio extra que mostrar. Si tienes tres, no habrá desplazamiento. A continuación, vamos dentro de estilo. Y si colapso el layout, tenemos varios ajustes aquí en los que podemos trabajar. Así que empecemos con una calificación. Podemos cambiar el color para ir con nuestro esquema de color. Entonces también podemos colapsar eso y cambiar el ícono de cotización. Así que por ahora, es así de azul. Realmente no me importa cómo se ve, así que no hay problema al respecto. Entonces no voy a tocar eso. Entonces tenemos el layout. Vamos a la disposición y al radio fronterizo, digamos, vamos a mantenerlo en 20 para que tenga una esquina redondeada. Así. Se derrumbó el diseño. Y creo que me gusta cómo se ve hasta ahora. Entonces lo siguiente que queremos hacer es ir dentro del testimonio de contenido. Y para cada testimonio, necesitamos agregar una imagen. Así que he abierto Bennett Daimler avatar cliente. Y iremos dentro de nuestra carpeta de activos. Ya había preparado unas imágenes de los chicos. Entonces empecemos con Bennett. Así. Vamos a derrumbar eso. Se abre las llamas de Timothy. Vamos a cerrar eso. Tenemos a Barbara colapsar eso y tenemos tenemos Alexandra actualizar eso. Entonces vamos a prever los cambios. Desplazarse hacia abajo. Ahí vamos. Nuestro testimonio está funcionando, pero ahora nota que no tenemos algún relleno aquí arriba, y por supuesto aquí abajo. Y tampoco tenemos las partículas. Vamos a ordenar eso. Entonces seleccionando la propia sección. Porque en primer lugar, comienza con el relleno. Voy a romper eso. Y luego en la parte superior, necesitamos un relleno de 50. En la parte inferior necesitamos 50. Así que hoy en día ese agradable espaciado así. Y luego vamos a agregar algunas partículas. Así que vamos a encender eso. Y necesitamos tal vez digamos 90. Y luego para el color de las partículas, queremos darle un poco de gris que sea más oscuro que el fondo para que sea visible. Y vamos a copiar ese gris. Copiar eso. Haga clic en cualquier lugar allí. Vamos a pegarlo aquí dentro. Reduce la velocidad a cuatro, pero depende de ti. Entonces vamos a actualizar eso. Sobre efecto. Actualiza eso y veamos los cambios que se desplazan hacia abajo y veamos lo que tenemos. Sí. Por lo que ahora se ve mucho mejor. Podemos hacer que estas partículas sean un poco más oscuras. Parecen estar demasiado gritando. Así que entrando aquí, arrastraré esto un poco hacia arriba para que se desmaye. Copiar eso. Pega ahí dentro. Actualice ahí. Vamos a prever los cambios una vez más. Desplazarse hacia abajo hasta el fondo. Por lo que ahora se ven mucho mejor. No están demasiado oscuras. Y así es como crear la sección testimonial. A continuación, veamos cómo crear la sección llamada a la acción que tiene el formulario de registro antes de crear la carpeta. Entonces te veré en la próxima lección. 21. Sección de formulario de llamada a acción: Casi terminamos con el contenido de la landing page. Ahora sólo tenemos la sección llamada a la acción que tiene una forma y el pie de página. Entonces sigamos adelante y creemos esta sección. Entonces saltando a nuestro editor, por supuesto, lo que tenemos que hacer es agregar una sección de doble columna. Y vamos a darle un margen superior de alrededor de un 100100 y un margen inferior de un 100 también. Y eso es porque como ves aquí, una vez que terminemos con esa sección, necesitaremos algún espacio entre la sección y el pie de página. Y recuerda, estamos creando la comida es por separado, igual que lo hicimos con el encabezado. Por lo que voy a seguir adelante y actualizar eso. Y aquí mismo, podemos agregar, podemos duplicar esto. Así que arrastraré esto a esa columna. Y luego vamos a copiar esto. Por lo que haga clic en eso. Y luego aquí, pegaré el texto. Alinearlo a la izquierda así. Entonces aquí, sigamos adelante y agreguemos un código corto. Por lo que al hacer clic en ese plus se revelará esta área y podemos escribir código corto. solo teclear filtro corto traerá esta opción y podemos dejarla caer ahí. Entonces ahora lo que tenemos que hacer es ir al backend en nuestro tablero y crear un formulario. Y entonces el formulario tendrá un código corto, un pequeño código que podemos entrar, pega aquí. Y el formulario se mostrará aquí mismo en esta sección. Así que volvamos a dentro de nuestro tablero. Vamos a Plugins y Add New porque aún no tenemos ningún plugin de formulario instalado, así que podemos seguir adelante e instalarlo. Mi plugin de formulario favorito se llama formulador. Simplemente tiene todo lo que necesito simple de usar. Por lo que voy a seguir adelante y teclear formulador. Y es de WP MU Dev con 300 mil instalaciones activas en 948 críticas de cinco estrellas. Entonces lo instalaré ahora. Es un plugin muy impresionante que me gusta usar porque muchas de sus características gratuitas son primas en la mayoría de los otros complementos de forma. Por lo que ofrece características premium de forma gratuita. ¿ Verdad? Entonces sigamos adelante y activemos. Y ahí vamos. Ahora está instalado. Y lo encontrarás casi en la parte inferior de este menú aquí. Entonces iré a formar agua y formas para limitadores. Haga clic por un minuto o así podemos ir a su landing page dentro del tablero. Muy bien, entonces así es como se ve. Tenemos la opción de crear un formulario, crear cualquier tipo de formulario a partir de una de nuestras plantillas prefabricadas o construir el mío desde cero. Por lo que voy a crear y ya hemos construido formularios. Y queremos crear un formulario de inscripción al boletín. Por lo que seleccionaré eso y continuaré. Entonces le daré un nombre, apuntaré y crearé. Y aquí vamos. Por defecto, se rellena previamente con el nombre y la dirección de correo electrónico, luego el botón suscribirse, y podemos previsualizarlo. Entonces el nombre, dirección de correo electrónico y suscribirse. Voy a cerrar eso y lo publicaré. Ahora tenemos este código corto. Recuerda que mencioné el código corto. Ahora podemos copiar esto haciendo clic en este icono aquí. Ahora, el acceso directo se ha copiado con éxito. O si cierro eso, puedes ir a estas ruedas dentadas y copiar código corto y aún nos llega el mismo mensaje. Y con ese código corto copiado, puedes volver a nuestra página aquí y pegarla aquí. Si aplico esa actualización cambia a la página, haga clic en Actualizar. Vamos a prever los cambios. Desplázate hacia abajo. Y ahí vamos. Un bonito formulario de inscripción que tiene un llamado a la acción. Entonces lo que tenemos que hacer es antes que nada cambiar el color de este botón para rimar con el resto de los botones aquí mismo en la página web. Entonces volvamos a naranja. Volviendo al interior de nuestro tablero, dentro del formulador, vayamos dentro apariencia de este formulario. Y eliminemos estos bordes antes que nada, eligiendo la opción plana. Aquí hay otras opciones, pero me gusta el piso. Y luego vamos a los colores y seleccionamos el disfraz. No queremos usar los colores predeterminados. Y para el botón de enviar, Seleccionar. Haga clic allí en ese botón. Y vamos a teclear F 1524. Y se está duplicando. No sé por qué f h n igual. Yep. Y luego en hover, queremos que sea tal vez ese azul oscuro. Por lo que quería volver a seleccionar esa copia de estilo. Entonces yendo aquí, básicamente ahí dentro. Entonces ahora si lo previsuamos, yup, así, cierra eso. Y cuando está en foco, queriendo tener ese mismo color azul oscuro, usualmente tengo el mismo color de enfoque o color activo que el color de la libración. Muy bien, así que vamos a actualizar los cambios. Volvamos a nuestra página. Seleccione este formulario. Haga clic en Aplicar. Muy bien, así que desplámonos hacia abajo por el propio formulario. Así que vamos a hacer clic en vista previa de los cambios. Desplázate hacia abajo. Y ahí vamos. Al hover, come ese azul oscuro. Ahora, otra cosa que tal vez quieras hacer es tal vez agregar o eliminar campos aquí. Entonces esto no es una clase de cuatro minutos. Hay muchos tutoriales en YouTube sobre cómo usar estos complementos específicos para crear formularios. Pero volviendo dentro de los campos, si no quieres escoger el nombre de la persona, puedes eliminarlo. Y ahora te queda solo con el campo de dirección de correo electrónico. Vamos a actualizar eso. Y vamos al frente. Selecciona el Formulario, aplica los cambios una vez más. Muy bien, así que vamos a seguir adelante y previsualizar los cambios. Entonces desplazándose hacia abajo. Y ahí vamos. Entonces ahora que terminamos con esa sección de llamada a la acción, veamos cómo crear la carpeta. En la siguiente sección, nos vemos a la brevedad. 22. Ayúdame a enseñar a un elemento a 10,000 estudiantes: 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. 23. Crea el pie de página: Ahora es el momento de crear el pie de página. Antes de seguir adelante y sumar las animaciones en los diferentes elementos de la página web y también hacer que el encabezado sea pegajoso. Así que vamos a seguir adelante y crear primero una carpeta. Y por supuesto, como mencioné un poco antes, va a crear la foto por separado la misma manera que creamos la cabeza. Por lo que voy a ir a hacer clic en este menú de hamburguesas y Salir a Dashboard porque hemos terminado con el contenido corporal. Volveré a salir. Ahora vamos a los elementos. Mantenga encabezado, pie de página o paseo. Vamos a seguir adelante y decir Añadir nuevo. Aquí adentro. Le daré una carpeta de nombres. Y luego el tipo es una carpeta. Deberías estar disponible en todo el sitio web y debe estar activo. Así que guardemos los cambios. Aquí vamos. Entonces vamos a editar. Editar contenido será redirigido al front-end donde ahora podemos diseñarlo. Entonces aquí estamos. Ahora en esta lección, quiero mostrarles cómo usar plantillas de kit de elementos. Ahora, a lo largo de las lecciones, podría haber notado que yo estaba usando este ícono aquí mismo. Pero, ¿qué hacen estos otros iconos? Este es el icono predeterminado elementor plantilla. Al hacer clic en eso, se le llevará a plantillas que han sido creadas por Elementor. Y también puedes tener acceso a tus propias plantillas si lo has hecho, si has subido alguna. También tenemos bloques, bloques que puedes usar para crear las diferentes partes de tu sitio web. Y este de aquí es por kit de elementos. Entonces esta es la que nos interesa. Y quiero mostrarte cómo diseñar cómo ahorrar tiempo mediante uso de diferentes plantillas proporcionadas por algunos de estos plugins. Para que como pueden ver, lo he abierto y he ido directamente a las secciones. Y aquí tenemos plantillas de pie de página, secciones de encabezado. Contamos con secciones de llamada a la acción, acordeón de imagen para tiendas de belleza. Muchas plantillas que puedes importar a tu página de forma gratuita. Por lo que este es el que quiero importar, por lo que sólo voy a hacer click Insertar. Y ahí vamos. Una bonita foto hermosa ya creada para nosotros. Quiero arrastrar esto a, déjame ver. Quiero arrastrarlos a estos. Quiero deshacerme de eso. Entonces nos quedamos con esto. Y si selecciono la sección en sí y voy al interior avanzado, notarás que tenemos 400 margen superior. Entonces quiero deshacerme de eso porque si dejamos eso a los 400, cuando llegue a este punto, después de este llamado a la acción, Antes de llegar más allá, tendremos un espacio ridículamente enorme que no necesitamos porque ya agregamos un margen inferior de un 100 en este llamado a la acción. Entonces ahora que eso está listo, vamos a seguir adelante y reemplace este logo por el nuestro propio. Por lo que seleccionaré eso. Y cuando importaste la plantilla, agregó algunas imágenes de marcador de posición predeterminadas como esta. Entonces, así que no te perplejas y te preguntes qué VCs. Por lo que quiero seleccionar mi logo e insertar medios, y ahí vamos. Muy bonito. También puedes actualizar este texto a lo que quisieras decir. Y podemos seguir adelante y darle estilo. Entonces topografía, cambiarla a Montserrat. Esto ya es Montserrat y estos son enlaces útiles. Puedes cambiarlos a lo que quieras que digan. Entonces lo siguiente que quiero hacer es cambiar el color de esta comida, este fondo. Entonces seleccionando la sección en sí, tocaré en este lugar y copiaré ese azul marino. Y voy a entrar aquí. Si bien este todavía está seleccionado fondo de estilo, pegue eso ahí y actualice. También siento que debería arrastrar esto justo por ahí. Para equilibrarlo. Actualice eso. Vamos a prever los cambios. Muy bien, así que ahora te darás cuenta de que esto es una suscripción. Ahora, suscribirse hoy, llamado a la acción. Entonces eso significa que necesitamos un formulario aquí. Y en realidad podemos simplemente usar la misma forma que habíamos creado. Así que voy a copiar este código corto. Y luego volviendo aquí, agreguemos un código corto. Suéltalo justo debajo de eso, y luego vamos a pegar eso ahí. Actualizado. Vamos a revisar los cambios o montar así. Entonces ahora que esto se ha vuelto más alto que esto, creo que deberíamos tomar mal iconos sociales. arrastraré y las sueltaré ahí. Y voy a aumentar el margen superior en este texto aquí para darle algo de espacio para respirar en la parte superior. Entonces vamos a prever los cambios. Y ahí vamos. Entonces así es como crear una carpeta. Puedes seguir adelante y jugar con todo lo demás, con todo el conocimiento que has adquirido hasta ahora, esta no será una tarea demasiado difícil de cuidar. Hecho, eso es un reto para ti. Mira cómo puedes personalizarlo aún más. Ahora, queremos ver cómo se ve la página enteramente junto con la foto. Así que quiero ir dentro de las páginas del tablero. Y luego quiero hacer clic en ver en casa. Para que podamos echarle un vistazo desde arriba a abajo, desplazándonos hacia abajo desde arriba. Ahí vamos todo el camino hasta el pie de página. Entonces lo siguiente que queremos hacer ahora te has dado cuenta es que el encabezado no es pegajoso y estos diferentes elementos no están animados. Tenemos que añadir algunos efectos de movimiento a nuestros elementos. Hagámoslo en la próxima lección. Antes de seguir adelante y hacer que toda la landing page responda en diferentes dispositivos. Entonces te veré en breve. 24. Encabezado pegajoso: Y bienvenidos de vuelta. En esta lección, queremos que el encabezado sea pegajoso. Entonces si empiezo a desplazarse, notarás que en este momento está desapareciendo junto con el resto del contenido, lo que queremos hacer es asegurarnos de que no desaparezca. Entonces, ¿cómo hacemos eso? Vamos dentro del tablero de instrumentos y necesitaremos editar el encabezado dentro del kit de elementos, pie de página de encabezado. Entonces vamos a abrir eso. Ahora tenemos el pie de página y el encabezado. Entonces por supuesto, vamos dentro de la edición de cabecera con Elementor, y voy a hacer clic derecho en el enlace abierto en nueva pestaña para que podamos editarlo en una nueva pestaña. Voy a cambiar a esa pestaña. Y aquí estamos. Por lo que por supuesto ahora el encabezado es editable. Y recuerda que uno de los plugins que instalamos fueron los efectos de cabecera Tiki. Si pudiera simplemente saltar rápidamente al tablero yendo dentro de plugins. Instalamos efectos de encabezado pegajoso para Elementor mientras estábamos instalando Elementor. Entonces este es el momento de usar ese plug-in. Y todo lo que tenemos que hacer es seleccionar el encabezado y entrar avanzado y encontraremos la opción efectos de encabezado pegajoso justo debajo avanzado. Entonces vamos a ampliar ese habilitar. Y ahora el encabezado ya está pegajoso. Es que no podemos desplazar esta página para verla en acción, pero lo veremos en breve. Así que voy a seguir adelante y guardar esto primero antes de hacer cualquier cambio. Y ahora que se guarda, quiero ir dentro del tablero y vamos dentro de las páginas. Esta es nuestra landing page. Así que haga clic derecho abrir enlace en nueva pestaña para que podamos mirar la página en una nueva pestaña y desplazarnos para ver si el encabezado ahora está pegajoso. Muy bien, así que ahora vamos a desplazarse. Y ahí vamos. El encabezado ahora es pegajoso, pero ahora notarás que es un poco alto. En otras palabras, está ocupando mucho espacio mientras nos desplazamos y realmente no necesitamos todo este espacio. Entonces, ¿cómo podemos resolver eso? ¿ Volviendo al interior de nuestro editor? Bueno, esto todavía está seleccionado y bueno todavía estamos dentro de efectos de encabezado pegajoso. Llamemos hacia abajo y busquemos cabecera encogible. Entonces activa eso. Y hagámoslo un 50 por ciento. Y también vamos a encoger el logotipo. Hagámoslo también un 50 por ciento. Por lo que eso significa que el logotipo será del 50 por ciento, el tamaño original. Y la altura de cabecera también será 50 por ciento tan alta como la original. Entonces vamos a actualizar eso. Y vayamos dentro de nuestra página y déjame recargarla. Así que haga clic derecho recargar. Entonces, está bien, así que ahora veámoslo. En acción. Empiezo a desplazarse. Peso. Tenemos que reducir el margen en el encabezado. Así que volvamos aquí. Vamos a seleccionar el menú en sí. Haga clic en cualquier lugar dentro de este elemento azul. Entonces eso está seleccionado avanzado. Se va dentro del margen. Vamos a reducir el margen inferior hasta tal vez 20, y el margen superior hasta 20 negativos. Eso también es reducir el tamaño del logotipo. Sólo lo ocultaré, tal vez en algún lugar allí. Entonces vamos a actualizar eso. Muy bien, así que volvamos a entrar a esta página y volver a cargar la página una vez más. Ahora desplazándose. Sí, Así que ahora esa es una buena altura. Y se ve, creo que se ve hermosa. Entonces así es como hacer que la cabeza de pegajosa. En la siguiente lección, vamos a ver cómo hacer que el encabezado responda. Porque en este momento si presionamos Control Shift I para entrar en las herramientas del desarrollador Control Shift I, y luego haga clic en este modo de respuesta icono de toggle y haciendo clic en este menú desplegable para seleccionar un dispositivo como el pixel cinco, notarás que el encabezado en este momento no es receptivo. En otras palabras, no se ve bien en dispositivos móviles, en smartphones. En la siguiente lección, vamos a ver cómo hacer que este encabezado se vea bien en los teléfonos inteligentes. Te veré en breve. 25. Encabezado responsivo: Bienvenido de nuevo. Es hora de que este encabezado se vea mejor en los teléfonos inteligentes. Así que volviendo a nuestro editor, aquí mismo, haré clic en este icono del modo de respuesta para revelar esta configuración receptiva. Y verás que tenemos modo tablet y modo smartphone. Entonces iremos dentro de estos dos para que se vea bien en esos dispositivos. Ya se ve bien en escritorio, que es donde estamos ahora mismo. Así que vayamos dentro del modo tablet. Y así es como se ve en las tabletas. Recuerda que tenemos dos columnas. Si puedo cambiar a tablet, modo de escritorio. Recuerda que tenemos estas columna que está sosteniendo el logotipo, y tenemos esta columna que está sosteniendo el menú. Entonces cuando cambiamos a tablet, todavía tenemos las dos columnas, pero ahora están apiladas una encima de la otra. Y eso no es lo que queremos. Queremos que estén de lado a lado. El menú en el lado derecho y el logotipo en el lado izquierdo. Si volvemos al modo de escritorio, toda esta sección, la sección de encabezado es un 100%, y estas dos columnas se dividen en porcentajes. Por lo que tal vez esto sea del 90 por ciento y esto es 10%. Entonces si volvemos al interior de las tabletas, si seleccionamos la columna que está sosteniendo el logotipo. Por supuesto que ahora, ahora mismo está en un 100%. Si entramos aquí y tecleamos algo como el 50 por ciento y golpeamos Enter para antes que nada, observe que no pasa nada. Y eso es porque hay un pequeño error en Elementor que necesita que primero expandamos esto solo un poco para nuestros cambios en el modo tablet surtan efecto. Te has dado cuenta de que cuando arrastro esto un poco a la izquierda, los cambios han surtido efecto. Entonces la primera vez que cambies al modo tablet, asegúrate de elegir primero este lado o este otro lado y arrastra un poco las palabras. De esa manera, los cambios que hagamos en modo tablet nos serán visibles a medida que trabajamos en ellos. Entonces lo segundo que tenemos que hacer es seleccionar la columna que está sosteniendo el menú. Y hagámoslo un 50 por ciento también. Ahora que lo empuja hacia el lado derecho porque esto es 50 por ciento y esto es 50 por ciento para conformar un 100 por ciento. Si bien todavía estamos ahí, seleccionaré el menú en sí seleccionando estos elementos. Y estos cambios para editar elementos consiguen Nav Menu. Y quiero ir dentro del margen y romper la configuración predeterminada. Y ahora eso trae estos malos a enfocar. Y lo que queremos hacer es empujarlo un poco hacia abajo aumentando el margen superior. También aumentemos el margen derecho para empujarlo hacia adentro un poco así. Ahora notarás que está oscuro porque está sobre un fondo oscuro. Así que voy a ir dentro de estilo. Déjame colapsar el envoltorio de menú y tenemos el estilo hamburguesa. Entonces voy a ampliar eso. Y por dentro aquí tenemos diferentes partes para editar. La primera parte, queremos editar el tipo de fondo. Voy a hacer clic en eso. Y luego vamos a darle un color. Ese es el color que queremos. Creo que me gusta. Actualice eso. Y si lo desea, también puede reducir aún más esta columna de logotipo. Por lo que podemos seleccionar esto y hacerlo tal vez 20%. Y hagamos esto 80 por ciento. Porque si esto es del 20 por ciento, esto necesita ser del 80 por ciento para hacer el 100%. Entonces seleccionando esto, y ahora está de vuelta todo el camino hasta el final. Vamos a actualizar eso. Y luego con eso hecho, creo que me gusta cómo se ve el menú en modo tablet. Ahora que tenemos los cambios se guardan, vamos a cambiar la página donde teníamos esta vista. Recargaré esta página, así que Control R. Y luego cambiaré al modo tablet. Así que tal vez iPad Air. Y así es como se ve el menú en una tableta. Creo que se ve bien, pero nota que tenemos un gran margen aquí, pero aquí mismo el logo casi está tocando el borde. Aumentemos el margen de ese lado. Entonces seleccionando esta columna, vamos dentro de margen avanzado. Aumentemos el margen izquierdo hasta ese punto. Tal vez 12. Actualice eso. También aumentemos un poco el marginal superior. Vamos a actualizar eso. Ve dentro de este lugar, Control R para refrescar. Y ahora tenemos un buen espaciado alrededor. Están regresando aquí. Es hora de que responda en los teléfonos inteligentes, seleccionando el ícono del móvil. Y como pueden ver, tenemos que hacer lo mismo que acabamos de hacer en las tabletas. Tenemos que hacer que estas dos columnas ocupen un 100% dándoles porcentajes diferentes. Así que seleccionando la columna logotipo, vamos dentro de diseño. Mantengámoslo tal vez el 50 por ciento. Y seleccionemos la columna de menú. Dámosle también un 50 por ciento. Y ahora los dos menús están correctamente alineados. Y debido a que los habíamos configurado en modo tablet, ya se ven bien hasta cierto punto. Ahora, todo lo que tenemos que hacer es hacer algunos ajustes adicionales al menú lateral que aparece cuando haces clic en esto en tu dispositivo móvil, déjame hacer click en esto para que puedas ver a qué nos referimos. Cuando hacemos clic en eso. Nosotros revelamos este menú aquí. Ahora ya tenemos algunos ajustes básicos. Entonces, en primer lugar, si colapso el envoltorio de menú, tenemos el logo del menú móvil. Entonces este espacio en blanco aquí es para un logotipo para este menú de teléfonos inteligentes. Por lo que volviendo al interior del contenido, notarás que tenemos una sección aquí desde la configuración del menú móvil. Por lo que abriendo que tenemos logo de menú móvil, si digo Elegir imagen, puedes añadir un logo para ese menú. Y ya había subido este logo. Adelante y sube el tuyo. Y haré clic en insertar medios. Y si hacemos clic en esto, ahora tenemos ese logotipo apareciendo ahí. Si cierro eso, ese logotipo es diferente de este logo porque nota que esto es, esto tiene texto blanco y dice cursos. Y si abro esto dice plantillas. Por lo que es un logotipo completamente diferente al que subimos para el logo principal. Así que ten en cuenta eso. Lo siguiente que queremos hacer es editar el margen alrededor de este logo porque nota aquí tenemos algún espaciado agradable, pero aquí está casi tocando el borde. Por lo que vamos dentro de estilo, menú móvil, logo, margen. Rompamos ese margen predeterminado. Y a la izquierda, aumentemos el margen. Así. Creo que ya me gustó la posición. No voy a ir demasiado lejos. Pero adelante y juega con estos ajustes para ver lo creativo que puedes conseguir con la tuya. El siguiente problema que queremos editar es este botón de cierre de alternancia. Y lo hacemos yendo dentro apertura estilo hamburguesa que tenemos el toggle de hamburguesa. Si cierro esto, ese es éste. El toggle de la hamburguesa es éste. Y si abrimos el menú, el menú lateral y desplazamos hacia abajo, también tenemos el toggle cerrado. Ahora, ese es éste. Por lo que podemos editar el tipo de fondo cuando está en estado normal. Y podemos darle un color, ese color. Y al hover, también podemos darle un color, pero cuando estás usando un teléfono móvil, no pasas el dedo sobre los iconos. Básicamente sólo los tocas. Entonces no creo que esto tenga sentido. Así que lo dejaré justo como está. Vamos a actualizar eso. En un hover, estos colores se ven bien, pero si quieres cambiarlos, siempre puedes venir, déjame cerrar. Eso. Siempre puede venir a los elementos del menú, elemento de sub menú. Todos esos ajustes están en estos tres paneles. Así que adelante y compruébalos y mira lo creativo que puedes conseguir con eso. Con todos esos cambios guardados. Vamos dentro de nuestra página aquí mismo. Y así que ahora si actualizamos esta página, Control R, y cambiamos a cualquier dispositivo de smartphone como el pixel cinco o tal vez el iPhone 12s son muchos, se ve impresionante. Y si abrimos la barra lateral, así es como se ve. Cambiemos al pixel cinco y veamos cómo se ve. Déjame cerrar eso. Así es como se ve en el pixel cinco. Cambiemos a, déjame ver Samsung Galaxy. Y así es como se ve en Samsung Galaxy. Y así es como hacer que el encabezado responda en tabletas y smartphones. En la siguiente lección, Veamos cómo hacer que el resto del contenido responda en esos dispositivos. Antes de concluir la clase, nos vemos en breve. 26. Sección del cuerpo responsivo: Bienvenido de nuevo. Ahora es el momento de hacer que el resto del contenido responda en tablets y smartphones. Entonces volviendo al interior de nuestro tablero, antes de ir dentro del tablero de instrumentos, recuerda, aquí es donde estábamos editando el encabezado. Entonces ahora hemos terminado con esta parte. Podemos seguir adelante y salir a Dashboard. Ya tengo el tablero abierto aquí mismo. Simplemente seguiré adelante y cerraré esta página porque ya no la estamos usando. Ahora cierra esta página porque volverá aquí para ver qué tan receptiva se ve la página. Entonces voy a seguir adelante y cerrar esto abajo. Tenía algunas páginas abiertas. Volviendo aquí. Lo que queremos hacer es editar esta página con Elementor porque estamos haciendo que el contenido principal del cuerpo responda. Y cambiaré a esa pestaña. Y aquí estamos. Ahora por supuesto, lo primero que tenemos que hacer es hacer clic en este modo de respuesta. Puedo revelar estos tres modos. Entonces cambiemos al modo tablet. Aquí estamos. Recuerda que mencioné que cuando cambies por primera vez al modo tablet, el modo tablet cambia, se establezca, no será visible. Entonces si agarramos esto y lo tiramos ligeramente, los cambios que ya habíamos hecho serán visibles. Ese es un pequeño insecto que he notado en Elementor. No es tan grande porque así se verá tu sitio web en las tabletas, no de la forma en que lo hizo hace apenas un momento. Y ahora que tenemos estos, lo primero que tenemos que hacer es que me gusta hacer estas columnas un 100 por ciento de ancho. Es posible que quieras dejarlos en 5050 por ciento, pero solo me gusta escoger éste yendo dentro del ancho de columna bajo Layout y haciéndolo un 100% así. Y luego seleccione eso, el texto en sí. Y empujémoslo al centro. Ahora es posible que quieras redimensionarlo depende de tu preferencia. Entonces si entramos dentro de la tipografía de estilo, podrías redimensionarla así. Y ahora este espacio es demasiado grande, así que podemos ir dentro de la propia sección. Después avanzó. Rompamos así este relleno. Y eso ya se ve bien. Tal vez quieras aumentar ese relleno en la parte superior, pero lo dejaré así. Entonces vamos a seleccionar este texto. Ir dentro de estilo, alinearlo al centro. Entonces seleccionemos estos botones. Ahora te darás cuenta si los alinea con el centro, no está funcionando. Y así una forma de moverse es simplemente aumentar el margen a la izquierda. Entonces mientras aún estén seleccionados, vaya dentro de margen avanzado. Y luego aumentemos el margen en el átomo izquierdo, tal vez 50, digamos 120. Creo que ahora están en el centro. Entonces voy a actualizar eso. Se trata de ser creativo. A veces podrías golpear paredes de ladrillo y necesitas hacerte creativo y encontrar formas de superar tus desafíos. Así que vamos a seleccionar la imagen. Observe que aún está en 50 por ciento de ancho. Entonces vamos a seleccionar la columna y darle un 100 por ciento. Y ahora está en un 100 por ciento. Y una gran cosa de la elemental es que te permite revertir condicionalmente el orden de estas columnas dependiendo del dispositivo en el que el usuario lo esté viendo. Entonces en este momento, primero es el bloque de texto, luego la imagen, pero podemos revertirlo cuando alguien lo está viendo en tableta. Si selecciono la sección en sí y entro de respuesta avanzada, podemos revertir columnas en tablet o en móvil. Hagámoslo en tabletas. Si selecciono eso. Ahora, están invertidos. Es la imagen primero, luego el bloque de texto segundo. Y si volvemos al modo de escritorio, todavía están en su orden original. Por lo que ahora están condicionalmente configurados para revertir dependiendo del dispositivo que cambie a tableta, todavía tiene este error. Pero si ampliamos esto un poco, ahora estamos viendo el resultado final. Entonces eso es que voy a decir actualización antes perder cualquier cambio en nuestro desplazamiento hacia abajo porque terminamos con la sección héroe. Creo que todo se ve bien en esta sección. Aparte del hecho de que estas columnas están demasiado cerca del borde. Entonces seleccionaré toda la columna que los sostiene. Ve adentro avanzado. Rompe este relleno, y queremos darle un relleno izquierdo y derecho de 20. Entonces a la izquierda y a la derecha solo mira a la derecha, un 20. Por lo que ahora tenemos un buen espaciado ahí. Vamos a seguir adelante y seleccionar esta columna. Vamos a repetir lo que acabamos de hacer. Me gusta en un 100% para el bloque de texto y este 100 por ciento. Entonces seleccionando esta columna un 100%, luego selecciona este texto, alinearlo al centro. Éste también. Por favor, texto también. Pasando lados, azulejo, centro de línea. Este es el acordeón. Podemos alinearlo. Así que déjame simplemente colapsar eso. Creo que se ve bien justo como está. Sólo que necesitamos seleccionar esta columna una vez más y darle un buen relleno a la derecha y a la izquierda. Entonces vamos a romper eso. El estándar es 20. Ahora tenemos algún bonito relleno a su alrededor. Demos a esto un 100% de ancho, ¿verdad? Así como eso. Entonces tenemos el contador. Por supuesto que ahora estos dígitos se ven demasiado grandes, así que seleccionaré el primer contador. Ir dentro de la tipografía de estilo, tal vez un 40. Entonces lo que puedo hacer es copiar. Entonces pega el estilo. Eso solo pegará el tamaño que tenemos. Estilo de pasta. Realmente no me gusta la forma en que estos textos saltan a la siguiente línea. Ojalá tal vez fuera satisfacción, simplemente satisfacción. Y para éste, vayamos dentro de contenido o simplemente estudiantes. Y ahora están todos en una línea. Pero lo que pasa es que una vez que elimines algunos textos de ellos, incluso en modo tablet, incluso en modo escritorio, aún los habrás eliminado. Esos son algunos de los cambios que surten efecto en todos los modos. Así que ten en cuenta eso. Volviendo al modo tablet. Vamos a expandirlo un poco. Muy bien, así que pasemos a la siguiente sección. Por ahora ya sabes lo que tenemos que hacer. Seleccionando la columna coincide avanzado, izquierda, 2020. Y ahora tenemos algún espaciado agradable. De lo contrario, todo lo demás se ve bien ya. Aquí mismo, claro, un 100%. Basado en un 100% también. También nos aseguramos de darle un buen relleno a la izquierda y a la derecha. 2020. Y podemos centrar este bonito también. Estilo alinear, centro. No podemos alinear estos, pero creo que ya están buscando. Bueno. Empieza ahora el botón en sí, podemos empujarlo a la central así. Actualicemos antes de perder cualquier cambio. Vamos a seguir desplazándose. Los testimonios. Luce bien. Demos a esto un 100%. Vamos a seleccionar los textos, alinearlo al centro. Selecciona aquí la columna, un 100 por ciento. Si bien aún está seleccionado, avanzó 2020. Y creo que se ve bien ahora. Entonces vamos a actualizar eso. Ahora. La parte que queda es la carpeta. Y para que la foto responda, hacemos lo mismo que hicimos con el encabezado. Por lo que vamos dentro de los elementos kid light, header folder y editamos el pie de página Elementor en el front-end. Intenta que responda en los dispositivos de la herramienta. Entonces en este punto, quiero dejarte eso a ti como reto, seguí ese proceso y hacer la respuesta fotográfica C. Así que cambiando a nuestra página de modo de respuesta, veamos estos dispositivos. Tratemos de imitar un nuevo dispositivo. Pero antes de hacer eso, vamos a Controlar R para refrescar la página para que los cambios surtan efecto. Ahora notarás que todo está correctamente alineado excepto los botones. Desplazemos hacia abajo. Como comprobamos en todas las demás partes. Todo se ve super impresionante excepto estos dos botones. Entonces veamos qué hacer al respecto. Entonces volviendo aquí, antes que nada, pasemos a la vista móvil. Selecciona los dos botones. Entonces vamos a romper el margen. O el teléfono móvil. Si entramos, modo tablet, todavía se ven bien. Y el modo inmóvil, también se ven bien. Entonces vamos a actualizar eso. Entonces todo lo que necesitabas hacer era seleccionar los botones y romper el margen. Por lo que ahora regresando aquí, Control R para refrescar la página. Impresionante, así que me gusta cómo se ve. Ahora, nuestra página se ve mucho más presentable en tabletas y smartphones, así como en escritorio. Vamos a seguir adelante y animar estos diferentes elementos que cuando alguien visite la página web por primera vez, mientras se desplazan, los diferentes elementos aparezcan de manera animada. Solo para mejorar la experiencia del usuario. Veamos cómo hacer eso. En la siguiente lección. Te veré en breve. 27. Agrega efectos de movimiento: Hola ahi, Bienvenido de nuevo. Nuestra landing page ahora es completamente receptiva en los diferentes dispositivos. Pero una cosa más que tenemos que hacer es agregar algunos efectos de movimiento a nuestros elementos en la página que harán que la página sea más interactiva y mejorará la experiencia general del usuario. Así que volver a un modo de escritorio, mientras todavía estamos aquí en la página de edición. Vamos a seguir adelante y animamos primero esta parte. Entonces seleccionando estas columna. Vayamos dentro de los efectos de movimiento avanzados. Y ahora este es el defecto, por lo que no hay efecto de movimiento. Si hacemos clic en el menú desplegable, tenemos varios tipos diferentes de efectos de movimiento. Tenemos desvanecimiento, así que ese es el desvanecimiento. Tenemos zoom. Tenemos límites. Para esta sección de héroes. Me gusta el fade en efecto y podemos cambiar la velocidad o duración aquí. Entonces me gusta que sea lento, así. Y voy a repetir lo mismo para esta columna. Ve adentro. Efectos de movimiento avanzados, desvanecimiento, y luego lo haré lento. Muy bien, así que vamos a actualizar eso. Y vamos a prever los cambios. Entonces nota cómo se desvanecerá lentamente, así como así, volviendo dentro de nuestro editor. Ahora podemos hacer eso por cada elemento en esta landing page. Entonces volviendo a esta página, seleccionemos esta columna que está sosteniendo aquí la primera categoría. Ve dentro de efectos de movimiento avanzados. Esta vez quiero deslizar o rebotar, deslizar, ¿verdad? No hay deslizamiento a la izquierda. Así. Y para éste, quería deslizarme en Wright. Efectos de movimiento avanzados. Deslizamiento derecho? Y para el medio, puede deslizarse hacia abajo. Efectos de movimiento. O tal vez puedas simplemente desvanecerte lentamente. Volvamos también a esto. Efectos de movimiento. Lento. Me gusta que entre despacio. mismo caso se aplica a este deslizamiento lentamente. Actualice eso. Y vamos a prever los cambios que se desvanecen lentamente así. Y los que se deslizan lentamente así. Pasemos a éste. Pero por supuesto, recuerda que todo se trata de tu creatividad. Tenemos tantas opciones aquí. Y así los diferentes efectos de movimiento que selecciones determinarán qué tan impresionante se cargará su página a los nuevos usuarios. Entonces pasando a la tercera. Selecciona esto. Efectos de movimiento avanzados. Tal vez hacer zoom. No, eso se está desvaneciendo. Ir al zoom. Este es efectos de movimiento muy avanzados. Zooming, actualización. Y así voy a seguir adelante y añadir algunos efectos de movimiento para el resto de los elementos de esta página. Pero aceleraré esta parte porque solo estoy repitiendo el mismo proceso y otra vez hasta el fondo. Por lo que te sugiero seguir adelante y ser creativo. Veamos qué se te ocurrirá. Entonces a continuación, quiero seleccionar esto. Así que acabo de terminar y he guardado los cambios. Muy bien, así que desplábamos hacia abajo y veamos qué me he llegado. Oh, correcto. Ahí vamos. Entonces así es como agregar efectos de movimiento a tu landing page. Como ya he mencionado, ponte lo más creativo posible y ve con qué terminarás. Y eso marca el fin de nuestra clase. Espero que lo hayas disfrutado tanto como yo disfruté armándolo para ti. Y si tienes alguna pregunta, adelante y ponte en contacto conmigo. Antes de que te vayas. Tengo algunos pensamientos finales y los compartiré en la siguiente y última lección. Te veré en breve. 28. 25 Outro: Felicidades por completar la clase. El hecho de que hayas llegado hasta aquí es una clara indicación de que eres un finisher. Mucha gente puede empezar a tomar una clase en línea, pero muy pocas personas pueden ver hasta el final. Ahora no sólo tienes una página web que funcione plenamente, sino también una valiosa habilidad que puedes usar para generar ingresos de muchas maneras diferentes. Se trata de lo creativo que puedes conseguirlo ahora que entiendes cómo armar una página web desde cero, es hora de que aprendas a hacerlo amigable con el SEO. Seo significa Search Engine Optimization, una página web o un sitio web que no ha sido optimizado para motores de búsqueda es invisible para los motores de búsqueda, lo que significa que no aparece en los resultados de búsqueda cuando los usuarios están buscando contenido que la página web está a punto de aprender a hacerla visible para los motores de búsqueda. Echa un vistazo a una clase de 60 minutos que publiqué específicamente para enseñarte a hacer eso. Abre mi perfil e inscribirte en esa clase y aprende a hacer que tus páginas web y sitios web sean descubribles por los motores de búsqueda. Y también echa un vistazo a otras clases donde te enseño a construir un sitio web totalmente funcionando, no solo una landing page. Si te gusta la clase, por favor recuerda darle una reseña positiva en la siguiente sección. Eso es muy útil. Te llevará unos dos minutos y tu opinión ayudará a que esta clase sea más visible para otros estudiantes que podrían estar buscando este tipo de información. Y como siempre, mi nombre es visa Ken. Siempre es un placer tenerte aquí y te veré en la próxima pieza de clase.