Guía de Elementor para principiantes: diseña tu primera página de inicio

1. Introducción: En el mundo actual en rápida evolución, uno de los cambios más significativos ha sido en dónde y cómo compramos y pasamos nuestro tiempo. Con una penetración global de Internet disparó en la última década, cada vez más personas dedican una parte significativa de sus vidas a Esto presenta una gran oportunidad para que amplíe el alcance de su negocio y adquiera nuevos clientes anteriormente más allá de su alcance. Por ejemplo, si tu negocio tiene un sitio web, puedes vender tus productos a personas de todo el mundo. No tienes que vender a personas dentro de tus órdenes. O si tienes habilidades de diseño web, puedes ganarte la vida construyendo sitios web para otros negocios o construyendo plantillas de sitios web y vendiéndolas en línea. Pero la pregunta es, ¿cómo se construye un sitio web? ¿Necesitas habilidades de programación o codificación? Bueno, para desarrollar un sitio web, tienes dos opciones. Puedes pagarle a un diseñador web para que lo haga por ti o puedes aprender a construirlo tú mismo. En esta clase, quiero mostrarte cómo construir sitios web tú mismo usando Elementor Y al final de la clase, tendrás un flujo de trabajo sólido para crear sitios web sin escribir una sola línea de código. A espera un mini, ¿qué es Elementor? Elementor es un increíble creador de páginas de arrastrar y soltar para W press Es potente, intuitivo y te permite diseñar y personalizar tus sitios web visualmente. Simplemente arrastra y suelta varios elementos de página como un diseñador gráfico para crear tus diseños. Ahora, supongo que nunca antes habías usado Elementor, así que eres un principiante completo Si ese eres tú, esta clase es para ti. Como emprendedor prolífico, probablemente tengas ideas de negocio que necesitan un sitio web de vez en cuando, pero no tienes el dinero para pagarle a un diseñador web cada vez que quieres construir un sitio web prototipo Esta clase le permitiría convertir las ideas de su sitio web en sitios web en vivo. A partir de cero, construiremos juntos una página de aterrizaje del mundo real a medida que dominamos las herramientas elementor más utilizadas Empezaremos aprendiendo a instalar fueron presionados tanto en línea como fuera de línea. Veremos cómo instalar Elementor y otros plugins tanto a nivel local como online Veremos cómo instalar un tema de WordPress tanto en línea como fuera de línea. Y luego seguiremos adelante y nos familiarizaremos con la interfaz de usuario de Elentas En otras palabras, te llevaré a un recorrido por el editor Elenta para que puedas familiarizarte con las herramientas y características y configuraciones que necesitas conocer Una vez que hayas tenido un rápido recorrido por el editor de Elenta, pasaremos a construir tu landing page, comenzando desde la barra de navegación en la parte superior hasta el pie de página en la parte inferior También cubriremos cómo hacer que tu página sea receptiva, por lo que queda genial en todos los dispositivos. Si es la primera vez que me ves, mi nombre es Ken, y he estado usando un L lamentor para construir sitios web para mis clientes y para mí durante los últimos seis años, y he estado compartiendo esa pasión con los estudiantes aquí mismo en Skillshare Y espero verte en esta clase. Y ahora estoy listo para comenzar. Espero que tú también. En la siguiente lección, echemos un vistazo a una demostración de la página de aterrizaje que construirás a lo largo de la clase. Empecemos. 2. Proyecto de clase: A, bienvenido de nuevo. Entonces ahora, como ya sabrás, la mejor manera de aprender una habilidad técnica es trabajando en un proyecto práctico. Y ahora, en esta clase, vamos a estar trabajando en una landing page a medida que aprendamos a usar herramientas elementales. Así que aquí hay una landing page, y quiero que le echemos un vistazo rápido de arriba a abajo. Entonces, comenzando aquí está nuestro encabezado con un logo, un menú. Y un rápido botón de llamada a la acción aquí arriba. A continuación, tenemos esta sección de héroes. A esta zona se le llama la sección de héroes. Se compone de un bloque de texto con botones de llamada a la acción y la imagen de héroe. A continuación, tenemos este botón de anclaje aquí mismo. Cuando hacemos clic en él, nos empuja a la siguiente sección aquí mismo en la página. Y notarás que esta sección tiene un bonito fondo de partículas animadas. Es un sistema de partículas, y veremos cómo crear eso. También tenemos encabezados que tienen diferentes colores, encabezados de doble color Veremos cómo establecer el color de una palabra específica en una oración o en un bloque de texto. Avanzando, tenemos algo similar aquí, pero su implementación es diferente de cómo se implementó esto. Esta imagen se agrega como un elemento de imagen, mientras que ésta se agrega como fondo de sección, y veremos cómo hacer todo eso. Pasando al forraje, aquí, tenemos un pie de página que se parece a esta otra sección de aquí Notarás que también es un pie de página muy simple con un logotipo, alguna descripción aquí, listas de iconos aquí y botones de llamada a la acción. Muy sencillo, no complicado. Quería un proyecto que te fuera fácil de hacer porque eres principiante, pero también te diera la oportunidad de interactuar con las herramientas elementales más utilizadas. Y así a medida que construyamos esta landing page, podremos interactuar con esas herramientas, y para cuando terminemos, tendrás la confianza para empezar a trabajar en una nueva landing page tú mismo. Entonces, ese es el proyecto en el que estaremos trabajando a lo largo de la clase. Espero que estés tan emocionada como yo. Si usted es. Por qué no pasamos a la siguiente lección donde veremos cómo instalar W press. Te veré en breve. 3. Instalación de WordPress sin conexión: A, bienvenido de nuevo. Entonces ahora que has visto la landing page de ir a estar construyendo, es momento de instalar Wpress Ahora, hay dos formas o dos lugares en los que puedes instalar prensa W. Eso es en línea y fuera de línea. En esta lección, vamos a centrarnos en una instalación fuera de línea, y en la siguiente lección, nos centraremos en la instalación en línea. Otro nombre comúnmente utilizado para una instalación fuera de línea de Wpress es la instalación local porque es local en su máquina No necesitas una conexión a Internet para seguir trabajando en tu sitio web de Wpress y navegando de una página a otra Y para configurar W press localmente en nuestra máquina, necesitaremos descargar dos cosas. Número uno, necesitamos descargar shap. Número dos, necesitamos descargar W Press. Así que sigamos adelante y descarguemos Shamp ahora mismo. Entonces agregaré una nueva pestaña, y voy a escribir Sham. Solo voy a seguir adelante y hacer clic en descargar y seremos redirigidos a esta página, apache friends.org slash Te llevarán directamente aquí, y podemos descargar la última versión que trabajamos en nuestra máquina. Como puede ver, tenemos 8.2 0.12. Esta es la última versión porque esta es 8.0. Creo que voy a ir con esto, pero puedes ir con cualquiera de esto si quieres. Y debería comenzar automáticamente. ¿Por qué no empieza? Déjame hacer click aquí. Todo bien. No acepto. No sé por qué no se está descargando, pero déjeme simplemente hacer clic en esto. Y aquí vamos. Entonces ahora se está descargando. Y ya terminamos. Ahora Shap está descargado. Déjame simplemente dar clic en Mostrar en carpeta y arrastrar esta ventana aquí. Aquí está. Simplemente haré doble clic en él para instalarlo. Ahora, no te preocupes por esta advertencia aquí mismo. Sólo tienes que seguir adelante y haz clic en Bien, y aquí está nuestro setuiz Entonces voy a hacer clic en siguiente. Haga clic en siguiente e instálelo dentro de C Sham. Así que sólo voy a hacer clic en siguiente siguiente. Entonces vamos para que podamos seguir adelante y permitirlo en redes privadas, y podamos seguir adelante e iniciar el panel C ahora mismo. Así que mantén terminada esa charla. Y se abre en la otra ventana. Entonces aquí está. Y como puedes ver, Shamp nos proporciona varias herramientas y características Entonces lo que tenemos que hacer ahora mismo en este momento, ahora que hemos instalado shamp es iniciar el servidor Apache porque su sitio web workpas debe ejecutarse en un El servidor es lo que te permitirá navegar de una página a otra para navegar de una parte del tablero a la otra. Entonces habilitemos también la base de datos SQL. ¿Quieres permitir esto? Sí. Así que voy a seguir adelante y permitir eso. Ahora, como pueden ver, tenemos Apache ejecutándose y mi estado SQL cambió, y se está ejecutando. Y ahora, lo siguiente que tenemos que hacer es crear una base de datos porque cuando estemos configurando nuestro sitio web de Wpress, nos pedirá el nombre de nuestra base de Entonces necesitamos tenerlo listo de antemano. Así que voy a seguir adelante y hacer clic en mi SQL Admin. Simplemente voy a hacer clic en Admin. Ahora se abre en la otra ventana. Simplemente lo arrastraré y lo colocaré aquí mismo, y debería cambiarme a esa otra ventana. Pero esto es lo que deberías tener después hacer clic en mi administrador de SQL. Vamos aquí y debajo de las bases de datos. Vamos a crear una base de datos. Déjame llamarlo mi DB de subrayado. Realmente no importa. Sólo puedes decir mi base de datos. Eso está bien. Deja todo lo demás intacto y haz clic en Crear. Entonces ahora tenemos esta nueva mi base de datos listada debajo aquí. Así que voy a seguir adelante y cerrar eso. Y ahora que tenemos una base de datos, el siguiente paso tenemos que hacer, recuerden, dije que necesitamos descargar dos cosas. El primero que descargamos fue shap. Lo segundo que necesitamos descargar es Wordpress. Entonces iré a wordpress.org. Y aquí estamos. Simplemente voy a hacer clic en Obtener WordPress, y descargaré Wordpress 6.61, y ahora se está descargando Ya terminamos. Ahora déjame abrirme en carpeta. Aquí estamos. Voy a hacer clic derecho e ir a WR Et aquí. Ahí vamos. Ahora lo hemos extraído aquí. En el momento en que abrimos la carpeta, tenemos que tener directamente este contenido. Este contenido no debe estar en otra carpeta. Este contenido no debe extraerse de esta manera. No haga clic derecho y extraiga a esa carpeta. Porque si haces doble clic en él, ahora tendrá la carpeta de Wordpress dentro de ella, que tiene el contenido. Queremos esta carpeta en sí, no la carpeta que se ha extraído. Téngalo en mente. Simplemente voy a copiar este Wordpress, dar clic en Control C. Ahora voy a entrar C. Déjame entrar en esta PC, hacer doble clic en mi unidad C, y encontraremos esta carpeta shap Recuerda que aquí es donde lo instalamos. Haga doble clic en eso, vaya dentro de HT Docs. Ahora bien, aquí es donde pegamos nuestra carpeta pres de trabajo, Control V para pegarlo, y aquí está Ahora podemos darle el nombre de nuestro sitio web porque esencialmente, ahora este es un sitio web. Entonces llamémoslo tal vez tienda online. Entonces ese es el nombre de nuestro sitio web. Cada vez que queremos crear un nuevo sitio web de Wpress localmente, todo lo que tenemos que hacer es entrar aquí y pegar otro Wordpress que esté descargado de wpress.org, entrar aquí y Ahí vamos. Podemos llamar a este sitio web dos. Ese es el sitio web dos. Ahora, si vamos a ahora recordar este nombre, Tienda Online. Copia eso. Si vamos aquí y tecleamos local host Tienda Online. Aquí vamos. Esto iniciará la configuración de Wordpress. Ahora bien, la razón por la que esto ha funcionado hasta ahora es porque estos dos están corriendo. Recuerda, si no tienes esto en tu pantalla en este momento, es porque probablemente no tienes uno de estos funcionando. Así que volviendo aquí, mi idioma es el inglés. Bienvenido a Wordpress. Sigamos adelante y comencemos. Vamos. Nombre de la base de datos. Recuerda que le dimos un nombre. Si solo abro una nueva pestaña y voy a o tal vez cierro eso y abro esto, vaya a Admin. Recuerda, teníamos mi base de datos. Entraré aquí y usaré ese nombre. Mi base de datos. El nombre de usuario es root y deja la contraseña en blanco. Deja todo lo demás intacto. Haré clic en Enviar. Y ahí vamos. Muy bien, Sparky, ya has superado eso. Ejecute la instalación. Aquí es donde le damos a nuestro sitio web de prensa de trabajo un nombre, un título. Recuerda, era una tienda online. Estas son las credenciales que usaremos para iniciar sesión en nuestro panel de WordPress, para que podamos actualizar el contenido. Entonces solo usaré mi nombre de usuario. Voy a usar esta contraseña. Proporcionaré un correo electrónico aquí, y desalentaré a dichos motores de indexar este sitio, y sigamos adelante e instalaremos Así que recuerda tus credenciales, mi nombre de usuario, Copia esto y ponlo en alguna parte. Déjame simplemente escribir t x t aquí para abrir un bloc de notas y poner esa contraseña ahí por un segundo. Entonces vete. Permítame también poner este mi nombre de usuario aquí. Sigamos adelante e instalemos ps. Y el éxito, ahora hemos instalado nuestra prensa de trabajo a nivel local. Entonces si digo iniciar sesión, puedo venir aquí y decir mi nombre de usuario y la contraseña es esta. Copia eso, pegarlo ahí e iniciar sesión. Puedo guardar esto a mi gestor de contraseñas, y aquí estamos. Entonces ahora tenemos W press instalada localmente. No necesitamos una conexión a Internet para seguir trabajando en nuestro proyecto. Enhorabuena. Ahora tiene una instalación local de Wpress En la siguiente lección, sigamos adelante y veamos cómo instalar o configurar los WPS en línea Necesitarás una conexión a Internet para eso, pero veamos eso en la siguiente lección. Entonces te veré en breve. 4. Compra alojamiento web y un nombre de dominio: Ahora que has aprendido a instalar Wordpress localmente, tal vez te estés preguntando, ¿cómo hago lo mismo pero en línea? Porque en última instancia tu sitio web debe ir en vivo. Debe existir en algún lugar en línea. Ahora bien, si has tomado alguna de mis clases elementales más recientes, debes haber encontrado la lección donde abordamos cómo comprar un nombre de dominio, dónde comprar hosting, y cómo comprarlo, cómo configurar Wordpress una vez que compras hosting y un nombre de dominio. Cubrimos todo eso. Y porque creo que hicimos un gran trabajo al explicar todo ese proceso, voy a tomar prestada esa lección y chiflado adolescente aquí mismo para que pases por ese Entonces, aquí vamos. Es momento de hablar sobre cómo y dónde obtener tu alojamiento web y un nombre de dominio. Ahora, cada sitio web que visita se almacena en algún lugar en línea en un servidor que siempre está disponible para Internet. Es por eso que puedes acceder a un sitio web que está en los Países Bajos o Estados Unidos o México porque está almacenado en un servidor que siempre está conectado a Internet. Entonces eso significa que cada vez que haces clic en un enlace que te lleve a un sitio web específico, por ejemplo, gratis Peck, digamos, freepik.com Lo que hizo el navegador fue que envió una solicitud para esta página específica, y se puede acceder a esta página específica a través de esta dirección o esta URL. Y así cuando envió la solicitud, esa solicitud fue recibida por el servidor que está almacenando el sitio web gratuito de Pick, y el sitio web Free Pick está compuesto por muchas páginas web. Pero debido a que esta página web está representada por este nombre de dominio específico, ese servidor devolverá una respuesta con la página que solicitó. Entonces ese servidor es lo que te proporciona un proveedor de alojamiento web. Su proveedor de alojamiento web le proporciona espacio de almacenamiento para su sitio web y se asegura de que su sitio web esté disponible para cualquiera que quiera visitarlo. Ahora, la otra cosa que necesitarás es un nombre de dominio, freepik.com es un nombre de dominio, y este nombre de dominio específico es único para echar un vistazo gratis, así que nadie más puede tener el mismo peak.com gratis, de la misma manera nadie más puede Tu número de teléfono es único, y se utiliza para llegar solo a ti, a nadie más. Por lo tanto, su sitio web necesita tener un nombre de dominio único, y la gente usará ese nombre de dominio para acceder a su sitio web. Entonces ahora, volviendo aquí, estoy en wpress.org. Este es el sitio web oficial de WordPress. Aquí es donde puedes descargar Prensa de alambre. Si quieres desarrollar tu sitio web sin conexión, puedes instalar Wire press en tu sistema y trabajar sin Internet y construir tu sitio web. Pero lo que nos interesa es la página de hosting. Wire Press tiene una lista de servidores web recomendados, y te recomiendo que te tomes un momento y leas esta página. Ya puedes ver, tienen tres hosts web principales recomendados, Bluehost, dream host y wordpress.com Pero esto no quiere decir que estos sean los únicos servidores web que puedes usar para tu sitio web Wordpress. Hay otros servidores web que son igual de buenos, si no mejores que estos tres. Entonces estas son solo recomendaciones de wordpress, pero aquí descubrirás leyendo esto que hay cientos de miles de webhsts por que hay cientos de miles de ahí, la gran mayoría de los cuales cumplen con los requisitos mínimos de wordpress W Press decidió simplemente hacer tu trabajo más fácil y decidió darte los tres primeros que te recomiendan. Ahora, personalmente, he usado Blue Host. Y yo hace mucho tiempo, cuando empecé a usar Wpress, probé wpress.com, y no debes confundir workpress.com confundir WPress.org es la plataforma que está dirigida por la Fundación Work Press porque recuerde que Wpress es Y wpress.org existe para brindarle recordar con la descarga de W Press y todo lo que necesita saber sobre W Pero ahora cuando se trata de hosting, hay un servicio dedicado llamado wpress.com. Déjame abrirla. Esta es una plataforma que te proporciona herramientas y hosting para construir tu sitio web. Son como semanas. Si has visto semanas, sabes que cuando estás construyendo un sitio web en semanas, no necesitas pensar en dónde conseguir hosting porque ellos alojan el sitio web por ti. Simplemente te dan las herramientas para comenzar a construir tu sitio web de inmediato. Pero claro, tiene sus limitaciones, de la misma manera Weeks tiene sus limitaciones cuando lo comparas con instalar Wordpress tú mismo en un servidor. Cuando instalas W presiona en un servidor en algún lugar, tienes más control para hacer muchas más cosas sobre las que no tienes control cuando estás usando un servicio alojado como wordpress.com Pero claro, es un lugar agradable que puedes probar si quieres. Ahora, a nivel personal, uso chip de nombre. Especialmente cuando solo estoy experimentando con algunas ideas antes de comprometerme a comprar un alojamiento web dedicado para esa idea específica Así que el chip Name tiene varios servicios aquí mismo. Uno de ellos es este hosting gestionado de Wordpress y migración a Wordpress. Pero otro servicio aquí se llama hosting compartido. Si abro eso, tenemos este plan Stela Stela plus aquí mismo, y te diré por qué me gusta usar esto. Número uno, mira estos sitios web ilimitados. Eso significa que si tengo, como, diez ideas para diferentes sitios web, tengo diez ideas. A lo mejor no voy a abrir una tienda de comercio electrónico. No voy a abrir una tienda de cosméticos. No voy a abrir un blog personal. A lo mejor no voy a abrir una comunidad social. A lo mejor quiero crear un foro. Esas son cinco ideas diferentes. Puedo alojar todos esos sitios web bajo este plan sin tener que comprar alojamiento separado para cada sitio web. Puedo tener un número ilimitado de sitios web alojados bajo este plan, y solo puedo pagar esta tarifa por mes. Por supuesto, este es el primer año tiene descuento, pero luego en el segundo año, estarás pagando 68.88 por año Pero piénsalo. Si tienes tres ideas o cuatro ideas para diferentes sitios web, y quieres ver cuál funcionará antes de comprometerte completamente a obtener un plan de alojamiento web dedicado para ello. Puedes crear el sitio web bajo este plan. Crea los cuatro sitios web. Habrá en vivo en Internet. Puedes comenzar a enviar personas a ese sitio web a través de enlaces en redes sociales, simplemente vinculados a los cuatro sitios web. Y si uno de los sitios web realmente se da cuenta y comienza a atraer mucho tráfico, ahora puedes decidir ahora este sitio web parece que se está poniendo de día. Así que permítanme obtener un plan de alojamiento web dedicado para ello por separado. Y luego solo puedes migrarlo al hosting dedicado porque ahora es una idea que se inició. El resto puede permanecer como sitios web experimentales, pero aún están en vivo en línea. Pero lo bueno es que estás pagando por un plan de hosting. No estás pagando diferentes planes de hosting para los diferentes sitios web. Y, claro, por esas ventajas, por eso soy capaz de construir un sitio web como este. Este es el sitio web que acabo de mostrarte. Déjame simplemente ir a la parte delantera. Este es el sitio web de referencia que construí mientras preparaba este curso, y lo construí, por supuesto, que podamos tener un sitio web para mirar mientras trabajamos en el curso. Ahora bien, con eso dicho, esta es una de las páginas web que he alojado bajo este plan. Y está bajo este dominio para. Ahora, en esta clase, estaremos construyendo nuestro sitio web, y estaré usando un nombre de dominio diferente, que será wordpress everything.com, y también estará bajo este plan Entonces tendré esos dos sitios web, sitios web demostración, bajo el mismo alojamiento. Por eso estoy usando esto. Pero ahora me he tomado demasiado tiempo hablando de esto. No estoy tratando de convencerte de que entiendas esto. Esto es solo yo explicando el razonamiento detrás de lo que uso y cómo trabajo porque a lo mejor te puede resultar útil, pero recuerda, Siempre puedes ir aquí y probar estos otros servidores web También son buenos. Ve y pruébalos, elige el que quieras. Y una vez que hayas hecho eso, volvamos aquí. Como puedes ver aquí, tenemos dominios. El chip de nombre es uno de los mejores vendedores de nombres de dominio del planeta. Has visto los anuncios por todas partes en YouTube y en diferentes sitios web Puedes buscar tu sitio web. Digamos caridad today.com. Veamos cuánto es eso. Todo bien. Charity today.com es el dominio premium Son 1.700 dólares. Pero también tenemos otros dominios más baratos, Charity hoy punto hoy. Depende de ti ser creativo y comprar un nombre de dominio con el que puedas vivir, un nombre de dominio que tenga sentido. Por supuesto, quieres usar el nombre de tus organizaciones benéficas o tu startup. Si buscas fondos para proyectos tecnológicos y no para caridad, también puedes simplemente usar el nombre de tu empresa. M empresa today.com. Y como puedes ver, y. Así que solo juega con esto y luego una vez que estés listo, puedes agregar a la carta. Pero recuerda, cuando volvemos al hosting compartido, cuando compras este plan, obtienes un nombre de dominio gratis. Entonces eso significa que tienes oportunidad de obtener un nombre de dominio gratis durante el primer año sin tener gastar este dinero que acabamos de ver. No necesitarás comprar un nombre de dominio durante el primer año, pero claro, tendrás que pagar por el nombre de dominio el segundo año en adelante. 5. Instalación en línea de WordPress: Entonces ahora que has comprado el alojamiento web de W Press y un nombre de dominio, puedes instalar WPs en línea porque tenemos acceso a lo que llamamos el panel C. Es el panel C que nos da el entorno que tiene todas las herramientas y características que necesitamos para instalar un sitio web de Wpress en línea Y así sigamos adelante y hagamos eso ahora. Así que aquí estoy en mi página de inicio de sesión de chip de nombre, y solo voy a iniciar sesión de inmediato. Entonces haré clic en Iniciar sesión. Nombre chip, queremos verificar. Muy bien, así que necesito verificar esto. Así que déjame mirar mi correo electrónico muy rápido. Y ahí vamos. Y ahora estamos dentro. Entonces, si compraste alojamiento web con chip de nombre para acceder al Panel C Ir a la lista de Hosting, ahí es donde encuentras todos tus planes de alojamiento web. Y recuerda, compré Stela plus. Así que sigamos adelante y hagamos clic en Ir al Panel C. Y seremos redirigidos al panel C. Y aquí estamos. Ahora, independientemente del host web con el que decidieras ir, tu panel C debería verse algo similar a esto. Tal vez algunos de los ajustes pueden faltar, o puede que tengas más ajustes que yo, pero la mayoría de los ajustes aquí son los mismos. Una de las principales herramientas que encontrarás ahí se llama sftaculs Y Softaculs es lo que nos permite instalar diferentes tipos W Press es un ejemplo de un CMS, lo que puede hacer clic en W presione directamente aquí o haga clic en el instalador de aplicaciones sptaculs Así que solo voy a seguir adelante y dar clic en W Press. Y ahora nos llevarán a la página donde podremos administrar todos los sitios web de Wpress que hayamos instalado o instalar otros nuevos. Si me desplazo hacia abajo, se dará cuenta de que tenemos un sitio web de prensa W ya instalado. Y recuerda, porque estamos usando el Stella plus, podemos instalar un número ilimitado de sitios web bajo el Stella plus. Así podremos instalar una nueva instancia de wordpress. Seguiré adelante y haré clic en Instalar ahora, y seremos llevados a esta página para proporcionar todos los detalles de nuestro sitio web. Empezar con un protocolo. Me gusta usar HTTPS, asegúrate de que haya esa S al final por seguridad, www website.com, pero también puedes usar HTTPS website.com Ahora bien, si no tienes un certificado SSL, no tendrás HTPS, solo tendrás HTTP, pero eso no es recomendable Asegúrate de tener un certificado SSL. Ahora cuando elija esto y haga clic afuera, haré una comprobación rápida para ver si tengo instalado un certificado SSL, y si lo hago, está bien. Si no lo hago, me dirá que no puedo elegir HTPS. A continuación, voy a elegir el dominio bajo cual instalaré esta instancia de wor Press Porque mi sitio web de referencia está en worpress everything.com Voy a elegir fX pod.com nada. No agregues nada aquí. De lo contrario, tu página de inicio tendrá que ser WWW tu barra de nombre de dominio, lo que sea que pongas aquí Esa va a ser tu página de inicio. Normalmente, solo quieres que tu página de inicio sea wbsite.com. Así que no agregues nada aquí. Entonces voy a proporcionar un nombre para nuestro sitio web. Así tienda online. Compra cualquier cosa de nosotros. Esa es una descripción de nuestro sitio web. Y estas aquí son las credenciales que usarás para iniciar sesión en tu panel de Wpress Si no quieres pasar por el panel C para acceder a tu panel de control, solo tienes que ir a tu página de inicio de sesión de sitios web de Wpress e iniciar sesión en tu panel Así que asegúrate de tener una contraseña y un nombre de usuario seguro. Sólo voy a dejar esto por defecto. Y aquí hay algunos plugins que vienen preinstalados con W press. Si los revisas, así que sólo voy a quitar esto y esto. Entonces no tengo ninguno de estos aquí. También puede optar por tener copias de seguridad para su sitio web. Déjalo por defecto. Puedes elegir hacer una copia de seguridad de tu sitio web una vez a la semana o una vez al mes, lo que quieras. Así que sólo voy a elegir una vez a la semana. Rotación tal vez dos. Siempre habrá dos copias de copias de seguridad, una más antigua que la otra, en un momento dado. Y también puede proporcionar un correo electrónico aquí al que se enviará una alerta una vez que la instalación esté lista. No necesito hacer eso, así que voy seguir adelante y hacer clic en Instalar. Y no dejes esta página hasta que la barra de progreso llegue al 100%. Y ahí lo tenemos. Entonces ahora, Wordpress está instalado y listo. Aquí hay una URL a nuestra página de inicio, y aquí hay una URL a nuestro panel de control. Vayamos a la página principal. Y ese es el tema predeterminado que viene con Wordpress, y así es como se ve nuestro sitio web. Aquí está nuestro nombre de dominio. Volviendo aquí, vayamos al tablero de instrumentos. Derecho lik open Enlace en Nueva Pestaña, Y aquí estamos dentro de nuestro dashboard de sitios web de Wpress, por lo que hemos instalado con éxito W press en un servidor en línea proporcionado por nuestro proveedor de alojamiento web Y con nuestro sitio web Wpress listo, veamos cómo instalar un enchufe Wpress sin conexión. Nos vemos en breve. 6. Instalación de un complemento sin conexión: Entonces, ahora que hemos instalado wor press tanto localmente como en línea, es el momento de tener una visión general rápida de elementor Ahora, para esta lección, vamos a usar la instalación local, y eso es porque también quiero mostrarte cómo instalar plug-ins localmente. Entonces ahora que tenemos esta instalación local de wor press, es el momento de instalar elemento Entonces voy a ir a plugins, agregar nuevo. Aquí vamos. Y debido a que estoy conectado a Internet, estos plug-ins que están en el directorio de WordPress se enumerarán aquí. Pero como mencioné, eso es porque estoy en línea. Si no estás conectado, no puedes hacer clic en instalar ahora. De hecho, no creo que puedas ver ningún plugin aquí porque no tienes Internet. Por lo que tendrás que venir aquí para subir un plug in, y luego tendrás que elegir un archivo. Eso significa que el archivo que estás eligiendo es un archivo que descargaste de antemano cuando estabas conectado a Internet. Así que L et's descargan el archivo que vamos a subir aquí. Descarguemos Elementor. Elemento enchufable. Una vez que hagamos clic en elemento plug in, no vayas al sitio web de elemento, ve a wpress.org slash Aquí es donde descargarlo. Voy a hacer clic en eso. Seremos llevados a wpress.org Una vez más, recuerda aquí es donde descargamos Wpress. Pero ahora esta vez estamos bajo extensión. Solo esperemos a que termine de cargarse. En este momento estamos bajo extender plug ins. Elemento plug ins. Entonces aquí dentro, sólo voy a hacer clic en descargar. Puedes leer sobre lamentar aquí si quieres. Lo estamos descargando, y ahora aquí está. Ahora volviendo aquí, voy a decir elegir archivo, y me refiero a descargas secundarias, como pueden ver aquí es lamento 3.232, luego abierto Luego haz clic en Instalar ahora. Después activa el plugin. Ahora, seremos llevados a través de este asistente de configuración. No necesitas crear una cuenta para usar elementor, así que simplemente me saltaré Puedes continuar con el tema hola que es creado y mantenido por Elementor o el equipo elementor, o puedes usar tu propio tema preferible Vamos a usar un tema llamado Astra, así que vamos a saltarnos esta parte. Ahora bien, no necesitamos estas características pro porque estamos usando elementor free, así que omita eso Y ahora podemos editar un Canvas en blanco o elegir una plantilla diseñada profesionalmente o una plantilla que ya creamos. Pero ahora, independientemente de la opción que elijamos aquí, incluyendo Skip, elemento generará automáticamente una página elementor de muestra, una página que es editable con Así que déjame hacer clic en Skip. Y ahora Elementa ha generado automáticamente esta página porque tiene que llevarnos al editor para que podamos tener una rápida visión general de lo que se trata Elemento Entonces aquí, nos están contando sobre las características de IA a las que podemos tener acceso si queremos, pero eso significa que necesitas tener una cuenta de elemento. Así que sáltate eso. Y ahora aquí está la página de muestra y se llama Elementor número ocho Y permítanme publicarlo muy rápido. Ahí vamos. Lo hemos publicado. Ahora, antes de echar un vistazo rápido a este editor, si queremos salir al dashboard, todo lo que tenemos que hacer es hacer clic en esto y salir a WordPress. Una vez que salgamos a W la prensa será llevada al editor de Gutenberg para la página Aquí es donde haces algunas configuraciones básicas de la página en el back end. Ya veremos cómo hacer todo eso. Ahora, volviendo al interior de la configuración de Wordpress, como puedes ver, esta es la página que fue generada automáticamente por Elementor Pero estas son dos páginas adicionales que vinieron con la nueva instalación de W press. No necesitamos a estos dos por ahora. Selecciónalos y luego muévalos a la basura y aplícalos. Entonces ahora tenemos a este Elementor número ocho. Así que ahora puedo hacer clic en editar con Elementor. Y volveremos a la página de primaria con el editor ya listo para que podamos echarle un vistazo. Entonces creo que por ahora, vamos a detener esta lección aquí mismo. Al menos quería que viéramos cómo enchufar una instalación fuera de línea de prensa W. Este es un buen lugar para parar. En la siguiente lección ahora, vamos a tener una visión general de lo que significan todas estas partes. ¿Qué es todo esto? ¿Cuáles son todas estas configuraciones a medida que construye su sitio web? A ver eso en la siguiente lección. 7. Recorrido por el editor de Elementor: Entonces ahora es el momento de echar un vistazo rápido al editor. Déjame cerrar eso. Ahora bien, desde el principio, como pueden ver aquí, tenemos algo llamado estructura. Ahora bien, este es el nuevo nombre. En versiones anteriores de Elementor, esto se llamaba Navigator porque es un widget que nos da una vista de pájaro de toda la página, todos los elementos que tenemos en la página, y podemos movernos rápidamente a diferentes partes de la página También nos muestra la estructura. Déjame mostrarte muy rápido. Mientras aún estamos aquí, si yo, por ejemplo, agrego un contenedor. Arrastre y suelte un contenedor allí. En el contenedor, al hacer clic en este signo más, arrastre un elemento de imagen, y tal vez me deje agregar algo más. Déjame agregar otro contenedor justo debajo de este contenedor. Ahora tenemos eso. Ahí dentro, déjame poner un video. Esto es solo un ejemplo de Vamos a agregar también otro contenedor justo debajo de eso, déjame seguir adelante y agregar un encabezado. Entonces como pueden ver, nuestra estructura aquí nos muestra la estructura de la página, de ahí el nombre. Pero el nombre navegador también fue muy relevante porque se puede navegar a cualquier parte de la página web. Entonces si colapso eso y aquello y aquello, Como pueden ver, tenemos un contenedor. Este contenedor, yo me cierro sobre este, como pueden ver, es el contenedor abarca todos estos otros Ahora bien, si amplío esto, tenemos una imagen, y así esta imagen está dentro del contenedor. Pero este contenedor también contiene este otro contenedor, que agregamos después. Recuerda este contenedor, está dentro de este contenedor exterior. Por eso cuando colapsamos eso, estamos escondiendo lo que sea que haya dentro de eso. Pero ahora dentro de este contenedor, hay un elemento de video que agregamos. Si ampliamos eso, tenemos ese video y dentro de él, también tenemos otro contenedor que agregamos, y ahora ese contenedor contiene ese encabezado. Es como una jerarquía o como su nombre sugiere estructura. Ese es el número uno. Justo aquí a la izquierda, como ya te has dado cuenta, estoy agregando elementos haciendo clic en este signo más. Si quiero agregar algo más, hago clic en este más, y puedo agregar cualquier elemento que quiera desde aquí. Aquí arriba, tenemos configuraciones adicionales. Si quiero publicar la página, sólo tengo que seguir adelante y dar clic en Publicar. También puedo hacer clic en este menú desplegable para guardar esta página actual como una plantilla que luego podré reutilizar. Si quiero previsualizar lo que he creado, quiero previsualizar esta página. Puedo hacer clic en este icono, pero antes que nada, publiquemos esto y luego hagamos clic en Vista previa de cambios. Se abrirá una nueva pestaña, y ahí es donde veremos nuestra página tal como se ve ahora. Aquí, tenemos algunas otras cosas extra que no uso. Entonces aquí tenemos diseño responsive o modo responsive, iconos. Una vez que haces clic en esto, cambia al modo tablet y puedes optimizar tu página web para que se vea bien en las tabletas. También puede hacer clic en esta pantalla del móvil para cambiarla al tamaño de la pantalla del móvil, y podemos ajustar cada elemento para que se vea bien en los dispositivos móviles. Cuando estamos en cierto modo, por ejemplo, en modo retrato móvil, Los cambios que hagamos a los elementos no se aplicarán a la tableta o al escritorio. Aplicarán solo al modo móvil. Y veremos cómo hacer esto cuando estemos optimizando nuestro proyecto de clase de landing page hacia el final de la clase. Entonces conoceremos cómo usar estas herramientas receptivas. La otra cosa que debes saber es si derrumbo estos paneles aquí mismo. Todos estos paneles contienen elementos que podemos arrastrar a nuestra área de trabajo a nuestra página. Si abrimos, déjame bien, déjame cerrar eso. Si vamos a maquetación, tenemos dos elementos principales, contenedor y rejilla. Me gusta usar el contenedor. Esto puede contener todos estos otros tipos diferentes de elementos que encontramos aquí. El contenedor básicamente contiene otros elementos de tu página web. Si vamos a básico y lo expandimos, colapsamos diseño , dentro básico, tenemos los elementos más utilizados como encabezado, y puedes editarlo aquí o yendo directamente aquí y editándolo justo dentro de tu trabajo. ¿Qué más tenemos? Si decimos agregar, también tenemos un párrafo, al que se llama editor de texto por elementor Ahí vamos. Puedes cambiar este texto. Y cada vez que añades un elemento a tu espacio de trabajo aquí a tu editor. En otras palabras, cada vez que arrastras un elemento y lo sueltas dentro de tu página. En el momento en que lo sueltas y sigue siendo el elemento activo, tendrá este tipo de contorno a su alrededor, y los ajustes aquí serán para ese elemento específico. Ahora mismo, como pueden ver, dice botón de edición porque me acaba de soltar el botón ahora mismo. El contenido es el contenido del elemento. Por ejemplo, el contenido del texto, aprende más. Eso es un contenido. Ahora, el estilo es cambiar la apariencia del elemento. Esto es para agregar contenido al elemento. Si se trata de un elemento de imagen, agregar contenido, por ejemplo, agregar una imagen. Si es un botón, agregar contenido, por ejemplo, la t del elemento. Entonces tenemos el estilo está cambiando la forma en que se ve el elemento. Podemos cambiar el color y el botón. Color normal. Podemos decir que esto debería ser negro, y al flotar. Eso es normal al flotar. Queremos que sea digamos rojo. Al flotar, es rojo y en normal, es negro. También podemos hacer lo mismo con los textos. En normal, es el color por defecto, que es el blanco, y Al flotar, podemos decir que queremos que el color del texto sea digamos azul claro Así que así. Lo siguiente colapsó eso. Ahora, dentro del panel pro, como puedes ver, dice actualizar, y notarás que cada elemento tiene un pequeño icono de candado en él, y eso significa que si haces clic en él, no puedes arrastrarlo a tu trabajo porque necesitas actualizar. Entonces todo lo demás aquí es similar a estos otros dos que hemos mirado. Ahora, hay una configuración más que me gusta asegurarme de que esté activada. Si vas aquí y haces clic en las preferencias del usuario, existe esta configuración llamada mostrar opciones de edición rápida. Déjame mostrarte lo que hace. Ahora mismo, si pongo el cursor sobre esta esquina aquí, si quiero duplicar, por ejemplo, este texto, tengo que ir aquí, hacer clic derecho, luego duplicar Vaya aquí, haga clic derecho en duplicar. Esos son dos pasos que debo dar para duplicar un elemento. Pero si por ejemplo, yo tenía preferencias de usuario, opciones de edición rápida activadas, Si pongo el cursor sobre esto, ahora, como pueden ver, tenemos acciones rápidas aquí Por ejemplo, esto es duplicado. Entonces todo lo que necesito hacer es pasar el ratón por aquí y duplicar. Así que estos iconos de acción rápida aquí realmente te ayudan a hacer tu trabajo mucho más rápido. Creo que ahora mismo hemos tenido una buena visión general del editor. Lo que quede es algo que podemos aprender a medida que construimos nuestra landing page. Pero esa era solo una manera de presentarte las diferentes partes de Elementor Ahora, en la siguiente lección, comencemos con la construcción del encabezado, y el encabezado se compone de este botón, el menú y el logotipo. Entonces veamos cómo crear eso en la siguiente lección. Nos vemos en breve. 8. Instalación de un tema de WordPress: Ahí, bienvenido de nuevo. Entonces ahora es el momento de comenzar a trabajar en la landing page, y el primer lugar es el encabezado. Tenemos que crear esto. Pero antes de hacer eso, primero que nada necesitamos instalar un tema de wordpress porque es el tema de wordpress el que determina cómo se verá su sitio web o páginas web. Entonces entrando en un Wordpress, déjame ver. Entonces ahora, terminamos con el editor de primaria. Así que solo voy a no se publica, así que permítanme hacer clic en publicar, y luego salir a Wordpress. Ese es el elemento ocho, Salir completamente. Entonces aquí es donde deberías estar ahora, porque vamos a instalar un tema de Wordpress enseguida. Ahora bien, esta es la versión offline de nuestro sitio web. Te voy a mostrar cómo instalar un tema de Wordpress offline, y luego vamos a cambiar en línea porque a partir de entonces, vamos a continuar con la versión online. Entonces ahora estamos desconectados. Como puedes ver, anfitrión local. Entonces temas de apariencia, Y por supuesto, estos son los temas predeterminados que vienen con cada nueva instalación de prensa de trabajo dependiendo del año. Debido a que estamos en 2024, el tema activo por defecto se llama 2024. El año pasado, era 2023, y el año anterior a eso fue eso. Entonces obviamente el próximo año, el tema predeterminado será 2025. Pero como nuestro tema no está listado aquí, podemos decir agregar nuevo tema. Y nuestro W Press va a abrir el directorio temático W press. Vamos a seguir un proceso similar al la carga o instalación de plug in. Porque vamos a decir subir tema, entonces elijo un archivo que ya habías descargado, un tema que ya compraste y descargaste. Entonces no había descargado el tema. Voy a volver a workpres.org. Pero ahora, esta vez, ir a ampliar temas. Y aquí buscaré a Astra, pero suele estar entre los tres primeros. Aquí está, pero también puedes buscar en Astra, entrar, y aquí está. Lo seleccionaré, luego lo descargaré. Ahí vamos. Se está descargando. Y ahora se descarga Astra. Volviendo aquí, voy a elegir archivo, ir a descargar Astra, abrir, e instalar ahora. Empaque el paquete, luego sigamos adelante y activemos. Y ahora Astro es el tema activo. Entonces así es como hacerlo offline. Ahora, voy a cambiar a mi versión en línea del sitio web. Aquí estoy en un nombre de dominio diferente vor. Y a partir de ahora, ahora vamos a construir la landing page sobre esta. Pero ahora al menos sabes trabajar offline. Entonces ahora pasando por temas de apariencia, Aquí es la misma situación. Por defecto, tema activo 2024, pero queremos decir agregar nuevo. Pero esta vez, en lugar de decir en voz alta tema, porque estás conectado a Internet, podemos instalar directamente desde el directorio de temas de Wordpress Voy a seguir adelante y decir instalar Astra. Y luego activar. Aquí vamos. Por lo que el tema activo es Astra. Déjame cerrar esto junto con eso. Y ahora tienes un tema activo y estás listo para comenzar a construir la landing page. Entonces, en la siguiente lección ahora, veamos cómo empezar con el encabezado. Entonces te veré en breve. 9. Instalación de ElementsKit: Entonces comencemos con el encabezado. Pero antes de hacer eso, quiero cerrar todas estas pestañas. Así como así. Entonces nos quedamos con esto como la landing page de referencia. Volveremos a ver la sección que estamos construyendo, solo para tener una imagen mental de lo que estamos construyendo. Ahora, para crear el encabezado, necesitaremos usar un enchufe de terceros. Así que vamos a entrar en nuestro espacio de trabajo. Quiero ir a enchufar. Agregar nuevo. En primer lugar, permítanme simplemente hacer clic en plug ins, para que podamos ver los que están instalados. Acis met y Hello Dolly vienen con instalación de prensa en todas partes Entonces seleccionaré los dos, luego los eliminaré y aplicarlos. Bien. Y parece que también instalo loginizer mientras instalo prensa de trabajo dentro espectacular Así que solo lo eliminaré también. En este momento, no tenemos ningún complemento instalado. Diré agregar Nuevo, y voy a escribir Elementor Porque recuerda, te mostré como instalar elementor offline Ahora estamos usando el sitio web en línea, y tengo que instalar elementor aquí Diré que instale ahora. Y está instalado. Antes de hacer clic en Activar, solo echa un vistazo a estos otros elementor complementos relacionados Como puedes ver, elementor es creado por elementor.com, pero estos otros son desarrollados por desarrolladores externos El que vamos a usar para construir nuestro encabezado es el kit de elementos de WP meet. Yo sólo voy a decir instalar ahora. Ahí vamos. Entonces ahora, permítanme activar primero a Elementa Creo que vamos a pasar por eso no necesitamos pasar por ese mago de configuración, pero es posible que se te pida que lo revises. Entonces ahí vamos. También voy a activar lamentski light. Ahí vamos. Ahora bien, si pongo el cursor sobre elementos kit light, notarás que tenemos encabezado pie de página, y aquí es donde vamos a ir para crear nuestro encabezado Pero antes de eso, permítanme hacer clic en Elements kit para que podamos pasar por el asistente de configuración para que esté listo. Ahora bien, estos son ajustes básicos para determinar qué se activará automáticamente previamente mientras estamos trabajando en nuestra página. Por ejemplo, estos son los diferentes widgets que van a aparecer en nuestra página a medida que la editemos. Por ejemplo, hago clic derecho en este enlace abierto en Nueva pestaña, abro esto y abro esta página de muestra para editarlo. Et me cierra todo esto y edita con Elementor. Déjame cerrar eso. Entonces ahora, si colapso esto, como pueden ver, cuando instalamos el kit de elementos, se agregó automáticamente a esta lista de paneles dentro del editor de elementos. Así kit de elementos y kit de elementos cabeza de pie de página. Entonces ahora, estos son elementos que ya están pre activados en virtud de haber instalado el enchufe. Pero ahora, si venimos aquí y decimos, queremos avanzados, aquí se activarán algunos elementos más, y serán accesibles para nosotros aquí mismo. Si solo elegimos básico, algunos de estos widgets estarán apagados, y no podremos verlos aquí para usarlos en nuestro trabajo. Entonces por ejemplo, si selecciono avanzado, mira estos widgets aquí, ahí vamos, como puedes ver, wi get Builder ahora está activado por defecto. Siguiente paso, siguiente, siguiente, siguiente, guardar cambios. Y ahora ya terminamos. Entonces terminamos con ese mago. Y creo que estamos listos para empezar con un cabezazo. Entonces, si hago clic en encabezado pie de página, como puedes ver ahora mismo, no tenemos ningún encabezado o pie de página. Entonces lo que tenemos que hacer es decir agregar nuevo. Pero eso es algo que haremos en la siguiente lección. Te veré en breve. 10. Crea un logotipo de encabezado y Button: Y estamos listos para construir un nuevo encabezado. Así que sigamos adelante y digamos añadir nuevo, y ahora aquí, claro, vamos a darle el encabezado del nombre, y es un encabezado. Cuando llegue el momento de construir un pie de página, también vendremos aquí y seleccionaremos el pie de página. Pero ahora vamos con encabezado, y por supuesto, queremos que sea visible en todo el sitio. Si quieres que esté disponible condicionalmente o visible solo en páginas o partes específicas, tienes que estar en la versión pro del taponamiento Entonces vamos a activarlo también. Eso significa que vamos a hacerlo visible ahora mismo. Cuando estamos haciendo algún mantenimiento y no queremos que los usuarios lo vean, podemos desactivarlo, pero no lo habremos desgletado Ahora que lo tenemos básicamente listo, podemos decir editar contenido y nos llevarán al front-end donde ahora podemos editarlo visualmente. Pero ahora mismo solo podemos guardar los cambios. Incluso si hacemos clic en Editar contenido, los cambios también se guardarán. No se preocupe. Solo quiero guardar los cambios para que puedas verlo listado aquí. Pero ahora podemos hacer clic en editar, y ahora volver aquí y decir editar contenido. Y ahora nos llevarán al front-end donde ahora podemos empezar a trabajar en ello visualmente. Aquí estamos. Recuerda, lo que estamos creando es esta sección de aquí. En primer lugar, se divide en uno, dos, tres. Ir dentro de las estructuras, puede comenzar con un contenedor flexbox o contenedor pactado Me gusta usar contenedores Flexbox. Entonces voy a hacer clic en Flexbox, y aquí vamos a ver diferentes estructuras de fabricación gratuita que podemos empezar a usar rápidamente Entonces como hemos visto, tenemos una, dos, tres columnas. Estos tres están bien. El menú vendrá en el medio, el logo aquí. De hecho, podemos hacer clic en este signo más y agregar una imagen. Déjalo ahí, y este va a ser nuestro logo. Entonces déjame seguir adelante y seleccionar eso. D. No tenemos nada en nuestra mediateca. Así que sube archivos desde el dispositivo, selecciona archivos. Y yo había preparado una carpeta aquí llamada assets, esta carpeta. Tiene todas las imágenes que utilicé en el sitio de referencia, si acaso quieres seguir junto con estas imágenes. Entonces vas a encontrar una carpeta llamada assets justo debajo de este reproductor de video en la pestaña de proyectos y recursos. Puedes descargarla para seguirla. Entonces voy a subir todas las imágenes porque eventualmente las usaremos . Y aquí vamos. Lo que necesito es el logo. Seleccionaré el logo y ahí vamos. Todo bien. Ahora, acabo de recordar. ¿Cómo me olvidé? Necesitamos tener este fondo oscuro? Entonces déjame volver aquí y antes que nada, publiquemos la página exactamente como es. Ahora vamos a entrar en ajustes laterales. Fondo, y vamos a darle un fondo oscuro seleccionando el tipo de fondo, luego el color. Quiero arrastrarlo a la sección azul aquí y luego arrastrarlo a algún lugar allá. No quiero que sea negro puro así. Quiero tener algo de vibra azul oscuro. Guardar cambios. Y ahora los cambios se han actualizado de nuevo a editor. Así que volvamos al editor, y aquí estamos. Ahora, lo siguiente que queremos agregar es un botón. Haré clic aquí para agregar un botón, y ahí vamos. Por supuesto, está alineado a la izquierda. Podemos alinearlo a la derecha yendo al estilo. Posicionar a la derecha. Y también podemos cambiar el contenido. Recuerda, el contenido tiene que ver con el contenido en sí. Entonces, ¿qué tenemos aquí? Empezar. Empezar. Y recuerda, estilo se trata de cambiar cómo se ve algo. Ahora, quiero tener un verde que se vea algo así. Entonces volviendo aquí, mientras el botón aún está seleccionado, voy a seleccionar botón undertyle, color normal Vamos a darle. Déjame tirar de este verde. Quiero que tenga este tono de verde en algún lugar de ahí. Y quiero que este texto tenga este fondo azul oscuro. Volviendo aquí y fondo, Copia este azul. Cierra eso, selecciona el botón, ve al color del texto en normal. Necesitas tener ese color oscuro, yo solo controlo Vd, y al pasar el cursor, puede ser blanco, así como así Publica, y revisemos los cambios. Da click en esta I. Así es como se ve actualmente. Como pueden ver esto parece estar más elevado que esto. Parece estar desalineado, volviendo aquí. En primer lugar, quiero hacer esto más pequeño, selecciona este botón aquí mismo. Ir a avanzado. Déjame romper el acolchado. Margen. Permítame también seleccionar el contenedor que lo sostiene. Cada contenedor viene con márgenes predeterminados y relleno. Al seleccionar este contenedor, va a avanzar, quitando eso, como se puede ver, este se ha movido a las esquinas del contenedor. Yo haré lo mismo por este contenedor. Avanzado. Rompe eso. Seleccione este contenedor tan avanzado. Rompe eso. Publicar, revisar los cambios. Todo bien. Así que ahora por lo menos estamos llegando a algún lado con ello. Parecen estar debidamente alineados. Y ahora, lo que queda es este menú. Y vamos a agregar eso en la siguiente lección y luego equilibrar todo a medida que avanzamos. Pero ahora mismo, creo que este es un buen lugar para terminar esta lección. La siguiente lección, sigamos adelante y agreguemos el menú. Entonces te veré. 11. Agregar un menú de navegación: Entonces ahora que ya agregamos un botón y un logo, es momento de agregar nuestro menú Nav. Entonces volviendo a nuestra área de trabajo, entonces, ¿dónde estamos? Estén confundidos, oh, aquí estamos. Entonces ahora, volviendo aquí, L et me arrastra esto. Quizá hasta ese punto, publiquemos y veamos qué tenemos. Todo bien. Eso es simplemente empujar todo a los lados. Entonces ahora, al hacer clic en este signo más aquí se revelarán los elementos, y puedo escribir NV. Notarás que tenemos elementos del menú Kit NV, y tenemos otro menú NV. Y esto es de elemento Pro. Por eso tiene este candado y no podemos usarlo. Así que arrastrando elementos kit NV menú. Y dejándolo caer ahí, se convierte en el elemento activo aquí. Y como es el elemento activo, podemos seleccionar un menú para mostrar aquí. Si cambio aquí, este es un menú, y está compuesto por cuatro elementos del menú. Y estos cuatro elementos del menú son páginas. Son páginas web. Pueden ser otro tipo de contenido, pero también pueden ser páginas web. Volviendo aquí, Este menú desplegable debería mostrar una lista de todos los menús que hemos creado, pero aún no hemos creado ningún menú. Tenemos que ir a la guerra presione back end y crear un menú que contendrá elementos del menú, y luego vendremos y lo encontraremos listado aquí. Déjame publicar esto. vuelve a salir a War Press, y aquí estamos. Quiero ir a apariencia, menú. Y aquí estamos, crea tu primer menú a continuación, para que podamos darle un nombre al menú. Vamos a darle, vamos con mi menú. Observe aquí, tenemos agregar elementos del menú. Estos son los elementos del menú. Y así los elementos del menú pueden ser páginas web, pueden ser entradas de blog o artículos. Pueden ser enlaces personalizados que hayas creado. Pueden ser categorías, y en otros casos, pueden ser otros tipos diferentes de contenido, dependiendo del tema que estés usando. Pero ahora porque le hemos dado un nombre a nuestro menú, y queremos que sea el menú principal, si decimos crear menú. Ahora, esta área se vuelve activa. Estaba descolorido, pero ahora está activo. Y recuerden, tenemos algunas páginas que fueron generadas automáticamente por W press cuando instalamos W press. Uno de ellos fue página de muestra. Si digo VO, tenemos página de inicio y muestra. Entonces ahora eso significa que necesitamos crear algunos elementos del menú, y quiero agregar esta casa quiero decir, Sí, agreguemos estos dos como ejemplo. Agregar al menú. Y aquí estamos. Es el menú principal, guardar menú. Ahí vamos. Ahora bien, si voy al kit de elementos, encabezado y pie de página y derecho de fuga abierta enlazando nueva pestaña, así podemos dejar esto intacto. Aquí está la nueva pestaña. Aquí digamos, dit con Elementor. Aquí estamos. Recuerda, tenemos este menú Nav element elements kit Nav. Ahora, si vamos aquí para seleccionar menú, tenemos el menú del menú M que creamos, y tiene estos dos elementos, Inicio y página de muestra. Publiquemos eso. Si bien todavía está seleccionado, vamos a darle estilo básicamente, para que podamos ver que los elementos estilo colapsan el envoltorio de menú, el estilo de elemento de menú. Pasemos a ninguna tipografía, color del texto del artículo. Ahora mismo es negro, queremos que sea blanco. O hover, queremos que sea este verde. Déjame seleccionar este estilo de botón. Ve aquí. Control C para copiar este color. Seleccione esto, esto cambia al menú del kit de elementos. Al seleccionar el botón, éste cambia a botón, cuando se selecciona esta sección, cambia a contenedor, cambia a imagen. Entonces tu elemento activo. Así que con este estilo seleccionado, estilo de elemento de menú. Al hover, queremos que sea ese color verde que acabamos de copiar Entonces, al pasar el mouse, ahora es verde. Y cuando esté activo, también queremos que tenga el color verde. Así que publique Revisemos los cambios. Ahí vamos. Ahora, tenemos que empujarlos hacia el lado derecho. Vaya aquí, seleccione este contenido del menú de nervios, posición del menú horizontal. Lo queremos a la derecha. Así como así. Antes de ir demasiado lejos, publicar vista previa. Ahora, ahí vamos. Pero ahora notarás que siguen desalineados Tenemos que hacer algo al respecto. Volviendo aquí, mientras el menú aún está seleccionado, vaya a avanzado. Rompamos eso y el margen. Para el margen inferior, vamos a reducirlo hasta digamos 40. El top también, negativo 40. Todo bien. Ahora vamos a seleccionar el contenedor que está sosteniendo el menú. Se selecciona. Ahora te darás cuenta aquí, tenemos el layout, tenemos contenido justificado, y podemos justificarlo en el centro verticalmente. Podemos justificar al inicio, eso está en la parte superior, como se puede ver por esa línea más larga en la parte superior, o en la parte inferior, o estas otras. Pero el que nos interesa es éste. Clic que lo alinea verticalmente en el centro. Seleccionemos esto también. Este contenedor. Hagamos lo mismo aquí. Y éste también. Publica, y revisemos los cambios. Entonces ahora, todo parece estar alineado correctamente. Pero te darás cuenta aquí, es amplio. Está casi llegando al borde, y veremos cómo hacerlo porque nuestro está demasiado cerca por dentro. Pero por ahora, vamos a dejarlo ahí. La redimensionaremos cuando empecemos a construir la sección de héroes Entonces por ahora, Lo que quiero que hagamos es cambiar estos elementos del menú. Volver al menú. De hecho, volvamos a las páginas, y estas son las dos páginas que tenemos. Rliik, add new open Link in new tab, Rliik, Open Link Y ahora tenemos estas dos páginas. Quiero nombrar esto sobre. Haga clic en publicar muy rápidamente. Guten Kit Biblioteca de plantillas. No sé qué es esto, pero no creo que sea un problema. Cierra eso. Voy a llamar a este contacto Publicar, publicar. Todo bien. Refresca esta página, y ahora tenemos estos. Quiero seleccionar estos dos y mover a la basura aplicar. Vayamos a los menús de apariencia. Ahora notarás que la página de muestra no es válida porque la acabamos de eliminar. Así que quita eso. Esta página de inicio es un enlace personalizado. Yo sólo voy a quitarlo. No es una página. Es un enlace personalizado. Vayamos aquí a las páginas y digamos vista sobre contacto. Agregar al menú. Guardar menú. De hecho, ahora voy a agregar una página. Voy a decir agregar Déjame llamar a esa página de inicio, empujar, publicar. Volviendo aquí y refrescante. También tenemos homepage, agregar al menú. Déjame arrastrarlo hasta ahí, guardar menú. Ahora tenemos esos tres elementos del menú. Vuelve aquí y refrescante. Ahora tenemos esas tres páginas. Solo quería mostrarte cómo puedes cambiar los elementos del menú si quieres. Vista previa de eso. Ahí vamos. Entonces creo que ya es suficiente por ahora. En la siguiente lección, veamos cómo crear esta sección de héroes. Entonces te veré en breve. 12. Establece un favicon: Entonces ahora que hemos creado nuestro encabezado, es el momento de crear la sección de héroes, y esta es la sección de héroes, lo que puedes ver cuando aterrizas en la página, esta sección superior. Pero ahora, antes de ir demasiado lejos, quiero que veamos algo. Por ejemplo, si miras el chip de nombre o los espectaculares, notarás que tienen un pequeño icono aquí mismo en la parte superior que rápidamente te dice qué sitio web es ese si tienes demasiadas pestañas abiertas Entonces eso se llama favicon. Algunas personas lo pronuncian como ícono de fav, realmente no importa Depende de cómo te guste pronunciarlo. Pero ahora lo más importante es cómo lo agregamos. Y para agregarlo, todo lo que tenemos que hacer es ir a personalizar mientras seguimos editando cualquier parte del sitio web, personalizar. Aquí estamos, y vamos a ir a la identidad del sitio, icono del sitio, cargar. De hecho, no tengo favicon, por cierto. Sólo voy a usar estos dos. Yo no tengo uno. Seleccione eso. Déjame elegir esa imagen de recorte. Ahora como puedes ver aquí arriba, tenemos ese pequeño icono. Publiquemos eso. Ahora bien, esta es una de las pestañas que hemos abierto para la página. Si refresco esto, También tiene eso si refresco esto también. Entonces, cuando estamos dentro del editor Elementor, no podemos ver el favicon, o cuando estamos dentro del tablero, creo Si actualizo esto, dentro del tablero, podemos ver eso. Pero cuando estamos editando la página en Elementor, podemos ver el favicon Entonces sí, básicamente, así es como agregar el favicon. En la siguiente lección, veamos ahora cómo crear este bloque. Te veré en breve. 13. Texto de héroe: Ahora es el momento de trabajar en la sección de héroes. Empecemos con este texto de encabezado aquí mismo. Quiero cambiar a este espacio. Cierra eso. De hecho, déjame cerrar todo lo demás que no necesito. Creo que voy a cerrar ese cierre todos estos. Ahora nos quedamos con que todavía estamos dentro del encabezado, donde estábamos editando estos. Pero creo que por ahora podemos dejar este espacio, así que voy a hacer clic en ese icono Salir a Wordpress. Ahora solo tenemos el tablero. Volviendo a las páginas. Ahora bien, estas son las tres páginas que tenemos actualmente. Podemos tener tantos como queramos, pero estos son los tres que tenemos ahora mismo. Y esta va a ser nuestra página de inicio. Esta es la página que debería aparecer cuando alguien escribe nuestro dominio.com Por ejemplo, tu dominio WW domain.com. Entonces yo copio esto, abro una nueva pestaña y la entro aquí, debería llevarnos a la página principal. Pero tenemos un problema. Nos lleva al post hello world en lugar de llevarnos a la página principal. Entonces, ¿cómo solucionamos eso? Volviendo aquí, vamos a ajustes, leyendo, Ahora tu página de inicio muestra una página estática, no nuestras últimas publicaciones. No queremos las últimas publicaciones. Queremos una página estática, y la página debe ser la página de inicio. Estas son las tres páginas que tenemos actualmente. Vamos a establecer la página de inicio como página de inicio. Guardar cambios. Ahí vamos. Ahora volviendo aquí y refrescando esta página nos lleva a la página principal. Ahora volvamos a entrar aquí. Esta es la página de inicio. Si digo editar. Como puedes ver, estas son páginas que creamos rápidamente para agregar como elementos del menú. Pero no hicimos las configuraciones básicas necesarias para construir la página en el front end con elementor Entonces eso es lo que estamos haciendo ahora mismo. Entonces dentro de la página de inicio, vaya a plantilla, cambie esta plantilla predeterminada a ancho completo porque queremos que el contenido ocupe todo el ancho. Vuelve aquí. Así Elementor plantilla de ancho completo Estas son las palabras prensa y elementor ajustes. Entonces recuerda que también tenemos a Astra. Ese es el tema que estamos usando. También necesitamos establecer algunas configuraciones aquí y allá. Entonces, bajo la configuración de Astra, hagamos de esto un ancho completo, y no debemos preocuparnos por esto porque solo se aplicará porque el estilo contenedor solo se aplicará cuando el diseño esté configurado en normal o estrecho. El nuestro está configurado en ancho completo, así que no se preocupe. Contraer contenedor, expandir la barra lateral. Queremos decir que no hay barra lateral. No necesitamos ninguna barra lateral. El mismo caso se aplica a estos ajustes aquí. No los cambies. Colapsar eso. Entonces necesitamos inhabilitar estas áreas. Actualmente, cuando abrimos esto, como pueden ver, tenemos un pie de página predeterminado aquí de Astra. Podemos decir desactivar el pie de página. Y guarda eso. Vuelve aquí y refréscate. Ahora esa astrofoto predeterminada se ha ido porque vamos a construir la nuestra propia con elementor También debemos inhabilitar a estos otros dos. Guarde eso. Refresca esta página. Ahí vamos. Esos son los ajustes básicos o configuraciones que necesitas configurar cuando te estás preparando para construir una página con elementor Ahora que lo tenemos listo, podemos ir a editar con Elementor, que podamos construirlo en el front end Aquí estamos. Ahora bien, el encabezado no es editable aquí porque aquí no es donde lo creamos. Recuerda. Entonces, para empezar, agreguemos mirada a la anatomía de esta sección de héroes. Tiene este lado y este lado que tiene la imagen. Entonces es caja flex con doble columna así. Aquí, podemos dar click en este plus y agregar un encabezado, que es lo que esencialmente serán los textos de este encabezado. Copia eso. Si bien todavía está seleccionada, entraré aquí y la pegaré. Hagamos clic en este signo más para agregar un editor de párrafo o texto. Déjalo ahí mismo. Ahora quiero cambiarlo a blanco. Tipo seleccionado texto blanco, esto también mientras está seleccionado ajustes, blanco. Si bien esto todavía está seleccionado, quiero volver al contenido y cambiarlo a uno H. Ahora con esta seleccionada, iré a tipografía de estilo, y quiero cambiar el peso a negro para que quede súper gruesa, y quiero aumentar el tamaño Tal vez hasta ese punto y reducir la altura de línea, tal vez hasta ese punto, publique. L et's vista previa de eso. Ahí vamos. Obviamente, tenemos que empujarla hacia abajo. Entonces como puedes ver, no puedo seleccionar esta parte superior de la sección porque ahí está el encabezado. Voy a golpear control I para sacar a colación la estructura o cocodrilo, y debería mostrarnos todo lo que tenemos. Aquí está el contenedor. Estoy tratando de seleccionar. Y tiene en su interior dos contenedores, el que tiene el texto y el que contendrá la imagen. Seleccionando esto, esto cambia para editar contenedor, voy a ir al relleno avanzado, quitar cualquier relleno que haya ahí, y luego top padding, podemos darle tal vez 50 o bottom padding 50. A lo mejor digamos 90 y top 90. Publica eso. L et's lo previsualizar. Ahí vamos. Entonces creo que vamos a agregar los botones y luego estilizarlos en la lección que viene. Entonces ahora mismo, sigamos adelante y agreguemos los botones. S elige eso. El botón debe estar bajo básico. Déjalo ahí mismo. De hecho, sabes qué, Vamos a trabajar en los botones en la siguiente lección. Así que paremos ahí mismo. Te veré en breve. 14. Buttons de héroe: Aquí es donde lo dejamos, y ni siquiera había hecho clic para publicar Déjame publicar eso. Eso es. Ahora, tenemos este botón aquí mismo. En primer lugar, ¿qué debería decir? Descarga para IOS. Seleccionando esto en el contenido, descargar en OS. Y tenemos otro aquí es descargar en Android. Así que voy a flotar sobre esto. 08. En esta versión en línea, no había habilitado las preferencias del usuario opciones rápidas. Todo bien. Ahora déjame duplicar ese botón. Descargar en Android. Déjame decir Android. Publicar. Si cambiamos a la página, notaremos ahora que los botones están apilados uno encima del otro, y eso no es lo que queremos. Lo que queremos es uno al lado del otro, lo que nos lleva a un tema muy importante que quería que tuviéramos en cuenta los contenedores. Ahora, todo lo que creamos aquí se colocará dentro de un contenedor. Y los contenedores tienen propiedades con las que podemos jugar. Por ejemplo, si selecciono este contenedor más exterior aquí, si vamos a la sección de diseño y al contenedor, encontraremos algo llamado la dirección. Y recuerda, utilizamos contenido justificado para alinear diferentes elementos dentro del contenedor. Además del contenido justificado, también tenemos dirección, y esto determina en qué direcciones están los elementos dispuestos dentro del contenedor. Podemos tener de arriba a abajo, podemos tener de abajo a arriba, izquierda a derecha y de derecha a izquierda. Entonces, yendo a este contenedor de aquí mismo, como pueden ver, es un solo contenedor que contiene este texto de encabezado, este texto, y estos dos botones. Si seleccionamos el contenedor y cambiamos la dirección a invertida, Todo comenzará de abajo hacia arriba. Lo contrario es la columna. De la misma manera, si decimos queremos que todo vaya de izquierda a derecha, será el encabezado, el texto, y luego los botones, y lo contrario son los botones, el texto, y eso. Ahora, volviendo aquí de arriba a abajo, eso significa que si queremos que estos botones estén uno al lado del otro, también necesitamos ponerlos dentro un contenedor y colocarlos de izquierda a derecha. Entonces agreguemos un contenedor justo debajo de este texto. Ahora arrastra y suelta el botón ahí mismo, arrastra este otro botón y suéltelo justo debajo de este otro dentro de ese contenedor. Ahora ambos están dentro de este contenedor. Y como ahora está seleccionado, podemos decir, vamos a organizarlos horizontalmente de izquierda a derecha. Podemos revertirlos así. Pero mantengámoslos así. Publicar. Revisemos los cambios, y ahí vamos. Ahora, te darás cuenta, este botón parece estar ligeramente sangrentado en comparación con este bloque de texto Así que recuerda, mencioné que cada contenedor viene con algún relleno y márgenes predeterminados. Entonces si selecciono este contenedor y voy a avanzado, puedo quitar el relleno predeterminado, y eso empujará todo para tocar las esquinas y bordes del contenedor. Si lo publico y cambio aquí, esto será empujado al borde de ese contenedor. Ahora, otra cosa que quiero que miremos es si selecciono el botón IOS, podemos ir al estilo. Cambiemos el radio del borde a 20 es demasiado. ¿Y qué pasa con diez? Creo que diez está bien. Seleccione este estilo de radio de borde diez. Ahora, podemos aumentar el relleno porque notarás que mis botones son más grandes. Entonces con este seleccionado, voy a ir al relleno y romper eso, eso va a quitar todo. A la izquierda, podemos darle tal vez 50 a la derecha, 50, en la parte superior 20 e inferior 20. Como puedes ver es un botón más grande. De hecho, vamos a darle 4040. Déjame seleccionar esta copia de clic derecho, seleccionar esta, clic derecho pegar el estilo. Ahora es heredado todos los estilos que aplicamos a esto. Cambiemos el color. Esto es verde. Necesito usar este verde, pero no tengo acceso a él porque no puedo editar esto. Déjame ver si puedo usar mi seleccionador de color. Déjame escoger eso. Mientras se selecciona esto, iré aquí. No. ¿Dónde está ese color? Color copiado. Ahí vamos. Ahora es ese mismo verde. Para el color del texto, quiero que tenga este fondo. También debo seleccionar color pi. Código de color escogido. Seleccione esto. Oh, espera, volvamos aquí. Queremos que el color del texto sea eso. Al flotar, queremos que sea blanco. Así como así. Ahora, seleccionando esto, podemos cambiar el color de fondo a blanco y el color del texto a este color oscuro que acabamos de elegir de aquí. Vamos a previsualizar los cambios, y ahora nuestros botones se ven increíbles. En la siguiente lección, veremos cómo agregar esta imagen de héroe. Pero antes de hacer eso, fíjate aquí que tenemos este texto, y es verde. Así que de vuelta aquí, lo que podemos hacer es con este seleccionado, podemos ir al contenido y envolver esta gestión con una etiqueta span. Entonces solo diré soporte abierto, span, soporte cerrado, soporte abierto, span slash, soporte cerrado Ahora, con este span envolviendo la palabra administrar, queremos decirle a elementor, queremos aplicar estos estilos a este texto específico que hemos resaltado con las etiquetas span Así que el estilo equivale a las citas de apertura y cierre. Entonces digamos que el atributo que queremos editar es color, y queremos que el color sea este verde. Entonces creo que solo me había dejado seleccionar esto. Control C para copiar esto. Regresa a seleccionar esto, y volviendo adentro aquí, Span style color, queremos que el color sea esta columna, y luego cerrar con una semi columna. Así como así. Ahora bien, si queremos que la tienda de ojos también sea verde, todo lo que tenemos que hacer es tomar otra etiqueta span. Copiaré toda la etiqueta de apertura justo antes de administrar, copiar eso, ir a la tienda de ojos, justo antes de que yo, la pegaré ahí. Y ciérrala. Soporte abierto, barra diagonal, lapso, soporte cerrado. Publicar vista previa. Ahí vamos. Ahora, básicamente, esto es una personalización avanzada, y solo quiero mostrarte que puedes aplicar estilo CSS y HTML a tus elementos Elementa No tienes que estar constreñido solo a lo que Elementor te da Entonces ahí vamos. Creo que ya estamos listos para agregar la imagen de héroe, y lo haremos en la siguiente lección. Nos vemos en breve. 15. Imagen de héroe: Entonces ahora es el momento de agregar nuestra imagen de héroe y por supuesto, ajustar el ancho de nuestra página web. Así que volviendo aquí a nuestro editor, voy a hacer clic en Más, y agregaré un elemento de imagen. Ahí vamos. Y aquí dentro, voy a hacer clic en eso y añadir, creo que esto es todo. Agrega eso y publica, revisa los cambios, y ahí vamos. Ahora, claro, recuerda, necesitamos ajustar el ancho. Vuelve aquí, lo que quiero hacer es seleccionar el contenedor que está conteniendo todos estos otros. Como pueden ver, es lo que se destaca aquí. Cuando selecciono algo en la estructura, también se selecciona en la página. Seleccionando el contenedor aquí. Quiero darle un ancho del 100%. Cambia los píxeles a porcentaje y dale el 100%. Así como así, publica y previsualice los cambios. Ahora, hay un problema. Hemos empujado todo hasta el borde y no queremos eso. Entonces, ¿cómo solucionamos eso? Muy sencillo, contenedores. Así que volviendo aquí, además, agreguemos un contenedor. Ahora, antes de agregarlo, recuerden, este es un contenedor que tiene dos contenedores. Este contenedor contiene uno y dos. Ahora, lo que queremos es tener solo un contenedor dentro de este contenedor. Recuerda que hemos hecho este contenedor al 100%. Entonces queremos otro contenedor dentro de él, ocupando el 80% de este 100%, y luego poner todo dentro de él. Entonces podemos duplicar esto. Y ahora tenemos tres contenedores. Podemos eliminar todo el contenido del primer contenedor, eliminar eso y aquello. Y también este contenedor. Ahora es un contenedor en blanco. Podemos dejarlo ahí y también eso justo debajo de ahí. Ahí vamos. Ahora tenemos estos dos contenedores dentro del otro contenedor que acabamos de duplicar. Ahora, seleccionando el contenedor exterior, podemos antes que nada cambiar la dirección de izquierda a derecha. Ahora todo está lado a lado. Pero recuerda, queremos que ocupe 80% del espacio disponible, el 80%. Pero ahora está alineado a la izquierda. Lo que tenemos que hacer es seleccionar el contenedor que lo sostiene que está sosteniendo esto, que es este. Ve aquí para justificar el contenido y ponerlo en el centro, así como así. Publicar, previsualizar los cambios. Ahí vamos. Entonces ahora vamos a hacer exactamente lo mismo para el menú o para el encabezado. Ahora, una vez que hayas editado cualquier página o parte de tu página web con Elementor, siempre podrás acceder al editor desde aquí arriba Entonces como ya hicimos el encabezado con Elementor, podemos editarlo desde aquí Podemos acceder a su editor desde aquí. Entonces voy a hacer clic en Encabezado. Aquí vamos. Ahora voy a seleccionar el contenedor que está guardando todo. Y recuerda, estos son tres contenedores dentro de este contenedor exterior. Entonces cambiemos este contenedor a porcentaje, y hagamos que ocupe 100% de cualquier pantalla en la que lo estés viendo. Entonces ahora es al 100%. Pero ahora todo se empuja a los lados, publicar, previsualizar. Pero lo que queremos es un contenedor dentro este contenedor que esté ocupando el 80%. Seleccionando esto. En primer lugar, vamos a golpear control I para abrir la estructura, expandiendo eso, como pueden ver, uno, dos, tres. Lo que podemos hacer es duplicar tal vez este primero, duplicar eso. Ahora vamos a eliminar el contenido de ese contenedor. Y ahora pongamos estas otras cosas dentro de ese contenedor. Justo abajo, puede ser complicado, pero sigamos. Tres. Ahora estos son tres contenedores dentro ese único contenedor que está dentro del contenedor 100% ancho. Queremos que este contenedor ocupe el 80%. Pero ahora también queremos que los contenedores dentro de él estén dispuestos de izquierda a derecha así. Y al mismo tiempo, queremos seleccionar el contenedor exterior y empujar este contenedor interior hacia el centro. Parece que puse el botón dentro del contenedor del menú. Debería estar afuera. Déjame ponerlo ahí mismo. Puede ser complicado colocarlo, pero solo sigue intentándolo hasta que lo consigas. Publica y vamos a previsualizar los cambios. Ahora está casi tocando los bordes. Ahora si vamos a la página principal, entra, Ahí vamos. A mí me gusta, pero esto parece ser empujado hacia adentro. No sé qué está pasando allá. Todo bien. Si bien se selecciona esto, lugar de poner todo en el centro, digamos espacio entre ellos, para que podamos colocar espacios entre los elementos, pero empujarlos hasta el borde. Seleccionaré espacio entre y publicaré. Ahora, echemos un vistazo a eso. Si voy a la página de inicio, hecho, volvamos a entrar aquí, seleccionar la imagen, darle un enlace URL personalizado, y vamos a darle su dominio.com Entonces Copia eso, coloca eso ahí, publica vista previa. Ahora si hacemos clic en el icono, es el logo, nos llevará a la página de inicio. Ahora, todo está correctamente alineado, y ahora ocupa un espacio más amplio. Creo que este es un buen lugar para terminar esta lección. En la siguiente lección, comencemos con el resto de la página. Te veré en unos pocos. 16. Agregar una sección de cuerpo: Ahora es el momento de comenzar a trabajar en esta sección del cuerpo. Y volviendo a nuestro editor aquí mismo, acabo de notar una cosa que nos olvidamos de hacer. Te darás cuenta en nuestro sitio web de referencia aquí, todo parece estar alineado verticalmente en relación entre sí. Entonces, por ejemplo, este bloque de texto está alineado verticalmente en relación con esto. Entonces déjame mostrarte a lo que me refiero. Volviendo aquí, seleccionando este contenedor que contiene el texto. Puedo ir aquí para justificar el contenido y alinearlo verticalmente al centro. Volviendo aquí a este contenedor. Yo puedo hacer lo mismo, pero eso no se moverá porque la imagen está ocupando todo el espacio. Pero si digo eso y previsualizo los cambios, ahora notarán que esto ha sido empujado hacia abajo. Oiginalmente, estaba aquí arriba y había mucho espacio Vamos a deshacer eso muy rápido. Estaba ahí arriba. Publicó eso. Revisemos los cambios. Ahí es donde estaba. Pero ahora lo que hemos hecho es empujarlo hacia el centro verticalmente, solo para alinear esto proporcionalmente a esto Ahora, con eso hecho, lo que queremos hacer es agregar una nueva sección, así que seguimos en la página principal. Y solo voy a decir plus flex box, y voy a tomar esta sección de doble columna una vez más. Y antes de ir demasiado lejos, antes que nada, quiero seleccionar mientras esto todavía está seleccionado, ir a avanzado, margen superior, quiero darle 100, que podamos espaciarlo de la sección de héroe. Ahora aquí dentro, podemos seleccionar una imagen, dejarla caer ahí. Ve aquí. Creo que esto es todo. Sí, ya está. Este es nuestro favicon, y esta es la imagen que queremos usar. Ahí vamos. En el momento en que dejamos caer la primera imagen aquí. Elementor hace algunos anuncios rápidos aquí, optimice su imagen para mejorar rendimiento del sitio mediante el uso del optimizador de imágenes Yo sólo voy a seguir adelante y cerrar eso. Ahora mientras esto todavía está seleccionado, queremos ir a echemos un vistazo a lo que tenemos aquí. Todo bien. Sólo tenemos que tomar este texto. Lo que tenemos que hacer es duplicar así este rubro. Después arrástralo y suéltalo aquí mismo. También duplicaré estos textos. Arrastrarlo y soltarlo ahí mismo, y voy a duplicar ¿ cuántos botones tenemos aquí? Sólo una. Duplicaré eso y lo arrastraré y soltaré ahí mismo. Ahora, con este seleccionado, quiero venir aquí y quitarle este estilismo, ya que no voy a ser ¿ tenemos algún estilo aquí? Oh, sí. Descarga la app descarga la app de tu tienda. Así que entre el lapso, en lugar de tienda tienda. Y recuerden, esto debería ser H dos. Todo bien. Entonces ahora, bajando aquí, quiero seleccionar este contenedor, ir al layout, y quiero darle un hueco de 40 para que haya un hueco entre la imagen y el bloque de texto. Y también quiero agregar una lista de iconos. Entonces volviendo aquí, como pueden ver, tenemos esta lista justo aquí, y eso es lo que queremos agregar. Así que más tipo icono y es la lista de iconos. Déjame deshacerme de eso una vez más. Te darás cuenta aquí, tenemos esta enorme brecha entre la lista de iconos y el párrafo, y eso es por este margen predeterminado. Entonces con el texto seleccionado margen avanzado abajo, así como así. Ahora, vamos a seleccionar esta lista de iconos margen avanzado abajo. Podemos aumentarlo a tal vez 20. Todo bien. Con esto todavía seleccionado, ir al estilo, ir al texto. El color del texto debe ser blanco y sobre el cursor. Queremos que sea así de verde. Permítanme seleccionar este texto y elegir este código de color, incluida la copia hash. Seleccione los textos aquí. Texto O hover, queremos que sea verde. Así como así. Ahora vamos a trabajar en el icono. El icono debe ser verde en circunstancias normales. Entonces al flotar, tiene que ser blanco. Así como así. Volver al contenido. Ahora, expandiendo el primero, podemos qué tenemos aquí. Potente busca todas las características. Potentes resultados filtrables de búsqueda. De resultados filtrables, informes de descarga, agregar artículo regular, clientes habituales y finalmente, seguros y protegidos También puedes duplicar este inst de agregar artículo. Duplicar seg. seguro. Digamos seguro y protegido, pueden ser dos palabras. También podemos ir dentro mientras dentro de estilo, podemos ir al menor espacio entre para aumentar el espaciado, como ese contenido. Podemos volver a funciones potentes y cambiar el ícono a lo que queramos. A lo mejor digamos este inserto, Ws esa garrapata. Todo bien. Cheque. Creo que esto es inserte. Comprobar y por último, comprobar. Publica, vamos a previsualizar los cambios. Desplazamiento hacia abajo. Ahí vamos. Pero ahora mientras estamos en la página principal, esto necesita ser empujado hacia abajo porque podemos ver esto. Así que volviendo aquí, podemos llevarnos esto avanzado. El margen superior puede ser de 150. Publica, Vamos a previsualizar los cambios, y ahí vamos. Básicamente, así es como crear esa sección. Pero antes de llegar lejos, también tenemos este fondo de partículas animadas, y creo que esto es algo que podemos hacer a partir de la siguiente lección. Te veré en breve. 17. Partículas animadas: Así que casi terminamos con esta sección, pero necesitamos agregar este sistema de partículas animadas. Así que volvamos a nuestro editor. ¿Dónde está? Aquí estamos. Y necesitamos instalar otro elementor relacionado o basado en elementor plug in el nombre Royal Add ons para Así que volviendo aquí, enchufa, agrega nuevo. Ahora sigamos adelante y digamos los complementos elementales reales. Creo que es Royal elementor addons por WP Royal instalar ahora Y hay diferentes addons elementales que también tienen ese sistema de partículas. Esta no es la única. Entonces activemos eso. adelante y saltemos Así que aquí están algunas de las plantillas y características que vienen con ese complemento. Pero lo que estamos buscando ahora es volver a casa y refrescar esta página. Este editor. Desplazamiento hacia abajo. Sigamos adelante y seleccionemos esta sección. Ahora, antes que nada, agreguemos un poco de relleno en la parte superior e inferior para separar el contenido en el contenedor del borde del contenedor. Con el contenedor seleccionado en la parte superior de relleno avanzado, digamos AD, eso es inferior y superior AD está bien. Si bien todavía está seleccionado, iré al estilo. Y ahora que tenemos complementos de elementos reales, Undertyle, tenemos acceso a partículas Podemos agregar partículas a cualquier contenedor. Por ejemplo, ahora que esto está seleccionado, podemos agregar esto. Entonces voy a decir habilitar partículas de fondo. Y como puedes ver, ya, están apareciendo, pero necesitamos editar el color porque en este momento son negros, como puedes ver. Entonces, antes que nada, permítanme decir que publique. Después para editar las diferentes propiedades de las partículas, podemos dar click aquí. Aquí vamos. Esto es lo que tenemos actualmente. Quiero ir a las partículas mismas, color. Ahora mismo, estos son blancos en la configuración. De hecho, permítanme decir descargar configuración actual en formato JSON. Esta configuración actual, así podemos echarle un vistazo. Ábrela. Ahora, se abre en otra página, así que sólo voy a ponerla aquí y voy a seleccionar todo. Control A, copia. Cierra eso. Volver a la página de inicio. Seleccione este Control A, elimine Control V para pegar lo que acaba de descargar. Ahora notarán que es blanco igual que aquí, que significa que ahora podemos volver a entrar aquí y cambiar algunos artículos, por ejemplo, yo quería que este color fuera un poco oscuro, así que voy a ir al azul. Ese es el color de las partículas, y quiero que sea quiero algo que sea visible en este fondo. Sobre este fondo oscuro. Entonces creo que ese color está bien. Control C. Quiero ir a las líneas. Dónde está enlazada la línea. Entrar. Todo bien. Ahora ese es el color que tengo ahora mismo. Si digo descargar la configuración actual y abrirla, se abrirán en la pestaña de notas bloc de notas, Control A, copia de, ir a editar home, seleccionando aquí, Control A, control V para pegar lo que tengo ahora. Creo que ese es un mejor color. Pero en nuestro sitio web de referencia, esto es en realidad incluso un fondo más claro. Si bien este contenedor aún está seleccionado, vaya al estilo fondo tipo color de fondo, vaya al azul. Quiero hacerlo un poco digamos ese color. Simplemente puedes escribir este código exacto si te gusta cómo se ve el mío. Publica, y revisemos los cambios. Desplazamiento hacia abajo. Ahí vamos. Ahora bien, si piensas que son demasiado oscuros, son demasiado pronunciados, siempre puedes volver aquí y jugar con la opacidad Juega con todos estos ajustes para ver qué vas a poder obtener. Así que publica y vamos a previsualizar lo que tenemos. Creo que esto ya está buscando profesional. Ahora, creo que aquí es donde vamos a terminar esta lección, pero en la siguiente lección, veamos cómo agregar este enlace ancla ancla. Entonces, si hago clic en esto, traerá nuestro enfoque a esta sección. Déjame mostrarte cómo hacerlo en la siguiente lección. No vayas a ningún lado. 18. Elemento de anclaje: Nuestra landing page ahora está tomando forma, Ahora es el momento de agregar este elemento ancla. Vayamos a nuestro editor. Creo que esto es todo. Aquí estamos. Volviendo aquí. Déjame cerrar esto. ¿Qué es esto? Cerremos todas estas otras pestañas. Y entra aquí. Entonces quiero hacer clic en este signo más aquí para agregar cualquier elemento o sección que queramos aquí arriba, más flex, y voy a agregar este contenedor de una sola columna. Y aquí dentro, voy a añadir un icono. Así que simplemente arrastraré y soltaré un icono aquí. Puedo cambiar el icono para que tal vez apunte hacia abajo y apunte hacia abajo. Digamos éste. Porque quiero mostrarle a la gente click para bajar o algo por el estilo. También quiero seleccionar este control de copia de estilo verde C, porque estamos tratando de mantener esa identidad de marca, color de marca, 08. Con este seleccionado, vamos a ir al estilo, verde normal en hover, necesita ser de color blanco, así como así Ahora, cuando hacemos clic en él, volvamos al contenido. Pero antes de ir al contenido, ¿deberíamos empujarla hacia abajo un poco? Ya veremos. Publicar, previsualizar los cambios. Creo que está en una buena posición. Está bien equilibrado en el espacio. Ahora, volviendo aquí, mientras esto todavía está seleccionado, vuelve al enlace de contenido. Todo bien. Haga clic en el signo más aquí y tecleando ancla. Dejaremos ese ancla en cualquier lugar que queramos que nos lleven cuando hagamos clic en el enlace. Entonces, por ejemplo, vamos a colocarlo en algún lugar de aquí. ¿Por qué no puedo colocarlo en alguna parte? Déjeme colocarlo aquí, por ejemplo. ¿Por qué no puedo colocarlo aquí? Oh, creo que sé por qué. Estas partículas están por encima de nuestro contenido y alguna manera están afectando nuestra capacidad dejar caer el ancla ahí. Pero de todos modos, si duplico eso y vuelvo aquí y digo ancla y trato de dejarlo caer aquí. Sí. Por alguna razón, cualquiera que sea la sección que tenga estas partículas, déjame apagar las partículas de aquí estilo. Las partículas deshabilitan eso. Ahora regresando aquí, ancla. Sí. Esas partículas nos impiden arrastrar y soltar el elemento de anclaje del punto de anclaje dentro de la sección, pero está bien. Ahora bien, si dejo caer esto aquí y agrego una identificación. Por ejemplo, ve aquí, déjeme decir que vaya aquí. Esa es la identificación de este elemento ancla. Y ahora, cuando vamos a un enlace, por ejemplo, a este enlace, podemos decirle a elementor, llevarnos directamente al lugar donde hay un elemento ancla que tenga este ID Porque esto tiene una D de ir aquí, déjeme copiar que vaya aquí. Si volvemos a este enlace, podemos pegar la URL, luego decir slash hash, luego el ID del punto de anclaje, quieres que este enlace te dirija Publicar. Vamos a previsualizar los cambios aquí. Si hago clic en esto, nos llevará directamente a esta parte. Yo quería mostrarte eso como ejemplo. Ahora, lo que queremos es que nos lleven a éste que está justo debajo de este ejemplo. Déjame cerrar eso. Lo que quiero hacer es seleccionar un punto de anclaje. Y arrástralo y suéltelo justo debajo de sí mismo, vamos aquí. Ahora, recuerda, acabamos de eliminar la otra sección que tenía el otro punto de anclaje, elemento ancla, cada elemento ancla tiene que tener un ID único. Entonces estoy reutilizando ve aquí porque ya no tenemos el otro Pero ahora si hacemos clic en esto recordar, ya se le había dado este sh ve aquí, así que funcionará para este nuevo elemento ancla. Entonces si digo publicar, y previsualizar los cambios. Si hacemos clic en eso, nos llevará a ese elemento ancla que está aquí. Cuando haces clic en un elemento de anclaje, se coloca en la parte superior de la página en la que te encuentras actualmente. Por eso ahora tenemos esto aquí porque el elemento ancla elemento ancla está invisible Entonces, si queremos empujar esto hacia arriba, entonces tenemos que poner el elemento ancla más arriba. Entonces O tenemos que reducir el margen en la parte superior de esta sección. Seleccionemos la sección. Avanzada. Margen superior, digamos 100 publicar. Vamos a previsualizar los cambios. Si hago clic en esto, estamos llegando a alguna parte. ¿Por qué no nos deshacemos de digamos 50 para acercarlo al ancla invisible Todo ahora mismo haciendo clic en eso. Ahora nos está trayendo hasta este punto. Creo que es un buen lugar, pero al menos ahora entiendes cómo funcionan los elementos de anclaje porque podrías tener algo específico en una página específica que construiste con Elementor, y quieres que alguien haga clic en un enlace y sea llevado directamente a esa parte de la página Así es como hacerlo con elementos de anclaje. Entonces creo que vamos a parar aquí. En la siguiente lección. Veamos cómo agregar esta otra sección. Entonces te veré momentáneamente. 19. Otra sección: Estamos abajo con esta sección de patrón de partículas. Ahora es el momento de trabajar en esta función Rich desktop dbo section Volviendo aquí a nuestro editor, todo lo que tengo que hacer es duplicar esto, duplicar ese contenedor. Ahora recuerda, tiene mientras aún está seleccionado avanzado, recuerda que hemos reducido el margen en la parte superior de este. De hecho, quiero reducirlo aún más a tal vez incluso ninguno publicar vista previa. Si hago clic en eso, trae esto en foco. Pero quiero empujar este otro hacia abajo como originalmente concebido, publicado. Y ahora si tengo una vista previa de los cambios, haciendo clic en que una espera. Vamos a darle a esto tal vez 30 publicar actualización. Eso me gusta. En fin, bajando aquí, mientras esto todavía está seleccionado, quiero ir a las partículas de estilo y dis eso. De hecho, también quiero deshacerme del fondo. Yendo a fondo. Seleccione eso y haga clic en este claro. Eso volverá a los ajustes de fondo originales que tenía cuando lo agregamos Y cuando se agrega un contenedor, no tiene fondo. Entonces lo volvemos a revertir. Ahora, quiero arrastrar este contenedor y ponerlo a la izquierda. Ahora es un poco complicado. Entonces déjame ver si puedo arrastrar esto tienes que intentar forzarlo. Entonces, volviéndola a poner ahí. Porque mi meta ahí mismo. Así que dejándolo caer ahí. Mi objetivo es revertir el texto y ponerlo de este lado y la imagen de este otro lado. ¿Qué imagen tenemos aquí? Oh, acabo de recordar, esto está en el fondo, no en el lado derecho. Entonces esto tiene que irse, y esto tiene que ocupar, dejémoslo al 50%. Después entrando aquí, quiero seleccionar fondo, y esta vez vamos a agregar imagen. Selecciona esta laptop, y pongámosla en el fondo así. Ahora, digamos que no repita, posición, digamos centro derecho o centro derecho, así. Podemos dejarlo en ese tamaño o podemos decir display size cover, no, Contener creo que contener está bien. Publica, y revisemos los cambios. Desplazamiento hacia abajo. Ahí vamos. Ahora, creo que necesitamos tener algún margen en la parte inferior. Porque recuerden, si miramos la referencia, esta es la referencia. Como puedes ver, tenemos algún margen agradable separándolo del pie de página. Entonces volviendo aquí, mientras esto todavía está seleccionado, pasemos a avanzado, y yo estaba hablando de relleno, no de margen. El margen inferior es de 100. También actualicemos esta característica copia de escritorio que, seleccione esta. Cuenta con tablero de escritorio ch dentro del lapso. Tablero de escritorio. U Publicar. Vista previa de los cambios. Depende de usted actualizar el contenido y usar el suyo propio. Desplazándose hacia abajo, y aquí vamos. Entonces, básicamente, así es como agregar otra sección más a tu landing page. Y es cuestión de repetir lo que has hecho duplicando cosas sin tener que recrear y rediseñar cada elemento. Entonces, creo que ese es un buen lugar para terminar esta lección. En la siguiente lección, pasemos a la foto. Te veré en breve. 20. Logo del pie de página: Así que nuestra landing page está llegando a ser algo de lo que podemos estar orgullosos, pero aún tenemos la foto que crear. Entonces es momento de trabajar en eso. Volviendo a nuestro editor, entonces, ¿dónde está aquí? Por supuesto, recuerda la forma en que creamos nuestro encabezado. Así es como vamos a crear nuestro pie de página. Vuelve aquí. De hecho, ya terminamos con este espacio, solo vamos a decir salida a word press. Podríamos haber ido aquí, pero también terminamos con esa otra parte, así que no la necesitamos. Vamos a salir por completo. Y ahora vamos al kit de elementos, encabezado pie de página, y agreguemos nuevos. Pie de página. De hecho, sigamos siendo consistentes. Todo el sitio y editemos el contenido. Se ha guardado automáticamente y agregado a la lista de encabezados y pies de página que hay abajo. Y aquí estamos una vez más. Así que recuerda, el simulacro. Si hacemos clic en eso y abrimos la caja flexible, podemos usar esta sección de cuatro columnas. Recuerda. Nuestro sitio web de referencia tiene estas cuatro columnas, así que esto es agradable. Pero necesito mencionar que aunque agregues, por ejemplo, esto, siempre puedes convertirlo en lo que quieras. Si digo plus y agrego contenedor, puedo duplicar este contenedor, duplicarlo, duplicarlo cuatro veces, y ahora seleccionar el contenedor que los sostiene. Ir a diseñar dirección de izquierda a derecha, y es una sección de columna cuádruple. Entrando aquí, flex box, agregándolo, como puedes ver, son idénticos. Ahora, en esta, agreguemos una imagen. Elemento. Seleccione eso. Vaya al logo, seleccione. Ahí vamos. También podemos darle una URL personalizada a la página de inicio. Porque si alguien lo presiona o hace clic en él, quieres que se los lleve a la página principal. A continuación, agreguemos algunos textos. Sólo voy a añadir un editor de texto. Ahí vamos. Se puede decir estilo, blanco. Publicar. Podemos entrar aquí y decir icono icono lista. Porque esencialmente estos son la lista de iconos. Enlaces rápidos. Volveré aquí y diré rumbo, déjalo caer ahí, y cambiémoslo a enlaces rápidos. Se puede cambiar para que digamos que verde o son blancos. Quiero que sean así de verdes. Vuelve aquí, levanta mi gota para los ojos o dos. Copia eso. Puedes instalar esto si quieres poder muestrear los colores que estén en tu navegador actualmente. Se llama Selector de color RGB. Puedes descargarla como extensión para tu navegador. Al volver aquí, voy a pegar mi color verde. También quiero asegurarme de que la tipografía sea 600 y seleccionar antes de ir lejos, vamos a seleccionar la lista de iconos para que podamos darle estilo Vuelve aquí, cambia esto para verificar insertar, contrae eso. No quiero tener que volver a cambiar ese icono, así que lo duplicaré. Ahora tiene ese mismo icono. Todo lo que tenemos que hacer es cambiar el color del icono. No. Pasemos al color del icono de estilo ese color verde al flotar. Vamos a hacerlo. Para el texto, hagámoslo en hover. Hagámoslo así de verde. Para las listas, aumentemos ligeramente el espaciado. Ahora podemos duplicar, duplicar y tal vez una vez más. Esto puede ser el hogar. H. Privacidad del blog. Condiciones. Por último, esta puede ser nuestra tienda. Ahí vamos. Lo siguiente que quiero hacer es duplicar eso y deshacerme de esto porque no hay necesidad de rehacer lo que acabamos de hacer Pero también quiero seleccionar este contenedor que está sosteniendo el y mientras aún esté seleccionado, iré al margen de avance a la izquierda. Vamos a empujarlo. De hecho, volvamos a cero y publiquemos primero la vista previa de los cambios. Acabo de recordar algo. Ahí vamos. Entonces yo antes que nada, quiero agregar botones aquí. Como se nota, tenemos estos dos botones. Entonces entraré aquí y déjame agregarlo aquí, agregarlo con elementor Selecciono este Control C, G aquí. Selecciona aquí, Control V. Ahora, se ha pegado afuera, así que solo lo arrastraré y soltaré ahí C, seleccione esta pasta correcta. Ahora va por debajo de ahí. Publicado. Revisemos los cambios, y ahí vamos. Pero ahora el problema es si hacemos clic en esto para ir a casa porque recuerden que le hemos dado un enlace. Si nos hemos ido a casa, si nos desplazamos hacia abajo hasta el fondo. Notarás que esto es empujado hacia afuera mientras esto es empujado hacia adentro Estos otros también deben ser empujados hacia afuera. En primer lugar, vamos a empujar hacia fuera el fo mismo. Seleccionando el contenedor que está guardando todo. Cambiemos eso al 100% ancho Ahora vamos a tener un contenedor que lo esté guardando todo. Pero ese contenedor ocupará el 80% de este contenedor exterior que es 100% ancho. Así que podemos simplemente duplicar eso, eliminar todo desde adentro, y luego arrastrar y soltar estos otros dentro. Quiero ponerlo justo debajo de eso. Sí. Toma eso, ponlo justo debajo de eso, y finalmente, ponlo justo debajo de eso. Ahora seleccionando este contenedor, arregló la dirección para que quede de izquierda a derecha, pero ahora queremos que ocupe 80%. Este debe ser 100% el exterior es 100%, y este interno es 80%, el externo necesita que el interior esté en el centro. También debemos aumentar el acolchado por encima y por debajo del pie de contenido. Ir a acolchado avanzado. Arriba, digamos 100, abajo 100 publicar. Ahora, notarás que estos enlaces rápidos están por encima de todo lo demás. Parece que sé que está en línea con este botón. Esto se puede empujar hacia arriba, seleccionando la imagen en sí, margen, arriba, Recuerda, esto también está demasiado cerca de esto. Mientras se selecciona esto, este contenedor, vamos a ir al relleno a izquierda y empujarlo todo el camino hasta la publicación, revisar los cambios, y creo que ahora tenemos un bonito pie de página. Si nos vamos a casa y nos desplazamos hasta el fondo, ahí vamos. Una cosa que queda es empujar estos textos hasta este punto aquí mismo. Entonces quiero ir a la página principal. Seleccione este contenedor que contiene esto. Quiero que esto ocupe el 80% porque esto está ocupando digamos al 100%, al 100%. Esto debería ocupar 80% publicar. Ahora, creo que sé cuál es el problema ahí mismo. Sí. Espera, ni siquiera la empujamos mientras aún está seleccionada, la externa, vayamos a justificar la publicación de contenido. Revisa los cambios, desplázate hacia abajo. Pero ahora esto viene hasta la imagen, lo que significa que dupliquemos esto. Ahora vamos a hacer que ocupe 40% y esta otra mitad ocupará 40% 40% 40%, y los dos constituirán 80%. Pero ahora éste va a estar vacío, quita eso y aquello. Y eso se pergaminan. L et's revisan los cambios. Pasea hacia abajo. Ahí vamos. Entonces ahora está correctamente alineado con esto, y está ocupando 40%, 40%. Entonces sí, creo que ahora hemos terminado con la landing page, pero solo una cosa más que sé que te estás preguntando, cómo hacemos que se vea bien en cada dispositivo. Teléfono móvil, tablet, ya se ve bien en una computadora de escritorio. Entonces veamos cómo hacerlo en la siguiente lección. Te veré en breve. 21. Finalización del pie de página: A, bienvenido de nuevo. Así que casi terminamos con nuestra landing page, pero tenemos algunos toques finales. Ahora, número uno, cambiemos el color o el color de fondo del foota para reflejar lo que tenemos en el sitio web de referencia ¿Dónde está? Sí, aquí está nuestro sitio web de referencia, y tiene el mismo estilo que esta otra sección. Pero en el que estamos trabajando ahora mismo, no tiene ese color. Así que va al editor. Quiero seleccionar este contenedor, ir al estilo. Color. Copia eso. Vuelve aquí al editor del Pie de Página. Seleccione el color del tipo de fondo estilo contenedor. Vamos a darle ese color. Particle Royals Royal agrega. Vamos a habilitar eso. De hecho, volvamos aquí en este editor. Partículas abiertas. Haga clic en cualquier lugar dentro del código, el código JSON, Control A copy. Volvamos a nuestro editor. Seleccione dentro del editor JS, Control A, eliminar, pegar. Ahí vamos. Entonces, digamos que aplique. Publico vuelvo aquí, ahí está nuestro pie de página. Ahora si hago clic en esto para irme a casa, ahí vamos. Entonces ese es nuestro alfarero. Eso es todo. La otra cosa que tenemos que hacer es hacer que esta página se vea bien en tablets y smartphones. En esta lección, trabajemos para que se vea bien en tabletas. Entonces comencemos con la página. De hecho, permítanme cerrar todo aquí. Volveremos a trabajar en el resto. Pero ahora mismo, vamos a ir a derecha Lak Abrir Vinculación Nueva pestaña para abrir la página de aterrizaje. Ahí vamos. Ahora, aquí dentro, comencemos desde el encabezado. Este es el editor de Encabezados. Ahora, cambiemos al modo de respuesta de la tableta, y así es como se ve en las tabletas. Control I para sacar a colación la estructura. Quiero seleccionar el contenedor que está guardando todo dentro de este contenedor exterior. Este contenedor aquí necesita ser del 100%. 100% del espacio disponible. Esto tiene que ser tal vez del 20%. Déjame seleccionar esto. El contenedor de botones necesita ser del 20%. El logo necesita ser del 20%. Y así el contenedor de menú necesita ser 60% no 60 p celdas por ciento. Publicar. Ahora, como pueden ver, cuando hod sobre el menú, aquí es donde se encuentra Déjame seleccionarlo. Lo he seleccionado, pero en caso de que no puedas seleccionarlo, entra dentro del contenedor que lo sostiene, luego selecciona elementos knave Si bien está seleccionado, vaya a avanzado, rompa todos estos ajustes predeterminados que habíamos establecido en la versión de escritorio. Porque si volvemos a la versión de escritorio, mira el margen, volverá a lo que era. En modo tablet, lo hemos restablecido. Pero para el escritorio, sigue siendo lo que teníamos originalmente. Lo que sea que configuremos para la tableta será el predeterminado para el móvil. Quiero restablecer el margen y el relleno para todos estos en modo tablet. Quiero empujar este menú hacia abajo. Seleccionando el propio menú, margen, quita ese margen inferior del menú, y ahora aquí vamos. Publicar, revisar los cambios. Ahora, quiero presionar Control shift I para sacar herramientas de desarrollo en mi navegador chrome. Esto me permite mirar emuladores para diferentes dispositivos Si hago clic en este sensible Togo, tenemos diferentes emuladores de dispositivos aquí Por ejemplo, para iPad mini, así es como nos vemos en un iPad mini, iPad er y iPad P. Solo vamos al iPad mini. Y no puedo ver O aquí está el menú. De hecho, creo que esta lección va a ser demasiado larga. Veamos cómo proceder a partir de aquí en la siguiente lección. Te veré en breve. 22. Encabezado sensible a la pantalla: Reanudemos desde donde lo dejamos. Como puedes ver, el menú está justo aquí, el ícono de menú, pero no lo podemos ver. Lo primero que queremos hacer es cambiar el color. Si bien todavía está seleccionado, iré al estilo. Envoltura de menú. Ahora queremos ir al estilo Hamburguesa Para el estilo hamburguesa, color icono de hamburguesa. A ver. Queremos que sea blanco. Hagámoslo verde. Déjame seleccionar este botón. Copia eso. Seleccione el kit de elementos estilo Hamburguesa Ve aquí y hazlo verde. Ese es el color del icono. De hecho, estamos cambiando lo incorrecto. No es el color del icono de Hamburguesa. Queremos que esto se quede. Volvamos a la normalidad. Queremos que este sea de este color oscuro. Así que volvamos al selector de color y quiero elegir este color Ahora bien, para este color de icono de hamburguesa, esas son estas líneas Quiero que sean ese color de fondo oscuro. Pero ahora eso está aquí. Para el tipo de fondo, ahí es donde queremos tener el color verde. Si selecciono esto, eso es exactamente lo que estaba buscando. Déjame seleccionar este botón. Copia a color. Seleccione ese elemento el estilo. Estilo hamburguesa. Bien. Vamos al tipo de fondo, no al color del icono, tipo de fondo, al verde y al pasar el cursor Cuando estás usando una tableta, normalmente no pasas el cursor Pero tal vez podrías estar usando un lápiz. Entonces, no me permitas asumir. tipo Bground en hover debe ser de color blanco, así Ahora, ese es el ícono de la hamburguesa. Cuando hacemos clic en él y exponemos el menú, también tenemos este botón togo cerrar, y eso es lo que tenemos aquí abajo. Cerrar togo. De hecho, hagamos este menú. L et's volver aquí y vamos a hacer ese menú este fondo de menú de color. Vuelve aquí, quiero ir a las páginas de inicio. Página principal derecha abierta enlazando Nueva pestaña para editar con Elementor Ahora bajando aquí, quiero seleccionar este contenedor. Entonces seleccionándolo estilo. Copia a color. Cambiemos de nuevo aquí y ahora para este envoltorio de menú. Queremos darle un tipo de fondo de este color. Estilo de elemento de menú. Queremos darle un color blanco al flotar. Queremos que sea ese verde, seleccionando esta copia. Al hacer clic en el menú. Queremos poder ver esto. De hecho, ya está listo para comportarse así, pero está bien. Creo que está heredando de la configuración del escritorio. Dejémoslo así. Ahora, cambiemos este togo cerrado. Una vez más, menú de hamburguesas. Tipo de fondo de Togo cerrado. Hagámoslo blanco. Tipo de borde, ninguno. No deberías tener una frontera, y creo que eso se ve bien. Ahora agreguemos también un menú móvil. Volver al contenido, configuración del menú móvil, logotipo del menú móvil. Seleccionemos eso, seleccione. No, si hacemos clic en el menú, así es como se ve. Ahora podemos reducir el ancho de este envoltorio, yendo a style menu wrapper width. Para las tabletas, creo, digamos 30%. No, eso es demasiado pequeño porque ahora está colapsando el go cerrado, así Vayamos a la hamburguesa una vez más. Vamos a la cerrada a. Para el margen, rompamos ese margen. Ampliar eso una vez más. Y para el margen superior, empújalo hacia abajo. Así como así. De hecho, vayamos también al logotipo del menú móvil. Por el margen, rompamos eso. Margen a la izquierda, empújalo un poco, y creo que ya estamos bien. Publica, y revisemos los cambios. Parece que necesitamos volver a cambiar el color del envoltorio del menú. Déjame seleccionar el color del envoltorio del menú, entonces eso. Y quiero darle aquí estos antecedentes. Déjame usar mi selector de color porque ya lo había elegido. Y pegarlo aquí, ¿dónde está ese color? Publicar. Revisemos los cambios. Control turno I, bien. Ahora por lo menos hemos hecho algunos avances. Pero ahora vamos a empujar esto hacia el lado derecho. Seleccionando esto de hecho seleccionando este contenedor que está sosteniendo el menú, diseñar todo debería estar en el centro, pero aquí mismo, deberían estar del lado derecho, publicar, y ahí vamos. Ahora tenemos que empujar un poco estos hacia adentro. Tomemos el contenedor que sostiene a los tres. Este contenedor, y hagamos que ocupe 95% del espacio. Así como así. También podemos empujarla hacia abajo. Ir a avanzar, romper el margen y darle un margen superior de diez, publicar encabezado. Ahí vamos. Impresionante. Ahora, también tienes la opción de no incluir este botón. No necesariamente tienes que tenerlo aquí. La forma de ocultarlo sin eliminarlo de la versión de escritorio porque aún lo necesitarás en la versión de escritorio. Si vuelve a cambiar a la tableta. Solo podemos decir que creamos un encabezado separado solo para tabletas. Si selecciono esto, permítanme seleccionar el contenedor que contiene todo, y lo duplicaré. Todo bien. Ahora tenemos dos encabezados, pero podemos decir que uno solo debería ser visible en las tabletas, y otro s solo debería ser visible en el escritorio. Por ejemplo, para el primero, podemos decir mientras está seleccionado, ir a avanzado, colapsar diseño, ir a responsive, esconderse, esconderse en tabletas y teléfonos. Publicar. Para el segundo, si lo selecciono, podemos ir a avanzado y decir responsive, id it on desktop. Solo edita en escritorio, pero muéstralo en tablets y móviles. Las personas que usen tabletas y móviles solo verán este menú, este encabezado Las personas que usen el escritorio solo verán esto. Pero si cambiamos a tablet, notamos que la superior está desvanecida, es decir, no podemos editarla en este modo, pero ésta se puede editar Ya podemos deshacernos de ese contenedor, y ahora nos quedamos con solo dos contenedores publicar. Repasemos los cambios, y ahora solo tenemos el menú. Si cambiamos al modo escritorio, podemos ver el que tenía el botón. Si cambiamos al modo tablet, sólo podremos ver el que no tenía el botón. Recuerden, dijimos que esto debería ser visible en tabletas y teléfonos móviles. Si cambiamos a un teléfono móvil, ¿también solo tiene qué? Esto sin ese otro botón. Básicamente, así es como hacer que la página receptiva en las pantallas de las tabletas. Tengo una tarea para ti, y la tarea es hacer que esta página receptiva en teléfonos móviles, teléfonos inteligentes. Vas a usar los mismos principios que hemos usado para hacer esto receptivo. Pero en la siguiente lección, te voy a dar algunos consejos y trucos sobre cómo terminar esa tarea y terminar con una bonita página receptiva. Entonces te veré en breve. 23. Sección de héroe que responde a la pantalla: Entonces ahora que tenemos un encabezado sensible a la pantalla en las tabletas. Es hora de ver cómo hacerlo receptivo en los teléfonos inteligentes. Y ahora quiero darte algunos consejos sobre cómo hacer que el resto de la página sea receptiva. Empecemos con la capacidad de respuesta del teléfono móvil del encabezado Entonces, si colapsamos a los teléfonos móviles, claro, esto no es editable Esto es lo que estamos editando, y tenemos dos contenedores dentro de este contenedor exterior, entonces tiene sentido hacer esto tal vez el 50% porque está ocupando el 100% del ancho actualmente. Entonces seleccionando el contenedor en sí, podemos decir que queríamos ocupar tal vez el 40%. Este otro contenedor que sostiene el menú de hamburguesas también debería ocupar puede digamos 40%. Ahora como puedes ver, tenemos el 20% de espacio entre ellos. De hecho, digamos que deberían ocupar 46%, y este otro también debería ocupar 46%. Ahí vamos. Ahora, lo que podemos hacer es seleccionar el contenedor que contiene estos dos contenedores, y por supuesto, es este contenedor. Entonces creo que esto es todo, y podemos decir que ocupemos el 98%. De hecho, digamos nueve 5% del espacio disponible. Revisemos los cambios, y así es como se ve en los teléfonos móviles. iPhone Pro Max, iPad Mini, Surface Pro Samsung, por lo que queda bien en diferentes dispositivos móviles. Ahora ese es el encabezado. Ahora cambiemos de marcha rápidamente y trabajemos en la sección de héroes, y eso te dejará trabajando en el resto de las secciones porque a estas alturas, ya sabes cómo hacer que diferentes elementos respondan en base a lo que hemos hecho con el encabezado. Pero quiero que trabajemos en esta sección de héroes muy rápidamente. Entonces cambiando al modo tableta. Como pueden ver, así es como se ve la sección de héroes en modo tablet, y yo la quiero. Quiero que esta imagen venga antes del texto. Entonces lo que puedo hacer es seleccionar esto, ir a avanzado, de hecho, diseñar, y puedo decir de arriba a abajo, así así, y luego de hecho, revertirlo. Entonces tenemos este contenedor que tiene el texto, y ahora tenemos el contenedor que tiene la imagen. Este contenedor, de hecho, el contenedor exterior puede ocupar el 100%. Este contenedor aquí puede ocupar 95% no 95 celdas pi, y este otro puede ocupar 95%. Ex así como así. ¿Por qué es esto 95. Ahora, con este seleccionado, el exterior, podemos alinear todo al centro. Podemos reducir algunos de estos textos. Podemos reducir el espaciado aquí arriba, el acolchado en la parte superior, puede darle tal vez 50, abajo 50. Vayamos también a esto y lo pongamos en el centro, alinéelo al centro, esto también. Y este contenedor que sostiene, todos los botones. Pongamos todo en el centro, así como así. Publica, y revisemos los cambios. Ahí vamos. Control turno I para sacar a colación las herramientas receptivas. Cambiemos al iPad mini. Así se ve en un iPad mini. Si nos desplazamos, ahora tienes el resto para probar y trabajar, incluido el pie de página. No olvides optimizar el pie justo de la manera en que optimizamos el encabezado. Ahora, en mis clases anteriores, te he estado enseñando paso a paso cómo hacer que cada parte sea receptiva. Pero en esta clase, quiero dejarte con una tarea que puedas completar en base a la información basada en los consejos que he compartido cuando estábamos trabajando en la sección de héroes y el encabezado. Creo que puedes encargarte del resto, y tengo mucha curiosidad y ganas de ver qué se te ocurrirá, sobre todo para esta parte. Incluso puedes decidir deshacerte de esta imagen de fondo. En las tabletas, porque en este momento no se ve bien, sino en el escritorio, se ve bien. No puedes deshacerte de él en desto. Entonces, ¿cómo vas a manejar cuidarlo en tabletas Esa es una buena tarea para que te encargues, y sé que vas a aprender mucho mientras intentas depurar y solucionar problemas Y este parece un buen lugar para terminar la clase. Pero antes de que te vayas, tengo algunas reflexiones finales más. Quiero compartir con ustedes, así que los veré en la siguiente y última lección. 24. Reflexiones finales: Enhorabuena. Has llegado hasta el final, y quiero darte las gracias por quedarte conmigo hasta ahora. Confía en mí. Sé que completar un curso en línea puede ser bastante desafiante porque todos tenemos horarios ocupados. Entonces, el hecho de que hayas llegado a la lección final significa que te tomas en serio el aprendizaje de elementor diseño web Y así deberías estar orgulloso de ti mismo por completar la clase. Recuerda, ahora tienes las habilidades para construir una landing page desde cero usando Elementor Pero eso es solo el comienzo. Puede utilizar estas nuevas habilidades encontradas para construir un sitio web completo para su negocio o nuestros clientes. Si estás ansioso por llevar tus habilidades elementales al siguiente nivel y aprender a construir sitios web que funcionen completamente, no solo páginas de destino, dudes en consultar mi perfil para clases más completas. Y ahora que has terminado de trabajar en tu landing page, no olvides tomar una captura de pantalla de la misma y compartirla con nosotros aquí en la comunidad. Nos encanta compartir nuestros proyectos para obtener comentarios de compañeros y profesores. Y puedes tomar una captura de pantalla de toda tu landing page usando una extensión del navegador llamada G Full page. Así que solo tienes que ir a tu navegador y buscar G extensión de página completa. Entonces, si estás usando Firefox, reemplaza Chrome por Firefox. Voy a hacer clic en esto. Entonces adelante e instálelo. Como puede ver, el mío está instalado. Entonces ahora cambiando a tu landing page, aquí estamos. Tendrás este ícono aquí arriba, dice la página G F, simplemente haz clic en él, y tomará una captura de pantalla de toda la página de destino. Descárgalo como PNG. Y ahora puedes volver a la clase. Esta es una clase anterior que publiqué el mes pasado. Y en la pestaña Proyectos y Recursos, puede continuar y hacer clic en Enviar proyecto. Como puedes ver, los alumnos pudieron subir proyectos en los que trabajaron en esa clase. Así que adelante y haz clic Enviar proyecto en la pestaña Proyectos y Recursos en esta clase actual y siéntete orgulloso de mostrarle a la comunidad lo que has podido crear. En una cosa más, antes de separarnos, tengo un pequeño favorito que preguntar. Si encontraste esta clase útil y agradable, ¿podrías tomarte un momento para escribir una reseña para ello? Tus comentarios solo tomarán unos segundos, pero podría ser el factor decisivo para el viaje de aprendizaje de otra persona. Cuando los estudiantes se encuentren con tu reseña, les ayudará a saber si esta clase es una buena opción para ellos. Así que tómate un momento, abre la pestaña de revisión debajo este reproductor de video y comparte tus pensamientos sobre la clase. A medida que terminamos las cosas, quiero desearte lo mejor en tu viaje de primaria. Sigue aprendiendo, sigue creando y sigue aprovechando estas herramientas gratuitas para darle vida a tu imaginación. Y no puedo esperar a ver qué se te ocurre a continuación. Hasta entonces, mantente increíble, y espero verte en la próxima clase, feliz diseñando a todos.