Clase de elemento para principiantes: crea un sitio web de empresa de techos totalmente funcional

1. Introducción: Bueno, hola, ahí. Estás listo para aprender a construir tus propios sitios web con Elementor desde cero sin ninguna habilidad de codificación? Quiero mostrarte cómo hacer precisamente eso. Si te quedas conmigo hasta el final, cuando terminemos, tendrás las habilidades para construir cualquier tipo de sitio web que quieras. En cualquier momento que quieras. Mi nombre es Ken y he estado usando Elementor durante los últimos cinco años. He estado usando WordPress durante los últimos seis años. Y he estado construyendo sitios web para clientes que pagan durante los últimos 4.5 años. Cuando no estoy construyendo sitios web para clientes, estoy construyendo plantillas elementales y vendiéndolas en Creative Market. Así que estoy ganando dinero pagando a clientes y también vendiendo productos digitales que he creado con Elementor. Y en esta clase, quiero mostrarte exactamente cómo hacer eso. cuando terminemos, habrás entendido cómo trabajar con secciones, columnas, espaciado, textos, y topografía, imágenes, colores. Y esas habilidades te permitirán armar cualquier tipo de idea de sitio web que tengas en un momento dado. Porque ahora mismo podrías tener una idea de sitio web. La semana siguiente podrías tener una idea de sitio web diferente. Y no puedes seguir pagando a los diseñadores web creen sitios web para ti cada vez que tienes una nueva idea. Entonces quiero mostrarte cómo ser independiente y construir sitios web para ti en cualquier momento que quieras. He podido construir mis propios sitios web y generar ingresos a partir de ellos. He estado creando clases, especialmente para principiantes, y esta clase no es diferente. Mi suposición es que nunca antes habías usado WordPress o elemental. Así que quiero tomar tu mano y asegurarme de entender exactamente lo que necesitas hacer desde el primer paso, desde instalar WordPress hasta instalar temas de WordPress, hasta instalar complementos de WordPress, creando cada elemento de tu sitio web de arriba a abajo, de una página a otra, vinculándolos y todo eso. De hecho, estaremos trabajando en un proyecto del mundo real donde construiremos un sitio web de empresas de techado. Entonces es una hipotética empresa de techado que se ha acercado a nosotros y nos ha pedido que construyamos un sitio web para ellos. Tenemos todo el contenido y veremos cómo abordar un proyecto de este tipo. Este tipo específico de sitio web en realidad fue solicitado por uno de mis alumnos, Alex Rodríguez. Y es un honor y un placer finalmente entregar lo que prometí. Yo entregaría. Entonces Alex Rodríguez, quiero mandarte un grito. Y recuerda, si tienes alguna otra idea para un tipo específico de sitio web que quieres que construyamos, sumételo en la discusión a continuación, y me aseguraré de crear esa clase. Así que estoy muy emocionada de tenerte aquí y no puedo esperar para comenzar. Entonces, sin perder más tiempo, te veré en la primera lección. 2. El proyecto de clase: Y bienvenidos. Como he mencionado en la introducción, esta clase fue solicitada específicamente por uno de mis alumnos, Alex Rodríguez, sombra a Alex Rodríguez. Y él quería que construyéramos un sitio web de una empresa de techado. Y específicamente quería que tuviera un formulario de cita o un asistente de reserva de citas. Y como puedes ver aquí mismo. Entonces esta es la sección de héroes. Tenemos cuatro páginas y cuando empezamos a desplazarnos, como puedes ver, el encabezado permanece pegajoso en la parte superior. No desaparece con el resto del contenido. Y eso permite al usuario tener acceso a la barra de navegación independientemente de dónde se encuentre en el sitio web. Si miras este formulario de reserva de citas, tiene un menú desplegable, todos los diferentes tipos de servicios para los que podemos reservar una cita. ejemplo, si quieres un techo solar, podemos proporcionarlo. Luego proporcione nuestro nombre, dirección de correo electrónico, número de teléfono e información adicional que queremos que la empresa conozca al reservar la cita, luego podemos enviar el mensaje. la empresa recibimos la solicitud de cita y nos pondremos en contacto conmigo. Por supuesto, ahora mientras nos desplazamos hacia abajo, tenemos aquí esta bonita sección azul. Ya veremos cómo hacer eso. Porque esta es la página principal y es una landing page. Cuenta con Varios botones de llamada a la acción como este. Aquí hay otro. Siempre es bueno decirle a los usuarios lo que quieres que hagan. Entonces en esta instancia, queremos que nos hablen. Tenemos diferentes servicios aquí expuestos y podemos hacer clic para conocer más. Tenemos esta linda imagen de antes y después. Entonces esto es antes de que se terminara el techo, y esto es después de que se completó el techo. Y apenas empieza a moverse. Tan pronto como el cursor del ratón esté por encima de la imagen. Ya veremos cómo hacer eso. Entonces tenemos esta pequeña y agradable sección sencilla. Hola homepage o una landing page siempre deben tener una sección testimonial para agregar como prueba social. Entonces tenemos esta cesárea de emergencia. Entonces estas hermosas carpetas que van dentro de la página acerca de. Tenemos la página Acerca de Nosotros. Tiene una bonita sección de héroe, muy sencilla, minimalista. Tenemos nuestra visión y misión, nuestra historia. Entonces tenemos lo que ofrecemos. Una bonita sección pictórica aquí con un fondo de imagen. Entonces tenemos estas sección de cuenta regresiva. Si refresco esta página porque desplazándome hacia abajo, Sí, tenemos ese bonito contador y ya veremos como hacer todo eso. Después saltando dentro del blog. Este es el lugar donde mostramos los últimos artículos que hemos publicado como sitio web. Y ya veremos cómo crear eso. Así que este es un adelanto de lo que vamos a estar trabajando a medida que avanzamos por todas estas páginas, creando cada elemento que hayas visto, obtendrás las habilidades que necesitas para poder armar tu futuros sitios web. Y una cosa más, me gusta animar a mis alumnos a ser lo más creativos que puedan. No necesariamente tienes que hacerlo exactamente como yo lo estoy haciendo. Tienes la libertad de ideas, libertad de creatividad para crear tu propia versión del sitio web de techado. Una vez que hayas hecho eso, nos gustaría ver qué has creado. Así que toma una captura de pantalla de tus páginas web favoritas, las que has creado y compártela con nosotros aquí mismo debajo de este video. Y obtener algunos comentarios de compañeros de estudios y de mí mismo. Y mantengamos los fuegos encendidos. Pasemos a la lección número uno. Te veré en breve. 3. Instalación de WordPress en cPanel: Bienvenido de nuevo. Ahora que has comprado alojamiento web para tu sitio web, es momento de instalar WordPress a través del cPanel. Ahora, estoy aquí mismo en mi página de inicio de sesión de cPanel. Voy a seguir adelante e iniciar sesión. Te sugiero que hagas lo mismo. Y ahora estamos loguados. Ahora tu cPanel puede verse un poco diferente al mío, pero estas configuraciones y características son prácticamente las mismas independientemente del proveedor de alojamiento web. Entonces, lo que queremos buscar es un instalador de aplicaciones llamado instalador de aplicaciones de cálculo suave. Y una de las apps que podemos instalar a través del cálculo es WordPress, como puedes ver. Entonces voy a seguir adelante y hacer clic en Wordpress y seré redirigido para resolver el cálculo. Y aquí es donde instalaremos WordPress. Entonces, como puedes ver, tenemos una breve descripción de WordPress. Tenemos la opción de instalar WordPress ahora. Y justo debajo de esta zona, tenemos las instalaciones actuales. Entonces, si tienes varias instalaciones de WordPress, enumerarán aquí. Como pueden ver, ya tengo una instalación. Entonces seguiré adelante y golpearé Instalar ahora. Y eso abrirá el lugar donde podamos ingresar los detalles de nuestro sitio web. Para empezar, escojamos un prefijo o protocolo para nuestra URL. Me gusta usar https, www.ourdomain.com. Entonces seleccionaré HTTPS. Y solo puedes tener HTTPS si tienes un certificado SSL por seguridad. Entonces, si hago clic afuera, buscará mi certificado SSL y ahora confirmo que sí tengo un certificado SSL. Y estamos bien para irnos. Si no tienes un certificado SSL, te dirá que no tienes un certificado SSL válido y no puedes usar HTTPS. Puedes usar HTTP, pero esto no es recomendable. Bien, así que quiero eliminar ese directorio. No queremos poner nuestro sitio web dentro de una carpeta llamada WP. Queremos que esté en el directorio raíz de nuestro servidor. A continuación, elijamos nuestra versión de WordPress. Quiero usar lo último, así que voy a seleccionar eso. Vamos a darle un nombre a nuestro sitio web. Entonces en este contexto, el sitio web se llama roof call, roof company y una breve descripción. En el planeta. Aquí es donde ingresas las credenciales de inicio de sesión de tu sitio web de WordPress. Cuando cierras sesión en WordPress. Para volver a iniciar sesión, deberá usar estos datos. Entonces cambiemos esto de admin a algo así como tu nombre de usuario. Mi nombre de usuario, y pongamos una contraseña segura. Solo deja intacto este correo electrónico. Ahora pasemos a la siguiente parte. Aquí es donde podemos elegir tener estos tres plugins preinstalados, pero no queremos que estén preinstalados porque hay mejores opciones para este tipo de plugins. Así que lidera eso, y no necesitas cambiar nada más. La siguiente parte es solo agregar un correo electrónico como tu Gmail. Aquí es donde se enviará una notificación una vez que tu WordPress haya sido instalado. Entonces seguiré adelante e instalaré ahora. Desplázate hacia arriba y no salgas esta página hasta que la barra de progreso alcance el 100 por ciento. Entonces vamos a darle unos minutos. Bien, así que lo hemos instalado con éxito. Aquí está la URL del sitio web, y esta es la URL del tablero. Entonces lo que queremos hacer es hacer clic en esto para ir al panel de WordPress donde podemos comenzar a construir nuestro sitio web. Y aquí lo tenemos. Déjame alejarme un poco ahí mismo. Entonces así es como instalar WordPress a través del panel C. En la siguiente lección, instalemos un tema de WordPress. Te veré en breve. 4. Instalación del tema de Astra: Bienvenida de nuevo. Entonces ahora que hemos instalado WordPress a través del cPanel, es el momento de instalar nuestro tema de WordPress. Y sin perder tiempo, entremos en temas de apariencia. Y por defecto tenemos el tema 2023 instalado porque ahora mismo estamos en noviembre 2022. Entonces es apenas un mes antes de 2023. Durante la mayor parte de 2022, hemos tenido el tema 2022 instalado por defecto, pero no estamos usando ninguno de estos temas predeterminados. Quiero usar una cosa especial llamada Astra, que en mi opinión es el mejor tema de WordPress en el mercado. Entonces aquí estamos. Está casi en la parte superior, pero si te desplazas hacia abajo, tenemos miles de temas que puedes usar. Haré clic en Instalar en Astra. Si no lo puedes ver, puedes hacer una búsqueda rápida aquí arriba. Y sigamos adelante y activemos. Así que haz clic en Activar. Y ahí lo tenemos. Así que gracias por instalar Astros. Déjame cerrar esa ventana emergente. Y ahora Astra es el tema activo, y así es como instalar un tema de WordPress. En la siguiente lección, queremos instalar un complemento de WordPress porque usaremos algunos complementos de WordPress. Veamos cómo instalar uno. Y porque estamos construyendo un sitio web con Elementor, instalemos elementor. Te veré en la siguiente lección. 5. Instalación de un plugin de WordPress: Bienvenida de nuevo. Con el Astra Theme instalado, es el momento de instalar Elementor. Así que vamos dentro de los plugins. Agregar nuevo. Pero antes de decir añadir nuevo, vamos a Plugins instalados. Bien, entonces tenemos algunos plug-ins preinstalados. Dependiendo de quién sea tu proveedor de hospedaje web. A veces es posible que encuentre que tiene plug-ins preinstalados que no desea usar. Entonces en esta instancia, no quiero usar ninguno de estos plugins, así que solo los desactivaré y eliminaré. Entonces ahora que están todas desactivadas, puedo seleccionarlas todas marcando esa casilla. Y luego eliminar. En este menú desplegable, luego aplica. ¿Bien? Bien, así que ahora los hemos eliminado todos. Si actualizo esta página. Ahora, actualmente no tenemos plug-ins disponibles. Así que sigamos adelante y haga clic en agregar nuevo aquí o aquí mismo será redirigido al directorio de complementos de WordPress. Aquí es donde hay miles de plugins que puedes instalar para cualquier propósito. Por eso estamos presionados, es increíble. Entonces seguiré adelante y buscaré Elementor aquí. Elementor. Y aquí estamos. Como puede ver, cuenta con más de 5 millones de instalaciones activas. Y es creado por elementos are.com. Haga clic en Instalar. Ahora. Sigamos adelante y hagamos clic en activar. Activar. Entonces ahora tenemos Elementor instalado y activado. Ahora anteriormente, cada vez que instalas elementor, te llevarían a un asistente de configuración donde configurarías varios ajustes antes poder comenzar a usar Elementor. No he visto ese asistente de configuración y si acaso te han redirigido a ese asistente de configuración, tengo un video pregrabado donde te muestro cómo configurar todo en ese asistente de configuración. Entonces déjame jugarlo por ti ahora mismo, si acaso te han presentado ese asistente de configuración. Así que aquí vamos. Entonces voy a golpear instalado, ¿verdad? Así que cuando haga clic en Activar será redirigido al asistente de configuración de Elementor. Entonces, vamos a darle a Activar. Y este es el mago de aquí mismo. Así que déjame alejarme un poco para que puedas ver todo. Como puedes ver ahora mismo, tenemos unos cinco pasos para configurar todo antes de que podamos empezar a usar Elementor. Y el primer paso aquí es crear una cuenta con elementor.com si quieres disfrutar de estos beneficios, pero no tienes que tener cuentas elementales para usar Elementor. Entonces voy a seguir adelante y saltarme esta parte. Entonces, el segundo paso aquí es decidir si quieres usar el tema hola que es desarrollado y mantenido por el equipo de primaria. Pero también tienes la opción de saltarte este paso si tienes otra cosa que quieras usar, me gusta usar Astra. Astra Theme es uno de los temas más ligeros, rápidos y amigables con SEO en el mercado. Entonces voy a seguir adelante y saltarme esta parte. El tercer paso aquí es darle un nombre a tu sitio web. Y por defecto, el nombre que aparece en este campo es el nombre que le diste a tu sitio web cuando estabas instalando WordPress. Entonces este es el nombre que le di a mi sitio web. No voy a cambiarlo, así que me quedaré solo voy a golpear a Escape. Entonces si tienes un logo, tienes la oportunidad de subirlo en este momento, pero esto es algo que siempre puedes hacer más tarde mientras construyes tu sitio web para que podamos seguir adelante y saltarte. Y luego finalmente, podemos ir directamente a editar un lienzo en blanco y comenzar a construir una página web desde cero. O podemos navegar entre cientos de plantillas creadas por Elementor que están dentro del espacio de trabajo de Elementor o importar nuestro propio elemento de plantillas que podríamos haber comprado o creado nosotros mismos anteriormente. Pero voy a seguir adelante y saltarme eso. Y por defecto, cuando calientas, te lleva directamente a un lienzo en blanco donde puedes comenzar a construir tu página web. Entonces, para salir de este lugar, haga clic en este menú de hamburguesas y Salga al tablero. Así que nos llevan a la parte posterior del editor para ese lienzo en blanco específico que acabamos de dejar. Pero lo que queremos hacer es hacer clic en esto para ser llevado al tablero real donde tenemos todos los ajustes de Wordpress. Y ahora si miras en el menú de la izquierda aquí, notarás que tenemos Elementor y plantillas. Ambos aparecen después de instalar Elementor. Y si hacemos clic en Elementor, podemos jugar con todos los ajustes aquí. Pero por lo general no necesitarás hacer ningún cambio en la configuración predeterminada del plugin. Simplemente irás directamente para comenzar a construir tus páginas web. Y ahí vamos. Entonces así es como completar ese asistente de configuración, acaso te topaste con un asistente de configuración tú mismo. Y básicamente así es como instalar un plugin de WordPress. Ahora, el 99% de los plugins de WordPress no tienen un asistente de configuración con eso dicho, es como instalar elementor en tu sitio web. De la siguiente lección, veamos cómo empezar a construir un sitio web en el frontend. Te veré en breve. 6. Creación de la cabecera - complemento de instalación de ElementsKit: Bienvenido de nuevo. Entonces ahora que tenemos la primaria instalada, estamos listos para comenzar a construir el sitio web. Y como mencioné en esta lección, estaremos construyendo el encabezado. El encabezado es esta área aquí mismo. Contiene el logotipo y la barra de navegación o la barra de navegación. Entonces veamos cómo construir. Van a volver al interior del tablero. Y para construir el encabezado se estará usando otro plugin llamado elements keep light add-ons for Elementor. Así que vamos dentro de Plugins, Add New. Busquemos a Elementor. Y claro, Elementor está activo, pero notarás que aquí tenemos varios otros plug-ins que llevan el nombre de Elementor. Y estos son plug-ins de terceros desarrollados por desarrolladores independientes para agregar a Elementor. Elementor, la versión gratuita de Elementor tiene limitaciones. Y así estos desarrolladores de terceros decidieron, oye, aumentemos o aumentemos el poder de la versión gratuita de Elementor al proporcionar un complemento gratuito a elementor. Y te voy a mostrar cómo funciona eso cuando estamos construyendo el sitio web. Y así uno de esos complementos es elementos golpeados Elementor adultos. Así que vamos a instalar. Ahora. Mientras se instala, vamos a desplazarnos hacia abajo. Y notarás que tenemos varios de ellos disfraz elemental, skin, efectos de encabezado pegajoso para Elementor. Este es otro plugin que necesitaremos y te mostraré qué papel jugará. Tienes varias opciones para construir cualquier tipo de sitio web que quieras con la versión gratuita de Elementor debido a todos estos complementos adicionales que se te proporcionan de forma gratuita. Entonces ahora que el kit de elementos está instalado, activemos. Entonces haré clic en Activar. Y ahora ya se ha instalado. Pero para usarlo, si hago clic en elementos get, nos redirigirá a un asistente de configuración para que podamos terminar de preparar todo. Entonces como pueden ver, tenemos unos pasos por recorrer. Ahora bien, estas son las configuraciones que podemos elegir para las diferentes características que queremos activar. Ahora que por ejemplo es la configuración básica la que se selecciona aquí. Algunos ajustes aquí se desactivan automáticamente. Tenemos que encenderlos manualmente. Pero si hacemos clic en Avanzado, observe cómo cambian algunas de estas configuraciones. Entonces si hacemos clic en Avanzado, como puedes ver, hicimos constructor se ha encendido. Y ese es el mismo caso con algunos de estos ajustes aquí. Algunos de ellos estaban apagados cuando era básico. Pero ahora que hemos seleccionado avanzado, son automáticamente propios. Y eso significa que cuando necesitemos usar el plugin en el front-end, estarán disponibles automáticamente. Entonces, hagamos clic en el siguiente paso. Siguiente paso, siguiente, siguiente, siguiente, y luego guardar los cambios. Y ahí lo tenemos. Así que elements kid ya está instalado, activado y listo para ser utilizado para construir el encabezado. Entonces en la siguiente lección, Empecemos con la cabeza. Te veré en breve. 7. Creación de la cabecera - el logotipo: Bienvenido de nuevo. Entonces ahora que tenemos elementos Kit instalado, estamos listos para comenzar a construir la cabecera. En primer lugar, déjame deshacerme de todos estos anuncios. No los necesitas. Y luego te darás cuenta en los elementos mantenemos tenemos encabezado pie de página. Así que haz clic en Encabezado Pie de página. Y como no tenemos ningún encabezado o pie de página creado, no tenemos nada listado aquí. Entonces haré clic en Agregar nuevo, y aparecerá esta ventana emergente. Mantengamos nuestro encabezado, un nombre, nuestro encabezado cruzado, dale un nombre apropiado. Y el tipo es encabezado. Cuando estábamos construyendo el pie de página, le daremos el tipo de pie y queremos que sea visible en todo el sitio. Vamos a activar esta opción para asegurarnos que esté activa y visible en el sitio web. Y luego vamos a guardar los cambios. Muy bien, así que ahora como puedes ver, hemos empezado a construir una lista de diferentes encabezados y pies de página, y puedes construir tantos como quieras. Con esto creado, hagamos clic en Editar. El pop-up volverá a aparecer. Y ahora esta vez vamos a hacer clic en editar contenido será llevado al front-end donde podremos comenzar a construirlo visualmente con las herramientas Elementor. Y aquí estamos. Ahora, como pueden ver, permítanme volver a este lugar. Notarás que la sección de encabezado está dividida en dos columnas, columna logo y la columna de barra de navegación. Así que sigamos adelante y agreguemos nuestro logo. Entonces, volviendo a nuestro sitio web, hacer clic en esta se abrirán las diferentes estructuras con las que podemos comenzar rápidamente. Y queremos una doble columna. Esto sostendrá el logo, y este sostendrá el Napa. Y podemos redimensionarlo en consecuencia. Así que vamos a tirar de eso hacia la izquierda. Entonces, lo siguiente que queremos hacer es hacer clic en este signo más aquí, y eso revelará los diferentes elementos que están disponibles para que los arrastremos a la página y los utilicemos para construir su página web. Así que permítanme primero colapsar estos paneles aquí. Así podemos echar un vistazo rápido a los diferentes paneles que tenemos porque instalamos elementos. Mantiene. Observe ahora mismo, está listado aquí. Antes de que lo instaláramos, no estaba listado aquí. Solo teníamos los paneles predeterminados de WooCommerce y WordPress y Elementor. Pero cada vez que instalamos un complemento que fue creado específicamente para Elementor, se enumerará aquí y tenemos acceso a esos diferentes elementos. Recuerda cuando lo seleccionamos avanzado en lugar de básico, mientras estábamos configurando el kit de elementos, estábamos activando estos elementos para ponerlos a disposición de nosotros en este momento mientras estamos construyendo el sitio web. Entonces déjame colapsar eso porque no estamos usando ninguno de esos por ahora. Que quieran entrar en el panel básico. Y claro, como mencioné, se trata de un panel elemental. La versión gratuita, si colapso que también tenemos la versión pro, no podemos tener acceso a estos elementos. No podemos arrastrarlos si lo intentas. Esta ventana emergente aparece pidiéndole que actualice. Entonces déjame colapsar eso, ampliar la pestaña básica. Y ahora podemos arrastrar nuestra imagen ahí dentro. Y el momentáneo lo dejan caer porque son los elementos activos ahora mismo en la página. Los ajustes aquí han cambiado automáticamente los ajustes de la imagen y se puede decir por este texto aquí arriba. Entonces, si quiero volver a revelar esos elementos, puedo hacer clic en este icono aquí mismo. Volverá a revelar esos elementos. Y si arrastre por ejemplo este encabezado, entonces estas son las columnas a esta otra columna. Observe que los ajustes han cambiado para editar encabezado porque es el elemento de just dropped. Entonces eso significa que es el elemento que actualmente está activo. Si selecciono la imagen, los ajustes han cambiado para editar imagen. Si selecciono la sección, ajustes han cambiado para editar sección y estos son los ajustes para esta sección. Entonces déjame borrar esto. No necesitamos ese rumbo también, porque ahí es donde tendremos en Napa. Y seleccionando la imagen, esto tiñe para editar imagen. Y si selecciono eso, podemos seguir adelante y subir nuestro logo. Entonces iré a subir archivos, seleccionar archivos. Y quiero entrar en esta carpeta que había preparado. Lo encontrarás en la descripción a continuación. Puedes descargar todos estos activos, sitio web de techado, ácidos. Aquí está el logo. Y dentro de esa carpeta también encontrarás todas las imágenes que estarán usando para el sitio web. Entonces también tenemos estos textos Léame. Si lo abro, tiene los colores que he usado acaso quieres usar estos colores específicos que he usado. Déjame cerrar eso. Entonces, si hago doble clic en ese logotipo, sabemos que está subido. Haga clic en Insertar medios, y ahí vamos. Entonces ahora nuestro logo ha sido subido y ya está listo. Haré clic en Actualizar. Y podemos previsualizar los cambios. Ahí vamos. Así es como agregar el logo a tu sitio web con elementos kids. En la siguiente lección, quiero mostrarte cómo agregar la barra de navegación. Entonces veamos cómo hacerlo en breve. 8. 8 crea el encabezado del menú de la Marina: Bienvenido de nuevo. Entonces ahora es el momento de construir la barra de navbar. Entonces, lo siguiente que tenemos que hacer es hacer clic en este signo más aquí. Y eso revelará una vez más los elementos. Y aquí adentro, Sigamos adelante y tecleemos nav y una V. Y eso revelará los diferentes elementos de navegación. Como puedes ver, tenemos menú de navegación, que tiene un pequeño icono de candado aquí arriba. Esto está disponible con Elementor Pro. Pero como no tenemos Elementor Pro, estamos usando la versión gratuita de Elementor. Podemos usar el menú de navegación de elementos hit, que también es tan potente como el que está disponible con Elementor Pro. Entonces, antes que nada, antes seleccionar eso, permítame cerrar eso. Se derrumbó el panel básico y expandió el panel Pro. Como puede ver, aquí es donde se encuentra el menú de navegación debajo del panel Pro. Entonces no podemos usarlo. Colapando eso y expandiendo elementos kids header footer. Como pueden ver, aquí abajo tenemos el menú de secuestros de elementos . Pero claro que para obtener elementos demasiado específicos rápidamente, puedes simplemente teclearlos rápidamente nav. Entonces así es como llegamos hasta aquí. Arrastrando esto ahí dentro. Ahora se nos ha caído la napa. Primero déjame hacer clic en Actualizar. Por supuesto, debido a que el NAV es el elemento activo en este momento, esto dice Edit elements keep Nav Menu. Y uno de los elementos del menú aquí es un menú desplegable. Y esto se supone que es una lista de diferentes menús que hemos creado en el backend de WordPress con elementos de menú. Y cuando digo elementos del menú, quiero decir como en casa sobre el contacto del Blog. Entonces como se mencionó esto, este menú desplegable se supone que tiene un menú o varios menús que tienen elementos de menú. Y podemos seleccionarlo para mostrarlo. Entonces necesitamos volver al backend de WordPress y crear un menú que tenga los diferentes elementos del menú que queremos mostrar. Entonces ahora que la página está guardada, quiero hacer clic en este menú de hamburguesas y hacer clic en Salir. Y si es la primera vez que haces clic en eso, se te darán estas opciones. ¿A dónde quieres salir también? Quiero salir al tablero de WP y aplicarlo. Antes de irnos, necesito hacer clic en Actualizar. Ahora, salgamos. Muy bien, así que ahora vamos a entrar en los menús de apariencia. Y ahora podemos crear nuestro menú. Como se mencionó, se trata de un menú. Eso es lo que estamos creando aquí. Crea tu primer menú a continuación. Entonces vamos a darle un nombre. Mi menú. Eso está bien. Hagamos clic en Crear menú. Y olvidé decir que se supone que es el menú principal. Crear menú. Y después de guardar su menú, esta área se vuelve activa. Entonces ahora fíjate estos textos que dice Agregar elementos de menú de la columna de la izquierda, esta columna de aquí. Entonces lo que tenemos que hacer es crear elementos del menú y se mostrarán aquí. Y los elementos del menú queremos que muestren nuestras páginas. Los elementos del menú también pueden ser publicaciones de blog o publicaciones de WordPress. Pueden ser enlaces personalizados. Pueden ser categorías que hayas creado, pero queremos crear páginas web como elementos de menú. Entonces, para agregar elementos de menú a estas páginas listan aquí, necesitamos crear páginas web. Vamos dentro de las páginas. Y por defecto tenemos estos dos elementos de menú que vienen con cada nueva instalación de WordPress. Seleccionaré los dos y luego mudaré a la basura. Aplicar. No se encontraron páginas. Entonces quiero crear una nueva página. Vamos a darle un nombre. Acerca de esta es nuestra página acerca de. No te preocupes por todos estos ajustes. Los configuraremos mientras trabajamos en las páginas individuales. Ahora mismo lo que queremos hacer es publicar porque solo estamos creando elementos de menú que se publiquen. Volvamos. Ahora está listado aquí. Agreguemos otro. Blog, publicar. Volvamos aquí. Agrega otro para el contacto. La página de contacto. Vuelve aquí. Y finalmente, vamos a tocar. Y finalmente agreguemos una página de inicio. Así que a casa lo publicó. Volvamos aquí. Ahora, si volvemos al interior de los menús de apariencia, observe que ahora tenemos elementos del menú que podemos agregar a nuestro menú principal. Entonces, si selecciono todos ellos y agrego al engranaje de menú, son, podemos arrastrar para reorganizarlos. Quiero dejar esa ahí y el contacto debería ser el último. Y luego haz clic en Guardar menú. Ahora nuestro menú ha sido actualizado. Ahora volviendo dentro de elementos, calor, Encabezado, Pie de página, click, Editar, editar contenido. Recuerden que habíamos caído los elementos niños Nav Menú elementos aquí mismo. Entonces ahora si hacemos clic en este menú desplegable, aparecerá mi menú, el menú que acabamos de crear. Y ahí vamos. Está mostrando los diferentes elementos del menú que creamos como páginas. Ahora, queremos empujar estos artículos hacia la derecha. Entonces voy a hacer clic en posición de menú horizontal. Derecha. Ahí vamos. Luego haga clic en Actualizar. Vamos a previsualizar los cambios. Y ahí vamos. Ese es nuestro encabezado. Y básicamente así es como crear un encabezado. Por supuesto, este es un trabajo en progreso. No hemos terminado de editar el encabezado. refinaremos una vez que agreguemos el heterosexual. Entonces, en la siguiente lección, veamos cómo crear la sección de héroes. Te veré en breve. 9. 9 Creación de la configuración de la página de sección de héroes: Bienvenida de nuevo. Entonces ahora es el momento de crear la sección de héroes. Entonces volviendo a nuestra referencia, esta es una sección de héroes y contiene la imagen de fondo, el H1 y el llamado a la acción. Entonces veamos cómo construir eso volviendo al interior de nuestro editor. Ahora bien, esta es la parte donde estábamos editando nuestro encabezado. Este no es el mismo lugar. Editaremos nuestra sección de héroes. Si pudiera cambiar aquí muy rápido. Creamos este encabezado usando los elementos mantiene la luz plug-in. Tuvimos que ir dentro de la carpeta de cabecera del kit de elementos y crear el encabezado. Y eso lo haremos por el pie de página. Pero ahora para crear esta sección de héroes, no vamos a usar los elementos. Había tenido un plugin de carpeta, solo usará Elementor. Entonces volviendo aquí, no podemos seguir editando estos desde aquí. Entonces lo que tenemos que hacer es salir y luego ir dentro de las páginas. Y claro, porque esta es nuestra página de inicio, vamos a editar la página de inicio. Ahí es donde construiremos nuestra sección de héroes. Entonces voy a hacer clic en Editar. Ahora, recuerden que mencioné vamos a hablar de estas configuraciones aquí. Entonces ese es el momento. Entonces este es el momento de hacer eso. En la versión anterior de elemental, esta configuración de plantilla se veía diferente. Entonces, si estabas usando Elementor y no has visto esta nueva versión, es como se ve. Entonces haré clic en esta plantilla predeterminada y la cambiaré a Elementor de ancho completo. Porque queremos que la sección de héroes corra desde el borde de la pantalla hasta el otro borde de la pantalla. Y ahora con Elementor ancho completo seleccionado. Vamos a cerrar eso. Lo siguiente que queremos hacer es ir dentro del ahorro astro. Estos son los ajustes de Wordpress. Vamos dentro de Astro. Quiere seleccionar ancho completo estirado bajo diseño de contenido, tenemos contenido en caja, caja, ancho completo contenido y ancho completo estresado. Queremos estirar todo el peso. Entonces para la barra lateral, no queremos que el sitio web o la página web tengan una barra lateral. Así que tenemos barra lateral derecha, barra lateral izquierda y ninguna barra lateral. No seleccionaré ninguna barra lateral. Entonces para estos elementos, vamos a desactivar el encabezado y footer.com por defecto con el Tema Astra. Porque estamos construyendo el nuestro propio, recuerde que hemos construido nuestro propio encabezado, también construiremos nuestra propia comida más o menos donde la desactivación necesita actualizar eso. Ahora está actualizado. Lo siguiente que tenemos que hacer es hacer clic en editar con Elementor, y eso nos redirigirá al front-end donde podremos construir página. 10. 10 crea la sección de héroes el fondo Imag: Y ahora que estamos aquí, observe que no podemos editar el encabezado porque esta no es el área donde podemos editar el encabezado. Tenemos que ir dentro del área de cabecera de calor de elementos para editar el encabezado. Entonces claro, lo primero que tenemos que hacer es seleccionar una estructura. Necesitamos una estructura de doble columna así. Entonces para esta imagen en el fondo, la estamos agregando como fondo de esta sección. Entonces voy a dar click en esta sección. Esto cambiará a la sección de edición. Y antes de seguir adelante, acabo de recordar una herramienta muy práctica que olvidé activar. Entonces, cuando pasas el cursor sobre esto o sobre las columnas, se suponía que notarían algunas opciones más que aparecen de esta esquina como atajos. Para conseguirlo, hagamos clic en ese menú de hamburguesa, preferencias del usuario. Asas de edición. Vamos a activar eso. Y ahora cuando flotamos sobre esta zona, esto es de lo que estaba hablando. Muy bien, así que al hacer clic en esa sección, vamos dentro de estilo, fondo, tipo de fondo. Seleccione eso. Tenemos la opción de darle un color, pero no le estamos dando un color. Entonces esto es sólo un ejemplo para deshacer. Vamos a hacer clic en eso. Queremos darle una imagen. Entonces voy a dar click dentro de esta imagen. Ahora, sigamos adelante y subamos esa imagen de fondo. Entonces dentro de la carpeta de activos del sitio web de techado, Busquemos esa imagen. Creo que esto fue todo. Abierto. Ahí vamos. Insertar medios. Ahora te das cuenta que no lo podemos ver. Y eso es porque no tienen ningún contenido dentro de la sección. La altura de la sección está determinada por el contenido interior. Y déjame mostrarte a lo que me refiero. Así que haz clic en este Plus. Coloquemos nuestro rumbo ahí. Agreguemos también algunos textos. Editor de texto. Como puede ver, la altura de la sección ahora va aumentando a medida que agregamos más elementos. También agreguemos un botón. Déjala caer cuando veas esa línea azul. Muy bien, así como pueden ver, la altura va en aumento. Pero lo que podemos aumentar con los ajustes de la sección es el margen en la parte superior, inferior, y los lados. Entonces si vas dentro avanzado mientras estamos editando esta sección, y también el padding. Entonces aumentemos el relleno. El relleno es el espacio entre el borde de la sección y el contenido dentro de la sección. Así que vamos a desvincular estos valores para que podamos editar cada bolsa individualmente. Si hacemos el acolchado superior o 100. Como puedes ver, el espacio entre ellos envejecidos y el contenido en la parte superior ha aumentado. Hagámoslo también en la parte inferior. 100. Entonces ahora tenemos 100 datos. Pero hagámoslo 200, 200. Y para la actualización de los 200 mejores ahí, vamos a previsualizar los cambios. Entonces ahí vamos. Pero queremos que se vea así. Entonces, ¿cómo hacemos eso? Entonces volviendo aquí, antes que nada, cambiemos la posición de esta imagen. Aún seleccionando la sección nuevamente, vaya dentro de estilo para la posición. Vamos a darle. Probemos centro, centro, y ahí vamos. Entonces ahí es donde se supone que debe estar. Para la talla. Vamos a elegir la portada, y veamos cómo se ve. Entonces digamos esa actualización. Ahora la imagen está cubriendo toda la sección Aquí. Entonces, si volvemos aquí y elegimos Default y actualizamos eso, déjame mostrarte cómo se ve. Vamos a previsualizar los cambios. En. Ahora bien, este es el problema que tenemos. Deja algunos espacios en blanco, así que asegúrate de que tenemos este conjunto para cubrir para que pueda cubrir todo el fondo. Actualiza eso. Una vez más, vamos a previsualizar los cambios. Y ahí vamos. Entonces así es como preparar la imagen de fondo de las secciones de héroe. En la siguiente lección, sigamos trabajando en el bloque de texto y todo lo demás. Entonces te veré en breve. 11. 11 crea la sección de héroes el bloque de texto: Voy a agarrar esto, copia, esto. Entra aquí, selecciona este contenido. Lo pegaré aquí. Pero claro ahora necesitas escribir tus propios mensajes de texto. Son expertos en techado confiables. Entonces entremos al estilo y cambiemos el color a tal vez ese amarillo. Actualízalos. Entonces déjame cambiar este archivo aquí y agarrar este color amarillo. Y aquí dentro, voy a pegar el amarillo ahí dentro y actualizar la página. Ahí vamos. Pero ahora te darás cuenta que este rubro no se parece a lo que tenemos aquí. Esto parece tener un gradiente. Entonces, ¿cómo logramos eso con otro plugin que es una extensión de Elementor? Así que volvamos aquí. Y no quiero salir de esta página. Entonces déjame cambiar a una nueva pestaña e ir al tablero. Vamos a Plugins, Add New. Y el plugin se llama pi out net add-ons for elementary. A continuación, buyout, net add-ons para Elementor. Es una extensión de elemental, igual que los elementos mantienen la luz. Vamos a activarlo. Tienen ajustes. Ahora, como puedes ver, también tiene muchos elementos, igual que elementos, niños. Entonces, si volvemos aquí y actualizamos es Control R, y seleccionamos este texto. Si entramos. En primer lugar, se dará cuenta ahora que tenemos estos complementos de red PAF para Elementor. Significa que ahora está disponible. Y si seleccionamos esto y colapsamos todos estos paneles, como pueden ver aquí lo es. Entonces seleccionando estos textos, vamos al interior del estilo. Y notarás que tenemos texto degradado parfait. Para que podamos activar eso. Y ahora podemos seleccionar los dos colores que queremos usar como nuestros colores predeterminados. Entonces déjame cambiar aquí y elegir esto como uno de los colores, este amarillo. Déjame ponerlo ahí. Para ello. Hagámoslo de ese color. Como puedes ver ahora estamos empezando a conseguir estos efectos. Lo único que tenemos que hacer es cambiar este texto. Y para ello, entremos dentro de Tidal tipografía. Cambiemos la familia de fuentes a monitorear a mamá Sarah. Y aumentemos el peso a algo así como 900. Ahí vamos. También aumentemos el tamaño. Expertos confiables en techado actualizan eso. Cambiemos el color de este texto seleccionándolo. Eso cambia para editar texto, estilo de editor, color, blanco. Actualiza eso. Vamos a previsualizar los cambios. Ahí vamos. Entonces ahora ya está empezando a tomar forma. Lo único que tenemos que hacer en el trabajo en el botón. Pero antes de eso, veamos cómo cambiar esta familia de fuentes. Volviendo aquí, mientras esto todavía está seleccionado, entremos en tipo de estilo, tipografía, Montserrat. Montserrat. Actualiza eso. Entonces ahí lo tenemos. Y para cambiar el color del botón, antes que nada, selecciona el botón. Estos cambios para editar botón. Podemos cambiar lo que nos dice el botón. Y podemos cambiar la URL. Entonces, cuando hagan clic en este botón, deben ser redirigidos a la página que especificamos aquí. Entonces, por ejemplo, www.google.com. Entonces, antes que nada, actualicemos eso. Y vamos a previsualizar los cambios. Muy bien, así que cuando pasamos el cursor sobre estos, como puedes ver aquí abajo, la URL es google.com. Y cuando hacemos clic en eso, va a google.com, volvamos. Si quieres que se abra en una nueva pestaña, puedes hacer clic en esta rueda dentada aquí y luego abrir una nueva ventana. Esto abrirá la página en una nueva pestaña. Así que una vista previa de que si hacemos clic en hablar con nosotros, se abrirá en una nueva pestaña y nuestras páginas integradas en. Ahora, vamos mientras el botón aún está seleccionado, vamos al interior del estilo. Como puedes ver, este es el botón de color colapsando que revela que aquí solo tenemos dos opciones. Para el tipo de fondo de color. Podemos cambiar eso a. Podemos cambiar eso a este amarillo. Déjame copiar ese amarillo. Haz clic en cualquier parte de esta área para deshacerte de esta ventana emergente. Ahí vamos. Y al pasar el cursor, queremos que sea blanco. Entonces, en su estado normal, es amarillo. En color de la libración. Queremos que sea blanco. Así que déjame hacer clic aquí. Al pasar el cursor, es blanco. Pero mientras aún está por debajo, el texto debería cambiar a negro. Así como así. Muy bien, así que cambiemos también el radio fronterizo a diez. Y eso lo hace un poco más redondeado en las esquinas. También debemos aumentar el tamaño del botón aumentando el relleno. Relleno, Vamos a colapsar eso, eso colapsará el botón. Pero ahora por la izquierda, vamos a darle 50 por el paseo, 50 por la cima. Vamos a darle tal vez 20, abajo 20. Así que eso hace que el botón sea mucho más grande, r Theta. Y vamos a previsualizar los cambios. Entonces ahí vamos. Al pasar el cursor, cambia a y. Y si hacemos clic en él, abre la URL y los proveedores. Entonces así es como crear la sección de héroes. En la siguiente lección, veamos cómo crear estas solicitudes y asistente de citas. Te veré en breve. 12. 12 Haz que el encabezado se pegue: Bienvenido de nuevo. Entonces ahora es el momento de comenzar a trabajar en ese libro, un asistente de citas. Así que volviendo a nuestra referencia, esta solicitud, un asistente de citas. Pero antes de hacer eso, acabo de recordar que hay una cosa importante que olvidamos hacer. Así que fíjate cuando empieza a gatear, como ya había mencionado, el cabezazo se queda en la parte superior. Eso es lo que llamamos un encabezado pegajoso. Permite al usuario tener acceso al menú sin importar qué parte del sitio web o página web se encuentre. Entonces eso es muy importante para la experiencia del usuario, UI UX. Entonces veamos como hacer que el encabezado pegajoso y también agreguemos estos efectos hover porque creo que nos olvidamos de hacer eso. Sí, lo hicimos. Entonces haciendo clic en este menú de hamburguesa salir. Volvamos al interior del kit de elementos encabezado pie de página. Hagamos clic en editar con Elementor para ir directamente a editarlo en el front end. Y ahí lo tenemos. Entonces ahora primero que nada, sigamos adelante y hagamos clic en este Menú de navegación y entremos en estilo. Quiero contraer el envoltorio de menú y abrir un estilo de elemento de menú. Y ahora notarás bajo tipografía tenemos estado normal hover y activo. En su estado normal, se supone que es negro, pero al flotar, es gris y queremos que sea amarillo. Entonces déjame volver a esto. Copia ese color amarillo. Selecciona artículos como Becario, pega eso ahí dentro. Ahora cuando pasamos el cursor sobre él, es amarillo. Eso asegura consistencia en los colores de la marca. Y cuando esté activo, también queremos que sea ese amarillo. Entonces voy a pegar eso ahí dentro. Actualiza eso. Revisemos los cambios. Ahí vamos. Otra cosa que quiere hacer es hacer de nuestro logotipo un enlace a la página principal que cuando alguien haga clic en el logotipo, sean llevados de vuelta a la página principal. Así que déjame agarrar el enlace de mi página de inicio. Copia eso. Seleccione la propia imagen. Y aquí mismo en Enlace de contenido, seleccione URL personalizada. Y voy a pegar el enlace de mi página de inicio ahí porque esa es mi URL. Entonces si pudiera simplemente arrastrar este navegador hacia abajo así. El enlace de mi página principal es www.midominio.com. Así que asegúrate de que sea tu dominio.com. Déjame simplemente arrastrar esto hacia arriba otra vez, así. Entonces ahora que lo tenemos así, actualicemos eso. Vista previa de los cambios. Ahora cuando pasas el cursor sobre la imagen, como puedes ver, está cambiando a un ícono de mano para mostrar que puedes hacer clic en ellos. Así que ahora mismo cuando hagamos clic en este enlace no será llevado a la página de inicio que seleccionamos para ser nuestra página de inicio. Seremos llevados a la página de inicio predeterminada establecida por WordPress porque no hemos configurado una página de inicio específica para que sea la página de inicio y déjame mostrarte a lo que me refiero. Entonces, si hago clic en eso fueron llevados a la página de inicio predeterminada de HelloWorld, pero queremos que nos lleven a esta página de inicio. Déjame hacer clic en esta casa. Queremos que nos lleven aquí. Entonces, ¿cómo configuramos la página de inicio? ¿Volviendo al interior de nuestro tablero? Déjame ir aquí. Configuración del tablero, leyendo las pantallas de la página principal. Entonces lo que queremos hacer es seleccionar una página estática y luego homepage, seleccionar home. Esa es nuestra página. Esta es una lista de todas las páginas que tenemos. Después guarda los cambios. Ahora si vamos al front-end y digamos que estamos dentro de la página Acerca de. Si hacemos clic, el logotipo, será sacado. La página de inicio que seleccionaste porque la URL apunta ahí. Pero como puedes ver, nuestro encabezado aún no es pegajoso. Entonces, ¿cómo lo hacemos pegajoso? Al igual que en nuestra página de referencia aquí. Ahora, para hacer que la cabeza de pegajosa, necesitaremos usar ese plugin que te mostré un poco antes, que también es una extensión de Elementor y se llama efectos de encabezado pegajoso para Elementor. Así que entrando dentro de nuestro tablero y solo hacemos clic en el tablero. Vamos a Plugins. Agregar Nuevo y escriba encabezado pegajoso. Esto es efectos de encabezado pegajoso para Elementor instalado. Ahora, vamos a activarlo. Bien, y ahora está instalado. ¿Verdad? Ahora volviendo a donde estábamos editando el encabezado. Si pulso Control R para actualizar la página, o simplemente haga clic con el botón derecho y vuelva a cargar. Ahora, si seleccionamos el encabezado y entramos o avanzamos, como puedes ver, aparecen efectos de encabezado pegajoso para Elementor, así que ahora expandimos y luego vamos a habilitarlo. Ahora claro que revelará varios ajustes aquí, pero el único ajuste que necesitamos es cambiar el fondo del encabezado una vez que comencemos a desplazarnos. Entonces, antes de hacer eso, déjame mostrarte a lo que me refiero. Actualicemos eso antes de habilitar este color de fondo. Ahora que está habilitado, permítame simplemente cambiar al front-end. Si empezamos a desplazarnos. Todavía no tenemos suficiente contenido para desplazarme hacia abajo para que yo te muestre lo que quiero mostrarte. Entonces, antes que nada, permítanme editar rápidamente esta página para agregar algo de contenido extra debajo de ella. Así que permítanme agregar una sección aquí. Déjenme darle un margen muy enorme en la parte superior, como 200. Permítanme agregar quizá algunos textos ahí. Actualiza eso. En realidad ya puedes ver lo que quiero mostrarte. Así que vamos a previsualizar esa página. Ahora. Si nos desplazamos, como puedes ver, el encabezado ahora es pegajoso, pero no tiene fondo. Y eso es lo que queremos resolver porque no se puede ver el logotipo mientras el fondo es transparente. Entonces lo que queremos hacer es volver a donde estamos editando el encabezado que está aquí. Y mientras todavía estamos bajo los efectos avanzados de encabezado pegajoso va a background-color habilitado que eligen a qué color cambiar el fondo después de desplazarse. Y queremos que sea blanco. Así que actualice eso. Vamos a previsualizar eso. Ahora. Si va a la página principal y se desplaza, como puede ver, el fondo es blanco y todo lo que hay en el encabezado es visible. Entonces básicamente así es como hacer que el encabezado se pegue. En la siguiente lección, veamos cómo crear su libro. Una cita con, te veré en breve. 13. 13 crea el asistente de cita para instalar Formi: Hola, Bienvenido de nuevo. Entonces ahora es el momento de crear la solicitud, una cita con este resultado aquí mismo. Y para ello, necesitaremos instalar un plugin de formulario llamado terminator. Ahora hay varios otros plug-ins de formulario por ahí en el mercado. Pero solo me encanta para mí tampoco porque la mayoría de las increíbles características que ofrece de forma gratuita o premium o de pago con otros plug-ins extranjeros sin perder tiempo. Vamos al interior del tablero de instrumentos. Yo sólo quiero ir a techar COE. Tablero de instrumentos. Plugins, añadir nuevos. Busquemos formarlo. Y ahí vamos. Es por WP MU dev. Cuenta con más de 300,000 instalaciones y como se puede ver, cuenta con más de 1,000 calificación de cinco estrellas. Instalar. Ahora, sigamos adelante y activemos. Y ahí lo tenemos. Saqué este menú justo aquí a la izquierda. Para muchos deberían estar hacia el fondo. Entonces aquí estamos. Entonces, si solo hago clic para mí, ninguno será redirigido a esta parte donde tienes un resumen de todos tus envíos de formularios, quiz de misiones y todo eso. 14. 14 Creación de un asistente de cita Creación de un formulario: Y también tenemos estos atajos para crear un formulario o crear una encuesta. Pero lo que nos interesa por ahora es crear una forma. Entonces voy a crear, tenemos diferentes formas prefabricadas con las que podemos comenzar rápidamente. Pero porque el nuestro es personalizado, hagamos clic en Blanco y continuemos. Vamos a darle un nombre. Nombramientos. Vamos a crear. Y ahora aquí podemos comenzar a insertar los diferentes campos que queremos tener en nuestro formulario. Estos son los diferentes campos. Entonces comencemos con el servicio. ¿Qué servicio necesitamos? ¿Qué servicio necesita el cliente? Entonces claro, ahora eso es un menú desplegable. Volviendo aquí. Vamos a insertar campo. Y la opción del menú desplegable se llama seleccionar, como puedes ver aquí. Yo elegiré esos campos de inserción y aparecerá la configuración para ese tipo específico de campo de formulario. Por supuesto que no se llama pestillo. Nosotros lo llamaremos servicio. Tipo de servicio. Ese es el marcador de posición, esa es la etiqueta o el campo de formulario, como este servicio aquí arriba para etiquetar estos Brownfield. También es ir aquí y preparar las opciones. Así reparaciones de techo, Esa es la primera opción en el menú desplegable. Reemplazo de techo. Y creo que por ahora, vamos con eso. Pero claro ahora vas a introducir esos servicios específicos que tienes. Entonces si quieres que este campo sea obligatorio, podemos ir dentro de los ajustes. Por ahora, es opcional, pero podemos configurarlo como sea necesario y luego establecer el mensaje de que la gente verá si no lo siente. Por lo que se requiere tipo de encuesta con signo de exclamación. Muy bien, volvamos a las etiquetas. Vamos a agregar un marcador de posición. El tiempo de servicio. Ahora podemos hacer clic en Aplicar. Ahora si lo previsualizamos, tiene ese tipo de menú desplegable de servicio. Selecciona un tipo de servicio y luego la lista de opciones que hemos preparado. Muy bien, vamos a cerrar eso. Y luego publiquemos este formulario. Ahora que lo publicamos, este pop-up aparecerá con un código corto. Y este es el código corto que vamos a pegar en nuestra página para mostrar el formulario. Entonces vamos a copiar eso. Tenemos pujas con éxito. Y por si acaso tuvieras cerca esto, siempre puedes obtener el código corto de aquí yendo mientras sigues editando el formulario. Solicita citas, haz clic en esta rueda dentada, copia código corto. Código corto copiado éxito para mí. Ahora bien, si hago clic con el botón derecho en este enlace abierto en nueva pestaña y luego voy a esa nueva pestaña. Así podremos abrir la página y luego hacer clic en Editar con Elementor. Para que podamos comenzar a editar la página con Elementor. Si me desplazo hacia abajo, antes que nada, antes que nada, déjame deshacerme de esto. Puedo añadir una nueva sección de doble columna. Y en esta parte, haz clic en este Plus. Y entonces aquí mismo escribe código corto o simplemente corto. Mostrará código corto. Arrastre este código corto y suéltelo ahí. Y mientras sigue activo, esto se lee como editar código trod. Ahora podemos pegar aquí el código corto que acabamos de copiar del formulador. Ahí vamos. Este código corto se pegó ahí. Y como puedes ver ahora, se muestra en la parte frontal. Todo lo que tenemos que hacer ahora mismo es crear estos otros campos. Y tendremos nuestra forma y luego estilizaremos nuestra forma. Volviendo aquí. Actualicemos eso. Vamos a previsualizar los cambios. Entonces desplazándose hacia abajo, ahí está. No te preocupes. En breve te quedarás así. 15. 15 crea el asistente de cita Agregue toda la F: Y bienvenidos de nuevo. Entonces ahora que hemos mostrado nuestro formulario en el frontend, es el momento de agregar el resto de los campos del formulario. Así que volviendo al interior de nuestro tablero, hagamos clic en Insertar campo, y ahora podemos seleccionar un par de ellos. Entonces lo que necesitamos es el nombre del usuario, su dirección de correo electrónico, teléfono, área de texto. Creo que ya es suficiente. Entonces Insertar Campo, y ahí lo tenemos. Incluso antes de que hagamos alguna personalización, vamos a previsualizarla. Y ahí vamos. Entonces así es como debería verse. Ellos seleccionarán el tipo de servicio que necesitan. Proporcionarán su nombre, dirección de correo electrónico, su número de teléfono para que podamos comunicarnos con ellos y cualquier información adicional que cualquier información adicional que deseen que tengamos en mente. Y luego una vez que soliciten una cita con todos estos detalles, podremos ponernos en contacto con ellos por teléfono o correo electrónico y agendar la cita. Entonces con eso en mente, cerremos eso y luego actualicemos que comprometerá estos cambios. Bien, así que ahora está salvado. Vamos a previsualizar los cambios en el front-end. Si actualizo esta página y luego previsualizo los cambios. Sí, así que ahí lo tenemos. Entonces lo siguiente que queremos hacer es actualizar la apariencia del formulario que sea coherente o consistente con la marca del sitio web, los colores de la marca. este momento, cuando pasamos el cursor sobre él, es azul, y esos son los colores predeterminados que vienen con la formación posterior. También necesitamos cambiar algunos de estos detalles aquí porque es posible que desee usar su propio código de país para el número de teléfono y todo eso. Así que volvamos adentro aquí en el tablero. Vamos a hacer clic en el nombre. Entonces podemos cambiar esto a tu nombre, y luego este puede ser Alex Cross. También podemos convertirlo en un campo requerido. Se requiere nombre. Y luego apliquemos eso. Vamos a previsualizar eso por ahora. Este es un campo obligatorio. Este también es un campo obligatorio, pero estos no son obligatorios y se puede decir por este asterisco. Entonces ahora si decimos Enviar mensaje, notarás que estamos recibiendo estos mensajes personalizados que escribimos. Se requiere nombre, tipo de servicios requeridos. Pero estos no señalan ningún tema. Entonces, para que sea consistente, cambiemos eso a un apóstrofo. También se requiere la dirección de correo electrónico. Piernas en company.com. También es hacer que sea necesario. Tu correo electrónico es obligatorio. El número de teléfono puede ser opcional. Aplica eso. Y luego para el área de texto. Antes que nada, cambiemos. Está etiquetada con dos información adicional. Y para el marcador de posición, conocerte. Bien, así que vamos a previsualizar eso. Como puedes ver, información adicional, ¿qué más te gustaría que tuviéramos en cuenta mientras nos preparamos para conocerte? Número de teléfono. Todos estos detalles son personalizados por nosotros. Bien, así que actualicemos eso. Y ahora se han guardado los cambios. Así que volviendo al front-end en la página donde lo estamos editando. Seleccionar en cualquier lugar dentro del elemento de código corto. Podemos actualizar la página o simplemente hacer clic en aplicar para aplicar esos cambios que hemos realizado en el backend. Ahora está actualizado. Vamos a previsualizar los cambios. Bien, y ahí lo tenemos. Entonces básicamente así es como agregar todos los campos para el formulario de cita. En la siguiente lección, veamos cómo personalizar su apariencia, sus colores, para que sea coherente con el resto del sitio web. Entonces te veré en breve. 16. 16 crea el asistente de cita del formulario: Bienvenido de nuevo. Entonces, como pueden ver, cuando flojo sobre estos campos, son de color azul. Y eso no es lo que queremos porque eso no es consistente con los colores de nuestra marca. Entonces volviendo aquí adentro, lo que queremos hacer es mientras seguimos editando el formulario de solicitud de cita, ir al campo Apariencia. Y si pudiera volver a los campos, campo, si bajamos aquí, también tenemos aquí este botón que nos llevará al siguiente lugar, que es esta parte. Entonces si hago clic en apariencia, se dan cuenta ahora que tenemos esta parte resaltada. Si me desplazo hacia abajo hacia abajo, notarás que tenemos comportamiento aquí y aquí también tenemos comportamiento. Entonces, básicamente, estamos pasando por estos pasos para completar la configuración de nuestro formulario. Ahora que estamos dentro de la apariencia, antes que nada queremos cambiar. Esta es una vista previa de nuestro formulario. Esta es una vista previa de cómo aparecerá el formulario. Entonces, si selecciono banderas que se deshagan de los bordes en el campo, si selecciono Negrita, eso hace que esta línea sea negrita. Por defecto es bastante doloroso. Negativo. Este es el que me gusta. De hecho, entonces también tenemos material y ninguno. Entonces iré con negrita. Podemos seleccionar el que quieras. Ahora. Eso es por el estilo de diseño. Justo aquí. También tenemos la opción de cambiar los colores. Entonces ahora mismo estamos usando los colores predeterminados que vienen con, para mí tampoco, pero quiero seleccionar disfraz. Y eso revelará más escenarios aquí con los que podamos jugar para hacer la fórmula exactamente como queremos que sea. Entonces comencemos con un botón de enviar. Entonces ahora mismo antes de que cambiemos nada, el botón de enviar es de color azul y el color de la libración aquí también es ese azul. Así que vamos a cerrar eso. Oh espera, si tenemos una vista previa de esto, observe que nuestro formulario ahora está en negrita. Tiene colores de borde llamativos. Entonces vamos al botón de enviar. Ampliar eso. Y el color de fondo es azul. Entonces, si pudiera cambiar aquí y elegir este color amarillo, haga clic en esto para revelar esta parte, haga doble clic en eso y pegarlo ahí. Si lo previsualizamos. Ahora, de color amarillo, pero al flotar es azul. Entonces quiero cambiar eso. Esto es por defecto sobre querer ser tal vez ese color. Entonces ahora si tenemos una vista previa de eso al pasar el mouse, se come un color oscuro , o mejor aún, usemos los colores reales que queríamos usar. Entonces voy a hacer que sea ese azul muy oscuro que parece negro. Actualiza eso. Realmente no necesitamos cambiar el color de enfoque sino por consistencia. Bien, así que ahora vamos a previsualizar ahí. Impresionante. Entonces me gusta cómo se ve. Cerremos eso y actualicemos porque tienes cambios inéditos. Ahora está salvado. Bien, así que lo siguiente que queremos hacer es trabajar en ese color hover de los campos. Entonces cerrando eso, recuerda este menú desplegable, este campo, el tipo de este campo es seleccionar campo. Volviendo al interior de los campos. Recuerde que fuimos a insertar falló y el menú desplegable era un tipo selecto de entrada. Así que volviendo aquí, apariencia, disfraz. Aquí tenemos el tipo de entrada seleccionado. Y el color de borde predeterminado es este gris oscuro. Entonces, si abro ese gris oscuro en el estado predeterminado al flotar, es azul. Entonces lo que quiero es que sea más ligero. Entonces haz clic en eso y luego vamos a hacerlo de este gris claro. Vista previa de eso. Ahora como pueden ver, el gris es más claro que este otro gris. Sigo queriendo seguiré todavía quiero que sea más ligero de lo que es ahora mismo. Entonces déjenme empujar que nuestra junta previsualice eso, y me gustó ese nivel de calificación. Bien, entonces ahora en hover. Cambiemos el color del borde a ese amarillo. Péguela ahí dentro. Y vamos a previsualizar eso. En quien se coma ese amarillo. En foco, también queremos que sea ese amarillo. Pero puedes hacer que sea el color que quieras. ¿Recuerdas eso? Entonces para el color del icono, queremos que sea así de amarillo también. Pero puedes hacerlo hagámoslo de ese color negro oscuro. Sí. Así. Al pasar el cursor. Tiene que ser de este color oscuro. Incluso. Y también por defecto, este es el icono del que estábamos hablando. En sin embargo, sigue siendo negro. Quiero mantener esa misma columna. Bien, ¿y qué más? El color de los textos, el color del texto se ve bien. Ahora vamos a trabajar en este color de menú desplegable. Así que terminamos con seleccionar la lista desplegable. El contenedor debe ser frontera de contenedor. Hagámoslo así de oscuro. Gris ligeramente más oscuro. Sí, eso es gris un poco más oscuro. Y creo que todo lo demás debería seguir siendo como es. Así que vamos a cerrar eso. En primer lugar, permítanme actualizar eso para que podamos guardar los cambios. Eso se salvó. A continuación, trabajemos en el resto de los campos. Así que antes que nada quiero copiar este gris claro todo a través del resto de los campos. Volvamos a entrar aquí. Dentro de seleccionar. Era triple C, E. En lugar de copiar eso. Vamos a Entrada y área de texto. Esos otros tipos de campos son entradas. Y esta es la zona de texto. Estos tres son insumos. Entonces el color de borde predeterminado debe ser triple C E, C B, C E C, D. Déjame copiar eso. No hace falta copiarlo. Ahora todos tienen ese color, pero ahora queremos hacerlos amarillos al flotar. Entonces voy a copiar esa ropa amarilla que en flotar. En foco. También queremos que sea ese amarillo para el error. Dejémoslo en el color predeterminado porque los mensajes de error suelen ser de color rojo. Así que vamos a previsualizar eso. Ahora. Aquí vamos. Así que en el foco. Es de color dorado, de color amarillo, para que destaque y el usuario pueda ver dónde está escribiendo. Entonces una vez que tengamos eso actualizado, vayamos al front-end. Seleccionemos el formulario en cualquier lugar dentro del código corto que revela estos aplicados. Ahora vamos a previsualizar los cambios. Desplazamiento a la derecha hacia abajo. Como puede ver, la apariencia de los formularios ahora se actualiza según se desee. Ahora, así es como crear y personalizar el formulario usando formulator. En la siguiente lección, veamos cómo cambiar el diseño y empujarlo hacia arriba para que aparezca manera estilística en la sección de héroe. Y al mismo tiempo estaremos trabajando en esta sección redefinida de techado. Entonces ahora estamos editando oficialmente la sección del cuerpo. Te veré en breve. 17. 17 Crea la sección del cuerpo tejado rediseñada: Hola, bienvenido de nuevo. Entonces ahora que terminamos con el formulario de cita, es momento de comenzar a poblar la sección del cuerpo y comenzaremos con esta área aquí, con este bloque de texto. Queremos hacer algo así. Entonces, lo que quiero hacer es simplemente agarrar esto. Vamos a entrar aquí. Aquí es donde estamos editando la landing page. Y aquí dentro, claro esta es una sección de doble columna. Entonces tenemos esta columna. Si voy aquí, sólo puedo agarrar un rumbo. Y ahora porque es el elemento activo aquí, esto dice editar encabezado, y puedo seguir adelante y seleccionar, Eliminar, luego pegar eso ahí. También quiero volver aquí y agarrar este texto. Ahora, estoy copiando este impuesto, pero claro que necesitarás usar tu propio texto personalizado. Esto era solo un texto que se me ocurrió mientras estaba creando el sitio web de referencia. Muy bien, así que vuelve aquí y quiero hacer clic en este icono aquí arriba para traer un elemento editor de texto. Suéltelo cuando aparezca esa línea azul, y luego haga clic dentro de aquí y pegue ese texto ahí. O ahora, para tu caso, vas a escribir lo que quieras escribir ahí. Ahora, actualicemos eso. Y antes de seguir adelante, notarás que estábamos cambiando la familia de fuentes de cada texto o elementos de tipografía aquí arriba en la sección de héroes. Y no queremos seguir cambiando la topografía individualmente. Por cada elemento, solo podemos establecer una fuente global que cada nuevo texto adoptará cada vez que agreguemos nuevos textos. Entonces lo hacemos entrando dentro de este menú de hamburguesas, configuración del sitio, fuente global. Entonces hagamos la fuente primaria o las fuentes de encabezado, Montserrat. Y ahora notarás que esto ha cambiado a Montserrat. Da clic en cualquier parte de aquí para deshacerte de ese monitor secundario AX. Haga clic en cualquier lugar de allí. Para los textos, Ese es el cuerpo textos como éste, también queremos que sea Montserrat. Esto ha cambiado una Montserrat y por el acento también. Actualiza eso. También podemos predeterminar el peso de fuente que queremos para nuestros encabezados. Entonces quería agregar 800. 800 está bien. Actualiza eso. Así que ahora cada vez que agreguemos cualquier tipo de texto en las páginas web, será más interactuar por defecto. Entonces, si cierro eso, vuelve. Déjame cerrar eso. Entonces ahora si arrastre una rúbrica aquí, es Montserrat por defecto. Eso es lo que queríamos. Entonces ahora no necesitamos seguir volviendo a la configuración para cambiar. Qué teléfono burlar. Con eso hecho, primero aumentemos el relleno en la parte superior del texto, el espaciado entre el texto y el borde de esta columna en la parte superior. Entonces seleccionaré la columna de relleno avanzado. Vamos a empujarlo hacia abajo. Sólo estamos aumentando el espaciado por encima de él. Vamos a reducirlo un poco hasta 90. También aumentemos el relleno izquierdo. Quizá después de ese punto. Bien, así. Ahora para empujar esto hacia arriba en realidad va a estar empujando la columna hacia arriba. Así que vamos a seleccionar esta columna avanzada. Rompamos el margen y luego arriba. Vamos a empujarlo así hacia arriba. Hasta esta parte queremos. Entonces subamos a tal vez 20, dos tercios así. Y luego mientras aún estamos aquí, pasemos al estilo. Si bien esta columna todavía está seleccionada, estilo, fondo, quiero que sea de color blanco. Ahí vamos. También queremos volver al interior avanzado. Y vamos a darle un relleno de 20 por todas partes. Digamos 30 o 40. Empuja todo dentro así. Y entonces vamos a darle un radio fronterizo. Radio fronterizo de 20. Eso le da esta esquina redondeada todo redondo. Y luego actualicemos la página. Vista previa de los cambios. Y ahí vamos. Entonces así es como se ve. Hagamos algo al respecto. ¿O se ve aquí? Tiene estos colores. Así que volviendo aquí, selecciona ese estilo. Déjame ir y agarrar este color oscuro. Sea que mientras esto todavía se selecciona estilo de color de texto, pega eso ahí dentro. Y vamos a la tipografía, aumentemos el tamaño. Creo que quiero que sean 900, así. Bien, actualice eso. Vamos a previsualizar los cambios así como así. Entonces ahí vamos. Entonces así es como crear la sección de techado redefinida. Creo que me gusta cómo se ve. Lo siguiente que queremos hacer es crear estos amplios elige sección. Entonces veamos cómo hacerlo en la siguiente lección. Nos vemos pronto. 18. 18 crea la sección de cuerpo por qué nos elijas.: Bienvenida de nuevo. Entonces ahora es el momento de crear la sección y elige. Esta sección. Así que volvamos al interior de nuestro editor. Y agreguemos una nueva sección. Y claro, es una sección de una sola columna. Sí, es una sección de una sola columna. Así que una sola columna. Y ahora claro, fíjate que el fondo es este negro oscuro, es este azul marino oscuro. Así que voy a agarrar eso. Copia. Selecciona esta sección, entra estilo, tipo de fondo, color. Ahora, pega eso ahí dentro. Ahora es esa tierra. Recuerde, la altura de una sección está determinada por el contenido dentro de una sección. Entonces agreguemos algo de contenido. Y notarás que aquí tenemos esta intersección que es de color blanco y tiene dos columnas. Entonces veamos cómo agregar primero una intersección. Así que volviendo aquí, voy a hacer clic en Plus y luego tenemos intersección. Así que lo dejaré caer ahí. Por defecto tiene dos columnas. Y eso es exactamente lo que necesitamos porque ahí está este bloque de texto y ahí está la imagen. Pero antes de trabajar en esa parte, vamos a agarrar también eso. ¿Por qué elige moverse más rápido? Podemos simplemente duplicar este encabezamiento. Así que voy a pasar el cursor por allí y luego hacer clic en estos dos duplicados. Y luego arrastraré esto y lo soltaré por encima de la intersección. Porque es del mismo color que el fondo. Se puede ver. Entonces lo seleccionaré. Si bien todavía está seleccionado, como puede ver, es el encabezado de edición. Déjame agarrar ese color amarillo. Bobby que vamos al interior de estilo. Pégalo ahí dentro. Volvamos al interior del contenido y vamos a alinearlo con la comida central. Así que agarra este texto. Probablemente eso también pueda duplicar eso, duplicar ese cuerpo de texto. Y luego haz doble clic en eso, pega eso ahí dentro. Entra en estilo, cámbialo a blanco y alinéalo al centro. Ahora por supuesto, necesitamos aumentar el relleno en la parte superior del texto. El espaciado entre el borde de la sección y el contenido dentro de la misma en la parte superior. Entonces seleccionaré la sección superior acolchada avanzada. Empujemos un poco las cosas hacia abajo. Y en la parte inferior también, debajo de la sección interna, necesitamos tener algún acolchado. Entonces hagámoslo también. Te voy a dar los 50. Todavía estamos bajo la sección. Ahora, sigamos adelante y seleccionemos la intersección. Cambiar, ir al estilo, fondo. Cambia el color a blanco. Así como así. Acabo de recordar que no pusimos esto como un H1. Se supone que es un H1. Cada landing page debe tener un H1 y no dos o tres. Sólo un H1. Y H1 es una declaración o frase que le dice al usuario, en pocas palabras de qué se trata esa página. Es la propuesta de venta única de esa página o de tu negocio. Y entro en detalles sobre eso en mi clase de SEO, que puedes consultar visitando mi perfil aquí en Skillshare. Muy bien, entonces ahora eso es un H1. Podemos tener tantos H2, H3, H4, H5 como queramos. Esto también es un H2. Y eso está bien. Muy bien, así que lo siguiente que queremos hacer es agregar este texto interior. Entonces nos preocupamos por tus necesidades. Copia eso. Duplicemos esto también. Arrástralo y suéltelo dentro de esa columna. Duplicemos eso. Arrastre y suéltelo debajo de eso. Entonces seleccionaré esto. Y como yo había copiado el texto, te preocupas por tus necesidades, pero tenemos que hacerlo un poco más pequeño. Así que ve al azulejo de insights. Y luego para estos textos, agarró P que seleccionan eso. Pégalo. Muy bien, déjame agregar una imagen aquí así que voy a hacer clic en esa imagen. Imagen. Es esto. ¿Bien? Entonces mientras la imagen es en realidad tenemos estos ajustes. Déjame subirlo. Aquí está, abierto. Insertar medios, y ahí vamos. Entonces podemos hacerlo más pequeño. También podemos duplicar el botón. Arrástralo mientras el botón izquierdo del ratón todavía está bajo presión de tus dedos, desplázalo hacia abajo usando la rueda. Conduce el botón ahí mismo. Y ahora aquí tenemos una lista de iconos. Así que volvamos a entrar aquí. Haga clic en esa lista de iconos. Arrastre y suelte la lista de iconos allí mismo. El margen justo aquí debajo del texto es demasiado, así que seleccionaré el texto. Margen avanzado. Reducir el margen en la parte inferior. Déjame copiar eso. Seleccione esto. Y luego vamos a expandir el elemento de la lista número uno. Voy a hacer doble clic en eso, pegarlo ahí. Vuelve aquí, toma esta copia que colapsa, esa, expande ese doble clic, pega ahí dentro. Y por último, copia eso. Transcurrido eso, expande ese doble clic ahí, pegarlo. Ahora. Por supuesto que ahora necesitamos cambiar los íconos, podemos cambiarlos. También quiero aumentar el espacio entre estos dos para poder seleccionar el botón, avanzado, margen, arriba, empujarlo un poco hacia abajo. Y luego al flotar, me he dado cuenta de que es blanco. Quiero que sea así de azul oscuro. Entonces, antes que nada, déjame seleccionar eso. Entra en estilo. Copia eso de la sección. Seleccione el botón. Al flotar. Tiene que ser de color negro y el texto tiene que ser blanco. O podemos hacerlo así de amarillo. Entonces déjame ser así de amarillo así. Volvamos aquí y cambiemos estos colores. Debajo del elemento de la lista de iconos. Pasemos al color del icono. Hagámoslo así de amarillo. Y al flotar. Hagámoslo así de azul oscuro. Así como así. Actualización. Revisemos los cambios. Así que desplazándose hacia abajo. Ahí vamos. Entonces ahora necesitamos aumentar el relleno alrededor del lado interior de esta sección de doble columna. Entonces volveré aquí, seleccionaré la sección de doble columna, relleno avanzado. Y porque esto está vinculado, podemos darle tal vez 30. Y luego ir dentro de borde de estilo. Vamos a probarlo. Necesito darle ese efecto de esquina redondeada. Seleccionemos también el estilo de imagen, border-radius. Redujamos así el tamaño para que quede equilibrado. Actualización. Y vamos a previsualizar los cambios. Ahí vamos. Entonces ahora me acabo dar cuenta que empujamos este adentro desde la izquierda. No deberíamos haber hecho eso. Así que volvamos a entrar aquí. Seleccione esto y luego a la izquierda cero. Actualiza eso. Revisar los cambios. Desplázate hacia abajo. Entonces ahora está correctamente alineado con el texto en la sección pura. Por supuesto, deberías tomarte tu tiempo para refinar lo que hemos podido crear hasta ahora. Esto es solo una guía, pero esperaría que te tomes tiempo para asegurarte de que todo se vea increíble una vez que adquieras las habilidades. Entonces básicamente así es como crear esa sección. En la siguiente lección, veamos cómo crear esta otra parte. A medida que avanzamos. Te veré en breve. 19. 19 Creación de la sección de cuerpo Técnicos calificados: Bienvenido de nuevo. Ahora, pasemos a crear la sección de técnicos calificados. Entonces esto es lo que estamos creando. Sin perder el tiempo, vamos a saltar aquí. Entonces, sigamos adelante y agreguemos una sola sección de columna. Así. Sigamos adelante y dupliquemos estos rubros. Lo voy a arrastrar ahí. Y antes de seguir adelante, antes que nada, seleccionemos esta sección avanzada. Pasemos al margen y aumentemos el espaciado entre esta sección y la anterior. Entonces margen top 50, digamos 100, así. Entonces ahora lo siguiente que queremos hacer es agregar este texto que está debajo de él. Duplicemos eso. Vamos a pegar eso ahí dentro. Y ahora fíjense que este texto de aquí mismo es más compacto. Tiene suficiente espacio a derecha e izquierda. Así que entremos aquí. Si bien esto todavía está seleccionado, quiero ir dentro del margen, izquierda. Vamos a mantenerlo a tal vez 200. Y a la derecha, 200. Y claro vamos a ir al estilo, centralizarlo así. Bien, así que lo siguiente que queremos hacer es seleccionar esto. Después haga clic con el botón derecho en Copiar. Seleccione este estilo de pegar con el botón derecho. Ahora esa es una forma de copiar y pegar los estilos aplicados a otro texto. Pero ahora, por supuesto esto queda alineado. Entonces por eso estos han sido empujados hacia la izquierda. Tenemos que seleccionarlo y asegurarnos de que esté alineado con el centro. Muy bien, así que ahora mientras, debido a que esta es una sección de una sola columna, podemos entrar aquí y arrastrar una, una intersección justo debajo del texto. Ahora tiene dos columnas porque queremos crear estas tres columnas. Y en cada columna tendremos una caja de imagen. Esta es una caja de imagen. Entonces voy a hacer clic en eso, volver aquí. Además, y voy a escribir cuadro de imagen. El que queremos es este por kit de elementos. Así que vamos a arrastrarlo y soltarlo ahí. Y claro, seleccionemos una imagen. Ya había subido estas imágenes. que puedas seguir adelante y hacer eso para evitar volver a la computadora para subirlos, solo seleccionaré una de las imágenes aquí. Insertar medios. Y ahí vamos. Entonces, lo siguiente que vamos a hacer es entrar en estilo para empezar a peinar los colores aquí. Cuerpo. Creo que el color de las etiquetas corporales está bien. Pero para el título, cambiemos el color a amarillo. Amarillo, y al flotar, podemos darle este color oscuro. Sí. Muy bien, para el botón, hagámoslo de ese color oscuro. Antecedentes. Ese color oscuro. Y al flotar, vamos a cambiarlo a atrás, amarillo. Así como así. Bien, así también podemos aumentar el tamaño de la rúbrica. Así colapsó que expanden ese título topográfico, la tipografía. Quizá en algún lugar ahí. Actualicemos eso. También es ir al radio de borde de imagen de 20, así. Y ahora lo que tenemos que hacer, ahora que estamos satisfechos con cómo se ve es duplicar esta columna dos veces. Así más, sobre estas columnas 12. Y luego vamos a deshacernos de este último. Entonces ahí vamos. Y necesitamos un cierto espaciamiento entre estos textos y la sección interna. Así que vamos a seleccionar el margen avanzado de intersección superior. Así como así. Actualiza eso. Antes de continuar, cambiemos el texto aquí. Entonces seleccionando este cuerpo de contenido, podemos cambiar esto a reparaciones de techos. Cambia estos dos. Fijación de jardín. Y cambiemos también la imagen. Así que selecciona eso. Simplemente selecciono una imagen aleatoria aquí. Insertar medios. Vamos dentro de esto, hagamos esa imagen tal vez esa inserción de medios. Y cambiemos el rumbo. Reemplazo de techo. Y vamos a actualizar eso. Con eso hecho, vamos a previsualizar los cambios. Entonces desplazándose hacia abajo. Ahí vamos. Así es como crear esa sección. En la siguiente lección, veamos cómo crear estos antes y después del efecto. Entonces te veré en breve. 20. 20 Crear la sección del cuerpo antes y después: Bienvenido de nuevo. Ahora es el momento de crear estas secciones de antes y después, lo cual me parece muy chulo. Le da al usuario un adelanto del antes y el después de un proyecto. Entonces, antes, después. Sin perder el tiempo. Volvamos a nuestro editor. Y como siempre, sigamos adelante y agreguemos una sección de doble columna porque como puedes ver, tenemos este bloque de texto y luego tenemos la imagen del antes y el después. Así que voy a volver aquí. Agrega una sección de doble columna. Si bien todavía está seleccionado. En esta sección, vaya a Avanzado. Démosle un no, otro mil, 100 margen superior. Puedes darle cualquier margen con el que te sientas cómodo. Entonces voy a arrastrar esto aquí. Y claro que esta es el área de texto. Por lo que brindamos soluciones duraderas. Copia eso, vuelve aquí. Déjame duplicar eso. Y luego arrastra esto ahí mismo. Y como pueden ver, su centro alineado, quiero que quede alineado. Vuelve aquí, duplica eso, arrástralo y suéltelo ahí. Y todavía tiene ese relleno que nos fijamos para la izquierda y la derecha. Entonces mientras aún esté seleccionado, iré a Avanzado y luego eliminaré este relleno, este margen así. Ir dentro de estilo, alineado a la izquierda. Ahora, para agregar esa imagen de antes y después, voy a hacer clic en esa. Y aquí voy a escribir antes y después o antes. Esto es por Pi ordinate add-ons para Elementor. Así que voy a arrastrar eso ahí dentro. Ahí vamos. Entonces agreguemos la primera imagen. ¿Dónde está? ¿Ahí? Lo tenemos. En la imagen posterior. Ahí vamos. Ahora, actualicemos eso. Y vamos a previsualizar primero los cambios. Así que desplazándose hacia abajo. Entonces, como puedes ver, se ve un poco diferente a lo que tenemos aquí, porque aquí es justo el momento tu cursor del mouse está sobre la imagen, automáticamente comienza a mover esta configuración. Entonces esa es una de las configuraciones que van de nuevo aquí. Vamos a previsualizar esto. Primero tenemos que seleccionar esto y luego arrastrarlo alrededor. Pero no se mueve ya que movemos el cursor del ratón como lo está haciendo aquí. Entonces, para cambiar eso, vuelve aquí. Bueno, esto sigue siendo seleccionado. Opciones. Mueva el control deslizante al pasar el mouse. Entonces cuando seleccionamos eso, el momento en que el ratón está por encima de la imagen, eso sucede. Y me gusta así. Entonces, actualicemos eso. Y podemos hacer la imagen un poco más pequeña o más grande como queramos. Pero al mismo tiempo, quiero empujar estos bloques de texto hacia abajo solo por uniformidad. Déjame seleccionar el relleno. Acolchado en la parte superior. Quiero que sea hacia el centro de la imagen verticalmente. Así. Actualicemos eso. Vamos a previsualizar los cambios. Así que desplazándose hacia abajo. Ahí vamos. Entonces esa es nuestra imagen de antes y después, que creo que es genial. Ahora, eso es todo para esta lección. En la siguiente lección, veamos cómo crear. Bueno, esto es muy fácil de crear, pero vamos a crear esto en la siguiente lección. Entonces te veré en breve. 21. 21 Crear la sección de cuerpo con pájaros con experiencia: Hola, bienvenido de nuevo. Entonces ahora es el momento de crear estas secciones muy simples. En realidad estamos casi al final de la página. Y como ya habrás adivinado, esta es una sección de doble columna. Así que volviendo aquí en nuestro editor, simplemente voy a hacer clic en esta sección más doble columna. Seleccionemos la sección avanzada. Agreguemos un margen en la parte superior. Siempre es bueno mantener un margen uniforme en la parte superior de cada sección. Entonces le voy a dar 100. Ahí vamos. Por supuesto que esta es una imagen. Quiero hacer clic y dejar caer la imagen ahí dentro. Y porque es vertical, por eso la he hecho un poco estrecha. Haga clic en eso. Busquemos esa imagen. ¿Dónde está? Sí, eso es. Insertar medios. Y vamos a darle algunas esquinas redondeadas. Entonces, si bien todavía está seleccionado, entremos en el estilo. Radio fronterizo 20, así como así. Y ahora claro, dupliquemos este texto enterrado y lo pongamos ahí. Y nos olvidamos de cambiar este texto. Entonces, permítanme cambiar esto a técnicos calificados. Déjame regresar y copiar esto. Soluciones duraderas. Selecciona eso, pégalo ahí dentro. Y ahora para esto, copia esa pega eso ahí dentro. Duplicemos este texto. 40 justo debajo del encabezamiento. Y quiero empujar este rumbo hacia abajo, ¿verdad? Aumentemos la altura de la imagen. Vamos a empujar, seleccionemos esta columna y empujemos todo hacia abajo yendo dentro de acolchado avanzado, acolchado superior. Simplemente puedes escribir los números. Entonces digamos 110. Y vamos a actualizar eso. Entonces revisemos los cambios. Desplazamiento hacia abajo. En este momento notarás que estos dos están demasiado juntos. Así que volver aquí y esa es una de las razones es porque eliminamos el relleno que estaba aquí por defecto. Pero también podemos seleccionar la propia sección. Y debido a que está conformada por dos columnas, podemos controlar el espaciamiento entre las dos columnas. Entonces, mientras se selecciona esto, ve a Disposición de columnas gap. Vamos a elegir más amplio. Ahora, si tenemos una vista previa de eso, notarás que la brecha es mucho mayor, así que vamos a desplazarnos hacia afuera. Y ahí vamos. Así es como crear esa sección. Oh, espera, no hemos agregado este botón. Así que vamos a duplicar este botón. Y vamos a arrastrarlo todo el camino hasta la sección. Déjala ahí. Ahora eso significa que necesitamos reducir este acolchado. Entonces selecciona la columna, reducela hasta que esté balanceada. Sólo ojo. Actualiza ahí. Creo que necesito reducirlo un poco más. A mí me gusta en ese punto. Bien, vamos a previsualizar los cambios. Desplazamiento hacia abajo. Y ahí lo tenemos. Entonces así es como crear esa sección. En la siguiente lección, una vez más, veamos cómo crear la sección de testimonios. Te veré en breve. 22. 22 Creación de los testimonios de la sección de cuerpo: Y estamos de vuelta. Entonces ahora es el momento de crear la sección testimonial. Como puedes ver, se ve casi exactamente igual que la sección de blanco elige. Entonces, sigamos adelante y dupliquemos esa sección. Volviendo aquí. Duplica esto, y es por eso Elementor es tan genial de usar. Así que básicamente lo hemos duplicado. Así que arrastraré esto hasta el fondo y lo soltaré tan pronto como aparezca esa línea azul. Y vamos a darle también cierto margen en la parte superior de sí, 100. Éstas tienen algún margen adecuado. Pero no nos engañemos. Déjame ver. Vamos a darle un poco más de relleno aquí arriba. Justo debajo de la forma bonos margen. Vamos a darle un 80. Bien, así que ahora volviendo al fondo aquí, vamos a seleccionar lo que dicen nuestros clientes. Entra aquí, selecciona eso, pega eso ahí dentro. Sea ese Ford ahí dentro. Pero necesitamos agregar algún margen a la derecha y a la izquierda. Entonces mientras todavía está seleccionado, margen avanzado a la izquierda, dos en él. Correr. Actualiza eso. Volvamos a entrar aquí. Entonces estos son los testimonios ahora. Entonces, volviendo aquí, tenemos que deshacernos de esta intersección. Ahora, seleccione eso y escriba testimonial. Testimonial, tenemos el testimonio por defecto que viene con Elementor, la versión gratuita. Y tenemos elementos niños. El que queremos es el de elementos kid. Arrástralo y suéltalo cuando veas esa línea azul. Y por defecto tenemos estas diferentes opciones aquí. A mí me gusta usar este de aquí, pero puedes experimentar con el resto. Entonces ahora mismo por el momento, estamos mostrando sólo un testimonio. Podemos ir dentro de los ajustes. Veamos diapositivas para mostrar. Podemos decir dos diapositivas para desplazarse, claro, esa es la cantidad, por la cantidad de diapositivas que debe Es scroll. Ahora, sigamos adelante y trabajemos en la apariencia. Volver al interior del diseño. Ahora vamos a testimonial. Aquí tenemos una lista de los tres testimonios. Testimonios número uno, aquí es donde se supone que debe venir el nombre del cliente. Bien, designación, Gerente de Mercadotecnia. ¿En qué empresa? Entonces ahora necesitamos algunos textos para su revisión. Déjame agarrar bien, no puedo agarrar ese texto. Déjame agarrar este texto. Básicamente, no tenemos tiempo para intentar escribir un testimonio real. Bien, así que eso es lo que dijo Alex Brandon. Sigamos adelante y juguemos con los colores. Estilo. Si hemos colapsado el diseño. Como puedes ver, tenemos estilo de contenido envoltorio, tenemos la descripción, calificación, ícono tirado y los clientes. Entonces comencemos con un cliente. Color del nombre del cliente. Mantengámoslo así de amarillo. Pega eso ahí dentro y ahora es amarillo. Al flotar, podemos hacerlo blanco así. También podemos jugar con la topografía o tamaño del nombre. Así que sólo voy a volver al default. Bien, luego designación de clientes. Vamos a darle un color blanco. Al flotar, podemos darle el color amarillo tan claro. Es como una inversa. Entonces ahí vamos. Imagen del cliente, puedes jugar con una imagen de cliente. Simplemente me gusta en la configuración predeterminada para la imagen. Pasemos a la descripción. El color es, obviamente bien. Pero puedes cambiarlo a cualquier color que quieras. Así que lo dejaré en negro. Entonces también tenemos esta cita aquí arriba. Podemos cambiar el color al color que quieras. Simplemente me gusta como un tenue citas de colores. Y ahí lo tenemos. Entonces volviendo al interior del contenido, testimonial, Brandon, vamos a expandir eso. Podemos cambiar el avatar del cliente. Y yo había proporcionado algunas imágenes para el testimonio. Aquí vamos. Ese es Brandon. Voy a colapsar. Alex, expande eso. Lisa sonriendo. Nuevos medios artísticos. Y tal vez vamos, busquemos algunos otros textos para proporcionar ahí P que me dejen ponerla así que eso es lo que dijo. Justo ahí. Lisa Smiley. Oh, espera, agreguemos su avatar. Esa es Lisa. No, esta es Lisa. Sonríe. Y vamos a colapsar a Lisa y agregar una tercera persona, Nord VPN. Entonces vamos a dar su testimonio aquí. Ahí vamos, y su avatar. Por lo que también podemos determinar la calificación que dieron al sitio web. Entonces tal vez este tipo nos dio una por una calificación de cuatro de cinco. Actualiza eso. Entonces, como pueden ver, este es un cuatro de cinco. Así que volvamos al interior del estilo. Disposición interior. Queremos darle a esto una esquina redondeada. Entonces 20, así como así. Actualiza eso Vamos a previsualizar los cambios. Desplazarse hacia abajo hasta la parte inferior. Y eso es lo que tenemos. Entonces así es como crear la sección testimonial. Al concluir esta página, sigamos adelante y creamos esta sección de línea directa de emergencia antes de crear la carpeta. Entonces te veré en la siguiente lección. 23. 23 Creación de un número de emergencia de la sección del cuerpo: Hola, bienvenido de nuevo. Entonces ahora es el momento de crear la sección de línea directa aquí debajo de los testimonios. Entonces aquí estamos. Volviendo aquí. Vamos a crear una sección, sección de columna única, así como así. Y ahora tenemos una columna dentro de esa sección. Entonces cambiemos el color de la propia columna a amarillo. Entonces seleccionaré el estilo de columna. Déjame ir y agarrar este amarillo. Si bien esto todavía está seleccionado, iré a estilo, fondo, color así. Ahora, vamos a duplicar este texto. Quiero duplicar esto porque no quiero tener que cambiar el color ahí dentro. Entonces vamos a copiar eso. Seleccione eso. Aquí. Editemos ese centro alineado. Entonces podemos duplicar esto. Si bien esto todavía está seleccionado. Vayamos al estilo. Cambia el color a blanco. Tipografía, hacer que la fuente sea más pequeña. Y seleccionemos la columna y luego avanzamos. Vayamos al margen. Y margen a la izquierda, tal vez algo así como 100. Margin-derecha. Cien. Vayamos al radio de borde de estilo. Trabajemos en el acolchado. Parte superior acolchada. Solo empujemos mientras lo hacemos un globo ocular. Tal vez 35, fondo 35 también. Creo que está bien. Entonces copiemos este texto por aquí. Pegue eso mientras este esté seleccionado. Y ahora es el momento de empujar esta parte amarilla hacia arriba. Así que selecciona la columna en sí, margen superior tiene que ser negativo hasta algún lugar allí. Actualiza eso. Y vamos a previsualizar los cambios. Así que desplazándose hacia abajo todo el camino hasta la parte inferior. Y ahí lo tenemos. Entonces así es como crear esa sección. En la siguiente lección, trabajemos en esa carpeta. Entonces te veré en breve. 24. 24 Creación de la sección de pie de página: Bienvenido de nuevo. Entonces ahora que hemos terminado con la sección del cuerpo, es momento de trabajar en la sección de pie de página. Y al igual que hicimos con la sección de encabezado, vamos a construir la carpeta por separado, no aquí mismo donde estamos editando la sección body. Entonces es momento de salir de esta parte. Entonces voy a hacer clic en este menú de hamburguesas. Entonces la salida será redirigida al backend. Y desde aquí podemos ir a la carpeta de cabecera Elements kids. Y ahora podemos decir Agregar nuevo. Recuerda que primero creamos el encabezado. Ahora es el momento de crear la foto. Vamos a darle un nombre. claro que el tipo es ahora la carpeta que la necesitamos. Lo hicimos visible en todo el sitio. Y necesita estar activo. Cuando tienes varias carpetas o encabezados, puedes activar algunas, y eso significa que no serán visibles en el sitio web. Bien, así que sigamos adelante y guardemos los cambios. Y ahí vamos. Así que vamos a editar. Y luego haga clic en editar los contenidos serán redirigidos al front-end. Y a partir de ahí podemos construirlo de la misma manera que construimos el encabezado. Entonces aquí estamos. Como puedes ver en nuestra página web de referencia, cuenta con tres columnas. Entonces, sigamos adelante y agreguemos una sección de triple columna. Ahí vamos. Recuerda que siempre puedes cambiar el tamaño de estas columnas. No son rígidos. Entonces comencemos agregando una imagen aquí para que podamos agregar un logotipo. Seleccione eso, seleccione el logotipo, inserte la imagen. Lo siguiente que tenemos que hacer es agregar este texto, una breve descripción. Entonces entrando aquí, ahora, lo bueno de Elementor es que si por ejemplo estoy editando esta página aquí mismo entre la página de edición, o digamos que estoy en el editor. Puedo copiar un elemento con su contenido desde un área. Haga clic en cualquier parte de esta copia de texto. Vaya a otra página o área que esté utilizando Elementor propia dentro de ese mismo sitio web. Haga clic y luego pegue. Dice tan fácil como eso. Yo solo quería mostrarte eso, pero déjame borrarlo. Agreguemos un editor de texto. Lo siguiente que tenemos que hacer es crear. Vamos a crear estos enlaces rápidos. Entonces voy a hacer clic en eso, Agregar un encabezado de texto. Y luego vamos justo aquí y agarremos este color. Copia. Si bien esto es seleccionado, estilo. Cambia el color. Y luego enlaces rápidos. Entonces vamos a hacer clic en eso. Agregar lista de páginas. Lista de páginas, arrástrela debajo del encabezado Enlaces rápidos. Ahora podemos agregar un artículo. Así que básicamente estamos agregando páginas como elementos de lista aquí. Entonces, para el primer ítem, expanda eso. Vamos a llamarlo hogar. Inicio. Ahora, desde este menú desplegable, seleccione la página principal. Prolapso ese Artículo. Se puede llamar a esto sobre. Así que básicamente puedes agregar cualquier página como elemento de menú aquí mismo. Entonces selecciona esto, selecciona la página acerca de. Agreguemos un contacto más, página de contacto. Y así es como se ve. Entonces yendo dentro de estilo, si colapsamos la lista en sí, como puedes ver, tenemos íconos. No necesito íconos. el texto para que podamos editar el texto. Textos color. Vamos a darle ese azul oscuro. Y sobre la pobreza, en hover, vamos a darle ese amarillo. Así como así. Y el espaciado aquí es bastante pequeño. Así que permítanme seleccionar la sección en sí. Brecha de columnas. Quiero que sea más amplio. Así como así. Quiero aumentar eso porque aquí hay demasiado espacio que no estamos usando. Actualiza eso. Vamos a previsualizar los cambios primero. Bien, entonces ahora notarás que hay mucho relleno en esta imagen en el logo. Entonces volviendo aquí, selecciona el logo, quita el margen y reduce el margen izquierdo hasta ese punto para que quede alineado con el texto. Actualicemos eso. Perfecto. Ahora, tal vez quieras tener dos columnas aquí de enlaces. En caso de que tengas muchos enlaces que quieras compartir. Así que puedes entrar aquí y elegir una intersección. Déjalo caer ahí. Y porque tiene dos columnas, escoge este elemento y déjalo caer ahí. Y puedes duplicar eso. Se quitó el último. Y ahora aquí puedes tener más enlaces de página. Entonces, por ejemplo si tienes una página de derechos de autor, si tienes una página de Términos y Condiciones, puedes tenerla en esta columna. Entonces por supuesto ahora se selecciona esto. Podemos editar estos dos términos y condiciones. Licencias, tal vez política de privacidad. Y puedes redimensionarlo en consecuencia. Y ahora tienes dos columnas. Entonces, actualicemos eso. Y vamos a previsualizar los cambios. Y ahí lo tenemos. Lo siguiente que tenemos que hacer es crear estos formularios de inscripción. Déjame copiar esto. Duplica eso, arrástralo y suéltelo ahí. Selecciona eso, pega eso ahí dentro. Ir a la tipografía de estilo, redimensionarla en consecuencia. Entra aquí, selecciona ese texto. Duplicar eso. Arrastra eso ahí dentro. Para que pueda arrastrar eso. Y luego por supuesto finalmente, necesitamos agregar esta forma. Y como ya habrás adivinado, esta es una forma de formulador. Entonces vamos al backend para crearlo. Entonces, antes que nada, déjeme decir eso. Vista previa de los cambios. Ahí vamos. Así que vayamos dentro de nuestro tablero de instrumentos. Aquí todavía estamos en la fórmula más tarde. Vamos a hacer clic en Formularios. Y ahora puedes ir a Crear. Solo usaré este formulario de suscripción prefabricado al boletín. Continuar. Formulario de registro, Crear. Y ahí vamos. Entonces necesita nombre y correo electrónico. Así que vamos a previsualizar eso. Y claro que tiene unos colores y ajustes predeterminados . Cierra eso. Vamos a Apariencia, atrevido, disfraz. Vamos al botón de enviar. Por supuesto que lo necesitamos. Amarillo. Copia eso, pega eso ahí dentro al flotar. Queremos que sea de este color. Siempre es bueno tener un conjunto consistente de colores de marca. Vista previa de eso. Ahí vamos. Ahora vamos a trabajar en el campo. Entrada. El color del borde. Yo quiero que sea, fue triple CE, CE, la ECE, así. Al flotar. Podemos hacerlo de ese color amarillo. En foco. También puede ser ese color amarillo. Publicar. Vamos a copiar ese código corto. Vuelve a nuestra página aquí, nuestro editor. Aquí está el editor. Agreguemos un elemento de código corto. Aquí vamos. Arrástralo y suéltalo ahí. Aquí vamos. Así que voy a pegar ese código corto aquí. Y ahí vamos. Entonces este margen es un poco demasiado grande, así que seleccionaré el texto margen avanzado, abajo. Reducirlo un poco. Y agreguemos también algunos íconos de redes sociales. Iconos de redes sociales. Vamos a dejarlos caer ahí. Y eso trae este equilibrio aquí para cubrir este espacio, Vamos a empujar estos íconos de las redes sociales hacia la izquierda, igual que esa actualización. Y vamos a previsualizar los cambios. Entonces ahí vamos. Podemos hacer de esto un enlace a la página principal. Entonces hagámoslo rápidamente. Seleccione esta imagen como de costumbre, vaya a Contenido, enlace, URL personalizada. Déjame elegir la URL de inicio. Así como así. Actualización. Vista previa. Ahora, si hago clic en esto, nos llevará a la página principal. Y si nos desplazamos hasta el fondo, veamos si tenemos la carpeta. Ahí vamos. Pero ahora necesitamos un cierto espaciamiento entre estos dos. Así que déjame hacer clic en Editar con Elementor para que podamos editar la página en sí, la sección del cuerpo, desplazándonos hasta la parte inferior. Todo lo que tenemos que hacer es seleccionar esta sección que está sosteniendo la emergencia. Ir a Margen avanzado abajo. Vamos a darle 100. Yo pagué eso. Vista previa. Los cambios. Desplázate hasta la parte inferior. Y ahí vamos. Así que tenemos un buen espaciado aquí. Puedes aumentarlo o reducirlo si quieres. Entonces ahora con eso, Así es como crear la landing page o la página principal. En la siguiente lección, veamos cómo crear el resto del sitio web. Entonces seguiremos en breve. 25. 25 crea la página sobre nosotros la sección de héroes: Estamos de vuelta. Entonces, ahora que hemos terminado con la página de inicio, es el momento de pasar a la página Acerca de nosotros o a la página Acerca de. Y estoy justo aquí en mi tablero. Pero antes de empezar a construirlo, echemos un vistazo al sitio web de referencia. O a la derecha, así desplazándose hacia abajo. Ahí vamos. Entonces esto es lo que estamos construyendo sin perder el tiempo. Volvamos a nuestro tablero. Vamos al interior de las páginas. Recuerda que ya creamos las páginas. Entonces ahora lo único que tenemos que hacer es entrar sobre Eddie. Y aquí estamos. Así que sigamos adelante y configuremos la página como hicimos con la página principal para la plantilla, Vamos a elegir ancho completo, Elementor, ancho completo. Vamos a entrar en la configuración de Astro. Elija ancho completo, barra lateral estirada, sin barra lateral. Entonces deshabilitemos el encabezado y el pie de página. Actualiza eso. Y ahora está actualizado. Hagamos clic en editar con Elementor para que podamos ir al front-end y comenzar a construirlo visualmente. Y aquí estamos. Por supuesto, recuerda ahora no podemos editar esta foto o encabezado desde aquí porque aquí no es donde lo creamos. Pero son visibles porque ya los creamos y son visibles en todas las páginas. Entonces ahora lo primero que necesitamos para crear esta sección de héroes. Entonces volviendo aquí, es una sección de una sola columna. Ahí vamos. Y primero tenemos que agregar la imagen de fondo. Entonces selecciona, mientras esta sección aún esté seleccionada, entremos al fondo de estilo. Seleccionemos una imagen. Creo que esta es la imagen, inserte medios. Y claro vamos a caer en estos bloques de texto. Entonces lo que queremos hacer es hacer clic en este icono aquí, luego arrastrar un bloque de texto ahí. Vuelve aquí, arrastra algo de texto ahí. Y luego necesitamos aumentar el relleno en la parte superior e inferior de esta sección. Para que podamos tener esta habitación aquí arriba y aquí abajo. Así que volvamos aquí. Seleccione una sección, relleno avanzado en la parte superior. Vamos a probar 100, algo así. Si bien todavía está seleccionado. Entra estilo, posición, centro, centro. Creo que eso me gusta. No queremos que se repita al otro lado. Y para el tamaño, elige cubierta, como de costumbre, eso significará que va a correr desde el borde de la pantalla hasta el otro borde de la pantalla. No habrá espacios en blanco en los lados como hicimos con la página de inicio. Entonces ahí vamos. Déjame copiar esto una vez más. Y ahora es el momento de pegarlo aquí. Pongámoslo en el medio. Recuerda que tienes que usar tus propios textos porque a esto solo se me ocurrió algo de texto de marcador de posición. Empuje hacia el centro. Así como así. Ahora seleccionando esta sección una vez más, agreguemos una superposición de fondo, un fondo, y luego tenemos una superposición de fondo. Y podemos usar un color negro. Entonces escojamos el negro. Eso asegura que el texto sobre la imagen destaque más. Como puedes ver ahora mismo, destaca. Seleccionemos el texto. Entra en estilo, luego vamos a darle un degradado. Regresaré y elegiré este color amarillo. Copia eso para el color inferior. Y luego para el color superior, claro, tiene que ser algún color blanquecino. Mientras aún estamos aquí. Contraer gradientes, expandir título. Vamos dentro de la tipografía para aumentar un poco el tamaño sobre nosotros. Seleccionemos esto para cambiarlo a blanco. Actualiza eso. Vamos a previsualizar los cambios. Ahí lo tenemos. Entonces la sección de héroes se hace en la siguiente lección. Veamos cómo crear nuestra historia, esta sección aquí mismo. Entonces te veré en breve. 26. 26 crea la página sobre nosotros Nuestra historia: Hola ahí. Bienvenida de nuevo. Sigamos trabajando en la página Acerca de Nosotros. Lo siguiente que queremos hacer es crear esta parte de aquí, nuestra historia. Y tiene estos dos fondos oscuros en estas dos columnas, misión y visión. Entonces volviendo aquí, seleccionemos una sección de doble columna, porque como puedes ver, esta es una columna doble, una columna bloque de texto y la columna de imagen. Y esta columna de bloque de texto tiene una intersección con doble columna. Entonces volviendo aquí, antes que nada, agreguemos una imagen. Haga clic en este signo más y, a continuación, arrastre una imagen allí. Y vamos a seleccionarlo. Entonces creo que esta era la imagen. Insertar medios. Por supuesto, podemos arrastrar esto para hacer la imagen más pequeña y crear espacio para el texto. Este icono aquí mismo para arrastrar y soltar un encabezado. Se me olvidó hacer de esto un H1. Así que selecciona Acerca de Nosotros. Conviértelo en un H1. Se trata de un H2. Eso está bien. Cambiémoslo a nuestra historia. Volviendo aquí. Mientras se selecciona esto, pega eso ahí dentro. Bien, déjame copiar esto. Copia eso. Haga clic en este icono. Arrastre el editor de texto hasta ese punto. Haga doble clic aquí, pegue ese texto ahí. Y notarás que el texto está muy cerca de la imagen. Entonces, seleccionemos la sección. Y bajo Separación de columnas, Seleccionemos más ancho aumenta ese espaciado. Ahora vamos a trabajar en el color de nuestra historia. Debería ser de este color oscuro. Copia eso mientras aún esté seleccionado, estilo. Pega ese color ahí dentro. Haga clic en cualquier parte de aquí para deshacerse de esa topografía. Aumentemos el tamaño hasta ese punto. Dale un peso de 900. Así como así. Ahora, para agregar la doble columna, volvamos aquí. La intersección tiene estas dos columnas. Por supuesto, entremos aquí y tomemos nuestra visión. Copia eso. Duplicemos esto. Arrástralo ahí dentro. Que lo cambie a nuestra visión. Redujamos el tamaño. A lo mejor 35. Ir al contenido del sitio y ponerlo en el centro. Hagámoslo un H3. Porque esto es un H2. H3, estamos siguiendo la jerarquía en los encabezados de acuerdo con las pautas HTML. Lo siguiente que queremos hacer es escoger la misión. Duplica eso, arrástralo por debajo de nuestra visión. Haga doble clic en eso y pegue eso ahí. El estilo lo haría en el medio. Bien, entonces ahora lo que queremos hacer es seleccionar esta columna que contiene estos bloques de texto. Entra al estilo. Tenemos que darle un trasfondo. Así que el color de fondo. Entonces déjame elegir ese color, copiarlo, pegarlo ahí. Ahora necesitamos estos copia amarilla que seleccionen el encabezado. Estilo. Pega eso ahí dentro. ¿Correcto? Lo siguiente que queremos hacer, facilitar mientras la columna aún está seleccionada, haga clic derecho y copie. A continuación, seleccione esta columna. Estilo de pegar con el botón derecho del ratón. Bien, así que ahora se pega el estilo. Duplicemos eso. Ponlo ahí. Duplicar el texto. Arrastra eso ahí dentro. Ahora cambiemos este cuerpo de texto a blanco. Seleccione esto, cámbielo a blanco. Lo siguiente, por supuesto, seleccionar esta columna. Frontera. Vamos a darle un radio fronterizo de 20. se aplica el mismo caso. Seleccione el entrenamiento de borde de estilo de columna. Ahora necesitamos crear algún espaciado entre las dos columnas. Entonces mientras esta columna sigue seleccionada, entra dentro del margen avanzado. Elimine ese enlace para que podamos editar celdas individuales. Y queremos aumentar el margen izquierdo, este margen izquierdo a algo así como diez. Eso empuja este margen hacia adentro desde el lado izquierdo. Queremos hacer lo mismo para esta columna. Entonces mientras se selecciona, ve al margen. Quita eso. Entonces aumenta el margen derecho hasta diez. Así como así. Y ahora fíjate que necesitamos tener algo de relleno aquí mismo en la parte superior. Entonces, mientras aún esté seleccionado, rompa eso. Y luego aumentemos el margen superior en la parte superior. El acolchado superior, algo así como 25 para el lateral. 2020. Y el margen en el impuesto ya está creando espacio aquí mismo. Como pueden ver, esta caja azul está empujando hacia abajo esta parte. Pero podemos seleccionar el texto, ir a Margen avanzado, abajo. Reduzca ese margen. Y luego mientras esta columna todavía está seleccionada, aumentemos el relleno inferior a 25. Entonces ahora la parte superior e inferior tienen un acolchado uniforme. Y vamos a repetir lo mismo para esta columna. Así acolchado, 25, 25 y entrenamiento. Y ahora vamos a seleccionar este texto y reducir su margen inferior. Así como así. Actualización. Sus cambios para mencionar a Michelle. Oye, que nos olvidamos de conseguir esta imagen o esquinas redondeadas. Así que selecciona este radio de borde de estilo de imagen. Así como así. Entonces podemos arrastrar esto un poco para agrandar la imagen. Actualiza eso. Vamos a previsualizar los cambios. Bien, entonces ahí lo tenemos. Pero ahora fíjense que este texto está demasiado cerca de la sección de héroes, por lo que podemos empujarlo un poco hacia abajo. De hecho, podemos empujar hacia abajo toda la sección. Así que volviendo aquí, selecciona la sección. Margen avanzado en la parte superior, tal vez 50. Actualiza eso. Vista previa de los cambios. Sí, así que ahora mismo me gusta donde está. Y así es como crear esa sección. En la siguiente lección, veamos cómo crear lo que ofrecemos. Y como pueden ver, tenemos este bonito efecto hover. Veamos cómo crear esta sección en breve. Te veré pronto. 27. 27 crea la página sobre nosotros lo que ofrecemos: Lo que ofrecemos, sigamos adelante y creamos esta parte. Así que volviendo a nuestro editor, voy a añadir una sola columna. Sí, es una sección de una sola columna así. Y esta sección de una sola columna tiene una intersección con tres columnas, como puedes ver aquí mismo. Entonces estamos agregando una intersección como hicimos con esta sección. Así que volviendo aquí, antes que nada, dupliquemos esto. Arrástralo y suéltelo aquí. También es duplicar eso. Y arrástralo y suéltelo debajo del encabezado. Como puede ver, estos dos están demasiado juntos. Entonces empujemos hacia abajo esta sección inferior. Seleccione la sección, coincidan en el mejor de los casos. Quita ese enlace. Y claro vamos a darle tal vez 100. Así como así. Ahora vamos a empujar esto al centro seleccionado bajo Centro de contenido. Y esto bajo el estilo al centro se alinea. Volvamos a entrar aquí. Quiero agarrar estos lo que ofrecimos texto. Seleccione esa cara hizo en su Trollope que seleccione este contenido. Pégalo ahí dentro. Y ahora es el momento de agregar nuestra sección de triple columna. Entonces haga clic en ese icono, Insertar una intersección. este momento tiene dos columnas. No te preocupes, trabajemos en una sola columna y dupliquemos dos veces. Entonces, entrando aquí. De hecho, lo que podemos hacer es duplicar esto y arrastrarlo justo debajo de estos textos. Y podemos editar esto en lugar de trabajar en estas nuevas intersecciones. Así que es hora de revertir los colores. El fondo tiene que ser amarillo. Entonces déjame seleccionar ese texto. Escoge ese color. Después seleccione la columna en sí, estilo, fondo. Dame ese color amarillo. Ahora, ve a este estilo de columna, este color. Copia eso, selecciona este estilo de texto, color básico ahí. Entonces ahora lo hemos invertido todo. El texto es negro, así que bien, así que ahí vamos. Lo siguiente que tenemos que hacer es duplicar esto dos veces. Y quiero quitar esta última. Al igual que esa actualización. Pero ahora recuerden que hemos duplicado esta columna que estaba la izquierda y tenía márgenes derechos. Entonces eso significa que todos estos tienen márgenes correctos y como pueden ver, no es tocar el borde. Necesitamos tener el margen para éste a la izquierda, no a la derecha. Entonces seleccionando este y entrando avanzado. Este margen derecho necesita ser cero y observado esto. Entonces es cero. Y para la izquierda, diez. Entonces ahora eso aplica a la izquierda. Y ahora para éste, ya tiene un margen a la derecha. Démosle también un margen a la izquierda de diez. Entonces ahora está equilibrado. Escojamos algunos de estos textos. 25 años atendiendo a los clientes. Escojamos esto donde el contenido de expertos certificados. Por último, ofrecemos garantía. Muy bien, entonces ahora lo único que queda son los efectos hover. Entonces seleccionando cualquiera de las columnas en sin embargo queremos que sea de color blanco. Sí. Recuerden que se suponía que el texto era negro o gris oscuro. Entonces voy a copiar ese estilo de texto. Seleccione este texto. Estilo de pasta. Seleccione este texto y, a continuación, haga clic con el botón derecho en pegar estilo. Ahora al pasar el cursor, esto está cambiando a blanco y el texto sigue siendo visible. Tenemos que hacer lo mismo para esto. Así que selecciona este estilo de columna en hover, color, blanco. Y finalmente para este, estilo en hover, estilo de fondo de color. ¿Por qué? Actualizar eso? Y vamos a previsualizar los cambios. Derecha, entonces desplazándote hacia abajo. Ahí vamos. Entonces así es como crear esta sección. En la siguiente lección, veamos cómo crear esta sección. Te veré en breve. 28. 28 crea la página sobre nosotros Nuestros clientes: Y bienvenidos de nuevo. Entonces ahora es el momento de crear esta sección. Y como habrás adivinado, simplemente copiaremos algunos de estos elementos a la propia sección porque ese es uno de los principales poderes de la elemental. Te permite copiar elementos a otra sección que estés construyendo. Así que vamos a hacer clic más. Es una sección de doble columna. Si bien esta sección sigue seleccionada, vamos a darle un margen superior de 100. Así como así. Ahora, vamos a darle una imagen de fondo. Sí, vamos a darle una imagen de fondo. Si bien es seleccionado. Estilo de fondo, haga clic en el signo más justo ahí. Y seguiré adelante y escogeré esta imagen. Por supuesto ahora necesitamos agregar una imagen dentro de esta columna. Esta imagen. Haga clic en este signo más, suelte el elemento de imagen ahí dentro, y eso expande la sección. Entonces volviendo a la sección, Pasemos al puesto. Vamos a tratar de centro. Centro. No, eso no es lo que queremos. Centro inferior. Sip. Eso es lo que queremos. derrumbó el fondo, le dan una superposición de fondo de negro. Entonces selecciona eso y luego negro. Haga clic en cualquier lugar aquí. Para deshacerme de eso. Entonces aumentemos el poder de esa superposición de fondo hasta ese punto. Entonces, seleccionemos esto para cambiar la imagen. Entonces esta es la imagen. Y vamos a darle una esquina redondeada. Entonces, si bien todavía se selecciona el radio de borde de estilo de 20, también vamos a aumentar el relleno en la parte superior e inferior. Entonces mientras se selecciona esta sección, enrutamiento avanzado, 50 en la parte inferior, 50 en la parte superior. Ahora vamos a duplicar este texto. Sequía que ahí. Creo que es de color amarillo. Sí, es amarillo. Así que solo escogeré esto bajo estilo. Copia este color. Seleccione este estilo. Péguela ahí dentro. Duplicemos el bloque de texto. Déjala ahí dentro, y es de color blanco. Entonces mientras aún esté seleccionado, vaya al estilo, color del texto, blanco. Jersey ficha un llamado a la acción. Sí, lo hace. Entonces entremos aquí y digamos que selecciona este botón. El botón ahí dentro. Y mientras aún esté seleccionado, cambiemos el texto para hablar. Habla con nosotros. Por supuesto, usted proporcionará el enlace aquí. Entonces si quieres que se abra en una nueva pestaña, haz clic en esta rueda dentada. Seleccione Abrir en nueva pestaña. Entonces pon un enlace que quieras que este botón redirija a la gente a escribir aquí yendo dentro de estilo, quiero quitar este relleno, relleno izquierdo. Vamos a darle un 50. Derecha 50, arriba 20. Así como así. Para el radio fronterizo, intentemos 15. 15 está bien. También podemos tener un botón cuadrado si quieres. También puedes tener una esquina afilada si quieres quitando todos estos. Ahora como puedes ver, el color es verde. Entonces, seleccionemos este texto. Copia eso. Seleccione el botón. Péguela ahí. Al flotar. Queremos que sea blanco. Entonces, sobre fondo, el color debe ser blanco. Y los textos mientras aún bajo Hover deberían ser negros. Así como así. Actualiza eso. Y vamos a previsualizar los cambios. Bien, así que ahí lo tenemos. Así es como crear esa sección. Casi terminamos en realidad. En la siguiente lección, veamos cómo crear estos números. Están animadas. Entonces, si pudiera refrescar esta página, quiero refrescarla mientras estamos en la cima. Y cuando nos desplazamos hacia abajo, se supone que esos números deben estar animados así. Entonces veamos cómo crear eso en la siguiente lección. Te veré en breve. 29. 29 Construir la página sobre nosotros Hablemos los números (Actualizado): Bienvenido de nuevo. Esta es la última sección de esta página. Entonces veamos cómo crear. Gran regreso a nuestro editor. Justo debajo de esta sección, vamos a tener una sección de una sola columna. Vamos. Vamos a darle un margen superior. Al seleccionar el margen superior de 100. Eso lo hizo a mi lista. Luego haga clic en el signo más y agreguemos una intersección. En realidad está por encima de la intersección. Tenemos que añadir un encabezamiento. Entonces este color más oscuro. Entonces haré clic en duplicar esto, luego arrastrarlo y soltarlo como sección de Bob. Entonces está dentro de esta sección. Esta sección. Bien, entonces, ¿qué debería decir? Hablemos de números. Así que selecciona eso. Te das cuenta de que el lado derecho de aquí, este signo más. Y vamos a elegir contador redondo. Así que vamos a arrastrarlo y soltarlo ahí. Y como ves, ya está animada. Entonces lo único que tenemos que hacer porque proporciona unos sustantivos específicos como debimos haber utilizado. Tan concluidos sargentos. Entonces, una vez que hagas eso, mientras esto todavía esté seleccionado, simplemente haz clic en cualquier lugar dentro de él. Esto es entonces por supuesto lo que queremos hacer. Estos cambian el color de fondo a amarillo. Así que selecciona la columna en sí, estilo, color de fondo. Voy a copiar este amarillo. Pégalo ahí dentro. Cambiemos los colores de estos números. Entonces liga de todos modos, solo porque eso luego selecciona este contador, LMS. Ahora es el número de estilo lateral de consejería. Llamémoslo así color oscuro. Pégalo ahí dentro. es el título ese mismo color oscuro. Entonces es un poco más conspicuo. Y que lo que tenemos que hacer es duplicar esto dos o tres veces, muchas veces como se quiera mostrar. Y vamos a actualizar eso. Seleccionaré esta columna. Ir a Avanzado. Izquierda, quiero un cinco o diez. Y a la derecha quiero seleccionarlo. Copia. Seleccione éste. Estilo. Bien, así que ahora vamos a seleccionar la higiene más pequeña. A la derecha. Queremos usarlo en el suelo, margen diez. Entonces ahora este espacio está incluso por todas partes. Lo siguiente que queremos hacer es darle una esquina redondeada. Como de costumbre, seleccione el borde de la columna. Gracioso. El borde del arco de lactato. Entonces como esta frontera. Al siguiente trimestre sobre eso hecho. Ahora, vamos a seguir el juego. Entonces el segundo título aquí significa tener clientes. Entonces mientras se selecciona esto, los miembros del equipo, así , miembros, son 53 números clientes satisfechos. A lo mejor hemos seleccionado esto. Tenemos 3,000 más 8,000. Vamos a darle un sufijo de hilo dental. Mil clientes flops. O también podemos decir, seleccione esto, vaya dentro del concepto 320 proyectos. Y por último, el último, decir marrón a oficiales blancos seleccionando al último. Así que vamos antes de previsualizar los cambios, bien. Revisemos los cambios. hay algo que quiero mostrarte Sin embargo, hay algo que quiero mostrarte, desplazarte hacia abajo. Ahí vamos. Entonces lo que quería mostrarles es que no hemos agregado el margen por debajo de él, así que está tocando de nuevo aquí. Seleccione la sección Excel. Margen, fondo. Cien, han pagado, eso. Cambios. Se extiende hacia abajo. Vamos, así que tenemos un buen espaciado. Entonces así es como crear esta página. Y básicamente, como has notado, utilizamos los mismos principios que usamos desde la página de inicio. Eso significa que si quieres ver más páginas, tal vez tienes una página de servicios o quieres crear una landing page especial vendiendo un producto en particular con un descuento, solo lo que necesitas hacer es aplicar el mismo JC. Arrastrar y soltar. Aquí ha proporcionado nueva página. Deberías hacer es mentor a casa. Páginas. El anuncio se mostrará aquí mismo y podrá realizar ediciones. Y después empezaré a pintar. En la siguiente lección. Lección de cómo crear la página. 30. 30A Creación de la página de la página del blog: Y bienvenidos de nuevo. Entonces ahora es el momento de trabajar en la página del blog. Entonces, cómo funciona la página del blog es si pudiera simplemente hacer clic derecho en ver abrir enlace en nueva pestaña para que podamos ir al front end y mirarlo. Entonces esta es la página del blog. La página del blog funciona tirando de las publicaciones de blog que has publicado o publicado y mostrándolas aquí mismo. Así que cada vez que publiques una nueva entrada de blog, automáticamente se mostrará aquí. Entonces tenemos que decirle a WordPress, Oye, ¿sabes qué?, cada vez que publico una nueva entrada de blog que se muestra aquí mismo. Entonces, ¿cómo hacemos eso? Volvamos al interior de nuestro tablero. Y hagamos clic en Editar. Entonces, como de costumbre, comencemos con una plantilla que quiera ser de ancho completo. Vamos dentro de ajustes de Astro o ancho estirado. Barra lateral. Sin barra lateral. Vamos a poder estos encabezado y pie de página nuestros datos. Y si bien es Actualización, ahora ya está actualizada. Pero déjame cambiar a esta otra pestaña aquí que acabamos de ver. Como puedes ver, este es el encabezado y esta es la carpeta que hemos deshabilitado que nos proporciona Astra. Entonces, si no los deshabilitamos, tus páginas siempre tendrán este encabezado y esta carpeta. Y ya creamos una carpeta aquí. No necesitamos esto. Por eso hemos podido estos dos ahora en esta página porque con esta tabla que si actualizo la página, ahora no son visibles. Eso es lo que queremos. Así que podemos tener espacio libre para construir realmente la página con Elementor visualmente. Muy bien, entonces ahora que eso está hecho, voy a cerrar esta página. Ahora. En esta página, haré clic en editar con Elementor para que podamos empezar a trabajar en ello con Elementor. Y aquí vamos. Entonces ahora por supuesto, primero es lo primero, agreguemos una sección de ancho completo. Y mientras aún se selecciona la sección, entra dentro de fondo de estilo. Por supuesto que necesitamos una imagen. Y seguiré usando este medio de inserción. Y ahora, porque quiero que se vea exactamente como la sección de héroes que usamos en la página acerca de. Hay otra forma de crear plantillas que quizás quieras reutilizar cada vez en muchas páginas. Entonces, si pudiéramos cambiar rápidamente de nuevo al tablero. Ir dentro de las páginas. En la página acerca de, hagamos clic en editar con Elementor. Entonces ahora que estamos aquí en el editor de la página acerca de, y tiene elementos que podríamos querer usar en otras páginas. Todo lo que tenemos que hacer es ir aquí mismo a este menú. Guardar como plantilla. Y vamos a darle un nombre. Página, plantilla de página web. Por supuesto que le darías un nombre específico que te guste. Haga clic en Guardar. Y ahora está disponible para ser utilizada o insertada. Ahora, voy a salir de aquí. Así que podemos dejar eso en el tablero y volveré a cambiar a donde estábamos editando la página del blog. Déjame quitar eso. Y ahora si hacemos clic en este icono de carpeta aquí mismo, elemental, cargamos sus propias plantillas, pero queremos mis plantillas. Esas son las plantillas que has guardado. Se trata de plantillas que creaste antes. Y ahora tenemos la plantilla de página web que creamos, pulsamos , insertamos y aplicamos. Y aquí estamos. Como puedes ver, tenemos exactamente el mismo contenido y maquetación que teníamos para la página Acerca de. Pero claro que sólo podemos quedarnos con lo que queremos. Entonces me voy a deshacer de estas otras secciones porque sólo nos interesa tener eso. Son, así que voy a hacer clic en Actualizar. Y editemos esto al blog. Vayamos aquí a nuestra referencia. Déjame hacer clic en blog. Lee los últimos artículos de nuestro equipo de editores, copia eso, vuelve aquí, selecciona esto, pegarlo ahí, actualizarlo. Y ahora para mostrar los bloques de esta manera. Entonces como puedes ver aquí, tenemos cuatro entradas de blog. Estas son entradas de blog que había creado para este sitio web de muestra. Y WordPress básicamente los está sacando del tablero y mostrándolos aquí mismo. Así que volvamos aquí. Haga clic en este signo más. Seleccionemos una sola sección de columna. Si bien todavía está seleccionado. Entra en el margen avanzado top 100. Y ahora aquí dentro, agreguemos blog. Entrada de blog por elementos mantiene arrastrarla y soltarla ahí. Y ahora mismo está mostrando las publicaciones de blog predeterminadas que viene con WordPress. Y te lo mostraré. Entonces como puedes ver, HelloWorld, bienvenido a WordPress. Esta es tu primera publicación. Actualiza eso. Y vamos a previsualizar los cambios. Así que recuerda que en realidad no hemos creado ninguna entrada de blog en esta página. Entonces como he mencionado, está sacando este contenido del back-end. Entonces ahora tenemos que volver al backend y crear un par de entradas de blog, publicarlas, y comenzarán a aparecer aquí. 31. 30B Crea la página del blog Las publicaciones del blog: Volvamos al interior del tablero. Y aquí arriba tenemos puestos. Teníamos páginas aquí, aquí tenemos publicaciones. Así que haz clic en publicaciones. Aquí es donde encuentras la lista de publicaciones que tienes. Como puedes ver, aquí tienes el post hola mundo. Si lo veo rápidamente en una nueva pestaña. Así es como se ve. Déjame cerrar eso. Entonces quiero seleccionar eso y moverlo a la basura. Aplicar. Déjame cerrar esto. Ahora. Quiero decir Agregar Nuevo. Entonces agreguemos una nueva publicación. Vamos a darle un nombre. ejemplo, ideas de techado para propietarios de viviendas. Entonces ese es el nombre de nuestra entrada de blog. Escojamos una plantilla por defecto. Elementor, ancho completo. Ahora, la imagen que puedes ver aquí es una imagen destacada. Entonces, mientras todavía estamos bajo estos ajustes, tenemos imagen destacada, seleccione imagen destacada. Y vamos a seleccionar este conjunto de imágenes imagen destacada. Ahí vamos. Volviendo aquí, vamos a los escenarios astrales. podemos hacer que se estire de ancho completo. Sin barra lateral. Esta tabla, estas como de costumbre, publican, publican. Ahora bien, si volvemos aquí a nuestra página donde estábamos editando la página del blog, el archivo del blog, y actualizamos la página. Ya puedes ver que está mostrando la entrada del blog que creamos. Volviendo aquí. Lo que queremos hacer, como pueden ver aquí mismo, tenemos algunos textos, un poco de texto. Entonces volviendo aquí, lo que tenemos que hacer es poblar la entrada del blog con su contenido. Estas son las entradas de blog, recuerda, así que Edita con Elementor. Aquí sólo podemos agregar una sola sección de columna. Quizá agreguemos una imagen. Inserte los medios, y justo debajo de él. Agreguemos un bloque de texto. Por supuesto ahora este sería el contenido de tu, de tus entradas de blog. Pieza sería donde estás hablando este tema específico del que se trata la entrada del blog. Déjame ver si puedo agarrar algún texto de Lorem Ipsum. Entonces déjame dar click, leer artículo, copiar este Lorem Ipsum, como puedes ver, esta es una entrada de blog. Supongamos que el visitante ha llegado a la entrada del blog, puede leer sobre lo que querías que leyeran. Entonces volviendo aquí, seleccione este contenido de bloque de texto basado en eso de ahí. Ahí vamos, actualicemos eso. Y vamos a previsualizar los cambios. Entonces ahí vamos. Por supuesto que necesitarías agregar algo de margen en la parte inferior. 100. Vista previa de los cambios. Y ahora tenemos un buen espaciado. Por supuesto, ahora esta clase es para darte orientación sobre cómo hacer las cosas. Pero claro, tomarías tiempo para asegurarte de que tu entrada de blog esté muy bien diseñada. Y se ve increíble mientras los clientes, mientras sus visitantes lo leen. Entonces ahora que tenemos esa entrada de blog publicada, volvamos al interior del dashboard. Vayamos a las publicaciones. Y ahora aquí está, peso 0. Cuando nosotros, cuando pegué este encabezado de este otro sitio web aquí, vino con algunos ajustes. Necesito quitar esto y escribirlo yo mismo. Entonces lo que pasó fue cuando copié este rubro aquí mismo, déjame regresar. Cuando lo copié de aquí y lo pegué aquí. Lo pegué junto con su formato del otro sitio web. Por eso puedes ver ese código HTML. Entonces ahora si lo actualizo y vuelvo, tiene el nombre propio porque este no es texto preformateado que haya escogido de un sitio web diferente. Entonces lo que quiero hacer es crear una segunda entrada de blog al mediodía. Cómo limpiar su habitación, por ejemplo, entonces aquí dentro estos ajustes, Elementor ancho completo. Vamos a establecer una imagen destacada. Digamos que ese conjunto de imagen destacada. Y entremos a los ajustes de Astro para el trigo estirado. Sin barra lateral. Desactiva esos. Publicar. Editemos con Elementor. Bien, agreguemos una sección de una sola columna. Haga clic en eso para agregar una imagen. Establece la imagen. Y puede hacer. Entonces. Inserte los medios justo debajo de eso. A lo mejor un encabezado. Ponlo en el centro. Y esto tiene que ser un H1. Recuerda que cada página necesita tener un H1. Entonces arrastremos este texto debajo de su estilo. Empújalo en el medio. Y luego volvamos a este sitio web de referencia y copiemos el cuerpo de textos de este, este texto de Lorem Ipsum. Copia eso. Vuelve aquí. Seleccione esto, pegarlo ahí. Cambiemos el color de esto. Este color oscuro. Esto, mientras se selecciona este, estilo. Pégalo ahí dentro. A lo mejor hagámoslo mientras todavía está seleccionado. Vamos a darle un margen de prueba de 50. Actualiza eso. Eso es previsualizar. Ahí vamos. Entonces ahora permítanme cerrar eso. Y aquí mismo, ahora que hemos terminado de crear estas entradas de blog, la segunda, da clic en la salida del menú de hamburguesas. Ahora volvamos a la página donde estábamos editando nuestra página de archivo de blog. Entonces aquí estamos. Si lo vuelvo a refrescar. Y como puedes ver ahora, WordPress está sacando parte de ese texto del contenido de las entradas del blog para actuar como la salida o la breve introducción para que alguien tenga una idea de lo que va a leer más sobre cuándo abren la entrada del blog. Entonces ahora que se ve así en la siguiente lección, veamos cómo estructurarlo. Justo así. Al igual que esto en estilo cuadrícula. Entonces te veré en la siguiente lección. 32. 31 Crea la página de blog Personaliza la apariencia: Hola, Bienvenido de nuevo. Por lo que ahora es el momento de trabajar en la aparición de las entradas del blog. Actualmente se ven así, pero queremos que estén en una grilla. Entonces vamos a ver cómo hacer eso. Al seleccionar cualquier lugar dentro de todo el elemento , aparecen estos ajustes. Ahora lo primero que queremos hacer es elegir este menú desplegable y seleccionar raza con pulgar. Ahí vamos. Entonces, como pueden ver, ya está empezando a tomar forma, pero necesitamos trabajar en los colores. Bien, así que sigamos adelante y cambiemos el color de fondo. Voy a ir dentro de estilo. Y si colapsamos esto por un momento, tenemos estas seis opciones. Tenemos estos seis paneles. Entonces ahora abriendo el fondo del envoltorio. Escojamos un color blanco o grisáceo. Quiero unos colores ligeramente grises para que destaquen. Y luego vamos a elegir Vamos a colapsar eso y entrar. Mareal. Quiero que sea negra. Entonces tipografía, Sigamos adelante y elegimos este color oscuro. Vamos a pegarlo ahí dentro. Al pasar el cursor. Estamos queriendo ser así amarillo. Entonces voy a copiar eso. Colorea, pégala ahí. Entonces ahora se está poniendo amarillo cuando volvemos el cursor sobre. También podemos trabajar en la topografía. Familia Font-. Cambiemos eso a Montserrat. Volvamos aquí y pongámoslo en el centro, igual que ese centro alinea. También podemos aumentar el peso de la fuente a algo así como 800. Así. Vamos al interior del contenido. Ahí es donde editaremos este texto. Entonces color, también queremos que sea este color oscuro, así como así. Y ahora fíjate que tenemos demasiados textos aquí mismo. Queremos que sea todo el camino hasta alguna parte de aquí, no todos estos textos. Así que volvamos al interior del contenido. Y tenemos contenido de cultivo por palabra. Entonces digamos 20 palabras. Sólo queremos mostrar 20 palabras como extracto. Y creo que ese es un buen número. Entonces volviendo al interior del estilo, aumentemos el espaciado entre el botón y este texto. Entonces colapsando el envoltorio e yendo al contenido. Podemos aumentar el margen en la parte inferior en primer lugar, Breaking Bad y luego aumentar el margen inferior. Y centralicemos el texto. Así como así. Vamos al interior del botón. Cambiemos el color. Así que los textos colorean, dejémoslo en fondo blanco. Vamos a escoger este color oscuro. Pega eso ahí dentro. Y en hover. O tal vez podamos hacerlo de color amarillo. Así que vamos a seleccionar este color amarillo. Al pasar el cursor. Queremos que sea de ese color oscuro. Copia eso, pégala ahí. Así como así. Bien, entonces ahora note que el botón está en el lado izquierdo para que podamos alinearlo en el centro volviendo debajo del contenido. Botón Leer más. Empujémoslo al centro así y actualicemos eso. Por supuesto, este elemento tiene muchos más escenarios con los que puedes jugar hasta que te encanten los resultados. Entonces básicamente así es como crear la grilla. Te sugiero que sigas experimentando con todos estos diferentes ajustes y veas la mejor manera de presentar tu entrada de blog. Así que vamos a previsualizar los cambios. Y esa es nuestra página de blog o peso. Entonces necesitamos agregar un margen en la parte inferior de este elemento antes de concluir esta parte. Así que seleccione la sección lado verde avanzado, margen inferior, 100. Actualización que realmente cambia. Vamos a desplazarnos hacia abajo y se ve bien. Entonces básicamente así es como crear la página de archivo del blog. Cuanto más sea la entrada del blog que tengas, más te habrás mostrado aquí. Y una cosa más que quería mencionar es que ahora te darás cuenta si volvemos dentro de contenidos colapsar diseño, tenemos la parte de consulta. Aquí es donde estamos presionados, está sacando los datos de. Wordpress ahora está mostrando publicaciones de blog que están en la categoría sin categorizar. Actualiza eso primero. Si entramos dentro del tablero, notarás que tenemos estas dos entradas de blog, y están en la categoría sin categorizar. Podemos crear diferentes categorías y decirle a WordPress que solo muestre publicaciones de blog de esa categoría específica. Entonces digamos por ejemplo y un post, Vamos a crear una categoría. Entonces seleccionaré categoría y le puedo dar nombre. Reparaciones de techos. Yo sólo le pegaré a Enter. Automáticamente creará una babosa para nosotros. Entonces, si decimos edición rápida, esta es la babosa como puedes ver. También puedes tomar esta pierna aquí si quieres que sea diferente o aquí dentro. ¿Bien? Bien, así que ahora volvamos a todas las publicaciones. Y cambiemos cualquiera de estas categorías por ejemplo en esta. Vamos a, podemos editar la categoría aquí mismo. Podemos editar rápidamente y cambiar su categoría aquí mismo. Desmarque eso y verifíquelo, luego actualice. Y ahora está en la categoría de reparaciones de techos. También podemos ir dentro de editar. Y aquí mismo bajo la configuración de Wordpress, podemos desplazarnos hacia abajo y encontrar categorías. Ahora mismo porque hemos elegido las reparaciones de techos, como pueden ver, es la reparación de techos. Entonces, si tenemos varias categorías, podemos seleccionar cualquiera de aquí. Y esta entrada de blog estará en esa categoría. Así que ahora volviendo al front-end. Dentro de este contenido de consulta, mientras este es, se selecciona este elemento, entra dentro de la consulta. Cerremos esas opciones y seleccionemos solo reparaciones de techos. Entonces ahora como puedes ver, WordPress solo está mostrando la entrada del blog que pertenece a la categoría de reparaciones de techos. También podemos decir, si eliminamos eso y elegimos sin categorizar. Ahora muestra las únicas entradas de blog en la categoría sin categorizar. Recuerda aquí, es solo una entrada de blog que está en la categoría sin categorizar. Si quieres exhibir los dos, solo necesitamos agregar aquí también la categoría de reparaciones de techos. Puedes agregar tantas categorías como quieras y se mostrarán aquí. Entonces nuestros datos. Y vamos a previsualizar los cambios. Y ahí vamos. Así es como embellecer o personalizar el diseño de la página de archivo del blog. Ahora es el momento de hacer que su sitio web receptivo a diferentes tamaños de pantalla. Eso son pantallas móviles, tabletas, y ya se ve bien en computadoras de escritorio. Entonces, vamos a trabajar en esos otros dos. Entonces te veré en breve. 33. 32 Hacer que el sitio web responda al encabezado (Actualizado): Hola, bienvenido de nuevo. Entonces ahora casi terminamos con un sitio web, pero necesitamos que sea receptivo en pantallas móviles y tabletas. Entonces antes de empezar a trabajar en eso, veamos cómo se ve por mí en esos dispositivos. Teclado, Control Shift I. Y eso abrirá las DevTools. No te preocupes por todo este código. No hace falta tocar eso. Lo único que nos interesa son estos dispositivos de aquí mismo. Cada navegador tiene una forma de imitar diferentes tamaños de pantalla para ayudar a los desarrolladores a ver cómo su sitio web, una vez que esté listo para comenzar a usar las diferentes opciones de tamaño de dispositivo, hagamos clic en este pequeño icono aquí mismo. Y ahora eso expondrá estos ajustes. Cómo se ve en un iPad Air. Si voy a Samsung Galaxy, tiene como se ve el sitio web conocido como Samsung Galaxy. Algunos de los elementos ya están bien alineados, pero tendremos que hacer algo con respecto al encabezado. Como puedes ver aquí está el menú que barra de navegación, el pie de página. Nosotros no trabajamos. Veamos cómo podemos movernos en Surface Pro seven. Así es como se ve. Ahora que vemos cómo se ve en diferentes tamaños de pantalla. Eliminemos eso y cerremos los Neptuno. Ahora tienen más de edición con Elementor. Después haga clic en nuestro encabezado que nos llevará al lugar. Y QBR, como puedes ver, el encabezado editable. Seleccionaré esa sección y luego haré clic en este modo de respuesta. Puedo escribir aquí como una carpeta que va a sacar a colación los ajustes que nos interesan son, Empecemos con una pantalla móvil. Voy a hacer clic en eso. Y claro, como ya se puede decir, este es otro lugar donde podemos ver los looks de nuestro sitio web que solo quería que viéramos sin estas opciones de edición. Entonces mientras aún se selecciona el segundo. Entonces ahora lo primero que tenemos que entender por qué estamos haciendo que estos respondan es que si podemos volver al modo escritorio, estas son dos columnas dentro. Uno, tal que corre de izquierda a derecha. De izquierda a derecha es 100%. Entonces esto está ocupando un porcentaje. Marcas de botones Nice Now. Así que volviendo aquí, cuando esto es pequeño, las columnas son laboratorios y se apilan una encima de la otra. Y ocupan el 100% de la semana. Entonces ahora mismo, esta columna que sostiene el logotipo está ocupando el 100% del ancho desde la izquierda ahí, derecha. Podemos llegar al 50 por ciento. Entonces mientras se selecciona, hagámoslo en la columna. 50%. Así como así. Ahora la barra de navegación sigue siendo del 100%. Por eso está apilado abajo. Si lo seleccionamos, también podemos hacer el 50%. Y ahora ambos están comprando el 50%. Parece que también necesitas empujar hacia abajo el menú. Nicole demasiado cerca del borde. Está todo seleccionado. Vamos a Margen avanzado. Eso es genial. Ese margen superior. Subirlo hasta diez, luego marcarlo a la derecha. Hasta diez. Actualiza eso. Repasemos el cambio y así se ve. Pero claro tenemos que presionar Control Shift I y luego entrar en ese Item, luego cambiar a uno de los pequeños dispositivos como iPhone SE. Y así es como se ve. Bien, así que volviendo aquí, vamos a usar al modo tablet. Y hay una pequeña botella de Elementor que afecta a la gente probablemente eran pequeños medios como el mío. El mío es de unos 7 m. Y el pequeño error es que para poder ver el reflejo de los cambios que estamos haciendo mientras estamos trabajando en el modo tablet. Tendremos que arrastrar esto un poco, así como así. Necesita expandirlo un poco. Y no sé por qué sucede eso, pero si no arrastras esto y lo haces más amplio, no verás los cambios que estás haciendo. Ahora. Como puede ver, podemos ver los cambios que hemos realizado. Bueno, estamos en modo pantalla móvil. Y ahora volviendo al modo tablet, como pueden ver, de esto es de lo que estoy hablando. Entonces si por ejemplo I. Seleccione esto y elija 50%, no verá ningún cambio. Pero si lo arrastro un poco, ahora se puede ver que está ocupando el 50%. Así que ten en cuenta eso. Si selecciono eso y le doy el 50 por ciento. Ahora, por supuesto, tenemos que hacer esto mucho más pequeño. Entonces seleccionando solo tal vez algo así como 30%. Ahora esto significa ocupar el 75%. Por derecho. Ahora, déjame seleccionar el menú. Romper el margen ahí fuera. Y si no puedes ver esos mangos aquí, simplemente rueda hacia arriba para aumentar el valor hasta diez. O las teclas de flecha arriba y abajo del teclado de tu computadora. También aumentaré el margen derecho. Actualiza eso. Así que previsualice los cambios. Si cambiamos al iPad Air, estas son nuestras piernas. Volviendo aquí. Si seleccionamos el menú , aparecerá la barra de navegación real y podemos agregar aquí. Así que volviendo al interior de Contexto, Menú , Configuración, logotipo del menú, así, inserte medios. Ahora bien, si abrimos el menú, estos son nuestros glúteos, ¿verdad? Otra cosa que quizás hayas notado es este efecto de visión general. Queremos cambiar eso. Veamos cómo se ve bien el menú, pero entremos el estilo colapsó el envoltorio del menú. Podemos trabajar en estilo hamburguesa pequeña. Este es el estilo hamburguesa. Entonces, por ejemplo, para el color de fondo, puedes darle cualquier color que queramos. Pero claro que quiero hablar ese color amarillo. Copia eso. Pégalo ahí dentro. Y ahora es color de espalda. Actualiza eso. Y claro, incluso en las pantallas móviles, seguirá siendo ese amarillo porque color afecta a todos los tamaños de pantalla. Entonces así es como editar el encabezado. Ahora responde en todos los tamaños de pantalla. Se ve increíble. En la siguiente lección, veamos cómo hacer respuestas de una carpeta también. Entonces te veré en breve. 34. 33 Haz que el sitio web sea sensible al pie de página: Y estamos de vuelta. Entonces, para que la foto sea sensible, seguiremos los mismos principios que hemos seguido aquí mismo en el encabezado. Entonces, antes que nada, vamos a previsualizar estos cambios. Y lo que quiero hacer es salir de las herramientas de desarrollo. Y quiero seleccionar la página principal. Ahora vamos a pasar por encima de esto. A continuación, seleccione carpeta. Este es un atajo a diferentes editores. Bien, entonces aquí estamos. Seleccionemos este icono aquí mismo, modo de respuesta. Vamos a cambiar al modo tablet. Y claro, vamos a sacar esto un poco hacia afuera. Y ahora esto es un verdadero reflejo de lo que tenemos actualmente. Tenemos que hacer algunos cambios menores aquí mismo. Como vamos a reducir el tamaño de esta fuente para que quede en una línea. Hasta ese punto. También se reduce mal. Únete a nuestro boletín. Bien, así podemos empujar esto un poco hacia adentro. Veo que está mucho más cerca del borde que los textos. Entonces mientras esté seleccionado, avanzado, rompa eso. Y luego vamos, vamos a disminuir en sólo un poquito hasta ese punto. Actualiza eso. Bien, así que ahora cambiemos a teléfonos inteligentes. Entonces así es como se ve en los teléfonos inteligentes. Lo primero que quiero hacer es seleccionar este cuerpo de texto. Alinear el centro, seleccionar estos iconos sociales, alinearlos al centro. Seleccione este texto. Yo también lo alinearé al centro. Entonces contenta. Ahora recuerda que estas dos columnas están apiladas una encima de la otra. Sólo podemos dividirlos en dos. Selecciona esto y regálate el 50 por ciento de trigo. Igual que esta característica presente. Y ahora ambos están uno al lado del otro. Lo siguiente, pongamos esto en el centro. Alinear al centro e inscribirse en el formulario. Simplemente se ve increíble. Estamos preocupados facilidad. Así que actualice eso. Vamos a previsualizar los cambios. Entonces si golpeamos turno de control I, así es como se ve en una tableta. Y si cambiamos a tal vez Samsung Galaxy S8, así es como se ve en un Samsung Galaxy. Creo que me gusta así. Y así es como hacer que la foto sensible a diferentes tamaños de pantalla. En la siguiente y última lección, hagamos que las secciones del cuerpo de las diferentes páginas respondan en todos los tamaños de pantalla. Te veré en breve. 35. 34 Haz que el sitio web sea sensible a la página de inicio: Bienvenido de nuevo. Entonces ahora ya terminamos con el encabezado y pie de página. Los dos responsivos. Trabajemos en las secciones del cuerpo de las páginas. Entonces volviendo a casa, voy a seleccionar eso. Ahora estamos de vuelta a casa. Entonces ahora comencemos con la página principal. Entonces voy a seleccionar eso para que podamos ir directamente a comenzar a editarlo. Y aquí estamos. Entonces claro, lo primero que hay que hacer es hacer clic en el icono del modo responsivo y eso revelará la configuración. Vamos a cambiar al modo tablet. Y claro vamos a expandirlo un poco. Si tienes una pantalla panorámica, no creo que esto sea un problema. Simplemente verás que todo funciona correctamente. Ahora con eso, queremos empujar un poco este texto hacia adentro. Como pueden ver, nuestro encabezado se ve increíble, y si me desplazo hasta el fondo, nuestra foto se ve increíble. Entonces solo necesitamos hacer algunos retoques menores en el contenido del cuerpo. Entonces seleccionando esta columna, vaya dentro del margen avanzado a la izquierda. Vamos a aumentarlo un poco. Así como así. Y creo que ese es un buen lugar. Y es legible. Desplazarse hacia abajo. Todavía me gusta donde se encuentra esto, así que no lo tocaré. Hagamos lo mismo para esta columna. Seleccione el relleno avanzado de columna. Esto fue de 90. Pero a la izquierda, aumentémoslo hasta entrenar así como así. Seleccionemos esta columna. Acolchado avanzado a la izquierda. Vamos a darle 20 a la derecha. Así como así. Esto se ve increíble. Repetimos lo que hicimos. Seleccione ese avanzado. Esto es 126 en la parte superior. Entonces vamos a darte 120. Hagamos esto al 100%. Entonces sí, hagámoslo al 100%. Así como así. Déjame quitar este relleno para esta columna con la imagen. Hagámoslo también al 100%. Y ahora vamos a darle un relleno de 20 a la derecha. Entonces cualquiera a la izquierda, 50 en la parte superior. Mismo caso aplica esta serina. Y un truco genial que podemos hacer es que podemos llevar esta imagen antes de estos textos en las pantallas de las tabletas, pero guardarla exactamente donde está en la pestaña de las pantallas del escritorio. Entonces tenemos esta característica en elemental donde si selecciono eso y voy a este lugar, puedo seleccionar esta sección que está sosteniendo estas dos columnas. Y entrando en avanzado responsive, podemos revertir columnas en tablet. Y eso traerá la columna que estaba abajo, por encima de la que estaba primero. Entonces ahí vamos. Empujemos esto también al centro. Ese mismo caso aplica. Vamos a empujarlo al centro. Y parece tener algún margen extraño en la parte inferior. Entonces, seleccionemos este texto. Avanzado. Rompe eso. Y ahora lo hemos restablecido. Vamos a previsualizar los cambios hasta el momento. Antes de previsualizar cambia. Vamos a trabajar. Ampliemos un poco esta imagen. Seleccionando esa columna, tal vez 35%, para que ésta se convierta en 65 por ciento. Y ahora mismo tenemos demasiado margen en la parte superior. Entonces voy a seleccionar eso, entrar avanzado y romper que había tenido AT podemos aumentarlo solo un poco hasta ese punto. Ahora está equilibrado. Creo que la sección de testimonios se ve bien. Pero teníamos algún margen a la izquierda y a la derecha de esto. Tan avanzado. Quita eso. Y como puede ver, podemos decir que se verá así en este dispositivo, pero no en otros dispositivos. Por lo que estas son solo configuraciones que se aplicarán a la tableta. Entonces desplazándose hacia abajo. Esto tuvo algunos, creo, creo que esto se ve bien, pero hagamos este texto un poco más pequeño porque, porque ahí está demasiado cerca del borde, también podemos reducir el tamaño de ese texto. Alguien ahí, creo que se ve mejor. Actualicemos. Vista previa de los cambios. Control de Cambio. I. Vamos a cambiar al modo tablet, iPad Air. Y comencemos a desplazarnos. Bien, entonces tenemos ese problema ahí. Creo que necesitamos romper la configuración predeterminada que teníamos desde nuestro escritorio. Entonces voy a romper esto, seleccionaré esta columna. Ir a Avanzado. Quita eso y quítalo. Ahora, vamos a configurarlo una vez más. Margen superior. Estoy presionando la flecha hacia abajo en mi teclado. Ese es un buen lugar para el acolchado. Vamos a darle algo como 30. Eso está bien. Actualiza eso. Y ahí vamos. Entonces ahora se ve bien. Desplazamiento hacia abajo. Ahí vamos. Entonces la página se ve increíble. Y así es como hacer que sección del cuerpo sea sensible a diferentes tamaños de pantalla. Veamos cómo hacerlo en la página acerca de. Antes de concluir. Te veré en breve. 36. 35 Haz que el sitio web sea sensible a los móviles sobre el Pa: Entonces en este momento estamos a punto trabajar en la página Acerca de Nosotros. Pero pensé que debería darte un ejercicio para hacer antes del final de la clase. Así que vamos a la página Acerca de. Y como pueden ver, así es como se ve en las tabletas. Y si cambiamos a pantallas móviles, así es como se ve, ¿verdad? Creo que este es un buen ejercicio para que te familiarices con hacer que las páginas sean receptivas. No hemos tocado cómo hacer que secciones como estas sean receptivas. Así que tómate un momento y haz que tu página se vea increíble en pantallas móviles y tabletas. Entonces otra vez, cambiando a la página del blog, Veamos cómo se ve. Así que desplazándose hacia abajo. Por defecto, la página del blog se ve increíble. Así que aquí no hay mucho trabajo. Pero si quieres hacer algunos cambios para que se vea más presentable en diferentes tamaños de pantalla. Adelante, hazlo. Pero dicho eso, te habrás dado cuenta de que no tocamos en la página de contacto, pero eso fue deliberado. Por lo que la página de contacto también es parte de tu ejercicio al concluir esta clase, adelante y construye una hermosa página de contacto. Aplicar los mismos principios que aplicamos cuando estábamos creando esta forma. Simplemente crea el formulario en Terminator y se muestra en el front-end en la página de contacto usando un código corto. Sea creativo, mire otros sitios web y vea cómo ven sus páginas de contacto e intenta recrear algo así. Y dicho eso, tengo algunas reflexiones finales más. Entonces te veré en la lección final de esta clase. Nos vemos en breve. 37. 36 pensamientos finales: Enhorabuena. Si has llegado hasta aquí, significa que eres un finalizador. Mucha gente es capaz de comenzar algo, pero no todos son capaces de terminarlo. Algunas personas se distraen, otras simplemente se dan por vencidas en el camino. Pero has llegado hasta aquí. Eso habla mucho del tipo de persona que eres. Desde el fondo de mi corazón. Yo sólo quería decir, gracias por haber llegado hasta aquí, y felicitaciones por terminar esta clase. Ahora tienes las habilidades para construir cualquier tipo de sitio web que quieras desde cero usando WordPress y Elementor. Siempre es un placer tenerte aquí. Y como concluyo, sólo tengo un favor rápido que pedirte. ¿Te tomarías solo 1 min de tu tiempo y dejarías una reseña de esta clase justo debajo de este video? Y la razón por la que estoy pidiendo una reseña es para que ayudes a otros alumnos a descubrir esta clase. Cuantas más reseñas tenga la clase, más podrán encontrarla otros alumnos que busquen este tipo de clase porque el algoritmo Skillshare empuja a la clase hacia arriba y hace es más descubrible por más estudiantes. Así que tómate solo 1 min de tu tiempo y deja que otros alumnos sepan lo que encontraste de esta clase. ¿Cómo te sientes? ¿Qué te gustó de la clase? Lo recomendarías a alumnos de nivel principiante o intermedio que realmente van a recorrer un largo camino. Y será una gran manera de hacer de Skillshare un mejor lugar. Una vez más, quiero decir felicitaciones por completar la clase. Y eso es todo de mi parte por ahora. Hasta la próxima vez. Mantente creativo, mantente productivo y no olvides seguirme para que me avisen cuando publique una nueva clase. Te veré más tarde. Pieza.