Diseñar una página de aterrizaje animada con tema oscuro con Elementor (plugin gratuito)

1. Introducción: Bienvenido de nuevo a otra clase elemental impresionante conmigo, puede Besser soy un experto en WordPress, y he estado usando Elementor para construir mis páginas web durante los últimos 4.5 años. Y me gusta mostrarle a la gente cómo usar esas mismas habilidades para construir páginas de aterrizaje para sus sitios web y para sus clientes. En esta clase, te estaré enseñando a diseñar una página de aterrizaje de fotógrafo. Entonces si eres fotógrafo y quieres saber cómo construir una página de aterrizaje para tu sitio web. Esta clase es para ti, pero por si acaso no eres fotógrafo, pero aún así te gustaría aprender a usar Elementor para construir páginas de aterrizaje impresionantes. Esta clase es para ti. Para cuando termines esta clase, habrás ganado las habilidades que necesitas para poder construir landing pages de clase mundial usando Elementor. Entonces sin perder más tiempo, déjame mostrarte la página de aterrizaje que estarás diseñando en la clase y luego empezar. Apenas tres. Entonces eso es lo que estamos diseñando. Si estás listo y emocionado de empezar, sé que lo estoy. Vamos a sumergirnos justo en. 2. Instalación del tema: Entonces lo primero que queremos hacer es saltar dentro de nuestro tablero e instalar el tema que controlará cómo se ve nuestra página web. Y el tema es lo que define cómo se ve y funciona tu sitio web. Entonces vayamos dentro del tablero y si quieres aprender más sobre el tema, Cisco adelante y buscamos tutoriales sobre lo que es un tema de WordPress en YouTube o simplemente Google. Por lo que dentro de nuestro tablero, queremos ir dentro de los temas de apariencia. Y por defecto, al instalar WordPress por primera vez, tendrá instalado un tema predeterminado. Y dependiendo del año, al dolor se le dará el nombre de ese mismo año. Entonces en este momento estamos en 2020 uno, mi tema es 2021, pero también tienes 2019 y 2020 disponibles para ti por si acaso quieres usarlos. Pero lo que queremos hacer es instalar otro tema llamado Astra. Y como pueden ver, Astra es uno de los temas que aquí se enumeran para mí porque es uno de los temas que más uso. Tiene que estar entre los top para mí. Pero por si acaso no lo puedes ver, adelante y escribe Astra aquí arriba en la barra de búsqueda. Astra anulación. Por lo que seguiré adelante y lo instalaré el viernes. Entonces sigamos adelante y activemos. Entonces haga clic en Activar. Y ahora nuestro tema activo es Astra, como puedes ver aquí mismo en este pop-up. Y tienen este mensaje con el que viene Astro no tan listo para usar plantillas de inicio y todo eso. Pero estamos aprendiendo a crear nuestras propias páginas web desde cero. Entonces cerraré eso y cerraré ese mensaje ahí mismo. Entonces ahora que nos han vendido el Tema Astra y activado, si estamos listos para escuchar sobre Elementor, estamos listos para instalar elementor y tener una visión general del espacio de trabajo elemental. Entonces hagámoslo en la siguiente clase. Te veré en breve. 3. Actualización rápida: el nuevo asistente de configuración de elementos: Bienvenido de nuevo. Ahora, esta lección es una nota lateral rápida o una rápida actualización del proceso de instalación de Elementor. Si estás tomando esta clase en mayo de 2022 y más allá, notarás que la activación de Elementor ahora tiene un asistente de configuración que se compone de varios pasos que tienes que seguir para configurar las partes básicas de su sitio web. Mientras creaba esta clase hace varios meses, Elementor no tenía ese asistente de configuración. Entonces solo quiero que pasemos por ese asistente de configuración. Pero todo lo demás que estás aprendiendo en esta clase no cambia. Sigue siendo el mismo proceso en todo momento. La única adición es el asistente de configuración. Entonces como pueden ver en este momento, tengo una instalación completamente nueva de WordPress y estamos en la Versión 6. Y lo que quiero hacer es ir a Plugins, Agregar Nuevo. Para que podamos agregar Elementor y pasar por ese proceso. Buscaré la instalación de Elementor ahora. Y ahora cuando haga clic en Activar será redirigido a ese asistente de configuración. Y podemos atravesarlo juntos. Entonces aquí estamos. Simplemente alejaré un poco para que podamos ver más detalles. De acuerdo, así que ahora notarás que lo primero que elemental quiere que hagamos ahora es crear una cuenta para sacar el máximo provecho de Elementor. Por lo que estos son algunos de los beneficios por apuntarse a una cuenta con Elementor. Pero la cosa es que no es necesario tener una cuenta con Elementor para usar Elementor. Entonces sólo voy a seguir adelante y saltarme esta parte. El segundo paso es aceptar, continuar con el tema hallow que Elementor ha hecho para nosotros. Esto lo hace Elementor, pero estamos usando el Tema Astra, así que solo seguimos adelante y saltamos. Astra es un tema más poderoso. El tercer paso es dar nombre a nuestro sitio web. Mientras estabas instalando tu WordPress. Le diste un nombre al sitio web. Ese es el nombre que se mostrará aquí. Pero esto nos da la oportunidad de cambiar el nombre por cualquier otro nombre que queramos. Mi sitio web, y luego hagamos clic en Siguiente. Y si tienes un logo para tu sitio web y quieres agregarlo ahora mismo con anticipación. Simplemente puedes seguir adelante y abrir la mediateca y recogerla de la mediateca o cargarla desde tu computadora. Pero no vamos a hacer eso ahora mismo. Por lo que sólo me quedaré con este paso. Y claro que podemos agregar el logo más adelante y te mostraré cómo hacerlo. Hagamos clic en Skip. Y ahora llegamos al último paso donde tenemos dos opciones. Podemos empezar a editar nuestra página de inicio desde un lienzo en blanco con el editor Elementor. O podemos navegar desde cientos de plantillas o importar nuestras propias plantillas si las tenemos. Pero yo seguiré adelante y saltaré. Eso. Será redirigido al lienzo donde ahora podemos empezar a construir un sitio web. Y aquí vamos. Entonces básicamente eso es todo lo que quería mostrarte. Es una nueva actualización. No estaba ahí hace unos meses. Ahora, ya está ahí. Pero todo lo demás en las próximas lecciones sigue igual. El proceso sigue siendo el mismo para construir una landing page. Entonces sin perder más tiempo, Pasemos a la siguiente lección. Voy a ir a este menú de hamburguesas y hacer clic en Salir a Dashboard. Salgamos de esta página. Ahora estamos dentro del tablero y estamos listos para comenzar a construir el sitio web. 4. El espacio de trabajo elementor: Bienvenido de nuevo. En la lección anterior, instalamos y activamos el Tema Astra. Ya estamos listos para instalar elementor y tener una visión general rápida de los elementos son espacio de trabajo. Para que podamos familiarizarnos con las herramientas y características que estarán tratando cuando estemos construyendo nuestra página de aterrizaje. Entonces sigamos adelante y hagamos eso. Instalemos Elementor. Entonces entraré, solo seguiré adelante y pincharé plugins para empezar. Y debido a que esta es una instalación totalmente nueva de WordPress, tengo que por defecto plugins instalados ya. Entonces solo seguiré adelante y seleccionaré a ambos. Y en este menú desplegable, seleccionaré eliminar, luego aplicaré eso. Vamos a eliminarlos. Y ahora tenemos una pizarra limpia con la que trabajar. Por lo que seguiré adelante y pincharé Agregar nuevo. Y seremos llevados al repositorio de plugins de WordPress donde podemos buscar Elementor. Debe ser el primer resultado aquí mismo con más de 5 millones de instalación activa. Voy a seguir adelante y dar clic en Instalar ahora. Y notarás que tenemos muchos otros plug-ins aquí mismo que tienen el nombre Elementor en ellos. Entonces, ¿por qué es eso? Otros desarrolladores pueden seguir adelante y crear características, herramientas y funcionalidades para extender el poder de Elementor. Y estos chicos lo han hecho porque como puedes ver, Elementor en sí es creado por Elemental.com, pero estos otros plugins de terceros son desarrollados por desarrolladores de terceros. Entonces estaremos usando algunos de estos plugins aquí mismo a medida que avanzamos, medida que construimos nuestra página de aterrizaje, y conocerás qué plug-in juega, qué fila. Activemos Elementor ahora que está instalado. Muy bien, entonces ahora sólo tenemos un plugin instalado y ese Elementor. Entonces sigamos adelante y creemos una página para que podamos abrir el espacio de trabajo elemental. Entonces iré por dentro de las páginas, todas las páginas. Y como había mencionado, esta es una instalación totalmente nueva de WordPress. Entonces tengo que por defecto páginas ya creadas aquí mismo, pero no necesito estas dos, así que seleccionaré las dos. Y en este menú desplegable, me mudaré a la basura y aplicaré eso. Ahora no tenemos ninguna página, así que diré Agregar Nuevo. Y podemos seguir adelante y darle un nombre a nuestra página. Entonces digamos en casa. Entonces supongamos que esta es nuestra página de inicio. Justo aquí en el extremo derecho. En Plantilla, seleccionaré bajo el menú desplegable Elementor ancho completo. Entonces le pegaré a Publish. Y ahora se publica nuestra página. Y ahora que tenemos nuestra página lista, vamos a dar click editar con Elementor se llevará al front end donde estaremos editando la página. Entonces aquí estamos en el frente. Y a medida que editamos la página, así es exactamente como se va a ver. Por lo que realmente estamos editando la página y viendo los resultados en tiempo real. En el extremo izquierdo, justo aquí, tenemos este panel inferior justo aquí. Esta zona de abajo justo aquí tiene algunas opciones. Tenemos el botón de actualización ya que hacemos cambios aquí estaremos dando click en Actualizar. Y estaremos haciendo clic en el icono de los cambios de vista previa aquí mismo para ver la página con los cambios y sin estas herramientas. Y aquí tenemos modo responsive. Aquí es donde haremos clic cuando queramos hacer que nuestra página sea sensible a diferentes tamaños de pantalla, smartphones, tablets y escritorio. Y lo haremos como nosotros, ya que hacemos esta página de aterrizaje sea receptiva. Y lo siguiente aquí mismo es el área de historia donde es aquí donde tendremos una lista de todos los movimientos con realizados, todos los cambios que hemos realizado al añadir elementos a nuestra página en esta sesión. Entonces si por ejemplo, agrego una sección de doble columna como esa, y luego tal vez agrego una, una sección de triple columna como esa. Ahora tenemos dos cosas agregadas. Entonces si vamos dentro de la historia, notarás que primero agregamos este apartado y luego agregamos este apartado. Y podemos dar click aquí mismo para volver al punto en el tiempo en que sólo teníamos esa sección. Entonces esto es como una zona de viajes en el tiempo donde puedes ir a cualquier punto específico en tiempo cuando tuviste ciertos cambios, cuando solo tenías ciertos elementos mirando de cierta manera. Y llegaremos a ver para qué sirven todas estas otras opciones. Pero la parte estará interactuando con más es esta área aquí. Y esta es la zona que nos brinda todas las herramientas y características que queremos agregar, todos los elementos que queremos agregar a nuestra página web. Entonces, por ejemplo, si alco colapsó ese panel, notarás que tenemos otro panel que dice Pro. Por lo que las herramientas en el panel Básico son gratuitas. Si colapsamos eso y vamos dentro del panel, notarás que tienen el candado pequeño aquí mismo para mostrar que estas herramientas no se pueden arrastrar y soltar ahí cuando intentes arrastrar, habrá este pop up que dice que necesitas, necesitas tener la versión pro de Elementor para poder usar estos. Y luego colapsemos eso. Entonces tenemos más bajo el general y muchas otras herramientas incrustadas bajo todos estos paneles. Por lo que estaremos trabajando con los paneles que tienen los elementos libres porque son más que suficientes para que logremos las cosas que necesitamos para lograr esta página de aterrizaje aquí mismo. La otra cosa que quería mencionar aquí es que cuando agregamos plugins, recuerden esos plugins de terceros que agregamos, déjame entrar dentro del panel y vayamos dentro de Plugins. Digamos Añadir Nuevo. Déjame buscar elemental. Entonces recuerda estos plugins de terceros que acabamos de hablar. Si instalamos algún plugin de terceros que se creó para extender el poder de Elementor, como complementos esenciales para Elementor, y en realidad lo instalaremos más adelante. Ahí se presentará aquí mismo como panel. Complementos tan esenciales para elemental, nos presentaremos con todas las herramientas extra que está trayendo a Elementor. Y encontrarás que algunas de esas características que son gratuitas con ese nuevo plugin están listadas aquí mismo en la versión Elementor Pro. Por lo que mientras Elementor mismo está cobrando por esas herramientas, estos chicos habrán creado herramientas que hacen lo mismo, pero provistas de forma gratuita. Y otra cosa, digamos que estamos dentro. Estamos dentro aquí y estamos editando cosas y queremos agregar algo. Queríamos arrastrar una herramienta, un elemento desde aquí, pero no lo podemos ver porque ahora mismo en este momento lo que tenemos estos ajustes para esta sección, podemos seguir adelante y hacer clic en ese menú ahí mismo. Y va a traer estos paneles que tienen herramientas. Entonces en cualquier momento que no pueda ver estas herramientas, haga clic en estos minúsculo icono aquí mismo y traerá las herramientas. Entonces aquí tenemos más ajustes con los que llegaremos a interactuar a medida que avanzamos. Entonces esa es una visión rápida del espacio de trabajo elemental. Y para empezar a crear una página web, todo lo que necesitamos hacer con Elementor es crear una sección. Y las secciones se estructuran de acuerdo a los diferentes casos de uso común. Para que podamos tener una doble columna así. Y ahora esta es una sección de doble columna. Las columnas están demarcadas por estas líneas negras rotas. Y el tramo está demarcado por esta frontera azul. Y podemos cambiar el tamaño, y sólo podemos arrastrar las columnas para redimensionarlas si queremos. Y también podemos hacer clic derecho y duplicar una columna. Y ahora tenemos tres columnas. Para empezar a agregar elementos dentro de una página web, todo lo que necesitamos hacer es hacer clic en ese signo más justo ahí, o hacer clic en esto para revelar las herramientas. Entonces si hago clic eso revelará los elementos y ahora podemos empezar a arrastrar entonces uno por uno. Y ahora cuando tenemos un elemento activo, como ahora mismo es la imagen que estamos editando es el nombre del elemento que aparecerá aquí. Cualquiera que sea el elemento que se seleccione aquí es el elemento que aparecerá aquí arriba. Entonces si selecciono esta sección, ahora estamos editando la sección. Si selecciono esta imagen, ahora estamos editando la imagen, lo que significa que estos ajustes son para la imagen o la derecha, así que eso es solo una visión rápida de los elementos son espacio de trabajo. Espero que ahora estés familiarizado con algunas de las herramientas y características de Elementor con las que estarán interactuando. Pero claro que llegarás a entender cómo usar la mayoría de estas otras cosas que no habíamos tocado mientras construimos una página de aterrizaje porque esa es en realidad la razón por la que estamos teniendo estas clases en el primer lugar para que puedas acostumbrarte a trabajar con Elementor. Entonces lo siguiente que queremos hacer ahora, si pudiera saltar a nuestro punto de referencia es construir la barra de navegación. Y la barra de navegación está conformada por dos cosas, el logo y el menú de la página web. Entonces, empecemos agregando el logotipo del sitio web. Hagámoslo en la siguiente clase. Te veré en breve. 5. Añadir el logotipo de sitio web: Bienvenido de nuevo a otra lección impresionante. Por lo que ya es hora de añadir nuestra barra de navegación en el sitio web. Y queremos empezar con nuestro logo. Pero aquí está la cosa. Tenemos que añadir un plugin que nos ayude a crear estos Napa porque será un elemento independiente solo espacio. Por lo que queremos instalar un plugin. Por lo que iremos dentro de los plug-ins en el tablero. Plugins añadir nueva búsqueda de Elementor. Y eso traerá estos plugins relacionados elementales aquí mismo. Y estamos buscando constructor de carpetas de encabezado para Elementor so o año aquí mismo, Elementor header footer builder se le dice que ahora. Y activemos eso. Por lo que ahora el constructor de cabecera y pie de página de Elementor está activado y podemos acceder a él a través de la apariencia. Los elementos son el constructor de encabezado y pie de página. Vamos a seguir adelante y hacer clic en eso. Y como aún no hemos creado ningún encabezado o pie de página, aquí no tenemos ninguno, así que sigamos adelante y creamos, Añadir Nuevo. Y podemos saltarnos esto. No necesitamos eso. Y le daremos un nombre a nuestro encabezado de navegación. Entonces sigamos adelante y llámenlo, llámenlo como quieras. Entonces sólo lo llamaré mi nav. Es un bar de navegación. Y tenemos todas estas opciones justo frente a nosotros. Lo siguiente que queremos hacer es seleccionar el tipo de plantilla. Es una cabecera. Y eso traerá estas opciones justo aquí bajo display on. ¿ Dónde debemos decidir si queremos que la barra de navegación se muestre en todo el sitio web, independientemente de cuál página web sea tu propia, se supone que debes poder seguir teniendo la barra de navegación en los roles de usuario superiores. Adelante y digamos todo. Entonces eso significa que si eres administrador y tienes personas debajo de ti que también están editando el sitio web. Puedes restringir quién puede editar tu barra de navegación para que cualquiera pueda editarla. Lo dejaré en absoluto. Y luego veamos, aquí mismo en el extremo derecho, quiero ir dentro de plantilla, las fallas cambian eso a Elementor ancho completo. Y bajo la configuración de Astro, quiero ir por debajo de la barra lateral y decir que no hay disposición de contenido de barra lateral, ancho completo extendido. Y desactivemos estos ajustes predeterminados que vienen con primaria Astra y digamos Publicar. Por lo que ahora se publica nuestra barra de navegación. Queremos ir al front end y empezar a construirlo para que se vea así. Entonces lo que tenemos que hacer es golpear Editar con Elementor. Pero antes de que hagamos eso, solo quiero ir adentro apariencia Elementor, cabecera y pie de página constructor. Y notarás que ahora lo tenemos listado aquí mismo. Acabamos de crearlo y ahora está listado bajo nuestro plugin. Entonces si hago clic en Editar será llevado de vuelta a esta página y siempre podemos hacer cambios en esta configuración. Entonces vamos a darle a Editar con Elementor. Y ahora nos han llevado al frente donde ahora podemos empezar a construir la barra de navegación. Entonces vamos adentro, digamos Agregar Nuevo y vamos a añadir una sección de doble columna. Y ahora podemos arrastrar esta columna para ser más pequeña que la columna de la derecha porque por supuesto esta columna es más larga que la entonces la columna del logotipo. Por lo que volviendo dentro de aquí, voy a hacer clic en ese signo más. Y luego arrastraremos un elemento de imagen ahí dentro. Y ahora podemos poner nuestro logo aquí. Y recuerda, porque este es nuestro elemento activo es el que estamos editando aquí y podemos hacer click ahí y añadir nuestro logo. Y debido a que aún no tengo ninguna imagen agregada, seleccionaré subir archivos y seleccionaré archivos. Y ya había preparado esta carpeta de activos aquí. Si lo abres, contiene todos los elementos que se utilizan en la página web. Eso significa incluir imágenes. Todas las imágenes están ahí. Tan solo si quieres seguir, puedes usar las mismas imágenes que se utilizan en mi trabajo. También tenemos los resultados terminados aquí mismo. Para que puedas importar estas páginas de aterrizaje y se verán exactamente como nuestra tierra, nuestra página de aterrizaje final, y tenemos el logo. Por lo que importaré el inicio de sesión por ahora. Haga doble clic en eso. Y ahora que es importado, seguiré adelante y pulsaré Insertar medio. Y ahora nuestra imagen es importante, pero debido a que esta mitad del nombre es blanca, podemos ver por ahora. Entonces hagamos algo con el color de fondo. Por lo que primero golpearé actualización eso. Y ahora ve dentro de este menú de hamburguesas. Haga clic en esa configuración del sitio del menú hamburguesa. Y yo entraré. Antecedentes, tipo de fondo. Haga clic en eso. Y en esta pequeña caja de aquí, solo arrastra eso y cambia el color de fondo a negro, y luego actualiza eso. Entonces ahora toda la página web tiene un fondo negro. Cierra esta zona azul y vuelve a nuestra zona de edición. Anular. Entonces vamos a previsualizar los cambios. En. Así luce nuestro logo. Lo siguiente que queremos hacer es agregar nuestro menú de navegación en la página web, y eso haremos en la siguiente clase. Te veré en breve. 6. Añadir el menú de nav: Bienvenido de nuevo. Ya es hora de agregar un menú de navegación del sitio web. Así que saltando de nuevo dentro de nuestro espacio de trabajo aquí mismo. Entonces lo que queremos hacer es ir dentro de esta caja y hacer clic en el signo más justo ahí. Y aquí dentro teclearemos nav. Y tenemos algunas opciones de navegación aquí mismo. Pero recuerda uno de los plugins, acabamos de instalar IIS header Footer builder para Elementor, y para eso tenemos HF estar aquí. Entonces arrastraremos eso y lo soltaremos ahí mismo. Por lo que ahora esperamos ver un menú, pero no hay menú. Entonces vamos a previsualizar eso para ver los cambios. Aquí no hay menú. Entonces, ¿qué está pasando? Bueno, esto aún está seleccionado. Si miras esta zona aquí mismo, notarás que dice que no hay menús en tu sitio. Acude a la pantalla de menús para crear uno. Por lo que necesitamos ir dentro del panel de WordPress, crear un menú que mostraremos dentro de esta caja aquí mismo. Entonces lo que quiero hacer es en otra pestaña, entrar al tablero. Entonces voy a hacer clic en eso, volver dentro del tablero mientras esta pestaña sigue abierta. Y quiero ir dentro de los menús de apariencia. Y ahora aquí dentro notarás que lo primero en la parte superior aquí, dice los menús de edición del menú. Crea tu primer menú a continuación. Y podemos seguir adelante y crear un menú. Entonces démosle un nombre. Mi menú. Y hagámoslo el menú principal, luego Crear menú. Esta es la forma de crear un menú de WordPress, que luego puede mostrarse en el front-end. Y note ahora que tenemos el menú listo, dice Agregar elementos de menú de la columna de la izquierda, esta columna justo aquí. Estos son nuestros artículos de menú. Se trata de elementos de menú 1, 2, 3, 4, 5, 6 elementos de menú. Entonces aquí, los elementos de menú pueden ser páginas web, pueden ser entradas de blog, ser enlaces personalizados que has creado. Pueden ser categorías de contenido. Entonces lo que necesitamos es crear, puedes crear cualquiera de estos tipos de contenido y mostrarlos en tu menú como elementos de menú. Solo quiero crear enlaces personalizados por ahora, nos estamos centrando en la página de destino para que no necesitemos más páginas. Por lo que crearé una URL personalizada. Simplemente insertaré un hashtag ahí mismo. Puedo usar ese hashtag es un placeholder para una URL imaginaria a la que podrían apuntar estos enlaces. Pero por ahora solo digamos sobre Agregar al Menú. Y ahora es un elemento de menú. Seguiré adelante y agregaré otra, otra URL, solo otro hash. Llamemos a este blog. Pero por supuesto, en un escenario del mundo real, esto sería algo así como http slash slash www dot. A lo mejor si tienes un video de YouTube que quieres compartir con alguien ahí mismo como elemento de menú. Pero por supuesto ahora dejémoslo como un hachís ahora mismo. Agregar a Menú. Y lo haré dos veces más. Una vez más. Agregar al menú. Y ahora tenemos cuatro elementos de menú. Entonces seguiré adelante y guardaré menú. Y debido a que hemos guardado nuestro menú, ahora, si vamos dentro nuestro espacio de trabajo elemental donde estábamos creando nuestro encabezado, si actualizamos esta página, voy a golpear Control R, o si estás en un Mac Comando R. Muy bien, Así que ahora nuestros cuatro elementos de menú están apareciendo dentro este elemento que fue traído por hetero constructor de carpetas para Elementor, el plug-in que instalamos. Y porque ahora está seleccionado. Si nos fijamos en el lugar que tenía el mensaje de que no teníamos menú. Ahora tenemos este desplegable y está listando nuestro menú principal como uno de los menús. Si tuviéramos cuatro menús, se enumerarán en este menú desplegable. Y puedes seleccionar qué muchos quieres mostrar aquí mismo. Entonces eso es eso. Así que actualicemos eso. Y si bien esto aún está seleccionado, puedes seleccionarlo haciendo clic en cualquier lugar dentro de este borde azul. Por lo que voy a dar click en cualquier parte de ahí dentro. Y si bien aún está seleccionada, iré por dentro de diseño. Bajo alineaciones, voy a dar clic a los derechos para empujar el, el menú hacia el lado derecho. Y luego te diré, oye ahí. Hagamos una vista previa de los cambios. Y ahora nuestro menú ahora empieza a tomar forma. Pero por supuesto tenemos bastantes cambios que hacer como estos efecto hover. Y este último elemento necesita ser un botón. Entonces veamos cómo hacer eso. Entrando por aquí. Si bien esto todavía está seleccionado, colapsar el diseño e ir dentro del menú y tenemos el último elemento del menú. Seguiré adelante y presionaré el botón de último elemento. Y eso lo cambiará por un botón así. Actualizar eso. Y vamos a previsualizar los cambios. Por lo que ahí lo tenemos. Lo siguiente que queremos hacer es cambiar el color del hover. En primer lugar, el color predeterminado de los enlaces, y luego su color de cursor y los botones se desplazan el comportamiento. Entonces vayamos adentro aquí y veamos cómo se comporta nuestra referencia. Cuando está activo, es amarillo en el hover, es amarillo, pero por defecto es ancho. Entonces entremos aquí. Por lo que mientras el menú de navegación sigue seleccionado, voy a ir dentro de estilo. Y lo primero que queremos hacer es colapsar menú principal. Te darás cuenta de que tenemos cuatro paneles aquí mismo para menús desplegables. Empecemos con un botón. Haga clic en el botón. Y antes que nada, cambiemos el color del texto aquí mismo a blanco, así. Y luego cambiemos el tipo de fondo de botón de ese verde. Entonces cambiemos ese color. Y quiero tirar hacia arriba esos colores. Tengo esos colores en este documento aquí mismo, que he incluido en la carpeta de activos que mencioné antes. Lo puedes encontrar en la siguiente descripción. Entonces vamos a agarrar ese color amarillo ahí mismo, amarillo vibrante. Yo quiero agarrar este código. Vuelve aquí y pega aquí. Y ahora nuestro botón es ese amarillo. Hagamos click en cualquier parte del interior de aquí para deshacernos de esta caja. Y luego en el hover, queremos volver atrás y decir tipo de fondo. Debería serlo. Regresemos aquí adentro, copiemos eso. Volvamos adentro aquí y peguemos eso ahí dentro. En nuestro propio hover, el botón es ese rojo. Actualicemos eso. Lo siguiente que queremos hacer es cambiar los colores de los enlaces. Entonces, colapsemos ese botón. Y vayamos dentro del menú principal. Busquemos la topografía. El color del texto debe ser blanco, así que arrástrelo todo el camino hasta la parte superior. Y en el hover, tiene que ser amarillo. Entonces voy a hacer clic en eso. Y entraré ahí adentro y agarraré ese amarillo. Pégala ahí dentro. Y por ahora es amarillo. Veamos cómo se ve en activo. Cuando esté activo, sin color, así que le daré ese mismo amarillo. Entonces actualice eso. Hagamos una vista previa de los cambios. Y ahora nuestra barra de navegación se está comportando exactamente como se esperaba. Entonces echemos un vistazo a nuestra referencia y la fuente aquí es negra. Entonces entremos aquí y cambiemos el contacto a negro. Por lo que colapsar ese menú principal y abrir el color del botón debe ser negro cuando es normal. Actualicemos eso. Y en el hover necesita ser blanco. Actualizar eso. Y vamos a previsualizarlo. Cambia. Por defecto, es negro sobre hover, blancos. Impresionante. Entonces me gusta donde hemos llegado con el nav bar. Ahora podemos seguir y crear la sección de héroes con estos textos animados de autoescritura. Nos vemos en breve. 7. Añadir el texto animado: Bienvenido de nuevo. Por lo que ahora mismo queremos añadir estos textos animados aquí mismo. Este es un lugar muy bonito para agregar palabras clave importantes que quieres que los visitantes recuerden o que los visitantes tengan en cuenta el momento en que aterrizan en tu página. Es un buen lugar para informar a la gente muy brevemente sobre algo de lo que quieres que estén al tanto. Entonces veamos cómo hacer eso. Por lo que saltando dentro de nuestro tablero aquí mismo, queremos añadir un plugin que nos permita tener estos textos dinámicos. Entonces iremos dentro de Plugins, Add New, y escribiremos átomos esenciales son solo tipo esencial en que debería ser el primer resultado aquí por desarrollador de WP. Y notarás que son complementos esenciales para Elementor. Recuerda esos plugins que decimos fueron desarrollados por un tercero desarrolladores para extender Elementor. Este es uno de ellos. Entonces vamos a instalarlo ahora. Fin. Cuenta con más de un millón de instalaciones activas. Solo para mostrarte lo genial que es la facilidad del plugin o la derecha, así que vamos a activarlo. Y en este asistente de configuración aquí mismo, puedes seguir adelante y seleccionar la que quieras, la opción que quieras. Pero porque eres, estoy asumiendo que eres principiante, puedes ir con los ajustes básicos recomendados. Entonces vamos a lo siguiente. Y estos son los ajustes que has aceptado seleccionando lo siguiente básico. Vayamos a lo siguiente. Siguiente. No instale en sus días ni instale ninguno de ellos si lo desea. A continuación, entonces termina eso. Muy bien, entonces ahora tenemos complementos esenciales para Elementor instalados y tenemos acceso a todas esas nuevas características que se extienden elemental. Entonces volviendo dentro donde nuestro espacio de trabajo elemental aquí. Por lo que refrescaré este espacio de trabajo pulsando Control R o Comando R en el Mac. Y como ya había mencionado antes, si colapsan estos paneles aquí mismo, notarán que ahora tenemos más, más paneles agregados aquí porque recuerdan en la lección anterior agregamos Elementor, cabecera y el constructor de pie de página. Y ahora mismo acabamos de agregar adultos esenciales. Y si ampliamos eso, tiene elementos adicionales que podemos arrastrar aquí y llegar a nuestra página de aterrizaje. Entonces una de esas características es el texto frío, elegante. Entonces lo que quiero hacer y acabo de recordar, es que seguimos dentro del espacio de trabajo de cabecera. Lo que queremos hacer es salir de este espacio de trabajo porque ahora terminamos de editar la barra de navegación. Entonces salgamos haciendo clic en eso y salgamos a Dashboard. Dentro de nuestro tablero irá dentro de las páginas. Y tenemos la página de inicio que creamos antes, y eso es lo que estamos usando como nuestra página de aterrizaje. Entonces editaré con Elementor por si no tienes esta opción, significa que no hiciste clic en editar con Elementor. Podemos hacer click editar. Y dependiendo de cómo se vea tu página, solo tienes que hacer clic en editar con Elementor dondequiera que esté el botón. En nuestra, en la zona donde estamos editando el contenido principal de la página de aterrizaje. Entonces lo primero que notan es que aquí tenemos esta foto, cual no mentimos. Por lo que volviendo dentro del tablero, dentro de las páginas, todas las páginas Inicio. Notarás que tenemos este pequeño icono de configuración de Astra aquí arriba. Haga clic en ese icono. Y bajo el diseño del sitio, digamos que no hay barra lateral, de ancho completo estirada. Eso está bien. Entonces vamos a deshabilitar el encabezado anterior. Desactivemos el encabezado principal debajo del encabezado, el encabezado móvil, el título. Vamos a deshabilitar la imagen destacada y deshabilitada o carpeta. Entonces actualicemos eso. Y ahora si hago clic en Editar con Elementor o vuelvo directamente a esa página y la refresco. Déjame simplemente refrescarlo. Ahora ese pie de página se ha ido. Entonces lo primero que queremos hacer es agregar una sección de una sola columna de ancho completo. Este de aquí. Hagamos clic en el signo más dentro de ahí y arrastremos adentro aquí tipo fantasía. Y traerá estos elementos por complementos esenciales para Elementor, el plugin que acabas de instalar. Eso dejaré caer al final ahora porque es el elemento activo. Dice Editar texto de fantasía aquí arriba. Entonces lo primero que queremos hacer es mirar la anatomía de este elemento. Tiene estas tres cuerdas y esas son estas tres palabras que están cambiando aquí. Y luego tenemos estos tres primeros para palabras que no están cambiando. Esos son los textos de prefijo, para que podamos deshacernos de eso. Y tenemos los textos de sufijo, que es de la sentencia, de la sentencia. Quitémoslo también. Y agreguemos un punto, una parada completa ahí dentro. Para que tengamos, recuerda que tenemos esta parada completa amarilla justo aquí. Entonces volviendo aquí. Entonces ahora cambiemos lo que dicen estas palabras. Cambiemos eso por algo así como creativo. Cambiemos el segundo por fotógrafo, videógrafo. Videógrafo. Y vamos a actualizar eso. Entonces ahora las tres palabras, vamos a previsualizar los cambios o bien, así que eso es lo que tenemos actualmente en este momento. Lo siguiente que queremos hacer es dejarme cerrar estas páginas extra aquí mismo. Entonces lo siguiente que queremos es cambiar el color del texto y el tamaño también. Así que pinchando estilo. Así que pinchando estilo. Queremos colapsar los textiles de prefijo y abrir los estilos de texto de fantasía porque lo que nos queda es el texto de fantasía en sí. Y vamos a hacer clic en Topografía. Aumentemos el tamaño. Algo así, tal vez 162, pero todo depende de qué palabra escribiste ahí. Entonces, vamos a dar click afuera por ahí. Entonces color sólido. Cambiemos eso a blanco. Así. Actualicemos eso. Podemos cambiar el color del cursor si quieres, pero quiero dejarlo en Blanco. Lo siguiente que queremos hacer es colapsar los textiles de lujo e ir al sufijo textiles porque queremos darle un color. Recuerda aquí mismo, es amarillo. Por lo que quiero tabular a este documento y agarrar ese color amarillo. Copiar eso. Después toca de nuevo a nuestra página. Y quiero abrir el color del texto del sufijo y pegar eso ahí. Pega eso. Entonces ahora es amarillo, pero ahora es demasiado pequeño. Vamos a hacer clic en Topografía y vamos a aumentar el tamaño ahí mismo. En algún lugar ahí. Creo que me gusta ahí mismo. De acuerdo, vamos a actualizarlo. Y ahora note que en nuestra página, en nuestra página de referencia, el tipo de animación es diferente. Esto se está desvaneciendo mientras que el nuestro aquí mismo está escribiendo. Entonces para cambiar eso, Vamos a entrar dentro de contenido y colapsar textos de fantasía y expandir ajustes de textos de fantasía. Y cómo podemos cambiar el tipo de animación de teclear a desvanecerse, desvanecerse. Probemos límites theta así. Acerca de Zoom. Centeno. A mí me gusta Zoom. Pero para que las cosas sean más simples, solo lo dejaré en FE, adelante y jueguen con esos otros ajustes ahí mismo. Y vamos a actualizar eso. Entonces. Por supuesto que notarás que tenemos algo de espacio aquí arriba. Tenemos algún margen aquí arriba entre el uno y la barra de navegación. Entonces sigamos adelante y hagamos eso. Seleccionemos la sección en sí. Y vayamos adentro avanzado. Vamos a colapsar esos enlaces de relleno. Y entonces aumentemos el relleno superior a algo como digamos 50. Digamos que un 100. Y vamos a actualizar eso. Vista previa de los cambios o ¿verdad? Pero ahora nuestra fuente necesita ser un poco audaz. Ahora mismo. Parece ser a tema. Entonces seleccionando ese texto de fantasía ahí dentro y yendo dentro de estilo, estilos de texto de lujo. Sigamos adelante y seleccionemos el tipo Paleography aquí y aumentemos el peso de la fuente a algo así como 900. Ahora, el font-weight es más pesado, pero ahora cambiemos la familia a Montserrat. Montserrat. Analicemos los cambios. Anular. Eso me gusta. Entonces eso es eso, Así es como agregar los textos de fantasía. Nos dirigimos a algún lugar que hicimos. Entonces sigamos adelante y sumamos estos textos. Sólo copiaré eso. Copia y voy a entrar aquí y hacer clic en este minúsculo icono aquí mismo para sacar los elementos y arrastrar este editor de texto debajo del camarógrafo. Y mientras aún está seleccionado, seleccionaré todo esto borrado y luego pegaré el pequeño texto que acabamos de copiar del otro lado ahí dentro. Y luego mientras aún está seleccionada, iré dentro de estilo y alinearé su centro. Cambia el color a blanco. A continuación, seleccione el videógrafo. Ir por dentro avanzado, romper el margen, y luego abajo en, disminuyó el margen inferior. Empuja los diminutos textos hacia afuera. Actualicemos eso. Y vamos a previsualizar los cambios. Súper impresionante. Por lo que ahora hemos agregado nuestros textos de fantasía y el texto descriptivo a la sección de héroes. A continuación, queremos añadir este botón aquí mismo. Entonces hagámoslo en la siguiente lección. 8. Añadir el fondo animado: Así que bienvenido de nuevo. Por lo que esta vez queremos crear aquí estos antecedentes animados. Si miras de cerca, notarás que el fondo tiene algún tipo de círculos moviéndose aleatoriamente, y todos tienen un tamaño aleatorio. Entonces veamos cómo hacer eso. Lo que quiero hacer es saltar dentro del tablero. Por lo que no voy a entrar al tablero. Entonces déjame solo hacer clic en eso. Y ahora dentro del panel queremos ir dentro de plugins, agregar nuevos. Porque queremos añadir un plugin que añada esas partículas. Entonces sigamos adelante y tecleemos Pi, outlet pi o net. Y así tenemos dos plug-ins pi out net aquí. Y el que queremos E es botnet add-ons para Elementor. Por lo que inculca eso y la activación o paseo. Por lo que estas son las características que el plugin pone a nuestra disposición y también tiene algunos procedimientos. Entonces ahora que tenemos instalado el plug-in, volvamos a nuestro espacio de trabajo aquí y actualicemos esta página para poder cargar la marca recién instalada plug-in o novia. Entonces ahora está cargada. Vamos a colapsar básico. Se derrumba pro general, se derrumba todo. Y ahora te darás cuenta de que tenemos estos widgets gratuitos de PAF E. Entonces eso es piloto net add-on para elementos de widgets gratuitos. Y tiene por supuesto, los elementos que se mete en el proyecto. Por lo que seleccionando nuestra sección. Ahora, vamos a seleccionar esta sección. Y ya te darás cuenta, además de las tres pestañas que hemos estado teniendo aquí en la parte superior, tenemos PIFP. Entonces si haces clic en eso, se presentaron con ajustes adicionales para el PAF II, por lo que las partículas PIFP, Vamos a seleccionar en. Ahora, ahora está activo. Por lo que antes de realizar cualquier cambio, daré clic en Actualizar. Y vamos a previsualizar los cambios. Entonces así es como luce por defecto. Por lo que necesitamos modificarlo un poco para que se vea algo más sutil como esto. Entonces sigamos adelante y saltemos dentro de nuestro espacio de trabajo. Y debido a que todo es rojo por ahora, necesitamos cambiar estos colores. Entonces vamos por algo así como un gris muy oscuro ahí mismo. En algún lugar ahí. Iré con este código de color. Yo copiaré eso. Y yo también, porque también tienen enlaces, nota que tienen estas líneas que conectan los puntos. Entonces solo quiero hacer que el color del enlace el mismo color que los círculos o los elementos. Entonces peguemos eso ahí dentro y lo actualicemos. Analicemos los cambios. Y eso es lo que tenemos ahora. Por lo que note que se están moviendo demasiado rápido y necesitamos que se desaceleren un poco. Entonces, ¿dónde está la velocidad de esta partícula? Redujamos eso a 1. Pero por supuesto, puede jugar con la velocidad y ajustarla a la velocidad que quieras. Entonces vamos a previsualizar eso. Er, entonces eso es lo que tenemos en este momento. Creo que me gusta. Lo siguiente que queremos hacer es crear este botón aquí mismo. Y note que tiene estos efecto flotante al pasar el cursor sobre él. Y ya veremos cómo hacer eso. Así que vamos a saltar justo aquí, y vamos a hacer clic en este icono Más aquí y escribir botón. Y vamos a hacer clic en el primer botón. O eliminemos todo eso. Contraer eso. Y vayamos dentro básico. Y vamos a seleccionar el botón aquí mismo. Dejémoslo cuando aparezca esa línea azul para indicar que estamos listos para caer. Y ahora por defecto está en el lado izquierdo. Empujémoslo hacia el medio. Y vamos al interior de estilo. No, en primer lugar, cambiemos lo que dice bajo contenido. Textos, haga clic aquí. ¿ Qué dice? Ver mi portafolio. Ver mi portafolio o RI. Lo siguiente que queremos hacer es ir dentro del estilo para que podamos empezar a peinarlo. Voy a colapsar eso por un momento y te darás cuenta de que tenemos estas dos opciones. Entonces vamos a expandir el botón. Y por el color, Vamos a cambiarlo a ese amarillo. Entonces voy a tabular por aquí y copiar estos amarillos. Recuerda que proporcioné ese documento dentro de la carpeta en la siguiente descripción. Entonces peguemos eso ahí dentro. Y ahora el botón es amarillo, pero el color de prueba necesita ser negro, así. Y luego cambiemos la tipografía a Montserrat. Montserrat. A mí me gusta cómo se ve. Y hagamos algo sobre el relleno porque nota aquí en nuestro botón, aquí, tiene algún bonito relleno que hace que se vea más conspicuo y eso es lo que estamos tratando de lograr. Entonces mientras el botón todavía está seleccionado, voy a deshacer botón. Vamos al relleno y vamos a romper este enlace. Y eso distorsionará el botón por un momento. Aumentemos el relleno izquierdo 250 y el relleno derecho 250, inferior y superior 20. O RI. Actualicemos eso. Y vamos a previsualizar los cambios. Súper impresionante. Entonces eso es lo que tenemos en este momento. Pero ahora fíjate que nuestra sección de mejores héroes sube hasta aquí porque ahí llega el botón. Tenemos que aumentar el relleno aquí abajo y aumentar el espaciado entre el botón y este texto, al igual que aquí. Entonces hagámoslo. Por lo que podemos seleccionar mientras el botón sigue seleccionado. Vamos adentro avanzado. Rompamos ese enlace allá arriba, y hagamos que sea margen superior para ser 50. Ahora hagámoslo un 100. Actualicemos eso. Analicemos los cambios. O bien, así que ahora está en un buen lugar. Pero queremos aumentar. Lo siguiente que queremos hacer es aumentar el relleno en la propia sección de héroes, demarcada por esta frontera azul aquí. Entonces vamos a seleccionar la sección en sí. Y vayamos adentro avanzado. Y vamos a darle un relleno inferior de 6060 así. Actualicemos eso. En vista previa los cambios. Muy bien, entonces ahora tenemos estas partículas moviéndose por encima y por debajo del botón. Y nuestra sección de héroes ahora se ve genial. Entonces lo siguiente que queremos hacer es trabajar en esta sección aquí mismo con estos bonito icono. Sí, Así que este será un lugar muy agradable para contar con uno de tus proyectos favoritos o más recientes. Entonces sigamos adelante y creemos esta sección. Te veré en breve. 9. Cómo agregar la imagen: Bienvenido de nuevo. Por lo que saltando de nuevo lado este nuestro espacio de trabajo. Lo que queremos hacer es agregar una sección totalmente nueva porque recuerda que queremos crear esta sección aquí mismo y está directamente debajo de nuestro botón. Por lo que queremos añadir una sección de doble columna. Entonces hagámoslo. Haga clic en eso. Y ahora tenemos una doble columna N aquí. Voy a hacer clic en eso, arrastra un elemento de imagen ahí dentro. Hagamos clic en eso y arrastremos un elemento de encabezado allí. Y vamos a hacer clic en ese minúsculo botón justo ahí y arrastrar un editor de texto justo ahí, y cayendo cuando aparezca esa línea azul. Y recuerda que tenemos este ícono aquí mismo. Así que volvamos aquí y pinchemos en ese minúsculo icono para que aparezca el icono de Insight de los elementos y escojamos este que tiene la estrella. Este es el valor por defecto Elementor, elementor, ícono elementos. Arrastrémoslo y soltémoslo justo encima del título. Y por defecto está en el medio. Entonces mientras aún está seleccionado, alinémoslo a la izquierda. Actualizar eso. Muy bien, así que vamos a previsualizar los cambios. Está bien, así que eso es lo que tenemos. No se ve muy bonito. Tenemos que hacer algo al respecto. Entonces sigamos adelante y sumamos primero la imagen. Seleccionaré la imagen y esto cambiará para editar imagen y outs. Haga clic ahí y haga clic en ir a subir archivos, seleccione archivos. Y recuerda mencioné que preparé esta carpeta de activos y estará en la descripción a continuación. Puedes descargarlo. Tiene todas las imágenes que se estarán utilizando. Por lo que seleccionaré esta imagen. Sí, déjame seleccionar esa imagen por ahora. Abre eso. Y sigamos adelante e insertemos medios. Igual que eso. Actualizar eso. Y ahora veamos cómo se ve nuestra fuente. Entonces esta es Montserrat. Voy a copiar este Lorem Ipsum. Entonces podemos pegarlo ahí dentro, copiar eso. Y entremos aquí. Seleccionemos eso. Cada disparo cuenta. Y vamos a seleccionar la descripción. Entonces entra aquí, selecciona todo, borra eso, y sumamos nuestro largo Lorem Ipsum, correcto, así que mientras esto todavía está seleccionado, vamos dentro de estilo y cambiemos el color de la fuente a blanco. Haga clic en cualquier lugar de ahí para salir de esa caja. Y vamos a hacer clic en topografía. Entrenemos a la familia a Montserrat. Entrar. Seleccionaré el título, el encabezamiento. Voy a cambiar eso. Sí, eso es un H2, me gusta eso. Y vuelve al interior de estilo, cambia eso a blanco también. Entonces vamos a seleccionar el ícono y vamos adentro aquí, dentro de la cámara. Eso no me gusta. Muy bien, así que vamos a seleccionar eso. Pero también puedes subir tus propios iconos si quieres. Entonces inserte eso. Y ahora es una cámara, pero necesitamos que sea de este color amarillo. Entonces vayamos adentro aquí mientras aún es estilo seleccionado. Volviendo por aquí. Y tocaré a este bloc de notas aquí mismo y copiaré eso. Entra aquí y pegarlo aquí. Y ahora es amarillo. Pero estos elementos están demasiado unidos. Entonces lo que tenemos que hacer es seleccionar esta sección e ir aquí bajo Layout, columnas gap. Seleccionemos cualquiera de estas opciones que te gusten, pero iré con más ancho y luego actualizaré eso. Por lo que ahora se incrementa la distancia entre estas dos columnas. Entonces vamos a previsualizar los cambios. Entonces eso es lo que tenemos hasta ahora. Creo que está empezando a tomar forma. Tenemos que cambiar estas fuentes dos meses familia Arad. Entonces vamos a seleccionar eso. Ir dentro de tipografía de estilo. Familia, Montserrat. Montserrat. Y quiero aumentar el peso a algo así como 800 y actualizar eso. También es chupar el tamaño. Sólo usaré mis ojos. Digamos hasta algún lugar tal vez 38 está bien. Actualizar eso. Y ahora la distancia entre el botón y esta sección de aquí es, es un poco pequeña. Entonces aumentemos eso. Seleccionemos la sección en coincidir avanzado. Rompe este enlace aquí mismo y aumente el margen superior a tal vez algo así como 50. El app a ese spot y actualizar eso. Y podemos previsualizar los cambios. Está bien, eso me gusta. Entonces lo siguiente que tenemos que hacer es agregar este botón. Y una gran cosa de Elementor es que puedes copiar y pegar elementos igual que en otra normal, el software de diseño visual como Adobe Illustrator o Photoshop. Y así entrando aquí, sólo podemos copiar este botón aquí mismo. Haga clic derecho en el botón y cópielo. Entonces entraré aquí dentro. Haga clic derecho en los elementos de texto y pegue. Por lo que el botón irá por debajo de la elemental que hace clic derecho. Entonces ahora está por debajo de ahí, pero ahora tiene la configuración que fijamos para esta, necesitamos cambiar la configuración para que se adapte a estas áreas. Entonces, antes que nada, movámoslo a la izquierda. Quitemos estos márgenes. Entonces vamos a Avanzado y quitemos ese margen. A lo mejor hizo 0. Aumentemos el tamaño de la imagen hasta ese punto tal vez. Y vamos a actualizar eso. Y vamos a previsualizar los cambios. Y eso es lo que tenemos hasta ahora. Aquí mismo. Es rojo y amarillo propio flotante. Entonces cambiemos eso. Entonces vamos a aplicar ese efecto flotante. Bueno, el botón está seleccionado. Vamos al interior del estilo en Hoover, que quería ser el leído sonriente. Entonces copiaré eso, pegaré eso ahí dentro. Entonces de ninguna manera queremos que sea leve leer, queriendo ser leve leer en estado normal y en flotar. Queríamos que estos amarillo, amarillo vibrante, copiaran eso en el hover, queriendo ser estos vibrantes amarillos así. Y luego estado normal, la fuente necesita ser blanca. Sí, necesita ser blanco. Fuente de estado tan normal, amplia. En el hover, podemos hacerlo negro así. Entonces actualicemos eso y previsualicemos los cambios. Desplazemos hacia abajo. Y ahora nuestro botón se está comportando de la manera que queremos. Sigamos adelante y creemos esto, mi sección de servicios. Y este será un lugar muy agradable para dar una breve descripción de lo que haces por tu cliente. Entonces vamos a crear la sección Mis Servicios. En la siguiente lección, nos vemos en breve. 10. Agregar los servicios: Bienvenido de nuevo. Entonces aquí estamos en otra lección impresionante. Entonces lo siguiente que queremos hacer ahora es agregar mi sección de servicios. Por lo que empezaremos agregando el título y por supuesto estos iconos y texto. Entonces saltemos justo dentro de nuestro espacio de trabajo. Y lo que queremos hacer es agregar una sola sección de columna que recorra todo el camino de izquierda a derecha. Y recuerda podemos copiar elementos de un lugar a otro cuando se trabaja con Elementor, como copiamos este botón y lo usamos aquí. Por lo que también queremos copiar este título aquí para que podamos usarlo aquí. Quiero mostrarte rápidamente una característica muy útil que elemental proporciona. Y te darás cuenta cuando pase por esta esquina justo aquí, aquí no pasa nada. O si rondo por aquí, no pasa nada especial. Pero quiero hacer clic en este menú de hamburguesas aquí mismo e ir dentro de las preferencias del usuario. Manijas de edición. Cambie eso a sí y diga actualizar eso. Entonces ahora cuando estamos aquí adentro, cuando pasas por encima de las esquinas, trae aquí estas opciones que te ayudan a hacer tu trabajo más rápido. Entonces como si quisiera duplicar estos, todo lo que tiene que hacer es pasar el cursor sobre estos y hacer clic en eso. Y ahora puedo arrastrar esto a nuestra sección GUI completa aquí mismo. Lo siguiente que quiero hacer es duplicar eso y arrástrelo dentro de nuestra sección ahí mismo. Y luego quiero quitar todo ese sexo para que nos quede con una frase. Y si bien aún está seleccionada, vayamos dentro del estilo y alinémoslo al medio y hagamos lo mismo para el encabezado. Alinearlo con el medio. Y vamos a dar clic a la sección en sí. Ir a Avanzado, romper el enlace en margen y darle un margen de un 100. ¿ Verdad? Por lo que tenemos un buen espaciado entre las dos secciones. Actualizar eso. Vamos a previsualizar rápidamente los cambios. Y eso es lo que tenemos. Entonces lo siguiente que queremos hacer es agregar estos servicios. Entonces veamos cómo hacer eso. Hagamos clic en este pequeño icono aquí mismo para que aparezcan estos elementos. Y queremos arrastrar una sección interna justo debajo de ese texto. En esa intersección necesita tener unas cuantas columnas más. Uno que se duplica una vez más también. En esas columnas sostendrán diferentes partes de estas áreas. Entonces, así que en este momento una columna sostendrá estos y otra columna los mantendrá. Otra columna estos, y otra columna estos. Entonces por eso tenemos cuatro. Entonces para este y arrastra eso todo el camino a tal vez algo como por ahora, empecemos con un nueve. Bueno, a medida que arrastre, notarás que tenemos algunas métricas que están cambiando en tiempo real. El de la izquierda es un, a, Cambiemos ese nueve en algún lugar de ahí. Vamos a tirar eso a nueve también. Mira las métricas de la izquierda. Ahora vamos a darle un 5.55 g que son 55 también. O RI. Entonces aquí, lo que tenemos que hacer es hacer clic en ese signo más y escriba icono. Y arrastremos un icono ahí dentro. Y con ese icono haciendo clic ahí, y selecciona cualquier icono que quieras relacionado con la fotografía. Entonces permítanme seleccionar eso, inserte eso. Y notarás que el icono es pico por defecto. Pero haremos algo al respecto. Lo siguiente que queremos hacer es dejarme copiar este texto aquí mismo. Copia eso y la sección son mis servicios. Entonces déjame seleccionar esa primera n aquí. Quiero hacer clic en ese signo más, luego arrastrar un encabezado elementos. Y si bien aún está seleccionada, fotografía de bodas, lo pegaré ahí. De acuerdo, así que lo siguiente, vamos a agarrar esto y agarrar un editor de texto en el tirarlo ahí dentro. Entonces vamos a darle estilo a los textos. Empecemos con el ícono. En el interior de aquí. Vamos a yo conciso y arrastra eso hasta que estés satisfecho. Creo que 35 está bien para mí. Y cambiemos el color del botón, el color del icono a este amarillo. Entonces déjame saltar y copiar eso y volver ahí adentro y pegar ese amarillo ahí dentro. Entonces ahora es amarillo. Seleccionemos ese rumbo, vayamos dentro de estilo, seleccionemos el colegio, cambiémoslo a blanco. Ahora quieren cambiar la familia tipográfica dos meses Irak. Y quiero cambiar los pesos de la fuente a tal vez 700, pero quiero reducir un poco el tamaño a 25 está bien. Entonces seleccionaré estas descripción a continuación aquí. Y si bien aún está seleccionada, yendo de lado estilo, cambia el color a blanco. Cambia la familia de la tipografía a Montserrat. Está bien, actualiza eso. Y quiero cambiar un poco este color. Entonces sé un gris más oscuro, ligeramente oscuro para que sea distinguible del propio título. En algún lugar ahí. Está bien, entonces hay esa ligera diferencia entre, entre sus tonalidades. Y entonces voy a previsualizar eso. Ahí lo tenemos, así que tenemos un servicio. Ahora, lo siguiente que queremos hacer es duplicar eso, cursor sobre eso y duplicarlo y arrástrelo ahí. Y ahora notarás que no podemos dejarlo caer en ese pequeño insecto, esa caja porque es pequeña, así que la haré más grande. Arrástrala y suéltala ahí. Y recuerda que lo habíamos hecho 5.5. Entonces, arrastrémoslo hasta 5.5. Eso está bien. Vamos a duplicar eso está bien, arrástralo ahí. Duplica eso, arrástralo ahí. Y ese es nuestro segundo servicio. Entonces agarraré ese diseño gráfico y lo pegaré ahí. El tercero es la fotografía corporativa. Entonces lo siguiente que queremos hacer es duplicar estos. Ahora que tenemos estos dos servicios, queremos duplicar esa sección así y duplicarla de nuevo. Por lo que ahora tenemos el conjunto de servicios todos de estilo cohesionado. Entonces vamos a copiar eso. Dijimos que es fotografía corporativa. Paguemos eso ahí dentro. Entonces Graham, seleccione eso, que en el evento la fotografía. Y luego finalmente, producción de video. O bien, actualicemos eso. Y luego vamos a previsualizar los cambios. Así que desplazándose hacia abajo, anula nuestra sección Mis Servicios se ve super impresionante, agradable y limpio. Entonces lo siguiente que queremos hacer es crear este área de llamada a la acción aquí mismo. Por lo que esta es una página de aterrizaje y necesita hacer que la gente tome medidas para satisfacer necesidades para llamar a la gente a la acción. Y esta es una de las formas es hacer esa para estar recibiendo consejos de fotografía de mi parte y alguien puede unirse a tu Lista VIP. Entonces sigamos adelante y creemos estas secciones. Y tiene estos bonito efecto donde se fija la imagen de fondo. Entonces veamos cómo hacer eso en la siguiente clase. 11. Añadir un llamado a la acción: Bienvenidos a esta clase. Por lo que ya creamos esta sección de servicios. Ahora es el momento de crear este área de llamada a la acción aquí mismo. Queremos poder llamar a la gente para que lleve a cabo nuestra acción deseada que nos será beneficiosa. Y como somos fotógrafos, queremos que la gente se una a nuestro correo estos. Entonces por eso tenemos este botón aquí mismo. Entonces veamos cómo crear estas secciones en nuestro espacio de trabajo. Entonces saltando a nuestro espacio de trabajo, lo siguiente, como ya lo has adivinado, es crear una nueva sección. Y vamos a ver. Sí, es una sección de ancho completo como de costumbre. Y nota que aquí no tenemos ningún margen entre estos dos. Entonces, ¿por qué no empezamos agregando un margen mientras aún está seleccionado. Ve a avanzar, rompe ese enlace aquí mismo. Entonces vamos a sumar algún margen superior de 100. Y ahora tenemos un buen espaciado entre los dos. Y si bien esta sección sigue seleccionada, ve dentro de estilo. En segundo plano, déjame colapsar fondo y tenemos todos estos paneles aquí mismo. Y por ahora nos interesan los antecedentes. Tipo de fondo. Haga clic en el pincel justo ahí y vaya a Imagen. Haga clic en el signo más ahí, y necesitamos agregar la imagen que será nuestro fondo así. Por lo que seleccionaré subir archivos, seleccionar archivos. Y creo que esta es una foto. Abre eso. Y insertemos medios. Entonces así es como se ve por defecto. Entonces lo primero que queremos hacer, bueno esto sigue seleccionado. Iremos a la posición centro, centro, y luego adjuntos, Digamos fijos para que cuando nos desplazemos, permanezca en un lugar como ese. Y entonces digamos repetir, no repetir, tamaño, digamos cover o RI. El motivo por el que no es del todo visible estos, porque nuestra sección aquí está vacía. Recuerda que este es nuestro fondo, pero el tamaño de nuestra sección estará determinado por la cantidad de contenido que pongamos dentro de ella. Entonces, vamos a hacer clic en ese plus. Y en lugar de crear un nuevo encabezamiento, Vamos a duplicar esto. Haga clic en eso, y luego lo arrastremos y lo soltemos ahí cuando aparezca la línea azul. Mis servicios. Y justo debajo de ella. Duplicémoslo y arrástrelo debajo de mis servicios. Ahora, mientras esto todavía está seleccionado, Vamos a empujarlo hacia el centro, hacia el medio. Por lo que ahora está alineado en el centro. Por ahora no podemos leer porque el fondo es brillante. Por lo tanto, selecciona de nuevo esta sección. Y bajo Tipo de fondo y un fondo, tenemos superposición de fondo. Vamos a expandir ese tipo de superposición de fondo. Y vamos a darle un color, negro. Vamos a darle un negro oscuro así. Y luego aumentemos la opacidad solo para que sea un poco más oscura. Está bien, actualiza eso. Y vamos a previsualizar los cambios. Impresionante, así que eso es lo que tenemos. No podemos desplazarnos más allá porque no tenemos nada debajo de él. Pero podremos desplazarnos y ver por ahora, lo que queremos hacer es agarrar el texto aquí, copiar eso. Y quiero seleccionar eso. Y si bien aún está seleccionada, quiero pegarlo aquí. Pega eso ahí dentro. Y volvamos aquí. Sí, eso entra. Y ahora note que nuestros textos ahora recorre todo el camino de izquierda a derecha. Y eso es porque hemos usado una sección de una sola columna de ancho completo. Creo que necesitamos que sea un triple columnas, así que duplicaré las columnas dos veces así. Y entonces ahora deshazte del contenido en las columnas laterales. Ahora eliminemos eso, eliminemos eso, y eliminemos eso. Y ahora tenemos estas columnas en el medio. Entonces ahora podemos arrastrar esto, asegurarnos de que todo esté en medio. Démosle un, un 20, 20% a la izquierda. Demos también que está 20 por ciento ahí mismo, 20% por la derecha. De acuerdo, así que actualicemos eso. Y otra cosa que notarás es que no tenemos suficiente relleno por encima del texto, por lo que casi está tocando el borde de la sección. Entonces aumentemos el relleno superior en la sección. Seleccione una sección acolchado avanzado. Rompamos ese relleno y aumentemos el relleno superior. Solo para que pudiéramos tener alguna bonita habitación en el espacio en la parte superior. Algo así como 70. Y así hagamos lo mismo para el fondo. Hagámoslo un 7070 así. Lo siguiente que queremos hacer es subir aquí y duplicar ese botón. Y vamos a arrastrarlo y colocarlo debajo del texto. Es nuestro llamado a la acción. Y por defecto está a la izquierda. Entonces mientras aún está seleccionado, pongámoslo en el medio. ¿ Y qué dice esto? Jane, mi lista VIP. Entonces si bien todavía está seleccionado bajo contenido, mi lista VIP y actualizar eso. Y vamos a previsualizar los cambios. Desplazarse hacia abajo. Impresionante, Así que tenemos un lindo llamado a la acción y la gente puede hacer clic en eso porque quieren estar recibiendo consejos de fotografía de tu parte. Entonces ese es un buen lugar para tener un llamado a la acción. Lo siguiente que queremos hacer es trabajar en esta galería filtrable. Alguien vino a ver todos los proyectos que has estado trabajando. O pueden verlos por categoría. Por ejemplo, categoría boda. Hacen clic en que les muestra sólo los proyectos relacionados con la boda que han tenido la camarilla cooperan. Se les muestran sólo los gigs corporativos que has tenido. Estudio, ese es tu estudio, al aire libre. Y podemos volver a todos. Entonces veamos cómo crear eso. Entonces te veré en breve. 12. Crear una galería de proyectos: Bienvenido de nuevo. Ahora, es hora de que creemos estas galerías aquí mismo. Entonces saltemos justo dentro de nuestro espacio de trabajo. Y por supuesto, como hemos estado haciendo, lo siguiente que necesitamos agregar es otra sección, una sección de triple columna. Y este es el que queremos ir con, así que seleccionaré eso. Y ahora es una sección de triple columna. Vamos a crear algo de espacio entre las dos secciones agregando un margen superior. Seleccione el margen superior de la sección, rompa ese enlace. Entonces estamos lidiando con la parte superior solamente. Erupción sería un 100. Ahora tenemos esta habitación. A continuación, vamos a hacer clic en el signo más ahí dentro. Y entremos aquí y tecleemos filterable. Filterable. Y tenemos estos elementos traídos por complementos esenciales para Elementor, razón por la cual me gustan mucho estos plug-in. Entonces, arrastrémoslo ahí dentro. Y bam, ya está mostrando alguna galería de marcador de posición aquí mismo que podemos empezar a poblar con nuestro propio contenido. Entonces actualicemos eso y previsualicemos los cambios antes de que empecemos a poblarlo con los nuestros. Vamos a previsualizar eso. Vamos a desplazarnos. Y eso es lo que tenemos. Entonces lo primero que quiero hacer es aumentar el ancho de esta columna. Entonces volveré aquí y vamos a arrastrar eso hasta que le daré un 11 a la izquierda. En la matriz izquierda aquí. Le daré un 10, y por este otro lado, un 10 también. Y vamos a actualizar eso. Y mientras está haciendo eso, y mientras esto está seleccionado, haga clic en cualquier lugar de aquí. Ahora es el elemento activo con el que estamos trabajando. Y puedes confirmarlo mirando la parte superior aquí. Ahora lo primero que quiero hacer es colapsar esa configuración ahí mismo. Y notarás que tenemos estos controles filtrables y tenemos artículos de Galería. Controles filtrables, son estos controles justo aquí al hacer clic en elemento de galería y hacer clic en todo. Estos son los controles filtrables, ¿verdad? Entonces los elementos de la galería son las propias imágenes, los artículos mismos. Entonces, empecemos con los controles filtrables expandiendo eso. Y agreguemos un artículo. Entonces démosle un nombre, tal vez mojado. Vamos a colapsar eso. Ya había unos controles por defecto, así que vamos a expandir eso y darle otro nombre. Cooperar, núcleo, desfile. Vamos a colapsar eso. Vamos a duplicarlo haciendo clic en ese icono o haciendo clic en Agregar elemento. En curso, digamos fotografía al aire libre, al aire libre. Vamos a duplicar eso. Digamos que tal vez algo así como Studio update allí. Por lo que ahora tenemos algunos controles. Estos podrían ser tus diferentes proyectos o cualquier tipo de categorías que quieras tener para tus proyectos. Muy bien, Así que vamos a colapsar los controles filtrables e ir dentro de los elementos de la galería. Estos son los artículos de la galería que ya tenemos aquí, por lo que podemos ir y empezar a cambiarlos. Por lo que Nombre de control significa el control que se utilizará para mostrarlo. Entonces por ejemplo, si quieres que este artículo de la galería sea visible cuando alguien haga clic en la boda, entonces dentro de aquí vamos a escribir boda boda. Vamos a colapsar eso. Entonces si queremos que esto aparezca, cuando alguien haga clic en cooperar, haremos clic teclearemos nombres de cooperar. Recuerda que estos son los controles que creamos aquí. Cooperar, boda, al aire libre y estudio. Entonces vamos a entrar aquí y simplemente darles al azar diferentes controles. Y me he olvidado de darles nombres. Por lo que el primer artículo aquí puede ser mi mejor tiro. Vamos a colapsar. Muy bien, M antes de dejarlo, mientras seguimos en mis mejores tiros, si pasamos por alto, te darás cuenta de que ahora ha cambiado a mis mejores tiros. Y si nos desplazamos hacia abajo. Aquí es donde agregamos la imagen. Todavía estamos en el primer elemento aquí. Por lo que seleccionamos eso y podemos hacer click, vamos adentro, subir archivos, seleccionar archivos. Y ahora creo que quiero importar todas estas imágenes a la vez porque las va a necesitar. Muy bien, así que empecemos a seleccionar uno por uno. Creo que puedo empezar con esa. Insertar medios. Y ahora esa es la imagen que se mostrará aquí. Así como así. Por lo que desplazándome hacia arriba otra vez, voy a colapsar. Mis mejores tiros. Ir a la segunda imagen. Esto es controlado por corporativo y la galería nombrada podría ser el elemento de la galería podría ser a través de tus shorts. Y entonces vamos a desplazarnos aquí. Haga clic en esa imagen ahí dentro. En tanto que el estudio, teníamos una imagen de estudio. De todos modos, solo escojamos aquí cualquier imagen aleatoria. Por supuesto, tomarías tiempo para alcanzar lo mejor. Desplazemos hacia arriba. Se derrumbó que expanden eso. Esto puede ser controlado por exterior saber digamos Sí, al aire libre. Vamos a darle un nombre. Disparos al aire libre. Y vamos a desplazarnos hacia abajo y seleccionar aquí una imagen para ello. Actualicemos eso. Sigamos, Vamos a colapsar. Contraer ese Siguiente ítem. Y puedes seguir y crear tantos artículos de galería como tú, artículos de galería como quieras. Pero claro, terminemos estos seis. Digamos que esto también es control. De ninguna manera. Esto se llama, puede ser leer, leer tomas y esto está controlado por un control de filtro de boda. Vamos dentro de las imágenes. El como esta foto de boda justo ahí. Y luego sigamos desplazando aquí el siguiente elemento de la galería. Y apenas empieza por cambiar la imagen. Dale eso. Echemos eso. Y luego me desplazaré hacia arriba y le daré su nombre. Suena tomas por ejemplo. Y está controlado por, digamos al aire libre. Recuerda que debes asegurarte de que estos controles, estos controles aquí mismo. Los nombres de control de bodas son los mismos nombres de control filtrables que has usado aquí porque son literalmente a los que te refieres cuando estás llenando estas áreas, ¿verdad? Por lo que el último debería ser controlado tal vez por Studio. Estudio. Y el nombre de la galería. A lo mejor vamos a darle algo así como si, tomas de estudio. Y vayamos hacia abajo y agreguemos una imagen para eso, ¿no? Entonces vamos a hacer clic Tal vez, sí, tal vez ese. Insertar medios, actualizar eso. Y ese es nuestro último artículo de la galería. Entonces si colapso este estudio tomas y me dejo simplemente expandir el primero, mi mejor tiro aquí. Y echemos un vistazo al interior para que puedas agregar cosas como precios habilitados calificaciones y todo eso. Y también puedes tener un enlace aquí mismo, página a t HTTP, google.com. Y también puedes, siempre que alguien haga clic en este primer ítem de aquí, que son mis mejores tomas, que es además, ellos, serán redirigidos a Google.com o a donde estos los lleven. Entonces si por ejemplo tienes una, otra página que tenga todo tu mejor tiro, esto los llevará a esa zona. Por lo que también podemos abrirnos en una nueva pestaña. Si comprobas eso, se abrirá en una nueva pestaña y vamos a actualizarlo y previsualizar los cambios. Analicemos los cambios. Desplazarse hacia abajo. Súper impresionante. Entonces ahora lo último que tenemos que hacer es cambiar el color de fondo para que sea negro. Entonces volvamos aquí. Y si bien esto todavía se selecciona seleccionando en cualquier lugar, haga clic en cualquier lugar. Desplazemos hacia abajo, desplázate hacia arriba, colapsamos los elementos de la galería, y luego vayamos dentro de estilo, fondo , color, negro, así. Y luego colapsemos generales azulejo. Y vayamos dentro del estilo controlado para cambiar el color de estos controles. Por lo que el color del texto debe ser blanco. Actualizar eso. Sí, entonces creo que estamos justo en blanco con eso. Y puedes seguir adelante y jugar con todos los ajustes que están disponibles aquí. Son muchos, pero eso es un reto para ti ahora, adelante y juega con todos estos ajustes para ver qué se te puede llegar. Pero si ahora previsualizamos los cambios y vemos cómo se ve nuestra galería, Vamos a desplazarnos y ver qué tenemos ahí abajo. Todo bien. Entonces esto es súper impresionante, pero ahora acabo de recordar que nos olvidamos de agregar un título. Entonces tomemos estos de nuestra página de referencia. Copia eso. Iré aquí adentro. Y lo que quiero hacer es duplicar eso. Y ahora quiero arrastrar eso y soltarlo justo encima de la galería filtrable. Y si bien aún está seleccionada, seleccionaré todo eso y pegaré los últimos proyectos ahí dentro. Y entonces actualizaré eso. Vamos a previsualizar eso. ¿ Verdad? A mí me gusta lo que tenemos. Entonces si hacemos click cooperar serán solo los proyectos corporativos, boda, estudio al aire libre, y podemos verlos todos. Por lo que lo siguiente que queremos hacer es crear la sección Conoce al Equipo. Entonces hagámoslo en la siguiente lección. Entonces te veré en breve. 13. Crear miembros del equipo: Y bienvenido de nuevo. Entonces ahora estamos aquí en la página de referencia que estamos copiando. Y lo siguiente que queremos crear facilidad la sección de equipos, esta sección. Entonces sigamos adelante y hagamos eso dentro de nuestro espacio de trabajo, justo debajo de la galería de rollos de filtros. Sigamos adelante y agreguemos una sola sección de columna así. Y lo primero que queremos hacer es duplicar eso. Arrástrelo y suéltelo dentro de la sección de una sola columna. Sigamos adelante y sumamos el margen en la parte superior de esta sección. Dale un 100. Y ahora tenemos ese espaciado ahí justo debajo de estos proyectos. Démosle esta breve descripción. Entonces vamos a duplicar eso. Y arrastrémoslo ahí dentro. Muy bien, entonces ahora que tenemos eso, sigamos adelante y sumamos una intersección de triple columna. Entonces, arrastremos una intersección ahí dentro. Y así vamos a duplicar esta sección. Ahora tenemos tres de ellos. Vamos a dar clic más allá y arrastrar un elemento de imagen ahí dentro. Y si bien sigue activa, seleccionaré una de estas imágenes que importamos. Entonces sigamos adelante y pinchemos a ese tipo. Es miembro del equipo. Y queremos escribir debajo de él. Hagamos clic en ese ícono y arrastremos un pequeño y un encabezado ahí mismo. Y vamos a darle un nombre, tal vez. Jinete de Alex o algo así. Alinémoslo al centro. Hagámoslo un odio 3. Y vamos a reducir un poco el tamaño. A lo mejor 23. Cambiemos la familia a Monstera. Cambiemos el color a blanco. Y wallah, vamos a hacer clic en ese icono en el, arrastrar un editor de texto ahí dentro. Déjalo caer en el, vamos a darle un título. Director para dos gráficos fotografía. ¿ Verdad? Y luego mientras esto todavía está seleccionado, es ir dentro de estilo, alinear centro. Y ahora la distancia entre el nombre y el título es demasiado grande. Entonces vamos a reducir el margen superior en esto mientras todavía está seleccionado avanzado. Rompe ese enlace justo ahí y reduzca el margen superior. Actualización. Y ahora duplicemos esta imagen y la dejemos caer ahí. Vamos a duplicar eso y dejarlo caer en el duplicado eso y marea dos veces. Deja que al final, que al final haga lo mismo por el nombre duplicado dos veces. Y ahora podemos seleccionar esto y cambiarlo a cualquier nombre bajo contenidos que necesitemos. Jane Doe. Y Jane. Jane ir dentro de contenido. Cambiemos eso para actualizar eso, seleccionemos a Alex escritor aquí. Cambia eso a mi canción temática. A lo mejor el Director de Mercadotecnia. Fecha que. Y cambiemos las imágenes. Por lo que seleccionaré esta imagen. Y una vez que lo seleccione, va a sacar esto. Haga clic en eso. Seleccione otro miembro. Este tipo. Nota, vamos a seleccionar a esta dama porque aquí usas el nombre de una dama, Jane Doe. Seleccionemos a este tipo aquí. Seleccionemos al miembro final del equipo, Michael Sims al actualizar eso. Y note que esto es un poco más corto que el resto, por lo que siempre podemos redimensionarlos Hasta que tengamos unos pies bonitos. Simplemente juega con el tamaño hasta que tengas la alimentación perfecta. Y entonces vamos a previsualizar eso. Por lo que desplazándose hacia abajo. De acuerdo, así que ahora aquí está nuestro equipo, pero ahora tenemos que cambiar esta x para leer. Conoce a nuestro equipo, conoce a nuestros equipos. Así que actualice eso. Y vamos a previsualizar los cambios. Desplazarse hacia abajo. Y ahora nuestro equipo luce súper impresionante. Entonces vamos a nuestra página de referencia aquí estamos. Lo siguiente son mis logros en la sección de números, esta sección aquí, y está animada. Cuando alguien visita la página por primera vez. Estos números son animados. Veamos cómo hacer eso en la siguiente lección. Entonces te veré en breve. 14. Crear contador animado: Bienvenido de nuevo. Continuamos desde donde lo dejamos. Ahora queremos crear estos, mis logros en la sección de números. Y estos números son animados. Entonces veamos cómo hacer eso dentro de nuestro espacio de trabajo. Por lo que saltando aquí adentro, iré directo al fondo. Y, y vamos a crear una sola sección de columna. Justo así. Y lo que queremos hacer es agregar una intersección. Entonces haciendo clic que están justo antes de que hagamos eso, sumemos algún margen en la parte superior de estas secciones. Entonces haz clic en ese avance, rompe ese enlace, y vamos a darle un margen superior sobre un 100. ¿ Verdad? Entonces eso es, eso es suficiente espaciado ahí mismo. Entonces lo que queremos hacer es hacer clic en el signo más al final, arrastrar una intersección. Y luego duplicémoslo dos veces más . Justo así. Ahora tenemos cuatro columnas dentro de esta sección interior, es decir dentro de esta sección. Por lo que en esta sección interior, voy a dar clic en Plus. Y luego escribiré dentro aquí contar. Y tenemos algunos recuentos elementos relacionados aquí, pero el que necesitaría facilitar el contador. Arrastremos este contador aquí y lo soltemos ahí. M por defecto, apenas empieza a hacer su trabajo. ¿ Te das cuenta de que tenemos el número final aquí, estos 100 está justo aquí, por lo que siempre podemos cambiarlo a tal vez 23 dependiendo de lo que quieras mostrar. Y cambiar estos números geniales aquí, siempre podemos cambiar el título aquí abajo. Entonces, por ejemplo, veamos qué tenemos aquí. Sí, Entonces viene aquí el número de fotografías y pega eso ahí dentro. Ahora tenemos 23 fotografías. Eso no tiene sentido. Digamos que tienes 6,400 fotos. Está bien. Entonces lo que queremos hacer es darle estilo este único logro aquí y luego duplicar lo mismo para el resto. Entonces, en primer lugar, cambiemos este color a amarillo. Sepa que es blanco. Entonces vamos al interior del estilo y cambiemos el color del texto a blanco. La tipografía definitivamente lo cambió a arriba. Pero eres libre de cambiarlo a cualquier fuente que quieras. Y luego jugaré con el tamaño sólo para que no sea demasiado grande. Pensar en 35 servirá. Y quiero hacerlo audaz, así que le daré un 900. Ahora démosle setecientos, ochocientos. Sí. Y entonces cerraré eso. Entraré dentro del título y cambiaré la tipografía aquí. En primer lugar, ser Monstera interactuar. Y luego cambiaré el color a nuestro amarillo aquí. Entonces copiaré ese amarillo y lo pegaré aquí. Y ahora probablemente siga ahí. Haga clic en cualquier parte de aquí para deshacerse de eso, actualice eso. Y ahora, claro que notarás que aquí mismo tenemos este fondo grisáceo que deja que estos logros destaquen como pestañas. Entonces vamos a crear este fondo. Definitivamente son las secciones, así que seleccionaré la sección en sí. Y luego iré adentro estilo, fondo, fondo, tipo, color. Le daré ese gris oscuro así. Entonces déjame hacer click en cualquier lugar aquí. Y ahora es así de genial. Pero ahora nuestra columna no tiene color. Por lo que quiero seleccionar la columna, Nuestra columna aquí. Y quiero ir dentro de estilo, tipo de fondo y darle un color negro. Ahora es negro. Actualizar eso. Y vamos a previsualizar los cambios. Desplazarse hacia abajo. Y así es como se ve por ahora. Por lo que necesitamos darle esa frontera y darle un radio de frontera. Entonces mientras aún está seleccionada, nuestra primera, un ir dentro de estilo. Frontera. Y le daremos un borde de sólido. Y vamos a darle un radio de frontera de cinco. Ahora vamos a darle un siete. Y luego para el ancho del borde, vamos a darle algo así como vamos a darle un cuatro por ahora y actualizar que previamente cambia. Muy bien, veamos qué tiene nuestra referencia. Tiene algún tipo de gris. Entonces si bien aún está seleccionada, quiero decir box shadow porque he notado que necesitamos agregar una caja-sombra. Y cuando hacemos clic en la caja-sombra, no se puede ver ahora por estos marcos, estos marcos editor que tenemos ahora, pero la sombra de caja ya se está mostrando. Déjame actualizarlo y salir de vista previa para que puedas ver la caja-sombra. Y luego vamos a seleccionar, Vamos. Seleccionemos una sección. Quiero aumentar el relleno en la parte superior e inferior. Por lo que iré a seleccionar primero la sección. Acolchado vasto, top. Démosle un 50. Ahora eso es 550. Y abajo 50. Y ahora le hemos dado alguna bonita habitación en la parte superior e inferior. Y podemos hacer lo mismo por los lados, ambos lados. Vamos a darle tal vez un 2220 o escribir actualización eso. Y hagamos algo con estas fronteras. Es demasiado brillante. Entonces mientras esto se selecciona, la columna en sí. Vamos dentro de color de borde. Y démosle ese muelle gris también, y luego actualicemos eso. Analicemos los cambios. Anular super impresionante. Pero ahora los números parecen estar tocando la parte superior de la columna y necesitamos que tengan algún bonito relleno. Entonces aumentemos el relleno para la columna en sí. Entonces haga clic en esa columna. Al entrar avanzado. Recuerda que habíamos roto estos vínculos hace un momento. Entonces ahora vamos a aumentar el acolchado superior hasta 15 tal vez. Y relleno inferior también. 15. Y ahora vamos a copiar. Haga clic con el botón derecho en la columna, en la propia columna, haga clic derecho Y dentro de aquí, haga clic derecho y pegue estilo. Por lo que has pegado este estilo. Y vamos a repetir lo mismo para estos dos. Estamos pegando todo este azulejo que hemos aplicado a esta columna. Por lo que ahora casi se ve igual a estos. Entonces lo siguiente que queremos hacer es duplicar eso tres veces y arrastrar eso ahí dentro. Arrastra eso ahí dentro, y arrastra eso ahí dentro. Y ahora nota que están tocando en los bordes, así que esos son los márgenes derecho e izquierdo. Entonces vamos a seleccionar este. Seleccionemos estas sola columna. Y aumentemos el margen derecho a través de tal vez algo así como 10. Y el relleno izquierdo a 10, margen izquierdo, 10, diez o a la derecha. Y luego vamos a hacer click derecho y copiar ese estilo. Y peguemos este estilo dentro de estos tres. Y ahora han sido separados adecuadamente. Actualicemos eso. Analicemos los cambios. ¿Verdad? Desplazemos hacia abajo y veamos qué tenemos. Perfecto aunque. Entonces lo único que queda es un subrubro para la sección. Entonces duplicaré eso y lo arrastraré aquí. Déjalo justo ahí. Y podemos llamar a esto. Mis logros. Los números tienen razón, pero por supuesto tenemos que cambiar todos estos números aquí. No todos pueden leer lo mismo. Por lo que seleccionar que ir dentro del contenido puede cambiar estos a 51. Y estos podrían ser clientes. Entonces cambiemos eso a CDs. Cds que cubriste tal vez 15 CD's. Y el 1 de mayo final sean años de experiencia, tal vez 25 más. Entonces ahora mismo tenemos 25 aquí. Pero podemos venir aquí al sufijo numérica o prefijo y agregar algunas cosas. Entonces digamos sufijo numérica. Podemos agregar el signo más, acaba de golpear más, y ahora aparecerá aquí, 25 años más. Entonces vamos a actualizar eso en vista previa los cambios. Entonces desplazándose hacia abajo. De acuerdo, me encanta lo que estoy mirando. Por lo que terminaremos con esa sección de logros. Lo siguiente que queremos hacer es crear aquí estas últimas entradas de blog. Y está sacando todos estos datos de las publicaciones de blog que ya has publicado. Entonces veamos cómo hacer eso en la siguiente lección. Nos vemos en breve. 15. Muestra las últimas publicaciones de blog: Bienvenido de nuevo. Sigamos. Por lo que ahora mismo queremos crear estas últimas entradas de blog, sexual. Y como ya lo mencionamos, está sacando datos de nuestras publicaciones de blog ya publicadas. Entonces eso significa que necesitamos alguna entrada publicada en el blog. Entrémonos dentro de nuestro tablero y creemos algunas publicaciones. Por lo que dentro del tablero, iré a posts. Haga clic en eso. Y tenemos una entrada de blog hola mundo por defecto que viene con cada nueva instalación de WordPress. Por supuesto, voy a estropear eso porque queremos crear el nuestro propio, Añadir Nuevo o justo en cuando estemos aquí, vamos a darle un nombre a una publicación de blog. Entonces sólo voy a entrar aquí. Y quiero agarrar este nombre aquí mismo. Copia eso. Y vayamos dentro de Dashboard y peguémoslo ahí. Entonces no tocaré nada más aquí porque solo estamos tratando de publicar algunas entradas de blog rápidamente. Así que vayamos dentro configuración y desplázate hacia abajo y busquemos una imagen destacada. Vamos a establecer una imagen destacada para esta entrada de blog. Entonces digamos por ejemplo, ¿de qué se trata esto? Vamos a la configuración correcta de la cámara para, sí, así que veamos una buena imagen para los ajustes de cámara correctos como esa. Vamos a establecer imagen destacada. Y luego actualicemos eso. Post actualizado. Podemos ver la publicación, pero volvamos dentro aquí y creemos algunas entradas de blog del mundo. Añadir nuevo o RI, las segundas entradas del blog van aquí y agarrar este nombre y pegarlo aquí. Y por supuesto, en el mundo real, seguirías adelante y crearías la entrada del blog y la publicarías. Pero ahora no estamos creando ningún contenido, solo agregamos el título del blog, ¿verdad? Entonces antes de publicar que es añadir una imagen destacada. Entonces vamos a ver, creo que se trata de fotografía al aire libre, así que seleccionaré eso. Y luego publicó eso, publicar esta devolución de llamada. Tenemos que crear uno más. Agregar Nuevo. Por lo que estos son los datos que se tirarán al frente de la página web y se mostrarán ahí. Entonces vamos a copiar eso y pegarlo ahí dentro. Oh, espera, vamos a establecer la imagen destacada. Ni siquiera sé de qué se trata esto, así que me sentaré que publicar. Por lo que ahora hemos establecido nuestra imagen destacada, dándole un nombre. Volvamos aquí adentro. Ahora tenemos tres posts de blog. Tienen un título y una imagen destacada. Este es el título y esta es la imagen destacada. Entonces lo que tenemos, todo lo que necesitamos. Por lo que volviendo dentro nuestro espacio de trabajo de la página de Elementor aquí mismo, queremos agregar una sola sección de columna, y dentro de ella, necesitamos agregar una cuadrícula de postes, la cual está disponible mediante complementos esenciales para Elementor, pero no está activo por defecto, necesitamos volver dentro de nuestro dashboard y activarlo dentro del plugin EIA. Entonces vayamos dentro del tablero y hagamos clic en átomos esenciales. Vamos dentro de los elementos. Desplazándose hacia abajo, notarás que bajo los elementos de contenido dinámico no se comprueba el grado de post , así que búscalo. Desplácese hacia arriba y guarde los ajustes. Configuración guardada. Ahora hemos agregado esos elementos a nuestro arsenal aquí mismo. Entonces actualicemos primero esta página. Y entonces ahora que está actualizada, significa que hemos guardado nuestros cambios. Actualicemos la página Control R, o Comando R en un Mac para refrescar la página de manera que el post grado esté disponible para su uso. Está bien, Así que ahora si escribimos avaricia, aparece aquí, Post avaricia. Entonces, vamos a desplazarnos hacia abajo todo el camino hasta el fondo. Y recuerda que habíamos agregado esta sección de una sola columna. Entonces antes que nada, arrastremos esta avaricia post ahí dentro y la dejemos caer ahí. Ahora notarás nuestras tres entradas de blog, nuestra lista apareciendo. Y ahora aumentemos este margen en la parte superior aquí seleccionando la sección avanzada. Rompe ese enlace por ahí, Dale un 100. Y ahora tenemos algún margen agradable en la parte superior. Lo siguiente que queremos hacer es hacer click en cualquier parte dentro de este margen azul. Por lo que hemos seleccionado el elemento, la cuadrícula de postes. Entonces, antes que nada, necesitamos decirle de dónde sacar los datos. Por lo que podríamos usar categorías. Pero en este momento esta clase no se trata de categorías, pero recuerda, los posts tienen categorías. Por lo que podrías tener posts sobre fotografía al aire libre, posts sobre fotografía de interior. Y cuando alguien acuda a tu página web en busca de fotografía al aire libre, se presentarán con posts que has establecido la categoría a fotografía al aire libre. Pero ahora mismo, por defecto, si no tenemos ninguna categoría, las publicaciones suelen ser categorizadas como uncategorized, por lo que hay una categoría que no podemos eliminarla Eso se llama uncategorized. Entonces podemos tirar, por defecto, está sacando datos de ahí solo para estar seguros de que podemos teclear y, y categorizados y ha aparecido más de 8 aquí. Y así ahora estamos seguros de que así está sacando los datos de. Y lo siguiente que queremos hacer es cambiar. Entonces, en primer lugar, publicaciones por página, queremos mostrar tres. Entonces si tuviéramos siete entradas de blog, todavía sólo veríamos tres aquí. Entonces eso es lo que estos significan. Y vamos a colapsar esto por un segundo y expandir la configuración de diseño. Queremos mostrar tres columnas o escribir, actualizar eso. Y vamos a previsualizar los cambios. Desplazarse hacia abajo. Súper impresionante, Así que ya están tomando forma. Entonces, no se dejen engañar por cómo se ven aquí. Si actualizamos la página, déjame solo Control R para refrescar cómo se ven aquí. O variedad. Entonces bajando por aquí. Entonces lo siguiente que queremos hacer es por supuesto cambiar el color de fondo a Ryan con nuestro color de fondo aquí. Entonces mientras esto todavía está seleccionado, seleccione cualquier lugar dentro del elemento. Queremos ir dentro de estilo. Entonces no, vuelve dentro del contenido y ocultemos aquí algunos de estos detalles. Entonces vamos a los estilos de diseño. Y no mostremos avatar. No mostremos el nombre del autor. No es mostrar esa fecha. O tal vez podamos mostrar el nombre del autor. Por lo que depende de ti decidir lo que quieras mostrar. No quiero mostrar el nombre del autor. Sí, creo que así es como me gusta. Apenas el título y alguien puede leer más. También podemos mostrar el extracto si queremos, pero no quiero mostrar que los huevos son. Por lo que yendo dentro de estilo, tenemos el color de fondo estilo postal. Entonces cambiemos eso a negro. Entonces ya está tomando la forma que queremos. Y lo siguiente que queremos es ir a la tipografía y cambiar el color del título a blanco. ¿ Se ensancha aquí? Aquí, es amplio. Y cambiemos la tipografía misma a Monterrey. Monterrey. Y aumentemos el camino de la fuente a 800. Y quiero centralizarlo así. Entonces vamos a expandir el estilo de botón Read More o a la derecha. Cambiemos el color del texto a blanco. Y luego escojamos este color amarillo. Copia eso. Y cambiemos el fondo tipo 2, ese color amarillo. Els cambiarlo a esa columna, hombre. Todo bien. Entonces lo siguiente que hago es aumentar el relleno del botón aquí mismo. Como puedes ver, las palabras están tocando los bordes del botón. Entonces. Vayamos al relleno y rompamos eso. Vamos a darle tal vez un 30 a la izquierda, un 30 a la derecha. Ahora vamos a intentarlo. Izquierda y derecha 2020. Y luego arriba y abajo puede ser 10101055 está bien. Está bien. Y entonces vamos a darle un radio de borde de cinco para darle esa esquina redondeada así. Y luego rompamos este margen. Y vamos a darle un margen superior. Aumentemos y usemos nuestro ojo para ver hasta dónde tenemos que llegar, digamos 15. Y en el margen izquierdo, aumentemos el margen izquierdo a tal vez, digamos un 100. Sí, un 100 está bien por ahora. Cambiemos esta fuente a negra a negra. Y luego en el flote, Vamos a cambiarlo a blanco. Y luego cambiemos el color del tipo de fondo a estos rojos suaves. Entonces peguemos eso ahí dentro. Entonces sobre quien come esa leve lee, actualiza eso. Y ahora nuestras imágenes aquí tienen esquinas agudas y nuestras imágenes de referencia aquí tienen esquinas redondeadas. Entonces hagamos algo al respecto. Entonces colapsando eso y entrando al estilo de miniaturas, Vamos a darle un radio de borde de 20. Y ahora tiene esa esquina redondeada. Actualizar eso. Y ahora duplicemos este título. Y vamos a arrastrarlo ahí dentro. Últimas entradas de blog. Y luego duplicemos eso está bien, y dejarlo ahí mismo. Así. Entonces esa es una breve descripción de qué esperar aquí abajo. Actualizar eso. Y vamos a previsualizar los cambios. Desplazarse hacia abajo todo el camino hacia abajo o hacia la derecha. Entonces eso es lo que tenemos actualmente. Te aconsejo que sigas jugando con los ajustes para ver qué más puedes producir con estos post avaricia. Entonces lo siguiente que queremos hacer es crear esta forma aquí mismo. Es otro llamado a la acción impresionante. Obtén consejos de fotografía, un nuevo entregado a tu bandeja de entrada. Por lo que esta es una buena manera de obtener correo electrónico de usuario para que puedas hablar con ellos de manera regular. Veamos cómo crear esta sección de llamada a la acción en la siguiente lección. Entonces te veré en breve. 16. Añadir una forma de añadir una forma: Entonces lo siguiente que queremos crear es este área de llamada a la acción aquí que tiene un registro para, y es una parte bastante importante de una página de aterrizaje porque permite capturar los contactos del usuario. Y esa es una parte muy importante de los negocios en línea. Entonces veamos cómo hacer eso en nuestros proyectos. Entonces saltando aquí adentro. Y lo que tenemos que hacer es entrar aquí, arriba, desplazarse hacia arriba, y duplicar esta sección. Recuerda que ya creamos algo así. Y ahora que tenemos dos de ellos, sólo arrastraré esto hasta el fondo. Y ahora solo podemos editar esto. Entonces todo lo que necesitamos hacer es entrar aquí, seleccionar esta sección, y luego dentro de fondo de estilo. Escogeré una imagen diferente. Creo que seleccionaré este. Insertar medios. Y ahí lo tenemos. Entonces ahora es una imagen diferente. Y este es el original. Bajemos aquí y notarás que en nuestra página de referencia, esta de aquí es un poco más alta y eso es por la forma y todo el contenido. Recuerda que te dije, la altura de las secciones está determinada por la cantidad de contenido dentro de ella. Entonces, antes que nada, tomemos estos textos. Copiaré eso y seleccionaré eso y seleccionaré eso. Pégala ahí dentro. Seguiré adelante y seleccionaré eso. Y ahora eso es Lorem ipsum o ride. Entonces lo siguiente que queremos hacer es crear esta forma. Para ello, vamos a utilizar un código de plug-in de formulario para terminator. Entonces vamos a instalar para mí más tarde. Pero primero que nada, saltando de lado nuestra página aquí, actualizarla y previsualizar los cambios. Desplazarse hacia abajo todo el camino hacia abajo o hacia la derecha. Entonces eso es lo que tenemos actualmente. Por lo que entrar dentro de nuestro tablero sí coincide. Plugins, agregar nuevos. Y en nuestra barra de búsqueda aquí, teclearemos para ministro. Al igual que las formas Terminator para Ministro. ¿ Dónde está? Sí, aquí mismo. 200 mil instalaciones activas por WP Mu dev. Por lo que Instalar ahora, ejecutar o montar, Activar. Y ahora tenemos instalado cuatro Ministro. Por lo que podemos acceder desde este menú de la izquierda justo aquí. Por lo que basta con dar click a cuatro minutos. Por lo que tomamos en estos landing page con un resumen de estadísticas. Entonces lo que queremos hacer es crear una forma. Por lo que crear se presentará con algunas plantillas prefabricadas. Y sí, vamos a seguir adelante y haga clic en el boletín de noticias suscribirse. Continuar. Vamos a darle un nombre. Formularios de registro, formulario de registro. Vamos a crearlo. Y ahora se ha creado. Entonces aquí está con su nombre, tiene algunas opciones aquí mismo en este menú desplegable. Y ya verás cómo podremos usar estos códigos cortos en un momento. Por ahora, echemos un vistazo a lo que tenemos. Entonces a la izquierda aquí tenemos diferentes paneles que tienen diferentes etapas de tu creación de forma. Entonces a medida que creas tu forma, estas son las etapas por las que atraviesas. Por lo que primero crea los campos, luego le da estilo a los campos. Después determinas cómo se comportará el formulario cuando las personas envíen datos, luego configura todos los ajustes sobre las notificaciones por correo electrónico cuando alguien envía datos a través de un formulario, luego si quieres integrar y todas esas cosas. Pero ahora mismo, lo que queremos hacer es crear un formulario solo para exhibir aquí en el front end así. Por lo que notarás aquí tenemos dos campos y tenemos estas opciones para insertar campos. Si hacemos clic en eso, podemos agregar más campos a nuestro formulario, pero sólo lo necesitamos para tener el nombre y la dirección de correo electrónico. Si previsualizamos eso, así será como se verá. Y salgamos de ahí. Y cuenta con estos botón Suscribir. Entonces vamos a previsualizar eso. Y el botón dice suscribirse. Entonces esta es nuestra forma. Entonces publiquemos ese formulario. Y una vez que se publique, se presentará con este corto código que podemos copiar haciendo clic en este ícono aquí mismo. Lo hemos copiado. El código corto se ha copiado con éxito. O podemos subir aquí, formulario de inscripción, hacer clic en eso y copiar el código corto. Una vez que haces clic en eso, copias el código corto. Entrando dentro de nuestra página aquí, nuestro espacio de trabajo. Tenemos que subir aquí y hacer clic en ese diminuto icono y decir código corto. Y arrastremos ese elemento de código corto aquí. Dejémoslo ahí dentro. Y luego mientras aún está seleccionado, podemos ingresar el código corto que acabamos de copiar de aquí. Simplemente copiamos este código corto. Y ahora vamos a pegarlo aquí. Ahora, eso mostrará esa forma para nosotros. Deshaznos de este botón y ahora aplicamos eso. Y seamos realmente cambios el viernes. Entonces eso es lo que tenemos por ahora. Volviendo adentro, Vamos por dentro apariencia. Y apariencia interior. Te darás cuenta de que aquí tenemos estas diferentes opciones, material plano, audaz y ninguna. Escojamos plano, y eso se deshace de las fronteras en los campos de entrada. Y luego vayamos dentro del disfraz bajo colores. Vamos dentro del disfraz y desplázate hacia abajo y selecciona el botón Enviar. Eso debería mostrar los diferentes ajustes para el botón, para el color de fondo. Vamos a cambiarlo a, déjame seleccionar este amarillo. Copia eso dentro de ahí. Pegar ese amarillo y propio Hoover, que quería ser leído. Entonces voy a ir a agarrar estas suave lectura yendo por aquí y pegarla por ahí. Y en el foco, queremos que sea que rojo esté bien, pegarlo ahí. Y así actualicemos eso y previsualicemos los cambios. O bien, por lo que se ve impresionante. Así que saltemos aquí mismo y aplicemos cambios. Entonces esos cambios, estos cambios con ahora se reflejan en nuestro espacio de trabajo elemental o paseo. Entonces vamos a previsualizar los cambios. Todo bien. Entonces eso es lo que tenemos ahora en hover. Es rojo y en su estado normal es amarillo. Entonces saltemos aquí al área de contacto. Entonces sigamos adelante y agreguemos la sección de contactos. Entonces lo que queremos hacer es agregar una sección de seis columnas. Por lo que esta sección aquí mismo con seis columnas. Y vamos a arrastrar eso hacia fuera a nuestra marca de cinco puntos cinco justo ahí. Y hagamos lo mismo por ese 5.5. Y finalmente por ese 5.5, en algún lugar ahí. Y ahora lo que quiero hacer es venir aquí y duplicar eso. Arrástralo todo el camino hasta la parte inferior justo aquí. Después duplica eso y arrástralo todo el camino hasta la parte inferior. Suéltala ahí. Volver atrás y copiar eso, duplicar eso. Lo que queremos hacer es decir la oficina. Y por supuesto, donde está la oficina, es esa zona de ahí mismo. Y quiero duplicar eso y luego arrastrarlo ahí. Duplica eso, arrastra eso ahí dentro. Y ya conoces el simulacro. Pero ahora esto se puede dejar caer ahí porque recuerda que esto es demasiado pequeño, así que arrastraré eso, suelta eso ahí dentro. Redimensionar esto a 5.55.5, en algún lugar hay 5.5. No puedo conseguir un 5.5, pero duplicaré eso y tiraré seda y la dejaré caer ahí. Entonces expandiéndolo, cayendo ahí. El 5.5. Entonces duplicar eso. Deja eso ahí dentro. Duplica eso, deja eso ahí dentro. Adelante y agarremos este número. Déjala caer ahí, pega eso. Envíame un correo electrónico. Llámame. Actualicemos eso y hagamos una vista previa de los cambios. Derecha. Desplazemos todo el camino hasta el fondo. Y eso es lo que tenemos. Pero tenemos que hacer algo estos márgenes en la parte superior. Entonces volvamos aquí, seleccionemos a ese avanzado, rompamos ese enlace. Entonces estamos lidiando con la parte superior, sólo un 100. Y vamos a actualizar eso. Entonces ahora que terminamos con el área de contacto, así que vamos a previsualizar eso. Seco. Desplazemos todo el camino hasta el fondo. Perfecto. Entonces ahora que terminamos con la sección de contactos, Vamos a seguir adelante y crear esta sección de mapa. Esto viene directamente de Google Maps. 17. Ayúdame a enseñar a los estudiantes a 10,000: Hola mi amigo. En primer lugar, solo quiero decir muchas gracias por acompañarme en esta clase y elegir aprender de mí. Y también quiero decir felicitaciones por llegar tan lejos en la clase. El hecho de que hayas llegado tan lejos en la clase significa que estás ganando valor de la clase. Y así te agradezco mucho y espero que estés disfrutando de la clase en sí. Dicho esto, necesito tu ayuda. Tengo la misión de enseñar al menos a 10 mil empresarios como tú a usar elementary para construir sus propios sitios web o landing pages para vender sus productos. Y aquí te mostramos cómo puedes ayudar. Se ve cuando un nuevo alumno se une a una clase en Skillshare y luego le gusta esa clase y deja una reseña. Ayuda a otros alumnos a saber qué esperar de la clase. Y cuando una clase está recibiendo muchas críticas de los estudiantes, Skillshare dice: Oye, ¿sabes qué? Esta clase está recibiendo mucho compromiso y muchas críticas por parte de los estudiantes. Por lo que debe ser de ayuda. Por lo que debe ser útil. Y así empujémoslo hacia arriba en la biblioteca para que sea más descubrible por los nuevos estudiantes. Por lo que el algoritmo Skillshare empuja esa clase hacia arriba y la hace más visible, más descubrible para los nuevos estudiantes. Porque ha estado recibiendo críticas positivas. Y ahí es donde entran ustedes. Por favor, únete a mí en esta misión y me ayudó enseñar al menos a 10 mil estudiantes cómo usar Elementor, cómo construir hermosas landing pages, sitios web funcionando dejando una reseña en esta clase y haciéndoles saber qué esperar de esta clase. Sólo te tomará unos dos minutos y ya está. Pero tu reseña contribuirá en gran medida a ayudar a los nuevos alumnos, los futuros estudiantes, a saber qué esperar de la clase. Clase cumple con tus expectativas. ¿ Superó tus expectativas? Si tienes alguna pregunta, recuerda, siempre puedes dejarlas en el área de discusión debajo de este video y yo podré ayudarte. Siempre respondo a cada pregunta o comentario que los alumnos dejan en cualquiera de mis clases. Y con eso dicho, sólo quiero decir disfrutar de la clase y nos vemos en la siguiente lección. Paz. 18. Agregar un mapa de Google: Bienvenido de nuevo. Ahora en esta lección, queremos añadir este Google Maps para que la gente pueda vernos si eres fotógrafo y alguien ha reservado una cita contigo, o te gustaría entrar clientes para poder encontrar tu oficina. Quieres un mapa en tu página web, en tu página de aterrizaje. Entonces veamos cómo agregar estos mapa. Saltando dentro de nuestro espacio de trabajo aquí mismo. Lo que queremos hacer es agregar una sección de ancho completo, sola columna, sección de ancho completo. Y vamos a darle un margen superior de un 100. Entonces yendo por dentro avanzado, rompiendo ese vínculo, así que estamos lidiando con un margen superior. Démosle un 100. Y ahora seleccionemos ahí el signo más. Y dentro de aquí tipo mapa. Tenemos algunas opciones de mapa aquí. El que queremos Epi es Google Maps. Déjalo ahí dentro. Y ahora tenemos diferentes opciones aquí que puedes rellenar. Esto, por ejemplo, aquí mismo, ingresarías tu ubicación real o la ubicación de tu oficina o tu estudio. Y así actualicemos eso y previsualicemos los cambios. Entonces desplazándose hacia abajo o el viernes, así que ahora está en vivo en la página web. Lo siguiente que queremos hacer, y la gente puede cambiar al mapa real de Google. Entonces, sólo cambiemos a esta parte de la ciudad. Y ahí vamos y se pueden mover y acercar si quieren. Se trata de Google Maps incrustado en nuestra página web colocándolo dentro de este div. Entonces ahora que terminamos con un mapa, la siguiente parte que queda es el pie de página y terminamos con la página de aterrizaje. Entonces veamos cómo hacerlo en la siguiente lección. Te veré en breve. 19. Crear el pie de pie: Bienvenido de nuevo. En esta lección, estamos a punto terminar de crear la página de destino, pero necesitamos agregar la carpeta y por supuesto hacer que la página responda antes de envolver las cosas. Entonces saltemos justo dentro de nuestra página. Y ahora lo que queremos hacer es salir de esta página ahora porque ya terminamos editar la parte principal de la página. Entonces quiero salir de aquí e ir dentro del tablero. Cerraré esa Salida a Dashboard. Saldré justo ahí. Y voy a ir dentro de apariencia, Elementor, cabecera y pie de página constructor. Y ahora queremos crear una carpeta. Entonces voy a añadir nuevo, y se saltará eso. Y vayamos directamente a nombrar el 41. Mi pie de página selecciona carpeta. Ese es el tipo de plantilla. Yo lo quiero visible en todo el sitio web y cualquiera puede editarlo. Entonces lo siguiente aquí mismo, Elementor ancho completo, digamos que no hay barra lateral, estiramiento hacia adelante. Desactivemos estas cuatro configuraciones ahí mismo. Y luego vamos a publicarlo. Ahora y ahora. Edita con Elementor porque lo estamos creando visualmente en el front end en nuestro espacio de trabajo. Entonces lo primero que queremos hacer es agregar el logo. Entonces vamos a agregar una sección de ancho completo, sección columna única, que es para ancho. Y agreguemos un elemento de imagen. Y nosotros esa imagen seleccionada, seleccionaré aquí y seleccionaré el logotipo. Insertar medios. Es del tamaño correcto. Yo lo creé para que fuera muy pequeño y por eso encaja correctamente aquí mismo. Lo siguiente que queremos hacer es hacer clic en el pequeño icono aquí mismo y seleccionar editor de texto. Arrastre eso debajo del logotipo. Vamos a seguir adelante y copiar estos textos de derechos de autor. Copiar eso. Si bien esto sigue seleccionado, lo dejaré caer ahí dentro y voy a ir dentro de estilo, centralizarlo. Cambiemos el color a blanco. Y cambiemos la familia tipográfica a Montserrat. De acuerdo. Redujamos el tamaño a 12. Porque eso es información de derechos de autor. No hace falta que sea muy grande. Actualicemos eso. Y conforme actualizamos eso, Hagamos clic en eso y tecleemos social. Porque queremos agregar iconos de redes sociales. Entonces, arrastrémoslo y dejémoslo ahí dentro. Y ahora estos iconos son demasiado grandes, así que vamos al interior de estilo y tamaño. Vamos a reducirlo hasta ese punto de ahí mismo. Está bien, y luego vamos a seleccionar este texto. Ir a Margen avanzado, romper ese enlace y margen inferior. Vamos a reducirlo para que podamos acercarlos un poco más. Y vamos a actualizar eso. Creo que eso me gusta. Hagamos una vista previa de los cambios. Entonces así es como se ve nuestro pie de página. Por lo que volviendo adentro. Entonces ahora que terminamos con el pie de página, podemos cerrar esta página. Entonces entraré dentro de los contenidos. No, entraré dentro de camarilla ese menú de hamburguesas Salir a Dashboard. Y ahora yendo por dentro de las páginas. En la página de inicio, haré clic con el botón derecho Ver y abrir enlace en nueva pestaña para que podamos verlo. Y aquí está. Vamos a verlo de arriba a abajo porque ahora terminamos con todo el contenido. Lo único que queda es hacer que la página responda. ¿ Verdad? Entonces aquí vamos. Los textos animados, está funcionando a la perfección. Acabo de recordar que necesitamos hacer algo al respecto de este botón. No tiene ese efecto que tuvimos en la página original. Déjame simplemente desplazarme hacia arriba. Tenemos que añadir ese efecto flotante y te mostraré cómo hacerlo. Ahora saltando a nuestra página, ésta es la que acabamos de diseñar, desplazándose hacia abajo. ¿ Verdad? Entonces esto es lo que tenemos. Nosotros hemos creado estos. Siéntete orgulloso de ti mismo. Has creado estos hasta ahora si has estado siguiendo y lo has hecho tan lejos, date una palmadita en la espalda. Date un respiro hoy, mira una película o algo así. Pero ahora note que nuestra carpeta en este momento no tiene estos margen superior, y también necesita tener estos fondo gris. Vamos a desplazarnos todo el camino hasta el fondo de esto, necesita tener estos fondo gris. Entonces volviendo a nuestra página, no, dentro de nuestro pie de página. Vamos a Apariencia encabezada y pie de página elemental. O podemos ir al frente justo aquí. Y si pasamos el cursor sobre Elementor editar con Elementor, podemos hacer clic en mi pie de página y se abrirá el espacio de trabajo de carpeta y podremos editar la foto desde ahí. Está bien, así que aquí estamos. Seleccionemos la sección en sí. Ve a Avanzado, rompe ese enlace. Démosle un margen superior de 50. No. Ese debería ser el relleno. Perdón por eso. Entonces esa es la parte superior acolchada de 50. Así. Y vamos a darle 50 en el fondo también. Y vayamos dentro de estilo, de fondo. Démosle ese color gris. Color gris oscuro así. Gris oscuro, eso me gusta. Así que actualice eso. Y ahora si volvemos atrás y hacemos clic derecho en nuestra página, haga clic derecho en Ver. Y luego saltando, mira nuestra página. Desplazemos todo el camino hasta el fondo. Ahí lo tenemos luciendo súper impresionante. Pero ahora aumentemos el relleno justo aquí en la parte inferior del mapa para que sea, tenga un poco más de negro en la parte inferior. Entonces volvamos aquí. Pase el cursor sobre la edición de elementos con Elementor, y hagamos clic en editar con Elementor. Para que podamos editar la página en sí. Llamemos al fondo. Aquí es donde tenemos nuestro mapa. Entonces lo que tenemos que hacer es hacer clic en esta sección de mapa en sí Avanzado, y vamos a darle un margen inferior de 50. Sí, vamos a darle un 50 en esa fecha, mal. Por lo que ahora podemos previsualizar los cambios. Crecemos todo el camino hasta el fondo. Muy bien, así que tenemos algo más de espacio aquí, algunos más negros justo debajo del mapa. Y esa es la página de aterrizaje. Terminamos con el diseño en el escritorio. Ya es hora de hacer que la página de aterrizaje responda en diferentes tamaños de dispositivo antes de envolver las cosas. Entonces te veré en la siguiente lección. 20. Diseño Responsive la barra de navbar: Bienvenido de nuevo. Ya hemos hecho que la página de aterrizaje se vea genial en el escritorio. hora de no hacer que se vea genial en pantallas más pequeñas que los smartphones y tabletas. Entonces, sin perder más tiempo, saltemos dentro del tablero y empecemos. Y empezaremos con una barra de navegación. Entonces aquí, vamos al interior de apariencia, elemental, cabecera y pie de página constructor. Y vamos a dar clic a editar con Elementor. Vamos a editar la barra de navegación con elementor. De acuerdo, así que aquí estamos. Este es el lugar en el que estábamos editando la barra de navegación. Y ahora quiero que sea sensible. Entonces, yendo aquí abajo, vamos a hacer clic en este icono del modo responsive. Se abrirá esta barra aquí mismo con todas estas configuraciones que nos ayudarán a hacer que la página sea receptiva. Como puedes ver, tenemos la configuración de móviles, la configuración de tabletas, y actualmente estamos en este momento en la configuración de escritorio. Entonces cambiemos al móvil. Entonces ahí estamos. Entonces lo que queremos hacer es que si pudiera simplemente volver al topo de escritorio por un segundo, quiero mostrarles algo. Dentro de esta sección de ancho completo, tenemos dos columnas, la columna del logotipo y la columna del menú. Por lo que cada una de estas dos columnas ocupa un porcentaje de la sección de ancho completo. Entonces cuando cambiamos a pantallas móviles, la sección sigue siendo de ancho completo, pero ahora necesitamos dividir estas dos columnas en el 100% de esta columna de ancho completo. Entonces lo haremos seleccionando aquí la primera columna, la columna que tiene el logotipo. Seleccionemos eso. Y bajo Ancho de columna Layout, digamos 50 por ciento. A continuación, seleccionemos la segunda columna. Y debajo de la columna Layout con, digamos 50. Y ahora los dos están en la misma línea. Lo que tenemos que hacer a continuación, el menú Seleccionar, haga clic en cualquier lugar dentro. Y bajo disposición. Desplazemos hacia abajo y busquemos alineación. Bajo alineación responsiva. Alinémoslo a la derecha. Y ahora está en el lado derecho. Crecemos hacia arriba. Ve al interior del estilo, queremos hacerlo ancho. Vamos a colapsar el menú principal y expandir el gatillo principal y cerrar el icono. Entonces démosle un color de fondo de blanco. Entonces ahora mismo es blanco. Y al flotar, digamos el fondo a este amarillo. Entonces vamos a seleccionar el fondo. Voy a tabular para escoger este color amarillo. Copiar eso. Y volvamos aquí. Cambiemos el color a amarillo. Por lo que en hover es amarillo. Correcto, actualicemos eso. Y ahora un nuevo clic en el icono en sí para que aparezca el menú desplegable. Ya ves que el menú desplegable es de color blanco. Entonces colapsemos el disparador principal y vayamos a desplegable, expanda el menú desplegable. Y en primer lugar, desplácese hacia abajo y busque la distancia superior. Dejémoslo debajo de ese punto para que el menú, para que el logotipo sea visible. Empuja un poco hacia arriba. Y luego notarás que las fuentes son blancas por defecto y amarillas al hover. Entonces hagamos algo al respecto. Por lo que desplazándose hacia arriba mientras todavía bajo desplegable, topografía, color del texto. Pero ya que eso a ese amarillo. Y ahora son amarillas. Y al flotar, queremos que sean blancos. Por lo que se acabó. El color es blanco, estado normal, amarillo. Entonces lo siguiente que queremos hacer es cambiar el color de fondo. En circunstancias normales. Queremos que sea este tan gris. ¿ Verdad? Actualicemos eso. Y vamos a previsualizar los cambios. Está bien, así que ahora con el fin de ver cómo se ve en las pantallas móviles, pulsa Control Shift I o mis ventanas para abrir las DevTools. Eso traerá a la altura las DevTools. Y puedo hacer clic en este minúsculo icono aquí mismo, icono de modo responsive. Y eso cambiará la vista para imitar dispositivos móviles. Y en este menú desplegable, podemos imitar muchos tipos diferentes de dispositivos, incluyendo iPads, iPhones y galaxias. Entonces así es como se ve actualmente en los teléfonos móviles. Si ampliamos eso, vamos a derrumbar eso. Está expandido. Sí, creo que me gusta. Hagamos algo con esta frontera aquí mismo. Por lo tanto, mientras aún debajo de desplegable, desplazémonos hacia abajo y busquemos divisor. Aquí, aquí mismo, divisor, estilo de frontera. Cambia eso a ninguno. Eso debería deshacerse de esas líneas ahí mismo. Y ahora los menús desplegables se ven mucho mejor. Entonces actualicemos eso. Y vamos a previsualizar los cambios. Muy bien, entonces en esta página, control turno yo, y voy a hacer clic en ese diminuto icono ahí mismo. Sube el modo de respuesta. Hagamos clic en el ícono ahí mismo en nuestro menú. Se ve impresionante, me gusta. Entonces lo siguiente que queremos hacer es hacer que el resto de la página sea sensible. Ya terminamos con la barra de navegación. Entonces te veré en breve. 21. Diseño reyo: el cuerpo principal: Está bien, me gusta. Entonces lo siguiente que queremos hacer es hacer que el resto de la página de aterrizaje se vea impresionante en los teléfonos móviles. Entonces volvamos a saltar aquí adentro. Ahora que terminamos con los menús del smartphone, salgamos de este espacio de trabajo. Entonces haré clic en este menú de hamburguesas y Salir a Dashboard. A continuación, saltemos por dentro de las páginas. Y encontremos nuestra página. Entonces aquí estamos, nuestra página de aterrizaje. Vamos a editar con Elementor. Entonces cambiemos al modo responsive y veamos cómo se ve. Entonces, vamos a hacer clic en la vista móvil. Empecemos con los textos animados. Haga clic en eso. Ahora entra el estilo y el estilo, voy a ir a textos de fantasía, textiles de lujo y tipografía que se reduce el tamaño hasta ese spot. Y luego vamos a derrumbar eso. Entraré dentro de sufijo textiles. Ahora queremos reducir el tamaño de ese punto hasta ese punto. Actualicemos eso. Y si bien aún está seleccionada, vamos por dentro avanzado. Y vamos a romper este vínculo de margen que debería separarlos así. Lo siguiente que queremos hacer es dar click esta columna aquí mismo, ir adentro avanzado. Vamos a darle un relleno de 15 sin romper el enlace para que se aplique a todos los campos aquí dentro. Entonces 15, y digamos 20. 20 está bien. Tenemos que empujar un poco esto hacia arriba. Entonces seleccionando esta sección, yendo adentro avance, Vamos a romper, vamos a romper el relleno. Y ahora vamos poco a poco empujarlo hacia abajo hasta ese punto. A mí me gusta ahí. A continuación, pasemos al botón. Seleccionaré el botón en sí. Y entraré por dentro avanzado. Rompamos el vínculo del margen. Y eso debería deshacerse de cualquier configuración que hubiera ahí. Muy bien, vamos a desplazarnos hacia abajo. Creo que me gusta donde está todo. Algunas personas prefieren todo en medio, pero creo que me gusta donde todo está posicionado de izquierda a derecha. Podemos seguir adelante y seleccionar estas columnas aquí mismo. M por eso, también podemos darle un relleno de 20 sin romper el eslabón. Y este 20 se ha aplicado a todas estas columnas porque están dentro de esta columna principal. Estos son, esta es una intersección. Estas son intersecciones. A continuación, entremos aquí. Escoge una luz que se vea bien. Muy bien, entonces estas cajas se están tocando aquí. En la parte superior e inferior. Tenemos que aumentar el margen superior e inferior. Por lo que seleccionaré una de las casillas, entraré en Avanzado, le daré un margen de diez. Y ahora eso debería aplicarse a todos los campos que hay, cualquier espacio 2D fuera todo. Entonces seleccionaré, haré clic derecho, copiaré eso, y luego haré clic derecho en eso y pegaré estilo. Voy a repetir lo mismo para estos dos, pega estilo y finalmente, pega estilo. Y ahora están espaciados adecuadamente. Sigamos. A mí me gusta donde estas oposición, podemos seleccionar esta columna, ir adentro avanzado. Vamos a darle un try rodilla 20 pixel margen. Así. Debería espaciar la imagen desde los bordes. ¿ Verdad? A continuación, vamos a seleccionar esta columna aquí mismo. Avanzado 20 año, debería crear algún espacio entre esta forma y los bordes. Vayamos aquí abajo. Seleccione ese subtítulo. Alinémoslo al centro. Seleccione eso. Seleccionaré eso. Ve al interior de estilo, en medio. Haz lo mismo por esto. Y finalmente ese estilo. Alinear centro. Creo que me gusta dónde está el mapa, pero también podemos darle algo de relleno. Por lo que seleccionaré la columna en sí, relleno de 20. Y entonces creo que me gusta dónde está el pie de página, así que no vamos a tocarlo. Actualicemos eso. Y repasemos los cambios. Impresionante, por lo que presionando Control Shift I, haré clic en ese ícono aquí mismo. Y pasemos a la vista móvil. Entonces así es como debe verse en las pantallas móviles. Ahora, el menú, la barra de navegación se ve súper impresionante. El menú desplegable está funcionando correctamente. Y si empezamos a desplazarnos, a diferencia de la sección de héroes, me gusta dónde está todo. Entonces creo que con eso, esto marca el fin de la clase. Disfruté mucho enseñarte y espero que hayas disfrutado viéndolo. Pero sobre todo, espero que hayas aprendido algo. Espero que hayas ganado una nueva habilidad que ahora puedes salir y usar en proyectos del mundo real. Mi nombre es Ken visa. Siempre es un placer estar contigo aquí. Y seguiremos la próxima vez.