La clase magistral completa 2022

1. Introducción al Elementor del curso: Muy bien, así que bienvenidos oficialmente al curso. Y antes de empezar, lambdas te dan algunos puntos, tiene y consejos sobre qué esperar al tomar el curso. Ahora, este va a ser el sitio web que construiremos juntos. Se llama nuestro viaje de pasaporte. Es para una agencia de viajes ficticia. Básicamente ayudan a los turistas a planear sus vacaciones de ensueño, si se quiere. Para que como se puede ver ahora mismo desde la página de inicio, sí tenemos el logo a la izquierda, el menú principal a la derecha. También voy a tener la banda de fondo ahora mezclándose en el encabezado. Aquí sí tenemos una imagen estática. No obstante, te mostraré una alternativa sobre cómo usar el video, nuestro fondo en su lugar. Si prefieres usar videos, te mostraré cómo hacer eso. Para el resto de la página de inicio, tendré diferentes secciones con diferentes tipos de contenido. Tendré la sección de Servicios. Habrá una sección de galería con imágenes de todo el mundo, una sección de blog destacando entradas de tilde lithos del blog. Pero también va a tener que hacer alguna sección de paquetes que hemos usado sección. Y luego finalmente, tendremos el pie de página. También vamos a construir dos páginas adicionales. Además de la página de inicio. Te mostraré cómo construir los limitadores de página del blog conseguirlo todo aquí. Tenemos los artículos todos suman la página del blog. Aquí vas a tener las publicaciones del blog. Entonces te mostraré cómo crear este tipo de diseño donde tengas, supongamos dos y encima. Y luego tendrás los diferentes posts de las diferentes categorías. Y luego finalmente, también te mostraré cómo construir la página de contacto que tendrá un muy sencillo nuestro formulario de contacto. Déjame mostrarte. Este va a ser el formulario de contacto. Entonces inicialmente vamos a usar la versión gratuita de elemental y porque no tiene bastantes características la versión pagada de elemental tiene. Vamos a hacer uso de tres plug-ins adicionales como compensación. Uno será el elemento o Encabezado y Pie de página por fuerza de lluvia de ideas para construir nuestro encabezado y nuestro pie de página. Haremos uso de los complementos esenciales plugins para proporcionarnos algunos elementos adicionales que van a utilizar para construir ciertos tipos de contenido. Y luego también usaremos el plug-in de formularios WP para nuestro formulario de contacto. Pero una vez que utilicemos pool elemental, ya no vamos a necesitar ninguno de estos plug-ins. Con alberca elemental, podemos hacer tantas cosas y te mostraré cómo hacer uso de ellas. Además, no se trata sólo del estilo y el Zan. Te voy a mostrar cómo hacer que el sitio web responda también. Para que si se ve en un dispositivo móvil o en una tableta, será receptivo. Como se puede ver, esto es para móvil y es receptivo. Ahora también te voy a ofrecer todos los videos e imágenes que he usado. Y de hecho, todas las imágenes con excepción de ésta se eliminaron en este momento. Todas estas otras imágenes, estas imágenes que en realidad me llevaron porque hago mucho de viaje. Y si quieres hacer uso de las imágenes, puedes. Pero si lo vas a utilizar con fines comerciales, por favor haz indicar que ella podría entonces para mi cuenta de Instagram, mi cuenta de Instagram es elegida Xander, sí tengo un seguimiento muy, muy pequeño, pero yo estoy tratando hacer crecer mi seguimiento en Instagram porque creo que muchas fotos. Entonces si te gusta viajar por todo el mundo, son algunas fotos de todo el mundo. Asegúrate de seguirme en Instagram palas de Sandra. Bienvenido una vez más al curso. Sinceramente espero y creo que disfruten de este curso sobre elemental. Y el curso se divide en varias secciones, como dije, la primera sección. En realidad antes de que saltemos a la propia propia elemental, asumiré que eres nuevo en la construcción sitios web y no sabes nada de alojamiento web de dominios web. En la siguiente sección, te voy a mostrar cómo puedes conseguirte un host web y el dominio web también. Si ya los tienes o estás familiarizado con este tema, salta esta sección y pasa directamente a la sección donde comenzaremos a construir el sitio web usando la versión gratuita de Elementor. Y luego en la siguiente sección nos centraremos en el diseño receptivo, cómo hacer que los respondan. Y luego tendremos la versión pagada del pool elemental elemental. También cómo trabajar con pool elemental para mejorar la funcionalidad y el diseño de su sitio web. Y entonces la última sección de este curso contendrá las actualizaciones son contenido adicional donde específicamente elegir diferentes tipos de elementos de diferentes tipos de características de elemental. Y ampliar y mostrarte cómo el paseo hacia fuera al jabón más completo. Una vez más, realmente espero que disfrutes y les guste este curso. Muchas gracias por ver. Empecemos ahora. 2. Primeros cosas en primer lugar.: Muy bien. Entonces primero las cosas primero, antes de empezar, hay algunas cosas que me gustaría que hicieras. En primer lugar, y lo primero aquí es que quiero que instales un tema llamado el tema halo. Este es un simulador. En realidad es por Elemental de sí mismos. Nos van a dar la bienvenida con este tema. Así que por favor siga adelante instalar y activar el tema. Y entonces lo que quiero que hagas es seguir adelante y crear algunos posts con los que van a entrar. Ya he creado alrededor de nueve posts aquí se puede ver que tengo tres categorías diferentes de Asia, Europa, y Sudamérica. Y cada una de estas categorías tiene tres puestos diferentes. Ahora, en realidad te voy a proveer el archivo XML. Contendrán todos estos posts. Simplemente puedes importarlos a tu sitio web. Y luego para las imágenes también, también proporcionaré probablemente un enlace a Dropbox. Tendrás acceso a todas estas imágenes que puedes utilizar. Muchas de estas imágenes en realidad para mi propia cuenta de Instagram, pero eres más que bienvenido a usarlas en tu propio sitio web. Lo único que pido es que si vamos a usar mis imágenes en tu sitio web y estás ganando dinero, sitio web divertido, por favor mencione que tienes estas fotos de mi cuenta de Instagram, así que por favor hacer eso. Bomb Levite para ti todos los posts contenidos a través de un archivo XML y también las imágenes que he usado. Ahora también he creado algunas páginas. Tengo la página Acerca de, la página Artículos, que sería como la página del blog, una página de contacto, una paloma destacada, por supuesto, la página de inicio. También. Cuando hayas terminado, ven aquí a Configuración, ve a leer y luego configura tu página de inicio en la página de inicio. Así que básicamente elige una página estática aquí mismo. Y luego dijo homepage para estar en casa. Por último pero no menos importante, también he creado un menú. Ve aquí a Menús de Apariencia y luego crea tu menú principal. Puedo decir que sí tengo mis muchos, muchos sin nombre llamados MainMenu. Y he añadido casa sobre artículos son destacados y contactos. Entonces eso es una pequeña tarea para que hagas. Nuevamente, te proporcionaré el archivo XML para las publicaciones y páginas, así como un enlace a Dropbox para las imágenes que se utilizan. 3. Instalación de Elemento y Configuración general: Así que ahora que has agregado todo el contenido necesario a tu ciencia, ahora es intentar instalar algunos plugins. Y por supuesto, el primer plugin que vamos a instalar serán elementos de antes de que haga eso, tengo tres plugins ya activos en mi sitio, optimizador de Saigon y seguridad porque estoy alojando con SiteGround. Y luego importador de WordPress, si has importado el archivo XML que te proporcioné en el video anterior, lo más probable es que hayas usado la entrada de WordPress nuestro plugin. Entonces hice exactamente lo mismo por mí mismo. Entonces por eso sí tengo el plugin activo ahí. Pero lo vamos a hacer ahora es que vamos a agregar tres plugins diferentes. Y el primero obviamente va a ser elemental. Ese es el plug-in principal con el que vamos a estar trabajando. Es el de aquí mismo. Y por supuesto es la versión gratuita de elemental. Pero debido a que es la versión gratuita de Elementor, está un poco restringida en términos de características disponibles. Para compensar eso, vamos a instalar dos plug-ins más en el primero aquí está justo al lado de elemental. Son los átomos esenciales para elemental por el desarrollador de WPF. Voy a seguir adelante para instalar el plug-in también. Y luego finalmente, vamos a instalar el de aquí abajo, que es la acumulación elemental de cabecera y pie de página por fuerza de lluvia de ideas. Así que sigamos adelante instalar el plug-in. Y sí, voy a seguir adelante y ahora a los plugins instalados. Esto va a seguir adelante y activarlos uno a la vez. Activa el constructor de encabezado y pie de página y luego activa Adams esencial para el aire. Mentor. Ahora, una vez que actives los átomos esenciales para Elementor, es posible que veas una página. De hecho, déjame seguir adelante y dar click en el enlace de aquí mismo. Porque esta no es la primera vez que tengo instalado el complemento de átomos esenciales en mi página. lo estás, no estoy viendo la página de bienvenida. Por lo que es muy probable que hayas visto una página diferente donde dirán, Hey, bienvenido. Elige con qué elementos quieres caminar. Basta con hacer click en Siguiente, Siguiente, Siguiente, Siguiente también te ofrecerán la actualización para pagar la versión pagada de átomos esenciales. Simplemente ignora eso. Simplemente haga clic en Siguiente, Siguiente, Siguiente y luego Finalizar. Y entonces esta sería básicamente la página que verías. Pero más sobre eso un poco más tarde. Echemos un vistazo a los elementos son en primer lugar, los ajustes. ¿ Qué exactamente tenemos aquí? Lo primero aquí va a ser los tipos de post. Si estás trabajando con tipos de correos personalizados, tendrás la opción de registrarlos aquí también. Pero solo estoy trabajando con publicaciones y páginas. Entonces voy a mantener esto para comprobar. Ahora dice colores predeterminados desactivados. Al marcar esta casilla deshabilitará los elementos colores predeterminados, y hará que elemental herede los colores de tu tema. Ahora si estás usando un tema avanzado como digamos Astra o océano, WP y así sucesivamente. Y quieres usar los colores de tu tema. Desmarcarás esas dos casillas aquí mismo. Pero debido a que estamos usando el tema halo, que es un tema muy, muy ligero, Elementor va a estar haciendo todo el trabajo pesado por estilo, diseño y funcionalidad. Entonces lo que voy a hacer es que en realidad voy a marcar estas dos casillas. Lo siento. Voy a desmarcar estas dos casillas porque de hecho queremos usar los colores predeterminados son proporcionados por nuestro elemental, así que voy a mantener estas dos casillas sin marcar. Y finalmente mejorar elemento. O si te gustaría contribuir a Elementor, puedes entrar aquí y marcar la trama de casillas. No voy a hacer eso. Pasemos al estilo. Hablaremos de éste un poco más tarde. En realidad, integraciones si estás trabajando con Google Maps y necesitas instalar la clave API, aquí es exactamente donde la instalarías. Además, si terminas instalando otros plug-ins como digamos PayPal o Stripe o cosas así. Y hay que integrarlos con elementales. Será en esta página donde encontrarás las opciones para hacerlo. Tienes la pestaña Avanzado. No necesitamos cambiar nada aquí. Básicamente, la mayoría de estos son por seguridad y por nuestra velocidad. Si notas un problema con elemental, tal vez su sitio se está volviendo muy, muy, muy lento. Puedes entrar aquí ahora mismo y cambiar el método de impresión CSS de archivos externos con incrustación interna. Pero solo haz esto si estás teniendo problemas con tu velocidad. Y no es porque estés usando algún otro plug-in hinchado o tu host web no sea lo suficientemente bueno o cosas así solo cambiaron esto como último recurso. Lo mismo va con el switch, nuestro método del cargador del editor. Si quieres solucionar problemas en tu sitio web, vendrías aquí y habilitarías esto. El archivo sin filtrar sube elemental tiene algo así como una seguridad incorporada donde si tratas de subir imágenes al sistema elemental, elemental, vamos a echar un vistazo y ver si o no el archivo es en realidad un seguro para trabajar al habilitar esta característica, que es habilitar cargas de archivos sin filtrar. Quieres el riesgo de subir archivos a tu sitio web. Por lo que te recomendaría que mantengas esta desactivada. Los mismos objetivos con Google Fonts se cargan de nuevo, no necesitas cambiar nada aquí. Sólo mantén ese en defecto. Si quieres trabajar con Font Awesome For puedes entrar aquí en este momento y habilitar esa función. Y luego finalmente, tienes experimentos. Aquí es donde tendrás acceso a todas las últimas características en las que actualmente se están trabajando elementales. Se puede ver que el estado de la mayoría de estos se establece en beta, beta, alfa, beta, etcétera. En la mayoría de los casos se quiere mantener esta en defecto. Pero hay un comando académico que se activa. Y como la mejora de la carga de activos, esto está destinado a reducir la cantidad de código en cada página construida con elemental. Lo que eso significa es que tus páginas típicamente se cargarán más rápido como resultado, pesar de que está en beta, he estado usando esto hace bastante tiempo y parece estar funcionando. Por lo que voy a seguir adelante ahora y activar la carga mejorada de activos. También voy a activar la mejorada nuestra carga CSS también, por favor incluso el futuro. En este sitio web en el que has estado trabajando, te das cuenta de que un tema que quizá quieras volver aquí y desactivar esto también, pero creo que debería estar bien. Así que voy a bajar aquí y salvar esos cambios. De acuerdo, una cosa más que quiero mencionar muy rápido es que tienes gerente de reglas. Si tienes varios tipos de usuarios en tu sitio con diferentes tipos de roles. Aquí, puedes determinar quién realmente puede usar ejemplo específico elemental. No quieres que un usuario con el rol de colaborador trabaje con elemental común aquí para aportar todo y simplemente comprobar no tener acceso a la herramienta de edición. Con la versión de pago de elementos tienes acceso a más funciones. Y luego nuestras herramientas aquí. Este es en realidad muy, muy, muy importante regenerar CSS y datos. Si haces cambios como el color de tu texto que dice si un texto guardas esos cambios y no estás viendo que esos cambios surtan efecto en tu ciencia siempre y cuando lo haya que no lo sea almacenamiento en caché desde su computadora o desde su servidor. Es posible que quieras venir aquí y tratar de regenerar archivos y datos. Bueno, esto hará es que reconstruya la hoja de estilo CSS y ojalá eso deba solucionar el problema y podrás ver tus cambios. barra de debug del modo seguro de la biblioteca de sincronización ignorará esa por ahora, reemplace la URL. Si eres un enlaces rotos en tu sitio, quieres apuntarlos a nuevos enlaces. Vienes aquí en el viejo enlace, ve a la segunda casilla, agrega el nuevo enlace y simplemente hago clic en la URL de la policía. Y arreglaste el control de versión de libro y enlace. Si por alguna razón en el futuro te actualizas a la última versión de Elementor y algo se rompe de tu lado, tal vez tu sitio no funcione tan bien como U22. Puedes entrar aquí en este momento y simplemente retroceder a la versión anterior. Para eso está aquí su futuro. Si quieres convertirte en un mejor catador y trabajar con no oficial en versiones de elementales que aún están en curso. Esto típicamente tiene un montón de turberas y problemas. Entonces si te interesa ser un cuernos a granel son cuatro elementos o puedes entrar aquí ahora mismo y habilitar. Y luego el modo de mantenimiento de nuevo. Si tu sitio está en construcción o estás haciendo algunos cambios inmediatos, no quieres que nadie pueda acceder a tu sitio durante ese tiempo. Puedes entrar ahora mismo y elegir próximamente o elegir mantenimiento. Y luego tendrás que construir una página Dolby mostrada para mantenimiento o comentarios cuando elijas esa plantilla aquí mismo. Y luego mientras tus páginas sobre el mantenimiento o próximamente, puedes elegir quién construyó para tener acceso a tu sitio web en ese momento. Entonces, por último, importar, exportar niños. Puedes exportar tus kits de plantillas para utilizarlos en, encendido, encendido, en otro sitio web. O incluso se puede importar está implicado forma un sitio XML si lo desea. Por lo que simplemente haces clic en los kits de entrada y luego aquí mismo podrás hacerlo. Podría mostrarte cómo hacer esto un poco más adelante en el curso. Y por último, finalmente, información del sistema. Si necesitas solucionar problemas tu sitio web y vas a apoyo elemental a la SEC y dicen, Oye, ¿puedes proporcionarnos la información de tu configuración? Aquí es donde se puede proporcionar toda la información necesaria. Simplemente viene aquí y descarga la información del sistema, envía para apoyar a los chicos en elemental, y luego ellos podrán ayudarte. Entonces eso es esencialmente todo para los ajustes principales para elemental. Gracias por mirarte y te veré en la próxima clase. 4. Descripción de Elementor: Muy bien, así que con todas las cosas aburridas fuera del camino, lemon, te mostraré la interfaz de usuario para elemental de la interfaz de usuario y cómo los elementos son realmente funciona. Ahora estoy en mis páginas justo aquí y lo que voy a hacer es que voy a seguir adelante y editar la página de inicio. Lo que vas a hacer es lo que verás iluminado aquí. Verás Editar con Elementor. Va a ser este gran botón azul justo aquí. Entonces vamos a seguir adelante y dar click en eso. Y lo que sucederá aquí es que se lanzará elemental para caminar en esta página en particular. Está bien, esta es la página principal. Ahora a la izquierda, obviamente se puede ver el cuadro para elemental, la interfaz de usuario. El primero que quiero mostrarte aquí son los tres botones aquí mismo, el menú básicamente, haces clic ahí. Tendrás acceso a cosas como la configuración del sitio, acumulación de FIM, del que hablaremos un poco más adelante. Pero muy rápido, vamos a bajar aquí para usar referencias arriba. Y no sé de ti. A lo mejor te gusta el tema de la luz. Me gusta el tema oscuro. Entonces lo que voy a hacer aquí es por el tema de la interfaz de usuario, voy a cambiar de formulario, detectar automáticamente. Demasiado oscuro. Prefiero sólo un fondo negro y el texto blanco es simplemente mucho más fresco. En mi opinión, de nuevo, esto es enteramente subjetivo, pero lo voy a mantener tan oscuro. Volvamos. Aquí adentro. Se puede encontrar algo dentro de elemento a cualquier lugar. De todos modos, elementos si lo desea, puede ver la página, entonces puede salir al tablero. Pero volvamos. Ahora. Aquí mismo, tienes elementos y luego tienes global. Global solo funciona con la versión pagada del elemento. Y es entonces cuando quieres guardar tu bloque particular de contenido y usar ese mismo bloque en otra página en cualquier lugar de tu sitio web. Eso es a lo que básicamente se refiere global. Pero no te preocupes, hablaremos un poco más tarde. Pero estos son tus elementos. Tienes elementos básicos como tu intersección. Te dirigirás en editor de texto de imagen. Así que digamos por ejemplo, querías agregar una imagen a tu página. Simplemente haría clic en el elemento de imagen y luego simplemente dejarlo caer dentro de la caja de ahí mismo. Y luego a partir de aquí, puedes elegir la imagen con la que quieras trabajar. Así que como ejemplo, permítanme elegir la imagen de esta chica aquí mismo sosteniendo la bandera brasileña. Y ahí está. El caso es la mayoría de los elementos que le dará la bienvenida con típicamente 3.5 compartimentos principales. Si concluyo supere, tendrá el área de contenido. En este caso, aquí es donde se pueden agregar textos, imagen, archivos de video, audio y así sucesivamente. Entonces tendrás estilo donde podrás hacer cosas como tal vez cambió la ley del carbón, cambiar el tamaño, agregar una imagen de fondo desde la altura y así sucesivamente. Y luego tendrás la pestaña Avanzado. Pero puedes hacer cosas como agregar márgenes, patrones, sin espaciado. También podrías agregar algunos efectos de movimiento, son algunos bordes y así sucesivamente. lo que normalmente, la mayoría de los elementos con los que has estado trabajando tendrán estas tres pestañas o compartimentos diferentes. Por lo que volviendo aquí y haces click en el botón aquí arriba, esto te dará acceso a todos los elementos. Para que puedas ver tenemos los elementos básicos aquí, botón Video, espaciador, etcétera. Ahora, se pueden ver los que están en libertad condicional bajo la versión pagada de la galería de cartera de posts elementales. Tantos de ellos. Por lo que se puede ver en este momento, porque no estamos usando la versión pagada de elemental, no tenemos acceso a todos estos elementos. Pero afortunadamente, porque estamos trabajando con el complemento de complementos esenciales, sí tenemos acceso a bastantes elementos adicionales de forma gratuita. Se puede ver aquí mismo en los átomos esenciales. Tienes cosas como el acordeón avanzado, llamada a la acción, el botón creativo inferior, y así sucesivamente. Entonces vamos a entrar con bastantes de estos elementos. Pero volviendo a elementos o bajo general, sí tenemos acceso a más bloques también. Sólo estoy cerca esta coordenada. Entonces el general con la versión gratuita de elementos a los que tenemos acceso, más elementos como el cuadro de iconos, testimonial, iconos sociales y así sucesivamente. Permítanme cerrar esta. Y luego tienes sitio. Desafortunadamente estos elementos solo están disponibles con la versión pagada de elemental. Tienes WooCommerce, de nuevo, solo disponible con la versión pagada de elemental. Hemos hablado de los átomos esenciales. Entonces este es el otro plug-in. Instalamos el encabezado y pie de página. Este plugin nos permitirá construir un encabezado personalizado y el Pie de página personalizado para nuestra página web tendrá acceso a elementos como los elementos del Menú de Navegación, página, título del sitio, logotipo del sitio, y así sucesivamente. Y luego por último pero no menos importante, sí tenemos acceso a los widgets de WordPress como tus páginas, Callender audio hizo nuestra búsqueda, y así sucesivamente. Vale, eso es eso para los elementos. Ahora, aquí abajo, tienes acceso a algunos ajustes más. Puede sonar un poco abrumador, pero no te preocupes, una vez que empiezas bienvenido con elemental, en realidad no es tan abrumador. En realidad es muy, muy fácil trabajar con ellos. Aquí bajo ajustes. En aquí, puedes hacer cosas como cambiar el título de la página, cambiar el estado de publicado a Penn y revisar, puedes agregar tu imagen destacada. También puedes optar por ocultar el título, que de hecho, hagamos eso. Ok, voy a ocultar el título. Quiero decir, cuántas veces vas en un sitio web y luego en la página de inicio dice trivalente casa hacer eso. Así que vamos a seguir adelante y esconder el título y luego el diseño de la página. Te lo explicaré un poco más tarde medida que avanzamos en el curso. Entonces tienes la alarma, lo siento, sí tienes la barra de progreso de lectura. Esto lo proporciona el complemento esencial de complementos. Básicamente, el punto aquí es que es posible que hayas visto en algunos episodios antes donde medida que comienza a desplazarse hacia abajo por la página, verás como una barra IDA moviéndose horizontal o verticalmente indicando cuánto de la cantidad de realmente leído y cuánto más contenido aún tienes que comer. Por lo que sí tienes ese futuro inhalar. Vamos a echar un vistazo a eso un poco más tarde. Y luego Tabla de Contenidos ir a la cima. No te preocupes, hablaremos de esos más tarde. Y luego bajo estilo aquí mismo, puedes cambiar el tipo de cuerpo. Puedes agregar un color de fondo si lo deseas. Vienes aquí ahora mismo, elige como el color primario del azul y así sucesivamente. Pero por ahora sólo voy a seguir adelante y desmarcar abajo uno. Y luego finalmente, tienes el avanzado donde puedes agregar tu propio disfraz, nuestro código JavaScript, o algún código CSS personalizado, que lamentablemente solo está disponible con la versión de pago de elemental. De acuerdo, sigamos adelante. Junto a la sentencia. Tú, tienes al Navigator. Ahora lo que pasa con navegar TO es que una vez que empiece a agregar elementos y contenido a tu página, la parte inferior del navegador te permitirá ver básicamente toda la estructura en un formato jerárquico de toda tu página. Por lo que puede ser muy, muy fácil para nosotros buscar rápidamente un elemento o libro en particular con el que quieras trabajar. Eso es lo que es importante la navegación o la navegación. Por lo tanto, Next es la historia. Entonces si haces cosas como cambiar el color o básicamente si haces algo en absoluto, estará en la pestaña Historia y lo podrás ver aquí mismo, justo desde el principio cuando empezamos a editar, si cambiamos la preferencia del usuario por el tema de la interfaz de usuario desde la luz, desde nuestro auto, demasiado oscuro, puedes ver que está ahí mismo. Agregamos una imagen, golpeamos el título de la página para que puedas entrar fácilmente aquí en este momento y revertir cualquiera de estas acciones. Y luego tienes revisiones. Las revisiones es un poco más, ¿qué pasa ahora? Un poco más robusto. Normalmente en las revisiones, aquí es donde una vez que hayas actualizado y hayas guardado tu página, verás esos cambios en tu visión se detiene. Por lo que es un poco más robusto y acciones. Entonces esa es la grasa. Y luego aquí, tienes el modo de respuesta. Usted hace clic aquí. Ahora puede elegir la vista de escritorio, vista de Tablet o la vista móvil. Y lo delgado es que incluso puedes llegar a ser muy, muy, muy específico con el ancho de tu pantalla. Así digamos por ejemplo, si elegí mesa aquí mismo ves estas manijas izquierda y derecha. En realidad se puede mover a una determinada dimensión. Y por supuesto OPIA, tendrás el ancho y la altura. Si tienes un tipo específico de dispositivo que quieras ver cómo has configurado se verá como en el dispositivo en particular. Nosotros muy específicamente dimensiones. Puedes entrar aquí y cambiar las dimensiones para el ancho así como la altura. Pero voy a volver, cambiar al escritorio y luego dividirme aquí. Puedes previsualizar tus cambios una vez que los hayas hecho. Y luego finalmente, puedes actualizar toda la luz que bajo Opciones de Guardar. Puedes guardar como borrador o puedes guardar como una hebra de plantilla. Como plantilla significa que puedes reutilizar exactamente el mismo contenido en otra página. Entonces esto es básicamente como un desglose de cómo elemental camina detrás de escena, la interfaz de usuario, cómo agregar elementos. Nuevamente, no te preocupes si parece muy, muy abrumador, Azure comienza a caminar con elemental. Se volverá muy fácil para ti trabajar con ellos. Eso fue básicamente un curso de bloqueo en la interfaz de usuario elemental. Gracias por ver. Únete a mí en la siguiente clase, ahora comenzaremos a establecer nuestras variables globales. Te veré entonces. 5. Secciones en la sección de: Solo quiero pasar unos minutos más para pasearte por los conceptos generales de secciones, columnas, así como elementos y patrones y márgenes. Tal y como te mostré anteriormente. Si quieres agregar un elemento, simplemente puedes arrastrar desde el lado izquierdo y luego simplemente lo dejarán caer en la diapositiva. Ahora la cosa es automáticamente cada vez que estás agregando elementos con Elementor, se creará una sección y economía para ese elemento en particular. Acabamos de caer en los elementos del editor de texto. Y ahora te darías cuenta justo aquí arriba tenemos esta línea azul aquí. Esta va a ser esta sección sosteniendo la columna que sostiene la edición de texto. Todos. Aviso aquí mismo, tienes este botón marrón justo aquí. Y si pongo el cursor sobre él, dice Editar Columna. Ahora este es el elemento real en sí, la herramienta de edición de texto real. Una vez más, la forma en que camina elemental está ahí tendrás un elemento, ya sea una imagen, un video o un botón. Y luego se mantendrá una columna, contendrá ese elemento. Tanto en la columna como en los elementos estarán dentro de una sección. Es algo así como una columna de sección de estructura jerárquica entonces el elemento real. Ahora al igual que con la edición, el elemento donde tendrás acceso al estilo de contenido avanzado. También puede editar la columna que contiene ese elemento. Se puede ver que he rondado en la parte inferior aquí, dice Editar columna. Usted hace clic ahí. Y luego tendrás acceso al estilo de diseño y avanzado. Con el diseño, puedes hacer cosas como tal vez reducir la longitud de la columna. Se puede cambiar la alineación. Puede agregar fluidos de etiquetas HTML. Puedes dar estilo a la columna y queremos añadir un fondo negro como en un fondo rojo. Y quieres añadir una imagen, cosas así. Para que muchas cosas se puedan hacer todas con la columna. Ahora, si hace clic con el botón derecho en el botón Editar columna, puede hacer cosas como agregar una nueva columna, columna duplicada. Incluso podrías copiar y pegar el estilo. mejor agregaste un fondo negro, cambias el estilo de fuente texto y quieres reutilizar ese estilo, simplemente copias el estilo y luego puedes perforar su estilo están en otro lugar. Lo mismo va con esta sección aquí también. Si hago clic en el botón editar sección aquí arriba. Ahora ya ves tengo acceso al estilo de layout avanzado. Al igual que con el diseño, puedo cambiar esto a ancho completo. Tal vez pueda cambiar el tamaño o la longitud del ancho desnudo, muy, muy amplia disponibilidad ahora lo haré, puedo cambiar la altura también si quisiera. Puedo hacer muchas cosas. Lo mismo va con su estilo. De nuevo, puedo agregar un color de fondo. Si quisiera. Puedo hacer varias cosas como agregar efectos de movimiento y así sucesivamente. Al igual que con el entorno de columnas, haga clic en el botón Editar sección aquí mismo. Puedes sentarte y hacer cosas como editar sección y yo puedo duplicar. Incluso puedo guardar como plantilla de la que hablaremos cuando estemos usando Elementor Pro. Ahora, déjame hablarte rápidamente del concepto de márgenes y patrones porque esto va a ser muy, muy, muy importante. Ahora, tengo una sección aquí sosteniendo este editor de texto escribe. Lo que voy a hacer es que voy a añadir una imagen a otra sección. Lambdas eligen rápidamente una imagen con la que caminar. Déjame ir a mi mediateca. Permítanme elegir esta imagen aquí mismo. Ahora, echa un vistazo a esto. Permítanme añadir un color de fondo a la sección aquí. No te preocupes, te mostraré todo esto un poco más tarde. Muy bien. ¿Cuáles son exactamente los de margen? Los márgenes se utilizan para agregar espacio entre secciones. Entonces en este momento tenemos una sección aquí sosteniendo este editor de texto con el fondo rojo tendría otra sección aquí sosteniendo la imagen. Si quisiera crear mucho espacio entre estos dos, realidad podría usar enrealidad podría usar un elemento aquí llamado elemento espaciador. Se puede decir conjugar espaciador y luego dejarlo entre estas dos secciones. Pero otra forma de hacerlo sería ir a cualquiera de estas secciones. Voy a ir a la primera sección de aquí. Voy a ir a Advanced y variedad de margen conseguido. Ahora tenga en cuenta que por defecto, puede agregar márgenes y patrones a los cuatro lados de una sección a la izquierda, derecha, superior e inferior, derecha. Ahora si iba a agregar un margen a arriba o abajo, puede ver que están encadenados, que significa lo que sea que añada a arriba, también se agregará a la parte inferior. Si querías agregar valores para un lado específico, quieres comenzar desde 0. En primer lugar, Cero. Vienes aquí y luego puedes ver que puedes desvincular los valores. Así que ahora mismo puedes simplemente agregar para arriba son los márgenes derecho e izquierdo para elemental se establecen a auto por defecto, no puedes hacer un ingenuo ahí. Pero ahora nota que si empiezo a agregar márgenes a la parte inferior de la primera sección, observe que es sección sosteniendo la imagen no está siendo empujada hacia abajo. Eso es porque estoy creando espacio entre esta primera sección y esta segunda sección. Además, si quisiera, podría hacer el revés para la segunda sección. Puedo ir a Editar sección aquí cerca para la segunda, ir a Avanzado. Desvincular se desarrolla. Y ahora en lugar de una imaginada en la parte inferior, puedo sumar en la parte superior. Por lo que ahora se puede ver estamos empujando esta sección sosteniendo la imagen hacia abajo desde la primera sección que dice lo que los márgenes son útiles. Son útiles creando espaciado entre secciones. Uno de patrones, porque tienen patrones. Los patrones se utilizan para crear espacio entre un elemento y su borde o su columna. A modo de ejemplo, voy a usar aquí el editor de texto. Muy bien, así que voy a entrar ahí. Voy a ir a Advanced. Y ahora mismo aquí, puedes ver que tengo el patrón disponible. Voy a desvincular los valores. Y ahora si empiezo a agregar relleno aquí mismo, se puede ver que estoy creando espacio entre el editor de texto y su propia sección aquí en la parte superior. Puedo ir al fondo, hacer exactamente lo mismo también. Para que puedan ver ahora mismo estoy creando básicamente espacio para mis textos, una herramienta dentro de su propia sección. eso se utilizan los patrones. Utilizan para crear espacio para unos elementos dentro de su propia columna o de su sección. Eso es básicamente lo que los patrones son útiles. Entonces esa es la diferencia entre los márgenes son los patrones. Los márgenes se utilizan para crear espacio entre secciones. Los patrones se utilizan para crear espacio entre una sección y el elemento contenido en su interior. Ojalá, ahora tengan una buena comprensión de lo que nuestros márgenes y remates se levantan. Una delgada rápida más, también podría reorganizar secciones simplemente haciendo clic y arrastrando. Si quisiera mover la sección sosteniendo el margen, también estoy sosteniendo la imagen a la parte superior. Simplemente pulsaré y mantendré pulsado el botón editar sección. Ahora puedes ver que me está permitiendo moverme. Puedo moverlo todo el camino por tu nariz. Espere a que aparezca el guión azul o el BlueLine, y luego simplemente suelte una intro del día de luz de la imagen. Sí tienes esta opción aquí con elementwise lo que te permite reorganizar nuestras secciones. También podrías reorganizar columnas y estoy simplemente rápidamente duplica esta columna aquí. Permítanme cambiar esta imagen muy rápido sólo para darte una demostración muy, muy rápida, déjame elegir esta imagen. Por lo que simplemente puedo hacer click donde tengas el botón Editar Columna. Y luego arreglaremos. Pueden ver dónde van de vuelta como se puede ver. Por lo que sí tienes esa opción disponible con elemental también. Así que no te preocupes ya que empezamos a caminar con elementos o comienzas, comienza a descubrir muchas más características y funcionalidades de los elementos. Y gracias por mirar. Te veré en la siguiente clase. 6. Cómo establecer nuestros valores globales: Bienvenido de nuevo. Entonces ahora que te he mostrado una breve introducción a la interfaz de usuario de Elementor. Echemos un vistazo a las variables globales y cómo se pueden establecer los tipos de familias de fuentes que desea usar, los colores y así sucesivamente. Ahora, en la misma interfaz de interfaz de usuario aquí mismo, vas a ir al botón Menú aquí arriba, y luego ahora pasa a la configuración de tu sitio. ¿ Verdad? Ahora Aquí está la delgada. Podríamos establecer colores globales, colores que se pueden utilizar en todo nuestro sitio web para hacer eso, haga clic en colores globales. Ahora esta sería la cláusula por defecto de que tendría un azul, gris oscuro, gris claro, y luego lima. Entonces esto sería para tu primaria nuestra cabeza hace tus encabezados secundarios, tus textos, este sería un cuerpo regular toma un acento suele ser para enlaces o botones como. Ahora, lo que voy a hacer es que en realidad voy a cambiarlas a alguna ropa que tengo por aquí. Ahora para cambiarlos, voy a hacer click en el interior. Y si una primaria, voy a ir con blanco. De acuerdo, Entonces por qué va a ser fff, FFF six Fs es básicamente para White Album mi primaria. Y luego para secundaria, en realidad vamos a mantener esto tal como está. Pero luego para los textos, vamos a ir con el negro. El negro va a ser de seis ceros. Entonces 123456, estos son los que llamamos los valores hexadecimales. De acuerdo, entonces seis ceros para negro, seis F para blanco. Y luego por último por los acentos, que serían para los enlaces. Yo sí tengo mi color aquí. Permítanme simplemente agarrar rápidamente el color para mi otra pantalla. Ven aquí y pega eso. Entonces es un tono de naranja, es básicamente un DECA 570. Ahora, podrías decidir agregar tus propios colores personalizados también. Puede entrar aquí, haga clic en Agregar color. Se puede nombrar a éste como cualquier cosa podría dar un like o digamos el color especial especial. Te mostraré cómo funciona esto un poco más tarde. Llamemos a este colo especial. Y aquí voy a hacer clic en el cuadro. Y escojamos algo rojizo. Así que tengo mi propio color personalizado llamado columna especial. Voy a seguir adelante ahora y simplemente actualizaciones. Hemos establecido nuestra cláusula global, la cual, que podemos utilizar en todo el sitio. Pero entonces también tenemos acceso a fuentes globales. Las familias de fuentes son muy, muy, muy importantes. Así que revisa este artículo. Voy a bajar fuentes globales. El primero aquí va a ser primario. Esto sería para tus encabezados primarios. Ahora sólo echemos un vistazo a mi otra pantalla de aquí, porque he optado por ir por la familia de fuentes de los ciudadanos ir con Oswald. Oswald es una fuente particular de Google que me gusta. Voy a elegir a Oswald para la familia de fuentes. El peso aquí va a ser 700s, habrá un poco más pesado. Entonces voy a transformar estos dos mayúsculas. Y luego voy a dejar los otros altura de línea, espaciado de letras, qué espaciado, y así sucesivamente el deslizamiento los que están arriba. A continuación va a ser la secundaria. Y luego secundaria otra vez, voy a ir con Oswald. También todo para secundaria. Y entonces el tamaño aquí, en realidad voy a ir con nuestros 20 pixeles porque va a haber píxeles un poco más pequeños. Y entonces los pesos aquí serían nuestros 600. Y ahí vas. Eso es para la secundaria. Y luego texto, este será nuestro texto regular. En realidad voy a cambiar de familias de nuestras dos nuevas arenas D2. Entonces busquemos puerta nueva. Dije, lo siento, no es nuevo veto Nieto. Lo siento. Incluso usa mis anteojos. Todavía no puedo ver correctamente. Millones de sensores va a ser texto completo. Y entonces el tamaño aquí sería 18 píxeles y el ancho va a ser de 500. Y eso es que último pero no menos importante, sí tenemos los acentos. Los acentos va a ser Roboto. Mantengámonos con Roboto para que uno y luego esperemos a que sean 500. Entonces no estamos cambiando nada aquí. Voy a seguir adelante ahora y actualizarme. El punto aquí es que en realidad podemos utilizar estas familias de fuentes, esta fuente colorea en cualquier parte de nuestro sitio. Como ejemplo. Permítanme cerrar esto y déjame seguir adelante ahora y sumar un rumbo. Por lo que voy a hacer clic arrastrar, soltar la cabeza y los elementos aquí. Ahora echa un vistazo a esto. Si iba a ir a Style, está bien, aquí mismo se puede ver tenemos la opción de tipografía para elegir qué tipo de topografía quería trabajar con todo el color del texto. Ahora echa un vistazo a estos. Si hago clic en este ícono de aquí mismo, este ícono de aspecto global, hago clic ahí. Ahora mira podemos elegir entre las cinco opciones, textos primarios, secundarios, acento, e incluso el color especial que agregamos. Así es como se puede hacer uso de la octava provocada global acaba establecer los mismos objetivos con la tipográfica haciendo clic aquí de nuevo. Y ahora puedo elegir ya sea ir con los textos primarios, textos secundarios, textos regulares, o el acento. Así funcionarían estos. Pero déjame mostrarte algo aún más interesante. Si vuelvo a la configuración del sitio, justo debajo del sistema de diseño, tienes tu estilo de tema. Si hago clic en la tipografía aquí, aquí es donde ahora podemos establecer familias de fuentes específicas, colores, tamaños para nuestra etiqueta H1 o H2, h3 y así sucesivamente. Pero para que podamos hacer uso de este sistema en particular, vamos a necesitar desactivar colores y fuentes predeterminados de la página de configuración. Recuerda, déjame simplemente seguir adelante actualizar esto. Mostraré de lo que estoy hablando. Si volvemos al backend, déjame venir aquí mismo, vaya a Salir a Dashboard. Si regresas a tus conjuntos elementales en la configuración de Elementor, aquí mismo, vamos a tener que desactivar los colores y fuentes predeterminados para poder hacer uso de este nuevo editor de estilos de tema. Así que voy a marcar estas dos casillas. Guarda esos cambios. Y ahora déjame cerrar esto. Permítanme refrescar esta página de nuevo. Ahora echa un vistazo a esto. Si vuelvo aquí, vaya a Configuración del sitio y acompañe en topografía nativa. Ahora puedo establecer un color de texto específico para el cuerpo, el tamaño de la tecnología, para los enlaces, y así sucesivamente. Además, si vuelvo, si vuelvo al back-end regular del laboratorio y luego solo cierro esto y luego agrego mi rumbo de nuevo aquí. Si voy al estilo, correcto, no has ido al color del texto. Todavía tengo acceso a los colores molestos Alia. Y luego también para la tipografía, todavía tengo acceso a los textos secundarios. Básicamente las mismas opciones. Dije ls, tendrás acceso a ellos. Tan básico litigioso. Vuelve al set que una vez más y luego solo quería tratarlo. Todavía tengo acceso a esas opciones. Volvamos a la tipografía de estilo temático. Yo sí tengo mis opciones aquí que ya he establecido. Entonces lo que voy a hacer aquí es esto. De acuerdo, primero escojamos la tipografía para nuestro cuerpo. Así que aquí mismo por cuerpo, voy a ir por aquí a la columna de texto. Vamos a elegir nuestro negro que será para el texto. Por la tipografía. Simplemente voy a ir con mensajes de texto. Recuerda que dijimos textos para ser newtonianos a arenas, tamaño de 18 pixeles y luego el peso de 500. Eso va a ser para el cuerpo. Bueno. Ahora por el enlace. Y solo revisa lo que tengo aquí para el enlace. Voy a ir con el color, la tipografía del color de acento. Yo también voy a ir con acento. Ahora para la edad advierte, vale, esto va a ser un poco diferente para los F1's Lo que he hecho aquí mismo es para la familia molesta que quiero por defecto. Pero el tamaño aquí va a ser de 100 píxeles. Muy, muy, muy, muy, muy masivo. Y entonces el peso aquí va a ser 600. Apenas vamos a usar las H en nuestro sitio, así que no te preocupes por el enorme tamaño. Voy a mantener esa a las 100. Ahora vamos a pasar al H2. Para H2, sí tengo el tamaño aquí. Voy a hacer click en la tipografía. El tamaño aquí, lo he configurado hasta 32 pixeles. 32 pixeles, y luego sí tengo el peso aquí para ser 700. Básicamente, este es el encabezado principal con el que vamos a estar trabajando. En realidad, mis disculpas, lo dije a 36, lo siento, seis por seis píxeles para H2. Entonces para los tres años, Echa un vistazo a esto. Para los tres años, el color aquí va a ser el color de acento, el color naranja. Entonces el tamaño aquí va a ser de 22 pixeles. Entonces la familia aquí va a ser primaria, que también sería viejo límite también dijo la familia de fuentes primarias aquí para ser nuestro Oswald voy a ser para el H12. Así que básicamente h dos, tendríamos 36 tamaño y pixel, la familia de Oswald. Habrá mayúsculas y luego 708 y espera. Y luego finalmente, también he dicho para el H4, mismo color sería el color axón. Y entonces el tamaño aquí va a ser nuestros 18 pixeles. De acuerdo, así que vamos a elegir a Oswald otra vez. Entonces el tamaño aquí serían nuestros 18 píxeles, del mismo tamaño que nuestros textos corporales. Y luego uno más. El mismo, muy último será el de cinco años, que en realidad no creo que vamos a caminar con ese múltiple legislado hasta H5 y luego topografía sería la misma secundaria o primaria si tú quiero. Y entonces el tamaño aquí sería de 16 píxeles. Ahí vas. Así que voy a seguir adelante ahora y simplemente actualizar esto. Y eso es todo ahora, sé que este fue un video muy, muy largo conmigo solo hablando de préstamos para automóviles y esas cosas. Pero señala aquí es que en nuestro sitio, si dondequiera que agregue un H2 automáticamente, va a heredar los valores de aquí. Entonces nuestro H2 está en este momento, tendría la familia de fuentes de Oswald, tamaño de 36 píxeles y luego un peso de 700. Y luego lo mismo sucede con los tres años, cuatro patas y así sucesivamente. Mou básicamente configurar los valores globales caen o nos golpeo así como nuestros textos corporales. Pero también, hemos dicho que los colores globales, que podemos usar una y otra vez. Hemos dicho cinco de ellos primarios, textos secundarios acento, sobre todo cuando no uso ecologista especial In, quería mostrarte cómo puedes hacer audio en colores personalizados adicionales si quisieras. Pero como básicamente están configurando nuestras familias de fuentes globales, colores y tamaños. Alemania, muy próximo video donde ahora comenzaremos a construir el encabezado lleno de página web. 7. Construye nuestros encabezados personalizados: Muy bien, ahora vamos a seguir adelante y construir el encabezado para nuestra página web. Y esto es exactamente lo que se ve ahora mismo, y no se ve bien en absoluto. Esto es lo que estamos tratando de lograr. Se puede ver el encabezado aquí mismo tenemos el logo a la izquierda, y luego tenemos el menú principal a la derecha. No obstante, mostrarte algo como si fuera a ir a otra página, digamos que la página Acerca de como ejemplo, aquí mismo puedes ver que el encabezado es diferente. Este tiene un fondo negro, mientras que el encabezado de la página de inicio no tiene ningún fondo en absoluto, simplemente se mezcla en la imagen de fondo aquí, básicamente, necesitamos crear 82 cabeceras diferentes. Una específicamente para la página principal y luego la otra para el resto de nuestras páginas. Ahora, ¿cómo hacemos esto? Antes de que te muestro eso, déjame simplemente arrastrar el sitio web demo. Ahora antes de que te muestro cómo hacer eso, quiero mostrarte algo más. Si iba a ir a Editar con Elementor, fui a la configuración del sitio. Además de poder configurar tus teléfonos globales y tus colores y todo eso, también puedes hacer cambios la identidad del sitio aquí mismo tenemos Ajustes. Si hago clic en dentro de la densidad aquí mismo, podemos cambiar el nombre del sitio también. Voy a llamar a mi pasaporte de viaje. Ese es el nombre del sitio web. Y entonces el eslabón será cuando el viaje se encuentre con aventura. Para el logotipo, voy a elegir el logo aquí mismo. Insertemos esa. Y luego para la Phi del ícono, voy a elegir la imagen de TI con la que tiene el fondo verde. Voy a insertar eso. Y ahí vas, tenemos nuestra identidad de sitio. Ahora también podrías bajar aquí para encabezar y hacer diferentes tipos de cambios puedes elegir para ocultar el logo, mostrar el eslabón, aumentar el ancho del contenido o reducir el ancho del contenido todo depende de ti. Pero como vamos a crear nuestros propios encabezados personalizados, no necesitamos cambiar nada aquí en absoluto. Entonces voy a seguir adelante ahora y simplemente actualizar. Y luego revisaré esto. De acuerdo, voy a volver al backend Salir a Dashboard. Y ahora vamos a crear nuestro encabezado. Voy a venir aquí con nuestros padres. Aquí verá elementos o alimentos frontales son constructor. Esto es del plugin. Voy a hacer click ahí. Y ahora voy a hacer click en Añadir nuevo. Y ahora llamemos a éste el encabezado de la página de inicio. Entonces justo aquí donde tienes tipo de plantilla. Vamos a elegir cabecera, y luego podemos elegir, vale, ¿dónde nos gustaría mostrar este encabezado? Ya que específicamente va a ser para la portada, voy a elegir aquí abajo tienes objetivos específicos. Voy a elegir páginas específicas e invitar aquí son simplemente teclear en casa. Y ahí vas. Ahora en este encabezado en particular solo se mostrará en la página de inicio. Y luego para los roles de usuario aquí mismo puedes elegir, está bien, tal vez quieras mostrar estos encabezado solo para que los usuarios conectados estén desconectados usuarios o ediciones o tienes mucha flexibilidad. Sólo voy a mantener esto en blanco porque queríamos ser para todos. Ahora aquí, tienes esta opción habilitada layout para nosotros plantilla. Ahora lo que pasa con Elementor es que además la plantilla predeterminada y una proporcionada por tu tema, elementos, que te da dos plantillas personalizadas. Uno se llama el Elemental Canvas Data, de ancho completo, de ancho completo más simple significa que tu contenido puede extenderse a los bordes de tu pantalla. Así que básicamente va ancho completo que soy como no hay márgenes son patrones. Elemental Canada como implementos que no vas a tener ningún encabezado o pie de página. Es básicamente un elemento en blanco o nuestras plantillas, no vamos a caminar con una plantilla de lienzo. Por lo que realmente no hay necesidad de habilitar este diseño, pero voy a elegir los elementos de plantilla de ancho completo. Vamos a seguir adelante ahora y golpear Publish. Ahora voy a dar click en editar con Elementor. Entonces lo que estamos tratando de lograr aquí es esto, déjame traer de vuelta el sitio de demostración. Básicamente va a ser una sección con dos columnas. El de la izquierda, la columna de la izquierda tendremos el logo, mientras que la columna de la derecha, tendremos el menú principal y también queremos la columna de la luz que contiene el menú principal tenga más ancho . Así que echa un vistazo a esto. Vale, aquí mismo, voy a hacer clic en el botón Plus aquí. Y ahora podemos elegir nuestra estructura. Y voy a elegir esta división aquí. Esta tendrá, la primera columna tendrá un tercio de toda la sección, mientras que la segunda columna tendrá dos tercios. Entonces aquí mismo, ya que estamos editando la sección, como se puede ver, para el ancho del contenido, en realidad podríamos ir ancho completo si quisieras. Pero voy a ir con caja y voy a elegir 1240 pixeles. Esta es sólo mi propia preferencia personal. Me encantaron 1240 pixeles. Ahora, aquí por la primera columna, voy a hacer click en el interior. Voy a desplazarse hasta aquí abajo. Y estamos tratando de agregar el logo. Por lo que voy a añadir el logo del sitio. Haga clic, suéltalo dentro. Y ahora tenemos nuestro logo. Ahora puedes ver porque el logo tiene texto blanco y este es un fondo blanco. Pero solo aguanta conmigo. De acuerdo, voy a elegir. El tamaño de la imagen aquí voy a ir con lleno por ahora. Entonces vamos a seguir adelante y clic en el botón Editar para esta sección. Muy bien, así que he hecho clic ahí. Voy a volver al estilo. Y luego se fue a donde has comenzado tipo. Voy a elegir clásico. Ahora voy a elegir el color negro. Entonces ahora en realidad se puede ver el logotipo, ¿verdad? Ok. Ahora pasemos a la segunda columna. Vamos a sumar nuestros elementos de navegación. Entonces escribiendo contra el menú de navegación, haga clic arrastrar, droga que dentro. Y luego se puede ver el menú principal está seleccionado por defecto. No obstante, cuando se trata de hacer bastantes cambios, observe aquí mismo que quedará con el menú principal. El texto está en mayúsculas, está en blanco. También está alineado a la derecha y también en el centro. Entonces tenemos que hacer por delgadas. Volvamos aquí. Lo primero que voy a hacer es mientras editas el menú de navegación aquí mismo, tienes maquetación haciendo clic ahí. Y ahora vamos a elegir alinear a la derecha. Como se puede ver en este momento está a la derecha. Ahora vamos a pasar al estilo. Y vamos a bajar aquí a la tipografía. Haga clic en el botón Editar. Com transformada no peluda, elige mayúscula. ¿ De acuerdo? Y luego para el color del texto, vamos a hacer clic en el icono global ahí mismo y luego elegir principalmente para Blanco. Bueno. Pero ahora, ¿cómo alineamos los elementos del menú en el medio verticalmente? Lo que quieres hacer aquí es que vas a hacer click en la potencia Editar columna aquí, este botón en particular aquí mismo, haces clic ahí. Y ahora aquí se puede ver tenemos Alinear Vertical. Vamos a elegir medio. Ahí vas. Eso es todo. Pero aún no hemos terminado. Para el logotipo. Demos clic en el botón Editar para el logotipo del sitio. Y luego la alineación aquí, vamos a ir a la izquierda. Al igual que en realidad no puedes ver la diferencia todavía, pero solo aguanta conmigo. Vamos a elegir ese a la izquierda. De acuerdo, sigamos adelante ahora y actualizaciones. Ahora solo echemos un vistazo a lo que tenemos. Ver la página. Y ahí vas. Ahora puedes ver nuestra página de inicio tiene este encabezado en particular aquí mismo, pero luego evoluciona para ir a, digamos que la página Acerca de como ejemplo, puedes ver que no tenemos ese encabezado en absoluto. Si quiere ir a la página de contacto. A modo de ejemplo, se puede ver que no tenemos ese encabezado. Entonces esto de aquí mismo, la página de inicio ahora tiene este folleto particular con el fondo negro, el logotipo, y luego los elementos del menú. Ahora para redondear esto, en realidad voy a hacer algunos cambios. Volvamos a la sección. De acuerdo, y sé que dije que el ancho del contenido es de 1240 píxeles, pero he hecho algunas pruebas más en, y creo que es mejor que vayamos con el ancho completo. Así que vamos con ancho completo por ahora. Entonces esta columna, la que sostiene el logotipo, vamos a reducirlo a 2525% por ciento. En tanto que la columna que sostiene los ítems manuales tendrá 75%. Entonces hagamos también un cambio en el logotipo. Voy a hacer clic en Editar logo. Vámonos al estilo. Y luego para el max-width, vamos a fijar esto en 75%. Y una pregunta que podrías tener es por qué obviamente el max-width y no el ancho real. Aquí está la cosa. Cuando establezcas el ancho para el logotipo, el logotipo siempre tendrá ese ancho. Nosotros impío, del tamaño de la pantalla. Estás trabajando con max-width. Básicamente estás diciendo, Hey, el logotipo nunca debe exceder este ancho. Entonces en situaciones donde el tamaño de la pantalla no es lo suficientemente grande documentado el ancho completo del logotipo reducir el tamaño del ancho básicamente máximo es mucho mejor para el diseño receptivo. Y siempre quieres ser receptivos. Entonces vamos a establecer eso a 75 pixeles. Y ahora si actualizamos, si echamos un vistazo a nuestro encabezado, se puede ver ahora mismo que se parece tanto a lo que tenemos están por aquí en la página web demo. Lo último que hay que hacer es que vamos a duplicar este encabezado para el segundo encabezado. Así que básicamente tiene lo que vamos a hacer. De acuerdo, bueno voy a volver al backend. En lugar de crear el segundo encabezado para el resto del sitio web, simplemente vamos a entrar aquí y luego verás duplicados de EA o esos son los átomos esenciales duplicados todos. Voy a seguir adelante ahora y simplemente duplicar el encabezado de la página de inicio. Ahora verá borradores Elementor. Vamos a seguir adelante y haré click en Editar. Y luego veremos algunos cambios aquí. Llamaremos a éste el encabezado global. Puedes darle cualquier otro nombre que quieras, pero voy a llamar a este encabezado global. Y luego aquí mismo, pep de plantillas, sí, es el encabezado. Entonces la pantalla encendida. Vamos a ir con toda la página web. Pero luego para estar del lado seguro, voy a entrar aquí y decir agregar regla de exclusión. Estamos diciendo, Hey, no muestres éste en la página de inicio de aquí abajo. Tiene página específica. Voy a entrar aquí y simplemente escribir en casa, asegurándome de que este encabezado nunca se muestre en la página de inicio. Sólo se mostrará en todo el sitio web. Y ahí vas. Así plantilla de ancho completo también. Vamos a seguir adelante ahora y golpear Publish. Y ahí vas. Así que sólo para volver aquí, vamos a refrescar esta página. Entonces ese es el encabezado de la página de inicio. Pero ahora echa un vistazo a esto. Vale, si iba a ir a cualquier otra página, digamos la página Acerca de como ejemplo. Ahora, verás que el encabezado duplicado no se muestra. Vamos a la página Artículos también. Se puede ver de nuevo, el encabezado duplicado no se muestra, a pesar de que dijimos el encabezado duplicado para mostrar en cada página excepto la página principal, qué está pasando exactamente aquí. Y créeme, me tomó varias horas. Solo China averigua exactamente por qué esto no funcionaba, pero lo descubrí. Lo que quieres hacer es simplemente volver a la cabecera duplicada aquí mismo. Este es el golpe duplicado cada creado. Lo que quieres hacer es esto, vale, solo intenta iniciar, en realidad vamos a volver al back-end para que no estés confundido. Muy bien, desde aquí, desde aquí, basta con hacer click en editar con Elementor. Editar con Elementor. Y entonces lo que vas a hacer es justo aquí, solo iniciar cualquier tipo de cambio. Digamos que agregas aquí los elementos de encabezado, por ejemplo, vale, suelta eso ahí. Ahora ves que el botón de actualización está disponible? De acuerdo, voy a volver aquí, cerrar esto. Todo el punto aquí es que quieres hacer algún tipo de cambio en el encabezado para que se active este botón Actualizar cuesta abajo. Ahora podemos actualizar. Y ahora debería funcionar. Entonces si se le pide volver a la página de mis artículos aquí y ahora actualizar. Ahora se puede ver que el encabezado duplicado ahora está mostrando Vuelvo a la página de inicio, es exactamente el mismo encabezado. Voy a la página Acerca de. Y por supuesto es exactamente el mismo encabezado también. Eso es exactamente lo que debes hacer cada vez que intentes duplicar tus encabezados y pies de página en los duplicados. Simplemente entra edita con Elementor, agrega cualquier elemento, quita ese elemento solo para activar el botón de actualización. Actualización. Y ahora ese nuevo encabezado o pie de página duplicado ahora estará en pleno efecto. Entonces eso es todo por el video que hemos creado nuestros dos encabezados. Gracias por mirarte y te veré próxima clase. 8. Construye nuestro pie global: En el video anterior, creamos con éxito nuestros dos encabezados, uno para la página de inicio y otro para el resto del sitio web. Pero ahora vamos a crear nuestro Pie de página Global. Y la buena noticia aquí es que sólo necesitamos crear uno de pie de página y esto es exactamente lo que estamos tratando de crear. Vamos a tener esta imagen aquí a la izquierda y luego alguna información de contacto, iconos de redes sociales. Y luego el derecho de autor lateral básicamente aquí abajo en la parte inferior. Vamos a seguir adelante y hacer esto rápidamente. Voy a hacer click en Agregar Nuevo. Y vamos a llamar a éste el pie de página global. Seleccionar opción aquí será Pie y por supuesto mostrar porque todo el sitio web. Y cambiaremos la plantilla a ancho completo. Y ahí vamos. Vamos a seguir adelante Publish. Y ahora editemos con Elementor. Ahora, quiero que prestes mucha atención a una diferencia masiva entre el encabezado y el pie de página y el encabezado que tenemos aquí. Básicamente tenemos sólo dos columnas. El de la izquierda sosteniendo el logotipo, el de la derecha sosteniendo el código, el menú principal. Pero para el pie de página, observe que es un poco diferente. Sí, todavía tenemos dos columnas, una que sostiene esta imagen, la otra que sostiene la información de contacto. Pero luego aquí abajo, este texto de derechos de autor es en realidad una tercera columna. No está debajo de esta primera columna aquí. En realidad es una columna separada por sí sola. Para crear este tipo de sección de múltiples columnas, vamos a hacer uso de un nuevo elemento llamado la sección de correo electrónico en la encuesta. En realidad es el primer elemento que tienes, este aquí mismo en una sección. Voy a hacer clic en arrastrar y luego soltarlo dentro. De acuerdo, así que primero lo primero, sin embargo, es que voy a seguir adelante y editar la primera sección. Si estás teniendo problemas al intentar hacer click en la sección de la sec de padres, básicamente, siempre puedes usar tu navegador aquí mismo y puedes ver aquí mismo tenemos esta columna de sección y luego intersección. Por lo que voy a hacer click en la sección en este momento. Vamos a cambiar el ancho del contenido aquí mismo a ancho completo. Y luego las columnas se separan. No vamos a elegir ninguna brecha. El motivo es que si prestas mucha atención, puedes ver ahora mismo la forma en que tienes la imagen, no hay espacio, no hay márgenes de relleno en absoluto. La imagen está directamente ahí mismo en el borde de la parte inferior. Ahí es donde estamos eligiendo nuestra brecha de nodos aquí. No queremos tener vacíos en absoluto. Lo mismo va a ir con la sección interior también. Pero antes de saltar ahí, vamos a añadir un color de fondo. Voy a ir a Tipo de fondo. Y por supuesto que vamos a elegir son negros. Entonces voy a tener un fondo negro para el pie de página. Siguiente arriba ahora van a ser las secciones ina. Voy a hacer click en sección interna aquí mismo desde la navega A otra vez, vamos a ir de ancho completo. Y luego columnas, columnas se separan aquí. Vamos a decir que no hay brecha también. Muy bien, impresionante. Ahora vamos adelante y manejemos la primera columna de aquí, que tendrá nuestra imagen. Entonces voy a dejar caer ahí el elemento de imagen. Elige esta imagen aquí mismo. Y en caso de que te estés preguntando que esto es realmente en Perú. Es un lugar llamado Horeca kina o que son Cocina. No estoy exactamente seguro de cómo se basa en las finanzas, básicamente algo así como una zona desértica. Se puede hacer la caja de resonancia y, y así sucesivamente. Bastante lugar impresionante para comprobar hacia fuera. Y voy a seguir adelante y cambiar éste a tonto. Pero entonces aquí está el más delgado, ¿verdad? Vamos a cambiar los anchos de columna. Vamos a hacer la primera columna aquí. En realidad vamos a hacerlo un poco más amplio. Entonces vamos a ir todo el camino a 63 píxeles, 63% en realidad, así que 63% y luego 37% para la segunda columna. Pero vamos a hacer un cambio en la imagen. La imagen es demasiado alta. Así que sigamos adelante y editemos la imagen. Y entonces vamos a ir por aquí a estilo y estamos aquí, voy a elegir 450 pixeles. Entonces es casi lo suficientemente alto y lo suficientemente ancho. De acuerdo, esa es la imagen de ahí mismo. Ahora, sólo estoy cerrando navegante. Para la segunda columna, vamos a sumar una serie de elementos diferentes. El primero aquí sería el elemento de encabezado, y éste será nuestros contactos. Voy a escribirlo todo en mayúsculas. Contacto. Va a ser un H2. Por el estilo de la sabiduría. Vamos a ir al color del texto y simplemente elegir primaria. Ahora vamos a elegir otro rumbo. Nuevamente. Voy a dejarlo justo debajo del contacto justo ahí mismo. Éste va a ser un teléfono. Nuevamente, mayúsculas al teléfono. No obstante, vamos a hacer de ésta una edad de tres años. En realidad hagámoslo un H4. Vamos a hacer que sea un H4 y vamos a sumar alguna información. Entonces lo que voy a hacer aquí mismo es simplemente hacer clic derecho y luego simplemente duplicar. Y ahora vamos a hacer de ésta una edad de cinco años. El número de teléfono real será un h5. Así que vamos a cambiar el número aquí mismo al 090 espacio 645, espacio 3417. Ese va a ser el número de teléfono. Y voy a volver al estilo y a la topografía. En realidad escojamos textos. Prefiero este patrón de texto, así que vamos a elegir ese. Entonces también vamos a duplicar el teléfono. De nuevo, arrástralo aquí justo debajo del número de teléfono. También vamos a duplicar el propio número de teléfono. Vale, y luego arrastra el teléfono del NIF. Ahora, oops, lo siento, eso fue todo el camino allá arriba. Vamos a traerlo de vuelta aquí abajo. Bien, ahora vamos a editar el teléfono, el segundo teléfono aquí mismo. Vamos a cambiar éste por correo electrónico. Esto es básicamente cómo caminar inteligente. Simplemente duplica siempre que puedas y simplemente haz las ediciones necesarias. Ahora vamos a editar el número telefónico. Vamos a cambiar el correo electrónico. Mi correo es Alex. Pasar puertos se convertirán no se ve correcto. Alex en pasaporte travel.com. Ok. Yep. Eso es correcto. Y luego por último pero no menos importante, vamos a tener una dirección. También dupliquemos el correo electrónico, agregando una vez más. Vamos a arrastrar, soltar eso aquí. Cambia el correo electrónico también. Dirección IP. Ahora para la dirección real, vamos a usar un editor de texto a diferencia de un oculto, porque va a haber múltiples líneas de textos van a soltar el editor de texto justo ahí. Yo sí tengo una dirección muy interesada aquí mismo. No sé si esta es en realidad una dirección real. No me acuerdo. Pero es encaja en r2, Emile Zola. Ahora voy a presionar Shift Enter, no sólo anti, porque si presionas Enter vas a tener un doble espacio en, usa la tecla Mayús y luego enter. Por lo que tienes un solo espaciado de líneas. Y ahora voy a teclear en 609002, leon, Turno Entrar otra vez. Y luego vamos a escribir en Francia todo k Y vamos a ir a la tipografía de estilo. Vamos a ir con mensajes de texto. Y por supuesto, el color del texto será primario. Y ahí vas. Y por último pero no menos importante, vamos a tener nuestros iconos de las redes sociales. Muy, muy, muy importante. Las redes sociales van a estar aquí abajo en el general. Agreguemos una red social. Y por supuesto para Facebook, bueno, vamos a cambiar el color de código eficiente a personalizado. El color primario aquí sería blanco, el color secundario sería negro. Básicamente, tendrás el fondo blanco y luego el icono real en sí será negro. Si este fuera un sitio web real que estás construyendo, aquí es donde agregarías el enlace a tu página de Facebook. Eso es para Facebook. Vamos a hacer exactamente lo mismo para Twitter también. Por qué será el parámetro color negro como color secundario. El último banal es el disfraz de YouTube o color fucsia. El color primario es blanco, colon secundario es negro. Y luego la forma aquí, vamos a cambiar su forma a círculo, derecha, y luego alineación, en realidad voy a alinearla a la izquierda. Ya casi estamos ahí. Pero luego note que hay algo de espaciado, la información de contacto real y luego la imagen. Lo que vas a hacer aquí mismo es que vamos a ir aquí mismo a la columna sosteniendo toda esta información de contacto, haces clic ahí. Ve primero, Alinear Vertical, alinémonos al medio. Después ve a avanzado, y luego eventualmente tienes relleno. Voy a desvincular estos valores juntos porque esto es por defecto, sea cual sea el valor que agregue a su relleno, a la parte superior, a la derecha, a la parte inferior o a la izquierda. Se duplicará un rumbo de los tres lados restantes. Por lo que no queremos esto, solo queremos agregar relleno a un lado. Así que voy a hacer clic en este botón aquí mismo para desvincular los valores por si no lo sabes, Patrón básicamente es una forma de crear espacio entre tu contenido y su borde. Vamos a agregar relleno a la izquierda, como se puede ver, luciendo mucho mejor ya. Y voy a ir todo el camino a 40 pixeles. Ya casi estamos ahí. Uno de ellos que vamos a añadir en este momento va a ser los textos de copyright. Así que voy a desplazarse hasta aquí abajo. Entonces justo aquí bajo tu encabezado y pie de página elemental, ves textos de derechos de autor. Haga clic en arrastrar. Y voy a ser muy, muy cuidadoso. No lo vamos a dejar caer en la esta primera columna sosteniendo la imagen. Lo estamos dejando caer en una clínica separada considerada que aparece línea azul, lo que significa eso, vale. Esta va a ser una columna separada. Observe en este momento que la BlueLine solo está debajo de la imagen, debajo de la columna que sostiene la imagen. Pero si arrastro mi mouse solo más abajo solo un poco ahora puedes ver la línea azul que se extiende a través de ambas columnas. Por lo que ahora voy a dejar caer ahí el texto de los derechos de autor. Y ahí está. El color del texto aquí obviamente será tipografía primaria. Vamos a ir con texto alineado al centro. Y en realidad vamos a pasar a la tipografía, una ganancia. Y hagamos que éste sea un poco más pequeño de lo habitual. Creo que 16 pixeles se trata de lo correcto. Pero también queremos agregar algún relleno también. Así que pasemos a avanzado. De nuevo, vamos a desvincular los valores. Vamos a agregar relleno de 20 pixeles para los diez primeros píxeles para la parte inferior también. Hemos hecho bastante. Vamos a seguir adelante ahora y actualizaciones. Veamos cómo se ve. Así que voy a ir por aquí, refrescar la página. Y ahí vas. Este es nuestro pie de página justo ahí. Ahora sé que puedes ver espacios en blanco aquí abajo, pero eso es simplemente porque aún no tenemos ningún contenido en la página de inicio. Por eso tienes este espacio en blanco. Ya agregué algunos contenidos a la página sobre. Entonces esto es más parecido a lo que ahora se verá. Se puede ver que no hay más espacios en blanco en un int porque en realidad sí tenemos algún contenido en la página, pero ahí está. Ahora tenemos nuestro pie bien construido con la imagen de Perú, textos de copyright, así como alguna información de contacto. Gracias por ver, y por supuesto te veré en la próxima clase. 9. Agregar la banner de la página de inicio: Ahora que hemos construido los encabezados y pies de página, ahora es el momento de que construyamos nuestra página de inicio. Y la primera sección que vamos a estar construyendo será el estandarte que puedes ver aquí mismo tenemos la imagen de fondo con los árboles tropicales, palmeras y la playa. Y luego por supuesto, los textos, estamos viajando con aventura y luego el botón que dice nuestro libro, tu viaje ahora. Además, por supuesto, habrías notado que el fondo básicamente se mezcla en el encabezado. ¿ Cómo hacemos eso? Bueno, vamos a seguir adelante e ir a editar la página de inicio. Voy a decir Editar con Elementor. Aquí mismo. Se puede notar que tenemos básicamente dos columnas, una en la parte superior, la que contiene donde viajado significa aventura. Y luego tendremos otra columna que contiene el libro de botones, tu viaje. Ahora, lo que simplemente voy a hacer aquí es esto. Tenemos un texto de encabezado aquí, pero por si acaso no ves nada, simplemente arrastra el elemento de encabezado y suéltalo dentro de tu caja aquí mismo. Y simplemente voy a decir dónde estamos viajes con aventura. Ese es el eslabón principal para Todos sitio web. Y voy a hacer esto en uno. Pero vamos a hacer algunos cambios en la propia topografía real. Así que vamos al estilo. Y para la tipografía aquí adentro, voy a cambiar la transformación a mayúsculas. Y también vamos a hacer el peso 900 solo para que sea un muy, muy grueso. Y entonces el estilo lo hará cursiva también. Eso es eso para el texto por ahora. Vamos a seguir adelante ahora y añadir la imagen de fondo para esta sección. Así que voy a hacer clic en el botón editar sección justo aquí. El ancho del contenido, vamos a mantener este cuadro, pero luego el ancho aquí vamos a hacer 1240 pixeles. Y nuestra lista de verificación aboga por la altura, vamos a fijar a una altura mínima de mil píxeles porque realmente queríamos mostrar tanto de esa imagen de fondo como sea posible. Así que déjame hacer esto mil. Y ahora vamos a pasar al estilo, fondo tipo clásico. Y voy a elegir la imagen. Y va a ser, sí me disculpo. En realidad sí tienen dos separados aquí por ahora. Voy a borrar a la mujer que van a usar, vamos a usar la versión big out. Este tiene apenas 859 píxeles de altura, pero éste es 1274. Así que vamos a hacer uso de éste. Entonces voy a insertar eso. Y ahí vas. Ahora, déjame mostrarte algunos trucos con respecto al posicionamiento de tu imagen de fondo. Tienes diferentes tipos de posiciones en centro, centro, centro izquierdo, centro, derecha, etcétera. Por lo que realmente depende de ti elegir los ángulos de posición ideales para tu imagen de fondo. El mío aquí que he elegido va a ser de fondo centro. Aquí se llega a ver realmente las palmeras, la playa también. Por lo que es familiar es la mejor posición. Y luego por el tamaño, sí tienes varias opciones aquí voy a ir con cava. La diferencia entre Kovach y contener es el espectáculo contenible toda la imagen. contenido no siempre es la mejor opción porque cuando se muestra toda la imagen, si la imagen no es lo suficientemente grande para toda la pantalla, comenzará a repetir el estudio. Se puede ver en el fondo aquí como que tiene la imagen repitiéndose de nuevo. Pero con COVID, básicamente, básicamente estás diciendo, Hey, intenta asegurarte de que la imagen cubra toda la pantalla. Por eso he elegido están cubiertos aquí, pero también va a agregar una superposición de fondo. Así que echa un vistazo de nuevo esto. Voy a volver a la superposición. Voy a hacer click ahí. Quiero, voy a hacer es que voy a ir al tipo de fondo como siempre, vamos a elegir una superposición negra. Y entonces la opacidad aquí, en realidad me he ido con el 0.23. Por supuesto que puedes cambiar esto si no quieres usar Zope y 23. Pero ahora vamos a volver a los textos reales. Volvamos aquí. Y por supuesto, el color del texto, vamos a hacer este blanco. Y ahí está, está bien. También vamos a cambiar el tamaño también. Entonces voy a ir todo el camino a unos 120 pixeles. Y de nuevo, esto es un enteramente subjetivo. Puedes hacer el tuyo un poco más grande, un poco más pequeño. Pero también vamos a cambiar la alineación también. Vamos al contenido. Lo vamos a alinear con el centro. Y ahí está, estamos viajando cumple eventual. Y entonces lo que vamos a hacer ahora mismo sería agregar nuestro botón. Voy a arrastrar el botón aquí mismo, Element y lo saltaré justo debajo del titular. Por supuesto aquí mismo, vamos a decir, reserve su viaje. Ahora. Por supuesto, aquí es donde agregarías el enlace a tal vez una página o un sitio web XNOR como un dorado o Booking.com. Si fuera siete, hacer eso y sólo podríamos decir book kin dot com. Sólo hagamos eso. Nosotros can.com sólo por la diversión de ella. Y por supuesto que lo vamos a alinear con el centro. El tamaño aquí será mediano. Agreguemos un ícono también. De acuerdo, entonces voy a elegir la biblioteca de iconos aquí. Busquemos avión. Voy a elegir abundancia, mi inserto de oso. Tiene la opción de cambiar la posición del icono a después o antes del texto. Queremos mantener eso encendido antes. Y luego el espaciado ícono. También podrías agregar algo de espaciado entre el ícono y la imagen. Así que voy a ir con ayudas sólo para darle un poco de espacio. Ahora vamos a pasar al estilo. Aquí es donde vamos a hacer algunos cambios importantes. Entonces el primero que vamos a hacer aquí sería la topografía, los pesos de los textos. Van a haber 600 y luego transformarse en mayúsculas. Ahora porque este es un enlace, notarías que existe la idea subrayada, pero no queremos esa. Así que voy a ir a Style, me voy, voy a ir a la declaración y luego elegir ninguno. No queremos ninguno de los textos en ninguno de los textos subyacentes allí. Muy bien, tipografía, color, texto, color aquí mismo. Vamos a ir con el blanco. ¿ Está bien? Entonces para el botón mismo aquí mismo, tendrás el tipo de fondo y vamos a hacer click ahí. Y vamos a ir con el color clásico aquí sería naranja. Ahora vamos a establecer una frontera así como sólida. Entonces lo que vamos a hacer por el borde es que vamos a cambiar el color del borde por el color naranja también. Y luego agregaremos un radio de borde solo para hacer los círculos, los bordes apenas un poco circulares. Vamos a ir con diez, lo siento, vamos a ir con 12 pixeles aquí mismo. Y eso es todo. Voy a seguir adelante ahora y actualizaciones. Y veamos cómo se ve. Salgamos al salpicadero. Vamos a hacer clic aquí, ir a la página de inicio, y ahí está. Entonces por viajado en su eventual entonces por supuesto tenemos el botón aquí mismo que enlazaría a nuestro booking.com. Pero entonces, ¿cómo logramos esto? Donde se tiene el fondo básicamente mezclándose con la cabeza arriba Alemania. Muy próximo video donde te mostraré cómo hacer eso. 10. Mezclar la banner de la cabeza y la página de inicio: ¿ Cómo mezclamos ahora el banner de la página de inicio en nuestro encabezado? Bueno, al igual que lo que tenemos por aquí, lo que vamos a hacer aquí es esto de nuevo, vamos a volver aquí y vamos a editar la página de inicio Hadar. En primer lugar, lo que voy a hacer es simplemente voy a quitar el fondo negro que ya no necesitábamos. Así que voy a ir al estilo y luego simplemente haga clic en el botón clásico nuevo para básicamente restablecerlo de nuevo a su fondo predeterminado, que es simplemente básicamente el color blanco. Voy a actualizar. Muy bien, veamos la página. Volvamos al perfil de la página de inicio. Muy bien, ahora aquí voy a editar ahora la página de inicio real en sí. Por lo que voy a hacer click en editar con Elementor, el primer enlace ahí arriba. Ahora déjame mostrarte el poder de los márgenes negativos yendo a editar esta sección sosteniendo el banner. Ven aquí a Avanzado, desvincula los valores para los márgenes. Y ahora simplemente voy a ir todo el camino a 222 píxeles negativos. Y ahí vas. Así así, hemos podido mezclarnos en el encabezado con nuestro banner de página de inicio. Permítanme actualizar. Vamos a ver la página solo para asegurarnos de que ahí esté. Ese es nuestro nuevo banner de homepage y Heather, Así como eso. Entonces ese es básicamente el poder de sumar márgenes negativos. No obstante, permítanme señalar que esto solo funciona bien en la vista de tu escritorio. El caso es que si fuera a ir a la vista receptivo, verán que comenzarán a mostrarse unos márgenes negativos. Y es bastante feo. Aquí abajo donde tienes el modo de respuesta. Si cambio éste a tablet, es quieto o ki, tipo de, aunque ahora se puede ver que el menú, el ícono de la hamburguesa de aquí mismo no está buscando calificaciones. Pero entonces si vas al móvil, se vuelve realmente, realmente malo. Ya puedes ver ahora mismo que no lo haces. El logotipo básicamente es con el viaje de texto a voz cumple con la aventura. Y se puede construir hasta ver a los humildes consiguieron muchas almas. Obviamente vamos a tener que hacer varios cambios para el diseño responsive. Habrá para más tarde, pero por ahora, Dexter aplica. Esto se ve bastante bien. Entonces Alemania, el siguiente video donde te mostraré un banner alternativo de homepage. 11. Fondo de video alternativos: Dice premisa, quiero mostrarte un banner alternativo de página de inicio no es exactamente un banner, es más bien un video. Así que vas a tener un fondo de video a diferencia de la imagen de fondo tradicional. Entonces es bastante simple. Este es el video que me gustaría añadir al fondo. Es un hecho para mí, básicamente compulsión de auto, mis viajes alrededor de la pared. Así que voy a seguir adelante y simplemente agarrar este enlace aquí mismo. Y vamos a editar esta sección. Ahora debido a los márgenes negativos, es posible que no pueda ver el botón de sección editar aquí arriba. O lo que quieres hacer es simplemente usar el navegador. De acuerdo, así que ven aquí abajo, haga clic en navegar PARA hacer clic en la sección, y ahora se puede editar la sección. Así que de nuevo, los navega todo nuestro botón siendo muy, muy útil. Vamos a ir ahora al estilo de diseño más bien. Y luego aquí tienes antecedentes. Vamos a ir con el video. Haz click en video y estás aquí. Voy a pegar el enlace al video de YouTube. Pero también puedes pegar el enlace a desde Vimeo también. Y luego puedes elegir la hora de inicio, la hora de fin. Puedes optar por jugar una vez o móvil habilitado para el modo de privacidad. Si vas a ir con el video de fondo, te recomendaría altamente, encarecidamente que elijas una caída de fondo atrás. Entonces para la caída de fondo, simplemente voy a usar la misma imagen. El motivo es porque es un video, a veces puede que no se reproduzca y porque es de YouTube, tal vez YouTube como un tema o por una razón u otra, el video no se reproduce. Elemental usaría el fondo como opciones de reserva. Voy a seguir adelante ahora y actualizarme. Echemos un vistazo a nuestra página. Al entrar aquí, refrescar la página. Y ahí vas. Por lo que ahora se puede ver tenemos el video de fondo. Ahora juega un final. Por supuesto, no voy a negar que los videos no son más poderosos que una imagen. Obviamente, los videos son mucho más interesantes. Pero tenga en cuenta que los videos sí tienen conjuntos en inconveniente ciertas desventajas, vale, puede ralentizar su sitio web. Así que si vas a usar un video, por favor intenta asegurarte de que el video no sea tan largo, máximo tal vez diez segundos, porque cuanto más largo sea el video, la longitud toma carga y eso se ralentizará por su página web. Así que por favor haz los videos muy, muy, muy cortos. Asegúrate de agregar una imagen de fondo como una caída atrás astucia en caso de que el video no se cargue. Pero esa es la alternativa para tu página de inicio. Pero te agradezco por mirarte y por supuesto te veré en la próxima clase. 12. Construye la página de inicio parte 1: Bienvenido de nuevo. Continuemos con la construcción de la página de inicio. Y como pueden ver, he vuelto a cambiar a la imagen de fondo tradicional. Pero como dije, si quieres usar el video, eso está bien. El siguiente apartado que vamos a construir será la sección de dos columnas que tendrá algunos textos a la izquierda, una imagen a la derecha. Y luego la tercera sección aquí es muy, muy similar. Sólo son las columnas invertidas. En la tercera sección, tenemos la imagen a la izquierda y luego el texto a la derecha. Entonces, ¿cómo exactamente vamos a lograr esto? Esto es muy, muy, muy sencillo. Vamos a ir a una página de inicio. Vamos a editar. Y se puede ver en este momento es básicamente dos columnas, 5050. Así que muy fácilmente vamos a venir aquí abajo, crear una nueva sección con dos columnas, 5050. Voy a editar la sección, se asegura de que vaya de ancho completo. Y entonces las columnas GAAP van a decir que no hay brecha. Muy bien, entonces la primera sección de aquí, va a tener algunos textos. Permítanme dibujar aquí el editor de texto. Lambda copia blandidamente el texto ficticio de Lorem Ipsum que tengo por aquí. Déjame seguir adelante y pegar eso. Y luego también tenemos el encabezado. Déjame dejar caer eso por atrevo. Es un h2. Aquí. En realidad no creé ningún encabezado real, ningún título real. Así que déjame simplemente escribir. Nos encantaría viajar. Sólo algo. Eso es eso. Y luego para la segunda columna aquí, vamos a sumar la imagen, y voy a añadir esta imagen que tomé en Estambul. Se trataba de un grupo de nuestros estudiantes universitarios. Estaba caminando por ahí y le dije: Oye, ¿te gustaría que tomara una foto de esta idea? Entonces tomé la foto. Así que asegúrate de configurar esta imagen para engañar. Porque de nuevo, queremos que la imagen ocupe todo el ancho y la altura de su columna. Pero entonces también necesitamos agregar el botón Saber más. Entonces lo que voy a hacer por supuesto, es volver aquí, arrastrar el botón, soltarlo aquí. Y entonces voy a decir aprender, aprender más. Entonces este enlace puede ir a tal vez la página sobre. Así que simplemente voy a decir barra hacia adelante sobre. Y ahí está. Voy a alinearme con el centro. Hagamos algunos cambios. Tipografía de estilo. Voy a decir transformar a mayúsculas. La declaración sobre no dentro de lo que es una integración. Y luego el color del texto. Voy a cambiar eso a negro. Ahora para el botón real en sí van a ir con un color de fondo de blanco. teclear de fondo aquí va a ser de color blanco. Pero entonces vamos a establecer un borde de sólido para que en realidad podamos ver el botón. Y si lo quisieras, podrías agregar algunos videos de frontera también. Pero no voy a hacer eso. Una cosa final a hacer sería alinear nuestro contenido en el medio. Por lo que voy a hacer click en el botón Editar Columna, comentarios, Alinear Vertical, establece medio. Y entonces una cosa más que hacemos para tener algo de espacio a la izquierda y a la derecha está en contra ahora mismo el texto no es exactamente justo al borde de la columna, por lo que necesitamos agregar un poco de espaciado. Así que voy a volver aquí. Lo que vamos a hacer es muy, muy sencillamente, vamos a ir a avanzado por la misma columna. Aquí mismo. Vamos a desvincular los valores para el patrón. Y luego voy a dar 50 pixeles por 50 pixeles a la izquierda. Y ahí está. Hemos construido nuestra segunda sección muy fácilmente, ya que la tercera sección es muy, muy similar en diseño, lo que podemos hacer es simplemente hacer clic derecho en la sección de edición proteína y luego duplicar. Y ahora lo que simplemente voy a hacer es que voy a arrastrar esta primera columna aquí, arrastrarla hasta aquí, cambiar las columnas. Y ahora muy sencillamente, sigamos adelante y editemos esta imagen. Voy a elegir éste que tomé en Argentina. Montaje encaja en L, color graso. Y luego por supuesto, para los textos de aquí, ¿añadí cualquier cosa viajada a los mejores lugares como el encabezado, vale, así que déjame simplemente cambiar ese encabezado aquí y decir viajar a los mejores lugares. Ahí vas. Muy bien, sigamos adelante ahora actualizaciones. Digamos cómo se ve la página. Vamos, vamos. No soporten conmigo. Desafortunadamente, estos son los riesgos ocupacionales de un instructor, un maestro. A veces el incidente comienza a estropearse y finalmente se actualiza. Vale, gracias. Ahora, veamos la página. Desplazemos hacia abajo y ahí está. De acuerdo, una cosa más. Al igual que un bonus, podríamos añadir alguna animación para que las imágenes tal vez les guste, ya sabes, esta diapositiva desde la izquierda y la derecha. Entonces lo que podemos hacer es simplemente volver atrás y revisar esta alegoría para la primera imagen, la que tiene aquí los alumnos, voy a editar la imagen. Ve a Encendedor avanzado, tienes efectos de movimiento. Voy a decir animación de entrada. Vamos a deslizarnos desde las luces. De acuerdo, tan ligeramente adentro de la derecha, así que rebanando desde la derecha. Y luego para esta imagen era simplemente hacer la diapositiva opuesta adentro desde la izquierda. Efectos de movimiento. Desacelerado, informa o amado. De acuerdo, eso fue un poco raro. No estoy seguro exactamente lo que hicieron. Permítanme volver a hacer eso. Ok. Por alguna razón la ventana de imagen sobre a la segunda columna. No sé por qué pasó eso, pero está bien, voy a seguir adelante y actualizarme. Ahí vamos. Veamos la página. Desplazemos hacia abajo. Hace deslizamiento desde la izquierda, engañado y deleite, y ahí está. Y así así, nuestra página de inicio está empezando a surtir efecto. Así que únete a mí en el siguiente video donde ahora vamos echar un vistazo a cómo vamos a construir la siguiente sección, que sería el diseño de viaje único. 13. Construye la página de inicio parte 2: Muy bien, así que estamos avanzando. Y la siguiente sección va a ser la sección única de diseño viajado, que se verá un poco complicado, pero no es tan complicado. Básicamente tenemos una sección muy grande con múltiples columnas. Una columna sostendrá el encabezado. Diseño general único y vamos a tener el elemento divisor tendrá algunos textos y luego tendremos un elemento de sección interior con tres columnas, con tres títulos diferentes, diagramas, y algunos textos. Así que sigamos adelante y editemos la página de inicio una vez más. Y voy a desplazarse hasta aquí abajo. Y el primer nodo es simplemente hacer es solo arrastrar el encabezado aquí. Y agregaré la edición que dice todo diseñador de viajes único, único. Por supuesto, voy a alinear éste para descentrar. Ya que ahora tenemos contenido en nuestra sección, voy a seguir adelante y editar esta sección. Vamos a establecer el ancho en 1240 pixeles. Entonces estilo, vamos a añadir un color de fondo de FATF ocho. Entonces es este tipo de color blanco grisáceo. Realmente no sé el color exacto, como se llama. Pero el punto aquí es que estamos tratando de diferenciar la sección justo por encima de ella de la nueva sección que estamos creando. Por lo que una de las mejores formas de diferenciar, diferenciar secciones es agregando diferentes fondos de colores. Entonces creo que diseño de trufa, voy a volver a avanzar también. Añadir un poco de relleno. Por lo que 50 pixeles arriba, 50 píxeles abajo también. Y ahí está. El siguiente elemento serán los elementos divisores que se caen justo debajo de nuestro diseño de viaje único. Mira hacia el centro de Atlanta y luego el ancho aquí estaría a punto, vamos con 50%. Quizá sea un poco demasiado. ¿Qué tal 40%? Muy bien, así que para el por ciento, siguiente va a ser los textos aquí, cerraduras donde no se trata de las estrellas en realidad robaron estos textos de algún sitio web. No recuerdo, pero no se me ocurrió esto con este texto. Ok. Yo no soy demasiado, no soy tan inteligente, así que voy a soltar el editor de texto todo justo debajo del divisor y pegar ese texto ahí mismo. Y por supuesto que lo vamos a alinear al centro son entonces por último pero no menos importante, sí tenemos nuestra sección de tres columnas aquí. Entonces vamos a usar la ina, sección. Vamos a caminar inteligentes otra vez. Básicamente, cada columna tiene exactamente el mismo diseño. Tienes un diagrama, tienes un encabezado, y luego tienes algunos textos. Así que simplemente lo haremos es, diseñaremos la primera imagen de la columna Jabbar aquí. Y es la imagen con el avión mundial pueden los delincuentes uno aquí mismo, insertar ese medio, hacerlo un tamaño completo. Entonces vamos a agregar un encabezado. Simplemente mueva la imagen. Vamos a hacer de éste un h3. Yo sí tengo algún texto aquí y se llama, éste tiene que ser destacado. Destinos, ese será el titular de futuros destinos. Hagamos un cambio. De acuerdo, me voy a alinear con el centro, pero luego por el estilo, vamos a cambiar la tipografía de mayúsculas a la luz apenas normal. Y luego por último pero no menos importante, tendremos la herramienta de edición de texto. Arrastrémoslo ahí. Así que déjame agarrar este texto aquí mismo. Similar ellos Ipsum texto ficticio. Voy a seguir adelante y pegar eso. Creo que en realidad son los mismos textos exactos, diferentes, tontos yo. Ok. Bueno, su estilo, Esto alineado al centro. Ahí está. Entonces lo que era simplemente tiene que hacer ahora es entrar aquí, clic derecho en el botón Editar columna y simplemente se duplica, y luego duplicar una vez más. Y luego entraremos aquí y eliminaremos la cuarta columna. Lo es. Entonces esto va a entrar aquí en este momento, cambiar esta imagen al centro comercial con el mapa. Y sí tengo los textos aquí que dicen guías de viaje. Por lo que además de poder contar con ciertos destinos a sus clientes, viajes de pasaporte también ofrece guías recorridos también. Y luego el último de aquí, voy a cambiar la imagen a la que tiene los boletos de avión. Yo sí tengo el encabezado aquí que dice asequible. Además bool. Para conseguirlo es. Ahí vas. Entonces voy a seguir adelante ahora y simplemente actualizar esto. Y veamos la página. Y voila iónico diseño de viajes. Ahí vas. Entonces ojalá hayas disfrutado esta lección en particular, Jimmy, en la siguiente, donde seguiremos construyendo nuestra página principal. Te veré entonces. 14. Agregar la galería de la página de inicio: Vamos a seguir adelante ahora y añadir la galería a nuestra página de inicio. Ahora sé que en un sitio demo aquí, se puede ver creé una sección de servicios, pero de repente no hacer lo mismo porque en realidad es muy, muy sencillo y no quiero perder demasiado tiempo enseñándote lo mismo una y otra vez. Básicamente, si quieres construir este mismo tipo de sección, tendrás tu fondo blanco y tendrás tres columnas. La primera columna aquí sería todo titular o servicios. Tendrás la siguiente columna que usará el elemento de sección interna para las tres columnas. Y luego puedes simplemente repetir esa misma sección para las columnas monetarias aquí abajo. Ahora el elemento que utilicé que tiene la imagen justo aquí, el titular, es el cuadro de información. Lo encontrarás en los complementos esenciales de la ONU. Entonces es el que está justo aquí en los complementos y sociales que verás en caja completa. Y es la única variedad, por lo que simplemente arrastra, suelta dentro. Y ahora aquí puedes elegir tu imagen. Agregarás la herramienta de marea, el contenido ahí dentro y así sucesivamente. que puedas pensar en esto como una asignación si quieres construir una estructural similar. Pero voy a seguir adelante ahora y crear nuestra galería en su lugar. Para la galería, en realidad no es una galería, sino más un carrusel de imágenes. Así que voy a ir al general aquí mismo. Y luego ves tenemos aquí el carrusel de imagen. Haga clic en arrastrar, suéltelo dentro. Y voy a elegir por las imágenes. Y entonces sí tengo seis imágenes que he seleccionado. Déjame simplemente echar un vistazo rápido a mi otra pantalla aquí mismo. Tengo esta imagen, esta imagen, esta imagen aquí también, ésta Eso es cuatro. También tengo éste de Cengage y éste de Verbit lot J o K. Déjame seguir adelante ahora y crear una galería. Ahora el truco aquí es que todas estas imágenes tienen exactamente la misma altura de 800 píxeles como se puede ver, y también el ancho de 1200 píxeles. Así que siempre que estés agregando imágenes a tu galería o carrusel, asegúrate de intentar asegurarte de que estén más cerca posible en términos de dimensiones. No tenían que ser exactamente, pero no deberían diferir por más de, digamos cinco o diez píxeles, dar o tomar. Así que trata de que las imágenes tuvieran el mismo tamaño tanto como sea posible. Entonces vamos a insertar eso en la galería. Y vamos a elegir un tamaño completo. Esclavos a mostrar serían dos a la vez. Rebanada para desplazarse también serían dos. No se quiere estirar imágenes porque esto podría llevar a que sean borrosas. Entonces vamos a mantener eso en ningún horario de navegación avalado? Sí. O simplemente podrías ir con puntos. Se mostrarán aquí abajo, lo cual también es posible. Entonces el enlace que podrías vincularlos a un archivo multimedia si lo deseas. Pero no voy a vincularlos. Sólo voy a dejarlos encendidos. El título irá con títulos. Por lo que se mostrarán los títulos de cada imagen. Y ahí está. Muy bien, así que voy a editar esta sesión en este momento. Elige un ancho completo y luego las columnas se separan, sin espacio. Y ahí vas. Voy a seguir adelante y simplemente voy a actualizaciones. Y veamos nuestra página. Puedo desplazarse hacia abajo aquí. Y ahí vas. Esa es nuestra luz de galería ahí. Una cosa que también podrías hacer, puedes pensar en esto como una tarea. Podrías agregar la parte inferior para Instagram. Entonces básicamente lo que podrías hacer es otra vez, vas por aquí para editar con Elementor. Si tienes una página de Instagram en el enlace de Instagram, simplemente podrías venir aquí. Simplemente arrastra tu botón, lo sueltas aquí mismo, y luego simplemente personaliza y dices ver nuestras fotos en Instagram. Y luego si puedes agregar el enlace a Instagram si querías hacer eso. Así que de nuevo, sí tienes la opción de hacer eso también. Vamos a seguir adelante y eliminar. Una cosa más solo para asegurarte es para tu carrusel de imágenes aquí mismo, tendrás las opciones adicionales para la reproducción automática. Pausa en Havas, pausa en la interacción. Así que pausa en el hover. Se puede elegir saber para ese solo para asegurar que las energías estén siempre de colon por. Por supuesto, puedes establecer tu bucle infinito. Tu dirección puede ser izquierda o tal vez ir a la derecha. En cambio. Tienes todas estas opciones y realmente todo es muy subjetivo. De acuerdo, así que me quedaré con la izquierda, sólo actualizaciones. Y ahí está. Entonces eso es todo por sumar nuestra galería Alemania. Cuando el próximo video esté disponible ahora, añada nuestro blog. Te veré entonces. 15. Agregarte la sección del blog: Vamos a seguir adelante ahora y añadir la sección de blog en nuestra página de inicio. Y se puede ver que esto es lo que estamos tratando de lograr. Tendremos nuestro titular, él divisor y dos entradas de blog, que tendrán la imagen destacada, el título del post, el extracto, así como un enlace leer más. Y luego el leer más posts abajo se trataron en realidad vinculados a la página del blog. Pero aquí está la cosa sin embargo. Permítanme arrastrar aquí mismo sitio demo, pero con el backend verás tengo acceso a ciertos elementos aquí, como la rejilla de pulso así como la línea de tiempo de publicación. Pero si se le pide ir a mi propio sitio aquí mismo. Y si me desplazo hacia abajo hasta la sección de átomos esenciales, verás que no tengo acceso a esos elementos y tampoco los verás. Y eso es porque necesitamos activarlos en el back-end. ¿ De qué hablo? Permítanme antes que nada arrastrar esta página. Vamos al back-end, el backend real de WordPress, y verás complementos esenciales aquí. Adelante y dale clic en él. Y ahora justo aquí donde tienes elementos, haces clic ahí. Y tú aquí mismo, aquí es donde puedes activar o desactivar elementos que caminarás en ancho. Entonces hagamos esto. De acuerdo, en realidad voy a seguir adelante y desactivar cada elemento o una aldosis, activar algunos, los que probablemente usaríamos. Voy a activar el elemento testimonial y luego justo aquí bajo tus elementos de contenido dinámico, activaré la cuadrícula de correos así como la línea de tiempo de publicación. Vamos a seguir adelante y guardar nuestra configuración. Ahora volveremos a la página de inicio editar con Elementor I. Si me desplazo hacia abajo hasta la sección de complementos esenciales, verás que ahora tenemos acceso a solo algunos de los elementos que no muestro. Estamos todavía mientras todavía se puede ver un mejor pago, trabajos fáciles, páginas portadoras, elementos, no sé por qué, pero está bien. Al menos ahora, tenemos acceso a la cuadrícula de correos así como a la línea de tiempo de publicación. Así que aquí está exactamente lo que vamos a hacer. En primer lugar, vamos a arrastrar en nuestro encabezado, que diría visitar nuestro blog. Entonces voy a arrastrar el encabezamiento aquí mismo. Por lo que voy a decir visitas blog. Vamos a alinearlo al centro. El siguiente arriba será el divisor. Así que vamos a sumar también. Voy a alinear al centro con muy, muy corto ancho de aproximadamente, digamos que el 20% debería estar bien. Ahora aquí va a ser lo principal. Vamos a volver. Vamos a hacer uso de la cuadrícula de correos, post línea de tiempo. Te mostraré cómo funciona eso cuando construimos en la página del blog. Pero voy a arrastrar la rejilla de postes justo aquí, justo debajo del divisor. Vamos a dejarlo ahí. Ok. Ahora, posts por página, voy a cambiar éste a dos. Sólo tenemos dos páginas aquí. Y una delgada es que puedas fuente por tal vez el autor. También puedes escoger específicamente por categorías así como simplemente vienes aquí y teclee el nombre de la categoría cuyos posts quieras mostrar. Así sucesivamente puedes compensar por tal vez un puesto que puedas ordenar por la Fecha descendente, y así sucesivamente. Tienes acceso a todos estos ajustes. Pero la principal que realmente quiere caminar con va a ser la configuración de diseño aquí mismo. Aquí, solo tienes un diseño de plantilla, que es el iluminado por defecto, que está bien. Pero entonces las columnas van a hacer esta también. Ahora justo aquí, el tamaño de la imagen, vamos a ir con lleno. Y ahí vas. Por lo que ahora las cosas están empezando a verse mucho mejor. Pero entonces por supuesto también podemos hacer cosas como el espectáculo nuestro Señor más si quieres. Entonces cuando actives esto, verás este botón aquí mismo que cargará más publicaciones de blog también, pero no vamos a hacer eso. Sí tienes acceso a un estilo grid, que no es mucha diferencia entre bueno y misionero. Supongo que, cuando tú, cuando estás disparando más postes y bienvenidos con más columnas, ahí es cuando verás la diferencia bola acabaría de tomar con mampostería por ahora. Ok. Mostró título? Sí. Queremos mostrar el título. En caso de que acepten sí, pero vamos a extender el excepto a 50 palabras. Vale, así que ahí vas, 50 y luego 50 letras más bien. Y luego aquí en el show que haríamos botón Más, sí, queremos hacer eso. Mostrar términos de publicación. Podemos mostrar esto. Esto serían cosas como tus etiquetas, tus categorías, etcétera. Pero no vamos a hacer eso, así que vamos a seguir adelante y esconderlo. Ahora. Mostrar medidor. Esto va a ser para el autor, la fecha en que se publicó. Voy a seguir adelante y esconderlo. Pero de nuevo, por supuesto esto es enteramente subjetivo. Eres más que bienvenido a exhibir. Necesitarás la información si quieres. Muy bien, enlaces aquí mismo. Puedes hacer cosas como Target blank para tus imágenes no están llenas de esto sería para propósitos SEO, son y así sucesivamente. Muy bien, pasemos al estilo y veamos qué tenemos aquí. El estilo de cuadrícula de correos por defecto, tienes estilo a, que tendría las fechas. Aquí tienes el estilo tres, que no tendrá la fecha que sea algo similar a la predeterminada. Supongo que no hubo tanta diferencia. Y por supuesto aquí puedes hacer cosas como cambiar el color de fondo de las publicaciones, añadir un poco más de espaciado si quieres. Vamos a bajar aquí a la tipografía y el estilo de color. Así que aquí mismo cuando se pasa el cursor sobre el título, se puede ver aquí mismo, tiene este color aquí mismo. Simplemente podemos cambiar eso a negro para que no haya cambio, es simplemente básicamente un enlace. No va a cambiar. Pero de nuevo, muy, muy subjetivo. Puedes añadir un enlace por día si quieres abordar el estilo. Voy a bajar aquí a la tipografía. Para la declaración. Podemos ir con ninguno, así que no está en la línea, pero de nuevo, hasta que seas subjetivo o estilo, podemos ir con bombilla cursiva. Simplemente me quedo con el defecto. Muy bien, eso es lo que una tipografía. Y luego aquí abajo, tienes el estilo de corte de hover. este momento cuando pasas el cursor sobre la imagen destacada, tienes algo así como esta animación, esta animación de desvanecimiento. Y luego con el fondo negro, puedes hacer click ahí. Aquí es donde se puede cambiar la animación. Entonces en lugar de desvanecerse y se puede hacer tal vez como un zoom en donde se acerca. O puedes hacer una diapositiva hacia arriba, para que puedas ver eso. Y entonces por supuesto que se puede cambiar el color de fondo estaba bien, tal vez hacerlo algo menos oscuro me, algo como esto. También puedes cambiar el icono, Se mostrarán. Tienes todas estas opciones están disponibles para ti. Pero sólo voy a dejar esto como está. Acabo de cambiar el color de nuevo a algo un poco más oscuro. Y eso está bien, está perfectamente bien. Y eso es todo. Muy bien, así que por último lo vamos a hacer es simplemente agregar el botón Read More post. Así que vamos a arrastrar un botón aquí. Y diré leer más. Y ahora este enlace irá a la página del blog, así sucesivamente. Amplio blog alineado al centro. Y vamos a hacer algunos cambios tan buenos para el estilo. El fondo. Para la parte inferior será el color naranja, y luego el color del texto, por supuesto sería blanco. Vamos a la topografía que se transforma en mayúsculas. Y digamos en realidad leer más posts. Leer más posts, creo que solo echen un vistazo. Sí, dice Leer más posts. Entonces haríamos más mensajes. Y eso es todo. Volvamos al estilo otra vez. Para la tipografía, vamos a volver a aquí estilo, la curación non. Entonces no tenemos ninguno en el botón de línea ahí. Y eso es todo. Puedes sumar tus fronteras y hacer otras cosas también, pero creo que esto debería estar bien por ahora. Así que sigamos adelante y actualicemos. Y eso es todo. Por lo que eres más que bienvenido a darle estilo a esto. De todas formas, quieres, no necesariamente tienes que usar exactamente los mismos colores o los mismos textos exactos y así sucesivamente. Y eso es todo. Entonces una cosa más, una cosa más que debemos hacer antes de redondear esto es sumar algo de espacio entre la sección de galería y un blog, así como el bloque y el FUTA. Volvamos muy rápido. Y por supuesto vamos a editar esta sección para nuestro blog y vamos a añadir algún relleno. Entonces vamos a entrar aquí y es sección ir a Avanzado desvincular estos valores. Así arriba, vamos a sumar 50. Entonces abajo, vamos a sumar 15. Y entonces eso debería ser suficiente. Vamos a seguir adelante actualización. Una vez más. Ver la página. Desplázate hacia abajo, y eso es todo. Entonces hemos construido la página del blog, German vin, siguiente video donde construiremos la sección de ofertas y paquetes. 16. Añadir nuestro llamado a la acción: Vamos a seguir adelante y sumar la siguiente sección, que va a ser las ofertas y paquetes. Y esto será muy, muy sencillo, muy sencillo. Vamos a hacer uso del botón de llamada a la acción para los átomos esenciales. Así que por favor ve a su backend átomos esenciales. Y encontrarías el botón y tu sección de elementos de marketing. Adelante y activa el llamado a la acción. Vamos a seguir adelante y guardar los ajustes. Eso es todo. Voy a volver a mi actualización de la página de inicio. Ahora vamos a desplazarse hasta aquí abajo. En realidad editemos con Elementor primero antes de desplazarnos hacia abajo. Muy bien, vamos a desplazarse hasta aquí abajo. Y ahora voy a ir a mis complementos esenciales. Y dónde está nuestro botón de llamada a la acción está justo aquí. Llamado a la acción. Voy a dejar eso ahí dentro. Y es muy, muy sencillo. Todo lo que vamos a hacer aquí es simplemente cambiar el estilo de contenido de basic a flex grid. Por lo que ahora tienes el botón en blanco y luego el texto a la izquierda. Y por supuesto simplemente cambiaremos el título aquí. Dos ofertas, paquetes. Paquetes. Voy a cambiar esto a un H3 con los textos anaranjados. Por supuesto, puedes cambiar esto a blanco o negro. Y por la textura de aquí mismo , lo siento, no voy a proporcionar ningún disfraz a x Simplemente lo dejaremos como está. Y luego el texto del botón en sí, podemos cambiar ese justo aquí donde tengas textos de botones primarios simplemente cambiarán éste a nuestra tienda ahora. Compra ahora. Y esto enlazaría a un sitio externo o tal vez otra página en tu sitio también. Vamos a pasar al estilo de la luz. Y luego por estilo justo aquí donde tienes el estilo de botón primario, voy a hacer click ahí. Lo que quieres hacer aquí es que hay una otra vez, ahora mismo cuando pasas el cursor sobre Tienda Ahora puedes ver que cambia por el cuello azul. Personalmente, eso no me gusta. Así que lo que voy a hacer es que voy a pasar a flotar sobre tu perm importante estilo hover. Entonces una variedad donde tienes el color de fondo. Simplemente voy a cambiar eso a naranja. Ahora se puede ver que es naranja y no el color azul. Por lo que estamos tratando de mantenernos consistentes con el patrón colo que tenemos de nuestro lado. Ese es el único cambio que voy a hacer. Vamos a seguir adelante ahora actualizar. Veamos la página. Desplázate hacia abajo. Ahí está, ofertas y paquetes. Ahora sé por supuesto el que necesitamos algún espacio entre las ofertas en los paquetes así como la bombilla de pie de página. Todavía vamos a sumar la sección de opiniones. Entonces ahí es donde agregaremos el espacio y eso es todo para sumar las ofertas en la sección de paquetes. Gracias por mirar. Te veré en la próxima clase. 17. Agregar la sección de testimonios: Por último pero no menos importante, vamos a sumar la sección de opiniones. Y por supuesto, esta es muy a menudo una parte muy importante de cualquier sitio web porque los clientes o clientes potenciales quieren saber que otras personas han hecho negocios con tu empresa y que les gustó tu servicio. Así que vamos a seguir adelante y sumar tres críticas del más allá bajo el pecado, Vanessa Carlton y Raúl González. Ahora, la cosa es porque ya hemos activado el elemento testimonial con el complemento esencial Adams. Tenemos dos opciones a la hora de sumar testimonios. Versión de elemental sí te proporciona uno. Lo encontrarías en el general, la idea general, la verás. Está justo aquí, testimonial justo al lado de pestañas. Pero ahí estaban sus complementos sociales. También tenemos el elemento testimonial. Así que permítanme simplemente mostrarles brevemente la diferencia con la de los complementos esenciales. Tienes acceso al botón de espera aquí mismo. El estilo es un poco diferente. Se puede ver con el, este es el que a partir de la una versión gratuita de elemental. Aquí puedes tener la miniatura o el avatar de la persona que proporciona el testimonio debajo del propio testimonio real. Pero con el de átomos esenciales, es un poco diferente. Agujero. Sí tienes acceso al botón escrito aquí y puedes hacer varias cosas como, no, por supuesto no como de costumbre, cambiar las alineaciones de diseño, para que eso seleccionará tu estilo. Incluso puedes tener cosas como el testimonio aquí arriba, tendrás el ícono y luego la imagen. Tienes todas estas opciones aquí. Y te da paso más opciones que la proporcionada por la versión gratuita de Elementor. Pero con eso dicho, voy a usar la versión gratuita de elemental solo para obtener este mismo tipo exacto de estructura. De acuerdo, así que sigamos adelante y hagamos esto. Voy a quitar el elemento y agregaremos un encabezado. Y dirá opiniones, opiniones de clientes anteriores. Y por supuesto que nos vamos a alinear con el centro. Y vamos a sumar nuestro divisor como de costumbre. Así que agreguemos el divisor. Piensa que deberían ser alrededor de 25. Los bucles no son de 25 voltios, 45% para el 5%. Ahora vamos a agregar el elemento ina, sección porque vamos a estar trabajando con tres columnas. Por lo que voy a dejar caer eso ahí dentro. Al igual que antes. Lo que simplemente se hizo aquí es que vamos a proporcionar la primera forma testimonial más allá de Anderson. Y simplemente duplicarán y luego cambiarán los nombres así como la ubicación y otras tareas para el resto de los testimonios. Así que muy rápido, vamos a ir por aquí, ir al general. Y vamos a sumar el primer testimonio aquí. Y esto es por más allá, más allá de Anderson. Ahora, para la herramienta de tipo, solo podrías agregar el país que tienen en su lugar, vale, Así que en lugar del título laboral de la persona, simplemente puedes agregar el país. Entonces más allá de Anderson es de Islandia. Y aquí mismo voy a elegir la imagen. Mientras que nuestro amigo más allá de áreas se puede ver todo es sonriente, muy, muy feliz. Y ahí está. Muy bien, para que puedas ver el tamaño del texto aquí es bastante pequeño. Entonces lo que vamos a hacer aquí mismo por el contenido es que vamos a ir al estilo. Y luego donde hay que progresar aquí. Vamos a seguir adelante y luego elegir el botón de topografía. Ahora por el tamaño, vamos a ir con 18 pixeles de distancia está. ¿ Y qué más? Eso es más o menos. Entonces vamos a simplemente seguir adelante de vez en cuando duplicar esta sección o esta columna y duplicar una vez más. Eliminar la última columna. Y entonces siempre simplemente hacer aquí ahora mismo es cambiar más allá Anderson a las sábanas de Vanessa Carlton, que está sonriendo. Está muy contenta. Vanessa Carlton. Y Vanessa es de EU. Y entonces tenemos nuestro último testimonio aquí de González y roll es sí, es algo sonriendo exactamente, pero tampoco está enojado. Entonces González y él es de España espanol. ¿ Cómo deletreas giro? ¿Spin es SPA IN? Ok. Ahí está. Estamos terminados. Una cosa más. Añadamos nuestro relleno a esta sección. Tan avanzado, vamos a ir con 50 y top 50, abajo también. Actualizaciones. Y voila, vamos a seguir adelante y ver la página. Y ahí vas, justo ahí abajo. Eso es más o menos cómo agregar testimonios a tu sitio web. Gracias por ver y como siempre, te veré en la próxima clase. 18. Revisión de la página inicial: Bueno, bienvenido de vuelta, Felicitas Sian. Nos construimos con éxito primera página incluyendo el encabezado y el pie de página. Y espero que estés disfrutando del curso hasta ahora. Ahora avanzando, vamos a construir dos páginas más, la página del blog y luego la página de contacto. Y ahora sé que en el menú principal sí tenemos la página de Características así como la página sobre, pero no los voy a construir sólo para ahorrar tiempo. No quiero que estos costos sean demasiado largos. Y también porque en este punto, ya tienes una idea de cómo funciona elemental. Todo lo que queda ahora mismo es solo para que te imagines cómo quieres que sea tu página Acerca de. ¿ Quieres tener una pancarta grande? ¿ Quieres tener una sección con tres columnas? Una columna tiene una imagen, otra tiene algunos textos, una otra tiene un video. Puedes hacer todo eso. Así que voy a desafiarte a llegar a un crédito ideas creativas de construir tu propia página Acerca de la página de fetales destacados o cualquier otro tipo de página que puedas estar construyendo en tu propio sitio. Pero vamos a construir la página del blog específicamente porque es un poco diferente de tus páginas estáticas tradicionales. La página del blog contiene todas tus publicaciones. Te voy a mostrar las diferentes formas que puedes construir una página de blog. Y luego la página de contacto se construirá porque no implica usar un plugin llamado plugin de formularios WP, que muchas personas no saben usar. Por lo que ojalá una vez más, espero que estés disfrutando el curso hasta ahora, tienes una página de inicio maravillosa. No progresemos a construir el resto de nuestras páginas. Vamos a continuar. 19. Cómo construir la página de blog: Muy bien, así que sigamos adelante ahora y construyamos la página del blog, que hemos nombrado a la página Artículos en el menú principal, pero en realidad es la página del blog. Lo primero que vamos a hacer aquí es que no podemos editar directamente con Elementor todavía porque en realidad necesitamos editar la página primero desde el backend, desde el trabajo tradicional es back-end. Aquí mismo. Ahora podemos dar click en Editar con Elementor. Esto ahora nos dará acceso a la interfaz elemental para la página. Lo primero que voy a hacer es que voy a bajar aquí a sentados y simplemente esconder el título de la página. Entonces simplemente usaremos nuestro propio rubro. Y llamaremos a éste nuestro blog. Lo vamos a vender como un H1, ir al estilo. En realidad alinémonos con el centro primero vamos al estilo. Y luego para la tipografía, vamos a fijar como nuestra primaria. Si no estás trabajando con las fuentes globales, puedes configurar esto en unos 60 píxeles o algo así. Asegúrate de que sea bastante grande, ¿verdad? A continuación, vamos a agregar nuestro divisor para el blog y lo alinearemos al centro. Establezca esto en los ajustes que presente. Ahora, echa un vistazo a esto. De acuerdo, vamos a agregar publicaciones de diferentes categorías. Vamos a hacer uso de nuestra cuadrícula de publicaciones desde los complementos esenciales aquí abajo. Ahora sí tienes línea de tiempo post, que en realidad está muy interesada en lo que esto va a hacer es que muestre tus posts en una línea de tiempo vertical y es un estilo diferente. Personalmente, no soy un gran fan de ello, pero sí tienes esta opción si quieres. Pero no voy a caminar con eso. Simplemente voy a usar la rejilla de correos. Muy bien, así que voy a seguir adelante y arrastrar la rejilla de pose, saltar crestas debajo del divisor. Y ahora mira esto. El origen va a ser nuestros posts obviamente, pero podemos consultar con base en el autor, el impuesto Fermat y así sucesivamente. Pero vamos a ir con categorías. Aquí. Voy a escribir en Europa. Muy bien. Vamos a tirar en puestos de Europa. La página pospago aquí se establecería en tres, y luego el layout se establece en. Entonces iremos con tres columnas para el tamaño de la imagen. Vamos a ir con lleno como de costumbre. Ahora, notarías que debido a que estoy usando diferentes tamaños de mis imágenes para los postes, hay una desalineación en cuanto a alturas. Como obviamente la moda en Estambul tiene la imagen más alta. Y luego por sus pecados en Pittsburgh y Glasgow los posts tienen imágenes más cortas. Hay una forma de evitar esto y lo verás aquí mismo. Tienes altura de imagen. Simplemente puedes establecer una altura fija para tus imágenes. El único inconveniente de esto es que a veces es posible que no consigas los mejores ángulos. Como por ejemplo, ya sabes, si hiciste este más alto que, puedes perderte el mejor ángulo en tus imágenes y así sucesivamente. Entonces ese es el único inconveniente. Idealmente, querrías usar imágenes del mismo ancho y alto cuando se trata de imágenes destacadas, pero no es un problema. Está bien. Muy bien, así que tenemos eso. Lo que más simplemente hacer es agregar un encabezado para indicar que, acuerdo, este es nuestro post de Europa. Así que voy a entrar aquí y decir Europa. Muy bien, ahora hagamos algunos cambios a la pose real bien en sí misma. Ajustes de diseño. Aquí adentro. El aceptar palabras que vamos a ir con 15. Mostrar leer más. Sí, muestra metta. Sí, Bot ama. Ir al estilo. Lo que voy a hacer aquí es que seleccionaré el estilo número dos. Éste nos mostrará la fecha A2 asegura el avatar o el, el nombre del autor. Por lo que sí prefiero este estilo particular. Ahora, de entendernos a sí mismo, vamos a pasar a la tipografía de color y el espaciado. Oye, otra vez, tienes el título flotar color. Lo hicimos antes, voy a cambiar éste a naranja. Entonces cuando se cierran sobre el enlace de los posts, se vuelve naranja. Entonces para la tipografía, vamos a hacer algunos cambios aquí también. Voy a hacer esto un poco más pequeño, sólo para que esa majestuosa ciudad de Glasgow pueda estar en una sola línea. El estilo, voy a ir con decoración cursiva, ninguno. Para el botón Leer más. También cambiemos hacia abajo. Lo averiguaré aquí abajo con estilo de botón Mo, el color del texto. Vamos a ir con naranja sólo para mantener las cosas constantes. Y luego por supuesto para la tipografía, voy a hacer clic aquí, ir a declaración y luego sentarme a ninguno. Y eso es todo. Lo hemos configurado. Europa, tenemos tres posts. Lo que más quiero hacer en este momento es simplemente duplicar Europa, duplica los Postgres aquí mismo. Arrastraré a Europa, la segunda, dejaré caer por encima de aquí, y luego pondré ésta a Asia. Esa va a ser la siguiente categoría. Ahora para el propio Postgres, vamos a cambiar las categorías aquí a Asia. Así que déjame escribir en Gia Ahí está. Ahí vas. Y luego por último pero no menos importante, hagamos exactamente lo mismo de nuevo, duplicados, duplicados. Ahora arrastraré a Asia. Los cambios querían América del Sur, ven aquí abajo a los Postgres. Cambios, uno a América. Recordar Sudamérica. Y ahí está. Entonces una cosa más que podríamos hacer es sumar algo de espacio entre las rejillas de los polos. Así que echa un vistazo a esto. De acuerdo, voy a ir a mi trabajo de posgrado, ya sea uno por Europa, ir a avanzado en vincular los valores y luego pondré patrón de fondo. Digamos 25 píxeles. Nada demasiado drástico, también hará la sentencia para Asia. Colocación inferior 25 pixeles. Y luego por último pero no menos importante lo haremos también por Sudamérica, en colocar el fondo 25 pixeles. Vamos a seguir adelante ahora actualizaciones. Y veamos la página. Ahí está. De acuerdo, así que vamos a añadir algo de espacio para el título del blog comprado. Echa un vistazo a esto. Esto se ve bastante ordenado y en realidad es bastante genial. Permítanme simplemente hacer rápidamente ese cambio rápido al título del blog. Agreguemos un poco de espaciado. Por lo que vamos a ir, en realidad se irá al botón de sección justo aquí manteniendo todo el contenido irá a avanzado en enlace y simplemente establecerán 50 píxeles para la parte superior y luego encajarán 50 pixeles para la parte inferior como bien. Ok, O puertas. Ahora, una vez más, veamos la página. Y voila ley, ahí vas. Esa es la página del blog todo construido. No obstante, quiero desafiarte. Para hacer las cosas más interesantes. Te mostraré un ejemplo de lo que estoy hablando. Tanto con elemental como con los átomos esenciales son plugin. Tienes acceso a tantos elementos para tus páginas se vean más emocionantes, más dinámicas. A modo de ejemplo, para los átomos esenciales se han activado otro elemento. Y es el acordeón de imagen. Lo encontrarás en los elementos creativos aquí mismo verás acordeón de imagen. Adelante, actímalo. Ahora volvamos a la página aquí y déjame mostrarte una cosa que podríamos hacer. Voy a editar con Elementor. Vamos a hacer uso del acordeón de imagen. Ahora echa un vistazo de nuevo esto. Voy a desplazarse hasta aquí abajo. Son átomos esenciales. Tenemos aquí el elemento acordeón de imagen. Voy a hacer clic arrastrar y soltarlo justo encima de ti hacia arriba. Muy bien. Ahora antes de empezar a editar esto, voy a añadir otro encabezado justo encima del acordeón de imagen. Y podemos llamar a éste los últimos posts. Así como ejemplo, en realidad voy a agregar algún relleno desde la parte superior. Vamos 25 pixeles. Solo para darte cierta distancia entre el título del bloque real y dejarnos publicar. Y volveré a echar un vistazo a esto. Voy a ir a mi imagen acordeón e invitar aquí. Podemos hacer tantas cosas para la primera según aquí, voy a hacer click en el interior, cambiar la imagen aquí para ser uno de los posts. Éste de aquí mismo, los posts de San Petersburgo, voy a elegir la imagen destacada. Inserte eso. Y ahora escritor verás hacerlo activo. Sí, queremos hacer esto, no podía activo para que en realidad se vinculara a los posts aquí en este momento, voy a cambiar ese título. Dos visitas en San Petersburgo. Ese va a ser el título. Y luego aquí estarían los extractos. Este sería el excepto el texto, que podemos cambiarlo ahora mismo aquí donde la has habilitado para enlazar, quieres mostrar esto y ahora mismo, aquí es donde agregarías el enlace a el puesto. Así que déjame hacer esto rápidamente. Permítanme ver la página muy rápido. Durante días en San Petersburgo. Así que aquí mismo voy a agarrar este enlace aquí mismo. Nuevamente, observe que no es necesario copiar el nombre de dominio en sí mismo. Simplemente ve con la slash hacia adelante y luego el nombre de la publicación o la URL de los posts. Voy a copiar esto. Ve aquí mismo, vuelve a Editar. Da click en el primer acordeón de imagen aquí. Y ahora aquí abajo, enlace de título. Voy a seguir adelante ahora y simplemente pegar eso. Por lo que esto ahora enlazará con el puesto o cuatro días en San Petersburgo. De nuevo, podría hacer lo mismo por el segundo. De acuerdo aquí también. Nuestra lista elige el para la Montaña Arco Iris. Y luego otra vez, puedo entrar aquí y cambiar el título a la Montaña Arco Iris. Un poco rápido, Rainbow Mountain, y así sucesivamente. Eso es para el segundo en consecuencia, el tercer trimestre. Y simplemente cambiaré éste por el que Rapa Nui. Y luego por supuesto, el último pero no menos importante, vamos con el de Turquía, moda y la moda en Estambul. Inserta esa. Lo es. Voy a seguir adelante y ahora actualizaciones. Y ahora echaremos un vistazo a la página mejorada del blog. Ahora mira esto. Tienes entradas de blog, por ejemplo, en Pittsburgh, tendrás esta montaña arco iris. Pueden dar click en éste para Rapa Nui, éste para la moda y Estambul. Y luego si no les interesa, simplemente ahora pueden desplazarse hacia abajo para ver los posts de Europa, Asia, Sudamérica, etcétera. Entonces esta es una forma, otra forma de cómo puedes hacer que tus páginas sean más interactivas, más dinámicas. También puedes agregar animación, como puedes configurarla para que estés tal vez diapositivas desde la izquierda o desde la derecha. Te he mostrado cómo hacer eso en la página de inicio. Así que sólo trata de ser creativo. Si no estás contento con lo estática que se siente tu página, siempre puedes condimentar las cosas haciendo uso de elementos creativos, agregando algo de animación. Y verás una mejora masiva en lo dinámicas que son tus páginas. Eso es todo por construir la página del blog. Muchas gracias por ver. Te veré en la próxima clase. 20. Cómo construir la página de contacto: Simplemente construí la página del blog y ahora vamos a construir otra página muy importante, y esa va a ser la página de Contacto. Ahora idealmente, por supuesto, en tu página de contacto quieres tener algún tipo de formulario de contacto, tal vez incluso algún mapa de Google. Si tienes una ubicación física. O no tenemos una ubicación física, pero vamos a agregar un formulario de contacto. Ahora, hay varios plugins por ahí para crear formularios de contacto. Y de hecho, si estás usando la versión pagada de elemental, tendrás el elemento de formulario. Pero estamos usando la, la versión gratuita de elemental. Entonces vamos a instalar otro plugin. Y a este plugin se le llama los complementos WP Forms. Entonces déjame escribir formularios WP. Y es el de aquí mismo. Muy bien, así que vamos adelante instalemos. Y ahora vamos a activar el plugin. Muy bien, así que sólo vamos a seguir adelante y hacer clic en crear tu primer formulario aquí mismo. Lo bueno de este plugin en particular es que se integra muy bien con elemental. Voy a escribir un nombre aquí mismo. Entonces ese va a ser el formulario de contacto. Ese será el nombre de esta forma. Formulario de contacto están aquí. Usted sí tiene nuestras diferentes plantillas, van a elegir el factor de formulario de contacto simple. Podemos ver la demo aquí. Se puede ver esta es la demo aquí mismo. Muy, muy simple. Tendrás los campos de nombre, correo electrónico y luego mensaje. Para que eso se adapte a nuestros propósitos en, voy a seguir adelante y simplemente haga clic en Usar plantilla. Eso es en sí, pero sólo va a hacer algunos cambios de la forma en que funciona el plug-in como están aquí mismo, tienes los campos disponibles para ti con la versión gratuita, hay una versión de pago donde tienes acceso a estos campos de lujo y los campos de pago y así sucesivamente, pero no los necesitamos. Entonces el jengibre que voy a hacer aquí sería editar el campo de nombre. Así que simplemente voy a hacer click en el interior. Y aquí mismo sí tienes el formato. Prefiero el formato sencillo donde solo tienes una sola línea para el nombre. Pero te has forzado medio, último, y primero, último, y así sucesivamente. En el Avanzado, puedes cambiar el tamaño del campo para lanzar dos pequeños, dependiendo de tu gusto y de lo que prefieras. Puedes añadir tus gafas CSS aquí. También tienes lógica inteligente, que, oops, lo siento por eso. Lo olvidé. Esto solo está disponible con la versión de pago de todos modos, para las opciones de campo. Eso es todo. Para que puedas volver aquí y agregar campos adicionales como casillas de verificación desplegables. Si quisieras. Bajo configuración aquí, lo siento, bajo ajustes, ya sea aquí, aquí es donde se pueden cambiar cosas como el nombre del formulario real en sí. Puede cambiar el texto para el botón e influir en las aplicaciones. Aquí es donde puedes configurar el tipo de notificaciones que quieras recibir cada vez que alguien envíe el rellena el formulario de contacto. Queremos que nos notifiquen aquí por defecto, el correo de administración asociado a tu sitio web de WordPress estará aquí, pero puedes agregar tus propios elementos de correo electrónico personalizados. Muéstrale algo, vale, aquí mismo, donde tienes de nombre. Por defecto, se establecerá en el nombre de su sitio web, pero tendrá mucho más sentido establecer estos el nombre real de la persona que envía el mensaje. Por lo que aquí mismo hago click en Mostrar etiquetas inteligentes. Simplemente elija el campo de nombre, o su nombre, LastName, dependiendo del tipo de sensación que tenga para el nombre. Y luego lo mismo para de correo electrónico también. Simplemente elegiremos el campo de correo electrónico. Y voy a seguir adelante y simplemente ahorrar. Tienes las conformaciones aquí también como bien, ¿ qué pasa una vez que llenaron el formulario de contacto? ¿ Reciben un mensaje? Si es así, aquí es donde se puede editar el mensaje. Puedes mostrarlos en una página particular y será una belleza especial de todo creado. Simplemente puedes redirigirlos a una URL externa si querías ir. No vamos a hacer nada de eso. Vamos a seguir adelante ahora simplemente PARA ahorrar una vez más, cierra esto. Ahora vamos a ir a la página de contacto. Vamos a seguir adelante y editar la página primer lugar desde el backend de WordPress. Entonces desde aquí voy a hacer click en editar con Elementor para que ahora podamos usar la interfaz Elementor y echar un vistazo a esto. Muy bien, oops, me olvidé de hacer una delgada. Mis disculpas. Necesitamos habilitar los formularios WP son add-on para los complementos de elementos esenciales. Entonces hagamos esto rápidamente. Voy a ir a átomos esenciales aquí. Vamos a los elementos. Y luego aquí abajo tienes los elementos de estilo de forma. Verás Formularios WP. Vamos a seguir adelante y ahora activar eso. Se puede ver que tiene acceso a otro tipo de formas como formas fluidas, Formas Gravedad, que en realidad es muy, muy bueno Ninja Forms y así sucesivamente. De todos modos, sigamos adelante y guardemos nuestra configuración. Y voy a cerrar esto. Actualicemos esta página una vez más. De acuerdo, entonces lo que pasa con las formas WE es que incluso con la versión gratuita de elemental, tendrás acceso al elemento. Una vez que hayas instalado y activado el plugin, puedes verlo aquí mismo en lo básico, tienes formularios WP de Elemental. Voy a hacer clic arrastrar por dentro aquí. Y te mostraré la diferencia entre éste y el que proporcionan los complementos esenciales. Volvamos, desplázate hasta aquí abajo. Agreguemos el de complementos esenciales en una sección diferente. Ahora vas a ver la diferencia principal, ¿de acuerdo? Este es el de los átomos esenciales. Voy a elegir el contacto para la tasa de mortalidad. Dice selecto formulario. Vamos a elegir eso. Ahora justo aquí. Compara éste con el de aquí arriba. Vamos con el de elementos de primera. Vamos a elegir también el formulario de contacto. El caso es que solo tienes acceso al tipo de formulario a elegir. Las opciones de visualización son buenas. Quieres disparar el nombre del formulario, descripción y luego avanzado. No hay nada más. No obstante, para el que tiene complementos esenciales, se tiene acceso a mucho más. Puedes mostrar las etiquetas de descripción, por favor sostenla. Incluso tienes nuestros mensajes de error. ¿ Quieres mostrar mensajes de error o quieres ocultarlos? Entonces, por ejemplo, si alguien no llenaba el campo de nombre y luego la prensa Enviar querías mostrar el mensaje de error o no. Tienes acceso a muchas opciones de estilo. Puede agregar un color de fondo del formulario. Puedes alinear el formulario a tus márgenes de ancho. Tienes todo tipo de opciones de estilo para las etiquetas de título y descripción y así sucesivamente. Todas estas opciones de tiempo, no las consigues con la que tiene el elemento proporcionado por la versión gratuita de elemental. Por eso prefiero usar el que proporcionan los átomos esenciales. Así que voy a seguir adelante y cerrar éste por Elemental. Caminemos sobre éste. Muy, muy simple. No vamos a hacer ningún cambio enorme aquí excepto que simplemente ocultaremos el título de la agenda telefónica. Todo el mundo sabe que es un formulario de contacto, por lo que no hay necesidad de cambiar nada aquí. Una cosa que vamos a hacer sin embargo, es ocultar el título de la página. Y luego agregaremos nuestro propio rubro. Muy bien, y simplemente elegiremos esta en ella como un H1 ir a tipografía de estilo, que es primaria. Y sencillamente vamos a cisne más frío nuestro Contáctenos. Eso es todo. Agregaremos algún relleno a los valores de enlace de sección. Vamos a ir con 50 en la parte superior y luego 50 abajo. En realidad vienen a pensarlo. El Contáctanos es en realidad libro muy, muy grande. Está bien, vamos a alinear este al medio. Y solo agregaremos algún patrón para la forma real en sí. Voy a hacer click en el elemento de formulario. Vamos a Avanzado. Y también agregaremos algún relleno también. Simplemente dale cierta distancia entre el título real y la forma misma. Así que adelante y actualízate. Eso es lo que voy a seguir adelante ahora y ver la página. Y eso es todo para la página Contáctenos. Ahora de nuevo, puedes hacer esto un poco más emocionante. Se puede ir con tal vez dos columnas a diferencia de en sección. La primera columna se puede agregar una, una imagen de alguien que tal vez llame o alguien envíe en un correo electrónico, cosas así. Por lo que hay diferentes formas de modificar la página Contáctenos y hacerla más emocionante si lo quisieras. Pero esto es muy, muy simple, muy sencillo, y se adapta a nuestros propósitos. Así que gracias por mirarte y te veré en la próxima clase. 21. Introducción al Elementor de diseño responsivo: Muy bien, es tan técnicamente hemos terminado de construir nuestra página web. Tenemos la página de inicio, tenemos la página del blog, y también tendremos una página de contacto así como el encabezado y pie de página. Pero hay una cosa muy, muy importante que tenemos que cuidar y que va a ser diseño receptivo. Recuerda siempre que tantas personas hoy en día usan sus teléfonos móviles para navegar por Internet. Y si alguien tropeza, tropeza con tu sitio web en el teléfono móvil, quieres asegurarte de que se vea bien. Entonces lo que vamos a hacer en el resto de esta sección es que te voy a mostrar cómo puedes reconstruir el encabezado, la página de inicio, el pie de página, y las otras páginas para lucir receptivas. Para que si se ve en un dispositivo tablet o en un dispositivo móvil, se verá bien. Lambdas te dan una demostración muy, muy rápida en este momento esto es para la vista de la tableta. Se puede ver que he reducido el tamaño de mi pantalla al de una tableta. Y se puede ver en este momento que todavía se ve muy, muy, muy bien. No tenemos ningún problema con el espacio en el encabezado. Se ve bien. La sección de notas de testimonio se ve bien. La foto se ve bien. Pero ahora si me desplaza todo el camino hacia abajo hasta el tamaño de pantalla más pequeño, que normalmente será tu teléfono móvil. Déjame volver a la cima ahora se puede ver que el encabezado se ve diferente. Tenemos un fondo negro. Sí tenemos nuestro logo. Tenemos aquí el menú principal, que ahora es el menú de hamburguesas, que ya has visto muchas veces antes. Y luego si vuelvo a desplazar hacia abajo, puede ver que se ve bien todo el camino aquí abajo hasta el pie de página. Por lo que el diseño receptivo es extremadamente importante. Así que viniendo, te voy a mostrar cómo puedes hacer cambios en tu sitio web para que se vea bien en cualquier dispositivo móvil. Lambda también menciona rápidamente que cuando se trata de un diseño receptivo, hay algunos conceptos que deben tener en cuenta. Uno implicaría hacer cosas como reducir los márgenes son los patrones que has agregado en la versión de escritorio. Por ejemplo, te acuerdas ahí con el banner de la página de inicio. Para esta sección, tuvimos que sumar una cantidad escandalosa de margen negativo y creo que fue menos de dos a dos píxeles cuando se trata de versiones móviles. Por lo que las versiones responsivas, es posible que tengas que reducir ese tamaño o Mabou, o tal vez incluso en ciertas situaciones aumenten el tamaño. Será necesario ajustar a las imágenes o patrones. Además, hay momentos en los que solo necesitas ocultar tipos de elementos de configuración cuando se ve en un dispositivo móvil porque podría verse muy bien en el escritorio. Un ejemplo sería un editor de video se verá muy bien en el escritorio. Pero en un dispositivo móvil, puede que no necesariamente sea tan grande. Lo mismo aplica con las animaciones también. Y las medidas se verán bien en un escritorio, las pasarelas en un escritorio, pero el teléfono móvil podría tener problemas para mostrar esa animación. Entonces todo el punto de este diseño masivo es el sacrificio. Haces cambios, eliminas ciertas características para que cuando se vea en un dispositivo móvil sea Uber grid. Entonces eso es todo por la muy rápida introducción induct al diseño sensible. Empecemos ahora con él. 22. Header responsivo Parte 1: Muy bien, Así que empecemos a diseñar nuestro encabezado para que sea receptivo y Lambda te muestre los estados tal y como es en este momento. El escritorio está más o menos hecho. Cuando comenzamos a minimizar la pantalla de nuestro navegador. Ya se puede ver que en este punto esta sería la vista de la tableta. Y se puede ver que el logotipo se vuelve mucho más pequeño. El menú también se ha transformado en el tradicional menú de hamburguesas. Y está bien, pero definitivamente se puede mejorar. Pero entonces si nos vamos un poco más pequeños ahora se puede ver aquí es donde las cosas se ven realmente, realmente malas. Esta es la vista móvil, la para el teléfono móvil. Por lo que necesitábamos hacer algunos cambios aquí. Voy a seguir adelante. Y en realidad antes de hacer eso, déjame mostrarte el otro encabezado, el encabezado global. Vamos a la página de contacto y notarás que esta es un poco mejor. Tenemos el fondo negro y luego en vista móvil, pesar de que el menú de hamburguesas está desalineado con el logo, sigue siendo mucho mejor porque no tenemos ningún espacio en blanco en la parte superior. Muy bien, voy a seguir adelante y editar los encabezados de la página de inicio. Vamos a Editar con Elementor y luego la página principal se dirige hacia arriba. Ahora vamos a cambiar al modo de respuesta aquí abajo. Modo de respuesta, vamos a cambiar a la mesa primero. Ahora, quiero mostrarte algo muy rápido. Muy bien, déjame volver a la respuesta. De forma predeterminada, tu menú principal o un menú destacado habilitado se convirtió en el menú de hamburguesas en la vista de tableta, sin embargo, ten en cuenta que no siempre tienes que seguir la configuración predeterminada. este momento si cambio a mesa, como se puede ver, se ha vuelto al menú de hamburguesas. Y eso es porque si tuviera que hacer clic y editar el menú principal en el diseño, verá lostamaños de pantalla de tableta de punto de rupturapositivo de Estados Unidos tamaños de pantalla de tableta de punto de ruptura de 1025 píxeles y por debajo. Claro, el menú de hamburguesas blot. Si no queremos hacer eso, voy a cambiar esta a la vista móvil, en su lugar. Una vista de tableta. Aún tendremos el menú principal mostrando y sólo nos transformamos al menú de hamburguesas una vez que lleguemos a la vista móvil. Vamos a seguir adelante actualización. Y veamos qué ha hecho este pequeño, pequeño cambio por nosotros. Ver la página. Vuelve a la página principal o caso. Por lo que ahora en este punto, esta es la vista de la tableta. Y se puede ver que en realidad no es tan malo. No tienes que cambiar al móvil, al menú de hamburguesas una vez, que es tabletas. Por supuesto, si tuvieras muchos elementos de menú, digamos 678 artículos que años, obviamente no tendrás suficiente espacio. Pero instituciones donde tienes como cuatro o cinco elementos de menú, está perfectamente bien para su exhibición. Ellos como están en el modo tablet. Hay dos cambios que voy a hacer aquí. Uno sería aumentar un poco el tamaño del logotipo. Y entonces también podríamos intentar reducir un poco el tamaño de los elementos del menú. Hagamos esto muy rápido. Voy a volver al encabezado de la página principal. Vamos a cambiar a responder SUV, tableta de punta. Muy bien. Voy a hacer clic en el menú. Lo siento, el logo ya sea aquí en el logotipo de UT va a Style. Ahora nota en este momento que la dimensión aquí dentro se ha establecido en tableta. Como se puede ver, es todo tableta SASE, tableta. Entonces aquí voy a cambiar el tamaño al 100%. Vamos a mostrar el tamaño completo del logotipo. Ahora para el menú principal, sé que todo está en blanco. No puedes ver, pero solo aguanta conmigo. Voy a hacer click en editar, el menú principal, ir al estilo. Entonces vamos a ir a la tipografía aquí mismo. Ahora, mira esto, se asegura de que el tamaño aquí esté configurado en tablet. Vamos a hacer estos 114 píxeles un poco más pequeño de lo habitual. Vamos a las actualizaciones. Ahora echemos un vistazo. Añade el nuevo encabezado de la página principal y el modo de respuesta. Y ahí vas. Ahí vas. Entonces hasta este punto, se ve bastante bien. Obviamente, vamos a hacer algunos cambios importantes el titular del banner, el ganador que estamos viajando, Es aventura. Vamos a reducir el tamaño, pero solo prestarle atención al encabezado real. De acuerdo, se ve bien hasta la vista móvil, que ahora tendrá que caminar. Pero por ahora adaptado sabio, esto se ve bastante bien. Ahora echemos un vistazo al encabezado para el encabezado global, global. Vamos a escoger una página, vamos a escoger la página Artículos. Y a partir de aquí vamos a seguir adelante para editar el Encabezado Global. Primero vamos a manejar el modo tablet. Así que vamos a bajar aquí a su receptivo. Ir a la tableta. Muy bien, vamos a manejar los puntos de pan. Vamos a cambiar eso a móvil. Y simplemente hará exactamente lo mismo por el estilo también. Nos vamos a alinear a la derecha, para el menú principal, alinear al blanco y luego al estilo. Vamos a bajar aquí a la tipografía. Asegúrate de que esto esté configurado en tablet. Entonces iremos con 14 pixeles también. Y ahí está. Ok, Next va a ser el logo. No olvidemos, necesitamos hacer el logo o al 100%. Asegúrate de que esto esté configurado en tabletas. 100%, bien. Ahora vamos a cambiar a la vista móvil. Lo único que tenemos que hacer aquí mismo sería delinear el menú de navegación hacia el centro. En realidad, no debimos haber tocado las alineaciones en el modo tablet, así que está bien, solo vamos a volver a poner esto. Voy a ir a Diseño de Contenido y luego a la alineación aquí. Mantengámoslo en el centro. Creo que van a estar mejor. Muy bien. Eso es. Voy a seguir adelante y voy a actualizar. Echemos un vistazo a lo que tenemos. Veamos la página. Escogemos la página Artículos. Reduce el tamaño. ¿ Qué tenemos aquí? Está bien, es tableta, tablet se ve bien. Y ahora aquí esta va a ser la vista móvil, pero parece haber una desalineación con el logo y luego con el propio menú. Así que vamos a arreglar rápidamente eso. Volvamos. Tenemos que hacer el logotipo en realidad tal vez un poco más pequeño. Creo que es un poco demasiado grande también. Entonces hagamos esos cambios. Vuelve al móvil sensible. De acuerdo, editemos aquí el logo primera alineación, vamos a ponerlo al centro. Digamos que éste es disidente. Y entonces tal vez el tamaño, tal vez un 100% sea un poco demasiado grande, sin pensar en ello. Entonces bajemos esto al 75%. Vamos a seguir adelante y fechas. Y veamos cómo se verá esto. Volvamos a ver la página. Artículo. Me minimizo, vale, Mucho mejor ahora y ahora se puede ver la alineación está en el centro. Y ahí está. Así que se ve mucho mejor, mucho mejor en este momento. Por supuesto, todavía se van a hacer algunos más, algunos cambios más en los encabezados, pero por ahora al menos se ve mucho mejor que lo que teníamos inicialmente. Tanto el encabezado de la página de inicio como el Global Header se ven mejor. Nos encargaremos del espacio en blanco en, en el encabezado de la página de inicio en el siguiente video. 23. Header responsivo Parte 2: Bienvenido a la segunda parte de rediseñar el encabezado responsive. Y olvidé mencionar en un video anterior cuando cambié los signos de los elementos del menú aquí, por alguna razón parece haber afectado la versión de escritorio. Se puede ver en este momento que los textos y ya no en mayúsculas, si algo como esto sucede, sólo tiene que volver a editar el encabezado de la página de inicio. Lo que quieres hacer es simplemente ir al elemento menu. Por lo que voy a hacer click en muchos elementos aquí mismo. Vaya a Estilo, vaya a la tipografía aquí mismo, y simplemente haga clic en ella. Eso es todo lo que puedes ver aquí mismo. Dice Transform a mayúsculas. Así que básicamente estamos reafirmando que, Hey, sí queremos que el Vamos a ser mayúsculas. Así que voy a seguir adelante las actualizaciones nuevo y vamos a volver atrás, ver la página. Vamos a la página de inicio. Ok. Y ahí vas. Entonces honestamente, no estoy muy seguro por qué pasa eso, pero por si acaso te sucede , simplemente haz lo que acabo de hacer. Ok. Ahora, anteriormente pudimos conseguir que la vista de la tableta se vea así, lo cual no está mal en absoluto. Pero ahora es el momento de que echemos un vistazo a la vista móvil. Y se puede ver ahora mismo se ve realmente, realmente malo es un montón de espacios y el logo y el menú, el menú de hamburguesas en línea, pero sí necesitamos arreglar el espacio en blanco. Ahora en realidad esta es la segunda vez que estoy grabando este video en particular porque en el anterior, realidad pude arreglar el encabezado móvil para tener exactamente el mismo tipo de estilo allí la pancarta mezclándose en el fondo. No obstante, he decidido ir con una ruta diferente y en su lugar utilizar el mismo tipo de encabezado que tenemos para el resto de las páginas, como la de aquí donde tienes el fondo negro, decidí usar estas encabezado para la página de inicio salir en vista móvil. El motivo por el que es porque en realidad quería aprovechar esta oportunidad para mostrarte un truco muy cool que puedes usar siempre que estés trabajando con diseño responsive. Volvamos a la página de inicio. Y quiero mostrarte algo, ¿verdad? Voy a ir a Editar con Elementor editando el encabezado de la página de inicio. Aquí está la cosa. De acuerdo, voy a seguir adelante y duplicar esta sección de encabezado. Voy a hacer clic derecho aquí. Duplicados. Básicamente ahora tenemos dos encabezados. La diferencia es que voy a entrar aquí, ir a esta sección Editar. Voy a ir al estilo, tipo de fondo, darle un color de negro. Vale, ahora, mira esto. Voy a ir a Advanced, bajar aquí a Responsive, y luego invitar aquí tienes opciones de visibilidad. Cuándo exactamente te gustaría mostrar esta sección en función de un tamaño de pantalla? Voy a esconderlo en el escritorio. Sí. No queremos rodarla en el escritorio todavía porque seguimos usando encabezado de la página de inicio en la tableta. También queremos esconderlo hasta eso. Pero entonces queremos mostrarlo cuando llegue a la vista móvil. Como tal, ahora voy a ir a nuestro encabezado original y hacer lo contrario. Ir a avanzado, Calma hetero sensible, y luego esconderse en el escritorio. Nadie quiere mostrar, queremos mostrar hasta eso. Pero cuando vaya a Hide on Mobile, déjame seguir adelante y ahora actualizaciones. Y echa un vistazo a esto. Vamos a seguir adelante ahora, ver la página. Vamos a la página de inicio. Vale, para que veas que aún tenemos el mismo encabezado. Pero ahora para la vista de la tableta, se puede ver que todavía tenemos el mismo encabezado, el mismo encabezado en el mismo encabezado. Ahora, una vez que llega a la vista móvil, ahora tenemos el fondo negro con la idea de logotipo del centro y luego el menú de hamburguesas ahí abajo. Y luego tenemos el banner de la página de inicio. Y ahí vas. Por lo que este es un truco que puedes usar siempre que estés trabajando con diseño responsive. Puede optar por mostrar una sección en particular en específicamente en el escritorio. Y puedes optar por mostrar sección particular específicamente solo tal vez en tablet o en móvil. Una pregunta que podría tener aún está bien, ¿ por qué no simplemente duplicé este encabezado en particular y luego simplemente uso ese encabezado en la página de inicio y luego simplemente lo escondo en el escritorio y tableta y luego se muestra en el móvil. Puedes tener dos cabezales se muestran en cualquier página con elemental, al menos así es como funciona este plug-in. De acuerdo, Así que si estás pensando, simplemente voy a duplicar este encabezado y mostrar dos encabezados en la misma página, esconderlo uno en escritorios o no quieren un móvil, no va a funcionar porque en realidad lo intentó. Por eso tuve que ir al encabezado de la página de inicio. Y luego en ese mismo encabezado, crea una segunda sección que ahora se mostrará específicamente en la vista móvil. Pero no hemos terminado. En realidad quiero hacer otra cosa. Mira, no siempre tienes que ir con este tomate. Tienes el logotipo y el centro en la parte superior, y luego el menú de hamburguesas o debajo de él. Todavía podemos usar dos columnas aquí. Cómo iniciar sesión a la izquierda y tener el menú en la luz. Hagamos eso. Voy a volver editar con Elementor, el encabezado de la página de inicio y paletas con para que esta página se cargue, bien, algo de edición. El segundo encabezado en este momento. Pero ahora voy a cambiar al modo de respuesta. Vamos a la vista móvil. Todo Kn tiene exactamente lo que tenemos. Aquí mismo. Voy a hacer esto. Voy a hacer clic en la columna que sostiene el logotipo. Aquí mismo. Voy a decir 50. Entonces bajaré aquí a la columna del logo sosteniendo el logotipo, lo siento, todo en el menú tampoco. Y luego cambiar el uno a 50 también para que estén de lado a lado. Ahora, hagamos algunos cambios. Voy a hacer click en el menú Editar, icono, bajar, golpea diseño. Tratemos de alinearnos con el blanco. Y entonces vamos a hacerlo grande. Pasemos al estilo. Aquí abajo tendrás el gatillo de menú y cerrar el icono click en el interior. Y ahora Icon Size, voy a hacer este por encima de 40 pixeles. Keda debería ser lo suficientemente grande. Y luego para el logotipo, vamos a editar también el logotipo. El tamaño de la imagen se establece en completo, alineado a la izquierda. Vayamos al estilo max con un 100%. De acuerdo, sigamos adelante ahora. Actualizaciones. En realidad antes de que lo hagamos, aguantemos. Hagamos también esto. Al hacer clic en el menú de hamburguesas. Este va a ser el trabajo hecho. Pero ya se puede ver que podemos ver el texto. El texto es todo blanco, por lo que necesitamos hacer algunos cambios aquí. Esto es exactamente lo que voy a hacer. Voy a ir a caer en el menú desplegable de letreros aquí mismo. Y luego color de fondo. Vamos a ir con negro, color de texto, vamos a ir con el blanco. Y eso debería ser eso. No sé por qué no lo vemos aquí todavía, pero está bien. Voy a seguir adelante las actualizaciones. Volvamos, veamos la página. Vuelve a la página de inicio, minimice la ventana. Muy bien, así que ahora puedes decir, Ok, tenemos el logo a la izquierda, el menú en blanco. Ahora si hacemos clic en el menú de aquí mismo, se abre. Bobby aún no puede ver el texto que le interesa. De acuerdo, volvamos a ver qué pudo haber pasado. Y esto va a estar muy interesado. No estoy muy seguro por qué no vemos los textos. Muy bien. No se preocupe. Voy a entrar aquí al modo de respuesta, cambiar de nuevo a Móvil. Haga clic en el menú aquí mismo, haga clic en el menú desplegable. ¿ Por qué no vemos el texto? Vayamos al estilo. Vamos a bajar aquí a la tipografía y wow, no estoy del todo seguro por qué el tamaño aquí en vez a uno, pero no debería ser uno. Debería ser un poco más grande que uno. Eso es un probablemente fallas en píxeles. Entonces mis disculpas, voy a contar tema por qué me un píxel, a veces siento elemento está tratando de evitar que haga buenos videos. Yo, honestamente no sé por qué. Dijo que no lo hará pixel. Eso es sólo, eso es simplemente extraño. De todos modos, se puede ver que al menos los elementos del menú ahora están mostrando, Wow, eso es muy, muy interesado en, te estoy diciendo que el diseño web puede ser unas ocupaciones muy extrañas, muy extrañas. A veces te sientes, sientes que todos estos elementos tienen en mente que no van a volver. Muy bien, así que ahora hago clic aquí. Ahí va. Ahora ya puedes ver que tengo los elementos del menú y por supuesto ya puedes cerrar. Entonces eso es básicamente todo para rediseñar el encabezado sensible. En realidad voy a seguir adelante y hacer exactamente lo mismo para el encabezado global para la vista móvil, donde voy a hacer la primera columna 50% y luego hacer la segunda columna sosteniendo el ítem de menú son el 50% también. Y también hacer que el icono de la hamburguesa del menú sea un poco más grande. Para que puedas seguir adelante y hacer eso también. Pero eso es todo por crear los responsivos o encabezados para el sitio web. Gracias por ver evento alemán próximo video donde ahora echaremos un vistazo a rediseñar el pie de página para ser un poco más responsables. Entonces tú entonces. 24. Pier responsivo: Ahora es echemos un vistazo al pie de página y tratemos de hacerlo responsivo. Y déjame ir primero a la vista de la tableta. Y a partir de aquí en realidad tiene dos. Se ve bastante bien. No creo que necesitemos hacer ningún cambio en la vista de la tableta. Pero una vez que llegamos a la vista móvil, aquí es donde tenemos un poco de espacio y el tema puede ver el encabezado de contacto está un poco demasiado cerca de la imagen. Si vamos muy pequeños, entonces es lo mismo. Excepto que la imagen en este momento se ve muy, muy azul. Quizás la mejor opción para nosotros en la vista móvil sería simplemente eliminar esta imagen. Vamos a seguir adelante y editar con Elementor, el Pie de página Global. Voy a cambiar a tablet sensible primer lugar, sólo para confirmar. Tan modo de respuesta, fui bueno en tablet. La tableta se ve bien. Se ve bien. No creo que necesitemos cambiar nada excepto quizá en realidad, ¿sabes qué? Desde la vista de plantilla, la imagen Jody buscando un poco borrosa. Eso es porque es un poco demasiado alto. Lo que podemos hacer es esto. Podemos reducir el tamaño de la primera columna y aumentar la de la segunda columna. Entonces veamos qué 50 vamos a hacer. Son 50 y luego el de la derecha también va a ser 50. Pero la imagen sigue siendo un poco borrosa. Entonces eso no es tan grande. Muy bien, volvamos aquí. Tratemos de hacer algunos ajustes. Tal vez haga este. Digamos 66. Creo que el 66 está bien y van a complementar la segunda columna, 33 para que pudiera estar en la misma línea. Esto sigue bien, supongo. Pero ¿qué pasa con la vista móvil o la llave? Ahora, puede ver que la imagen es simplemente demasiado borrosa. Y a veces lo mejor es simplemente movernos y no seguros de ciertos tipos de elementos en la vista móvil. Así que siempre simplemente hacer aquí ¿está bien esto? Vamos a hacer clic en la columna editar columna irá a Avanzado. Y igual que lo hicimos anteriormente, vamos a escondernos en el móvil y eso es todo. Así que sigamos adelante y actualicemos. Echemos un vistazo a lo que vamos a tener esta vista la página. Ir a la página de inicio. Desplazemos hacia abajo. De acuerdo, entonces lo único que tenemos que hacer ANS para agregar algún relleno para el encabezado de contacto. Lambdas vuelve a la vuelta a la vista de la tableta, solo para confirmar que está bien. Así que sí, las vistas de plantilla están bien. Es la vista móvil donde vamos a necesitar agregar algo de espacio en los contactos nuestro botón. Entonces hagamos esto rápidamente. Vamos a volver editar con Elementor pie de página global. Simplemente agregaremos algún patrón al, al pie de página en sí. Eso es lo que simplemente haremos. Muy bien, vamos al modo de respuesta, móvil. De acuerdo, entonces vamos a editar esta sección aquí mismo, editando sección avanzada. Y sólo vamos a añadir algo de relleno. Supongo que el patrón de los 25 píxeles superiores debería ser razonable. No desde arriba, sino que en realidad son de lo más alto. Sí, desde arriba. Lo siento. Adelante. Página de Bates. La página minimiza desplazarse hacia abajo. Y eso es ahora la cola de comida se ve mucho, mucho mejor. De acuerdo, así que únete a mí en el siguiente video donde ahora echaremos un vistazo a hacer que la página de inicio responda. Y en particular, el banner de la página de inicio. 25. Página de inicio responsivo: Muy bien, así que echemos un vistazo a hacer que la página principal o responda. Y para la mayor parte, en realidad no es tan malo. Esto es para la vista de la tableta. Obviamente podemos hacer el titular un poco más pequeño. Hacer el plátano también un poco más corto en altura. Aquí mismo. Por supuesto, podemos añadir algún relleno a la pelota fuera a sección de viaje así como enseñable para que mejor proceda sección también. Pero creo que eso es todo lo que tenemos que hacer porque el resto es en realidad bastante bueno. La sección única de diseño de canales se ve bien. La galería está bien. Visitas, nuestra sección de blog está bien. No empaqueta reseñas, todo bien. No obstante, para la vista móvil, que es lo que hemos llegado aquí, obviamente, vamos a tener que hacer el texto mucho, mucho, mucho más pequeño como se puede ver. También agrega relleno aquí también para la sección de viajes. Y tenemos que hacer algo sobre el hecho que sí tenemos las dos imágenes para la segunda sección alineando uno al lado del otro idealmente debería ser, me encantará viajar. Entonces esta imagen y luego nuestros hijos, los mejores lugares, y luego la imagen de esta montaña. Entonces vamos a tener que hacer algo al respecto también. Aparte de eso, el resto de la página se ve bastante bien a considerar. La galería es ahora una sola fila, lo cual está bien. El apartado de blog también es una sola fila también. Quiero unas 22 filas, lo siento. Entonces no empaqueta reseñas todo ahora y la propia columna separada y luego también produce como puedes ver, que en. Todos. Correcto, así que vamos a seguir adelante y empezar a hacer los cambios. Entonces editemos con Elementor. Vamos a manejar el banner primero porque ese es el que es el principal Ese es el tema principal. Muy bien. Tabletas responsivas. ¿ Qué tenemos aquí? Vamos a seguir adelante ahora y editar el texto. Y el texto era de unos 120 píxeles. Como se puede ver. Vamos a tener dos grandes romper esto abajo, sólo un poco mucho más pequeño. Entonces digamos 88 píxeles de ancho. Pero no olvides que nos fijamos una altura para la sección. Pasemos a esta sección ahora mismo. Tenemos la altura mínima aquí. Vamos a reducir esto tanto como podamos. No te preocupes por el texto que se superpone al encabezado por ahora. Pero intentemos darle una altura razonable para la mesa. Y creo que 519, mi bebé, demasiado pequeño, digamos setecientos. Setecientos parece bastante bien. Entonces a partir de aquí, no olvides que también le damos márgenes negativos. Ahora que hemos reducido el tamaño de cien, diez cientos a 700 mujeres también acuden también a Advanced invite aquí. No se deje engañar por el hecho de que no se ve nada dentro de las casillas de margen. En realidad es heredar los márgenes de la vista de escritorio. Entonces aquí, sigamos adelante ahora y tratemos de reducir esto. Oh, lo siento, me olvidé de desvincular. Hagamos esto 10. Muy bien. Voy a seguir subiendo otra vez. Esto debería ser sobre, déjame solo darle 150 menos, vale, no puedo hacer eso. Déjame probar esto. Menos 150. ¿ De acuerdo? Creo que eso es un poco demasiado. Vamos a bajar. Vamos a bajar. De acuerdo, por lo que debería ser alrededor de 123 altavoz de ocio uno veinticinco, veinticinco píxeles. Ahora para el texto en sí o el encabezado, podríamos hacer esto un poco más pequeño otra vez. Y eso es todo. ¿ Qué opinas? Creo que esto está bien. 80 pixeles para el encabezado. Reduce la altura de esta sección a 700 píxeles, reduce el margen negativo también. Y creo que esto está bien, aunque ten cuidado, ¿ves ahora mismo que si ampliamos la tabla al tamaño máximo de pantalla, puedes ver que ahora tenemos el espacio en blanco apareciendo. Entonces eso debería decirnos ahora mismo que todo bien, espera un segundo. Tenemos que aumentar las imaginas negativas, en realidad, eso es otra cosa que deberías ser un acomodado. Siempre que estés aplicando márgenes negativos y modo de respuesta, asegúrate de que estás aplicando márgenes negativos al mayor tamaño de pantalla posible. Esta es la mayor concisa posible para la vista inclinada en 1024 por 878, vamos a aumentar, o más bien en este caso reducir el margen negativo. Porque cuando eres negativo estamos reduciendo eso. Es todo 158. Justo sobre lo hace Es, así que ahora, si bajamos esto al tamaño más pequeño para tablet, aún no vamos a ver ningún espacio en blanco. Y eso es todo. Ok, creo que esto está bien para la tableta. Ahora hagamos algunos cambios en la primera o la segunda sección. Y esto da ahora mismo, ¿qué tenemos que hacer? Para las tabletas? Podemos añadir algún relleno. Muy bien, vamos a entrar aquí y es sección. Vayamos a Avanzado. Y justo aquí, vamos a añadir un poco de relleno. Podemos ir a los 25 pixeles habituales y luego un efecto pixeles para la parte inferior también. Vamos a enfriar aquí abajo. Haremos exactamente lo mismo aquí también. Te voy a mostrar algo realmente genial. 25 píxeles desde la parte superior y luego 25 píxeles de la parte inferior también. Yo, ahora, si miras esto, te darás cuenta de que en realidad no se ve tan genial. Quiero decir, tienes una imagen aquí mismo bola, los textos, la columna de textos es un poco demasiado grande. Es un poco demasiado alto. Impresionante va con la segunda sección también. Entonces, ¿qué podemos hacer exactamente? Lo más simple que podríamos hacer sería simplemente hacer que cada columna vaya un 100% de ancho. Entonces en lugar de tener dos columnas tendrá que venir lado a lado. Tendremos dos columnas una encima de la otra. Entonces como ejemplo, aquí mismo, si le di esta primera columna aquí, sólo vamos a darle a este cien , cien. Y luego vamos a dar esta columna y también 100. Y ahí está. En este momento, aunque nos expandamos al tamaño más grande posible en una tableta, creo que se ve bien. Esto se ve bien en una punta, pero solo asegúrate de que las imágenes sean lo suficientemente grandes. Un cambio solo tendría que hacer aquí sería agregar algún relleno a este botón Saber más. Voy a hacer click ahí, ir al patrón avanzado y los budistas suman en la parte inferior. Agregaremos un poco de relleno aquí. Permítanme decir que 25 píxeles podrían ser un poco demasiado. En este caso, tal vez 15 pixeles. 15 píxeles está bien. Y ahí está. De acuerdo, hagamos exactamente el mismo síntoma del tema aquí también. Voy a hacer click en esta columna justo aquí. El goto, el ancho de columna. Voy a darle un 100. Y luego la segunda columna aquí también, 100. Vale, y luego echa un vistazo a esto. Idealmente queremos tener esta columna justo aquí encima de esta columna. ¿ Cómo hacemos eso? Bueno, lo vamos a hacer es simplemente ir a esta sección, sosteniendo estas dos columnas, ir a sección, ir por aquí a Avanzado. Cualquier aquí mismo en el sensible. Vas a ver esta opción para revertir las columnas. Vamos a hacer eso en la tableta. Vamos a hacer eso y móvil también. Ahora se puede ver que el niño, el mejor versus columna está ahora en lo alto de la montaña. Y así es exactamente cómo hacer eso. Sólo voy a seguir adelante y añadir un poco de relleno al botón del propietario aquí. Acolgado en la parte inferior, 2515 pixeles. Creo que fue un M&A está bien, así que volvamos arriba. Desplázate hacia abajo. K. Tenemos un montón de espacios. Todo bien. Ok, luce bien, luce bien. Ahora vamos a tratar de reducir el tamaño al más pequeño y ver si hay algo que tenemos que hacer aquí. Se ve bien. Se ve perfectamente bien. Y ahí está. Ok. Eso es todo para la vista de la tableta. ¿ Qué pasa con la vista móvil? Cambiemos al móvil. Muy bien, así que obviamente el plátano de aquí dentro, tendremos que arreglar ese. Bueno, sólo estoy rápidamente desplazarse hacia abajo aquí y ver el resto de la página. El resto de la página se ve realmente bastante bien. Sí, esto se ve bien. Ahora todo está en una sola columna en que hemos usado en una columna, y luego la página Contacto. Entonces todo lo que tenemos que hacer ahora mismo seríamos para manejar el estandarte. Entonces hagamos esto. Voy a desplazarse hasta aquí. Pasemos a la sección. Muy bien, lo primero que vamos a hacer ahora mismo es por las alturas. Es una altura mínima, 700 pixeles. Esto es por supuesto heredado de la vista de la tableta. Veamos si en realidad podemos aumentar un poco el tamaño. En realidad. Creo que 879, Tratemos de conseguir algo un poco, incluso como 870 pixeles tal vez. Tratemos de aumentar un poco el tamaño al tamaño más grande para la vista móvil. Ahora notarías que hay un poquito demasiado de un margen negativo porque se puede ver la línea azul y se puede ver que el logo se muestra arriba. Entonces lo que vamos a tener que hacer este momento es ir a Avanzado. Y luego para los márgenes negativos, intentemos, en realidad, no lo necesitamos en ningún margen negativo. En realidad iba a hacer que sea 0. Sí, sólo hagámoslo 0 ya que tenemos un fondo de apagón de todos modos. Entonces, ¿qué hace McDonald's 0? Esto es para móvil. Muy bien, entonces desde aquí, vamos a reducir las alturas. Vamos a reducir la altura de la página ahora del banner más bien algo razonable. Veamos. Creo que 535. ¿Qué pasa con el 530? Creo que esto está bien. cerro de cinco tercios se ve bien. Desplázate hacia abajo. Ok. Sí. Creo que estarías bien. Eso está haciendo son muy pequeños. Y ver. De acuerdo, entonces los textos pueden llegar a ser, es un poco demasiado grande en realidad. Entonces hagamos esto. Voy a volver a editar la epigrafía de encabezamiento. Vamos a hacer es que vamos a tratar de hacer esto lo más pequeño que podamos. Y ahora si ampliamos la más grande para la vista móvil, lo que tienes aquí es, vale, así que esto nos lleva a una nueva discusión. El silicio está aquí mismo en el tamaño más grande para el móvil, el Texas, sería demasiado pequeño. Si tratamos de aumentar el tamaño aquí, se ve bien en el tamaño de pantalla más alto posible para el móvil. El tema que conozco es que si reducimos el tamaño de la pantalla por lo el tamaño más pequeño posible para móvil, ahora que el texto es un poco demasiado grande, lo que puedes hacer en este tipo de escenarios es cambiar el estilo unidad de tamaño desde píxeles hasta el puerto de vista nominal revisar el VW u opción aquí, el VW es el ancho de la ventanilla. Lo que intentaremos hacer es intentar ajustar el tamaño del texto en función del ancho del tamaño de la pantalla. Así que echa un vistazo a esto. Voy a ir a cambiar ahora a VW. Y tratemos de ir con una talla de diez. Por lo más alto. Este es el tamaño más alto, tamaño de pantalla para móvil. Y luego si reducimos el tamaño al más pequeño, se puede ver que el texto en realidad también se está reduciendo. A medida que reducimos el tamaño de la pantalla. Ese es un consejo que te puedo dar en este momento, simplemente cambia a VW en lugar pixeles o K. Así que tal vez, tal vez una pequeña cosa que podríamos hacer. Una cosa final que podríamos volver a hacer será reducir la altura un poco más. Digamos 450 píxeles. Ese debería ser el último cambio. Tratemos de hacer que éste sea más pequeño. Y ahí vas. Ok, creo que esto es, esto está bien. Esto está bien en este punto. Muy bien. Ahí vas. Vamos a desplazar hacia abajo, ver qué más podemos hacer. Eso es más o menos. Creo que estamos bien. Permítanme simplemente hacer este realmente pequeño. Evidencia, una columna. Y ahí está, vale, Una última cosa, lo último que podríamos hacer es quizás reducir el tamaño del botón aquí solo un poquito. Así que vamos a seguir adelante y editar el fondo justo aquí vamos a ir al estilo. En realidad, va a ir al estilo. Entonces para la tipografía aquí mismo, vamos rápido en su mezcla de tamaño. Por supuesto, esto está configurado para móvil, y luego simplemente vamos a seguir adelante y tal vez hacer éste. Veamos. Fallas y píxeles, tal vez 14 píxeles, o ¿qué más podemos cambiar? Por supuesto podemos cambiar también el radio fronterizo. Bajemos este a, digamos cinco píxeles. Y ahí está. Vale, ahora aquí podríamos tratar de hacer el tamaño demasiado pequeño. En realidad no han probado esto. No estoy seguro de si esto afectaría la vista de la tableta. Se va a afectar la vista de la tableta e incluso la vista de escritorio es siempre será pequeña. Esto depende de usted podría decidir simplemente hacer, hacer pequeño el botón. En todos los tres son tamaños de pantalla. O simplemente podrías ir con un medio. Creo que el medio va a estar bien para móvil. Muy bien. Eso es todo. Voy a seguir adelante ahora actualizaciones. Y ahí está. Hemos construido con éxito en un sensible nuestra página de inicio. Gracias por mirarte y por supuesto te veré en la próxima clase. 26. Construye la encabezada de la página de inicio con Elementor Pro: Muy bien, así que empecemos a trabajar con elementos aprobados al reconstruir nuestro encabezado. Y te mostraré cómo funcionan las plantillas con elementos son pro. El primero que voy a hacer es que voy a ir al backend y vamos a seguir adelante y desactivar el constructor elemental de encabezado y pie de página. Ya no necesitamos eso. Entonces voy a desactivar y vamos a echar un vistazo a la cabecera inexistente que ya no tenemos y por supuesto, no pie de página. Ahora todavía se puede ver las desventuras de una pala y luego los textos corporativos aquí, este es el tema hola mostrando estos alimentos son para nosotros. Muy bien, volvamos aquí. Y una vez que hayas instalado y activado Elementor Pro, verás aquí mismo donde tienes una plantilla en el elemental LM, verás al constructor de temas. Entonces adelante, pincha aquí. Y en este momento se pueden ver los diferentes tipos de plantillas que podemos construir. Vamos a construir el encabezado. Por lo que voy a hacer click en plus para agregar el encabezado. Lo bueno de Elementor Pro es que tendrás acceso a una muy amplia variedad de plantillas que puedes usar. Puedes verlos aquí mismo. Diferentes estilos para el encabezado. Puedes ver algunos, ya sabes, tendrás el logo a la izquierda, los iconos de las redes sociales a la derecha, el menú principal a continuación. Por lo que puedes simplemente insertar rápidamente cualquiera de estas plantillas que coincidan de cerca con el tipo de diseño que quieras. Pero voy a seguir adelante y simplemente construirnos desde cero porque quiero mostrarte cómo funciona esto con el elemental por elementos. Así que voy a cerrar esto. Simplemente vamos a reconstruir igual que antes. Voy a entrar aquí ahora mismo, crear nuestras dos columnas. Sección. Uno habrá alrededor de 30%, el otro alrededor del 70%. Y ahora si voy por aquí al backend elemental, y ahora mismo se puede ver tenemos el logo del sitio aquí mismo. Así que voy a arrastrar esa y dejarla caer dentro. Otra cosa es que podrías notar un cambio con el elemento elemental pro logo. Ese es el hecho de que en realidad tienes acceso a las alturas. El logotipo en el estilo con el elemento logo proporcionado por el complemento constructor de encabezado y pie de página elemental. No tienes estas opciones, por lo que en realidad puedes controlar la altura del logotipo desde aquí. Pero aún no vamos a tocar eso. Voy a ir al back-end otra vez, elegir los elementos del Menú Nav aquí mismo, suéltala aquí dentro. Y por supuesto, Menú Principal elegirá. Alinémonos con los grandes puntos correctos. Vamos a poner este a móvil. Recuerda, pasemos a dar estilo a nuestra tipografía. Haremos esta en mayúscula. Volvamos a la propia sesión principal sosteniendo ambas columnas. Hagámoslo ancho completo. Para el logo, solo estoy adelante y agrego un fondo negro. Por lo que al menos temporalmente podemos ver el logotipo. De acuerdo, tanto demasiado grande. Volvamos aquí. Para el max-width, solo vamos a seguir adelante y elegir 75%, igual que lo hicimos anteriormente. Saber, cortada para usar la altura en este caso, un cambio más. Vamos a alinear los elementos del menú verticales, alinearlos al medio. Y ahí vas. Y por supuesto, el color también. Me olvidé de eso. Vamos a cambiar el color. Garrapatas ClO2 primaria. Y eso es eso. Ahora echa un vistazo a esto. Aquí abajo tienes publicar. Cuando golpeas Publicar, aquí es donde los elementos están pool y te diré, hey, ¿dónde te gustaría mostrar esta plantilla en particular? Vamos a sumar la condición, no el antiácido porque esto va a ser para la página de inicio. Voy a entrar aquí ahora mismo y elegir singular. Y luego para los singlets dirán, está bien, todas las páginas individuales, no, querían dividir específicamente en la primera página. Entonces voy a elegir esa. Y eso es que voy a seguir adelante y simplemente guardaré y cerraré. Y eso es todo. Vamos a seguir adelante ahora y refrescarnos. Y te voy a mostrar algo muy, muy interesante. Muy bien, déjame hacer un refrescamiento duro. Entonces aquí hay una línea más delgada. Se puede ver que sí tenemos los elementos del menú aquí mismo apareciendo. Oh, por cierto, el efecto de desplazamiento que puede ver, el guión aparente en el elemento del menú de edad que proporciona Elemental pool, menu, menu element por defecto. puedas cambiar eso en el efecto de hover si quieres aburrir al manager aquí en este momento es que ya no vemos el logo. Podemos ver los elementos del menú, pero no vemos el logo. ¿ Qué está pasando aquí? Aquí es donde me gustaría presentarles el concepto del índice Z. Ahora volvamos aquí. Muy en primer lugar, movemos el color de fondo para el encabezado. Ya no necesitábamos. Pero échale un vistazo a esto. Voy a ir a avanzado. Aquí tienes esto. Opción pero muy, muy importante, muy potente llamado el z-index. Voy a darle a éste un valor de dos actualizaciones. Volvamos aquí. Hagamos un refrescamiento muy duro. Y así así. Ahora puedes ver el logo apareciendo. Junta Directiva. Aguanta un segundo. ¿ Qué exactamente acaba de pasar? Vea este valor del índice Z aquí mismo. Siempre que tengas un elemento, una sección superpuesta a otra sección, es posible que quieras poder decirle a Elemental cuál de esos elementos quieres mostrar primero básicamente, que no lo hará. ¿ Quieres traer delante del otro? En este caso, en este momento sí tenemos la imagen binaria superpuesta a nuestro encabezado. Queremos que el encabezado esté influenciado para que podamos ver el logo y el menú principal. Como tal, tendrás que dar un número de índice z más alto al elemento que quieres aparecer al frente. Desde que le hemos dado al encabezado el valor del índice Z de dos. Permítanme realmente ir a la sección sosteniendo nuestro plátano. Así que déjame editar con elemental. Vamos a la sección de navegantes aquí mismo, avanzado. Se puede ver aquí mismo que no tenemos ningún valor para el índice Z para la sección que sostiene el banner. Pero si entré aquí ahora mismo y le doy un valor de tres. Ahora ya puedes ver ya no vemos el logo, ya no vemos el menú principal tampoco. Eso se debe a que el valor del índice xin de esta sección que sostiene el plátano es ahora mayor que dos. Pero si le doy uno ahora se puede ver tenemos el menú principal y el logo. Así es exactamente como funciona el índice Z. Ahora, una pregunta que podrías tener una, una muy buena pregunta es, Alex, aguanta un segundo. Antes le dimos el valor de este índice de dos al encabezado. ¿ Cómo podemos resolver aún el menú principal? Pero no vimos el logo. Seré 100% honesto contigo. No estoy exactamente seguro de por qué sucedió eso. Estoy adivinando que tal vez haya algún código dentro de los elementos que siempre da prioridad al menú principal para mostrar siempre. Nuevamente, podría ser algo muy, muy simple que simplemente me estoy perdiendo. No estoy del todo seguro en el borde. Discúlpate por eso, pero me gustaría ser honesto contigo. Pero solo tómalo por lo que es. Siempre que quieras introducir tipo de situación que tienes un elemento superpuesto al otro y quieres que los elementos autos detrás del show al frente simplemente le den un valor de índice Z más alto. Una cosa que puede haber notado es el repentino espacio en blanco que no aparece aquí mismo en la parte superior. Y esto sucede porque elemental por defecto en muchas instancias, agregaremos un patrón de diez píxeles alrededor de los elementos. Así que una forma de eludir este tipo de tema, es un simplemente editar la sección que tiene el espacio en blanco en este caso ahora mismo es mi encabezado. Entonces déjame seguir adelante y editar el encabezado elemental. Voy a ir a esta sección en sí. Así edita sección y luego invita aquí donde tengas la brecha de columnas. Voy a decir que no hay brecha, ni brecha en absoluto. Actualicemos básicamente diciendo que no hay brecha. Estamos diciendo, Hey, no queremos ningún patrón en ninguna parte. Ahora, esto se leerá fuera del espacio en blanco. Pero ahora tenga en cuenta que porque hemos dicho No, no hay vacíos en absoluto. Ahora la columna que sostiene un logotipo ya no tiene ningún patrón entre el logotipo y la parte superior de nuestra pantalla. Por lo que muy sencillamente sólo tiene que ir a la columna sosteniendo el logotipo. Ir al patrón avanzado aquí mismo, solo le damos digamos, diez píxeles de relleno en la parte superior. Actualizaciones que resolverán el tema o incidencias. Por lo que estos son algunos de los muy poco molestos problemas que podrías encontrar al usar elemental y cómo eludirlos. Pero casi hecho. Vamos a seguir adelante y crear el encabezado móvil para nuestro encabezado para la portada más bien. Y es exactamente lo mismo que hicimos anteriormente. Vamos a entrar aquí ahora mismo, duplicar toda la sección. Y salgamos, ven aquí abajo a la sección de edición de cabecera móvil. Vamos a ir a estilo clásico color de negro. Y entonces, ¿qué necesitamos? ¿ Qué más tenemos que hacer? Tenemos que cambiar al modo de respuesta. Ir al móvil. Y ahora mismo, edita columna, vamos a decir 50%. Haz lo mismo por la columna sosteniendo el menú principal. Y luego decir 50%. Podemos editar el menú aquí mismo, alineado a la derecha. Tal vez hacerlo un poco más grande. Así que vamos a ir al estilo. Ven aquí al botón de alternar. El tamaño, lo hacen un poco grande. Para el logotipo también. Ir al estilo, anchura máxima, 100%. Sí, también tenemos que hacer el show hide u opciones, tan avanzado. Vamos a la receptivo. Para esta sección y esta sección sosteniendo el logo y menú de demanda. Vamos a entrar aquí a Advanced y luego respondemos. Voy a decir esconderse en cubierta, Detener, Ocultar en tableta, pero luego mostrar en móvil. Vayamos ahora al antiguo encabezado original, edita esta sección. Ir a Avanzado, vaya a responsive. Simplemente esconderte en el móvil, y eso es todo. Así que sigamos adelante y actualicemos. Ojalá no olvidé nada que haya vuelto aquí. Refresca la página. Veamos lo que tenemos. De acuerdo, por delante tan original o me atrevo. Y esta es vista oblicua que se ve bien. Y entonces ahora esta va a ser la vista móvil. Y David es así exactamente cómo hacer exactamente lo mismo en el producto Elementor que hicimos con el encabezado y pie de página de Elementor son plugin. Una cosa final antes de cerrar este video, vamos al back-end. Ahora en las plantillas. Lo siento, bajo el constructor de temas lugar de nuestras plantillas en un constructor de temas, aquí es donde verás el nuevo encabezado que has creado. Puede hacer clic en el interior para editar. Una vez más. Entonces si quieres cambiar el nombre, es muy, muy simple. Vienes aquí al botón Ajustes y luego aquí mismo, podemos llamar a éste el encabezado de casa. Podemos llamarlo hogar, hogar, la cabecera domiciliaria básicamente. Y luego podemos darle al encabezado de orden el nombre de global. Si quieres cambiar las condiciones para este plano, la cabeza o tal vez quieras usar el mismo encabezado en una página diferente. Aquí abajo, tienes las opciones de guardar, haces clic ahí. Ahora aquí tendrás acceso a la pantalla. Nuestra opción de condiciones. Aquí es donde ahora puedes entrar, ahora tal vez cambiar a una página diferente y así sucesivamente. Y eso es básicamente para crear el encabezado de la página de inicio, tanto en las versiones de escritorio como en móviles usando Elementor Pro. Gracias por mirar. Te veré en la próxima clase. 27. Construye la página de contacto con Elementor Pro: Illumina te muestra cómo reconstruir la página de contacto usando Elementor Pro. Y específicamente vamos a estar trabajando con el elemento elemental pro forma. Voy a ir al backend. Y en primer lugar, voy a desactivar el plug-in de formularios WP que ya no necesitábamos. Entonces voy a desactivar. Y volvamos a la página de contacto. Y obviamente cuando van a decir cualquier formulario de contacto más. Pero voy a ir a Editar con Elementor ahora mismo. Ya que por supuesto estamos utilizando elementos son pro, sí tenemos el elemento de forma, que es absolutamente fantástico. Lo encontrarás en el pro, ves aquí mismo formulario. Voy a dejarme hacer clic aquí adentro y en realidad eliminar este bloque porque ya no teníamos las formas lípidas. Pero no tome ninguna forma y luego simplemente déjelo caer en el título Contáctenos. Al igual que con el plugin de formularios WP por defecto, tendrás un formulario de contacto muy, muy sencillo que tendrá tres campos de nombre, correo electrónico, mensaje, aquí mismo. Estos son los campos que puedes agregar. Otro campo como tú da click en Agregar Artículo aquí donde tengas tipo, tendrás diferentes tipos de combustibles. Se puede añadir la hora del día. Incluso puede agregar cargas de archivos. Entonces si quieres que tus suscriptores o clientes potenciales adjunten archivos para enviarte, sí tienes ese campo. También puedes integrar elemental con la captura de Google. Y luego puedes usar la versión de recaptura uno y la versión tres aquí para seguridad. Y luego también tienes como el honeypot y así sucesivamente, no agregando ningún campo adicional. Así que voy a dejar estos tres. No obstante, esto es por supuesto muy subjetivo, pero prefiero no tener las etiquetas. Prefiero que acaba de pasar a colocar titulares en lugar de cada campo indicando qué tipo de campo es ese. Así que voy a seguir adelante y esconder la etiqueta. Por lo que sólo tiene mensaje de correo electrónico de nombre. Ahora para editar los propios combustibles reales, se hace clic dentro de cada nombre de muestra específico. Voy a hacer click en Nombre e invitar aquí puedo cambiar la etiqueta misma, puedo cambiar el placeholder. Y por supuesto que vamos a hacer que sea necesario. Y luego bajo avanzado, tendrás cosas como el ID así como el código corto que haremos uso muy, muy pronto. Lo mismo va con el correo electrónico aquí. Se requiere y luego mensaje por supuesto todos hacen el mensaje si así lo requiere. Puedes hacer que este campo sea más pequeño o más grande dependiendo de tus gustos, y eso es todo. ¿ De acuerdo? Aquí tienes el tamaño de entrada para el impute real para cada campo. Puedes hacerlo pequeño, mediano, grande. Depende enteramente de ti. Tienes botones. ¿ Quieres hacer los botones de tamaño mediano, gran tamaño, pero eso es sólo el botón de envío en sí. Puedes cambiar el texto aquí mismo para el propio botón de enviar, y así sucesivamente. Ahora, aquí es donde las cosas se ponen muy, muy picantes. Acciones después de enviar, ¿qué sucede una vez que el usuario ha hecho clic en Enviar? ¿ Justo aquí? Por defecto, ya se han habilitado las acciones. Recoge presentaciones, que te mostraré en tan solo un segundo. Y luego por correo electrónico, debido a que estos dos están activos por defecto, has hecho clic aquí mismo en los envíos y luego tienes correo electrónico. Ahora recoge las presentaciones que realmente verías en el backend. Déjame simplemente mostrarte rápidamente. Verás en el backend, una vez que las personas comiencen a enviar el formulario de contacto aquí mismo donde tienes elemental en presentaciones de UCI aquí podrías tener presentaciones. Y es aquí donde se empieza a ver el nombre de la persona y así sucesivamente, hecho, realizará un experimento muy, muy, muy pronto. Pero eso es todo por las presentaciones. Ahora, correo electrónico aquí mismo. Desea recibir un correo electrónico de que alguien ha enviado un formulario de contacto en su página web. Aquí mismo, puede elegir la dirección de correo electrónico para recibir identificación. Por supuesto, voy a poner mi propia luz de correo electrónico admin ahí. Y luego por supuesto por defecto tienes que someter nuevo mensaje desde y luego el nombre de tu sitio web. Puedes personalizar esto por supuesto. Entonces el mensaje contendrá todos los campos. No obstante, aquí tienes el desde el correo electrónico, del nombre que deseas utilizar o elegir los datos proporcionados por el usuario. Básicamente el de correo electrónico debe ser el correo electrónico, todo el usuario. Lo que quieres hacer aquí es esto, ¿de acuerdo? Irías a los campos del formulario, ir al correo electrónico, ir a Avanzado, y luego invitar aquí, agarrar el código corto. Así que copia el código corto, vuelve aquí abajo para enviar un correo electrónico. Y cualquiera aquí desde el correo electrónico. No fue simplemente pegar el ID de correo electrónico para que en realidad se pueda ver el correo electrónico de la persona y luego por nombre también, hacer exactamente lo mismo, ir al campo Nombre Avanzado, y luego simplemente agarrar el atajo para el campo de nombre. Volver al correo electrónico y luego proporcionar aquí desde el nombre. Simplemente pega eso. Y luego responden para estar configurados al correo electrónico, por supuesto, porque te gustaría responder a la dirección de correo electrónico de la persona. Y eso es todo. Puedes agregar tu CC, estás ciego, estás ciego, copia, etc. También puedes agregar los metadatos aquí, como la página que eres una persona real visitada, la fecha, hora, etc. Pecado como HTML o avión. Esto es muy, muy, muy subjetivo. Dependerá de su proveedor de servicios de correo electrónico. Si también consiguió pasos frase lambda squiggly, muéstrale lo que es esto. Si vuelves a tus campos de formulario, tal vez quieras crear como tal vez vas a formar es en realidad muy, muy largo por alguna razón y quieres descomponerlo. Cuando estés agregando tu artículo en el tipo, tendrás paso. Una vez que tengas paso ahora tienes el siguiente. Entonces después del paso podrás entonces comenzar a agregar más campos de nuevo. Entonces lo que sucede es una vez que llenan los falsos combustibles en la primera sección y dan clic en Siguiente. Se los llevará a la siguiente sección para el formulario, eso es básicamente lo que los pasos, como se puede ver, este es el paso uno aquí mismo. Y luego se puede ver el paso dos ahí a la derecha. Eso es para lo que se usa. Esos son tus pasos son Ajustes. Y luego también tienes las opciones adicionales como Hey, ¿quieres personalizar mensajes como, bueno, el sentido termo con éxito, te responderás en 24 horas, cosas así. Tienes esa opción aquí. Pero me dejarán olvidar volver a las acciones después de enviar, tienes muchas, Aparte de envíos clicados, e-mail, puedes tener e-mail para que puedas redirigirlas a un página separada. Tienes un webhook. Y por supuesto, si estás utilizando software de gestión de correo electrónico como nuestro Mailchimp, campaña activa, puedes conectarlos aquí también. Puedes conectarlos a Slack Discord, abrir proporcionar un mensaje emergente también. Por lo que tienes muchas opciones para configurar. Turno alterno. ¿Qué sucede una vez que el usuario ha enviado el formulario? Eso es básicamente todo. Sigamos adelante y cerremos esa. Y eso es, voy a seguir adelante ahora y simplemente actualizaciones. Y por supuesto, echemos un vistazo a la nueva página aquí mismo. Vaya, mi internet se está comportando mal. Una vez más. Mis disculpas. Ok. Así es Ahora puedes ver el nuevo Formulario de Contacto construido con elementos de Pro Arte limón. Te mostraré un ejemplo de las presentaciones. Voy a pausar el video y simplemente enviar un mensaje y luego verá los resultados aquí. Bienvenido de nuevo. Y como puedes ver en este momento, en realidad he enviado a formularios de contacto, rellenados para contactar de uno a siete navegadores. Uno de John James y luego uno de Bob Billy en yahoo.com. Ahora, debería haber señalado esto con anterioridad. Para el formulario de contacto, puedes cambiar el nombre aquí mismo donde tienes el nombre del formulario. Para que veas que sólo voy a tener que cambiar el mío a formulario de contacto. Y me di cuenta de esto cuando envío el primer formulario de John gimnasios. Se puede ver derechizado el formulario, la nueva forma de Nemo. Por eso nueva forma porque no cambiamos el nombre. Por lo que la segunda vez que cambié el nombre por formulario de contacto, envié un nuevo formulario desde la movilidad y ahí es donde ahora se puede decir que la caída ahora dice nuestro formulario de contacto. Entonces eso es básicamente todo. Tienes los identificadores, tienes la página en la que presentó el formal. Y por supuesto se puede ver el mensaje en sí mismo. Por lo que hace clic en ver aquí mismo. Se puede ver el nombre completo, el correo electrónico, y luego el mensaje real del usuario e invitado. Tienes la información adicional de metadatos cuando se envió el mensaje, qué navegador se usó, etc. Así es básicamente como el formulario de contacto con Elementor Pro Walks. Gracias por mirar. Te veré en la próxima clase. 28. Cómo construir la única plantilla de postura: Ahora déjame mostrarte una de las cosas más geniales que puedes hacer con elementos de pro y eso es construir una plantilla para tus posts individuales. Antes de hacer eso, déjame simplemente mostrarte muy rápidamente cómo puedes reconstruir la página del blog. Recuerda que utilizamos el elemento posts de los complementos esenciales para esta página. Ambos elementos son pro por supuesto, sí tienes los elementos específicamente para mostrar tus posts. Sólo te voy a mostrar muy rápido cómo funciona. Lo encontrarás bajo Pro, esto es todo aquí, posts. Lo dejas caer ahí. Y por supuesto se puede elegir el número de piel de publicaciones, mostrar imagen, altura, imagen. Tienes todas esas opciones ahí dentro. Tienes la consulta que quieres sacar de las publicaciones que se deben en ella, pool de una selección manual o páginas. ¿ Te gustaría incluir por término? De esta manera ahora puedes agregar cosas como categorías, etiquetas, etcétera. Tienes tus opciones de paginación. Podrías simplemente probar y opciones y todas esas cosas geniales, pero eso no es para lo que estamos aquí. Déjame mostrarte cómo construir la plantilla primeros postes angulares. Ahora déjame escoger uno publicado aquí mismo moda en Estambul. Esto es lo que tenemos por defecto. Y se puede ver que no se ve bien en absoluto. Eso es porque el tema hola es el que se ha utilizado para mostrar este post. Y es muy, muy, muy feo ahora, muy específicamente he hecho el área de contenido para este post muy, mucho tiempo como se puede ver. Pero hay una razón para eso. Te voy a mostrar exactamente por qué elegí hacer eso. Permítanme en primer lugar seguir adelante y construir la plantilla para nuestros posts. Así que vamos a elemental, lo siento, plantillas. Y luego aquí mismo, constructor de temas. Y vamos a sumar el constructor para solo post aquí mismo, haciendo click ahí. No se encontraron plantillas quieren crear una. Sí, así que voy a hacer click en añadir nuevo como son por supuesto con elementos son pobres. Tendrás acceso a una amplia variedad de plantillas. Puedes verlos aquí mismo. Los cuatro puestos individuales, tantos, pero voy a seguir adelante y cerrar esto. Construyamos nuestra plantilla. Ahora por defecto, ya que estamos construyendo la plantilla para un solo puesto, tendrás acceso a estos elementos bajo la categoría única. Estas son para tus posts, así que obviamente no mostraré el título de la publicación, así que voy a dejar eso ahí por el título del post. Ahora por defecto, elemental extraerá las últimas publicaciones para utilizarlas como muestra al ver el contenido de la plantilla. Si dejas cambiar la selección, baja aquí a ajustes. Justo aquí tendrás la frase anterior, pinchas ahí. Y luego aquí mismo, simplemente puedo escribir en moda. Y en cambio lo hará, porque este es el que quiero usar todos eligen la moda en Instanbul. Haga clic en Aplicar y previsualizar. Ahora elemental usará el contenido de este post para nuestra muestra. De acuerdo, déjame hacer algunos cambios. Los inhaladores hacen estos y H2 alineados al centro. Hagamos el texto un poco más grande. Tal vez 58 píxeles, 56 píxeles tan bien. Vamos a añadir algo de relleno. En la parte superior, 25 píxeles, dos píxeles en la parte inferior también. Muy bien, ¿Cuál es la siguiente imagen destacada? Arrastrémoslo ahí dentro. Haz de éste f2. Y por supuesto se puede ver la imagen destacada de la post-sesión y Estambul. ¿ Qué es lo siguiente? Usted sí tiene el post info. Se puede dejar caer eso ahí. Por defecto, mostrará al autor la fecha, hora comentarios. No quiero mostrar al autor. No quiero mostrar el nombre y también la hora, así que los movemos. Sí deja fecha y comentarios. Se pueden modificar estos dos, por supuesto, simplemente haga clic en los datos como ejemplo y decir por ejemplo el ícono, solo puedo seguir adelante y quitar el icono, llenar uno. Puedes agregar metadatos adicionales, para que hagas clic en Agregar elemento. Y luego aquí mismo, puedes hacer cosas como agregar los términos como la categoría y así sucesivamente, disfraz y así sucesivamente. Muy bien, voy a seguir adelante y cerrar eso. Por lo que sólo tenemos fecha y comentarios. Volvamos a nuestros elementos aquí mismo. La próxima vez que vamos a agregar será el post nuestro contenido. Por lo que vamos a saltar al contenido del post ahí abajo, justo debajo de la información. Permítanme sólo confirmar por qué esto parece estar en gris. Sólo estoy bien. Se está mostrando aquí tenemos el contenido del post muy, muy, muy largo o ancho. ¿Qué sigue? ¿ Qué nos gusta exhibir? Podemos mostrar el post navigation. Contamos con mensajes de navegación. Dejemos eso ahí dentro. Ahora tenemos el post anterior, el siguiente post, por supuesto que puedes darle estilo tanto como quieras. Y por último, podemos sumar nuestros comentarios post. Así publicar comentarios justo ahí en la parte inferior. Y eso es todo. Esta va a ser nuestra plantilla. Ahora, ¿por qué hice el área de contenido muy, muy larga. Quiero mostrarles cómo hacer uso de un nuevo elemento muy, muy cool llamado el rastreador de progreso. Es posible que hayas visto esto en algún blog determinado antes donde Tendrás un bar diciéndote cuánto del contenido se ha consumido o cuánto contenido aún tienes que leer antes de terminar el articulo. Ese es el rastreador de progreso aquí mismo. Entonces lo que voy a hacer es esto, vale, voy a dejarlo caer en la parte superior justo aquí, justo por encima del título. Déjame simplemente compartir cómo funciona en este momento se puede ver la idea de la barra de progreso en movimiento, nos estamos moviendo. Pero el problema es, es que una vez que la escuela pasó el bar, ya no lo vemos. ¿ Cuál es el punto de tener esto por si te desplazas hasta aquí y ni siquiera viste cuánto del contenido queda. Bueno, déjame mostrarte un truco muy, muy cool. Ir a Avanzado. Estamos editando el rastreador de progreso, por cierto, mercancías a efectos avanzados de movimiento go-to. Aquí mismo tenemos pegajoso. Di que sí, vamos a pegarla en la parte superior. Lo que esto significa en este momento es que una vez que nos desplazamos, verás que el arco siempre estará ahí. Y se puede ver ahora mismo hasta que lleguemos al fondo, ahí es cuando termina la barra. Entonces así es exactamente cómo hacer esto como un efecto muy, muy, muy cool. Se puede hacer eso por el fondo también. Lo cual no creo que la duda funcione porque en realidad tendrá que desplazarse hacia abajo en el aire de fondo. No, en realidad no funciona. Nunca lo había probado. Así que sólo ve con top. Ve con top. Y por supuesto, en el estilo, se puede cambiar el progreso llamar ley. Puedes agregar un borde, puedes tener un radio de borde oculto, y así sucesivamente. Para el propio verificador de progreso real, el progreso siempre será relativo al contenido POSTAR. Así que cambia esto a publicar contenido y no anti página post contenido. Tienes que revisar nuestros tipos, llamados u horizontales. Este es el estilo circular, que puede ver eso no me gusta personalmente, así que simplemente iré con horizontal. Puedes agregar porcentaje si quieres. Por lo que dirá veinticinco por ciento, treinta y tres por ciento, y así sucesivamente. Tienes todas esas opciones ahí para ti. Eso es todo. Voy a seguir adelante y ahora pegaré Publish. Y al igual que con una plantilla, tendrás que elegir dónde llevarías a mostrar estas plantillas en particular. Agreguemos ahora la condición por defecto dirá todo singular. Ten cuidado de que toda una hora se refiere a toda una sola página está incluida en tu portada. Entonces no todo es singular. Haga clic en la flecha desplegable aquí. Ahora verás publicaciones. Simplemente elige publicaciones. Eso es todo. Eso es todo. Eso es todo lo que necesitas. Voy a seguir adelante y ahora haga clic en guardar y cerrar. Y eso es todo. Así que vayamos primero a la primera página, solo para confirmar front-page como ir a los artículos. Y escojamos, digamos que la majestuosa ciudad de Glasgow tendrá que refrescar esta página. Y ahí está. Ok. Desplázate hacia abajo. Desplázate hacia abajo. Ahora obviamente la barra de desplazamiento se mueve muy, muy rápido porque el área de contenido aquí es muy, muy, muy corta. Como se puede ver, es sólo un párrafo o dos párrafos, básicamente. Quizá no sea el mejor ejemplo. Vamos con la moda en Estambul. Nuevamente, tendré que refrescar esta página para borrar la moda cache en Estambul. Y te van, esa es la plantilla para nuestros posts individuales. Tenemos la herramienta TI, tenemos la imagen destacada, tenemos la información sobre la pose de que se publicaron datos, número de comentarios, el área de contenido, el post navigation para el post anterior y el siguiente post. Y por supuesto la sección de comentarios. Entonces así es como construir una plantilla de publicación para tus publicaciones usando Elementor Pro. 29. Consejos de Elementor Pro: Muy bien, entonces estamos prácticamente al final del curso. Y antes de concluir, lambdas te dan algunos consejos y consejos más generales sobre cómo trabajar con la versión pagada de elemental. Ahora obviamente tienes acceso a tantos más pro elementos que no podemos cubrir. Pero hay una que realmente debería haber agregado en las plantillas de publicación única, y esos son los botones de compartir. Lo encontrarás justo debajo de la tabla de contenidos por una cuenta atrás extra y códigos de bloque, los botones de compartir. Lo que esto hace es que permite a tus usuarios o a tus suscriptores compartir básicamente tus artículos en redes sociales. Entonces cuando dejes eso ahí, puedes elegir las plataformas. A lo mejor quieres que puedan compartir en Facebook, en Twitter, o incluso por correo electrónico. Tendrás esa opción ahí dentro. Es muy, muy fácil de usar, asegúrate de comprobarlo. Ahora con Elementor Pro, también tienes acceso a cosas como guardar plantillas y guardar widgets o elementos como Global. Un ejemplo aquí es esto. ¿De acuerdo? Digamos por ejemplo, para toda esta sección, permítanme usar el botón Navigator aquí mismo. Para esta sección que contiene el plátano así como el titular. Si quisiera reutilizar esta sección en otro lugar, podría hacer clic derecho y luego simplemente guardar como plantilla. Lo guardo como plantilla. Puedo darle un nombre, digamos la bana global, sólo para reutilizar en otra página, puedo guardar la página. Y va a estar debajo de las plantillas además de los encabezados y pies de página que creamos antes. Pero ahora echa un vistazo a esto. De acuerdo, si quisiera reutilizar esta plantilla en otro lugar, déjame seguir adelante y ver esta página y abrir otra página. Así digamos por ejemplo, la página de contacto. Si quisiera reutilizar eso por no aquí, simplemente vaya a Editar con Elementor. Entonces haz uso del elemento plantilla, que encontrarás en pro en la parte inferior, creo que si no me equivoco, está aquí mismo. Verás plantilla aquí mismo. Simplemente arrastra trabajo esa plantilla ahí dentro. Y ahora te pedirá que elijas la plantilla que quieras usar, ya que llamamos nuestro banner global. Ahora ya puedes ver global. Ya lo he añadido y ahí vas. Por lo que ahora tienes la idea de cabecera o que la idea banal con el promontorio donde viajar significa aventura. Entonces así es como puedes reutilizar secciones una y otra vez a través de tu sitio web. Pero también podríamos guardar elementos individuales o incluso columnas como widgets globales. A modo de ejemplo, digamos que quería reutilizar, digamos este particular, nuestro llamado a la acción o idea por este trato y paquetes. Voy a hacer click por dentro. Y podría hacer clic derecho en el elemento de dosis y paquetes en sí y luego dividir aquí verá ahorrar como global. Haga clic en guardar como global. Y puedo llamar a éste el widget Llamado a la Acción. Así como ejemplo, puedo salvar eso. Otra cosa es si se le pide volver a ir a otra página, digamos la página de contacto una vez más. Y yo quería usar esos mismos elementos exactos. Todo lo que hay que hacer es ir a global aquí mismo. Y ahora se puede ver que las llamadas para realmente leerlo ya están disponibles. Simplemente puedo hacer clic en arrastrar y luego simplemente soltarlo de todos modos, quiero dejarlo caer en, así que solo pequeñas secciones de poca diferencia. Puedes decirlas como plantillas y las usamos, pero los elementos reales mismos, puedes usar esas. Puedes verlos como widgets globales. Y los usamos a través de tu sitio web tanto como quieras. Por lo que estas son otras características adicionales disponibles para ti con elementos de Probit, nuevamente, tienes acceso a tantos otros elementos muy interesantes, diapositivas, galería, incluso los elementos de inicio de sesión. Para que quieras personalizar tu página de inicio de sesión Con Elementor Pro. Usted tiene el elemento para ese titular animado aplica lista. 30. Elementor de conclusión del curso: Bueno, eso es todo. Tenemos hasta el final de este Courseware te estamos mostrando cómo construir un sitio web totalmente funcional utilizando tanto las versiones gratuitas como de pago de Elementor. Ha sido un placer. Espero que hayas disfrutado el curso si lo hiciste , por favor hazlo construir, dada una revisión de cinco estrellas, una reseña escrita, que la gente sepa cuánto disfrutaste el curso más todo. Entonces por si acaso no has comprado elemento de sonda, que son mucho para hacerlo. Por favor, utilice mi enlace de afiliado. Lo que eso significa es que voy a conseguir una pequeña comisión. Cuando usas mi enlace a por Elementor, es una gran manera de apoyarme y apoyar lo que estoy haciendo. Aquí. Por último, en la siguiente sección, contentaremos actualizaciones del curso, nuestros temas especiales, lecciones especiales. Entonces si te interesa aprender más sobre elementos o asegúrate de revisar. El siguiente apartado está abajo. Mi nombre es Alex, ha sido un placer. Espero verte en uno de mis otros cursos también. Creo que tanto si todo Preguntas o comentarios sobre cualquier cosa cubierta en este curso, por supuesto, siempre se sienten por llegar a mí. Llegar a mí. Más que feliz de responder a todas sus preguntas, sillas, y todo lo mejor. Nos vemos pronto.