Master en creación de sitios web: de lo básico a lo avanzado con efectos y animaciones impresionantes

1. INTRODUCCIÓN: Alguna vez te has preguntado cómo se hacen estos llamativos sitios web, o tal vez estás listo para comenzar a diseñar el tuyo e incluso ganar dinero con él? Bueno, estás en el lugar correcto. Bienvenido a mi curso definitivo de Wordpress y Elementor. En este curso, estamos iniciando las cosas con una visión general de elementor, obtendrás todos los conceptos básicos Además, te mostraré algunos trucos súper geniales como animaciones de texto y más eso hará que tus diseños destaquen, pero no nos vamos a parar ahí. Juntos, construiremos tres sitios web reales, cada uno de ellos subiendo de nivel desde el último. El primero es un sitio básico, perfecto si recién estás comenzando. Luego abordaremos un proyecto intermedio con algunas características avanzadas, y finalmente crearemos un sitio web de nivel profesional que te hará lucir como un genio del diseño web. Aquí hay una parte emocionante. Al final de este curso, no solo tendrás las habilidades para construir sitios web increíbles, sino también una hoja de ruta para convertir estas habilidades en ingresos, diseñando sitios para clientes Entonces, si estás listo para crear algo increíble y ganar dinero haciéndolo, únete a mí en el curso y comencemos. 2. Descripción general de Elementor: primeros pasos: Hola, amigos. Entonces este es nuestro Wordpress AdinNnel o Wordpress Dashbol Personalmente me encanta trabajar en el ambiente limpio, así que cerraré esta etiqueta. Bien, ahora, haga clic en la pantalla Opciones y marque para nosotros Bien, entonces esto ya está limpio. Esto se ve genial. Ahora te voy a explicar una por una a estas opciones. En primer lugar, este es nuestro panel de WordPress, y el segundo es la opción de actualización. Así que si instalamos algún plugin y actualizamos en el futuro, si alguna actualización llega más tarde a nuestros plugins y actualizaciones que mostramos aquí. Para que puedas actualizar desde aquí. Siguiente es nuestra sección de post. Así que publica a todos los post, podemos ver aquí todos los post si eres blogger y escribes post. Entonces desde aquí, puedes editarlo, eliminarlo. Puedes escribir tu post aquí. Entonces lo siguiente es agregar nuevo post. Desde aquí, puedes agregar un nuevo post. Si haces clic en esto, entonces hay un pop up, da clic en el botón Cancelar. Aquí puedes agregar título como estoy escribiendo. Sólo te estoy dando un ejemplo. ¿Cuál es tu nombre? Entonces en descripción, estoy escribiendo algo así, mi nombre es Ti hang. Bien, entonces en el lado derecho, da clic en publicar y publicar. hacer clic derecho, lo estamos abriendo en una nueva pestaña y vea aquí. Este es nuestro post parece. Voy de nuevo al modo dash de Wordpress. Entonces bien. Desde categorías, puedes gestionar tu categoría de publicación. Bien, la siguiente es nuestra etiqueta. categorías y las etiquetas no nos son útiles porque estamos haciendo nuestro sitio web. Pero solo estoy dando explicaciones sobre cada opción para que puedas entender más. Esta es nuestra sección de usuarios, así que quiero familiarizarme con esto Estoy tomando perfil. Así que aquí puedes elegir como configuración de color admin. Entonces cuando haces clic en Luz, así como puedes ver, admin tenolor cambiar Entonces puedes cambiarlo según tú, pero lo estoy manteniendo como defoy Entonces a partir de aquí, puedes agregar nuevos usuarios. En este momento, quiero que te familiarices con dos términos básicos Uno es un Bond o el tablero de un sitio web, y otro es el front-end de un sitio web. Entonces ahora mismo en este lugar, este es el dashboard o el panel de administración porque solo nosotros podemos verlo ya que teníamos el admin de esta web. Ahora, si quieres ver el sitio web, todo lo que necesitas hacer es dar la vuelta al nombre del sitio como. Esto es como puedes ver, aquí está el lado Widget. Estoy abriendo en una nueva etiqueta. Haga clic en esto. se puede ver el extremo frontal del lateral. El mundo entero puede ver esta porción de nuestro lado. Entonces en este momento, nuestro sitio web se ve así. Por supuesto, lo cambiaremos de la manera que queramos. Pero en este momento, esta es la parte frontal de nuestro sitio web. Por cierto, podemos ver esta barra superior negra aquí ya que estamos loguados. Pero otros visitantes no pueden ver esta barra negra en la parte superior de la nit. Por cierto, aquí, antes de hacer nada, solo quiero hacer un ajuste sencillo, así que voy a volver. Yo sólo quiero hacer un ajuste sencillo. Entonces desde la configuración, antes que nada hagamos clic en género. Y aquí puedes cambiar el título de tu sitio como aquí me pregunto que estoy escribiendo aquí. Por ejemplo, estoy escribiendo aquí ondas así que cuando guardamos los cambios, ahora, cuando vas a tu sitio web de front-end y refrescas esto, cuando refresquemos esto, como puedes ver el título de nuestro sitio se muestra aquí. Bien. Ahora voy a regresar. Aquí puedes escribir un lema. Puedes elegir un ícono de sitio desde aquí. Elija un icono de sitio y haga clic en Subir archivos. Estoy seleccionando pilas el icono que quieres elegir como por ejemplo, estoy eligiendo este ícono, haz clic en Subir. Establecer como icono del sitio. Ahora solo haz clic en recortar imagen. Entonces como pueden ver, aquí está nuestro icono, aplicado. Entonces como puedes ver, este es nuestro ícono. Puede eliminar el icono del sitio desde aquí. Estos ajustes no voy a cambiar. Puedes cambiar el idioma de tu sitio desde aquí. Bien, pero lo mantengo como inglés. Se puede cambiar el formato de los datos, según usted, el formato de hora. Puede cambiar todos los ajustes de acuerdo a usted, y luego hacer clic en Guardar cambios. Bien, entonces estos cambios son de pintura, como pueden ver. Entonces a partir de aquí ahora, da clic en enlaces permalinks. Entonces aquí está el plano selector, pero recomendaré usar post Nick porque aumenta la optimización A en el ranking de Google porque en llano, hay números que son difíciles de leer o de recordar, pero el nombre de la publicación es fácil para legibilidad humana y para recordar Ahora el rollo hacia abajo y nosotros con saf cambia. Ahora instalaremos los temas y enchufaremos los cuales son importantes para que nuestros sitios web instalen el tema, vamos a la sección de tema de apariencia. Entonces como puedes ver, el tema 2024 está activado. Esto es lo predeterminado por instalación Wortless. Para que puedas agregar nuevo tema haciendo clic en este. Entonces, como puedes ver, hay muchos temas gratuitos que puedes usar. Desde aquí, puedes subir un tema. Puedes elegir Pila desde tu computadora. Pero estoy buscando el tema desde aquí. Como si estuviera usando el tema Astra. Así que aquí está nuestro tema Astra ahora haz clic en Instalar. Nuestro tema Astra está instalado. Ahora, da clic en activar para activar este tema. Bien, entonces nuestro tema Astra está activado. Estamos eliminando este tema 2024. Entonces, antes que nada, da clic en esto y estoy dando clic en este eliminar y bien. Déjame decirte explicarte que qué son los temas. Los temas son el diseño de su sitio web de WordPress. Determinan cómo se ve tu sitio y cómo se muestra tu contenido a los visitantes. Los equipos cambian el aspecto general su sitio web, incluidos los colores, fuentes y el diseño, hacen que su sitio se vea atractivo y fácil de usar. Si voy aquí, si vuelvo a cargar la página, ahora, como pueden ver aquí esto se está mostrando solo porque instalamos los temas de Astra Se cambia el aspecto de nuestro sitio web. Sé que esto se ve aburrido. Ahora vuelve a tu tablero. Ahora estoy instalando el plugin. Así que vamos a plugins. Desde Plugin instalado, puedes ver qué plugins están instalados ya que no hay ningún plugin instalado. Así que desde Add New plug in, puedes agregar un nuevo plugin. Estoy dando click en esto. Entonces en el cuadro de búsqueda, estoy escribiendo el Eleanor Asegúrate de que la ortografía debe ser corregida. Este es nuestro creador de sitios web Aleaor. Así que haz clic en Instalar ahora. Toma activar para activar este plugin. Bien, ahora, como puedes ver, nuestro plugin se muestra aquí. Entonces, básicamente, ¿qué son los plugins? Los plug-ins aumentan la funcionalidad de tus sitios web de WordPress, conéctate a agregar nuevas funciones, mejorar el rendimiento y mejorar la seguridad. Mejoran lo que su sitio puede hacer y cómo funciona. Vamos a añadir nuevo plugin desde aquí. Desde aquí, puedes buscar otros complementos como estoy escribiendo así que este es nuestro complemento Element skit Haga clic en Instalar ahora. Así que nuestro plugin ha sido instalado. Haga clic en Activar para activar esto. Bien, entonces nuestros dos plugins están aquí. Ahora te voy a dar el ejemplo de plugin popular. Así que Element también es un plugin muy popular. Entonces este es un wilter de página de arrastrar y soltar para crear un diseño personalizado Ahora haz clic en Añadir Nuevo plugin. Estoy buscando USSUUSSUPlug in también es Ayuda a optimizar tu sitio para buscadores. Sólo te lo estoy enseñando. No voy a instalar esto. Sólo te lo estoy enseñando. Así que a continuación nuestro plugin es WooCommerce. Así que este es nuestro plugin WooCommerce. Agrega funcionalidad de comercio electrónico a tu sitio web. A continuación está nuestro Formulario de Contacto siete. Entonces este es nuestro Formulario de Contacto siete. Lo estoy instalando, y nos permite crear y administrar Formulario de Contacto. Ahora, basta con hacer clic en Activar para activar esto. Hemos instalado todos nuestros plugins y temas. Al usar Teams y el complemento, puede personalizar su sitio web de WordPress para que se vea y funcione exactamente de la manera que desee sin necesidad de escribir ningún código. Entonces nos reuniremos en nuestra próxima clase. 3. Descripción general de Elementor: segundos pasos: Solo instala ese plugin que son importantes para tu sitio web porque cuando instalas más plugins que no son importantes para tu sitio web, entonces disminuye la velocidad de tu sitio web. Así que asegúrate de subir esos plugins, que son importantes para tu sitio web. Ahora vamos a la sección de páginas. Estoy dando click en todas las páginas. Por lo tanto, la privacidad y las páginas de muestra son por defecto. Así que da click sobre esto. De webth action, me mudo a la basura y aplico. Bien, ahora dos páginas son más tarde. Ahora agregaremos una nueva página. Entonces, para agregar una nueva P, puede hacer clic desde aquí o puede hacer clic desde aquí. Bien. Por lo que ahora, da click sobre esto. Estoy dando a mi página como página de ejemplo. Ahora da clic en publicar, nuevamente publicar. Ahora da click en estos tres puntos, y desde aquí, se puede ver aquí tira del modo pantalla. Y cuando hacemos clic en esto, así como pueden ver, esta barra izquierda está aquí. Ahora da click en él con Eleanor para editar nuestra página. Entonces nuestra página se está cargando. Está mostrando un pop up, así que da clic en Cancelar. Ahora, da clic en este botón Cancelar. Entonces este es nuestro creador de páginas Elementor o Elementd Entonces este es nuestro lienzo lementd. Y en el lado izquierdo, todos estos son nuestros widgets o elementos Elementor Entonces a veces voy a decir elemento widget o a veces solo digo elemento, así que no confundas con elementos widget y elementos son ambos estos nombres Así que puedes ver aquí hay una gran cantidad de widget de elementos que puedes usar para hacer tu sitio web. Entonces ahora vamos a entender a estos íconos. Ahora bien, este es nuestro ícono más. Entonces, si queremos agregar un contenedor, así puedes hacer click en este, y nos está mostrando a dos layouts. Primero es Flexbox y el segundo es grid. Así que gran diseño. No vamos a usar esto porque esto no es estable. Así que ahora haz clic en Flexbox. Y puedes ver que hay mucha estructura que puedes usar de acuerdo a tu deseo. Hablaremos de esta estructura a solo unos minutos. Entonces voy a regresar, así que solo haz clic en Cancelar. Entonces esta es una segunda opción. Al hacer clic en esto, puedes agregar plantilla desde aquí. Entonces en la sección de bloques, puede ver que hay un montón de plantillas, pero estas son para elemento de P. Así que no vamos a utilizar estas plantillas. Ahora ve a las páginas, y puedes ver aquí hay muchas páginas para Elementor Pro Siguiente opción, mi plantilla. Puedes guardar tu plantilla aquí. Pero no guardamos ninguna plantilla, así que por eso está vacía. Por lo que ahora volveremos, da clic en Cancelar. Entonces esta es nuestra opción de kit Element cuando hago clic en esto. Entonces, como pueden ver, aquí hay muchas páginas. Esto es solo porque instalamos el kit de elementos enchufando. Es por ello que nos están mostrando. Ahora, da clic en Cancelar. Ahora sólo voy a hacer clic en Este icono más. Y voy a elegir Flexbox y de aquí, estoy eligiendo primera estructura, que es dirección columna Entonces, como pueden ver, este es nuestro contenedor padre. Ahora puedes ver estas tres opciones. ¿Qué pasa con estos son? Cuando hago clic en este icono más. Entonces, si quieres agregar un contenedor encima de este contenedor, para que puedas agregar formulario hago clic en este ícono más, Flexbox, y estoy eligiendo primera estructura Entonces como pueden ver, hay dos estructuras. Primero es esto y segundo es esto. Entonces solo estoy borrando esto. Cuando hacemos clic en esto, se selecciona el contenedor padre. Se abren tres secciones. Entonces primero es el diseño, segundo es el estilo y el tercero es el avance. Ahora te voy a explicar estas tres secciones. Bien, entonces primero es contenedor. A partir de esto, como puedes ver, siempre elegiremos Flexbox y el segundo es el ancho del contenido Mantendremos el contenido como caja porque cuando eliges contenedor en caja, no habrá estiramiento en nuestro Para que puedas ver el ejemplo en vivo cuando acerco y alejo cómo nuestro contenido no se estira. Siguiente es nuestro ancho. Para que puedas aumentar o disminuir el ancho de tu contenedor. Siguiente es nuestra altura mínima. Para que puedas aumentar o disminuir tu altura mínima de tu contenedor. Como si solo lo estuviera guardando 500 de aquí, puedes disminuirlo en uno como este, y puedes aumentar a partir de aquí en uno. Ahora voy a en sección de estilo. Entonces aquí está nuestro trasfondo. Desde aquí, puedes cambiar tu tipo de fondo en tipo de fondo. Estoy dando click en Clásico. A partir de aquí, puedes elegir cualquier color como yo estoy ping it black. A partir de aquí, puedes aumentar o disminuir la transparencia de tu color. Aquí puedes poner tu código de color directamente, y puedes elegir en estas opciones también en las que estés cómodo, puedes elegir. Si quiero restablecer este color, solo haz clic en claro como si fuera color al click, estoy eligiendo este negro así que quiero guardar este color negro. Así que simplemente haz clic en el icono más, como puedes ver aquí es el color global. Entonces, ¿qué es el color global? Cuando haces tu sitio web, así que cuando piensas que este color va a ser usado una y otra vez en mi sitio web, así que no quieres seleccionar ese color una y otra vez. Para que puedas guardar ese color. Para que ese color guarde en nuestro color global y desde aquí, puedes renombrar tu color como estoy escribiendo aquí. Negro oscuro. Puedes darle cualquier color a tu nombre, así que estoy dando click en Crear. Así que aquí puedes elegir directamente de este color. Entonces la siguiente es nuestra imagen. Si quieres agregar una imagen en tu fondo. Entonces, ¿cómo puedes hacer eso? Entonces primero, estoy reiniciando este color, así que para restablecer, da clic en Borrar Ahora quiero agregar una imagen de fondo. Por lo que voy a dar click sobre esto. Como pueden ver, aquí viene elige Imagen, así voy a dar click sobre esto. Para que puedas elegir Imagen desde aquí, como yo estoy eligiendo esto, haz clic en subir. Ahora Picon Slack ahora puedes jugar con esto también como Aislamiento de imágenes, lo voy a mantener como lleno Desde la posición, puedes elegirlo como centro centro. Entonces como puedes ver, nuestra imagen está cambiando como centro izquierda desde aquí, puedes explorar estas opciones como arriba a la derecha, te gustará esto. Entonces lo estoy usando Centro e izquierda. El siguiente es el apego. Entonces, cuando hacemos clic en este sacro, cuando alguien cruza a nuestro sitio web, así nuestra imagen se desplazará, puedes ver esto en vivo ejemplo Así que ahora cuando hago clic en este fijo, así como se puede ver cuando me atornilla a mi sitio web, nuestra imagen pixed ahora Acerca de repetir, hablaremos de ello en otras clases. El siguiente es nuestro tamaño de pantalla. Así que en el tamaño de la pantalla, elegiremos cubierta cuando hagamos clic en portada. Por lo que nuestra imagen se cubrirá a nuestro contenedor lleno. Por lo que siempre lo mantendremos como tapadera. Lo siguiente es nuestra superposición de fondo. Cuando haces clic en la superposición de fondo, cuando elegimos, da clic en GlassC para que puedas elegir otra imagen de aquí como yo estoy eligiendo aquí Así que haz clic en Subir Pila desde aquí selecciona pilas. Estoy eligiendo esta imagen. Haga clic en Subir. Así que ahora haz clic en set. Entonces se agrega nuestra superposición. Entonces ahora, estos son los ajustes de nuestro overlay. Así que también puedes cambiar esta configuración como si la estuviera manteniendo en el centro. Entonces como se puede ver ahora podemos ver claramente superposición. Del apego, lo guardaré que de repetir, guardaré a no repetir, de desplazar lo voy a mantener tapado. ¿Bien? Entonces a partir de aquí, puedes aumentar o disminuir la opacidad de tu superposición La sección que no estoy explicando, veremos sobre esa sección cuando hagamos nuestro sitio web, así que no te preocupes por eso. Ahora estoy borrando estos overlay para que puedas entender mejor mejor. Ahora para eliminar esta superposición, puedes ir aquí y dar click sobre esto, como puedes ver se elimina nuestro overlay. Así que ahora sube a bordo. Aquí está el tipo de borde. Cuando hago clic en esto, como pueden ver, estos son los tipos de borde. Cuando elijo sólido. Entonces como se puede ver se agrega un agua. A partir de esto, puedes agregar bit de borde como si elijo cinco. Entonces, como pueden ver, nuestra intensidad de bóer se incrementa. Ahora bien, si aumento el valor como diez, así como pueden ver, la intensidad se incrementa más. Cuando escribo tenso así estos valores se aplican en el lado cuatro. No quiero esto. Si quieres cambiar el valor de un solo lado, así que qué puedes hacer por eso, solo tienes que hacer clic aquí. Ahora, como pueden ver, aquí viene unir valores de enlace. Entonces cuando desvinculamos esto, entonces puedes cambiar los valores de un lado, como si escribo 30 Entonces como puedes ver desde arriba, nuestro ancho de borde se ha incrementado pero desde otro lado, esto sigue siendo el mismo. Desde aquí, puedes agregar tu boderCLF aquí, puedes escribir. Ahora estoy vinculando estos valores, ¿de acuerdo? Entonces ahora lo estoy manteniendo como cero. Bien. Entonces el siguiente es nuestro radio de bóer Puedes darle radio de agua a tu imagen como si la guardo 40. Entonces, como pueden ver, se agrega nuestro radio fronterizo. Lo siguiente es nuestro divisor de formas. Así que aquí se selecciona la parte superior. Y de tipo, cuando seleccionas aquí como cualquier cosa estoy seleccionando nube. Entonces como se puede ver en la parte superior, aquí se muestran las nubes. Como puedes ver desde aquí desde el color, puedes elegir el color como puedes ver. El rojo maldijo nubes desde aquí, se puede aumentar la altura así Voltear al hacer clic en. Entonces como se puede ver como es esto están volteando. A continuación, puedes invertirlo también así como puedes ver, estos están invirtiendo. Bien, así puedes elegir de aquí. A continuación se trae al frente sobre esta opción. Nuestra imagen va a volver, y nuestro diseño como este estará en la parte frontal. Siguiente es nuestra sección inferior. Entonces a partir de aquí, también puedes elegir así. Voy en zig zag. Para que los cambios estén en la parte inferior. Al igual que si aumentas el ancho, como puedes ver ahora estos están agregando, elegiremos otro color. Si aumentas la altura, como puedes ver, ahora estas se están mostrando bien, y lo mismo también puedes llevar al frente. Ahora estamos avanzando. Lo estoy manteniendo como n. Ahora vamos por adelantado. Así que aquí se puede ver el diseño y hay margen de relleno. Entonces, ¿qué son estos? En margen, cuando escribo el valor 40, la posición de nuestro continuador se cambia debido al margen Si lo hago cero por todos lados, así como pueden ver, nuestro contenedor vuelve a su posición original. Entonces, ¿qué es el margen? Margen define el espacio exterior de un elemento. Ahora bien, si no entendemos bien, te voy a dar una explicación en profundidad. Ahora sólo estoy dando una visión general. Entonces, si no entiendes sobre el margen y el desvanecimiento, bueno, entenderemos profundamente en otras clases Ahora solo ve la diferencia entre margen y desvanecimiento. Así que en relleno, cuando doy el valor como 50. Entonces, como puede ver, nuestro contenedor no ha cambiado su posición, pero está viendo esta línea punteada. Entonces, ¿qué son las cosas? Comprenderás mejor sobre esto cuando dejemos caer el sobrerumbo con él. Ahora solo te enfocas en que ese contenedor no ha cambiado su posición, sino que esta línea punteada ha cambiado su posición. Acerca de la siguiente opción, entenderemos sobre estas opciones en otras clases. 4. Descripción general de Elementor: terceros pasos: Hola, chicos. ¿Qué está pasando? En la clase de hoy, ahora quiero llevarme un contenedor. Así que derribé este ícono plus en Flexbox, elijo nuestro primer contenedor Bien. Entonces este es nuestro contenedor, y en este contenedor, estoy arrastrando un widget de encabezado Entonces, para soltar el widget, puedes hacer clic en este ícono más, o puedes hacer clic en este ícono más. Entonces estoy dando click en esto. Entonces ahora estoy arrastrando el widget de encabezado. Entonces como puedes ver, nuestro widget de encabezado es drop, puedes cambiar tu título desde aquí o puedes cambiar tu título de aquí a Bien, como estoy escribiendo aquí. Entonces como tiendes, aquí está nuestro título, cambia instantáneamente. Aquí hay un enlace. Puedes hacer link de cualquier cosa como tu sitio web. Ahora te voy a dar ejemplo. Pasé el enlace aquí. Ahora estoy publicando esto, da clic en Publicar. Entonces aquí hay un ícono del globo ocular. Entonces estoy dando click en esto. Aquí puedes ver nuestro rubro noticias aquí. Entonces cuando haga clic en esta cabeza, redireccionaremos a ese sitio web. Así que voy a regresar. Ahora quiero hacer estilo con este texto. Entonces para eso, voy en etiqueta de estilo. Entonces a partir de aquí en rumbo, hay alineación. Cómo quieres mantener tu rumbo como yo lo mantengo en el centro, como puedes ver, nuestro rumbo está ahora en el centro. Ahora el siguiente es nuestro color de texto. Entonces a partir de aquí, puedes elegir el color del texto de tu encabezado así. Siguiente es nuestra tipografía. Aquí está la familia. Así que aquí puedes elegir tu fuente de texto. Como puedes ver, hay muchas fuentes y todas son muy buenas. Puedes explorar estas fuentes como Estoy buscando frailecillos Esta también es muy buena fuente. Entonces así, puedes elegir la talla como puedes ver. A partir de aquí, puedes elegir peso, como si lo mantienes 100, aquí puedes ver que el peso está disminuido. Bien, así que si eliges aquí entre 500, puedes ver el cambio. Entonces lo siguiente es nuestra transformación. Entonces en esto, puedes elegir como si elijo aquí mayúsculas, así como puedes ver, todas las letras están en mayúsculas Entonces, si eliges minúsculas, puedes ver la diferencia Siguiente es nuestra capital. Entonces el siguiente es nuestro estilo. En estilo, si lo haces como itálica, como puedes ver, nuestro texto es cursiva, así que puedes elegir cualquier cosa. Siguiente es nuestra altura lang. Entonces sobre esto, te lo explicaré más adelante. Así que lo estoy manteniendo como solo por defecto. No vas a entender de esto ahora, ¿de acuerdo? Entonces el siguiente es nuestro espaciado entre letras. Al aumentar esto, así como pueden ver, se incrementa el espacio entre cada letra. Bien. Entonces a partir de esto, puedes disminuirlo. Entonces me lo voy a quedar así. A partir de aquí, si aumentas el espaciado entre palabras, como puedes ver entre decenas y cuatro y observando, se incrementa el espacio. Se puede ajustar de acuerdo. El siguiente es nuestro trazo de texto. Después hago clic en este icono de lápiz, desde aquí, se puede aumentar el trazo de texto. Aquí puedes elegir el color del trazo como este. Así que voy a volver a restablecer cualquier cosa, tienes que hacer clic aquí de nuevo a default. Lo siguiente es nuestra sombra de texto. Estoy pinchando en este lápiz. A partir de aquí, puedes elegir el color. A partir de aquí, puedes aumentar el valor de borrosidad ya que puedes ver como este color rojo es borroso Ahora estoy dando click sobre este icono de lápiz. Ahora voy a soltar nuestro widget de imagen. Entonces si dejo caer aquí una imagen, así como pueden ver, aquí está nuestra imagen de elegir. De este pánico haz clic en esto de esto, puedes elegir tu imagen como yo estoy eligiendo esta. Aquí está nuestra resolución de imagen. Ahora vamos en la pestaña de estilo. A partir de esto, aquí está el ancho. Puedes disminuir o aumentar el tamaño de tu imagen así. A partir de esto, se puede elegir la alineación. Lo estoy manteniendo como centro. Puedes elegir el ancho máximo de acuerdo a ti. Puedes elegir la altura y desde el ancho del objeto, lo estoy manteniendo como cubierto. A continuación, hay dos opciones normal y otra vez. Puedes aumentar o disminuir nuestro pasado Siguiente es nuestro filtro CSS. Si haces clic en el icono del lápiz, desde aquí, puedes aumentar la borrosidad ya que puedes ver cómo se ve borrosa nuestra imagen Así que puedes elegir cualquier valor de aquí, como si yo lo estuviera manteniendo por defecto. Se puede aumentar o disminuir el brillo así. Contraste, puedes cambiar. Para que puedas ver muy bien los cambios. Entonces ahora estoy restableciendo todos estos valores. Entonces estoy dando click en esto. Desde aquí, puede elegir el tipo de borde. Si eliges sólido de aquí, un sumador de borde, puedes elegir el ancho del borde si lo guardo cinco Entonces, como puede ver, el ancho se ha incrementado en cinco. Puedes elegir Brercolor así. Ahora puedes ver claramente el borde coolor desde aquí, puedes elegir radio de borde si lo guardo 20, como puedes ver, las esquinas de las esquinas están redondeadas desde cuatro lados Siguiente es nuestra sombra de caja. Cuando hago clic en el icono de simple, puedes aumentar la sombra horizontal, cal, puedes aumentar o disminuir la ceguera Puedes elegirlo como separado. Entonces el siguiente es nuestro diez avanzado. Acerca de la t avanzada, hablaremos de esto en nuestras clases posteriores. Así que ahora tienes la mejor comprensión sobre el rumbo y nuestra imagen que 5. Comprensión de las unidades de CSS: Unidad CSS. Entonces estas son las unidades de lenguajes de codificación HTML y CSS. Cuando creamos un sitio web en WordPress con Alementor, entonces en realidad estamos desarrollando un Es solo que no estamos haciendo codificación, sino en el back end, codificación está funcionando y Wordpress funciona para nosotros aquí. Pero no significa que ahora necesitamos aprender HTML CSS para entender las unidades CSS primero hay que entender sobre la unidad absoluta y altiva Unidades tan absolutas. Unidades absolutas son aquellas unidades que mantuvieron o se fijaron a su tamaño. Entonces veamos un ejemplo. Ahora aquí, si utilizo la unidad absoluta para darle un tamaño a un encabezado, eso se fijará en nuestro escritorio y dispositivo móvil. Por ejemplo, ahora estoy tomando un contenedor aquí, haga clic en el icono más. Este es nuestro widget de encabezado. Yo lo hago a negro. Lo mantengo en tamaño a 20 de líneas de artículos a oración. Cuando voy en tablet, se puede ver que no cambió a su tamaño. Y en mohile se puede ver, puede ver que se mantiene a su tamaño en todos los dispositivos Ahora veamos a la unidad relativa. Las unidades relativas son aquellas unidades que se ajustan a su tamaño automáticamente dependiendo de varias cosas como el tamaño de la pantalla. Ahora, entendamos sobre la unidad de píxeles. Entonces, la unidad Pixel es una unidad absoluta. Entonces para entender esto, me llevo un contenedor. Ahora, antes que nada, le estoy dando la altura mínima a esto. Bien. Ahora haga clic en el icono más, arrastrando un encabezado Y déjame darle un color negro. Bien. Entonces estoy bien. Entonces puedes ver aquí pixel ya está seleccionado, y le doy el tamaño aquí 20. Ahora cuando reviso mi dispositivo tablet, se puede ver que este tamaño es fijo. No cambió a su tamaño. Entonces, si usas pixel en cualquier widget, así lo arreglará de tamaño en todos los dispositivos. Antes de entender las unidades relativas, primero, es necesario entender las relaciones padres-hijos. Entonces este es nuestro contenedor principal. Déjame darle una acuarela. Bien. Entonces le doy esta acuarela negra. Se puede ver que estoy aumentando su altura ahora clicon plus icon, y estoy arrastrando un contenedor dentro Déjenme dársela también a la acuarela. Oigan, chicos, así que vean aquí, este es nuestro contenedor para padres, ¿de acuerdo? Y este es nuestro contenedor infantil. Ahora icono de Peco plus, estoy arrastrando un widget de encabezado dentro de este contenedor hijo También estoy aumentando su altura mínima. Bien, así. Como te dije que este es nuestro contenedor padre. Este es nuestro contenedor infantil, ¿de acuerdo? Y este es nuestro elemento de rumbo. Para este elemento de encabezado, este es el contenedor padre. Bien. Y para ello, este es el contenedor padre. ¿Me estás cogiendo lo que quiero decir? Esta fue una relación padre/hijo. Las unidades relativas se ajustan a su tamaño sobre la base del contenedor padre. Bien, entonces ahora vamos a entender sobre las unidades relativas. Solo píxel es una unidad absoluta. Otras unidades son unidades relativas. Entonces nuestra primera unidad relativa es unidad porcentual. Entonces vamos a entender esto ahora ancho de contenido a ancho completo. Aquí, se selecciona porcentaje, ¿de acuerdo? Y voy a elegir aquí pixel, y voy a dar 1,000 pixel de ancho. A mi contenedor padre o a la sección principal. ¿Bien? Y aquí estoy dando una altura mínima. Pasar por debajo de Sita. Déjame darle un color negro. Bien. Ahora haz clic en el icono C más. Arrastre un contenedor infantil. Contenido a ancho completo. Déjenme darle un color de fondo también. Ahora bien, este es nuestro contenedor padre. Y este es el contenedor infantil. Para una mejor comprensión, seleccioné mi contenedor padre. Estoy haciendo contenido justificado al centro. Bien. Ahora vuelve. Seleccioné el contenedor de mi hijo. Puedes ver aquí se selecciona porcentaje, y lo estoy haciendo ancho al 50%. Bien, para que veas que el contenedor hijo ha contenido el 50% del área de nuestro contenedor padre. contenedor hijo mantendrá 50% del tamaño del contenedor padre. Si aumento o disminuyo el tamaño del contenedor padre. Por ejemplo, puedes ver aquí el ancho del contenedor padre es de 1,000 pizza, ¿verdad? Si lo hago aquí, 500, para que puedan ver, aún nuestro contenedor hijo ha contenido el 50% del área del contenedor padre. Si le di aquí 200, para que puedan ver, aún así cubre el 50% del área de nuestro contenedor infantil. Espero que entiendas ahora, así que ahora vuelve. Ahora las siguientes unidades CSS son VW y VH. En primer lugar, cuál es el significado de este VW y VH VW significa ancho de ventana gráfica y VH significa poner altura Ahora vamos a entender sobre esto. Esto también ajusta el tamaño según su elemento, pero no tiene padre. Al igual que en porcentaje, se ajusta a su tamaño de acuerdo a su padre, pero este ancho de ventana y vista ponen altura no se ajustan a su tamaño acuerdo a su padre así que veamos en qué base cambia a su tamaño Primero se pone ancho de este lado izquierdo a este lado derecho. Este es nuestro ancho de puesta y de esta parte superior a esta botella. Esta es nuestra tableta poner altura y ahorro de este lado izquierdo al lado derecho, poner ancho y de arriba a abajo, ponemos altura. Lo mismo en móvil, de izquierda a derecha, ancho de maceta, de arriba a abajo, altura de ventana gráfica Bien. Ahora, entendamos esto con el ejemplo. Le di un ancho en VW, Vpot ancho. Bien, así que le di el wid cien, ve a hacer Style te Ahora minimice la guerra. Para que veas le di el ancho a cien Vpu uid, y por eso cubre todo el ancho de toda nuestra pantalla Se puede ver aquí en tableta, cubre todo el ancho. Y lo mismo en el móvil, se puede ver aquí. Entonces ves que el ancho de Vpot cubre todo el ancho de nuestra pantalla Ahora seleccioné mi contenedor de discos. A partir de aquí, elijo la altura mínima en altura de ventana gráfica, y estoy llegando al 50% Le di la altura mínima 50 de mi contenedor padre. Ahora, minimiza esto, puedes ver que cubre el 50% de toda nuestra pantalla. No importa cuál sea la altura del sacreno, siempre cubrirá el 50% de nuestra altura secrene Se puede ver en el móvil, cubre el 50% de área. Le di color de fondo a mi contenedor padre. Oh, no necesito esto, estoy borrando este contenedor. Bien. Así que ahora acabo de llevar un contenedor hijo dentro de mi contenedor padre. Ahora estoy eligiendo este contenedor hijo y voy por debajo de Siteb. Le estoy dando un borde sólido. Ahora estoy arrastrando una imagen dentro del contenedor de mi hijo. ¿Bien? Déjame elegir. Por ejemplo, elijo esta imagen, ¿de acuerdo? Entonces de aquí, aquí hay un ancho, y lo guardo a medida, y elijo ancho VOT, y se lo di a 100 Bien. Bajo Estilo ta, estoy eligiendo vpotWidth y lo estoy manteniendo a 100 y ancho máximo, manteniendo también en ancho Vpot Y cuando lo guardo al 100%, Así se puede ver esta imagen cubre toda el área de este secrete ¿Por qué? Porque aquí le dimos el ancho de la vista Cuando agregamos algún elemento o algún widget dentro del contenedor que no salga de ese contenedor, ¿verdad? Pero en este caso, está sucediendo. ¿Por qué? Porque usamos aquí la viewport wid Bien, ahora entendiste muy bien que estos pones wid y pones altura no le importa su elemento padre Al igual que en este caso, el elemento padre para esta imagen es este contenedor blanco, ¿verdad? Y a esta imagen no le importaba esto, ¿de acuerdo? Ahora espero que entiendas eso lo que quiero decir ustedes ahora estamos al lado de las unidades RAM y M. Bien. Básicamente, estas unidades RAM y M se utilizan para nuestras fuentes. Primero que nada, entendamos sobre M. Así que me llevo un contenedor aquí. ¿Bien? Y déjame darle un color de fondo. Déjame elegirlo al negro. He añadido un encabezamiento aquí. He añadido aquí este encabezamiento. ¿Cuál es el significado de esta unidad N unidad multiplica al tamaño de fuente del elemento padre ¿Qué significa? Entonces seleccioné mi encabezado y de aquí, este es el tamaño de encabezado y lo elijo en, y estoy dando aquí, por ejemplo, uno, este EM vamos a multiplicar al tamaño de fuente del elemento padre. Y este es nuestro padre ¿verdad? Y se multiplicará a éste EM. Bien, por ejemplo, si doy aquí 3:00 A.M. Ahora estás pensando que este es el contenedor, cómo va a tener un tamaño de fuente. Entonces, déjame mostrarles ¿dónde está? Vaya a la configuración del sitio desde aquí y desde aquí, abra la tipografía Y cuando abres la tipografía, aquí puedes ver tamaños de 16 píxeles. ¿Bien? Entonces, por defecto, tamaños de 16 píxeles. Entonces si lo hago aquí 20, se puede ver que el rubro se incrementa. El tamaño de rumbo se incrementa porque le di el tamaño a esta rúbrica tres Em derecha. Aquí es tres en 20 es igual a 60 píxeles, ¿verdad? Y por ejemplo, si hago aquí cinco píxeles, tres multiplicados por cinco iguales a 15 píxeles. Así que ahora estoy guardando a este sile 16 píxeles, razón por la cual por defecto Esto fue solo para decirte que nunca cambié este valor desde aquí. Así que volvamos a bajar, haz clic ahora Safe Genius. Bien. Así que voy a regresar. Bien, entonces por ejemplo, oh estoy dando aquí dos RAM. Como aquí, si le doy al tamaño de nuestro texto dos RAM, en el back end, también está creando un código HTML. El tamaño del elemento raíz ttML en el documento HTML se multiplica por el tamaño de píxel Esta RAM se usa cuando alguien ha cambiado el tamaño de fuente en su navegador como muy grande u otras opciones, entonces esto automáticamente se vuelve grande. Bien. Por defecto en todo el navegador te que el tamaño es mediano. Aquí está la alternativa de esto también. Podemos simplemente acercar y alejar, ¿verdad? Entonces no uso principalmente esto. Si hay una demanda específica para esto, entonces podemos usar. Bien, entonces esta era nuestra unidad CSS. Espero que haya entendido muy bien sobre esto. Bien. Entonces ahora, ¿qué unidades utilizo y por qué? Entonces, para el texto, uso mayormente la unidad de píxeles. 6. Uso de contenedores de Flexbox: Chicos. Por lo que en este video, aprenderemos sobre el contenedor Flexbox Hay muchos estudiantes que están confundidos acerca de cómo usar el contenedor y cómo crear un hermoso diseño con la ayuda del contenedor. Entonces comencemos. Entonces antes que nada, nosotros chicos, este es nuestro lienzo elemental. No te preocupes si no sabes nada. Te voy a explicar todo en el curso posterior. Ahora en este video, solo aprenderemos sobre el contenedor Flexbox, que es un tema muy importante, ¿bien? En primer lugar, me llevo un contenedor aquí. Bien. Entonces este es nuestro contenedor padre y haga clic en el icono más. Doy click en este widget y se puede ver que esto es arrastrar aquí. Haga clic en este icono más. Quiero arrastrar aquí un widget de imagen también. Entonces cuando arrastre a esta imagen, se puede ver que podemos arrastrar este widget en la parte superior o en la parte inferior. Entonces la arrastré hasta aquí. Entonces estoy eligiendo esta imagen, como, por ejemplo, así que selecciona tu contenedor padre, y desde aquí bajo dirección, puedes ver esta flecha hacia abajo. Significa cualquier widget que arrastre a esta sección en este momento, cada lement por defecto, seguirá viniendo por debajo del otro Si elijo esta flecha, ahora puedes ver que nuestro contenido está alineado de manera horizontal. Ahora, da clic en este ícono más. Por ejemplo, quiero arrastrar este botón a la parte inferior. Se puede ver que la línea rosa viene sólo por el lado izquierdo y derecho. Pero no puede venir ahora en la parte superior de la parte inferior. Entonces cuando deje esto, puede ver que nuestro botón está ahora en el lado derecho. Ahora selecciona tu contenedor pedante, y desde aquí, de esta manera, cuando elijo columna, podrás ver que todo el contenido está alineado en el sabio de la columna Ahora se selecciona la fila de dirección, y ¿cuál es el significado de esto? Se puede ver aquí viene fila invertida. Y cuando hago clic en esto, ahora nuestro botón está en la primera posición y se dirige a la última posición. Pero cuando hago clic en esta columna invertida, nuestra posición de botón en la parte superior y este rumbo va a la parte inferior. Espero que entiendas muy bien sobre estas direcciones. Ahora vamos a entender sobre estas opciones, y antes que nada, estoy aumentando su altura mínima para que los batn entiendan En primer lugar, vamos a entender acerca de los elementos de alineación. Cuando elijo start, puedes ver que todos los widgets están en esta posición inicial. Cuando quieras alinear tu contenido en el centro, por lo que solo necesitas hacer click aquí en Sener puedes ver ahora nuestro contenido está en esta posición central Entonces espero que entiendas muy bien sobre las líneas de pedido. Y ahora vamos a ver esto. Aquí está el contenido justificado. Cuando elijo centro, puedes ver desde líneas de pedido elijo centro y desde contenido justificado elijo centros, y es por eso que nuestro contenido está centrado horizontal y verticalmente. Ahora, cuando eliges inicio, así que ahora nuestro contenido estará verticalmente en esta posición de inicio. De esta manera, puedes elegir y puedes ver ahora el contenido va al final cuando eliges espacio entre, aquí hay un espacio entre nuestros widgets, y cuando eliges espacio alrededor, así que aquí se agrega espacio alrededor de los widgets. De esta manera, cuando haces espacio de manera uniforme, por lo que se agrega la misma cantidad de gap alrededor de tus widgets. Bien. Espero que entiendas de esto. Así que ahora cuando elijo aquí fila, ¿de acuerdo? Entonces ahora nuestro contenido está horizontalmente en la posición de inicio, ahora está centrado horizontalmente, y el espacio entre ellos, se puede ver ahora. Ahora se agrega el espacio entre el widget. Y cuando eliges espacio alrededor, el espacio se agrega al final del widget también. Y cuando eliges espacio de manera uniforme, entre el widget, se agrega la misma cantidad de hueco. De esta manera, cuando eliges líneas de pedido para centrar ahora nuestro contenido está horizontal y verticalmente en la posición central. De esta manera, ahora está al final. Bien. Espero que ahora entiendas muy bien sobre estas opciones. Bien, chicos, así que ahora vean cuando queremos llevar un contenedor, pueden ver que pueden agregar un contenedor desde aquí, ¿bien? Y en el lado izquierdo, se puede ver aquí también hay un contenedor. Conoces el uso de este contenedor, pero ¿cuál es el uso de este contenedor? Ahora vamos a entender sobre esto apenas en unos minutos. Entonces, antes que nada, me llevo un contenedor aquí, ¿de acuerdo? Y de aquí dirección, estoy eligiendo remar. Incrementa su altura mínima así. Bien. Entonces estoy arrastrando un widget de encabezado aquí. Ahora, lo que quiero, quiero una imagen al lado derecho de la rúbrica. Quiero un botón en la parte inferior del encabezado. Entonces estoy arrastrando mi widget de imagen. Para que puedas ver la imagen se agrega fácilmente en este lado derecho. Bien. Y ahora quiero arrastrar mi botón en la parte inferior de este encabezamiento. Cuán difícilmente lo estoy intentando, pero no está pasando. Este botón se arrastra aquí, no en la parte inferior de este widget de encabezado Entonces aquí viene el uso de este contenedor. Podemos hacer cualquier cosa con este widget contenedor. Ahora eliminemos esto Bien. Entonces ahora hagamos el uso de este contenedor. Y antes que nada, estoy borrando todo esto. Entonces ahora, da clic en el icono más, y desde aquí, estoy eligiendo esta estructura. Bien. Ahora selecciono este primer contenedor hijo del lado izquierdo y hago clic en el icono más. Estoy arrastrando mi widget de encabezado aquí. Así que ahora haz clic en Este ícono más. Estoy arrastrando este botón y puedes ver que este botón se arrastra dentro de este widget de encabezado ¿Bien? Seleccione su contenedor padre. Puedes ver aquí se selecciona la fila de dirección. ¿Bien? Y es por eso que estos dos contenedores están alineados a filas sabias. ¿Bien? Y este es nuestro primer contenedor hijo cuya dirección es columna. Ahora selecciona a este contenedor y aquí se selecciona la dirección Columna, y es por eso que este botón se arrastra debajo de este encabezado Cuando hago el dibujo de dirección aquí, puedes ver ahora este botón se arrastra por el lado derecho Y cuando hago aquí columna, se puede ver, ahora este botón se está arrastrando hasta aquí Entonces ahora vamos a arrastrar la imagen aquí. Haga clic en este icono más. Y cuando arrastre mi widget, así se puede ver que una imagen se arrastra al lado derecho del encabezado, y este botón se arrastra en la parte inferior de este Y como saben, quiero esto y me sale esto 7. Exploración de configuraciones globales: Entonces me llevo un contenedor aquí. Ahora quiero arrastrar el encabezado de mi widget. Bien. Arrastre mi rumbo hasta aquí. Entonces por qué este color siempre viene y así cuando arrastre mi editor. Para que veas siempre viene este color claro. ¿Por qué? Y de esta manera, cuando arrastre mi botón, para que puedan ver este fondo verde, por qué siempre es auto Porque estos colores se establecen globalmente, y podemos cambiar estos colores. Entonces veamos ¿cómo podemos cambiar esto? Entonces, para cambiar esto. Así que aquí está la configuración del lado del icono. Estoy dando click en esto. Aquí hay una opción de color global. Entonces estoy dando click en esto. Aquí hay un show global declarando, estoy deshabilitando esto, así veremos los cambios directamente Se puede ver este color primario, y por eso cuando arrastramos nuestro rumbo, siempre sale de este color, ¿verdad? De esta manera, aquí se establece el color para secundario y se puede ver este editor de texto, y es por eso que cuando arrastramos nuestro editor de texto con él, este color se establece para este color de ascenso es para botón, y por eso este es el color de fondo verde Puedes cambiar estos colores como si yo hago negro aquí. Bien, y estoy cambiando este texto, por ejemplo, a rojo. Así se puede ver ahora los colores están cambiando. De esta manera, estoy haciendo al color negro. Aquí hay un color personalizado. Puedes agregar colores desde aquí si quieres otro color el cual ves que ves que este color va a usar una y otra vez en mi página web. Entonces puedes configurar desde aquí, y desde aquí, solo puedes eliminarlo. ¿Bien? Simplemente puedes eliminarlo. Entonces estoy haciendo Cencil. Ahora configuro estos colores a nivel global. Y ahora cuando voy a arrastrar mi widget, para que ese widget esté en estos colores. Después de hacer los cambios, haga clic en Guardar cambios. Ahora mira lo que pasó. Estoy borrando esto primero. Ahora me llevo un nuevo contenedor. Entonces mira ahora qué pasó. Estoy arrastrando mi widget de encabezado, así puedes ver ahora nuestro encabezado viene en color negro porque establecemos este color globalmente No significa que ahora no puedas cambiar este color, puedes cambiar este color. Por ejemplo, puedes cambiarlo desde aquí, ¿de acuerdo? El color que quieras de esta manera. Espero que entiendas cómo establecer los colores globales. Estos son muy útiles porque no necesitamos escribir el código una y otra vez, por lo que pasó por encima del trabajo. Entonces ahora veremos sobre fuentes globales. Y para entender que estoy tomando un contenedor, y estoy arrastrando un rumbo aquí Se puede ver que está configurado por defecto el borde dos, así que lo estoy haciendo dos borde uno, clic derecho y duplicado. Aquí estoy haciendo borde dos. Entonces ahora voy dentro de los ajustes. Desde aquí, puedes ver fuentes globales, y desde aquí, puedes configurar las fuentes. Por ejemplo, en primaria, puedes establecer aquí la familia. Ahora hice pop en la familia, así puedes ver que todas las fuentes están en ahora pop ins. De esta manera, puedes establecer para se país, como por ejemplo, AlbaticaF texto, puedes establecer signo descender yo configuro Entonces después de hacer cambios, haga clic en cambios. Entonces ahora mira lo que pasó. Estoy seleccionando este rubro bajo arranque. Ahora no necesitamos elegir a la familia de aquí. Lo que podemos hacer, solo puedes hacer click aquí. Si da clic en secundaria. Entonces ahora puedes ver esta es nuestra fuente Helvetica. Entonces de esta manera, cuando eliges texto, puedes ver esta fuente ahora sine. Ahora aquí hay una tipografía. A partir de la tipografía, puedes establecer el tamaño para cada cabeza. Por ejemplo, en H uno, se puede ver, se puede mantener el tamaño de aquí como 70. Y para H dos, estoy haciendo 60. De esta manera, puedes configurar para todos No podemos establecer a la familia. Simplemente va a establecer el tamaño para nosotros, no las otras cosas, bien. Así que ahora haz clic en S cambios, vuelve aquí. Y antes que nada, estoy borrando esto. Ahora mira aquí. Cuando arrastre mi rumbo, ahora es H dos. Su tamaño será el que establecemos en escenarios globales. Ahora, vayamos más allá. Arrastre la imagen Y para que pueda ver los cambios que hicimos en los ajustes laterales. Entonces así, se pueden establecer los cambios globales para la imagen también. Bien, eso es todo para este video. Los otros ajustes realmente no importan, así que no te preocupes por ellos. Nos vemos en la siguiente. 8. Creación de un efecto de texto de agua: Este video, estamos haciendo un efecto de texto de agua fría. Las palabras parecerán que están hechas de agua, lo cual es súper genial. Entonces comencemos a hacer este efecto genial. A partir de ahora, aprenderemos sobre hermosas animaciones y podrás aplicar estas animaciones si tienes un elementor proverson Así que comencemos primero que nada, daremos click en esta página Agregar nuevo. Estoy dando un nombre de página Efecto de texto Agua. Así que hagamos clic en Publicar. Entonces ahora estoy dando click en este dit con Elementor. Ahora estamos dentro de nuestro constructor de páginas elementales. Entonces ahora comencemos. En primer lugar, llevaremos nuestro contenedor. Del lado izquierdo, se lo estoy dando a N VH, y lo estoy manteniendo la altura Buport como 100 VH Desde contenido justificado, lo haremos centro, desde líneas de pedido, lo mantendremos como centro. Vamos a ir en cinta estilo y color de fondo como negro. Ahora da click en este ícono más, estoy escribiendo un encabezado aquí. Vamos dentro de Style. Lo mantendremos alineado como centro. Color del texto, lo estoy manteniendo como blanco de tipografía y elegir medios de fuente Lo voy a mantener el tamaño como 85 y del peso, lo voy a mantener a 800. Ahora sólo vamos a duplicar a nuestro encabezamiento. Ahora, haz clic derecho y duplícalo. Ahora abre el navegador. Este es nuestro primer rumbo, y este es nuestro segundo rumbo. Entonces estoy seleccionando nuestro primer rumbo. Voy en avanzado, desplácese hacia abajo, y aquí hay un código de serie personalizado. Se puede ver este trazo azul. Así que ahora vamos a ir en la pestaña de estilo y cambiando este color blanco para que puedas elegir cualquier color. Estoy manteniendo su transparencia como cero. Ahora esto se ve hermoso. Ahora vamos a seleccionar nuestro segundo encabezado aquí en color de texto. Estoy pegando mi código de color aquí. Vamos por adelantado y desplázate hacia abajo. Estoy haciendo su posición como absoluta. Bien. Así que ahora selecciona nuestro primer rubro y vamos aquí por adelantado. También mantendremos su posición a absoluta. Ahora vamos a seleccionar nuestro segundo encabezado. Y en la pestaña avanzada, desplácese hacia abajo y aquí hay un código CSS personalizado. Y aquí voy a pegar mi código CSS personalizado. Entonces como puedes ver esta hermosa animación de texto ondulado de agua. Entonces ahora vamos a asumir este botón publicado. La animación acuática es de 4 segundos, así que puedes cambiar aquí el valor como si elegimos uno, y aquí también lo haremos como uno. Entonces, como puedes ver, la animación está sucediendo tan rápido. Así que lo estoy guardando como atrás. Lo estoy manteniendo como cuatro, y aquí también como no hace falta que aprendas este código. Ya escribí este código para ti, así que no tienes que preocuparte. 9. Efectos de desplazamiento de imagen de fondo: Hola, chicos. En este video, aprenderemos sobre la animación que al pasar el mouse, imágenes de fondo del contenedor cambian Entonces, ¿qué significa? A ver. Inicialmente, se pueden ver las tarjetas así. Aquí hay tres tarjetas. Esta es la tarjeta uno. Esta es la tarjeta dos, y esta es la tarjeta tres. Pero cuando vuelo el cursor sobre mi primera tarjeta, como pueden ver, el contenido viaja y las imágenes de fondo cambian Así, cuando coloco el cursor sobre mi segunda tarjeta, se cambia la imagen y el contenido triveles y lo mismo sucede con la Entonces, avancemos más. Ahora no te voy a decir cómo puedes hacer esto porque ya lo hice para ti. Entonces, si quieres usar esta animación, solo puedes importarla a tu sitio web. Acabo de darte una visión general de cómo puedes cambiar los códigos de texto y cómo cambiar estas imágenes de fondo de acuerdo a ti, y te va a facilitar tu trabajo. Entonces veamos cómo se puede cambiar el texto. Así que solo haz clic en esto. Y si escribo aquí, este rubro se cambia instantáneamente. Entonces de esta manera, puedes cambiar todas estas cosas así, nuestro widget editor de texto, puedes diseñar este botón de acuerdo a ti. Inicialmente, se puede ver esta imagen de girasol. Entonces, ¿cómo cambiar si quieres cambiar esta imagen, entonces, cómo puedes hacerlo? Para cambiar esta imagen de girasol, tienes que seleccionar este contenedor padre de la tarjeta bajo estilo desde aquí, puedes elegir cualquier imagen de acuerdo a ti. Por ejemplo, si elijo esta imagen, así como se puede ver ahora esta imagen se está mostrando, voy a la imagen por defecto. Ahora ve por debajo de la etiqueta Avanzado. Aquí puedes ver este ID de CSS. No cambies ni borres esta ID de SS. De lo contrario, el código no funcionará. Te diré dónde se usa esta ID de SS y clases en el código. En primer lugar, vea, ahora solo concéntrese en esto. Estoy seleccionando mi tarjeta uno. la pestaña Avanzado, puedes ver aquí escribí la tarjeta de identificación CSS uno y clase CSS a tarjeta única. Así, en la segunda tarjeta, he escrito la tarjeta CSS ID dos y la clase CSS a una sola tarjeta. La clase CSS es la misma en todas las tarjetas, pero el ID CSS para la tarjeta uno es la tarjeta uno. Y la tarjeta dos es la tarjeta. Y lo mismo, se puede ver esto en la tarjeta tres. Así que ahora no cambies este ID de CSS y clases CSS. Aquí escribí dos tipos de códigos. Entonces vamos a ver eso. Primer código, he escrito en el contenedor PinT de las tarjetas, pasar por código CSS personalizado, y aquí puedes ver este código No necesitas cambiar nada en este código si quieres cambiar. Para que puedas cambiarlo. Como, por ejemplo, ahora nuestro botón se muestra aquí. Si quieres hacer algunos cambios como si quieres cambiar esta posición de mantequilla en el lado más superior o en el lado inferior. Entonces así si yo aquí mismo, si lo hago dos menos 1250 píxeles. Ahora, cuando pase el cursor sobre esto, para que puedan ver esto se cambia la posición del botón Entonces de esta manera, se puede cambiar la posición del encabezado, la posición del texto. Todas las cosas que puedes cambiar. Entonces este fue nuestro primer código. Ahora, hablemos de este segundo código. Pongo el segundo código en el HTML y ese widget HTL se arrastra Entonces mira aquí, aquí está nuestra imagen variable uno. Cuando terminé en mi primera tarjeta, así puedes ver esta imagen de rosa. Entonces esta imagen de rosa nos está mostrando porque aquí pongo la URL de esta imagen de rosa. Enfócate en mi cursor donde lo estoy moviendo. Bien, ahora vamos a entender a este código. tarjeta uno es el ID CSS para la tarjeta uno, y vea aquí que cuando pase el cursor sobre mi tarjeta uno, así que fondo Im debería cambiarse a imagen uno Entonces como puedes ver, aquí está la URL para la imagen uno. Cuando salgo de mi tarjeta uno, entonces debería ser su posición inicial Entonces es por eso que estos códigos dobles son ampity. De esta manera, cuando coloco el cursor sobre mi tarjeta dos, entonces fondo Im cambia a Imagen dos, y aquí está y aquí está la URL de la imagen, también. Y cuando salgo de mi auto, también, para que la imagen de fondo cambie a su posición inicial, tendrás las otras imágenes Así que solo quita este enlace. Así que solo elimínelo y ve por debajo de la opción de medios. Entonces, por ejemplo, estoy eligiendo esta única imagen. Entonces desde aquí, copia la URL de esa imagen y solo pega el enlace aquí. Ahora cuando voy sobre mi primera tarjeta, para que puedan ver esta imagen de fondo se cambia. Entonces de esta manera, solo borra esta URL, ve aquí. Y por ejemplo, estoy eligiendo esta imagen, copia la URL. Y pega esta URL aquí. Así que ahora cuando coloco el cursor sobre mi segunda tarjeta, Bagardmage se cambia a Entonces de esta manera, puedes cambiar todo de acuerdo a ti. 10. Creación de efectos de desplazamiento de tarjetas: Hola, chicos. ¿Qué está pasando? Entonces, en el video de hoy, discutiremos sobre la animación del efecto de hover de tarjeta No te voy a decir como hacer esto porque ya hice a este chico. Simplemente puedes importarlo a tu sitio web. Entonces, centrémonos en esto. Entonces primero, puedes ver aquí cuatro tarjetas y algo de texto está escrito, y puedes ver estos números uno, dos, tres y cuatro. Cuando coloco el cursor sobre mi primera tarjeta, así puedes ver este hermoso fondo, y puedes ver cómo el texto se vuelve blanco y los números también se vuelven blancos Y de esta manera, cuando coloco el cursor sobre mi segunda carta, para que puedas ver este efecto Entonces así, cuando pasa el cursor sobre cualquier tarjeta, puedes ver cómo está cambiando nuestra imagen de fondo y nuestro color de texto está cambiando Así que solo puedes importar esta plantilla a tu sitio web. Así que ahora vamos a centrarnos en nuestro código. Aquí pego el widget HTML de codificación. Así que solo hago clic en codificar esto. Entonces aquí hay un color de texto hover. Cuando coloco el cursor sobre mi auto, así puedes ver este texto en color Así que aquí puedes cambiar cualquier color de tus consejos como si escribo aquí a negro. Así que ahora cuando coloco el cursor sobre mi primera tarjeta, nuestro texto está en negro ahora Entonces de esta manera, puedes cambiar cualquier color. Según usted, voy a regresar. No necesitas cambiar ninguna otra cosa. Simplemente puedes cambiar sobre el color del texto. Entonces espero que les guste este hermoso efecto hoover de tarjeta. 11. Creación de animación deslizable de tarjetas: Este video, vamos a hacer una animación de tarjeta deslizante. Al principio, verás las cartas justo ahí sentadas, pero cuando pase el cursor sobre ellas, el contenido oculto se deslizará hacia abajo y aparecerá Así que comencemos. Le di mi tarjeta de nombre de título deslizarse hacia abajo. Así que solo haz clic en Guardar. Bien, ahora estoy dando click en este dit con Animator. Vamos a hacer clic en este icono más. Lexox Estoy eligiendo esta estructura de dos columnas. Quiero tres tarjetas. Ahora, seleccione el contenedor padre o la sección media. Desde el lado izquierdo, hagamos su altura mínima 200 VH. Desplázate hacia abajo y desde las líneas de pedido, hagámoslo comenzar. Pasar por debajo de la etiqueta de estilo. Le estoy dando un color negro. Ve debajo de la pestaña Avanzadas, desvincula primero el desvanecimiento, y desde arriba, estoy dando el valor 200 Estoy seleccionando este contenedor. Pasemos por debajo de la pestaña de estilo. Vamos a darle un color de fondo. ¿Por qué? Desplácese hacia abajo, y aquí hay una opción de borde. Estoy dando un radio de borde como diez píxeles. Pasar por debajo del tiempo avanzado. Vamos a darle un margen de diez píxeles de todos los lados. Ahora desvincula el margen de abajo, estoy guardando aquí el valor como 50, y vamos a darle un relleno de 25 desde todos los lados Un icono de C plus. Vamos a arrastrar la imagen aquí. Vamos a elegir la imagen. Ir por debajo de avanzada desvincular el margen, y desde arriba, le estoy dando el valor de -60 el icono de Cplus Estoy escribiendo un editor de texto debajo de esta imagen. Escribamos rumbo aquí tarjeta uno, seleccione esto, y a partir de esto, lo estoy haciendo encabezando dos bajo alineación de estilo, color central. Hagámoslo negro, vaya por debajo de avanzado. Vamos a darle a una clase CSS para contenido de texto. Seleccionemos este contenedor y pasado aquí, código CSS personalizado. Entonces como pueden ver, ahora, este es nuestro texto, y una vez más, va en la parte superior. Pero queremos este texto detrás de la imagen. Así que vamos a seleccionar nuestra imagen. Y a partir de aquí, aumentemos el siguiente valor de Z. Estoy dando el valor en. Entonces como puedes ver ahora se ve genial. Vamos a minimizar la barra. Y cuando o sobre ella. Entonces este efecto se ve muy asombroso. Así que abramos la barra. Ahora, entendamos primero el código. Estoy seleccionando este contenedor. Aquí está nuestra altura. que puedas cambiar de acuerdo a ti, como si escribo aquí 115 como puedes ver la altura de este contenedor blanco luciendo así. Para que puedas cambiar de acuerdo a ti. Voy a regresar. Y a partir de aquí, se puede cambiar el overhight. Entonces aumentas esto como si escribo aquí, 500. Entonces ahora cuando pasas el cursor sobre esto, puedes ver que se ha aumentado la longitud de esta carta Así que puedes cambiar esto, pero yo voy a volver. Para que puedas cambiar estos valores. Ahora cuando estás contento, estoy cambiando esta altura dos, 250. Ahora bien, esto se ve bien, creo. Bien, 240 se ve bien. Bien, entonces me quedo con este valor. Ahora solo duplicarlo. Duplicar. Ahora, estoy borrando estos dos contenedores. Ahora solo minimiza la guerra. Y cuando pasas el cursor sobre estos autos, puedes ver que este contenido se ve muy bien 12. Creación de un efecto de carta sesgada: Este video, vamos a hacer un genial efecto de tarjeta sesgada Cuando pase el cursor sobre estas tarjetas, los colores cambiarán Empecemos y veamos cómo funciona. Vamos a dar click en dt con Elementor. Tomemos un contenedor. Altura mínima, la estoy manteniendo como VH 100 VH, de dirección, elegiré fila de contenido justificado. Mantengámoslo como centro, centro, huecos 40. Bajo la pestaña estilo, color de fondo, me quedaré negro. Vamos a hacer clic en este icono más, arrastrando un contenedor Duplicemos esto. Una vez más, estoy eligiendo este contenedor. Desde la pestaña Avanzado, vamos a mantenerlo como relleno como diez, haga clic en el icono más, y estoy arrastrando un contenedor más En la pestaña Estilo, lo mantendremos. Color de fondo como negro. En la pestaña avanzada le el relleno primero. Mantengámoslo acolchado desde arriba como 40 desde la derecha. Mantengámoslo 30 de abajo, 40 de izquierda como 30, haga clic en el icono más, arrastrando un encabezado Cambiemos el título. Vamos por debajo del centro de alineación de rasgado Style. Color del texto como blanco. Tipografía. Vamos a mantenerlo como 35. Haga clic en este icono más. Estoy arrastrando un editor de texto bajo la pestaña Estilo. Centro de alineación, color del texto, lo estoy manteniendo menos blanco en este icono más, estoy arrastrando un botón, posición centro, color transparente, tipo de borde, sólido, ancho de borde uno Ahora, aquí tenemos que elegir este contenedor exterior. Y en avanzado, aquí hay una opción CSS personalizada, y voy a pegar mi abrigo. Blanco. Entonces como pueden ver este color blanco, pero lo estoy manteniendo por defecto. Entonces así, puedes cambiar cualquier color puedes cambiar este color como si yo aquí mismo amarillo. Entonces como puedes ver esto, así así, puedes cambiar un degradado uno, gradiente dos, degradado, tres colores. Entonces voy a regresar. Eso es como este contenedor exterior, haga clic derecho y duplique. Duplicar una vez más. Ahora estoy calificando este contenedor. Cuando estés satisfecho con ello, simplemente haz clic en este botón de publicar cuando minimice la barra, así como podrás ver este hermoso defecto sesgado 13. El contenido activado por scroll revela efectos: Hola, chicos. En el video de hoy, puedes ver estos hermosos contenedores declarantes en la animación de desplazamiento cuando me desplazo a mi sitio web. Entonces, cómo estos contenedores se están cubriendo entre sí. Esto se ve muy bien. Así que comencemos. Tacking de contenedores en scroll. Entonces vamos a dar un título. Haga clic en Publicar. Da click en dit con Elemental. Tomemos un nuevo contenedor haciendo clic en este icono más. A partir de aquí, mínimo g 200 Vg contenido con dos ancho completo, ified content to center line items centers click on plus icon, arrastrando Ahora este contenedor está centrado vertical y horizontalmente. Contenido con dos de ancho completo. Lo estoy haciendo con 75% de altura mínima a 70 VH dirección lo estoy haciendo a través porque quiero llevarlo horizontal a sección. Ve por debajo de la pestaña de estilo. Vamos a darle un color de fondo, escribiendo un código de color dos cuartos uno mares. Entonces bien, ve por debajo de la frontera. Vamos a darle un borde a 20 píxeles, minimizar la barra. Entonces esto se ve bien. Volvamos. Haga clic en el icono más. Ahora vamos a arrastrar nuestro contenido. Hagámoslo rápido. Estoy seleccionando el contenedor de bolígrafos de nuestros encabezamientos. Simplemente hagamos clic y dupliquemos. Ahora solo borra el contenido de aquí. Quiero arrastrar una imagen aquí, así que por eso acabo de borrar el contenido. Ir a la pestaña Estilo. Escojamos Imagen. Vamos a elegir esta imagen. Haga clic en la posición Seck al centro, desplazamiento del accesorio, desplazamiento del accesorio, repita a no repetición, cubierta del tamaño de la pantalla Ahora estoy seleccionando este contenedor de aquí, contenido justificado al centro. Bien. Por lo que ahora seleccione este contenedor exterior vaya por debajo de avanzado. Vamos a darle una rúbrica al 50. Ahora esto se ve bien. Nuestra imagen y encabezamientos ahora se ven bien. Estoy seleccionando este contenedor. A partir de aquí, lo estoy haciendo dos cajas, y hagámoslo con 200% y alineemos los artículos al centro Ahora nuestro primer contenedor está listo. Simplemente dupliquemos esto, dupliquelo una vez más. Ahora antes de hacer nada, quiero agregar un nuevo contenedor aquí. A partir de aquí, altura mínima, voy a llegar a 50 H. Vamos a sólo una imagen aquí. No hay trabajo del contenedor, pero esto es importante porque quiero decirte algo. Así que vamos a agregar esta única imagen. Bien. Sí, hecho. Ahora solo voy a cambiar las imágenes rápidamente y el color de fondo Entonces lo estoy haciendo tan rápido. Seleccionaré a cada contenedor. Vamos a mantenerlo Z en profundidad, así que me quedo aquí uno. Ir bajo efectos de movimiento de pegajoso, vamos a elegirlo a la parte superior y de offset, estoy dando el valor como 50. Bien. Entonces cuando me desplace hacia abajo, ya sabes, los otros contenedores van volviendo al primer contenedor. Entonces hagamos lo mismo con los otros contenedores. Aquí, pondremos el índice Z como dos. Tendremos que dar el mayor valor del índice Z que el primer contenedor. Bien este. Entonces le doy el índice Z aquí también, y en los efectos de movimiento de aquí, pegajoso hacia arriba, dan el valor de desplazamiento mayor que nuestro primer contenedor. Al igual que en el primer contenedor, elegimos el valor de compensación como 50. Entonces aquí lo vamos a mantener al doble. Bien, aquí nos quedaremos 200. Y en el siguiente contenedor, vamos a elegir este tercer contenedor, ve índice Z como tres mayor que estos dos contenedor desde el efecto de movimiento pegajoso hasta el valor superior y offset, vamos a dar aquí 150 cuando se acueste a mi sitio web Así que mira, Guau, esto se ve tan genial. ¿Correcto? Nuestros contenedores están apilados aquí. Ahora, mira aquí, cuando se acueste a mi sitio web, las otras cosas van a volver a este contenedor, ¿verdad Entonces esto está mal, ¿verdad? Entonces, ¿cómo configurar esto? Vamos a abrir la guerra y tenemos que hacer esto por cada contenedor, se este primer contenedor, bajo efectos de movimiento, tenemos que habilitar esta opción, permanecer en columna. Seleccionemos el segundo contenedor, bajo efectos de movimiento. Vamos a elegir vamos a habilitar esta opción. Seleccionemos tercer contenedor, efectos de movimiento, permanezcamos en columna. Bien. Ahora, ciérrala. Ahora cuando te desplazas hacia abajo, esto se ve muy bien. 14. Creación de un efecto de papel rasgado: Hola, chicos. Entonces en este video, haremos una animación de efecto de papel sumergida genial. Así que comencemos. Efecto papel sumergida. Vamos a hacer clic en Publicar. Da click en esta edición con Elementor. Da clic en este icono de desenfoque. Estoy tomando estas dos estructuras de columnas. Primero, hagamos su altura mínima 200 VH. A partir de aquí, centro de contenido justificado centro de línea de artículo. Ahora selecciona este contenedor del lado izquierdo. Estoy haciendo su ancho al 40% bajo Avanzado primero desvincula el relleno. Del lado izquierdo, se lo estoy dando al 10% de relleno. Ahora, seleccionemos este contenedor del lado derecho. A partir de aquí, hagamos que cambie al 60%. Ahora volvamos aquí. Haga clic en el icono más arrastrando un contenido aquí. Debajo de la pestaña de estilo, haciendo color, es negro. No estoy pegando mi contenido porque nuestro enfoque está en rasgado p perfecto, no en decorar el texto Así que arrastrando un editor de texto aquí, estoy alinearlo para centrar el icono de LCONplus, arrastrando un botón dentro de aquí, bajo estilo color de texto, vamos a hacerlo a negro y transparencia, haciendo cero y tipo de borde sólido, canatero coolor la posición, vamos Bien. Ahora, vamos del lado derecho. Haga clic en el icono más, arrastrando la imagen aquí, seleccione la imagen, haga clic en Slet Esta es nuestra imagen. Vaya por debajo de una alineación más apretada. Hagámoslo centrar con hacer 200% de altura, me estoy manteniendo a 400 píxeles Objeto que se ajusta a la cubierta. Ahora solo duplica esta imagen. Escojamos nuestra imagen rasgada, haga clic en Seleccionar, vaya debajo de desplazamiento avanzado hacia abajo. Aquí está la opción CSS personalizada. Vamos a pegar el código aquí como puedes ver, Esto se ve tan genial. Así que solo haz clic en Publicar. Haga clic en el icono cibernético. Entonces, como pueden ver, esto se ve muy bien. 15. Revela todo el contenido en scroll: Hola, yo. Entonces hoy, vamos a hacer una animación de scroll genial. Cuando me desplazo por la página, la imagen cambia. Nuevas palabras aparecen en el lado izquierdo y el fondo cambia de color. Entonces comencemos. Entonces le di un título aquí. Publiquemos esto. Haga clic en Agregar con alimenta. Tomemos una sección de medios haciendo clic en este icono más. Desde el lado izquierdo, hagamos el contenido con a fol ancho, y nos aseguramos de que sea del 100%. Entonces, en Tiempo avanzado, desvincule primero el relleno, haga clic en el icono más, arrastre un nuevo contenedor Del lado izquierdo, hagámoslo a la caja, y hagamos que cambie a 1,200 píxeles. Desde la dirección, hagámoslo remar. Bajo Sita, dale un color de le di este color bajo tara avanzada aquí mismo, clase CSS Asegúrate de escribir todas las clases con mucha precisión. Haga clic en PlusCon arrastrando un nuevo contenedor con 50% bajo clase CSS avanzada Escribamos aquí, izquierda. Abra el navegador. Estoy cambiando el nombre de este contenedor como izquierda. Cierre ahora el navegador. Haga clic en Pluscon vamos a arrastrar un nuevo contenedor. Sé que hay muchos contenedores bajo la clase Advanced CSS. Haga clic en el icono más, arrastre un Nuevo contenedor, altura mínima. Hagámoslo cien VH. Justificar contenido Centro, clase AdvanctaBFSS, y Haga clic en el icono más. Ahora solo arrastra el contenido. Estoy arrastrando un rumbo aquí. Vaya bajo la pestaña Estilo, Color blanco, centro de alineación, haga clic en el icono más, arrastrando un editor de texto aquí debajo de la pestaña Estilo, Color blanco Haga clic en el icono más. Arrastremos un botón aquí. Bajo la alineación monódica de estilo, vamos a hacerlo al centro Color, lo estoy haciendo transparente, tipo boater. Vamos a darle un color al blanco. No estoy decorando para enviar mensajes de texto. Publica tu contenido. Haga clic en. Hagamos el centro de alineación de Editor. Bien, ahora está hecho. Minimizar la guerra. Bien, ya está bien. Seleccione este encabezado, vaya bajo Avanzado. Asegúrate de escribir la clase aquí. De lo contrario, no funcionará. Estoy escribiendo aquí, Revel. Bien, ahora está hecho. Ahora, abramos el navegador. Esta es nuestra izquierda. Así que solo haz clic derecho y haz clic en esta sección. Ahora, ahora selecciona este último contenedor. Estoy escribiendo aquí, bien. Ir bajo Avanzado desde aquí, eliminar la clase CSS, seleccionar este contenedor, bajo diseño. Hagámoslo en caja bajo Avanzado, retire la clase de aquí Ve bajo efecto movimiento desde aquí, vamos a hacerlo pegajoso a la parte superior y mancha la columna, enciéndala. Ahora vamos a ir bajo este contenedor bajo Avanzado, eliminar la clase CSS de aquí, y vamos a añadir aquí nuestra nueva clase CSS. Ir bajo el efecto de movimiento de pegajoso, vamos a seleccionar la parte superior, mancha la columna, encenderla. Bien, ahora está hecho. Ahora solo borra el contenido del lado derecho porque queremos agregar aquí nuestra imagen. Haga clic en publicado para que los cambios que hemos hecho, es clic en el icono más, agregue un nuevo contenedor. Lo estoy apagando este navegador. Hagamos que sea una altura mínima a 600 píxeles. Vaya bajo Etiqueta Avanzada del tipo de fondo. Aquí estoy eligiendo imagen. Estoy seleccionando esta imagen. Haga clic en seleccionar. Hagamos los ajustes desde aquí. Colóquelo, haga que se centre en el centro, adjunte, desplace, repita para no repetir. Tamaño de la pantalla. Hagámoslo cubrir. Desplácese hacia abajo. Aquí hay una sección fronteriza. Demos un borde de 40 píxeles. Vaya debajo de la pestaña Avanzadas aquí mismo, clase CSS. Desktop HToPosition Lo estoy haciendo absoluto, pasear por. Aquí hay una orientación vertical. Elimina este valor cero y hazlo en porcentaje. Bien, ahora está hecho. Haga clic en el icono más, busque el widget HTML, arrastre esto debajo de este. Ahora solo pega el seleccionar este último continuador desde el lado izquierdo, haz clic derecho y duplica esto, haz clic derecho y duplica una vez más. Haga clic y duplique. Ahora, como puede ver ahora hay cuatro secciones una, dos, tres y cuatro. Bien. Así, simplemente duplique desde el lado derecho, y haga clic derecho en duplicar. Ve bajo la pestaña Estilo, cambia la imagen. Estoy seleccionando esta imagen. Haga clic en seleccionar, derecha, clic, duplicar. Ve bajo la pestaña Estilo, cambia la imagen. Haga clic en seleccionar, haga clic derecho y duplique. En la pestaña Estilo, cambiemos la imagen. Estoy seleccionando esta imagen. Haga clic en Conselect. Ahora solo publica el contenido. Da click en este ícono del globo ocular. Ahora, veamos la magia. Para que puedas ver este hermoso efecto. Es increíble. Derecha. Si quieres cambiar los colores de fondo, entonces, ¿cómo puedes cambiar ese color? A ver eso. Ahora regresa, desplázate hacia abajo. Aquí está nuestra etiqueta HTML. Se pueden cambiar los colores de aquí como este es el primer color, segundo color, el tercero, el cuarto, y así sucesivamente. Como, quiero cambiar el tercer color. Entonces estoy escribiendo aquí código cinco, a, cuatro, ocho, tres e. Haga clic en público. Veamos los cambios. Ahora cuando me desplazo hacia abajo, como pueden ver, este color se cambia. Entonces así, puedes cambiar el color que quieras. Puedes cambiar estas imágenes, todo lo que puedas. 16. Creación de un efecto de tarjeta mágica: Hey, chicos en la discusión donde vas a crear este impresionante cardifecto mágico mira lo geniales que son estas cartas con el cambio de color incluso cuando no estás flotando sobre Se ve tan genial. Así que vamos a saltar y ver cómo hacer que esta magia suceda. Entonces comencemos ahora haga clic en esto agregado con el botón Elemento. Ahora estamos dentro de nuestro constructor de páginas elementales. Vamos a hacer clic en el icono más y estoy tomando esta columna de dirección. Entonces desde la altura mínima, estoy manteniendo en H. Estoy manteniendo su altura mínima como 50 H y desde esta dirección, estoy manteniendo como fila. Y de contenido justificado, lo estoy manteniendo como centro. De alinear elementos, mantengámoslo como centro. Entonces, hagamos clic en el ícono de Splur, y estoy arrastrando un contenedor Solo vamos a duplicar este contenedor hijo click derecho y estoy duplicando esto, vamos a duplicarlo una vez más Seleccionemos hacia esta sección media y vayamos bajo la pestaña Estilo, lo estoy manteniendo backdwnclor Ahora estoy seleccionando este contenedor medio, y vamos por debajo de la pestaña Avanzado, lo estoy manteniendo relleno como 20. Estoy tomando un contenedor más, así que da clic en el icono más y estoy ejecutando un contenedor aquí. Estoy manteniendo su altura mínima como 400 píxeles. Contenido justificado, lo estoy manteniendo como centro de elemento de línea central vamos por debajo de la pestaña de estilo, y estoy manteniendo su color de fondo, igual que nuestra sección media Entonces lo estoy manteniendo en negro, desplácese hacia abajo, y aquí hay un borde. Entonces tipo de borde, lo estoy manteniendo como sólido, peso de canatero al que se lo estoy dando y color de canotador Estoy escribiendo aquí nuestro código de color tres c67e3. Su radio fronterizo es de cinco. Vamos a hacer clic en este estado de libración desde el tipo de borde, lo estoy manteniendo como sólido, ancho de borde, lo estoy manteniendo dos de boercolor, estoy pegando Bien. Entonces ahora radio fronterizo, lo estoy manteniendo como cinco, de acuarela, lo estoy manteniendo como transparente. Ahora vamos por debajo de Avanzado. A partir de aquí, me quedo con el acolchado como diez por todos lados. Bien, ahora solo minimízcalo y puedes ver cuando coloco el cursor sobre, entonces el color del borde es desaparece Así que abramos la barra. Y da click en este ícono más. Estoy arrastrando un rumbo aquí. Aquí estoy cambiando el título. Estoy escribiendo aquí la tarjeta uno. Vamos por debajo de la pestaña de estilo. Estoy manteniendo su alineación como centro, color del texto, lo estoy manteniendo como blanco de la tipografía, mantengamos su tamaño como 35 Bien. Así que ahora vamos a hacer clic en este icono más. Estoy arrastrando un editor de texto aquí. Vamos en la pestaña de estilo. Estoy manteniendo la alineación como centro. Estoy manteniendo el color del texto como este color de la tipografía, lo estoy manteniendo el tamaño como 15 Así que vamos a hacer clic en este icono más. Estoy arrastrando un botón aquí. Vamos a la posición de etiqueta de estilo. Lo estoy manteniendo como centro de la tipografía y no cambiando nada porque nuestro enfoque está en cómo crear el artefacto mágico No estoy decorando tanto esto. Mantengámosla transparencia como cero. Bien. Entonces ahora estoy eligiendo este contenedor interior. Pasemos bajo la etiqueta Avanzado, y aquí hay una opción de SS de aduanas. Estoy pegando mi código aquí, así que estoy seleccionando esta sección de medios Pasemos por debajo de Advancb y de esto de aquí, me quedo con uno Zendxl Vamos a minimizar la barra. Cuando coloco el cursor sobre, puedes ver este hermoso color degradado Ahora abramos la barra. Vamos en código CSS personalizado. No hace falta que aprendas todo este código. Ahora te diré cuáles son las variables que puedes cambiar. Aquí está el primer color. Para que puedas cambiar el color de acuerdo a ti, como aquí, si escribo aquí como azul. Entonces, cuando pasas el cursor sobre, puedes ver este color azul Puedes cambiar este color como si escribo aquí, naranja. Entonces cuando pase el cursor sobre, puedes ver aquí este color naranja Bien, así, puedes cambiar este tercer color también, como si escribiera aquí, rojo. Entonces, cuando coloco el cursor sobre esto, este color rojo se ve tan genial Entonces así, puedes cambiar de color según. Estoy seleccionando este contenedor externo, haga clic derecho y vamos a duplicar esto, derecho, haga clic, y vamos a duplicar esto. Entonces voy a dejar este contenedor. Haga clic derecho y elimine. Para que puedas ver este hermoso artefacto mágico. Cuando estés satisfecho con esto, puedes hacer clic en este botón Publicar. 17. Efectos de zoom de desenfoque: Oigan, chicos, en este video, vamos a hacer un efecto de zoom sobre sangre súper genial, así verán alguna tarjeta ahí sentada luciendo todo bien. Pero cuando muevo el mouse sobre una de las tarjetas, esa tarjeta se acercará, y las otras dos tarjetas se alejarán y se verán similares. Va a ser increíble, así que comencemos. Entonces le di un título aquí, y publiquemos esto. Da click en Addit con Alienter Estoy tomando una nueva sección. Este es nuestro contenedor de pantalón. Tomemos su altura mínima 200 VH desde dirección. Lo estoy haciendo fila, centro y centro. Haga clic en Este icono más, arrastre contenedor, desde la fila de dirección, elija centro y centro. Bien, haz clic en Este ícono más. Estoy agregando el nuevo contenedor aquí. Vamos a duplicarlo una vez más. Bien. Ahora estoy seleccionando este contenedor medio. Vamos por debajo de una pestaña de estilo, dale un color de fondo. Estoy escribiendo el código de color aquí. FF 0000. Vamos debajo del enlace de la pestaña Avanzado el encabezado top 50, 20, bite y 20 con más icono, arrastrando un encabezado Vamos a darle un título. Estoy escribiendo aquí, tarjeta uno bajo pestaña Estilo, centro de alineación, color blanco, tipografía Hagámoslo 800, aumentemos su tamaño. Hagámoslo 40, con más icono, arrastrando un editor de texto la pestaña Estilo, vamos a darle un color al blanco, centro de alineación, el icono de Cplus, arrastrando un botón aquí Bajo estilo pestaña posición centro, color de texto, color blanco. Lo estoy haciendo demasiado transparente, minimizar la barra. Quiero hacer su esquina redondeada, así que estoy aflojando este contenedor bajo la pestaña Estilo Vamos a darle una frontera. Le estoy dando valor de diez, dándole radio de frontera a diez. Pasemos bajo la pestaña Avanzadas. Aquí en clases CSS, estoy escribiendo aquí caja de tarjetas. Tengan en cuenta que este texto debe ser el mismo. Si no lo escribes, entonces quien efecto no va a funcionar. Ahora, vamos a duplicar este contenedor. Estoy borrando este contenedor. Este contenedor, vamos bajo la pestaña Avanzadas. Estoy escribiendo aquí mi código CSS personalizado. Vamos a pegarlo aquí. Bien, ahora, como pueden ver, cuando coloco el cursor sobre mis cartas, las cartas están haciendo zoom y las otras dos cartas están Quiero que cuando pase el cursor sobre mi tarjeta, entonces debería cambiarse su color. Entonces hagámoslo. Abrimos el navegador desde aquí. Estoy seleccionando de aquí. Este es nuestro contenedor exterior. Entonces quiero seleccionar esta tarjeta. Entonces seleccioné este contenedor del navegador. Vamos por debajo de la pestaña de estilo al pasar el ratón, vamos a darle un código de color aquí Ahora cuando coloco el cursor sobre mi primera tarjeta, se pone de color azul Así que vamos a pegar este efecto en otros dos contenedores. Así que hago clic derecho y copio aquí, clic derecho y pegar estilo, clic derecho y pegar estilo. Ahora, cerremos la barra cuando pase el cursor sobre mi tarjeta, ya que pueden ver el color se pone azul Así que abramos la barra. Ahora entendamos el código aquí. Entonces estoy seleccionando este contenedor, abra el CSS personalizado. Aquí hay un valor de Jumaane. Puedes cambiar el valor aquí. Aquí hay un valor de Alejar cuando lo cambias como si lo hago aquí cinco, así que cuando cubro sobre mi tarjeta, las otras dos tarjetas se alejan. Para que puedas cambiar el valor. Eso es todo sobre en el udo entre la siguiente v 18. Efecto de trazo de texto: Oigan, chicos, en este video, hablemos de esta animación de trazo de texto súper genial. Se ve tan impresionante, cómo se mueve el trazo del lado izquierdo al lado derecho. No puedo esperar para mostrarte cómo hacer esto, así que vamos a sumergirnos en ting. Enfréntate a esta edición con más delgado. Ahora estamos dentro de nuestro constructor de páginas elementales. Tomemos un contenedor aquí. Altura mínima, la estoy manteniendo como VH, 50 VH. A partir de aquí, estoy guardando contenido justificado como centro de línea de artículo central. Vamos a hacer clic en este icono más, arrastrando una cabeza. Estoy cambiando el título. Le estoy dando mi abrazo. Vamos bajo Estilo pestaña alineación centro, texto color blanco tipografía Estoy manteniendo su tamaño como 100 del peso, me quedo con 700. Estoy eligiendo mayúsculas. Ahora todas las letras están en mayúsculas. Ahora vamos por debajo de pestañas avanzadas, desplácese hacia abajo, y aquí hay una opción de tesis de aduanas, y estoy pegando mi código aquí He pegado mi código aquí. Puedes ver esta animación de trazo de texto. Vamos por debajo de tileer. Quiero cambiar este color blanco, puedes hacer cualquier cosa. Puedes cambiar cualquier color así, pero lo estoy manteniendo como color transparente. Entonces ahora esto se ve genial. Aquí, una cosa es que se note, eres más ajustado y tu título y texto de código deben ser los mismos Si estos son diferentes, entonces no va a funcionar si no entiendes a lo que me refiero, así que ahora te voy a dar un ejemplo donde estoy cambiando mi título aquí, como estoy escribiendo aquí. Hola amigos. Bien, entonces vamos a copiar esto. Vamos por debajo de avanzado en código CSS personalizado. Tienes que pegar este tema como has escrito en. Entonces, como puedes ver, ahora nuestra animación de trazo de texto se bifurca Ahora cuando estés contento con esto, simplemente hagamos clic en esta publicación 19. Creación de efectos de capa 3D: En este video, vamos a crear un efecto fresco de tres capas D. Cuando pase el cursor sobre la imagen, verás una hermosa capa, mira donde la primera capa es completamente visible al 100% de opacidad y cada capa después de eso se desvanece gradualmente Este efecto tres D se ve increíble, así que vamos a sumergirnos en él. Entonces comencemos nuestros tres Dlaereffect. Entonces le estoy dando aquí al Titán, tres D Lear efecto Vamos a hacer clic en Publicar. Haga clic en Addit con Elementa. Tomemos aquí una sección de medios haciendo clic en el icono más. Estoy eligiendo esta estructura de dos columnas. Entonces vamos a dejar que este contenedor del lado derecho. En primer lugar, vamos a arrastrar un contenido aquí. Lo estoy haciendo rápido. Bien, entonces esto está hecho. Ahora vamos a dejar este contenedor del lado izquierdo. Y vamos a arrastrar una columna dentro de esto. Haga clic en el icono más, y estoy arrastrando contenedor aquí Haga clic en el icono más, arrastre Imagen. Elige tu imagen aquí, da clic en bofetada. Entonces esta es nuestra imagen. Pasemos por debajo de Si. Lo estoy haciendo lo estoy haciendo con el centro de alineación del 200%. Ahora abre el navegador, haz clic derecho y haz clic en duplicar. Ahora ve por debajo de Avanzado desde aquí. Hagamos su posición a absoluta. Ahora, esta imagen está en nuestra primera imagen. Vamos a duplicarlo una vez más. Bien. Ahora hay tres imágenes, pero no podemos ver. No te preocupes. Ahora solo deja que este contenedor, ok y ve bajo Avanzado aquí más allá de tu código CSS personalizado. Bien, ahora da clic en Publicar. Hagamos este contenido en el centro. Así que estoy seleccionando este contenedor desde aquí justificado centro de línea de artículo del centro de contenido. Bien, ahora solo publica y da clic en este ícono del globo ocular y ve los cambios Ahora, cuando coloco el cursor sobre mi imagen, para que veas lo hermoso que nos da al efecto TDLar Entonces ahora volvamos, abre el navegador. Estoy seleccionando este contenedor y este es nuestro código CSS personalizado. Aquí puedes cambiar el valor de distancia, como si escribes aquí el valor 50, ahora publica y ve el cambio. Al pasar el cursor sobre esto, como pueden ver, la distancia se ha incrementado en 50 píxeles Para que puedas ajustar los valores de acuerdo a ti aquí. Voy a regresar. Lo voy a mantener como 30. Haga clic en publicar 20. Efecto de glasa en Elementor: Hola, chicos. Por lo que hoy, aprenderemos sobre el efecto cristal. Entonces aquí estoy dando el título. Simplemente hagamos clic en Publicar. Haga clic en Addit con Elementor. Darle una altura mínima 200 Vg. A partir de aquí, centro de contenido justificado, Un centro de líneas de pedido. Yendo estilete. Aquí estoy eligiendo imagen. Haga clic en O Slet Hagamos algunos ajustes desde aquí, posición al centro centro, accesorio para desplazarse, repetir para no repetir, tamaño de pantalla, hagamos que cubra. Entonces esto es así que ahora nuestra imagen se está mostrando así. Haga clic en el icono más, arrastrando uno más arrastrando este contenedor Vaya a la pestaña Avanzadas. Demos un acolchado desde el cien superior, desde el lado derecho, 50, cien inferior, el lado izquierdo, 50. Bien. Haga clic en el icono más, arrastrando un encabezado Lo estoy haciendo rápido porque ya sabes cómo hacer esto. Bien, entonces esto está hecho. Ahora, vamos como este contenedor, vamos por debajo de la cinta estilo, y desde aquí, lo estoy haciendo al color blanco. Y estoy disminuyendo su transparencia a la misma izquierda. Esto está bien. Ahora puedes ver el efecto cristal, pero para darle una sensación real, vamos a pegar nuestro código. Así que vamos por debajo de Avanzado, pega el código CSS personalizado aquí. Comando. Estoy pegando mi código aquí Ahora se puede ver claramente el efecto de cristal. Esto es más sangre ahora. Y cuando estés contento con, simplemente haz clic en Publicar. Por lo que este efecto de cristal fue muy fácil. Espero que lo hayas entendido muy bien. 21. Efectos de desplazamiento de Button: Oigan, chicos, en este video, vamos a ver el efecto bover realmente genial Al principio, solo verás un botón normal. Pero cuando pasas el cursor sobre él, algunos colores radiantes increíbles comenzarán a cambiar y a verse súper bonitos Así que comencemos y hagamos esta increíble animación. Da click en este aducto con alimento. Tomemos una sección principal. Desde la altura mínima, mantengámoslo como VH. Mantengamos el valor 50 del contenido justificado. Mantengámoslo como centro de línea de artículo central. la pestaña Estilo, mantendremos su color de fondo negro en este icono más, arrastrando un botón en la pestaña Estilo, mantengámoslo como color transparente, posición, manténgalo como centro, desde la tipografía Quedemos 25 para que veas con claridad, no estoy decorando el botón porque nuestro enfoque es aprender la animación, no en el diseño. Pasemos bajo Venta Avanzada y aquí vamos a pegar nuestro código CSS personalizado. Estoy pegando mi código aquí. Así que cuando termines sobre esto, puedes ver a este agradable sobrealimentado Para que puedas cambiar estos colores. Al igual que si escribes aquí, puedes cambiar este color como degradado uno, degradado dos, gradado en tres, degradado cuatro, puedes cambiar estos todos los colores. Entonces si escribo aquí como rojo, así se puede ver este color rojo. Entonces, cuando terminé sobre esto, estos colores están cambiando. Vamos a comprobar su capacidad de respuesta. Estoy dando click en este dispositivo tablet. Esto se ve genial aquí. Vamos a hacer clic en el móvil. Aquí hay una cosa más. Si quieres hacer el efecto resplandeciente por aquí, piensas que cuando flote sobre, aquí debería haber un efecto creciente. Entonces, ¿cómo puedes hacer eso? Entonces vamos a abrir la barra, pegarla aquí. Ahora minimiza la barra, y cuando coloco el cursor sobre esto, puedes ver este bonito efecto brillante Entonces ahora ya está hecho y da clic en este botón Publicar. 22. Primer contenedor Sitio web básico: Hola, chicos. Así que vamos a crear nuestro sitio web ahora. Entonces antes que nada, los instalaremos. Entonces estoy instalando Astra TN. Vamos a instalarlo y activarlo. Estoy borrando este tema del 2024. Ahora vamos a instalar nuestro plugin, haz clic en Añadir nuevo Plugin. Primero, instalaremos nuestro plugin Elementor. Nuestro segundo plugin será elemento skit. Asegúrate de corregir la ortografía, instálala y ahora activa. Ahora haremos nuestras páginas. Haga clic en Agregar nueva página. Estoy dando el título aquí a casa. Haga clic en publicar y publicar. Da click aquí, agrégalo con animador. Entonces comencemos ahora. Aquí se muestra el nombre de nuestra página. Entonces, antes que nada, entra en esta configuración de página, y desde aquí, elegiré diseño de página a elemento o lienzo. Por qué elijo esto, lo explicaré más adelante. Ahora hagamos nuestro sitio web. Así que haz clic en el icono más, y estoy tomando la estructura de las dos columnas. Estoy seleccionando este contenedor del lado izquierdo. A partir de aquí, voy a elegir la dirección a remar, clic en el icono más. Arrastraré mi rumbo hasta aquí. Diseñemos esto desde aquí, alineación izquierda, color del texto. 044f7. Le di este color a mi texto desde la tipografía Yo elegiré la fuente. Esta también es muy buena fuente. Lo voy a mantener hasta mojar 600. Bien. Vaya por debajo de Avanzado y desplácese hacia abajo aquí es un efecto de movimiento. Entonces voy a usar aquí la animación, así que estoy seleccionando esta animación, desvaneciéndose. Haga clic en el icono más, arrastrando otro encabezado debajo este encabezado, cambiando el título Ir debajo de la pestaña de estilo de aquí, alineación izquierda. Bajo el color del texto, estoy manteniendo su color negro bajo tipografía, familia Y talla, se lo voy a dar a 73, vamos a aumentarlo. Bien, 74 está bien de peso a 700. Quiero disminuir el espacio aquí. Entonces para disminuir el espacio, aquí hay una altura de línea. Vamos a darle el valor a 85. Bien, entonces esto está bien ahora. Ahora vamos por debajo pestaña avanzada desvincular el margen, desvincular el Ahora mira aquí cuando doy el valor negativo -20, así puedes ver aquí el espacio está decrecido.crolldwn bajo efectos de movimiento, voy a elegir aquí, rellenar uvación izquierda así puedes ver aquí el espacio está decrecido.crolldwn bajo efectos de movimiento, voy a elegir aquí, rellenar uvación izquierda. Entonces ya ves como nuestro texto viene del lado izquierdo. Cuando hagas tu trabajo, así que no olvides publicar tu trabajo una y otra vez, haz clic en el icono más, arrastrando un contenedor Contenido justificado para comenzar, alinear elementos al centro. Haga clic en el icono más, y estoy arrastrando un botón dentro de este Pasar por debajo de la pestaña de estilo de la tipografía, eligiendo la fuente Color del texto, blanco, tipo de fondo a negro. Ahora sobre el color del texto a negro y el tipo de fondo para clasificar la pluma. Ahora, mira la magia mi botón cuando coloco el cursor sobre mi botón, cómo funciona esta animación Estoy eligiendo de tipo de borde, estoy eligiendo a sólido, ancho de borde a dos, color de borde, negro, radio de borde a diez. Ahora, ya sabes, nuestras esquinas están redondeadas. Y de aquí, desvincula el relleno de la parte superior, vamos a darle 20 del lado derecho, 30, 20 en la parte inferior 30 de izquierda a izquierda. Bien. Ahora minimice la barra y vea nuestro botón. Haga clic en el icono más, arrastrando un encabezado aquí, pegando el Bajo la pestaña estilo, alineación al color del texto izquierdo 43, cuatro, tres, cuatro, tres. Bajo tipografía, familia Helvética, talla 20 de peso a 400, ir por debajo de avanzada, desplazarse hacia abajo, y aquí hay un movimiento para desvanecerse en enervación izquierda, la en Entonces este es nuestro lado izquierdo. Quiero este botón y este texto en una línea. Así que selecciona este contenedor de aquí, voy a elegir la dirección a R. Quiero este botón de clic aquí solo en una línea. Entonces vamos a ajustarlo. Entonces, antes que nada, seleccionemos esto y de aquí, quiero el texto después y palabra que debería venir en la siguiente línea. Entonces, ¿cómo podemos hacer eso? Usaremos aquí nuestra pestaña HDMI. Cuando usamos esta etiqueta break. Entonces como pueden ver, ahora nuestro botón está corregido. Ahora vamos por este lado derecho. Así que Slet este clic en el icono más. Desde aquí, arrastra esta palabra de imagen. Ahora elige Imagen. Yo elijo esto. Haga clic en seleccionar. Entonces esta es nuestra imagen. Resolución de imagen. Guárdalo para que caiga. De con 200%, valor máximo 200%, pasar por debajo de avanzado bajo efectos de movimiento, elegimos aquí, se desvanecen en Por lo que ahora se completa esta primera sección. A partir de esto, puedes ver la vista previa de tu sitio web. Entonces veamos lo hermosa que está funcionando esta animación. Pero quiero este texto en el centro. Entonces volvamos y desde aquí, seleccione este contenedor y desde aquí, elija contenido justificado como centro. Así que ahora haz clic en Publicar. Ahora puedes ver que nuestro contenido está en el centro. 23. Segundo contenedor: Ahora comencemos nuestra segunda sección. Entonces este es nuestro contenedor. Estoy abofeteando esto y de ancho, lo estoy guardando al 26% Y de dirección, estoy eligiendo remar contenido justificado para centrar líneas de artículos a centro. Haga clic en el icono más, arrastrando la imagen dentro de este Vamos a elegir la imagen. Al elegir este, haga clic en SletImagerSolution para caer bajo alineación de pestañas de estilo Me quedo con el ancho del centro, mantengámoslo al mantengámoslo Arrastrando un rumbo aquí. Cambiemos el texto. Ir por debajo de la pestaña de estilo, alineación a la izquierda, color del texto a negro, tipografía, peso a 400 y familia eligiendo a Disminuyamos su tamaño. Mantengamos su tamaño a 18. Sí. Esto está bien ahora. Minimizar la barra. Pero esta imagen se ve muy pequeña. Entonces estoy seleccionando esta imagen. Aumentemos su ancho. 60 está bien. Ahora, dejemos que este contenedor vaya bajo la pestaña de estilo. A partir de aquí, escojamos frontera. Y desde radio de borde, estoy dando a 20 valor, minimizar la barra. Ya no podemos ver la frontera, pero no te preocupes. Ahora lo vamos a dar a box shadow, blinus a 20. Ahora esto es más sangre y valor separado -50. Ahora minimiza la barra. Y ahora se puede ver esta agua ligera. Pasar por debajo de avanzado, bajo efecto de movimiento. Vamos a darle efecto animación de entrada, elija aquí, desvanecerse en la animación izquierda. Entonces esto se ve genial. Ahora solo haga clic derecho y duplique clic derecho y duplicado duplique este contenedor, y es por eso que se aplica la misma anivación en los otros contenedores, también. Entonces vamos a cambiarlo. Ir bajo avanzado bajo efectos de movimiento. Aquí se desvanece a la izquierda. Quiero usar aquí. Si uso aquí, mantengámoslo hasta que se desvanezca. Sí. Se este contenedor bajo avanzado aquí vamos a elegir desvanecimiento derecho. Sí. Ahora publica tu contenido. Veamos la vista previa. Sí. Ya viste cómo está funcionando toda esta animación. Refresquemos esto una vez más, como puedes ver. Esto se ve realmente increíble. No usé el botón de animación on, así que hagámoslo. Entonces seleccionando el botón de aquí bajo efectos de movimiento, si lo guardo, la moda en la animación izquierda es buena Así que publica esto y vamos a comprobarlo aquí. Sí, como puedes ver lo hermoso que se ve esto. Entonces vamos más allá. Haga clic en el icono más. Quiero agregar un encabezamiento aquí. Entonces, en lugar de tomar un widget de encabezado, simplemente lo duplicaré derecho, haré clic y duplicaré. Entonces solo lo llevaré hasta aquí. Sí. Ahora, antes que nada, cambiemos el contenido. Pero no quiero esta animación aquí. Entonces, antes que nada, eliminemos las animaciones. Ir bajo Avanzado bajo efectos de movimiento. Elíjelo a ninguno. Sí. Entra en la pestaña de estilo. Quiero disminuirlo de tamaño. Entonces aquí me estoy guardando a 60. No quiero darle a la altura de línea, así que eliminemos esto. Este contenido no está arreglado, derecho. Desde la alineación, vamos a elegirlo al centro. Sí, ahora nuestro contenido está en el centro, B el contenedor padre bajo Avanzado desvincula el margen y desde la parte superior, estoy dando el margen 80 Sí. Ahora esto se ve perfecto. Ahora, haga clic en el icono más, arrastrando un editor de texto Pasar por debajo de etiqueta de estilo, alineación a Santo y código de color 434343 Tipografía Helvética. No lo voy a dar a talla porque esto está bien. Bien. Entonces ahora esto se ve genial. Estoy arrastrando un widget de video aquí. Desde aquí, puedes elegir cualquier fuente. Estoy eligiendo el YouTube. Estoy pegando el enlace. Desplácese hacia abajo, y desde aquí, si desea que su video se reproduzca automáticamente, hágalo, reproduzca en el móvil, nab Puedes hacer estos cambios de acuerdo a ti, como puedes ver ahora nuestro Video, ahora haz clic en Publicar. Bien, entonces esto ya está hecho. Ahora, haga clic en el icono más. Haga clic en el icono más. Arrastremos un encabezado aquí, cambiando el título, pasemos por debajo pestaña de estilo, alineación al centro, color de texto a negro de tipografía, Albatica de peso a 400 Pero esto es menos, pero este peso es menor, así que mantengámoslo a 600. Sí, esto está bien. Haga clic en el icono más y busque el widget Lobo. Entonces este widget viene de nuestros elementos kid plug in. Así que vamos a arrastrar esto desde el estilo de diapositiva, vamos a elegir aquí demasiado simple, ir por debajo del título. Así que borra este nombre de cliente y elige tus imágenes. Seleccionemos los logotipos del nombre del cliente, eliminemos esto, elija la imagen. Cislect bajo el Título tres, elimine el nombre del cliente Entonces así, puedes poner todo el título que tengas. Ahora, todos los logotipos están mostrando aquí. Ahora ve a ajustes. Se puede poner el valor de espaciado izquierda derecha. Diapositiva para mostrar, tendremos cinco logotipos, así que guardaré aquí el valor como cinco. Deslice para desplazarse, cuántas veces desea desplazar sus logotipos, puede poner esto desde la reproducción automática, sus logotipos se moverán automáticamente, así que habilite esta opción Estoy habilitando esto, para que puedas elegir la velocidad. No quiero que cuando pase el cursor sobre esto, los logotipos paren para moverse, los logotipos paren para moverse, así que estoy deshabilitando esto y habilito este Bien, ve por debajo de estilo ahí. Aquí, la altura de estos logotipos son muy grandes. Entonces a partir de aquí, puedes elegir tu altura, pero yo la mantengo como cero. Ir en opción de logotipos. No quiero hacer nada con ello. Vamos a pasar. Aquí, quiero agregar un color. Vamos a darle un color. Quiero el color claro. Aún así, esto es demasiado, así que estoy disminuyendo su transparencia. Sí, esto está bien, creo. Voy a mantener este color, minimizarlo. Pasamos el cursor sobre. Entonces sí, este color claro se ve bien. Ahora, solo publica esto y veamos nuestra vista previa. Entonces mira esto. ¿Qué tan hermosa se ve esto? 24. Tercer contanier: Así que comencemos nuestra siguiente sección, haga clic en el icono más. Estoy eligiendo esta estructura de dos columnas. En primer lugar, vamos por debajo de Style ta porque quiero darle un color de fondo desde aquí, escribiendo el código de color 4f4f5 Le di este color claro al fondo. Y como pueden ver aquí no hay espacio entre este contenedor y estos logotipos. Entonces vamos por debajo de Avance, desvincule el margen, desde parte superior estoy sumando el valor cien Sí, este espacio es suficiente. Ir por debajo de la disposición, y vamos a darle una altura mínima. Lo gestionaremos más tarde si queremos más espacio. Entonces después de eso, aumentaremos el valor. Ahora, seleccione este contenedor. Ahora vamos a arrastrar los contenidos. Así que haz clic en el icono más. Desde aquí, arrastra el encabezado, cambiando el título. Ir por debajo de la alineación de estilo a la izquierda. El color del texto también, se lo estoy dando al color azul. Entonces vamos a escribirlo código 044f7 bajo tipografía Talla 14. Y quiero agregar un espacio aquí. Vamos a darle a valor de 1.5 píxeles. Sí, se ve bien. Quiero añadir otro encabezamiento. Podemos hacer una cosa aquí. Al igual que, haga clic derecho en esto y copie, haga clic derecho y pegue. Entonces ahora escribamos el contenido. Ir por debajo de la alineación del estilete a menos, y a partir de aquí , familias, estoy manteniendo su tamaño de fuente 238, peso a 700 Entonces esto está hecho. Ahora, vamos a arrastrar un widget de editor de texto. Así que vamos a corregirlo del color del texto, convirtiéndolo en negro bajo tipografía, fuente alvetica y Bien, entonces esto está hecho. Ahora quiero agregar dos botones aquí. Así que vamos a copiarlos, clic derecho y copiar y hacer clic derecho y pegar esto aquí. Pero antes que nada, quiero eliminar las animaciones aquí. Por lo tanto, seleccione este botón bajo hechos de movimiento avanzados y guárdelo a ninguno. Así que la animación se elimina del botón. No quiero este texto. Así que simplemente haz clic y borra esto. Quiero un botón más, así que haz clic derecho y duplica esto. Entonces diseñemos esto, cambiemos más apretado. Aquí, quiero escribirla. Ahora mismo, ahora selecciona este botón, cambia el más apretado, aprende más Bien. Vaya a la pestaña Estilo. Quiero hacer algunos cambios. Entonces en el estado normal, texto carbón, quiero negro, y del tipo de fondo, lo estoy manteniendo demasiado transparente. Y en hover, color de texto, quiero blanco y color quiero negro Así que ahora cuando pase el cursor sobre esto, bien, esto se ve bien ahora Ahora, ambos patrones se ven bien. Así que la sección izquierda es nuestra lista ahora. Haga clic en el icono más, agregue Image Widget, elija su imagen. Haga clic en Seleccionar. Entonces esta es nuestra imagen. Resolución mayor 24 bajo Cinta de estilo, lo mantengo mereciendo un 200% Valor máximo 200 y altura es 500 objeto a cubrir. Ahora toda esta sección está lista. Ahora vamos a crear nuestra siguiente sección. Quiero decirte algo. En lugar de crear una nueva sección, podemos hacer fácilmente una cosa. Lo que podemos hacer, haga clic derecho en esta sección y duplique esta. Bien. Nosotros solo haremos los cambios. Ahora solo cambiaremos nuestro contenido y se hará esta sección. En primer lugar, no quiero esta brecha. Así que haga clic derecho aquí y vaya bajo la pestaña Avanzado desde aquí, elimine el margen desde arriba. Ahora solo tenemos que cambiar la pestaña ir debajo de estilo. Quiero todo el texto en percase así que de transform, estoy seleccionando mayúsculas Quiero aquí solo un botón, así que estoy borrando este botón. Queremos un solo botón, así que por eso no necesitamos que esto continúe. Así que simplemente arrastre este contenedor dentro de este y haga clic derecho y elimine este contenedor. Bien, hay mucho espacio. Entonces quiero disminuir ese espacio. Entonces, seleccionemos este contenedor. Estoy manteniendo el valor de la brecha como cinco. Esto se ve genial, pero aquí hay mucho espacio, selecciona el botón, ve debajo pestaña Avanzado, desvincula el margen Y a partir de aquí, vamos a darle margen -20. Entonces quiero este contenido en el centro. Entonces así como este contenedor, de aquí, justificó el contenido al centro. Si, esto es lindo ahora, y ahora solo cambia tu imagen. Quiero agregar aquí esta imagen, con select. Sí. Ahora, toda esta sección está lista. Quiero esta sección derecha al lado izquierdo y esta sección izquierda, quiero del lado derecho. Entonces, ¿cómo podemos hacer eso? Entonces solo este contenedor, ve por debajo de Advanced dab y aquí hay una opción de pedido Así que solo selecciónala al inicio. Así que mira esto con qué facilidad y qué tan rápido creamos esta sección. Ahora, basta con hacer clic y publicar. Entonces así, también podemos crear nuestra siguiente sección. Entonces hagámoslo. Nuestra siguiente sección es similar a esta sección, porque quiero también como este encabezado, estos dos botones y la imagen en el lado derecho y este contenido en el lado izquierdo. Entonces sólo vamos a copiar este contenedor. Así que haga clic derecho y copie solo haga clic derecho y pegue. Entonces como pueden ver, ahora, antes que nada, no quiero este espacio. Entonces hagámoslo rápido. Solo tenemos que cambiar el contenido y la imagen. Entonces ahora no necesito explicar nada porque ya has entendido. A por lo que esta sección también está lista solo tienes que publicar tu contenido. Bien, así como pueden ver, ahora hicimos nuestras tres secciones, pero me olvido de aplicar aquí animaciones en imágenes. Entonces hagámoslo. Entonces seleccioné esta imagen en Avanzado, desplácese hacia abajo desde aquí efectos de movimiento. Vamos a usar aquí, moda en la animación correcta. Seleccionemos esta imagen. Bajo efectos de movimiento, usaré aquí fade in left animation, y aquí elegiré fade in. Derecha. Sí. Ahora publíquelo. 25. Cuarto contenedor: Hagamos ya nuestra siguiente sección. Haga clic en el icono más. Seleccionemos esta estructura. Quiero añadir un encabezamiento. Entonces, en lugar de tomar un nuevo widget, así que simplemente haz clic derecho y cópialo y haz clic derecho y pega esto, cambia el contenido. Haga clic con el botón derecho y copie. Haga clic derecho y pegue. Cambiar el contenido. Aquí también quiero agregar encabezamiento. Así que solo haz click derecho y copia aquí, pega. Simplemente publique su contenido. Quiero agregar un espacio aquí. Así que vayamos por adelantado. Desde la parte superior, si le doy el relleno, mantengamos su valor como 60. Sí, 60 está bien. Quiero disminuir el espacio aquí también, así que seleccionando este contenedor. A partir de aquí, estoy manteniendo el valor de gab cero. Sí, esto es ahora mismo. Quiero hacer todo el contenido en los centros. Por lo tanto, seleccione este contenedor padre bajo diseño. A partir de aquí, haré líneas de pedido al centro. Sí, ahora solo publica. Hagamos nuestra siguiente sección, haga clic en el icono más. Escogiendo esta estructura, haga clic en el icono más. Quiero agregar imagen aquí, así que elige tu imagen. Estoy agregando esta imagen aquí. Haga clic en seleccionar. Sí. Entonces esta imagen está aquí. Esto es demasiado grande. Estoy guardando resolución de imagen. Tan grande porque si la mantengo llena, el tamaño de esta imagen se incrementa mucho, así que la voy a mantener demasiado grande. Sí, esto está bien. Ir a la historia de la pocilga. Quiero hacer su esquina como más redonda. Entonces vamos a darle al radio de borde a 20 píxeles. Sí. Ahora, las esquinas están redondeadas. Vamos a darle a box shadow aquí. Aquí se agrega sombra de caja. Desenfoque a diez. Haga clic en Publicar. Esta sección también está lista. Seleccione a su contenedor padre. Quiero dar un antecedente aquí también. Así que ve por debajo de inicio. Escribamos el código aquí. Escribe el código aquí. Cuatro F cuatro, F tres. Aquí, olvido agregar los antecedentes en esta sección. Entonces agreguemos esto aquí también. Ahora ambas secciones están listas, seleccione este contenedor, vaya bajo diseño. A partir de aquí, altura mínima estoy guardando así. Vamos a mantenerlo a seis, 50 contenido justificado, hacerlo al centro y enviado. Ahora nuestra imagen se ve perfecta. Haga clic en publicar. Ahora vamos más allá. Haga clic en el icono más, Flexbox, eligiendo este, vaya debajo de la etiqueta Avanzado Quiero dar un margen aquí, así que me quedo con el valor 80. Veamos esto. Sí, está bien. El valor de margen es 80 desde los lados superiores. Bien, haz clic en el icono más. Entonces estoy seleccionando copia. Copia esto, probando el contenido. Aquí quiero que el texto después se mueva hacia eso venga en la siguiente línea. Entonces para hacer eso estoy usando aquí la pestaña break. Entonces ve en la alineación de puñalada al centro. Quiero hacer la talla más grande. Vamos a darle a 48, y quiero darle la altura de la línea aquí. Así que mantengámoslo a 50. Sí. Duplicemos este widget de texto, haga clic derecho y copiemos, haga clic derecho y pegue. Mantengámoslo en el centro hasta debajo de la alineación del estilete al Ahora da clic en el icono más, arrastrando un contenedor desde la dirección, lo estoy haciendo a la fila y desde el contenido justificado al centro Haga clic en el icono más y arrastre un nuevo contenedor aquí y simplemente duplique esto Quiero hacer un poco de estilo con este contenedor, ir bajo Grifo estilo. Se lo voy a dar a Batter radio 30. Del tipo Ber, estoy eligiendo a sólido. Vamos a darle una acuarela. Doy agua ligera. ¿Bien? Ahora dentro de este contenedor, quiero agregar la sección testimonial. ¿Bien? Entonces busquemos testimonial, y elegiré esta sección testimonial. Aquí, pega nuestro contenido. A partir de aquí, estoy eligiendo la imagen. Vamos a elegir esta imagen. Cambiar el nombre Puedes elegir la posición de la imagen si quieres en la parte superior, así esta imagen estará aquí, pero la estoy guardando a un lado y puedes elegir la alineación así. Lo estoy guardando a la izquierda debajo de la pestaña de estilo. En primer lugar, cambiemos el color del texto a negro. Bajo tipografía, familia, estoy eligiendo Helvética, talla le estoy dando a 20, peso Bien. Abre esta sección de imagen. A partir de aquí, puedes elegir la resolución de la imagen así, así que la estoy manteniendo a 70. Escojamos un tipo de borde para sólido como este. Puedes ajustar el ancho del borde acuarela, radio del borde, todas las cosas que puedes hacer desde aquí. Y el siguiente es el nombre. Elige el color del texto negro. Tipografía A partir de esto, estoy eligiendo el teléfono Helvetica. Ahora vamos a darle un color de texto 888 y ocho. Bien. Ahora solo cierra esto y mira esto se ve hermoso, pero quiero hacer una cosa más, seleccionar este contenedor, pasar debajo de avanzada desvincular el relleno. Desde la parte superior, estoy sumando valor 20, abajo 25, lado izquierdo 30. Del lado izquierdo, lo guardaré diez. Simplemente haga clic derecho y duplique esta sección y elimine esta. Entonces estas dos secciones están listas. Simplemente cambia el contenido. Puedes cambiar estos todos los nombres desde aquí toda la designación. Como cualquier cosa que puedas cambiar. Ahora solo haz clic derecho y duplica toda esta sección. Y aquí simplemente vamos a cambiar nuestro contenido. Por lo que estas cuatro secciones también están listas muy fácilmente. Ahora publica toda esta sección. Bien, entonces ahora todas las cosas están hechas. Ahora, vamos a aplicar las animaciones en las cuatro secciones como este contenedor bajo efectos de movimiento. Vamos a usar aquí encajar en la animación izquierda. Para este contenedor, elegiré encajar en la animación correcta. 26. Quinto contenedor: Así que vamos a crear una nueva sección. Estoy eligiendo esta estructura de aquí, contacto justificado para centrar líneas de pedido a centro. Voy a tomar su altura mínima a 600, pasar por debajo avanzado del tipo de fondo. Quiero agregar un fondo aquí. Entonces seleccioné esta imagen. Hagamos algunos ajustes desde aquí. Fijación para desplazarse, repetir, no repetir, tamaño de pantalla para cubrir. Ahora haga clic en el icono más, arrastre un contenedor. De la dirección, la mantendremos en fila y de contenido justificado al centro. Y mantendremos su altura mínima a 350. Lo ajustaremos más tarde si quieres más espacio. Haga clic en el icono más, arrastre un contenedor más, haga clic derecho y duplique esto. Entonces, antes que nada, estoy seleccionando este contenedor del lado izquierdo de aquí. Contenido justificado, lo mantendremos al centro alinear los elementos al centro. Estoy seleccionando este contenedor bajo Estilo tara. Quiero agregar un color de fondo aquí, negro, y vamos a darle un borde. Se lo estoy dando a 50 minimiza. Sí, ahora esto se ve genial. Ahora, vamos a dejar que este contenedor del lado izquierdo, haga clic en el icono más. Vamos a copiar el widget de encabezado clic derecho y copiar, clic derecho y pegar. Vaya a la pestaña Estilo. En primer lugar, vamos a cambiarlo texto para que podamos ver los cambios. Ahora alineación, lo estoy haciendo a la izquierda, y bajo contenido, quiero esta palabra experiencias en la siguiente línea. Entonces estoy usando aquí nuestra pestaña break, ve bajo pestaña Estilo. Aquí soy de aquí, lo voy a mantener la talla a 47 y nosotros 600. Ahora haga clic en el icono más, cambiando el texto. Pegué este texto aquí bajo alineación de tipo de estilo a la izquierda del color del texto, cambié de color a 838, 38 de tipografía, familia, elijo Altico Guardo la fuente misma 19, hice el tamaño de la fuente. Quiero agregar un botón aquí, así que sólo voy a copiar este botón, escribirlo y copiarlo. Vamos a pegarlo aquí. En primer lugar, estoy cambiando el título, háblenos hoy bajo la pestaña de estilo. En primer lugar, hagamos que sea color a blanco para que podamos ver los cambios. Entonces a partir de aquí, vamos a llegar a 17 aquí. Y el color de fondo, lo estoy manteniendo en blanco. Bien, entonces ahora podemos hacer que el texto sea de color a negro. En Oper quiero agregar un acuarelado al blanco. Cuando me burlo de esto, esto es hermoso, ¿verdad? Ahora publica tu contenido. Bien, entonces ahora hagamos algunos cambios con este botón. Al seleccionar este contenedor. De contenido justificado, lo estoy haciendo para centrar líneas de pedido a centro. Ahora esto se ve así. Quiero este botón en esta posición. Entonces hagámoslo. Estoy seleccionando mi contenedor padre, y desde aquí de las líneas de pedido, simplemente eliminaré así que ahora este botón está aquí. Ahora solo voy a dar el relleno, así que desvincula el relleno. Y desde la parte superior, estoy llegando a 45. Vamos a minimizar. Sí, ahora esto está bien. Bien, entonces lo haré así. Ahora quiero este contenido en el centro. Entonces para hacer eso, seleccionaré este contenedor. Voy a mantener su altura mínima a 55. Ahora nuestro encabezado está en el centro, pero este editor de texto no lo está, así que seleccionaré esto en Avanzado, desvincularé el relleno. Aquí, voy a dar el acolchado desde el lado izquierdo. Entonces ahora nuestro editor de texto es bueno. Minimiza el listón y di esto. Ahora esto es genial. Por lo que ahora publica esto. Por lo que esta sección también está lista. Abra la barra, haga clic en publicar. Ahora haremos nuestra última sección. Entonces hagámoslo rápido. Entonces a partir de aquí, antes que nada, quiero añadir aquí el margen. Entonces este es nuestro pago y contenedor, vaya bajo Paso Avanzado. A partir de aquí, quiero agregar un espacio desde la parte superior. Quiero dar un margen desde la parte superior. Entonces le di 100. Haga clic en el icono más, arrastrando su widget de encabezado Únete a nuestros boletines mensuales. Para recibir las últimas noticias. Debajo de la pestaña de estilo, posición al centro, color del texto a negro. Tipografía fuente aquí elige al tica Si llego a 25, 25 está bien El Cplus puede arrastrar un editor de texto aquí. Cambiemos el texto. No Sam bajo alineación de estilo al centro, color de texto a negro de tipografía fuente Helvetica, peso normal Bien. Ahora, haga clic en el icono más. Vamos a añadir un contenedor aquí dirección, elegir fila, dar clic en el icono más, arrastrar el contenedor, clic derecho y duplicar, clic derecho y duplicar, clic derecho y duplicar Entonces tomo aquí cuatro secciones. Entonces aquí, vamos a seleccionar esta, agregar nuestra imagen aquí. Grande demasiado lleno, elige tu imagen. Ir por debajo de la alineación de estilo a la izquierda. Hagámoslo dos. 22 está bien. Entonces con este logo con esta imagen, quiero escribir aquí texto dos. Así que haz clic en el icono más y agrega tu widget de encabezado aquí. Entonces, antes que nada, cambia el título. Texto color a negro bajo tipografía fond tamaño 25. Ahora quiero esta partida con esta imagen. Entonces selecciona este contenedor y de aquí, dirección, elíjalo para remar. Ahora aquí hay mucho espacio. En primer lugar, quiero una brecha aquí como cero. Así que selecciona este encabezado ahora bajo avanzado Aquí voy a añadir margen, desvincular el margen, y voy a dar aquí margen desde el lado izquierdo, 100 y ahora seleccionaré esta imagen Aumentemos su tamaño a 26. Sí, ahora minimiza esto y creo que esto es bueno. Ahora dentro de este continuar, agregaremos nuestro texto. Haga clic en el icono más, un encabezado. Vamos a darle el título aquí compañía bajo la alineación de cinta de estilo a la izquierda, color del texto al negro Familia Helvética y talla, daré a 18 En lugar de crear un nuevo encabezado una y otra vez, simplemente duplicaremos esto y haremos nuestros cambios. Entonces aquí voy a escribir sobre nosotros, bajo tipo de estilo, voy a pegar mi abrigo. Lo hago a menos blanco. Entonces bajo tipografía, voy a dar talla aquí 18, pero desde el peso, la guardaré hasta 400 Sí. Ahora esto es pero quiero mantenerlo tamaño a 19. Ahora sólo vamos a copiar esto, hacer clic derecho y duplicar, derecho, clic y duplicar. Sí. Simplemente cambie el contenido ahora precios aquí, contenido. Entonces ahora por encima de esta sección está listo. Ahora solo haremos clic derecho y duplicaremos esto, derecho, haga clic y duplicaremos. Entonces voy a retrasar estos contenedores. Ahora voy a hacer rápido desde aquí porque sólo voy a cambiar los contenidos. Et's le dan el valor aquí a 50. Vamos a darle aquí 50. Vamos a darle aquí 50. Ahora todo nuestro sitio web es Mt. Ahora veamos la vista previa. Como puedes ver cómo están funcionando estas hermosas animaciones. Y cómo nuestras imágenes vienen del lado izquierdo y derecho. I 27. Encabezado y pie de página: Empecemos y creamos nuestro encabezado. Haga clic en esto. Aquí voy a elegir esta estructura este contenedor, y quiero mantenerlo 20% dirección estoy eligiendo para remar contenido justificado al centro de línea de artículo central. Haga clic en el icono más, agregue su imagen. Estoy seleccionando este logotipo. Bajo la alineación del estilete a la izquierda, W 227 icono más icono Estoy agregando ahora agregando widget aquí, derecho tu título, solar one. Bajo estilo texto color dos negro, y tipografía, aquí está el tamaño Halitic Estoy haciendo 222 Ahora bajo avanzado desvincula el margen el margen del lado izquierdo -120 Oye, ahora esto está bien, así que da clic en público minimizarlo y ver. Sí, esto es genial. Ahora da click en este logo elemental, y aquí está la salida a las opciones de Wordpress. Entonces haz clic derecho y estoy abriendo esto en una nueva pestaña. Redireccionará al panel de administración. Ahora haremos nuestros menús. Entonces, desde la apariencia, vaya a los menús. Aquí, da el nombre de tu menú. Puedes dar cualquier nombre como estoy escribiendo el menú principal, mostrar la ubicación, elegir el menú principal y hacer clic en Crear Menú. Ahora abre estos enlaces personalizados. Aquí tienes que pegar la URL para cada sección. Cuántos menús quieres tienes que pegar la URL aquí. Entonces como estoy escribiendo aquí, home, Link text. Escribamos aquí a casa. Haga clic en At to Menu about Vincular texto a aproximadamente al menú. Haga clic en Atoman. Ahora aquí puedes ver tus menús. Haga clic en Guardar Menú. Ahora volvamos al soldador del sitio web de Elementor. En primer lugar, vuelva a cargar su sitio ahora. Busque aquí el menú de navegación del widget. Arrastre esto. Ahora aquí hay un menú selecto de aquí seleccionar menú medio. Entonces mira esto el menú que hicimos ahora que se muestra aquí. Y aquí hay una posición de menú horizontal. No lo voy a mantener al centro. Ahora, como puedes ver, ahora nuestros menús están en el centro. vamos a cambiar nada desde aquí, pasar por el estilo ahora, y desde aquí, se puede ajustar la altura del menú. Me lo estoy guardando a 50. Desplázate hacia abajo. No vamos a cambiar nada. Abra el estilo de elemento de menú. Si quieres cambiar algo, puedes hacerlo. ¿Bien? Aquí hay un estilo de elemento de menú. Entonces abre la tipografía, elige la familia. Lo que estoy haciendo aquí, puedes ver los cambios en el menú de navegación. ¿Bien? Fuente So Vatica Yo elijo talla. Vamos a mantenerlo a 70 sobre cómo quiero que el color sea azul. Entonces escribamos el código. 044f en siete, hagámoslo más azul. Entonces ahora cuando pase el cursor sobre esto, vea cómo está cambiando el color Nuestros menús están creados. Ahora quiero agregar aquí dos botones. Así que vamos a duplicar esos botones de aquí. Haga clic derecho y cópielo y pegue así, simplemente haga clic derecho y copie y haga clic derecho y presione este botón aquí. Antes que nada, cambiemos el contenido aquí, iniciemos sesión, y aquí escribiré para comenzar, publicar y ver. No hay espacio, así que revisemos nuestro contenedor padre. Aquí las brechas son cero, así que vamos a aumentarlo. Voy a llegar a 20. Sí. Ahora el espacio también se ve genial. Se crea nuestro encabezado. Y puedes ver lo bellamente que se ve este encabezado. Ahora quiero hacer una cosa aquí. Al igual que cuando hago clic en este servicio, quiero que me redirija esa sección. Entonces vamos a hacer esa cosa. Entonces para ello, quiero agregar esta casa pero voltear a esta sección, seleccionar esta avanzada. Aquí tenemos que escribir el ID CSS para eso. Este ID de CSS, tienes que copiarlo de. Tenemos que copiar ese ID CSS desde aquí. Comando S, no copie este hash. Y pegarlo aquí. Publica esto. Ahora bien, esta sección sobre, llena aquí esta ID de VSS, abre esto y copia esto Pégalo aquí. Ahora sección de servicios. Ahora, publique esto y vea la vista previa. Sí, primero, ya ves como nuestro sitio web se ve muy bien. Entonces veamos que estos hombres están trabajando. Cuando hago clic en casa. Sí, cuando hago clic sobre sobre, me llega en esas secciones. Cuando hago clic en las reseñas, para que puedas ver. Así que volvamos. Haga clic en este icono más. Voy a elegir esta sección. Altura mínima, la estoy manteniendo a 120 y dirección a fila. Contenido justificado, iniciar una línea de pedido Centro. Entonces ahora, haga clic en el icono más, y voy a arrastrar un contenedor aquí, y el ancho de este contenedor será de 70 y dirección a fila. Simplemente divida el contenido al centro. Haga clic en el icono más. Vamos a arrastrar sobre el rumbo. Aquí, escribiré mi texto 2024 solar one. Vaya por debajo de la pestaña Si. Vamos a escribir el código de color y abrir la tipografía, elegir familia, camino a 400 Espacio de letras. Se lo estoy dando a uno, duplica esto y solo cambia el título. Duplicarlo. Y aquí mismo, quiero agregar aquí algunos íconos sociales. Entonces para hacer clic en el icono más, agregar contenedor, y estoy manteniendo el ancho de este contenedor como 30. Solo para agregar contenido para comenzar. Haga clic en el icono más, busque los iconos sociales del Widget, y estoy eligiendo estos simples iconos sociales. Ahí lo estoy haciendo a mano derecha. Color oficial estoy eligiendo a color personalizado y primario lo estoy haciendo a color transparente y secundario, lo estoy haciendo a negro. Espero que entiendas sobre el sconry primario y el tamaño lo estoy haciendo a 20 y espaciando cinco radio de borde, lo estoy haciendo a 50 Ahora abre el icono sobre desde el color primario, voy a elegir el color azul, escribiendo el código para eso. Y color secundario, hagámoslo al blanco. Y hover animación, lo estoy haciendo a los compañeros. Ahora cuando coloco el cursor sobre mis íconos, puedes ver este hermoso efecto Ahora publica esto y veamos nuestra vista previa. Nuestro sitio web todo está hecho ahora. Ahora cuando pase el cursor sobre esto, qué hermosos se ven estos 28. Responsivo: Ahora haremos que nuestro sitio web tablet sea receptivo. Entonces para eso, necesitamos dar click aquí. Entonces como puedes ver, nuestro sitio web está buscando en tablet retrato así. Así que diseñemos esto. Haremos que el tamaño de esta rúbrica sea más pequeño. Entonces para hacer eso, ve en pestaña de estilo, y a partir de aquí, lo mantendremos aficionado a 45. Entonces 45 está bien. Así que ahora selecciona nuestro botón. Debajo de la pestaña de estilo, ajustaremos el relleno aquí. Lo haremos a diez desde arriba, 20 desde la derecha, diez desde abajo y 20 desde el lado izquierdo. Lo haremos así. Y a este rubro, aquí vamos a quitar nuestra etiqueta break. Sí, esto está bien ahora. En esta imagen, la haremos de ancho a 75 y ancho máximo 200% Ahora, aumentemos la brecha aquí. Aquí, quiero mantenerlo a 20, 20 pixel gap está bien. Vamos a ajustarnos a nuestra imagen bajo etiqueta de estilo aquí, vamos a aumentar su tamaño al 100%, pero al 100%, creo que es más grande, así que vamos a llegar a 90. Haga clic derecho y copie y pegue el estilo y pegue. Hagamos esto más pequeño. Entonces aquí voy a mantenerlo tamaño para sostener. Sí. Así que vamos a copiar y hacer clic derecho, pastoso, clic derecho y pegar probar Esto está bien, sí. Esto también lo es. Estos logotipos también se ven bien como este encabezado debajo de la pestaña de estilo aquí, hagamos su tamaño a 35. Sí. Otras cosas están bien. No los voy a cambiar. Voy a cambiar las imágenes. Aquí, cambiaremos su altura a 300. Bien, esto está bien. Y a partir de aquí, elige portada. Aquí, hay mucho espacio, así que voy a disminuir esto, seleccionaré esto, y lo voy a mantener a 400 minimiza y ahora este espacio, creo que todavía hay demasiado espacio, así que lo voy a mantener a 350 Cierra esto y mira, ahora esto está bien. Ahora selecciona esta imagen en la pestaña de estilo. Aquí voy a llegar a 300. Ahora seleccione este encabezado en la pestaña Estilo. Voy a hacerla talla a 35. Ahora seleccione este contener. Quiero esta imagen en el centro. Así justificado contenido para centrar alinear elementos al centro. Sí. Ahora cierra esto por. Y si, esto se ve bien. Cambia esta rúbrica, haz pequeña esta partida también, pero esta es demasiado grande. Sí. Aquí, me quedaré con la talla 31, y a esta imagen, voy a llegar a 300. Seleccione este contenedor y justifique el contenido al centro. Ahora, cierra la barra, pero hay mucho espacio desde la parte superior e inferior. Así que selecciona este contenedor. A partir de aquí, lo voy a mantener alto hasta 370. Puedes ajustarlo de acuerdo a ti, pero solo te estoy dando una idea de que lo que puedes cambiar, me olvido de decirte una cosa. Simplemente puedes cambiar esas cosas solo donde se está mostrando este letrero. Si este letrero no se muestra, entonces significa que no puedes cambiar esa propiedad en tablet o dispositivo móvil. Entonces a partir de aquí, lo voy a mantener el tamaño a 600, 600, creo que esto es demasiado. Entonces lo voy a mantener a cinco, 80. Sí, esto es bueno. Voy a dar, 40 está bien. Esta sección se ve genial aquí. Ajustemos este rumbo. 42 está bien aquí, seleccione esto bajo estrella avanzada. Desvincula el relleno. Sí, esto está bien. Y a este botón, vamos a ponerle relleno. Entonces de aquí, me quedaré a 15, 20, 15 y 20. Vamos a disminuir el tamaño de este contenedor. Entonces aquí, si me quedo a 500, esto está bien. Estos se ven bien en modo tablet. No necesitamos cambiar esto. Así que ahora nuestro modo tablet está listo. Ahora nos ajustaremos a nuestros menús. En primer lugar, como puedes ver aquí nuestros menús no están mostrando. Entonces a partir de aquí, desglose responsivo, lo mantendremos al móvil. Ahora nuestros menús se muestran en el dispositivo tablet, pero no se mostrará en el móvil porque seleccionamos esto vaya bajo la pestaña de estilo. A partir de aquí, disminuiremos el tamaño. Entonces para hacer eso seleccione el estilo del elemento del menú desde aquí, mantengámoslo tamaño si me quedo a 12. Entonces nuestros menús están en una fila ahora. Quiero estos botones en el lado derecho, seleccione este contenedor padre de aquí, dirección, elija remar. Pero con esto ahora, ya sabes, nuestros menús están mostrando en dos líneas desde la tipografía, si lo hago para que sea de tamaño a 11. Sí. Seleccione estos botones en la pestaña Estilo. Lo voy a mantener a 15 de lado derecho a 25, aquí, 15 y de lado derecho a 25. Entonces sí, esto se ve bien ahora, haz clic derecho y copia. Clic derecho y estilo de pieza. Sí. Ahora estos se ven bien. Ahora vamos a enviar sólo esta única cosa. Entonces antes que nada, seleccione esto bajo avanzado desvincule el margen de aquí si le doy el margen del lado izquierdo a 100 Pero aún así, esto le toca a esto. Entonces, solo vamos a esto. Esto se ve bien ahora. Creo que todavía hay dos espacios, así que lo voy a mantener desde el lado superior, voy a dar a diez, y desde abajo, lo voy a mantener a diez. Así mismo, voy a pegar este estilo para aquí, ahora publicar. Ahora veamos que nuestro modo tablet está listo. Todas las cosas se ven muy bien. Ahora, vamos por debajo de la pestaña Móvil. Entonces para ver eso aquí, da clic aquí. Consulta aquí cómo se ve en el móvil. Menús, lo crearemos después. Simplemente vamos a disminuir el tamaño de los encabezamientos. Esta imagen se ve bien. Aquí, voy a mantener el tamaño a 50. Sí. Justo a la derecha, haga clic en copiar y paytyle Clic derecho y Paytyle. Publica tu contenido. Sí. Estos se ven bien aquí. Selecciona este encabezado, hazlo talla 235, selecciona este encabezado bajo la pestaña Estilo. Voy a mantener su tamaño a 20, seleccione este logos. Y desde configuraciones abiertas, aquí elegiré diapositivas para mostrar aquí pondré el valor tres. Sí, ahora aquí vamos a chows tres logos. Bien, entonces estos se ven bien. Ahora hazlo más pequeño, 30, selecciona esto. En la pestaña Estilo, hazlo 215. Hagamos que el tamaño del botón sea más pequeño. Desvincularlo y hacerlo a 15, 20, 15, y aquí 20 Sí, clic derecho, copia, clic derecho y estilo de pago. Sí, las imágenes se ven bien. Quiero este texto en la parte superior y esta imagen en la parte inferior. Así que selecciona esta imagen bajo avanzado aquí haz el pedido para terminar. Sí. Ahora bien, esto está bien. Selecciona el encabezado, hazlo de tamaño a 30. Sí, selecciona esta etiqueta de estilo. Es talla a 15. Basta con pegar el estilo de botón aquí, arcilla derecha, copiar, botón de tubo c, clic derecho y pegar estilo. Creo que estos botones están muy cerca de este texto. Entonces, vamos a sugerir esto. Seleccione el contenedor en avanzado. Voy a dar el valor diez aquí, seleccionar el contenedor, bajo disposición. Voy a llegar a diez. Aquí, voy a mantener el tamaño a 30. Seleccione este 15. Ahora, antes que nada, quiero disminuir el tamaño del contenedor. Vamos a disminuirlo a 270. Ahora, seleccione esto. Aquí, me quedaré 29, pero hay demasiado espacio, así que no quiero eso. Así que hazlo también la altura de la línea, así que vamos a llegar a 1.3 am. Estas secciones se ven bonitas, pero si quieres cambiar el tamaño, así puedes. Entonces vamos a ajustar esto. Quiero hacerlo más pequeño. Quiero este texto en dos líneas. Sí, 26 está bien. A la altura de la línea, mantengámoslo a 1.5 y disminuyamos su tamaño aquí también. 15. Sí. Quiero este botón aquí. Así que vamos a seleccionar esto en Avanzado desvincular el relleno. Ahora seleccione este contenedor, bajo Desgarro avanzado, desvincule el margen Vamos a dar el margen desde los lados superiores, líneas de pedido para comenzar. Seleccionemos esto bajo Estilo t aquí, mantengamos su tamaño a 20 y disminuyamos el margen desde la parte superior. Entonces selecciona este contenedor bajo avanzado desvincula el margen, y desde la parte superior, lo voy a dar a 50 Ahora quiero esto todas las cosas en el centro. Relaja este contenedor, justifica el contenido al centro, un centro de líneas de pedido establece esto, un centro de líneas de pedido. Seleccione este contenedor, líneas de artículos al centro. Entonces sí. Ahora todas estas cosas están en el centro, seleccione este encabezado bajo Tecnología de estilo, línea de pedido a centro. Sí, así que todas las cosas están en el centro. Ahora selecciona esto y de aquí, líneas de pedido al centro. Ahora publica tu contenido. Así que ahora diseñemos nuestro menú. Así que abre la barra. En primer lugar, no quiero mostrar estos botones en el móvil. Entonces selecciona el botón en Avanzado desde aquí, aquí hay un botón de respuesta. Aquí se puede ver ocultar en retrato móvil. Entonces habilitaré esta opción. Voy a hacer lo mismo esta cosa con este botón. Ahora bien, este botón no se mostrará en el dispositivo móvil. Si no quieres mostrar estos botones en las tabletas, así puedes hacerlo desde aquí. Estas son cosas que puedes ajustar de acuerdo a ti. Ahora este logo y este botón, lo quiero en una fila. Entonces hagámoslo. Seleccionemos esta imagen bajo estilo ahí. Quiero que sea talla 225, pero 25 se ve muy grande, así que lo hago 223. Y a este rubro, desvincule primero el margen Del lado izquierdo, quiero darle a -100. Si se lo doy a -100, esto sigue siendo. Disminuyamos esto ahora. Entonces voy a dar el margen del lado izquierdo menos 129. Entonces ahora selecciona este contenedor de aquí contenido justificado para comenzar, vamos a disminuirlo sus así que de esta manera, seleccione este contenedor de aquí, lo estoy haciendo a 50 pixeles. Entonces ahora estos están en una línea, minimice la barra. Bien, entonces estos se ven geniales en el dispositivo móvil. Cuando abras esto, así podrás ver cómo están nuestros menús. Entonces, si haces clic en una sección, redirigirás a esa sección. Para que puedas ver lo hermosos que se ven estos. Nuestro sitio web ya está listo, así que nos reuniremos en el siguiente video. Espero que hayan disfrutado de la clase de hoy. 29. Primer contenedor Sitio web intermedio: Hola, chicos. Entonces comencemos a hacer nuestro segundo sitio web. En primer lugar, instalaremos nuestro tema. Buscando Extra Theme. Haga clic en Instalar. No olvides activar el tema. Ahora borra esto. Ahora entra en plugins, haz clic en Añadir Nuevo Plugin. Nuestro primer plugin será elemento, haz clic en Instalar ahora. No olvides activar el plugin. Haga clic en Agregar nuevo Plugin. Ahora vamos a instalar elementos, se plugin. Haga clic en Instalar ahora, haga clic en Activar. Para hacer este sitio web, necesitamos la versión Elementor Pro porque usaremos nuestra opción CSS personalizada Para usar esa opción, deberíamos tener Elementor Pro Entonces hagámoslo. Haz clic en Añadir nuevo plugin. Aquí se muestra Upload plugin. Da click en esto y elige Elegir Pila. Aquí busca Elementor Pro. Da click en esto, haz clic en Subir, haz clic en Instalar ahora. Así que ahora nuestro plugin. Así que ahora nuestro plugin está instalado. Haz clic en Activar plugin. Bien, así que estos fueron nuestros plugins. Ahora vamos a hacer nuestras páginas. En primer lugar, elimine estas dos páginas. Ahora ve a Agregar nueva página, cancela este pop up, dando los nombres de los títulos a casa, haz clic en Publicar. Ahora da click en Addit con Elementor. Cancele este pop up. Entonces ahora comencemos a hacer nuestro sitio web. Entonces esta es nuestra estructura de dos columnas. Ahora estoy seleccionando esta sección del lado izquierdo. Haga clic en el icono más. Aquí estoy arrastrando mi widget de encabezado. En Stid Now, haga clic en el icono más, arrastrando un encabezado más debajo de este encabezado En la pestaña Estilo. Oh, perdón, me olvidé de agregar el fondo aquí. Seleccionando esta imagen, haga clic en seleccionar Bajo diseño. En primer lugar, hagamos su altura mínima 650 bajo la pestaña Estilo, posición al centro, desplazamiento de fijación. Y a partir del tamaño de la pantalla, elegiremos la cubierta. Ahora da clic en publicar pop de familia ins tamaño 250, peso 700, haga clic en icono más, arrastrando editor de texto Tamaño 15, icono de CLConPlus, arrastrando un botón debajo Pop familiar significa. En condiciones normales, texto color blanco, estoy escribiendo código de color. Radio de borde 50. Acolchado 20. Ahora desvincula esto y del lado izquierdo y derecho, estoy llegando a 30 bajo contenido Aquí puedes ver la opción de icono. A partir de esto, puedes subir aVigi y a partir de este, puedes elegir cualquier icono de la biblioteca Estoy buscando el inserto de icono de Bitcoin. Desde aquí, puede ajustar el espacio del icono de posición del icono a diez Haga clic en publicar. Quiero todo este contenido en el centro. Entonces para ello, seleccione este contenedor desde el contenido justificado hasta el centro. Aquí hay mucho espacio entre botón y este texto. Entonces vamos ahí, seleccione este botón, vaya bajo Puñalada avanzada A partir de aquí, estoy dando el margen desde la parte superior. Voy a llegar a 20. Nuestra sección de conjunto de mano izquierda está lista. Ahora, saltemos aquí, haga clic en el icono más. Arrastre el widget de imagen. Escoge la imagen, selecciona ésta, da clic en seleccionar resolución de imagen a plena. Ahora haga clic en el icono más, arrastre el widget de imagen en esta posición. Elige tu imagen. Yo seleccioné esto. Haga clic en seleccionar Resolución de imagen al completo. Vaya a la pestaña Avanzadas. Ahora para ajustar, quiero esta imagen a esta imagen. Ya sabes, entonces cómo hacerlo de la posición a la absoluta. Y a partir de aquí, estoy de orientación vertical, dando el valor a 105. Quiero que esta imagen se mueva a la página web. Sí, menos diez está bien. Ahora, haz clic derecho y duplica esta imagen. Seleccioné este, haga clic en Costo. Aquí, voy a cambiar el valor. Una orientación vertical. Estoy seleccionando abajo. Le di el valor 150. Sí, esto es lindo. Ahora publica tu contenido, haz clic derecho y duplica una vez más, cambia la imagen. La selección con bajo orientación horizontal avanzada a la derecha. Cambiar este valor. Vamos a darle a 80, aumentarlo más, minimizar la barra. Y se puede ver esto. Quiero aumentar el espacio entre estas dos secciones. Entonces vamos a ajustar eso. Abra el contenedor padre. Brechas, estoy llegando a 60 por ambos lados. Así que minimizarlo. Como se puede ver ahora esta brecha se incrementa. Pero estas imágenes más se trasladan al sitio web. Entonces, vamos a sugerir que aquí estoy haciendo. Si llego a 50, esto es ahora mismo, es como esta imagen, haciéndola a -40. Sí. Entonces ahora estos son buenos. Haga clic en publicar. Ahora voy a usar el código aquí, seleccionar este contenedor de aquí, abrir la opción CSS personalizada. Vamos a pegar código CSS personalizado aquí. Entonces como pueden ver cuando pegué mi código, ahora esta imagen se mueve, voy a pegar este código dentro de esta imagen también Entonces como se puede ver lo hermoso que se ve esto ahora, como esta imagen. Bajo código CSS personalizado. Ahora publica tu contenido, minimiza esto. Como puedes ver lo hermosas están funcionando estas animaciones. Agreguemos también la animación dentro de esta sección. Entonces bajo pestaña Avanzadas bajo efectos de movimiento, voy a dar la animación a la moda en izquierda, igual con esto, lo mismo con este encabezado, lo mismo con este editor de texto, y también en botón Ahora da click en Publicar y para ver las previsualizaciones, da click sobre esto lo bonito y fácil que hicimos nuestra primera sección. Ahora vuelve. 30. Segundo contenedor: Entonces ahora comencemos nuestra segunda sección. Entonces estoy tomando esta estructura de dos columnas. Primero, voy a dar un color de fondo. Estoy escribiendo el código de color 060531. Le di a este color de fondo oscuro. Así que vamos a sólo este color. Aquí escribo, azul oscuro. Haga clic en Crear. Ahora, da clic en este ícono más, agrega imagen aquí. Elige tu imagen. Estoy tomando este, haz clic en Slack. Resolución de imagen completa en la pestaña Estilo. Esta imagen se ve tan grande, así que estoy haciendo que valga un 85%. Haga clic en el icono más, arrastrando el widget de encabezado En la pestaña Estilo. Código de color uno E seis, tipografía E F, tamaño familiar 218, peso 500, Tlicon En lugar de arrastrar un widget, vamos a copiar el texto de aquí Haga clic derecho y pegue. No quiero esta animación aquí, así que vamos a eliminar esto. Bien. Ahora vuelve pegando el título bajo etiqueta de estilo. Disminuyamos más el tamaño de la fuente. Entonces 39 está bien. Ocho para pegar publicar su contenido, haga clic en el icono más. Vamos a copiar a este texto y pegar aquí, eliminar la animación. Ahora haga clic en el icono más buscando la lista de iconos Witt y vea esto Va a pegar nuestro texto aquí. Simplemente voy a decorar a este artículo. Entonces estoy borrando este, así que para eliminar ahí, simplemente puedes hacer clic en este botón Cancelar. Y si quieres duplicar, así puedes simplemente dar click sobre esto para que veas si quieres agregar más ahora mismo, así simplemente puedes hacer click sobre esto. En primer lugar, vamos duplicar esto porque quiero mostrarte algo. Así que ve por debajo del estilete. Aquí hay un espacio entre. Sólo ve cuando pongo el valor. Entonces el espacio se incrementa aquí y la alineación a la izquierda debajo de los iconos, color que estoy eligiendo estoy escribiendo el código de color para decir AFF ocho. Entonces el color del icono se cambia de tamaño estoy haciendo 15, gap, cinco, alineacion horizontal. De esta manera, se puede ver que esta posición de icono está cambiando. Así que estoy haciendo centro de alineación vertical centro bajo texto opción color a blanco. Ahora vuelve y desde aquí, abre esto, y yo sólo voy a cambiar mi texto, abrir esto y pegar aquí texto aquí. Ahora solo copia este botón, haz clic derecho y pega. Eliminando la animación. Voy a dar margen ocho desde la parte superior. Ahora minimiza la barra, y esta sección también está lista, pero como pueden ver, aquí hay mucho espacio, así que no quiero eso. Vamos a disminuir eso. Seleccione este contenedor. Voy a mantener el valor a diez. Minimizarlo. Y si, ahora el espacio se disminuye, pero aun así aquí hay mucho espacio. Entonces para disminuir eso, seleccione este widget bajo Advancab desvincule el margen, y desde abajo, lo estoy haciendo Minimizar esta barra y C. Ahora esta brecha es suficiente. Ahora publica tu contenido. Ahora seleccione este contenedor en la pestaña Avanzadas. Aquí voy a dar la animación para que quepa en la izquierda. No, lo voy a dar para que quepa bien. Y a esta sección, voy a dar fed in left, publica tu contenido. Entonces esta sección ya está lista. Vamos a saltar sobre la tercera sección. 31. Tercer contenedor: Icono C plus. Estoy eligiendo esta primera estructura bajo Estilo ta color de fondo. Ya hemos guardado ese color. Aquí está en azul oscuro. Ahora solo haz clic derecho y copia. Haga clic derecho y pegue. Bajo Alineación de pestañas Estilo, haciéndola al centro, primer lugar, seleccione este contenedor padre, y desde aquí, altura mínima, mantengámoslo así. Cambia el contenido, haz clic derecho y copia. Haga clic derecho y pegue debajo de la alineación de tv de estilo al centro, haga clic derecho y copie, haga clic derecho en pegar. Bajo Estilo tap, antes que nada, quiero este texto en dos líneas. Entonces estoy usando la etiqueta break después de adentro. Asegúrate de que estás usando etiqueta Beak en la sección de textura si usas la etiqueta de rotura aquí Así que ese break ta se mostrará aquí como texto bajo Alineación de etiquetas de estilo al centro. Haga clic en el icono Com plus, arrastre un contenedor desde la dirección, convirtiéndolo en fila. Haga clic en el icono Com plus, arrastre un contenedor más. Haga clic derecho y duplique, haga clic derecho y duplique. Contenido justificado al centro del centro. Buscar cuadro de iconos. Este widget viene de la conexión del kit de elementos. De aquí está el tipo de icono. Puedes elegir aquí a ninguno, y desde aquí, puedes elegir icono. Aquí estoy eligiendo imagen. Así que ahora podemos elegir imagen. Seleccionemos esta imagen, cambiemos el título, cambiemos la descripción. Así que ve por debajo de la pestaña estilo, fondo tipo 0d15 6373 Entonces elijo este color. Ancho de borde, lo estoy haciendo por defecto. No quiero ninguna frontera. Radio fronterizo, estoy llegando a diez. Bajo contenido, aquí están los colores del contenido. Tan blanco. Y en Over, también quiero que sea blanco. Y a partir de la tipografía descripción de Poppins, vamos a darle su color a B uno, B uno, B uno De aquí, tipografía a tamaño popins, estoy haciendo 240. Y de icono, icono, color de fondo, dando código de color a fd86, b603 El color de fondo del icono es amarillo, y el tipo de borde a sólido, ancho de borde 22. No quiero ningún color de borde. Y radio fronterizo, estoy haciendo a 50. Ahora en hover, color de fondo, lo estoy haciendo a blanco sobre hover No quiero ninguna animación hover ni ninguna otra cosa. Ahora bien, aquí hay una cosa del espacio. Desvincula esto del valor del lado inferior, estoy dando 25 y acolchado 25 por todos los lados Y ahora se puede ver lo hermoso que es esto redondeado, y aquí hay un acolchado suficiente. No quiero hacer ningún cambio a partir de aquí. Ahora abre esta opción de superposición de fondo. A partir de aquí habilita la superposición. Si habilita la superposición de imágenes , puede agregar la imagen bajo el tipo de fondo flotante Ahora, como pueden ver, cuando coloco el cursor sobre esto, nuestra animación hover está funcionando desde la izquierda porque aquí se selecciona la izquierda, pero estoy haciendo que sea de abajo Así que ahora cuando pase el cursor sobre Ahora publica esto. Ahora lo haremos, clic derecho y duplicado, clic derecho y duplicado y ahora eliminar estos contenedores, hacer clic derecho y duplicar toda esta sección porque quiero las seis cajas aquí. Así que publica tu contenido. Quiero este color de fondo amarillo en toda la tarjeta. Así que vamos a cambiar esto. Sólo voy a cambiar el rumbo. 32. Cuarto contenedor: Entonces comencemos nuestra siguiente sección. Estoy tomando esta estructura, altura mínima a 750 bajo pestaña estilo, estoy eligiendo azul oscuro. Desplázate hacia abajo, haz clic derecho y copia, haz clic derecho y pega, cambia a más apretado Desplázate hacia abajo, haz clic derecho y copia. Haga clic derecho y pegue. Cambiar el título. Haga clic derecho y copie. Haga clic derecho y pegue. A partir de aquí después de la palabra bancaria, voy a usar etiqueta break. Como pueden ver, aquí hay mucho espacio. No quiero esto, seleccione su contenedor padre bajo diseño. Estoy haciendo la brecha cinco. Sí, ahora está bien. Ahora haga clic en el icono más, arrastrando un contenedor y dirección a fila Ahora haga clic en el icono más. Y aquí voy a arrastrar un contenedor más y hacer clic derecho y duplicar a este contenedor. Haga clic en el icono O más y arrastre un contenedor más y dirección a la fila. Sé que hay muchos contenedores. Haga clic en el icono O más, arrastre un contenedor más, haga clic con el botón derecho y duplique. Ahora selecciona este contenedor del lado izquierdo. Ir por debajo de estilo. Aquí voy a dar color de fondo, escribiendo el código de color cero d uno, Ahora, haga clic en CO más icono, arrastrando un encabezado, cambiar el título, tipo de cambio Alineación izquierda, color blanco. Familia Popons tamaño 18, peso 500, haga clic en CO más icono, buscando rumbo Voy a elegir este encabezamiento llaves rizadas una ETH. Yo se puede ver esta línea azul. No quiero que esto abra la opción separador y desde aquí, deshabilite esto. Vaya a la pestaña Estilo. Abra la opción de título para título. Voy a elegir el color para Overcolor blanco. Abre la tipografía, pop ins familiares, talla 15, peso 400 Ahora cierra esto, abre el título del foco para el color, escribiendo el código de color. Sobre coolor blanco. Tipografía, pop ins familiares, talla 15, peso 400 Voy a dar relleno aquí, así que seleccione este contenedor en la pestaña Avanzado, relleno desvinculado superior 25, derecha, e inferior 14, lado izquierdo 30 Entonces ahora nuestro texto se ve bien. Ahora solo haz clic derecho y duplica. Eliminar este contenedor. Ahora seleccione toda esta sección, haga clic derecho y duplique, haga clic derecho y duplique. Primero publica tu contenido. Ahora sólo voy a cambiar el texto. Ahora no te voy a explicar nada. Yo solo haré los cambios. Se puede ver esto o cosas. Ahora es como Descontenedor, bajo etiqueta de estilo de aquí frontera diez, ir bajo efectos de movimiento avanzados Estoy eligiendo fundido en animación izquierda, clic derecho y copia, clic derecho y estilo de pegar, clic derecho y estilo de pase. Ve por debajo de Advanced Tf, abre los efectos de movimiento. Aquí voy a elegir fade in right animation, ir bajo style tv, abrir la opción border, y border dus ten. Ahora haga clic derecho y copie, haga clic derecho y pegue estilo. Haga clic derecho y pase estilo. Ahora, seleccione este contenedor bajo gap, voy a hacer aquí cero, y ahora se puede ver que el espacio está disminuido. Nuestra sección lateral izquierda está lista. Ahora haremos nuestra sección lateral derecha. Copia a este encabezado y haz clic derecho y pega, cambia primero el título. Ahora ve por debajo de Estilo, abre la tipografía, talla 25, peso 500, ahora da clic en icono más y busca contador Aquí vamos a utilizar lementkit temporizador de cuenta regresiva, y se puede ver aquí son mucho diseño Entonces voy a elegir esto. Para que puedas ver cómo se ve. Ahora desplácese hacia abajo y abra la configuración del temporizador. Cambiaremos la fecha de vencimiento de la cuenta regresiva. Desde aquí, puedes elegir etiquetas personalizadas, y desde la siguiente opción, puedes elegir expirar Acción, todas las cosas que puedes cambiar. Ahora ve bajo la pestaña Estilo. Y a partir de aquí, voy a mantener la altura a 175. Ahora abre la opción días. Abre la tipografía, pop ins familiares, peso 500, de etiqueta color negro, abre la tipografía, pop ins familiares, peso 500 y tipo de fondo blanco del tipo de borde a sólido Brerclorblack. Desplazarse hacia abajo en general, tipo de borde a sólido. Así se puede ver este ligero borde. Ahora abre la opción Os bajo tipografía, pop ins familiares, peso 500, bajo etiqueta, abre la tipografía, pop ins familiares, peso 500, tipo de borde a sólido, color de borde a negro. Ahora desplácese hacia abajo en general. Tipo de fondo para escribir el código de color. Tipo de borde a sólido, ahora abre los minutos bajo dígitos, tipografía abierta, peso 500 bajo tipografía de etiqueta Tipo de borde a sólido, color de borde a negro en general, tipo de fondo escribiendo el código de color. Tipo de borde a sólido, ahora abre segundos, color a blanco, tipografía bajo tipografía de etiqueta Tipo de fondo a blanco, tipo de borde a sólido, color de borde a negro, desplazamiento hacia abajo y en general, tipo de fondo, código de color. Placa del tipo a sólido. Ahora el temporizador de cuenta regresiva está completo. Se puede ver lo hermosos que se ven estos. Ahora publica primero tu contenido. Ahora con icono más, arrastrando un contenedor, dirección a fila, contenido justificado al espacio de esa manera Ahora copia a este encabezado y pegarlo aquí, cambia el contenido. En la pestaña Stile, abra la tipografía. Ahora duplique a este encabezado, cambie el contenido. Ahora haga clic en el icono más. Estoy buscando barra de progreso. Voy a elegir esta barra de progreso. Primero, quita el título. No quiero esto. A partir del porcentaje, daré el valor a 70 y mostraré porcentaje, lo deshabilitaré y eliminaré texto interno bajo el código de color del toque de Stile Para el color de fondo, escribiendo el código de color desde la altura, lo guardaré a diez, radio de borde 50. No voy a cambiar nada de aquí, abrir el avanzado, desvincular el relleno, lado derecho 40, lado izquierdo, 40, ahora con más icono, arrastrando un contenedor Debajo de esto desde la dirección, elegiré remar el centro de contenido justificado, haga clic en el icono más, arrástralos edad. Estoy seleccionando esta imagen, clic en seleccionar resolución de imagen para sondear, clic derecho y duplicar. Derecha, haz clic y duplica. Una vez más. Ahora sólo voy a cambiar las imágenes. Ahora, todas las cosas están hechas ahora igual que este contenedor. Ve por debajo de la pestaña de estilo. A partir de aquí, elegiré el tipo de fondo, escribiendo el código de color. Ir por debajo de avanzado un desatando el acolchado desde la parte superior 40. Se puede ver aquí hay mucho espacio, así que vamos a disminuirlo. Selecciona este contenedor, bajo desgarro avanzado, enlaza el relleno y de lado derecho e izquierdo, lo voy a dar a 40. Ahora seleccione a este contenedor. Vamos a darle a la frontera. Ve bajo Desgarro de estilo, abre el borde, tipo de borde a sólido, ancho de borde a uno, color del borde, radio del borde a diez, pasa por debajo de lágrima avanzada, abre el efecto de movimiento. Entrada nusion encaja en la derecha. Ahora, hagamos nuestra tercera sección. 33. Quinto contenedor: Empecemos nuestra siguiente sección. Ir por debajo del título, darle un color de fondo. El código de color es azul oscuro. Ahora un pergamino hacia abajo. Voy a duplicar a este encabezamiento y pegarlo aquí. Cambiar el título. Ahora haga clic en el icono Com plus, arrastrando un contenedor, dirección a fila Haga clic en el icono Com plus, arrastrando un nuevo contenedor Derecha, haz clic y duplica. Ahora selecciona este contenedor del lado izquierdo. Contenido justificado al centro. Icono de ClioPlus, arrastrando widget de imagen. Elige tu imagen. Resolución de imagen a cuatro. Ahora da clic en el icono más, buscando barra de progreso. Voy a elegir Element barra de progreso de skit. Desde el estilo, puedes elegir cualquier cosa. Estoy eligiendo barra de sombra. Cambiar el porcentaje de título a 46 duración de animación 1,500. Pasar por debajo de Stitb códigos de color de tipo de fondo. Una altura a uno, radio de borde a cinco, relleno cero, desplácese hacia abajo y abra la pista. Tipo de fondo. Código de color ahora está abierto el título, color blanco. Tipografía pop ins, abrir el porcentaje, color a blanco, tipografía a pop ins, derecho Ahora solo voy a cambiar el contenido, color y el porcentaje. Así que hagámoslo rápido. A ahora seleccionar a este contenedor bajo huecos, voy a aumentar la brecha aquí 30, ir por debajo de Advancp desplazarse hacia abajo y abrir los efectos de movimiento Aquí voy a elegir fade in right animation. Así que vamos a aplicar la animación aquí también. Así que selecciona a este contenedor. Desplázate hacia abajo, abre los efectos de movimiento, aquí elige fade in left. Ahora publica tu contenido. 34. Sexto contenedor: Haga clic en el icono más. Altura mínima, me quedo con 800. Ve por debajo del DVASerUnlin el acolchado desde arriba 18. Haga clic en el icono más. Arrastraré tres contenedores. Bien. Así que ahora seleccione primero contener dirección a fila. Ahora haga clic en el icono O más, arrastre un widget de encabezado, cambie el título, vaya por debajo de la alineación de toque de estilo a la izquierda, color blanco, tipografía familia pop ins, con 500 Ahora ClickoPlusCon, arrastrando un widget de botón. Ahora cambia el título. Elija el icono del icono Biblioteca. Estoy buscando inserto BtqingLkon. Espacio de iconos en diez. Ahora ve por debajo de la pestaña Estilo, tipografía dos pop ins, peso 500 texto color a blanco código de color de fondo es el radio del borde a 50, desvincula el relleno, y estoy dando 20, 30, 2030 Ahora seleccione a este contenedor, justificó el contenido al espacio entre, alinee los elementos al centro, ahora haga clic en el icono Com plus, arrastrando un encabezado, escribiendo el título Ir por debajo de la pestaña de estilo, color de texto 201b, pop ins familiares, talla 15, peso 400 Ahora ve por debajo de la pestaña avanzada, desvincula los cinco primeros acolchados, diez a la derecha, ahora desplácese hacia abajo. Abra la opción de fondo. Desde aquí, el código de color es se puede ver que este color de fondo verde está separado. Así que ahora abre el diseño desde aquí, alineador para comenzar, ahora minimiza la barra Para que veas que también necesitamos darle el relleno desde la parte inferior. Entonces de abajo, voy a llegar a cinco. Seleccione este contenedor de aquí dirección a fila, haga clic en el icono com plus. Ahora arrastrando un editor de texto con él. Cambiar el título. Ir bajo toque estilo. El siguiente color también. Ahora ve a un tercer contenedor. Seleccioné este contenedor. Vaya bajo toque de estilo, abra el borde y, desde aquí, escriba borde para vincular el borde sólido con. De lado izquierdo y derecho, voy a dar a un pixel, color de borde. Le di este brerColorG bajo pestaña avanzada, relleno Ahora haz clic en el icono Com plus, busca mesa. Quiero tomar el widget de tabla del plugin Xp, así que no lo instalé. Así que vamos a instalarlo. Haga clic en el logotipo simental. Aquí hay una salida a Wordpress. Estoy abriendo en una nueva pestaña. Ve a plugins para agregar nuevo plug in, buscando Expro. Estoy instalando esto. Ahora activa este plugin. Así que ahora este plugin está instalado y activado. Ahora regresa, publica primero tu contenido y ahora vuelve a cargar tu sitio web Ahora busca tabla Widget, y voy a elegir esta tabla de expropluge Ahora aquí está serial. Se puede ver esto, cómo se ve. Ahora haga clic aquí. Ir a Estilo toque el color del texto a blanco. El código de color del tipo de fondo es. Ahora estoy cerrando esto, borrando a todo esto. Ahora solo duplique a esto. Ahora sólo voy a cambiar más apretado. A Ahora nuestro cabezal de mesa está listo. Ahora ve a la fila de la mesa. Aquí hay un comienzo de fila. A partir de aquí, voy a elegir remar, ir a color de texto SRA a blanco Antecedentes, lo voy a mantener demasiado transparente. Ahora cierra esto. Ahora voy a borrar a todo esto y simplemente lo duplicaré. Aquí hay una opción mediática. A partir de aquí, elegiré Imagen. Elige tu imagen desde aquí. Voy a elegir esta imagen, haga clic en seleccionar resolución de imagen para tirar. Los otros cambios los haremos en tan solo unos minutos. Ahora solo voy a cambiar el título primero. Queremos que la siguiente fila así lo haga, desplácese hacia abajo y duplique a esta sección de inicio de fila y muévala hasta el final. De esta manera, duplicar a todos Ahora cambia el título. Entonces nuestra mesa está hecha ahora. Cambié todos los títulos y las imágenes. Aquí está la alineación. Lo haré a la izquierda. Abre el cabezal de la mesa, y desde aquí la alineación, también la mantendremos al lado izquierdo. Ahora ve por debajo de etiqueta estilo tipografía familia pop ins talla 15. Estamos haciendo cambios en el sombrero de mesa y el color del texto a blanco, tipo de borde a sólido, desvincular el borde con Daré ancho solo desde parte superior e inferior como un píxel, color de borde. Ahora abre la opción de fila de mesa desde aquí, tipografía, pop en tamaño 14, y peso 2300 color de texto, blanco, e incluso color de texto, quiero mantener todo el texto en color blanco Aquí hay un color de fondo para impar, así que quiero mantenerlo demasiado transparente y color de fondo, estoy escribiendo el código de color para esto. Por lo que ahora se puede ver el color de fondo para el número par se cambia. Tipo de borde a sólido. En primer lugar, desvincula el ancho del borde, el color del borde para que puedas ver este ligero límite y la parte superior Y aquí están los medios de comunicación. Y voy a mantener el tamaño aquí 20. Ahora puedes ver que estas imágenes son pequeñas, y puedes elegir la posición. Lo voy a mantener al lado izquierdo. Sí, ahora todas las imágenes se ven bien. Ahora minimiza la barra. Y puedes ver lo hermosa que se ve nuestra mesa. Ahora ábrela. Ahora voy a aplicar aquí la animación. Seleccioné este contenedor bajo Avanzado, abra el eff de movimiento Aquí voy a elegir la moda en una animación. Para que puedas ver lo hermoso que está viniendo desde la parte inferior. Ahora publica tu contenido. Ahora esta sección también está lista, hagamos una siguiente sección. 35. Séptimo contenedor: Icono más icono, y de aquí, voy a elegir esta estructura, altura mínima a 550 pizza, ir por debajo de Estilo ta, color de fondo a azul oscuro. Desplázate hacia abajo desde el borde, el tipo de borde hasta el sólido. Aquí, quiero dar el ligero borde. Así que desvincula el ancho del borde. Desde la parte superior e inferior, elegiré un píxel o color de borde, código de color es E cinco. Ahora seleccione este contenedor, justificado contenido al centro. Haga clic en el icono Com plus, arrastrando la imagen. Elige tu imagen. Elijo esta imagen, haga clic en Cosletimage resolucion 24 Esta imagen se ve muy grande. Así que ve a una pestaña Estilo con el tiempo de mantener 85%. Ahora ven aquí, y voy a elegir copiar a este rubro, y lo voy a pegar aquí. De esta manera, copia a este encabezado, pegarlo aquí, pasar por debajo de estilo, alineación a la izquierda. Bien. Ahora copia a este widget de editor de texto y pegarlo aquí. Cambia tu título, ve debajo de la alineación del estilete a la izquierda. Ahora haga clic en el icono CO plus, buscando el icono Widget de lista. Lo estoy arrastrando aquí abajo. Ahora borra esta, cambia el texto. Cambiando el icono. Estoy buscando usuarios. Yo elijo éste. Da click en Insertar de esta manera, cambiando a este ítem. Ahora ve a Espacio de estilo entre 220, alineación a la izquierda y para icono. A Elijo este color para los iconos. Tamaño, me quedo con 30 Gap, diez, alineación horizontal y vertical al centro del centro. Abre el texto bajo tipografía, pop ins familiares, tamaño a 19, color a blanco Ahora voy a arrastrar botón, así que sólo voy a copiar el botón a esto y pegarlo aquí. Ahora solo cambia el contenido. Icono, estoy buscando descargas. Yo elijo éste. Haga clic en insertar. Sí, esto se ve bien. Así que seleccione a este contenedor, vaya a la opción de diseño. Estoy llegando a cinco y justificado contenido al centro. Ahora, seleccione este encabezamiento, vaya por debajo de Srta. Lo estoy haciendo alineación a la izquierda. Aquí hay un espacio muy menor, así que estoy seleccionando mi botón, voy por debajo de Avanzado, y a partir de aquí, voy a aumentar el relleno a 12. Entonces hagamos nuestra siguiente sección. Estoy eligiendo esta estructura. Vaya a la pestaña Estilo. A partir de aquí, voy a mantener el color azul oscuro. Seleccione uno de los contenedores. Entonces estoy seleccionando este contenedor, haga clic en el icono más, y arrastre un contenedor más aquí. Y altura mínima, estoy volcando a 350 píxeles. Vaya a la pestaña Estilo. Voy a dar un color de fondo aquí. El código de color es así que elijo este color, voy por debajo de la pestaña Avanzado, desvinculo el relleno, y desde la parte superior, doy 30 acolchados. Ahora, haz clic en el icono Com plus. Estoy arrastrando una imagen aquí, eligiendo la imagen. Yo elijo éste. Haga clic en Seleccionar resolución de imagen a cuatro, vaya bajo Ancho de inicio Me quedo al 40%, haga clic en el icono Com más, arrastrando un widget de encabezado, cambie los títulos Ir por debajo de arranque, alineación al centro, color a blanco, familia para aparecer. Bien, así que esto se ve bien. Simplemente voy a duplicar a este encabezado, cambiar el texto. Ir por debajo del color del texto del stater a y nosotros a 400 vamos por debajo de Advanced tintinear el margen y estoy dando dos menos diez Crontp ahora haga clic en Estoy buscando íconos sociales. A, en primer lugar, Facebook Twitter y YouTube. Quiero llevarme un ícono social más. Entonces estoy buscando Skype. Enfréntate y sirve Bien. Forma a círculo, ahora ve a Paso. Color a color personalizado y primario, lo estoy haciendo a transparente, tamaño a 20, y espaciado, lo estoy haciendo a 15. Haga clic en el icono Más de aquí, color primario para escribir el código de color. Ahora, cuando coloco el cursor sobre mis íconos sociales, puedes ver esto Por encima de la animación, elegiré buzz. Ahora cuando coloco el cursor sobre mi ícono social, puedes ver esta hermosa animación Ahora ve a avanzar posición estoy haciendo a absoluta y quiero orientación vertical hacia abajo. Ahora, no importa cuántas fontent escribas, íconos sociales siempre permanecerán en la parte inferior del contenido Ahora es un pergamino hacia abajo. Aquí está el trasfondo. Voy a dar color de fondo a los iconos sociales. Entonces bien, entonces ahora esta es nuestra tarjeta. Ahora voy a añadir un código CSS personalizado aquí. Entonces estoy seleccionando este contenedor, desplácese hacia abajo y abra la opción CSS personalizada y pegue su código aquí. He pegado mi código aquí. Ahora cuando pase el cursor sobre mi tarjeta, se puede ver este hermoso conjunto Quiero que sea redondeada. Entonces para esto selecciona tu imagen, y radio de borde, lo estoy haciendo 200. Así que ahora cuando coloco el cursor sobre mi tarjeta, puedes ver este hermoso efecto Ahora esto es más redondo. Puedes cambiar este color si quieres. Como aquí, puedes cambiar cualquier color, como si lo hago aquí amarillo, por ejemplo. Entonces ahora se puede ver que esto es amarillo ahora. Así que voy a regresar. Entonces ahora nuestra primera tarjeta es la carne. Ahora sólo voy a copiar a esta tarjeta. Ahora sólo voy a copiar y pegar publicar su contenido. Ahora solo voy a cambiar las imágenes y este contenido. Entonces hagámoslo rápido. Entonces ahora nuestras tarjetas están listas. Cuando pase el cursor sobre mi tarjeta, tal vez veas esta hermosa aleta Por lo que esta sección también está lista ahora. Ahora vamos a dar las animaciones a estas tarjetas. Entonces estoy seleccionando este contenedor, vaya por debajo de avanzado, abra el efecto de movimiento. Aquí voy a dar alimentado en izquierda. Aquí voy a dar moda en arriba. Y a esto también, le estoy dando la animación de desvanecimiento, y aquí voy a dar alimentado en la derecha Bien. Ahora publica tu contenido. Olvidé dar las animaciones aquí, así que hagámoslo. Efectos de movimiento a la moda en la izquierda. Y a esta sección, se lo voy a dar a la moda en la derecha. Entonces, bien, ahora estas secciones también están listas. Ahora vamos a ir más allá. 36. Contenedor octavo: Empecemos nuestra siguiente sección. Así que haz clic en el icono más. Estoy eligiendo esta estructura. Y a partir de aquí, ir al estilo. Color bground como siempre azul oscuro, ir a maquetación. Tiempo mínimo alto manteniendo a 75 pinsel. Haga clic derecho y copie, haga clic derecho y pegue. En el texto bajo estilo te alineación al centro. De esta manera, copia a este encabezado y pegarlo aquí, cambiar el título. Haga clic derecho y copie, haga clic derecho y pegue. Cambia el título, ve a permanecer en el centro de alineación, vuelve debajo del texto, desplázate hacia abajo. Después de la banca, estoy usando Break path. Sí, ahora el texto se ve bien. Desplácese hacia abajo y haga clic derecho y copie, haga clic derecho y pegue. En primer lugar, maquetación estoy eligiendo para alinear aquí cambiando el texto. Y buscándome, estoy eligiendo este ícono. Haga clic en insertar. Icono pone. Vamos a usar aquí éste. Haga clic en insertar. Icon additm, cambia el tenigrama tecnológico. Tomemos esta. Ahora ve al estilo Pasi haciendo aquí 50, alineación al centro. Ahora vamos a ir más allá. Haga clic en el icono C más, arrastre el contenedor aquí, dirección a la fila. Haga clic en el icono más, arrastre un contenedor, haga clic con el botón derecho y duplique. Ahora selecciona a este lado izquierdo, desde aquí, alinea los elementos al centro. Ahora, haga clic derecho y copie, haga clic derecho y pase, cambie el título vaya a Estilo, haciéndolo a 30 y camino a 500. Sí, publica tu contenido primero, haz clic en el icono Com plus, busca el formulario de contacto y estoy arrastrando este formulario de contacto Aquí hay una opción de etiqueta de espectáculo. Estoy deshabilitando esto. Quiero aquí una sección más, así que estoy duplicando esto, y lo estoy arrastrando aquí, y aquí elegiré teléfono y tipo dos, podemos hacerlo en Entonces ahora abre esta opción. Aquí puedes ver esto todas las cosas. Aquí está el botón. Estoy escribiendo aquí para mandar mensaje. Ahora ve a tap de estilo y Brecha de columnas, estoy haciendo a 25, brecha de Rose a 20. Ahora aquí está el margen, así que se lo estoy dando a diez de todos los lados, y no voy a cambiar nada de aquí. Abre la opción de campos, tipografía a pop ins familiares y tamaño a 15 y color marcador de posición, estoy haciendo que sea A partir de aquí, el color, lo estoy haciendo al blanco, y el color de fondo lo estoy haciendo a transparente. Ahora cuando escribo, así será el color de fondo transparente. Cuando alguien va a escribir algo, por lo que el color del texto será blanco, y el color de fondo será transparente. Y borde tipo dos sólido, borde con Tim haciendo a uno, y color de borde, hagámoslo a le doy este borde ligero y radio de borde a diez. Ahora, abre los avisos, pops familiares y abre el botón. Tipografía pop ins, o. color del texto ya es blanco, y el color de fondo, lo estoy haciendo a y el radio del borde a 50 ahora desatando Desde arriba, estoy haciendo 220, derecha, 25, inferior 20, e izquierda 25. Entonces ahora nuestro contacto a domicilio también está listo. Ahora selecciona este contenedor. Ir al sitio. Aquí estoy escribiendo el código de color. Bien, entonces esto se ve bien ahora. Ahora ve a Avanzado y de efecto movimiento, estoy haciendo que se alimente en izquierda. Sí. Ahora nuestro formulario de contacto se ve muy bonito. Ahora haga clic más icono, arrastre Imagen, eligiendo la imagen. Yo elijo éste. Resolución de imagen para engañar, ve a Sita. Esta imagen se ve muy grande. Así Ancho I haciendo 80% y altura a 350 piezas por defecto al objeto, ajuste a cubrir, seleccionar este contenedor Entonces ahora selecciona este contenedor y justificado contenido al centro, ve a avanzar, efecto de movimiento, encajar, derecho. Bien, entonces esta sección también está lista ahora. Ahora publícalo. Bien. Entonces ahora comencemos nuestra siguiente sección. 37. Noveno contenedor: Ahora hablemos de nuestra siguiente sección. Entonces estoy tomando esta estructura. Ir a Estilo. Color de fondo. Estoy haciendo un tubo. Ir a disposición y altura mínima a 300 pincel. Ir a adelantar desvincula la ropa de cama, y de la parte superior la estoy haciendo al 50 Ahora seleccione este contenedor, haga clic en el icono más, arrastre un widget de imagen aquí. Elige tu imagen, resolución de imagen a cuatro. Ahora, haz clic derecho y copia. Haga clic derecho y pegue, cambie el contenido. Ir a la alineación de estilo a la izquierda. Haga clic en el icono Com plus, buscando iconos sociales. Estoy arrastrando por debajo de esto. Tomemos un ícono social más, buscando interés. Ir a estilo color a medida. Color primario, estoy haciendo transparente y talla 15. Segundo clor, blanco, vaya al contenido, y quiero su alineación Sí, ahora se ve hermosa. Y radio fronterizo a 50. Y el icono al pasar el cursor para el color primario y el color secundario, hazlo en blanco Y sobre la visión, Bob. Ahora cuando terminé sobre mis íconos sociales, puedes ver lo increíbles que se ven estos. Ahora, se puede ver aquí hay mucho espacio. Así que ve a avanzar desvincula el margen. Y desde la parte superior, lo estoy haciendo dos -30 y selecciono este rumbo, es alineación También estoy haciendo a la izquierda. Ahora ve aquí, selecciona esta. Y ancho, estoy haciendo 20% y clic derecho y copia. Haga clic derecho y pegue, cambie el título. Categorías, ir a sentarse alineación a la izquierda. A partir de aquí, talla, estoy haciendo 20 y peso 600. Sí, ahora esto se ve bien. Ahora solo haz clic derecho y duplica, cambia el contenido. Qué es la UCI ir a la pestaña Estilo bajo tipografía tamaño me quedo 15 y peso 400 Sí. Ahora justo, haga clic y duplique. Derecha, haz clic y duplica. Derecha, haz clic y duplica. Una vez más. Sí, ahora solo cambia el contenido. Entonces ahora toda esta sección está lista. Ahora solo configura esto y haz clic derecho y duplica y elimina esta sección. Ahora aquí, solo cambia el contenido. Lo estoy haciendo rápido. Ahora es este contenedor, y aquí voy a mantener que valga la pena al 40%. Haga clic derecho y copie, haga clic derecho y pegue, cambie el contenido a newsletter, haga clic derecho y copie. Haga clic en el icono más. Estoy buscando formulario de búsqueda, y voy a utilizar esta búsqueda simple para. Aquí hay una piel. Puedes elegir el tth. Lo estoy manteniendo por defecto, y por favor sosténlo. Estoy escribiendo aquí. Y tipo que estoy haciendo al texto, y voy a escribir aquí. Tamaño, lo voy a mantener como 50 pixel. Ahora ve a la pestaña Estilo debajo de tipografía, pops familiares y color de texto, lo voy a mantener como igual Color de texto que estoy haciendo y color de fondo blanco ancho de borde, estoy haciendo cinco pixeles y el borde es de 50. Abre el botón, y la hoja pop ins, texto color blanco. Color de tierra, lo estoy haciendo al color azul. Y el código de color para eso es Ancho, hice 2.5. Bien, entonces ahora esto está listo. Pero estoy seleccionando mi contenedor padre bajo diseño. Quiero aumentar las brechas aquí, y estoy haciendo a 40 pixeles. Sí, ahora el espacio es suficiente. Ahora vamos a aplicar las animaciones en estas cuatro secciones, seleccione este contenedor en avanzado, efectos de movimiento para desvanecerse en la izquierda. Como este bajo desvanecimiento avanzado hacia abajo. Lo mismo aquí, desvaneciéndose animación. Aquí voy a elegir la animación de escritura de desvanecimiento. Ahora publica tu contenido. Todas las secciones ya están listas. Entonces veamos la vista previa. Puedes ver lo hermosa se ve nuestro sitio web Sí, todas las cosas se ven muy bien. Quiero darle el relleno aquí desde arriba. Así que ve aquí. Seleccione el contenedor pedante bajo desgarro avanzado del relleno. Y desde la parte superior, estoy ganando 50. Sí, 50 está bien. Y aquí hay una pieza muy menos. Así que vamos desde layout, estoy aumentando la altura mínima y como este contenedor bajo ta avanzada, estoy dando el padding desde arriba aquí 50 y bajo pestaña layout, aumentando su altura mínima. Entonces estoy haciendo que llegue al 550. Veo los cambios. Sí. Ahora aquí hay un espacio suficiente. Sí. Ahora esto se ve bien. Bien. Sí, ahora todo se ve perfecto. Bien, entonces nuestro sitio web se ve muy, muy bonito. Ahora haremos nuestro encabezado y pie de página en el siguiente video. 38. Encabezado y pie de página: El sitio web está listo. Ahora vamos a crear nuestro encabezado y pie de página. Ahora haremos nuestro encabezado. Entonces para hacer nuestro encabezado, antes que nada, crearemos nuestros menús. Así que haz clic en este logotipo nmental y sal a Wordpress. A partir de aquí, ve a apariencia a menús y dale nombre de menú. Puedes nombrarlo cualquier cosa como menú, mostrar la ubicación al menú principal y hacer clic en Crear Menú. Desde aquí, abra a este enlaces personalizados y escriba aquí, derecho, Hola a casa y enlace de texto a. Haga clic en al menú. URL aquí tiene características. Haga clic en en Menú. Ventas SL haga clic en AT Menu. Al lado de URN se da clic en en Menú. Entonces ahora nuestros menús están aquí. Si tus menús no están arreglados, así puedes arreglarlos. Bien, así que ahora da clic en Guardar Menú. Por lo que ahora nuestros menús están guardados. Entonces ahora lo que voy a hacer ahora da clic en Template tooth Builder. Ahora vamos a crear nuestro encabezado. Desde aquí, haga clic en encabezado, haga clic en Anu. Si tienes elemento de pros, así puedes insertar los encabezados desde aquí también. Pero no voy a elegir de aquí, así que solo cancela esto. Por lo que ahora da click en PlusCO y desde aquí, voy a elegir esta estructura Pasar por debajo de Estilo ta. Quiero darle un color de fondo así que Droove ahora clic en el icono más y arrastrando el widget de imagen eligiendo la imagen Voy a elegir esta imagen. Seleccione a este contenedor, justificó el contenido para centrar y alinear los elementos para comenzar. Y de esta manera, seleccione a este contenedor ahora, justifique el contenido para comenzar. Ahora haga clic en el icono más. Búsqueda de menús. Arrastraré este widget. sabes, ya hicimos el menú, así que aquí se muestran los menús. Ya no puedes sentarte. Entonces, antes que nada, vamos a cambiar su color. Así que ve a Sita texto color lo estoy haciendo blanco. Ahora se pueden ver claramente los cambios. Alineación, lo estoy haciendo al lado derecho. Aquí voy a aumentar la puja Bien. Entonces ahora mis menús están en una fila. Este punto de quiebre posivo, estoy eligiendo solo móvil. Pasar por debajo de Style te. Layout, estoy eligiendo Underline Center. Puedes ver que puedes explorar todos los diseños. Elijo el diseño Subrayar Centro. Ahora cuando pase el cursor sobre los menús, se puede ver esta línea rosa También voy a cambiar el color. Pero antes que nada, veamos los otros cambios. Abre la tipografía. Familia, estoy eligiendo pintas pop, y voy a mantener el tamaño a 50 Ya elijo el color del texto, y sobre quién, quiero los colores azules, así que estoy escribiendo el código. Ahora cuando coloco el cursor sobre, puedes ver que los menús están cambiando a color azul Y también quiero el color de la línea al color azul. Así que aquí pegué el mismo código. Ahora, cuando pase el cursor sobre mis menús, se puede ver este hermoso efecto, y voy a pegar el mismo color aquí Por lo que nuestros menús también están listos. Ahora voy a hacer un botón. Ahora voy a arrastrar el widget de botón aquí, así que busca botón. Arrástralo hasta aquí, cambia el contenido, ve debajo de la pestaña de estilo. A partir de aquí, haré color de fondo como transparente y borde a sólido, borde con un píxel, y color de borde a blanco. Bien, entonces estos cambios que hice aquí, afloje el contenedor, justificó el contenido al centro. Entonces ahora todo está en el centro. Nuestro encabezado ya está listo. Quiero hacer un encabezado pegajoso. Entonces, ¿cómo puedes hacer eso para eso?, selecciona este contenedor padre, ve a Avance, y desde aquí, haz clic en Motion Ificky elige arriba Puedes elegir las condiciones aquí como quiero encabezado pegajoso en todos los dispositivos, así que simplemente lo cambiaré. Ahora publica tu encabezado. Agregar condición todo el sitio, puede elegir anti. Lo guardaré en todo el sitio. Haga clic en Guardar y Cerrar para recargar su sitio, y podrá ver que nuestros menús están aquí Ahora puedes ver esto que nuestro encabezado es pegajoso y me desplazo a mi sitio web, así que nuestro encabezado es pegajoso. Ahora lo que voy a hacer, ahora voy a enlazar a los menús con las secciones. Entonces hagámoslo, vaya a Avanzado. Aquí tenemos que pegar nuestro ID CSS, y ese ID CSS, tienes que copiar desde aquí. Asegúrate de no estar copiando a este hash. Ahora ve a la página primaria ader y pega tu ID aquí. Bien, de esta manera. A Hola, chicos, así que vinculé toda la sección con estos menús. Entonces mira ahora. Veamos la vista previa. Y ahora ahora cuando hago clic en home, nos redirige a esa sección Bien. Ahora, hagamos nuestro Pie de Página. Entonces, para hacer pie de página a partir de plantillas, vaya a Theme Builder. Y aquí puedes ver el pie de página, dar clic en Pie de página, dar clic en Agregar Nuevo. Puedes elegir el pie de página desde aquí, pero no voy a hacer desde aquí. Entonces ahora hagamos nuestro pie de página aquí. Entonces estoy tomando esta sección. Dirección, lo estoy haciendo para remar bajo etiqueta de estilo, darle un color de fondo. Estoy escribiendo el código de color cero, uno, cero, cero, 25. Entonces le doy este color al fondo, voy a la opción de maquetación, y aquí voy a elegir el espacio entre Bien y alinear los elementos al centro. Ahora haga clic en el icono C plus, arrastrando un widget de encabezado, cambie el título Ir a Sa, alineación a la izquierda, color del texto blanco y tipografía pop in Talla, estoy haciendo 15, peso, 500. Ahora haga clic en el icono más. Estoy arrastrando un widget de imagen aquí. Bien, entonces escogiendo la imagen. Clic de resolución de sleftimage a ful seleccionando al contenedor padre Aquí, quiero aumentar la altura mínima. Lo estoy manteniendo a 120. Bien, entonces ahora nuestro alfarero también está listo. Ahora haga clic en Publicar. Puedes agregar la condición desde aquí. Estoy eligiendo sitio completo. Haga clic en Guardar y Cerrar. Ahora ve a tu sitio web. Cuando recargas a tu sitio web. Ahora desplácese hacia abajo, vea cómo se ve nuestro sitio web con usted. Entonces puedes ver aquí nuestro pie de página, lo hermoso que se ve. Ahora, veamos la vista previa. En primer lugar, vea nuestro encabezado y vea su sitio web. Nuestro sitio web ya está completamente listo. Para que puedas ver lo bonito que se ve nuestro pie de página. 39. Respposinve para tabletas y móviles: Hola chicos, así que vean aquí cómo se ve nuestro sitio web en el dispositivo tablet. Así que ahora vamos a crear nuestro sitio web, tablet responsive. Entonces seleccioné mi esta rúbrica. Hago la talla aquí 34. Entonces ahora esto está hecho. Ahora estoy seleccionando mi contenedor padre y voy bajo la pestaña Avanzadas desvincular el relleno, y desde arriba, estoy dando 50 píxeles desde la parte superior Ahora vamos a saltar aquí. Así que seleccioné mi imagen en la pestaña de estilo. Lo hago con 75%. Seleccioné esta imagen ahora bajo toque de estilo, 70%. Ir por debajo de la pestaña avanzada de aquí, orientación horizontal lo estoy haciendo a -30 y orientación vertical a 80 Ahora seleccione esta imagen bajo toque estilo con 70%, vaya por debajo de etiqueta avanzada, tubo de orientación horizontal, lo estoy haciendo a -50 y tubo de orientación vertical 100 Ahora selecciona esta imagen, bajo cinta estilo. Ancho hasta 70% bajo pestaña avanzada, orientación horizontal a cero píxeles. Orientación vertical, lo estoy haciendo a 160 píxeles. Bien. Entonces ahora esta sección está lista. Vamos a saltar más allá. En primer lugar, seleccioné este contenedor padre, y aquí estoy haciendo altura mínima a 500 píxeles. Seleccione este encabezado en la pestaña Estilo. Hago la talla a 27. Esta sección ya se ve bien, así que no necesitamos cambiar esto. Bien, entonces ahora vamos a saltar aquí. Aquí, el lado izquierdo ya se ve bien. Entonces ahora hagamos cambios en el lado derecho. Bajo altura de estancia, lo estoy haciendo a 100 Ancho, estoy haciendo 90. Seleccioné mi este contenedor bajo desgarro avanzado desde arriba, estoy dando 20 Bien. Estoy seleccionando mi disparen. Relleno, me refiero a cero. Voy a mantener su tamaño a 30 bajo la pestaña de estilo. Aquí también me mantendré a 30, seleccione esto bajo pestaña avanzada, relleno cero. Bien. Ahora vamos a ir más allá. Esta sección ya se ve hermosa. Ahora seleccione a este contenedor bajo desgarro avanzado, desvincule el relleno. Desde el lado derecho, estoy dando 20 y el lado izquierdo 20, Cleck este contenedor bajo desgarro avanzado, desvincula el acolchado, y desde el lado izquierdo, estoy haciendo hasta Sí, así que ahora esto está listo. Esta sección ya se ve bien. No necesitamos hacer cambios aquí. Ahora, ven aquí. Estoy seleccionando este rubro bajo Sita. Yo digo, vamos a llegar a 30. Ahora selecciona el contenedor padre, y aquí estoy haciendo 450. Deja que estos iconos sociales vayan por debajo del tamaño de estilo Estoy haciendo 15. Y el ritmo de ritmo, le di ocho pixel click a esta tarjeta y mínimo hi a 250, click derecho y copia, click derecho y click y Patyler click y pAtyler click y pAsyler click y copy, derecho y estilo P, click derecho y Patyle para que veas ahora nuestros guardias se ven Vamos a avanzar más ahora. En primer lugar, seleccione al contenedor padre. Yo guardo la brecha aquí cinco píxeles. Ahora selecciona a esto. Pasar por debajo del texto. Bajo tipografía. Estoy disminuyendo el tamaño. Vamos a mantenerlo a 15. Bien, ahora abre la opción de icono, y el tamaño que estoy haciendo a 25. Bien, entonces ahora estos se ven bien. Aquí, contacto, no necesitamos cambiar nada aquí. Ahora selecciona esta imagen. En la pestaña Estilo. Ancho, voy a hacer aquí al 100%. Bien, entonces ahora esto se ve bien. Esta sección también está lista. Seleccione este encabezado en la pestaña Estilo. Estoy haciendo su tamaño a 80. Hagamos aquí también 80 y aquí también, estoy haciendo 16 píxeles de tamaño así. Hagamos aquí un tamaño de 13 píxeles, haga clic derecho y copie y pegue este estilo en todo el texto aquí. Bien, entonces esto ya está listo. Esta imagen todavía no se ve bien, así que la estoy haciendo a 300 de altura, y a partir de aquí, escojamos portada. Bien, entonces ahora Imagen luciendo mejor. Para que puedas ver todas las cosas. Estas tarjetas se ven hermosas. No necesitamos cambiar. Nuestro sitio web está hecho tablet responsive. Ahora diseñaremos a nuestros menús. Entonces ahora diseñemos esto. Estoy seleccionando mi contenedor de discos, y lo estoy haciendo a ancho completo, vaya debajo del sitio. Voy a mantener el tamaño a 15 pixeles. Seleccioné mi contenedor reprimida, voy por debajo de Advanced te, desvinculo el relleno, y desde el lado derecho, lo estoy haciendo a 20 Ahora estoy seleccionando mi botón. Ir por debajo de la etiqueta de estilo, y de aquí, estoy haciendo tamaño para escribir y desvincular el relleno de lado superior, diez, diez abajo Lado derecho, estoy dando 15, lado izquierdo, 15. Entonces ahora todas las cosas se ven bien. Así que ahora nuestro sitio web se ve genial en el dispositivo tablet. Ahora vamos por debajo del dispositivo móvil. Pasar por debajo del dispositivo móvil. Así que ahora hagamos que nuestro sitio web a móvil sea receptivo. Así que ahora puedes ver aquí cómo se ve nuestro sitio web en el dispositivo móvil. Entonces esto se ve así. Entonces ahora vamos a hacerlo. Seleccione este encabezado, vaya bajo Estilo lágrima. Hagamos este tamaño a 30 píxeles. Bien, como este rubro bajo la lágrima Estilo, 13. Así que ahora selecciona esta imagen bajo Estilo lágrima. Estoy haciendo que cambie al 60%. Bien, así que ahora selecciona esta imagen. ¿Ya está listo? Y una estrella, de 22 píxeles. Otras cosas se ven bien. Seleccione este heady, debajo de la pestaña de estilo, tamaño dos, 25 pinzel Pero estas tarjetas se ven bien en nuestro dispositivo móvil. Entonces no necesitamos cambiar nada. Seleccione esta pestaña bajo estilo. Seleccioné este encabezado en la pestaña Estilo. Lo estoy haciendo de tamaño a 14 píxeles. Estas cajas se ven muy bien en el dispositivo móvil, así que no necesitamos cambiar nada. Hagamos algunos cambios aquí. Entonces estoy seleccionando esto, y voy a hacer 100. Altura, me mantendré a 20 margen inferior 90. Entonces ahora se ve así. Deja que a este contenedor, desvincule el relleno, y del lado derecho e izquierdo, lo estoy dando a 20 píxeles Ahora selecciona este encabezamiento. Disminuyamos su tamaño. Entonces estoy llegando a 25 píxeles. Esta imagen se ve muy grande. Entonces bajo Sita, hagámoslo al 80%, el dictainer holgado aumenta su altura mínima 650 Ahora este contenedor, vaya por debajo de t avanzado, y vamos a ocultar esta sección en el móvil. Así que abre esta capacidad de respuesta y escóndete en el retrato móvil, habilita esta opción, y ahora esta sección no se mostrará en el dispositivo móvil Por lo que ahora esta sección no se mostrará en el móvil. Esta sección se ve bien. Seleccione este encabezado bajo Toque de estilo, haciéndolo a 30, pero aún así es muy grande. Quiero hacerlo en dos líneas. Entonces sí, el tamaño de 26 píxeles está bien. Me gusta este texto y haciéndolo a 13 píxeles. Ahora, seleccione esta lista de iconos bajo SytPpeCE entre lo estoy haciendo a diez píxeles, y quiero disminuir su tamaño de Entonces abre el texto, y desde aquí, quiero hacerlo a 15 píxeles, y vamos a disminuir la altura de los iconos, haciéndola a 25 píxeles. Sí. Ahora bien, esto está bien. L este rubro bajo estancia lo estoy haciendo de tamaño a 25 pixel. Este editor de texto, hagámoslo de 14 píxeles. Estoy seleccionando este contenedor, este contenedor exterior, y 40 del sitio web. Ahora selecciona este carrito interior. Y a partir de aquí, mantendremos su altura mínima a 300. Alinea los artículos al centro. Bien, seleccione esta imagen. Y ancho estoy haciendo el 50%. Ahora, selecciona los iconos sociales underst size que estoy haciendo 18 pixel Bien, entonces ahora estos se ven bien. Bien, así que ahora puedes ver que esta tarjeta está lista. Bien. Así que ahora, haz clic derecho y copia. Aquí haga clic y pegue estilo, seleccione este contenedor exterior, copie a este contenedor. Ahora selecciona tu contenedor exterior y pega el estilo. Ahora selecciona copiar a iconos sociales y pastyle Pero puedes ver que no hay espacio entre las cartas Así que selecciona a este contenedor padre, y desde aquí, estoy haciendo gap 20 pixel. Ahora vamos a movernos aún más disminuirlo tamaño 30 pixel, seleccione esto, haciéndolo a este formulario de concurso se ve bien en dispositivo móvil a esta imagen, bajo estilo. Lo estoy haciendo 200%. Estoy haciendo su altura 220 píxeles y objetos para cubrir. Sí, esto está bien ahora. Estas cosas están bien, pero aquí hay demasiada brecha, así que este contenedor de aquí, estoy haciendo diez píxeles. Bien, entonces ahora estos ya se ven geniales. Por lo que ahora nuestro sitio web se hace móvil responsive también. Ahora hagamos receptivo a este menú. No quiero este botón, así que selecciona a través de este contenedor bajo Etiqueta avanzada, responsive, hide on mobile portrait. Bien, entonces ahora esta sección no se mostrará en el dispositivo móvil. Ahora, seleccione a este contenedor, convirtiéndolo en 30 píxeles. Ahora selecciona este contenedor, y vamos a convertirlo en un píxel t. Seleccione a este contenedor bajo diseño. A partir de aquí, voy a llegar al espacio entre ellos. Hemos completado nuestro sitio web para móvil y tablet responsive. Espero que hoy hayas aprendido algo nuevo. Gracias. 40. Primer contenedor Sitio web avanzado: Hola, chicos, así que comencemos a hacer nuestro tercer sitio web, que es el sitio web Avanzado. Entonces hoy, crearemos esta hermosa sección para que veas cómo están cambiando estas bellas imágenes, cómo se mueve esta pared, este texto degradado, este contenedor de degradado, todo lo hará muy fácil. Entonces, sin más preámbulos, empecemos a hacer nuestro sitio web. Entonces, antes que nada, instalaremos nuestro tema Astra, vamos a la apariencia a los temas. Entonces aquí ya está instalado el tema Astra. Sólo vamos a activarlo. Ahora estoy presupuestando esto. Ahora instalando nuestros plugins. Nuestro primer plugin es elementd Segundo plugin es expro Instálalo Ahora actívalo. Asume agregar nuevo complemento. Usaremos la versión Element Pro, haga clic en un plugin de Plot. Elija Archivo. Haga clic en una Parcela, haga clic en Instalar Ahora. Ahora activa tu plugin. Bien, entonces nuestros temas y plugins están instalados. Ahora vamos a serpientes nuestras páginas. Cancele el pop up. Titulo inicio, publicar, publicar. Haga clic en Agregar con Alimentor Cancelar el pop up. Entonces ahora comencemos. Estoy tomando aquí esta estructura. Altura mínima, me quedo 800 bajo Sita. El código de color de fondo es Estoy guardando este color. Bien, vaya a Avanzado a desvincular el relleno. Y desde arriba, estoy dando 100. Ahora, vuelve a la maquetación. Y en este sitio de corte, estoy manteniendo mi primera sección como ancho completo. Ahora estoy seleccionando este contenedor, y con un 40% de contenido justificado para centrar las líneas de pedido al centro. Haga clic en el icono más, buscando carrusel de imágenes Así que elige tus imágenes. Yo elijo estas tres imágenes. Haga clic en crear la nueva galería. Simplemente puedes borrarlo desde aquí, ok. Pero quiero agregarlo acto a Galería. Estoy guardando esta. Entonces puedes borrarlo desde aquí, bien. Y desde aquí, puedes agregar más imágenes si quieres. Así que ahora haz clic en Insertar Galería. Resolución de imagen a diapositiva completa para mostrar. Quiero una diapositiva ahora iconos de flecha anteriores. Yo no hago nada de aquí, así que ninguno. Haga clic en opciones adicionales. Reproducción automática, elegiré s, pausa al pasar el cursor, deshabilitando Se puede ajustar a todas las cosas. Velocidad de reproducción automática, estoy dando valor, y se puede ver ahora aquí es efecto, diapositiva es elegir, y por eso las imágenes se deslizan Y estoy eligiendo el efecto fade. Entonces ahora ve se puede ver que esto se ve bien. Bien, entonces ahora esto está hecho. Ahora ve a Toque de estilo. Radio de borde, estoy dando un radio de borde de 300 píxeles. Y ahora se puede ver que las esquinas están redondeadas por 300 píxeles. Ahora selecciona este contenedor del lado derecho con 60% ahora el ícono de KCN plus, arrastrando un encabezado, cambia el encabezado, ve al toque Estilo Texto color blanco, tipografía, tamaño, estoy haciendo 102 pixel y peso 900 Y puedes ver lo increíble que se ve este rubro. Ahora solo haz clic derecho y duplica a este encabezado, cambia el contenido. AI futuro, ir en el estilo y la tipografía, estoy haciendo su tamaño 120 píxeles Vaya a la pestaña Avanzado en la clase CSS. Clase CSS, agregué trazo de degradado. Desplácese hacia abajo, abra el código CSS personalizado. Voy a pegar aquí mi código. Pegué mi código, y puedes ver este bonito color degradado ahora haz clic en el icono Com plus, arrastra este widget debajo de este encabezado He pegado mi texto aquí, ve a Estilo toque texto color blanco tipografía Talla 15, pasar por debajo del contenido del texto, estoy usando aquí Breaking tag, publica tu contenido. Ahora haga clic en el icono más, agregando el contenedor y la dirección. Haga clic en el icono más, tome un contenedor más, a la derecha y duplique. Ahora seleccione este contenedor del lado izquierdo y ancho Estoy haciendo 60% dirección a fila, centro de contenido justificado y centro, y huecos estoy haciendo cero. Ir al inicio, Bground color Estoy haciendo negro. Ahora haga clic en el icono más, arrastrando un contenedor más y con 45%, vaya a Starter Tipo bgroun, estoy agregando una imagen. Haga clic en establecer resolución de imagen completa. Ahora haga clic en el icono más, arrastrando un encabezado hacia el lado derecho de la imagen Sí. Ahora solo cambia ir al estilo toque texto color blanco, talla 24, peso 900. Ahora estoy seleccionando este contenedor exterior, y estoy dando el borde. 20 píxeles bajo diseño. Le estoy dando la brecha aquí 20 pixeles. Por lo que ahora minimiza. Y aquí, ahora se ve bien. No necesitamos cambiar nada otro ahora selecciona este contenedor con 75%, da clic en el icono más, buscando lista de iconos. La arrastré hasta aquí. Voy a cambiar el título, pegar mi segundo título. Ahora voy a elegir el icono. Estoy eligiendo este icono. Insertar, abrir segundo, buscando cheque. Voy a elegir el mismo icono en todos los títulos. Ir al estilo. Se puede ajustar el espacio entre. Estoy manteniendo diez píxeles, alineación izquierda. Se puede agregar el divisor, abrir el icono, color blanco, tamaño 18, y hueco, voy a dar cinco píxeles, alineación horizontal, centro de alineación vertical, abrir el texto, abrir la tipografía Talla 15, peso, 300 y color que estoy haciendo blanco. Ahora estoy seleccionando este contenedor, contenido justificado y centro centro de líneas de pedido. Así que ahora minimice esto. Se puede ver que hay mucho espacio. Entonces voy a ajustar esto ahora, abrirlo, seleccionar este encabezado bajo la pestaña Avanzado, ling el margen, y desde abajo, estoy haciendo 55 pixeles. Y de esta manera, seleccioné este rubro bajo avanzado entregando el margen, y desde la parte superior, le di -30 Así que ve a Estilo bajo tipografía, altura de línea. Bien. Entonces ahora minimiza esto y la sección del lado izquierdo está lista. Estoy arrastrando este contenedor. Dirección fila, centro de contenido justificado y centro, y brecha que estoy haciendo aquí, cero. Ahora icono de Picom. Busco guardia de búsqueda. Estoy arrastrando esta parte de exprosearch. Maquetación, estoy eligiendo Clásico. También puedes explorar estas otras opciones. Marcadores de posición. Estoy quitando esto, y estoy escribiendo aquí. Pasar por debajo de Sita bajo tipografía, familia se abre y pesa 300 de ancho de muslo haciendo 1,000 de altura, 100 color negro Color de fondo, lo estoy haciendo blanco puro. Y en foco, no quiero hacer ningún cambio. Bien, entonces ahora el radio del borde 101 de todos, desvincula el relleno Y del lado izquierdo, lo estoy haciendo 50. Abra la opción de botón. Aquí, el color del texto, estoy haciendo negro. El color del texto es este. Entonces lo estoy haciendo negro. Y el color de fondo, lo estoy haciendo blanco sobre texto flotante, blanco, y el código de color de fondo es de tres CCC Ahora cuando pase el cursor sobre, se puede ver este hermoso efecto Tamaño del icono. Tamaño de fondo, lo puedes ajustar desde aquí de esta manera, desvincular el padding y desde el lado derecho, le estoy dando 40 pixeles Ahora ve a tecnología avanzada anling el margen y desde el lado izquierdo, estoy haciendo -200 Entonces ahora puedes ver que no podemos ver nuestra barra de búsqueda aquí. Entonces voy a dar el Zentax uno. Bien, entonces ahora puedes ver, y desde el lado derecho, estoy haciendo -20. Ahora clicKo más icono, arrastrando un contenedor aquí, dirección, fila, inicio e inicio, ve a Advancter me gusta aquí clase CSS, contenedor de ingredientes, scroll hacia abajo, y bajo opción CSS personalizada, y bajo opción CSS personalizada, estoy pegando Para que puedas ver esta hermosa vacante colores y puedes ajustar los colores desde aquí Bien. Ahora abre la opción de diseño, desvincula el margen, y desde la parte superior, estoy dando -55 Aquí puedes ver los contenedores degradados en la parte posterior de la barra de búsqueda. Entonces para eso, le daré uno a los valores del índice Z, ahora haga clic derecho y copie clic derecho y pegue a esta lista de iconos. Estoy borrando estos dos. Aquí estoy escribiendo el texto de relleno de texto, y el icono voy a usar aquí frío. Nosotros concertamos. Ahora ve a Tecnología de estilo bajo la opción de icono. Color, estoy eligiendo aquí negro. Abra el texto bajo tipografía y espere 900 y haga clic en color Ahora icono de ClickoPlus. Arrastrando un rumbo hacia el lado derecho. Yo bajo estilo tap x color negro, bajo tipografía, Cam the pop ins, tamaño, 15 pixel selecciono a este contenedor de aquí, estoy haciendo aquí inicio justificado contenido para comenzar porque quiero este rubro en la posición inicial Ahora haga clic en el icono más buscando contador, y estoy usando este contador termina el número dos y el sufijo de número Aquí voy a usar el sufijo K. Ve a Toque de estilo, posición de título. Entonces elegiré posición del título después si eliges antes, para que puedas ver ahora nuestro título está en la primera posición. Entonces estoy eligiendo la alineación horizontal del título como inicio y la posición del título como después y la posición numérica estoy eligiendo iniciar abrir el número. Color del texto blanco, bajo tipografía, pop ins y tamaño 70 píxeles y peso 900 y título bajo tipografía, pop ins familiares y tamaño 20 bajo desplazamiento avanzado hacia abajo, abra la Quiero este texto de juego trasero como color degradado. Así que vamos a pegar nuestro código aquí. En primer lugar, voy a cambiar los colores. A Esto está bien, creo, clic derecho duplicar. Entonces para eso, voy a usar un contenedor. Estoy arrastrando un contenedor aquí, y dirección voy a hacer fila Y estoy arrastrando este contador y arrastrándolo hasta aquí. De esta manera, voy a arrastrar este contador aquí, clic derecho y duplicar y huecos lo haré 30 pix arriba. Y a partir de aquí, estoy haciendo espacio entre. Bien. Y ahora sólo voy a cambiar el texto y los números. Entonces hagámoslo rápido. Bien. Ahora cuando se minimiza esto, pero hay mucho espacio, así que voy a disminuir este espacio holgura el contenedor. Estoy dando aquí 40 pixel gap. Bien. Ahora mira aquí al lado izquierdo. Haga clic en el icono más, y estoy tomando una imagen aquí, eligiendo imagen. Estoy seleccionando este , haga clic en Seleccionar. Pasar por debajo de Estilo con 85%. Ir por debajo de Stylta vincular el margen. Y desde el lado superior, estoy dando aquí -200 Bien. Y del lado izquierdo, 410 pixeles, aquí no puedo ver la pelota. Entonces voy a dar a Zyntax aquí como uno solo. Entonces ahora lo podemos ver. Ahora, pon la clase CSS aquí como ahora bajo la opción CSS personalizada, asegúrate de haber escrito la clase CSS correctamente. Entonces estoy copiando esta clase CSS y pegándola aquí. Entonces puedes ver ahora esta pelota se mueve porque hubo un error en mi clase CSS. Así que ahora publica tu contenido. Veamos la vista previa. Para que puedas ver lo hermosa esta nuestra primera sección se ve. 41. Segundo contenedor: Hola, chicos. Por lo que hoy, vamos a crear una segunda sección. Entonces comencemos. Altura mínima, estoy haciendo 800 pixel bajo pestaña estilo, color de fondo, gris oscuro. Bien. Ir por debajo de la pestaña avanzada, desvincular el relleno, y desde la parte superior, estoy dando 80 píxeles bajo la opción de diseño, voy a hacer esta sección bandeja Así que ahora el icono de ClickoPlus, arrastrando un encabezado, cambia el Bajo estrella Santa, voy a hacer este texto como color degradado, y voy a pegar el código para eso. Ahora familia pop ins peso 400 bajo clase CSS avanzado texto uno, desplácese hacia abajo bajo la opción CSS personalizada. He pegado mi código aquí. Bajo inicio, voy a dar el tamaño aquí 20 pixeles. Haga clic en copiar a este encabezado y pegarlo aquí. Yo usé aquí etiqueta de rotura bajo pestaña Estilo, centro de alineación, tipografía tamaño 65 fijador, altura de línea, estoy haciendo 70 pixel, ahora ve a Avanzado Estoy quitando este margen. Ahora ClickoPlusCon, arrastrando el contenedor, fila de dirección. Ahora el icono de ClickoPlus toma un contenedor más, haz clic derecho y duplicado, y Estoy seleccionando este contenedor bajo estilo, abra el borde y el tipo de borde a sólido, pero el ancho como tres píxeles y el color del borde Doy esta acuarela y estoy guardando este color. Y Radio de Borde 15 Píxeles. Ir a Opción Avanzada desvincula el relleno del top 50, inferior 50, y del lado derecho e izquierdo, doy 40 pixeles Ahora haga clic en el icono de KMplus, buscando el icono Box. Da click en icono y busca Estoy tomando el icono, con serp aquí voy a che apilar y dar forma como redondeada cambiar el encabezado Ir en la alineación de inicio a la izquierda y el espacio de iconos, estoy dando 30 por píxel. Abra la opción de icono. Color primario, estoy eligiendo el negro aquí y en otra vez, elegiré el color primario como el negro. Regresa y talla 35 pixel, abre la opción de contenido, color, puedes darle un color a tu título, así que lo estoy haciendo blanco y tipográfico de familia popping, talla 25 fijador Tipografía, pintas pop y talla 17 piza. Puedes ver aquí el color de fondo del icono es negro. Entonces quiero que sea degradado de color. Así que ve bajo Avanzado, abre la opción CSS personalizada, y voy a pegar mi código aquí. Así que puedes ver aquí color degradado bajo la opción de icono de pestaña de estilo. Color secundario, puedes cambiar el color del icono, así que lo estoy haciendo negro. Y on hop, me estoy haciendo negro. Lo estoy disminuyendo porque esto es muy grande. Lo hago 30 cerdos arriba. Ahora haga clic en el icono más. Buscando botón Widget. Estoy arrastrando este botón y cambiando la textura. Icono, buscando a la derecha. Vamos a elegir. Escojamos este RO, haga clic en concierto y posición de icono y espacio de iconos diez píxeles, vaya a Srta posición izquierda y tipografía pop en tamaño 17 pixel de texto, color de texto en estado normal, blanco, y color de fondo, lo haré puro transparente Entonces ahora esta sección está lista. Simplemente duplicaré esto y ahora borraré este slack este botón, y desde aquí, estoy dando el padding como pixel cero. Ahora sólo voy a cambiar el texto y los iconos. Así que vamos rápido. No estoy encontrando aquí ese icono que quiero. Entonces para eso, necesito una parodias de elemento plugin. Así que vamos a descargar esto. Ir a Plugins. Puedes ver aquí, me olvido de instalar ese plugin. Recarga tu sitio ahora. Entonces ahora si empiezo aquí, widget de búsqueda, si busco aquí buscar elementos, elegiré elegiré este tip y copiaré el estilo de pegar. Bien. Ahora publica, minimiza la barra. Bien. Quiero disminuir el espacio aquí, así que estoy seleccionando mi contenedor padre bajo avanzado desvincular el margen y desde abajo, estoy haciendo aquí -15, ¿de acuerdo? 42. Tercer contenedor: Hola, chicos. Entonces en este video, crearemos nuestra tercera sección. Se puede ver cuando recargo a mi sitio web. Para que puedas ver este hermoso efecto. Y cuando coloco el cursor sobre mi botón, puedes ver este hermoso color degradado Entonces, hagámoslo. Altura mínima, estoy haciendo un 650 pixel bajo styletap. Vamos a darle un color de fondo. Gris oscuro. Ahora icono de CliComplus agregando un contenedor aquí Lo estoy haciendo 630, vaya bajo toque de estilo, abra la opción de borde, tipo de borde a sólido y ancho de borde, estoy haciendo pre pixel, color de borde. Estoy dando radios decoloradas y fronterizas. Vamos a darle 15 píxeles desde todos los lados. Pasar por debajo de Manejo avanzado del acolchado. Desde la parte superior, estoy haciendo 80 píxeles, 90 inferiores y 60 píxeles a la izquierda. Ahora PC plus icon, y estoy copiando este encabezado, pegarlo aquí. Bajo avanzado, antes que nada, voy a quitar los márgenes y bajo alineación de inicio, alinear a la izquierda, clic derecho y copiar pegar, ir bajo pestaña Estilo, alineación izquierda, abrir la tipografía No quiero hacer ningún cambio, vaya debajo de la pestaña de contenido y voy a usar la etiqueta Pre aquí de esta manera. Ahora, copia a esto, pegarlo aquí, antes que nada, quitando el margen. Pieza al título aquí. Estoy seleccionando texto aquí, y aquí estoy usando la etiqueta Baking, vaya debajo de Sitab, abra la tipografía Voy a quitar esta altura de línea, ir por debajo de tamaño avanzado estoy haciendo aquí 18. Bien. Ahora, da clic en el icono de las, agregando un contenedor aquí. Voy a tomar este contenedor aquí, dirección, fila, inicio de contenido justificado y centro de líneas de artículos. Estoy haciendo aquí 60% de ancho ahora haga clic en el icono más. Sólo estoy duplicando esta lista, clic derecho y copia, clic derecho y pegar Yo sólo voy a cambiar el texto. Buscando icono. Ahora estoy buscando video. Tomemos esta . Haga clic en Concierto. Estoy usando esto ir debajo Sitab aquí estoy haciendo espacio 15 pixel, abro la opción de icono, tamaño estoy haciendo 20 y gap ten pixel, abre la opción de texto, tamaño estoy haciendo 17 pixel y peso 500 y color blanco Sólo peguemos el código aquí. Enrolle hacia abajo. Ahora solo haz clic derecho y duplica a la sección. Y estoy cambiando el texto. Aquí estoy aumentando la brecha. Aquí me quedo con una brecha de 70 píxeles. Así que ahora vamos a crear nuestro botón impresionante. Vamos a crear eso. He tirado mi botón aquí Vamos a crear el botón impresionante. Así que mascota estoy escribiendo aquí título, crea un video de IA gratis. Aquí voy a elegir el icono. Tomemos este icono y coloquemos debajo de la pestaña de estilo, abrimos la tipografía, pop ins familiares y tamaño 15 muelle, peso, estoy haciendo 600 texto de color, vamos a hacerlo negro Radio de borde 15 pixer desvincula el relleno desde arriba, voy a dar 25, derecha, 30 pixel, inferior 25, e izquierda Bien. Ahora ve a avanzar. Voy a hacer el fondo degradado. Por eso no le di ningún color al fondo. Estoy dando el margen desde parte superior y el píxel, scroll hacia abajo, y bajo la opción CSS personalizada, estoy pegando mi abrigo para darle un color degradado Ahora mira aquí cuando coloco el cursor sobre mi botón, lo hermosos que se están moviendo estos colores, este botón se ve realmente increíble Me gusta mucho. Haga clic en el icono Com plus. Estoy arrastrando un contenedor. Estoy haciendo su ancho 15% y fila de dirección haga clic en el icono Com plus, y estoy arrastrando widget de imagen aquí Resolución de imagen completa. Vamos a elegir la imagen. Este, Ir por debajo Estilo de tiro ancho de grifería, ancho máximo de alberca y altura de llanta haciendo 420 píxeles. Ajuste de objetos como cubierta, vaya por debajo de avanzado. Ahora voy a dar el margen aquí. Entonces, antes que nada, desvincula el margen. Desde la parte superior, estoy haciendo 120 y desde el lado izquierdo, hagámoslo 301 pixel. Ahora ve a Toque de estilo. Quiero darle una frontera. Hagámoslo frontera de diez píxeles. Arrastremos otra imagen. Elige tu imagen. Este, CslectigerSolution, polo bajo estilo dag ancho la estoy haciendo uno 50% y ancho máximo uno 30% y alto 550 pixeles y ancho de objeto cubrir bajo tiempo avanzado, Y desde la parte superior, estoy dando 55 píxeles y desde el lado izquierdo menos 250, vaya a la pestaña Estilo. Vamos a darle un borde también de diez píxeles. Bien, ahora esta sección se ve muy bien. Ahora da click en Publicar, estoy seleccionando esta imagen. Apliquemos las animaciones aquí. Vamos a aplicar aquí, desvaneciéndose a la derecha y duración de la animación estoy haciendo lenta Bien, y lo mismo con esta imagen, pad en derecha y lenta Bien, ahora publica. Entonces puedes ver que se ve muy bien, ¿verdad? Se puede ver lo hermosa que se ve esta pared. Aumentemos la brecha aquí, volvamos bajo la pestaña Avanzadas, desatando el relleno. Desde arriba, estoy haciendo 30 píxeles. Ahora publica tu contenido. 43. Cuarto contenedor: Hola chicos, en el video de hoy, vamos a crear esta sección. Se puede ver este bonito fondo degradado. Y cuando coloco el cursor sobre mi imagen, esto está rotando, ¿verdad Así que vamos a crearlo. Estoy eligiendo esta primera estructura y altura mínima, estoy haciendo 950 pixeles. Ir por debajo de estilo Ahora voy a dar fondo degradado. Estoy eligiendo degradado y color, vamos a darle puedes establecer la ubicación así de esta manera. Bien. Estoy haciendo 30% de ubicación de mi primer color y segundo código de color. Entonces le doy este color. Se puede ajustar la ubicación del segundo color, y lo estoy haciendo 50%. Bien. Desde aquí, puedes ajustar el ángulo de esta manera, y puedes elegir el tipo si elijo radio aquí para que puedas ver. Y de esta manera, cuando eliges así, puedes ver cómo se comportan estos colores Entonces estoy eligiendo la posición arriba a la derecha, vaya por debajo de la pestaña Avanzadas, desvincule el relleno, y desde la parte superior I 60 pixel, ahora icono Picom plus, y copiando a este encabezado, pegándolo aquí bajo el centro de alineación de estilo Y copia a este encabezamiento, pegándolo aquí y cambiar el título da rienda suelta a tu creatividad Bajo Estilo tap alineación centro, estoy haciendo 800, anling el margen desde la parte superior, estoy haciendo -15 ahora PC plus icon, arrastrando este widget de imagen Vamos a elegir esta imagen, haga clic en Conslectimage resolution full under style tab, border radio, estoy haciendo 30 pixel bajo pestaña Advanced, abre la opción de transformar, y al pasar el mouse, estoy dando el valor de rotar como uno, y ahora coloco el cursor sobre mi imagen, para que veas que nuestra imagen para que veas que nuestra imagen Estoy copiando a mi búsqueda ba, pegándolo aquí. Ir por debajo de Sita, Ancho Estoy haciendo aquí 600 y altura 70 color de texto, estoy haciendo blanco y color de fondo estoy haciendo Negro abre la opción de botón. Aquí no voy a hacer ningún cambio. Quiero hacer algunos cambios aquí, volver atrás, abrir la opción del botón. Estoy quitando el acolchado. Bien. Y al flotar, voy a hacer que sea de color negro puro Así que ahora, cuando pase el cursor sobre esto, sí, se ve bien ahora Entonces ahora este pad de búsqueda también está listo, ahora publícala y ve la vista previa. Quiero aumentar el espacio aquí. Así que selecciona esta imagen. Nling el margen y desde parte superior estoy haciendo 20 pixel, minimizarlo. Creo que deberíamos necesitar más espacio. Bien. Ahora publícala. Así que sí, 44. Quinto contenedor: Hola chicos, en el video de hoy, haremos esta sección. Aprenderemos a hacer estos botones geniales. Y cuando coloco el cursor sobre mis íconos, puedes ver lo hermoso que se ve esto Entonces comencemos. Empecemos ya nuestra siguiente sección. Estoy eligiendo esta estructura. En la pestaña de estilo, quiero tomar el fondo degradado. Entonces primer color, estoy escribiendo el código de color. Incrementar su altura mínima. Se puede ajustar la ubicación de esta manera así. Estoy haciendo 55%, y para el segundo, el código de color es ocation estoy eligiendo 80% tipo posición de radio, vamos a hacerlo arriba a la derecha Puedes explorar las otras opciones. Espero que entiendas, ve a Avanzado, desatando el relleno y desde la parte superior 60 pixel, 790, ve a Style tech Estoy eligiendo esta posición de imagen, centro centro, Attachmentrow, repetir, no repetir, pantalla tamaño cubierta Quiero agregar algo de texto, así que haga clic en el icono de Coplus, arrastrando widget de encabezado Ir a Centro de alineación de tecnología Style. Talla 30 y peso 500, estoy duplicando este rubro, pégalo aquí, cambia el texto Acude a Syla 35 y pesa 700. Estoy quitando este valor de altura de línea. Estoy quitando este margen, copia a este encabezado, pégalo aquí, cambia el contenido. Ir a Srta. Estoy haciendo 600 y talla 22. Ahora seleccione a este contenedor bajo diseño. Contenido justificado, estoy haciendo y para que puedas ver centro de líneas de pedido Estoy buscando espaciador. Si quieres espacio en cualquier lugar, así puedes usar este widget. Estoy haciendo su valor 35 pixel. Ahora haz clic en el icono de Coplus, buscando botón y ahora voy a usar este botón de plugins pro, cambia el texto aquí Centro de alineación, vaya al arranque con, hagámoslo 150 y bajo tipografía Poppins tamaño 15, x color blanco, y color Y al pasar el cursor el color del texto negro y el color de fondo, cuando coloco el cursor sobre mi botón, para que puedan ver Esto se ve bien, pero quiero hacerlo más atractivo. Cuando hago clic en esto, puedes ver aquí hay diferentes tipos de animación cuando eliges dos D, así puedes elegir tipos de animación desde aquí y hay mucho fondo que puedes elegir de aquí. Único, puedes elegir. Para que pueda ajustar según su elección. Quiero que sea de tipo animación, flip side. Entonces ahora, cuando coloco el cursor sobre mi botón, para que veas que esto se ve muy bien Tipo de borde, quiero que sea sólido, pero el wd, un píxel, y el color del borde. Pero el radio 50, relleno 20 arriba botón es dady ahora Ahora haga clic en el icono más y suelte este botón dentro del contenedor. En primer lugar, la dirección de esta fila de contenedores centro y centro. Brechas entre botones, estoy haciendo 30 píxeles. Ahora arrastra aquí este botón. Y duplicarlo una vez más. Ahora solo cambia el texto instantáneo y aquí podrás ver nuestro texto no es claramente visible en esta imagen. Así que seleccione descontinuado, vaya a la etiqueta de estilo, abra la opción de superposición de fondo. Aquí estoy agregando imagen. Yo elijo este fondo. Elijo esta imagen como superposición. Puedes ver aquí hay una capa negra en la parte inferior. Y ya se puede ver que nuestro texto es claramente visible, pero para hacerlo más thar, podemos aumentar su opacidad, así que lo estoy haciendo 0.72 Bien, para que puedas ver ahora nuestro texto es claramente visible así como la imagen también. Ahora seleccione a este contenedor, vaya a Avanzado, relleno 30 desde todos los lados, haga clic en el icono más, haga clic derecho y copie y pegue este encabezado aquí, cambie el texto. Voy a aumentar el tamaño 45 y el peso 900, copiar a este widget editor de texto. Y pegarlo aquí, cambiar el texto, ir a Sita. Es color. Estoy haciendo. Bajo tipografía tamaño 16 píxeles y peso 500. Haga clic en el icono más, arrastrando un contenedor, fila de dirección buscando widget de icono Arrástralo aquí. Elegir icono Ida y yo elijo este icono y ver pila forma redondeada. Ir a Sita, color primario elijo este color transparente claro y color secundario blanco y sobre color secundario negro cuando coloco el cursor sobre, que puedas ver, ve a Avanzado desde aquí, clase CSS, estoy agregando ícono de cursor de gradiente Opción CSS personalizada. Estoy pegando mi código. Así que ahora cuando termine sobre mi icono, así se puede ver fondo degradado. Ahora copia, ahora duplica este icono. Ahora solo cámbialos. Bien, ahora da clic en el icono más. Arrastre el widget de imagen, elija la imagen. Vamos a darle un borde de 15 píxeles, copiando este botón y pegarlo aquí. Ir a Avanzado y margen desde la parte superior, doy -55. Ahora se ve bien. Ahora, seleccione a este contenedor, vaya a Ser underber default solid, border radius 20, and border color this Ahora puedes ver que no hay hueco, así que selecciona al contenedor padre, enlaza huecos de 40 píxeles. Para que veas que esta sección también está lista ahora. Vamos a darle frontera aquí también, tan bueno. Así que underber lo hacen también 20 píxeles. Bien. Publica tu contenido y veamos la vista previa. Cuando pasas el cursor sobre, así podrás ver lo hermoso que se ve esto, ¿verdad 45. Sexto contenedor: Hola, chicos. El día de hoy realizaremos esta sección. Se puede ver lo hermosas que están alineadas estas tarjetas. Nos da tres defectos. Se ve muy bien. Entonces comencemos y hagamos esta sección. Entonces estoy tomando estructura de dos columnas y altura mínima voy aumentando de esta manera, ir por debajo de estilo. Estoy eligiendo esta posición de imagen, centro centro adjunto, scroll, repeat, no repeat, display size, cover, copy to this heading, pegarlo aquí. Copia a este encabezado y pegarlo aquí, cambia el contenido, pega tu contenido aquí. Estoy usando dita aquí después de cinco palabras. Ve por debajo Alineación de estilo, talla izquierda me quedo con 60. Haz que este encabezado también se alinee a la izquierda. Ahora duplica a esto, copia a esto y pegarlo aquí, copiar a botón. Pégalo aquí, vaya bajo la etiqueta Avanzado, elimine este margen. Voy a dar aquí -15. La sección lateral izquierda está lista. Ahora vamos a saltar de este lado derecho. Buscando carousol, arrastre aquí este carousol mediático. Puedes elegir la piel como cuando eliges ahora se selecciona arousol, y cuando eliges la presentación de diapositivas, ahora puedes ver de esta manera Y cuando eliges flujo de cobertura, puedes ver las imágenes así. Entonces elegiré la piel aquí, cubriré el flujo y elegiré las imágenes y eligiendo esta, abriré el ítem dos. Puedes dar el enlace aquí también. Ahora estoy eligiendo este ítem tres, slides per view, two, and slides to scroll five and height I will keep 520 width I'm making it 100%. Pasar por debajo de Sta. Se le puede dar el espacio así, pero lo estoy haciendo cero, ancho de borde tres píxeles, radio de borde 50, color de borde, lo estoy haciendo Abrir la etiqueta de navegación. Navegación son estas flechas. Ya se puede ver que está en negro, pero lo estoy haciendo blanco. Si no quieres estas flechas, así podemos desactivarlas desde aquí. Flechas, TagNannne. Bien, así que haz una pausa, estoy desactivando esta opción. Entonces de esta manera, diseñé para que esta sea nuestra caruse mediática Estoy habilitando estas flechas opción. Podemos desplazarnos hacia el lado derecho o hacia el lado izquierdo. Entonces creo que esta es una buena opción, así que nunca la hice. Bien, entonces ahora esta sección también está lista, pero estoy seleccionando este contenedor y justificado contenido haciéndolo centro. De esta manera, seleccione a este contenedor, centro de contenido justificado. Entonces ahora esta sección también está lista. Después de hacer cualquier cosa, no olvides dar click en Publicar Burton. Veamos ahora la vista previa. Por lo que esta sección también está lista. Quiero hacer un hueco aquí, así que hagámoslo correctamente bajo pestaña Avanzado, voy a dar el relleno aquí desde el sitio inferior. Bien, ahora publica. Y veamos aquí. Bien, entonces ahora esto se ve bien. Se puede ver lo hermoso que se ve bien esto. 46. Séptimo contenedor: Oigan, chicos, en el video de hoy, haremos esta hermosa sección testimonial. Entonces comencemos. Ir a Brecha de estilo. Degradado de tipo de fondo. Ocation 40% y segundo color. Y ubicación 70% y ángulo estoy haciendo aquí 165. Bien. Ahora, copiar, pegar, copiar y pegar hazlo galope, cambia el texto Bueno bajo pestaña estilo, tamaño 65, hazlo centro para seleccionar el contenedor padre bajo pestaña Avanzado, relleno, estoy dando prompt top site 50 pixeles, buscando testimonia pega tu texto aquí De esta manera, estoy borrando estos dos ítems y duplicando éste Cambiar la imagen. Aquí me llevé tres artículos. Vamos a duplicarlo. Tomé cuatro artículos aquí y piel intestinal, así se puede ver con wel, posición de imagen que estoy haciendo a la izquierda, alineación izquierda, diapositivas por vista, dos, pero hagámoslo al 100% bajo opciones adicionales. Flechas, lo estoy deshabilitando , taginationn. Bien. Ir por debajo de estilo toque ritmo entre estos 30 y el color de fondo, se puede ver el color de fondo. Estoy haciendo radio negro y borde, estoy dando 15 pixel. Puedes ver aquí la botella. Relleno 30, abre la opción de contenido, hueco, 25 fijador, color de texto Estoy haciendo negro, y talla estoy haciendo 250 y gap 15. Esta es la brecha entre la imagen y este texto. Para que puedas habilitar la frontera, así. Puedes darle la frontera, pero yo no la quiero, así que la estoy deshabilitando. Borde hacer diez píxeles, abra la opción de burbuja ahora. Entonces le estoy dando el color aquí. Desvincula el relleno de la parte superior, estoy haciendo 30, derecha, 25, inferior 20, y lado izquierdo, 25, y el radio de borde 15 piserve aquí, estoy habilitando el Color de borde, estoy haciendo blanco y ancho de borde dos piserve Ahora abre la pestaña de contenido y el color del texto estoy haciendo blanco Ahora seleccione a este contenedor padre. Y aumentar la altura mínima, cifra 665. Publica tu contenido. 47. Ocho contenedor: Hola, chicos. Entonces en el video de hoy, haremos esta hermosa sección. Para que puedas ver lo hermoso que se ve el Tami. Cuando abro esto, puedes ver cómo se cambia el color del texto. Se cambia el color de fondo. Esto se ve bien. Entonces comencemos a hacerlo. Estructura de dos columnas, altura mínima de esta manera. Pasar por debajo de arranque. Tipo de fondo. Imagínese elegir esto. Se puede ver que esta imagen se repite. Así que no se repite, cubierta de tamaño de pantalla, posición de desplazamiento, centro central. Bien. Haga clic en más con, arrastrando un widget de imagen Elige tu imagen. Éste. Ahora, la sección correcta, hagámoslo rápido. Entonces copia a este pasado copia a esto, pega esto, cambia el título. Estoy usando breakdan aquí después de la palabra perfecta bajo la pestaña de estilo Tamaño 54 píxeles y 900 altura de línea, 60 píxeles, haga clic en el icono más, buscando Acordeón Entonces estoy usando este kit de elementos, widget de acordeón, abre esto, cambia tu más apretado, pégalo descripción Si deshabilitas esto, todas estas diapositivas se mostrarán así. Y si habilitas esto, entonces la primera diapositiva siempre se abrirá la segunda diapositiva, cambia el texto, pega mi descripción. Estoy borrando esto y duplicando a esto y estilo que estoy eligiendo aquí, light go Mira aquí, qué hermoso se ve esto. Ahora ve a Tipografía Sitab, Poppins. No necesito cambiar la talla, color blanco. Radio de borde 40 píxeles, desenrollando el relleno superior 20, inferior 20, e izquierda 35, y margen inferior de esta manera, se puede ajustar así que lo estoy haciendo diez, abre la descripción Así que el color se puede cambiar la descripción que estoy haciendo blanco. Y la familia pop ins color de fondo como este y dando al borde 40 píxeles, abre la opción de borde. Entonces esto también se hace. Quiero hacer una cosa aquí, abrir la opción de título, y cerrar, quiero el color en negro y color de fondo Así que cuando cerramos la pestaña, el color es negro. Y cuando abrimos la pestaña, se puede ver este color azul. Entonces se ve bien. Y en el radio del borde del libramiento, también quiero ir a él 40 pixel Bien. Por lo que esta sección también está lista. Ahora, seleccione este contenedor padre. Tapas 60 píxeles, bajo avanzado, desvincular el relleno, y desde la parte superior, estoy haciendo 50 píxeles Slack a este contenedor y centro de contenido justificado. Ahora publica tu 48. Noveno contenedor: El video de hoy, haremos tabla de precios. Para que puedas ver cómo se ven estas hermosas. Entonces, sin más preámbulos, comencemos. Aumenta la altura mínima bajo Etiqueta Estilo. En la etiqueta Avanzado, 50 relleno desde la parte superior, copia esta Pegar. Ahora icono más icono, Dagging a container, direction row Haga clic en el icono C más. Arrastré un contenedor más. Ahora duplícalo, ve a Color de fondo SDA. Abra la opción de borde, valor predeterminado es sólido y el borde con tres. Pero el radio 15, pixel, van por debajo del advancer, manejando el relleno y desde arriba 40, derecha, 45, abajo 50, e izquierda 40 Ahora icono de lConpl, arrastrando tu widget de encabezado. Ve por debajo de la alineación de Srta, y y la placa de color del texto bajo puntos de tipografía para mostrarte claramente, primer lugar, lo estoy haciendo blanco Haremos negro más tarde, tamaño 12 pixel y transformaremos mayúsculas. Bien, ahora ve por debajo de la etiqueta avanzada, desvincula el relleno del top ten, derecho, el 15, el diez inferior y el 15 izquierdo Abre la opción CSS personalizada, más allá de mi código aquí para que puedas ver el fondo degradado. Ahora abre la opción de maquetación y línea auto que estoy haciendo y ya puedes decir. Ahora ve a la pestaña Estilo y color del texto Estoy haciendo negro. Entonces mira aquí ahora, esto se ve bien. Ahora, haga clic en el icono más y tomando un contenedor debajo este encabezado espere seleccione a este contenedor y dirección que estoy haciendo columna. Ahora arrastra aquí este contenedor. Haga clic en el icono más, arrastrando un título título título dólar bajo Siletac color de texto blanco Duplica a esto y cambia el título a 99 bajo Sitec talla 55 y peso 900 Ahora selecciona a este contenedor y dirección fila y huecos ahora copia a esto, pegarlo aquí. Cambie el contenido debajo de la alineación de la pestaña de mosaico, laboratorio y tamaño familiar 27 lápiz peso 600. Ahora copia a este editor de texto, pegarlo aquí, cambiar el contenido. Bajo etiqueta de estilo, estoy haciendo que este color y tipografía pesen Ahora usaremos lista de iconos. Entonces, en lugar de hacer una nueva lista, solo estoy copiando a este pasado aquí, nos ahorra tiempo. Ahora solo cambiando el contenido. Bien. Ahora vamos a duplicar botón también. Copiaremos a botón también, cambiaremos el contenido bajo pestaña Avanzadas, eliminando este margen. De hecho, voy a dar el margen del top ten. Así que ahora puedes ver que nuestra primera tarjeta de precios está lista. Duplicar a esto y eliminar esto. Bien, ahora, publique, seleccione a este contenedor y el layout, aumente la altura mínima aquí. Ahora bien, esto está bien. Publica. Seleccione a este contenedor exterior. Aumentemos la brecha aquí, publiquemos 30 px y veamos la vista previa ahora. 49. Décimo contenedor: Oigan, chicos, ¿qué está pasando? Espero que estés disfrutando. Empecemos nuestra siguiente sección. Aumente la altura mínima bajo la pestaña de estilo. Color de fondo. Me pegué el abrigo. Copia a esto. Péguelo. Copia a esto, pegarlo. Cambiar el contenido. Bajo el tamaño de la pestaña de estilo 55 píxeles TCN más icono, arrastre un contenedor, fila de dirección Ahora PCN plus icon, buscando cuadro de imagen. Voy a tomar este elementos Cuadro de imagen des para que puedas ver cuando Zoom cuando me sobrepase sobre mi peso, para que puedas ver el efecto Zoom. Entonces elijo esta imagen y duplicarla. Bien, ahora selecciona este y área de contenido, estoy tomando caja flotante. Estas todas las opciones son muy buenas. Puedes explorar esto. Para que veas cuando coloco el cursor sobre mi imagen, el otro contenido se deleita abrir el cuerpo y el título y no quiero ningún icono, así que desactíralo, por favor la descripción Estoy borrando esto porque no podemos ver que no podemos ver el correctamente. Entonces puedes ver lo hermoso que se ve esto, ¿verdad? Alineación así se puede ajustar, pero yo estoy haciendo centro. Ahora, abre la opción de botón. Estoy deshabilitando esto, vaya a la pestaña Estilo, Altura, Estoy haciendo 80, Ancho, Estoy haciendo 80 Color de fondo negro. Abra la opción de imagen, radio de borde 20. Ahora puedes ver imágenes redondeadas, abrir la opción de cuerpo, tipo de borde sólido, acuarela. Ahora título. Así que el espaciamiento se puede ver. Ahora estoy haciendo diez, abre la tipografía, pops, 20 cerdo color blanco, abre el estilo flotante, abre el estilo flotante y en Over, hagámoslo uno a uno Ahora cuando pase el cursor sobre él, así se puede ver que esta altura está bien. Ahora solo vamos a duplicar esto y esta sección también está lista. Eliminar esto ahora solo estoy cambiando las imágenes. Listón esto bajo diseño, aumentar su altura. 50. Undécimo contenedor: Oigan, chicos, en este video, vamos a hacer estas dos hermosas secciones. Empecemos. Una pestaña Estilo, Color de fondo y copiar a esta pasta, Op y pegar. Cambiar el título bajo Estilo lágrima tamaño hago 65. Ahora haga clic en el icono más, arrastre un contenedor, y la fila de dirección haga clic en el icono O más, arrastre un contenedor más y duplique esto. Estoy arrastrando este widget a Image this one, resolución de imagen full dieta fight Hagámoslo lleno, objeto predeterminado con cubierta. Sí, esto está bien. El radio del borde lo convierte en un píxel. En primer lugar, seleccione a este contenedor y haga su fila de dirección. Ahora KCN plus icon, buscando cuadro de iconos. Voy a tomar Elements c icon box, éste. No quiero ningún icono, así que estoy deshabilitando esto Cambiar el título cambiar la descripción, cop en el modo de lectura, y quiero el botón, así que habilitarlo etiqueta, cambiar el título, estoy escribiendo. Y el icono deshabilitarlo, abre la configuración. Ahora ve a Sita, el color del suelo, haciéndolo transparente, relleno cero. No quiero que nadie por defecto, elimine los valores, abra la opción de contenido ahora, así que el color del texto, el color del título, haciéndolo blanco y sobre quién es el código de color así que ahora cuando colocaré el cursor sobre mi cuadro de iconos para que puedan ver el color del título obtiene color azul al pasar el cursor Así que ahora bajo tipografía Poppins talla 45, peso 700, ahora Bien, y copio el código de color y lo pego en O. Bien. Y bajo tipografía, Poppins tamaño 17 píxeles. Abre la opción botón, relleno, doy 20 ahora desvinculo del lado derecho, 40 y del lado izquierdo también 40, desvinculo el margen, desde la parte superior, doy 12 pixeles Abre la tipografía y espera yo un color de texto 600, estoy haciendo negro Color de fondo, haré dúo greint y border. Vamos a darle 40 pixeles. Ahora ve a Avanzado, pega el código para calificar fondo para botón, que puedas ver hermosos colores. Ahora duplique toda esta sección. Solo haremos pequeños cambios. Entonces hagámoslo. En primer lugar, flecí mi contenedor Prent, voy por debajo de Avanzado y dando el relleno desde la parte superior 50, no quiero estos encabezados, así Bien. Voy a cambiar el orden ahora. Seleccioné mi este contenedor, vaya bajo Avanzado y ordene, comience. Ahora solo voy a cambiar el texto aquí, cambiar la imagen, esta, seleccionar, y a este contenedor, ir por debajo de avanzado y ordenar, contenedor startT ahora no puedo seleccionarlo, abrir el navegador y desde aquí, seleccioné mi este contenedor Ve por debajo de Avanzado, y voy a dar la orientación horizontal más 60. Ahora esto está en el lugar correcto. Bien, para que veas con qué facilidad hicimos esta sección. Ahora haga clic en el icono más. Estoy tomando un contenedor aquí y ancho, estoy haciendo 26%. Ahora picon más icono, tomar un contenedor más dentro de este contenedor, justificado centro de contenido centro, pasar por debajo de Avanzado Estoy dando un relleno de diez píxeles desde exterior y es posición a desplazamiento absoluto orientación horizontal -55 y orientación vertical valor de desplazamiento de 45 píxeles Así que ahora haz clic en el icono más. Añadiendo un encabezado, cambiar el título 25 de diciembre, quemar el tia color negro, centro de alineación, pop pins tamaño 25. Ahora estoy haciendo su color blanco, peso 700. Ahora holgura a este contenedor. Quiero hacer el fondo degradado. Estoy pegando mi código aquí. Bien, selecciona al encabezado y ahora haz su color negro. Bien. Entonces ahora esta sección ya está lista. 51. Cómo hacer que tu sitio web sea responsivo: Video, haremos que nuestro sitio web tablet y móvil sean receptivos. Así que saltemos al retrato de tableta. Para que puedan ver, chicos, esto se ve de esta manera en la tableta. Corregimos primero a esta sección del lado derecho, así que seleccioné mi rumbo. Instalar pestaña tamaño I cap 65 pixel. Ahora ve a la pestaña Avanzado, quita el margen. Bien. Ahora seleccione a este encabezado. Lo estoy manteniendo tamaño 70 pixel. Ahora seleccione a este widget de editor de texto, elimine el margen. Ir por debajo de la etiqueta de estilo, voy a mantener su tamaño predeterminado y aumentar la altura de la línea. Mantuve 1.3 am altura de línea. Ahora seleccione a este contenedor exterior y su dirección estoy guardando columna y retire el céntimo Aline artículos haciendo comenzar aquí. Seleccione a este encabezado, vaya bajo la pestaña Estilo. Estoy manteniendo su tamaño de 23 píxeles. Hay demasiado espacio entre estos dos textos. Seleccionemos esto. Dando un margen desde el lado inferior, doy margen desde abajo -40. Ahora seleccione a este editor de texto, y aquí le daremos el margen desde la parte superior -20. Bien. Ahora, seleccione a esta búsqueda. Y ve a Style tech. Estoy manteniendo su altura 70. Seleccioné mi primer widget de contador y voy en etiqueta de estilo desde aquí número, y hagamos su tamaño. Lo hago tamaño orinal piger copy, y PasetylePast style, selecciono este widget, entro más apretado y a partir de aquí, más apretado y a partir de aquí, estoy Vamos a mantenerlo 1.1 am copiar y pegar, pegar estilo. Ahora, seleccione a esto. Lo estoy manteniendo tamaño 50 pixeles y altura de línea, vamos a disminuirlo. Mantuve 1.2 am altura de línea. Aquí, estas tarjetas se ven bien, pero estoy disminuyendo el relleno. Seleccioné mi contenedor de discos, voy a avanzado y desde arriba, estoy haciendo 30 guardé 30 acolchados de todos los lados. Mantuve 20 píxeles de todos los lados. Así que copia a este contenedor y pega estilo. Estilo de pasta. Bien. Ahora estas tres cartas se ven muy bonitas. Entonces seleccioné mi contenedor padre, y estoy disminuyendo la altura mínima. Mantengámoslo 710 píxeles. Seleccioné mi esta rúbrica, ir en etiqueta de estilo. A partir de aquí, mantengamos su tamaño de 50 píxeles. Seleccione este widget de editor de texto. Su tamaño me quedo con 15 píxeles. Ahora estoy seleccionando mi contenedor de discos, vaya en Advanctag ejecutando el pelícano desde la parte superior, estoy haciendo 50 y lado izquierdo, 20 pixeles o vamos a hacerlo Bien. Ahora seleccioné esta imagen. Tal vez vaya a Sta. Aquí me quedo con la altura 500. Este contenedor ya está bien. Seleccione a este encabezamiento ahora, vaya por debajo de Sta. su tamaño. Vamos a mantenerlo 55 pixel, seleccionar a este contenedor padre, disminuir su altura mínima, e 25 pixel. Ahora, selecciono mi este contenedor y gap haciendo 15 pixel. Bien. Ahora bien esta sección del lado izquierdo está bien. Slack a este encabezado, vaya en la pestaña de estilo. Bajo tipografía, lo estoy haciendo tamaño 40 pixel, holgura a este texto dwidgt aquí vamos a darle Bien, entonces ahora no necesitamos cambiar nada. Slack a este encabezado, vaya en Estilo toque. Aquí estoy haciendo su tamaño 45 pixeles, y altura de línea, estoy haciendo 1.4 am. Slack a este media alzo widget, altura que estoy haciendo aquí 400 está bien. Sujete a este contenedor padre, disminuye la altura mínima. Esto está bien. Slack to this testimonial carusel Width, hagámoslo 520 pixel y deslice por vista, nosotros también lo haremos Y ahora vamos a hacerlo con la pestaña 955 Estilo, abre la opción de burbuja. Y relleno, estoy haciendo aquí diez píxeles. Sí, esto está bien. Bien, ahora esta sección testimonial también se reduce la holgura al contenedor padre, disminuye la altura mínima, 620 está bien Aquí, no necesitamos cambiar nada, solo holgura a este rubro, disminuir el tamaño. Estoy haciendo 40 píxeles disminuir la altura de la línea que tapé a 1.3 am. Bien, entonces esta sección también está lista. Seleccione a este encabezado, vaya a la pestaña de estilo, tamaño, estoy haciendo 45 píxeles. Bien, aquí, seleccione a este contenedor exterior, vaya en pestaña avanzada. Vamos a dar el relleno aquí. Lado derecho estoy haciendo 150 pixel de dirección, estoy haciendo columna. Ahora ve a la pestaña Avanzado, desvincula el relleno. Desde el lado izquierdo, estoy haciendo 200 está bien y lo mismo con la izquierda. Ahora esta tarjeta se ve así, pero creo que debería dar más relleno, así que estoy haciendo 250 píxeles del lado izquierdo y derecho. Bien. Ahora bien, esto está bien. Sujete a este contenedor. Ir por debajo avanzado Desde aquí, también estoy dando al padding 30 pixel desde todos los lados. Ahora esta tarjeta se ve bien. Simplemente copie el estilo y pegue el estilo. Estilo pase. Por lo que esta sección también está lista. Ahora vamos a saltar sobre esta sección. Seleccione a esta dirección de contenedor. Estoy haciendo columna y voy a adelantar personal desvincular el relleno. Aquí también le daremos el relleno del lado izquierdo y derecho al píxel ti aquí. Entonces ahora se puede ver que esto también está listo. Desde arriba, estoy dando el acolchado en. Bien, entonces esta sección también se ve bien ahora. Seleccione a esta imagen y altura. Hagámoslo 370 pixel está bien de altura. Seleccione a este contenedor, y aquí estoy haciendo 210 pixel. Bien. Sí, esto está bien. Ahora, selecciona a esto, ve a Sytaabre la opción de contenido, y estoy haciendo 35 Bien. Aquí también haremos 35 fijador, y seleccionaremos a este contenedor Hazlo 210 pixel, selecciona a esta imagen. También lo mantendremos 370 píxeles. Bien. Por lo que esta sección también está lista ahora. Entonces ahora hagamos que nuestro sitio web sea receptivo para dispositivos móviles. Para que puedas ver cómo se ve nuestro sitio web en nuestro dispositivo móvil. En primer lugar , suelte este contenedor, vaya por debajo de avanzado y ordene hazlo. Slack a este encabezado, vaya bajo toque Estilo. Lo estoy haciendo 45 fijador. Ahora holgura a este rumbo. Ve bajo Grifo estilo. Hagámoslo 45 fijador aquí. Ahora selecciona al texto generativo y desvincula el margen. Desde abajo, estoy dando -25. Selecciona a este widget de texto, ve a Estilo t y haz que tenga un tamaño de 13 píxeles, selecciona a este contenedor. Aquí estoy haciendo el hueco cero, seleccione el texto. Aquí lo estoy haciendo tamaño 20 pixel. Seleccione a este widget de búsqueda, vaya en la pestaña estrella. Altura, estoy haciendo 50. Seleccione a este contenedor, vaya a la pestaña avanzada, desvincule el margen Y desde arriba, hagámoslo -40. Seleccione a este contenedor, vaya al diseño y haga que el hueco sea cero. Bien. Seleccione a este contenedor exterior. Bien. Ahora vamos a saltar sobre la segunda sección, holgura a este encabezamiento, hacerla tamaño. No necesitamos cambiar nada con tarjetas. ¿Bien? No necesitamos cambiarnos aquí. Además, solo disminuye el tamaño de este texto. Así que hazla pizza tamaño 35. Altura de la línea 1.3 am, holgura a este contenedor, hacen los huecos aquí pizza. Selecciona el contenedor, desvincula el relleno desde arriba 40 y desde abajo, desde abajo, vamos a darle 40 píxeles y desde el lado izquierdo, 20 píxeles Ahora, esta sección también está lista aquí, holgura esta imagen. Ve bajo Avanzado, desvincula el relleno. Seleccioné esta imagen, vaya por debajo de avanzado, abra el modo de respuesta. Aquí nos esconderemos en retrato móvil. Bien. Entonces esta imagen está bien porque movemos el margen. Entonces ahora selecciona este encabezado, hazlo tamaño 50 pixel, disminuye la altura de la línea. 1.3 am, hay mucho espacio, así que selecciona el contenedor pedent, disminuye la altura 490, selecciona este encabezado, ve a la pestaña de estilo, haz su tamaño 25 pixer, selecciona a este encabezado, haz su tamaño 20 pixero y selecciona Es tamaño, voy a hacer 20 pixel. Bien, seleccione el contenedor, aumente su altura mínima. 700 píxeles. Slack a este encabezado. Hazlo tamaño 30 pixel aquí, holgura al contenedor. Gap, estoy aumentando. Aquí, 32 píxeles y contenido justificado, hagámoslo centro. Sí, ahora, estos se ven bien. Bien. Ahora saltemos sobre esta sección, seleccione el tamaño del encabezado. Vamos a disminuirlo más. Entonces 38 píxeles, seleccione el texto. Lo estoy haciendo tamaño 11 pixel. ¿Bien? Y llevado a este rubro, hazlo de tamaño más pequeño. Hagámoslo 45 pizza, apegémonos a esto, pasemos por debajo del contenido y deslice por vista uno. Bien. Y con estoy haciendo aquí 340, necesitamos hacer algunos cambios aquí, ir en estiloa abrir la opción de contenido bajo tipografía Estoy haciendo la pizza tamaño 12. Bien, abre la opción de imagen. Estoy haciendo el tamaño aquí, 160 píxeles. Bien. Por lo que esta sección también está lista. Haga clic en el contenedor padre. Disminuir la altura, 510 píxeles, seleccionar a este encabezado su tamaño. Estoy haciendo 30 píxeles. No tenemos que ver con estos adfigus. Bien, así que selecciona esto ahora. Hagamos que tenga un tamaño de 30 píxeles, disminuya la altura de línea 1.3 píxeles. Bien. Ahora, seleccione al contenedor Souter, desvincule el relleno. Bien. Así que simplemente desvinculamos a este relleno y estas tarjetas de precios se ven muy hermosas en nuestro retrato móvil en nuestro dispositivo móvil Por lo que ahora seleccione a este rubro. Aquí, hagamos esta altura de línea de 40 píxeles, 1.2 am, seleccione al contenedor exterior, desvincule el relleno. Bien, para que veas que estos también se ven muy bien. Selecciona a este encabezado, hazlo tamaño 50 pixel, disminuye la altura de línea, 1:00 A.M. Y escóndelo aquí también, selecciona el contenedor. Ir por debajo de avance, sensible se escondió mientras retrato, seleccione a este contenedor, vaya bajo avanzado Responsive Hyden mobile portrait Bien, ahora minimice esto y vea. Esto se ve bien. Así que vean chicos lo hermoso se ve nuestro sitio web en el dispositivo móvil. O. Entonces espero que hayan disfrutado de la conferencia de hoy. Este fue nuestro video de hoy. En el siguiente video, haremos los menús, y lo haremos receptivos a esos menús. Gracias. 52. Encabezado y pie de página: Ahora vamos a crear nuestro encabezado y pie de página. Entonces hagamos nuestro encabezado primero. En primer lugar, crearemos menús. Entonces para esto, iremos a apariencia a menús. Da el nombre de tu menú, ubicación de visualización, menú principal y haz clic en crear Menú. Abra la opción de enlaces personalizados. Desde aquí, escriba la URL, hash, home, en texto home, haga clic en agregar al menú. Hash De esta manera, haz con offs De esta manera, crea otros menús también Ahora, crearemos nuestros encabezados para que las plantillas sean rápidas, vaya al creador de temas. Haga clic en encabezado. click en Añadir No Puedes seleccionar desde aquí, pero voy a hacer mi propio encabezado, clic en el icono más, y estoy eligiendo esta estructura desde aquí, contenido justificado, Centro artículos Aline, ir bajo SDA El color de fondo me quedo gris oscuro. Ahora, seleccione a este contenedor, contenido justificado, centro de líneas de pedido. Haga clic en el icono más, Drager Image Widget. De aquí, elige la Imagen. Elijo esta imagen, da clic en Consulado. Entonces este es mi logo. Resolución de imagen tonto bajo estilo ancho 100%, ancho máximo 100%. Bien. L este contenedor Centro centro, haga clic en el icono más, busque los menús de navegación. Elijo este kit de elementos menús de navegación, selecciono menú. Menú. Bien, entonces estos son los menús que nos encontramos, y a partir de aquí, elegiremos punto de interrupción receptivo Escogeremos la configuración del menú móvil, seleccionaremos desde aquí. Estoy eligiendo línea así que elijo este concierto de un clic. Bien. Este icono de hamburguesa Mostrar en el móvil. Ahora ve por debajo de Srta. Estoy haciendo el color blanco del menú. Entonces para esto abre los elementos del menú estilo elemento texto color, estoy haciendo blanco. Bien. Entonces ahora podemos ver los cambios. Color de fondo que estoy haciendo así, puedes seleccionar el color de fondo, pero lo estoy haciendo transparente. Radio fronterizo, estoy haciendo diez píxeles. Bien, ahora haz clic en hover. Color de fondo en hover, quiero el color amarillo Entonces cuando pase el cursor sobre mi menú, para que lo veas así, pero lo haré más atractivo Quiero el texto color negro sobre flotando. Bien, así que ahora se puede ver, haga clic en el color Bground activo en la posición activa Estoy copiando este código. Mantuve este color flotando y copié este color en activo Color de fondo, estoy haciendo y color de texto negro. A partir de aquí desde la tipografía, pop ins familiares. Ahora abre el envoltorio de menú. Se puede ajustar la altura del menú. Entonces me lo quedo con 70 70 pizza. Bien. No quiero hacer ningún cambio. Ahora seleccione a este contenedor. Centro y Centro. Haga clic en el icono más, buscando la caja de iconos. Me llevo esta. Elige el icono. Éste. Haga clic en concierto. Bien, y apilar Forma, círculo. Bien. Y título, llama a pedir ayuda. Bien, entonces este es el número de teléfono. Ve debajo de etiqueta de estilo, posición de icono, haciendo a la izquierda , centro de alineación vertical y espacio de iconos, 14 píxeles, para que puedas ajustarlo así. Entonces estoy haciendo 14 píxeles, abre la etiqueta del icono. Color primario, no haciendo ninguno. Quiero que el fondo sea transparente. Bien. Entonces no estoy haciendo nada con el color primario, sino el color secundario estoy haciendo tamaño 20 pixel. Ahora ve a la etiqueta de contenido. El color de cyto, estoy haciendo este color Abre la tipografía, pop ins, tamaño 15 píxeles. Bien, y abre la descripción. Descripción, lo estoy haciendo de color blanco puro y tipografía Bit 700. Bien. Ahora hagamos transparente el fondo. Así opción CSS personalizada, para que puedas ver el fondo degradado. Ahora bien, este es nuestro encabezado. Ahora, hagamos que nuestra tableta de cabecera y móvil sean receptivos. En Talt nuestro encabezado se ve así. No necesitamos cambiar con logo, pero vamos a corregir los menús debajo de ellos. Abre el estilo de elemento del menú en blanco captic normal. En esto, puedes ono puedes cambiar el color. Me estoy poniendo negro encima, bien. Y lo mismo con el activo Bien. Abre la tipografía. Estoy haciendo el tamaño de mis menús, 11 píxeles. Bien. Nuestros menús se ven bien. Minimizarlo. Y si nuestro encabezado se ve hermoso en tablet. Aquí quiero hacer una cosa, seleccionar el contenedor, pasar por debajo de avanzado, desenrollar el relleno, seleccionar este contenedor, desenrollar el relleno, seleccionar este contenedor, desenrollar Bien. Lo minimizo. Y si ahora está bien. Ahora pasa al modo móvil. Ahora hagamos que nuestro encabezado móvil sea receptivo. En primer lugar, estoy seleccionando mi este contenedor. Abra la opción de respuesta alta en Portrd móvil. ¿Bien? Ahora, seleccione a este contenedor, vaya debajo de la pestaña de diseño. Contenido justificado, haciéndola iniciar. A partir de aquí, comienzan las líneas de pedido. Y brecha cero. Bien. Y altura mínima haciendo Ancho Estoy haciendo 200 pixeles. Bien. Seleccioné el contenedor padre del icono de hamburguesa Ir por debajo de ancho de diseño ya es de 100 píxeles. A partir de aquí, líneas de pedido haciéndola al final. Entonces ahora este ícono de la hamburguesa está al final. Bien. Ancho, estoy haciendo 100 pixel. Bien, entonces ahora puedes ver nuestro ícono de Hamburguesa y este loco está en una fila Bofetea el contenedor padre, ve debajo de la pestaña de diseño, desvincula la brecha Espacio de columna, estoy haciendo 20 píxeles. Ahora, selecciona el ícono de la hamburguesa, ve al estilo. Abre el estilo Hamburguesa. En primer lugar, el color del icono de la hamburguesa. Hagámoslo blanco. Bien. Así que ahora podemos ver los cambios lo que necesitamos icono tamaño 20. Bien en Howard, en Hover, quiero que sea blanco Se puede ver en hover todavía es blanco y color de fondo, vamos a hacerlo negro Ropa toggle on Hover, puedes ver nuestro menú es medio móvil responsable, así que esto se ve muy bien Y cuando pasas el cursor sobre, puedes ver esta línea azul y fondo negro, que se ve muy bien Ahora volvamos. Nuestra cabeza está firme. Ahora solo impórtelo. Haga clic en Publicar. Agregar condición todo el sitio, Guardar y Cerrar. Bien. Ahora abre el sitio web, publica tu sitio web y vuelve a cargarlo. Para que puedan ver chicos lo hermoso que se ve nuestro encabezado. Quiero eso en el desplazamiento. Nuestro encabezado debe ser pegajoso. Así que haz clic en encabezado , suelta el contenedor padre, ve bajo la pestaña Avanzado. A partir de aquí, abre los efectos de movimiento, parte superior pegajosa. Bien. Ahora, minimice la barra. Cuando me desplazo a mi sitio web, puedes ver que nuestro encabezado está pegajoso en la parte superior. Y cuando pongo el cursor sobre mis menús, estos se ven increíbles Bien, entonces nuestro sitio web se ve muy bonito, ¿verdad? Lo que quiero ahora cuando haga clic en mi casa, debería redirigirme a mí en esa sección. Entonces para hacer esto, haga clic en AdditPage, copie la URL, asegúrese de no estar copiando a este hash Asegúrese de que está seleccionando el contenedor padre en Advanced Pegar el ID de CSS. Ahora selecciona a este contenedor, ve por debajo de Advancab, pega el ID CSS aquí, así que ve aquí, abre la sección Pero, copia la URL, pega ¿Bien? Esta es la sección de servicio. A Bien. Ahora publica tu sitio web. Vista previa. Creamos nuestro encabezado, y creamos el encabezado pegajoso. Vinculamos nuestros menús con las páginas, como puedes ver aquí. Entonces esto se ve muy hermoso. Así que ahora vamos a crear nuestro pie de página ahora. Entonces voy a volver aquí y de aquí, vaya a plantillas a TheIlderFro aquí, haga clic en Pie Haga clic en Agregar nuevo. Puedes elegir de aquí según tu necesidad. Estoy cancelando esto. Bien. Este es nuestro encabezado, y ahora aquí vamos a crear nuestro Pie de Página. Para Footer, estoy eligiendo esta estructura. En primer lugar, ir bajo etiqueta de estilo, y estoy haciendo el color de fondo gris oscuro bajo diseño. Ahora seleccione este contenedor, centro de contenido justificado y un inicio de línea de pedido. Haga clic en el icono más, widget de encabezado de Dagi aquí Ahora seleccione a este contenedor justificado los elementos de línea del centro de contenido y haga clic en Percon buscando iconos sociales, y voy a tomar este pro iconos sociales, ir por debajo de Syap Columna gap, estoy haciendo esto cero Row Gap 15, pick 15 y color que estoy haciendo aquí, puedes elegirlo. Estoy haciendo blanco. Y el color de fondo transparente y sobre el color negro, se puede ver el vuelo sobre mis iconos, los iconos son negros y el color de fondo blanco de esta manera y flotar la animación, voy a elegir único y animación, estoy haciendo triángulo Mira aquí este hermoso efecto. Esto se ve genial. Bien, entonces ahora abre el icono. Tamaño de icono, estoy haciendo 18 píxeles y tamaño de fondo, se puede ver el tamaño del fondo. Entonces estoy haciendo aquí 45. Bien, así que abajo cuando coloco el cursor sobre él. Entonces estos ahora son pequeños. Bien, entonces esto está hecho. Ahora haremos nuestras respuestas de encabezado, móvil y tablet. Entonces en TagtPortrait, nuestro pie de página se ve increíble. Ahora ve bajo retrato móvil. Seleccione a este contenedor. Alinee los artículos que haremos centro aquí. Nuestro pie de página también ahora es sensible móvil después de hacer esto, podemos publicar agregar condición todo el sitio y hacer clic en Guardar y Cerrar. Ahora vea nuestro sitio web. Entonces puedes ver aquí el pie de página al final. Esto es lindo. Ahora, después de hacer todo, solo publica tu sitio web y veamos a nuestro sitio web. Puedes ver aquí lo bonito está hecho nuestro sitio web y al final, puedes ver el pie de página.