Crea un sitio web de marca personal con Elementor y WordPress (complementos GRATUITOS)

1. Introduccion: Y bienvenido de nuevo a otra clase de Elementor increíble conmigo, Ken Ahora, en esta clase, vas a aprender Elementor construyendo un sitio web de marca personal de una sola página para promocionar tus servicios profesionales a clientes potenciales El objetivo es enseñarte Elementor, pero vamos a hacerlo prácticamente Vamos a partir de una instalación negra de WordPress y poco a poco a convertirla en un sitio web completo, totalmente funcional y receptivo. Ahora bien, la idea detrás de esta clase es muy sencilla. En lugar de enseñarte widgets y elementos y características aleatorios de Elementor, vamos a usar Elementor para construir prácticamente un sitio web real que podrías usar para presentarte a ti mismo, tu trabajo y tus servicios Esto significa que construiremos la sección lateral por sección, incluyendo una sección de héroe, un encabezado de navegación que se pega a la parte superior cuando te desplazas por una sección de servicios, sección de cartera, testimonios, un formulario de contacto y el pie de página. También nos aseguraremos de que todo se vea y funcione correctamente en computadoras de escritorio, tabletas y dispositivos móviles. A lo largo de la clase, te guiaré paso a paso por todo el proceso, incluyendo los pequeños detalles que ayudan a convertir una página básica de WordPress en algo que se siente profesional. Al final de esta clase, tendrás una comprensión más profunda de WordPress y Elementor y un sitio web completo que podrás seguir personalizando Si eres un freelancer, diseñador, profesional creativo o un proveedor de servicios que busca crear un sitio web personal para ti, déjame mostrarte cómo hacerlo con Elementor Entonces, si te emociona comenzar, vamos. Nos vemos en la siguiente lección. 2. Resumen del proyecto: Bienvenida de nuevo. Entonces solo quiero mostrarte exactamente lo que vas a estar creando en esta clase. Este es tu proyecto de clase. Entonces déjame refrescar la página. Entonces, como puedes ver, tenemos una sección de héroes con esa bonita animación de entrada. Vamos a ver cómo hacer eso desplazándose hacia abajo. Tenemos esta sección de mostrador. Contamos con una sección de servicios. Sección de trabajo anterior, que es donde exhibirás algunos de tus trabajos anteriores, y alguien puede hacer clic en esto y abrir más de tu trabajo. Como puedes ver, al hacer clic en esto, abre tu cartera. En este caso, abre mi cartera en mano.NET testimonios de clientes Puedes establecer una hora sobre qué tan rápido o lento quieres que se desplace. El visitante también puede navegar o desplazarse manualmente para leer los diferentes testimonios. Entonces tenemos una sección de reservarme o sección contacto donde el usuario puede elegir un servicio, tal vez incluso dos servicios, y luego describir el proyecto con la mayor claridad posible, luego proporcionar su nombre y dirección de correo electrónico, y luego solicitar un presupuesto. Cuando recibas esto, podrás leer y luego volver a ellos o enviarles un correo electrónico para obtener más detalles. Y luego tenemos un pie de página. El espectador también puede hacer clic en este para abrir su trabajo una vez más. Si volvemos a la parte superior, porque se trata de un sitio web de una sola página, estos enlaces navegan dentro de esta página, pero a la sección derecha Entonces, si hago clic en Servicios, va a la cartera de la sección de servicios. Se va a la sección de trabajo anterior. Contacto, va a la sección de contacto. Vuelvo a la cima. También tenemos un botón de servicios aquí. Solo estamos dando al visitante tantas llamadas a la acción como sea posible Nuestro objetivo es permitirles hacer clic en los botones e ir a realizar una acción que queramos. Entonces esa es una visión general rápida de lo que vas a estar creando en esta clase. Ahora ya estamos listos para ir y empezar a trabajar en ello. Entonces te veré en la siguiente lección. 3. Instalar WordPress: Es hora de instalar WordPress. Y la manera de hacerlo es a través del panel C. Cada host web de WordPress te proporcionará un panel C para que instales WordPress, averigua cómo llegar a tu panel C dependiendo de tu host web. Entonces voy a dar click Ir al Panel C. Entonces aquí estamos dentro del panel C. Y una de las pestañas dentro del panel C va a ser el instalador de aplicaciones táculares Sof, que tiene WordPress Así que solo haz clic en WordPress. Y te llevarán justo aquí donde puedes instalar WordPress. Así que voy a hacer clic en Instalar ahora aquí mismo, tenemos que elegir una URL. Ahora, debido a que compraste un nombre de dominio, va a aparecer aquí mismo. Si tienes varios, van a estar en este menú desplegable. Y otra cosa aquí mismo, me gusta elegir este prefijo, HTTPS www puntear tu nombre de dominio. Entonces cuando haga clic afuera, va a verificar si tengo un certificado SSL. Si no tengo certificado SL, va a ir con HTTP o HDTP Así que asegúrate de tener un certificado SSL para informar a los visitantes que tu sitio web es seguro. No agregues nada aquí. Entonces tu sitio web va a ser www punto tu dominio punto tu extensión. Vamos a darle un nombre al sitio web. Voy a llamarlo Alex Dow. Diseñador visual profesional. Es un sitio web de cartera. Estas son las credenciales de inicio de sesión que necesitarás para iniciar sesión en WordPress directamente en lugar de pasar por el panel C. Así que asegúrate de decir esto en alguna parte. Sólo voy a copiar estos y abrir un bloc de notas, pegarlo ahí mismo, copiar la contraseña No hace falta que copie este correo electrónico, pero yo sólo voy a copiarlo todos modos. No necesitas copiar eso. Y tendrás algunos plugins preseleccionados que se instalarán con prensa web dependiendo de tu web host. Algunos anfitriones web no tienen estos. Entonces no necesito ninguno de estos fue a revisarlos todos. Si va a entrar en Advance, es posible que desee cambiar las copias de seguridad de la base de datos que mantiene su host web semanalmente. Ahora bien, normalmente no cambio esto, solo lo dejo por defecto. Entonces estos son los únicos ajustes que necesitas mirar realmente. Entonces voy a golpear la instalación. Ahí vamos. Entonces WordPress ya está instalado con éxito, y tenemos la URL administrativa. Si hacemos clic en eso será llevado al panel de WordPress de su sitio web. Como puedes ver, aquí estamos, el sitio web que creamos fue Alex Doe Sí, así que enhorabuena. Has instalado WordPress. Ahora, recuerda las credenciales de inicio de sesión que acabamos de poner en este bloc Si cerramos sesión en este sitio web, nos solicitarán las credenciales de inicio de sesión. Entonces ahí es donde usaremos, copia eso, pega el nombre de usuario y la contraseña. Pega eso. Recuérdame. Entonces vamos a iniciar sesión. Y así ahí vamos. Entonces así es como instalar WordPress. Y ahora estamos listos para pasar al siguiente paso, que es instalar un pin de WordPress. Te veré en breve. 4. Instala un tema de WordPress: Con WordPress instalado, es el momento de instalar nuestro tema de WordPress. Así que vamos a los temas de apariencia. Y voy a ir a Agregar Nuevo. Estos son los temas predeterminados que vienen con cada instalación de Wordpress. Ahora, estamos en 2026, pero lo último activo que viene con Wordpress por defecto es 2025 Parece que no crearon uno nuevo en 2026. Entonces solo voy a decir Añadir cosa porque queremos usar una cosa personalizada llamada Astra. Esta es una de las mejores cosas que puedes usar en WordPress. Entonces voy a decir instalar, Activar. Y ahora Astra está activa. Estos son solo anuncios de ellos. Cierra eso. Y así Astra es ahora nuestro tema activo. Ahora, en la siguiente lección, instalemos un lamentor Te veré en breve. 5. Instalar Elementor: Ahora es el momento de instalar elementor, que es el plugin que vamos a utilizar como nuestro constructor de páginas de arrastrar y soltar Así que vamos a los plugins. En primer lugar, vamos a hacer clic en plugins para ver la lista de los plugins predeterminados que vienen con cada instalación de WordPress. Y ese es este chisme y Hello Dolly. Sólo voy a seleccionarlos todos , luego eliminarlos. Aplicar. No los necesitamos. Entonces voy a decir añadir plugin. Aquí, busquemos a Elementor. Va a ser la primera opción con más de 10 millones de instalaciones activas. Voy a decir instalar ahora. Sigamos adelante y activarlo. Y ahora Elementor está activo en nuestro sitio web. Una vez que lo hayas instalado, verás este elementor aquí mismo Pero no necesitas entrar y cambiar nada. No necesitamos meternos con ello. Ahora, vamos a las páginas. Tenemos algunas páginas por defecto aquí. Voy a eliminarlos, así que selecciónalos todos y muévalos a la basura. Aplica eso. Ahora, en la siguiente lección, desalentemos la indexación. Te diré lo que es en breve. 6. Desalentar la indexación: Listo para comenzar a construir nuestro sitio web. Pero hay una cosa que debemos asegurarnos de hacer antes de continuar, que es desalentar a los motores de búsqueda de indexar el sitio web tal como es Google, Bing y otros motores de búsqueda envían a sus arañas o sus bots a buscar nuevos sitios web y agregarlos a su base de datos para ponerlos a disposición de las personas No quieres que Google haga que tu sitio web esté disponible todavía porque no lo has construido. Entonces eso tiene un efecto negativo en tu SEO. Entonces queremos decirle a los motores de búsqueda, no indexemos este sitio web todavía. No está listo para el público. Entonces vayamos a la configuración, leyendo, desanimemos a los motores de búsqueda de indexar este sitio Y vamos a guardar los cambios. Ahí vamos. En la siguiente lección, empecemos ahora a construir nuestro sitio web de una sola página. Te veré en breve. 7. Crear una página web única: Ahora es el momento de que creamos nuestra página web única. Entonces vamos a las páginas. Y recuerda que borramos destrozamos las dos páginas predeterminadas que venían con Webpress. No los necesitamos. Digamos, antes que nada, vamos a deshacernos de esto y agreguemos una página. Vamos a darle un nombre. Yo sólo lo llamaré hogar. Primero que nada configuremos esta plantilla como una página completa de nosotros. Y ahora que hemos terminado con eso, vamos a entrar y por cierto, esa es esta configuración de plantilla es una configuración elemental. No es una configuración de wordpress, solo como un por cierto. Ahora, vamos a la configuración de Astro, y para el contenedor, queremos un contenedor de ancho completo. Sidebar, no queremos una barra lateral, así que no hay barra lateral. Y estos elementos, necesitamos desactivar estos elementos. Antes de deshabilitarlos publiquemos esta página web y veamos cuáles son. Entonces voy a decir publicar publicar. Y ahora, si vemos la página en una nueva pestaña, esta es la déjame cerrar esto. Este es el encabezado aquí mismo porque este es un tema de Astra. Viene con default, header y footer, y lo que es esta otra cosa, área de banner. Aquí hay un área de banner que viene por defecto. No queremos ninguno de estos porque queremos construir esta página desde cero usando las funciones de arrastrar y soltar de Elementor Así que volvamos aquí y deshabilitemos todos y luego guardemos. ¿Se guarda? Sí, veamos la página. Y ahora es un lienzo en blanco. Entonces cerremos todos estos. Y ahora que se crea nuestra página, volvamos a la lista de páginas que tenemos. Y como pueden ver, aquí tenemos la página principal. Otra cosa que queremos hacer es cuando visitas el dominio de cualquier sitio web, debe ir a la página principal. Entonces ahora mismo, si tomamos el dominio, copia esto, abre una nueva pestaña, y pega eso, este es el equivalente de tu dominio.com o.NET, Si vas ahí ahora mismo, hay una página diferente. Esta no es la página predeterminada que queremos. Queremos que esa página que acabamos de crear sea el destino de nuestro dominio. Entonces tenemos que decirle a WordPress qué página queremos hacer nuestra página de inicio predeterminada. Entonces vayamos a ajustes, leyendo. Página principal muestra sus últimas publicaciones actualmente. Entonces por eso vemos esto. Pero queremos decirle que no, escojamos una página estática como nuestra página principal. ¿Cuál página principal? Esta es nuestra página de inicio. La página que acabamos de crear, Guardar cambios. Y ahora, si recargamos esto, en el dominio raíz apunta a nuestra página en blanco, que vamos a poblar con nuestro diseño Entonces creo que vamos a parar aquí. En la siguiente lección, empecemos ahora a crear nuestra sección de héroes. 8. Crear una sección principal: Ahora aquí estamos en la página web de referencia. Sólo quiero que veamos la sección de héroes que vamos a crear. Así es como se ve. Entonces, ¿cómo hacemos esto? Cambiemos a nuestro proyecto. Ahora, vayamos a las páginas, y hemos instalado elementor, pero no hemos hecho de esto una página elementor Entonces digamos editar. Y aquí tenemos editar con Elementor. Entonces haz clic en eso. Esto convertirá la página en una página editable de elementos Entonces aquí estamos dentro de elementor. Entonces lo primero que notarás aquí es que tenemos elementos atómicos. Voy a colapsar todos estos. Estos son nuevos elementos creados en la última versión de elementor, pero son muy limitados porque las características más importantes se esconden detrás de un muro de pago Entonces por ejemplo, el botón, si sueltas un botón aquí y quieres agregar efectos de hover, si coloco el cursor sobre él, quiero que cambie de color Si quiero crear una interacción, como pueden ver, los efectos de desplazamiento están detrás de un muro de pago Entonces, no podemos trabajar así. Si no puedo tener acceso a efectos básicos como efectos hover, entonces no quiero usar este nuevo sistema Yo sólo quería mostrarte eso. Vamos a deshacernos de esto. Entonces no vamos a usar elementos atómicos en absoluto. Queremos utilizar los elementos gratuitos populares originales que siempre hemos estado usando. Ese es el sistema contenedor en lugar del sistema de elementos atómicos. Entonces vamos a dejar caer un contenedor aquí. Y como pueden ver, este contenedor aquí tiene dos columnas, el bloque de texto y el bloque de imagen. Entonces necesitamos dos columnas dentro de ella. Entonces voy a decir más, agrega un elemento de nuevo. Voy a dejar caer un contenedor ahí dentro. Y en este contenedor, voy a dejar caer dos contenedores más. Este contenedor va a ser el que establezca nuestro contenido de ancho con. Como puedes ver, este contenido no está tocando los bordes. Entonces hay un solo contenedor invisible que tiene dos contenedores más dentro de él, uno y otro contenedor. Entonces, ¿cómo hacemos eso? Así que hemos colocado nuestro contenedor ahí. Ahora volvemos de nuevo, agregamos elementos, dejamos caer otro contenedor aquí. Y voy a hacer click derecho y duplicar ese contenedor. Ahora tenemos dos contenedores dentro de este contenedor exterior. Voy a seleccionar ese contenedor exterior, ir a disposición. Bajo dirección. Voy a decir que queremos que sea una fila en vez de lo que es esta vertical. Entonces vamos a decir horizontal, y eso va a arreglar todo en una fila. Derecha. Entonces ahora, como pueden ver, ya casi estamos ahí, pero queremos establecer un ancho específico que nos guste. Entonces antes que nada, voy a seleccionar el contenedor más externo y decir que queremos cambiar al porcentaje en términos de ancho Y queremos que ocupes el 100% de cualquier pantalla en la que estés viendo el sitio web. Ahora, con eso, quiero ir a este otro contenedor que sostiene las dos columnas. Y quiero decir quiero que eso ocupe el 80% de este contenedor exterior porque este contenedor exterior está ocupando 100% si cambiamos aquí, está ocupando el 100%. Pero dentro, recuerden, tenemos aquí este otro contenedor que sostiene las dos columnas. Queremos que sea el 80% del contenedor más exterior. Entonces con este electo y con esto como porcentaje, 80%. Ahora fíjense que todo ha sido empujado a la derecha a la izquierda. Entonces voy a seleccionar este contenedor más exterior. Y aquí mismo, vamos a decir alinear todo al centro. Eso va a empujar al centro este contenedor que está retenido dentro por esto . Y ahora ya estamos listos vamos a decir que publique eso. Si elijo digo Agregar elemento, encabezado de texto y colocarlo ahí, vuelve a agregar elemento. Editor de texto es un párrafo. Déjalo caer. Ahora, queremos dejarlo caer aquí, justo debajo del encabezado y volver a agregar elemento y agregar un botón. Déjalo caer justo debajo de ahí. Vuelve aquí y di bajo diseño imagen fija. Publica eso. Vista previa de lo que acabamos de crear. Y ahora, como pueden ver, todo es estructuralmente correcto Vamos a darle estilo a todo para que luzca increíble. Entonces ahora vamos a terminar esta lección aquí. En la siguiente lección, ahora diseñemos esta sección de héroes. 9. Sección principal: Ahora es el momento de darle estilo a nuestra página. Pero una cosa que notarás en el sitio web de referencia es que tenemos este fondo degradado que comienza desde un azul oscuro hasta un azul brillante. Entonces, ¿cómo configuramos eso? Entonces volvamos aquí a Elementor. Vamos a agregar un color de fondo. Entonces voy a ir a este menú desplegable, ajustes laterales. Vamos a sentarnos fondo, y aquí es donde lo colocamos. Vamos a elegir gradiente. Ahora tenemos estos dos colores. Voy a abrir mi explorador. Voy a proporcionar esta carpeta de recursos de descarga que va a contener todo lo necesario para recrear este sitio web exactamente como es Así que eso también incluye los colores que usé. Entonces tenemos esta sección de colores de fondo. Entonces voy a seleccionar este color, copiar eso. Volvamos aquí. El primer color va a ser este azul. Y el segundo color va a ser este azul claro. Pero puedes elegir cualquier otro color que quieras. Entonces, para el segundo color, basemos eso como eso. Guardar cambios. Y dejemos esa zona. Ahora lo siguiente es alinear estos verticalmente al centro de este contenedor de columna que los sostiene. Entonces seleccionaré este contenedor, y aquí mismo, justificaré el contenido. Digamos centro, así como así. Voy a seleccionar este click derecho y duplicarlo porque necesitamos tener este texto. Tendrás que escribir, pero yo sólo voy a copiar y pegar. Voy a seleccionar esto entrando aquí y el contenido pegar que Alex Do. Entonces seleccionaré esto. Pega eso. Copiar, seleccionar este cuerpo de texto. Control A, Control Shift V si estás pegando desde algún lugar para asegurarte de no pegar ningún estilo desde donde lo copiaste Entonces Control Turno V. Y ahí lo tenemos. Así que publica eso. En primer lugar, vamos a echarle un vistazo. Ahora es mucho mejor. Entonces ahora, selecciona esto, y voy a seleccionar este color amarillo de los textos, cuaderno, bloc de notas, copiar ese amarillo Mientras se selecciona esto, voy a entrar en estilo texto color. Amarillo. Ahora, notarán que esto tiene dos colores, y yo le mostraré cómo hacerlo. Esto es cortesía de un plug in cold elements kit Light. En primer lugar, publiquemos eso. Y quiero que entremos en el tablero. Vayamos a plugins, añadimos plugin. Queremos añadir un plugin llamado Elements kit Light, que vamos a utilizar en toda la web. Entonces aquí mismo, voy a teclear elementos Kit. Elementos kit elementor agregar ons. Esto solo nos proporciona elementos más geniales aquí mismo que Elementor no nos proporciona o Elementor tiene en la versión pro paga Entonces ahora que tenemos el kit Elements activo, si hacemos clic en kit de elementos, vamos a tener que activarlo. Me gusta elegir avanzado aquí solo para asegurarme se seleccionen más opciones por defecto, tan avanzadas. Estos son solo elementos que van a aparecer aquí mismo como estos. Tan avanzado. Después siguiente, siguiente, no selecciones ninguno de estos. No los necesitas. Siguiente paso, configuración completa. Ahora si vuelvo aquí y me aseguro de que ya publicaron la página, Control R para refrescar la página. Ahora si colapso atómico, todos estos paneles, enlace general en bio, vas a ver elementos kit elementos. Estos son complementos adicionales geniales que necesitamos para crear lo que queremos crear. Así que vamos a cerrar esto ahora, este encabezado pertenece al elemento de forma nativa, pero queremos usar encabezado del kit de elementos. Voy a escribir rumbo. Y como pueden ver, tenemos el encabezado por defecto que tenemos, y también tenemos un encabezado del kit de elementos. Entonces este es el que queremos. Colóquelo ahí, y eliminemos este clic derecho eliminar. Entonces con este seleccionado, voy a teclear Alex y dentro de estos paréntesis, hazlo. Y ahora es cuestión de estilismo. Ir al estilo. Tenemos el título, que es el Alex, y el título de foco es el do el que está dentro de los paréntesis. Entonces, antes que nada, vamos a título y tipografía, aumentemos el tamaño al tamaño que queramos Seleccionemos un peso de fuente negro 900 para que sea mucho más audaz Y vamos a darle ¿de qué color? Blanco. Entonces título, color, blanco. Colapsar eso. Pasemos al título enfocado. Vamos al color. Lo queremos de este color naranja. Entonces copia esta naranja. Coloree esa naranja. Cuando cierras el cursor, cambia a ese amarillo. Entonces queremos copiar este amarillo. Y al pasar el mouse, pega eso. Entonces al flotar, va a ser ese amarillo. Pero fíjate que todavía no es grueso. De hecho, vamos a la tipografía. Peso de fuente negro. Y de hecho, aquí mismo en los contenidos Sí, tenemos espaciado. Entonces, si bien todavía está seleccionado, volvamos a Estilo, Estilo y tipografía Queremos que sea understyle, queremos que sea itálico, así como así Y fíjate que tenemos este separador, así que contrae el título, separador. Vayamos al contenido, contrayamos título, separador y deshabilitemos eso. Seleccione este texto. Hagámoslo blanco. Y queremos evitar que sea demasiado largo. Entonces, mientras aún esté seleccionado, vayamos a Avanzado con custom. Y vamos a darle tal vez el 75%. Publica eso. Y vamos a previsualizar lo que tenemos. Gran mejora, pero queremos reducir el espaciamiento entre ellos. Esos son los márgenes. Entonces con este seleccionado, actualice su comunicación. Pasemos al margen avanzado. Rompe este enlace porque si cambias algo aquí, va a afectar arriba, derecha, abajo e izquierda. Sólo queremos reducir el margen inferior. Seleccionemos también este Alex Doug, margen avanzado, reduce el margen inferior Publica eso. Y vamos a ver qué tenemos. Gran mejora. Entonces pararemos ahí. En la siguiente lección, veamos cómo crear estos botones. Te veré en breve. 10. Botones CTA de estilo principal: Ahora es el momento de estrellar nuestro botón para que se vea como nuestros botones de referencia Entonces, ¿cómo hacemos eso? Conmutación hacia atrás. Vamos a entrar aquí. Ahora, claro, tenemos dos botones, y si queremos colocarlos uno al lado del otro, tenemos que hacer lo que hicimos con estas dos columnas aquí. Por lo que queremos agregar un contenedor debajo de este texto. Agregar elemento. Pasemos a básico. Este es un diseño. Aquí es donde tenemos el contenedor. Vamos a soltarlo justo debajo de ese párrafo y arrastremos nuestro botón ahí y hagamos clic derecho en duplicar, seleccionar el contenedor que los sostiene, cambiemos la dirección a horizontal. Ahora bien, una cosa que notarás si publico esto es que estos botones no están alineados con el texto aquí mismo debido al relleno predeterminado que viene con cada contenedor. Como pueden ver tenemos algo de relleno por todas partes. Queremos quitar este acolchado. Entonces mientras se selecciona el contenedor, pasemos a avanzado. Vayamos al relleno y quitemos eso. Ahora podemos agregar algún relleno superior, tal vez diez e inferior diez, pero dejar intacto el relleno izquierdo. Publica eso. Ahora, como puede ver, están debidamente alineados. Otra cosa que queremos hacer ahora es seleccionar hay demasiado espacio. Para que podamos seleccionar este texto, margen avanzado abajo. Vamos a reducirlo tal vez hasta ese punto. Publica eso. Selecciona el botón, ve al estilo. En primer lugar, podemos cambiar lo que dice. Servicios y el otro dice cartera O ver mi trabajo. Ver mi obra. Ahora, seleccionando este botón aquí mismo, vaya a estilo. Y quiero que editemos el relleno. Así que rompe eso. Me gusta darle un acolchado izquierdo de 40 o 50, acolchado derecho de 50, y acolchado superior e inferior de 15 15. mismo caso aplica a ese estilo, acolchado izquierda 40, derecha, 40, luego 15, 15. Bien. Para ello, vamos a darle un color de fondo de gris y un color de texto negro. Seleccionando esto, queremos darle un color degradado porque nuestro degradado siempre juega entre estos dos colores amarillo y naranja. Entonces, mientras se selecciona, vamos al gradiente de tipo de fondo. Voy a copiar nuestros colores aquí. Amarillo, copia eso. Utilízala como segundo color. Pero copia la naranja, pega eso. Entonces aquí para el ángulo, queremos girarlo. En lugar de 180 grados, debería ser de 90 grados. Hagamos que el texto sea de color negro. En hover para este botón en hover, porque estábamos configurando para el estado normal Al pasar el cursor, queremos que tenga el mismo color degradado. Entonces voy a seleccionar eso. Y volvamos aquí, copia esa naranja. Pégalo ahí. Copia el amarillo. Pega eso, así como así. Pero queremos cambiar esto a 90 grados, el ángulo, así como así. Y esto en hover, seleccionado. Al flotar, queremos que tenga un fondo gris, no un degradado, sino solo un fondo gris clásico de color con textos negros No voy a tratar de mantenerlo consistente. Espera, ¿por qué no funcionan las propinas? Publica eso. Vayamos aquí. No lo sé. ¿Esto es un error? En normal, es un gradiente, pero en normal. No sé por qué tenemos ese bicho. Entonces elemental necesita investigar eso, pero procedamos. Vista previa de eso. Ahora bien, debido a que el efecto hover aquí no está funcionando para esto, podemos agregar una animación, así que la seleccionaré Al pasar el cursor, queremos una animación de hover. Tal vez crecer. Sí, así. Hagamos lo mismo para esto en hover, también debería crecer Así que publica eso vamos a ver lo que tenemos Sí. Entonces ahí vamos. En la siguiente lección, agreguemos ahora esta imagen junto con el fondo. Si cargo esta página, como pueden ver, hay dos separados 11. Imagen principal: Por lo que es momento de trabajar en la imagen de la sección héroe. Entonces porque ya agregaste el elemento image. Ahora, antes que nada, antes de que vayamos lejos, hay algo que has notado que hago todo el tiempo. Cuando quiero duplicar algo, tengo que hacer clic derecho y duplicar. Esos son dos pasos que tengo que dar cada vez. Entonces para evitar eso, siempre me gusta ir a este menú desplegable, preferencias de usuario y opciones de edición rápida. Eso solo me permite pasar el cursor sobre eso y simplemente hacer clic en esto para duplicar lo que quiera duplicar Entonces con el elemento de imagen seleccionado, voy a seleccionar que subir imágenes. Y como prometí, voy a proporcionar esta carpeta aquí mismo. Esta carpeta de activos de descarga, por lo que va a tener todo lo que necesitas. Entonces lo primero que vamos a introducir es esta imagen con este borde inferior que se desvanece, imagen de chico profesional cero o tu propia imagen Ahora bien, este es mi host web quejándose de mi servidor, así que solo voy a guardar esto y actualizar esta página Cierra eso. Entonces seleccionando esto y esto ir a subir. Si hago doble clic en eso, ahora va a funcionar. Entonces con la imagen seleccionada, voy a decir seleccionar, y ahí vamos. Ahora, para esta imagen, esta imagen amarilla de aquí mismo, vamos a agregar eso a la columna como fondo de columna. Entonces esta columna sosteniendo la imagen, vamos a ir a estilo, tipo de fondo. Seleccionemos la imagen, luego subamos los archivos. Y dentro de nuestra carpeta, tenemos el pincel de fondo héroe que va a abrir eso. Y seleccione. Ahora, está ahí, pero tenemos que hacer algunas cosas. En primer lugar, digamos que la posición debe ser centro centro. Queremos decir que no queremos que se repita. Entonces para el tamaño de la pantalla, queremos decir contener. Y lo que nos va a permitir posicionarlo correctamente es esta imagen real de este tipo. Con la imagen seleccionada, vayamos a W. Y vamos a jugar así con ella. Creo que esa es una talla bonita. Y digamos publicar. Y vamos a previsualizarlo. Estamos llegando a alguna parte. Entonces veamos si podemos mejorar algo ahora, antes que nada , podemos seleccionar esta columna de texto. Y por el ancho, queremos que ocupe recuerda, esta columna y esta columna están dentro de este contenedor aquí. Entonces, ¿cuánto de este contenedor debería ocupar cada columna? Seleccionemos eso. Queremos que ocupe el 40%. Por ciento, no píxeles. Ahora bien, esto es altura y haz eso. 40%. Y queremos que esto ocupe el 60%. Entonces diseño 60%. Publica eso. Y vamos a ver. Sí, esa es una mejora mucho mayor. Entonces creo que ahora podemos comenzar con eso. Haremos más mejoras a medida que avacemos. Entonces, ¿qué más queda? Entonces lo único que queda aquí es este patrón de fondo con estas formas geométricas. Entonces sigamos adelante y agreguemos eso. Y eso vamos a agregar a toda la sección héroe contenedor que contiene todo lo demás. Entonces este contenedor rosa aquí, ve al estilo fondo tipo. Seleccionemos tenemos estos patrones de fondo de sección de héroe. Ábrelo y selecciónalo, y ahí vamos. Entonces preparé esas imágenes usando Adobe Illustrator, así que vas a tener que preparar los patrones que quieras usar. Ahora, igual que nosotros, queremos ir aquí y decir posición centro centro. Queremos decir que no se repita. Y para el tamaño de visualización contienen publicar, y vamos a ver lo que tenemos. Ahí vamos. ¿Y qué pasa con la cobertura? Sí, la cobertura es mejor para esto. Vayamos aquí porque quiero que cubra todo el camino hasta los bordes. Entonces ahí lo tienes. Ya terminamos con la sección de héroes. El resto de las secciones van a ser una repetición de lo que acabamos de hacer en la sección de héroes. Pero claro, hay algunas cosas únicas que vamos a hacer. Entonces te veré en la siguiente lección. 12. Crear encabezado: Ahora es el momento de crear un encabezado para nuestro sitio web porque ahora mismo , por supuesto, como puedes ver, no tenemos encabezado, y queremos algo que se vea así. Entonces, ¿cómo creamos eso? Cambiando de nuevo aquí. Vamos dentro de nuestro tablero de instrumentos. Quiero ir al tablero. Y recuerda, agregamos elementos kit luz. Entonces, bajo kit de elementos, tenemos una opción de encabezado pie de página. Así que vamos a hacer clic en eso. Vamos a agregar una nueva plantilla, y la vamos a llamar encabezado. Es nuestro encabezado. Y queremos que se muestre en todo el sitio. Si tuvieras varias páginas web, querrías que se mostraran en todas las páginas web Entonces queremos tenerlo activo. Entonces vamos a Editar contenido. Seremos redirigidos a Elementor para crear un encabezado. Ahora aquí dentro, queremos decir, agreguemos un contenedor, colapsen todos estos paneles que nunca necesitamos. Vayamos a maquetación y agreguemos un contenedor aquí. Y al igual que lo hicimos antes, queremos poder contener nuestro encabezado al 80% de la pantalla. Por lo que este contenedor exterior debe tener un ancho del 100%. Y este interior debería ser el 80% del exterior. Y con eso, queremos ir al exterior y empujar el interior, alinearlo al centro así. Y ahora aquí dentro, queremos tres columnas. De hecho, no necesitamos tres columnas. Sólo necesitamos tres artículos. Necesitamos una imagen y la imagen básica. También necesitamos un nervio. Entonces voy a teclear nervio. Ahora, tenemos diferentes nervios aquí, pero el que queremos es elementos menú nerviosos infantiles. Lo colocamos debajo de la imagen, pero aún dentro de este contenedor interior. Y también queremos agregar un botón todavía bajo elementos básicos nunca atómicos a menos que tengas la versión pro de Elementor Y coloquemos el botón justo debajo de eso. Ahora, seleccionemos el contenedor en sí y cambiemos a fila. Ahora, esos son tres elementos dispuestos como una fila. Quiero seleccionar la imagen. Seleccionemos el logotipo. Creé este logo ficticio. No le pertenece a una persona real. Entonces haz doble clic en eso y vamos a seleccionarlo. Ahora ya es de tamaño lo suficientemente pequeño, pero quiero asegurarme de que somos muy específicos sobre su ancho. Entonces con avanzado, vamos a ir a la costumbre y digamos tal vez el 20 o 25% de este contenedor que lo está acomodando. Seleccionemos el nervio. Ahora, cuando seleccionemos el elemento nervioso, nos pedirá un menú. Si tenemos un menú, se enumerará aquí, pero aún no hemos creado un menú de WordPress. Entonces, antes que nada, déjeme publicar eso. Y volvamos a entrar en Quiero tener un dashboard siempre disponible aquí mismo. Así que dentro de aquí, vamos al menú de apariencia. Y queremos crear un menú. Entonces déjame llamarlo mi menú, y vamos a convertirlo en el menú principal, luego crear menú. Ahora, como ya tenemos la página de inicio, vamos a seleccionarla y agregarla al menú. Se va a enumerar aquí. Y queremos crear elementos adicionales, elementos menú adicionales, servicios, contacto de cartera. Así que vayamos a Links personalizados. Vamos a poner ahí mismo un hash, llamarlo servicios agregados al menú. Vamos a volver más tarde y hacer que estos enlaces realmente lleven a alguna parte. Entonces agreguemos otra cerveza hash, portafolio al menú, y finalmente contactos. Contacto, agregar al menú. Entonces digamos guardar menú. Así que hemos creado mi menú WordPress menú con cuatro elementos de menú. Volviendo aquí, esa es la página. Volvamos al editor de cabecera. Y porque está publicado, refresquemos esta página. Y ahora si yo selepse ¿dónde está ese nervio? Bien, déjame ¿Dónde está el nervio? Si golpeo Control E, podemos ver una visión general de todo lo que tenemos en el editor. Nervio. Entonces se derrumbó en un elemento muy minúsculo. Pero aquí podemos seleccionar el mi menú que acabamos de crear. Entonces seleccionando eso ahora como puedes ver, es visible. Ahora, ya decimos que esto debería ser el 20% del ancho. Hagamos también que el botón ocupe el 20% del contenedor. Y vamos a alinearlo a la derecha. Y ahora para el elemento nervioso, asegurémonos que ocupa el 80% restante. Oh, 60% porque esto es 2020, 40, entonces 60%. Y aunque todavía está seleccionado, vamos al contenido Align Center, así como así. Publica eso. Y queremos cambiarlos a color blanco. Si bien todavía está seleccionado, vayamos al elemento de menú de estilo. En circunstancias normales, hagámoslo blanco en Hover. Hagámoslo naranja. El artículo toma color al pasar el cursor, naranja. Y cuando estemos en la página específica, cuando esté activa, hagámosla naranja. Eso significa que cuando estamos en esa página o sección específica a la que está vinculada por el ítem, hagámoslo amarillo. Publicar. Ahora, vamos a previsualizar eso. Ahora, como puedes ver, no está correctamente alineado. Este botón es demasiado elevado en comparación con todo lo demás. Así que volvamos a entrar aquí. Y con este seleccionado este contenedor aquí, vamos a asegurarnos de que los artículos estén alineados en el centro verticalmente así. Vamos a cerrar eso. Y vayamos a este editor aquí mismo y seleccionemos este botón, copia de fuga derecha, volvamos a nuestro editor aquí, seleccione el botón, estilo de pegado de fuga correcto. Entonces no tenemos que repetir eso excepto que ahora ha sido Necesitamos resetear ahora este látigo del 20% Ahí vamos Así que ahora volviendo aquí a nuestro editor, voy a controlar R para volver a cargar la página Y ahora nuestra página web tiene el encabezado. Así que vamos a previsualizar el encabezado con todo lo demás. Ahí vamos. Ya se ve bien. Pero por alguna razón, este espaciado aquí mismo es mayor que este. No sé por qué. Vamos a indagarlo más tarde. Pero ahora mismo déjame cerrarlo incluyendo eso. Ahora, me gusta reducir este margen en la parte superior derecha de aquí. Entonces, de hecho, si quieres editar tu encabezado, puedes pasar el cursor sobre esta parte justo aquí y hacer clic en encabezado, pero quiero abrirlo en una nueva pestaña, así que voy a usar mi rueda del mouse, presiona la rueda del mouse para abrirla en una nueva pestaña Ahora, como mencioné anteriormente, cada contenedor viene con relleno predeterminado. Entonces voy a seleccionar este contenedor que contiene todo, ir a Avanzado y romper el relleno predeterminado así como así. Y el contenedor exterior también tiene su propio relleno predeterminado. Como puede ver, hemos reducido drásticamente el margen en la parte superior Y ahora si recargamos esta página, observe el encabezado. Ahora, todo está mucho más cerca de la cima. Ahí vamos. Todo bien. Entonces ahora entiendo cuál era el problema. Entonces seleccionando este botón, cuando pegamos los estilos de este botón aquí mismo, reemplazamos los ajustes que habíamos establecido aquí mismo para el botón, alinear, escribir, publicar Debajo de esto. Ahí vamos. Entonces ahora nuestro encabezado se ve increíble, excepto que todavía necesitamos seleccionar el botón, ir al contenido, y cambiar esto para reservarme, publicar eso. Entonces vamos a cerrarlo. Podemos recargar el editor aquí. Ahora podemos previsualizarlo una vez más. Sí. Entonces ahora, ese es el final de la cabecera. En la siguiente lección, veamos ahora cómo crear las secciones restantes. Te veré en breve. 13. Sección de contador: Ahora queremos agregar esta sección de contador aquí mismo. Entonces vamos a ver cómo hacer eso. Al entrar aquí, quiero decir agregar elemento, y quiero colapsar todos estos. Y desplazándonos hacia abajo, queremos agregar un contenedor de diseño aquí mismo Ahora bien, este contenedor de diseño debería tener otro contenedor para contener el contenido real, así que volveré a caer ahí, y esto debería ocupar el 100% del ancho, mientras que este debería ocupar el 80% del contenedor exterior. Volvamos al contenedor exterior y alineemos los artículos al centro. Ahora, aquí dentro, queremos duplicar este texto para que podamos reutilizarlo. Es un encabezado. Y de hecho, algo que olvidé hacer aquí es seleccionar este perro Alex se supone que es un H one. Se trata de una H dos. Sí, ya es una H dos. Y de hecho, tuvimos porque acabamos de duplicarlo de aquí, tiene ese ajuste de margen, lo hemos eliminado. Y fíjense una cosa aquí, esta es en realidad una columna, y esta es otra columna. Entonces lo que necesitamos es un contenedor. Y pon esto en el contenedor que está dentro de ese otro contenedor. Y debajo de él, también queremos colocar un botón. Entonces duplicaré ese botón y lo colocaré debajo del texto. Después duplicaré este contenedor y seleccionaré el contenedor exterior y cambiaré a rollo. Entonces tenemos dos columnas. Y aquí adentro, quiero quitar estos dos Bien, esto no es removible, esto no es removible, así que con razón se puede eliminar Y quiero agregar un contador. Así que arrastra y suelta el contador ahí dentro. Selecciona el contador, duplícalo dos veces. Seleccione el contenedor que los sostiene, cambie a fila. Queremos ir a justificar el contenido al centro y el espacio entre los elementos. Publica eso. Vamos a previsualizar los cambios. Vista previa de los cambios. Exactamente, así. Pero ahora cada uno de estos debería tener Vamos a darle un trasfondo. Vayamos a Avanzado. Seleccione uno de estos contadores. Avanzada. En primer lugar, vamos a darle un poco de relleno, tal vez 20. Entonces pasemos a su fondo. Color de fondo. Voy a seleccionar este azul oscuro o el color que quieras usar. Pega eso ahí. Vamos al número de estilo. Vamos a darle color blanco, y título Blanco también por ahora. Para el número, se puede elegir una fuente más pesada, por lo que el peso de la fuente, negro. Incluso se puede decir una fuente diferente, tal vez monserat Sí, algo pesado así Entonces vayamos al radio fronterizo avanzado de 20. Entonces escribamos filtración, copiemos la fuga correcta, el estilo de la cara, la fuga correcta, estilo de la pasta, publiquemos eso. Aquí mismo, voy a copiar este texto. Vamos a tener que teclearlo, seleccionar esto, ir al contenido. Voy a pegarlo ahí dentro y cambiarlo a blanco Publicar. Yendo aquí. Así como así. Ahora, como puedes ver aquí mismo, el espaciado es increíble en esto. Pero el nuestro aquí no es tan bueno. Así que no tengamos ningún espacio entre ellos. Solo vamos a alinearlos al centro y publiquemos podemos darle a cada uno de estos algún ancho. En primer lugar, vamos a darle a esta columna un ancho de tal vez 40% y esta 60%. Personalizado, 33%. Copiar, fuga correcta, pegar estilo, copiar y pegar estilo, publicar eso. Ahí vamos. Entonces ahora cambiemos los detalles. Esto de aquí podría ser de 55 clientes atendidos. Entonces, ¿cuál es el título? Clientes atendidos. Esto de aquí podría ser ¿ Qué tenemos aquí? Proyectos concluidos. 329 proyectos concluidos. Y esto aquí podría ser del 100%, así que sufijo por ciento actúa facción, garantía. Entonces si lo imposibilitamos exactamente. Ponte en contacto publica eso Ahí vamos. Entonces así es como crear esa sección, y está demasiado cerca de la sección de héroes. Lo que quiero hacer es volver aquí y seleccionar el contenedor que contiene toda la sección de héroe e ir a la altura y cambiarlo a VH. Eso es la altura de vista, y queremos darle 100. Queremos decir, que ocupe toda la pantalla. La sección héroe debería ocupar toda la pantalla, publicarla. Así como así. También queremos seleccionar esto y tal vez este contenedor que sostiene esta sección, darle un margen superior de 50 para separarlo de la parte superior. Todo bien. Ahora, no queremos que toque la sección inferior. Entonces tal vez podríamos reducir el ancho de esta imagen. Publica eso. Así como así. Sí, están debidamente separados. Entonces ahí es a donde vamos a llegar en esta lección. En la siguiente lección, veamos cómo crear esta sección aquí mismo, mis servicios. Entonces te veré en breve. 14. Efectos de encabezado Sticky: Ahora, antes de pasar a esta sección de aquí mismo, notarás cuando empecemos a desplazarnos, el encabezado es pegajoso, y cuando no estamos desplazándonos, los patrones de fondo están hasta la cima Este es el sitio web de referencia, pero en el sitio web en el que estamos trabajando actualmente, si comenzamos a desplazarnos, el encabezado está desapareciendo, y este patrón no está hasta la cima, así que tenemos que resolverlo ahora mismo Y para ello, para hacer que el encabezado sea pegajoso, necesitamos usar un plugin llamado sticky header effects for element. Vamos al interior del tablero de instrumentos. Plugins, añadir plugin. Agreguemos pegajoso. Simplemente escriba encabezado de encabezado pegajoso. Así que los efectos de encabezado pegajosos para elementor instalan ahora. Entonces activemos eso. Y ahora aquí está. Así que volviendo aquí, pasemos el cursor sobre esto y digamos enlace correcto, enlace abierto en Nueva pestaña Y entonces lo que tenemos que hacer es seleccionar el contenedor que contiene todo el encabezado e ir al diseño de colapso avanzado, ir a efectos de encabezado pegajoso y habilitarlo. Cierra este anuncio pro. Ahora mismo, ya está pegajoso. Lo hemos habilitado, así que va a quedar pegajoso en la parte superior. Pero lo que queremos es tener un encabezado transparente, y eso significa Ahora, si vamos aquí y refrescamos este editor, mira el patrón detrás de la sección de héroes. Ahora, como puedes ver, los patrones están hasta la cima. Si hago una vista previa de esto, como pueden ver, están todo el camino hasta la cima. Pero ahora un problema que notarás es cuando empezamos a desplazarnos, no hay fondo en el encabezado Todo se vuelve todo abarrotado. Así que volviendo aquí, justo debajo del encabezado transparente, podemos elegir un color de fondo para cambiar también después de desplazarnos Así que vamos a volver aquí y seleccionar este azul oscuro, volver aquí, color de fondo, seleccionar eso, y luego pegar eso ahí y publicar. Cierra estos, ve al editor y actualiza esta vista previa. Ahora cuando empecemos a desplazarnos , cambiará a azul, manteniendo todo visible Cuando nos desplazamos hacia arriba, el fondo desaparece. Entonces así es como hacer eso. En la siguiente lección, veamos ahora cómo crear la sección de servicios. 15. Sección de servicios: Ahora es el momento de crear la sección de servicios. Entonces veamos qué tenemos aquí. Tenemos estas cuatro cajas y este tipo. Así que volvamos a entrar aquí. Vamos a reutilizar algunas de las cosas que ya hemos creado. Así que sólo voy a duplicar esta sección. Y si, ya tenemos estos dos. Porque nota aquí, esta es una columna y otra columna. Entonces, vamos a agregar un encabezado y algún texto encima de él. Entonces por encima de este contenedor, vamos a duplicar esta muñeca Alex. Y quiero colocarlo justo encima de esta sección. Y también quiero seleccionar para duplicar este texto. Se trata de reutilizar cosas que ya has estilizado justo debajo de Alex Entonces vayamos al estilo. Alinear al centro, seleccione esto. Queremos cambiar esto a la edad de dos años, e ir al estilo Título. La tipografía reduce el tamaño, tal vez al tamaño de la espalda. Eso es razonable. Y fíjate aquí que tiene este separador. Así que vamos a activar separador de contenido. Pero ahora tenemos que deshacernos de ese margen inferior así. Y quiero copiar este texto. Seleccione esto, vaya al contenido todo Control Shift VL. Observe aquí, esto tiene un ancho restringido. Entonces mientras se selecciona, quiero ir a ancho personalizado avanzado Quería ocupar el 60% del ancho disponible de este contenedor que lo sostiene. Cambia el separador, selecciona estos textos. El separador debe ser blanco. Y deberían ser mis servicios. Mis servicios. Ahora, quiero que sea el ras, los colores deben ser amarillos en lo normal. Copia eso entra aquí, va a seleccionar aquí, espacio, pegarlo ahí, cortar esto, quitar ese espacio, ir aquí en hover, así Ahora, dentro de estas dos columnas ya creamos. En primer lugar, quiero seleccionar esta columna y decir que debería ocupar el 40% y estos 60%. Quieres quitar todo de aquí. Y a partir de aquí. Todo bien. Hay un bicho. Esto no funciona, así que haz clic derecho en eliminar. Entonces tenemos estas dos columnas publicadas. Digamos, sí, esto es 60 40 con solo mirarlo. O simplemente podríamos hacerlo 50 50 o 45 55. Ahora, aquí dentro, también necesitamos agregar necesitamos agregar algunos contenedores, uno arriba, y otro debajo de él. Y luego en cada una de estas dos filas, vamos a tener otro par de contenedores más. Así que duplique eso. Pero ahora seleccionando esto, vamos a cambiar a fila, entonces uno, dos. Entonces, de hecho, permítanme simplemente eliminar esto, seleccionarlo y duplicarlo para que sea uno, dos, tres, cuatro. Duplicar esto y dejémoslo aquí. Ir al estilo, título, tipografía y reducir el tamaño Vayamos al contenido. Espera, estilo, Alinear centro. Y el separador debe estar arriba. A ver. Separador B. Digamos arriba. Voy a duplicar eso. Colócala ahí, duplícalo de nuevo. Colócala ahí dentro. También voy a duplicar solo puedo duplicar esto o esto y dejarlo caer justo debajo de ese centro de Aline. Tiene un ancho. Entonces, digamos por defecto. Y quiero copiar esto. Selecciona esto, ve al contenido, pegarlo ahí. Es el mismo texto, así que sólo voy a duplicar eso. No, justo debajo de eso. Lo que tenemos aquí es un contenedor que tiene dos columnas. Esa es esta columna y esta columna. Y en esta columna, tenemos un contenedor contiene dos columnas de dos contenedores. Ahora lo que queremos hacer es darle estilo a esto. Sólo dale este color azul oscuro. Voy a seleccionar esto para copiar su color, ir a su fondo. Copia eso. Seleccione este contenedor, vaya a Fondo avanzado. Color, prueba eso ahí. Vamos al acolchado. Vamos a darle un relleno de 20. Y vayamos a su estilo de borde, el borde 20. Seleccione esto. Bien, solo seleccionemos mientras aún esté seleccionado, haga clic con el botón derecho en copiar Seleccione este estilo de pegar lik correcto. Seleccione este estilo de pegar lik correcto. Estilo de pasta. Ahora, notarás que aquí hay demasiado espacio, y eso es por el relleno predeterminado del contenedor que está conteniendo los dos. Entonces vayamos a avanzado, rompamos ahí el relleno. Seleccionemos éste también. Este contenedor. Avanzado, quita ese relleno, publica eso Y ahora no me gusta la forma en que esta esta cerca de la parte superior. Podríamos seleccionar este rubro, ir al margen avanzado top ten, a la derecha falta copia. Seleccione eso, haga clic con el botón derecho en pegar estilo, selecciónelo, haga clic con el botón derecho en pegar estilo, pegue estilo, publique allí. Ahora, también notarás que tenemos estas decoraciones aquí mismo. Si los necesitas, solo podemos ir a uno de ellos, ir al estilo, superposición de fondo y darle un degradado. Y el degradado va a usar este azul claro Y el azul oscuro para el segundo color. Y queremos cambiar a la radio. Entonces, de hecho, este azul debería ser Este azul de aquí mismo debería ser el segundo color. Y el azul oscuro aquí debería ser el primer color. Entonces digamos abajo a la izquierda Opacidad. Vamos a empujar la ubicación al 80%. Entonces haz lo que acabo de hacer. Radio, tipo radiante, posición inferior izquierda. Puedes cambiar la opacidad si quieres y la ubicación al 80%. Ahora sólo voy a seleccionar esta copia. Estilo de pasta. Estilo de pasta y estilo de pasta. Ahora, también tiene una frontera. Así que vamos al estilo. Borde sólido. Y hagamos que el color del borde sea azul. Vamos a darle un poco de azul así. Color de borde de uno. No, digamos dos, borde con Sí, así que copiar y pegar estilo, seleccionar, estilo de fuga correcto, seleccionar fuga correcta, pegar estilo, publicar eso. Ahora bien, si tenemos una vista previa de eso, ahí vamos. Entonces, en la siguiente lección, sigamos adelante y agreguemos esta imagen. Te veré en breve. 16. Imagen de servicios: Entonces ahora es el momento de crear la imagen de los servicios. Pero antes de hacer eso, acabo de notar que olvidé darle a esta sección un fondo azul oscuro. Así que sigamos adelante y seleccionemos el fondo azul oscuro, copiemos eso, y volvamos a nuestro editor, seleccione la sección, vaya al estilo. ¿Esta seleccionada? Muy bien, estilo. Fondo apretado. Vamos a darle ese azul oscuro. Ahora, aquí mismo, lo que queremos hacer es darle el color azul claro. Entonces seleccionaré esto. Seleccione esta columna, vaya a estilo. Fondo azul. Démosle también un radio fronterizo de 20. De hecho, el fondo no debe ser azul. Debería tener un gradiente. Así que volvamos al gradiente de color de fondo. Y vamos a darle el mismo azul claro pero hazlo más oscuro. Y luego cámbielo a radio. Podemos mover la ubicación ligeramente o reducir este azul así. Entonces ahora lo que queremos hacer aquí es simplemente agregar una imagen y la imagen básica. Seleccione eso. Vamos a subir la imagen que queramos. Este es el que utilicé. Al final del día, solo estamos aprendiendo a usar Elementor Deberías sentirte libre de crear cualquier tipo de sitio web que quieras. Ahora, agreguemos un divisor justo debajo de él. Así que agrega. Aún bajo básico, tenemos el elemento divisor. Dejémoslo justo debajo de la imagen. Bien, parece que esta columna está establecida en fila por defecto. Sí, deberíamos cambiar a columna vertical. Y ahora agreguemos ese divisor. Así como así. Con el divisor seleccionado, voy a ir a ancho y reducirlo a digamos solo 50% y alinearlo al centro, ir a margen superior avanzado. Hasta ahí, luego estilo. En primer lugar, cambiemos estos a barras, pero puedes cambiarlo a lo que quieras En caso de que no se vea como barras, sólo tiene que ir aquí a la cantidad El tuyo podría aparecer. A ver. Todo bien. Aumentemos el peso de cada corte. Incrementa ese tamaño así. Reduzca ligeramente el peso. Así que juega con estos ajustes hasta que tengas la diagonal correcta o simplemente elige cualquier otra opción que quieras aquí También podrías ir con rizado, que, no, curvo. A mí también me gusta este. De hecho, déjame quedarme con eso y luego esperar. Tamaño. Oh, esa es la altura, cantidad. Y quiero elegir este color amarillo. Y dale ese color amarillo. Si cambias a barras, juguemos con el hueco, reduzcamos el ancho nuevamente y luego publiquemos Esta imagen es un poco más alta que los cuadros de texto. No está mal, pero queremos asegurarnos de que todo sea un poco más compacto. Esta sección también es demasiado amplia. Por lo que quiero seleccionar todo el contenedor que los sostiene y cambiarlo a 70%. Publica eso. Y veamos qué tenemos a continuación. Sí, es un poco más equilibrado. Así que simplemente juegas con esos escenarios y ves cómo puedes hacer que esto sea más creativo. Ahora, no he actualizado estos servicios. Por ejemplo, esto podría ser, vayamos al contenido. Eliminemos ese M. Luego cambie los servicios a diseño de espacio gráfico, seleccione esto, elimine el modelado de diseño de espacio web M . Publica eso. También puedes jugar con el tipo separador si vas al separador. ¿Dónde cambias eso? Creo que está bajo separador de contenido. Puede cambiar a tal vez sólido sólido con estrella Sí, solo juega con eso y mira los mejores resultados que puedas obtener. Iré con un defecto punteado. Publicar. Una vez más. Sí, creo que ahora se ve bien. Esto debería ser más convat. Seleccionemos el texto. Ir a avanzado con, voy a decir 50%. Publica, y vamos aquí. Sí, incluso puedes ir el 40% del ancho. 40% de esto. Entonces aquí es donde vamos a terminar esta lección. Ahora, una cosa más. Necesitamos un poco de relleno por debajo y por encima del contenido del contenedor. Entonces el relleno debe estar en el propio contenedor, contenedor seleccionado, avanzado, romper eso, luego margen superior de 50 relleno de 50, relleno inferior de 60 publicar. Así como así. Entonces te veré en la siguiente lección. 17. Sección de portafolio: Hola, bienvenido de nuevo. Entonces ahora es el momento de crear la sección anterior de obra o cartera. Entonces, ¿cómo se crea esto? Volviendo a esto. Vayamos a nuestro editor. Sólo voy a duplicar esto. Así ahora tenemos dos. Seleccionando el propio contenedor, va a ir al estilo y quitar el color. Seleccione fondo y luego elimine eso. ¿ Qué más necesitamos? Tenemos que retirar estos contenedores, todos ellos. De hecho, vamos a crear un contenedor. Solo agreguemos un contenedor justo debajo. Sí. Y seleccionemos el propio contenedor, y hagamos que sea 60% del ancho. De hecho, 50 o 40%. 50%. Ahora, lo que queremos hacer es agregar un cuadro de imagen aquí. Así cuadro de imagen. Y queremos usar no use el cuadro de imagen del propio Elementor Usa el cuadro de imagen de elements kid. Voy a dejar eso ahí dentro. Y voy a duplicarlo dos veces, uno, dos, después seleccionar el propio contenedor y cambiar a fila. Ahora tenemos tres cajas de imagen. Ahora quiero ahora, quiero copiar este nombre de proyecto, seleccionar la primera caja de imagen. Vamos a mover eso. Vamos al cuerpo, cambiemos el rumbo. Vamos a ir a la descripción, pegarla ahí, y el botón debería guardar ver proyecto. Colapsar eso. Vamos a la imagen. Quiero seleccionar una imagen, subir archivos. Voy a seleccionar esta como la primera imagen. Seleccione eso. Ahora con el contenido hecho, vamos al estilo. Vamos a la imagen y le demos un radio de borde. De top 20. Entonces eso es arriba a la izquierda. Vamos a la derecha, 20. Sí. Vamos al cuerpo. Radio de borde, rompe ese fondo 20. Bien, primero vamos a darle un trasfondo. Tipo de fondo. Vamos a darle un Vamos a darle este color por ahora. Entonces ahora cuando le dimos un radio de botella de 20, se la dio de este lado. Entonces vamos a la izquierda 20. Vamos al botón. Todo bien. Vamos a darle este color oscuro. Entonces tipo de fondo ese color oscuro así. Y al flotar, queremos que tenga un color degradado. Así que escojamos nuestro amarillo y naranja. Debe ser de color amarillo. Hablemos naranja como primer color. Y ahora cambiemos estos a 90 grados, así como así. También podemos cambiar este color bajo el cuerpo Título tipografía, Vamos a darle esa tipografía de título sobre color. Debe ser un gris más claro. Sí, se asentó gris claro. Copia esto, selecciona este estilo pastetyle, selecciona este estilo de pegado Seleccione esto elija una imagen de proyecto de imagen. Yo seleccionaré eso. Ahora, prueba y asegúrate de que todas las imágenes del proyecto de imágenes sean del mismo tamaño. Porque es el tamaño de la imagen lo que determinará. Como puedes ver ahora mismo, se ven un poco raros, pero simplemente no tuve tiempo preparar las dos diferentes para preparar todas las imágenes del proyecto, sino que intenta hacerlas del mismo tamaño, mismas dimensiones para que todas se vean idénticas así . Como puedes ver, estos son más presentables que tener uno alto, uno bajo, pero eso depende de que publiques eso Entonces déjame copiar esta descripción, seleccionar esto, ir al contenido, pegar el cuerpo eso. Copia esto, ve aquí, cuerpo, pegarlo Z cultura revista es el título. Barton debería leer Ver proyectos. Publica esa Vista. Desplazamiento hacia abajo. Ahí vamos. Una bonita sección de mi cartera. Mi cartera. Voy a pegar eso ahí dentro. Y creo que ahora estamos listos para pasar a la siguiente sección, que es la sección de testimonios de clientes. ¿Qué dice la gente sobre tu negocio? Te veré en breve. 18. Testimonios de clientes: Ahora es el momento de crear esta sección de testimonios de clientes, y esto es lo que queremos lograr. Entonces cambiando a nuestro editor. Justo aquí. Sólo voy a duplicar esta sección. Así que duplique eso. Y ahora lo tenemos aquí abajo. Y solo voy a borrar todo lo que hay dentro de este contenedor porque ya tiene la configuración que necesitamos. Ahora, voy a decir añadir elementos, testimonios. Y como puedes ver, tenemos un testimonio gratis con Elementor y otro gratis con kit de elementos Este es el kit de elementos que necesitamos. Así que voy a dejar eso ahí. Y como puedes ver, tiene varios estilos. El que elegí para la referencia es éste. Entonces elegiré el estilo cinco. Entonces ahí lo tenemos. Y voy a entrar en la configuración, y queremos mostrar dos diapositivas en un momento dado, así que una, dos. Mientras se selecciona esto, iré a colapsar la configuración, expandiré testimonial, y estos son los marcadores de posición de testimonio predeterminados Entonces voy a ampliar uno testimonial. Así que solo voy a escoger algunos textos, tal vez Este es solo un texto marcador porque no quiero escribir esto, pegarlo ahí Eso fue lo que dijo el primer cliente. Y voy a darle el nombre de este cliente Clark Kent. Designación tal vez sea más grave. Metro Goldwine. El segundo, tal vez colapsar Clark Kent e ir a testimonio dos Digamos que Jennifer Anniston con designación E CFO Green Goblin Sólo voy a agarrar algo de texto aquí mismo. A lo mejor esto. Y pegarlo dentro de la revisión testimonial, ampliar los terceros. Así que al menos tenemos una sección básica testimonial, pero podemos hacerlo mejor Entonces, antes que nada, vayamos a esto y cambiemos la cartera a testimonios. Y comencemos aquí con los testimonios de clientes. Ahí vamos. Colapando el título nuevamente y seleccionando esto para el testimonio aquí, podemos optar por dar una calificación A lo mejor este tipo nos dio una calificación de cuatro estrellas, y los demás nos dieron dos. Así que sólo voy a publicar eso. Entra en estilo porque ahora queremos darle estilo a esto. También podemos volver aquí testimonial, ampliar cada testimonio, y agregar un cliente Avatar Entonces voy a seleccionar eso e ir a subir Digamos que esto es reloj. Seleccione. Y ahora ahí vamos. Entonces haré lo mismo con estos otros dos. Publica eso y vamos a previsualizar los cambios. Desplazamiento hacia abajo. Ahí vamos. Así que ahora podemos darles algunas esquinas redondeadas si así lo prefieres. Entonces, mientras aún esté seleccionado, iré al estilo, al radio del borde de diseño. A ver, 20, así como así. Publicar. No tenemos que profundizar, pero como puedes ver, podemos editar diferentes partes de los testimonios. Por ejemplo, estas citas, icono de cotización, podemos cambiar su color. Como puedes ver, podemos darle el color que queramos. Ahora mismo, es rojo, pero eso no tiene sentido. Entonces solo lo voy a dejar en algún azul, muy Digamos ahí mismo, pero podemos reducir la opacidad para que sea menos visible, tal vez hasta ese spot y publicarlo Vista previa de los cambios. Y ahí vamos. También puedes volver aquí a la configuración de contenido y establecer la velocidad. Si quieres que se quede más tiempo antes de desplazarte, tal vez puedas decir que queremos tomar 2000 milisegundos Eso son 2 segundos. También puedes decidir mostrar puntos, por ejemplo. Entonces voy a mostrar puntos aquí mismo para que pueda hacer clic en los botones para navegar. Y puedes editar el color del punto punto. Creo que es tipo de fondo. Se le puede dar ese color amarillo. Muy bien, vamos a darle blanco y cuando esté activo, podemos darle ese color amarillo. Cuando esté activo, déjame seleccionar este estilo, ir a él foco título, copiar eso, volver a esto, ir a punto, ir a fondo activo, darle ese color. Entonces ahora el activo es el amarillo. Publica eso. Vista previa de los cambios. Ahí vamos. Entonces así es como crear la sección de testimonios. 19. Efectos de movimiento: Ahora es el momento de trabajar en los efectos de movimiento. Si refresco la página, notarás que los elementos se mueven sin problemas. Así que permítanme refrescar esta página así como así. Motion estos efectos de movimiento realmente mejoran la experiencia del usuario. Cuando me desplace, tenemos esa entrada ahí mismo. También tenemos eso. Entonces, ¿cómo creamos eso? Ir a nuestro editor Regresemos aquí. Sólo voy a cerrar eso. Porque tenemos el encabezado aquí mismo, y la sección de héroe tiene columnas que ahora van hasta la cima porque este es un encabezado pegajoso. Seleccionar estas columnas dentro la sección de héroes es un poco complicado. Entonces le pegaré a Control I para sacar a colación la estructura. Y ahora podemos ir dentro de estos contenedores. Ahora, seleccionemos ese contenedor con todo dentro de él, y vayamos al diseño colapsado avanzado, vayamos a defectos de movimiento. Vamos a la animación de entrada. Me encanta desvanecerse a la izquierda. Eso lo va a traer desde la izquierda. Y claro, voy a seleccionar esta otra, la que sostiene la imagen. Vaya al diseño de colapso avanzado, vaya a efectos de movimiento, animación de entrada, desvanecerse a la derecha, así como así. Pero ahora, esta imagen está separada del fondo. Entonces queremos un breve retraso en esta imagen del tipo. Entonces expandiendo esto, de hecho, solo puedo seleccionar el elemento guy, luego ir a diseño avanzado, efectos de movimiento. Animación de entrada, desvanecimiento a la derecha, pero queremos retrasar la animación, retraso de animación tal vez en 300 milisegundos Entonces eso significa que porque la propia columna tiene ese desvanecimiento derecho sin demora alguna, va a entrar primero, y luego la imagen tiene un retraso de 300 milisegundos Va a entrar un poco más tarde. Así que vamos a publicar eso y previsualizar los cambios. Revisar eso. Exactamente así. Pero ahora tenemos que hacer lo mismo para este bloque de texto. Vamos a refrescar esta página y ver. Están entrando todos porque solo animamos el contenedor que los sostenía. Si entramos primero en los elementos individuales como este texto, podemos darle el mismo tratamiento, cada elemento, el mismo tratamiento. Entonces de hecho eso puede entrar por defecto con el contenedor, entonces aquí es donde comenzamos nuestro retraso. Alex, sin embargo, vaya a avanzado, efectos de movimiento de diseño, desvanecimiento la izquierda con un retraso de 200 milisegundos Entonces este colapso los efectos de movimiento de diseño, desvaneciéndose a la izquierda, 300 milisegundos Tal vez seleccionemos todo este contenedor que contiene estos dos, coloquemos los efectos de movimiento, se desvanecen a la izquierda 400 milisegundos. Puedes ser tan creativo como quieras. Como ya has notado aquí mismo, tenemos varios otros tipos de animaciones. No tienes que hacer desvanecerse. También puedes hacer zoom o rebotar en lo que quieras. Así que vamos a previsualizar los cambios ahora. Exactamente así. Volvamos a actualizar la página. Ahí vamos. Eso me encanta. Entonces ahora, esto es lo mismo que vamos a repetir por todas partes en cualquier otro lugar que queramos. Vamos a hacer esto ahora, y te dejaré esto a ti para que lo hagas como una tarea. Entonces el mismo caso aplica a esto. Voy a seleccionar esto. Contraer esos efectos de movimiento, desvaneciéndose a la izquierda. Seleccione esto, diseñe los efectos de movimiento, desvaneciéndose a la derecha. Voy a seleccionar éste, el botón, darle un retraso. Desvanecimiento a la izquierda con un retraso de 300 milisegundos. También voy a dar esto por defecto, este contenedor trae todo al mismo tiempo. Quiero que solo traigas esto primero, entonces esto va a tener un retraso de 200 y este 300. Entonces con este seleccionado, vayamos aquí desvaneciéndose a la derecha, retraso de 200 y este retraso de 300 Bien. Se desvanecen a la derecha. Bien. Ahí vamos. Así que previsualizar eso. Exactamente. Entonces si cambio a nuestra referencia, si refresco esto. Mira cómo entran estos. Entonces piensa en cómo lograr un resultado similar al mío. Esa es tu tarea. Espero que entienda lo que hicimos aquí arriba. Es una tarea interesante que creo que vas a disfrutar. 20. Enlaces: Ahora es el momento de asegurarnos de que nuestro sitio web sea navegable. Cuando las personas hacen clic en Enlace, tienen que ser llevadas a alguna parte. En nuestro sitio web de referencia, al hacer clic en Servicios, se desplazará hacia abajo hasta mi sección de servicios. Si haces clic en cartera, se desplazará hacia abajo hasta mi trabajo anterior. Si vamos al contacto, va a la sección de contacto. ¿Cómo agregamos enlaces y cómo nos aseguramos de que cada clic de enlace te lleve al lugar correcto? Veamos cómo hacer eso. Aquí estamos dentro de nuestra área de trabajo. Si hago clic, vamos al editor. Si selecciono el botón de servicios, como ve, tenemos un marcador de posición aquí Pero lo que queremos hacer es asegurarnos al hacer clic en esto, se desplaza hacia abajo a esta mi área de servicios Entonces lo que queremos usar es un enlace de anclaje. Entonces voy a decir Agregar elemento, ancla, ancla de menú. Y lo que esto hace es colocarlo exactamente donde desea que el botón haga clic para que lo lleve. Entonces queremos que nos lleve aquí. Entonces voy a arrastrar este elemento ancla aquí mismo. Y este no es el lugar correcto, pero quiero ilustrar por qué no es el lugar correcto. Entonces lo colocamos ahí mismo, y ahora es el ítem seleccionado. Entonces lo que queremos hacer aquí es darle un nombre, sea cual sea el nombre que vamos a usar en el campo link del botón. Entonces esto es servicios. Podría ser cualquier nombre. Entonces porque le hemos dado los servicios de nombre, este es el destino. Entonces cuando vamos al botón aquí en el campo de enlace, queremos darle ese nombre de destino. Entonces servicios. Y eso significa que cuando le hagamos clic, nos llevará. Me desplazaré hacia abajo hasta la sección de servicios. Pero ahora el problema es que nos llevará aquí. Lo que hace es que se desplaza y pone este elemento ancla en la parte superior Entonces si publico esto y previsualizo los cambios. Si hacemos clic en estos servicios, como puede ver, está ocultando el rumbo de donde queremos estar, y no queremos ahí. Por eso dije que no es correcto ponerlo ahí. Esto es solo un bug basado en el diseño del software. Y entonces lo que queremos hacer es colocarlo un poco más alto para que cuando se haga clic, los servicios, el rumbo sea un poco más bajo Entonces queremos arrastrar esto y colocarlo tal vez ahí dentro de la sección anterior. No importa en qué sección se encuentre. En lo que queremos pensar es este elemento de anclaje se colocará en la parte superior. Y si el encabezado que quieres está demasiado cerca de él, va a estar oculto por este encabezado flotante. Entonces queremos que esté más lejos de nuestro rumbo de la sección objetivo. Entonces ahora que está ahí, publiquemos y previsualicemos los cambios. Ahora cuando hacemos clic que se coloca esta cosa en la parte superior. Y debido a que aquí mismo existe esta brecha entre esto y el rumbo, al menos se ha empujado el rumbo hacia abajo. Entonces esa es la mesita de lo que queremos lograr. Lo siguiente que queremos hacer es ver mi trabajo. Entonces porque ahora sabemos de la nomenclatura de destino, lo que podemos hacer es simplemente darle la cartera como nombre, cartera. Y así duplicaré este ancla. Y arrástralo hacia abajo no puedo seguir desplazándome, así que déjame borrar eso e ir aquí, luego escribir ancla Quiero dejarlo aquí mismo en esta sección anterior. Si bien todavía está seleccionado, vamos a darle ese nombre de cartera. Y debido a que nuestro botón ya tiene el portafolio hash publicado entramos aquí, haga clic en esto será llevado a mi sección de cartera. Ahora bien, la gran pregunta es, ¿qué pasa con estos que están en la cima Si hago clic en Servicios, no va a ningún lado. ¿Cómo creamos este menú? Fuimos dentro del tablero de instrumentos. Así que entremos en los menús de apariencia. Y recuerda cómo creamos estos enlaces personalizados. Entonces, si expando este enlace personalizado, recuerda que tiene una URL. Usamos hash. Mientras lo estábamos creando , añadimos un hash. Esto es. Entonces esto es servicios. Colapsar eso, y esto es cartera. Colapso ahí. Entonces claro, de la misma manera, digamos que eso es contactar y guardar menú. Ahora, volveremos aquí y actualizaremos este editor para que esté al tanto de los cambios que hemos realizado en el tablero. Ahora vamos a previsualizar los cambios. Ahora, si haces clic en Servicios, nos llevaremos su cartera ahí mismo. Y contacto, no hemos agregado un elemento ancla. Déjame cerrar eso y retroceder. Si nos desplazamos hacia abajo, solo tenemos hasta testimonios. Déjame simplemente duplicar esto ahora que tenemos esto. Podemos decir, eliminemos este cliente, digamos espacio de contacto, M. Y ahora podemos decir agregar ancla, y coloquemos justo en esta sección anterior. Contacto, publicar. Y porque ya le dimos este contacto hash, si vamos aquí y hacemos clic en contacto, nos van a llevar aquí. Ahora, vamos a estar trabajando en este formulario de contacto. Si vamos al sitio web de referencia, tenemos un formulario de contacto que necesitamos crear, y eso es para una lección posterior. Así que no te preocupes por eso. Solo queríamos acertar los enlaces. Ahora, también tenemos este libro yo. Entonces claro, vamos a ir a Elementor, derecha, link, Openlink en Nuevo tap Quiero editarme este libro. Y es redundante, pero es solo para mostrarte que puedes tener un botón por aquí, pero también nos va a llevar al formulario de contacto, porque si alguien quiere reservarte, irá al formulario de contacto. Entonces libro M es el botón. Entonces contacta, publica. Muy bien, así que volviendo al editor, refrescar. Y también refrescar esta página aquí y decir Book me. Nos llevará a la página Contáctame. Entonces creo que ese es el final de esta lección. Te veré en la siguiente. 21. Sección de pie de página: Ahora es el momento de crear el fer. Vayamos a nuestro editor aquí mismo. Entonces ahora no vamos a crear el pie de página aquí mismo. Esto ahora está reservado para el formulario de contacto. Vamos a dejar a ese editor. Tampoco vamos a trabajar en la sección de encabezado. Vamos a ir dentro del tablero y recordar cómo creamos el encabezado usando kit de elementos, encabezado y pie de página. Así que volviendo al kit de elementos del tablero, encabezado pie de página. Ahora tenemos un encabezado. Digamos agregar nuevas plantillas pie de página, elija pie de página aquí. Hagámoslo visible en todo el lado, y digamos editar contenido. Aquí estamos. Ahora, esto nos permite aprender también algo más sobre Elementor, que es que puedes usar plantillas prefabricadas No tienes que crearlo todo tú mismo. Estas son plantillas Elementor, y estas son plantillas de kit de elementos Entonces voy a hacer clic en eso, y esto va a abrir este pop up. Como puedes ver, tenemos todas las páginas. Página completa, puede simplemente hacer clic e instalar en lugar de pasar horas creando la página usted mismo. Pero claro, querías aprender a construir páginas web desde cero antes de empezar a usar plantillas. Ahora, vayamos a la categoría y elijamos pie de página. Sí, vamos a pie de página aquí mismo. Y el que elegí es este de aquí. Entonces sólo voy a decir insertar y ya se ha insertado. Ahora, recuerde, nuestro sitio web está ocupando el contenedor principal está ocupando el 100%, y el contenedor que contiene el contenido dentro del contenedor exterior es del 80%. Así que vamos a asegurarnos de que ese es el caso con esta plantilla. Si selecciono esto, como pueden ver, este es Fitzels, queremos asegurarnos de que sea porcentaje y sea 100% Y este Control interior I para que pueda seleccionar este contenedor que contiene el contenido. Quiero que sea el 80% del contenedor exterior, y ahora seleccionando el contenedor exterior, alineemos todo al centro. Publica eso y revisemos los cambios. Revisar eso. Ahí vamos. Ahora, podemos hacer clic en esto para agregar un logotipo. Sólo va a seleccionar nuestro logo, seleccione. Voy a ir al sitio web de referencia y seleccionar copiar el mensaje de foto aquí. Pega eso ahí dentro. No, ese es el rumbo. W la descripción del título. Control de Cambio. Volviendo a la referencia, elaborando materiales de comunicación atemporales, e ir a la descripción del título, A, Cambio de control Y selecciona este botón. Ver mi obra. Y quiero hacer de esto un enlace externo. Entonces digamos, de hecho, si vamos a mi sitio web de referencia aquí mismo, esta es la referencia. Si hago clic en esto, va a abrir una nueva pestaña e ir a mi cartera de manos B. Ese es mi trabajo. Así que ver mi obra, abre mi obra en una nueva pestaña. Entonces, ¿cómo hacemos eso? Volviendo aquí, permítanme copiar esto de la referencia. Ahora, volviendo aquí, tenemos seleccionado el botón. Voy a pegarlo en el campo URL, y para abrir en una nueva pestaña, voy a hacer clic en esto y decir abrir en Nueva Ventana. Después publica eso. Revisar eso. Ahora bien, si hago clic en esto, va a abrir mi cartera de Behans. Entonces como puedes ver, esto todos los derechos reservados y N bar aquí necesita algo de edición. Queremos que el contenedor que los sostiene sea también 80% del contenedor exterior. Esto no está en línea con nuestra combinación de colores. Entonces quiero entrar nuestra página aquí y seleccionar uno de los elementos con el color. Vamos a copiar este amarillo, volver al editor de pie de página, seleccionar este elemento, ir a estilo, título enfocado. Es el mismo elemento de encabezado. Publica eso. Si selecciono esto, como pueden ver, la combinación de colores tampoco es la misma. Esta es una lista de iconos. Entonces, yendo al texto de estilo, Hover, pega ese color ahí mismo Al flotar, debería ser esa marca amarilla. El mismo caso se aplica a este estilo de botón. El color del texto en H debe ser el color de nuestra marca. Publicar. Vamos a comprobarlo. Ahí vamos. Pero ahora necesitamos actualizar los botones porque no van a ningún lado. Estos llegaron con la plantilla. Nosotros no los pusimos. Entonces seleccionando el contenido de los elementos, vamos a ir a la B. A solo debe ir a la URL, la página de inicio, colapsar arriba, ir a cartera. Portafolio debe ir a HH, portafolio Recuerda el ancla, los servicios deben ir a hash Servicios. Servicios, y contacto deben ir a hash Contacto. Publica eso y vamos a previsualizar los cambios. De hecho, debería estar en esta página. Déjame refrescar la página para que el pie de página reflexione. Ahora bien, si hago clic en cartera, va a ir ahí. Si voy a contactar, vaya ahí abajo, si voy aquí abajo, servicios, se desplazará hacia arriba. Muy bien. También puedes hacer clic en esto para ir a la cima, así como así. Creo que el pie de página ya está cubierto. Ahora bien, está este elemento de iconos sociales, que probablemente sea algo ahora fácil de hacer en base a todo lo que hemos podido hacer hasta ahora. Entonces antes que nada, si expandimos el ícono de Facebook, podemos ir al color y decir personalizado y cambiarlo a ese color que queramos. No lo tengo en mi portapapeles. Pero eso es algo que puedes hacer. Si quieres cambiar el color al color la marca para que al pasar el cursor, cambie a este naranja o amarillo, esa es una tarea que debes hacer Pero por lo demás, ahora todo lo demás está cubierto. También podemos seleccionar esto y cambiar este contenido 2027. Y cambia este pin de foto a Alex Doe. Tu nombre ahora. Publica eso. Alex Doe ARs Reserva. 22. Sección de contacto: Tiempo para crear un formulario de contacto para nuestro sitio web de una sola página. Entonces yendo a nuestro editor aquí mismo, ya habíamos creado una sección de contacto. Lo que falta aquí es un formulario de contacto. Entonces como mencioné anteriormente, para crear un formulario, necesitaremos un plugin, un plugin de formulario. Hay muchos tipos de plugins de formulario. Mi favorito y el que uso es el forminador. Así que vayamos dentro de nuestro tablero. Yo sólo voy a hacerlo porque ya terminamos con la FUTA, salir a Wordpress Eso nos llevará al tablero. Voy a ir a plugins, añadir plugin. Y voy a escribir aquí. Permítanme simplemente desestimar todos estos Aquí, voy a escribir Ominator. Aquí estamos FormatorFMS instalado ahora Activar. Se mostrará aquí mismo. Sólo puedo ir directamente a Formularios. O permítanme simplemente hacer clic en el tablero para llevarnos a la página principal del complemento. Aquí está la página principal. Aquí, quiero elegir solicitud de cotización porque esencialmente lo que queremos aquí es que alguien solicite una cotización. Si miras el sitio web de referencia que creé, ¿dónde está el sitio web de referencia? Aquí queremos que alguien pueda elegir un servicio de diseño web modelado de tarjetas, tal vez elija la edición de video, luego escriba algunos detalles del proyecto, luego su nombre y dirección de correo electrónico y solicite un presupuesto para este proyecto que acaban de describir. Entonces, ¿cómo hacemos eso? Volviendo aquí, podemos crear un formulario desde cero, pero esa es una lección para una clase futura. En este momento solo podemos usar una plantilla. Así que crea forma. Y así estos son los campos, servicios, nodos adicionales, nombre, dirección de correo electrónico, número de teléfono. Si no quieres el número de teléfono, simplemente puedes eliminar ese campo. Si quieres cambiar el nombre de cualquier campo, simplemente haz clic en él y cámbialo. Así que describe tu proyecto. Proyecto aplicar. Entonces ahora es describir tu proyecto. Para el primer nombre aquí, puedes expandirlo para deshabilitar el prefijo, el segundo nombre y apellido porque solo queremos el primer nombre. No queremos varios campos. Y para el correo electrónico, se ve bien. Así que solo voy a decir publicar y vamos a conseguir este código corto, que vamos a pegar delante y el formulario aparecerá donde quiera que peguemos este código corto. Entonces voy a copiar el código corto. Cierra esto, ve a nuestro editor, agrega elemento, elemento de código corto. Es solo un marcador de posición para pegar cualquier código corto en el que tengas Así que déjalo ahí. Y ahora pegamos el código corto. Simplemente lo copiamos desde el tablero de ahí dentro. Y el formulario debería aparecer aquí mismo, publicar. Bien. Solo apliquemos para refrescar el editor y ver el formulario. Desplazamiento hacia abajo. Aquí está el formulario. Ahora bien, estos servicios son un selecto. No, este es un tipo de elemento checkbox , y eso no es lo que queremos Pero antes de que cambiemos eso, déjame volver aquí y vamos a previsualizar los cambios. Ve al contacto, y así es como se ve ahora mismo. Ahora, quiero cerrar estos porque ya no los estamos usando. Veamos cómo darle estilo a esto. Entonces volviendo a nuestro formulario en el área de forminadores, antes que nada, mencioné que este es un campo de casilla de verificación No queremos un campo de casilla de verificación. Queremos bajar campo. Entonces voy a eliminar esto y decir insertar campos de formulario. Lo que acabamos de eliminar es un tipo de casilla de verificación de campo. Lo que queremos es un campo de inserción selecto. Ahora necesitamos opciones aquí. ¿Qué servicios ofrecemos? Diseño gráfico, diseño web, opción de agregar, edición de video, opción de agregar, modelado de tarjetas. Si quieres que alguien pueda seleccionar múltiples opciones, como te mostré, puedes seleccionar este múltiplo. Si quieres que alguien solo pueda seleccionar un servicio y describir lo que quiere, entonces simplemente puedes dejarlo en single. ¿A ver qué más? Seleccione Tipo de servicio. Aplicar. Ahora podemos arrastrar esto y colocarlo arriba de ahí. Es el primero en, publicar cambios. Ahora bien, si vamos a nuestro editor y seleccionamos el elemento, el elemento de código corto y aplicamos, reflejará los cambios que acabamos de hacer en el back end en el dashboard. Vista previa de los cambios, y veamos qué tenemos contacto. Ahora aquí tenemos un menú desplegable, y alguien solo puede elegir un tipo de servicio. Veamos cómo darle estilo a esta forma en la siguiente lección porque no quieres que esta lección sea demasiado larga, así que te veré en breve. 23. Estiliza la forma: Ahora es el momento de estrellar nuestra forma. Así que permítanme antes que nada, haga clic en Vista previa para que podamos ver lo que tenemos o ir a contactar. Nos dimos cuenta de que se encogió y empujó hacia la izquierda. Entonces antes que nada, volviendo aquí, queremos seleccionar el formulario en sí, ir a Avanzado, y para el ancho, queremos decir ancho completo para que ocupe todo el ancho del contenedor que lo contiene. Así que publica eso y vamos a previsualizar los cambios. Entra en contacto. Ahora está ocupando todo el ancho, pero queremos que este ancho sea del 50%. A mí me gusta estrecho. Bajando aquí. Creo que ese es un mejor tamaño de forma. Ahora, lo siguiente que queremos hacer es editar este campo selecto. Ahora, recuerden, aquí tenemos diferentes tipos de campos. Este es un campo de nombre. Este es un campo de correo electrónico. Esto es lo que es este campo de área de texto. Y aquí hay diferentes tipos de campos, y formuator nos proporciona una forma de editar cada tipo de campo que hayas usado Entonces eso sucede en esta apariencia de panel. Entonces, antes que nada, podemos ir al estilo. Puedes optar por dejarlo como predeterminado. Como pueden ver, tenemos estas fronteras estrechas. Eso es lo que tenemos. Se puede decir plano, y eso va a deshacerse de los bordes si publicamos el y vamos a aquí, mientras este se selecciona, aplicar y previsualizar, ir al contacto. Ahora notarás que no hay fronteras. También puedes hacerlo audaz. Eso significa bordes audaces. Y como puedes adivinar, si voy aquí y solo refresco esta página, tiene bordes. Entonces eso es todo. Entonces, permítanme decir que queremos que se mantenga en el valor predeterminado. Y lo que realmente nos interesa son los colores. Queremos usar colores personalizados. Eso amplía todo este tipo de campos. Este de aquí es un campo selecto, por lo que podemos darle estilo a la selección. Por ejemplo, podemos decir que queremos que el color del borde sea blanco, y el color del borde será blanco. Entonces si digo publicar cambios e ir aquí y refrescar, este borde será de color blanco. Entonces, como pueden ver, ahora es blanco. Entonces lo que quiero es darle un tono porque estamos trabajando con ese azul claro, queremos darle una tonalidad de azul oscuro, pero ligeramente diferente para que se asiente. Entonces queremos seleccionar ese azul. Iré a ajustes laterales. Recuerda, usamos este azul claro como parte de un degradado. Entonces, si vas a fondo, era el segundo color. El color superior fue azul oscuro. Entonces quiero seleccionar este azul claro. Vuelve aquí y di que el color del borde debe ser azul oscuro, pero un poco más claro. A lo mejor ese color, publica eso. Pero ahora, siéntete libre de jugar con los colores que quieras. Y al mismo tiempo, esto es para mostrarte la versatilidad de este plugin. Si actualizo esta página, Ahora, como pueden ver, tenemos ese azul claro. No se trata de hacer las cosas muy bonitas en estos momentos. Ahora, también podemos editar este icono y el texto. Entonces, por ejemplo, podemos hacer que este texto sea blanco. Entonces el color del texto. Ese es el color del texto del campo. Ese es este color, pero queremos el color de la etiqueta. Publiquemos eso y previsualicemos la actualización de los cambios. Sí, entonces ese es ese color. Busco el campo Vamos al campo Básicos y cambiemos la etiqueta. Entonces la etiqueta de todos los campos, queremos que sea quizá gris oscuro, publique eso. Ahora si vamos aquí y refrescamos esto, sí, queríamos que las etiquetas fueran de color blanco. Ahora si desplegamos, también puedes cambiar este color de borde del elemento activo. Conceptos básicos de campo de colapso. Vamos dentro de la selección. Recuerda, hay Seleccionar, y el selecto tiene otro menú llamado Lista desplegable aquí Borde de contenedor. Sí. Esto de aquí puede cambiar a esta publicación gris que, y revisemos los cambios. Refrescar. No, ese no es el color. Quiero que cambiemos este azul marino. ¿Es lista desplegable hover? Color de contorno. Enfoque. Sí, esto. Sea cual sea el elemento en el que nos estemos enfocando debería tener digamos este color. Ahora, actualicemos eso. Sí, como puedes ver, puedes cambiar cada aspecto de esta forma. Ahora, también queremos que este ahora sea el foco seleccionado color de fondo, porque este es el actual seleccionado. Si seleccionamos esto y expandimos, ahora es azul. Entonces el campo seleccionado debería ser tal vez digamos este gris. Refresca eso. Ahí vamos. Entonces como puedes ver, puedes jugar con esto. Quiero que cambiemos esto. Seleccionado, enfoque hover. Opción de color. Vamos a darle ese gris en vez de ese negro oscuro. Entonces la opción aquí es este color, creo. Bien, no es eso. Oh, estas opciones, creo que eso es lo que cambiamos. Debe ser de color oscuro oscuro. Coloca el cursor. También podemos cambiar este color de icono. Cuando está en default, queremos que sea blanco, Publish changes. Este icono de aquí mismo, refresca eso. Sí, es blanco y al flotar, es azul. Blanco y en el hover. Azul. Bien, así que sí, así que quiero que ustedes cambien este color Ves este feo borde azul justo aquí mismo. Creo que aquí es donde lo cambiamos. Quiero que sea blanco o este gris claro, morado. Y vamos a refrescar esto. Sí. Entonces solo quería mostrarte cómo editar cada campo. Ahora bien, este era solo un campo selecto en el que nos estábamos enfocando. Podemos colapsarlo e ir al área de entrada y texto. Se trata de un área de texto, y estos son campos de entrada. Porque si volvemos al campo de formulario, si selecciono esto, este es un campo de nombre, y es un campo de entrada. Cierra eso. Esto de aquí es un campo de área de texto. Entonces estos son campos de entrada, y esta es un área de texto. Este es un selecto. Entonces volviendo a la apariencia y los colores, queremos ir al área de entrada y texto, y aquí es donde podemos afectar a estos tres. Entonces esas son tus tareas. Tómate un tiempo y juega con el área de entrada y texto de este formulario. También puedes Trabajar en el botón enviar, que es el botón de solicitar cotización. Puedes darle un color de fondo de tal vez este color de fondo oscuro, y ahí tienes. Pero sí, vamos a darle este color amarillo. Quiero que entremos aquí, seleccionemos esto ir a salir de aquí desde los ajustes laterales, seleccionar este estilo de masa, enfocar título , seleccionar este amarillo, copiar eso volver aquí, darle. Por defecto, vamos a darle ese color amarillo. Y al flotar, queremos darle el color naranja. Copia eso. Al flotar, queremos darle ese color naranja así. Publica los cambios y vamos a previsualizar. De hecho, vamos aquí. Haga clic en Seleccionar el formulario y aplique todos los cambios que hicimos y obtenga una vista previa de los cambios. Ahora, depende de ti ir a YouTube y ver más videos en forminator para entender cómo usar este increíble complemento de formulario Es un plugin de formulario muy potente. Aprende a iniciar tu formulario exactamente como lo deseas. No queremos que esta lección sea demasiado larga. Así que contacta con diseño web. Entonces opciones aquí, y luego solicitar cotización. Ahora, una rápida actualización de algo que recordé mientras editaba esta lección. No te mostré que también puedes cambiar el color de fondo de este contenedor aquí. Entonces voy a seleccionar este contenedor aquí mismo. Ve a Estilo, copia este color. Selecciona este tipo de fondo estilo contenedor y pégalo ahí. Después ir al radio fronterizo de 20. Publica eso. De hecho, también podemos ir a Avanzado y darle un relleno de 20. Publica eso y vamos a previsualizar los cambios. Ir al contacto. Ahí vamos. I 24. Encabezado responsivo: Ahora es el momento de terminar fuerte haciendo que la página sea receptiva en diferentes dispositivos. Entonces como puedes ver aquí arriba, tenemos la vista de retrato de tableta, y tenemos una vista móvil. Entonces nuestro trabajo es ir a la baja, haciendo que todo sea receptivo. Pero lo primero que queremos hacer es comenzar con el encabezado. Y recuerda, creamos el encabezado por separado. Entonces vayamos a editar con Elementor, luego encabezado. Y de hecho, voy a cerrar este editor porque vamos a volver ahí en la siguiente lección. Ahora mismo nos estamos enfocando en el encabezado. Entonces aquí está el editor de encabezado. Voy a cerrar eso. Así que vamos a cambiar al retrato de tablet, y heredará la configuración que habíamos establecido para el escritorio Entonces, como puede ver, este contenedor interior que sostiene las tres columnas es 80% del contenedor exterior exterior rosa. Por lo que queremos hacer este 90%. El más exterior es del 100%. Si nos expandimos al modo escritorio, tenemos esto. Así que vamos a duplicar esto para tener dos encabezados, y voy a golpear Control colapso ahí. Ahora tenemos dos cabeceras. Tenemos el encabezado original y el que lo duplicamos. Ahora, quiero ocultar el original y trabajar en el duplicado, que es el déjame hacer doble clic en eso y llamarlo la tableta. Haga doble clic en el encabezado de esa tableta. Haga doble clic en eso. Este es el encabezado del escritorio. Eso está oculto por ahora. Entonces estamos trabajando en esto. Y lo que queremos hacer es quitar ese botón y expandirlo, expandir este contenedor. De hecho, seleccione un contenedor que los sostengas. Y digamos que queremos espacio entre ellos. Eso va a separar todo dentro del contenedor. Así que el espacio entre el elemento local y el menú. Y la razón por la que duplicamos el encabezado es si eliminamos el botón, si acabamos de mantener un encabezado y eliminar el botón, se eliminaría en todos los dispositivos, incluido el escritorio. Entonces queremos tener un encabezado separado sin el botón. Entonces ahora que tenemos que podemos hacer clic en esto y ampliar esto. Como pueden ver, tenemos un menú lateral aquí. Y lo que queremos hacer es ir a la configuración del menú móvil e ir aquí al logotipo del menú móvil, y queremos agregar este logotipo, seleccionarlo. Ahora si lo expandimos, el logo está ahí, pero el fondo es blanco. Así que vamos al estilo, menú envoltorio móvil de fondo. Queremos darle ese fondo azul oscuro. De hecho, veamos. Quiero que vayamos a ajustes laterales bastante rápido. Queremos vencer a ese azul oscuro. Del fondo lateral, este azul, copia eso, salga de aquí. Ocultemos esto por un segundo. Vuelve al encabezado de la tableta, ve al estilo. De hecho, vayamos a esto. Da clic en el Menú de Hamburguesas, entra aquí y pega eso ahí. Contraer el envoltorio del menú, vaya al elemento del menú. Vamos a darle un color de texto de artículo de color blanco. En Hover, podemos darle ese color amarillo. Pero en Hover, ya tiene algún bonito color hover. También podemos ir al envoltorio del menú y determinar el ancho que queramos. Digamos porcentaje aquí. Y queremos que solo sea estrecho, no demasiado ancho, ahí mismo. Ahora, fíjate que este ícono de Togo está demasiado oscuro. Entonces colapsar esto. Quieres ir al menú de hamburguesas. Hamburguesa Ahí está el go de hamburguesa y también está este go cerrado Este es el togo cerrado. Queremos ir al tipo de fondo tipo fondo. ¿Dónde está el tipo de fondo? Y darle un color blanco, así como así. Después está el icono. Podemos darle el color que queramos. Ahora mismo, le acabo de dar un amarillo al azar, y creo que ya es bastante bueno. Ahora, volviendo aquí, mientras se selecciona esto, también queremos ir ahora al togo Hamburger, y queremos ir al tipo de fondo y darle un color blanco Tipo de fondo. Publica eso. Puedes darle el color que quieras. Ahora, si lo previsualizamos, ahora mismo lo estamos previsualizando. Y nos olvidamos de darle un enlace a este logo. Así que selecciona el logotipo, enlace, URL personalizada, y vamos a darle la URL del dominio, publicar. Volviendo aquí para que cuando seleccionemos esto, podamos ir a la página principal. Y si golpeo Control Shift I, ahora podemos ir a este togo aquí para habilitar las herramientas responsive, y queremos cambiarlas a tablets. iPad mini, por ejemplo, y ahora así es como se ve. Ahora note que tenemos los dos encabezados, el encabezado de escritorio original y el encabezado de la tableta. Queremos ocultar el encabezado de la tableta. Queremos ocultar el encabezado del escritorio cuando estamos viendo el sitio web en una tableta. Entonces, ¿cómo hacemos eso? Volviendo aquí, queremos seleccionar esta y pasar a Avanzar. Seleccione el encabezado de escritorio, vaya a Avanzar, contraer diseño, vaya a Responsive y oculte en tableta y móvil. Por lo que sólo va a ser visible en el escritorio. Después seleccionemos este encabezado de tableta, vaya a Avanzado, haga lo contrario. Responsivo, ocultar en el escritorio, el encabezado de la tableta porque también lo vamos a reutilizar para los teléfonos móviles. Por lo que sólo va a ser visible en el móvil y la tableta. Publica eso. Ya sabes, si volvemos aquí y vamos a dar click a casa. Ahora porque estamos en modo tablet, solo podemos ver el encabezado de la tableta. Ahora, si hacemos clic en esto, ahí está nuestro menú. Entonces creo que ya se ve bien. Volviendo aquí, vayamos al teléfono móvil. Y también se ve bien en el teléfono móvil, pero tenemos que empujarlo un poco. Entonces selecciona un contenedor que los sostiene, ve a Avanzado, y quiero romper este relleno, luego agregar un relleno a la izquierda de 20. Ahora, digamos diez y sumando derecho de diez Publicar. Ahora, vamos a repasar eso. Digamos a casa, vamos a digamos HL diez. Sí, así es como se ve. Y ahora queremos editar esto en el teléfono móvil. Entonces seleccionándolo, como puedes ver en el móvil, es demasiado amplio. Entonces con en el móvil, queremos que sea más amplio, tal vez hasta la publicación. Volviendo aquí, a casa, Seleccione eso. Ahora se ve bien. No te preocupes por esto. Por supuesto, esto no va a aparecer. Esto es wordpress. Estas son herramientas de Wordpress. Así que básicamente, hemos terminado con los encabezados. Así es como hacerlos receptivos. 25. Cuerpo responsivo: Ahora es el momento de hacer que el cuerpo sea receptivo. Entonces sigamos adelante y hagamos eso. Solo voy a salir de las herramientas receptivas y cerrar eso. Y porque estamos abajo con el encabezado, también voy a cerrar eso. Ahora, vamos y hagamos clic en Editar con Elementor para editar la página, y cambiemos a tablet Y ahora, como pueden ver, aquí ya hay un gran problema, queremos seleccionar el contenedor superior. Amplíelo, seleccione el contenedor dentro de él. Y vamos al margen avanzado. De hecho, rompamos también el relleno. Y antes que nada, vayamos al ancho, y hagamos que sea el 100% o 95% del ancho del contenedor rosado más exterior Entonces vamos a darle un margen superior de 50. Digamos 60 o 70. Y ahora, mientras todavía está seleccionado, recuerden, siguen siendo dos columnas, una columna, dos columnas. Podemos cambiar de una configuración de fila a una configuración vertical donde las dos columnas ya no son columnas. Ellos apenas empiezan. Así que vamos a cambiar a no, se supone que debemos seleccionar esto. Ve al diseño y cambia a eso. Y ahora vamos a seleccionar este primer contenedor, y vamos a darle 100% de ancho, 100% de ancho dentro de este contenedor. Seleccionemos también esto y le demos 100% de ancho. Ahora está ocupando el 100%. Y porque esto es al 100%, centralicemos todo. Entonces aquí mismo así, también seleccionemos esto y arreglemos todo en el centro que justifique el centro así. Publica eso. Si lo previsualizamos, control turno I para sacar a colación herramientas dev. Alternemos esto y vayamos a tablet, iPad Mini. Sí, así es como se ve. Aumentemos nuevamente el margen superior en este contenedor, manteniéndolos a 100 publicar eso. Creo que esa es una mejor posición desplazándose hacia abajo. Muy bien. Ahora, bajando, podemos hacer lo mismo aquí. Podemos seleccionar este contenedor que contiene todo y cambiar a una columna. Después selecciona esto, hazlo 100% de ancho, y alinea todo al centro. Seleccione este texto, vaya al estilo, centro de alineación. Selecciona esto, hazlo al 100%. Y de hecho, quiero seleccionar esto y hacerlo también 100% así para que todo encaje a la perfección. Publica eso. Vamos a previsualizarlo. Así como así. Podemos hacer lo mismo aquí. Voy a seleccionar esto, vaya a Avanzado. Mientras se selecciona esto, iré a Avanzado y se lo daré. No, quiero porcentaje 80% ancho. Selecciona este contenedor que contiene todos estos contenedores, dale 100% de ancho. Pero avanzado. Vamos a darle un poco de relleno de 20 todo redondo para darle respiro a los lados. De hecho, creo que podemos también podemos hacer lo mismo que hicimos aquí. Yo lo prefiero apilado. Entonces tenemos eso. Entonces tenemos este contenedor. La celebración de todo. Así que ve al layout, y vamos a apilar todo. Selecciona el contenedor que contiene estos cuatro y hazlo 100% ancho así. Selecciona esta sosteniendo la imagen, y hagámosla al 100% o digamos 60%, 80%. Y asegurémonos de que este contenedor en sí los sostiene tenga todo alineado al centro así. A estas alturas, ya entiendes lo esencial. Seleccionando esto, vayamos a Ancho avanzado en porcentaje, digamos, 80%, seleccione este contenedor aquí, y vamos a hacerlo 100% pero vaya a Avanzado y darle 20 padding. Lo mismo aplica aquí. 80%. Seleccione este contenedor. Vamos 90%. Creo que es un buen ancho. Publica eso. Y luego contáctame sección. Avanzado, avanzado 80%. Seleccionemos este contenedor que contiene el formulario. Le voy a dar tal vez el 90%. Allí no se necesitaba mucho. Publica ahí. Revisemos todo. Desplazamiento hacia abajo. A mí me encanta. Entonces lo único que queda ahora es cambiar a la vista móvil. Bien. Y repita el mismo trabajo pero ahora para móvil. Entonces lo único adicional que vas a hacer es reducir el tamaño de varios elementos en el móvil. Por ejemplo, este encabezamiento, vamos a ir a estilo, título. Como puedes ver, siempre que estemos en modo responsive, siempre habrá elementos que se pueden editar para diferentes dispositivos. Siempre tendremos estos íconos. Si cambiamos a tableta, esto cambiará a tableta y computadora de escritorio. Entonces como ya hicimos tablet, ahora estamos haciendo móvil. Podemos establecer una tipografía de tamaño. Podemos establecer un tamaño para dispositivos móviles, tal vez hasta ese punto. Y de hecho, se nos olvidó incluso establecer esto para alinearlo al centro. Una vez que lo hagamos así, será heredado por la vista móvil. Para este en móvil, necesitamos cambiar para iniciar el diseño y seleccionar cada uno de estos, ir a Avanzado con 100%. Puedo escribir esto, copiar, escribir esto, pegar estilo, escribir esto, pegar estilo. Puedo copiar. No, ahí está el encabezado principal. Selecciona esto, ve a Estilo, título, tipografía reduce el tamaño ahí ¿Qué más? Ahora, puedo copiar esto. Estilo de pasta. Haga clic con el botón derecho al estilo de pegar. Esto todavía es demasiado largo, pero podemos alinearlo al centro así. Haga clic con el botón derecho al estilo de pegar. Y creo que ya terminamos ahí. Entonces lo único que queda es el pie de página, pero esa es una tarea que puedes encargarte en base a todo lo que hemos aprendido. Así que desplazándose hasta el fondo, creo que todo se ve bien Si cambiamos a Pixel P. creo que ahora todo se ve mucho mejor. Puedes tomarte tu tiempo actualizando cada cosa para que luzca prístino Entonces creo que vamos a parar aquí por ahora. En la siguiente lección, veremos qué más hay que hacer. Entonces te veré en breve. 26. Reflexiones finales: Y enhorabuena por llegar hasta el final mismo de esta clase. No solo aprendiste cómo funcionan algunas de las funciones gratuitas de Elementor más populares, sino que también terminaste con un sitio web de marca personal totalmente funcional y receptivo Ojalá, ahora tenga una mejor comprensión de cómo estas herramientas individuales se pueden usar para crear un sitio web con un propósito real. Ahora, un recordatorio rápido. Como siempre, no olvides compartir tu proyecto de clase. Una vez que haya terminado de crear su sitio web de una sola página, tome una captura de pantalla de página completa del sitio terminado y subirlo a la galería del proyecto Me encantaría ver lo que se te ha ocurrido, y tu proyecto también podría inspirar a otros estudiantes en la clase. Si disfrutaste esta clase y la encontraste útil, la mejor manera de apoyar mi trabajo es tomándote un momento para dejar una calificación y una reseña. Tus comentarios ayudan a que esta clase sea más descubrible por otros estudiantes que podrían estar buscando aprender diseño web Así que tómate un momento y baja a la pestaña de revisión debajo de este reproductor de video y hazme saber a mí y a toda la comunidad si esta es una clase que recomendarías a cualquiera que quiera aprender un lamenter que realmente sería útil, y te agradezco Ahora, muchas gracias por aprender conmigo, y hasta la próxima vez, seguir creando. Nos vemos pronto.