Cómo usar Elementor: crea un sitio web de WordPress increíble, con ningún código

1. Introducción: Los sitios web son súper importantes. Los usamos para todo, ¿no? Los usamos para noticias, o para música, o para mostrar nuestras habilidades creativas en nuestras carteras Si quieres construir un sitio web mañana, bueno, ¿por dónde empiezas? ¿Qué programa usas? En esta clase, te voy a mostrar cómo construir un sitio web usando el Elementor Page Builder Es un programa fantástico que es súper fácil y te permite ser súper creativo. Hola, soy John Wolfgang Miller. He sido diseñador profesional desde hace 20 años, y he trabajado para algunos grandes clientes como Fox TV aquí en Australia. Ahora, si quieres usar Wordpress, puede llegar a ser bastante complejo. Sí, solo puedes comprar en un tema o algo así y usarlo. Pero entonces vas a terminar con un sitio web que se ve exactamente igual que el de todos los demás. Sin embargo, si usas elemental, llegas a ser súper creativo. Se llega a construir lo que quieras construir. Es un programa fantástico. Y en esta clase siempre te muestro cómo usar la versión gratuita del programa, solo puedas usarla para desarrollar todas tus habilidades. En esta clase, te guiaré a través de todo el proceso. Te mostraré cómo configurarlo y luego construiremos un sitio web completo. Comenzaremos con una impresionante sección de héroes y luego pasaremos a algunas partes de animación que realmente impresionarán a los visitantes de tu sitio web. Esta clase es perfecta para ti si eres principiante o incluso si tienes mucha experiencia, lo que aprenderás aquí mejorará masivamente todas tus habilidades de diseño de sitios web Tendrás un sitio web de aspecto hermoso al final de la misma. Y si buscas llevar tu carrera más allá en el diseño de sitios web, esto es lo que necesitas saber. Así que vamos a construir un sitio web. Empecemos. 2. Proyecto de clase: El proyecto principal aquí es crear un sitio web completo de una sola página. Cada lección le mostrará cómo configurar diferentes partes del sitio web en elemento, o todas usando diferentes widgets y diferentes herramientas. Las lecciones comenzarán con tu sección de héroe de apertura, luego harás una sección de información con un control deslizante de imagen. Después de esto, harás dos diferentes sobre secciones que ambas funcionan de formas animadas muy chulas. Después rematarás el sitio con un pie de página y un elementor de instalación de encabezado Y sigue cada lección y recrea lo que has aprendido Al final de cada una, puedes usar exactamente las mismas imágenes que tengo y crear exactamente el mismo sitio. O puedes usar tus propias imágenes y darle tu propio estilo pequeño. Si quieres usar exactamente las mismas imágenes, se guardan aquí en la sección de recursos. Descárgalo y agrégalo todo a tu mediateca. Al final de la clase, tendrás un sitio web completamente funcional. Habrás aprendido mucho más sobre elementor, así podrás llevar las habilidades de diseño de tu sitio web mucho más allá Para esta clase y todas mis clases, estaré platicando a través de muchas cosas diferentes. Hay mucho que cubrir en todas estas clases. Te recomiendo encarecidamente a medida que avanzas para jugar y hacer una pausa. Si digo algo grande en uno, ve a pausarlo y pruébalo tú mismo. Si necesitas hacerlo de nuevo, solo corre hacia atrás, 15 segundos rebobinar, 15 segundos rebobinar, y luego podrás volver a ver toda esa parte Eso te ayudará a entender lo que he dicho y probarlo. Si tienes algún problema con la calidad del video que estás viendo, ven aquí a los niveles de calidad y cambia la configuración aquí. Si está configurado en automático, posible que no lo vea tan nítido como necesite, así que cámbielo a 720 o 1080 píxeles. 3. Configuración de Elementor y de Wordpress: Aquí estamos en elementor.com. Este es el lugar al que normalmente vendrías para comenzar con Elementor, incluso con la versión gratuita Puede que ya tengas todo configurado. Es posible que ya tengas un servicio de hosting, y es posible que ya tengas instalado Elementor Si lo haces, puedes simplemente pasar a la siguiente lección. No obstante, te recomiendo quedarte unos minutos solo para asegurarte de que tienes todo configurado correctamente. Y para esta clase, solo estamos usando la versión gratuita de Elementor Desafortunadamente, al construir un sitio web, también necesitas configurar hosting. El hosting es básicamente la empresa que almacena tu sitio web para ti. Y elementales ofrecen este servicio ellos mismos, sin embargo, hay un costo mensual que implica configurarlo. Si pasas el cursor por aquí hasta donde dice hosting y haces clic en Hosting para WordPress, puedes obtener más información Este es el servicio que ofrecen, y como puedes ver, inicia en apenas 299 por mes. Entonces es muy barato, pero sigue siendo algo por lo que hay que pagar. Si haces clic en Planes C, como puedes ver, tienen diferentes paquetes para esto a diferentes precios en función del tamaño de tu sitio web. Pero no hay una versión gratuita, lamentablemente, disponible en Elemental. No obstante, hay otro servicio que sí ofrece hosting gratuito. Y para esta lección, te recomiendo usar esto solo para comenzar sin tener que entregar dinero alguno. Esto es WoZma. Este es el servicio de hosting gratuito que recomiendo. Es muy fácil de usar y puede permanecer gratis para siempre. Así que ven a este sitio web. El URL es Wosma dot IO, y luego sube aquí a la cima donde dice soluciones y elige hosting para WordPress Entonces, cuando veas esta página, da clic aquí, dice Desplegar gratis. Llegarás a esta página, y aquí es donde puedes calcular tu configuración de WordPress. Y voy a recorrer cada paso aquí, pero es muy fácil de entender de todos modos. En primer lugar, el nombre de la aplicación aquí en la parte superior. Ya te ha generado un nombre que es único. Pero puedes escribir tu propio nombre aquí, así que sólo voy a llamarlo Wolfgang Entonces ubicación del servidor. Tienes dos opciones Bélgica y Estados Unidos. Elija el que esté más cerca del país en el que está configurando el sitio web Después haz click aquí abajo donde dice Configura tu sitio Wordpress. Y vamos a darle un título a nuestro sitio. De nuevo, voy a llamar a éste Wolfgang. El idioma es el inglés para mí. Entonces Admin usa un nombre y contraseña de administrador y correo electrónico de administrador. Aquí es donde está configurando su propio inicio de sesión único el back end de su sitio web. Entonces aquí dentro, voy a escribir a mi nombre. Aquí, ingresaré mi propia contraseña. Luego agregaré mi correo electrónico en la parte inferior y luego haré clic en Desplegar ahora. Llegarás a esta página. Entonces tu sitio web ya está configurado, pero como puedes ver en la parte superior aquí, dice que tu sitio estará en vivo durante 1 hora. Para mantenerlo en línea, cree una cuenta gratuita. No tienes que hacer esto si no quieres mantenerlo vivo. Pero si lo haces, solo recomiendo hacer clic en este botón aquí, regístrate gratis e inscribirte para obtener una cuenta gratuita con WoZma Estoy usando los mismos datos de inicio de sesión aquí también y haciendo clic en Registrarse. Así que ahora tienes una configuración de cuenta gratuita dentro de WoZma, y aquí es donde puedes acceder a tu panel de WordPress y comenzar con Tu nombre de dominio está aquí arriba, y esto es lo que ingresaste en esa primera página. Puede que ese no sea el nombre de dominio que desea usar para su sitio web, pero para probar y configurar su sitio web, nos quedaremos con eso por ahora. Si quieres agregar un nuevo nombre de dominio, te mostraré cómo hacerlo al final de esta clase. Pero por ahora, nos quedaremos con éste. Entonces, para entrar y comenzar a construir tu sitio web, haz clic aquí arriba donde dice administrador de WordPress. Y aquí estamos ahora en el dashboard de WordPress. Podemos empezar a construir todo desde aquí. Si nunca antes has usado Wordpress, te hablaré a través de algunas de las configuraciones básicas Pero lo principal que hay que saber es que el menú para todo está por aquí a la izquierda. Lo primero que tenemos que hacer es instalar Elementor. Elementor es un enchufe. Entonces para hacer eso, ven aquí a la izquierda y pasa el cursor sobre los complementos y elige Agregar nuevo complemento Entonces en el cuadro de búsqueda de aquí arriba, escribe Elementor. Verás el creador de sitios web de Elementor aquí. Así que haz clic en Instalar ahora y luego elige Activar. Y eso te llevará a través de esta página. Es posible que ya tengas una configuración de cuenta elemental. Si es así, haz clic aquí abajo donde dice conecta tu cuenta. Si no, haz clic en este donde dice, crea mi cuenta. Y aquí puedes usar tu cuenta de Google, cuenta Facebook, cuenta de Apple para iniciar sesión o continuar con tu correo electrónico. Seleccionemos esa. E ingresaré mi correo electrónico aquí arriba y luego elegiré mi contraseña. Luego haz clic en Crear mi cuenta. Y luego presiona este botón Conectar. Lo que estamos haciendo aquí es configurar la versión gratuita de Elementor Necesitas una cuenta, pero no necesitas pagar ningún dinero por el programa en esta etapa. Y luego verás esta página. Simplemente haz clic en Hagámoslo. Cada sitio comienza con un tema. Cada sitio web de WordPress necesita un tema para comenzar. Y para usar Elementor, debes comenzar con el tema hello elementor Entonces, para instalar eso, basta con hacer clic en este botón aquí. Y luego verás este sitio donde te está ofreciendo características pro adicionales. Esas son las funciones de pago. Y si solo quieres continuar con la versión gratuita, simplemente haz clic en Omitir. Bienvenida a bordo. Eso es todo lo que se hace aquí, así que simplemente haz clic en Omitir de nuevo, y eso te llevará de vuelta al panel de WordPress. Simplemente haz clic en Saltar en esta ventana. Y aquí estás ahora dentro del elemento o Page Builder. Muy pronto entraremos en todo esto. Pero por ahora, salgamos esta página y volvamos al tablero. Antes de hacer eso, queremos configurarlo como una configuración regular cada vez que dejamos el elemento o Page Builder. Entonces para ello, aquí arriba a la izquierda, verás un pequeño elemento o logo. Haga clic en esa y elija las preferencias del usuario. Entonces en esta lista de aquí, en la parte inferior, verás la palabra navegación, salida dos. En el menú desplegable, solo elige el panel de WP. Cuando eso esté hecho, vuelve a subir al logotipo elemental y elige salir a WordPress. Obtendrás este pequeño pop up. Simplemente haz clic en Dejar porque aún no hemos hecho nada en esta página. Y eso te traerá de vuelta aquí. Ahora, lo primero que debes hacer es solo asegurarte de que tienes instalada la última versión de elemental. Si pasas el cursor por aquí en el lado izquierdo, verás la opción de actualizaciones. Haga clic en esto. Y si elemental necesita ser actualizado, será debajo de aquí donde dice plugins. Pero como puedes ver aquí, dice que tus plugins están todos actualizados así que todo está configurado correctamente. Ahora solo una última configuración para verificar antes de comenzar a construir su sitio web. Ven aquí a la izquierda a Elementor y elige ajustes Esta sección aquí donde dice, Desactivar colores predeterminados y fuentes predeterminadas deshabilitadas. Solo tienes que asegurarte de que eso esté comprobado. Si no está marcada, simplemente haga clic en la casilla aquí, marque y haga clic en Guardar cambios. Esto significa que estamos anulando cualquier color preestablecido y fuentes del tema hello para que podamos usar el nuestro propio Así que haz clic en Guardar cambios. Y ahora estamos listos para comenzar a construir tu sitio web. 4. Elementor 101: menús: Ahora que está configurado, ven aquí a las páginas y selecciona todas las páginas. Como puedes ver aquí, un par de páginas vienen automáticamente con el tema. No necesitamos ninguna de estas páginas, pero esa está en vivo que ha sido publicada como puedes ver por aquí. Simplemente apaguemos eso porque es solo una página vacía que no necesita existir. Si pasamos el cursor por aquí en edición rápida, aquí tienes algunas opciones, pero la que estamos viendo es el estado Como pueden ver, se publica. Se puede cambiar eso a un borrador. Ahora vamos a crear nuestra propia página en vivo. Eso es muy sencillo. Haga clic, Agregar nuevo. Llegarás al editor regular de Wordpress. Desplázate hacia arriba para agregar título y poner en el título de tu sitio web. El mío será Wolf Gang. Música Entonces ven aquí a resumir. En el lado derecho, haz clic en el menú desplegable aquí donde dice plantilla. Haga clic en Plantilla por defecto. Después de este menú desplegable, elija elemento o lienzo. Eso es lo que tenemos que hacer para tener una página clara sin nada más en ella que podamos trabajar. Entonces sube aquí a guardar Draft. Cuando eso se guarde, venga aquí a editar con Elementor Bienvenido de nuevo al editor de Elementor. Como puedes ver estamos usando la última versión del menú. Siempre es bueno venir aquí y jugar con todos los escenarios aquí solo para que sepas dónde está todo. Antes de comenzar, revisaré rápidamente cada parte de la barra de menú en la parte superior aquí. En primer lugar, este logotipo de Elementor, ese es un menú desplegable. Aquí tenemos al constructor de temas. No te preocupes solo por un elemento pro que no estamos usando hoy en la historia. Bueno, obviamente que si cometas un error puedes volver a versiones anteriores y atajos de teclado. Eso es solo decirte todos los atajos para acelerar todo el proceso. Supongo. Luego el icono más agrega elemento, aquí es donde verás los elementos, todos los widgets que usaremos en este sitio web, este menú desplegable que está configurado en diferentes subsecciones, diseño, contenedor y cuadrícula Eso es lo que solíamos empezar a construir todos los elementos, cada sección de nuestro sitio web. Tienes tus conceptos básicos, también tienes tu sección profesional. Obviamente puedes ver un pequeño elemento de candado encima de todos estos, pero no te preocupes por eso No podemos usar ninguno de estos, pero nada de eso es necesario para nada que vamos a construir hasta la fecha. Simplemente estamos usando completamente la versión gratuita. Podemos cerrar esa parte. Y luego obtienes todos los ajustes generales, todo lo que vas a necesitar aquí, Carruseles de imagen, testimonios, etcétera, esos son los elementos Entonces tenemos la configuración del sitio, aquí es donde puede cambiar la configuración que funcionará en todo el sitio web. Si estás construyendo un sitio web con varias páginas diferentes, cualquier configuración aquí será relevante. Cada página que construyes. Entonces si cerramos esta y luego damos click en esta que dice Estructura, obtienes esta pequeña ventana emergente. Esto solía llamarse el Navegador. Si estás familiarizado con versiones anteriores de element, se llamaba Navigator. Ahora se llama Estructura, pero hace exactamente lo mismo. Hablaré de eso a medida que empecemos a construir tu sitio web. Después siguiente, esta es la sección responsive. Esto es muy, muy importante y lo veremos más adelante en la clase. Aquí es donde podemos seleccionar diferentes dispositivos, computadoras de escritorio, tabletas y móviles. Este de aquí, Vista previa de cambios. Esto es genial porque a medida que estás trabajando en el sitio web, puedes hacer clic en Vista previa de cambios. Y luego puedes ver cómo se vería para todos los demás que miran tu sitio web cuando se pone en marcha. Eso es todo. Ahora podemos comenzar a construir tu sitio web. 5. Héroe de apertura NUEVO: Bien, comencemos a construir tu sitio web. Estamos empezando con una página muy en blanco. Tenemos que empezar a agregar nuestros primeros elementos. Esta es la sección que vamos a ver. Aquí hay dos opciones. En primer lugar, tenemos esta plantilla add. Da click en eso y verás lo que esto significa. Aquí es donde se pueden traer páginas pre hechas, diferentes bloques, elementos que elemento de sí mismos han creado. Sin embargo, siempre puedes ver el pequeño ícono pro encima de todos estos. Estos solo están disponibles en la versión pro. Sin embargo, esto no es relevante para lo que estamos tratando de hacer aquí de todos modos. Estamos tratando de construir nuestro propio sitio web único. No queremos usar nada que ya haya sido pre hecho por otra persona. Tan solo cierra esta. El que vamos a usar es el icono más. Haga clic en eso. ¿Qué diseño te gustaría usar? Estas son las dos opciones que tenemos para elemento. Solo te voy a mostrar la diferencia de esos primeros grillos. Como puedes ver aquí, estas son estructuras diferentes. Sin embargo, cada estructura tiene un ancho establecido para cada elemento dentro de ella. Este es 50, 50 de izquierda a derecha, 50 50 de arriba a abajo, y esta es una división igual de tres tercios. Cada sección dentro de la rejilla es siempre exactamente la misma anchura y altura. Si cerramos esto, hacemos clic en Flex box, ahí es donde tenemos algunas opciones creativas más diferentes. Como puedes ver aquí, esta tiene cinco secciones diferentes, pero no todas tienen el mismo ancho y alto. Son de diferente ancho y diferentes alturas. Como puedes ver aquí, mismo ancho. Sin embargo, la altura aquí es el doble de la altura de estos dos elementos. Aquí en el clúster de hoy, estaremos usando ambos elementos diferentes. Usaremos contenedores, la caja flexible y la rejilla. Pero para esta sección, la sección héroe, vamos a usar un contenedor flex box. Solo queremos uno que sea un solo contenedor. cursor aquí arriba hasta el primero con la flecha apuntando hacia abajo. Y haz clic en eso. Eso caerá en tu primer contenedor, que está en esta sección rosa en la parte superior. Sólo te mostraré algunos elementos más. Puedes ver aquí en la parte superior tenemos otro símbolo más, un contenedor que solo significa que puedes hacer lo mismo, pero ya sea arriba o abajo. Vamos a cerrar eso. Entonces tenemos la x, es decir para eliminar el contenedor. Si cometes un error o no querías caer en otro contenedor, simplemente puedes eliminar ese. Entonces tenemos los puntitos aquí arriba donde dice Editar Contenedor. Si haces clic en eso, verás las opciones que aparecen automáticamente en el lado izquierdo aquí. Vamos a echar un vistazo a eso en unos minutos. Además, esto le permite arrastrar el contenedor hacia arriba y hacia abajo. Cuando tenemos varios contenedores diferentes aquí en la página, es posible que desee mover uno encima del otro o debajo del otro, Arrastrarlos así. La otra opción que tenemos ahora que tenemos un contenedor configurado, es el clic derecho. Si tuviera que escribir da click aquí, estas son las opciones que obtengo. Pero queremos escribir click en el propio contenedor y tenemos todas estas opciones. Aquí está bastante claro lo que hace cada uno de estos. Si has hecho cierto contenedor y quieres repetir la acción, simplemente puedes duplicarlo y volverá a hacer exactamente lo mismo. Entonces tienes las opciones de copiar y pegar de nuevo. Si quieres copiar algo que hayas hecho en otro lugar, puedes pegarlo en otro lugar del sitio. O incluso puedes darle estilo, digamos que tienes algo de texto configurado de cierta manera y quieres que el siguiente fragmento de texto funcione exactamente de la misma manera. Copia el texto y pega el estilo. No va a cambiar la redacción en el texto, pero va a cambiar el tamaño del mismo. El principal que quiero ver aquí es la estructura. Vamos a hacer clic en eso. Esta es una muy buena herramienta porque lo que hace es que divide tu sitio y cada página en diferentes secciones, diferentes contenedores Entonces tienes un menú desplegable, para que puedas ver lo que hay dentro de cada contenedor. Veremos cómo funciona esto cuando seguimos construyendo múltiples elementos diferentes en la página y soltamos diferentes widgets dentro del contenedor. Ahora vamos a construir la sección de héroes de nuestro sitio web. Llamamos a esta sección el Héroe porque es la parte más importante de cada página. ¿Por qué? Porque es la sección de apertura. Es lo primero que la gente ve cuando visita tu sitio web y es tu primera oportunidad para impresionarlos. Lo que vamos a construir aquí es una sección de apertura de página completa que tiene una imagen de fondo con el logotipo de la empresa sentado en la parte superior. Esta imagen dará una buena impresión de lo que trata el sitio. Entonces el logotipo de la compañía también tiene el nombre de la compañía dentro para que la gente sepa dónde tiene. Cuando aparecen en el sitio. Tengamos un juego con este contenedor. Ahora ven aquí a tu menú del lado izquierdo. Y verás tres subsecciones. Hay estilo de diseño y avanzado. Hablaré a través de diferentes partes de esto a lo largo de toda la clase solo para darte una buena idea general de cómo funciona todo y qué es posible dentro del elemento o creador de páginas. Empecemos por mirar el diseño. Aquí es donde decidimos el ancho y la altura de todo el contenedor, toda la sección de héroe. El ancho ya está establecido en un tamaño predeterminado de 1,140 píxeles de ancho Tu otra opción aquí es ir de ancho completo. Si echas un vistazo a esta sección en la parte superior, verás la diferencia. Si elijo ancho completo, está cubriendo toda la página. Esto funciona para algunos contenedores en su sitio, pero no para otros. Por ejemplo, si tienes uno con texto en él, no quieres que eso esté justo al borde de la página porque el flujo del sitio web realmente no funciona. Siempre necesitas un poco de espacio vacío, un poco de espacio en blanco alrededor del texto. Volvamos a convertir esto en caja, y lo dejaremos en el valor predeterminado Puedes cambiar esto a cualquier tamaño que quieras, pero te recomiendo encarecidamente que te quedes con el ancho predeterminado. Ahora queremos echar un vistazo a la altura. Como puedes ver en estos momentos, el contenedor solo tiene una altura muy pequeña, solo baja hasta aquí, o se puede ver el borde de la caja rosa. Lo que queremos hacer es decirle este contenedor que llene toda la página. Pasemos a Altura mínima. Si haces clic en el menú desplegable, verás diferentes opciones aquí. El que estamos buscando es VH, Eso significa altura vertical como puedes ver aquí. Para lograr contenedor de altura completa, use 100 H. Escojamos H y vamos a escribir 100. Esto es un porcentaje. Si quieres que solo llene la mitad de la página, obviamente 50% pero queremos que esta llene toda la página. Escojamos 100. Ahora tenemos configurado un contenedor vacío en blanco. Lo que queremos hacer es configurar nuestra imagen de fondo, flotar aquí para darle estilo En aquí verás opciones de fondo. Tienes muchos tipos diferentes. Puedes caer aquí degradado clásico o un color degradado. Puede colocar un video o puede caer en una presentación de diapositivas. Para lo que queremos, solo queremos un estilo clásico pincha en el pincel aquí. En primer lugar, solo podrías elegir un solo color. Si haces clic en esta caja vacía de aquí, aquí es donde puedes elegir cualquier color que quieras que sea el fondo. No queremos que sea un color, queremos que sea una imagen. Lo que voy a hacer es hacer clic en el botón de borrar en la parte superior aquí. Luego, para usar una imagen de fondo, cursor sobre esta caja y haz clic en Elegir imagen Cuando abro la mediateca, puedo ver cada imagen que he subido. Si quieres saber un poco más sobre cómo subir imágenes, iremos a mi perfil en compartir habilidades y buscaremos este video que te platicará rápidamente sobre lo que se debe hacer cuando subamos imágenes a Wordpress Lo que importa es la proporción de esta imagen, el tamaño del archivo y el nombre del archivo. Mira este breve video, entenderás un poco más. Cuando tengas todas tus imágenes listas para subir, haremos clic aquí y seleccionaremos Archivos. ¿Qué es Wolfgang? Música Bueno, obviamente estoy inventando un nombre para una tienda de música, pero va a ser una tienda de música más anticuada como eran hace 20 o 30 años. Entonces lo que vamos a vender aquí es una gran cantidad de discos de vinilo, cosas más retro como cintas de cassette. Pero también vamos a vender muchos instrumentos y equipo musical para que la gente los use cuando están grabando música o tocando en vivo. Sin embargo, mi principal punto de venta van a ser los discos de vinilo porque creo que ese es el tipo de cosas que van a meter a los clientes. A todos nos gusta pasear por esas tiendas y echar un vistazo a qué música hay disponible. Entonces voy a escoger esta imagen aquí como mi imagen de fondo. Bien, y así se ve el héroe con esta imagen como fondo. Parece que es el perfecto para este fondo. No obstante, si me desplazo hacia abajo, verán que aquí abajo hay un pequeño problema. Lo que está sucediendo es que no se ajusta a la proporción exacta del fondo, y por lo tanto está repitiendo la imagen de abajo. Tenemos que cambiar eso. aquí al menú de la izquierda. Aquí es donde se pueden hacer algunos cambios. Vayamos por aquí a la posición. Como se puede ver por este icono que se establece en la forma en que se mostrará en el escritorio. Veremos esto más adelante en la clase, pero aquí es donde puedes cambiar la configuración para ver cómo se vería en la tableta o en el móvil. Ahora mismo solo estamos mirando el escritorio. Manténgalo seleccionado en Escritorio. Por aquí dice que la posición es por defecto. Cambiemos eso a Centro Centro, porque quiero que se siente en el centro de este contenedor. Sigue repitiendo la imagen de abajo. Vayamos aquí a repetir y luego decir no repetir. Eso hace desaparecer la segunda versión de la misma. Sin embargo, como puedes ver, todavía no llena del todo el contenedor. Y tenemos un pequeño espacio en blanco en la parte inferior aquí, entre la imagen y el borde del contenedor. La línea rosa para cambiar eso, Ven aquí a mostrar el tamaño y elige portada. Ahí vamos. Ahora se extiende ligeramente para que llene esa sección exacta. Entonces piensa en esto. Cuando eliges tu imagen de fondo de héroe, obviamente quieres algo que tenga una relación de paisaje. Es posible que desee elegir una imagen cuadrada o una por una proporción. Pero hay que recordar que eso lo estirará así que lo que hay en la parte superior, en la parte inferior puede que no se muestre correctamente. Todo esto se ve bien dentro del editor. Sin embargo, una manera genial comprobar cómo va a quedar cuando la gente lo vea sin usar el botón de cambios de vista previa es hacer clic en esta pequeña flecha de aquí. Esta pequeña flecha está diciendo que ocultará el panel. Este es todo el panel de aquí a la izquierda. Y obviamente cualquiera que visite el sitio en vivo no verá eso. Da click en la pequeña flecha para ocultar el panel. También ocultará el menú Estructura aquí a la derecha. Ahora lo que ves, que es solo una imagen simple, es exactamente lo que la gente verá cuando visite el sitio en vivo. Eso te ayudará a asegurarte de obtener los ratios correctos. Tu experiencia está funcionando a la perfección. Todo lo que se sentó encima también está funcionando perfectamente. Tenemos que volver con el editor. Vuelva a hacer clic en la flecha. Bien, si nos desplazamos un poco hacia abajo, bueno, solo vemos el espacio vacío en blanco, pero aquí es donde aparecerá el siguiente elemento. No obstante, quiero hacer un cambio en la sección de héroes. A medida que me desplace hacia arriba y hacia abajo así, verás que la imagen se mueve con el desplazamiento Pero lo que en realidad quiero hacer aquí es hacer estática la imagen de fondo que se quede en el mismo lugar. No obstante, cualquier elemento encima de él como el logotipo de la compañía, eso es lo que se mueve para hacer eso. Es otro escenario por aquí en el lado izquierdo, y es este el que dice apego. Está configurado por defecto y tienes dos opciones, Una es scroll y otra es fija. El predeterminado es scroll. A medida que me desplazo, se mueve. Pero solo quiero que eso se arregle. Cambiemos eso a fijo entonces. A medida que me desplace hacia arriba y hacia abajo, verás que eso se mantiene estático. No se mueve. Los elementos en la parte superior se moverán. Y luego llegamos al siguiente contenedor que apenas se desplazará por encima de él. Ahora tenemos que dejar caer el logotipo de la compañía encima de esta imagen. Vamos a desplazarnos hacia arriba para que podamos ver el fondo completo. Volvamos por aquí al símbolo más añadir elemento. Lo que queremos hacer aquí es drop in image, un widget de imagen encima del fondo del contenedor. Sin embargo, la configuración que tengamos para el contenedor de fondo será diferente a la configuración que queramos para la imagen. Por lo tanto, lo que tenemos que hacer es dejar caer un contenedor dentro de un contenedor. Ven aquí y arrastra un contenedor y literalmente solo déjalo caer encima del fondo. Lo que verás aquí en la sección de estructura es un contenedor principal y luego un sub contenedor que está dentro de este contenedor. Lo que queremos hacer es dejar caer nuestro logo dentro de este contenedor. Vuelve por aquí para agregar elemento. Escoge la imagen, el widget y suéltalo dentro del contenedor secundario. Lo primero que siempre ves aquí es solo una caja gris. Eso es porque no se ha elegido ninguna imagen y esto es como una imagen de colocación para eso. No obstante, queremos cambiar eso. Ven aquí a elegir Imagen, Haz click en esto, luego quiero elegir la versión blanca de mi logo. Tengo un par de versiones diferentes de mi logo aquí arriba, pero quiero aquella en la que el icono esté encima del texto, y quiero la versión blanca. Voy a dar click en éste. Sin embargo, el principal problema aquí, como puedes ver, la imagen es estúpidamente grande y ni siquiera puedes ver lo que dice a menos que te desplaces hacia abajo Solo necesitamos hacerlo mucho más pequeño para hacerlo, ven aquí al lado izquierdo y haz clic en Estilo Aquí. Se puede jugar con los porcentajes de la imagen, el porcentaje del ancho, o el porcentaje de la altura. Juguemos con el ancho. Si hago clic en este pequeño elemento arrastrable aquí, solo puedo jugar con él hasta que llegue al tamaño que quiero Yo diría que tal vez 15% Eso es bueno. Ahora quiero que el logo se siente en el centro de la sección de héroes. Si hago clic en la flecha aquí, así es como se vería para los visitantes. No quiero que esté en la cima. Quiero que esté en el centro. Vamos a editar el diseño del contenedor. Ven aquí a tu sección de estructura y haz clic en el sub contenedor que tiene la imagen en su interior. La Parte que estamos viendo aquí es para justificar el contenido. Aquí es donde podemos decir que cualquier contenido dentro de un contenedor puede sentarse al inicio, en el centro, o al final. Lo que estamos buscando aquí es centro. Voy a hacer click en esa. Eso no hizo ningún cambio. ¿Por qué? Porque la imagen ya está en el centro de este sub contenedor. Se sentó en el medio. Pero lo que necesito decirle a elemental que haga es que este sub contenedor también se siente en la parte central de este contenedor, regrese a su contenedor principal héroe y luego regrese aquí para justificar el contenido. Y luego haz clic en Centro. Ahí vamos. El logo ahora se encuentra en el centro de la página. Mientras me desplazo hacia arriba y hacia abajo por aquí, la sección de héroes ahora funciona de la manera que quería entrar. La imagen de fondo permanece estática, pero el logotipo se mueve hacia abajo a medida que un usuario se desplaza Ahora el único problema que puedo ver aquí es a veces cuando un usuario se desplaza hacia arriba y hacia abajo, realmente no se puede leer el logo encima de la imagen de fondo donde dice Wolfgang Music Mientras me desplazo hacia arriba y ese texto está sentado encima de un disco de vinilo más ligero, no es tan legible como me gustaría que Lo que en realidad voy a hacer aquí es agregar una superposición a la imagen de fondo. Voy a agregar una superposición de color que se asiente encima de la imagen, y por lo tanto hace que todo el fondo sea un poco más oscuro y por lo tanto hace que el texto sea más fácil de leer en la parte superior. Para ello, asegúrate de que tu contenedor principal esté seleccionado aquí en la sección de estructura. Y luego ven aquí a la izquierda y haz clic en Estilo. Como puedes ver, el fondo se configura como lo configuramos antes con la imagen, pero estamos viendo la superposición de fondo. Haz click en eso otra vez, tienes diferentes opciones aquí. Puedes elegir el clásico o puedes elegir el degradado. Juega con él, mira lo que te funciona. Pero solo quiero el color clásico, un color sólido. Voy a hacer click en Clásico, entonces puedes ejecutar una imagen encima de él, pero eso no va a funcionar. Eso solo será un desastre uno encima del otro. Entonces voy a elegir un color. Voy a pinchar por aquí. Puedes jugar con opciones de color aquí abajo en la parte inferior si buscas un rojo, naranja o verde. Pero me gusta con lo que abrió, con el rojo. Creo que un rojo oscuro. Creo que eso resume aproximadamente quiénes somos. Creo que le da un bonito estilo retro agarra esto.en el medio y luego simplemente gírelo y juega con él hasta que encuentres uno que te guste Busco como un rojo obscuro. Creo que eso le da un estilo retro. Voy a algún lugar entre el negro y el rojo, bastante así. Es un poco brillante. Esto solo va un poco más oscuro. Sí, eso se ve genial. Cuando eliges eso, puedes ver lo que aparece aquí es el código hexadecimal. Ese es el código exacto para este color exacto. Si quieres usar ese color exacto en otra parte del sitio web, solo toma nota de este código hexadecimal. No obstante, más adelante en la clase, te mostraré cómo configurar los colores primarios. Esto básicamente hace un registro de cada color que has usado en otros lugares. Y solo puedes seleccionarlo de un menú desplegable, pero por ahora, estoy contento con ese color. Volvamos a dar click aquí, La Opacidad, donde también puedes jugar con eso. Se establece automáticamente en 50% Si lo quiero rojo completo, puedo elegir uno, o casi nada, puedo bajarlo a 0.05 entonces todavía no puedo leer el logo. De hecho voy a llevar una vuelta a donde estaba, que fue 50% arrastrarlo hasta 0.5 creo que es perfecto. Tienes otra opción aquí, Modo Fusionado. Si usas una herramienta de edición de fotos como Photoshop, estarás familiarizado con todas estas opciones aquí. Si pasas el cursor sobre ellos, puedes ver cuáles son estas opciones Multiplicar, superposición de pantalla. Simplemente significa que el color de la superposición posterior se asienta de manera diferente en la parte superior de la imagen. Así que juega con estos y encuentra uno que creas que funciona para ti que funcione mejor encima de tu imagen de fondo. No obstante, creo que sólo una normal estuvo buena. Creo que eso es lo que estoy buscando. Si me desplazo por aquí, sí, esto se ve perfecto. Voy a hacer clic en la flecha aquí y sí, eso se ve perfecto. Eso es lo que estoy buscando. Puedo leer ese logo. Me gusta mucho ese fondo, y creo que el color de este expresa quiénes somos como tienda de música retro. Solo volvamos y también a medida que me desplace hacia arriba y hacia abajo, verás cómo funciona eso ahora. Y sí, eso es todo legible ahora todo el mundo puede leer eso en Wolfgang Música Ahora nuestro héroe está listo y estamos listos para pasar a la siguiente sección. Sin embargo, una pequeña recomendación para ti por aquí. Tienes la opción de publicar la página. No queremos hacerlo todavía porque no está listo para salir a vivir. Si haces clic en esto, aparecerá el menú desplegable. Puedes ver que tienes opciones de guardar. Haga clic en eso, simplemente haga clic en Guardar borrador. Eso solo significa que se ha guardado el borrador. Simplemente significa que si tu computadora falla o algo así, tienes la versión más reciente de la misma. Yo recomendaría simplemente hacer clic en eso cada 5 minutos o cada vez que hagas algo nuevo, tendrías que volver atrás y repetirlo. 6. Sección de información: Ahora tu héroe está listo. Eso es suficiente para llamar la atención de todos cuando ven que quieren desplazarse hacia abajo y obtener más información. Eso es lo que vamos a hacer ahora. A continuación es necesario agregar una sección de introducción. Esa es una breve sección de texto que tiene alguna información importante sobre quién es usted y qué puede hacer por todos los clientes que visitan su sitio web. Vamos a desplazarnos hacia abajo hasta la siguiente sección debajo del héroe, luego hagamos clic en el Plus. Vamos a agregar otro contenedor flex box. Dentro de este contenedor, quiero que agreguen dos secciones distintas, una de las cuales será de texto y la otra de imagen. Estarás agregando el texto a la izquierda y la imagen a la derecha. Necesitas algo con dos columnas diferentes. Este es de 50, 50 incluso. Divide este aquí donde tienes uno más pequeño a la izquierda y uno más grande a la derecha. Elige esa. Ahora tienes un contenedor con dos subcontenedores contenedores dentro del contenedor De nuevo, ven aquí a la sección de estructura, ya verás a lo que me refiero. Haga clic en el menú desplegable y tendrá un contenedor con el primer contenedor más pequeño dentro y luego el segundo contenedor más grande dentro. Ahora lo que queremos hacer es dejar caer una imagen aquí y un texto ahí dentro. Pasemos al plus y agreguemos un elemento. En primer lugar, vamos a obtener el widget de imagen y arrastrarlo al contenedor más grande del lado derecho. Obviamente, se acaba de dar como la caja gris estándar. De nuevo, en breve volveremos a esa. En el lado izquierdo, aquí es donde queremos, vamos a agregar dos tipos diferentes de texto por aquí. Vuelve a tu click Añadir Elemento. En primer lugar, vamos a empezar con una rúbrica. Dejaremos esa en primer lugar. Como puedes ver aquí, se ha ido con la configuración estándar predeterminada para tipografía y para colores En la siguiente parte de esta clase, echaremos un vistazo a los colores globales y las fuentes globales. Y verás cómo cambiar este y por lo tanto, cambiarlo en todo el sitio. Pero eso está bien por ahora. Debajo de eso, vamos a agregar un cuadro de texto regular. Vuelve a subir aquí al click Agregar elemento. Entonces de esta sección aquí, elija Editor de texto. Y nuevamente arrástralo por debajo del encabezamiento. Siguiente Quiero que mires el espaciado y la alineación. Como puedes ver, esta nueva sección se encuentra directamente debajo de la sección de héroes. Hay un pequeño espacio en blanco entre las dos cosas. Si hago clic en la flecha, verás a lo que me refiero. Eso no es suficiente espacio. Una cosa importante para recordar en el diseño web es respirar espacio. Este es el espacio alrededor de cada elemento. La regla aquí es bastante simple. Si tienes demasiadas cosas a la vez, está demasiado ocupado. Si está demasiado ocupado, los usuarios no saben realmente dónde buscar y dónde empezar a leer. Necesitas una configuración sencilla de A a B para que sea clara y fácil de leer. Necesitas espacio en blanco vacío, espacio para respirar alrededor de cada sección. Lo que voy a hacer aquí es cambiar los márgenes en el contenedor principal. Pasemos por aquí y hagamos clic en ese contenedor principal de aquí a la izquierda. Aquí es cuando necesito que hagas clic en la sección avanzada. En cuanto al diseño, tienes dos opciones con las que puedes jugar. Aquí tienes el margen y tienes el relleno. La forma más fácil de ver eso es el margen es el espacio exterior. El relleno es el espacio en el interior. No necesitamos ningún espacio en el interior de este contenedor, solo necesitamos espacio arriba y abajo. Echemos un vistazo al margen. Voy a dar click aquí para arriba. Voy a agregar en una cantidad de píxeles que se sentará por encima y por debajo de este contenedor. Tal vez probemos 100 píxeles. Como pueden ver, cuando hice esto, cambió cada sección de aquí a 100 píxeles. Ahora hay un margen de 100 en la parte superior e inferior, pero también a la derecha y a la izquierda. No quiero que estén ahí. En Elementor automáticamente tiene esta configuración aquí donde vincula valores juntos Lo que hay que hacer es apagarlo. Simplemente haz clic en él, luego vuelve a los dos que querías volver a cero y a la derecha en cero, izquierda y derecha. Ahora tengo un margen de 100 píxeles por encima este contenedor y un margen de 100 píxeles por debajo de este contenedor. Eso significa que cuando comiencen en la siguiente sección, habrá un espacio par entre cada sección, 100 píxeles aquí arriba y 100 píxeles abajo. A continuación, deberíamos echar un vistazo a la alineación. Lado del diseño cuando necesitas tomar una decisión de dónde se asienta todo en relación con todo lo demás. En el momento en que el texto está sentado en la parte superior del contenedor. Esa es la configuración predeterminada de elementor. Sin embargo, no creo que eso se vea tan pulcro. Siento que sería una mejor configuración si el texto estuviera en medio de la imagen de la derecha. Ahora necesitamos seleccionar este subcontenedor, el primero que tiene el texto en él. Y puedes hacer clic en este pequeño icono gris en la esquina o puedes usar tu estructura de navegación. Obviamente, estábamos dentro del contenedor principal y solo queremos editar uno de estos sub contenedores. Escoge el que el texto dentro de él. Entonces la configuración aquí es muy similar a lo que hicimos anteriormente. Sólo tenemos que ir por aquí para justificar el contenido y decirle que esté en el centro. Ahí vamos. En cuanto al espacio para respirar también, lo que quieres evitar son cosas que están demasiado juntas. Por ejemplo, aquí tenemos texto. No hay un gran espacio entre el texto y la imagen. Están demasiado cerca el uno del otro, lo que hace que sea más difícil de leer. Lo que queremos es un poco de espacio en blanco por aquí en el lado derecho de este contenedor. De nuevo, asegurémonos de que estamos dentro este contenedor y vayamos a Avanzado. Aquí es donde vamos a usar padding en lugar del margen, porque quiero espacio dentro del contenedor. En el lado derecho, baja aquí a este ícono y apaga los valores de enlace juntos que cambia todo a cero. Entonces lo que queremos decir es un espacio a la derecha. No quiero que este espacio esté en ningún otro lugar. No necesito relleno en la parte superior de la parte inferior ni en la izquierda. Al mirar eso, creo que tal vez 50 píxeles deberían estar bien ahí. Como pueden ver, eso ha movido todo este texto hacia la izquierda y ahí tiene un espacio mucho mejor. A lo mejor solo necesita un poco más de espacio. Entonces este titular, uno está más lejos. Vamos a redondearlo hasta 75. Ahí vamos. Eso es perfecto. Ahora echemos un vistazo a la rúbrica que tenemos aquí. Nuevamente, para editarlo, haga clic en el encabezado en sí, o por aquí en su sección de estructura. Elige rumbo primero hacia arriba. Bueno, quiero un título diferente para estar aquí aquí. Sólo voy a escribir a nombre de la compañía que funciona muy bien, pero necesito jugar la tipografía y los colores que aquí se usan En primer lugar, sin embargo, mira este de aquí abajo que dice etiqueta HTML. Y da clic en el menú desplegable. Aquí tienes múltiples opciones diferentes para una etiqueta que va detrás del texto. Voy a explicar un poco más sobre eso en la siguiente parte de la clase. No obstante, voy a cambiar este a H uno. Eso significa encabezar uno. La razón por la que he elegido H one es porque siempre debes tener uno H uno en tu página. Esa es la introducción a tu página y eso ayuda a las personas a encontrar tu sitio web dentro de Google. Una regla general para jugar es asegurarse de que nunca tengas más de un H uno para el siguiente encabezado, hacer que H dos. Ahora para cambiar el aspecto de esto, subamos al estilo. En primer lugar, el color del texto, se cae automáticamente en este azul. Pero eso no me gusta mucho. Realmente no creo que me convenga como empresa. Me gusta mucho el rojo oscuro que tenemos pasando aquí arriba para este, quiero otro color que sienta bien. Con eso, estoy pensando tal vez como un oro, oscuro audaz, dorado. Lo que vamos a hacer es hacer clic en este azul de aquí. Entonces voy a arrastrar éste hacia la izquierda. Entramos en la sección más amarilla, dorada, anaranjada. Creo que por ahí se ve bien. Entonces arrastra este por ahí. Simplemente juega con esto hasta que encuentres un color que creas que funciona perfecto. Tengo que recordar, este es texto coloreado encima de un fondo blanco. Entonces no quieres algo demasiado ligero porque nadie puede leerlo. Si solo quieres negro recto, puedes elegir eso. Pero otra vez, quiero este color dorado para el mío. Elige el color que creas que funciona mejor para ti y el producto que intentas promocionar. Vamos a desplazarnos hacia arriba. A mí me gusta este. Creo que eso es lo suficientemente oscuro y lo suficientemente audaz. Lo suficientemente brillante. Voy un poco más audaz. Ahí vamos. Creo que eso funciona mejor sobre el fondo blanco. De nuevo, aquí te van a dar el color hexadecimal, di ese. Toma nota de eso para más adelante. Ahora, tipografía, se elige automáticamente esta familia de fuentes para ser utilizada en todos los encabezados Esa es una buena fuente. Creo que es bueno para el body copy, pero no es lo que quiero para el rubro. Quiero una fuente Shouter más grande y audaz aquí. Haga clic en su menú desplegable. Lo que aparece es una lista de toda la tipografía que puedes usar en todo el sitio web Aquí hay cientos. Simplemente puedes pasar por cada uno y probarlos uno por uno, pero eso llevaría mucho tiempo. Yo recomendaría encontrar tipografía que te guste que hayas usado en otro lugar y que sientas que funciona mejor con el servicio estás tratando de promocionar aquí Yo tengo, y voy a escribir eso y asegurarme de que sea una de las opciones aquí. A mí me gusta mucho este que está llamado. Ahí vamos, está apareciendo. Yo seleccionaré eso. Sí, ahí vamos. Como pueden ver, eso es mucho más audaz. Y Shoelier solo representa lo que estamos tratando de hacer con este servicio aquí Otras opciones que puedes hacer aquí, o puedes jugar con el tamaño de este. Nuevamente, esto se establece en píxeles. Manténgalo en píxeles, luego simplemente arrástrelo atrás y hacia adelante solo para que pueda ver lo que va a funcionar para usted. Quiero que sea grande y bastante audaz, pero que no se siente en dos líneas. Vamos a ir tal vez a 40 pixeles, luego el peso. Como puedes ver aquí, hay muchas opciones diferentes en tamaños. Obviamente, cuanto mayor sea el número, audaz es la fuente que elijas, 100, esa es la más delgada Pero me gusta lo que acabamos de tener ahí con el semibold. Piensa audaz y el negro es demasiado atrevido, así que vamos semi atrevido. Entonces tienes algunas opciones más. Puedes elegir mayúsculas o minúsculas. De veras quiero mayúsculas aquí. Creo que eso es aún más audaz. Y sheli, ahí vamos, estilo. Puedes tenerlo normal o cursiva, Pero no me gusta eso en eso me representa. Pero eso sí se ve genial. Tiene un estilo un poco retro 80 Sl, pero solo voy a mantenerlo como decoración normal bajo línea sobre línea. No necesito nada de eso, así que sólo voy a dejar eso por defecto, que es la versión non. Eso es casi perfecto. Simplemente siento que necesita un poco de espacio entre cada letra. Lo que voy a hacer es ir aquí al espaciado entre letras y jugar con esto. Si lo acabo de arrastrar de izquierda a derecha, se puede ver que hace que ese espacio mucho más grande y mucho más pequeño. Quiero que solo sea un poco más grande, así que sea legible tal vez dos píxeles o 2.5 píxeles, creo que 2.5 creo que es suficiente espacio entre cada uno. Pero cuando un usuario ve eso, puede ver, dice Wolfgang Música Que se ve genial. Voy a dar click sobre mi flecha y solo ver cómo se ve eso. Sí, creo que es un buen flujo de arriba a esta sección aquí. Obviamente necesitamos un poco más de información y la imagen cae aquí. Quiero hablarles de cómo configurar el tipo global y los colores globales en todo el sitio web que si volviéramos a usar este encabezado, aparecería exactamente en el mismo color, exactamente en la misma fuente. 7. Ajustes globales de Elementor: Siguiente Quiero echar un vistazo a Global Colors and Typography que se usa en todo el sitio web Para verlo, sube aquí al menú y da clic en este icono aquí, Configuración del sitio. El primero que vamos a echar un vistazo son los colores globales. Esta es la página que verás cuando abras colores globales. Esto nos está mostrando un adelanto. Esto significa que si haces algún cambio aquí, ellos se mostrarán por aquí. La otra opción está desactivada, lo que significa que si haces un cambio aquí, luego verás los cambios dentro de tu sitio web en vivo. Yo recomendaría usar eso para esta etapa. Desde el punto de vista del diseño, es muy claro. Por aquí tenemos un color primario y un color secundario. Y el color principal del texto. El color de acento, bueno, eso es como el color extra. Si no quieres usar el primario o secundario, puedes usar el color de acento. Probablemente no vamos a necesitar eso en este sitio web, pero en un sitio web más grande, posible que desee un tercer color extra que se use una cantidad muy pequeña. Ahora, para los colores primario y secundario, quiero usar los dos colores que hasta ahora hemos usado el sitio. El primario quiero ser este rojo oscuro, y el secundario este oro. Si recuerdas, cuando configuramos estas secciones, teníamos un código hexadecimal. Si has hecho un registro de esos brillantes. Si no, vuelve al editor para hacer eso, simplemente haz clic en la X aquí arriba y está diciendo, ¿te gustaría guardar los cambios que has hecho? Aún no hemos hecho ningún cambio. Solo pon esta tarjeta ahora. Encontremos esos colores que configuramos antes. El primero fue en el contenedor principal Hero. click sobre eso en la estructura, ve a Estilo, ve a Overlay de fondo, y aquí está. Haga clic en el Color aquí arriba, y verá el código hexadecimal a continuación Destacados, y cópielo. Ahora volvamos a Configuración del sitio Colores globales, y vamos a Primario y pegarlo ahí. Ahí como puedes ver, el color primario ahora ha cambiado a este rojo oscuro. Haga clic en Guardar cambios, vuelva a cerrar esta ventana. Ahora vamos al titular aquí. Haga clic en el color. Copia el código hexadecimal nuevo a Configuración del sitio Colores globales. Hagamos que ese sea el color secundario. Ahora se puede ver como los dos colores se sientan juntos y se puede ver que es un buen contraste entre los dos. El siguiente que quiero cambiar es el color del texto. Eso es un poco gris ya que tengo texto en vivo en la página. Apaguemos de nuevo esta vista previa. Como pueden ver, aquí abajo hay texto que está usando ese color exacto, 777. Es un poco demasiado claro, quiero que sea un poco más oscuro. Haga clic en el color, luego juegue con este seleccionador de color de aquí Si quieres ir completamente negro, arrástralo hasta la esquina más alejada y obtendrás el código hexadecimal de 0000. Sin embargo siento que eso es un poco demasiado oscuro y un poco demasiado atrevido. Así que sólo voy a moverlo un poco hacia arriba así es un poco más ligero. Entonces vas de un extremo a otro. Pienso por ahí, eso se ve genial. Ahora bien, el color de acento , de nuevo, no creo que vaya a usar ese, pero a lo mejor si quería un tercer color ahí dentro, bueno, supongo que tengo que elegir uno que funcione bien con el rojo y el dorado. No lo sé. A lo mejor como un azul oscuro o algo así. Echemos un vistazo. Morado, creo. Al igual que un azul oscuro. Probablemente no voy a usar esto, pero ese es un color bastante neutro. Eso sí funciona bien con todo. Sólo voy a dejarla. Si necesitas más colores más allá tu texto primario o secundario en tu acento, puedes agregar otro aquí. Llámalo como quieras y luego elige tu color. Pero no quiero más. Estoy contento con los cuatro que tengo. He presionado para eliminarlo porque no lo estoy usando. Voy a elegir eliminar. Ahora que tengo todos mis colores globales establecidos, guardaré estos cambios. Ahora solo te mostraré cómo funcionan estos colores globales para garantizar la consistencia en todo tu sitio. Ahora que hemos guardado, hagamos clic en la X. Vamos a elegir cualquier Element Insight. Aquí voy a enviar un mensaje de texto. Y luego vamos a hacer clic en el pequeño lápiz aquí para editar el encabezado. Ahora tenemos una opción extra. Podemos elegir aquí donde dice Color del Texto. En cualquier momento que necesites elegir un color, haz clic en este pequeño icono de globo donde dice Personalizado. Eso te mostrará los colores primarios, secundarios, del texto y de acento. Digamos, en realidad me gustaría que fuera en el color primario. Yo hago clic en eso y cambia a eso. Simplemente significa que si reviso todo el sitio web y quiero cambiar el texto en todas partes, siempre lo estoy cambiando al color correcto, al primario o secundario. No tengo que hacerlo manualmente. Es automáticamente. Para eso. Ahora echemos un vistazo a la tipografía. Vuelve aquí a la configuración del sitio y ve a la sección de tipografía Aquí es donde estamos eligiendo la tipografía y las fuentes para ser utilizadas en todas las partes del sitio web Nuevamente, solo asegura consistencia, diciendo que si este es el tamaño y el peso de nuestro encabezado H one, siempre será el mismo siempre que se use eso. Primero, echemos un vistazo a la copia del cuerpo. Este es solo el texto principal. Siempre que hagas grandes bloques de texto, hagamos clic en el lápiz. Es solo configurarlo en una configuración predeterminada. Si querías cambiar eso a otra cosa, da clic aquí. A lo mejor eres como aéreo como fuente, o tal vez quieres que entre ahí una fuente Sera. De nuevo, echa un vistazo a otras fuentes. Echa un vistazo a las fuentes de Google, lugares como ese para ver si puedes encontrar uno que creas que funciona para ti y el servicio que estás tratando de brindar. Voy a elegir una fuente más de Google que he usado en otra parte que se llama Roboto Roboto. Roboto. Ahora echemos un vistazo a H one. Ese es el rubro que ya armamos por aquí. Simplemente copiemos lo que hicimos por esa, porque sé que ahí funciona. Y solo significa que puedo usar eso en todo el sitio web. De nuevo, da clic en el icono del lápiz. Entonces, en lugar de por defecto, escojamos entonces tratar de recordar lo que hiciste antes. Obviamente, solo puedes regresar y luego revisar el rubro que pones aquí. Pero si mi memoria me sirve correctamente, creo que puse eso en 45 pixeles. Entonces el peso fue semi negrita transforma mayúsculas. Y luego el otro que cambié fue el espacio de letras en el que puse 22.5 píxeles Ese es el mío. Ahora puedes jugar con esto y puedes configurar 234. Si tienes un sitio web muy basado en texto, quieres múltiples encabezados diferentes porque entonces es un encabezado con un subtítulo y luego un subtítulo No obstante, para este sitio, creo que sólo voy a mirar el H uno y el H dos. Sé lo que he configurado para el H uno, y voy a hacer el H dos igual. No obstante, sólo voy a hacerlo un poco más pequeño. De nuevo, entra en H dos, da clic en tu pequeño lápiz, elige la familia y el tamaño. Bueno, el último, ¿qué tenemos? Teníamos 45. Pongamos éste en, quizá a los 30. Pero el peso, la misma transformación, espaciado entre letras mayúsculas, 2.5 Juega con esto, mira lo que funciona para ti, y lo descubrirás más adelante Cuando estás jugando con H uno y H dos, si sientes que no es del todo del tamaño correcto, lo necesitas un poco más grande o un poco más pequeño. Puedes entrar aquí y cambiarlo. Cuando lo cambies una vez aquí , cambiará en todo el sitio web. Así que ten una buena jugada con esto. Haz que tus colores y tu tipografía funcionen de la manera que quieres que funcione para tu Y luego haz clic en Guardar cambios. Una última cosa para verificar son tus fuentes globales también. Sí, hemos configurado el cuerpo del texto, y hemos configurado el H uno y H dos. Pero solo asegúrate de que tu tema esté al tanto de qué fuentes, qué tipografía estás usando aquí Volvamos a Configuración del sitio y vayamos a Fuentes globales. Es solo esta sección de aquí abajo la que tenemos que asegurarnos de que esté configurado para funcionar de la misma manera el texto que hemos configurado en la sección de tipografía Da clic en uno de estos o en tu menú de aquí, simplemente haz clic en el lápiz. Solo asegúrate de que estén establecidos para la tipografía y las fuentes que estamos usando en otro lugar del En esta, vamos a elegir a Anton para primaria, On para secundaria luego texto. Bueno, eso ya está configurado para Roboto como lo es Axon. Solo significa que el tema es consciente del hecho de que estamos usando estas fuentes en todo el sitio. Guardemos esos cambios y luego volvamos al editor. 8. Galería de deslizador de imágenes: Ahora que la tipografía y los colores globales están todos preparados, vamos y terminemos esta sección de introducción En primer lugar, obviamente tenemos un título aquí, pero nuestro cuerpo copiable, es solo laurum Tenemos que agregar nuestro propio cuerpo copia aquí. cursor sobre el texto, haga clic en ese, haga clic en el icono o use su estructura por aquí Ya sabes cómo manejar todo esto. Después en el pop up de aquí a la izquierda, estamos editando el contenido. Ahora el texto que ha entrado aquí ha entrado automáticamente como texto de párrafo. Puedes cambiar eso si quisieras usar diferentes elementos. Entonces podríamos elegir encabezamiento uno, luego lo cambia a encabezado uno que configuramos en sección de tipografía anterior o encabezado dos Eso es lo que instalamos ahí también. No obstante, solo queremos párrafo, porque solo queremos que aquí se utilice copia corporal regular . Hemos elegido la tipografía para eso y hemos elegido el color para Sólo entra aquí, borra el texto que ya está ahí, y luego apenas empieza a escribir en tu texto. Lo mejor es escribirlo directamente porque entonces no habrá otros problemas con los textos que puedan haber sido copiados de otra parte. Pero te voy a mostrar lo que quiero decir con eso. En lugar de escribirlo, he escrito todo el texto ya he escrito todo el texto y voy a copiarlo y pegarlo en esta caja que realmente ha salido. Bien, mirándolo, sin embargo, si has escrito esto dentro un documento de Word o lo has tomado por correo electrónico, en realidad puede haber recogido código HTML adicional que no es necesario aquí. Podría cambiarlo automáticamente a diferente tipografía o ponerlo en diferentes espacios donde no sean necesarios Si tienes ese problema o si tienes algún texto y quieres borrarlo así que es seguro usarlo aquí. Bueno, solo Google, un sitio como este, cualquier cosa que sea un stripper HTML, obviamente aquí hay montones de anuncios Cierra esos. Si solo pegas una copia que quieras usar en este sitio web en el lado izquierdo, haz clic en tira HTML, descubrirás que la salida en el lado derecho ha borrado cualquier código HTML que no sea necesario allí Dije que éste ya estaba bien de todos modos, Pero por si acaso voy a copiar la salida y volver a mi sitio y pegar eso en. Todo eso se ve genial. Estoy muy contento con esta configuración hasta ahora. Va a dar click sobre mi flecha. Creo que sí se ve genial, pero tal vez en realidad quiero que la imagen del lado derecho sea un poco más grande. Para ello, sólo voy a necesitar cambiar el tamaño de los dos contenedores que tengo aquí dentro. Recuerdas cuando configuramos esto antes de tomar la decisión de uno un poco más pequeño la izquierda y uno un poco más grande a la derecha. Si haces clic en cada uno de estos contenedores, eliges disposición, podrás ver el tamaño exacto de estos. El más pequeño es 33.3 entonces el más grande es 66.6 es un tercio y 23 Si quisiera hacer el contenedor de imagen un poco más grande, simplemente haga clic en ese contenedor en estructura, pase al ancho y escriba un número diferente. Digamos 70, tal vez incluso más que eso, tal vez 75. Sé que no es una gran diferencia, pero creo que eso funciona mucho mejor. Me gusta la forma en que Wolfgang y Music ahora están sentados en dos líneas Sin embargo, el texto es un poquito demasiado pequeño. Simplemente haga clic en el icono de aquí. Ir en una tipografía, Haga clic en su lápiz. Por eso en realidad configuré ese como 40, y luego en mis ajustes de tipografía, lo dije como 45 Creo que en mi cabeza deberían haber sido 45, así que sólo voy a cambiar ese a 45. Ahí vamos. Creo que eso funciona muy, muy bien. Creo que eso es hacer un mejor uso del espacio cuando empiezas a crear tu propio sitio, solo juega con eso. Todo se reduce a la cantidad de texto que tienes aquí, la longitud de tu encabezado, el tipo de imagen que quieres usar, el espacio. Volvamos al editor después escojamos la imagen que queremos usar. Por aquí a la derecha, nuevamente, basta con hacer clic en la imagen de aquí a la izquierda. Ir a Editar imagen y luego ir a Mediateca. Estoy buscando algo peculiar para entrar aquí que funcione con mi pequeña introducción A mí me gusta este con la pequeña luz LED. Eres lo que escuchas . Probemos esa. Sí, creo que se ve genial. Ocultemos el panel. Creo que es un buen flujo de la sección superior a esta sección porque está representando el negro y el rojo que estamos usando aquí arriba. Otra cosa a verificar cuando dejas caer la imagen está por aquí a la izquierda donde dice Editar imagen es la resolución de la imagen. Haz clic en este menú desplegable y verás muchas opciones diferentes. La razón por la que quieres jugar con esto es que quieres que llegue al lado derecho no demasiado grande y no demasiado pequeño. Si es demasiado grande, ralentizará la carga de tu sitio web. Si es demasiado pequeño, bueno, simplemente se verá mal. Déjame mostrarte. Si elijo la miniatura, se ha ido diminuta. Así es para este sitio web. Entonces si voy a éste, la resolución es superior a 2000 píxeles por 2000 píxeles, ve absolutamente bien. Sin embargo, es simplemente demasiado grande para esta sección, porque como recordarán, el ancho de nuestro sitio web era de 1,140 píxeles No hace falta que sea tan grande. De hecho, el ajuste por defecto que tenía encendido era grande 1024 por 1024. Sólo tienes que seleccionar eso si estás satisfecho con esa sección. Siempre es bueno subir aquí y vamos a guardar el borrador. Creo que esto funciona muy bien como introducción. No obstante, creo que necesita un poco más. Creo que necesita una capa extra. Simplemente no creo que una imagen sea suficiente porque hacemos muchas cosas diferentes en la tienda de música. Quiero presumir un poco más. Aquí hay algunas opciones. Una es simplemente incluir múltiples imágenes, una encima de la otra, completamente apiladas. Sin embargo me gusta el espacio que se está llenando con esto. Ahora no quiero que ocupe más espacio de lo que es la única imagen. Lo que vamos a hacer es cambiar esta sola imagen a un carrusel de imágenes Eso serán múltiples imágenes diferentes deslizan de una a la siguiente. Para ello, sube aquí a tu elemento plus add. Desplázate hacia abajo hasta la sección general y elige este que es carrusel de imágenes Entonces arrastra eso a ese contenedor. Ahora cuando arrastres todas estas cosas, verás que estas pequeñas líneas que surgen significan que puedes ponerlas por encima o por debajo de algo entre algo. Bueno, esta es para reemplazar la imagen que está ahí. Solo asegúrate de ver tu línea rosa arriba o abajo. Vamos a elegir arriba. ¿Quieres que este carrusel se siente aquí? En realidad ya no quiero que esta imagen esté ahí. Una forma rápida y rápida de eliminar este clic derecho, elija Eliminar. Eso lo podemos hacer aquí arriba en la estructura. Haga clic con el botón derecho, elimine. Ahora vamos a editar este carrusel. Da clic en el carrusel, o eligelo aquí en tu estructura Eso sacará a colación el menú de contenido aquí a la izquierda. En primer lugar, bueno, tenemos que seleccionar algunas imágenes, ¿no? Da click en Agregar Imágenes, Te mostrará nuevamente la mediateca, la imagen que ahí teníamos. Todavía me encantaba esa imagen y quiero que esa sea mi primera imagen. Voy a seleccionar esa. Entonces quiero incluir un par de imágenes que muestren las dos cosas principales que hacemos en esta tienda de música. En primer lugar, instrumentos, vendemos guitarras. El tercero, voy a elegir esta imagen vinil porque también vendemos música en la tienda. Creo que tres es un buen número para esto. Juega con esto tú mismo. Mira cuántos quieres incluir ahí. No quieres demasiado. No quieres 100 imágenes. Quieres que sea breve y breve. Haga clic aquí, cree una nueva galería y, a continuación, haga clic en Insertar galería. Como pueden ver, las tres imágenes del carrusel han aparecido por aquí Vamos a desplazarnos un poco hacia abajo para que tengamos una mejor visión de esto. O si tu estructura se está interponiendo en el camino, puedes moverla hacia arriba. O si quieres deshacerte de él, puedes cerrarlo por aquí, pero tal vez simplemente moverlo a un lado donde no se interponga en el camino. A lo mejor de este lado, pero creo que en realidad está bien ahí. Creo que tengo suficiente espacio. Primero sube el tamaño de la imagen, otra vez, demasiado pequeño para lo que tenemos aquí. Miniatura, Demasiado pequeña. Cambiemos eso a lo que teníamos antes. La versión grande, 1024 por 104, todas han ido más grandes. Sin embargo, no quiero que las tres imágenes aparezcan a la vez, solo quiero que se muestre una. Y luego quiero que se deslice automáticamente al siguiente por aquí, donde dice diapositivas para mostrar. Asegúrate de que estamos en el escritorio. Entonces en lugar de por defecto, vamos a elegir uno. Sólo quiero que muestre una sola imagen a la vez. Como puedes ver aquí, se desliza automáticamente de uno a otro. Creo que eso es realmente perfecto en términos de velocidad y de todo. También como puedes ver, aquí hay pequeñas flechas. Eso significa que cuando un usuario llega a la página, puede desplazarse por ella a su propia velocidad. Les da ambas opciones automáticamente mostrándoles que hay algo más y permitiéndoles desplazarse. En cuanto a estas flechas y estos puntitos en la parte inferior. Bueno, ten una jugada con la navegación por aquí. Se establece automáticamente en flechas y puntos. Si solo quieres las flechas, elige esa. Y obviamente lo mismo con los puntos, o no puedes tener nada. Pero me gustan las flechas y los puntos. Vamos a hacer clic en esta flecha. Ocultar el panel. Creo que se ve genial. Creo que mientras me desplazo hacia abajo desde aquí arriba, veo entonces este carrusel animado que me muestra múltiples cosas diferentes que puedo esperar si me dirigía a Wolfgang Música creo que solo quiero agregar un elemento extra aquí. Sólo quiero mostrarte cómo hacer otra cosita genial para dividir texto básicamente como tenemos aquí. Tenemos el encabezado y luego tenemos la copia del cuerpo. Yo sólo quiero poner una línea entre los dos. Voy a poner en lo que se llama un divisor. Este es otro elemento aquí. Y elemento luego elija del divisor de sección básico y luego simplemente arrástrelo sobre. Y nuevamente, recuerda que las líneas rosadas te mostrarán dónde va a caer. Y lo quiero entre los dos bits de texto. Déjala ahí, así es como se ve eso. Simplemente significa que hay una división extra entre las dos secciones de texto. Pero no sé, no estoy tan contento con el tamaño y el espacio. Solo tengo un poco de juego con eso otra vez, solo da clic en tu divisor, haz clic en el ícono de tu lápiz. Entonces lo primero con lo que puedes jugar aquí es el elemento estilo o tiene múltiples estilos diferentes, algunos de los cuales son un poco más locos que otros, que puedes tener una línea rizada, puedes tener curva, o puedes volverte bastante loco y tener abetos No sé qué más, Zigzags, Hay un montón de opciones diferentes Elige uno que creas que es mejor para representar tu servicio y tu producto que estás vendiendo. No obstante, creo que justo aquí, solo quiero el normal. Sólo una sólida es buena anchura, creo que es un poco demasiado grande. No quiero que vaya hasta el borde de la copia del cuerpo. Entonces lo va a cambiar al 50% Eso es mejor. Un poco más pequeño que el estilo. Vamos hasta aquí. En primer lugar , es un poco delgada. Sólo voy a subir que está en una sola línea Por el momento, podría simplemente jugar con esto y ponérselo a algo loco, o el más grande es diez. Pero creo que tal vez tres es bueno ahí. 3.5 Ahora tres, me gustan tres. Mi primera opción entonces solo pienso que hay un poquito demasiado espacio entre los dos bits de texto y la línea. Voy a cambiar la brecha. Ese es solo el espacio alrededor de la línea. Sólo cambiemos eso a cinco. Ahí vamos. Eso me gusta. Eso se ve mucho más fuerte ahora. A lo mejor es sólo un poco negro demasiado oscuro. Quiero que sea un poco más ligero, no más fuerte que el texto. De nuevo, puedes elegir un color personalizado. Elige tu color primario si quieres. No obstante, todavía quiero un negro. Así que solo voy a hacer clic en el seleccionador de color y simplemente tirarlo por aquí a esto Sí, creo que fue genial. Me encanta. Creo que lo que necesitamos ahora es un poco más de información debajo de esta introducción inicial, más información sobre lo que hacemos en la tienda. Volvamos al editor. Lo que les voy a enseñar a ustedes cómo hacer aquí es cómo grilla. Recuerda que en esta sección superior usamos un contenedor y teníamos dos contenedores dentro de ese contenedor principal. Lo que permitió fue para diferentes anchuras inconsistentes entre los dos contenedores Empezamos con un tres y luego 23, y luego pude entrar y editar el ancho de este, que editó automáticamente el ancho de este 12. No obstante, para esta siguiente sección, quiero tres columnas que tengan exactamente el mismo ancho. Por lo tanto, en lugar de elegir un contenedor, elegiríamos una cuadrícula. Haga clic en el signo más y elija la cuadrícula. Ahora tienes diferentes opciones de estructura aquí. El que estoy buscando son tres columnas establecidas de esta manera. Sin embargo, si lo que quieres no se puede ver aquí, no te preocupes, puedes simplemente tirar cualquier tamaño y luego ir a editarlo tú mismo Más adelante, sólo voy a elegir tres columnas. Ahí vamos. Ahora lo que tenemos aquí es una grilla. Dentro de la rejilla hay tres columnas separadas. Lo que queremos hacer es sumar lo mismo en tres de estos. Lo que quiero que sea es una imagen con texto a continuación. Pasemos a Add Elements. Nuevamente, comencemos con un ahora abajo que me gustaría algún texto. Vamos a Agregar elemento. Y luego toma tu editor de texto habitual y suelta eso debajo de la imagen. Ahora quiero que vaya abajo, pero como pueden ver ahora mismo, no me está dando esa opción. Si miro dónde están las líneas rosadas, es sólo a la izquierda y a la derecha. Si lo dejo caer en cualquier parte, realidad va a entrar en la siguiente columna. Eso es porque solo puedes tener un elemento dentro de cada sección de la cuadrícula. ¿Cómo tenemos dos cosas? Bueno, eso es bastante sencillo. Bastante fácil. En primer lugar, vamos a eliminar esos dos elementos. Lo que necesitamos, similar a lo que teníamos antes, es básicamente un contenedor Dentro de cada una de estas columnas, me ha caído un contenedor. Debido a que es un contenedor, significa que puedo dejar caer múltiples elementos diferentes dentro de ese contenedor. Esto puede parecer un poco confuso, pero vamos a intentarlo de nuevo, lo que intentamos hacer antes, antes que nada, hice clic en agregar elemento Después se me cayó una imagen. Lo que estoy haciendo aquí, como pueden ver por aquí en la estructura, es que se me ha caído una imagen dentro un contenedor que está dentro de una sola columna de la cuadrícula. Ahora debajo de esa imagen, solo quiero que vuelva a tener el editor de texto. Haga clic en un elemento luego colóquelo en Editor de texto. Ahí vas. Ahora se puede ver que ha funcionado. Lo que vamos a hacer ahora es básicamente copiar lo que tenemos aquí. Lo que voy a hacer es simplemente hacer clic en el contenedor. Quiero que este contenedor exacto aparezca tres veces porque a pesar que van a tener diferentes imágenes y texto, la configuración de este es idéntica. Hover ovie usted. Contenedor clic derecho. Simplemente elija duplicar. Lo que se hace es que se deja caer ese contenedor en la siguiente columna de la cuadrícula. Duplica otra vez, y ahí tienes. Ahora todo lo que tenemos que hacer es seleccionar la imagen que quieras ir en cada una y actualizar nuestro texto. Empecemos de nuevo con imágenes, estas son cajas de imágenes individuales. Simplemente haga clic en su imagen y luego vaya por aquí a la izquierda para editar la imagen. Nuevamente, mi elección de imagen aquí es solo para mostrar la variedad de servicios que ofrecemos en la tienda de música. Voy a tratar de conseguir una variedad diferente a la que teníamos antes. Este es muy bueno porque este es el lado más técnico del equipo de música. Seleccionemos esa para la primera columna, luego para la siguiente. Veamos qué más podemos elegir que sea un poco diferente. Creo que este de aquí se ve genial. Eso son unos auriculares. Ese es otro servicio que ofrecemos en la tienda. Seleccionemos eso entonces. Para la última columna, creo que tal vez esta, que es una imagen de banda en vivo, ahí no vendemos bandas en vivo. Pero creo que es solo una buena representación de lo que podemos ofrecer a los clientes para ayudarlos con sus shows en vivo. Seleccionemos esa. Ahí vamos. Las tres imágenes tienen exactamente la misma proporción, donde son de tres en dos. Entonces eso está funcionando perfectamente. Todo lo que necesito hacer ahora es agregar mi texto de nuevo. Haga clic en Texto, haga clic en el icono del lápiz, o venga aquí a su estructura. Como puede ver, tenemos una rejilla con tres contenedores individuales dentro de ella. Si quieres el texto dentro de uno de ellos, desplázate ese contenedor y elige editor de texto. Pero yo solo creo que simplemente hacer clic en él en la página es probablemente la forma más fácil. Ya escribí mi texto, y he despojado cualquier código HTML, va a pegar cada bit de texto aquí. En esta sección, la alineación es muy importante. Si bien tenemos la misma proporción en las tres imágenes, la longitud del texto es aproximadamente la misma para cada una. No quieres una, eso es solo un par de palabras. Y la siguiente son 100 palabras. Trate de mantenerlos aproximadamente alrededor de la misma longitud y luego estará muy bien alineado en la parte inferior del texto. Bien, echemos un vistazo a éste. Ocultar el panel. Creo que se ve genial. Creo que es perfecto que vayamos de esta primera sección de héroe de apertura a la imagen deslizante aquí abajo con la introducción inicial. Entonces entramos en la grilla. Sólo una cosita diminuta que puedo ver aquí, este sería un ojo de diseñador que está captando en este si lo ves. Bien hecho. Apenas el espacio, la alineación de esta imagen aquí y la alineación de ese texto. Ahí hay un poco de espacio extra. Voy a repasar y editar eso. Volvamos al editor. Como pueden ver, al pasar el cursor sobre el contenedor, hay un poco espacio extra por aquí Esa es una configuración predeterminada dentro de Elementor. Siempre lo configurará para que haya una pequeña brecha de píxeles alrededor de todo. Un pequeño acolchado, si se quiere. Lo que vamos a hacer es editar este contenedor. Simplemente va a hacer clic en el contenedor, luego ir a Avanzado. Todo lo que quiero hacer es asegurarme de que la sección de relleno esté toda puesta a cero. Ahí vas. Puedo entrar en cada uno y configurarlo manualmente para que quede el mismo espacio alrededor de cada uno. O una forma rápida de hacerlo, cursor sobre el contenedor que sabes que es correcto Haga clic derecho en copiar. Después va el contenedor que quieres cambiar. Haga clic derecho allí y elija Pegar estilo. puede ver que lo cambió automáticamente porque el estilo para este contenedor era tener un panning de cero Se ha leído que dentro de este contenedor, porque he copiado estilos, pegado los estilos aquí, automáticamente cambia a exactamente lo mismo Juega con eso. A veces eso va a funcionar para ti, a veces no solo va a ver lo que puedes conseguir funcionando. Yo sólo voy a mover esta cosa de la estructura por aquí también. Recordé que no lo hice en esta sección superior. Si bien este es un alineamiento aquí en el lado izquierdo, éste tiene el espacio. Así que vamos a ir a editar contenedor o pegar de nuevo el estilo. Y ahí tienes. Se acaba de sacar ese pequeño hueco por ahí. Y ahora se puede ver que perfectamente alinea ahí arriba, que perfectamente alinea ahí. Impresionante. Vamos a mover la estructura nuevo por aquí y guardar el borrador. 9. Sección animada Acerca de NUEVO: Bien, tu sitio web ya se ve genial. Y esa fue una muy buena sección de introducción. Ahora creo que necesitamos entrar en más detalles sobre su empresa y su servicio. Voy a empezar a crear una sección a la que voy a llamar la sección Acerca de. Lo que haremos aquí, comenzaremos a agregar un nuevo contenedor, haga clic en el letrero y elija flex box. Voy a dos columnas aquí para esto. Ahora lo único que vamos a hacer de manera ligeramente diferente aquí es el ancho del contenedor, el contenedor principal de contención. De nuevo, simplemente haz clic en tus puntitos en el medio ahí para editar contenedor. Entonces ven aquí al menú de la izquierda. Asegúrate de tener los diseños seleccionados. La única parte que vamos a cambiar aquí es esta parte donde dice ancho de contenido. Normalmente aparece automáticamente en caja y en caja a 1,140 píxeles, ya que esa es la Lo que vamos a hacer con éste, sin embargo, es de ancho completo. Como puede ver aquí abajo, estas columnas internas se han estirado hasta el borde antes de que terminaran aquí. Ahora van al mismo borde de la página. Eso es lo que queremos hacer con el ancho. Queremos que llene la página completa. También vamos a jugar con la altura. Intentemos que llene toda la página con altura también. La mejor manera de hacerlo es entrar en el menú desplegable de aquí a la altura mínima y elegir altura vertical VH. Escriba uno ya que será 100% El plan que tengo para esta sección sobre es tener otra imagen fuerte en el lado derecho y luego texto en el lado izquierdo. Lo que vamos a hacer aquí es cambiar el fondo a ambas columnas internas. Vamos a traer de vuelta la ventana de la estructura. Ahí vamos. Este es nuestro contenedor principal y luego los dos contenedores internos más pequeños. Escojamos primero el contenedor de la derecha, haga clic en ese, o haga clic en el contenedor en sí, o el cuadro gris de la izquierda. Entonces por aquí en el lado izquierdo, elige estilo en fondo. Nuevamente, da clic en el clásico y elige una imagen. La imagen que quiero usar aquí, bueno, quiero que esto sea sobre el cliente. Quiero mostrar a uno de nuestros clientes dentro de la tienda tocando la guitarra. Dejemos caer esa . Ahí vamos. Vamos a mover la estructura por ahí. Mismo tema que teníamos anteriormente con cómo está llenando la caja. Nuevamente, estos son los ajustes predeterminados. Ven aquí a la izquierda para editar el estilo del contenedor. Nuevamente, vamos a cambiar los ajustes en la posición aquí, digamos centro, centro, repetir, no repetir, y luego mostrar el tamaño de la cubierta. Ahí vamos. Ahora está llenando toda la caja. Sin embargo, es una cosecha bastante extraña en eso. Ahora estoy pensando, no necesito que la altura sea 100% Eso probablemente sea demasiado grande para la cantidad de texto que quiero ejecutar en el lado izquierdo, hagamos clic en los Puntos aquí arriba para Editar Contenedor, asegúrate de que el diseño esté seleccionado. Y entonces tal vez cambiemos la altura vertical al 75% Ahí vamos. Creo que esa es una visualización mucho mejor de la imagen que he elegido usar aquí. Ahora vamos a mover Estructura de nuevo sobre este lado. Entonces escojamos de nuevo este contenedor. Escogelo en su menú Estructura, o simplemente haga clic en el contenedor de aquí en el lado izquierdo, elija Estilo Clásico. Ahora lo que quiero aquí es un fondo coloreado porque de nuevo, eso ayudará a la división entre la sección en la parte superior que tendrá un fondo blanco y la sección de abajo cual también tendrá un orden de fondo blanco. Con eso seleccionado, ven aquí y haz clic en este ícono de globo predeterminado. Y elige el color primario. Elige el color que quieras aquí, pero voy a elegir el color primario Como creo que es una bonita división del blanco de arriba a una sección de color. Ahora como puedes ver desde arriba, nos desplazamos hacia abajo desde este fondo coloreado hasta una sección blanca hasta esta sección en negrita con un fondo coloreado y una imagen de sangrado completo Pocas cosas que sí necesito cambiar aquí es el espacio entre la sección anterior y esta sección. Y también estas fronteras de aspecto extraño que están por aquí. Si hago clic en la flecha, veamos cómo se vería en una versión en vivo de la página. Sí, como puedes ver, aquí todavía hay bordes blancos alrededor de cada sección. A ver si podemos sacarlos. Echemos un vistazo al contenedor principal. A resaltar el contenedor principal y elegir sus puntos en la parte superior, o elegirlo en el menú Estructura. Después por aquí a la izquierda, escojamos Avanzado. Solo pongamos el margen y el relleno todo a cero. Debió haber sido el acolchado. El relleno se configuró automáticamente a tal vez diez píxeles. Ahora que he puesto eso a cero, ocultemos el panel. Ahí vamos. Ahora va al borde. No tenemos un espacio en blanco en el borde. Si alguna vez ves eso en alguna de tus configuraciones, simplemente juega con margen y relleno en el contenedor o en los contenedores internos. Lo que necesito es espacio encima de esta sección, y también voy a necesitar espacio debajo de la sección. Vayamos por aquí al margen Otra vez, estoy editando el contenedor principal. Vamos a vincular los valores luego vamos 100 en la parte superior y 100 en la parte inferior. Veamos cómo se ve eso ahora. Sí, ese es un espacio mucho mejor entre esta sección blanca en la parte superior. También es consistente en términos del espaciado aquí, espaciado aquí, y espaciado aquí, que de nuevo corre en la parte inferior. Mi única preocupación sobre esto es que usando nuestro color primario muy audaz ahí dentro, sí funciona y se ve genial. Pero creo que quiero que sea un poco más ligero. Todavía quiero dividir entre esta sección y las secciones blancas arriba y abajo, pero solo voy a jugar con el color de opacidad, color primario que he agregado aquí Nuevamente, editemos este contenedor. Haga clic aquí en Estructura. Haga clic en el propio contenedor. Vamos a Estilo. Esto es lo que configuramos con el tipo de fondo clásico con este color primario. Haga clic en el color en sí por aquí, el color rojo. Entonces esta pequeña barra de aquí abajo que jugará con tu opacidad que sea visible Simplemente puedes arrastrarlo de izquierda a derecha. Para eso, puedes simplemente jugar por aquí arriba con el seleccionador de color y elegir un color ligeramente diferente, pero eso va de marca Estamos cambiando la opacidad de este color. Ese sigue siendo el color primario que hemos configurado. Sigue siendo el mismo código hexadecimal. Son solo los números los que están cambiando junto a él, esencialmente están haciendo referencia a un porcentaje Vamos a seguir arrastrándolo hacia abajo. Creo que estoy mirando alrededor del 20% Tal vez este 121, 21% Déjame ver cómo se ve eso ahora. Creo que es un buen flujo de arriba hacia abajo a esta sección, la sección blanca y luego a esta. Es suficiente una división entre los dos colores ahí, como una sección separada, pero no es demasiado intensa, ni demasiado llena. Volvamos. Lo que me gustaría dejar caer aquí son dos columnas de texto separadas. La columna de la izquierda, voy a tener un número 01 en la siguiente sección, debajo de esta, vamos a tener el número dos. Número tres. Número cuatro, Pasaremos a eso más tarde. Aquí, quiero dos columnas de texto. Uno que tiene un 01 grande muy audaz, luego otra columna al lado esa que tiene la palabra guitarras, y luego alguna breve información sobre el servicio de guitarra. Ahora vamos a subir a un nivel extra de contenedores aquí. Tenemos dos contenedores dentro de un contenedor. Ahora quiero poner otros dos contenedores dentro de este contenedor de la izquierda. Volvamos a nuestro plus aquí arriba y agreguemos un elemento. Dejemos caer un contenedor dentro este primer recipiente rojo que está sentado en la parte superior de ahí. Agreguemos otro contenedor debajo de eso aquí, ahora tenemos dos contenedores dentro de este contenedor. Esto funcionaría si configuras tu texto de esta manera, la forma en que está apilado, la forma en que tenemos 01 en la parte superior y luego guitarras y la información a continuación. Pero no lo quiero así. Me gustaría que estuvieran alineados uno al lado del otro. Quisiera una columna a la izquierda y una columna a la derecha. Lo que tenemos que hacer aquí es editar el contenedor en el que se encuentran estos dos contenedores. Nuevamente, pasemos a nuestro menú Estructura por aquí. Este es el contenedor principal entonces. Esto, como se puede ver, por cierto, se resalta es el contenedor de texto. Este es el que quiero editar , estoy dando click aquí. Luego pasará a maquetación. Estoy viendo esta sección aquí, dirección. Esto es decir que cualquier cosa que esté dentro ese contenedor corre horizontal o verticalmente, ya que están apilados uno encima del otro. Por el momento que es vertical, voy a cambiar esa horizontal. Ahí vamos. Se puede ver el cambio que ha ocurrido ahí. Las dos columnas están ahora sentadas a la izquierda y a la derecha una de la otra. Ahora, agregaré 01 a esta columna de la izquierda, y luego Guitarras y la información a esta columna de la derecha. Ahora vamos a empezar a agregar texto a las dos columnas que tenemos aquí. Empecemos por la columna de la derecha. Esa es la más fácil. Queremos comenzar con un rubro de Guitarras. Voy a dejar eso aquí. Se establece automáticamente en H dos, y eso es lo que estamos buscando. Simplemente escribamos en la palabra guitarras en cuanto al color ahí. Bastante como el rojo, pero creo que solo quiero que sea el color normal del texto. Voy a ir a Estilo y luego clic en este botón Principal y luego elegir Texto. Eso me gusta. Ahora vamos a Agregar Elemento nuevamente en la parte superior aquí. Y solo deja caer en un editor de texto normal. De nuevo, eso acaba de caer en el texto estándar lurum ipsen No obstante, tengo una copia de todo el texto que quiero usar aquí. El HML ha sido despojado de éste, claro, voy a pegar eso aquí Ahora lo que quiero es el número uno o 01 del lado izquierdo. Lo agregaremos como otro rubro. Vamos a subir para agregar elemento en la parte superior aquí. Y caer en otro rumbo por aquí en el lado izquierdo. Co de nuevo se baja en una H dos, lo cual está bien. Y voy a cambiar eso a 01. En cuanto a la exhibición que quiero aquí, quiero que esté sentada más cerca del texto del lado derecho. Por el momento automáticamente entró como texto alineado a la izquierda. Pero puedo cambiar eso. Puedo hacer que este texto, el 01, se alinee al otro lado de este contenedor. Para hacer eso, voy a desplazarme hacia abajo aquí hasta donde dice alineación y elegir el lado derecho para esto perfecto. Ahora con estilo aquí, sí quiero editar esto. Voy a subir al estilo. En primer lugar, el color del texto, tampoco quiero que sea rojo sólido. Voy a hacer click en el color por aquí, elige el seleccionador de color Y en realidad voy a seleccionar blanco puro ahí en ese tamaño. No es particularmente legible. Vamos a la tipografía. Haga clic en el icono del lápiz aquí. Estoy contento con un, estoy contento con el peso aquí. Es sólo el tamaño. Esto tiene que ser mucho más grande. Así que sólo voy a arrastrar esto de una manera hacia arriba. Voy a ponerme bastante grande en esto, tal vez hasta 200, parece que 200 es el máximo al que te va a dejar ir. Es en términos de usar este arrastre en barra. Si quieres ir mucho más grande, puedes simplemente resaltar el texto aquí y escribir en un número. Escribamos en 800. Va a ir 800, en realidad no lo queremos de ese tamaño. 200 estuvo bien, pero así es como puedes cambiar el tamaño del texto a lo que quieras. Cambiemos eso de nuevo a 200. Eso se ve genial. Creo que solo necesita un poco más de espacio entre el cero y el uno. Juguemos de nuevo con el espaciado entre letras aquí. Arrástralo un poco. Creo que voy a ir al final del bar aquí también. ¿Diez? Sí, creo que se ve genial. Ocultemos el panel. Eso me gusta mucho. Me gusta la forma en que tenemos 01 sentado aquí, y luego eso rueda en guitarras y luego vemos la imagen. Sin embargo, la alineación y el espaciado en esto no es del todo correcto. Volvamos al editor. En primer lugar, no quiero que el texto se siente en el mismo de este contenedor. Quiero que se siente en el centro. Nuevamente, una forma muy rápida de ordenar este es decir que todo el contenedor rojo debe estar centralizado, o todo el contenido dentro ese contenedor debería estar centralizado. Nuevamente, podemos simplemente dar clic en el contenedor rojo, dar clic en el cuadro gris superior izquierdo, o elegirlo aquí en Estructura. Entonces simplemente, quiero ir a esta sección de aquí cuando estemos en el diseño de Editar Contenedor y decir, Alinear elementos al centro. Tan simple como eso. Echemos un vistazo a esto. Sí, me encanta cómo se sienta eso en el centro de esta caja. El único problema que tenemos es con lo cerca está el texto aquí de la imagen de la derecha. Cambiemos el relleno. Cambiemos el relleno dentro de este contenedor interno. De nuevo, puedo repasar a esta sección, clic en el cuadro gris, o elegir aquí en Estructura. Después por aquí en el contenedor de edición de la izquierda , vaya a Avanzado. Vinculemos todas estas secciones. Entonces a la derecha, digamos que queremos tal vez 50 píxeles, tal vez un poco más, tal vez 100. Echemos un vistazo a eso. Creo que ese es un buen espacio entre el texto y la imagen, y todo esto se sienta muy bien juntos. Creo que es un gran flujo desde aquí arriba donde hemos apilado imágenes con texto a continuación, pasando a esta donde tenemos el número a la izquierda, imagen de texto de introducción de guitarras a la derecha. Eso se ve genial. Apenas dos cosas más que quiero hacer en esta sección. Uno de estos es de nuevo, sólo un poco de verso de diseñador de dolor de cabeza cosa. Simplemente siento que hay demasiado espacio entre las guitarras del título. Y luego el texto de abajo Abre este contenedor y vamos a maquetación. Eso es porque por defecto, elementor agrega un hueco de 20 píxeles entre cada columna y fila Obviamente estos están en filas, puede ver el espacio entre los dos elementos aquí es de 20 píxeles. Creo que eso es un poquito demasiado. Yo preferiría que fuera diez pixeles. Vamos a escribir diez. Ahí vamos. No parece un gran cambio, pero desde el punto de vista del diseñador, estas son las cosas que nos molestan. Ahora lo único que quiero hacer con esto es animar el texto que podemos ver aquí, el 01 y la información de las guitarras A medida que la gente se desplaza hacia abajo en la página, quiero que cada elemento aparezca una manera diferente ya que estamos en el contenedor de texto principal aquí. Editemos eso primero. Subamos aquí a Avanzado, luego vamos a los efectos de movimiento. Aquí es donde puedes elegir cuál es la animación de entrada para esta animación de entrada de contenedor, es decir, cuando la gente llega por primera vez a esa parte de la página, así es como aparece. Está configurado por defecto en este momento, que básicamente no es nada en este menú desplegable Bueno, aquí tienes muchas opciones diferentes, algunas de ellas están un poco locas. Si bajamos a éste, los bancos buscadores de atención, eso no es una locura. Flash, pero luego obtienes cosas como sacudir la cabeza, Jello, eso es una locura Todo lo que quiero para este es un simple fade in. Vamos a desplazarnos hacia arriba y digamos que se desvanecen. Y eso es todo lo que hará es que alguien se desplace por la página, el texto no está ahí, y luego se desvanece Se puede jugar con la velocidad a la que esto sucede. En esta sección aquí, duración de la animación. Se ajusta automáticamente a la normalidad, pero sentí que era un poco demasiado rápido. Si elijo rápido, bueno eso es súper rápido. Quiero que se ajuste a lento. Eso me gusta. Creo que solo toma un segundo extra solo para aparecer. Esa es la animación que me gustaría para esa sección, pero quiero algo ligeramente diferente para el 01. Volvamos a seleccionar ese contenedor aquí en Estructura. Sube aquí a Avanzado en el lado izquierdo y ve a Efectos de Movimiento. Quiero para este es quiero que aparezca del lado de la página. A medida que éste se desvanece desde un punto de vista estático, quiero que se deslice y aparezca Pasemos a este menú desplegable. Aquí vamos. Tenemos otras opciones de fade in. Podemos decir que se desvanecen hacia abajo. Donde cae así. Izquierda, derecha arriba. Creo que como este elemento está en el lado izquierdo del texto principal, quiero que se desvanezca por la izquierda. Sí, eso me gusta. De nuevo, un poco demasiado rápido. Cambiémoslo a lento. Ahora tenemos diferentes fade ins para cada uno de estos. Guardemos este borrador, luego vamos a previsualizar los cambios solo para ver cómo se vería eso para los visitantes. Esta es nuestra página principal de apertura. A medida que un usuario se desplaza hacia abajo, llegan a esta sección y ahí vamos Solo recarguemos esa. Así, aparecen las guitarras y el texto de abajo. Y luego el 01 se desvanece. Es sutil, pero es otra forma de llamar la atención de tus visitantes a tu sitio web. Realmente llamar su atención sobre lo que haces como servicio. 10. Texto animado creativo: Si has seguido todas las lecciones hasta el momento, ya tienes un sitio web de aspecto muy genial. Tenemos a este héroe genial, luego esta pequeña y genial sección de introducción con las imágenes deslizantes. Después el inicio de nuestra sección Acerca de con 01 guitarras. Lo que me gustaría hacer ahora es configurar 0,203.04 lo voy a hacer de una manera ligeramente diferente a la que tenemos aquí Te voy a mostrar una genial herramienta de animación de texto que quizás no hayas visto usada en otro lugar, pero que se verá realmente genial en tu sitio web. Volvamos al editor. Desplácese hacia abajo aquí. Agreguemos un nuevo contenedor de caja flexible. Escojamos el 50, 50. Nuevamente, 50, 50 es genial porque se alinea con la división aquí entre texto e imagen. No obstante, para este, no quiero que sea de ancho completo, quiero que esté en caja. Lo mantendremos aquí en la sección de diseño como en caja. Y 1,140 pixeles. Lo que tenemos dentro este contenedor principal son dos subcontenedores Para cada uno de estos, voy a configurar una altura mínima en píxeles. Me gustaría que fuera un tiempo mínimo de 500 pixeles. Me gustaría que eso estuviera en ambos contenedores. Simplemente haré clic derecho y copiaré este contenedor. Ve a mi otro contenedor, selecciona el cuadro gris y haz clic derecho al estilo de pegar. Eso solo significa que la altura mínima se cambia automáticamente, 500 píxeles. Ahora lo que quiero aquí para la sección dos, sección tres y la sección cuatro es similar a lo que tenemos aquí, donde tenemos una imagen de introducción, un número, un título, y algún texto corriendo a continuación. Ahora para dividir la pantalla aquí en esta, tenemos texto a la izquierda, imagen a la derecha. Yo quiero hacer lo contrario aquí. Empecemos con la imagen de la izquierda. Volvamos a hacer clic para Editar Contenedor. Da clic en el contenedor o eligelo aquí en tu estructura. Y luego repasar el estilo de nuevo. Aquí vamos a usar una imagen de fondo, verás por qué en un poco cuando empiece a sumar los números. Vamos a elegir clásico, elegir imagen. Voy a ir por tres secciones distintas. En esta segunda sección sobre, voy a hablar de los discos que vendemos, de todos los vinilos Voy a hablar de shows en vivo y luego solo voy a hablar nuestra vibra general de la vieja escuela que obtienes al venir a nuestra tienda. El primero que quiero ver son los discos de vinilo. Voy a agregar esta imagen de la chica buscando a través de algunos discos de vinilo. Seleccionemos eso de nuevo, los ajustes habituales por aquí en estilo. En la posición izquierda, centro, centro, repetición, repetición y cubierta del tamaño de la pantalla. Nuevamente, eso simplemente ajusta automáticamente la imagen al contenedor independientemente de cuál sea la proporción. Si es una imagen cuadrada, si es de tres por 24 por tres, seguirá encajando aquí y todo está centralizado, lo cual es genial para esta imagen ya la niña está en el centro de la toma. Para la columna de la derecha, voy a agregar de nuevo un color de fondo. Elija un contenedor por aquí para darle estilo clásico. Y luego voy a ir de color, voy a usar nuestro color secundario, el dorado. Pero quiero hacer similar a lo que hice aquí arriba con el rojo y hacerlo a menor opacidad Haz clic en el color en sí por aquí, ven al seleccionador de color, luego arrastra este hacia abajo a un nivel con el que estés contento Creo que bastante ligero, se ha ido a uno. Eso me gusta. Creo que se ve genial. Ahora lo que quiero hacer es poner el texto aquí a la derecha. Y para asegurar la consistencia, voy a subir aquí y voy a copiar lo que tenemos. Voy a copiar el título Guitarras y voy a pegar eso aquí que asegura que es exactamente del mismo tamaño y es H dos otra vez, voy a llamar a este discos. Después haré otra copia del texto aquí y la pegaré debajo de los Registros de Word. Una vez más, he copiado el texto del que he despojado el HML, así que voy a pegar eso en Ahora, la exhibición de esto. Muy bien, la forma en que está todo configurado aquí en la esquina. Quiero que esté centralizado. De nuevo, voy a centralizar el contenido del contenedor Haga clic en su contenedor, posiblemente por aquí en estructura. Ve a Layout, y luego centremos el contenido de esa manera. Y centrar el contenido de esa manera. Eso ha empujado todo al centro del contenedor. Lo único que necesito seguir centralizando es este texto de aquí Voy a dar click en el Editor de Texto Editar Texto, ir a Estilo, y luego a la alineación de este texto. Quiero que eso esté centralizado. Eso se ve genial. Lo único es que, de nuevo, el texto está un poco cerca del borde aquí. Voy a cambiar el relleno de este contenedor. Haga clic en su contenedor, elija Avanzado. Ve a tu acolchado. Creo que tal vez un borde de 50 píxeles a todo debería estar bien. Todos estos han sido vinculados, así que pongamos eso en la parte superior e inferior también. Eso está bien porque aquí tenemos suficiente espacio. Solo significa que si alguien está viendo la pantalla más grande, todavía habrá un espacio par de arriba, abajo, izquierda y derecha para el número sin embargo. Bueno otra vez, voy a subir aquí y copiar esta. Lo que quiero hacer es pegarlo encima de la imagen que puedes ver aquí. Por eso he elegido una imagen de fondo para esta. De nuevo, sólo voy a dar click en el contenedor o dar click en el cuadro gris de aquí arriba. Después pega dentro de aquí que se deja caer en el número 01. Cambiemos eso a 02, entonces solo asegurémonos de que el texto esté centralizado. Entonces dentro del contenedor, nuevo, quiero que todo eso esté centralizado. Vamos a maquetar, enviar al contenido, a la, todo está centrado. Ahora, sin embargo, este texto, bueno, dos cosas quiero cambiar aquí. En primer lugar, realmente no puedo ver a la chica detrás de él. Editemos el cuadro de texto. Haga clic en el icono de su lápiz aquí. Vamos a Estilo. Vamos al texto Color. Haga clic en el icono de color a la derecha. Nuevamente, vamos a cambiar la opacidad de esto. Ahora voy a tirarlo abajo. Eso se ve muy bien porque estamos viendo un número, pero lo estamos viendo encima de la imagen. Algo así funciona muy bien para un número. El número es muy claro, no querrías hacer una larga parte del texto así porque podría no ser visible Pero para algo así como un número, eso es solo una indicación de lo que viene después. Se me cayó eso a 73 ahí. Creo que está bien. Lo único que quiero es que llene más espacio. Vamos a la tipografía. Haga clic en el icono de su lápiz aquí que actualmente está configurado en 200. Como dije antes, eso es lo más alto que puedes ir con el deslizador aquí. Pero pongámoslo hasta tal vez 400 píxeles. Sí, eso se ve genial. Eso me encanta. Creo que es una declaración muy audaz. Dice a los visitantes que son intersección dos de la sección sobre, pero aún puedo ver a la chica abajo y ver qué está haciendo. Ahora lo único que quiero agregar aquí es animación para el título donde dice Records Again, simplemente hagamos clic en el encabezado. Escogelo aquí en Estructura, o haga clic en el icono rosa. Entonces vayamos a Avanzado, vamos a Efectos de Movimiento, luego solo hagamos un fade in. Hagamos un desvanecimiento hacia abajo. Eso me gusta mucho. No obstante, aquí es donde quiero mostrarte algo ligeramente diferente. Hay una forma muy genial y peculiar de hacer que un título se anime A medida que los usuarios se desplazan hacia abajo hasta esa parte de la página, lo que quiero hacer es separar el título en letras separadas. La letra, la letra y la letra C, y hacer que cada una de ellas se animen de una manera diferente Editemos este título y lo cambiemos solo a R. He elegido el encabezado, y voy a ir aquí a Contenido y cambiarlo a R. Entonces lo que quiero hacer es duplicar ese. Escribiré el click y me duplicaré. Y quiero que sea un, el único tema que tenemos aquí es dentro de este contenedor. Si voy a maquetación, verás que dirección es una columna que es vertical. Pero necesito que las letras sean para sentarse una al lado de la otra para correr horizontal. Si yo fuera a cambiar la dirección de este contenedor a horizontal, bueno, sí se sientan uno al lado del otro, pero ahora se sentaron a la izquierda del texto, y quiero que estén encima. Volvamos a cambiarlo a vertical. Y lo que vamos a hacer aquí es agregar otro subcontenedor dentro de este contenedor Haga clic aquí arriba en un elemento, luego suéltelo aquí. Cuando veas la línea rosa, suéltela por encima del texto normal. Lo que quiero para este contenedor es la dirección para que sea horizontal. Entonces ya he creado estas cartas. Vamos a arrastrarlos a este contenedor. Haga clic en el icono y arrastre hacia abajo aquí hasta que vea la línea rosa. Y luego hacer lo mismo con la E. O otra forma más rápida hacer esto es usar el menú Estructura de aquí. Porque sé que quiero llevar este rumbo a este contenedor, para que puedas arrastrarlo ahí abajo, luego lo hace en el orden equivocado. Vamos a mover ese por debajo de este. Se sienta así. Eso se ve genial. No obstante, todavía quiero que esté centralizado. Y también necesito jugar con el espacio que hay entre cada elemento. Aquí, vamos al contenedor. Este subcontenedor, nuevamente, asegúrese de que todo esté centralizado También. Juguemos con las brechas aquí. Nuevamente, el valor por defecto es establecerlos en 20. Lo cambiamos a diez antes, ¿no? Sigo pensando que es un espacio demasiado grande. Vamos a cambiarlo a cero. Ahí vamos. Ahora solo asegurémonos de que tenemos todos los registros de palabras. Otra forma rápida de hacer esto, ven aquí a tu estructura. Elige tu última letra y luego duplica eso. Entonces por aquí, escribe en la carta que quieras que sea. Hazlo suficientes veces hasta que hayamos deletreado el todo, esa es la letra equivocada Ahora que todo dice registros. Ahora la razón por la que elegí hacer esto en letras separadas es porque quiero una animación ligeramente diferente en cada letra, o al menos en la otra letra. Si echamos un vistazo a lo que tenemos en la R, da clic en su R, Ir a Avanzado. Los efectos de movimiento. Ahí se estaba desvaneciendo. Ahora vamos a la segunda letra, y luego cambiemos eso para que se desvanezca. Después se desvanece hacia abajo, D, se desvanece hacia arriba, hacia abajo. D, arriba. Ahora vamos a guardar este borrador y luego echemos un vistazo a la vista previa nuevamente para ver cómo, cómo funciona eso. A medida que nos desplazamos hacia abajo, vemos la animación ahí, y luego esta es la animación ahí. Déjame recargar esa para ti y verás la forma en que la palabra registra aparece así Creo que eso se ve muy bien. Ahora solo volvamos al editor. Juega con el tamaño de todo aquí. Ahora que tenemos toda esta sección 02 establecida, podemos duplicar eso y hacer exactamente lo mismo para la sección tres y la sección cuatro. Ahora solo algunas ediciones de diseñador. Esta es nuevamente la forma en que trabaja mi cerebro de diseñador en términos de espaciado y tamaños. Lo primero que quiero cambiar es solo el espacio entre los registros de título y el texto de abajo. Vayamos al contenedor principal en el que se asienta este, este de aquí. Entonces vamos a cambiar las brechas aquí de nuevo a diez. Ahí vamos. Ahora lo único que me gustaría hacer aquí es hacer que la palabra grabar sea un poco más grande y un poco más audaz Voy a cambiar el tamaño de la tipografía. Empecemos con la letra R, después pasemos al estilo y a la tipografía El tamaño otra vez, se recoge automáticamente lo que configuramos para el H dos, pero podemos cambiarlo manualmente aquí. Digamos tal vez 45. Sí, creo que esa es una talla mucho mejor. Ahora, la forma sencilla de cambiar todas las letras aquí al mismo tamaño sería escribir, hacer clic, y copiar y pegar el estilo. Sin embargo queremos evitar hacer eso en todas las letras, porque si hacemos eso, también pasará el estilo de la animación de entrada. Como tenemos algunos que se están desvaneciendo y otros que se están desvaneciendo, solo tenemos que hacerlo en cada uno de los demás Pasemos de R a estilo de pago, luego de C a estilo de pago, y de R a estilo de pago. Eso en realidad se ve bastante genial, para ser honesto, si te gusta eso. Desde el punto de vista del diseño, mantenlo así. Pero solo quiero consistencia aquí y hacer que los registros de palabras sean un poco más fáciles leer. Vamos a dar click en la E. Y luego subir aquí a la tipografía de estilo Asegúrate de que también sean 45 píxeles. Copia esa y pega eso a la O y a la D. Ahí vamos. Ahora estoy muy contento con esta sección. Creo que esto funciona muy bien y funciona muy bien. Bajando 01-02 está haciendo lo mismo. Es enumerar todas las cosas que hacemos en la empresa, pero se hace de una manera ligeramente diferente, peculiar y genial Al hacer eso, mantendremos la atención de todos más abajo en la página. Pero siento que duplicamos este estilo exacto para el número tres y el número cuatro. Eso es muy fácil y muy rápido de hacer. Si simplemente duplicamos el contenedor principal de retención, ahí vamos. Duplicé eso ahí abajo. Lo que voy a hacer es hacer este número tres y luego cambiar el título y cambiar el texto a continuación. Sólo una cosa que me molesta aquí es que nos escondamos. El panel es solo este pequeño espacio entre cada uno ya que estamos dentro de la misma sección. No quiero espacio. Quiero que se toquen entre sí. Esa es nuevamente la configuración predeterminada que ese elemento o tiene en términos de relleno de un margen. Editemos este contenedor en la parte superior, haga clic en sus puntos en la parte superior. Ven aquí a Avanzado y cambia ambos a cero. Sí, ahí vamos. Eso es perfecto. Ahora, no hay espacio entre los dos. Sin embargo, lo único que sí quiero hacer aquí, es jugar con el estilo aquí. El problema es porque ambos están usando el mismo color dorado, se funden en uno que no obtienes la misma separación que obtendrías si hubiera un hueco. Lo que voy a hacer aquí, es otra cosa de diseño genial. Voy a cambiar los dos contenedores alrededor. Vamos a este contenedor y como pueden ver, dentro del contenedor principal, dos subcontenedores, voy a agarrar el segundo y moverlo hacia arriba para que sea el primero Ahí vamos. Ahora como funciona esto es que voy 02-03 y luego 04 seguirá el mismo camino que el de arriba Eso solo sería una división muy agradable de texto de imagen, texto imagen, texto de imagen. Actualicemos primero 03. Este va a ser sobre shows en vivo. Elige tu contenedor y luego cambia tu imagen para shows en vivo. Supongo que esta foto del tipo con su guitarra. Seleccione eso porque ya hemos configurado la posición, la repetición y el tamaño de visualización para la anterior. No necesitamos volver a hacer eso, eso se ve muy bien. En primer lugar, vamos a añadir en mi texto de copia aquí. Se trata de actuaciones en vivo. Entonces necesito cambiar esto para decir shows en vivo. Que todo se tiene que hacer manualmente. Entonces entremos aquí y escribamos la palabra shows en vivo. Ahora un par de problemas aquí. En primer lugar, no hay suficientes letras. Duplicemos algunas letras aquí. Necesito dos más. Duplicemos estos dos, cámbielos a W. Y al duplicar esa letra, solo significó que la animación ahora está equivocada en la W. Vamos a editar ese encabezado Sube aquí a Avanzado, y cámbialo por lo contrario. Eso debería desvanecerse. Ahora todos se alinean correctamente. Supongo que la otra cosa está bien, shows en vivo podrían ser una sola palabra, pero lo estoy tratando aquí como dos palabras separadas. Necesito un poco de espacio entre la E y la S. Muy sencillo de hacer eso, vamos a seleccionar el Ir a a. desvincular los valores juntos, y luego poner un poco de relleno en el lado derecho de esta letra, tal vez diez pixeles Ahí vamos. Eso funciona perfectamente. Ahora vamos a duplicar el contenedor muy superior. Duplicar con el botón derecho. Obviamente, eso lo dejó caer por encima del número tres, pero voy a seleccionar los puntos aquí y arrastrarlo hacia abajo para ir por debajo de él. Ahí vamos. Ahora verás cómo fluyen las secciones de una a la siguiente. Al dividirlos así, estás captando mucho mejor la atención de la gente. Editemos este último aquí abajo. Hagamos ese 04 entonces. Esta va a ser la sección de la vieja escuela. Vamos contenedor ir al estilo elegir imagen. Quiero esta imagen de cintas de cassette. Eso es muy vieja escuela. Eso queda genial con un 04 en la parte superior. He copiado mi texto. Déjame pegarlo en el editor de texto. Entonces necesito cambiar esta para que diga vieja escuela, igual que lo hicimos anteriormente. Cambiar manualmente. Entonces otra vez, vamos a duplicar esta última letra y hacer que sea una L. Y asegurarnos de que cambiemos la animación para que sea la dirección opuesta. desvanece. Cambia eso para que se desvanezca de nuevo. vieja escuela. Eso podría ser una sola palabra, no estoy seguro, pero quiero que sean dos palabras separadas. Seleccionemos de nuevo la D. Ir a Avanzado. Desvincula los valores, y pon otros diez píxeles Ahora eso se ve brillante. Vamos a guardar el borrador, y luego vamos a previsualizar la página. Vamos a desplazarnos hacia abajo. Entramos en la sección slider, Luego tenemos la animación de 01 guitarras, y luego a medida que nos deslizamos por aquí, dos discos, 03 shows en vivo, 04 Old School. Eso se ve muy bien. Lo mejor de esto es que la animación no comienza hasta que un usuario se desplaza hacia abajo en esa sección En lugar de discos, shows en vivo, y la vieja escuela todos animando a la vez Se animan cuando un visitante llega a esa parte de la página Esto se ve muy bien. Ahora bien, si has seguido todas estas lecciones, ahora tienes tu héroe, tu introducción, y tu completa sobre la sección diciendo, vendemos guitarras, vendemos discos. Somos geniales para shows en vivo y estamos muy de la vieja escuela. 11. Testimonios de clientes: Sólo voy a mostrarles ahora cómo agregar tres partes más. En primer lugar, la última sección de la página serán algunos testimonios de clientes. Entonces vamos a echar un vistazo al pie de página y al encabezado, los cuales son importantes para cada sitio web. Empecemos con los testimonios. Eso es muy fácil gracias a un elemento o widget. Vamos a configurar una nueva sección como una cuadrícula. Y me gustaría que fueran tres columnas. Entonces solo asegurémonos de que tenemos un margen alrededor de este de aquí arriba. Editar cuadrícula, Avanzado. Desvincula los valores, y digamos solo 100 en la parte superior, 100 en la parte inferior Nuevamente, justo el mismo espacio que tenemos entre las secciones en otros lugares. Entonces subamos para agregar el tipo de elemento en testimonios y luego arrastrarlo a la primera columna. Todo esto es muy fácil de configurar. Solo te voy a mostrar el primero, y luego lo que podemos hacer es duplicar eso para los otros dos. Empecemos con el primero. Empecemos primero con la imagen, tengo imágenes de los tres músicos que han valorado muy bien nuestra tienda. Empecemos con este tipo, su nombre es Jimmy. He copiado su comentario. Solo pasemos ese de aquí. La experiencia siempre es genial. El equipo de ventas siempre es muy servicial y siempre responde a cualquier solicitud. Gracias Jimmy. Ahora solo necesitamos agregar su nombre y tal vez solo cambiar el estilo de lo que tenemos por aquí. En primer lugar, bajemos a nombre. El color del texto aquí es rojo, pero creo que solo quiero que ese sea el color de texto regular luego título donde dice en este momento, diseñador, otra vez, solo me gusta que sea negro. Creo que eso solo se ve bien y limpio. Si quieres jugar con esto tú mismo, prueba algunos colores diferentes ahí. Prueba tus colores primarios secundarios. Siéntete libre. Solo volvamos al contenido. Agreguemos en su nombre, el título de Jimmy Hendricks. Bueno, aquí hay un guitarrista. No es tan sencillo como eso realmente. Duplicemos éste dos veces. Eso ya se ve muy bien, pero obviamente necesitamos testimonio de dos personas diferentes. Déjame ir al segundo, editar eso, Cambiar la imagen. Este tipo de aquí al que se le llama lo dejará caer. Copia su comentario en cambiarlo a pistolas y rosas. Gracias. Y luego para los últimos 11 de mis músicos favoritos, este tipo Wolfgang Wolfgang Amadeus Mozart. ¿De qué se dice Wolfgang? Vamos a pegar esa en. Wolfgang ha dicho que somos una excelente tienda con entrega rápida y muy buen servicio y atención a los clientes Gracias Lobo. Vamos a poner aquí a Wolfgang y está bajo su título, un músico clásico Creo que solo necesita un poco más de espacio entre cada uno. Sólo vamos a editar la grilla otra vez. Volvamos a la maquetación. Los huecos se han establecido en una cantidad automática de 20 píxeles. Cambiemos eso a 40. Eso solo agregó un poco de espacio extra. Tal vez 50. Ahí vamos. Creo que eso es solo un mejor espacio entre cada uno. Ahora todos se alinean perfectamente en la parte inferior. Sí. Tan simple como eso. Es así de fácil agregar en testimonios. Creo que es una gran manera de recorrer tu página que te metes en la sección acerca de. Esto es lo que hacemos y estos son clientes que nos amaron. 12. Pie de página del sitio web: Ahora la sección principal del sitio web está completa. Vamos a mirar dos últimas partes, y ese es el pie de página y el encabezado. Ahora la forma en que esto normalmente funcionaría dentro de elementor es que subiríamos aquí al icono y elegiríamos el creador de temas Esto significa que podemos entrar aquí y podemos hacer un cabezazo y un pie. Eso significa que eso aparecerá en cada página dentro nuestro sitio web y será idéntica. Sin embargo, solo tenemos un solo sitio web de una página De todos modos, el otro problema es que esta es una característica pro, por lo que no se puede hacer en la versión gratuita. Simplemente cerremos este y volvamos al editor. Ahora solo vamos a crear un pie de la misma manera que creamos todo lo demás en esta página. Haga clic en el icono más. Escojamos flex box, y creo que doble columna. Lo que quiero aquí es un mapa de la ubicación de la tienda en el lado izquierdo, y luego solo más información, datos de contacto, número de teléfono, dirección de correo electrónico, esa cosa ya que este es el final de la página, quiero rematarlo de una manera muy audaz. Yo solo voy a hacer todo el contenedor, el fondo de todo el contenedor, un tipo de fondo estilo contenedor de edición negro sólido. Entonces en cuanto a nuestros colores, vamos a elegir el color. Ahí vas. Eso llenó todo el trasfondo de eso. Si vuelvo, puedes ver que ahí se sienta. Obviamente, ahora no hay nada ahí dentro. Pero es sólo una manera bastante agradable de rematar la página. Lo primero que quiero hacer es dejarlo caer en un mapa. En esta sección, vamos a subir para agregar elemento. Nuevamente, escriba en el mapa. Google Maps es lo que vamos a utilizar aquí. Y simplemente, literalmente, arrastra eso a tu primera caja. Se configura automáticamente para mostrar esta ubicación. Es el London Eye, que en Londres. No obstante, tenemos que cambiar eso, porque nuestra tienda de música está aquí en Sydney, y está en una de las calles principales del centro de Sydney que se llama George Street, y es la número 100. Yo sólo voy a borrar eso. Y luego voy a escribir en 100 George Street, Sydney. Y veamos qué pasa. Ayuda a deletrear Sydney. Justo ahí estamos. Ahora está mostrando el mapa a 100 George Street. Los usuarios pueden venir aquí y hacer clic en direcciones si quieren saber cómo llegar hasta aquí. No obstante, está bastante lejos. Lo bueno de esto es que puedes jugar con el zoom solo para hacerte una idea de dónde está. Como puedes ver aquí, estamos muy cerca del agua y muy cerca del Museo de Arte Contemporáneo. También puedes jugar con la altura aquí, si quieres 400 pixeles, creo que eso es genial. Perfecto. Ahora por aquí en el lado derecho, dejemos caer en el texto. Empecemos con un encabezado. Sube aquí para agregar encabezado de elemento. Lo que quiero decir aquí, échanos un vistazo. Creo que debería ser blanco. Vayamos al color de estilo, arrastra el seleccionador de color al blanco. Eso es genial. Entonces vamos a agregar elemento y luego agregar el editor de texto debajo de eso. Nuevamente, acabo de copiar todo mi texto para entrar aquí que está mostrando de la manera habitual, pero la mayor parte del texto está en negro. Así que vayamos al estilo y usemos la imagen en color para cambiar eso a blanco. También porque es texto blanco sobre fondo negro. Creo que la topografía solo necesita ser un poco más antigua. Es recoger la configuración estándar que hemos establecido aquí que es solo el peso normal. Cambiémoslo tal vez a semibold. Sí, eso es mucho mejor. Como pueden ver, la dirección de correo electrónico que pongo aquí aparece en rojo. Eso es porque es un enlace que puede suceder automáticamente cuando escribes en tu dirección de correo electrónico. Pero si no, vuelve al contenido resalta el texto que quieres convertir en un enlace. Digamos que quería hacer esta dirección como enlace, destaco el texto y luego hago clic en Insertar. Enlace. Aquí podría poner en cualquier dirección de sitio web, Facebook.com y luego aplicar Simplemente significa que cuando la gente haga clic aquí, los llevará a Facebook.com Pero no quiero que eso lo deshaga Este es el que realmente estamos viendo, Esta dirección de correo electrónico. Como puede ver, ha entrado automáticamente con la dirección de correo electrónico. Antes de eso tiene las palabras correo a dos puntos, y luego la dirección de correo electrónico. Esto es lo que necesitas para que cuando los usuarios vean esto y hagan clic en eso, abra su aplicación de correo electrónico. Todo eso se ve genial. Sólo un ligero cambio que quieres hacer a esto, que de nuevo es lo del diseñador. Voy a entrar en estilo, a la tipografía. Creo que hay demasiado espacio entre cada línea. Vamos a dejar caer la altura de la línea a 16. Eso es mejor. Entonces sólo una última cosa aquí, o dos últimas cosas. Este contenedor, quiero estar centralizado. También necesito un poco de espacio, un poco de relleno a la izquierda de éste. Vendré aquí para desactivar los valores de enlace juntos, y luego agregaré 50 píxeles adicionales a ese lado. Eso se ve genial. Lo único que necesita todo el contenedor es un poco de espacio en la parte superior e inferior. Vamos a dar click aquí en el contenedor principal. Vamos a Avanzadas, Luego vamos al relleno y desvinculemos los valores Y luego decir en la parte superior 100 y la parte inferior de 100. Eso solo se agregó un poco de acolchado extra negro alrededor de todo lo que hay. Vamos a ver cómo se ve esto. Todo esto se ve perfecto hasta ahora. Desplázate del héroe a la introducción, al múltiplo sobre secciones, testimonios y luego al pie. Eso es genial. Todos han leído la página. Están impresionados por lo que estamos ofreciendo. ellos les encantan todos los testimonios y ahora saben dónde estamos ubicados para que puedan dirigirse. 13. Cabecera del sitio web NUEVO: Bien, ahora agreguemos el encabezado a nuestro sitio web. El encabezado puede ser una de esas secciones con las que quieres comenzar. Puede que sea una de las primeras cosas que hagas. Personalmente prefiero dejar este hasta el final porque entonces ya me he decidido por el estilo y la estructura de todo lo demás en el sitio. Sé exactamente qué tipografía estoy usando y qué colores estoy Para agregar esto en, lo que tenemos que hacer es agregar otra sección por encima del héroe. Vamos hasta aquí, haga clic en esto, luego agreguemos en un contenedor de caja flexible. Lo que quiero para este encabezado es una configuración bastante estándar de la manera en que tengo el logo sentado en el lado izquierdo y luego la barra de navegación, todos los enlaces y tal vez mis botones de redes sociales a la derecha. Voy a elegir una que sea una columna pequeña a la izquierda y otra más grande a la derecha. Primero, lo que quiero hacer con todo este contenedor es elegir una altura mínima. Voy a ir por aquí a Editar Contenedor, Asegurarme de que estoy en diseño, y voy a agregar una altura mínima en píxeles de 100 píxeles. También, quiero ir a Avanzado. Yo sólo quiero cambiar todos estos a cero. No hay espacio vacío alrededor de nada ahí. La altura de eso es buena, pero como puedes ver, está en una caja blanca que apenas se sienta por encima del héroe. No quiero eso. Lo que quiero hacer es usar un logotipo blanco y un texto blanco para sentarme encima del héroe. ¿Cómo hago eso? Bueno, como pueden ver, hemos configurado este contenedor con una altura de 100 pixeles. Lo que tengo que hacer es elegir el contenedor debajo del contenedor héroe y cambiar el margen en eso. Vayamos aquí a Avanzado. Desactivemos los valores vinculados. Ahora normalmente lo que haríamos en esta sección, si quisiéramos agregar 100 píxeles por encima de ella, es correcto 100. Eso es lo que pasaría. Tendrías un espacio vacío de 100 por encima de él. Pero quiero hacer lo contrario de eso. Quiero -100 Vas a escribir eso en. Pon un signo menos junto a él. Y ahí tienes. Ahora el contenedor de arriba se asienta encima de él. Sí, se puede ver un poco de un espacio en blanco, pero vamos a hacer clic en éste. Verás que desaparece. Eso es solo para nuestro propósito de edición. Aún no se puede ver nada. Pero ahora el contenedor extra que hemos agregado se encuentra en la parte superior del contenedor de abajo. Lo primero que quiero hacer es trabajar en el primer contenedor dentro del contenedor de cabecera. Vayamos aquí a estructurar. Elija su contenedor superior, elija subcontainern. Lo primero de nuevo, vamos a ir a Avanzado y cambiar todo esto a cero. No hay espacio vacío a su alrededor. Lo que quiero hacer es dejar caer el logo aquí. Todos vengo aquí para agregar elemento, caer en una imagen. Al principio nos llega la caja gris. Vamos a elegir la imagen. Lo que quiero hacer aquí es volver a agregar mi logo. Ahora ya hemos usado este, que es el estilo más vertical. Quiero el estilo horizontal de la manera que tengo el icono a la izquierda y luego el texto de Wolfgang Music a la derecha Vamos a elegir eso. Eso ha caído en. No obstante, ¿a dónde fue? ¿Por qué no lo puedo ver? La razón por la que no puedes verlo es porque el contenedor debajo del contenedor héroe está realmente sentado encima del contenedor de cabecera. Todo lo que tenemos que hacer es decirle elementor que el encabezado uno debe sentarse encima de él. Ven aquí a Structure. Entonces contenedor, ven aquí a Editar, Contenedor, haz clic en Avanzado. La sección que estamos viendo aquí se llama índice Z. Lo que podemos hacer aquí es poner en diferentes números, es decir, que cuanto mayor sea el número, más arriba estará en el sistema de capas, ya que no hemos numerado ninguno de los otros contenedores a continuación, Un simple será suficiente aquí adentro que ha traído todo esto al frente Volvamos a esta sección. Mi logo, bueno, es demasiado grande. Creo que el contenedor en el que está está ocupando demasiado. Creo que necesito un poco más de espacio para el contenedor de la derecha, por aquí en estructura. Ve a tu segundo contenedor, luego ven aquí a ancho, entonces hagámoslo un poco más grande. Tal vez 75% como puedes ver, eso ha hecho que el logo sea un poco más pequeño. De hecho, eso sigue siendo demasiado grande. Vamos al 80. Lo que estamos haciendo aquí es que solo estamos permitiendo mucho más espacio para mucho más contenido en esa sección. Sin embargo, sigo sintiendo que el logo es un poco demasiado grande. Lo que voy a hacer es seleccionar la imagen ya sea aquí en estructura o dando click sobre ella. Entonces voy a ir a Style por aquí. Y luego voy a cambiar el ancho del logo. Como pueden ver, estoy cambiando los lados porcentuales de la misma. Creo que el 50% es suficiente. El único problema es que se acaba de sentar en medio de este contenedor, Ahora quiero que se siente a la izquierda para que todo se alinee Volvamos al contenido y luego solo alineemos eso a la izquierda. Además, quiero que se siente más centralizado a este contenedor de 100 píxeles de altura. Sólo vamos al Subcontenedor en el que está. Haga clic en eso, vaya a Disponer y luego centrar el contenido. Ahora si presiono la flecha, ahí tienes. Se puede ver cómo está sentado eso. Ahora en la parte superior de la página, Todo esto es perfecto. No hay espacios blancos vacíos. Un logotipo de tamaño perfecto simplemente se sentó allí en el lado izquierdo. Ahora todo lo que necesito hacer es poner mis enlaces y mis botones de redes sociales en el lado derecho. Escojamos el contenedor de aquí a la derecha. Escoge eso en estructura otra vez, vamos a entrar aquí. No siempre necesitamos hacer eso, pero como pueden ver, cuando hice eso, se deshizo del espacio en blanco en la parte superior. Simplemente asegura que en la parte trasera no haya espacio extra que no sabías que estaba ahí. Eso puede estropear la vista para tus usuarios. A continuación, quiero agregar una barra de navegación, esa es una barra de navegación a la columna del lado derecho Ahora la forma en que estas cosas normalmente funcionan en los sitios web cuando hay varias páginas es que te enviará a otra página. Pero como tenemos una sola página, la forma en que funcionarán estos botones es que te bajarán a esa parte de la. Habrás visto esto en otros sitios web de una sola página. Lo que tenemos que hacer es agregar botones para cada sección del sitio web que queremos que visiten los usuarios. Vamos a elegir guitarras, discos, shows en vivo y old school. Esto es muy sencillo de hacer. Pasemos aquí al elemento plus add. Y queremos un botón. Dejemos caer nuestro primer botón aquí. Ha salido como una cajita azul. Haga clic aquí en él. Bueno, antes que nada, queremos que ésta diga guitarras. Entonces lo que quiero es básicamente ninguna caja azul o espacio alrededor de la palabra guitarras. Pasemos al estilo, entonces entremos aquí a la normalidad y flotemos, obviamente para los botones, siempre tienes una versión normal como la gente la ve Entonces, cuando pasas el cursor sobre, a menudo puede cambiar el color que ves en la parte superior Lo que quiero hacer con la versión normal es sacar ese color azul. Voy a hacer click en el color, básicamente arrastra este hacia abajo al 0% Ahora solo dice guitarras por su cuenta. Entonces la otra cosa es solo el espacio que estaba alrededor, que es lo que necesitas con un botón de color sólido debajo iba a cambiar ese relleno a cero. Ahí vamos. Sin embargo, lo único que sí quiero, que creo que funciona muy bien en los sitios web, es que quiero que suceda algo diferente cuando un usuario se cierne sobre él Por el momento está en texto blanco. Voy a decir que cuando un usuario pasa el cursor sobre el texto, cambiará el color del texto Escojamos uno de nuestros colores globales. Escojamos secundaria. Van, como puedes ver ahora justo debajo de la caja gris, y yo vuelo sobre la palabra Guitarras, va dorada Lo que quiero hacer es simplemente duplicar este botón tres veces para discos shows en vivo old school. Así que vayamos aquí a la estructura. Haga clic derecho en el botón, Duplicar, Duplicar, Duplicar. Ahora obviamente como puedes ver, todos están sentados uno encima del otro. Nuevamente, eso no está funcionando a la perfección. Vamos a contener el subcontenedor en el que están. Ir a disposición y cambiar la dirección a fila horizontal. Ahora todos dicen guitarras. Los otros temas que puedes ver es que están todos sentados ahí en la parte superior de la caja. Lo que quiero hacer es bajar aquí para alinear los elementos y asegurarme de que estén alineados al centro. Entonces la otra cosa es que se sentaron a mitad de página. Pero para conseguir el equilibrio, quiero que el logo esté en el extremo izquierdo. Quiero que estos botones estén en el extremo derecho. Vamos a justificar el contenido entre inicio, centro y final. Vamos a elegir. Y se puede ver si me muevo esto hacia abajo, ya están todos sentados ahí. Y eso se ve perfecto. Esa es tu pantalla estándar para una barra de navegación. Bien, ahora volvamos. Cambiemos el nombre de cada uno de estos botones. El primero, el segundo deben ser registros. Tercero shows en vivo el último debería ser odom. Sólo último pensamiento hay, creo que cada botón está un poco cerca del siguiente. Volvamos a ir al contenedor. Los huecos y columnas se establecen automáticamente en 20. Si quiero poner ese cero, el estar uno al lado del otro, estoy pensando que tal vez 30. 30 se ve bien. Creo que eso solo da un poco más de espacio para respirar entre cada uno. Ahora lo que tengo que hacer es decir dónde va cada botón en la página. Si hago clic en el botón y voy al contenido, como pueden ver en este momento, el enlace es solo una etiqueta hash. Lo que tenemos que hacer en esta página es configurar un enlace de anclaje. La forma en que funciona, uno da clic en este botón, los llevará a cierta parte de la página para agregar un enlace de anclaje. Sube aquí para agregar elemento, escribe ancla. Entonces vamos a desplazarnos hacia abajo hasta la sección donde te gustaría que se sentara este enlace de anclaje, para que cuando alguien haga clic en guitarras, las lleve a esta sección. Lo que haremos es recoger esto y arrastrarlo para que quede por encima de la palabra Guitarras que ha caído en esta cajita gris. Pero no te preocupes por la forma en que se ve porque en realidad no está ahí. Eso es código oculto para que en la flecha veas que desaparece. Los usuarios no verán eso. Lo que tenemos que hacer es darle una identificación a esto. Eso significa que podemos decirle al botón en la parte superior para llevar a los usuarios a este ID. Solo escribamos en la palabra guitarras. Tan simple como eso. Entonces volvamos a desplazarnos hacia arriba hasta la parte superior. Elige el botón de guitarras, deja ahí la etiqueta hash, Escribe o pega tu palabra Guitarras. Ahora vamos a guardar esto, previsualizar la página, y verás cómo funciona. Cuando un usuario llega a nuestra página, cursor sobre estos, se vuelven dorados Si hacen clic en el que quieren ver, si eso es guitarras, eso lo hará. Los lleva a la sección de guitarra. Sin embargo, el único problema que veo aquí es que literalmente los está llevando a esa palabra, guitarras. El problema ahí es porque ese texto está centralizado con aquí. Cuando llevó a los usuarios allá abajo, corta esta imagen y no se puede ver la cara de la chica. Entonces lo que realmente quiero hacer es decir, puedes llevar a los usuarios a justo encima esta caja para que puedan ver todo de una vez Volvamos al editor. Vamos a mover el ancla. Lo que en realidad quiero es que se siente encima de esta caja. Si trato de arrastrarlo ahí arriba, el problema en realidad no tiene a donde ir. Dejémoslo ahí por un segundo. Lo que voy a hacer es crear otro espacio vacío encima de este contenedor. Entonces voy a hacer clic en Agregar Contenedor. Haga clic en el cuadro más O y simplemente elija el sencillo. Haz tu cosa estándar dentro de este contenedor. Vaya a Avanzado, ponga cero aquí y cero aquí. Después arrastra a esta sección este ancla que ya configuraste. Ahora se puede ver dónde está eso sentado está arriba de esta sección. Si voy a guardar esta vista previa, la página, ya verás cuál es la diferencia. Yo hago clic en guitarras , me lleva ahí. Me lleva al poquito de espacio encima de esta sección, así puedo ver toda la sección de una sola vez. Perfecto. Ahora hagamos lo mismo para las otras tres secciones. Volvamos al editor. Como ese ancla está funcionando perfectamente, podemos simplemente subir aquí y hacer una copia de este contenedor. Entonces vamos a desplazarnos hacia abajo hasta este punto aquí. Haga clic en el signo más y luego pegue este contenedor en. Eso ha caído exactamente en el mismo contenedor que teníamos para guitarras sin espacio vacío a su alrededor. Entonces entremos al menú Anclar y cambiemos ese a Registros. Quiero sentarme por encima de Records, quiero sentarme por encima de los shows en vivo, y quiero sentarme por encima de Old School. Duplicemos el que tenemos aquí dos veces. Y luego arrastrarlos hacia abajo para que se sientan encima de cada una de estas secciones. Nuevamente, porque hemos configurado 0% de márgenes y relleno, por lo que no habrá espacio vacío entre cada contenedor. Teníamos registros. Vamos a editar este de aquí. Espectáculos en vivo y asegúrate de que todo esto sea una palabra, deletrearlo correctamente. Lo mismo con el de la vieja escuela de aquí. Vamos a entrar en éste y cambiarlo a vieja escuela, todo una palabra. Entonces vamos a volver a subir a la parte superior de la página, al ahora lejos y asegurarnos de que todos estos botones estén establecidos de la misma manera. En la primera queremos que diga hashtag old school. Este Hashtag live muestra este hashtag graba y por lo tanto ese es Hashtag Guitars. Vamos a guardar el borrador, previsualizar los cambios ahora verás cuando haga clic en alguna de estas guitarras, te lleve ahí, Records, te lleva ahí shows en vivo, te lleva ahí una vieja escuela te lleva ahí. Eso es perfecto. Y como puedes ver aquí, estas dos cosas, no hay espacio vacío, ni un solo píxel, ni una sola línea de espacio en blanco entre cada una. Tenemos el logo configurado, tenemos la barra de navegación puesta. Ahora solo necesitamos agregar los íconos de las redes sociales. Entonces volvamos al editor. Bien, para agregar botones de redes sociales después de que una barra. Subiremos aquí al plus para agregar elemento, escriba iconos sociales. Eso es lo que queremos y queremos que viva después de la vieja escuela. Vamos a bajar un poco la estructura. Por defecto cae en estos tres iconos. Facebook, Twitter, Youtube. Han venido en este estilo exacto. No es así como quiero que se vea porque no siento que represente nuestro sitio web. Yo sólo quiero que sean logos blancos. Además, no tengo una página de Twitter ni una página de Youtube. Yo solo tengo Facebook y solo tengo Instagram primero arriba. Eliminemos el de Twitter presionando la X. Lo mismo con Youtube. Luego agrega ítem, viene con un logo de word press, no quiero que pase el cursor sobre el ícono Da click en eso, luego te muestra la biblioteca de iconos. Y estas son las muchas opciones diferentes que puedes tener para esta yo solo en Instagram y ahí está, que da clic en Insertar. Ahora solo tenemos botones para Facebook e Instagram. Primero sube la forma alrededor de lo que dice. Redondeado, si puedes ver eso ahí. Pero es como un cuadrado redondeado. Yo sólo quiero que sea un círculo recto. Vamos a dar forma y elegir círculo mucho mejor. Mi único otro problema aquí es que básicamente son demasiado grandes. Vamos al estilo, luego vamos tamaño y juguemos con la barra de arrastre aquí. Creo que 18. Creo que eso es lo suficientemente grande como para ser honesto. El relleno, eso es solo el acolchado alrededor de la parte exterior del icono. Ahora volvamos al contenido, luego hagamos clic en Facebook. En cuanto al color, bueno, no quiero que sea el color oficial. Quiero que sea un color personalizado. Por lo tanto, puedo elegir el color primario y el color secundario. Color primario. Bueno, asegurémonos de que eso sea blanco entonces. Mi color secundario, quiero que sea nuestro texto negro. Se ve así. Muy mismo para Instagram. Haga clic en el color de Instagram, color primario personalizado blanco. Color secundario negro. Ahora tenemos que hacer es solo escribir el enlace para Instagram. Sólo voy a pegar en mi URL. La otra cosa que queremos hacer, hacer clic en Opciones de enlace y luego asegurarnos se elija abrir nueva ventana porque eso abrirá una ventana separada para esta. Lo que significa que la gente realmente no abandona tu sitio web, están viendo dos páginas separadas. Ambos están relacionados con su empresa. Entonces Facebook que aquí adentro aseguran que se está abriendo en una nueva ventana y eso es todo. Ahora, guarda el borrador y la vista previa. Aquí estamos. El encabezado está funcionando perfectamente. Tenemos el logo de la compañía, tenemos el Navvar con todos los enlaces de anclaje, y tenemos enlaces a nuestras dos páginas de redes sociales La versión de escritorio de su sitio web ya está completamente completa. Tienes tu encabezado. Tienes a tu héroe. Tienes tu sección de introducción con las imágenes deslizantes. Entonces tienes las dos versiones diferentes de la sección about con dos versiones diferentes de discos de texto animados, shows en vivo, Old school. Tienes tus tres testimonios de los tres músicos más grandes del mundo. Y luego tienes tu pie de página con el mapa y la información para que la gente te encuentre o se ponga en contacto contigo. Todo esto ahora se ve perfecto. La versión de escritorio de tu sitio web está completa y se ve genial. Ahora solo necesitamos que funcione en tablet y móvil. 14. Receptivo: tableta: Ahora tienes un sitio web que luce perfecto y funciona perfectamente en Desktop. Sin embargo, tenemos que ver cómo se va a mostrar tanto en la tableta como en los dispositivos móviles. Esto es muy fácil de editar Elementor sube aquí a la barra superior Y puedes elegir entre editores de escritorio, tableta o móvil. Es muy importante hacerlo en este orden. Comience con el escritorio, luego vaya a la tableta y luego al móvil. móvil hereda los cambios realizados en la tableta, y la tableta hereda los realizados en Siempre debes hacerlo en ese orden, lo contrario romperá tu sitio web. Ahora lo tenemos perfecto en escritorio. Echemos un vistazo a la tableta. Cuando lleguemos al Editor de Mesas, verás que todo sigue ahí en la misma posición, pero no todo se alinea correctamente. Si nos desplazamos, este héroe se ve bien. Es solo esta barra de navegación, los iconos aquí y el logo ahí están demasiado cerca del borde Entonces a medida que nos desplazamos hacia abajo hasta esta sección, nuevamente, no hay suficiente relleno alrededor de los bordes de esta sección, así que es una visualización un poco rara con el texto corriendo tan abajo y la imagen siendo puesta ahí dentro. Este sí se ve bastante bien. De nuevo, solo necesita un poco más de relleno. Obviamente estas cosas que puedes ver, las anclas, en realidad no están ahí Este no funciona del todo. Nuevamente, con la alineación, puede ser mejor si el número estaba encima de la palabra guitarras en esta pantalla. El pozo, en realidad están muy cerca. Creo que ahí solo los números son demasiado grandes. Ese es probablemente el único cambio que necesitamos en este caso. Pero creo que eso funciona bien como columnas dobles. Testimonios funciona como tres columnas porque es una cantidad corta de texto. Solo hay que trabajar en el acolchado. Y lo mismo aquí, el acolchado. No hay muchos grandes cambios que hacer, pero solo te mostraré una buena manera de hacer esto, una forma muy rápida de hacerlo. Vamos a la cima. El principal problema que tenemos aquí es solo el relleno a ambos lados de este contenedor, la barra de navegación, el encabezado. Vamos a hacer clic en los puntos aquí y editar el contenedor. Todo lo que quiero ver aquí es acolchado. Vayamos a Avanzado, y entramos en relleno. relleno aquí está configurado en cero para la parte superior, derecha, inferior e izquierda. Lo que quiero es una cantidad igual de relleno a la izquierda y a la derecha. El tamaño de píxel que elijo aquí debe usarse en cada sección a continuación solo para garantizar la consistencia. En primer lugar, desvinculemos los valores. Voy a elegir 30 pixeles a la izquierda y a la derecha. Se puede ver cuando hago clic en la flecha, eso es suficiente espacio entre los dos. Solo le da un poco más de espacio para respirar entonces esta sección de aquí, esto sí se ve bien. Creo que el logo es un poco demasiado pequeño. Vamos a hacer clic en el logo. Ven aquí a Editar imagen, ve al estilo. Sólo vamos a aumentar el tamaño de la misma. El porcentaje, pongámoslo hasta tal vez 75% ¿Ves cómo se ve eso? A lo mejor un poco demasiado grande, tal vez. Creo que ese es un buen equilibrio entre logo navbar y botones de redes sociales Genial, esa sección de héroes que me está funcionando ahora. Todavía llena toda la página ya que seleccionamos el contenedor principal héroe para que esté a una altura 100% vertical. Entonces como puedes ver, va directamente de arriba a abajo esta sección. Bien, aquí tenemos un pequeño problema en términos de alineación. El texto va hasta aquí abajo, y luego hay un gran espacio vacío en la parte inferior. Primero, vamos a echar un vistazo al acolchado. Volvamos a hacer clic en los puntos aquí para editar contenedor. Ve a Avanzado, desvincula los valores, y vamos 30, derecha, 30 izquierda De nuevo, eso se ve bien. Sin embargo, nada de esto está alineando del todo bien, la banda de lobos, eso no es realmente apropiado, está repasando la imagen y obviamente tenemos este gran espacio de relleno en el borde aquí. Con lo que quiero jugar aquí es cambiar el tamaño de cada una de las columnas internas de la manera en que la habíamos configurado antes. Funciona bien como tal vez un 20% a la izquierda y 80% a la derecha. Vamos a probar un 50, 50. Escojamos nuestro primer contenedor interno. Haz clic en Editar Contenedor, o puedes elegir esto en tu estructura. Entonces vamos por aquí a donde dice ancho. Actualmente está configurado en píxeles, cámbialo a porcentaje, luego arrastra esto al 100% aunque solo quiero que llene el 50% del espacio, todavía solo necesitamos que el ancho en la tableta sea 100% Luego ven al otro contenedor y haz lo mismo ahí, 100% Ahora eso es un alineamiento perfectamente. solo hay un poco de Aquí solo hay un poco de espacio vacío extra en la parte inferior. Eso es solo por el relleno que tengo en la primera columna. Volvamos al primer contenedor. Ve a Avanzado, quítate este 75. Ahí vamos. Ahora que se ve casi perfecto, sin embargo, todavía está demasiado cerca de la imagen en el costado. Tal vez agreguemos 25 píxeles que lo agregaron en todas partes. Permítanme borrar eso, desvincular sus valores y cambiarlo a 25 píxeles Eso casi se ve perfecto. Creo que todavía hay un solo tema. No creo que esa pequeña línea tenga que estar ahí en la tableta. Creo que se vería mejor si el texto estuviera un poco más arriba. Volvamos entonces al editor. Voy a seleccionar el divisor. Selecciónelo aquí en Estructura, o haga clic en él. Ve a Avanzado, luego desplázate hacia abajo hasta la palabra responsive. Lo que estamos haciendo es que lo estamos escondiendo en la tableta. Si hago clic en esa, se puede ver que desapareció. Ahí tenemos las líneas de luz. Pero si ahora voy a esconderme, el panel desapareció. Eso se ve perfecto. Bien, pasemos a la sección de abajo. Editemos el contenedor. Desvinculemos los valores y pongamos 30 a la derecha. 30 a la izquierda Eso sí se ve genial. Solo pienso que tal vez haya demasiado espacio entre esta sección superior y la sección de abajo. Creo que está bien en la parte inferior aquí, casi. Pero creo que estas secciones deberían estar un poco más cerca. A lo mejor es porque en el contenedor superior, sí, tengo un margen de 100 en la parte superior y 100 en la parte inferior. Desvinculemos eso ahora vamos a cambiarlo a cero. Solo volvamos a 100 en la parte superior, y luego pienso que tal vez 50 en la parte inferior. Perfecto. Ahí vamos. Esa es una pantalla mucho mejor. Ahora todo esto encaja dentro una sola página y todo se alinea perfectamente. Excelente. Bien, pasemos a la sección de guitarras. Esto se ve genial. Creo que para mantenerlo en dos columnas, es sólo el texto uno aquí que no está funcionando del todo. Creo que eso es porque la tenemos puesta en dirección horizontal. Quiero cambiar eso a una dirección vertical dentro de este contenedor interno. Destacemos este contenedor. Al hacer clic en él. Entonces vayamos por aquí a dirección. Como puedes ver, este icono se cambia a tablet. Si quieres editar alguna versión en particular, puedes hacer click ahí sin tener que hacer click aquí arriba en la parte superior. Pero estamos trabajando en tabletas, así que dejémoslo así. Como puede ver, la dirección es horizontal. Quiero cambiarlo a vertical. Vamos a hacer clic en esto. Ahí vamos. Eso en realidad ahora encaja mucho mejor. Algunos otros temas solo en términos del espaciado, la alineación. En primer lugar, subamos a esta columna y agreguemos un poco de relleno aquí. Lo que quiero aquí es el mismo relleno que tengo a la izquierda de todos los elementos superiores, 30 pixeles. Yo lo haría en este interno, porque si lo hago en el contenedor principal, agrega un espacio en blanco. No quiero hacerlo ahí, quiero hacerlo aquí. Pero sigue siendo una profundidad consistente con todas las secciones por encima de la. Vamos dentro de este contenedor, el que tiene el 01. Simplemente quitemos cualquier relleno que esté ahí, luego haga clic en el texto, el encabezado y cambie la alineación a la izquierda. Eso se ve genial. Piensa que necesitamos cambiar el tamaño de esto. Creo que necesita ocupar un poco menos de espacio. Primero, vamos a por este contenedor. Ir a Maquetación. Vamos a elegir el contenedor general principal, y luego ir a Diseño. Esto es lo que tenemos. Esto fue, ahí fijamos una altura mínima del 75%, cambiemos eso a 50. Ahí vamos. Esa es una pantalla mucho mejor. Eso está casi encajando perfectamente. Creo que tal vez un poco más grande, 60% sí. Ahora volvamos a este contenedor y aseguremos que todo esté centralizado. Eso se ve genial. No hay un gran cambio ahí. Simplemente significa que todavía podemos ver la imagen completa de la chica tocando la guitarra. Todo el texto está en. Quizás hasta sacaría un poco del relleno al lado del texto aquí. Vamos a este contenedor interno, vaya a Avanzado. Como puede ver, configuramos eso como enlace de 100 píxeles, cambiarlo a tal vez 50. Ahí vamos. Creo que eso nos acaba de dar un poco más de espacio. Arriba, abajo, y a la derecha del texto. Eso se ve genial. Bien, eso nos llevará abajo a esta sección. Como dije antes, solo pienso en grande, el texto numérico encima de las imágenes. Vamos a editar rumbo al estilo, ir a la tipografía. Oh si, se lo dijimos a 400. Quizá cambiemos eso a la mitad del tamaño, 200. Un poco demasiado pequeño, 300. Eso se ve genial. Yo solo quiero copiar ese estilo y pegarlo a los números restantes. Haga clic con el botón derecho. Estilo de copia 03. Estilo de pago 04. Ahora solo echemos un vistazo a cómo se ve todo. Esto se ve genial. Creo que eso funciona muy bien. Todavía tenemos esta sección en la sección bordeada de color blanco, esta con el fondo rojo Y luego vamos más abajo en discos, shows en vivo Old school. Eso se ve genial. Sólo una muy rápida en esta sección aquí. Vamos a Editar contenedor. Esta, recuerden, es una grilla. Establecimos los huecos entre cada uno a 50 píxeles previamente. Sin embargo, creo que probablemente sea demasiado grande para lo que tenemos en las tabletas. Cambiemos eso a 30. Sólo nos da un poco más de espacio entre cada uno. Entonces obviamente ve a Avanzado aquí arriba. Desvincula tus valores, 30% 30 pixeles a la derecha, 30 pixeles a la izquierda Eso se ve genial. Y todavía hay 100 arriba y 100 abajo. Entonces aquí abajo, vamos a hacer clic de nuevo en el contenedor, Solo necesita relleno en el contenedor general, otros 30 píxeles. Todo lo que he hecho ahí es que acabo desvincular los valores que lo bajan a cero Para ser honesto, eso en realidad se ve bastante bien, creo que tener el mapa hasta el borde, pero vamos a darle un poco de borde alrededor, tal vez 30 píxeles por todas partes. Vamos a vincular eso. Sí, creo que eso solo le da un poco más de espacio para respirar alrededor del mapa y alrededor del texto. Ahí vamos. Eso fue muy rápido y muy fácil. Lo que hemos hecho aquí es que hemos tomado la versión de escritorio del sitio web y hemos editado para que se vea perfectamente en la tableta. Pero hay otra manera genial de comprobar esto. Vamos a cerrar esto. Vamos a guardar nuestro borrador, luego vamos a previsualizar los cambios. Lo que te recomiendo hacer aquí es que si estás usando Google Chrome, entra en la sección de extensiones de la tienda web de Chrome y encuentra esta. El simulador móvil. Sólo tienes que escribir eso. Debería ser el primero que surja. Es una herramienta de prueba receptiva. Encuéntralo. Y entonces el botón aquí dirá instalar en. Simplemente significa que en la parte superior aquí en aquí es donde tienes tus extensiones. Cuando estés viendo la página ya que será vista por tus usuarios, puedes hacer clic en esta, luego te mostrará cómo se ve en muchos dispositivos diferentes. Esta es otra herramienta que sí tiene una versión Pro que debes pagar. Sin embargo, si solo quieres usar la versión gratuita, es genial para eso porque cubre un montón de móviles, al menos cuatro o cinco tabletas, y luego un par de extra ahí también Incluso un Apple Watch serie seis. El que estamos viendo aquí es el móvil. Aún no lo hemos editado. Pasemos a la sección de tabletas y veamos cómo se ve en el ipad Mini. Bueno, eso se ve perfecto. Sí, me encanta. Perfecto. Eso sigue deslizándose. La animación está funcionando. Oh si, eso se ve genial. Eso se ve absolutamente perfecto. En la tableta, eso estuvo genial. Ipad Mini cuatro. Ipad cuatro también perfecto. Lo mismo. Ipad Pro 11 también perfecto. Lo mismo. Después una Galaxia, Tab siete. Entonces esa es una versión de Android, también se ve perfecta en eso. Es genial si solo entras en el editor, lo haces lucir perfecto ahí, pero luego juegas con esta extensión solo para ver que está funcionando perfectamente en varios dispositivos diferentes. Si miras algo como esto, bien, no creo que esté viendo suficiente de la chica aquí en ese dispositivo. Es posible que solo quieras entrar y jugar con el espaciado aquí, porque aquí se ve diferente como lo hace en ese dispositivo. Solo usa la extensión para jugar un poco y asegúrate de que funcione perfectamente en todos los dispositivos que puedas ver aquí dentro. 15. Receptivo: móvil: Ahora volvamos al editor y echemos un vistazo a la versión móvil. Haga clic aquí arriba. Ahora bien esta barra de navegación, esta parece un poco más difícil de jugar con ella. Vamos al contenedor. Primero que nada juguemos con el espaciado. Ahora el acolchado ahí todavía está establecido en 30 a la izquierda y 30 a la derecha. Eso también es bueno para móviles. Mantengamos así como es. El principal problema que tenemos es solo que la alineación de la misma ya no encajará en línea recta. Creo que tenemos que apilarlo. Digamos que tenemos el logo en la parte superior, luego la barra de navegación debajo de eso, luego los botones de redes sociales debajo de eso Esto es lo que voy a hacer. En primer lugar, voy a tomar este contenedor que tiene botones tanto de navbar como de redes sociales en él, y lo voy a duplicar Entonces voy a entrar en la segunda versión y voy a borrar todos los botones que metemos aquí porque ya existen arriba. Entonces entraré en este contenedor y me gustaría que el contenido estuviera centrado. Tenemos dos, muchos botones de redes sociales. Este primero sólo va a aparecer en el móvil. Nuevamente, hagamos clic en Editar contenedor, Ir a Avanzado, vaya a Responsive, apágalo. Escóndelo tanto en escritorio como en tableta. Eso solo significa que cuando voy aquí, no está ahí. Y si hago clic en esta flecha, se remonta a como antes era lo mismo en la tableta. Verlo ahí en el editor, pero en realidad no está ahí. Y lo verás cuando veas una vista previa de la página. También estos botones de redes sociales ya no deberían aparecer en el móvil. Da clic en los botones de redes sociales, ve a Avanzado y escóndete en el móvil. Ahora todo lo que tenemos es el texto ahí dentro. Obviamente, es difícil ver dónde está todo en este momento. Pero vamos a entrar a editar este contenedor. Entonces tenemos un hueco de 30 píxeles entre cada uno de los botones. Cambiemos eso rápidamente a cero. Ahora vete tú. Ahora podemos ver todo juntos a la vez. Obviamente cada uno de esos está demasiado cerca el uno del otro. Digamos solo cinco píxeles, tal vez diez píxeles. Creo que es suficiente espacio entre cada uno. Y nuevamente, solo juega con esto cuando lo mires en diferentes dispositivos. Quizás quieras hacer el texto un poco más pequeño. Sólo vamos a entrar en tipografía. A lo mejor configurarlo en 14 píxeles, eso es un poco más pequeño. Haz lo mismo en todo esto, se reduce a cualquier contenido que tengas en tu sitio web. Sólo tiene que jugar un poco con eso. Y si tienes algún problema para que todo encaje, solo envíame un mensaje y te haré saber cómo apilarlo en dos niveles diferentes. Lo que también quiero es que todo este texto aquí esté justificado. Básicamente, quiero que el contenido se extienda hasta el borde. Como puedes ver, vieja escuela, eso va al borde de la caja aquí, pero Guitars no. No puedo alinearlo a la izquierda o alinearlo a la derecha. Lo que voy a hacer es repasar a esta sección. Estoy editando el contenedor. Entonces en justificar contenido, haga clic en este que dice espacio entre. Entonces lo esparce todo. Se ve genial. Ahora esto casi se ve perfecto, que tenemos el texto aquí y luego tenemos los dos botones de redes sociales a continuación. Es solo que ese logo que es un poco demasiado grande. Bastante grande. De hecho, vamos a hacer clic en la imagen ya sea en estructura o haciendo clic en la imagen. Solo cambiemos el tamaño de mucho más pequeño, tal vez como 35% tal vez un poco grande 40% entonces bueno, debería estar centralizado. Entonces si voy al Centro de Alineación de Contenido, ahora si hago clic en la flecha, en términos de apilamiento, eso todo funciona muy, muy bien. Tengo el logo, después tengo la barra de navegación, y después tengo los íconos Lo único que creo que quiero hacer aquí es hacer que estos íconos de las redes sociales sean un poco más pequeños. Tal vez espaciarlos un poco, entonces solo necesito jugar con el espacio alrededor de todo aquí. Obviamente, el logo está demasiado cerca de la parte superior. No hay suficiente espacio entre logo navbar. Iconos de redes sociales. Volvamos al editor. En primer lugar, echemos un vistazo a estos íconos sociales. Pasemos al estilo entonces. El tamaño es 18, vamos a cambiar eso a 14 entonces Todo con lo que quiero jugar es el espaciado entre cada uno. Probablemente este espaciado, sí. Sólo lo voy a arrastrar un poco. Voy a poner eso también en 14. Veamos cómo se ve eso. Sí, eso es mucho mejor porque son botones separados, Necesitas presionarlos por separado. Volvamos al contenedor. Pasemos a Avanzado. Vamos a cambiar todo el relleno a cero. Ahora lo que quiero hacer es agregar relleno extra en la parte superior. A lo mejor 30 por todas partes, para ser honestos. Digamos que si eso está en la parte superior, la derecha y a la izquierda, veamos cómo se ve eso. Eso es trabajar mucho mejor en términos de espacio. No obstante, hay un espacio en blanco en la parte superior, podemos trabajar en eso. También echemos un vistazo al contenedor de retención general y cambiemos estas brechas que ahora se establecen en cero. Pongamos diez y veamos cómo se ve eso. Sí, eso es perfecto. Ahora tenemos diez píxeles entre el logotipo y la barra de navegación, y entre los botones de redes sociales de abajo, Es solo este espacio en blanco en la parte superior. ¿Por qué está pasando eso? Está sucediendo porque hemos dicho que la altura mínima de esta sección sea de 100 píxeles. Sin embargo, es más grande que eso. Ahora porque estamos apilando todo, hagamos clic en el contenedor principal. Ve a Edit Container, ve a Layout, cámbialo a 150 pixeles. Entonces deja contenedor debajo del contenedor héroe. Éste de aquí. Cambiemos eso en Avanzado, 2,100.50 Asegúrate de que no todos estén vinculados 150 y luego vamos a -150 y a ver si eso funciona. Eso sí funciona. Ahí vamos. Ahora eso es perfecto, ¿no? Ahora tenemos un bonito espacio vacío. En la parte superior vemos el logo, vemos todas estas barras de Nav y vemos el ícono de las redes sociales. Eso se ve genial. Apenas otras dos cosas que me he dado cuenta aquí. En esta vista móvil, no es el problema en la vista de tablet o en la vista de escritorio es la posición de estos dos clientes y la posición y tamaño del logotipo. Cuando voy al móvil uno logo es demasiado pequeño y realmente no se puede ver a la gente. Juguemos con esas dos cosas. Es decir, nuevamente, en el contenedor principal para el héroe, estamos en el contenedor, vamos al estilo, vamos al fondo, y aquí estamos viendo la imagen. Ahora lo que tenemos que hacer es posicionar. Tenemos la opción de centro, centro, que es lo que teníamos. Podemos elegir centro izquierda demasiado lejos a izquierda, centro derecha demasiado lejos. O el mejor que podemos elegir aquí es personalizado. Porque con eso podemos jugar con la posición X y la posición Y. Juguemos con esta posición X y moverla un poco. Obviamente, no quiero moverlo demasiado lejos a ese lado, solo necesito que esté por aquí. Digamos que aunque sea -200 menos 150. Lo siento, 250. Ahí vamos. Creo que eso es genial. Así se puede ver que hay dos personas mirando ahí y están mirando los registros. Así que ahora hagamos que el logo sea un poco más grande. Así que haz clic en el icono, haz clic en estilo, y aquí vamos. Ancho, Lo tenemos establecido en 15% tal vez ir hasta 25, 30. Veamos cómo se ve eso. Eso se ve genial. Ahora podemos ver que hay gente mirando los artículos en la tienda. Nuestra barra de navegación, nuestro encabezado funciona perfectamente. Todo está alineado, y podemos ver el ícono principal de la compañía. Impresionante, vamos a guardar este borrador, entonces he entrado en la extensión, y aquí estoy mirando los smartphones de Apple. Entonces este es el iphone 13 Pro. Max se ve genial ahí. Regular Pro también se ve bien. Todo está alineando. Puedo leer todo, puedo navegar por todo. Y está llenando la página completa para cada uno que se vea perfectamente. Cualquier pequeño cambio como ese que se asegure entrar en la extensión y revisarla ahí primero. Bien, volvamos al editor. La sección superior está funcionando. Veamos qué tenemos aquí ahora. Bien, lo que ha pasado con esta sección es que la ha cambiado de la dirección horizontal a una vertical que es perfecta. Creo que ahí funciona absolutamente perfecto. En lugar de tratar de apretar ambas cosas una al lado de la otra. El título Wolfgang Music y el texto se asienta sobre la imagen deslizante Lo único que creo que quiero cambiar es solo un poco de espacio en este lado de la caja, solo para que el texto corra hasta el borde. Vamos a hacer clic en este contenedor por aquí en Editar contenedor. Ve a Avanzado, despega ese espacio de 25 píxeles. Ahí vamos. No es un gran cambio, solo significa que el texto está alineado con la imagen de abajo. Eso funciona perfectamente. Estos de abajo, en realidad, ya son perfectos. Está hecho ellos apilados automáticamente de todos modos. Element o puedes leer lo que quieras hacer en el móvil y hacer que eso suceda automáticamente. Eso es genial. No hay trabajo que hacer ahí. Ahora éste. Bien, ya casi está ahí, pero no del todo. Apilarlo de nuevo, como lo hemos hecho anteriormente, eso es perfecto. Creo que eso funciona muy bien. Sin embargo, el espaciado no es del todo correcto. Realmente no puedo ver la imagen de abajo. Tenemos que arreglarlo. Entremos aquí. Vamos a hacer clic en el contenedor. Ir a Avanzado. Lo que tenemos aquí es relleno de 30 a la izquierda. Vamos a vincularlos a todos y hacerlos todos 30 ahí. Simplemente obtenemos un poco más de espacio por encima del 01 y un poco de espacio debajo del texto. Entonces lo único que quiero hacer es en este subcontenedor, quitar el espaciado por aquí a la derecha Da click en este cuadro Avanzado, quita ese 50 pixel demasiado fácil. Eso funciona muy bien. Lo único que obviamente no está funcionando, es que no puedo ver esa imagen. Está ahí y es el fondo del contenedor. La razón por la que funciona antes fue porque teníamos dos columnas que estaban dispuestas horizontalmente. Por lo tanto, la altura de una de las columnas también se representó con la altura de la siguiente columna. Eso no está pasando ahora porque están apilados. Simplemente cambiemos la altura mínima de este contenedor. Haga clic en Editar contenedor, venga aquí para diseñar la altura mínima. Y vamos a jugar con los píxeles aquí. Quizás 400 píxeles, tal vez 500, tal vez en algún lugar en el medio, 450. Ahí vamos. Estoy contento con eso. Sólo significa que la gente, cuando llegue a la sección de guitarra, se desplazarán hacia abajo, leerán sobre eso, y luego verán a la chica tocando la guitarra. Perfecto. Ahora estos, 02 graba shows en vivo 0304. Mira, creo que en términos del espaciado de todos esos, en realidad están funcionando perfectamente. solo hay un problema obvio Aquí solo hay un problema obvio porque ahora que el, quiero que pase del 02 a los registros, entonces quiero ver la imagen 03 de aquí. Es muy fácil de arreglar. Lo que tenemos aquí es el contenedor principal general que tiene el texto para shows en vivo y la imagen con el 03, están organizados de manera regular. Esto es decir fila horizontal y es decir de izquierda a derecha. Todo lo que voy a hacer es pasar a esta flecha en el lado que dice columna invertida. Y solo haz clic en eso. Entonces ahí vamos. Demasiado fácil. El 03 ha saltado a lo más alto. No obstante, el ancla que todavía está por encima de él, eso no se ha movido porque no pusimos eso encima del texto. Si alguien hace clic en el ancla cuando está en el móvil, seguirá yendo a este 03. Vamos a ver cómo se ve todavía esa sección. Eso fluye muy bien del 02 a los registros. 03 shows en vivo perfectos. Como decía, eso solo cambió la pantalla o el diseño de ese contenedor en el móvil. Si voy a las tabletas, sigue igual que antes. Opuesto, opuesto. Escritorio, igual que antes. Opuesto, opuesto. Te darás cuenta a medida que vuelvo a revisar estos, no ha habido ningún cambio en absoluto. Como dije, son inherentes a este orden. Lo que se hace en el escritorio se toma en la mesa. Lo que se hace sobre mesa se toma en el móvil. Ningún cambio que haga en el móvil debería tener ningún efecto en nada de mesa o escritorio. Asegúrate de revisarlos porque algo puede acercarse a ti. Volvamos al móvil. Casi hecho aquí. Veamos qué tenemos. Déjenme ser honesto, los testimonios, perfectos. Ni siquiera quiero jugar con eso. Y luego esta sección en la parte inferior, eso es casi perfecto, solo del espacio negro alrededor. Eso es literalmente solo el espaciado, el relleno sobre este lado y el espaciado de arriba se comprueba. Vamos a ese contenedor, haga clic en Editar contenedor, vaya a Avanzar. Ya sabes cómo hacer todo esto ahora quítate el acolchado izquierdo, y luego en la parte superior, digamos 50 ahí. Eso fue 65 y están todos vinculados. Hiciste algunas cosas mal ahí. Vamos a desvincularlos y digamos que en la parte superior estaba 50. Ahí vamos. Si miras eso, eso está funcionando perfectamente. Y eso fue bastante fácil de arreglar porque lo habíamos configurado de una buena manera en el escritorio que era fácil de editar y luego pudimos editar eso en la tableta agradable y rápido. Después haz los cambios que hicimos, nuestra tablet también aparecerá de la misma manera en el móvil. De nuevo, solo guárdala, luego vamos a previsualizar los cambios. Vamos a ver cómo se ve eso. Ya estamos en una versión móvil aquí. Sección superior, perfecta. Desplázalo hacia abajo, Wolfgang. Música Incluso porque este es un teléfono más grueso, en realidad lo extendió. Las palabras Wolfgang. Y Música Que se ve genial. Perfecto. Perfecto. Perfecto. 01 guitarras visualización de imagen perfectamente. La puedo ver, puedo ver la guitarra 02 discos. Todavía tengo la animación aquí también. Eso ha seguido desde el escritorio de dos tabletas hasta los shows en vivo móviles, testimonios de la vieja escuela y luego el pie de página. Ahora tienes un sitio web completo. Algo que tenga cada sección elaborada y algo que funcione perfectamente en computadoras de escritorio, tabletas y móviles. Hagámoslo vivir. 16. Deja tu sitio listo para lanzarlo: Bien, entonces ahora estamos listos para hacer que tu sitio web esté en vivo. Como se puede ver en la parte superior aquí, todavía dice que es un borrador para cambiar eso. Solo ven aquí a la derecha y haz clic en Publicar. Cuando eso haya terminado, venga aquí a la izquierda, haga clic en la E y elija Salir a Wordpress. Nada que tengas que ver en esta página, simplemente haz clic en el logo de Wordpress. Eso te llevará de vuelta a las páginas establecidas. La página que estamos usando, Wolfgang Music que ahora verás está en vivo Ya no tiene borrador al final del mismo. Sin embargo, tenemos que hacer un pequeño cambio. Esta va a ser la página principal. Haz clic en Edición rápida, The Slug, ese es el nombre que viene después de la URL Cuando tienes varias páginas en tu sitio, sería una URL. Contacto blog. Este es el hogar. Sólo queremos llamarlo hogar. Vamos a actualizar. Entonces hay que decir que esta va a ser la página principal. Haga clic aquí en apariencia y personalice. A continuación, elija Configuración de la página principal. Aquí tienes la opción de tus últimas publicaciones o una página estática. Queremos una página estática que va a ser Wolfgang Music Eso cambiará automáticamente. Todo esto ya está configurado y esta es tu página de inicio que todos visitarán cuando lleguen a tu sitio. Una vez hecho todo esto, haz clic en Publicar y estarás listo para comenzar. 17. Configuración de nombre de dominio: Entonces ahora tienes un sitio web en vivo, y si quieres mis comentarios sobre el sitio web Build, solo usa un nombre de dominio que WoZma te dio cuando te registraste Sin embargo, si este es un servicio que quieres hacer vivo para que todos en el mundo lo vean, podemos cambiar el nombre de dominio uno que hayas comprado en otro lugar. Entonces, para hacer esto, vuelva a iniciar sesión en su cuenta de WoZma y haga clic en aplicaciones implementadas recientemente en el sitio web que acabamos de configurar Y luego aquí abajo, da clic en Configurar Dominios. Entonces aquí es donde puedes agregar un nombre de dominio que quizás hayas comprado en otro lugar. Uno de los lugares más populares para comprar un nombre de dominio es algo así como Go Daddy. Entonces, si has comprado eso, puedes señalarlo al sitio web que acabas de construir. Así que toma ese nombre de dominio y póngalo en esta casilla de aquí. Y luego haz clic en Agregar tienes algunas opciones aquí. Solo tienes que seguir adelante con el recomendado en la parte superior aquí, lo que significa que funcionará con la versión WWW y sin la WWW. Y te compran a través de esta página, y estas son las dos líneas de código que necesitas agregar a tu proveedor de DNS. Entonces ese es el proveedor del sistema de nombres de dominio, para que tal vez Go Daddy dominios locos, uno de estos servicios en línea. Cualquiera de estos que estés usando, si no está claro dónde ingresar esto, envíame un mensaje aquí, y te avisaré para ese servicio específico, cómo configurarlo Entonces tenemos que entrar y configurar este código de registro A aquí y este registro de nombre C aquí. Y cuando todo eso esté hecho, simplemente haga clic en Refrescar en ambos. Puede tomar cualquier cosa hasta 72 horas para trabajar realmente, pero eso normalmente ocurre dentro de una hora más o menos. Así que sigue probando tu nombre de dominio, y cuando esté todo configurado, esto es lo que verás. Llevará a los usuarios a través del sitio web que hayas configurado usando el nombre de dominio correcto, y podrás compartirlo en todo el mundo, a través redes sociales, contarle a todos tus amigos. 18. Gracias: Gracias por tomarse el tiempo para ver toda esta clase. Si seguiste cada lección, ahora tienes un sitio web de aspecto increíble y sabes qué, quiero ver este sitio web, puedes cargarlo aquí en la sección de proyectos a continuación. Si lo pones ahí, te daré mi opinión completa lo antes posible. Si tienes alguna duda sobre algo en alguna de estas lecciones, publícalas en la sección de discusión también a continuación aquí. Cuando hayas terminado la clase, sería genial que me dejaras una reseña. Entra aquí a la sección de revisión y haz clic en Revisar. Esto es genial. Como me puedes decir lo que realmente te gustó de la clase, pero también lo que se puede mejorar. Y eso me ayudará a editar cualquier parte de la clase que creo que será mejor para mis próximos clientes. Y asegúrate de hacer clic en mi nombre a continuación para ver mi perfil completo de compartir habilidad. Aquí, verás todas las demás clases de sitio web que estoy dirigiendo. Tenemos uno sobre la construcción un portafolio, también usando elementor, y otro sobre qué hacer con las imágenes, cómo subirlas y sacar el máximo provecho de tu sitio web Puedes ir a ver todos esos y asegurarte de seguirme. Así podrás ver en cuanto esté subiendo nuevas lecciones y podrás aprender un poco más Impresionante. Que tengas un gran día.